feat: add frame connector + fix issues with WalletLink (#286)

* feat(connectors): wip WalletLink connector

* feat(connectors): add `WalletLink` to example

* Update packages/walletlink/package.json

Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

* make walletlink a peer dep

* import walletlink like WC

* fix import

* feat: add frame connector + fix WalletLink connector

* update peerDeps

add @web3-react/frame dep to example

add build to example and fix

* clean up webpack config

* regen yarn.lock, README tweak

* try not testing against node 16

* use exports instead of module

* only use expected dynamic import output

Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

.github/workflows/CI.yml

@@ -19,7 +19,6 @@ jobs:
           - macOS-latest
         node_version:
           - 14
-          - 16
 
     steps:
       - uses: actions/checkout@v2

README.md

@@ -58,7 +58,7 @@ In addition to compiling each package in watch mode, this will also spin up an e
 
 Because of a [lerna bug](https://github.com/lerna/lerna/issues/1883), it's not possible to prune `yarn.lock` programmatically, so regenerate it manually:
 
-- `rm -f packages/<SUBPACKAGE>/yarn.lock`
+- `yarn lerna exec 'rm -f yarn.lock' --scope SUBPACKAGE`
 - `yarn clean --scope SUBPACKAGE`
 - `yarn bootstrap`
 

packages/core/package.json

@@ -5,7 +5,7 @@
   },
   "version": "8.0.2-alpha.0",
   "type": "module",
-  "module": "./dist/index.js",
+  "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
     "prebuild": "rm -rf dist",

packages/example/connectors/frame.ts

@@ -0,0 +1,4 @@
+import { initializeConnector } from '@web3-react/core'
+import { Frame } from '@web3-react/frame'
+
+export const [frame, useFrame] = initializeConnector<Frame>(Frame, [])

packages/example/connectors/index.ts

@@ -1,13 +1,15 @@
-import { UseStore } from 'zustand'
+import { UseStore } from 'zustand/esm'
 import { Connector, Web3ReactState } from '@web3-react/types'
 import { network, useNetwork } from './network'
 import { metaMask, useMetaMask } from './metaMask'
 import { walletConnect, useWalletConnect } from './walletConnect'
 import { walletLink, useWalletLink } from './walletLink'
+import { frame, useFrame } from './frame'
 
 export const connectors: [Connector, UseStore<Web3ReactState>][] = [
   [network, useNetwork],
   [metaMask, useMetaMask],
   [walletConnect, useWalletConnect],
   [walletLink, useWalletLink],
+  [frame, useFrame],
 ]

packages/example/next.config.js

@@ -2,11 +2,15 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  webpack5: false,
   env: {
     infuraKey: '84842078b09946638c03157f83405213',
     alchemyKey: '_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC',
   },
+  esmExternals: true,
+  webpack: (config) => {
+    config.resolve.fallback = { events: require.resolve('events/'), process: require.resolve('process/browser') }
+    return config
+  },
 }
 
 module.exports = nextConfig

packages/example/package.json

@@ -2,21 +2,27 @@
   "name": "example",
   "private": true,
   "scripts": {
+    "build": "next build",
     "start": "next dev"
   },
   "dependencies": {
     "@ethersproject/bignumber": "^5.4.2",
     "@ethersproject/units": "^5.4.0",
     "@walletconnect/ethereum-provider": "^1.6.5",
     "@web3-react/core": "^8.0.2-alpha.0",
+    "@web3-react/frame": "^8.0.2-alpha.0",
     "@web3-react/metamask": "^8.0.2-alpha.0",
     "@web3-react/network": "^8.0.2-alpha.0",
     "@web3-react/store": "^8.0.2-alpha.0",
     "@web3-react/types": "^8.0.2-alpha.0",
     "@web3-react/walletconnect": "^8.0.2-alpha.0",
     "@web3-react/walletlink": "^8.0.2-alpha.0",
+    "eth-provider": "^0.9.4",
+    "events": "^3.3.0",
     "next": "^11.1.2",
+    "process": "^0.11.10",
     "react-dom": "^17.0.2",
+    "walletlink": "^2.1.11",
     "zustand": "^3.5.10"
   }
 }

packages/example/pages/index.tsx

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic'
-import { UseStore } from 'zustand'
+import { UseStore } from 'zustand/esm'
 import { Connector, Web3ReactState } from '@web3-react/types'
 import { connectors } from '../connectors'
 import { useChainId, useAccounts, useENSNames, useError, useActivating, useProvider } from '@web3-react/core'