useWait

Wait until Aleo transaction will be finalized or fail

Possible transaction statuses:

export enum TransactionStatus {
    DownloadingProverFiles = 'Downloading Prover Files',
    GeneratingTransaction = 'Generating Transaction',
    Broadcasting = 'Broadcasting',
    Failed = 'Failed',
    Completed = 'Completed',
    Finalized = 'Finalized',
}

Return value:

{
    status: TransactionStatus,
    error: Error,
    wait: (
        transactionId: string, 
        onTransactionStatusChange?: (txStatus: TransactionStatus | null, stopPooling: () => void) => void
    ) => Promise<void>
}

Example (live demo https://aleo-react-boilerplate.vercel.app/useWait):

import { FC, useCallback, useState } from 'react'
import { Button } from '../button'
import { Input } from '../input'
import { cn } from '@bem-react/classname'
import { useConnect, useWait } from 'aleo-hooks'

import './wait.scss'

const CnWait = cn('wait')

export const Wait: FC = () => {
    const { wait, status } = useWait({})
    const { connected } = useConnect()

    const [transactionId, setTransactionId] = useState('')

    const transactionIdChangeHandler = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setTransactionId(e.target.value)
    }, [])

    const submit = useCallback(() => {
        wait(transactionId)
    }, [wait, transactionId])

    return (
        <div className={CnWait()}>
            <h2>Wait for transaction</h2>

            <div className={CnWait('values')}>
                <div className={CnWait('valuesItem')}>Transaction status: {status}</div>
            </div>

            <div>
                <Input
                    value={transactionId}
                    onChange={transactionIdChangeHandler}
                    placeholder={'Enter transaction ID'}
                />

                <Button disabled={!connected} onClick={submit}>
                    {!connected ? 'Connect wallet first' : 'Wait for transaction'}
                </Button>
            </div>
        </div>
    )
}