# Wallet Connect

the ME wallet works out of the box with the wallet connect [Appkit](https://docs.walletconnect.com/appkit/overview) / [Web3modal](https://github.com/WalletConnect/web3modal/tree/V2). Their documentation is extensive, so we will keep this short.

Here we'll walk through an example in React, but check out [their docs](https://docs.walletconnect.com/appkit/overview) for other compatible frameworks.

## Install Dependencies

```
npm install @web3modal/wagmi wagmi viem @tanstack/react-query
```

## Register your App

Head to <https://cloud.walletconnect.com/sign-in> to register your app. You'll need the project Id to complete your setup

## Implementation

The implementation steps make use of [Wagmi](https://wagmi.sh/), and the `defaultWagmiConfig` we can import from web3Modal. We can customize this to strictly make use of the ME wallet or any specific wallet, but the default config is good for our use case.

Here is a code example pulled from the Wallet Connect docs

```jsx
import { createWeb3Modal } from '@web3modal/wagmi/react'
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'

import { WagmiProvider } from 'wagmi'
import { arbitrum, mainnet } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// 0. Setup queryClient
const queryClient = new QueryClient()

// 1. Get projectId from https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'

// 2. Create wagmiConfig
const metadata = {
  name: 'Web3Modal',
  description: 'Web3Modal Example',
  url: 'https://web3modal.com', // origin must match your domain & subdomain
  icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const chains = [mainnet] as const
const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
})

// 3. Create modal
createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
  enableOnramp: true // Optional - false as default
})

export function Web3ModalProvider({ children }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}
```

## Opening the Modal

We can also make use of the out of the box `<w3m-button/>` directly from the web3Modal

```jsx
export default function ConnectButton() {
  return <w3m-button />
}
```

## Wrap the App in the Web3ModalProvider

Finally, wrap your app in the Web3ModalProvider you exported in the implementation phase

```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Web3ModalProvider } from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Web3ModalProvider>
      <App />
    </Web3ModalProvider>
  </React.StrictMode>
);
```

If all is configured correctly, you should have out of the box wallet connection functionality for the EVM that will look like this:

<figure><img src="/files/lNAghyWF7MThD5XZgHiX" alt=""><figcaption></figcaption></figure>

You'll notice that installed wallets automatically show up at the top of the modal. [EIP-6963](https://eip6963.org/) for the win.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-wallet.magiceden.io/evm/library-integrations/wallet-connect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.