> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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="https://mintcdn.com/reown-5552f0bb/mrXva7Pfcna94qcp/images/appkit-core.mp4?fit=max&auto=format&n=mrXva7Pfcna94qcp&q=85&s=d20e8d66838ce21596a20d9536606112" data-path="images/appkit-core.mp4" />
</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 theme={null}
  npm install @reown/appkit
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit
  ```

  ```bash Bun theme={null}
  bun add @reown/appkit
  ```

  ```bash pnpm theme={null}
  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 theme={null}
  npm uninstall @walletconnect/modal
  ```

  ```bash Yarn theme={null}
  yarn remove @walletconnect/modal
  ```

  ```bash Bun theme={null}
  bun remove @walletconnect/modal
  ```

  ```bash pnpm theme={null}
  pnpm remove @walletconnect/modal
  ```
</CodeGroup>

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

```javascript {9-11, 34-43} theme={null}
// 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 theme={null}
    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 theme={null}
    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 theme={null}
    npm uninstall @reown/appkit-common
    ```

    ```javascript theme={null}
    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 theme={null}
  npm uninstall @walletconnect/modal
  ```

  ```bash Yarn theme={null}
  yarn remove @walletconnect/modal
  ```

  ```bash Bun theme={null}
  bun remove @walletconnect/modal
  ```

  ```bash pnpm theme={null}
  pnpm remove @walletconnect/modal
  ```
</CodeGroup>

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

```javascript {6-8, 26-32} theme={null}
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 theme={null}
    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 theme={null}
    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 theme={null}
    npm uninstall @reown/appkit-common
    ```

    ```javascript theme={null}
    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)