@web3widgets/react v0.1.98
@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)
6 days ago
7 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
19 days ago
19 days ago
18 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
5 months ago
6 months ago
6 months ago
5 months ago
1 year ago
1 year ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago