WalletConnect Modal to Reown AppKit Core

Reown AppKit Core is the upgraded version of WalletConnect Modal. It provides a user-friendly experience while maintaining the familiar QR code functionality for wallet connections. AppKit Core is the base version of Reown AppKit that includes the traditional WalletConnect Modal with QR code functionality.

Note

This is a preview version of Reown AppKit Core.

Please, follow the different sections based on which package you were using before.

@walletconnect/ethereum-provider
@walletconnect/universal-provider
@walletconnect/sign-client
@walletconnect/modal

Note

If your project has @walletconnect/modal in the package.json or your project files, you need to remove it and uninstall it. After that, you can refer to the Universal Provider path to setup AppKit Core in your project.

AppKit Core is the most basic version of Reown AppKit which replaces WalletConnect Modal. Please refer to this section if you are starting from scratch.

Installation#

You first need to install the AppKit package in order to get started. You can do this by running the command below.

Note

Make sure to use a version equal or greater than v1.7.0

npm install @reown/appkit

Ethereum Provider#

The Ethereum Provider implementation remains the same as before. Projects and developers don't need to change anything in their configuration; upgrading the Ethereum Provider to latest version is sufficient. Projects will automatically receive the new QR modal UI.

Note

Not all themeVariableswill be compatible with the new UI, as AppKit uses a different design system than walletConnectModal

Examples#

Below are the examples for the corresponding library/programming language.

Universal Provider#

First, please uninstall the @walletconnect/modal package. You should also remove @walletconnect/modal from your package.json file.

npm uninstall @walletconnect/modal

Then, you can use the following code to configure AppKit with UniversalProvider.

{9-11, 34-43}

// Remove the code lines below the comment that says "Remove the code line below"// Add the code lines in greenimport { UniversalProvider } from '@walletconnect/universal-provider'// Remove the code line belowimport { WalletConnectModal } from '@walletconnect/modal'// Add the code lines belowimport { mainnet, solana } from '@reown/appkit/networks'import { createAppKit } from '@reown/appkit/core'const provider = await UniversalProvider.init({  projectId: 'YOUR_PROJECT_ID',  metadata: {    name: 'My Website',    description: 'My Website Description',    url: 'https://mywebsite.com', // origin must match your domain & subdomain    icons: ['https://avatars.githubusercontent.com/u/37784886']  },})// Remove the code lines belowconst modal = new WalletConnectModal({  projectId: 'YOUR_PROJECT_ID',  chains: ['eip155:1', 'solana:mainnet']})// listen to display_uri event and feed modal with uriprovider.on('display_uri', (uri: string) => {  modal.openModal({ uri })})// Add the code lines belowconst modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [mainnet, solana],  universalProvider: provider,  manualWCControl: true})// A spinner will be showing until it's connected.modal.open()// Connect provider, this will trigger display_uri eventawait provider.connect({  optionalNamespaces: {    eip155: {      methods: [        'eth_sendTransaction',        'eth_signTransaction',        'eth_sign',        'personal_sign',        'eth_signTypedData'      ],      chains: ['eip155:1'],      events: ['chainChanged', 'accountsChanged']    },    solana: {      methods: ['solana_signMessage', 'solana_signTransaction'],      chains: ['solana:mainnet'],      events: ['chainChanged', 'accountsChanged']    }  }})

How to use a Custom Network#

WalletConnect Modal has always been chain agnostic. AppKit Core is chain agnostic as well. Hence, you can configure custom networks like Polkadot, Cosmos, etc., using AppKit Core.

Polkadot

import { defineChain } from '@reown/appkit/networks'...const polkadot = defineChain({  id: '91b171bb158e2d3848fa23a9f1c25182',  name: 'Polkadot',  nativeCurrency: { name: 'Polkadot', symbol: 'DOT', decimals: 10 },  rpcUrls: {    default: { http: ['https://rpc.polkadot.io'], wss: 'wss://rpc.polkadot.io' }  },  blockExplorers: { default: { name: 'Polkadot Explorer', url: 'https://polkadot.js.org/apps/' } },  chainNamespace: 'polkadot',  caipNetworkId: 'polkadot:91b171bb158e2d3848fa23a9f1c25182'})...const modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [polkadot],  universalProvider: provider,  manualWCControl: true})await provider.connect({  optionalNamespaces: {    polkadot: {      methods: ['polkadot_signMessage', 'polkadot_signTransaction'],      chains: [polkadot.caipNetworkId],      events: []    }  }})

Cosmos

import { defineChain } from '@reown/appkit/networks'...const cosmos = defineChain({  id: 'cosmoshub-3',  name: 'Cosmos',  nativeCurrency: { name: 'Cosmos', symbol: 'ATOM', decimals: 6 },  rpcUrls: {    default: { http: ['https://cosmos-rpc.publicnode.com:443'] }  },  blockExplorers: { default: { name: 'Mint Scan', url: 'https://www.mintscan.io/cosmos' } },  testnet: false,  chainNamespace: 'cosmos',  caipNetworkId: 'cosmos:cosmoshub-4'})...const modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [cosmos],  universalProvider: provider,  manualWCControl: true})await provider.connect({  optionalNamespaces: {    cosmos: {      methods: ['cosmos_signDirect'],      chains: [cosmos.caipNetworkId],      events: []    }  }})

Others networks

Install this library with the same version as the other @reown packages.

npm

npm uninstall @reown/appkit-common

import type { InferredCaipNetwork } from '@reown/appkit-common'import { defineChain } from '@reown/appkit/networks'...const sui: InferredCaipNetwork = {  id: 784,  chainNamespace: 'sui' as const,  caipNetworkId: 'sui:mainnet',  name: 'Sui',  nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },  rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }}...const modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [sui],  universalProvider: provider as any,  manualWCControl: true,  features: {        analytics: true // Optional - defaults to your Cloud configuration  }})await provider.connect({  optionalNamespaces: {    sui: {      methods: ['sui_signPersonalMessage'],      chains: [sui.caipNetworkId],      events: []    }  }})

Examples#

Below are the examples for the corresponding library/programming language.

Sign Client#

First, please uninstall the @walletconnect/modal package. You should also remove @walletconnect/modal from your package.json file.

npm uninstall @walletconnect/modal

Then, you can use the following code to configure AppKit with SignClient.

{6-8, 26-32}

import { SignClient } from '@walletconnect/sign-client'// Remove the code line belowimport { WalletConnectModal } from '@walletconnect/modal'// Add the code lines belowimport { mainnet } from '@reown/appkit/networks'import { createAppKit } from '@reown/appkit/core'const signClient = await SignClient.init({  projectId: 'YOUR_PROJECT_ID',  metadata: {    name: 'My Website',    description: 'My Website Description',    url: 'https://mywebsite.com', // origin must match your domain & subdomain    icons: ['https://avatars.githubusercontent.com/u/37784886']  },})// Remove the code lines belowconst modal = new WalletConnectModal({  projectId: 'YOUR_PROJECT_ID',  chains: ['eip155:1']})// Add the code lines belowconst modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [mainnet],  manualWCControl: true})// connect signClient and feed uri to modalconst { uri, approval } = await signClient.connect({    requiredNamespaces: {      eip155: {        methods: [          'eth_sendTransaction',          'eth_signTransaction',          'eth_sign',          'personal_sign',          'eth_signTypedData'        ],        chains: ['eip155:1'],        events: ['chainChanged', 'accountsChanged']      }    }  })  if (uri) {    modal.openModal({ uri })    const session = await approval()    modal.closeModal()  }

How to use a Custom Network#

WalletConnect Modal has always been chain agnostic. AppKit Core is chain agnostic as well. Hence, you can configure custom networks like Polkadot, Cosmos, etc., using AppKit Core.

Polkadot

import { defineChain } from '@reown/appkit/networks'...const polkadot = defineChain({  id: '91b171bb158e2d3848fa23a9f1c25182',  name: 'Polkadot',  nativeCurrency: { name: 'Polkadot', symbol: 'DOT', decimals: 10 },  rpcUrls: {    default: { http: ['https://rpc.polkadot.io'], wss: 'wss://rpc.polkadot.io' }  },  blockExplorers: { default: { name: 'Polkadot Explorer', url: 'https://polkadot.js.org/apps/' } },  chainNamespace: 'polkadot',  caipNetworkId: 'polkadot:91b171bb158e2d3848fa23a9f1c25182'})...const modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [polkadot],  manualWCControl: true})// connect signClient and feed uri to modalconst { uri, approval } = await signClient.connect({    requiredNamespaces: {      eip155: {        methods: ['polkadot_signMessage', 'polkadot_signTransaction'],        chains: [polkadot.caipNetworkId],        events: []      }    }  })...

Cosmos

import { defineChain } from '@reown/appkit/networks'...const cosmos = defineChain({  id: 'cosmoshub-3',  name: 'Cosmos',  nativeCurrency: { name: 'Cosmos', symbol: 'ATOM', decimals: 6 },  rpcUrls: {    default: { http: ['https://cosmos-rpc.publicnode.com:443'] }  },  blockExplorers: { default: { name: 'Mint Scan', url: 'https://www.mintscan.io/cosmos' } },  testnet: false,  chainNamespace: 'cosmos',  caipNetworkId: 'cosmos:cosmoshub-4'})...const modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [cosmos],  manualWCControl: true})// connect signClient and feed uri to modalconst { uri, approval } = await signClient.connect({    requiredNamespaces: {      cosmos: {        methods: ['cosmos_signDirect'],        chains: [cosmos.caipNetworkId],        events: []      }    }  })...

Others networks

Install this library with the same version as the other @reown packages.

npm

npm uninstall @reown/appkit-common

import type { InferredCaipNetwork } from '@reown/appkit-common'...const sui: InferredCaipNetwork = {  id: 784,  chainNamespace: 'sui' as const,  caipNetworkId: 'sui:mainnet',  name: 'Sui',  nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },  rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }}...const modal = createAppKit({  projectId: 'YOUR_PROJECT_ID',  networks: [sui],  manualWCControl: true,  features: {        analytics: true // Optional - defaults to your Cloud configuration  }})// connect signClient and feed uri to modalconst { uri, approval } = await signClient.connect({    requiredNamespaces: {      sui: {        methods: ['sui_signPersonalMessage'],        chains: [sui.caipNetworkId],        events: []      }    }  })...

Examples#

Below are the examples for the corresponding library/programming language.

Setting up AppKit Core from scratch#

If you are setting up AppKit Core from scratch, you can refer to the "Multichain" section under AppKit "Core" for installation which shows a basic installation of AppKit Core. Click here to learn more.

Examples#

Below are the examples for the corresponding library/programming language.