Walletconnect v2 (#340)

* WC v2 WIP

* feat: walletconnect v2

* feat: wc fixes and tests

* fix: add cancelation and review fixes

* chore: bump versions to alpha

* fix: wallet example shenanigans

* release: published alpha

* fix: resurrection

* release: published alpha.2

* fix: example wallet now works

* release: published beta.1

* fix: CANCELED symbol and some PR review comments

* release: published beta.2

* chore: eslint

* release: published 5.0.1

* chore: test config

* test: polyfill textencoder

* fix: seem the beta bug still exists

.github/workflows/ci.yml

@@ -46,7 +46,7 @@ jobs:
         if: matrix.node == 'lts/*'
         uses: codecov/codecov-action@v2
         with:
-          files: ./packages/react-celo/coverage/clover.xml,./packages/walletconnect-v1/coverage/clover.xml
+          files: ./packages/react-celo/coverage/clover.xml,./packages/walletconnect/coverage/clover.xml
           fail_ci_if_error: true
           verbose: true
 

.vscode/launch.json

@@ -9,7 +9,7 @@
       "request": "launch",
       "name": "Launch Program",
       "skipFiles": ["<node_internals>/**"],
-      "program": "${workspaceFolder}/packages/walletconnect-v1/src/wc-wallet.ts",
+      "program": "${workspaceFolder}/packages/walletconnect/src/wc-wallet.ts",
       "outFiles": ["${workspaceFolder}/**/*.js"]
     },
     {

codecov.yml

@@ -11,13 +11,9 @@ flags:
   react-celo:
     paths:
       - packages/react-celo/
-  walletconnect-v1:
+  walletconnect:
     paths:
-      - packages/walletconnect-v1/
-  # When WC-v2 is merged
-  # walletconnect:
-  #   paths:
-  #     - packages/walletconnect/
+      - packages/walletconnect/
 ignore:
   - 'packages/*/node_modules'
   - 'node_modules'

jest.config.js

@@ -1,4 +1,6 @@
 module.exports = {
+  resolver: 'jest-resolver-enhanced',
+  setupFilesAfterEnv: ['<rootDir>/../../jest.setup.ts'],
   roots: ['<rootDir>/src', '<rootDir>/__tests__'],
   preset: 'ts-jest',
   globals: {

jest.setup.ts

@@ -0,0 +1,22 @@
+// https://github.com/achingbrain/uint8arrays/issues/21
+// https://github.com/inrupt/solid-client-authn-js/issues/1676
+// https://github.com/jsdom/jsdom/issues/2524
+
+// Listed some (seemingly) related issues to what I'm encountering
+
+import '@testing-library/jest-dom';
+
+import { TextDecoder, TextEncoder } from 'util';
+
+if (typeof window !== 'undefined' && !('TextEncoder' in window)) {
+  Object.defineProperty(window, 'TextEncoder', {
+    writable: true,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    value: TextEncoder,
+  });
+  Object.defineProperty(window, 'TextDecoder', {
+    writable: true,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    value: TextDecoder,
+  });
+}

package.json

@@ -4,7 +4,7 @@
   "workspaces": [
     "packages/example",
     "packages/react-celo",
-    "packages/walletconnect-v1"
+    "packages/walletconnect"
   ],
   "pkgs": {
     "path": "./packages"
@@ -48,7 +48,8 @@
     "eth-testing": "^1.0.0",
     "husky": "^7.0.4",
     "jest": "^28.1.0",
-    "lerna": "^5.4.3",
+    "jest-resolver-enhanced": "^1.1.0",
+    "lerna": "^5.6.2",
     "lint-staged": "^12.2.2",
     "prettier": "^2.5.1",
     "prompt": "^1.2.1",

packages/example/next.config.js

@@ -3,6 +3,7 @@ module.exports = {
     config.plugins.push(
       new webpack.IgnorePlugin({ resourceRegExp: /^electron$/ })
     );
+    config.resolve.fallback = { net: false };
     return config;
   },
 

packages/example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example",
-  "version": "4.2.1",
+  "version": "5.0.1-dev",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -15,9 +15,11 @@
   "license": "MIT",
   "dependencies": {
     "@celo/contractkit": "^3.1.0",
-    "@celo/react-celo": "^4.3.0",
+    "@celo/react-celo": "5.0.1-dev",
     "@celo/utils": "^3.1.0",
-    "@walletconnect/client": "1.8.0",
+    "@walletconnect/sign-client": "^2.1.4",
+    "@walletconnect/types": "^2.1.4",
+    "@walletconnect/utils": "^2.1.4",
     "next": "^12.1.6",
     "postcss": "^8.4.5",
     "react": "^18.1.0",

packages/example/pages/index.tsx

@@ -24,15 +24,13 @@ import { signTestTypedData } from '../utils/sign-test-typed-data';
 interface Summary {
   name: string;
   address: string;
-  wallet: string;
   celo: BigNumber;
   balances: { symbol: StableToken; value?: BigNumber; error?: string }[];
 }
 
 const defaultSummary: Summary = {
   name: '',
   address: '',
-  wallet: '',
   celo: new BigNumber(0),
   balances: [],
 };
@@ -273,12 +271,6 @@ function HomePage(): React.ReactElement {
                     <div>Wallet type: {walletType}</div>
                     <div>Name: {summary.name || 'Not set'}</div>
                     <div className="">Address: {truncateAddress(address)}</div>
-                    <div className="">
-                      Wallet address:{' '}
-                      {summary.wallet
-                        ? truncateAddress(summary.wallet)
-                        : 'Not set'}
-                    </div>
                   </div>
                 </div>
                 <div>
@@ -348,6 +340,8 @@ async function getBalances(
   );
 }
 
+export const WC_PROJECT_ID = 'cbd4dfc72c388f372fc45f003becb013';
+
 export default function Home(): React.ReactElement {
   return (
     <CeloProvider
@@ -356,6 +350,7 @@ export default function Home(): React.ReactElement {
         description: 'A demo DApp to showcase functionality',
         url: 'https://react-celo.vercel.app',
         icon: 'https://react-celo.vercel.app/favicon.ico',
+        walletConnectProjectId: WC_PROJECT_ID,
       }}
       defaultNetwork={Alfajores.name}
       connectModal={{

packages/example/pages/wallet-test-plan.tsx

@@ -1,4 +1,4 @@
-import { CeloProvider, Mainnet } from '@celo/react-celo';
+import { Alfajores, CeloProvider, Mainnet } from '@celo/react-celo';
 import React from 'react';
 
 import { ConnectWalletCheck } from '../components/test-plan/connect-wallet';
@@ -11,6 +11,7 @@ import {
 import { SwitchNetwork } from '../components/test-plan/switch-networks';
 import { UpdateFeeCurrency } from '../components/test-plan/update-fee-currency';
 
+export const WC_PROJECT_ID = '3ee9bf02f3a89a03837044fc7cdeb232';
 export default function WalletTestPlan(): React.ReactElement {
   return (
     <CeloProvider
@@ -19,8 +20,10 @@ export default function WalletTestPlan(): React.ReactElement {
         description: 'Wallet test plan',
         url: 'https://react-celo.vercel.app/wallet-test-plan',
         icon: 'https://react-celo.vercel.app/favicon.ico?v=2',
+        walletConnectProjectId: WC_PROJECT_ID,
       }}
-      network={Mainnet}
+      defaultNetwork={Mainnet.name}
+      networks={[Mainnet, Alfajores]}
       connectModal={{
         providersOptions: { searchable: true },
       }}