🦊🐺🐭 Add connectors

.github/workflows/CI.yml

@@ -36,17 +36,12 @@ jobs:
       - name: Build dependencies
         run: |
           set -e
-          cd core && pnpm run build && cd -
-          cd testing && pnpm run build && cd -
-          cd siwe && pnpm run build && cd -
-          cd coingecko && pnpm run build && cd -
-          cd playwright && pnpm run build && cd -
-          cd example && pnpm run build && cd -
+          pnpm run build
         working-directory: packages
       - name: Run playwright example
         run: |
           set -e
-          pnpm start &
+          LOCALHOST_URL='http://localhost:8545' pnpm start &
           xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- pnpm test:playwright
         env:
           MAINNET_URL: ${{ secrets.MAINNET_PROVIDER_URL }}
@@ -55,12 +50,19 @@ jobs:
       - name: Run playwright example-next
         run: |
           set -e
+          echo "NEXT_PUBLIC_LOCALHOST_URL=http://localhost:8545" > .env.local
+          echo "NEXT_PUBLIC_MAINNET_URL=${MAINNET_URL}" >> .env.local
           pnpm dev &
           xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- pnpm test:playwright
         env:
           MAINNET_URL: ${{ secrets.MAINNET_PROVIDER_URL }}
           DEBUG: usedapp*
         working-directory: packages/example-next
+      - name: Cleanup
+        if: always()
+        run: |
+          rm -rf .env.local
+        working-directory: packages/example-next
   test-docs:
     runs-on: ubuntu-latest
     timeout-minutes: 25

package.json

@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.14.1",
-    "ethers": "5.6.2",
+    "ethers": "5.6.9",
     "prettier": "2.1.2",
     "wsrun": "^5.2.1"
   },
   "resolutions": {
-    "ethers": "5.6.2"
+    "ethers": "5.6.9"
   },
   "devDependencies": {
     "eslint-plugin-no-only-tests": "^2.6.0"

packages/connectors/coinbase-wallet/README.md

@@ -0,0 +1 @@
+# CoinbaseWalletConnector for useDApp

packages/connectors/coinbase-wallet/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@usedapp/coinbase-connector",
+  "version": "0.0.1",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "repository": "[email protected]:EthWorks/useDApp.git",
+  "author": "Ethworks",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@coinbase/wallet-sdk": "^3.3.0"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.2",
+    "@usedapp/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "@usedapp/core": "*"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "true",
+    "lint": "true",
+    "lint:fix": "true"
+  }
+}

packages/connectors/coinbase-wallet/src/index.ts

@@ -0,0 +1 @@
+export { CoinbaseWalletConnector } from '@usedapp/core/dist/cjs/src/providers/network/connector/impls/coinbaseWallet'

packages/connectors/coinbase-wallet/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "declarationMap": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../../core"
+    }
+  ]
+}

packages/connectors/portis/README.md

@@ -0,0 +1 @@
+# PortisConnector for useDApp

packages/connectors/portis/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@usedapp/portis-connector",
+  "version": "0.0.1",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "repository": "[email protected]:EthWorks/useDApp.git",
+  "author": "Ethworks",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@portis/web3": "^4.0.7"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.2",
+    "@usedapp/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "@usedapp/core": "*"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "true",
+    "lint": "true",
+    "lint:fix": "true"
+  }
+}

packages/connectors/portis/src/index.ts

@@ -0,0 +1 @@
+export { PortisConnector } from '@usedapp/core/dist/cjs/src/providers/network/connector/impls/portis'

packages/connectors/portis/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "declarationMap": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../../core"
+    }
+  ]
+}

packages/connectors/wallet-connect/README.md

@@ -0,0 +1 @@
+# WalletConnectConnector for useDApp

packages/connectors/wallet-connect/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@usedapp/wallet-connect-connector",
+  "version": "0.0.1",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "repository": "[email protected]:EthWorks/useDApp.git",
+  "author": "Ethworks",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@walletconnect/web3-provider": "^1.7.8"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.2",
+    "@usedapp/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "@usedapp/core": "*"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "true",
+    "lint": "true",
+    "lint:fix": "true"
+  }
+}

packages/connectors/wallet-connect/src/index.ts

@@ -0,0 +1 @@
+export { WalletConnectConnector } from '@usedapp/core/dist/cjs/src/providers/network/connector/impls/walletConnect'

packages/connectors/wallet-connect/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "declarationMap": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../../core"
+    }
+  ]
+}

packages/core/.mocharc.json

@@ -4,5 +4,6 @@
   "watchExtensions": "ts",
   "extension": "ts",
   "timeout": 10000,
-  "file": "./src/testing/test-setup.ts"
+  "file": "./src/testing/test-setup.ts",
+  "exit": true
 }

packages/core/package.json

@@ -25,13 +25,29 @@
     "nanoid": "3.3.4"
   },
   "peerDependencies": {
+    "@coinbase/wallet-sdk": "*",
+    "@portis/web3": "*",
+    "@walletconnect/web3-provider": "*",
     "ethers": "*",
     "react": "*"
   },
+  "peerDependenciesMeta": {
+    "@coinbase/wallet-sdk": {
+      "optional": true
+    },
+    "@walletconnect/web3-provider": {
+      "optional": true
+    },
+    "@portis/web3": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@coinbase/wallet-sdk": "^3.3.0",
     "@ethersproject/abi": "5.6.1",
     "@ethersproject/abstract-provider": "^5.6.1",
     "@ethersproject/providers": "5.6.2",
+    "@portis/web3": "^4.0.7",
     "@swc-node/register": "^1.4.2",
     "@testing-library/react-hooks": "^5.0.3",
     "@types/chai": "^4.2.14",
@@ -44,12 +60,14 @@
     "@types/react": "17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
+    "@walletconnect/types": "^1.7.8",
+    "@walletconnect/web3-provider": "^1.7.8",
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "eslint": "7.22.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "ethereum-waffle": "4.0.0-alpha.27",
-    "ethers": "^5.6.8",
+    "ethereum-waffle": "4.0.4",
+    "ethers": "5.6.9",
     "ganache": "7.0.3",
     "jsdom": "^16.4.0",
     "jsdom-global": "^3.0.2",

packages/core/src/constants/type/Config.ts

@@ -1,4 +1,5 @@
 import { Chain } from '../../constants'
+import { Connector } from '../../providers/network/connector/connector'
 import { providers } from 'ethers'
 
 export type BaseProviderFactory = () => providers.BaseProvider
@@ -89,6 +90,7 @@ export type FullConfig = {
    * Enables reconnecting to last used provider when user revisits the page.
    */
   autoConnect: boolean
+  connectors: Connector[]
   /**
    * Refresh standard calls each time the n-th block is mined.
    */

packages/core/src/helpers/eip1193.ts

@@ -1,37 +1,43 @@
 import { EventEmitter } from 'events'
-import { Network } from '../providers'
+import { ConnectorController } from '../providers/network/connector/connectorController'
+import { Network } from '../providers/network/network/model'
 
 export function subscribeToProviderEvents(
-  provider: EventEmitter | undefined,
-  onUpdate: (updatedNetwork: Partial<Network>) => void,
-  onDisconnect: (error: Error) => void,
-  onChainChanged?: (newChainId: number) => void
+  connector: ConnectorController,
+  onUpdate: (updatedNetwork: Partial<Network>) => void
 ) {
+  const connectorUnsub = connector.updated.on(({ chainId, accounts }) => {
+    onUpdate({ chainId, accounts })
+  })
+
+  const provider: EventEmitter | undefined = (connector.getProvider() as any).provider
   if (provider?.on) {
-    const onConnectListener = (info: { chainId: string } | undefined): void => {
-      if (info?.chainId) {
-        onUpdate({ chainId: Number(info.chainId) })
-      }
+    const onConnectListener = (): void => {
+      void connector.connector.activate()
     }
     provider.on('connect', onConnectListener)
 
-    const onDisconnectListener = (error: any): void => {
-      onDisconnect(new Error(error))
+    const onDisconnectListener = (): void => {
+      void connector.connector.deactivate()
     }
     provider.on('disconnect', onDisconnectListener)
 
     const onChainChangedListener = (chainId: string): void => {
-      onChainChanged?.(Number(chainId))
-      onUpdate({ chainId: Number(chainId) })
+      void connector.connector.onUpdate?.({ chainId: parseInt(chainId), accounts: connector.accounts })
     }
     provider.on('chainChanged', onChainChangedListener)
 
     const onAccountsChangedListener = (accounts: string[]): void => {
-      onUpdate({ accounts })
+      void connector.connector.onUpdate?.({ chainId: connector.chainId, accounts })
     }
     provider.on('accountsChanged', onAccountsChangedListener)
 
     return () => {
+      connectorUnsub()
+
+      if (connector.connector.name === 'Fortmatic') {
+        return
+      }
       provider.removeListener('connect', onConnectListener)
       provider.removeListener('disconnect', onDisconnectListener)
       provider.removeListener('chainChanged', onChainChangedListener)