Integrating with React

npm install \
  @africazk/identity \
  @solana/wallet-adapter-react \
  @solana/wallet-adapter-react-ui \
  @solana/wallet-adapter-wallets \
  @solana/web3.js

import {
  ConnectionProvider,
  WalletProvider,
} from '@solana/wallet-adapter-react'
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets'
import '@solana/wallet-adapter-react-ui/styles.css'
import { useMemo } from 'react'
import { VerifyView } from './VerifyView'

const RPC = 'https://api.mainnet-beta.solana.com'

export default function App() {
  const wallets = useMemo(() => [new PhantomWalletAdapter()], [])
  return (
    <ConnectionProvider endpoint={RPC}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <VerifyView />
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}

import { useEffect, useState } from 'react'
import { useWallet } from '@solana/wallet-adapter-react'
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
import {
  checkAttestation,
  verifyIdentity,
  generateProof,
  submitProof,
  type AttestationStatus,
} from '@africazk/identity'

export function VerifyView() {
  const wallet = useWallet()
  const [status, setStatus] = useState<AttestationStatus | null>(null)
  const [nin, setNin] = useState('')
  const [dob, setDob] = useState('')
  const [pending, setPending] = useState(false)

  useEffect(() => {
    if (!wallet.publicKey) return
    checkAttestation(wallet.publicKey.toString(), 'mainnet-beta').then(setStatus)
  }, [wallet.publicKey])

  if (status?.verified) return <p>Verified ✓</p>

  return (
    <div>
      <WalletMultiButton />
      {wallet.publicKey && (
        <form
          onSubmit={async (e) => {
            e.preventDefault()
            setPending(true)
            const cred = await verifyIdentity({ idType: 'NIN', idNumber: nin, dob })
            const proof = await generateProof(cred)
            await submitProof(proof, wallet, 'mainnet-beta')
            const fresh = await checkAttestation(
              wallet.publicKey!.toString(),
              'mainnet-beta'
            )
            setStatus(fresh)
            setPending(false)
          }}
        >
          <input value={nin} onChange={(e) => setNin(e.target.value)} placeholder="NIN" />
          <input type="date" value={dob} onChange={(e) => setDob(e.target.value)} />
          <button type="submit" disabled={pending}>Verify</button>
        </form>
      )}
    </div>
  )
}