From ae474535fd0f2c19ec0f6209a2f1ea3bd2cfab1e Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Mon, 30 Sep 2024 23:23:24 +0530
Subject: [PATCH 01/16] chore: rename animation from paid to tick

---
 animations/{Paid.tsx => Tick.tsx} | 3 +--
 pages/receive/ReceiveSuccess.tsx  | 4 ++--
 pages/send/PaymentSuccess.tsx     | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)
 rename animations/{Paid.tsx => Tick.tsx} (79%)

diff --git a/animations/Paid.tsx b/animations/Tick.tsx
similarity index 79%
rename from animations/Paid.tsx
rename to animations/Tick.tsx
index fe89197..0d9657e 100644
--- a/animations/Paid.tsx
+++ b/animations/Tick.tsx
@@ -1,7 +1,6 @@
 import LottieView from "lottie-react-native";
-import { View } from "react-native";
 
-export function Paid() {
+export function Tick() {
   return (
     <LottieView
       autoPlay
diff --git a/pages/receive/ReceiveSuccess.tsx b/pages/receive/ReceiveSuccess.tsx
index 311a955..9612b6f 100644
--- a/pages/receive/ReceiveSuccess.tsx
+++ b/pages/receive/ReceiveSuccess.tsx
@@ -1,7 +1,7 @@
 import { Invoice } from "@getalby/lightning-tools";
 import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
-import { Paid } from "~/animations/Paid";
+import { Tick } from "~/animations/Tick";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
@@ -21,7 +21,7 @@ export function ReceiveSuccess() {
       />
       <View className="flex-1 justify-center items-center gap-2">
         <View className="-mt-32">
-          <Paid />
+          <Tick />
         </View>
         <Text className="text-3xl font-bold2 text-muted-foreground -mt-32">
           Received
diff --git a/pages/send/PaymentSuccess.tsx b/pages/send/PaymentSuccess.tsx
index ebae105..779133a 100644
--- a/pages/send/PaymentSuccess.tsx
+++ b/pages/send/PaymentSuccess.tsx
@@ -1,6 +1,6 @@
 import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
-import { Paid } from "~/animations/Paid";
+import { Tick } from "~/animations/Tick";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
 import Screen from "~/components/Screen";
@@ -21,7 +21,7 @@ export function PaymentSuccess() {
         title="Success"
       />
       <View className="flex-1 justify-center items-center gap-8 p-6">
-        <Paid />
+        <Tick />
         <View className="flex flex-col items-center gap-2 -mt-24">
           <View className="flex flex-row items-end justify-center">
             <Text className="text-3xl text-foreground font-semibold2">{new Intl.NumberFormat().format(+amount)}{" "}</Text>

From 81087e7d8a94fdbf988ca6f192308aecfeb6f1f6 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Mon, 30 Sep 2024 23:26:30 +0530
Subject: [PATCH 02/16] chore: reorder and use wallet anme from lud16

---
 app/settings/wallets/name.js                  |  5 +++
 app/settings/wallets/new.js                   |  5 ---
 components/ToastConfig.tsx                    |  9 ++++
 pages/settings/Settings.tsx                   |  2 +-
 pages/settings/Wallets.tsx                    | 26 +++++++-----
 .../wallets/{NewWallet.tsx => NameWallet.tsx} | 25 +++++++----
 pages/settings/wallets/WalletConnection.tsx   | 42 +++++++++----------
 7 files changed, 67 insertions(+), 47 deletions(-)
 create mode 100644 app/settings/wallets/name.js
 delete mode 100644 app/settings/wallets/new.js
 rename pages/settings/wallets/{NewWallet.tsx => NameWallet.tsx} (70%)

diff --git a/app/settings/wallets/name.js b/app/settings/wallets/name.js
new file mode 100644
index 0000000..3178a1b
--- /dev/null
+++ b/app/settings/wallets/name.js
@@ -0,0 +1,5 @@
+import { NameWallet } from "../../../pages/settings/wallets/NameWallet";
+
+export default function Page() {
+  return <NameWallet />;
+}
diff --git a/app/settings/wallets/new.js b/app/settings/wallets/new.js
deleted file mode 100644
index 4cee116..0000000
--- a/app/settings/wallets/new.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NewWallet } from "../../../pages/settings/wallets/NewWallet";
-
-export default function Page() {
-  return <NewWallet />;
-}
diff --git a/components/ToastConfig.tsx b/components/ToastConfig.tsx
index f1e1a3e..6e6a1f3 100644
--- a/components/ToastConfig.tsx
+++ b/components/ToastConfig.tsx
@@ -16,6 +16,15 @@ export const toastConfig: ToastConfig = {
       {text2 && <Text className="text-background text-center">{text2}</Text>}
     </View>
   ),
+  info: ({ text1, text2, hide }) => (
+    <View className="bg-yellow-500 rounded-full px-6 py-3 mx-6">
+      <View className="flex flex-row gap-2 justify-center items-center">
+        <XCircle className="text-background" width={16} height={16} />
+        <Text className="text-background font-semibold2">{text1}</Text>
+      </View>
+      {text2 && <Text className="text-background text-center">{text2}</Text>}
+    </View>
+  ),
   error: ({ text1, text2, hide }) => (
     <View className="bg-destructive rounded-full px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
diff --git a/pages/settings/Settings.tsx b/pages/settings/Settings.tsx
index 67ca840..ce73e97 100644
--- a/pages/settings/Settings.tsx
+++ b/pages/settings/Settings.tsx
@@ -25,7 +25,7 @@ export function Settings() {
         <TouchableOpacity className="flex flex-row items-center gap-4">
           <Wallet2 className="text-foreground" />
           <Text className="font-medium2 text-xl text-foreground">Wallets</Text>
-          <Text className="text-muted-foreground text-xl">
+          <Text className="text-muted-foreground text-xl flex-shrink" numberOfLines={1} ellipsizeMode="tail">
             ({wallet.name || DEFAULT_WALLET_NAME})
           </Text>
         </TouchableOpacity>
diff --git a/pages/settings/Wallets.tsx b/pages/settings/Wallets.tsx
index f66e7b8..de45dc7 100644
--- a/pages/settings/Wallets.tsx
+++ b/pages/settings/Wallets.tsx
@@ -1,7 +1,7 @@
 import { Link, router } from "expo-router";
 import { TouchableOpacity, View } from "react-native";
 import { FlatList } from "react-native";
-import { Settings2, Wallet2 } from "~/components/Icons";
+import { Settings2, TriangleAlert, Wallet2 } from "~/components/Icons";
 import { Button } from "~/components/ui/button";
 
 import { Text } from "~/components/ui/text";
@@ -35,8 +35,8 @@ export function Wallets() {
                       router.dismissAll();
                       router.navigate("/");
                       Toast.show({
-                        type: "success",
-                        text1: `Switched wallet to ${item.item.name || DEFAULT_WALLET_NAME}`,
+                        type: !!item.item.nostrWalletConnectUrl ? "success" : "info",
+                        text1: !!item.item.nostrWalletConnectUrl ? `Switched wallet to ${item.item.name || DEFAULT_WALLET_NAME}` : "Finish wallet setup to continue",
                         position: "top",
                       });
                     }
@@ -46,9 +46,9 @@ export function Wallets() {
                     active ? "border-primary" : "border-transparent",
                   )}
                 >
-                  <View className="flex flex-row gap-4 items-center">
+                  <View className="flex flex-row gap-4 items-center flex-shrink">
                     <Wallet2 className="text-foreground" />
-                    <Text className={cn("text-xl", active && "font-semibold2")}>
+                    <Text className={cn("text-xl pr-16", active && "font-semibold2")} numberOfLines={1} ellipsizeMode="tail">
                       {item.item.name || DEFAULT_WALLET_NAME}
                     </Text>
                   </View>
@@ -63,17 +63,23 @@ export function Wallets() {
                       </TouchableOpacity>
                     </Link>
                   )}
+                  {!item.item.nostrWalletConnectUrl && <TriangleAlert className="text-destructive absolute right-4" />}
                 </TouchableOpacity>
               );
             }}
           />
         </View>
         <View className="p-6">
-          <Link href="/settings/wallets/new" asChild>
-            <Button size="lg">
-              <Text>Connect a Wallet</Text>
-            </Button>
-          </Link>
+          <Button
+            size="lg"
+            onPress={() => {
+              useAppStore.getState().addWallet({ name: `Wallet ${wallets.length}` });
+              useAppStore.getState().setNWCClient(undefined);
+              router.dismissAll();
+            }}
+          >
+            <Text>Connect a Wallet</Text>
+          </Button>
         </View>
       </View>
     </>
diff --git a/pages/settings/wallets/NewWallet.tsx b/pages/settings/wallets/NameWallet.tsx
similarity index 70%
rename from pages/settings/wallets/NewWallet.tsx
rename to pages/settings/wallets/NameWallet.tsx
index 26454f7..5af696e 100644
--- a/pages/settings/wallets/NewWallet.tsx
+++ b/pages/settings/wallets/NameWallet.tsx
@@ -1,7 +1,6 @@
 import { router } from "expo-router";
 import React from "react";
 import { View } from "react-native";
-import Toast from "react-native-toast-message";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
@@ -9,14 +8,20 @@ import { Text } from "~/components/ui/text";
 import { useAppStore } from "~/lib/state/appStore";
 import Screen from "~/components/Screen";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
+import Toast from "react-native-toast-message";
+
+export function NameWallet() {
+  const selectedWalletId = useAppStore((store) => store.selectedWalletId);
+  const wallets = useAppStore((store) => store.wallets);
+  const [name, setName] = React.useState(
+    wallets[selectedWalletId].name || ""
+  );
 
-export function NewWallet() {
-  const [name, setName] = React.useState("");
   return (
     <DismissableKeyboardView>
       <View className="flex-1 p-6">
         <Screen
-          title="Connect Wallet"
+          title="Name Wallet"
         />
         <View className="flex-1 flex flex-col gap-3 items-center justify-center">
           <Label nativeID="name" className="text-muted-foreground text-center">
@@ -36,13 +41,17 @@ export function NewWallet() {
         <Button
           size="lg"
           onPress={() => {
-            useAppStore.getState().addWallet({ name });
+            useAppStore.getState().updateCurrentWallet({ name });
             Toast.show({
               type: "success",
-              text1: "New wallet created",
-              text2: "Please configure your wallet connection",
+              text1: "Wallet Connected",
+              text2: "Your lightning wallet is ready to use",
+              position: "top"
             });
-            router.dismissAll();
+            if (router.canDismiss()) {
+              router.dismissAll();
+            }
+            router.replace("/");
           }}
         >
           <Text>Continue</Text>
diff --git a/pages/settings/wallets/WalletConnection.tsx b/pages/settings/wallets/WalletConnection.tsx
index f142d72..8b68a41 100644
--- a/pages/settings/wallets/WalletConnection.tsx
+++ b/pages/settings/wallets/WalletConnection.tsx
@@ -15,6 +15,7 @@ import Loading from "~/components/Loading";
 import QRCodeScanner from "~/components/QRCodeScanner";
 import Screen from "~/components/Screen";
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "~/components/ui/dialog";
+import { Tick } from "~/animations/Tick";
 
 export function WalletConnection() {
   const hasConnection = useAppStore((store) => !!store.nwcClient);
@@ -58,18 +59,14 @@ export function WalletConnection() {
       useAppStore.getState().setNostrWalletConnectUrl(nostrWalletConnectUrl);
       useAppStore.getState().updateCurrentWallet({
         nwcCapabilities: capabilities,
-        ...(nwcClient.lud16 ? { lightningAddress: nwcClient.lud16 } : {}),
+        ...(nwcClient.lud16 ? { lightningAddress: nwcClient.lud16, name: nwcClient.lud16 } : {}),
       });
       useAppStore.getState().setNWCClient(nwcClient);
-      if (router.canDismiss()) {
-        router.dismissAll();
-      }
-      router.replace("/");
+      router.replace("/settings/wallets/name");
       Toast.show({
         type: "success",
-        text1: "Wallet Connected",
-        text2: "Your lightning wallet is ready to use",
-        position: "top"
+        text1: "New wallet created",
+        text2: "Please configure your wallet connection",
       });
     } catch (error) {
       console.error(error);
@@ -126,30 +123,29 @@ export function WalletConnection() {
       {
         hasConnection && (
           <View className="flex-1 p-3">
-            <View className="flex-1 h-full flex flex-col items-center justify-center gap-5">
-              {walletInfo && <Text>Wallet Connected!</Text>}
-              {!walletInfo && <Text>Loading wallet...</Text>}
-              {walletInfo ? (
-                <Text className="self-start justify-self-start">
-                  {JSON.stringify(walletInfo, null, 2)}
-                </Text>
-              ) : (
-                <Loading />
-              )}
+            <View className="flex-1 h-full flex flex-col items-center justify-center gap-3">
+              {walletInfo && <Tick />}
+              <View className="flex flex-row items-end justify-center">
+                {walletInfo && <Text className="text-3xl text-foreground font-semibold2">Wallet Connected!</Text>}
+                {!walletInfo && <Text>Loading wallet...</Text>}
+              </View>
+              {!walletInfo && <Loading />}
               {balance && (
-                <Text className="self-start justify-self-start">
-                  {JSON.stringify(balance, null, 2)}
-                </Text>
+                <View className="flex flex-row items-end justify-center">
+                  <Text className="text-2xl text-foreground font-semibold2">{new Intl.NumberFormat().format(+balance.balance)}{" "}</Text>
+                  <Text className="text-xl text-muted-foreground font-semibold2">sats</Text>
+                </View>
               )}
             </View>
             <Button
+              size="lg"
               variant="destructive"
               onPress={() => {
-                useAppStore.getState().removeNostrWalletConnectUrl();
+                useAppStore.getState().removeCurrentWallet();
                 setScanning(true);
               }}
             >
-              <Text>Disconnect Wallet</Text>
+              <Text className="text-white text-2xl font-bold2">Disconnect Wallet</Text>
             </Button>
           </View>
         )

From ef766aa354b76a9406a2dd7dfbc3099ed0a1c2e8 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 1 Oct 2024 09:18:01 +0530
Subject: [PATCH 03/16] chore: delete wallet on cancelling setup

---
 components/Icons.tsx                        | 3 +++
 pages/settings/wallets/WalletConnection.tsx | 9 ++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/Icons.tsx b/components/Icons.tsx
index 51d14a2..354ecfb 100644
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -38,6 +38,7 @@ import {
   HelpCircle,
   CircleCheck,
   TriangleAlert,
+  Trash2
 } from "lucide-react-native";
 import { cssInterop } from "nativewind";
 
@@ -91,6 +92,7 @@ interopIcon(Fingerprint);
 interopIcon(HelpCircle);
 interopIcon(CircleCheck);
 interopIcon(TriangleAlert);
+interopIcon(Trash2);
 
 export {
   AlertCircle,
@@ -131,4 +133,5 @@ export {
   HelpCircle,
   CircleCheck,
   TriangleAlert,
+  Trash2,
 };
diff --git a/pages/settings/wallets/WalletConnection.tsx b/pages/settings/wallets/WalletConnection.tsx
index 8b68a41..595a6cf 100644
--- a/pages/settings/wallets/WalletConnection.tsx
+++ b/pages/settings/wallets/WalletConnection.tsx
@@ -2,7 +2,7 @@ import { Pressable, Text, TouchableOpacity, View } from "react-native";
 import React from "react";
 import * as Clipboard from "expo-clipboard";
 import { nwc } from "@getalby/sdk";
-import { ClipboardPaste, HelpCircle, X } from "~/components/Icons";
+import { ClipboardPaste, HelpCircle, Trash2 } from "~/components/Icons";
 import { useAppStore } from "lib/state/appStore";
 import { router } from "expo-router";
 import { Button } from "~/components/ui/button";
@@ -83,13 +83,12 @@ export function WalletConnection() {
           walletIdWithConnection !== -1 ? (
             <Pressable
               onPress={() => {
-                useAppStore
-                  .getState()
-                  .setSelectedWalletId(walletIdWithConnection);
+                useAppStore.getState().removeCurrentWallet()
+                useAppStore.getState().setSelectedWalletId(walletIdWithConnection);
                 router.replace("/");
               }}
             >
-              <X className="text-foreground" />
+              <Trash2 className="text-foreground" />
             </Pressable>
           ) :
 

From 4766d7451c7a3335c29b668abcd32afa7fd1c9e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Mon, 21 Oct 2024 09:44:52 +0200
Subject: [PATCH 04/16] fix: build error after merge

---
 app/(app)/settings/wallets/name.js | 5 +++++
 app/(app)/settings/wallets/new.js  | 5 -----
 2 files changed, 5 insertions(+), 5 deletions(-)
 create mode 100644 app/(app)/settings/wallets/name.js
 delete mode 100644 app/(app)/settings/wallets/new.js

diff --git a/app/(app)/settings/wallets/name.js b/app/(app)/settings/wallets/name.js
new file mode 100644
index 0000000..95d41bc
--- /dev/null
+++ b/app/(app)/settings/wallets/name.js
@@ -0,0 +1,5 @@
+import { NameWallet } from "../../../../pages/settings/wallets/NameWallet";
+
+export default function Page() {
+  return <NameWallet />;
+}
diff --git a/app/(app)/settings/wallets/new.js b/app/(app)/settings/wallets/new.js
deleted file mode 100644
index 95ebc47..0000000
--- a/app/(app)/settings/wallets/new.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NewWallet } from "../../../../pages/settings/wallets/NewWallet";
-
-export default function Page() {
-  return <NewWallet />;
-}

From 486c3dbe98233fa4f4dd57eef2fd302b66cc4c37 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 22 Oct 2024 17:29:50 +0530
Subject: [PATCH 05/16] chore: convert wallet connection page to wallet setup

---
 app/(app)/_layout.tsx                         |   3 +-
 .../wallets/[id]/wallet-connection.js         |   5 -
 app/(app)/settings/wallets/setup.js           |   5 +
 lib/state/appStore.ts                         |  15 ---
 pages/Home.tsx                                |   3 -
 pages/settings/Wallets.tsx                    |   3 +-
 .../{WalletConnection.tsx => SetupWallet.tsx} | 101 +++++-------------
 7 files changed, 35 insertions(+), 100 deletions(-)
 delete mode 100644 app/(app)/settings/wallets/[id]/wallet-connection.js
 create mode 100644 app/(app)/settings/wallets/setup.js
 rename pages/settings/wallets/{WalletConnection.tsx => SetupWallet.tsx} (56%)

diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
index dfe443c..6bef8ff 100644
--- a/app/(app)/_layout.tsx
+++ b/app/(app)/_layout.tsx
@@ -8,7 +8,6 @@ export default function AppLayout() {
     const { hasSession } = useSession();
     const isOnboarded = useAppStore(store => store.isOnboarded);
     const nwcClient = useAppStore(store => store.nwcClient);
-    const selectedWalletId = useAppStore((store) => store.selectedWalletId);
     const route = useRouteInfo();
     useHandleLinking();
 
@@ -22,7 +21,7 @@ export default function AppLayout() {
         return <Redirect href="/unlock" />;
     }
 
-    const connectionPage = `/settings/wallets/${selectedWalletId}/wallet-connection`;
+    const connectionPage = "/settings/wallets/setup";
     // Check the current pathname to prevent redirect loops
     if (!nwcClient && route.pathname !== connectionPage) {
         console.log("No NWC client available, redirecting to wallet setup");
diff --git a/app/(app)/settings/wallets/[id]/wallet-connection.js b/app/(app)/settings/wallets/[id]/wallet-connection.js
deleted file mode 100644
index 3947f7c..0000000
--- a/app/(app)/settings/wallets/[id]/wallet-connection.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { WalletConnection } from "../../../../../pages/settings/wallets/WalletConnection";
-
-export default function Page() {
-  return <WalletConnection />;
-}
diff --git a/app/(app)/settings/wallets/setup.js b/app/(app)/settings/wallets/setup.js
new file mode 100644
index 0000000..a89e91f
--- /dev/null
+++ b/app/(app)/settings/wallets/setup.js
@@ -0,0 +1,5 @@
+import { SetupWallet } from "../../../../pages/settings/wallets/SetupWallet";
+
+export default function Page() {
+  return <SetupWallet />;
+}
diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
index 99c5325..8378546 100644
--- a/lib/state/appStore.ts
+++ b/lib/state/appStore.ts
@@ -15,8 +15,6 @@ interface AppState {
   setUnlocked: (unlocked: boolean) => void;
   setOnboarded: (isOnboarded: boolean) => void;
   setNWCClient: (nwcClient: NWCClient | undefined) => void;
-  setNostrWalletConnectUrl(nostrWalletConnectUrl: string): void;
-  removeNostrWalletConnectUrl(): void;
   updateCurrentWallet(wallet: Partial<Wallet>): void;
   removeCurrentWallet(): void;
   setFiatCurrency(fiatCurrency: string): void;
@@ -171,18 +169,6 @@ export const useAppStore = create<AppState>()((set, get) => {
       set({ isOnboarded });
     },
     setNWCClient: (nwcClient) => set({ nwcClient }),
-    removeNostrWalletConnectUrl: () => {
-      updateCurrentWallet({
-        nostrWalletConnectUrl: undefined,
-      });
-
-      set({ nwcClient: undefined });
-    },
-    setNostrWalletConnectUrl: (nostrWalletConnectUrl) => {
-      updateCurrentWallet({
-        nostrWalletConnectUrl,
-      });
-    },
     setSecurityEnabled: (isEnabled) => {
       secureStorage.setItem(isSecurityEnabledKey, isEnabled.toString());
       set({
@@ -208,7 +194,6 @@ export const useAppStore = create<AppState>()((set, get) => {
       set({
         wallets: [...currentWallets, wallet],
         selectedWalletId: newWalletId,
-        nwcClient: undefined,
       });
     },
     addAddressBookEntry: (addressBookEntry: AddressBookEntry) => {
diff --git a/pages/Home.tsx b/pages/Home.tsx
index 7cbe617..527f480 100644
--- a/pages/Home.tsx
+++ b/pages/Home.tsx
@@ -1,7 +1,6 @@
 import { View, Pressable, StyleSheet, TouchableOpacity } from "react-native";
 import React, { useState } from "react";
 import { useBalance } from "hooks/useBalance";
-import { useAppStore } from "lib/state/appStore";
 import {
   Link, useFocusEffect
 } from "expo-router";
@@ -29,8 +28,6 @@ enum BalanceState {
 }
 
 export function Home() {
-  const selectedWalletId = useAppStore((store) => store.selectedWalletId);
-  const nwcClient = useAppStore((store) => store.nwcClient);
   const { data: balance, mutate: reloadBalance } = useBalance();
   const getFiatAmount = useGetFiatAmount();
   const [balanceState, setBalanceState] = useState<BalanceState>(
diff --git a/pages/settings/Wallets.tsx b/pages/settings/Wallets.tsx
index de45dc7..d31d862 100644
--- a/pages/settings/Wallets.tsx
+++ b/pages/settings/Wallets.tsx
@@ -73,8 +73,7 @@ export function Wallets() {
           <Button
             size="lg"
             onPress={() => {
-              useAppStore.getState().addWallet({ name: `Wallet ${wallets.length}` });
-              useAppStore.getState().setNWCClient(undefined);
+              useAppStore.getState().setSelectedWalletId(wallets.length);
               router.dismissAll();
             }}
           >
diff --git a/pages/settings/wallets/WalletConnection.tsx b/pages/settings/wallets/SetupWallet.tsx
similarity index 56%
rename from pages/settings/wallets/WalletConnection.tsx
rename to pages/settings/wallets/SetupWallet.tsx
index bbde59e..d1b29d9 100644
--- a/pages/settings/wallets/WalletConnection.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -2,12 +2,10 @@ import { Pressable, Text, TouchableOpacity, View } from "react-native";
 import React from "react";
 import * as Clipboard from "expo-clipboard";
 import { nwc } from "@getalby/sdk";
-import { ClipboardPaste, HelpCircle, Trash2 } from "~/components/Icons";
+import { ClipboardPaste, HelpCircle, X } from "~/components/Icons";
 import { useAppStore } from "lib/state/appStore";
 import { router } from "expo-router";
 import { Button } from "~/components/ui/button";
-import { useInfo } from "~/hooks/useInfo";
-import { useBalance } from "~/hooks/useBalance";
 import Toast from "react-native-toast-message";
 import { errorToast } from "~/lib/errorToast";
 import { Nip47Capability } from "@getalby/sdk/dist/NWCClient";
@@ -15,18 +13,12 @@ import Loading from "~/components/Loading";
 import QRCodeScanner from "~/components/QRCodeScanner";
 import Screen from "~/components/Screen";
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "~/components/ui/dialog";
-import { Tick } from "~/animations/Tick";
 import { REQUIRED_CAPABILITIES } from "~/lib/constants";
 
-export function WalletConnection() {
-  const hasConnection = useAppStore((store) => !!store.nwcClient);
-  const walletIdWithConnection = useAppStore((store) =>
-    store.wallets.findIndex((wallet) => wallet.nostrWalletConnectUrl),
-  );
+export function SetupWallet() {
+  const wallets = useAppStore((store) => store.wallets);
+  const walletIdWithConnection = wallets.findIndex((wallet) => wallet.nostrWalletConnectUrl);
   const [isConnecting, setConnecting] = React.useState(false);
-  const [isScanning, setScanning] = React.useState(true);
-  const { data: walletInfo } = useInfo();
-  const { data: balance } = useBalance();
 
   const handleScanned = (data: string) => {
     return connect(data);
@@ -60,11 +52,15 @@ export function WalletConnection() {
         const missing = REQUIRED_CAPABILITIES.filter(capability => !capabilities.includes(capability));
         throw new Error(`Missing required capabilities: ${missing.join(", ")}`)
       }
+
       console.log("NWC connected", info);
-      useAppStore.getState().setNostrWalletConnectUrl(nostrWalletConnectUrl);
-      useAppStore.getState().updateCurrentWallet({
+
+      useAppStore.getState().addWallet({
+        nostrWalletConnectUrl,
         nwcCapabilities: capabilities,
-        ...(nwcClient.lud16 ? { lightningAddress: nwcClient.lud16, name: nwcClient.lud16 } : {}),
+        ...(nwcClient.lud16
+          ? { lightningAddress: nwcClient.lud16, name: nwcClient.lud16 }
+          : { name: `Wallet ${wallets.length}` }),
       });
       useAppStore.getState().setNWCClient(nwcClient);
       router.replace("/settings/wallets/name");
@@ -88,15 +84,13 @@ export function WalletConnection() {
           walletIdWithConnection !== -1 ? (
             <Pressable
               onPress={() => {
-                useAppStore.getState().removeCurrentWallet()
                 useAppStore.getState().setSelectedWalletId(walletIdWithConnection);
                 router.replace("/");
               }}
             >
-              <Trash2 className="text-foreground" />
+              <X className="text-foreground" />
             </Pressable>
           ) :
-
             <Dialog>
               <DialogTrigger asChild>
                 <TouchableOpacity>
@@ -124,65 +118,26 @@ export function WalletConnection() {
             </Dialog>
         }
       />
-      {
-        hasConnection && (
-          <View className="flex-1 p-3">
-            <View className="flex-1 h-full flex flex-col items-center justify-center gap-3">
-              {walletInfo && <Tick />}
-              <View className="flex flex-row items-end justify-center">
-                {walletInfo && <Text className="text-3xl text-foreground font-semibold2">Wallet Connected!</Text>}
-                {!walletInfo && <Text>Loading wallet...</Text>}
-              </View>
-              {!walletInfo && <Loading />}
-              {balance && (
-                <View className="flex flex-row items-end justify-center">
-                  <Text className="text-2xl text-foreground font-semibold2">{new Intl.NumberFormat().format(+balance.balance)}{" "}</Text>
-                  <Text className="text-xl text-muted-foreground font-semibold2">sats</Text>
-                </View>
-              )}
-            </View>
+      {isConnecting ? (
+        <View className="flex-1 justify-center items-center">
+          <Loading />
+          <Text className="mt-4">Connecting to your Wallet</Text>
+        </View>
+      ) : (
+        <>
+          <QRCodeScanner onScanned={handleScanned} startScanning />
+          <View className="flex flex-row items-stretch justify-center gap-4 p-6">
             <Button
-              size="lg"
-              variant="destructive"
-              onPress={() => {
-                useAppStore.getState().removeCurrentWallet();
-                setScanning(true);
-              }}
+              onPress={paste}
+              variant="secondary"
+              className="flex-1 flex flex-col gap-2"
             >
-              <Text className="text-white text-2xl font-bold2">Disconnect Wallet</Text>
+              <ClipboardPaste className="text-secondary-foreground" />
+              <Text className="text-secondary-foreground">Paste</Text>
             </Button>
           </View>
-        )
-      }
-      {
-        !hasConnection && (
-          <>
-            {isConnecting && (
-              <>
-                <View className="flex-1 justify-center items-center">
-                  <Loading />
-                  <Text className="mt-4">Connecting to your Wallet</Text>
-                </View>
-              </>
-            )}
-            {!isConnecting && (
-              <>
-                <QRCodeScanner onScanned={handleScanned} startScanning={isScanning} />
-                <View className="flex flex-row items-stretch justify-center gap-4 p-6">
-                  <Button
-                    onPress={paste}
-                    variant="secondary"
-                    className="flex-1 flex flex-col gap-2"
-                  >
-                    <ClipboardPaste className="text-secondary-foreground" />
-                    <Text className="text-secondary-foreground">Paste</Text>
-                  </Button>
-                </View>
-              </>
-            )}
-          </>
-        )
-      }
+        </>
+      )}
     </>
   );
 }

From a5351460651899d4eb89386bc3359c91eb62dfad Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 22 Oct 2024 17:30:59 +0530
Subject: [PATCH 06/16] chore: remove trash icon

---
 components/Icons.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/Icons.tsx b/components/Icons.tsx
index fb922db..2b9779c 100644
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -38,7 +38,6 @@ import {
   HelpCircle,
   CircleCheck,
   TriangleAlert,
-  Trash2,
   LogOut
 } from "lucide-react-native";
 import { cssInterop } from "nativewind";
@@ -93,7 +92,6 @@ interopIcon(Fingerprint);
 interopIcon(HelpCircle);
 interopIcon(CircleCheck);
 interopIcon(TriangleAlert);
-interopIcon(Trash2);
 interopIcon(LogOut);
 
 export {
@@ -135,6 +133,5 @@ export {
   HelpCircle,
   CircleCheck,
   TriangleAlert,
-  Trash2,
   LogOut
 };

From ed9e147791d305b73865e977e33aed7bf1100cc8 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 22 Oct 2024 17:35:10 +0530
Subject: [PATCH 07/16] chore: remove unnecessary empty wallet logic

---
 pages/settings/Wallets.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/pages/settings/Wallets.tsx b/pages/settings/Wallets.tsx
index d31d862..43a0934 100644
--- a/pages/settings/Wallets.tsx
+++ b/pages/settings/Wallets.tsx
@@ -1,7 +1,7 @@
 import { Link, router } from "expo-router";
 import { TouchableOpacity, View } from "react-native";
 import { FlatList } from "react-native";
-import { Settings2, TriangleAlert, Wallet2 } from "~/components/Icons";
+import { Settings2, Wallet2 } from "~/components/Icons";
 import { Button } from "~/components/ui/button";
 
 import { Text } from "~/components/ui/text";
@@ -35,8 +35,8 @@ export function Wallets() {
                       router.dismissAll();
                       router.navigate("/");
                       Toast.show({
-                        type: !!item.item.nostrWalletConnectUrl ? "success" : "info",
-                        text1: !!item.item.nostrWalletConnectUrl ? `Switched wallet to ${item.item.name || DEFAULT_WALLET_NAME}` : "Finish wallet setup to continue",
+                        type: "success",
+                        text1: `Switched wallet to ${item.item.name || DEFAULT_WALLET_NAME}`,
                         position: "top",
                       });
                     }
@@ -63,7 +63,6 @@ export function Wallets() {
                       </TouchableOpacity>
                     </Link>
                   )}
-                  {!item.item.nostrWalletConnectUrl && <TriangleAlert className="text-destructive absolute right-4" />}
                 </TouchableOpacity>
               );
             }}

From 66d42f914b451c8ddd690403aeb7a62e94009549 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 23 Oct 2024 00:53:48 +0530
Subject: [PATCH 08/16] chore: add wallet only after setting the name

---
 app/(app)/settings/wallets/name.js     |  5 --
 app/settings/wallets/name.js           |  5 --
 lib/state/appStore.ts                  | 14 ++---
 pages/settings/wallets/NameWallet.tsx  | 62 ---------------------
 pages/settings/wallets/SetupWallet.tsx | 76 +++++++++++++++++++++-----
 5 files changed, 68 insertions(+), 94 deletions(-)
 delete mode 100644 app/(app)/settings/wallets/name.js
 delete mode 100644 app/settings/wallets/name.js
 delete mode 100644 pages/settings/wallets/NameWallet.tsx

diff --git a/app/(app)/settings/wallets/name.js b/app/(app)/settings/wallets/name.js
deleted file mode 100644
index 95d41bc..0000000
--- a/app/(app)/settings/wallets/name.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NameWallet } from "../../../../pages/settings/wallets/NameWallet";
-
-export default function Page() {
-  return <NameWallet />;
-}
diff --git a/app/settings/wallets/name.js b/app/settings/wallets/name.js
deleted file mode 100644
index 3178a1b..0000000
--- a/app/settings/wallets/name.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NameWallet } from "../../../pages/settings/wallets/NameWallet";
-
-export default function Page() {
-  return <NameWallet />;
-}
diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
index 8378546..d614133 100644
--- a/lib/state/appStore.ts
+++ b/lib/state/appStore.ts
@@ -65,9 +65,6 @@ function loadWallets(): Wallet[] {
     }
     wallets.push(JSON.parse(walletJSON));
   }
-  if (!wallets.length) {
-    wallets.push({});
-  }
   return wallets;
 }
 
@@ -109,13 +106,13 @@ export const useAppStore = create<AppState>()((set, get) => {
     if (wallets.length <= 1) {
       // set to initial wallet status
       secureStorage.removeItem(hasOnboardedKey);
+      secureStorage.removeItem(getWalletKey(0));
       secureStorage.setItem(selectedWalletIdKey, "0");
-      secureStorage.setItem(getWalletKey(0), JSON.stringify({}));
       set({
-        nwcClient: undefined,
-        selectedWalletId: 0,
-        wallets: [{}],
         isOnboarded: false,
+        wallets: [],
+        selectedWalletId: 0,
+        nwcClient: undefined,
       });
       return;
     }
@@ -241,13 +238,12 @@ export const useAppStore = create<AppState>()((set, get) => {
 
       // set to initial wallet status
       secureStorage.setItem(selectedWalletIdKey, "0");
-      secureStorage.setItem(getWalletKey(0), JSON.stringify({}));
 
       set({
         nwcClient: undefined,
         fiatCurrency: undefined,
         selectedWalletId: 0,
-        wallets: [{}],
+        wallets: [],
         addressBookEntries: [],
         isSecurityEnabled: false,
         isOnboarded: false,
diff --git a/pages/settings/wallets/NameWallet.tsx b/pages/settings/wallets/NameWallet.tsx
deleted file mode 100644
index 5af696e..0000000
--- a/pages/settings/wallets/NameWallet.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { router } from "expo-router";
-import React from "react";
-import { View } from "react-native";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
-import { Text } from "~/components/ui/text";
-import { useAppStore } from "~/lib/state/appStore";
-import Screen from "~/components/Screen";
-import DismissableKeyboardView from "~/components/DismissableKeyboardView";
-import Toast from "react-native-toast-message";
-
-export function NameWallet() {
-  const selectedWalletId = useAppStore((store) => store.selectedWalletId);
-  const wallets = useAppStore((store) => store.wallets);
-  const [name, setName] = React.useState(
-    wallets[selectedWalletId].name || ""
-  );
-
-  return (
-    <DismissableKeyboardView>
-      <View className="flex-1 p-6">
-        <Screen
-          title="Name Wallet"
-        />
-        <View className="flex-1 flex flex-col gap-3 items-center justify-center">
-          <Label nativeID="name" className="text-muted-foreground text-center">
-            Wallet name
-          </Label>
-          <Input
-            autoFocus
-            className="w-full border-transparent bg-transparent native:text-2xl text-center"
-            value={name}
-            onChangeText={setName}
-            aria-labelledbyledBy="name"
-            placeholder="Enter a name for your wallet"
-            returnKeyType="done"
-          // aria-errormessage="inputError"
-          />
-        </View>
-        <Button
-          size="lg"
-          onPress={() => {
-            useAppStore.getState().updateCurrentWallet({ name });
-            Toast.show({
-              type: "success",
-              text1: "Wallet Connected",
-              text2: "Your lightning wallet is ready to use",
-              position: "top"
-            });
-            if (router.canDismiss()) {
-              router.dismissAll();
-            }
-            router.replace("/");
-          }}
-        >
-          <Text>Continue</Text>
-        </Button>
-      </View>
-    </DismissableKeyboardView>
-  );
-}
diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
index d1b29d9..de7bb0b 100644
--- a/pages/settings/wallets/SetupWallet.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -13,12 +13,21 @@ import Loading from "~/components/Loading";
 import QRCodeScanner from "~/components/QRCodeScanner";
 import Screen from "~/components/Screen";
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import { REQUIRED_CAPABILITIES } from "~/lib/constants";
+import { TextClassContext } from "~/components/ui/text";
 
+// TODO: Handle wallets with expired connection secrets
 export function SetupWallet() {
   const wallets = useAppStore((store) => store.wallets);
   const walletIdWithConnection = wallets.findIndex((wallet) => wallet.nostrWalletConnectUrl);
+
   const [isConnecting, setConnecting] = React.useState(false);
+  const [nostrWalletConnectUrl, setNostrWalletConnectUrl] = React.useState<string>();
+  const [capabilities, setCapabilities] = React.useState<nwc.Nip47Capability[]>();
+  const [name, setName] = React.useState("");
 
   const handleScanned = (data: string) => {
     return connect(data);
@@ -55,19 +64,14 @@ export function SetupWallet() {
 
       console.log("NWC connected", info);
 
-      useAppStore.getState().addWallet({
-        nostrWalletConnectUrl,
-        nwcCapabilities: capabilities,
-        ...(nwcClient.lud16
-          ? { lightningAddress: nwcClient.lud16, name: nwcClient.lud16 }
-          : { name: `Wallet ${wallets.length}` }),
-      });
-      useAppStore.getState().setNWCClient(nwcClient);
-      router.replace("/settings/wallets/name");
+      setNostrWalletConnectUrl(nostrWalletConnectUrl);
+      setCapabilities(capabilities);
+      setName(nwcClient.lud16 || "");
+
       Toast.show({
         type: "success",
-        text1: "New wallet created",
-        text2: "Please configure your wallet connection",
+        text1: "Connection successful",
+        text2: "Please set your wallet name to finish",
       });
     } catch (error) {
       console.error(error);
@@ -76,10 +80,32 @@ export function SetupWallet() {
     setConnecting(false);
   }
 
+  const addWallet = () => {
+    if (!nostrWalletConnectUrl) return;
+
+    const nwcClient = new nwc.NWCClient({ nostrWalletConnectUrl });
+    useAppStore.getState().addWallet({
+      nostrWalletConnectUrl,
+      nwcCapabilities: capabilities,
+      name: name,
+      lightningAddress: nwcClient.lud16 || "",
+    });
+    useAppStore.getState().setNWCClient(nwcClient);
+
+    Toast.show({
+      type: "success",
+      text1: "Wallet Connected",
+      text2: "Your lightning wallet is ready to use",
+      position: "top",
+    });
+
+    router.replace("/");
+  };
+
   return (
     <>
       <Screen
-        title="Setup Wallet Connection"
+        title={!nostrWalletConnectUrl ? "Setup Wallet Connection" : "Name Wallet"}
         right={() =>
           walletIdWithConnection !== -1 ? (
             <Pressable
@@ -123,7 +149,7 @@ export function SetupWallet() {
           <Loading />
           <Text className="mt-4">Connecting to your Wallet</Text>
         </View>
-      ) : (
+      ) : !nostrWalletConnectUrl ? (
         <>
           <QRCodeScanner onScanned={handleScanned} startScanning />
           <View className="flex flex-row items-stretch justify-center gap-4 p-6">
@@ -137,6 +163,30 @@ export function SetupWallet() {
             </Button>
           </View>
         </>
+      ) : (
+        <DismissableKeyboardView>
+          <View className="flex-1 p-6">
+            <View className="flex-1 flex flex-col gap-3 items-center justify-center">
+              <Label nativeID="name" className="text-muted-foreground text-center">
+                Wallet name
+              </Label>
+              <Input
+                autoFocus
+                className="w-full border-transparent bg-transparent native:text-2xl text-center"
+                value={name}
+                onChangeText={setName}
+                aria-labelledbyledBy="name"
+                placeholder="Enter a name for your wallet"
+                returnKeyType="done"
+              />
+            </View>
+            <Button size="lg" onPress={addWallet}>
+              <TextClassContext.Consumer>
+                {(className) => <Text className={className}>Finish</Text>}
+              </TextClassContext.Consumer>
+            </Button>
+          </View>
+        </DismissableKeyboardView>
       )}
     </>
   );

From a77fc732cbbc93964a71c793f9bc3256d8273e78 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 23 Oct 2024 01:09:31 +0530
Subject: [PATCH 09/16] chore: set info toast position

---
 pages/settings/wallets/SetupWallet.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
index de7bb0b..329427a 100644
--- a/pages/settings/wallets/SetupWallet.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -72,6 +72,7 @@ export function SetupWallet() {
         type: "success",
         text1: "Connection successful",
         text2: "Please set your wallet name to finish",
+        position: "top",
       });
     } catch (error) {
       console.error(error);

From 6ee4d41ca2e197668d28d9d24609ea7325eaedc9 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 23 Oct 2024 01:14:08 +0530
Subject: [PATCH 10/16] chore: remove comment

---
 pages/settings/wallets/SetupWallet.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
index 329427a..0cd7af6 100644
--- a/pages/settings/wallets/SetupWallet.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -19,7 +19,6 @@ import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import { REQUIRED_CAPABILITIES } from "~/lib/constants";
 import { TextClassContext } from "~/components/ui/text";
 
-// TODO: Handle wallets with expired connection secrets
 export function SetupWallet() {
   const wallets = useAppStore((store) => store.wallets);
   const walletIdWithConnection = wallets.findIndex((wallet) => wallet.nostrWalletConnectUrl);

From 6aa44dfaf40c6fa329d3dc09a8455da2a09f4916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 23 Oct 2024 15:13:01 +0200
Subject: [PATCH 11/16] fix: button content

---
 pages/settings/wallets/SetupWallet.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
index 0cd7af6..44bd1da 100644
--- a/pages/settings/wallets/SetupWallet.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -17,7 +17,6 @@ import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import { REQUIRED_CAPABILITIES } from "~/lib/constants";
-import { TextClassContext } from "~/components/ui/text";
 
 export function SetupWallet() {
   const wallets = useAppStore((store) => store.wallets);
@@ -105,7 +104,7 @@ export function SetupWallet() {
   return (
     <>
       <Screen
-        title={!nostrWalletConnectUrl ? "Setup Wallet Connection" : "Name Wallet"}
+        title="Setup Wallet Connection"
         right={() =>
           walletIdWithConnection !== -1 ? (
             <Pressable
@@ -181,9 +180,7 @@ export function SetupWallet() {
               />
             </View>
             <Button size="lg" onPress={addWallet}>
-              <TextClassContext.Consumer>
-                {(className) => <Text className={className}>Finish</Text>}
-              </TextClassContext.Consumer>
+              <Text>Finish</Text>
             </Button>
           </View>
         </DismissableKeyboardView>

From d8f130ef88605a5bf981c3975f45083a704bfb31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 23 Oct 2024 15:26:01 +0200
Subject: [PATCH 12/16] fix: undo button change

---
 pages/settings/wallets/SetupWallet.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
index 44bd1da..e7c15eb 100644
--- a/pages/settings/wallets/SetupWallet.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -17,6 +17,7 @@ import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import { REQUIRED_CAPABILITIES } from "~/lib/constants";
+import { TextClassContext } from "~/components/ui/text";
 
 export function SetupWallet() {
   const wallets = useAppStore((store) => store.wallets);
@@ -180,7 +181,9 @@ export function SetupWallet() {
               />
             </View>
             <Button size="lg" onPress={addWallet}>
-              <Text>Finish</Text>
+              <TextClassContext.Consumer>
+                {(className) => <Text className={className}>Finish</Text>}
+              </TextClassContext.Consumer>
             </Button>
           </View>
         </DismissableKeyboardView>

From 97a97afc494b0024a38d252356ab7ae2ef9527bd Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Thu, 24 Oct 2024 13:54:16 +0530
Subject: [PATCH 13/16] fix: use button component

---
 pages/settings/wallets/SetupWallet.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
index e7c15eb..608d8d0 100644
--- a/pages/settings/wallets/SetupWallet.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -1,4 +1,4 @@
-import { Pressable, Text, TouchableOpacity, View } from "react-native";
+import { Pressable, TouchableOpacity, View } from "react-native";
 import React from "react";
 import * as Clipboard from "expo-clipboard";
 import { nwc } from "@getalby/sdk";
@@ -16,8 +16,8 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
+import { Text } from "~/components/ui/text";
 import { REQUIRED_CAPABILITIES } from "~/lib/constants";
-import { TextClassContext } from "~/components/ui/text";
 
 export function SetupWallet() {
   const wallets = useAppStore((store) => store.wallets);
@@ -181,9 +181,7 @@ export function SetupWallet() {
               />
             </View>
             <Button size="lg" onPress={addWallet}>
-              <TextClassContext.Consumer>
-                {(className) => <Text className={className}>Finish</Text>}
-              </TextClassContext.Consumer>
+              <Text>Finish</Text>
             </Button>
           </View>
         </DismissableKeyboardView>

From 8ecc8e974457228b80e30c4722dbeced4b82d868 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Thu, 24 Oct 2024 15:03:36 +0530
Subject: [PATCH 14/16] chore: redirect to setup if wallets.length is 0

---
 app/(app)/_layout.tsx      | 6 +++---
 pages/settings/Wallets.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
index 6bef8ff..6d781ac 100644
--- a/app/(app)/_layout.tsx
+++ b/app/(app)/_layout.tsx
@@ -7,7 +7,7 @@ import { useRouteInfo } from 'expo-router/build/hooks';
 export default function AppLayout() {
     const { hasSession } = useSession();
     const isOnboarded = useAppStore(store => store.isOnboarded);
-    const nwcClient = useAppStore(store => store.nwcClient);
+    const wallets = useAppStore(store => store.wallets);
     const route = useRouteInfo();
     useHandleLinking();
 
@@ -23,8 +23,8 @@ export default function AppLayout() {
 
     const connectionPage = "/settings/wallets/setup";
     // Check the current pathname to prevent redirect loops
-    if (!nwcClient && route.pathname !== connectionPage) {
-        console.log("No NWC client available, redirecting to wallet setup");
+    if (!wallets.length && route.pathname !== connectionPage) {
+        console.log("No wallets available, redirecting to setup");
         return <Redirect href={connectionPage} />;
     }
 
diff --git a/pages/settings/Wallets.tsx b/pages/settings/Wallets.tsx
index 43a0934..5182761 100644
--- a/pages/settings/Wallets.tsx
+++ b/pages/settings/Wallets.tsx
@@ -72,8 +72,8 @@ export function Wallets() {
           <Button
             size="lg"
             onPress={() => {
-              useAppStore.getState().setSelectedWalletId(wallets.length);
               router.dismissAll();
+              router.push("/settings/wallets/setup");
             }}
           >
             <Text>Connect a Wallet</Text>

From 1ba28e873983bf144314e05a772972607c96f43e Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Thu, 24 Oct 2024 15:37:30 +0530
Subject: [PATCH 15/16] chore: disable button is name is empty

---
 pages/settings/wallets/SetupWallet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
index 608d8d0..fb2ba64 100644
--- a/pages/settings/wallets/SetupWallet.tsx
+++ b/pages/settings/wallets/SetupWallet.tsx
@@ -180,7 +180,7 @@ export function SetupWallet() {
                 returnKeyType="done"
               />
             </View>
-            <Button size="lg" onPress={addWallet}>
+            <Button size="lg" onPress={addWallet} disabled={!name}>
               <Text>Finish</Text>
             </Button>
           </View>

From d7c41ccef5d289c9623894598bf50024015d9650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?=
 <100827540+reneaaron@users.noreply.github.com>
Date: Fri, 25 Oct 2024 10:52:27 +0200
Subject: [PATCH 16/16] fix: success layout (#160)

* fix: success layout

* fix: center content on screen
---
 animations/Tick.tsx              |  5 ++--
 pages/receive/ReceiveSuccess.tsx | 43 ++++++++++++++++++--------------
 pages/send/PaymentSuccess.tsx    | 14 ++++++-----
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/animations/Tick.tsx b/animations/Tick.tsx
index 0d9657e..0eb0e75 100644
--- a/animations/Tick.tsx
+++ b/animations/Tick.tsx
@@ -6,8 +6,9 @@ export function Tick() {
       autoPlay
       loop={false}
       style={{
-        width: 400,
-        height: 400,
+        width: "100%",
+        height: "100%",
+        minHeight: 250,
       }}
       source={require("../assets/animations/success.json")}
     />
diff --git a/pages/receive/ReceiveSuccess.tsx b/pages/receive/ReceiveSuccess.tsx
index 9612b6f..622f5eb 100644
--- a/pages/receive/ReceiveSuccess.tsx
+++ b/pages/receive/ReceiveSuccess.tsx
@@ -1,6 +1,6 @@
 import { Invoice } from "@getalby/lightning-tools";
 import { router, useLocalSearchParams } from "expo-router";
-import { View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { Tick } from "~/animations/Tick";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
@@ -17,32 +17,37 @@ export function ReceiveSuccess() {
   return (
     <View className="flex-1 flex flex-col">
       <Screen
-        title="Payment Successful"
+        title="Receive successful"
       />
-      <View className="flex-1 justify-center items-center gap-2">
-        <View className="-mt-32">
+      <ScrollView contentContainerClassName="flex justify-center items-center gap-8 p-6">
+        <View className="flex-1 w-full">
           <Tick />
         </View>
-        <Text className="text-3xl font-bold2 text-muted-foreground -mt-32">
+        <Text className="text-3xl font-bold2 text-muted-foreground">
           Received
         </Text>
-        <View className="flex flex-row gap-2 mt-10">
-          <Text className="text-receive text-3xl font-semibold2">
-            + {decodedInvoice.satoshi}
-          </Text>
-          <Text className="text-3xl font-semibold2 text-muted-foreground">
-            sats
-          </Text>
+        <View className="flex flex-col items-center gap-2 mt-10">
+          <View className="flex flex-row items-end justify-center">
+            <Text className="text-3xl text-receive font-semibold2">
+              + {new Intl.NumberFormat().format(+decodedInvoice.satoshi)}{" "}
+            </Text>
+            <Text className="text-2xl text-muted-foreground font-semibold2">sats</Text>
+          </View>
+          {getFiatAmount &&
+            <Text className="text-2xl text-muted-foreground font-semibold2">{getFiatAmount(+decodedInvoice.satoshi)}</Text>
+          }
         </View>
-        {getFiatAmount &&
-          <Text className="text-muted-foreground text-2xl font-semibold2">
-            {getFiatAmount(decodedInvoice.satoshi) ?? ""}
-          </Text>
-        }
         {decodedInvoice.description && (
-          <Text className="mt-4">{decodedInvoice.description}</Text>
+          <View className="flex flex-col gap-2 items-center">
+            <Text className="text-muted-foreground text-center font-semibold2">
+              Description
+            </Text>
+            <Text className="text-foreground text-center text-2xl font-medium2">
+              {decodedInvoice.description}
+            </Text>
+          </View>
         )}
-      </View>
+      </ScrollView>
       <View className="flex flex-col gap-3 m-6">
         <Button
           size="lg"
diff --git a/pages/send/PaymentSuccess.tsx b/pages/send/PaymentSuccess.tsx
index 3f93b69..4e35b91 100644
--- a/pages/send/PaymentSuccess.tsx
+++ b/pages/send/PaymentSuccess.tsx
@@ -1,5 +1,5 @@
 import { router, useLocalSearchParams } from "expo-router";
-import { View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { Tick } from "~/animations/Tick";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
@@ -24,11 +24,13 @@ export function PaymentSuccess() {
   return (
     <View className="flex-1 flex flex-col">
       <Screen
-        title="Success"
+        title="Payment succeeded"
       />
-      <View className="flex-1 justify-center items-center gap-8 p-6">
-        <Tick />
-        <View className="flex flex-col items-center gap-2 -mt-24">
+      <ScrollView contentContainerClassName="flex justify-center items-center gap-8 p-6">
+        <View className="flex-1 w-full">
+          <Tick />
+        </View>
+        <View className="flex flex-col items-center gap-2">
           <View className="flex flex-row items-end justify-center">
             <Text className="text-3xl text-foreground font-semibold2">{new Intl.NumberFormat().format(+amount)}{" "}</Text>
             <Text className="text-2xl text-muted-foreground font-semibold2">sats</Text>
@@ -65,7 +67,7 @@ export function PaymentSuccess() {
           </View>
         }
 
-      </View>
+      </ScrollView>
       <View className="p-6">
         <Button
           size="lg"