chore: bump walletconnect versions (#173)

docs/docs/change-log.md

@@ -4,6 +4,11 @@ sidebar_position: 8
 
 # Changelog
 
+## Version 0.1.26
+
+- Wallet connect modal uses `@walletconnect/modal` instead of deprecated `web3modal`
+- Renamed prop `walletConnect.web3Modal` to `walletConnect.walletConnectModal`
+
 ## Version 0.1.19
 
 - Added Compass wallet integration

docs/docs/migration-guide.md

@@ -4,6 +4,24 @@ sidebar_position: 3
 
 # Migration Guide
 
+## 0.1.26 Breaking Changes
+
+### WalletConnect
+
+Wallet connect modal uses `@walletconnect/modal` instead of deprecated `web3modal`
+Renamed prop `walletConnect.web3Modal` to `walletConnect.walletConnectModal`
+
+```diff
+<GrazProvider
+  grazOptions={{
+    walletConnect: {
+-     web3Modal: web3ModalOptions
++     walletConnectModal: walletConnectModalOptions
+    }
+  }}
+>
+```
+
 ## 0.1.18 Breaking Changes
 
 ### Signing client hooks

docs/docs/types/WalletConnectStore.md

@@ -9,7 +9,7 @@ interface WalletConnectStore {
     name?: string;
     ...SignClientTypes.Options
   } | null;
-  web3Modal?: {
+  walletConnectModal?: {
     themeMode?: 'dark' | 'light'
     privacyPolicyUrl?: string
     termsOfServiceUrl?: string

docs/docs/utilities/getAvailableWallets.md

@@ -38,7 +38,7 @@ export const AvailableWallets = () => {
 #### Note:
 
 - if `walletConnect.options.projectId` not provided `WalletType.WALLETCONNECT` | `WalletType.WC_KEPLR_MOBILE` | `WalletType.WC_LEAP_MOBILE`| `WalletType.WC_COSMOSTATION_MOBILE` will return false
-- `wallet.WalletType.WALLETCONNECT` is using `web3modal` for the modal, it will only shows the qr code. To connect and have deep linking to wallet mobile apps, use `WalletType.WC_KEPLR_MOBILE` |
+- `wallet.WalletType.WALLETCONNECT` is using `@walletconnect/modal` for the modal, it will only shows the qr code. To connect and have deep linking to wallet mobile apps, use `WalletType.WC_KEPLR_MOBILE` |
   `WalletType.WC_LEAP_MOBILE`|
   `WalletType.WC_COSMOSTATION_MOBILE`
 - `WalletType.WC_KEPLR_MOBILE` |

docs/docs/wallet-connect.md

@@ -65,7 +65,7 @@ export const AvailableWallets = () => {
 #### Note:
 
 - if `walletConnect.options.projectId` not provided on `GrazProvider`, `WalletType.WALLETCONNECT` | `WalletType.WC_KEPLR_MOBILE` | `WalletType.WC_LEAP_MOBILE`| `WalletType.WC_COSMOSTATION_MOBILE` will return false
-- `WalletType.WALLETCONNECT` is using `web3modal` for the modal, it will only shows the qr code. To connect and have deep linking to wallet mobile apps, use `WalletType.WC_KEPLR_MOBILE` |
+- `WalletType.WALLETCONNECT` is using `@walletconnect/modal` for the modal, it will only shows the qr code. To connect and have deep linking to wallet mobile apps, use `WalletType.WC_KEPLR_MOBILE` |
   `WalletType.WC_LEAP_MOBILE`|
   `WalletType.WC_COSMOSTATION_MOBILE`
 - `WalletType.WC_KEPLR_MOBILE` |

packages/graz/package.json

@@ -1,7 +1,7 @@
 {
   "name": "graz",
   "description": "React hooks for Cosmos",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "author": "Griko Nibras <[email protected]>",
   "repository": "https://github.com/graz-sh/graz.git",
   "homepage": "https://github.com/graz-sh/graz",
@@ -60,10 +60,10 @@
     "@tanstack/react-query": "4.35.0",
     "@terra-money/station-connector": "1.1.0",
     "@vectis/extension-client": "^0.7.2",
-    "@walletconnect/sign-client": "2.10.0",
-    "@walletconnect/types": "2.10.0",
-    "@walletconnect/utils": "2.10.0",
-    "@web3modal/standalone": "2.4.3",
+    "@walletconnect/sign-client": "2.17.2",
+    "@walletconnect/types": "2.17.2",
+    "@walletconnect/utils": "2.17.2",
+    "@walletconnect/modal": "2.7.0",
     "cosmos-directory-client": "0.0.6",
     "long": "4",
     "zustand": "4.5.2"

packages/graz/src/actions/wallet/wallet-connect/index.ts

@@ -11,6 +11,7 @@ import { type SignAminoParams, type SignDirectParams, type Wallet, WalletType }
 import { isAndroid, isIos, isMobile } from "../../../utils/os";
 import { promiseWithTimeout } from "../../../utils/timeout";
 import type { GetWalletConnectParams, WalletConnectSignDirectResponse } from "./types";
+import { WalletConnectModal } from "@walletconnect/modal";
 
 export const getWalletConnect = (params?: GetWalletConnectParams): Wallet => {
   if (!useGrazInternalStore.getState().walletConnect?.options?.projectId?.trim()) {
@@ -193,15 +194,11 @@ export const getWalletConnect = (params?: GetWalletConnectParams): Wallet => {
     const { walletConnect, chains } = useGrazInternalStore.getState();
     if (!walletConnect?.options?.projectId) throw new Error("walletConnect.options.projectId is not defined");
 
-    const { Web3Modal } = await import("@web3modal/standalone");
-
-    const web3Modal = new Web3Modal({
+    const walletConnectModal = new WalletConnectModal({
       projectId: walletConnect.options.projectId,
-      walletConnectVersion: 2,
       enableExplorer: false,
       explorerRecommendedWalletIds: "NONE",
-
-      ...walletConnect.web3Modal,
+      ...walletConnect.walletConnectModal,
       // explorerRecommendedWalletIds: [
       // https://walletconnect.com/explorer?type=wallet&version=2&chains=cosmos%3Acosmoshub-4
       // keplr doesn't have complete app object better hide it for now and use getKeplr
@@ -233,7 +230,7 @@ export const getWalletConnect = (params?: GetWalletConnectParams): Wallet => {
       );
       if (!uri) throw new Error("No wallet connect uri");
       if (!params) {
-        await web3Modal.openModal({ uri });
+        await walletConnectModal.openModal({ uri });
       } else {
         redirectToApp(uri);
       }
@@ -280,18 +277,18 @@ export const getWalletConnect = (params?: GetWalletConnectParams): Wallet => {
       try {
         const controller = new AbortController();
         const signal = controller.signal;
-        web3Modal.subscribeModal((state) => {
+        walletConnectModal.subscribeModal((state) => {
           if (!state.open) {
             controller.abort();
           }
         });
         await approving(signal);
       } catch (error) {
-        web3Modal.closeModal();
+        walletConnectModal.closeModal();
         if (!(error as Error).message.toLowerCase().includes("no matching key")) return Promise.reject(error);
       }
       if (!params) {
-        web3Modal.closeModal();
+        walletConnectModal.closeModal();
       }
       return Promise.resolve();
     }

packages/graz/src/store/index.ts

@@ -1,7 +1,7 @@
 import type { ChainInfo, Keplr, Key } from "@keplr-wallet/types";
 import type { CapsuleProvider } from "@leapwallet/cosmos-social-login-capsule-provider";
 import type { ISignClient, SignClientTypes } from "@walletconnect/types";
-import type { Web3ModalConfig } from "@web3modal/standalone";
+import type { WalletConnectModalConfig } from "@walletconnect/modal";
 import { create } from "zustand";
 import type { PersistOptions } from "zustand/middleware";
 import { createJSONStorage } from "zustand/middleware";
@@ -20,7 +20,10 @@ export interface ChainConfig {
 }
 export interface WalletConnectStore {
   options: SignClientTypes.Options | null;
-  web3Modal?: Pick<Web3ModalConfig, "themeVariables" | "themeMode" | "privacyPolicyUrl" | "termsOfServiceUrl"> | null;
+  walletConnectModal?: Pick<
+    WalletConnectModalConfig,
+    "themeVariables" | "themeMode" | "privacyPolicyUrl" | "termsOfServiceUrl"
+  > | null;
 }
 
 export interface CapsuleConfig {
@@ -95,7 +98,7 @@ export const grazInternalDefaultValues: GrazInternalStore = {
   walletType: WalletType.KEPLR,
   walletConnect: {
     options: null,
-    web3Modal: null,
+    walletConnectModal: null,
   },
   walletDefaultOptions: null,
   _notFoundFn: () => null,