@erc-3643/react-usedapp

@erc-3643/react-usedapp

Table of contents

• What is @erc-3643/react-usedapp
• Installation
• Usage examples
  • Hooks
    • Token API
    • Eligibility verification info
  • Components
    • Holder eligibility verification

What is @erc-3643/react-usedapp ⬆

The @erc-3643/react-usedapp package provides a set of React hooks and components for ERC3643 tokens.

Installation ⬆

• Install module

  npm i @erc-3643/react-usedapp --save

• reflect-metadata is required, install it too:

  npm install reflect-metadata --save

  and make sure to import it in a global place, like app.ts:

  import 'reflect-metadata';
  

Usage examples ⬆

Hooks ⬆

Token API

import { useSigner } from '@usedapp/core'
import { Token, useToken } from '@erc-3643/react-usedapp'
import { useEffect, useState } from 'react'
// ... other imports

const TokenActions = () => {
  const signer = useSigner()
  const { getToken } = useToken(signer)
  const [token, setToken] = useState<Token | null>(null)
  const [freezeWallet, setFreezeWallet] = useState('')
  const [unfreezeWallet, setUnfreezeWallet] = useState('')

  useEffect(() => {
    if (!signer) {
      return
    }

    ;(async () => {
      setToken(await getToken(TOKEN_ADDRESS))
    })()
  }, [signer])

  const onPause = async () => {
    if (!token) {
      return
    }

    if (token.paused) {
      await token.run()
    } else {
      await token.pause()
    }

    setToken(await getToken(TOKEN_ADDRESS))
  }

  const onFreeze = () => {
    if (!freezeWallet || !token) {
      return
    }

    token.freeze(freezeWallet)
  }

  const onUnfreeze = () => {
    if (!unfreezeWallet || !token) {
      return
    }

    token.unfreeze(unfreezeWallet)
  }

  return (
    <>
      {' '}
      <h3>Token actions</h3>
      <div>
        Pause token:{' '}
        {token && (
          <Button variant='contained' color={token.paused ? 'success' : 'error'} onClick={onPause}>
            {token.paused ? 'Run' : 'Pause'}
          </Button>
        )}
      </div>
      <!-- ... rest of the markup -->
    </>
  )
}

export default TokenActions

Eligibility verification info

import { useSigner } from '@usedapp/core'
import { useEligibilityVerification, useToken } from '@erc-3643/react-usedapp'
import { useEffect, useState } from 'react'
// ... other imports

const EligibilityVerificationInfo = () => {
  const signer = useSigner()
  const { getToken } = useToken(signer)
  const { getEligibilityVerification } = useEligibilityVerification(signer)
  const [identityRegistryAddress, setIdentityRegistryAddress] = useState('')
  const [verificationResult, setVerificationResult] = useState<any>(null)

  useEffect(() => {
    if (!signer) {
      return
    }

    ;(async () => {
      const token = await getToken(TOKEN_ADDRESS)

      if (token) {
        setIdentityRegistryAddress((token.identityRegistry) as string)
      }
    })()
  }, [signer])

  useEffect(() => {
    if (!identityRegistryAddress) {
      return
    }

    ;(async () => {
      setVerificationResult(await getEligibilityVerification(identityRegistryAddress, null))
    })()
  }, [identityRegistryAddress])

  return (
    <>
      <h3>Eligibility Verification:</h3>
      <div>
        Identity Is Verified:
        {verificationResult?.identityIsVerified ? (
          <StyledChip label='Yes' color='success' />
        ) : (
          <StyledChip label='No' color='error' />
        )}
      </div>
      <div>
        <p>Missing Claim Topics:</p>
        <div>
          <pre>{JSON.stringify(verificationResult?.missingClaimTopics ?? [], null, 4)}</pre>
        </div>
      </div>
      <div>
        <p>Invalid Claims: </p>
        <div>
          <pre>{JSON.stringify(verificationResult?.invalidClaims ?? [], null, 4)}</pre>
        </div>
      </div>
    </>
  )
}

export default EligibilityVerificationInfo

Components ⬆

Holder eligibility verification

import { EligibilityVerificationHolder } from '@erc-3643/react-usedapp'
import { useSigner } from '@usedapp/core'
import { useEffect, useState } from 'react'
// ... other imports

const EligibilityVerificationHolderInfo = () => {
  const signer = useSigner()
  const [signerAddress, setSignerAddress] = useState('')

  useEffect(() => {
    if (!signer) {
      return
    }

    ;(async () => {
      setSignerAddress(await signer.getAddress())
    })()
  }, [signer])

  return (
    <>
      <h3>Holder eligibility verification:</h3>
      <div>
        <EligibilityVerificationHolder
          tokenAddress={TOKEN_ADDRESS}
          walletAddress={signerAddress}
          signer={signer as Signer}
        />
      </div>
    </>
  )
}

export default EligibilityVerificationHolderInfo