Getting Started

W3Vm Core is an evm wallet connectors library for decentralized applications. It's inspired by Wagmi's references with the difference that it's eth-lib agnostic. (Eth-lib for ethereum libraries such as ethers.js, viem or web3.js).
It sets up for you a wallet connection infrastructure with a built-in store to handle the wallet state and user's sessions.

Compatible with ethers.js, viem and Web3.js

Current supported protocols & wallets

The core package of this library supports injected (browser extension) and EIP-6963 compliant wallet.

Additional packages that can be optionally installed:

WalletConnect v2 connector (recommended)
Coinbase SDK connector
MetaMask SDK connector

Install

npm i @w3vm/core

Install WalletConnect connector

npm i @w3vm/walletconnect

Init W3

Call initW3 function at the top of your main.js file

import { initW3, Injected } from '@w3vm/core'
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'
 
initW3({
  connectors: [
    new Injected({ icon: wallet }), 
    new WalletConnect({ 
      projectId,
      icon: walletconnect,
      showQrModal: true,
      optionalChains:[1, 137]
    })
  ],
  defaultChain: 1, // Optional
})

Create your WalletConnect Project ID at WalletConnect Cloud

Connect to a Wallet

import { getW3, connectW3 } from '@w3vm/react'
 
const connectors = getW3.connectors()
 
const connector = connectors.find(id === "Injected")
 
connectW3({ connector })

Status

status is a string that shows a current ongoing process

import { subW3 } from '@w3vm/react'
 
type Status = 'Initializing' | 'Connecting' | 'Disconnecting' | 'Loading' | 'GeneratingURI' | undefined
 
const handler = (status: Status)=>{
  console.log(status)
}
 
//Subscribe
const unsubscribe = subW3.status(handler)
 
//Get the current value
const status = getW3.status()

Get

Get the current values from the global store

import { getW3 } from '@w3vm/react'
 
const address = getW3.address()
const chainId = getW3.chainId()
const error = getW3.error()
const status = getW3.status()

Subscribe to changes

import { subW3 } from '@w3vm/react'
 
const handler = (newAddress: string)=>{
  console.log(newAddress)
}
 
const unsubscribe = subW3.address(handler)

SSR and Hydration Overview