pnpm add @roninbuilders/wagmi-adapter- Wagmi package and its peers:
pnpm add wagmi viem @tanstack/react-queryTo start with Wagmi we'll replace createConfig function with createRoninConfig. We can pass all the wagmi configuration options except for the connectors, additionally we need to add two
WalletConnect options: projectId and metadata.
You can get a project ID from WalletConnect Cloud
import { createRoninConfig } from "@roninbuilders/wagmi-adapter";
import { http } from "viem";
import { ronin, saigon } from "viem/chains";
import { cookieStorage, createStorage } from "wagmi";
import type { WalletConnectParameters } from "wagmi/connectors";
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID
if(!projectId) throw Error("Project ID is undefined - get a project ID from WalletConnect Cloud")
const metadata: WalletConnectParameters['metadata'] = {
name: 'My Website',
url: 'https://mywebsite.com',
}
export const config = createRoninConfig({
projectId,
metadata,
chains: [ronin, saigon],
transports: {
[ronin.id]: http(),
[saigon.id]: http(),
},
})The Wagmi adapter wraps the useConnect hook from Wagmi, you will need to use it to set up the configuration to connect with the Ronin extension wallet and the mobile app wallet:
Note
useRoninConnect is exported from @roninbuilders/wagmi-adapter/hooks
The useRoninConnect hook is an extension of the useConnect hook from Wagmi, so it will bypass most of the returns while overriding others
use the connectBrowser to request a connection to the extension wallet, you can also use isBrowser to know if the user has the extension wallet installed or not
'use client'
import { useRoninConnect } from '@roninbuilders/wagmi-adapter/hooks'
function ConnectBrowser() {
const { connectBrowser, error, isError } = useRoninConnect()
return (
<>
<button onClick={connectBrowser} >Connect Extension Wallet</button>
{isError && error?.message}
</>
)
}
export default ConnectBrowserThere are two ways to use the mobile wallet connector (WalletConnect v2 protocol), depending whether the user is on a Desktop or mobile environment.
- For Desktop:
- call
prepareMobilefunction to create a connection with the WalletConnect network, this will generate an URI - Once the URI is generated we can create a QR code with it
Here I'm using react-qr-code to generate the QR code from the URI, but you can use any other library.
'use client'
import { useRoninConnect } from "@roninbuilders/wagmi-adapter/hooks"
import QRCode from "react-qr-code"
function ConnectMobile() {
const { prepareMobile, uri, status } = useRoninConnect()
return (
<>
{ /* 1. call prepareMobile function to create a connection with the WalletConnect network, this will generate an URI */ }
<button onClick={prepareMobile}>generate URI</button>
{ /* 2. Once the URI is generated we can create a QR code with it */ }
{ uri ? <QRCode value={uri} bgColor='#141414' fgColor='#ffffff' /> : ( status === 'pending' ? 'Loading...' : 'generate an URI by pressing the "generate URI" button' )}
</>
)
}
export default ConnectMobile- For Mobile:
You can use the isMobile boolean to know if the user is on mobile or desktop.
- call
prepareMobilefunction to create a connection with the WalletConnect network, this will generate an URI - Once the URI is generated we open the Ronin wallet with its deeplink + the uri attached - all this is handled internally by the
openMobilefunction
'use client'
import { useRoninConnect } from "@roninbuilders/wagmi-adapter/hooks"
import QRCode from "react-qr-code"
function ConnectMobile() {
const { openMobile, isMobileReady, isMobile, prepareMobile, uri, status } = useRoninConnect()
//Mobile usage
if(isMobile){
return (
<>
{ /* 1. call prepareMobile function to create a connection with the WalletConnect network, this will generate an URI */ }
<button onClick={prepareMobile} >{ isMobileReady ? "Try again" : "prepare Mobile URI"}</button>
{ /* 2. Once the URI is generated we open the Ronin wallet with its deeplink + the uri attached - all this is handled internally by the openMobile function */ }
{isMobileReady && <button onClick={openMobile} >Connect Mobile Wallet</button>}
</>
)
}
//Desktop usage
return (
//...
)
}
export default ConnectMobile
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent