Rename Subscription component to SubscriptionEthereum

src/api/subscriptions-common.ts

@@ -0,0 +1,24 @@
+import { BACKEND_URL } from "@/constants"
+import { http } from "./common"
+
+export interface SubscriptionOption {
+  type: string;
+  price: number | null;
+  payout_address: number | null;
+}
+
+export async function getSubscriptionOptions(
+  authToken: string,
+): Promise<SubscriptionOption[]> {
+  const url = `${BACKEND_URL}/api/v1/subscriptions/options`
+  const response = await http(url, {
+    method: "GET",
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}

src/api/subscriptions-ethereum.ts

@@ -71,28 +71,6 @@ export async function getSubscriptionAuthorization(
   }
 }
 
-export interface SubscriptionOption {
-  type: string;
-  price: number | null;
-  payout_address: number | null;
-}
-
-export async function getSubscriptionOptions(
-  authToken: string,
-): Promise<SubscriptionOption[]> {
-  const url = `${BACKEND_URL}/api/v1/subscriptions/options`
-  const response = await http(url, {
-    method: "GET",
-    authToken,
-  })
-  const data = await response.json()
-  if (response.status !== 200) {
-    throw new Error(data.message)
-  } else {
-    return data
-  }
-}
-
 export async function configureSubscriptions(
   contractAddress: string,
   signer: Signer,

src/api/subscriptions-monero.ts

@@ -6,7 +6,7 @@ import {
   formatAmount,
   getPricePerMonth as _getPricePerMonth,
   getPricePerSec as _getPricePerSec,
-} from "./subscriptions"
+} from "./subscriptions-ethereum"
 import { Profile, User } from "./users"
 
 export function getPricePerSec(pricePerMonth: number): number {

src/components/SubscriptionEthereum.vue

@@ -1,5 +1,4 @@
 <template>
-  <h1>Subscription</h1>
   <div class="subscription">
     <div class="participants">
       <component
@@ -120,7 +119,7 @@ import {
   makeSubscriptionPayment,
   SubscriptionConfig,
   SubscriptionState,
-} from "@/api/subscriptions"
+} from "@/api/subscriptions-ethereum"
 import Avatar from "@/components/Avatar.vue"
 import Loader from "@/components/Loader.vue"
 import { useWallet } from "@/composables/wallet"

src/components/SubscriptionSettingsEthereum.vue

@@ -73,23 +73,25 @@ import { $, $$, $computed, $ref } from "vue/macros"
 import { DateTime } from "luxon"
 
 import { ProfileWrapper } from "@/api/users"
+import {
+  getSubscriptionOptions,
+  SubscriptionOption,
+} from "@/api/subscriptions-common"
 import {
   configureSubscriptions,
   getPricePerSec,
   getSubscribers,
   getSubscriptionAuthorization,
   getSubscriptionConfig,
-  getSubscriptionOptions,
   getSubscriptionState,
   getSubscriptionToken,
   onSubscriptionsEnabled,
   withdrawReceived,
   Subscription,
   SubscriptionConfig,
-  SubscriptionOption,
   SubscriptionState,
   SubscriptionToken,
-} from "@/api/subscriptions"
+} from "@/api/subscriptions-ethereum"
 import Loader from "@/components/Loader.vue"
 import ProfileListItem from "@/components/ProfileListItem.vue"
 import { useWallet } from "@/composables/wallet"

src/components/SubscriptionSettingsMonero.vue

@@ -40,7 +40,10 @@
 import { onMounted } from "vue"
 import { $, $ref } from "vue/macros"
 
-import { getSubscriptionOptions, SubscriptionOption } from "@/api/subscriptions"
+import {
+  getSubscriptionOptions,
+  SubscriptionOption,
+} from "@/api/subscriptions-common"
 import {
   enableMoneroSubscriptions,
   getPricePerMonth,

src/views/SubscriptionPage.vue

@@ -1,26 +1,32 @@
 <template>
   <sidebar-layout v-if="profile && isLocalUser()">
     <template #content>
-      <subscription :profile="profile"></subscription>
+      <h1>Subscription</h1>
+      <subscription-ethereum v-if="isEthereum()" :profile="profile"></subscription-ethereum>
     </template>
   </sidebar-layout>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from "vue"
-import { $, $ref } from "vue/macros"
+import { $, $computed, $ref } from "vue/macros"
 import { useRoute } from "vue-router"
 
 import { getProfile, Profile } from "@/api/users"
 import SidebarLayout from "@/components/SidebarLayout.vue"
-import Subscription from "@/components/Subscription.vue"
+import SubscriptionEthereum from "@/components/SubscriptionEthereum.vue"
 import { useCurrentUser } from "@/store/user"
+import { useInstanceInfo } from "@/store/instance"
 
 const route = useRoute()
 const { authToken } = $(useCurrentUser())
+const { instance } = $(useInstanceInfo())
 let profile = $ref<Profile | null>(null)
 
+const blockchain = $computed(() => instance?.blockchains[0])
+
 onMounted(async () => {
+  // Recipient
   profile = await getProfile(
     authToken,
     route.params.profileId as string,
@@ -33,4 +39,11 @@ function isLocalUser(): boolean {
   }
   return profile.username === profile.acct
 }
+
+function isEthereum(): boolean {
+  if (!blockchain) {
+    return false
+  }
+  return blockchain.chain_id.startsWith("eip155")
+}
 </script>