feat: show wallet name in payment confirmation screen

getAlby · Dec 23, 2024 · 9ae229c · 9ae229c
1 parent 5a40ba2
commit 9ae229c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/pages/send/ConfirmPayment.tsx b/pages/send/ConfirmPayment.tsx
@@ -3,7 +3,7 @@ import { Invoice } from "@getalby/lightning-tools";
 import { Link, router, useLocalSearchParams } from "expo-router";
 import React from "react";
 import { Pressable, View } from "react-native";
-import { TriangleAlert, ZapIcon } from "~/components/Icons";
+import { TriangleAlert, Wallet2, ZapIcon } from "~/components/Icons";
 import Loading from "~/components/Loading";
 import { Receiver } from "~/components/Receiver";
 import Screen from "~/components/Screen";
@@ -17,7 +17,7 @@ import {
 import { Text } from "~/components/ui/text";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
 import { useTransactions } from "~/hooks/useTransactions";
-import { ALBY_LIGHTNING_ADDRESS } from "~/lib/constants";
+import { ALBY_LIGHTNING_ADDRESS, DEFAULT_WALLET_NAME } from "~/lib/constants";
 import { errorToast } from "~/lib/errorToast";
 import { useAppStore } from "~/lib/state/appStore";
 
@@ -32,6 +32,8 @@ export function ConfirmPayment() {
     };
   const getFiatAmount = useGetFiatAmount();
   const [isLoading, setLoading] = React.useState(false);
+  const wallets = useAppStore((store) => store.wallets);
+  const selectedWalletId = useAppStore((store) => store.selectedWalletId);
 
   async function pay() {
     setLoading(true);
@@ -115,7 +117,17 @@ export function ConfirmPayment() {
         )}
         <Receiver originalText={originalText} invoice={invoice} />
       </View>
-      <View className="p-6">
+      <View className="p-6 bg-background">
+        <View className="flex flex-row items-center justify-center gap-2 mb-4 px-4">
+          <Wallet2 className="text-muted-foreground" />
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            className="text-muted-foreground font-medium2 text-xl"
+          >
+            {wallets[selectedWalletId].name || DEFAULT_WALLET_NAME}
+          </Text>
+        </View>
         {transactions?.transactions.some(
           (transaction) => transaction.state === "pending",
         ) && (

diff --git a/pages/withdraw/Withdraw.tsx b/pages/withdraw/Withdraw.tsx
@@ -5,7 +5,7 @@ import React, { useEffect } from "react";
 import { View } from "react-native";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import { DualCurrencyInput } from "~/components/DualCurrencyInput";
-import { AlertCircle, ClipboardPaste } from "~/components/Icons";
+import { AlertCircle, ClipboardPaste, Wallet2 } from "~/components/Icons";
 import Loading from "~/components/Loading";
 import QRCodeScanner from "~/components/QRCodeScanner";
 import Screen from "~/components/Screen";
@@ -18,6 +18,7 @@ import {
 } from "~/components/ui/card";
 import { Text } from "~/components/ui/text";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
+import { DEFAULT_WALLET_NAME } from "~/lib/constants";
 import { errorToast } from "~/lib/errorToast";
 import { useAppStore } from "~/lib/state/appStore";
 import { cn } from "~/lib/utils";
@@ -28,6 +29,8 @@ export function Withdraw() {
   const [isLoading, setLoading] = React.useState(false);
   const [loadingConfirm, setLoadingConfirm] = React.useState(false);
   const [startScanning, setStartScanning] = React.useState(false);
+  const wallets = useAppStore((store) => store.wallets);
+  const selectedWalletId = useAppStore((store) => store.selectedWalletId);
 
   const [valueSat, setValueSat] = React.useState("");
   const [lnurlDetails, setLnurlDetails] =
@@ -260,7 +263,17 @@ export function Withdraw() {
                     </View>
                   </View>
                 )}
-                <View className="p-6">
+                <View className="p-6 bg-background">
+                  <View className="flex flex-row items-center justify-center gap-2 mb-4 px-4">
+                    <Wallet2 className="text-muted-foreground" />
+                    <Text
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                      className="text-muted-foreground font-medium2 text-xl"
+                    >
+                      {wallets[selectedWalletId].name || DEFAULT_WALLET_NAME}
+                    </Text>
+                  </View>
                   {lnurlDetails.minWithdrawable !==
                     lnurlDetails.maxWithdrawable && (
                     <Card className="mb-4">