feat: add wallet connection functionality

.nvmrc

@@ -1 +1 @@
-lts/*
+18

e2e/connect.test.tsx

@@ -10,44 +10,83 @@ import { tokens } from '@uniswap/default-token-list'
 
 import { SwapWidget } from '../src'
 
+const HARDHAT_ACCOUNT_DISPLAY_STRING = `${hardhat.account.address?.substring(
+  0,
+  6
+)}...${hardhat.account.address?.substring(hardhat.account.address.length - 4)}`
+
 describe('connect', () => {
   let component: RenderResult
-  let wallet: HTMLElement
+  let account: HTMLElement
+  let connectWallet: HTMLElement
   let toolbar: HTMLElement
+  let tokenSelect: HTMLElement
 
   beforeEach(async () => {
     component = render(<SwapWidget tokenList={tokens} />)
-    wallet = await component.findByTestId('wallet')
+    connectWallet = await component.findByTestId('connect-wallet')
     toolbar = await component.findByTestId('toolbar')
+    tokenSelect = (await component.findAllByTestId('token-select'))[0]
   })
 
-  it('prompts for wallet connection in the Toolbar', async () => {
-    expect(wallet.hidden).toBeTruthy()
-    expect(toolbar.textContent).toBe('Connect wallet to swap')
+  describe('with no params, using fallback JSON RPC URL', () => {
+    it('prompts for wallet connection in the Wallet and Toolbar', async () => {
+      expect(toolbar.textContent).toBe('Connecting…')
+      await waitFor(() => expect(toolbar.textContent).not.toBe('Connecting…'))
+      expect(connectWallet.textContent).toBe('Connect wallet to swap')
+      expect(toolbar.textContent).toBe('Connect wallet to swap')
+    })
+
+    it('expects widget not to be disabled', async () => {
+      expect(tokenSelect).toHaveProperty('disabled', true)
+      await waitFor(() => expect(toolbar.textContent).not.toBe('Connecting…'))
+      expect(tokenSelect).toHaveProperty('disabled', false)
+    })
   })
 
-  describe('with jsonRpcEndpoint', () => {
-    it('prompts for wallet connection in the Wallet', async () => {
-      component.rerender(<SwapWidget tokenList={tokens} jsonRpcEndpoint={hardhat.url} />)
-      expect(wallet.hidden).toBeTruthy()
+  describe('with valid jsonRpcUrlMap', () => {
+    it('prompts for wallet connection in the Wallet and Toolbar', async () => {
+      component = render(<SwapWidget tokenList={tokens} jsonRpcUrlMap={{ 1: [hardhat.url] }} />)
+      expect(connectWallet.textContent).toBe('Connect wallet to swap')
       expect(toolbar.textContent).toBe('Connecting…')
+      await waitFor(() => expect(toolbar.textContent).not.toBe('Connecting…'))
+      expect(connectWallet.textContent).toBe('Connect wallet to swap')
+      expect(toolbar.textContent).toBe('Connect wallet to swap')
+    })
 
+    it('expects widget not to be disabled', async () => {
+      component = render(<SwapWidget tokenList={tokens} jsonRpcUrlMap={{ 1: [hardhat.url] }} />)
+      expect(tokenSelect).toHaveProperty('disabled', true)
       await waitFor(() => expect(toolbar.textContent).not.toBe('Connecting…'))
-      expect(wallet.hidden).toBeFalsy()
-      expect(wallet.textContent).toBe('Connect wallet to swap')
-      expect(toolbar.textContent).toBe('Enter an amount')
+      expect(tokenSelect).toHaveProperty('disabled', false)
     })
   })
 
-  describe('with provider', () => {
-    it('does not prompt for wallet connection', async () => {
-      component.rerender(<SwapWidget tokenList={tokens} provider={hardhat.provider} />)
-      expect(wallet.hidden).toBeTruthy()
+  describe('with wallet provider', () => {
+    it('displays connected account chip', async () => {
+      component = render(<SwapWidget tokenList={tokens} provider={hardhat.provider} />)
+      await waitFor(() => expect(toolbar.textContent).not.toBe('Connecting…'))
+      account = await component.findByTestId('account')
+      expect(account.textContent?.toLowerCase()).toBe(HARDHAT_ACCOUNT_DISPLAY_STRING)
+    })
+
+    it('does not prompt for wallet connection in toolbar', async () => {
+      component = render(<SwapWidget tokenList={tokens} provider={hardhat.provider} />)
       expect(toolbar.textContent).toBe('Connecting…')
+      await waitFor(
+        async () => {
+          toolbar = (await component.findAllByTestId('toolbar'))[1]
+          expect(toolbar.textContent).toBe('Enter an amount')
+        },
+        { timeout: 10000 }
+      )
+    })
 
+    it('expects widget not to be disabled', async () => {
+      component = render(<SwapWidget tokenList={tokens} provider={hardhat.provider} />)
+      expect(tokenSelect).toHaveProperty('disabled', true)
       await waitFor(() => expect(toolbar.textContent).not.toBe('Connecting…'))
-      expect(wallet.hidden).toBeTruthy()
-      expect(toolbar.textContent).toBe('Enter an amount')
+      expect(tokenSelect).toHaveProperty('disabled', false)
     })
   })
 })

package.json

@@ -67,11 +67,14 @@
     "@uniswap/token-lists": "^1.0.0-beta.30",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-sdk": "^3.8.2",
-    "@web3-react/core": "8.0.30-beta.0",
-    "@web3-react/eip1193": "8.0.23-beta.0",
-    "@web3-react/empty": "8.0.17-beta.0",
-    "@web3-react/types": "8.0.17-beta.0",
-    "@web3-react/url": "8.0.22-beta.0",
+    "@web3-react/core": "8.0.35-beta.0",
+    "@web3-react/eip1193": "8.0.26-beta.0",
+    "@web3-react/empty": "8.0.20-beta.0",
+    "@web3-react/metamask": "8.0.28-beta.0",
+    "@web3-react/network": "8.0.27-beta.0",
+    "@web3-react/types": "8.0.20-beta.0",
+    "@web3-react/url": "8.0.25-beta.0",
+    "@web3-react/walletconnect": "8.0.35-beta.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
     "ethers": "^5.1.4",
@@ -85,6 +88,7 @@
     "node-vibrant": "^3.2.1-alpha.1",
     "polished": "^3.3.2",
     "popper-max-size-modifier": "^0.2.0",
+    "qrcode": "^1.5.0",
     "react-feather": "^2.0.8",
     "react-popper": "^2.2.3",
     "react-virtualized-auto-sizer": "^1.0.2",
@@ -136,7 +140,8 @@
     "@types/lingui__react": "^2.8.3",
     "@types/ms.macro": "^2.0.0",
     "@types/multicodec": "^1.0.0",
-    "@types/node": "^13.13.5",
+    "@types/node": "^18.6.3",
+    "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.2",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
@@ -154,8 +159,6 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@walletconnect/ethereum-provider": "^1.7.1",
-    "@web3-react/metamask": "8.0.24-beta.0",
-    "@web3-react/walletconnect": "8.0.31-beta.0",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-macros": "^3.1.0",