Show subscriber's balance on subscription page

src/api/contracts.ts

@@ -6,7 +6,7 @@ import { http } from "./common"
 export enum Contracts {
   Adapter = "IAdapter",
   Subscription = "ISubscription",
-  ERC20 = "IERC20",
+  ERC20 = "IERC20Metadata",
 }
 
 async function getContractAbi(contractName: string): Promise<any> {

src/api/subscriptions.ts

@@ -2,7 +2,7 @@ import { BigNumber, FixedNumber, Signer } from "ethers"
 import { TransactionResponse } from "@ethersproject/abstract-provider"
 
 import { BACKEND_URL } from "@/constants"
-import { EthereumSignature } from "@/utils/ethereum"
+import { ethereumAddressMatch, EthereumSignature } from "@/utils/ethereum"
 import { http } from "./common"
 import { Contracts, getContract } from "./contracts"
 
@@ -40,8 +40,11 @@ export async function configureSubscription(
 
 export interface Subscription {
   recipientAddress: string;
-  token: string;
+  tokenAddress: string;
+  tokenSymbol: string;
   price: FixedNumber;
+  senderAddress: string | null;
+  senderBalance: FixedNumber | null;
 }
 
 const SECONDS_IN_MONTH = 3600 * 24 * 30
@@ -55,13 +58,27 @@ export async function getSubscriptionInfo(
   const result = await adapter.isSubscriptionConfigured(recipientAddress)
   if (result === true) {
     const tokenAddress = await adapter.subscriptionToken()
-    const price = await adapter.getSubscriptionPrice(recipientAddress)
-    const pricePerMonth = price.mul(SECONDS_IN_MONTH)
-    const priceDec = FixedNumber.fromValue(pricePerMonth, 18).round(2)
+    const token = await getContract(Contracts.ERC20, tokenAddress, signer)
+    const tokenSymbol = await token.symbol()
+    const tokenDecimals = await token.decimals()
+    const priceInt = await adapter.getSubscriptionPrice(recipientAddress)
+    const pricePerMonth = priceInt.mul(SECONDS_IN_MONTH)
+    const price = FixedNumber.fromValue(pricePerMonth, tokenDecimals).round(2)
+    const signerAddress = await signer.getAddress()
+    let senderAddress = null
+    let senderBalance = null
+    if (!ethereumAddressMatch(signerAddress, recipientAddress)) {
+      senderAddress = signerAddress
+      const [senderBalanceInt] = await adapter.getSubscriptionState(senderAddress, recipientAddress)
+      senderBalance = FixedNumber.fromValue(senderBalanceInt, tokenDecimals).round(2)
+    }
     return {
       recipientAddress,
-      token: tokenAddress,
-      price: priceDec,
+      tokenAddress,
+      tokenSymbol,
+      price,
+      senderAddress,
+      senderBalance,
     }
   } else {
     return null

src/utils/ethereum.ts

@@ -1,6 +1,10 @@
 import { Signer } from "ethers"
 import { Web3Provider } from "@ethersproject/providers"
 
+export function ethereumAddressMatch(address1: string, address2: string): boolean {
+  return address1.toLowerCase() === address2.toLowerCase()
+}
+
 export function getWeb3Provider(): Web3Provider {
   const provider = (window as any).ethereum
   return new Web3Provider(provider)

src/views/Subscription.vue

@@ -10,8 +10,13 @@
       <div class="info" v-if="subscriptionConfigured !== null">
         <template v-if="subscription">
           <div>Recipient address: {{ subscription.recipientAddress }}</div>
-          <div>Token address: {{ subscription.token }}</div>
+          <div>Token address: {{ subscription.tokenAddress }}</div>
+          <div>Token symbol: {{ subscription.tokenSymbol }}</div>
           <div>Price of one month: {{ subscription.price }}</div>
+          <template v-if="subscription.senderAddress">
+            <div>Your address: {{ subscription.senderAddress }}</div>
+            <div>Your balance: {{ subscription.senderBalance }}</div>
+          </template>
         </template>
         <template v-else-if="isCurrentUser()">
           Subscription is not configured.
@@ -184,7 +189,13 @@ async function onMakeSubscriptionPayment() {
   if (!signer) {
     return
   }
-  await makeSubscriptionPayment(
+  const transaction = await makeSubscriptionPayment(
+    instance.blockchain_contract_address,
+    signer,
+    profileEthereumAddress,
+  )
+  await transaction.wait()
+  subscription = await getSubscriptionInfo(
     instance.blockchain_contract_address,
     signer,
     profileEthereumAddress,