# 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.</Note>

<Frame>
  <video
    autoPlay
    controls
    className="w-full aspect-video"
    src="/images/appkit-core.mp4"
  ></video>
</Frame>

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

1. [**`@walletconnect/ethereum-provider`**](#ethereum-provider)
2. [**`@walletconnect/universal-provider`**](#universal-provider)
3. [**`@walletconnect/sign-client`**](#sign-client)
4. [**`@walletconnect/modal`**](#universal-provider)

<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](#universal-provider) to setup AppKit Core in your project.
</Note>

 **AppKit Core** is the most basic version of Reown AppKit which replaces WalletConnect Modal. Please refer to [this section](#setting-up-appkit-core-from-scratch) 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
</Note>

<CodeGroup>

```bash npm
npm install @reown/appkit
```

```bash Yarn
yarn add @reown/appkit
```

```bash Bun
bun add @reown/appkit
```

```bash pnpm
pnpm add @reown/appkit
```
</CodeGroup>

## 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 `themeVariables`will be compatible with the new UI, as `AppKit` uses a different design system than `walletConnectModal`
</Note>

### Examples

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

1. [**HTML**](https://github.com/reown-com/appkit/tree/main/examples/html-ep)
2. [**React**](https://github.com/reown-com/appkit/tree/main/examples/react-ep)
3. [**NextJS**](https://github.com/reown-com/appkit/tree/main/examples/next-ep-app-router)
4. [**Vue**](https://github.com/reown-com/appkit/tree/main/examples/vue-ep)

## Universal Provider

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

<CodeGroup>

```bash npm
npm uninstall @walletconnect/modal
```

```bash Yarn
yarn remove @walletconnect/modal
```

```bash Bun
bun remove @walletconnect/modal
```

```bash pnpm
pnpm remove @walletconnect/modal
```
</CodeGroup>

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

```javascript {9-11, 34-43}
// 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.

<AccordionGroup>
  <Accordion title="Polkadot">

```javascript
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: []
    }
  }
})

```
</Accordion>

<Accordion title="Cosmos">

```javascript
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: []
    }
  }
})

```
</Accordion>

<Accordion title="Others networks">

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

```bash npm
npm uninstall @reown/appkit-common
```


```javascript
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: []
    }
  }
})

```
</Accordion>

</AccordionGroup>

### Examples

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

1. [**HTML**](https://github.com/reown-com/appkit/tree/main/examples/html-ak-basic-up)
2. [**React**](https://github.com/reown-com/appkit/tree/main/examples/react-ak-basic-up)
3. [**NextJS**](https://github.com/reown-com/appkit/tree/main/examples/next-ak-basic-up-app-router)
4. [**Vue**](https://github.com/reown-com/appkit/tree/main/examples/vue-ak-basic-up)

## Sign Client

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

<CodeGroup>

```bash npm
npm uninstall @walletconnect/modal
```

```bash Yarn
yarn remove @walletconnect/modal
```

```bash Bun
bun remove @walletconnect/modal
```

```bash pnpm
pnpm remove @walletconnect/modal
```
</CodeGroup>

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

```javascript {6-8, 26-32}
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.

<AccordionGroup>
  <Accordion title="Polkadot">

```javascript
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: []
      }
    }
  })

...

```
</Accordion>

<Accordion title="Cosmos">

```javascript
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: []
      }
    }
  })

... 
```
</Accordion>

<Accordion title="Others networks">

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

```bash npm
npm uninstall @reown/appkit-common
```

```javascript
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: []
      }
    }
  })

... 
```
</Accordion>

</AccordionGroup>

### Examples

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

1. [HTML](https://github.com/reown-com/appkit/tree/main/examples/html-ak-basic-sign-client)
2. [React](https://github.com/reown-com/appkit/tree/main/examples/react-ak-basic-sign-client)
3. [NextJS](https://github.com/reown-com/appkit/tree/main/examples/next-ak-basic-sign-client-app-router)
4. [Vue](https://github.com/reown-com/appkit/tree/main/examples/vue-ak-basic-sign-client)

## 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](/appkit/react/core/multichain?platform=basic) to learn more.

### Examples

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

1. [HTML](https://github.com/reown-com/appkit/tree/main/examples/html-ak-basic)
2. [React](https://github.com/reown-com/appkit/tree/main/examples/react-ak-basic)
3. [NextJS](https://github.com/reown-com/appkit/tree/main/examples/next-ak-basic-app-router)
4. [Vue](https://github.com/reown-com/appkit/tree/main/examples/vue-ak-basic)