feat(packages): react-wallet

lerna.json

@@ -2,7 +2,5 @@
   "version": "0.2.2",
   "npmClient": "npm",
   "useWorkspaces": true,
-  "packages": [
-    "packages/*"
-  ]
+  "packages": ["packages/*"]
 }

package.json

@@ -12,7 +12,7 @@
   ],
   "repository": "git@github.com:manifoldfinance/openmev-sdk.git",
   "author": "sam bacha <sam@manifoldfinance.com>",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.13.15",
     "@babel/plugin-proposal-class-properties": "^7.13.0",

packages/react-wallet/__tests__/usewallet.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const usewallet = require('..');
+
+describe('usewallet', () => {
+    it('needs tests');
+});

packages/react-wallet/legacy.tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true
+  }
+}

packages/react-wallet/lib/usewallet.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = usewallet;
+
+function usewallet() {
+    // TODO
+}

packages/react-wallet/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@openmev/react-wallet",
+  "version": "0.2.2",
+  "description": "react hook for wallet providers with integrated frontrunning/flashbots support",
+  "module": "dist/react-wallet.esm.js",
+  "license": "SEE LICENSE IN LICENSE",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": ">=16 || >=17"
+  },
+  "size-limit": [
+    {
+      "path": "dist/react-wallet.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/react-wallet.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "keywords": [
+    "mev",
+    "flashbots",
+    "ethereum",
+    "react",
+    "wallet",
+    "web3",
+    "use",
+    "wallet",
+    "web3",
+    "react"
+  ],
+  "author": "sam bacha <sam@manifoldfinance.com>",
+  "homepage": "https://github.com/manifoldfinance/openmev-sdk",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__",
+    "src": "src"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/manifoldfinance/openmev-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/manifoldfinance/openmev-sdk/issues"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^6.0.3",
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "size-limit": "^6.0.3",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ethersproject/providers": "^5.5.0",
+    "web3modal": "^1.9.4",
+    "zustand": "^3.6.1"
+  }
+}

packages/react-wallet/src/index.ts

@@ -0,0 +1,3 @@
+// @package useWallet
+import * as useWallet from './lib';
+export { useWallet };

packages/react-wallet/src/lib.ts

@@ -0,0 +1,108 @@
+/**
+ *  @package useWallet
+ *  @since 0.1.0
+ *  @link
+ *  @version 0.1.0
+ *
+ */
+
+import Web3Modal, { ICoreOptions } from 'web3modal';
+import { Network, Web3Provider } from '@ethersproject/providers';
+import create from 'zustand/esm';
+import { useEffect } from 'react';
+
+type State = {
+  provider?: Web3Provider;
+  account?: Account;
+  network?: Network;
+  web3Modal?: Web3Modal;
+};
+
+const useStore = create<State>((_set) => ({}));
+
+type Account = string;
+type ConnectWallet = (opts?: Partial<ICoreOptions>) => void;
+type DisconnectWallet = () => void;
+type UseWallet = () => State & {
+  connect: ConnectWallet;
+  disconnect: DisconnectWallet;
+};
+
+export const useWallet: UseWallet = () => {
+  /**
+   * @useWallet
+   * @summary Retrieve the current values from the store, & automatically re-render on updates
+   * @const account
+   * @const network
+   * @const provider
+   * @const web3Modal
+   */
+  const account = useStore((state) => state.account);
+  const network = useStore((state) => state.network);
+  const provider = useStore((state) => state.provider);
+  const web3Modal = useStore((state) => state.web3Modal);
+
+  useEffect(() => {
+    useStore.setState({ web3Modal: new Web3Modal() });
+  }, []);
+
+  const connect: ConnectWallet = async (opts) => {
+    /**
+     * setState
+     * @description Launch modal with the given options
+     */
+    const web3Modal = new Web3Modal(opts);
+    useStore.setState({ web3Modal });
+    const web3ModalProvider = await web3Modal.connect();
+
+    /**
+     * @const initialProvider
+     * @description Set up Ethers provider and initial state with the response from the web3Modal
+     */
+    const initialProvider = new Web3Provider(web3ModalProvider, 'any');
+    const getNetwork = () => initialProvider.getNetwork();
+    const initialAccounts = await initialProvider.listAccounts();
+    const initialNetwork = await getNetwork();
+    useStore.setState({
+      provider: initialProvider,
+      network: initialNetwork,
+      account: initialAccounts[0],
+    });
+
+    /**
+     *
+     *  Set up event listeners to handle state changes
+     *
+     */
+    web3ModalProvider.on('accountsChanged', (accounts: string[]) => {
+      useStore.setState({ account: accounts[0] });
+    });
+
+    web3ModalProvider.on('chainChanged', async (_chainId: string) => {
+      const network = await getNetwork();
+      useStore.setState({ network });
+    });
+
+    web3ModalProvider.on('disconnect', () => {
+      web3Modal.clearCachedProvider();
+    });
+  };
+
+  const disconnect: DisconnectWallet = async () => {
+    web3Modal?.clearCachedProvider();
+    useStore.setState({
+      provider: undefined,
+      network: undefined,
+      account: undefined,
+    });
+  };
+
+  return {
+    connect,
+    provider,
+    account,
+    network,
+    disconnect,
+    web3Modal,
+  };
+};

packages/react-wallet/test/blah.test.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Thing } from '../src';
+
+describe('it', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Thing />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});