src/routes/settings/wallet/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {nwc} from "@getalby/sdk"
+  import cx from "classnames"
   import {LOCALE} from "@welshman/lib"
   import {displayRelayUrl, isNWCWallet, fromMsats} from "@welshman/util"
   import {session, pubkey, profilesByPubkey} from "@welshman/app"
@@ -13,7 +13,7 @@
   import WalletDisconnect from "@app/components/WalletDisconnect.svelte"
   import WalletUpdateReceivingAddress from "@app/components/WalletUpdateReceivingAddress.svelte"
   import {pushModal} from "@app/util/modal"
-  import {getWebLn} from "@app/core/commands"
+  import {getNwcClient, getWebLn} from "@app/core/commands"
   import Wallet2 from "@assets/icons/wallet.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
@@ -40,6 +40,67 @@
       pushModal(WalletConnect)
     }
   }
+
+  const withTimeout = async (promise: Promise<unknown>, timeoutMs: number) => {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+    try {
+      return await Promise.race([
+        promise,
+        new Promise((_, reject) => {
+          timeoutId = setTimeout(() => reject(new Error("Wallet check timed out")), timeoutMs)
+        }),
+      ])
+    } finally {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }
+
+  const checkNwcStatus = async () => {
+    try {
+      await withTimeout(getNwcClient().getInfo(), 5000)
+      return "connected" as const
+    } catch (error) {
+      console.warn("NWC wallet unavailable", error)
+      return "unavailable" as const
+    }
+  }
+
+  let walletStatus = $state<"checking" | "connected" | "unavailable">("checking")
+  let walletStatusRequestId = 0
+
+  const isWalletAvailable = $derived(Boolean($session?.wallet) && walletStatus === "connected")
+  const statusClass = $derived(
+    cx("flex items-center gap-2 text-sm", {
+      "text-success": walletStatus === "connected",
+      "text-warning": walletStatus === "unavailable",
+    }),
+  )
+  const connectionVerb = $derived(walletStatus === "connected" ? "Connected to" : "Configured for")
+
+  $effect(() => {
+    const wallet = $session?.wallet
+
+    if (!wallet) {
+      walletStatus = "checking"
+      return
+    }
+
+    const requestId = ++walletStatusRequestId
+
+    walletStatus = "checking"
+
+    void (async () => {
+      const nextStatus =
+        wallet.type === "nwc" ? await checkNwcStatus() : getWebLn() ? "connected" : "unavailable"
+
+      if (requestId === walletStatusRequestId) {
+        walletStatus = nextStatus
+      }
+    })()
+  })
 </script>
 
 <div class="content column gap-4">
@@ -50,9 +111,17 @@
         Wallet
       </strong>
       {#if $session?.wallet}
-        <div class="flex items-center gap-2 text-sm text-success">
-          <Icon icon={CheckCircle} size={4} />
-          Connected
+        <div class={statusClass}>
+          {#if walletStatus === "checking"}
+            <span class="loading loading-spinner loading-xs"></span>
+            Checking
+          {:else if walletStatus === "connected"}
+            <Icon icon={CheckCircle} size={4} />
+            Connected
+          {:else}
+            <Icon icon={InfoCircle} size={4} />
+            Unavailable
+          {/if}
         </div>
       {:else}
         <Button class="btn btn-primary btn-sm" onclick={connect}>
@@ -67,39 +136,54 @@
           {@const {node, version} = $session.wallet.info}
           <div class="flex flex-col justify-between gap-2 lg:flex-row">
             <p>
-              Connected to <strong>{node?.alias || version || "unknown wallet"}</strong>
+              {connectionVerb} <strong>{node?.alias || version || "unknown wallet"}</strong>
               via <strong>{$session.wallet.type}</strong>
             </p>
             <p class="flex gap-2 whitespace-nowrap">
-              Balance:
-              {#await getWebLn()
-                ?.enable()
-                .then(() => getWebLn().getBalance())}
+              {#if walletStatus === "connected"}
+                Balance:
+                {#await getWebLn()
+                  ?.enable()
+                  .then(() => getWebLn().getBalance())}
+                  <span class="loading loading-spinner loading-sm"></span>
+                {:then res}
+                  {new Intl.NumberFormat(LOCALE).format(res?.balance || 0)}
+                {:catch}
+                  [unknown]
+                {/await}
+                sats
+              {:else if walletStatus === "checking"}
+                Balance:
                 <span class="loading loading-spinner loading-sm"></span>
-              {:then res}
-                {new Intl.NumberFormat(LOCALE).format(res?.balance || 0)}
-              {:catch}
-                [unknown]
-              {/await}
-              sats
+              {:else}
+                Balance unavailable
+              {/if}
             </p>
           </div>
         {:else if $session.wallet.type === "nwc"}
-          {@const {lud16, relayUrl, nostrWalletConnectUrl} = $session.wallet.info}
+          {@const {lud16, relayUrl} = $session.wallet.info}
           <div class="flex flex-col justify-between gap-2 lg:flex-row">
             <p>
-              Connected to <strong>{lud16}</strong> via <strong>{displayRelayUrl(relayUrl)}</strong>
+              {connectionVerb} <strong>{lud16}</strong> via
+              <strong>{displayRelayUrl(relayUrl)}</strong>
             </p>
             <p class="flex gap-2 whitespace-nowrap">
-              Balance:
-              {#await new nwc.NWCClient({nostrWalletConnectUrl}).getBalance()}
+              {#if walletStatus === "connected"}
+                Balance:
+                {#await getNwcClient().getBalance()}
+                  <span class="loading loading-spinner loading-sm"></span>
+                {:then res}
+                  {new Intl.NumberFormat(LOCALE).format(fromMsats(res?.balance || 0))}
+                {:catch}
+                  [unknown]
+                {/await}
+                sats
+              {:else if walletStatus === "checking"}
+                Balance:
                 <span class="loading loading-spinner loading-sm"></span>
-              {:then res}
-                {new Intl.NumberFormat(LOCALE).format(fromMsats(res?.balance || 0))}
-              {:catch}
-                [unknown]
-              {/await}
-              sats
+              {:else}
+                Balance unavailable
+              {/if}
             </p>
           </div>
         {/if}
@@ -109,13 +193,17 @@
             Disconnect Wallet
           </Button>
           <div class="flex w-full gap-4 lg:w-auto">
-            <Button class="btn btn-primary btn-sm flex-1 justify-center lg:flex-none" onclick={pay}>
+            <Button
+              class="btn btn-primary btn-sm flex-1 justify-center lg:flex-none"
+              onclick={pay}
+              disabled={!isWalletAvailable}>
               <Icon icon={UploadMinimalistic} />
               Send
             </Button>
             <Button
               class="btn btn-secondary btn-sm flex-1 justify-center lg:flex-none"
-              onclick={receive}>
+              onclick={receive}
+              disabled={!isWalletAvailable}>
               <Icon icon={DownloadMinimalistic} />
               Receive
             </Button>