Fix empty subscription screen when wallet is already connected

src/components/Subscription.vue

@@ -37,7 +37,8 @@
 </template>
 
 <script setup lang="ts">
-import { $, $ref } from "vue/macros"
+import { onMounted, watch } from "vue"
+import { $, $$, $ref } from "vue/macros"
 
 import { Profile, ProfileWrapper } from "@/api/users"
 import {
@@ -66,6 +67,13 @@ let subscriptionConfigured = $ref<boolean | null>(null)
 let subscription = $ref<Subscription | null>(null)
 let subscriptionState = $ref<SubscriptionState | null>(null)
 
+onMounted(() => {
+  if (walletAddress && !walletError) {
+    // Load info immediately if wallet is already connected
+    checkSubscription()
+  }
+})
+
 function canConnectWallet(): boolean {
   return (
     Boolean(instance?.blockchain_id) &&
@@ -83,17 +91,14 @@ function reset() {
 }
 
 async function connectWallet() {
-  await connectEthereumWallet(reset)
-  if (!recipientEthereumAddress || !walletAddress) {
-    return
+  await connectEthereumWallet()
+  if (!walletError) {
+    checkSubscription()
   }
-  if (ethereumAddressMatch(walletAddress, recipientEthereumAddress)) {
-    walletError = "incorrect wallet address"
-    return
-  }
-  checkSubscription()
 }
 
+watch($$(walletAddress), reset)
+
 async function checkSubscription() {
   if (
     !instance?.blockchain_contract_address ||
@@ -102,6 +107,10 @@ async function checkSubscription() {
   ) {
     return
   }
+  if (ethereumAddressMatch(walletAddress, recipientEthereumAddress)) {
+    walletError = "incorrect wallet address"
+    return
+  }
   const signer = getWeb3Provider().getSigner()
   subscription = await getSubscriptionInfo(
     instance.blockchain_contract_address,

src/components/SubscriptionSetup.vue

@@ -34,7 +34,8 @@
 </template>
 
 <script setup lang="ts">
-import { $, $ref } from "vue/macros"
+import { onMounted, watch } from "vue"
+import { $, $$, $ref } from "vue/macros"
 
 import { getVerifiedEthereumAddress, Profile } from "@/api/users"
 import {
@@ -66,6 +67,13 @@ let subscription = $ref<Subscription | null>(null)
 let subscriptionState = $ref<SubscriptionState | null>(null)
 let subscriberAddress = $ref<string | null>(null)
 
+onMounted(() => {
+  if (walletAddress && !walletError) {
+    // Load info immediately if wallet is already connected
+    checkSubscription()
+  }
+})
+
 function canConnectWallet(): boolean {
   return (
     Boolean(instance?.blockchain_id) &&
@@ -84,8 +92,20 @@ function reset() {
 }
 
 async function connectWallet() {
-  await connectEthereumWallet(reset)
-  if (!profileEthereumAddress || !walletAddress) {
+  await connectEthereumWallet()
+  if (!walletError) {
+    checkSubscription()
+  }
+}
+
+watch($$(walletAddress), reset)
+
+async function checkSubscription() {
+  if (
+    !instance?.blockchain_contract_address ||
+    !profileEthereumAddress ||
+    !walletAddress
+  ) {
     return
   }
   if (!ethereumAddressMatch(walletAddress, profileEthereumAddress)) {
@@ -93,17 +113,6 @@ async function connectWallet() {
     walletError = "incorrect wallet address"
     return
   }
-  checkSubscription()
-}
-
-async function checkSubscription() {
-  if (
-    !profileEthereumAddress ||
-    !instance ||
-    !instance.blockchain_contract_address
-  ) {
-    return
-  }
   const signer = getWeb3Provider().getSigner()
   subscription = await getSubscriptionInfo(
     instance.blockchain_contract_address,

src/composables/wallet.ts

@@ -10,15 +10,12 @@ import {
 const walletAddress = ref<string | null>(null)
 const walletError = ref<string | null>(null)
 
-function disconnectWallet(callback: () => void) {
-  callback()
+function disconnectWallet() {
   walletAddress.value = null
   walletError.value = null
 }
 
-async function connectWallet(
-  onDisconnect: () => void,
-): Promise<void> {
+async function connectWallet(): Promise<void> {
   const { instance } = useInstanceInfo()
   if (!instance.value?.blockchain_id) {
     throw new Error("blockchain integration disabled")
@@ -38,13 +35,13 @@ async function connectWallet(
   walletAddress.value = await signer.getAddress()
   const walletProvider = web3Provider.provider as any
   walletProvider.on("chainChanged", (chainId: string) => {
-    disconnectWallet(onDisconnect)
+    disconnectWallet()
   })
   walletProvider.on("accountsChanged", () => {
-    disconnectWallet(onDisconnect)
+    disconnectWallet()
   })
   walletProvider.on("disconnect", () => {
-    disconnectWallet(onDisconnect)
+    disconnectWallet()
   })
 
   const instanceChainId = parseCAIP2_chainId(instance.value.blockchain_id)