feat(bridge): autoconnect wallet on load (#6643)

Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
taikoxyz · Jan 3, 2023 · 1332aa2 · 1332aa2
1 parent 409e7a4
commit 1332aa2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 28 deletions.
diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -69,7 +69,6 @@
   const {
     chains: wagmiChains,
     provider,
-    webSocketProvider,
   } = configureChains(
     [mainnet, taiko],
     [
@@ -83,6 +82,7 @@
   );
 
   $wagmiClient = createClient({
+    autoConnect: true,
     provider,
     connectors: [
       new MetaMaskConnector({

diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -18,8 +18,10 @@
   let addressAvatarImgData: string = "";
   let tokenBalance: string = "";
 
-  onMount(async () => {
-    await setAddress($signer);
+  onMount(() => {
+    (async () => {
+      await setAddress($signer);
+    })();
   });
 
   $: getUserBalance($signer);

diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { onDestroy } from "svelte";
-  import { BigNumber, ethers } from "ethers";
+  import { onDestroy, onMount } from "svelte";
   import { signer } from "../../store/signer";
   import { _ } from "svelte-i18n";
   import {
@@ -9,7 +8,9 @@
     fetchSigner,
     watchAccount,
     watchNetwork,
-    ConnectorNotFoundError
+    ConnectorNotFoundError,
+    getNetwork,
+    getAccount
   } from "@wagmi/core";
 
   import { CHAIN_MAINNET, CHAIN_TKO } from "../../domain/chain";
@@ -38,30 +39,32 @@
     }
   };
 
-  let unwatchNetwork;
-  let unwatchAccount;
-
   async function setSigner() {
     const wagmiSigner = await fetchSigner();
     signer.set(wagmiSigner);
     return wagmiSigner;
   }
 
+  async function onConnect() {
+    const { chain } = getNetwork();
+    await setSigner();
+    await changeChain(chain.id);
+    watchNetwork(
+      async (network) => await changeChain(network.chain.id)
+    );
+    watchAccount(async () => {
+      const s = await setSigner();
+      transactions.set(
+        await $transactioner.GetAllByAddress(await s.getAddress())
+      );
+    });
+  }
+
   async function connectWithConnector(connector: Connector) {
     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");
+      await wagmiConnect({ connector });
+      await onConnect();
+      successToast("Connected");
     } catch(error) {
       if(error instanceof ConnectorNotFoundError) {
         errorToast(`${connector.name} not installed`);
@@ -77,12 +80,12 @@
     "coinbase wallet": CoinbaseWallet,
   };
 
-  onDestroy(() => {
-    if (unwatchNetwork) {
-      unwatchNetwork();
-    }
-    if (unwatchAccount) {
-      unwatchAccount();
+  onMount(() => {
+    const account = getAccount();
+    if(account.isConnected) {
+      (async () => {
+        await onConnect();
+      })();
     }
   });
 </script>