Reset Add Network form after switching the network (#97)

* Reset form upon switching nws

* Modify gitignore

* Fix undefined field error

* Add env steps in readme

* Remove .env file

* Fix indentation in readme

* Disable buttons while loading (#99)

* Disable buttons while loading

* Disable pairing modal button

* Format code

.env.example

@@ -1,2 +1 @@
 WALLET_CONNECT_PROJECT_ID=
-

.gitignore

@@ -64,3 +64,5 @@ yarn-error.log
 
 # testing
 /coverage
+
+.env

README.md

@@ -81,11 +81,18 @@
    yarn
    ```
 
-4. In [.env](./.env) file add WalletConnect project id. You can generate your own ProjectId at https://cloud.walletconnect.com
+4. Setup .env
+   - Copy and update [`.env`](./.env)
 
-  ```
+     ```
-  WALLET_CONNECT_PROJECT_ID=39bc93c...
+     cp .env.example .env
-  ```
+     ```
+   
+   - In [.env](./.env) file add WalletConnect project id. You can generate your own ProjectId at https://cloud.walletconnect.com
+
+     ```
+     WALLET_CONNECT_PROJECT_ID=39bc93c...
+     ```
 
 5. Set up the Android device:
 

src/components/Accounts.tsx

@@ -134,7 +134,8 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
           <Button
             mode="contained"
             onPress={addAccountHandler}
-            loading={isAccountCreating}>
+            loading={isAccountCreating}
+            disabled={isAccountCreating}>
             {isAccountCreating ? 'Adding' : 'Add Account'}
           </Button>
         </View>

src/components/CreateWallet.tsx

@@ -15,6 +15,7 @@ const CreateWallet = ({
         <Button
           mode="contained"
           loading={isWalletCreating}
+          disabled={isWalletCreating}
           onPress={createWalletHandler}>
           {isWalletCreating ? 'Creating' : 'Create Wallet'}
         </Button>

src/components/HDPath.tsx

@@ -88,7 +88,8 @@ const HDPath = ({
         <Button
           mode="contained"
           onPress={createFromHDPathHandler}
-          loading={isAccountCreating}>
+          loading={isAccountCreating}
+          disabled={isAccountCreating}>
           {isAccountCreating ? 'Adding' : 'Add Account'}
         </Button>
       </View>

src/components/PairingModal.tsx

@@ -229,7 +229,11 @@ const PairingModal = ({
           </ScrollView>
 
           <View style={styles.flexRow}>
-            <Button mode="contained" onPress={handleAccept} loading={isLoading}>
+            <Button
+              mode="contained"
+              onPress={handleAccept}
+              loading={isLoading}
+              disabled={isLoading}>
               {isLoading ? 'Connecting' : 'Yes'}
             </Button>
             <View style={styles.space} />

src/screens/AddNetwork.tsx

@@ -56,20 +56,19 @@ const AddNetwork = () => {
         chain => chain.chainId === Number(chainId),
       );
       if (!ethChainDetails) {
-        reset({ chainId: chainId });
         return;
       }
       setValue('networkName', ethChainDetails.name);
       setValue('rpcUrl', ethChainDetails.rpc[0]);
-      setValue('blockExplorerUrl', ethChainDetails.explorers![0].url);
+      setValue('blockExplorerUrl', ethChainDetails.explorers?.[0].url || '');
       setValue('coinType', String(ethChainDetails.slip44));
       setValue('currencySymbol', ethChainDetails.nativeCurrency.symbol);
+      return;
     }
     const cosmosChainDetails = chains.find(
       ({ chain_id }) => chain_id === chainId,
     );
     if (!cosmosChainDetails) {
-      reset({ chainId: chainId });
       return;
     }
     setValue('networkName', cosmosChainDetails.pretty_name);
@@ -152,6 +151,10 @@ const AddNetwork = () => {
     fetchChainDetails(watchChainId);
   }, [watchChainId, fetchChainDetails]);
 
+  useEffect(() => {
+    reset();
+  }, [namespace, reset]);
+
   return (
     // TODO: get form data from json file
     <ScrollView contentContainerStyle={styles.signPage}>

src/screens/SignRequest.tsx

@@ -282,7 +282,8 @@ const SignRequest = ({ route }: SignRequestProps) => {
             <Button
               mode="contained"
               onPress={signMessageHandler}
-              loading={isApproving}>
+              loading={isApproving}
+              disabled={isApproving}>
               Yes
             </Button>
             <Button