Ronin Modal
W3Vm

Ronin Modal

ℹ️

This guide explains how you can use Ronin Modal with W3Vm library, which supports Ethers.js, Viem and other web3 libraries.

Test on Saigon:


Installation

npm install @roninbuilders/modal @w3vm/react

Implementation

  1. Import the chain you want to use, you can select Ronin mainnet or Saigon testnet.
import { ronin, saigon, createRoninModal } from '@roninbuilders/modal'

  1. Get a free project ID from WalletConnect Cloud (opens in a new tab). This is used for mobile connection.

  2. Get a ClientId for Ronin Waypoint: Ronin Guide (opens in a new tab)

  3. Call the createRoninModal function on top of your application.

import { ronin, saigon, createRoninModal } from '@roninbuilders/modal'
 
createRoninModal({
	chain: saigon,
	projectId: 'WALLETCONNECT_PROJECT_ID',
	waypoint:{
		clientId: "RONIN_CLIENT_ID"
	}
})

Now you can call the web component button anywhere in your application. This web component doesn't require importing and its CSS style can be overwritten.

import { ronin, saigon, createRoninModal } from '@roninbuilders/modal'
 
createRoninModal({
	chain: saigon,
	projectId: 'WALLETCONNECT_PROJECT_ID',
	waypoint:{
		clientId: "RONIN_CLIENT_ID"
	}
})
 
export default function App(){
  return <ronin-button/>
}

Use W3Vm React hooks to get the wallet provider and address. These values are reactive and depend on the Ronin Modal state.

import { ronin, saigon, createRoninModal } from '@roninbuilders/modal'
import { getW3Address, getW3Provider } from '@w3vm/react'
 
createRoninModal({
	chain: saigon,
	projectId: 'WALLETCONNECT_PROJECT_ID',
	waypoint:{
		clientId: "RONIN_CLIENT_ID"
	}
})
 
export default function App() {
	const address = getW3Address()
	const provider = getW3Provider()
 
	console.log(address, provider)
 
  return <ronin-button/>
}

You can wrap the provider with any ethereum library such as Ethers (opens in a new tab), Viem (opens in a new tab) or Web3js (opens in a new tab).

React 19

import { RoninButton } from '@roninbuilders/modal/react'
 
 
export default function App(){
  return <RoninButton/>
}

Server Side Rendering

If you are using a meta-framework like Next.js with SSR, you can use the SSR flag to avoid hydration mismatch errors.

  1. Add the SSR param when calling createRoninModal
  2. This function will now return an object, we can call it w3props (or any name).
  3. Import the W3 component from W3Vm React and place it on top of your application.
import { saigon, createRoninModal } from '@roninbuilders/modal'
import { W3 } from '@w3vm/react'
 
const w3props = createRoninModal({
	chain: saigon,
	projectId: 'WALLETCONNECT_PROJECT_ID',
	waypoint:{
		clientId: "RONIN_CLIENT_ID"
	}
	SSR: true,
})
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <W3 {...w3props} /> { /* Required when SSR: true */ }
      <Component {...pageProps} />
    </>
  )
}

Learn more about W3Vm here (opens in a new tab).

Wagmi v2Theming