Bridge Improvements #1 (#1205)

tangle-network · May 12, 2023 · 87b57fa · 87b57fa
1 parent 7128a51
commit 87b57fa
Show file tree

Hide file tree

Showing 27 changed files with 449 additions and 300 deletions.
diff --git a/apps/bridge-dapp/README.md b/apps/bridge-dapp/README.md
@@ -3,17 +3,18 @@
 
 ![Webb Logo](../../.github/assets/webb_banner_light.png#gh-light-mode-only)
 ![Webb Logo](../../.github/assets/webb_banner_dark.png#gh-dark-mode-only)
-  </a>
+</a>
+
   </div>
 
-# Webb Hubble Bridge 
+# Webb Hubble Bridge
 
 <p align="left">
     <strong>🔭 Private cross-chain bridge for digital assets 🚀</strong>
     <br />
 </p>
 
-## Run Hubble Bridge  💻
+## Run Hubble Bridge 💻
 
 Once the development environment is set up, you may proceed to install the required dependencies and run the dapp locally.
 
@@ -43,35 +44,34 @@ To make local development and testing easier we can run a local EVM network and
 
 #### Setting up local testnet
 
-Before setting up a local testnet, we first need to clear our local storage in the browser for dApp to work correctly with our local evm testnet. 
+Before setting up a local testnet, we first need to clear our local storage in the browser for dApp to work correctly with our local evm testnet.
 
 **1. Clear local storage in the browser**
 
 Next, we will open a separate terminal window and execute the following instructions. For more in-depth protocol-solidity setup please refer to the [`README.md`](https://github.com/webb-tools/protocol-solidity#-getting-started---)
 
-
 **2. Clone the [protocol-solidity](https://github.com/webb-tools/protocol-solidity) repo**
 
 ```
 git clone https://github.com/webb-tools/protocol-solidity/
 cd protocol-solidity
 ```
 
-**3. Install dependencies** 
+**3. Install dependencies**
 
 ```
 yarn install
 ```
 
-**4. Fetch submodules** 
+**4. Fetch submodules**
 
 ```
 git submodule update --init --recursive
 ```
 
 **5. Populate fixtures from the submodules:**
 
-⚠️ **NOTE:** Prerequisites for fetching fixtures is to have [dvc](https://dvc.org/) installed locally. You can view installation instructions [here](https://dvc.org/doc/install). For macos it is recommended to install using `pip install dvc`. 
+⚠️ **NOTE:** Prerequisites for fetching fixtures is to have [dvc](https://dvc.org/) installed locally. You can view installation instructions [here](https://dvc.org/doc/install). For macos it is recommended to install using `pip install dvc`.
 
 ```
 yarn fetch:fixtures
@@ -83,15 +83,15 @@ yarn fetch:fixtures
 yarn build
 ```
 
-**7. Start local test network** 
+**7. Start local test network**
 
 ```
 npx ts-node ./scripts/evm/deployments/LocalEvmVBridge.ts
 ```
 
-Great! Now you have a running local EVM test network. 
+Great! Now you have a running local EVM test network.
 
-#### Setting up local relayer 
+#### Setting up local relayer
 
 To make use of a local relayer we will open a separate terminal window and execute the following instructions. For more in-depth relayer setup please refer to the relayer [`README.md`](https://github.com/webb-tools/relayer#-getting-started---)
 
@@ -102,15 +102,15 @@ git clone https://github.com/webb-tools/relayer
 cd relayer
 ```
 
-**2. Compile the relayer** 
+**2. Compile the relayer**
 
 ```
 cargo build --release --features cli
 ```
 
 **3. Setup `.env` file**
 
-You will need to add `.env` file to run the Webb relayer. 
+You will need to add `.env` file to run the Webb relayer.
 
 ```
 touch .env
@@ -130,12 +130,12 @@ ATHENA_PRIVATE_KEY=0x00000000000000000000000000000000000000000000000000000000000
 HERMES_PRIVATE_KEY=0x0000000000000000000000000000000000000000000000000000000000000001
 DEMETER_PRIVATE_KEY=0x0000000000000000000000000000000000000000000000000000000000000001
 
-ATHENA_HTTP_URL=http://127.0.0.1:5002
-DEMETER_HTTP_URL=http://127.0.0.1:5003
-HERMES_HTTP_URL=http://127.0.0.1:5001
-ATHENA_WS_URL=wss://127.0.0.1:5002
-DEMETER_WS_URL=wss://127.0.0.1:5003
-HERMES_WS_URL=wss://127.0.0.1:5001
+ATHENA_HTTP_URL=http://127.0.0.1:5005
+DEMETER_HTTP_URL=http://127.0.0.1:5006
+HERMES_HTTP_URL=http://127.0.0.1:5004
+ATHENA_WS_URL=wss://127.0.0.1:5005
+DEMETER_WS_URL=wss://127.0.0.1:5006
+HERMES_WS_URL=wss://127.0.0.1:5004
 ```
 
 **4. Run a local relayer**
@@ -144,9 +144,9 @@ HERMES_WS_URL=wss://127.0.0.1:5001
 ./target/release/webb-relayer -c config/development/evm-localnet/ -vv
 ```
 
-Great! Now you have a running local relayer. 
+Great! Now you have a running local relayer.
 
-We now have our local environment running, next we will want to setup our MetaMask wallet to add test tokens and **reset the account** on Metamask to reset the account’s nonce and tx history. Please refer to the support article [here](https://metamask.zendesk.com/hc/en-us/articles/360015488891-How-to-reset-an-account) for instructions on how to reset a MetaMask account.  
+We now have our local environment running, next we will want to setup our MetaMask wallet to add test tokens and **reset the account** on Metamask to reset the account’s nonce and tx history. Please refer to the support article [here](https://metamask.zendesk.com/hc/en-us/articles/360015488891-How-to-reset-an-account) for instructions on how to reset a MetaMask account.
 
 Lastly, we will want to one of the following accounts to obtain test tokens.
 
@@ -157,12 +157,13 @@ Lastly, we will want to one of the following accounts to obtain test tokens.
 0xc0d375903fd6f6ad3edafc2c5428900c0757ce1da10e5dd864fe387b32b91d7e
 ```
 
-If you are unfamiliar with how to import an account with MetaMask, please refer to the support article [here](https://metamask.zendesk.com/hc/en-us/articles/360015489331-How-to-import-an-account#:~:text=Click%20the%20circle%20icon%20at,key%20and%20click%20%E2%80%9CImport%E2%80%9D).  
+If you are unfamiliar with how to import an account with MetaMask, please refer to the support article [here](https://metamask.zendesk.com/hc/en-us/articles/360015489331-How-to-import-an-account#:~:text=Click%20the%20circle%20icon%20at,key%20and%20click%20%E2%80%9CImport%E2%80%9D).
 
 You have now successfully setup:
-- local evm test network 
-- local Webb relayer 
+
+- local evm test network
+- local Webb relayer
 - local Hubble bridge
-- configured your MetaMask wallet for testing / development 
+- configured your MetaMask wallet for testing / development
 
 Happy hacking! 🚀💻
diff --git a/apps/bridge-dapp/src/components/Header/WalletModal.tsx b/apps/bridge-dapp/src/components/Header/WalletModal.tsx
@@ -1,12 +1,14 @@
 import { useWebContext } from '@webb-tools/api-provider-environment';
 import { getPlatformMetaData } from '@webb-tools/browser-utils';
-import { walletsConfig } from '@webb-tools/dapp-config';
-import { WalletId } from '@webb-tools/dapp-types';
+import { WalletConfig, walletsConfig } from '@webb-tools/dapp-config';
+import { WalletId, WebbError } from '@webb-tools/dapp-types';
 import {
   Modal,
   ModalContent,
+  useWebbUI,
   WalletConnectionCard,
 } from '@webb-tools/webb-ui-components';
+import { is } from 'date-fns/locale';
 import { FC, useCallback, useMemo } from 'react';
 
 import { useConnectWallet } from '../../hooks';
@@ -22,8 +24,11 @@ export const WalletModal: FC = () => {
     selectedWallet,
     switchWallet,
     toggleModal,
+    connectError,
   } = useConnectWallet();
 
+  const { notificationApi } = useWebbUI();
+
   const { chains } = useWebContext();
 
   const chain = useMemo(() => {
@@ -34,6 +39,48 @@ export const WalletModal: FC = () => {
     return selectedChain;
   }, [chains, selectedChain]);
 
+  // Get the current failed or connecting wallet
+  const getCurrentWallet = useCallback(() => {
+    const walletId = failedWalletId ?? connectingWalletId;
+    if (!walletId) {
+      return undefined;
+    }
+
+    return chain.wallets[walletId];
+  }, [chain, failedWalletId, connectingWalletId]);
+
+  const isNotInstalledError = useMemo(() => {
+    if (!connectError) {
+      return false;
+    }
+
+    return WebbError.isWalletNotInstalledError(connectError);
+  }, [connectError]);
+
+  const errorMessage = useMemo(() => {
+    if (!connectError) {
+      return undefined;
+    }
+
+    return WebbError.getErrorMessage(connectError.code).message;
+  }, [connectError]);
+
+  // If the error about not installed wallet is shown,
+  // we should show download button text
+  const errorBtnText = useMemo(() => {
+    if (!connectError || !isNotInstalledError) {
+      return undefined;
+    }
+
+    const wallet = getCurrentWallet();
+    if (!wallet) {
+      return undefined;
+    }
+
+    const walletName = wallet?.name ?? 'Wallet';
+    return `Download ${walletName}`;
+  }, [connectError, getCurrentWallet, isNotInstalledError]);
+
   const handleOpenChange = useCallback(
     (isOpen: boolean) => {
       toggleModal(isOpen);
@@ -45,6 +92,47 @@ export const WalletModal: FC = () => {
     resetState();
   }, [resetState]);
 
+  const handleWalletSelect = useCallback(
+    (wallet: WalletConfig) => {
+      switchWallet(chain, wallet);
+    },
+    [chain, switchWallet]
+  );
+
+  const handleDownloadBtnClick = useCallback(() => {
+    const { id } = getPlatformMetaData();
+    const wallet = getCurrentWallet();
+
+    if (wallet?.installLinks?.[id]) {
+      window.open(wallet.installLinks[id], '_blank');
+    }
+  }, [getCurrentWallet]);
+
+  const handleTryAgainBtnClick = useCallback(async () => {
+    if (!selectedWallet) {
+      notificationApi.addToQueue({
+        variant: 'warning',
+        message: 'Failed to switch wallet',
+        secondaryMessage: 'No wallet selected. Please try again.',
+      });
+      return;
+    }
+
+    if (isNotInstalledError) {
+      handleDownloadBtnClick();
+      return;
+    }
+
+    await switchWallet(chain, selectedWallet);
+  }, [
+    selectedWallet,
+    isNotInstalledError,
+    switchWallet,
+    chain,
+    notificationApi,
+    handleDownloadBtnClick,
+  ]);
+
   return (
     <Modal open={isModalOpen} onOpenChange={handleOpenChange}>
       <ModalContent
@@ -54,26 +142,14 @@ export const WalletModal: FC = () => {
       >
         <WalletConnectionCard
           wallets={Object.values(chain.wallets)}
-          onWalletSelect={async (wallet) => {
-            await switchWallet(chain, wallet);
-          }}
+          onWalletSelect={handleWalletSelect}
           onClose={() => toggleModal(false)}
           connectingWalletId={connectingWalletId}
+          errorBtnText={errorBtnText}
+          errorMessage={errorMessage}
           failedWalletId={failedWalletId}
-          onTryAgainBtnClick={async () => {
-            if (!selectedWallet) {
-              throw new Error('No wallet selected. Please try again.');
-            }
-            await switchWallet(chain, selectedWallet);
-          }}
-          onDownloadBtnClick={() => {
-            const { id } = getPlatformMetaData();
-
-            window.open(
-              walletsConfig[WalletId.MetaMask].installLinks?.[id],
-              '_blank'
-            );
-          }}
+          onTryAgainBtnClick={handleTryAgainBtnClick}
+          onDownloadBtnClick={handleDownloadBtnClick}
         />
       </ModalContent>
     </Modal>