From fecaa6a71a6f3a5bf673842258b093e4868f151d Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Wed, 16 Aug 2023 17:04:52 +0000
Subject: [PATCH] web/satellite/vuetify-poc: enable claiming wallets

This change adds the ability to claim STORJ wallets and display token
balance.

Issue: https://github.com/storj/storj/issues/6096

Change-Id: Ifc89b586c0e3ed876905ff0a5b270e718cbb689c
---
 .../components/StorjTokenCardComponent.vue    | 125 ++++++++++++++++++
 .../vuetify-poc/src/views/Billing.vue         |  25 +---
 2 files changed, 132 insertions(+), 18 deletions(-)
 create mode 100644 web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue

diff --git a/web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue b/web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue
new file mode 100644
index 000000000..ad256de2a
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue
@@ -0,0 +1,125 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-card title="STORJ Token" variant="flat" :border="true" rounded="xlg">
+        <v-card-text>
+            <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">STORJ</v-chip>
+            <v-divider class="my-4" />
+            <p>Deposit Address</p>
+            <v-chip rounded color="default" variant="text" class="font-weight-bold mt-2 px-0" @click="copyAddress">
+                {{ shortAddress || '-------' }}
+                <v-tooltip
+                    v-if="wallet.address"
+                    activator="parent"
+                    location="top"
+                >
+                    {{ wallet.address }}
+                </v-tooltip>
+            </v-chip>
+            <v-divider class="my-4" />
+            <p>Total Balance</p>
+            <v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">{{ balance || '------' }}</v-chip>
+            <v-divider class="my-4" />
+            <v-btn v-if="wallet.address" variant="flat" color="success" size="small" :loading="isLoading" class="mr-2">+ Add STORJ Tokens</v-btn>
+            <v-btn v-else variant="flat" color="success" size="small" :loading="isLoading" @click="claimWalletClick">Create New Wallet</v-btn>
+            <v-btn v-if="wallet.address" variant="outlined" color="default" size="small" :loading="isLoading" @click="emit('historyClicked')">View Transactions</v-btn>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { VBtn, VCard, VCardText, VChip, VDivider, VTooltip } from 'vuetify/components';
+import { computed, onMounted } from 'vue';
+
+import { Wallet } from '@/types/payments';
+import { useLoading } from '@/composables/useLoading';
+import { useBillingStore } from '@/store/modules/billingStore';
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useNotify } from '@/utils/hooks';
+
+const billingStore = useBillingStore();
+const notify = useNotify();
+const { isLoading, withLoading } = useLoading();
+
+const emit = defineEmits(['historyClicked']);
+
+/**
+ * Returns shortened wallet address.
+ */
+const shortAddress = computed((): string => {
+    if (!wallet.value.address) {
+        return '';
+    }
+    const addr = wallet.value.address;
+    return `${addr.substring(0, 6)} . . . ${addr.substring(addr.length - 4, addr.length)}`;
+});
+
+/**
+ * Returns a formatted wallet balance from store.
+ */
+const balance = computed((): string => {
+    if (!wallet.value.address) {
+        return '';
+    }
+    return '$' + wallet.value.balance.value.toLocaleString();
+});
+
+/**
+ * Returns wallet from store.
+ */
+const wallet = computed((): Wallet => {
+    return billingStore.state.wallet as Wallet;
+});
+
+/**
+ * Copies the wallet address.
+ */
+function copyAddress(): void {
+    if (!wallet.value.address) {
+        return;
+    }
+    navigator.clipboard.writeText(wallet.value.address);
+}
+
+/**
+ * getWallet tries to get an existing wallet for this user. this will not claim a wallet.
+ */
+function getWallet(): void {
+    if (wallet.value.address) {
+        return;
+    }
+
+    withLoading(async () => {
+        await billingStore.getWallet().catch(_ => {});
+    });
+}
+
+/**
+ * claimWallet claims a wallet for the current account.
+ */
+async function claimWallet(): Promise<void> {
+    if (wallet.value.address) {
+        return;
+    }
+    await billingStore.claimWallet();
+}
+
+/**
+ * Called when "Create New Wallet" button is clicked.
+ */
+function claimWalletClick(): void {
+    withLoading(async () => {
+        try {
+            await claimWallet();
+            notify.success('Wallet created successfully.');
+        } catch (error) {
+            notify.notifyError(error, AnalyticsErrorEventSource.BILLING_STORJ_TOKEN_CONTAINER);
+        }
+    });
+}
+
+onMounted(() => {
+    getWallet();
+});
+</script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
index 7cf500367..0c3a44c2a 100644
--- a/web/satellite/vuetify-poc/src/views/Billing.vue
+++ b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -125,21 +125,7 @@
             <v-window-item>
                 <v-row>
                     <v-col cols="12" sm="4">
-                        <v-card title="STORJ Token" variant="flat" :border="true" rounded="xlg">
-                            <v-card-text>
-                                <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">STORJ</v-chip>
-                                <!-- <v-chip rounded color="success" variant="tonal" class="font-weight-bold mr-2">Primary</v-chip> -->
-                                <v-divider class="my-4" />
-                                <p>Deposit Address</p>
-                                <v-chip rounded color="default" variant="text" class="font-weight-bold mt-2 pl-0">0x0683 . . . 2759</v-chip>
-                                <v-divider class="my-4" />
-                                <p>Total Balance</p>
-                                <v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">$5,284</v-chip>
-                                <v-divider class="my-4" />
-                                <v-btn variant="flat" color="success" size="small" class="mr-2">+ Add STORJ Tokens</v-btn>
-                                <v-btn variant="outlined" color="default" size="small" class="mr-2">View Transactions</v-btn>
-                            </v-card-text>
-                        </v-card>
+                        <StorjTokenCardComponent @historyClicked="goToTransactionsTab" />
                     </v-col>
 
                     <v-col v-for="(card, i) in creditCards" :key="i" cols="12" sm="4">
@@ -253,8 +239,6 @@ import {
     VChip,
     VDivider,
     VBtn,
-    VExpansionPanels,
-    VExpansionPanel,
     VTextField,
     VProgressCircular,
     VIcon,
@@ -273,8 +257,9 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
 import CreditCardComponent from '@poc/components/CreditCardComponent.vue';
 import AddCreditCardComponent from '@poc/components/AddCreditCardComponent.vue';
 import UsageAndChargesComponent from '@poc/components/billing/UsageAndChargesComponent.vue';
+import StorjTokenCardComponent from '@poc/components/StorjTokenCardComponent.vue';
 
-const tab = ref<string>('Overview');
+const tab = ref(0);
 const search = ref<string>('');
 const selected = ref([]);
 
@@ -383,6 +368,10 @@ const isCouponActive = computed((): boolean => {
     return !!c && (c.duration === 'forever' || (!!c.expiresAt && now < c.expiresAt.getTime()));
 });
 
+function goToTransactionsTab() {
+    tab.value = 2;
+}
+
 function getColor(status: string): string {
     if (status === 'Paid') return 'success';
     if (status === 'Pending') return 'warning';