@openbmp/web3

Welcome to @openbmp/web3 👋

Binance Mini Program Web3 Provider

Install

pnpm add @openbmp/web3

Usage

Wrap App with Web3Provider

// app.ts
import { Web3Provider } from '@openbmp/web3'

const App = ({ children }) => {
  return <Web3Provider>{children}</Web3Provider>
}

export default App

Connect to Binance DeFi Wallet

import { Box, Button } from '@openbmp/uikit'
import { useAuth } from '@openbmp/web3'
import React, { useCallback, useState, type FC } from 'react'

// type definitions
export type Props = Record<string, unknown>

const WalletAddr: FC<Props> = () => {
  const { account, login, logOut } = useAuth()
  const [loading, setLoading] = useState(false)
  const isActive = !!account

  const handleWalletClick = useCallback(async () => {
    setLoading(true)
    if (isActive) {
      await logOut()
    } else {
      await login()
    }
    setLoading(false)
  }, [account, login, setLoading])

  return (
    <Box onClick={handleWalletClick}>
      <Button size="small" type="secondary" style={{ marginLeft: '16px' }} loading={loading}>
        {isActive ? 'Log Out' : 'Connect'}
      </Button>
    </Box>
  )
}

export default WalletAddr

Get Account Address

import { useAuth } from '@openbmp/web3'

const { account } = useAuth()

Invoke contract method

import { useContract } from '@openbmp/web3'
import { type AbiItem } from 'web3-utils'
import comptrollerAbi from 'path/to/comptroller.json'

const comptrollerContract = useContract<Comptroller>({
  abiItems: comptrollerAbi as AbiItem[],
  contractAddress: '0xfD36E2c2a6789Db23113685031d7F16329158384',
})

comptrollerContract.methods.methodName().call()

Author

👤 Sora Liu [e-mail]

• Github: @soraliu

Show your support

Give a ⭐️ if this project helped you!

📝 License

This project is MIT licensed.