Implement remove network functionality for added networks (#93)

* Set current network to ethereum after removing network

* Display confirm dialog after deleting network

---------

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>

src/components/Accounts.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
 import { Button, List, Text, useTheme } from 'react-native-paper';
 import mergeWith from 'lodash/mergeWith';
+import { setInternetCredentials } from 'react-native-keychain';
 
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -18,21 +19,28 @@ import { COSMOS_METHODS } from '../utils/wallet-connect/COSMOSData';
 import { useNetworks } from '../context/NetworksContext';
 import { COSMOS, EIP155 } from '../utils/constants';
 import { NETWORK_METHODS } from '../utils/wallet-connect/common-data';
+import ConfirmDialog from './ConfirmDialog';
 
 const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
   const { accounts, setAccounts } = useAccounts();
-  const { selectedNetwork } = useNetworks();
+  const { networksData, selectedNetwork, setNetworksData, setSelectedNetwork } =
+    useNetworks();
   const [expanded, setExpanded] = useState(false);
   const [isAccountCreating, setIsAccountCreating] = useState(false);
   const [hdDialog, setHdDialog] = useState(false);
   const [pathCode, setPathCode] = useState('');
+  const [deleteNetworkDialog, setDeleteNetworkDialog] =
+    useState<boolean>(false);
+
   const theme = useTheme();
 
   const handlePress = () => setExpanded(!expanded);
 
+  const hideDeleteNetworkDialog = () => setDeleteNetworkDialog(false);
+
   const updateAccounts = (account: Account) => {
     setAccounts([...accounts, account]);
   };
@@ -143,6 +151,24 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
       />
     ));
 
+  const handleRemove = async () => {
+    const updatedNetworks = networksData.filter(
+      networkData => selectedNetwork!.networkId !== networkData.networkId,
+    );
+
+    await setInternetCredentials(
+      'networks',
+      '_',
+      JSON.stringify(updatedNetworks),
+    );
+    const currentNetwork = networksData.find(
+      networkData => networkData.networkId === '0',
+    );
+    setSelectedNetwork(currentNetwork!);
+    setDeleteNetworkDialog(false);
+    setNetworksData(updatedNetworks);
+  };
+
   return (
     <ScrollView>
       <View>
@@ -216,6 +242,27 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
             </Text>
           </TouchableOpacity>
         </View>
+
+        {!selectedNetwork!.isDefault && (
+          <View style={styles.signLink}>
+            <TouchableOpacity
+              onPress={() => {
+                setDeleteNetworkDialog(true);
+              }}>
+              <Text
+                variant="titleSmall"
+                style={[styles.hyperlink, { color: theme.colors.primary }]}>
+                Delete Network
+              </Text>
+            </TouchableOpacity>
+          </View>
+        )}
+        <ConfirmDialog
+          title="Delete Network"
+          visible={deleteNetworkDialog}
+          hideDialog={hideDeleteNetworkDialog}
+          onConfirm={handleRemove}
+        />
       </View>
     </ScrollView>
   );

src/components/ConfirmDialog.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Portal, Dialog, Button, Text } from 'react-native-paper';
 import { ResetDialogProps } from '../types';
 
-const ResetWalletDialog = ({
+const ConfirmDialog = ({
+  title,
   visible,
   hideDialog,
   onConfirm,
@@ -10,7 +11,7 @@ const ResetWalletDialog = ({
   return (
     <Portal>
       <Dialog visible={visible} onDismiss={hideDialog}>
-        <Dialog.Title>Reset Wallet</Dialog.Title>
+        <Dialog.Title>{title}</Dialog.Title>
         <Dialog.Content>
           <Text variant="bodyMedium">Are you sure?</Text>
         </Dialog.Content>
@@ -25,4 +26,4 @@ const ResetWalletDialog = ({
   );
 };
 
-export default ResetWalletDialog;
+export default ConfirmDialog;

src/screens/AddNetwork.tsx

@@ -46,6 +46,7 @@ const AddNetwork = () => {
       const newNetworkData = {
         ...data,
         namespace,
+        isDefault: false,
       };
 
       const mnemonicServer = await getInternetCredentials('mnemonicServer');

src/screens/HomeScreen.tsx

@@ -11,7 +11,7 @@ import { DialogComponent } from '../components/Dialog';
 import { NetworkDropdown } from '../components/NetworkDropdown';
 import Accounts from '../components/Accounts';
 import CreateWallet from '../components/CreateWallet';
-import ResetWalletDialog from '../components/ResetWalletDialog';
+import ConfirmDialog from '../components/ConfirmDialog';
 import styles from '../styles/stylesheet';
 import { useAccounts } from '../context/AccountsContext';
 import { useWalletConnect } from '../context/WalletConnectContext';
@@ -156,7 +156,8 @@ const HomeScreen = () => {
         hideDialog={hideWalletDialog}
         contentText={phrase}
       />
-      <ResetWalletDialog
+      <ConfirmDialog
+        title="Reset wallet"
         visible={resetWalletDialog}
         hideDialog={hideResetDialog}
         onConfirm={confirmResetWallet}

src/types.ts

@@ -74,6 +74,7 @@ export type CreateWalletProps = {
 };
 
 export type ResetDialogProps = {
+  title: string;
   visible: boolean;
   hideDialog: () => void;
   onConfirm: () => void;