Merge pull request #198 from getAlby/task-delete-contacts

feat: delete contacts
getAlby · Dec 3, 2024 · b96a2f3 · b96a2f3
2 parents 11eb1c6 + 3122c12
commit b96a2f3
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 55 deletions.
diff --git a/components/Icons.tsx b/components/Icons.tsx
@@ -34,7 +34,9 @@ import {
   RefreshCw,
   Settings2,
   Share2,
+  Trash2,
   TriangleAlert,
+  UserCircle2,
   Wallet2,
   WalletIcon,
   X,
@@ -95,6 +97,8 @@ interopIcon(CircleCheck);
 interopIcon(TriangleAlert);
 interopIcon(LogOut);
 interopIcon(ArchiveRestore);
+interopIcon(UserCircle2);
+interopIcon(Trash2);
 
 export {
   AlertCircle,
@@ -131,7 +135,9 @@ export {
   RefreshCw,
   Settings2,
   Share2,
+  Trash2,
   TriangleAlert,
+  UserCircle2,
   Wallet2,
   WalletIcon,
   X,

diff --git a/components/ui/card.tsx b/components/ui/card.tsx
@@ -11,7 +11,7 @@ const Card = React.forwardRef<
   <View
     ref={ref}
     className={cn(
-      "rounded-lg border border-border bg-card shadow-sm shadow-foreground/10",
+      "rounded-2xl border border-border bg-card shadow-sm shadow-foreground/10",
       className,
     )}
     {...props}
@@ -25,7 +25,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5 p-5", className)}
     {...props}
   />
 ));
@@ -39,6 +39,8 @@ const CardTitle = React.forwardRef<
     role="heading"
     aria-level={3}
     ref={ref}
+    numberOfLines={1}
+    ellipsizeMode="tail"
     className={cn(
       "text-xl text-card-foreground font-semibold2 leading-none tracking-tight",
       className,
@@ -54,7 +56,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Text
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("mt-1 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -65,7 +67,7 @@ const CardContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof View>
 >(({ className, ...props }, ref) => (
   <TextClassContext.Provider value="text-card-foreground">
-    <View ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    <View ref={ref} className={cn("p-5", className)} {...props} />
   </TextClassContext.Provider>
 ));
 CardContent.displayName = "CardContent";
@@ -76,7 +78,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn("flex flex-row items-center p-6 pt-0", className)}
+    className={cn("flex flex-row items-center p-5", className)}
     {...props}
   />
 ));

diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
@@ -24,6 +24,7 @@ interface AppState {
   setSecurityEnabled(securityEnabled: boolean): void;
   addWallet(wallet: Wallet): void;
   addAddressBookEntry(entry: AddressBookEntry): void;
+  removeAddressBookEntry: (index: number) => void;
   reset(): void;
   getLastAlbyPayment(): Date | null;
   updateLastAlbyPayment(): void;
@@ -140,6 +141,26 @@ export const useAppStore = create<AppState>()((set, get) => {
     });
   };
 
+  const removeAddressBookEntry = (index: number) => {
+    const addressBookEntries = [...get().addressBookEntries];
+    if (index < 0 || index >= addressBookEntries.length) {
+      return;
+    }
+
+    addressBookEntries.splice(index, 1);
+
+    for (let i = index; i < addressBookEntries.length; i++) {
+      secureStorage.setItem(
+        getAddressBookEntryKey(i),
+        JSON.stringify(addressBookEntries[i]),
+      );
+    }
+
+    secureStorage.removeItem(getAddressBookEntryKey(addressBookEntries.length));
+
+    set({ addressBookEntries });
+  };
+
   const initialSelectedWalletId = +(
     secureStorage.getItem(selectedWalletIdKey) || "0"
   );
@@ -162,6 +183,7 @@ export const useAppStore = create<AppState>()((set, get) => {
     selectedWalletId: initialSelectedWalletId,
     updateCurrentWallet,
     removeCurrentWallet,
+    removeAddressBookEntry,
     setUnlocked: (unlocked) => {
       set({ unlocked });
     },

diff --git a/pages/send/AddressBook.tsx b/pages/send/AddressBook.tsx
@@ -1,25 +1,27 @@
 import { Link, router } from "expo-router";
-import { Pressable, ScrollView, View } from "react-native";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Trash2 } from "~/components/Icons";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
 import {
   Card,
+  CardContent,
   CardDescription,
-  CardHeader,
   CardTitle,
 } from "~/components/ui/card";
 import { Text } from "~/components/ui/text";
 import { useAppStore } from "~/lib/state/appStore";
 
 export function AddressBook() {
   const addressBookEntries = useAppStore((store) => store.addressBookEntries);
+
   return (
     <View className="flex-1 flex flex-col p-6 gap-3">
       <Screen title="Address Book" />
       <ScrollView className="flex-1 flex flex-col">
         {addressBookEntries.length > 0 ? (
           addressBookEntries.map((addressBookEntry, index) => (
-            <Pressable
+            <TouchableOpacity
               key={index}
               onPress={() => {
                 router.dismissAll();
@@ -30,18 +32,37 @@ export function AddressBook() {
                   },
                 });
               }}
+              className="mb-4"
             >
-              <Card className="w-full mb-4">
-                <CardHeader className="w-full">
-                  <CardTitle>
-                    {addressBookEntry.name || addressBookEntry.lightningAddress}
-                  </CardTitle>
-                  <CardDescription>
-                    {addressBookEntry.lightningAddress}
-                  </CardDescription>
-                </CardHeader>
+              <Card>
+                <CardContent className="flex flex-row items-center gap-4">
+                  <View className="h-10 w-10 flex items-center justify-center rounded-full bg-accent">
+                    <Text className="text-foreground text-base font-bold">
+                      {addressBookEntry.name?.[0]?.toUpperCase() ||
+                        addressBookEntry.lightningAddress?.[0]?.toUpperCase() ||
+                        "SN"}
+                    </Text>
+                  </View>
+                  <View className="flex flex-1 flex-col">
+                    <CardTitle>
+                      {addressBookEntry.name ||
+                        addressBookEntry.lightningAddress}
+                    </CardTitle>
+                    <CardDescription>
+                      {addressBookEntry.lightningAddress}
+                    </CardDescription>
+                  </View>
+                  <TouchableOpacity
+                    onPress={(e) => {
+                      e.stopPropagation();
+                      useAppStore.getState().removeAddressBookEntry(index);
+                    }}
+                  >
+                    <Trash2 className="text-destructive" />
+                  </TouchableOpacity>
+                </CardContent>
               </Card>
-            </Pressable>
+            </TouchableOpacity>
           ))
         ) : (
           <Text className="text-lg">No entries yet.</Text>

diff --git a/pages/settings/address-book/NewAddressBookEntry.tsx b/pages/settings/address-book/NewAddressBookEntry.tsx
@@ -17,7 +17,7 @@ export function NewAddressBookEntry() {
     <DismissableKeyboardView>
       <View className="flex-1 flex flex-col">
         <View className="flex-1 flex flex-col p-3 gap-3">
-          <Screen title="New Address Book Entry" />
+          <Screen title="New Contact" />
           <Label nativeID="name" className="self-start justify-self-start">
             Name
           </Label>
@@ -51,6 +51,7 @@ export function NewAddressBookEntry() {
         </View>
         <View className="p-6">
           <Button
+            disabled={!name || !lightningAddress}
             onPress={() => {
               useAppStore
                 .getState()

diff --git a/pages/settings/wallets/EditWallet.tsx b/pages/settings/wallets/EditWallet.tsx
@@ -1,18 +1,23 @@
 import { Link, router } from "expo-router";
-import { Alert, Pressable, View } from "react-native";
+import { Alert, Pressable, Text, View } from "react-native";
 import Toast from "react-native-toast-message";
 
 import { Nip47Capability } from "@getalby/sdk/dist/NWCClient";
 import * as Clipboard from "expo-clipboard";
-import { TriangleAlert } from "~/components/Icons";
+import {
+  ArchiveRestore,
+  Trash2,
+  TriangleAlert,
+  Wallet2,
+  ZapIcon,
+} from "~/components/Icons";
 import Screen from "~/components/Screen";
 import {
   Card,
+  CardContent,
   CardDescription,
-  CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { Text } from "~/components/ui/text";
 import { DEFAULT_WALLET_NAME } from "~/lib/constants";
 import { useAppStore } from "~/lib/state/appStore";
 
@@ -27,25 +32,28 @@ export function EditWallet() {
           (wallets[selectedWalletId].nwcCapabilities || []).indexOf(
             capability,
           ) < 0 && (
-            <Card key={capability}>
-              <CardHeader>
-                <CardTitle className="flex flex-row gap-3 items-center">
-                  <TriangleAlert size={16} className="text-foreground" />
-                  <Text>Your wallet does not support {capability}</Text>
-                </CardTitle>
-              </CardHeader>
+            <Card key={capability} className="border-destructive">
+              <CardContent className="flex flex-row items-center gap-4">
+                <TriangleAlert className="text-destructive" />
+                <Text className="text-foreground">
+                  Your wallet does not support {capability}
+                </Text>
+              </CardContent>
             </Card>
           ),
       )}
       <Link href={`/settings/wallets/${selectedWalletId}/name`} asChild>
         <Pressable>
           <Card className="w-full">
-            <CardHeader>
-              <CardTitle>Wallet Name</CardTitle>
-              <CardDescription>
-                {wallets[selectedWalletId].name || DEFAULT_WALLET_NAME}
-              </CardDescription>
-            </CardHeader>
+            <CardContent className="flex flex-row items-center gap-4">
+              <Wallet2 className="text-muted-foreground" />
+              <View className="flex flex-1 flex-col">
+                <CardTitle>Wallet Name</CardTitle>
+                <CardDescription>
+                  {wallets[selectedWalletId].name || DEFAULT_WALLET_NAME}
+                </CardDescription>
+              </View>
+            </CardContent>
           </Card>
         </Pressable>
       </Link>
@@ -55,12 +63,15 @@ export function EditWallet() {
       >
         <Pressable>
           <Card className="w-full">
-            <CardHeader className="w-full">
-              <CardTitle className="flex flex-col">Lightning Address</CardTitle>
-              <CardDescription>
-                Update your Lightning Address to easily receive payments
-              </CardDescription>
-            </CardHeader>
+            <CardContent className="flex flex-row items-center gap-4">
+              <ZapIcon className="text-muted-foreground" />
+              <View className="flex flex-1 flex-col">
+                <CardTitle>Lightning Address</CardTitle>
+                <CardDescription>
+                  Update your Lightning Address to easily receive payments
+                </CardDescription>
+              </View>
+            </CardContent>
           </Card>
         </Pressable>
       </Link>
@@ -96,13 +107,16 @@ export function EditWallet() {
         }}
       >
         <Card className="w-full">
-          <CardHeader className="w-full">
-            <CardTitle className="flex flex-col">Export Wallet</CardTitle>
-            <CardDescription>
-              Copy your wallet's Connection Secret which can be imported into
-              another app
-            </CardDescription>
-          </CardHeader>
+          <CardContent className="flex flex-row items-center gap-4">
+            <ArchiveRestore className="text-muted-foreground" />
+            <View className="flex flex-1 flex-col">
+              <CardTitle>Export Wallet</CardTitle>
+              <CardDescription>
+                Copy your wallet's Connection Secret which can be imported into
+                another app
+              </CardDescription>
+            </View>
+          </CardContent>
         </Card>
       </Pressable>
       <Pressable
@@ -129,12 +143,15 @@ export function EditWallet() {
         }}
       >
         <Card className="w-full">
-          <CardHeader className="w-full">
-            <CardTitle className="flex flex-col">Delete Wallet</CardTitle>
-            <CardDescription>
-              Remove this wallet from your list of wallets
-            </CardDescription>
-          </CardHeader>
+          <CardContent className="flex flex-row items-center gap-4">
+            <Trash2 className="text-muted-foreground" />
+            <View className="flex flex-1 flex-col">
+              <CardTitle>Delete Wallet</CardTitle>
+              <CardDescription>
+                Remove this wallet from your list of wallets
+              </CardDescription>
+            </View>
+          </CardContent>
         </Card>
       </Pressable>
     </View>