Add refresh button to token balance block

src/assets/feather/refresh-ccw.svg

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

src/components/Subscription.vue

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