@web3widgets/react

Provider link library based on web3-react package

Using

import { Web3ProviderWidget } from '@web3widgets/react'

<Web3ProviderWidget theme={{ accent: '#8714c0', zIndex: 10000 }}>
  <App />
</Web3ProviderWidget>

Use the default Modal

• useConnectModal

  type ConnectStoreProps = {
    open: boolean
    openModal: () => void
    closeModal: () => void
  }
  
  import { foramtAddress, useConnectModal, useWeb3Provider } from '@web3widgets/react'
  
  function ConnectButton() {
    const { account, isActive } = useWeb3Provider()
  
    const { openModal } = useConnectModal()
  
    return (
      <button onClick={() => openModal()}>{!isActive || !account ? 'Connect Wallet' : foramtAddress(account)}</button>
    )
  }

• connect WalletConnect

  • env config

  RPC_URLS={1: string | string[]} WC_PROJECT_ID=wxprojectid WC_DEFAULT_CHAIN_ID=1

• useSwitchChainModal: Switch Chain

  type SwitchChainStoreProps = {
    open: boolean
    openModal: () => void
    closeModal: () => void
    chainIds?: SupportChainId[]
    setChainIds: (chainIds: SupportChainId[]) => void
  }
  
  import { getChainInfo, useSwitchChainModal, useWeb3Provider } from '@web3widgets/react'
  
  function SwitchChainButton() {
    const { account, chainId, isActive } = useWeb3Provider()
  
    const { openModal, setChainIds } = useSwitchChainModal()
  
    useEffect(() => {
      setChainIds([1, 56])
    }, [setChainIds])
  
    return (
      <button onClick={() => openModal()}>{isActive && chainId ? getChainInfo(chainId).label : 'Switch Chain'}</button>
    )
  }

Custom Connect

import { useWeb3Provider, SupportChainId, ConnectionType } from '@web3widgets/react'

const { switchChain, connect } = useWeb3Provider()

switchChain(SupportedChainId.GOERLI)

connect(ConnectionType.INJECTED)

useConfig

import { useConfig } from '@web3widgets/react'

// ChainConfigInfo[] | Connection[]
const { chainList, connectionList } = useConfig()

useContract

import { useContract } from '@web3widgets/react'

useContract(contractAddress, ABI)

useQrcodeRender

const { qrcodeRender, Qrcode } = useQrcodeRender()

const qrcodeSize = 128

useEffect(() => {
  qrcodeRender({
    data: '0x0000000000000000000000000000000000000000',
    size: qrcodeSize,
    theme: 'light',
  })
}, [qrcodeRender])

<Qrcode size={qrcodeSize}>
  <img src="[url]" />
</Qrcode>

getExplorerLink

getExplorerLink(chainId, account, ExplorerDataType.ADDRESS)