Update wc modal (#65)

## Purpose Deep linking does not work with the deprecated `@walletconnect/qrcode-modal`. This PR aims to update the dependency.
Concordium · Apr 15, 2024 · 3f6885a · 3f6885a
1 parent 55cfd5a
commit 3f6885a
Show file tree

Hide file tree

Showing 7 changed files with 509 additions and 238 deletions.
diff --git a/packages/wallet-connectors/CHANGELOG.md b/packages/wallet-connectors/CHANGELOG.md
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+-   Added `createWalletConnectModalConfig` to create a configuration the modal shown when connecting to a walletconnect compatible wallet. The value returned can be passed to `WalletConnectConnector.create`.
+-   Added `CRYPTO_X_WALLET_MAINNET` and `CONCORDIUM_WALLET_MAINNET` exports, which can be passed `createWalletConnectModalConfig` for more control over which wallets are shown.
+-   Added option to specify the methods and events to request permission for by walletconnect
+
+### Changed
+
+-   Changed the wallet connect modal dependency from `@walletconnect/qrcode-modal` (which is deprecated) to `@walletconnect/modal`.
+
 ## [0.5.1] - 2024-03-22
 
 ### Fixed

diff --git a/packages/wallet-connectors/package.json b/packages/wallet-connectors/package.json
@@ -29,7 +29,8 @@
     },
     "dependencies": {
         "@concordium/browser-wallet-api-helpers": "^3.0.0",
-        "@walletconnect/qrcode-modal": "^1.8.0",
+        "@walletconnect/modal": "^2.6.2",
+        "@walletconnect/modal-core": "^2.6.2",
         "@walletconnect/sign-client": "^2.1.4"
     },
     "peerDependencies": {

diff --git a/packages/wallet-connectors/src/WalletConnect.ts b/packages/wallet-connectors/src/WalletConnect.ts
diff --git a/samples/contractupdate/src/config.ts b/samples/contractupdate/src/config.ts
@@ -2,6 +2,9 @@ import {
     BrowserWalletConnector,
     CONCORDIUM_WALLET_CONNECT_PROJECT_ID,
     WalletConnectConnector,
+    WalletConnectEvent,
+    WalletConnectMethod,
+    WalletConnectNamespaceConfig,
     ephemeralConnectorType,
 } from '@concordium/react-components';
 import { SignClientTypes } from '@walletconnect/types';
@@ -16,5 +19,12 @@ const WALLET_CONNECT_OPTS: SignClientTypes.Options = {
     },
 };
 
+const WALLET_CONNECT_NS_CONFIG: WalletConnectNamespaceConfig = {
+    methods: [WalletConnectMethod.SignAndSendTransaction],
+    events: [WalletConnectEvent.AccountsChanged, WalletConnectEvent.ChainChanged],
+};
+
 export const BROWSER_WALLET = ephemeralConnectorType(BrowserWalletConnector.create);
-export const WALLET_CONNECT = ephemeralConnectorType(WalletConnectConnector.create.bind(this, WALLET_CONNECT_OPTS));
+export const WALLET_CONNECT = ephemeralConnectorType((delegate, network) =>
+    WalletConnectConnector.create(WALLET_CONNECT_OPTS, delegate, network, WALLET_CONNECT_NS_CONFIG)
+);
diff --git a/samples/proofs/src/config.ts b/samples/proofs/src/config.ts
@@ -2,6 +2,9 @@ import {
     BrowserWalletConnector,
     CONCORDIUM_WALLET_CONNECT_PROJECT_ID,
     WalletConnectConnector,
+    WalletConnectEvent,
+    WalletConnectMethod,
+    WalletConnectNamespaceConfig,
     ephemeralConnectorType,
 } from '@concordium/react-components';
 import { SignClientTypes } from '@walletconnect/types';
@@ -16,5 +19,12 @@ const WALLET_CONNECT_OPTS: SignClientTypes.Options = {
     },
 };
 
+const WALLET_CONNECT_SCOPE: WalletConnectNamespaceConfig = {
+    methods: [WalletConnectMethod.RequestVerifiablePresentation],
+    events: [WalletConnectEvent.AccountsChanged, WalletConnectEvent.ChainChanged],
+};
+
 export const BROWSER_WALLET = ephemeralConnectorType(BrowserWalletConnector.create);
-export const WALLET_CONNECT = ephemeralConnectorType(WalletConnectConnector.create.bind(this, WALLET_CONNECT_OPTS));
+export const WALLET_CONNECT = ephemeralConnectorType((delegate, network) =>
+    WalletConnectConnector.create(WALLET_CONNECT_OPTS, delegate, network, WALLET_CONNECT_SCOPE)
+);
diff --git a/samples/sign-message/src/config.ts b/samples/sign-message/src/config.ts
@@ -2,6 +2,9 @@ import {
     BrowserWalletConnector,
     CONCORDIUM_WALLET_CONNECT_PROJECT_ID,
     WalletConnectConnector,
+    WalletConnectEvent,
+    WalletConnectMethod,
+    WalletConnectNamespaceConfig,
     ephemeralConnectorType,
 } from '@concordium/react-components';
 import { SignClientTypes } from '@walletconnect/types';
@@ -16,5 +19,12 @@ const WALLET_CONNECT_OPTS: SignClientTypes.Options = {
     },
 };
 
+const WALLET_CONNECT_SCOPE: WalletConnectNamespaceConfig = {
+    methods: [WalletConnectMethod.SignMessage],
+    events: [WalletConnectEvent.AccountsChanged, WalletConnectEvent.ChainChanged],
+};
+
 export const BROWSER_WALLET = ephemeralConnectorType(BrowserWalletConnector.create);
-export const WALLET_CONNECT = ephemeralConnectorType(WalletConnectConnector.create.bind(this, WALLET_CONNECT_OPTS));
+export const WALLET_CONNECT = ephemeralConnectorType((delegate, network) =>
+    WalletConnectConnector.create(WALLET_CONNECT_OPTS, delegate, network, WALLET_CONNECT_SCOPE)
+);