add CLV wallet connector

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 packages/*/dist/
 example/.next/
 .env.local
+.idea/

example/components/Card.tsx

@@ -1,6 +1,7 @@
 import type { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import type { Web3ReactHooks } from '@web3-react/core'
 import type { GnosisSafe } from '@web3-react/gnosis-safe'
+import type { ClvWallet } from '@web3-react/clvWallet'
 import type { MetaMask } from '@web3-react/metamask'
 import type { Network } from '@web3-react/network'
 import type { WalletConnect } from '@web3-react/walletconnect'
@@ -13,7 +14,7 @@ import { ConnectWithSelect } from './ConnectWithSelect'
 import { Status } from './Status'
 
 interface Props {
-  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
+  connector: ClvWallet | MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
   activeChainId: ReturnType<Web3ReactHooks['useChainId']>
   chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
   isActivating: ReturnType<Web3ReactHooks['useIsActivating']>

example/components/ConnectWithSelect.tsx

@@ -1,6 +1,7 @@
 import type { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import type { Web3ReactHooks } from '@web3-react/core'
 import { GnosisSafe } from '@web3-react/gnosis-safe'
+import { ClvWallet } from '@web3-react/clvWallet'
 import type { MetaMask } from '@web3-react/metamask'
 import { Network } from '@web3-react/network'
 import { WalletConnect } from '@web3-react/walletconnect'
@@ -48,7 +49,7 @@ export function ConnectWithSelect({
   error,
   setError,
 }: {
-  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
+  connector: ClvWallet | MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
   activeChainId: ReturnType<Web3ReactHooks['useChainId']>
   chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
   isActivating: ReturnType<Web3ReactHooks['useIsActivating']>

example/components/ProviderExample.tsx

@@ -1,18 +1,21 @@
 import type { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import { useWeb3React, Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
+import type { ClvWallet } from '@web3-react/clvWallet'
 import type { MetaMask } from '@web3-react/metamask'
 import type { Network } from '@web3-react/network'
 import type { WalletConnect } from '@web3-react/walletconnect'
 import type { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 
 import { coinbaseWallet, hooks as coinbaseWalletHooks } from '../connectors/coinbaseWallet'
+import { hooks as clvWalletHooks, clvWallet } from '../connectors/clvWallet'
 import { hooks as metaMaskHooks, metaMask } from '../connectors/metaMask'
 import { hooks as networkHooks, network } from '../connectors/network'
 import { hooks as walletConnectHooks, walletConnect } from '../connectors/walletConnect'
 import { hooks as walletConnectV2Hooks, walletConnectV2 } from '../connectors/walletConnectV2'
 import { getName } from '../utils'
 
-const connectors: [MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network, Web3ReactHooks][] = [
+const connectors: [ClvWallet | MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network, Web3ReactHooks][] = [
+  [clvWallet, clvWalletHooks],
   [metaMask, metaMaskHooks],
   [walletConnect, walletConnectHooks],
   [walletConnectV2, walletConnectV2Hooks],

example/components/connectorCards/ClvWalletCard.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+import { hooks, clvWallet } from '../../connectors/clvWallet'
+import { Card } from '../Card'
+
+
+const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks
+
+export default function ClvWalletCard() {
+  const chainId = useChainId()
+  const accounts = useAccounts()
+  const isActivating = useIsActivating()
+
+  const isActive = useIsActive()
+
+  const provider = useProvider()
+  const ENSNames = useENSNames(provider)
+
+  const [error, setError] = useState(undefined)
+
+  // attempt to connect eagerly on mount
+  useEffect(() => {
+    clvWallet.connectEagerly().catch((error) => {
+      console.debug('Failed to connect eagerly to clvWallet', error)
+    })
+  }, [])
+
+  return (
+    <Card
+      connector={clvWallet}
+      activeChainId={chainId}
+      isActivating={isActivating}
+      isActive={isActive}
+      error={error}
+      setError={setError}
+      accounts={accounts}
+      provider={provider}
+      ENSNames={ENSNames}
+    />
+  )
+}

example/connectors/clvWallet.ts

@@ -0,0 +1,4 @@
+import { initializeConnector } from '@web3-react/core'
+import { ClvWallet } from '@web3-react/clvWallet'
+
+export const [clvWallet, hooks] = initializeConnector<ClvWallet>((actions) => new ClvWallet({ actions }))

example/pages/index.tsx

@@ -1,6 +1,7 @@
 import CoinbaseWalletCard from '../components/connectorCards/CoinbaseWalletCard'
 import GnosisSafeCard from '../components/connectorCards/GnosisSafeCard'
 import MetaMaskCard from '../components/connectorCards/MetaMaskCard'
+import ClvWalletCard from '../components/connectorCards/ClvWalletCard'
 import NetworkCard from '../components/connectorCards/NetworkCard'
 import WalletConnectV2Card from '../components/connectorCards/WalletConnectV2Card'
 import ProviderExample from '../components/ProviderExample'
@@ -10,6 +11,7 @@ export default function Home() {
     <>
       <ProviderExample />
       <div style={{ display: 'flex', flexFlow: 'wrap', fontFamily: 'sans-serif' }}>
+        <ClvWalletCard />
         <MetaMaskCard />
         <WalletConnectV2Card />
         <CoinbaseWalletCard />

example/utils.ts

@@ -1,12 +1,14 @@
 import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import { GnosisSafe } from '@web3-react/gnosis-safe'
+import { ClvWallet } from '@web3-react/clvWallet'
 import { MetaMask } from '@web3-react/metamask'
 import { Network } from '@web3-react/network'
 import type { Connector } from '@web3-react/types'
 import { WalletConnect as WalletConnect } from '@web3-react/walletconnect'
 import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 
 export function getName(connector: Connector) {
+  if (connector instanceof ClvWallet) return 'ClvWallet'
   if (connector instanceof MetaMask) return 'MetaMask'
   if (connector instanceof WalletConnectV2) return 'WalletConnect V2'
   if (connector instanceof WalletConnect) return 'WalletConnect'

packages/clvWallet/README.md

@@ -0,0 +1 @@
+# @web3-react/clvWallet

packages/clvWallet/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@web3-react/clvWallet",
+  "keywords": [
+    "web3-react",
+    "clvWallet"
+  ],
+  "author": "Noah Zinsmeister <[email protected]>",
+  "license": "GPL-3.0-or-later",
+  "repository": "github:Uniswap/web3-react",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "8.2.3",
+  "files": [
+    "dist/*"
+  ],
+  "type": "commonjs",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "exports": "./dist/index.js",
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "build": "tsc",
+    "start": "tsc --watch"
+  },
+  "dependencies": {
+    "@web3-react/types": "^8.2.2"
+  },
+  "devDependencies": {
+    "@web3-react/store": "^8.2.2"
+  }
+}

packages/clvWallet/src/index.spec.ts

@@ -0,0 +1,66 @@
+import { createWeb3ReactStoreAndActions } from '@web3-react/store'
+import type { Actions, Web3ReactStore } from '@web3-react/types'
+import {ClvWallet} from '.'
+import { MockEIP1193Provider } from '@web3-react/core'
+
+const chainId = '0x1'
+const accounts: string[] = ['0x0000000000000000000000000000000000000000']
+
+describe('ClvWallet', () => {
+  let mockProvider: MockEIP1193Provider
+
+  beforeEach(() => {
+    mockProvider = new MockEIP1193Provider()
+  })
+
+  beforeEach(() => {
+    ;(window as any).ethereum = mockProvider
+  })
+
+  let store: Web3ReactStore
+  let connector: ClvWallet
+
+  beforeEach(() => {
+    let actions: Actions
+    ;[store, actions] = createWeb3ReactStoreAndActions()
+    connector = new ClvWallet({ actions })
+  })
+
+  test('#connectEagerly', async () => {
+    mockProvider.chainId = chainId
+    mockProvider.accounts = accounts
+
+    await connector.connectEagerly()
+
+    expect(mockProvider.eth_requestAccounts).not.toHaveBeenCalled()
+    expect(mockProvider.eth_accounts).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+      .toBeGreaterThan(mockProvider.eth_accounts.mock.invocationCallOrder[0])
+
+    expect(store.getState()).toEqual({
+      chainId: Number.parseInt(chainId, 16),
+      accounts,
+      activating: false,
+    })
+  })
+
+  test('#activate', async () => {
+    mockProvider.chainId = chainId
+    mockProvider.accounts = accounts
+
+    await connector.activate()
+
+    expect(mockProvider.eth_requestAccounts).toHaveBeenCalled()
+    expect(mockProvider.eth_accounts).not.toHaveBeenCalled()
+    expect(mockProvider.eth_chainId).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+      .toBeGreaterThan(mockProvider.eth_requestAccounts.mock.invocationCallOrder[0])
+
+    expect(store.getState()).toEqual({
+      chainId: Number.parseInt(chainId, 16),
+      accounts,
+      activating: false,
+    })
+  })
+})