W3Vm Wallet Connectors Library

Install

npm i @w3vm/react

Install WalletConnect Connector

npm i @w3vm/walletconnect

Init W3

import { W3, initW3, Injected } from '@w3vm/react'
import { WalletConnect } from '@w3vm/walletconnect'

/* Icons */
import walletconnect from 'public/walletconnect.svg'
import wallet from 'public/extension-wallet.png'

/* WalletConnect Project Id */
const projectId = 'YOUR_PROJECT_ID'

const w3props = initW3({
  connectors: [
    new Injected({ icon: wallet }), 
    new WalletConnect({ projectId, icon: walletconnect, showQrModal: true, chains:[1, 137] })
  ],
  SSR: true, // For SSR Frameworks like Next.js
})

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <W3 {...w3props} /> { /* Required when SSR: true */ }
      <Component {...pageProps} />
    </>
  )
}

Create your WalletConnect Project ID at WalletConnect Cloud

Connect to a Wallet

Import the useConnect hook and map through the connectors array:

import { useConnect } from '@w3vm/react'

export default function Connect() {

  const { connectors, connectW3, disconnectW3, status } = useConnect()
  
  return (
    <>
      {connectors.map((connector) =>(
      <button key={connector.id} disabled={Boolean(status)} onClick={()=>connectW3({ connector })}>
        <img src={connector.icon} alt={connector.name} />
        {connector.name}
      </button>
      ))}
    </>
  )
}

Custom Hooks

import { getW3Chain, getW3Address, getW3Error } from '@w3vm/react'

export default function UserInfo(){
  
  const address = getW3Address()
  const chain = getW3Chain()
  const error = getW3Error()
  
  return (
    <div>
      address: {address}
      <br/>
      Chain ID: {chain}
      <br/>
      Error: {error}
    </div>
  )
}

Use with ethers.js

import { BrowserProvider } from 'ethers'
import { getW3Provider } from '@w3vm/react'

export default function useEthersProvider(){

  const w3Provider = getW3Provider()

  function callContract(){
    if(!w3Provider) throw new Error('User not connected')

    const provider = new BrowserProvider(w3Provider)
    //...
  }
  
  //...
}

Use with Web3.js

import Web3 from 'web3'
import { getW3Provider } from '@w3vm/react'

export default function useWeb3Provider() {

  const w3Provider = getW3Provider()

  function callContract(){
    if(!w3Provider) throw new Error('User not connected')

    const provider = new Web3(w3Provider)
    //...
  }

  //...
}

Use with viem

import { getW3Provider } from '@w3vm/react'
import { createWalletClient, custom } from 'viem'
import { mainnet } from 'viem/chains'

export default function useWalletClient() {

  const w3Provider = getW3Provider()

  function callContract(){
    if(!w3Provider) throw new Error('User not connected')

    const client = createWalletClient({
      chain: mainnet,
      transport: custom(w3Provider)
    })
    //...
  }

  //...
}

How to subscribe to `WalletConnect` connection status ?

How to subscribe to WalletConnect connection status ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>W3Vm + WalletConnect</title>
</head>
<body>
<div id="user"></div>

<button id="BrowserWallet">BrowserWallet</button>
<button id="WalletConnect">WalletConnect</button>

</body>

<script type="module">
import { initW3, Injected, getW3, subW3, connectW3, disconnectW3 } from 'https://esm.sh/@w3vm/core?bundle'
import { getWC, subWC, WalletConnect } from 'https://esm.sh/@w3vm/walletconnect?bundle'

const projectId = 'YOUR_PROJECT_ID'

initW3({
	connectors: [
		new Injected(),
		new WalletConnect({ projectId, showQrModal: true, optionalChains: [1, 137] })
	]
})

const userEl = document.getElementById("user")
const BrowserWallet_btnEl = document.getElementById("BrowserWallet")
const WalletConnect_btnEl = document.getElementById("WalletConnect")

subW3.address(address => {
	console.log('getW3.address()', address)
	if(!BrowserWallet_btnEl || !userEl) return
	if(address) {
		BrowserWallet_btnEl.innerText = "Disconnect"
		WalletConnect_btnEl.innerText = "Disconnect"
		userEl.innerText = `Address: ${address}`
	} else {
		BrowserWallet_btnEl.innerText = "BrowserWallet"
		WalletConnect_btnEl.innerText = "WalletConnect"
		userEl.innerText = ""
	}
})

subW3.wait((status) => {
	console.log('getW3.wait()', status)
})

BrowserWallet_btnEl?.addEventListener('click', ()=>{
	const address = getW3.address()
	if(address) {
		disconnectW3()
	} else {
		const connectors = getW3.connectors()
		connectW3({ connector: connectors[0] })
	}
})

WalletConnect_btnEl?.addEventListener('click', ()=>{
	const address = getW3.address()
	if(address) {
		disconnectW3()
	} else {
		const connectors = getW3.connectors()
		connectW3({ connector: connectors[1] })
	}
})
</script>

</html>

roninbuilders / w3vm Goto Github PK

w3vm's Introduction

W3Vm Wallet Connectors Library

Install

Install WalletConnect Connector

Init W3

Connect to a Wallet

Custom Hooks

Use with ethers.js

Use with Web3.js

Use with viem

w3vm's People

Contributors

Stargazers

Watchers

Forkers

w3vm's Issues

Recommend Projects

Recommend Topics

Recommend Org