feat: show wallet connection details during setup

components/ConnectionInfoModal.tsx

@@ -1,3 +1,4 @@
+import { NWCClient, type Nip47Capability } from "@getalby/sdk/nwc";
 import React from "react";
 import {
   Modal,
@@ -6,43 +7,73 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import { XIcon } from "~/components/Icons";
+import Toast from "react-native-toast-message";
+import Alert from "~/components/Alert";
+import { TriangleAlertIcon, XIcon } from "~/components/Icons";
+import { toastConfig } from "~/components/ToastConfig";
 import { Text } from "~/components/ui/text";
-import { useAppStore } from "~/lib/state/appStore";
 import { useThemeColor } from "~/lib/useThemeColor";
-import { cn } from "~/lib/utils";
+import { cn, getPubkeyFromNWCUrl } from "~/lib/utils";
 
 type ConnectionInfoModalProps = {
   visible: boolean;
   onClose: () => void;
+  nostrWalletConnectUrl: string | undefined;
+  capabilities?: Nip47Capability[];
 };
 
-function ConnectionInfoModal({ visible, onClose }: ConnectionInfoModalProps) {
+function ConnectionInfoModal({
+  visible,
+  onClose,
+  nostrWalletConnectUrl,
+  capabilities,
+}: ConnectionInfoModalProps) {
   const { shadow } = useThemeColor("shadow");
-  const selectedWalletId = useAppStore((store) => store.selectedWalletId);
-  const wallets = useAppStore((store) => store.wallets);
-  const capabilities = wallets[selectedWalletId].nwcCapabilities;
-  const nwcClient = useAppStore((store) => store.nwcClient);
+  const nwcInfo = React.useMemo(
+    () =>
+      nostrWalletConnectUrl
+        ? NWCClient.parseWalletConnectUrl(nostrWalletConnectUrl)
+        : undefined,
+    [nostrWalletConnectUrl],
+  );
+  const appPubkey = nostrWalletConnectUrl
+    ? getPubkeyFromNWCUrl(nostrWalletConnectUrl)
+    : undefined;
+  const insecureRelays =
+    nwcInfo?.relayUrls.filter((relayUrl) => !relayUrl.startsWith("wss://")) ??
+    [];
+
   const [relayStatuses, setRelayStatuses] = React.useState<boolean[]>([]);
   React.useEffect(() => {
-    if (!nwcClient) {
+    if (!visible || !nwcInfo) {
       return;
     }
+    const pool = new NWCClient({
+      relayUrls: nwcInfo.relayUrls,
+      walletPubkey: nwcInfo.walletPubkey,
+    }).pool;
+    let cancelled = false;
     (async () => {
-      const _relayStatuses = [];
-      for (const relayUrl of nwcClient.relayUrls) {
+      const _relayStatuses: boolean[] = [];
+      for (const relayUrl of nwcInfo.relayUrls) {
         try {
-          await nwcClient.pool.ensureRelay(relayUrl, {
+          await pool.ensureRelay(relayUrl, {
             connectionTimeout: 2000,
           });
           _relayStatuses.push(true);
         } catch {
           _relayStatuses.push(false);
         }
       }
-      setRelayStatuses(_relayStatuses);
+      if (!cancelled) {
+        setRelayStatuses(_relayStatuses);
+      }
     })();
-  }, [nwcClient]);
+    return () => {
+      cancelled = true;
+      pool.destroy();
+    };
+  }, [visible, nwcInfo]);
 
   return (
     <Modal
@@ -103,7 +134,7 @@ function ConnectionInfoModal({ visible, onClose }: ConnectionInfoModalProps) {
           >
             <View className="flex gap-2">
               <Text className="font-semibold2">Relays</Text>
-              {nwcClient?.relayUrls.map((relayUrl, index) => (
+              {nwcInfo?.relayUrls.map((relayUrl, index) => (
                 <View
                   className="flex flex-row items-center gap-2"
                   key={relayUrl}
@@ -117,8 +148,27 @@ function ConnectionInfoModal({ visible, onClose }: ConnectionInfoModalProps) {
                   ></View>
                 </View>
               ))}
+              {!!insecureRelays.length && (
+                <Alert
+                  type="warn"
+                  title="Insecure relay"
+                  description={`${insecureRelays.join(", ")} ${
+                    insecureRelays.length > 1 ? "are" : "is"
+                  } not using a secure (wss) connection.`}
+                  icon={TriangleAlertIcon}
+                />
+              )}
             </View>
 
+            {!!nwcInfo?.lud16 && (
+              <View className="flex gap-2">
+                <Text className="font-semibold2">Lightning Address</Text>
+                <Text className="bg-muted p-2 rounded-md ios:text-sm android:text-xs font-mono">
+                  {nwcInfo.lud16}
+                </Text>
+              </View>
+            )}
+
             <View className="flex gap-2">
               <Text className="font-semibold2">Capabilities</Text>
               <Text className="bg-muted p-2 rounded-md ios:text-sm android:text-xs font-mono">
@@ -129,19 +179,25 @@ function ConnectionInfoModal({ visible, onClose }: ConnectionInfoModalProps) {
             <View className="flex gap-2">
               <Text className="font-semibold2">App Pubkey</Text>
               <Text className="bg-muted p-2 rounded-md ios:text-sm android:text-xs font-mono">
-                {nwcClient?.publicKey}
+                {appPubkey}
               </Text>
             </View>
 
             <View className="flex gap-2">
               <Text className="font-semibold2">Wallet Pubkey</Text>
               <Text className="bg-muted p-2 rounded-md ios:text-sm android:text-xs font-mono">
-                {nwcClient?.walletPubkey}
+                {nwcInfo?.walletPubkey}
               </Text>
             </View>
           </ScrollView>
         </View>
       </View>
+      <Toast
+        config={toastConfig}
+        position="bottom"
+        bottomOffset={100}
+        topOffset={100}
+      />
     </Modal>
   );
 }

pages/settings/wallets/EditWallet.tsx

@@ -134,6 +134,8 @@ export function EditWallet() {
           <ConnectionInfoModal
             visible={showConnectionInfo}
             onClose={() => setShowConnectionInfo(false)}
+            nostrWalletConnectUrl={wallets[walletId]?.nostrWalletConnectUrl}
+            capabilities={wallets[walletId]?.nwcCapabilities}
           />
           <TouchableOpacity
             className="flex flex-row items-center gap-4 px-6 py-4"

pages/settings/wallets/SetupWallet.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 import Toast from "react-native-toast-message";
 import Alert from "~/components/Alert";
+import ConnectionInfoModal from "~/components/ConnectionInfoModal";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import HelpModal from "~/components/HelpModal";
 import {
@@ -41,6 +42,27 @@ export function SetupWallet() {
   const [startScanning, setStartScanning] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
   const [showHelp, setShowHelp] = React.useState(false);
+  const [showConnectionInfo, setShowConnectionInfo] = React.useState(false);
+
+  const nwcInfo = nostrWalletConnectUrl
+    ? NWCClient.parseWalletConnectUrl(nostrWalletConnectUrl)
+    : undefined;
+  const existingWalletMatch = nwcInfo
+    ? wallets.some((wallet) => {
+        if (
+          nwcInfo.lud16 &&
+          wallet.lightningAddress?.trim().toLowerCase() ===
+            nwcInfo.lud16.trim().toLowerCase()
+        ) {
+          return true;
+        }
+        return (
+          !!wallet.nostrWalletConnectUrl &&
+          NWCClient.parseWalletConnectUrl(wallet.nostrWalletConnectUrl)
+            .walletPubkey === nwcInfo.walletPubkey
+        );
+      })
+    : false;
 
   const handleScanned = (data: string) => {
     return connect(data);
@@ -70,13 +92,7 @@ export function SetupWallet() {
         setNostrWalletConnectUrl(nostrWalletConnectUrl);
         setCapabilities(capabilities);
         setName(nwcClient.lud16 || "");
-
-        Toast.show({
-          type: "success",
-          text1: "Connection successful",
-          text2: "Please set your wallet name to finish",
-          position: "top",
-        });
+        setShowConnectionInfo(true);
         setConnecting(false);
         return true;
       } catch (error) {
@@ -88,6 +104,21 @@ export function SetupWallet() {
     [],
   );
 
+  // Deferred to a post-render effect (rather than shown inline in connect())
+  // so it fires after ConnectionInfoModal has mounted its own Toast host —
+  // otherwise this toast registers on the root Toast host and renders
+  // beneath the modal that opens in the same update.
+  React.useEffect(() => {
+    if (nostrWalletConnectUrl) {
+      Toast.show({
+        type: "success",
+        text1: "Connection successful",
+        text2: "Review connection info and set your wallet name to finish",
+        position: "top",
+      });
+    }
+  }, [nostrWalletConnectUrl]);
+
   const addWallet = async () => {
     if (isLoading || !nostrWalletConnectUrl) {
       return;
@@ -214,6 +245,20 @@ export function SetupWallet() {
       ) : (
         <DismissableKeyboardView>
           <View className="flex-1 p-6">
+            <ConnectionInfoModal
+              visible={showConnectionInfo}
+              onClose={() => setShowConnectionInfo(false)}
+              nostrWalletConnectUrl={nostrWalletConnectUrl}
+              capabilities={capabilities}
+            />
+            {existingWalletMatch && (
+              <Alert
+                type="warn"
+                title="You may already have this wallet"
+                description="A wallet with this lightning address or wallet connection is already set up."
+                icon={TriangleAlertIcon}
+              />
+            )}
             <View className="flex-1 flex flex-col items-center justify-center">
               <Text className="text-muted-foreground text-center">
                 Wallet name
@@ -230,7 +275,6 @@ export function SetupWallet() {
                 onChangeText={setName}
                 placeholder="Enter a name for your wallet"
                 returnKeyType="done"
-                autoFocus
               />
             </View>
             {capabilities &&