Merge pull request #229 from getAlby/task-show-name

feat: show wallet name in payment confirmation and withdraw screen
getAlby · Dec 24, 2024 · 7673f43 · 7673f43
2 parents 58d8171 + 6f7373d
commit 7673f43
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/pages/send/ConfirmPayment.tsx b/pages/send/ConfirmPayment.tsx
@@ -4,15 +4,15 @@ import { Link, router, useLocalSearchParams } from "expo-router";
 import React from "react";
 import { Pressable, View } from "react-native";
 import Alert from "~/components/Alert";
-import { AlertCircleIcon, ZapIcon } from "~/components/Icons";
+import { AlertCircleIcon, WalletIcon, ZapIcon } from "~/components/Icons";
 import Loading from "~/components/Loading";
 import { Receiver } from "~/components/Receiver";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
 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";
 
@@ -27,6 +27,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);
@@ -110,8 +112,18 @@ export function ConfirmPayment() {
         )}
         <Receiver originalText={originalText} invoice={invoice} />
       </View>
-      <View className="p-6">
-        {!transactions?.transactions.some(
+      <View className="p-6 bg-background">
+        <View className="flex flex-row items-center justify-center gap-2 mb-4 px-4">
+          <WalletIcon 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",
         ) && (
           <Link href="/transactions" asChild>

diff --git a/pages/withdraw/Withdraw.tsx b/pages/withdraw/Withdraw.tsx
@@ -5,13 +5,14 @@ import React, { useEffect } from "react";
 import { View } from "react-native";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import { DualCurrencyInput } from "~/components/DualCurrencyInput";
-import { PasteIcon } from "~/components/Icons";
+import { PasteIcon, WalletIcon } from "~/components/Icons";
 import Loading from "~/components/Loading";
 import QRCodeScanner from "~/components/QRCodeScanner";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
 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";
@@ -22,6 +23,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] =
@@ -254,7 +257,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">
+                    <WalletIcon 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>
                   <Button
                     size="lg"
                     className="flex flex-row gap-2"