feat: add legacy send method for MetaMask provider (#48)

* feat: add legacy send method for MetaMask provider and web3-react exple

* feat: remove unused imports

* feat: add signature to example

examples/react-apps/package.json

@@ -11,6 +11,8 @@
     "hardhat:node": "hardhat node"
   },
   "dependencies": {
+    "@web3-react/core": "6.1.9",
+    "@web3-react/injected-connector": "6.0.7",
     "@tanstack/react-location": "^3.6.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",

examples/react-apps/src/App.tsx

@@ -14,6 +14,7 @@ import {
 } from "pages/contract-interactions/contract-box";
 import EnsStuff from "pages/ens";
 import WalletConnectConnection from "pages/wallet-connect-connection";
+import Web3ReactPage from "pages/web3-react";
 
 const routes: Route[] = [
   {
@@ -31,6 +32,7 @@ const routes: Route[] = [
     ],
   },
   { path: "ens", element: <EnsStuff /> },
+  { path: "web3-react", element: <Web3ReactPage /> },
 ];
 
 const location = new ReactLocation();
@@ -44,6 +46,7 @@ function App() {
         <Link to="wallet-connect-connection">Wallet Connect Connection</Link>{" "}
         <Link to="contract-interactions">Contract interaction</Link>{" "}
         <Link to="ens">ENS</Link>
+        <Link to="web3-react">Web3 React</Link>
       </div>
       <hr />
       <Outlet />

examples/react-apps/src/pages/web3-react/__test__/web3-react-page.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { generateTestingUtils } from "eth-testing";
+import { ethers } from "ethers";
+import Web3ReactPage from "..";
+
+describe("Web3 React app", () => {
+    let originalEthereum: any;
+    const testingUtils = generateTestingUtils({
+        providerType: "MetaMask",
+    });
+
+    beforeAll(() => {
+        originalEthereum = global.window.ethereum;
+        global.window.ethereum = testingUtils.getProvider();
+    });
+
+    afterEach(() => {
+        testingUtils.clearAllMocks();
+      });
+
+    afterAll(() => {
+        global.window.ethereum = originalEthereum;
+    });
+    test("User should be able to see its address after connection and sign a message", async () => {
+        const randomWallet = ethers.Wallet.createRandom();
+
+        testingUtils.mockNotConnectedWallet();
+
+        testingUtils.mockRequestAccounts(
+            [randomWallet.address],
+            {
+              balance: "0x1bc16d674ec80000",
+            }
+          );
+
+        render(<Web3ReactPage />);
+
+        expect(screen.queryByText(/account/i)).not.toBeInTheDocument();
+
+        userEvent.click(screen.getByRole('button', { name: /connect/i}));
+
+        await screen.findByText(`Account: ${randomWallet.address}`);
+
+        const signature = await randomWallet.signMessage("hello");
+        testingUtils.lowLevel.mockRequest("personal_sign", signature);
+        userEvent.click(screen.getByRole("button", { name: /sign message/i }))
+        await screen.findByText(`Signature: ${signature}`);
+    })
+})

examples/react-apps/src/pages/web3-react/index.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { ethers } from "ethers";
+import { useWeb3React, Web3ReactProvider } from "@web3-react/core";
+import { InjectedConnector } from "@web3-react/injected-connector";
+
+const connector = new InjectedConnector({});
+
+function Web3ReactPage() {
+    return (
+        <Web3ReactProvider getLibrary={(p) => new ethers.providers.Web3Provider(p)}>
+            <Example />
+        </Web3ReactProvider>
+    )
+}
+
+function Example() {
+    const { activate, account, library } = useWeb3React();
+
+    const [signature, setSignature] = React.useState("");
+
+    const sign = async () => {
+        if (!library) {
+            throw new Error("Oh no, it's broken :(")
+        }
+        const signer = library.getSigner();
+        const signature = await signer.signMessage("hello");
+        setSignature(signature);
+    }
+
+    return (
+        <div>
+            <button
+                onClick={() => activate(connector)}
+            >
+                Connect
+            </button>
+            {account ? <div>Account: {account}</div> : null}
+            {account
+                ? (
+                    <div>
+                        <button onClick={sign}>Sign message</button>
+                        {signature ? <div>Signature: {signature}</div> : null}
+                    </div>
+                )
+                : null
+            }
+        </div>
+    )
+}
+
+export default Web3ReactPage;

src/providers/metamask.ts

@@ -9,4 +9,18 @@ class MockInternalMetaMask {
 export class MetaMaskProvider extends Provider {
   public isMetaMask = true;
   public _metamask = new MockInternalMetaMask();
+
+  public send(
+    methodOrPayload: string | { method: string; params: unknown[] },
+    params?: unknown[]
+  ) {
+    if (typeof methodOrPayload === "string") {
+      return this.request({ method: methodOrPayload, params });
+    } else {
+      return this.request({
+        method: methodOrPayload.method,
+        params: methodOrPayload.params,
+      });
+    }
+  }
 }