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

web/satellite: add a button to claim wallet from storjscan

Browse Source 
Previously, a wallet is claimed automatically on opening the payment methods page.
This will result in users who may not even use the wallets claiming them.
This change introduces a button that will be clicked before a wallet is claimed.

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

Change-Id: Iab2020d80a30315b6b43ad93d33a984663770279
This commit is contained in:
Wilfred Asomani 2022-11-16 20:26:38 +00:00 committed by Storj Robot
parent 5ef109f45a
commit 6fe89d5244
3 changed files with 180 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -13,7 +13,7 @@
v-if="nativePayIsLoading"
/>
<add-token-card-native
v-else-if="nativeTokenPaymentsEnabled && wallet.address"
v-else-if="nativeTokenPaymentsEnabled"
@showTransactions="showTransactionsTable"
/>
<add-token-card
@ -263,7 +263,7 @@ export default class PaymentMethods extends Vue {
public showTransactions = false;
public displayedHistory: NativePaymentHistoryItem[] = [];
public transactionCount = 0;
public nativePayIsLoading = true;
public nativePayIsLoading = false;
public pageSize = 10;
/**
@ -283,10 +283,6 @@ export default class PaymentMethods extends Vue {
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public mounted(): void {
this.claimWallet();
}
private get wallet(): Wallet {
return this.$store.state.paymentsModule.wallet;
}
@ -296,17 +292,6 @@ export default class PaymentMethods extends Vue {
this.$notify.success('Address copied to your clipboard');
}
public async claimWallet(): Promise<void> {
try {
if (this.nativeTokenPaymentsEnabled && !this.wallet.address)
await this.$store.dispatch(PAYMENTS_ACTIONS.CLAIM_WALLET);
} catch (error) {
await this.$notify.error(error.message);
} finally {
this.nativePayIsLoading = false;
}
}
public async fetchHistory(): Promise<void> {
this.nativePayIsLoading = true;
try {

189
web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
View File

@ -2,68 +2,90 @@
// See LICENSE for copying information.
<template>
<div v-if="wallet.address" class="token">
<div class="token">
<div class="token__icon">
<div class="token__icon__wrapper">
<StorjLarge />
</div>
</div>
<div class="token__title-area">
<div class="token__title-area__small-icon">
<StorjSmall />
</div>
<div class="token__title-area__default-wrapper">
<p class="token__title-area__default-wrapper__label">Default</p>
<VInfo>
<template #icon>
<InfoIcon />
</template>
<template #message>
<p class="token__title-area__default-wrapper__message">
If the STORJ token balance runs out, the default credit card will be charged.
<a
class="token__title-area__default-wrapper__message__link"
href=""
target="_blank"
rel="noopener noreferrer"
>
Learn More
</a>
</p>
</template>
</VInfo>
</div>
</div>
<div class="token__info-area">
<div class="token__info-area__option">
<h2 class="token__info-area__option__title">STORJ Token Deposit Address</h2>
<p class="token__info-area__option__value">{{ wallet.address }}</p>
</div>
<div class="token__info-area__option">
<h2 class="token__info-area__option__title">Total Balance</h2>
<p class="token__info-area__option__value">{{ wallet.balance.value }}</p>
</div>
</div>
<div class="token__action-area">
<VButton
class="token__action-area__history-btn"
label="See transactions"
:is-transparent="true"
height="32px"
font-size="13px"
border-radius="6px"
:on-press="() => $emit('showTransactions')"
/>
<v-button
label="Add funds"
width="96px"
<div v-if="isLoading" class="token__loader-container">
<v-loader />
</div>
<div v-else-if="!wallet.address" class="token__add-funds">
<h3 class="token__add-funds__title">
STORJ Token
</h3>
<p class="token__add-funds__info">Deposit STORJ Token to your account and receive a 10% bonus, or $10 for every $100.</p>
<!-- Claim wallet button -->
<VButton
label="Add STORJ Tokens"
width="140px"
height="32px"
font-size="13px"
border-radius="6px"
:on-press="onAddTokensClick"
:on-press="claimWalletClick"
/>
</div>
<template v-else>
<div class="token__title-area">
<div class="token__title-area__small-icon">
<StorjSmall />
</div>
<div class="token__title-area__default-wrapper">
<p class="token__title-area__default-wrapper__label">Default</p>
<VInfo>
<template #icon>
<InfoIcon />
</template>
<template #message>
<p class="token__title-area__default-wrapper__message">
If the STORJ token balance runs out, the default credit card will be charged.
<a
class="token__title-area__default-wrapper__message__link"
href=""
target="_blank"
rel="noopener noreferrer"
>
Learn More
</a>
</p>
</template>
</VInfo>
</div>
</div>
<div class="token__info-area">
<div class="token__info-area__option">
<h2 class="token__info-area__option__title">STORJ Token Deposit Address</h2>
<p class="token__info-area__option__value">{{ wallet.address }}</p>
</div>
<div class="token__info-area__option">
<h2 class="token__info-area__option__title">Total Balance</h2>
<p class="token__info-area__option__value">{{ wallet.balance.value }}</p>
</div>
</div>
<div class="token__action-area">
<VButton
class="token__action-area__history-btn"
label="See transactions"
:is-transparent="true"
height="32px"
font-size="13px"
border-radius="6px"
:on-press="() => $emit('showTransactions')"
/>
<v-button
label="Add funds"
width="96px"
height="32px"
font-size="13px"
border-radius="6px"
:on-press="onAddTokensClick"
/>
</div>
</template>
</div>
</template>
@ -74,8 +96,10 @@ import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { Wallet } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import VInfo from '@/components/common/VInfo.vue';
import InfoIcon from '@/../static/images/billing/blueInfoIcon.svg';
@ -89,12 +113,39 @@ import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
StorjSmall,
StorjLarge,
VButton,
VLoader,
VInfo,
},
})
export default class AddTokenCardNative extends Vue {
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public isLoading = false;
public async claimWalletClick(): Promise<void> {
this.isLoading = true;
try {
await this.claimWallet();
// wallet claimed; open token modal
this.onAddTokensClick();
} catch (error) {
await this.$notify.error(error.message);
}
this.isLoading = false;
}
mounted(): void {
if (!this.wallet.address) {
// try to get an existing wallet for this user. this will not claim a wallet.
this.$store.dispatch(PAYMENTS_ACTIONS.GET_WALLET);
}
}
public async claimWallet(): Promise<void> {
if (!this.wallet.address)
await this.$store.dispatch(PAYMENTS_ACTIONS.CLAIM_WALLET);
}
/**
* Holds on add tokens button click logic.
* Triggers Add funds popup.
@ -139,6 +190,18 @@ export default class AddTokenCardNative extends Vue {
}
}
&__loader-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
:deep(.loader) {
padding: 0;
}
}
&__title {
font-family: 'font_bold', sans-serif;
font-size: 18px;
@ -209,6 +272,30 @@ export default class AddTokenCardNative extends Vue {
}
}
&__add-funds {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
&__title {
font-family: 'font_bold', sans-serif;
}
&__info {
font-size: 14px;
line-height: 20px;
color: #000;
z-index: 1;
a {
color: var(--c-blue-3);
text-decoration: underline !important;
}
}
}
&__info-area {
position: relative;
display: flex;

89
web/satellite/src/components/modals/AddTokenFundsModal.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<VModal :on-close="closeModal">
<VModal v-if="wallet.address" :on-close="closeModal">
<template #content>
<div class="modal">
<h1 class="modal__title" aria-roledescription="modal-title">
@ -11,45 +11,42 @@
<p class="modal__info">
Send STORJ Tokens to the following deposit address to credit your Storj DCS account:
</p>
<VLoader v-if="isLoading" class="modal__loader" width="100px" height="100px" />
<template v-else>
<div class="modal__qr">
<canvas ref="canvas" class="modal__qr__canvas" />
</div>
<div class="modal__label">
<h2 class="modal__label__text">Deposit Address</h2>
<VInfo class="modal__label__info">
<template #icon>
<InfoIcon />
</template>
<template #message>
<p class="modal__label__info__msg">
This is a Storj deposit address generated just for you.
<a
class="modal__label__info__msg__link"
href=""
target="_blank"
rel="noopener noreferrer"
>
Learn more
</a>
</p>
</template>
</VInfo>
</div>
<div class="modal__address">
<p class="modal__address__value">{{ wallet.address }}</p>
<VButton
class="modal__address__copy-button"
label="Copy"
width="84px"
height="32px"
font-size="13px"
icon="copy"
:on-press="onCopyAddressClick"
/>
</div>
</template>
<div class="modal__qr">
<canvas ref="canvas" class="modal__qr__canvas" />
</div>
<div class="modal__label">
<h2 class="modal__label__text">Deposit Address</h2>
<VInfo class="modal__label__info">
<template #icon>
<InfoIcon />
</template>
<template #message>
<p class="modal__label__info__msg">
This is a Storj deposit address generated just for you.
<a
class="modal__label__info__msg__link"
href=""
target="_blank"
rel="noopener noreferrer"
>
Learn more
</a>
</p>
</template>
</VInfo>
</div>
<div class="modal__address">
<p class="modal__address__value">{{ wallet.address }}</p>
<VButton
class="modal__address__copy-button"
label="Copy"
width="84px"
height="32px"
font-size="13px"
icon="copy"
:on-press="onCopyAddressClick"
/>
</div>
<VButton
width="194px"
height="48px"
@ -75,12 +72,10 @@ import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { Wallet } from '@/types/payments';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
import VInfo from '@/components/common/VInfo.vue';
import VLoader from '@/components/common/VLoader.vue';
import InfoIcon from '@/../static/images/payments/infoIcon.svg';
@ -90,12 +85,10 @@ import InfoIcon from '@/../static/images/payments/infoIcon.svg';
VButton,
VModal,
VInfo,
VLoader,
InfoIcon,
},
})
export default class AddTokenFundsModal extends Vue {
private isLoading = this.wallet.address === '';
public $refs!: {
canvas: HTMLCanvasElement;
@ -106,13 +99,11 @@ export default class AddTokenFundsModal extends Vue {
* Fetches wallet if necessary and renders QR code.
*/
public async mounted(): Promise<void> {
if (!this.$refs.canvas) {
return;
}
try {
if (!this.wallet.address) {
await this.$store.dispatch(PAYMENTS_ACTIONS.CLAIM_WALLET);
}
await QRCode.toCanvas(this.$refs.canvas, this.wallet.address);
this.isLoading = false;
} catch (error) {
await this.$notify.error(error.message);
}