Enable subscription payments

src/api/contracts.ts

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

src/api/subscriptions.ts

@@ -47,3 +47,30 @@ export async function isSubscriptionConfigured(
   const result = await adapter.isSubscriptionConfigured(recipientAddress)
   return result
 }
+
+export async function makeSubscriptionPayment(
+  contractAddress: string,
+  signer: Signer,
+  recipientAddress: string,
+): 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 duration = 3600 * 24 * 31 // 1 month
+  const amount = subscriptionPrice.mul(duration)
+  const allowance = await token.allowance(
+    signer.getAddress(),
+    subscription.address,
+  )
+  if (allowance.lt(amount)) {
+    await token.approve(subscription.address, amount)
+  }
+  const transaction = await subscription.send(
+    recipientAddress,
+    amount,
+  )
+  return transaction
+}

src/views/Profile.vue

@@ -15,7 +15,7 @@
             </div>
           </div>
           <div
-            v-if="!isLocalUser() || canConnectWallet() || canConfigureSubscription()"
+            v-if="!isLocalUser() || canConnectWallet() || canConfigureSubscription() || canSubscribe()"
             class="dropdown-menu-wrapper"
             v-click-away="hideProfileMenu"
           >
@@ -50,6 +50,14 @@
                   Set up subscription
                 </a>
               </li>
+              <li v-if="canSubscribe()">
+                <a
+                  title="Pay for subscription"
+                  @click="hideProfileMenu(); makeSubscriptionPayment()"
+                >
+                  Pay for subscription
+                </a>
+              </li>
             </ul>
           </div>
         </div>
@@ -134,6 +142,7 @@ import {
   getSubscriptionAuthorization,
   configureSubscription,
   isSubscriptionConfigured,
+  makeSubscriptionPayment,
 } from "@/api/subscriptions"
 import Avatar from "@/components/Avatar.vue"
 import PostList from "@/components/PostList.vue"
@@ -356,6 +365,31 @@ export default class ProfileView extends Vue {
     this.subscriptionConfigured = true
   }
 
+  canSubscribe(): boolean {
+    return this.subscriptionConfigured === true && !this.isCurrentUser()
+  }
+
+  async makeSubscriptionPayment() {
+    const { instance } = this.store
+    if (
+      !this.profile ||
+      !this.profile.wallet_address ||
+      !instance ||
+      !instance.blockchain_contract_address
+    ) {
+      return
+    }
+    const signer = await getSigner()
+    if (!signer) {
+      return
+    }
+    await makeSubscriptionPayment(
+      instance.blockchain_contract_address,
+      signer,
+      this.profile.wallet_address,
+    )
+  }
+
   async loadNextPage(maxId: string) {
     if (!this.profile) {
       return