diff --git a/docs/pnp/migration-guides/modal-v6-to-v7.mdx b/docs/pnp/migration-guides/modal-v6-to-v7.mdx index 31ae5585f..86ac856d1 100644 --- a/docs/pnp/migration-guides/modal-v6-to-v7.mdx +++ b/docs/pnp/migration-guides/modal-v6-to-v7.mdx @@ -128,3 +128,19 @@ const accounts = await this.provider.request({ method: "xrpl_getAccounts", }); ``` + +### `wallet-connect-v2-adapter` requires different parameters + +#### With the deprecation of `@wallet-connect/qr-code-modal`, `wallet-connect-v2-adapter` now requires `@walletconnect/modal`. + +```tsx +import { WalletConnectModal } from "@walletconnect/modal"; +import { getWalletConnectV2Settings, WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter"; + +const defaultWcSettings = await getWalletConnectV2Settings("eip155", [1], "04309ed1007e77d1f119b85205bb779d"); +const walletConnectModal = new WalletConnectModal({ projectId: "04309ed1007e77d1f119b85205bb779d" }); +const walletConnectV2Adapter = new WalletConnectV2Adapter({ + adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings }, + loginSettings: { ...defaultWcSettings.loginSettings }, +}); +``` diff --git a/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx index e98f37ccd..64222f33c 100644 --- a/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx +++ b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx @@ -93,3 +93,19 @@ const accounts = await this.provider.request({ method: "xrpl_getAccounts", }); ``` + +### `wallet-connect-v2-adapter` requires different parameters + +#### With the deprecation of `@wallet-connect/qr-code-modal`, `wallet-connect-v2-adapter` now requires `@walletconnect/modal`. + +```tsx +import { WalletConnectModal } from "@walletconnect/modal"; +import { getWalletConnectV2Settings, WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter"; + +const defaultWcSettings = await getWalletConnectV2Settings("eip155", [1], "04309ed1007e77d1f119b85205bb779d"); +const walletConnectModal = new WalletConnectModal({ projectId: "04309ed1007e77d1f119b85205bb779d" }); +const walletConnectV2Adapter = new WalletConnectV2Adapter({ + adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings }, + loginSettings: { ...defaultWcSettings.loginSettings }, +}); +``` diff --git a/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx b/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx index d0bf591d8..1b950b983 100644 --- a/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx +++ b/docs/sdk/pnp/web/adapters/wallet-connect-v2.mdx @@ -12,7 +12,7 @@ import Tabs from "@theme/Tabs"; ## [`@web3auth/wallet-connect-v2-adapter`](https://npmjs.com/package/@web3auth/wallet-connect-v2-adapter) -Wallet connect v2 adapter allows you login with wallet connect v2. You can read more about wallet connect [here](https://docs.walletconnect.com/). +Wallet connect v2 adapter allows you to log in with wallet connect v2. You can read more about Walletconnect [here](https://docs.walletconnect.com/). ## Basic Details @@ -54,9 +54,11 @@ npm install --save @web3auth/wallet-connect-v2-adapter ```tsx -interface WalletConnectV2AdapterOptions { +interface WalletConnectV2AdapterOptions extends BaseAdapterSettings { adapterSettings?: IAdapterSettings; loginSettings?: EngineTypes.ConnectParams; +} +interface BaseAdapterSettings { clientId?: string; sessionTime?: number; chainConfig?: Partial & Pick; @@ -75,8 +77,8 @@ interface WalletConnectV2AdapterOptions { :::caution -While you can pass your `chainConfig` here, but it is not required since you can directly pass it over to the `Web3Auth`/ `Web3AuthNoModal` -configuration while instantiating it. +While you can pass your `chainConfig` here, it is not required since you can directly pass it over to the `Web3Auth`/ `Web3AuthNoModal` configuration +while instantiating it. Read more about it in their respective sections: @@ -101,15 +103,19 @@ interface IAdapterSettings { qrcodeModal?: IQRCodeModal; } -export interface IQRCodeModal { - open(uri: string, cb: any, opts?: any): void; - close(): void; +interface IQRCodeModal { + openModal: (options?: OpenOptions) => Promise; + closeModal: () => void; +} +interface OpenOptions { + uri: string; + chains?: string[]; } ``` ## getWalletConnectV2Settings -You can get walletConnectV2 settings by calling the `getWalletConnectV2Settings()` function with it's required arguments. +You can get walletConnectV2 settings by calling the `getWalletConnectV2Settings()` function with its required arguments. ### Arguments @@ -126,7 +132,7 @@ You can get walletConnectV2 settings by calling the `getWalletConnectV2Settings( | Parameter | type | | ----------- | ---------------------------------------------------------------------- | | `namespace` | `ChainNamespaceType`, e.g. (`eip155`) | -| `chainIds` | `number[]` e.g. [1, 5, 137] | +| `chainIds` | `number[]` e.g. [1] | | `projectID` | WalletConnect Project ID, get one from https://cloud.walletconnect.com | @@ -134,43 +140,18 @@ You can get walletConnectV2 settings by calling the `getWalletConnectV2Settings( ```tsx -export const getWalletConnectV2Settings = async ( +export declare const getWalletConnectV2Settings: ( namespace: ChainNamespaceType, chainIds: number[], projectID: string -): Promise<{ +) => Promise<{ adapterSettings: IAdapterSettings; loginSettings: EngineTypes.ConnectParams; -}> => { - if (namespace === CHAIN_NAMESPACES.EIP155) { - const appMetadata = await getSiteMetadata(); - const adapterSettings: IAdapterSettings = { - walletConnectInitOptions: { - projectId: projectID, - relayUrl: "wss://relay.walletconnect.com", - metadata: { - name: appMetadata.name, - description: appMetadata.name, - url: window.location.origin, - icons: [appMetadata.icon || ""], - }, - }, - }; - - const chainNamespaces = chainIds.map((chainId) => { - return `${namespace}:${chainId}`; - }); - - const loginSettings: EngineTypes.ConnectParams = { - requiredNamespaces: getRequiredNamespaces(chainNamespaces), - }; - return { - adapterSettings, - loginSettings, - }; - } - throw new Error(`Unsupported chain namespace: ${namespace}`); -}; +}>; +export interface IAdapterSettings { + walletConnectInitOptions?: SignClientTypes.Options; + qrcodeModal?: IQRCodeModal; +} ``` @@ -180,18 +161,14 @@ export const getWalletConnectV2Settings = async ( ## Example ```tsx -import { WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter"; import { WalletConnectModal } from "@walletconnect/modal"; +import { getWalletConnectV2Settings, WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter"; +const defaultWcSettings = await getWalletConnectV2Settings("eip155", [1], "04309ed1007e77d1f119b85205bb779d"); const walletConnectModal = new WalletConnectModal({ projectId: "04309ed1007e77d1f119b85205bb779d" }); const walletConnectV2Adapter = new WalletConnectV2Adapter({ - adapterSettings: { - qrcodeModal: walletConnectModal, - ...defaultWcSettings.adapterSettings, - }, - loginSettings: { - ...defaultWcSettings.loginSettings, - }, + adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings }, + loginSettings: { ...defaultWcSettings.loginSettings }, }); web3auth.configureAdapter(walletConnectV2Adapter);