fix: update deprecated WalletConnect integration

Author: in19farkt

.github/workflows/publish-new-version.yml

@@ -9,11 +9,11 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 20
 
       - run: yarn
       - run: yarn build
@@ -24,15 +24,17 @@ jobs:
     if: "!contains(github.event.head_commit.message, 'Publish') && !contains(github.event.head_commit.message, '[SKIP-CI]') && !contains(github.event.head_commit.message, '[SKIP CI]')"
     needs: test
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
-          token: ${{ secrets.ACCESS_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
       - uses: fregante/setup-git-user@v1
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 20
           registry-url: https://registry.npmjs.org/
 
       - name: Install dependencies
@@ -67,3 +69,4 @@ jobs:
         run: HUSKY_SKIP_HOOKS=1 npx lerna version --yes --conventional-commits --create-release github
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

package.json

@@ -24,6 +24,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "resolutions": {
+    "node-gyp": "^10.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/akropolisio/web3-wallets-kit.git"
@@ -48,7 +51,7 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@types/jest": "^24.0.23",
-    "@types/node": "12.12.14",
+    "@types/node": "^20.19.27",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
     "commitizen": "^4.0.3",
@@ -69,7 +72,7 @@
     "prettier": "^2.1.1",
     "ts-jest": "^24.1.0",
     "ts-node": "^8.5.0",
-    "tsdx": "^0.12.3",
-    "typescript": "^3.9.7"
+    "tsdx": "0.14.1",
+    "typescript": "^4.9.5"
   }
-}
+}

packages/connect-wallet-connector/README.md

@@ -10,7 +10,31 @@
 import { ConnectWalletConnector } from '@web3-wallets-kit/connect-wallet-connector';
 
 const connector = new ConnectWalletConnector({
-  infuraId: 'INFURA_API_KEY',
-  chainId: 42,
+  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // Get from https://cloud.walletconnect.com
+  chains: [1], // Ethereum Mainnet
+  showQrModal: true,
+  metadata: {
+    name: 'My App',
+    description: 'My App Description',
+    url: 'https://myapp.com',
+    icons: ['https://myapp.com/icon.png'],
+  },
 });
 ```
+
+## Configuration
+
+WalletConnect v2 requires a `projectId` that you can get from [WalletConnect Cloud](https://cloud.walletconnect.com).
+
+### Required Parameters
+
+- `projectId`: Your WalletConnect Cloud project ID
+- `chains`: Array of chain IDs (e.g., `[1]` for Ethereum Mainnet, `[42]` for Kovan)
+
+### Optional Parameters
+
+- `showQrModal`: Show QR code modal (default: `true`)
+- `optionalChains`: Array of optional chain IDs
+- `rpcMap`: Custom RPC endpoints mapping (e.g., `{ 1: 'https://mainnet.infura.io/v3/YOUR_KEY' }`)
+- `metadata`: App metadata (name, description, url, icons)
+- `qrModalOptions`: QR modal customization (themeMode, themeVariables)

packages/connect-wallet-connector/package.json

@@ -36,7 +36,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@walletconnect/web3-provider": "^1.6.6",
+    "@walletconnect/ethereum-provider": "^2.11.0",
     "@web3-wallets-kit/abstract-connector": "^0.3.9",
     "@web3-wallets-kit/types": "^0.5.9"
   }

packages/connect-wallet-connector/src/__test__/index.spec.ts

@@ -1,5 +1,28 @@
-describe('Web3WalletsManager', (): void => {
-  it('TODO write test', (): void => {
-    expect('0').toEqual('0');
+import { ConnectWalletConnector } from '../index';
+
+describe('ConnectWalletConnector', (): void => {
+  it('should create connector with required config', (): void => {
+    const connector = new ConnectWalletConnector({
+      projectId: 'test-project-id',
+      chains: [1],
+      showQrModal: true,
+    });
+    expect(connector).toBeDefined();
+  });
+
+  it('should create connector with full config', (): void => {
+    const connector = new ConnectWalletConnector({
+      projectId: 'test-project-id',
+      chains: [1],
+      showQrModal: true,
+      optionalChains: [42, 5],
+      metadata: {
+        name: 'Test App',
+        description: 'Test Description',
+        url: 'https://test.com',
+        icons: ['https://test.com/icon.png'],
+      },
+    });
+    expect(connector).toBeDefined();
   });
 });

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

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-duplicates */
 import { AbstractConnector } from '@web3-wallets-kit/abstract-connector';
 import { DefaultConnectionPayload } from '@web3-wallets-kit/types';
-import type WalletConnectProvider from '@walletconnect/web3-provider';
-import type { IWalletConnectProviderOptions } from '@walletconnect/types';
+import type EthereumProvider from '@walletconnect/ethereum-provider';
+import type { EthereumProviderOptions } from '@walletconnect/ethereum-provider';
 
-export type ConnectWalletConnectorConfig = IWalletConnectProviderOptions;
+export type ConnectWalletConnectorConfig = EthereumProviderOptions;
 
 export interface ConnectWalletConnectionPayload extends DefaultConnectionPayload {
-  provider: WalletConnectProvider;
+  provider: EthereumProvider;
 }
 
 export class ConnectWalletConnector extends AbstractConnector<ConnectWalletConnectionPayload> {
@@ -16,11 +16,13 @@ export class ConnectWalletConnector extends AbstractConnector<ConnectWalletConne
   }
 
   public async connect(): Promise<ConnectWalletConnectionPayload> {
-    const WalletConnectLibrary = await import('@walletconnect/web3-provider');
-    const Provider = WalletConnectLibrary.default;
-    const provider = new Provider(this.config);
+    const { EthereumProvider: WalletConnectProvider } = await import(
+      '@walletconnect/ethereum-provider'
+    );
 
-    await provider.enable();
+    const provider = await WalletConnectProvider.init(this.config);
+
+    await provider.connect();
 
     this.payload = {
       provider,
@@ -31,11 +33,7 @@ export class ConnectWalletConnector extends AbstractConnector<ConnectWalletConne
 
   public async disconnect() {
     if (this.payload) {
-      const walletConnector = await this.payload.provider.getWalletConnector({
-        disableSessionCreation: true,
-      });
-      await walletConnector.killSession();
-      await this.payload.provider.stop();
+      await this.payload.provider.disconnect();
     }
     super.disconnect();
   }

packages/unstoppable-connector/README.md

@@ -26,9 +26,13 @@ const connector = new UnstoppableConnector({
   connectors: {
     web3: new InpageConnector(),
     walletconnect: new ConnectWalletConnector({
-      chainId: 1,
-      rpc: {
-        1: 'https://mainnet.mycustomnode.com',
+      projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
+      chains: [1],
+      metadata: {
+        name: 'My App',
+        description: 'My App Description',
+        url: 'https://myapp.com',
+        icons: ['https://myapp.com/icon.png'],
       },
     }),
   },

tsconfig.json

@@ -7,6 +7,7 @@
     "lib": ["dom", "ESNext"],                 /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
+    "skipLibCheck": false,
     "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     "declaration": true,                      /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */