Ronin Modal
Wagmi v2

Ronin Modal

Ronin Modal is a framework agnostic UI library that simplifies the integration of the Ronin Wallet connection with websites.

Ronin Modal supports W3Vm and Wagmi v2 (opens in a new tab).

Test on Saigon:


Installation

npm install @roninbuilders/modal-wagmi
npm install wagmi viem @tanstack/react-query

Implementation

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

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

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

import { ronin, saigon } from 'viem/chains'
import { createRoninModal } from '@roninbuilders/modal-wagmi'
 
const config = createRoninModal({
  projectId:"WALLETCONNECT_PROJECT_ID",
  chain: saigon,
  metadata: { 
    name: 'My Website', 
    description: 'My website description', 
    url: 'https://mywebsite.com',
    icons: ['https://mywebsite.com/icon']
  },
})
  1. createRoninModal will return a Wagmi config object which we'll pass down to the Wagmi Provider
import { WagmiProvider } from 'wagmi'
import { ronin, saigon } from 'viem/chains'
import { createRoninModal } from '@roninbuilders/modal-wagmi'
 
const config = createRoninModal({
  projectId:"WALLETCONNECT_PROJECT_ID",
  chain: saigon,
  metadata: { 
    name: 'My Website', 
    description: 'My Website Description', 
    url: 'https://mywebsite.com',
    icons: []
  },
})
 
export default function App(){
	return (
		<WagmiProvider config={config}>
      {/*...*/}
    </WagmiProvider>
	)
}
  1. Add a React Query wrapper
import { WagmiProvider } from 'wagmi'
import { ronin, saigon } from 'viem/chains'
import { createRoninModal } from '@roninbuilders/modal-wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
 
const queryClient = new QueryClient()
 
export const config = createRoninModal({
  projectId:"WALLETCONNECT_PROJECT_ID",
  chain: saigon,
  metadata: { 
    name: 'Example', 
    description: 'Example website', 
    url: 'https://example.com',
    icons: []
  },
})
 
export default function App(){
	return (
		<WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/*...*/}
      </QueryClientProvider> 
    </WagmiProvider>
	)
}

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

<ronin-button/>

All Wagmi hooks and functions are supported. Learn more about Wagmi v2 here (opens in a new tab).

Getting StartedW3Vm