FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Add refresh button to token balance block

Browse source
This commit is contained in:
silverpill 2022-07-18 21:39:45 +00:00
parent db9afb4855
commit 0ba41544be
2 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/assets/feather/refresh-ccw.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-ccw"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 402 B

25
src/components/Subscription.vue
View file

@ -61,10 +61,15 @@
v-if="tokenBalance !== null" v-if="tokenBalance !== null"
class="token-balance" class="token-balance"
:class="{ error: !canPay() }" :class="{ error: !canPay() }"
@click="refreshTokenBalance()"
> >
<label>You have</label> <label>You have</label>
<div>{{ subscription.formatAmount(tokenBalance) }} {{ subscription.tokenSymbol }}</div> <output :class="{ loading: isTokenBalanceLoading }">
{{ subscription.formatAmount(tokenBalance) }}
</output>
<span>{{ subscription.tokenSymbol }}</span>
<button @click.prevent="refreshTokenBalance()">
<img :src="require('@/assets/feather/refresh-ccw.svg')">
</button>
</div> </div>
</div> </div>
<div class="button-row"> <div class="button-row">
@ -142,13 +147,15 @@ const recipientEthereumAddress = recipient.getVerifiedEthereumAddress()
const sender = $ref<ProfileWrapper>(new ProfileWrapper(currentUser || guest)) const sender = $ref<ProfileWrapper>(new ProfileWrapper(currentUser || guest))
let senderEthereumAddress = $ref<string | null>(sender.getVerifiedEthereumAddress()) let senderEthereumAddress = $ref<string | null>(sender.getVerifiedEthereumAddress())
let { walletAddress, walletError, getSigner } = $(useWallet()) let { walletAddress, walletError, getSigner } = $(useWallet())
let isLoading = $ref(false)
let subscriptionConfigured = $ref<boolean | null>(null) let subscriptionConfigured = $ref<boolean | null>(null)
let subscription = $ref<Subscription | null>(null) let subscription = $ref<Subscription | null>(null)
let subscriptionState = $ref<SubscriptionState | null>(null) let subscriptionState = $ref<SubscriptionState | null>(null)
let tokenBalance = $ref<BigNumber | null>(null) let tokenBalance = $ref<BigNumber | null>(null)
const paymentDuration = $ref<number>(1) const paymentDuration = $ref<number>(1)
let isLoading = $ref(false)
let isTokenBalanceLoading = $ref(false)
onMounted(() => { onMounted(() => {
if (walletAddress && !walletError) { if (walletAddress && !walletError) {
// Load info immediately if wallet is already connected // Load info immediately if wallet is already connected
@ -244,7 +251,9 @@ async function refreshTokenBalance() {
return return
} }
const signer = getSigner() const signer = getSigner()
isTokenBalanceLoading = true
tokenBalance = await getTokenBalance(signer, subscription.tokenAddress) tokenBalance = await getTokenBalance(signer, subscription.tokenAddress)
isTokenBalanceLoading = false
} }
async function onMakeSubscriptionPayment() { async function onMakeSubscriptionPayment() {
@ -453,6 +462,16 @@ async function onCancelSubscription() {
.token-balance { .token-balance {
color: $secondary-text-color; color: $secondary-text-color;
output.loading {
opacity: 0.5;
}
img {
filter: $secondary-text-colorizer;
height: 1em;
min-width: 1em;
}
&.error { &.error {
color: $text-color; color: $text-color;
} }