Wallet Connect

the ME wallet works out of the box with the wallet connect Appkit / Web3modal. Their documentation is extensive, so we will keep this short.

Here we'll walk through an example in React, but check out their docs 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, 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

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

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

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:

You'll notice that installed wallets automatically show up at the top of the modal. EIP-6963 for the win.