WCv2 Fix (#356)

* update wallet connect to latest

* fix hydration errors

* add cannoli to walletconnect and a note for next time

* chore: upgrade local WC Wallet

* chore: remove unused import

* fix: make it work

* docs: add explanation for the changes

* fix: remove unused import

* fix: typing

* fix: remove unused auth-client

* fix: remove node 14 CI runner

* add cannoli to mock wallet, add properties to mock client which are missing

* include fetch in tests

* fix deprecated setup for ts jest

* Fix dapp name not being sent to the wallet

* solving world hunger right here

* solve connection issues, and chain switching. fix infinite connector initialization.

* fix incorrect reject message,
use proper logger
ensure initialised before swithing networks to prevent errors and deinitialise when closing
more helpful comments
safely delete pairing
signTransaction is required.

* UPDATE WC DEPS TO LATEST

* publish 5.0.4 beta 1

* use correct version

* Fixing build for example app

---------

Co-authored-by: Aaron <aaron.deruvo@clabs.co>
Co-authored-by: Nicolas Brugneaux <nicolas.brugneaux@gmail.com>
Co-authored-by: Daniel Kesler <danielckesler@gmail.com>

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [14, 16, 18]
+        node: [16, 18]
     steps:
       - name: Checkout
         uses: actions/checkout@v2

jest.config.js

@@ -3,10 +3,8 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/../../jest.setup.ts'],
   roots: ['<rootDir>/src', '<rootDir>/__tests__'],
   preset: 'ts-jest',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    },
+  transform: {
+    '\\*.tsx': ['ts-jest', '<rootDir>/tsconfig.spec.json'],
   },
   testEnvironment: 'jsdom',
   testRegex: '(/__tests__/.*|(\\.|/))(test|spec)\\.[jt]sx?$',

jest.setup.ts

@@ -6,6 +6,7 @@
 
 import '@testing-library/jest-dom';
 
+import fetch from 'isomorphic-fetch';
 import { TextDecoder, TextEncoder } from 'util';
 
 if (typeof window !== 'undefined' && !('TextEncoder' in window)) {
@@ -20,3 +21,5 @@ if (typeof window !== 'undefined' && !('TextEncoder' in window)) {
     value: TextDecoder,
   });
 }
+
+global['fetch'] = fetch;

package.json

@@ -10,7 +10,7 @@
     "path": "./packages"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0"
   },
   "scripts": {
     "dev": "lerna run dev --stream --parallel",

packages/example/package.json

@@ -15,11 +15,14 @@
   "license": "MIT",
   "dependencies": {
     "@celo/contractkit": "^3.2.0",
-    "@celo/react-celo": "5.0.3-dev",
+    "@celo/react-celo": "5.0.4-beta.1-dev",
     "@celo/utils": "^3.2.0",
-    "@walletconnect/sign-client": "^2.1.4",
-    "@walletconnect/types": "^2.1.4",
-    "@walletconnect/utils": "^2.1.4",
+    "@celo/wallet-walletconnect": "5.0.4-beta.1-dev",
+    "@walletconnect/core": "^2.7.3",
+    "@walletconnect/sign-client": "^2.7.3",
+    "@walletconnect/types": "^2.7.3",
+    "@walletconnect/utils": "^2.7.3",
+    "@walletconnect/web3wallet": "^1.7.1",
     "next": "^12.1.6",
     "postcss": "^8.4.5",
     "react": "^18.1.0",

packages/example/pages/index.tsx

@@ -343,6 +343,10 @@ async function getBalances(
 export const WC_PROJECT_ID = 'cbd4dfc72c388f372fc45f003becb013';
 
 export default function Home(): React.ReactElement {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
   return (
     <CeloProvider
       dapp={{
@@ -357,7 +361,7 @@ export default function Home(): React.ReactElement {
         providersOptions: { searchable: true },
       }}
     >
-      <HomePage />
+      {isMounted && <HomePage />}
     </CeloProvider>
   );
 }
@@ -410,7 +414,7 @@ function SelectChain() {
       onChange={(e) => {
         const newNetwork = networks.find((n) => n.name === e.target.value);
         if (newNetwork) {
-          void updateNetwork(newNetwork);
+          void updateNetwork(newNetwork).catch(console.error);
         }
       }}
     >