@dcustody-xyz/wallet-react

dCustody React wallet SDK

Web3 React hooks and UI components.

Installation

Using NPM:

npm i @dcustody-xyz/wallet-react

Using Yarn:

yarn add @dcustody-xyz/wallet-react

Provider

First you have to wrap your app using the DCProvider:

import { DCProvider, ConnectWallet, embeddedSmartWallet } from '@dcustody-xyz/wallet-react'

const App = () => {
  const activeChain      = 'mumbai'
  const clientId         = 'YOUR_CLIENT_ID'
  const supportedWallets = [embeddedSmartWallet(clientId)]

  return (
    <DCProvider activeChain={activeChain} clientId={clientId} supportedWallets={supportedWallets}>
      <ConnectWallet />
    </DCProvider>
  )
}

Contract interactions

Reads

For making any query first you need a target contract to read from. Once defined you should pick a function, then you can make a query as follows:

import { useContractRead, useContract } from '@dcustody-xyz/wallet-react'

const SomePage = () => {
  const contractAddress            = '0x...'
  const contractAbi                = [/* ABI definition... */]
  const { data: contract }         = useContract(contractAddress, contractAbi)
  const { data, isLoading, error } = useContractRead(contract, 'functionName')

  // Optionally if you have to provide arguments you can:
  // const { data, isLoading, error } = useContractRead(contract, 'functionName', ['arg1'])
}

Writes

You need a similar approach to reading for making a write request, here is how:

import { useContractWrite, useContract } from '@dcustody-xyz/wallet-react'

const SomePage = () => {
  const contractAddress                   = '0x...'
  const contractAbi                       = [/* ABI definition... */]
  const { data: contract }                = useContract(contractAddress, contractAbi)
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    'functionName',
  )

  return (
    <ContractButton
      contractAddress={contractAddress}
      // Calls the "functionName" function on your smart contract with "My Arg" as the first argument
      action={async () => await mutateAsync({ args: ['My Arg'] })}
    >
      Call functionName
    </ContractButton>
  )
}

On mutateAsync you can provide an overrides option to inject some custom gas limit values:

//... snippet
return (
  <ContractButton
    contractAddress={contractAddress}
    action={async () =>
      await mutateAsync({
        args: ['My Arg'],
        overrides: {
          gasLimit: 1000000,                // override default limit
          value:    utils.parseEther('0.1') // send 0.1 native token with the call
        }
      })
    }
  >
    Call with custom options
  </ContractButton>
)

Events

To listen on events for a given contract you can use the useContractEvents hook:

import { useContractEvents, useContract } from '@dcustody-xyz/wallet-react'

const SomePage = () => {
  const contractAddress            = '0x...'
  const contractAbi                = [/* ABI definition... */]
  const { data: contract }         = useContract(contractAddress, contractAbi)
  const { data, isLoading, error } = useContractEvents(contract)
}

And data will contain an array of objects with this structure:

{
  eventName: string
  data:      Record<string, any>
  transaction: {
    blockNumber:      number
    blockHash:        string
    transactionIndex: number
    removed:          boolean
    address:          string
    data:             string
    topics:           Array<string>
    transactionHash:  string
    logIndex:         number
  }
}

Using ContractButton component

We have a component to wrap a specific call to a smart contract:

import { ContractButton } from '@dcustody-xyz/react'

const SomePage () = {
  const contractAddress = '0x...' // Your smart contract address
  const action          = async contract => {
    console.log(contract)
  }

  return (
    <ContractButton contractAddress={contractAddress} action={action}>
      Execute Action
    </ContractButton>
  )
}

You also can provide these options:

• onSuccess: callback when the contract call went successfully. It receives a result object with additional data.
• onError: callback then the contract call failed. It receives an error object with additional data.
• onSubmit: callback invoked immediately after the user confirmed the transaction.
• className: to customize the button appearance. If some CSS properties are not taken, try using !important.
• style: custom CSS style.