Show subscription price and token address on subscription page

src/api/subscriptions.ts

@@ -1,4 +1,4 @@
-import { Signer } from "ethers"
+import { BigNumber, FixedNumber, Signer } from "ethers"
 import { TransactionResponse } from "@ethersproject/abstract-provider"
 
 import { BACKEND_URL } from "@/constants"
@@ -38,14 +38,34 @@ export async function configureSubscription(
   return transaction
 }
 
-export async function isSubscriptionConfigured(
+export interface Subscription {
+  recipientAddress: string;
+  token: string;
+  price: FixedNumber;
+}
+
+const SECONDS_IN_MONTH = 3600 * 24 * 30
+
+export async function getSubscriptionInfo(
   contractAddress: string,
   signer: Signer,
   recipientAddress: string,
-): Promise<boolean> {
+): Promise<Subscription | null> {
   const adapter = await getContract(Contracts.Adapter, contractAddress, signer)
   const result = await adapter.isSubscriptionConfigured(recipientAddress)
-  return result
+  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)
+    return {
+      recipientAddress,
+      token: tokenAddress,
+      price: priceDec,
+    }
+  } else {
+    return null
+  }
 }
 
 export async function makeSubscriptionPayment(
@@ -59,8 +79,7 @@ export async function makeSubscriptionPayment(
   const tokenAddress = await adapter.subscriptionToken()
   const token = await getContract(Contracts.ERC20, tokenAddress, signer)
   const subscriptionPrice = await adapter.getSubscriptionPrice(recipientAddress)
-  const duration = 3600 * 24 * 31 // 1 month
+  const amount = subscriptionPrice.mul(SECONDS_IN_MONTH)
-  const amount = subscriptionPrice.mul(duration)
   const allowance = await token.allowance(
     signer.getAddress(),
     subscription.address,

src/views/Subscription.vue

@@ -7,19 +7,26 @@
       <div class="connect-wallet" v-if="canConnectWallet()">
         <button class="btn" @click="connectWallet()">Connect wallet</button>
       </div>
-      <div class="setup" v-if="canConfigureSubscription()">
+      <div class="info" v-if="subscriptionConfigured !== null">
-        <template v-if="subscriptionConfigured">
+        <template v-if="subscription">
-          Subscription is configured.
+          <div>Recipient address: {{ subscription.recipientAddress }}</div>
+          <div>Token address: {{ subscription.token }}</div>
+          <div>Price of one month: {{ subscription.price }}</div>
         </template>
-        <button v-else class="btn" @click="onConfigureSubscription()">
+        <template v-else-if="isCurrentUser()">
+          Subscription is not configured.
+        </template>
+        <template v-else>
+          Subscription is not available.
+        </template>
+      </div>
+      <div class="setup" v-if="canConfigureSubscription()">
+        <button class="btn" @click="onConfigureSubscription()">
           Set up subscription
         </button>
       </div>
       <div class="payment" v-if="canSubscribe()">
-        <template v-if="!subscriptionConfigured">
+        <button class="btn" @click="onMakeSubscriptionPayment()">
-          Subscription is not available.
-        </template>
-        <button v-else class="btn" @click="onMakeSubscriptionPayment()">
           Pay for subscription
         </button>
       </div>
@@ -40,10 +47,11 @@ import {
   Profile,
 } from "@/api/users"
 import {
-  getSubscriptionAuthorization,
   configureSubscription,
-  isSubscriptionConfigured,
+  getSubscriptionAuthorization,
+  getSubscriptionInfo,
   makeSubscriptionPayment,
+  Subscription,
 } from "@/api/subscriptions"
 import Sidebar from "@/components/Sidebar.vue"
 import { useInstanceInfo } from "@/store/instance"
@@ -56,6 +64,7 @@ const { instance, getActorAddress } = $(useInstanceInfo())
 let profile = $ref<Profile | null>(null)
 let walletConnected = $ref(false)
 let subscriptionConfigured = $ref<boolean | null>(null)
+let subscription = $ref<Subscription | null>(null)
 
 onMounted(async () => {
   const { authToken } = useCurrentUser()
@@ -88,10 +97,10 @@ async function connectWallet() {
     return
   }
   walletConnected = true
-  checkSubscriptionConfigured()
+  checkSubscription()
 }
 
-async function checkSubscriptionConfigured() {
+async function checkSubscription() {
   if (
     !profile ||
     !instance ||
@@ -107,16 +116,21 @@ async function checkSubscriptionConfigured() {
   if (!signer) {
     return
   }
-  subscriptionConfigured = await isSubscriptionConfigured(
+  subscription = await getSubscriptionInfo(
     instance.blockchain_contract_address,
     signer,
     profileEthereumAddress,
   )
+  if (subscription !== null) {
+    subscriptionConfigured = true
+  } else {
+    subscriptionConfigured = false
+  }
 }
 
 function canConfigureSubscription(): boolean {
   // If wallet is not connected, subscriptionConfigured is set to null
-  return isCurrentUser() && subscriptionConfigured !== null
+  return isCurrentUser() && subscriptionConfigured === false
 }
 
 async function onConfigureSubscription() {
@@ -135,17 +149,23 @@ async function onConfigureSubscription() {
   }
   const authToken = ensureAuthToken()
   const signature = await getSubscriptionAuthorization(authToken)
-  await configureSubscription(
+  const transaction = await configureSubscription(
     instance.blockchain_contract_address,
     signer,
     currentUser.wallet_address,
     signature,
   )
+  await transaction.wait()
   subscriptionConfigured = true
+  subscription = await getSubscriptionInfo(
+    instance.blockchain_contract_address,
+    signer,
+    currentUser.wallet_address,
+  )
 }
 
 function canSubscribe(): boolean {
-  return !isCurrentUser() && subscriptionConfigured !== null
+  return !isCurrentUser() && subscriptionConfigured === true
 }
 
 async function onMakeSubscriptionPayment() {
@@ -182,19 +202,15 @@ async function onMakeSubscriptionPayment() {
 
   background-color: $block-background-color;
   border-radius: $block-border-radius;
+  display: flex;
+  flex-direction: column;
+  gap: $block-inner-padding;
   margin-bottom: $block-outer-padding;
   padding: $block-inner-padding;
 
   h1 {
     font-size: 20px;
-    text-align: center;
+    margin: 0;
   }
 }
-
-.connect-wallet,
-.setup,
-.payment {
-  display: flex;
-  justify-content: center;
-}
 </style>