upgrade wallet connect qr modal to v2

zetamarkets · Sep 28, 2023 · 275997a · 275997a
1 parent 87df0e7
commit 275997a
Show file tree

Hide file tree

Showing 4 changed files with 647 additions and 493 deletions.
diff --git a/packages/walletconnect-solana/package.json b/packages/walletconnect-solana/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@jnwng/walletconnect-solana",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "license": "Apache-2.0",
     "type": "module",
     "sideEffects": false,
@@ -32,7 +32,7 @@
         "shx": "^0.3.4"
     },
     "dependencies": {
-        "@walletconnect/qrcode-modal": "^1.8.0",
+        "@walletconnect/modal": "^2.6.2",
         "@walletconnect/sign-client": "^2.7.2",
         "@walletconnect/utils": "^2.4.5",
         "bs58": "^5.0.0"

diff --git a/packages/walletconnect-solana/src/adapter.ts b/packages/walletconnect-solana/src/adapter.ts
@@ -1,5 +1,5 @@
 import { Transaction, VersionedTransaction, PublicKey } from '@solana/web3.js';
-import QRCodeModal from '@walletconnect/qrcode-modal';
+import { WalletConnectModal } from '@walletconnect/modal';
 import WalletConnectClient from '@walletconnect/sign-client';
 import type { EngineTypes, SessionTypes, SignClientTypes } from '@walletconnect/types';
 import { getSdkError, parseAccountId } from '@walletconnect/utils';
@@ -52,6 +52,10 @@ export class WalletConnectWallet {
     async connect(): Promise<WalletConnectWalletInit> {
         const client = this._client ?? (await WalletConnectClient.init(this._options));
         const sessions = client.find(getConnectParams(this._network)).filter((s) => s.acknowledged);
+        const modal = new WalletConnectModal({
+            chains: [WalletConnectChainID.Mainnet, WalletConnectChainID.Devnet],
+            projectId: this._options.projectId ?? '',
+        });
         if (sessions.length) {
             // select last matching session
             this._session = sessions[sessions.length - 1];
@@ -63,11 +67,17 @@ export class WalletConnectWallet {
             };
         } else {
             const { uri, approval } = await client.connect(getConnectParams(this._network));
+
             return new Promise((resolve, reject) => {
-                if (uri) {
-                    QRCodeModal.open(uri, () => {
+                const unsubscribe = modal.subscribeModal((modalState) => {
+                    if (!modalState.open) {
+                        unsubscribe();
                         reject(new QRCodeModalError());
-                    });
+                    }
+                });
+
+                if (uri) {
+                    modal.openModal({ uri });
                 }
 
                 approval()
@@ -80,7 +90,8 @@ export class WalletConnectWallet {
                     })
                     .catch(reject)
                     .finally(() => {
-                        QRCodeModal.close();
+                        unsubscribe();
+                        modal.closeModal();
                     });
             });
         }