React
Initialize W3

Initialize W3

W3 Properties

To initialize W3 we call the initW3 function.

initW3 must be called outside the root component to avoid unwanted rerenders.

import { W3, initW3, Injected } from '@w3vm/react'
import { WalletConnect } from '@w3vm/walletconnect'
 
import walletconnect from 'public/walletconnect.svg'
import wallet from 'public/wallet.png'
 
/* WalletConnect Project Id */
const projectId = 'YOUR_PROJECT_ID'
 
initW3({
  connectors: [
    new Injected({ icon: wallet }),
    new WalletConnect({ 
      projectId,
      icon: walletconnect,
      showQrModal: true,
      optionalChains:[1, 137]
    })
  ],
  defaultChain: 1, // Optional
  SSR: true // Optional
})

Lest break it down...

Connectors

Connectors are classes that instantiate a type of communication protocol between a website and a wallet. There are three main connectors: Injected, EIP6963 and WalletConnect (external).

Injected Connector

Injected connector class doesn't require any parameters but you can:

  • Pass an icon to use it later on.
  • Pass a name to display on the UI.
  • Pass an id, useful if you would like to use the Injected connector multiple times to target different extension wallet.
  • Pass a getProvider function.
import { W3, Injected, initW3 } from '@w3vm/react'
 
function getProvider(){
  return window.ethereum
}
 
const browserWallet = new Injected({ 
 name: 'Browser Wallet',
 id: 'browserWallet',
 getProvider,
 icon: '/icons/browser-wallet.svg'
})
 
initW3({
  connectors: [browserWallet],
  //...
})

WalletConnect Connector

Aside from the icon, WalletConnect params are the same as the ethereum-provider's (opens in a new tab).

import { W3, WalletConnect, initW3 } from '@w3vm/react'
 
const projectId = env.process.PROJECT_ID as string
 
const walletConnect = new WalletConnect({ 
  icon: '/icons/walletconnect.svg',
  projectId,
  optionalChains:[1,137]
  showQrModal: true,
  qrModalOptions: {
    themeMode: 'light'
  },
})
 
initW3({
  connectors: [walletConnect],
  //...
})

optionalChains is recommended for multi-chain apps. (compatible with Smart Contract Wallets)

URI
If you'd like to handle the modal on your own you can listen to the uri with

import { subWC } from '@w3vm/walletconnect'
 
function handler(uri: string){
  //handle uri
}
 
const unsubscribe = subWC.uri(handler)

The uri is the value you can use to create your own QR code.

defaultChain

When adding a default chain or if a chain is passed down to the connectW3 function then W3 will request the user to switch to that chain first before connecting, if the user doesn't have the chain added then W3 with request to add it (this last step will only happen if the chain passed is EIP-3085 compliant).

You can either pass a chain ID of type number:

initW3({
  //...
  defaultChain: 1,
  //...
})

or a chain object following EIP-3085 (opens in a new tab)

import { Chain } from "@w3vm/react";
 
export const mainnet: Chain = {
  chainName: 'Ethereum Mainnet',
  chainId: '0x1',
  nativeCurrency:{
    name: 'ETH',
    symbol: 'ETH',
    decimals: 18,
  },
  rpcUrls:['https://eth.llamarpc.com'],
  blockExplorerUrls:['https://etherscan.io/'],
}
 
initW3({
  //...
  defaultChain: mainnet,
  //...
})

EIP6963

EIP6963 will allow support for EIP-6963 compatible wallets. They are going to be detected by W3 automatically and create a new instance for them internally. You don't need to do anything, W3 will handle it for you.

W3 Component

W3 component is only required if you're using the SSR flag.

⚠️

The W3 component must be placed at the root of your application, as it's only meant to be mounted once.

const w3props = initW3({
  //...
  SSR: true, // For SSR Frameworks like Next.js
})
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <W3 {...w3props} /> { /* Required when SSR: true */ }
      <Component {...pageProps} />
    </>
  )
}
OverviewHooks & Function