MEW support (#280)

* Add MEW connector to web3Modal * Iron out a few UI bugs * Prettier * Fix further UI bug
OriginProtocol · Jul 26, 2022 · f50a799 · f50a799
1 parent 57409a5
commit f50a799
Show file tree

Hide file tree

Showing 6 changed files with 1,615 additions and 86 deletions.
diff --git a/client/components/Header.tsx b/client/components/Header.tsx
@@ -58,7 +58,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
                 </Link>
               </div>
               {!hideNav && (
-                <ul className="space-x-10 font-light hidden lg:flex">
+                <ul className="space-x-10 font-light h-0 invisible lg:h-auto lg:visible lg:flex">
                   {navItems.map(({ href, label, external }) => (
                     <li key={label}>
                       <Link

diff --git a/client/components/Web3Button.tsx b/client/components/Web3Button.tsx
@@ -1,11 +1,16 @@
 import WalletConnectProvider from "@walletconnect/web3-provider";
+import { MewConnectConnector } from "@myetherwallet/mewconnect-connector";
 import { providers, utils } from "ethers";
 import { useCallback, useEffect, FunctionComponent } from "react";
 import WalletLink from "walletlink";
 import Web3Modal from "web3modal";
 import { truncateEthAddress, useNetworkInfo } from "utils/index";
 import { useStore } from "utils/store";
-import { RPC_URLS, mainnetNetworkUrl } from "constants/index";
+import {
+  RPC_URLS,
+  mainnetNetworkUrl,
+  websocketProvider,
+} from "constants/index";
 import { toast } from "react-toastify";
 import classNames from "classnames";
 
@@ -38,6 +43,28 @@ const providerOptions = {
       return provider;
     },
   },
+  "custom-mew": {
+    display: {
+      logo: "/myetherwallet-icon.svg",
+      name: "MyEtherWallet",
+      description: "Connect to your MyEtherWallet",
+    },
+    package: MewConnectConnector,
+    options: {
+      appName: "MyEtherWallet", // Your app name
+      networkUrl: mainnetNetworkUrl,
+      chainId: 1,
+    },
+    connector: async () => {
+      const connector = new MewConnectConnector({
+        url: websocketProvider,
+      });
+      await connector.activate();
+      const provider = await connector.getProvider();
+      provider.enable();
+      return provider;
+    },
+  },
 };
 
 const networkNameMap = {
@@ -67,51 +94,55 @@ export const Web3Button: FunctionComponent<Web3ButtonProps> = ({ inPage }) => {
 
   const networkInfo = useNetworkInfo();
 
-  const connect = useCallback(async function () {
-    let provider;
-    try {
-      provider = await web3Modal.connect();
-    } catch (e) {
-      console.warn("Connection error:", e);
-      return;
-    }
+  const connect = useCallback(
+    async function () {
+      await web3Modal.clearCachedProvider();
+      let provider;
+      try {
+        provider = await web3Modal.connect();
+      } catch (e) {
+        console.warn("Connection error:", e);
+        return;
+      }
 
-    provider.on("chainChanged", (chainId) => {
-      useStore.setState({ chainId: Number(chainId) });
-    });
-
-    const web3Provider = new providers.Web3Provider(provider, "any");
-    const signer = web3Provider.getSigner();
-    const address = await signer.getAddress();
-    const network = await web3Provider.getNetwork();
-
-    provider.on("accountsChanged", async (accounts) => {
-      const newAccount: string =
-        accounts.length === 0 ? undefined : accounts[0];
-      let storeUpdate = {
-        address: utils.getAddress(newAccount), // ensure checksum address to prevent excess state updates
-      };
-      resetWeb3State();
+      provider.on("chainChanged", (chainId) => {
+        useStore.setState({ chainId: Number(chainId) });
+      });
+
+      const web3Provider = new providers.Web3Provider(provider, "any");
+      const signer = web3Provider.getSigner();
+      const address = await signer.getAddress();
+      const network = await web3Provider.getNetwork();
 
-      if (newAccount !== undefined) {
-        storeUpdate = {
-          ...storeUpdate,
-          provider,
-          web3Provider,
-          chainId: network.chainId,
+      provider.on("accountsChanged", async (accounts) => {
+        const newAccount: string =
+          accounts.length === 0 ? undefined : accounts[0];
+        let storeUpdate = {
+          address: utils.getAddress(newAccount), // ensure checksum address to prevent excess state updates
         };
-      }
-      useStore.setState(storeUpdate);
-    });
-
-    // Add contracts
-    useStore.setState({
-      provider,
-      web3Provider,
-      address,
-      chainId: network.chainId,
-    });
-  }, []);
+        resetWeb3State();
+
+        if (newAccount !== undefined) {
+          storeUpdate = {
+            ...storeUpdate,
+            provider,
+            web3Provider,
+            chainId: network.chainId,
+          };
+        }
+        useStore.setState(storeUpdate);
+      });
+
+      // Add contracts
+      useStore.setState({
+        provider,
+        web3Provider,
+        address,
+        chainId: network.chainId,
+      });
+    },
+    [resetWeb3State]
+  );
 
   const disconnect = useCallback(
     async function () {
@@ -166,7 +197,7 @@ export const Web3Button: FunctionComponent<Web3ButtonProps> = ({ inPage }) => {
           className="flex items-center space-x-2 p-2 md:px-4 border border-[#bbc9da] text-white rounded-full text-sm leading-none capitalize cursor-pointer"
         >
           <span className="w-3 h-3 bg-[#4bbc8a] rounded-full" />
-          <div className="hidden md:flex">
+          <div className="invisible md:visible md:flex">
             {truncateEthAddress(address)}
             {web3Provider.network.name === "unknown" && " / Localhost"}
             {web3Provider.network.name === "rinkeby" && " / Rinkeby"}

diff --git a/client/constants/index.ts b/client/constants/index.ts
@@ -5,6 +5,11 @@ import MainnetGovernanceContracts from "../networks/governance.mainnet.json";
 export const mainnetNetworkUrl = process.env.WEB3_PROVIDER;
 export const rinkebyNetworkUrl = process.env.WEB3_PROVIDER;
 
+export const websocketProvider = process.env.WEB3_PROVIDER?.replace(
+  "http",
+  "ws"
+);
+
 export const RPC_URLS = {
   1: mainnetNetworkUrl,
   4: rinkebyNetworkUrl,

diff --git a/client/package.json b/client/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@mdi/js": "^6.9.96",
     "@mdi/react": "^1.6.0",
+    "@myetherwallet/mewconnect-connector": "^0.1.8",
     "@prisma/client": "^3.10.0",
     "@tailwindcss/typography": "^0.5.2",
     "@types/lodash": "^4.14.182",

diff --git a/client/public/myetherwallet-icon.svg b/client/public/myetherwallet-icon.svg