feat(bridge, converter, faucet, ui): implement walletConnect v2

apps/bridge/package.json

@@ -18,11 +18,11 @@
     "@mantle/constants": "workspace:*",
     "@mantle/supagraph": "workspace:*",
     "@mantle/ui": "workspace:*",
+    "@mantle/utils": "workspace:*",
     "@mantleio/contracts": "^0.2.0",
     "@mantleio/core-utils": "^0.1.0",
     "@mantleio/sdk": "^0.2.1",
     "@tanstack/react-query": "^4.14.5",
-    "decimal.js": "^10.4.3",
     "ethers": "^5.7.2",
     "framer-motion": "^10.12.10",
     "lodash": "^4.17.21",
@@ -32,7 +32,7 @@
     "react-dom": "18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^4.8.0",
-    "wagmi": "^0.12.13",
+    "wagmi": "^1.3.9",
     "zustand": "^4.0.0-rc.1"
   },
   "devDependencies": {
@@ -49,6 +49,6 @@
     "eslint": "^8.30.0",
     "postcss": "^8.4.18",
     "tailwindcss": "^3.2.1",
-    "typescript": "4.9.4"
+    "typescript": "5.0.4"
   }
 }

apps/bridge/src/components/ConnectWallet.tsx

@@ -9,12 +9,9 @@ import { useAccount, useConnect, useDisconnect, useNetwork } from "wagmi";
 import { CHAINS, L1_CHAIN_ID, L2_CHAIN_ID } from "@config/constants";
 
 import Avatar from "@mantle/ui/src/presentational/Avatar";
-import {
-  ArrowDownIcon,
-  Button,
-  WalletModal,
-  truncateAddress,
-} from "@mantle/ui";
+import { ArrowDownIcon, Button, WalletModal } from "@mantle/ui";
+import { truncateAddress } from "@mantle/utils";
+
 import { BiError } from "react-icons/bi";
 
 import { useIsChainID } from "@hooks/web3/read/useIsChainID";
@@ -34,7 +31,7 @@ function ConnectWallet() {
   const isMantleChainID = useIsChainID(L2_CHAIN_ID);
 
   // set address with useState to avoid hydration errors
-  const [address, setAddress] = useState<`0x${string}`>();
+  const [address, setAddress] = useState<string>();
 
   // chain is valid if it matches any of these states...
   const isChainID = useMemo(() => {
@@ -55,14 +52,30 @@ function ConnectWallet() {
     address,
   ]);
 
+  // pick up connection details from wagmi
+  const { address: wagmiAddress } = useAccount({
+    onConnect: async () => {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      await checkConnection();
+
+      // auto-switch - ask the wallet to attempt to switch to chosen chain on first-connect
+      if (!isChainID) {
+        // await changeNetwork();
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      await changeAccount();
+    },
+  });
+
   // when disconnecting we want to retain control over whether or not to attempt a reconnect
   const reconnect = useRef(false);
 
   // pull to network method
   const { switchToNetwork } = useSwitchToNetwork();
 
   // control wagmi connector
-  const { connect, connectors } = useConnect();
+  const { connect, connectors, pendingConnector } = useConnect();
 
   const { disconnect, disconnectAsync } = useDisconnect({
     onMutate: () => {
@@ -85,63 +98,35 @@ function ConnectWallet() {
 
   // record change of account
   const changeAccount = async () => {
-    const accounts = await window.ethereum?.request({
-      method: "eth_requestAccounts",
+    setClient({
+      chainId,
+      isConnected: true,
+      address: wagmiAddress,
+      connector: client?.connector || pendingConnector?.id,
     });
-
-    if (accounts) {
-      setClient({
-        chainId: parseInt(
-          (await window.ethereum?.request({
-            method: "eth_chainId",
-          })) || "-1",
-          16
-        ),
-        isConnected: true,
-        address: accounts[0],
-      });
-    }
   };
 
   // trigger change of network
   const changeNetwork = async () => {
-    if (!window.ethereum) throw new Error("No crypto wallet found");
     // trigger a change of network
     await switchToNetwork(chainId);
   };
 
   // check the connection is valid
   const checkConnection = async () => {
-    const { ethereum } = window;
-    if (ethereum) {
-      const accounts = await ethereum.request({ method: "eth_accounts" });
-      if (accounts.length > 0) {
-        setClient({
-          isConnected: true,
-          address: accounts[0],
-        });
-      } else {
-        setClient({
-          isConnected: false,
-        });
-      }
+    if (wagmiAddress) {
+      setClient({
+        isConnected: true,
+        address: wagmiAddress,
+        connector: client?.connector,
+      });
+    } else {
+      setClient({
+        isConnected: false,
+      });
     }
   };
 
-  // pick up connection details from wagmi
-  const { address: wagmiAddress } = useAccount({
-    onConnect: async () => {
-      await checkConnection();
-
-      // auto-switch - ask the wallet to attempt to switch to chosen chain on first-connect
-      if (!isChainID) {
-        // await changeNetwork();
-      }
-
-      await changeAccount();
-    },
-  });
-
   // set wagmi address to address for ssr
   useEffect(() => {
     if (!reconnect.current || wagmiAddress) {
@@ -169,14 +154,14 @@ function ConnectWallet() {
 
   // return connect/disconnect component
   return (
-    <div className="flex flex-row gap-4">
+    <div className="flex flex-row gap-4 w-full">
       {isChainID && client.isConnected && client.address ? (
-        <Link href="/account/desposit" scroll shallow>
+        <Link href="/account/desposit" className="w-full" scroll shallow>
           <Button
             type="button"
             variant="walletLabel"
             size="regular"
-            className="flex flex-row items-center text-xs h-full text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 w-fit cursor-pointer"
+            className="flex flex-row items-center text-xs h-full text-white gap-2 backdrop-blur-[50px] bg-white/10 hover:bg-white/20 justify-center w-full"
           >
             <Avatar walletAddress="address" />
             <div className="flex items-center justify-center gap-2">
@@ -196,16 +181,34 @@ function ConnectWallet() {
             {!client.address ? (
               <WalletModal
                 onMetamask={() => {
+                  setClient({
+                    ...client,
+                    connector: "metaMask",
+                  });
                   connect({
                     connector: connectors.find(
                       (conn) => conn.id === "metaMask"
                     ),
                   });
                 }}
+                onWalletConnect={() => {
+                  setClient({
+                    ...client,
+                    connector: "walletConnect",
+                  });
+                  connect({
+                    chainId,
+                    connector: connectors.find(
+                      (conn) => conn.id === "walletConnect"
+                    ),
+                  });
+                }}
               >
-                <Button variant="walletConnect" size="regular">
-                  Connect Wallet
-                </Button>
+                <div>
+                  <Button variant="walletConnect" size="regular">
+                    Connect Wallet
+                  </Button>
+                </div>
               </WalletModal>
             ) : (
               <Button
@@ -223,12 +226,18 @@ function ConnectWallet() {
             )}
           </>
         ) : !isChainID ? (
-          <div className="flex flex-row items-center gap-4 justify-end">
-            <div className="flex flex-row items-center gap-2 text-status-error h-fit rounded-lg text-xs backdrop-blur-[50px] bg-white/10 w-fit px-4 py-2 whitespace-nowrap">
+          <div className="grid grid-cols-2 items-center gap-4 w-full">
+            <div className="flex flex-row items-center gap-2 text-status-error h-full rounded-lg text-xs backdrop-blur-[50px] bg-white/10 justify-center px-4 py-2 whitespace-nowrap">
               <BiError className="text-sm" />
-              <p className="text-sm">Unsupported chain</p>
+              <p className="text-sm whitespace-normal text-center">
+                Unsupported chain
+              </p>
             </div>
-            <Button variant="walletConnect" onClick={() => changeNetwork()}>
+            <Button
+              variant="walletConnect"
+              onClick={() => changeNetwork()}
+              className="xl:whitespace-nowrap h-full"
+            >
               Switch to {CHAINS[chainId].chainName}
             </Button>
           </div>

apps/bridge/src/components/account/Tabs.tsx

@@ -78,7 +78,7 @@ export default function Tabs() {
 
   return (
     (view === Views.Account && (
-      <SimpleCard className="max-w-5xl w-full grid gap-8 relative px-8">
+      <SimpleCard className="max-w-5xl w-full grid gap-8 relative px-8 mt-6">
         <span className="flex justify-between align-middle">
           <Typography
             variant="transactionTableHeading"