import { Accordion, Body, Box, Button, Divider, Icon, MenuItem, } from '@biom3/react'; import { useContext, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { Environment } from '@imtbl/config'; import { Transaction, TransactionStatus } from '../../lib/clients/checkoutApiType'; import { BridgeWidgetViews } from '../../context/view-context/BridgeViewContextTypes'; import { ViewActions, ViewContext } from '../../context/view-context/ViewContext'; import { TokenImage } from '../TokenImage/TokenImage'; import { actionsContainerStyles, actionsLayoutStyles, containerStyles } from './transactionItemStyles'; import { TransactionDetails } from './TransactionDetails'; type TransactionItemWithdrawPendingProps = { label: string, transaction: Transaction, fiatAmount: string, amount: string, icon: string, defaultTokenImage: string, environment: Environment, }; export function TransactionItemWithdrawPending({ label, transaction, fiatAmount, amount, icon, defaultTokenImage, environment, }: TransactionItemWithdrawPendingProps) { const { viewDispatch } = useContext(ViewContext); const translation = useTranslation(); const dateNowUnixMs = useMemo(() => new Date().getTime(), []); const withdrawalReadyDate = useMemo( () => (transaction.details.current_status.withdrawal_ready_at ? new Date(transaction.details.current_status.withdrawal_ready_at) : undefined), [transaction], ); const requiresWithdrawalClaim = transaction.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING; const relativeTimeFormat = new Intl.RelativeTimeFormat(translation[1].language || 'en', { numeric: 'auto' }); const delayTimeString = useMemo(() => { if (!requiresWithdrawalClaim || withdrawalReadyDate === undefined) return ''; const timeDiffMins = (withdrawalReadyDate!.getTime() - dateNowUnixMs) / (60 * 1000); if (timeDiffMins <= 1) return 'in 1 minute'; if (timeDiffMins < 60) { return relativeTimeFormat.format(Math.ceil(timeDiffMins), 'minute'); } const timeDiffHours = timeDiffMins / 60; // hours if (timeDiffMins < 60 * 24) { return relativeTimeFormat.format(Math.ceil(timeDiffHours), 'hour'); } const timeDiffDays = timeDiffHours / 24; // days return relativeTimeFormat.format(Math.ceil(timeDiffDays), 'day'); }, [dateNowUnixMs, translation[1].language]); const withdrawalReadyToClaim = withdrawalReadyDate ? withdrawalReadyDate.getTime() < dateNowUnixMs : false; const actionMessage = useMemo( () => (withdrawalReadyToClaim === true ? translation.t('views.TRANSACTIONS.status.withdrawalPending.withdrawalReadyText') : `${translation.t('views.TRANSACTIONS.status.withdrawalPending.withdrawalDelayText')} ${delayTimeString}`), [delayTimeString, translation[1].language], ); const handleWithdrawalClaimClick = () => { viewDispatch({ payload: { type: ViewActions.UPDATE_VIEW, view: { type: BridgeWidgetViews.CLAIM_WITHDRAWAL, transaction, }, }, }); }; return ( {requiresWithdrawalClaim && ( <> {actionMessage} {requiresWithdrawalClaim && withdrawalReadyToClaim && ( )} )} )} /> {label} {translation.t('views.TRANSACTIONS.status.withdrawalPending.caption')} ); }