Move subscriptions settings to /subscriptions/settings path

And replace profile object with current user.

src/components/SubscriptionSettingsEthereum.vue

@@ -1,5 +1,4 @@
 <template>
-  <h1>Manage subscriptions</h1>
   <div class="subscription">
     <div class="connect-wallet" v-if="canConnectWallet()">
       <button class="btn" @click="connectWallet()">Connect wallet</button>
@@ -72,7 +71,7 @@ import { $, $$, $computed, $ref } from "vue/macros"
 
 import { DateTime } from "luxon"
 
-import { Profile, ProfileWrapper } from "@/api/users"
+import { ProfileWrapper } from "@/api/users"
 import {
   configureSubscriptions,
   getPricePerSec,
@@ -95,15 +94,10 @@ import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
 import { ethereumAddressMatch } from "@/utils/ethereum"
 
-/* eslint-disable-next-line no-undef */
-const props = defineProps<{
-  profile: Profile,
-}>()
-
-const { ensureAuthToken, setCurrentUser } = $(useCurrentUser())
+const { ensureAuthToken, ensureCurrentUser, setCurrentUser } = $(useCurrentUser())
 const { instance } = $(useInstanceInfo())
 const { connectWallet: connectEthereumWallet, getSigner } = useWallet()
-const profile = new ProfileWrapper(props.profile)
+const profile = new ProfileWrapper(ensureCurrentUser())
 const profileEthereumAddress = profile.getVerifiedEthereumAddress()
 const subscriptionPrice = $ref<number>(1)
 let { walletAddress, walletError } = $(useWallet())

src/router/index.ts

@@ -14,6 +14,7 @@ import PublicTimeline from "@/views/PublicTimeline.vue"
 import TagTimeline from "@/views/TagTimeline.vue"
 import SearchResultList from "@/views/SearchResultList.vue"
 import SubscriptionPage from "@/views/SubscriptionPage.vue"
+import SubscriptionsSettings from "@/views/SubscriptionsSettings.vue"
 import EthereumPage from "@/views/Ethereum.vue"
 
 import { useCurrentUser } from "@/store/user"
@@ -131,6 +132,12 @@ const routes: Array<RouteRecordRaw> = [
     component: ProfileForm,
     meta: { onlyAuthenticated: true },
   },
+  {
+    path: "/subscriptions/settings",
+    name: "subscriptions-settings",
+    component: SubscriptionsSettings,
+    meta: { onlyAuthenticated: true },
+  },
   {
     path: "/:pathMatch(.*)*",
     redirect: { name: "home" },

src/views/Profile.vue

@@ -52,7 +52,7 @@
               <li v-if="canManageSubscriptions()">
                 <router-link
                   title="Manage subscriptions"
-                  :to="{ name: 'profile-subscription', params: { profileId: profile.id }}"
+                  :to="{ name: 'subscriptions-settings' }"
                 >
                   Manage subscriptions
                 </router-link>

src/views/SubscriptionPage.vue

@@ -1,10 +1,7 @@
 <template>
   <sidebar-layout v-if="profile && isLocalUser()">
     <template #content>
-      <component
-        :is="isCurrentUser() ? SubscriptionSetup : Subscription"
-        :profile="profile"
-      ></component>
+      <subscription :profile="profile"></subscription>
     </template>
   </sidebar-layout>
 </template>
@@ -17,11 +14,10 @@ import { useRoute } from "vue-router"
 import { getProfile, Profile } from "@/api/users"
 import SidebarLayout from "@/components/SidebarLayout.vue"
 import Subscription from "@/components/Subscription.vue"
-import SubscriptionSetup from "@/components/SubscriptionSetup.vue"
 import { useCurrentUser } from "@/store/user"
 
 const route = useRoute()
-const { currentUser, authToken } = $(useCurrentUser())
+const { authToken } = $(useCurrentUser())
 let profile = $ref<Profile | null>(null)
 
 onMounted(async () => {
@@ -37,11 +33,4 @@ function isLocalUser(): boolean {
   }
   return profile.username === profile.acct
 }
-
-function isCurrentUser(): boolean {
-  if (!currentUser || !profile) {
-    return false
-  }
-  return currentUser.id === profile.id
-}
 </script>

src/views/SubscriptionsSettings.vue

@@ -0,0 +1,30 @@
+<template>
+  <sidebar-layout>
+    <template #content>
+      <h1>Manage subscriptions</h1>
+      <subscription-settings-ethereum v-if="isEthereum()"></subscription-settings-ethereum>
+    </template>
+  </sidebar-layout>
+</template>
+
+<script setup lang="ts">
+import { $, $computed } from "vue/macros"
+
+import SidebarLayout from "@/components/SidebarLayout.vue"
+import SubscriptionSettingsEthereum from "@/components/SubscriptionSettingsEthereum.vue"
+import { useInstanceInfo } from "@/store/instance"
+
+const { instance } = $(useInstanceInfo())
+
+const blockchain = $computed(() => instance?.blockchains[0])
+
+function isEthereum(): boolean {
+  if (!blockchain) {
+    return false
+  }
+  return blockchain.chain_id.startsWith("eip155")
+}
+</script>
+
+<style scoped lang="scss">
+</style>