From 0d74845d0192736229cbc682ff7fd8f8610ee643 Mon Sep 17 00:00:00 2001
From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com>
Date: Fri, 30 Dec 2022 20:11:19 +0530
Subject: [PATCH] fix(bridge): use metamask wagmi connector (#2080)

* fix(bridge): use metamask wagmi connector

* Update packages/bridge-ui/src/components/buttons/Connect.svelte

Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>

Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Co-authored-by: Daniel Wang <99078276+dantaik@users.noreply.github.com>
---
 packages/bridge-ui/src/App.svelte             |  4 +--
 .../src/components/buttons/Connect.svelte     | 35 ++++++++++++-------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index f8eecf34bee..10329e6a3b1 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -7,12 +7,12 @@
   import {
     configureChains,
     createClient,
-    InjectedConnector,
   } from "@wagmi/core";
   import { publicProvider } from "@wagmi/core/providers/public";
   import { jsonRpcProvider } from "@wagmi/core/providers/jsonRpc";
   import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet";
   import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
+  import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask'
 
   import Home from "./pages/home/Home.svelte";
   import { setupI18n } from "./i18n";
@@ -85,7 +85,7 @@
   $wagmiClient = createClient({
     provider,
     connectors: [
-      new InjectedConnector({
+      new MetaMaskConnector({
         chains: wagmiChains,
       }),
       new CoinbaseWalletConnector({
diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte
index 7486ab9d76b..21d1791f852 100644
--- a/packages/bridge-ui/src/components/buttons/Connect.svelte
+++ b/packages/bridge-ui/src/components/buttons/Connect.svelte
@@ -9,6 +9,7 @@
     fetchSigner,
     watchAccount,
     watchNetwork,
+    ConnectorNotFoundError
   } from "@wagmi/core";
 
   import { CHAIN_MAINNET, CHAIN_TKO } from "../../domain/chain";
@@ -47,19 +48,27 @@
   }
 
   async function connectWithConnector(connector: Connector) {
-    const { chain } = await wagmiConnect({ connector });
-    await setSigner();
-    await changeChain(chain.id);
-    unwatchNetwork = watchNetwork(
-      async (network) => await changeChain(network.chain.id)
-    );
-    unwatchAccount = watchAccount(async () => {
-      const s = await setSigner();
-      transactions.set(
-        await $transactioner.GetAllByAddress(await s.getAddress())
-      );
-    });
-    successToast("Connected");
+    try {
+      const { chain } = await wagmiConnect({ connector });
+      await setSigner();
+      await changeChain(chain.id);
+      unwatchNetwork = watchNetwork(
+        async (network) => await changeChain(network.chain.id)
+        );
+        unwatchAccount = watchAccount(async () => {
+          const s = await setSigner();
+          transactions.set(
+            await $transactioner.GetAllByAddress(await s.getAddress())
+            );
+          });
+          successToast("Connected");
+    } catch(error) {
+      if(error instanceof ConnectorNotFoundError) {
+        errorToast(`${connector.name} not installed`);
+      } else {
+        errorToast(`Error while connecting to wallet`);
+      }
+    }
   }
 
   const iconMap = {