0.1.117 • Published 4 months ago

@web3widgets/react v0.1.117

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

@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)
0.1.117

4 months ago

0.1.116

4 months ago

0.1.115

5 months ago

0.1.114

6 months ago

0.1.113

6 months ago

0.1.112

7 months ago

0.1.111

9 months ago

0.1.110

9 months ago

0.1.107

10 months ago

0.1.106

10 months ago

0.1.109

10 months ago

0.1.108

10 months ago

0.1.105

11 months ago

0.1.104

11 months ago

0.1.103

12 months ago

0.1.101

1 year ago

0.1.100

1 year ago

0.1.99

1 year ago

0.1.98

1 year ago

0.1.97

1 year ago

0.1.96

1 year ago

0.1.90

1 year ago

0.1.91

1 year ago

0.1.92

1 year ago

0.1.93

1 year ago

0.1.94

1 year ago

0.1.95

1 year ago

0.1.88

1 year ago

0.1.89

1 year ago

0.1.85

1 year ago

0.1.86

1 year ago

0.1.87

1 year ago

0.1.82

1 year ago

0.1.83

1 year ago

0.1.84

1 year ago

0.1.80

1 year ago

0.1.81

1 year ago

0.1.74

1 year ago

0.1.75

1 year ago

0.1.76

1 year ago

0.1.77

1 year ago

0.1.78

1 year ago

0.1.79

1 year ago

0.1.70

1 year ago

0.1.71

1 year ago

0.1.72

1 year ago

0.1.73

1 year ago

0.1.69

1 year ago

0.1.67

1 year ago

0.1.68

1 year ago

0.1.66

1 year ago

0.1.65

1 year ago

0.1.64

1 year ago

0.1.52

2 years ago

0.1.53

2 years ago

0.1.54

2 years ago

0.1.55

2 years ago

0.1.56

2 years ago

0.1.57

2 years ago

0.1.58

2 years ago

0.1.59

2 years ago

0.1.50

2 years ago

0.1.51

2 years ago

0.1.49

2 years ago

0.1.41

2 years ago

0.1.42

2 years ago

0.1.43

2 years ago

0.1.44

2 years ago

0.1.45

2 years ago

0.1.46

2 years ago

0.1.47

2 years ago

0.1.48

2 years ago

0.1.40

2 years ago

0.1.38

2 years ago

0.1.39

2 years ago

0.1.63

2 years ago

0.1.60

2 years ago

0.1.61

2 years ago

0.1.62

2 years ago

0.1.30

2 years ago

0.1.31

2 years ago

0.1.32

2 years ago

0.1.33

2 years ago

0.1.34

2 years ago

0.1.35

2 years ago

0.1.37

2 years ago

0.1.27

2 years ago

0.1.28

2 years ago

0.1.29

2 years ago

0.1.20

2 years ago

0.1.21

2 years ago

0.1.22

2 years ago

0.1.23

2 years ago

0.1.24

2 years ago

0.1.25

2 years ago

0.1.26

2 years ago

0.1.10

3 years ago

0.1.11

3 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.19

3 years ago

0.1.0

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.7

3 years ago

0.1.18

2 years ago

0.1.19

2 years ago

0.1.9

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.5

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago