Make fewer requests in getSubscriptionState()

src/api/subscriptions.ts

@@ -64,17 +64,21 @@ export class Subscription {
     this.price = price
   }
 
+  // Convert raw token amount to FixedNumber
+  formatAmount(value: BigNumber): FixedNumber {
+    return FixedNumber.fromValue(value, this.tokenDecimals)
+  }
+
   get pricePerMonthInt(): BigNumber {
     return this.price.mul(SECONDS_IN_MONTH)
   }
 
   get pricePerMonth(): FixedNumber {
-    return FixedNumber.fromValue(this.pricePerMonthInt, this.tokenDecimals)
+    return this.formatAmount(this.pricePerMonthInt)
   }
 
-  getExpirationDate(balance: FixedNumber): DateTime {
-    const price = FixedNumber.fromValue(this.price, this.tokenDecimals)
-    const seconds = balance.divUnsafe(price).toUnsafeFloat()
+  getExpirationDate(balance: BigNumber): DateTime {
+    const seconds = balance.div(this.price).toNumber()
     const now = DateTime.now()
     return now.plus({ seconds })
   }
@@ -107,9 +111,8 @@ export async function getSubscriptionInfo(
 }
 
 export interface SubscriptionState {
-  senderAddress: string;
-  senderBalance: FixedNumber;
-  recipientBalance: FixedNumber;
+  senderBalance: BigNumber;
+  recipientBalance: BigNumber;
 }
 
 export async function getSubscriptionState(
@@ -119,13 +122,11 @@ export async function getSubscriptionState(
   recipientAddress: string,
 ): Promise<SubscriptionState> {
   const adapter = await getContract(Contracts.Adapter, contractAddress, signer)
-  const tokenAddress = await adapter.subscriptionToken()
-  const token = await getContract(Contracts.ERC20, tokenAddress, signer)
-  const tokenDecimals = await token.decimals()
-  const [senderBalanceInt, recipientBalanceInt] = await adapter.getSubscriptionState(senderAddress, recipientAddress)
-  const senderBalance = FixedNumber.fromValue(senderBalanceInt, tokenDecimals)
-  const recipientBalance = FixedNumber.fromValue(recipientBalanceInt, tokenDecimals)
-  return { senderAddress, senderBalance, recipientBalance }
+  const [senderBalance, recipientBalance] = await adapter.getSubscriptionState(
+    senderAddress,
+    recipientAddress,
+  )
+  return { senderBalance, recipientBalance }
 }
 
 export async function makeSubscriptionPayment(

src/components/Subscription.vue

@@ -34,7 +34,7 @@
         </div>
         <div class="status">
           <template v-if="subscriptionState && !subscriptionState.senderBalance.isZero()">
-            <div>Your balance {{ subscriptionState.senderBalance }} {{ subscription.tokenSymbol }}</div>
+            <div>Your balance {{ subscription.formatAmount(subscriptionState.senderBalance) }} {{ subscription.tokenSymbol }}</div>
             <div>Subscription expires {{ subscription.getExpirationDate(subscriptionState.senderBalance).toLocaleString() }}</div>
           </template>
           <template v-else>You are not subscribed yet</template>
@@ -69,6 +69,7 @@
 </template>
 
 <script setup lang="ts">
+import { FixedNumber } from "ethers"
 import { onMounted, watch } from "vue"
 import { $, $$, $ref } from "vue/macros"
 
@@ -189,11 +190,12 @@ async function checkSubscription() {
   isLoading = false
 }
 
-function getPaymentAmount(): number {
+function getPaymentAmount(): FixedNumber {
   if (!subscription) {
-    return 0
+    return FixedNumber.from(0)
   }
-  return subscription.pricePerMonth.toUnsafeFloat() * paymentDuration
+  const amount = subscription.pricePerMonthInt.mul(paymentDuration)
+  return subscription.formatAmount(amount)
 }
 
 function canSubscribe(): boolean {

src/components/SubscriptionSetup.vue

@@ -12,7 +12,7 @@
         <div>Recipient address: {{ subscription.recipientAddress }}</div>
         <div>Token address: {{ subscription.tokenAddress }}</div>
         <div>Token symbol: {{ subscription.tokenSymbol }}</div>
-        <div>Price of one month: {{ subscription.pricePerMonth.round(2) }}</div>
+        <div>Price of one month: {{ subscription.pricePerMonth }}</div>
       </template>
       <template v-else>
         Subscription is not configured.
@@ -27,7 +27,7 @@
       <input v-model="subscriberAddress" placeholder="Subscriber address">
       <button class="btn" @click="onCheckSubsciptionState()">Check</button>
       <button class="btn" v-if="subscriptionState !== null" @click="onWithdrawReceived()">
-        Withdraw {{ subscriptionState.recipientBalance }} {{ subscription.tokenSymbol }}
+        Withdraw {{ subscription.formatAmount(subscriptionState.recipientBalance) }} {{ subscription.tokenSymbol }}
       </button>
     </div>
   </div>