feat: remove a single wallet

packages/screens/Mini/Profile/Account.tsx

@@ -111,7 +111,7 @@ export const Account: React.FC<{ account: StoreWallet; isLast: boolean }> = ({
         )}
         <DropdownWithListItem
           style={{ paddingHorizontal: 0, width: 210 }}
-          positionStyle={{ top: 35 }}
+          positionStyle={{ top: -20 }}
           icon={dotSVG}
           iconSize={22}
           items={[

packages/screens/Mini/Profile/AccountDetailsScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Linking, TextInput, View } from "react-native";
+import { Alert, Linking, TextInput, View } from "react-native";
+import { useSelector } from "react-redux";
 
 import openSVG from "../../../../assets/icons/open-blue.svg";
 import penSVG from "../../../../assets/icons/pen-solid-gray.svg";
@@ -8,11 +9,16 @@ import { BlurScreenContainer } from "../layout/BlurScreenContainer";
 import { BrandText } from "@/components/BrandText";
 import { SVG } from "@/components/SVG";
 import { CustomPressable } from "@/components/buttons/CustomPressable";
-import { useSelectedNativeWallet } from "@/hooks/wallet/useSelectedNativeWallet";
+import { resetWallet } from "@/hooks/wallet/getNativeWallet";
 import { accountExplorerLink } from "@/networks";
 import { ShowWalletQR } from "@/screens/Mini/Wallet/components/ShowWalletQR";
-import { updateWallet } from "@/store/slices/wallets";
-import { useAppDispatch } from "@/store/store";
+import { CustomButton } from "@/screens/Mini/components/Button/CustomButton";
+import {
+  removeWalletById,
+  selectWalletById,
+  updateWallet,
+} from "@/store/slices/wallets";
+import { RootState, useAppDispatch } from "@/store/store";
 import { ScreenFC } from "@/utils/navigation";
 import {
   azureBlue,
@@ -30,16 +36,43 @@ export const AccountDetailsScreen: ScreenFC<"MiniAccountDetails"> = ({
   const navigateToProfile = () => navigation.replace("MiniProfile");
   const params = route.params;
   const [accountName, setAccountName] = useState(params.accountName);
-  const selectedWallet = useSelectedNativeWallet();
+  const wallet = useSelector((state: RootState) =>
+    selectWalletById(state, params.id),
+  );
   const dispatch = useAppDispatch();
 
   const onAccountNameChange = (text: string) => {
-    if (selectedWallet) {
-      dispatch(updateWallet({ ...selectedWallet, name: text }));
+    if (wallet) {
+      dispatch(updateWallet({ ...wallet, name: text }));
     }
     setAccountName(text || "");
   };
 
+  const onResetPress = () => {
+    if (wallet) {
+      Alert.alert(
+        "Are you sure?",
+        "This action will remove the wallet from your device. If you didn't save the seed, this wallet will be lost forever! If you saved the seed, you will be able to import it back later.",
+        [
+          {
+            text: "Cancel",
+            style: "cancel",
+          },
+          {
+            text: "Delete",
+            onPress: () => {
+              resetWallet(wallet.index); // remove from storage
+              dispatch(removeWalletById(wallet.index)); // remove from redux | app state
+              navigation.navigate("NativeWallet"); // this one is here just in case the user don't have any more wallets
+            },
+            style: "destructive",
+            isPreferred: true,
+          },
+        ],
+      );
+    }
+  };
+
   return (
     <BlurScreenContainer title="Account Details" onGoBack={navigateToProfile}>
       <View
@@ -70,7 +103,7 @@ export const AccountDetailsScreen: ScreenFC<"MiniAccountDetails"> = ({
         </View>
       </View>
 
-      <ShowWalletQR selectedWallet={selectedWallet} />
+      <ShowWalletQR selectedWallet={wallet} />
 
       <View
         style={{
@@ -88,19 +121,24 @@ export const AccountDetailsScreen: ScreenFC<"MiniAccountDetails"> = ({
         </BrandText>
         <CustomPressable
           onPress={() => {
-            if (selectedWallet) {
+            if (wallet) {
               Linking.openURL(
-                accountExplorerLink(
-                  selectedWallet.networkId,
-                  selectedWallet.address,
-                ),
+                accountExplorerLink(wallet.networkId, wallet.address),
               );
             }
           }}
         >
           <SVG source={openSVG} height={22} width={22} />
         </CustomPressable>
       </View>
+      <CustomButton
+        title="Delete"
+        onPress={onResetPress}
+        type="danger"
+        style={{
+          marginTop: layout.spacing_x1_5,
+        }}
+      />
     </BlurScreenContainer>
   );
 };

packages/screens/Mini/Wallet/TokenScreen.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import { FlatList, View } from "react-native";
 import { useSelector } from "react-redux";
 
@@ -35,14 +35,18 @@ import { layout } from "@/utils/style/layout";
 export const TokenScreen: ScreenFC<"MiniWallets"> = ({ navigation }) => {
   const wallets = useSelector(selectAllWallets);
   const dispatch = useAppDispatch();
-  if (wallets.length === 0) {
-    navigation.navigate("NativeWallet");
-  }
 
   const selectedWallet = useSelectedNativeWallet();
-  if (!selectedWallet) {
-    dispatch(setSelectedNativeWalletIndex(wallets[0].index));
-  }
+
+  useEffect(() => {
+    if (!selectedWallet) {
+      if (wallets.length !== 0) {
+        dispatch(setSelectedNativeWalletIndex(wallets[0].index));
+      } else {
+        navigation.navigate("NativeWallet");
+      }
+    }
+  }, [dispatch, navigation, selectedWallet, wallets]);
 
   const balances = useBalances(
     selectedWallet?.networkId,

packages/store/slices/wallets.ts

@@ -57,7 +57,7 @@ const walletsSlice = createSlice({
   reducers: {
     addSelected: storeWalletsAdapter.setOne,
     updateWallet: storeWalletsAdapter.upsertOne,
-    removeSelected: storeWalletsAdapter.removeOne,
+    removeWalletById: storeWalletsAdapter.removeOne,
     resetAllWallets: storeWalletsAdapter.removeAll,
     setSelectedNativeWalletIndex: (state, action: PayloadAction<number>) => {
       // Add new reducer function
@@ -105,10 +105,12 @@ export const addressBookReducer = addressBookSlice.reducer;
 export const tokensReducer = tokensSlice.reducer;
 export const { addEntry, removeEntry, resetAllAddressBook } =
   addressBookSlice.actions;
+
 export const {
   addSelected,
   resetAllWallets,
   setSelectedNativeWalletIndex,
   updateWallet,
+  removeWalletById,
 } = walletsSlice.actions;
 export const { updateToken, resetAllTokens } = tokensSlice.actions;