fix(bridge-ui): toggle chain (#395)

* toggle chain fix * chain dropdown
taikoxyz · Dec 9, 2022 · 2d45b9c · 2d45b9c
1 parent c895430
commit 2d45b9c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
 
   import ChevDown from "./icons/ChevDown.svelte";
-  import { fromChain } from "../store/chain";
+  import { fromChain, toChain } from "../store/chain";
   import MetaMask from "./icons/MetaMask.svelte";
   import { switchEthereumChain } from "../utils/switchEthereumChain";
   import { ethereum } from "../store/ethereum";
@@ -15,6 +15,12 @@
     const provider = new ethers.providers.Web3Provider(window.ethereum);
     await provider.send("eth_requestAccounts", []);
 
+    fromChain.set(chain);
+    if (chain === CHAIN_MAINNET) {
+      toChain.set(CHAIN_TKO);
+    } else {
+      toChain.set(CHAIN_MAINNET);
+    }
     signer.set(provider.getSigner());
   };
 </script>
@@ -45,7 +51,7 @@
       >
         <svelte:component this={CHAIN_MAINNET.icon} height={24} />
         <span class="pl-1.5 text-left flex-1">{CHAIN_MAINNET.name}</span>
-          <MetaMask />
+        <MetaMask />
       </button>
     </li>
     <li>
@@ -57,7 +63,7 @@
       >
         <svelte:component this={CHAIN_TKO.icon} height={24} />
         <span class="pl-1.5 text-left flex-1">{CHAIN_TKO.name}</span>
-          <MetaMask />
+        <MetaMask />
       </button>
     </li>
   </ul>

diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -2,15 +2,25 @@
   import ArrowRight from "../icons/ArrowRight.svelte";
   import { fromChain, toChain } from "../../store/chain";
   import { CHAIN_MAINNET, CHAIN_TKO } from "../../domain/chain";
+  import { ethereum } from "../../store/ethereum";
+  import { signer } from "../../store/signer";
+  import { switchEthereumChain } from "../../utils/switchEthereumChain";
+  import { ethers } from "ethers";
 
-  function toggleChains() {
-    fromChain.update((val) =>
-      val === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET
-    );
-    toChain.update((val) =>
-      val === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET
-    );
-  }
+  const toggleChains = async () => {
+    const chain = $fromChain === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET;
+    await switchEthereumChain($ethereum, chain);
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    await provider.send("eth_requestAccounts", []);
+
+    fromChain.set(chain);
+    if (chain === CHAIN_MAINNET) {
+      toChain.set(CHAIN_TKO);
+    } else {
+      toChain.set(CHAIN_MAINNET);
+    }
+    signer.set(provider.getSigner());
+  };
 </script>
 
 <div class="flex items-center justify-between w-full p-8 py-6 text-lg">