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.

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

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.

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

npm install @reown/appkit

yarn add @reown/appkit

bun add @reown/appkit

pnpm add @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.

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

yarn remove @walletconnect/modal

bun remove @walletconnect/modal

pnpm remove @walletconnect/modal

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

// Remove the code lines below the comment that says "Remove the code line below"
// Add the code lines in green

import { UniversalProvider } from '@walletconnect/universal-provider'

// Remove the code line below
import { WalletConnectModal } from '@walletconnect/modal'

// Add the code lines below
import { 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 below
const modal = new WalletConnectModal({
  projectId: 'YOUR_PROJECT_ID',
  chains: ['eip155:1', 'solana:mainnet']
})

// listen to display_uri event and feed modal with uri
provider.on('display_uri', (uri: string) => {
  modal.openModal({ uri })
})

// Add the code lines below
const 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 event
await 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

yarn remove @walletconnect/modal

bun remove @walletconnect/modal

pnpm remove @walletconnect/modal

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

import { SignClient } from '@walletconnect/sign-client'

// Remove the code line below
import { WalletConnectModal } from '@walletconnect/modal'

// Add the code lines below
import { 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 below
const modal = new WalletConnectModal({
  projectId: 'YOUR_PROJECT_ID',
  chains: ['eip155:1']
})

// Add the code lines below
const modal = createAppKit({
  projectId: 'YOUR_PROJECT_ID',
  networks: [mainnet],
  manualWCControl: true
})

// connect signClient and feed uri to modal
const { 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 modal
const { 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 modal
const { 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 modal
const { 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.

​Installation

​Ethereum Provider

​Examples

​Universal Provider

​How to use a Custom Network

​Examples

​Sign Client

​How to use a Custom Network

​Examples

​Setting up AppKit Core from scratch

​Examples

Installation

Ethereum Provider

Examples

Universal Provider

How to use a Custom Network

Examples

Sign Client

How to use a Custom Network

Examples

Setting up AppKit Core from scratch

Examples