Show "Link" button on subscription settings page if ethereum address is not verified

src/components/SubscriptionSettingsEthereum.vue

@@ -6,6 +6,11 @@
     <div class="wallet-error" v-if="walletError">
       {{ walletError }}
     </div>
+    <div class="link-address" v-if="canVerifyEthereumAddress()">
+      <button class="btn" @click="onVerifyEthereumAddress()">
+        Link your address
+      </button>
+    </div>
     <div class="info" v-if="subscriptionsEnabled !== null">
       <template v-if="subscriptionConfig && subscriptionOption !== null">
         <span>Subscriptions are enabled</span>
@@ -94,12 +99,14 @@ import {
 } from "@/api/subscriptions-ethereum"
 import Loader from "@/components/Loader.vue"
 import ProfileListItem from "@/components/ProfileListItem.vue"
+import { useEthereumAddressVerification } from "@/composables/ethereum-address-verification"
 import { useWallet } from "@/composables/wallet"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
 import { ethereumAddressMatch } from "@/utils/ethereum"
 
 const { ensureAuthToken, ensureCurrentUser, setCurrentUser } = $(useCurrentUser())
+const { verifyEthereumAddress } = useEthereumAddressVerification()
 const { instance } = $(useInstanceInfo())
 const { connectWallet: connectEthereumWallet, getSigner } = useWallet()
 const subscriptionPrice = $ref<number>(1)
@@ -135,8 +142,6 @@ function canConnectWallet(): boolean {
   return (
     Boolean(blockchain?.contract_address) &&
     Boolean(blockchain?.features.subscriptions) &&
-    // Only users with verified address can have ethereum subscriptions
-    profile.getVerifiedEthereumAddress() !== null &&
     walletAddress === null
   )
 }
@@ -202,6 +207,15 @@ async function loadSubscriptionSettings() {
   isLoading = false
 }
 
+function canVerifyEthereumAddress(): boolean {
+  return walletAddress !== null && profile.getVerifiedEthereumAddress() === null
+}
+
+async function onVerifyEthereumAddress() {
+  await verifyEthereumAddress()
+  await loadSubscriptionSettings()
+}
+
 function canEnableSubscriptions(): boolean {
   return (
     profile.getVerifiedEthereumAddress() !== null &&

src/composables/ethereum-address-verification.ts

@@ -0,0 +1,29 @@
+import { createIdentityProof, getIdentityClaim, User } from "@/api/users"
+import { useCurrentUser } from "@/store/user"
+import { getWallet, getWalletSignature } from "@/utils/ethereum"
+
+async function verifyEthereumAddress(): Promise<User | null> {
+  const { ensureAuthToken, setCurrentUser } = useCurrentUser()
+  if (!confirm("This action will link your wallet address to your profile. Continue?")) {
+    return null
+  }
+  const signer = await getWallet()
+  if (!signer) {
+    return null
+  }
+  const walletAddress = await signer.getAddress()
+  const authToken = ensureAuthToken()
+  const message = await getIdentityClaim(authToken, walletAddress)
+  const signature = await getWalletSignature(signer, message)
+  const user = await createIdentityProof(
+    authToken,
+    walletAddress,
+    signature,
+  )
+  setCurrentUser(user)
+  return user
+}
+
+export function useEthereumAddressVerification() {
+  return { verifyEthereumAddress }
+}

src/views/Profile.vue

@@ -44,7 +44,7 @@
               <li v-if="isCurrentUser()">
                 <button
                   title="Verify ethereum address"
-                  @click="hideProfileMenu(); verifyEthereumAddress()"
+                  @click="hideProfileMenu(); onVerifyEthereumAddress()"
                 >
                   Verify ethereum address
                 </button>
@@ -208,8 +208,6 @@ import {
   getFollowing,
 } from "@/api/relationships"
 import {
-  createIdentityProof,
-  getIdentityClaim,
   getProfile,
   Profile,
   ProfileField,
@@ -219,18 +217,18 @@ import Avatar from "@/components/Avatar.vue"
 import PostList from "@/components/PostList.vue"
 import ProfileListItem from "@/components/ProfileListItem.vue"
 import SidebarLayout from "@/components/SidebarLayout.vue"
+import { useEthereumAddressVerification } from "@/composables/ethereum-address-verification"
 import { BACKEND_URL } from "@/constants"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
-import { getWallet, getWalletSignature } from "@/utils/ethereum"
 
 const route = useRoute()
 const {
   authToken,
   currentUser,
   ensureAuthToken,
-  setCurrentUser,
 } = $(useCurrentUser())
+const { verifyEthereumAddress } = useEthereumAddressVerification()
 const { instance, getActorAddress } = $(useInstanceInfo())
 
 let profile = $ref<ProfileWrapper | null>(null)
@@ -420,28 +418,14 @@ const feedUrl = $computed<string>(() => {
   return `${BACKEND_URL}/feeds/${profile.username}`
 })
 
-async function verifyEthereumAddress(): Promise<void> {
+async function onVerifyEthereumAddress() {
   if (!profile || !isCurrentUser()) {
     return
   }
-  if (!confirm("This action will link your wallet address to your profile. Continue?")) {
-    return
+  const user = await verifyEthereumAddress()
+  if (user) {
+    profile.identity_proofs = user.identity_proofs
   }
-  const signer = await getWallet()
-  if (!signer) {
-    return
-  }
-  const walletAddress = await signer.getAddress()
-  const authToken = ensureAuthToken()
-  const message = await getIdentityClaim(authToken, walletAddress)
-  const signature = await getWalletSignature(signer, message)
-  const user = await createIdentityProof(
-    authToken,
-    walletAddress,
-    signature,
-  )
-  setCurrentUser(user)
-  profile.identity_proofs = user.identity_proofs
 }
 
 function canManageSubscriptions(): boolean {