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

# Migrate from Web3Modal v5 to Reown AppKit

# Upgrade Guide

Here, you can find the guides to help you upgrade from Web3Modal v3, v4 and v5 using Wagmi to the latest Reown AppKit.

* [Web3Modal v5 to Reown AppKit](#web3modal-v5-to-reown-appkit---web--wagmi)
* [Web3Modal v4 to Reown AppKit](#web3modal-v4-to-reown-appkit---web--wagmi)
* [Web3Modal v3 to Reown AppKit](#web3modal-v3-to-reown-appkit---web--wagmi)

## Web3Modal v5 to Reown AppKit - Web | Wagmi

This guide will help you upgrade from Web3Modal v5 using Wagmi to the latest Reown AppKit.

**Find here all the upgrades guides:**

* [To Reown Web AppKit using Solana](/appkit/upgrade/to-reown-appkit-solana-web).
* [To Reown Web AppKit using Ethers](/appkit/upgrade/to-reown-appkit-ethers-web).
* [To Reown Web AppKit using Ethers v5](/appkit/upgrade/to-reown-appkit-ethers5-web).

### Installation

<Tabs>
  <Tab title="React">
    To upgrade from Web3Modal v5 to Reown AppKit start by removing Web3Modal v5 dependencies `@web3modal/ethereum` and `@web3modal/react`. Now you can install AppKit library and update `Wagmi` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```
    </CodeGroup>
  </Tab>

  <Tab title="JavaScript">
    To upgrade from Web3Modal v5 to Reown AppKit start by removing Web3Modal v5 dependencies `@web3modal/ethereum` and `@web3modal/react`. Now you can install AppKit library and update `@wagmi/core` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi
      ```

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

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Vue">
    To upgrade from Web3Modal v5 to Reown AppKit start by removing Web3Modal v5 dependencies `@web3modal/ethereum`, `Wagmi` and `@web3modal/vue`. Now you can install AppKit library and update `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```
    </CodeGroup>
  </Tab>
</Tabs>

### Implementation

<Tabs>
  <Tab title="React">
    You can start the AppKit configuration by using either the **default** or **advanced** mode.

    Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public clients and [WalletConnect's provider](../../cloud/blockchain-api).

    <Info>
      Make sure to set your configuration outside React components to avoid unwanted rerenders.
    </Info>

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```tsx {6-9} theme={null}
    // Remove the following imports
    - import { createWeb3Modal } from '@web3modal/wagmi/react'
    - import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
    - import { arbitrum, mainnet } from 'viem/chains'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit/react'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {13-18} theme={null}
    const projectId = 'YOUR_PROJECT_ID'
    const queryClient = new QueryClient()

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    + const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Finally, pass `wagmiAdapter` and other parameters to `createAppKit`

    ```tsx {4-13, 21-22} theme={null}
    // Remove the following line
    - createWeb3Modal({ wagmiConfig, projectId, chains })

    // Add the following line
    + createAppKit({
     adapters: [wagmiAdapter],
     networks: [mainnet, arbitrum],
     metadata: metadata,
     projectId,
     features: {
       analytics: true,
     }
    })

    export default function App() {
      return (
        <>
        // Remove the following line
    -   <WagmiProvider config={wagmiConfig}>

        // Add the following line
    +   <WagmiProvider config={wagmiAdapter.wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            <HomePage />
          </QueryClientProvider>
        </WagmiProvider>
        </>
      )
    }
    ```
  </Tab>

  <Tab title="Vue">
    You can start the AppKit configuration by using either the **default** or **advanced** mode.

    Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public clients and [WalletConnect's provider](../../cloud/blockchain-api).

    <Info>
      Make sure to set your configuration outside React components to avoid unwanted rerenders.
    </Info>

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```tsx {7-10} theme={null}
    // Remove the following imports
    - import { createWeb3Modal } from "@web3modal/wagmi/vue";
    - import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
    - import { WagmiConfig } from "wagmi";
    - import { arbitrum, mainnet } from "viem/chains";

    // Add the following imports
    + import { createAppKit } from "@reown/appkit/vue";
    + import { arbitrum, mainnet } from "@reown/appkit/networks";
    + import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {12-17} theme={null}
    const projectId = 'YOUR_PROJECT_ID'

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    - const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Pass `wagmiAdapter` (optional) and other parameters to `createAppKit`

    ```tsx {4-13} theme={null}
    // Remove the following code line
    - createWeb3Modal({ wagmiConfig, projectId, chains })

    // Add the following code lines
    + const modal = createAppKit({
     adapters: [wagmiAdapter],
     networks: [mainnet, arbitrum],
     metadata: metadata,
     projectId,
     features: {
       analytics: true,
     }
    })
    ```

    Finally, you need to initialized Vue Query in the `main.ts`

    ```tsx {8-9, 12-13, 16-17} theme={null}
    // Remove the following code lines
    - import { createWeb3Modal } from "@web3modal/wagmi/vue";
    - import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
    - import { WagmiConfig } from "wagmi";
    - import { arbitrum, mainnet } from "viem/chains";

    import { createApp } from "vue";
    // Add the following import
    import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";

    import App from "./App.vue";
    // Add the following code line
    const queryClient = new QueryClient();

    createApp(App)
      // Add the following code line
      .use(VueQueryPlugin, { queryClient })
      .mount("#app");
    ```
  </Tab>

  <Tab title="JavaScript">
    Start by importing AppKit packages, then create wagmiAdapter using your own settings or the default presets as shown below. Finally, pass wagmiAdapter to AppKit as one of the adapters.

    Import `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```ts {6-9} theme={null}
    // Remove the following imports
    - import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
    - import { createConfig } from '@wagmi/core'
    - import { arbitrum, mainnet } from 'viem/chains'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {14-19} theme={null}
    const projectId = 'YOUR_PROJECT_ID'
    const queryClient = new QueryClient()

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    - const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Finally, pass `wagmiAdapter`(optional) and other parameters to `createAppKit`.

    ```ts {8-17} theme={null}
    // Remove the following code lines
    - const modal = createWeb3Modal({
      wagmiConfig,
      projectId,
      enableAnalytics: true
    })

    // Add the following code lines
    + const modal = createAppKit({
      adapters: [wagmiAdapter],
      networks: [mainnet, arbitrum],
      metadata: metadata,
      projectId,
      features: {
        analytics: true
      }
    })
    ```
  </Tab>
</Tabs>

### Trigger the modal

<Tabs>
  <Tab title="React">
    ```tsx {4-5} theme={null}
    // Remove the following import
    - import { useWeb3Modal } from '@web3modal/wagmi/react'

    // Add the following import
    + import { useAppKit } from '@reown/appkit/react'

    function HomePage() {
      const { open } = useAppKit()

      return <button onClick={open}>Connect</button>
    }
    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about Reown AppKit [here](../react/core/installation).
  </Tab>

  <Tab title="Vue">
    Use your own button with to open the modal.

    ```js theme={null}
    <template>
      <div>
        <button @click="openAppKit">Open</button>
      </div>
    </template>

      <script>
      import { useAppKit } from "@reown/appkit/vue";

      export default {
        name: "AppKitButton",
        setup() {
          const { open } = useAppKit();
          const openAppKit = () => open();

          return {
            openAppKit,
          };
        },
      };
      </script>

    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about integrating Reown AppKit with Vue [here](../vue/core/installation).
  </Tab>

  <Tab title="JavaScript">
    Use your own button with to open the modal.

    ```js theme={null}
    document.getElementById('my-button').addEventListener('click', () => {
        modal.open()
    })

    <button id="my-button">Connect Wallet</button>
    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about integrating Reown AppKit with JavaScript [here](../javascript/core/installation).
  </Tab>
</Tabs>

### Properties

As you may have noticed, some of the properties of Web3Modal have changed as a consequence of the migration to Reown AppKit.

#### adapters

The `adapters` property is a new property that is an array of adapters that can be initialized.

#### networks

The `chains` property is now `networks` in Reown AppKit. You should import them from `@reown/appkit/networks` package instead of importing these networks from `viem` or other packages.

#### defaultNetwork

The `defaultChain` property is now `defaultNetwork` in Reown AppKit. This is a network object that specifies the default network for your Web3 app.

### Utility Functions

The following methods are still available with the same nomenclature as before:

#### modal.getAddress()

This returns the connected address.

<Info>
  It returns the active namespace's address.

  **Example**: You’ve initialized both the Wagmi and Solana adapters and connected to a dApp with an EVM-only wallet (e.g., Rainbow). In this case, the Solana adapter is still not connected. When your active network is one of the EVM chains, the address will return your wallet address. However, if you manually switch to the Solana network, the address will return `undefined` (unless you connect to a Solana wallet).
</Info>

#### modal.getError()

This returns the error values.

#### modal.getChainId()

Returns the active network's `chainId`

<Info>
  In versions prior to v5, which were single-chain, `getChainId()` returned a single type rather than multiple types:

  * `@web3modal/wagmi` (along with ethers and ethers5) returned `number | undefined`.
  * `@web3modal/solana` returned `string | undefined`.

  Now, in Reown AppKit, since both chains can be connected simultaneously, the type definition is `number | string | undefined`.
</Info>

#### modal.switchNetwork(network)

This switches the active network to the different network being passed.

<Info>
  Unlike in v5, `modal.switchNetwork` takes the chain object as parameter rather than the chain id.

  * (v5) - switchNetwork(137) -> switches the chain to Polygon as we are passing Polygon's chain id.
  * (Reown AppKit v1) - switchNetwork(polygon) -> `polygon` is imported from `@reown/appkit/networks`.

  ```tsx {4-6} theme={null}
  // Remove the following code line
  - modal.switchNetwork(137);

  // Add the following code lines
  + import { polygon } from "@reown/appkit/networks";
  + modal.switchNetwork(polygon);
  ```
</Info>

#### modal.getIsConnected()

This returns if the selected network adapter is connected or not.

<Info>
  It returns the active namespace's connection status as a boolean.

  Example: You've initialized both the Wagmi and Solana adapters and connected to the dApp with an EVM-only wallet (e.g., Rainbow). In this case, the Solana adapter is still not connected. When you manually switch to the Solana network from the network selection list, you will see a disconnected state because the Solana adapter cannot use Rainbow's connection. As a result, it will prompt you to connect with a Solana wallet.
</Info>

#### modal.getWalletProvider()

This returns the active connection provider.

#### modal.getWalletProviderType()

This returns the active connection provider type.

#### modal.subscribeProvider(callback)

This is a listener that detects changes to the AppKit state, such as `address`, `chainId`, `isConnected`, `provider`, and `providerType`.

* `address` - It returns the connected wallet address. The value returned is the same as `modal.getAddress()`
* `chainId` - It returns the active network’s `chainId` . The value returned is the same as `modal.getChainId()`
* `isConnected` - It returns if the selected network adapter is connected. The value returned is the same as `modal.getIsConnected()`
* `provider` - It returns the active connection provider. The value returned is the same as `modal.getWalletProvider()`
* `providerType` - It returns the active connection provider type. The value returned is the same as `modal.getWalletProviderType()`

The following methods and listeners are exactly the same and do not have any specific details related to the multiple chains feature.

* `modal.getState` - it returns the modal state
  * `open` - it returns boolean that indicates if the modal is open or not
  * `selectedNetworkId` - it returns active network’s id
* `modal.subscribeState`
* `modal.setThemeMode`
* `modal.getThemeMode`
* `modal.setThemeVariables`
* `modal.getThemeVariables`
* `modal.subscribeTheme`
* `modal.getEvent`
* `modal.subscribeEvents`

## Web3Modal v4 to Reown AppKit - Web | Wagmi

### Installation

<Tabs>
  <Tab title="React">
    To upgrade from Web3Modal v4 to Reown AppKit start by removing Web3Modal v4 dependencies `@web3modal/wagmi`. Now you can install AppKit library and update `Wagmi` `@tanstack/react-query` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi
      ```

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

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi
      ```
    </CodeGroup>
  </Tab>

  <Tab title="JavaScript">
    To upgrade from Web3Modal v4 to Reown AppKit start by removing Web3Modal v4 dependencies `@web3modal/wagmi`. Now you can install AppKit library and update `@wagmi/core`, `@wagmi/connectors` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi
      ```

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

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Vue">
    To upgrade from Web3Modal v4 to Reown AppKit start by removing Web3Modal v4 dependencies `@web3modal/ethereum` and `@web3modal/vue`. Now you can install AppKit library and update `Wagmi` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```
    </CodeGroup>
  </Tab>
</Tabs>

### Implementation

<Tabs>
  <Tab title="React">
    You can start the AppKit configuration by using either the **default** or **advanced** mode.

    Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public clients and [WalletConnect's provider](../../cloud/blockchain-api).

    <Info>
      Make sure to set your configuration outside React components to avoid unwanted rerenders.
    </Info>

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```tsx {5-10} theme={null}
    // Remove the following imports
    - import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
    - import { WagmiConfig } from 'wagmi'
    - import { arbitrum, mainnet } from 'wagmi/chains'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit/react'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    + import { WagmiProvider } from 'wagmi'

    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {14-18} theme={null}
    const projectId = 'YOUR_PROJECT_ID'
    const queryClient = new QueryClient()

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    - const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Finally, pass `wagmiAdapter` (optional) and other parameters to `createAppKit`

    ```tsx {4-13, 21-22, 29-30} theme={null}
    // Remove the following code line
    - createWeb3Modal({ wagmiConfig, projectId, chains })

    // Add the following code lines
    + createAppKit({
     adapters: [wagmiAdapter],
     networks: [mainnet, arbitrum],
     metadata: metadata,
     projectId,
     features: {
       analytics: true,
     }
    })

    export default function App() {
      return (
        <>
        // Remove the following code line
    -   <WagmiConfig config={wagmiConfig}>

        // Add the following code line
    +   <WagmiProvider config={wagmiAdapter.wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <HomePage />
        </QueryClientProvider>
        // Remove the following code line
    -   <WagmiConfig />

        // Add the following code line
    +   </WagmiProvider>
        </>
      )
    }
    ```
  </Tab>

  <Tab title="Vue">
    You can start the AppKit configuration by using either the **default** or **advanced** mode.

    Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public clients and [WalletConnect's provider](../../cloud/blockchain-api).

    <Info>
      Make sure to set your configuration outside React components to avoid unwanted rerenders.
    </Info>

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```tsx {5-10} theme={null}
    // Remove the following imports
    - import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/vue'
    - import { WagmiConfig } from 'wagmi'
    - import { arbitrum, mainnet } from 'wagmi/chains'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit/vue'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    + import { WagmiPlugin } from '@wagmi/vue';
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {12-17} theme={null}
    const projectId = 'YOUR_PROJECT_ID'

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    - const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Pass `wagmiAdapter` (optional) and other parameters to `createAppKit`

    ```tsx {4-13, 18-19, 21-22} theme={null}
    // Remove the following code line
    - createWeb3Modal({ wagmiConfig, projectId, chains })

    // Add the following code lines
    + const modal = createAppKit({
     adapters: [wagmiAdapter],
     networks: [mainnet, arbitrum],
     metadata: metadata,
     projectId,
     features: {
       analytics: true,
     }
    })

    export default function App() {
      return (
        <>
        // Add the following code line
    +   <WagmiPlugin config="{{ wagmiAdapter.wagmiConfig }}">
          <HomePage />
        // Add the following code line
    +   </WagmiPlugin>
        </>
      )
    }
    ```

    Finally, you need to initialized Vue Query in the `main.ts`

    ```tsx {4-6, 8-9, 12-13} theme={null}
    // Remove the following import
    import { createApp } from "vue";

    // Add the following imports
    + import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
    + import App from "./App.vue";

    // Add the following code line
    + const queryClient = new QueryClient();

    createApp(App)
      // Add the following code line
      .use(VueQueryPlugin, { queryClient })
      .mount("#app");
    ```
  </Tab>

  <Tab title="JavaScript">
    Start by importing AppKit packages, then create wagmiAdapter using your own settings or the default presets as shown below. Finally, pass wagmiAdapter to AppKit as one of the adapters.

    Import `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```ts {6-9} theme={null}
    // Remove the following imports
    - import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi'
    - import { createConfig } from '@wagmi/core'
    - import { mainnet, arbitrum } from '@wagmi/core/chains'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {14-18} theme={null}
    const projectId = 'YOUR_PROJECT_ID'
    const queryClient = new QueryClient()

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    - const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Finally, pass `wagmiAdapter`(optional) and other parameters to `createAppKit`.

    ```ts {8-17} theme={null}
    // Remove the following code lines
    - const modal = createWeb3Modal({
      wagmiConfig,
      projectId,
      chains
    })

    // Add the following code lines
    + const modal = createAppKit({
      adapters: [wagmiAdapter],
      networks: [mainnet, arbitrum],
      metadata: metadata,
      projectId,
      features: {
        analytics: true
      }
    })
    ```
  </Tab>
</Tabs>

### Trigger the modal

<Tabs>
  <Tab title="React">
    ```tsx {4-5} theme={null}
    // Remove the following import
    - import { useWeb3Modal } from '@web3modal/wagmi/react'

    // Add the following import
    + import { useAppKit } from '@reown/appkit/react'

    function HomePage() {
      const { open } = useAppKit()
      return <button onClick={open}>Connect</button>
    }
    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about Reown AppKit [here](../react/core/installation).
  </Tab>

  <Tab title="Vue">
    Use your own button with to open the modal.

    ```js theme={null}
    <template>
      <div>
        <button @click="openAppKit">Open</button>
      </div>
    </template>

      <script>
      import { useAppKit } from "@reown/appkit/vue";

      export default {
        name: "AppKitButton",
        setup() {
          const { open } = useAppKit();
          const openAppKit = () => open();

          return {
            openAppKit,
          };
        },
      };
      </script>

    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about integrating Reown AppKit with Vue [here](../vue/core/installation).
  </Tab>

  <Tab title="JavaScript">
    Use your own button with to open the modal.

    ```js theme={null}
    document.getElementById('my-button').addEventListener('click', () => {
        modal.open()
    })

    <button id="my-button">Connect Wallet</button>
    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about integrating Reown AppKit with JavaScript [here](../javascript/core/installation).
  </Tab>
</Tabs>

## Web3Modal v3 to Reown AppKit - Web | Wagmi

### Installation

<Tabs>
  <Tab title="React">
    To upgrade from Web3Modal v3 to Reown AppKit start by removing Web3Modal v3 dependencies `@web3modal/wagmi`. Now you can install AppKit library and update `Wagmi` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query
      ```
    </CodeGroup>
  </Tab>

  <Tab title="JavaScript">
    To upgrade from Web3Modal v3 to Reown AppKit start by removing Web3Modal v5 dependencies `@web3modal/ethereum` and `@web3modal/react`. Now you can install AppKit library and update `@wagmi/core` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi
      ```

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

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Vue">
    To upgrade from Web3Modal v3 to Reown AppKit start by removing Web3Modal v5 dependencies `@web3modal/ethereum` and `@web3modal/vue`. Now you can install AppKit library and update `Wagmi` and `Viem`.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue
      ```
    </CodeGroup>
  </Tab>
</Tabs>

### Implementation

<Tabs>
  <Tab title="React">
    You can start the AppKit configuration by using either the **default** or **advanced** mode.

    Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public clients and [WalletConnect's provider](../../cloud/blockchain-api).

    <Info>
      Make sure to set your configuration outside React components to avoid unwanted rerenders.
    </Info>

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```tsx {6-10} theme={null}
    // Remove the following imports
    - import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
    - import { arbitrum, mainnet } from 'wagmi/chains'
    - import { WagmiConfig } from 'wagmi'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit/react'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    + import { WagmiProvider } from 'wagmi'

    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {14-18} theme={null}
    const projectId = 'YOUR_PROJECT_ID'
    const queryClient = new QueryClient()

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    + const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Finally, pass `wagmiAdapter` (optional) and other parameters to `createAppKit`

    ```tsx {4-13, 21-22, 30-31} theme={null}
    // Remove the following code line
    - createWeb3Modal({ wagmiConfig, projectId, chains })

    // Add the following code lines
    + createAppKit({
     adapters: [wagmiAdapter],
     networks: [mainnet, arbitrum],
     metadata: metadata,
     projectId,
     features: {
       analytics: true,
     }
    })

    export default function App() {
      return (
        <>
        // Remove the following code line
    -   <WagmiConfig config={wagmiConfig}>

        // Add the following code line
    +   <WagmiProvider config={wagmiAdapter.wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <HomePage />
        </QueryClientProvider>

        // Remove the following code line
    -   </WagmiConfig>

        // Add the following code line
    +   </WagmiProvider>
        </>
      )
    }
    ```
  </Tab>

  <Tab title="Vue">
    You can start the AppKit configuration by using either the **default** or **advanced** mode.

    Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public clients and [WalletConnect's provider](../../cloud/blockchain-api).

    <Info>
      Make sure to set your configuration outside React components to avoid unwanted rerenders.
    </Info>

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```tsx {6-9} theme={null}
    // Remove the following imports
    - import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/vue'
    - import { WagmiConfig } from 'wagmi'
    - import { arbitrum, mainnet } from 'wagmi/chains'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit/vue'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {13-17} theme={null}
    const projectId = 'YOUR_PROJECT_ID'

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    - const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Pass `wagmiAdapter` (optional) and other parameters to `createAppKit`

    ```tsx {4-13, 18-19, 21-22} theme={null}
    // Remove the following code line
    - createWeb3Modal({ wagmiConfig, projectId, chains })

    // Add the following code lines
    + const modal = createAppKit({
     adapters: [wagmiAdapter],
     networks: [mainnet, arbitrum],
     metadata: metadata,
     projectId,
     features: {
       analytics: true,
     }
    })

    export default function App() {
      return (
        <>
        // Add the following code line
    +   <WagmiPlugin config="{{ wagmiAdapter.wagmiConfig }}">
          <HomePage />
        // Add the following code line
    +   </WagmiPlugin>
        </>
      )
    }
    ```

    Finally, you need to initialized Vue Query in the `main.ts`

    ```tsx {3-4, 7-8, 11-12} theme={null}
    import { createApp } from "vue";

    // Add the following imports
    import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
    import App from "./App.vue";

    // Add the following code line
    const queryClient = new QueryClient();

    createApp(App)
      // Add the following code line
      .use(VueQueryPlugin, { queryClient })
      .mount("#app");
    ```
  </Tab>

  <Tab title="JavaScript">
    Start by importing AppKit packages, then create wagmiAdapter using your own settings or the default presets as shown below. Finally, pass wagmiAdapter to AppKit as one of the adapters.

    Import `createAppKit` from `@reown/appkit` and the necessary chains from `@reown/appkit/networks`

    ```ts {6-9} theme={null}
    // Remove the following imports
    - import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi'
    - import { createConfig } from '@wagmi/core'
    - import { mainnet, arbitrum } from '@wagmi/core/chains'

    // Add the following imports
    + import { createAppKit } from '@reown/appkit'
    + import { arbitrum, mainnet } from '@reown/appkit/networks'
    + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    ```

    Then create `wagmiAdapter` using `WagmiAdapter` function as shown below

    ```tsx {14-19} theme={null}
    const projectId = 'YOUR_PROJECT_ID'
    const queryClient = new QueryClient()

    const metadata = { //optional
        name: 'AppKit',
        description: 'AppKit Example',
        url: 'https://example.com',
        icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Remove the existing Wagmi Config
    - const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

    // Create the Wagmi adapter
    + const wagmiAdapter = new WagmiAdapter({
      networks: [mainnet, arbitrum],
      projectId
    })
    ```

    Finally, pass `wagmiAdapter`(optional) and other parameters to `createAppKit`.

    ```ts {8-17} theme={null}
    // Remove the following code lines
    - const modal = createWeb3Modal({
      wagmiConfig,
      projectId,
      chains
    })

    // Add the following code lines
    + const modal = createAppKit({
      adapters: [wagmiAdapter],
      networks: [mainnet, arbitrum],
      metadata: metadata,
      projectId,
      features: {
        analytics: true
      }
    })
    ```
  </Tab>
</Tabs>

### Trigger the modal

<Tabs>
  <Tab title="React">
    ```tsx {4-5} theme={null}
    // Remove the following import
    - import { useWeb3Modal } from '@web3modal/wagmi/react'

    // Add the following import
    + import { useAppKit } from '@reown/appkit/react'

    function HomePage() {
      const { open } = useAppKit()

      return <button onClick={open}>Connect</button>
    }
    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about Reown AppKit [here](../react/core/installation).
  </Tab>

  <Tab title="Vue">
    Use your own button with to open the modal.

    ```js theme={null}
    <template>
      <div>
        <button @click="openAppKit">Open</button>
      </div>
    </template>

      <script>
      import { useAppKit } from "@reown/appkit/vue";

      export default {
        name: "AppKitButton",
        setup() {
          const { open } = useAppKit();
          const openAppKit = () => open();

          return {
            openAppKit,
          };
        },
      };
      </script>

    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about integrating Reown AppKit with Vue [here](../vue/core/installation).
  </Tab>

  <Tab title="JavaScript">
    Use your own button with to open the modal.

    ```js theme={null}
    document.getElementById('my-button').addEventListener('click', () => {
        modal.open()
    })

    <button id="my-button">Connect Wallet</button>
    ```

    **You can also use a web component to trigger the modal.** You can simply use `<appkit-button />`.

    Learn more about integrating Reown AppKit with JavaScript [here](../javascript/core/installation).
  </Tab>
</Tabs>