Show token symbol on subscription setup page

src/api/subscriptions.ts

@@ -11,15 +11,30 @@ import { Contracts, getContract } from "./contracts"
 const SECONDS_IN_DAY = 3600 * 24
 const SECONDS_IN_MONTH = SECONDS_IN_DAY * 30
 
-export async function getPricePerSec(
+export interface SubscriptionToken {
+  address: string;
+  symbol: string;
+  decimals: string;
+}
+
+export async function getSubscriptionToken(
   contractAddress: string,
   signer: Signer,
-  pricePerMonth: number,
-): Promise<BigNumber> {
+): Promise<SubscriptionToken> {
   const adapter = await getContract(Contracts.SubscriptionAdapter, contractAddress, signer)
   const tokenAddress = await adapter.subscriptionToken()
   const token = await getContract(Contracts.ERC20, tokenAddress, signer)
-  const tokenDecimals = await token.decimals()
+  return {
+    address: tokenAddress,
+    symbol: await token.symbol(),
+    decimals: await token.decimals(),
+  }
+}
+
+export function getPricePerSec(
+  pricePerMonth: number,
+  tokenDecimals: number,
+): BigNumber {
   const pricePerMonthInt = floatToBigNumber(pricePerMonth, tokenDecimals)
   return pricePerMonthInt.div(SECONDS_IN_MONTH)
 }

src/components/SubscriptionSetup.vue

@@ -22,7 +22,7 @@
       <div class="price">
         <label for="price">Price</label>
         <input type="number" id="price" v-model="subscriptionPrice" min="0.00">
-        <span>per month</span>
+        <span>{{ subscriptionToken.symbol }} per month</span>
       </div>
       <button
         class="btn primary"
@@ -53,9 +53,11 @@ import {
   getSubscriptionAuthorization,
   getSubscriptionInfo,
   getSubscriptionState,
+  getSubscriptionToken,
   withdrawReceived,
   Subscription,
   SubscriptionState,
+  SubscriptionToken,
 } from "@/api/subscriptions"
 import { useWallet } from "@/composables/wallet"
 import { useInstanceInfo } from "@/store/instance"
@@ -73,6 +75,7 @@ const { connectWallet: connectEthereumWallet, getSigner } = useWallet()
 const profileEthereumAddress = getVerifiedEthereumAddress(props.profile)
 const subscriptionPrice = $ref<number>(1)
 let { walletAddress, walletError } = $(useWallet())
+let subscriptionToken = $ref<SubscriptionToken | null>(null)
 let subscriptionConfigured = $ref<boolean | null>(null)
 let subscription = $ref<Subscription | null>(null)
 let subscriptionState = $ref<SubscriptionState | null>(null)
@@ -135,13 +138,18 @@ async function checkSubscription() {
     subscriptionConfigured = true
   } else {
     subscriptionConfigured = false
+    subscriptionToken = await getSubscriptionToken(
+      instance.blockchain_contract_address,
+      signer,
+    )
   }
 }
 
 function canConfigureSubscription(): boolean {
   return (
     profileEthereumAddress !== null &&
-    subscriptionConfigured === false
+    subscriptionConfigured === false &&
+    subscriptionToken !== null
   )
 }
 
@@ -149,16 +157,16 @@ async function onConfigureSubscription() {
   if (
     profileEthereumAddress === null ||
     !instance ||
-    !instance.blockchain_contract_address
+    !instance.blockchain_contract_address ||
+    subscriptionToken === null
   ) {
     return
   }
   const signer = getSigner()
   const authToken = ensureAuthToken()
-  const pricePerSec = await getPricePerSec(
-    instance.blockchain_contract_address,
-    signer,
+  const pricePerSec = getPricePerSec(
     subscriptionPrice,
+    subscriptionToken.decimals,
   )
   const signature = await getSubscriptionAuthorization(authToken, pricePerSec)
   const transaction = await configureSubscription(