Refactor Subscription class

src/api/subscriptions.ts

@@ -48,7 +48,7 @@ export class Subscription {
   tokenAddress: string;
   tokenSymbol: string;
   private tokenDecimals: number;
-  private _price: BigNumber; // per second
+  private price: BigNumber; // per second
 
   constructor(
     recipientAddress: string,
@@ -61,16 +61,19 @@ export class Subscription {
     this.tokenAddress = tokenAddress
     this.tokenSymbol = tokenSymbol
     this.tokenDecimals = tokenDecimals
-    this._price = price
+    this.price = price
   }
 
-  get price(): FixedNumber {
-    const pricePerMonth = this._price.mul(SECONDS_IN_MONTH)
-    return FixedNumber.fromValue(pricePerMonth, this.tokenDecimals).round(2)
+  get pricePerMonthInt(): BigNumber {
+    return this.price.mul(SECONDS_IN_MONTH)
+  }
+
+  get pricePerMonth(): FixedNumber {
+    return FixedNumber.fromValue(this.pricePerMonthInt, this.tokenDecimals)
   }
 
   getExpirationDate(balance: FixedNumber): DateTime {
-    const price = FixedNumber.fromValue(this._price, this.tokenDecimals)
+    const price = FixedNumber.fromValue(this.price, this.tokenDecimals)
     const seconds = balance.divUnsafe(price).toUnsafeFloat()
     const now = DateTime.now()
     return now.plus({ seconds })
@@ -129,14 +132,13 @@ export async function makeSubscriptionPayment(
   contractAddress: string,
   signer: Signer,
   recipientAddress: string,
+  amount: BigNumber,
 ): Promise<TransactionResponse> {
   const adapter = await getContract(Contracts.Adapter, contractAddress, signer)
   const subscriptionAddress = await adapter.subscription()
   const subscription = await getContract(Contracts.Subscription, subscriptionAddress, signer)
   const tokenAddress = await adapter.subscriptionToken()
   const token = await getContract(Contracts.ERC20, tokenAddress, signer)
-  const subscriptionPrice = await adapter.getSubscriptionPrice(recipientAddress)
-  const amount = subscriptionPrice.mul(SECONDS_IN_MONTH)
   const allowance = await token.allowance(
     signer.getAddress(),
     subscription.address,

src/components/Subscription.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.price }}</div>
+        <div>Price of one month: {{ subscription.pricePerMonth.round(2) }}</div>
         <template v-if="subscriptionState">
           <div>Your address: {{ subscriptionState.senderAddress }}</div>
           <div>Your balance: {{ subscriptionState.senderBalance }}</div>
@@ -128,15 +128,18 @@ async function onMakeSubscriptionPayment() {
   if (
     !instance?.blockchain_contract_address ||
     !recipientEthereumAddress ||
-    !walletAddress
+    !walletAddress ||
+    !subscription
   ) {
     return
   }
   const signer = getWeb3Provider().getSigner()
+  const amount = subscription.pricePerMonthInt
   const transaction = await makeSubscriptionPayment(
     instance.blockchain_contract_address,
     signer,
     recipientEthereumAddress,
+    amount,
   )
   await transaction.wait()
   subscriptionState = await getSubscriptionState(

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.price }}</div>
+        <div>Price of one month: {{ subscription.pricePerMonth.round(2) }}</div>
       </template>
       <template v-else>
         Subscription is not configured.