Provider link library based on web3-react package
import { Web3ProviderWidget } from '@web3widgets/react'
<Web3ProviderWidget theme={{ accent: '#8714c0', zIndex: 10000 }}>
<App />
</Web3ProviderWidget>
-
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> ) }
import { useWeb3Provider, SupportChainId, ConnectionType } from '@web3widgets/react'
const { switchChain, connect } = useWeb3Provider()
switchChain(SupportedChainId.GOERLI)
connect(ConnectionType.INJECTED)
import { useConfig } from '@web3widgets/react'
// ChainConfigInfo[] | Connection[]
const { chainList, connectionList } = useConfig()
import { useContract } from '@web3widgets/react'
useContract(contractAddress, ABI)
const { qrcodeRender, Qrcode } = useQrcodeRender()
const qrcodeSize = 128
useEffect(() => {
qrcodeRender({
data: '0x0000000000000000000000000000000000000000',
size: qrcodeSize,
theme: 'light',
})
}, [qrcodeRender])
<Qrcode size={qrcodeSize}>
<img src="[url]" />
</Qrcode>
getExplorerLink(chainId, account, ExplorerDataType.ADDRESS)