JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite/vuetify-poc: enable claiming wallets

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

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

Change-Id: Ifc89b586c0e3ed876905ff0a5b270e718cbb689c
This commit is contained in:
Wilfred Asomani 2023-08-16 17:04:52 +00:00 committed by Storj Robot
parent 67371c43bd
commit fecaa6a71a
2 changed files with 132 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue Normal file
View File

@ -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>

25
web/satellite/vuetify-poc/src/views/Billing.vue
View File

@ -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';