diff --git a/components/BottomMenu.tsx b/components/BottomMenu.tsx index 860dff7..1e7f90e 100644 --- a/components/BottomMenu.tsx +++ b/components/BottomMenu.tsx @@ -125,7 +125,11 @@ const BottomMenu: FC = ({ className }) => { )} onClick={() => push('/receive/qr')} > - + diff --git a/components/RecentTransactions.tsx b/components/RecentTransactions.tsx index 1a9bb04..8e93fd1 100644 --- a/components/RecentTransactions.tsx +++ b/components/RecentTransactions.tsx @@ -2,12 +2,14 @@ import { ClockIcon } from '@heroicons/react/outline' import { DownloadIcon, UploadIcon } from '@heroicons/react/solid' import clsx from 'clsx' import { tools } from 'nanocurrency-web' -import type { FC } from 'react' +import { FC, useCallback, useState } from 'react' import { useCurrentAccount } from '../lib/context/accountContext' import useAccountHistory from '../lib/hooks/useAccountHistory' import useAccountReceivable from '../lib/hooks/useAccountReceivable' +import useListenToConfirmations from '../lib/hooks/useListenToConfirmations' import useReceiveNano from '../lib/hooks/useReceiveNano' +import { ConfirmationMessage } from '../lib/types' const rawToNanoDisplay = (raw: string) => Number(tools.convert(raw, 'RAW', 'NANO').slice(0, 20)) @@ -25,15 +27,15 @@ const RecentTransactions: FC = ({ className }) => { const { accountReceivable, blocksInfo: receivableBlocksInfo, - loading: loadingReceivable, + mutate, } = useAccountReceivable() - const { accountHistory, loading: loadingHistory } = useAccountHistory() + const { accountHistory } = useAccountHistory() const account = useCurrentAccount() const hasReceivable = - !loadingReceivable && Object.keys(accountReceivable.blocks).length > 0 - const hasHistory = !loadingHistory && accountHistory.history.length > 0 + accountReceivable !== undefined && + Object.values(accountReceivable.blocks).some(account => account !== '') const receivable = Object.entries( accountReceivable?.blocks[account?.address ?? ''] ?? {} @@ -43,12 +45,69 @@ const RecentTransactions: FC = ({ className }) => { from: source, })) + const [listenedReceivables, setListenedReceivables] = useState< + ConfirmationMessage[] + >([]) + + const onConfirmation = useCallback( + (confirmation: ConfirmationMessage) => { + const alreadyHaveConfirmation = + accountHistory?.history !== '' && + accountHistory?.history.some( + txn => txn.hash === confirmation.message.hash + ) && + receivable.some(txn => txn.hash === confirmation.message.hash) + if (!alreadyHaveConfirmation) + setListenedReceivables(prev => [...prev, confirmation]) + }, + [accountHistory, receivable] + ) + + useListenToConfirmations(onConfirmation) + + console.log(listenedReceivables) + return (
{hasReceivable && (

receivable

    + {listenedReceivables.map(({ message, time }) => ( +
  1. + +
  2. + ))} {receivable.map(receivable => (
  3. = ({ className }) => {
)} - {hasHistory && hasReceivable &&
} - {hasHistory && ( + {accountHistory !== undefined && + accountHistory.history !== '' && + hasReceivable &&
} + {accountHistory !== undefined && accountHistory.history !== '' && (

recent transactions

    - {[ - { - hash: 'string', - send: 'string', - receivable: true, - amount: '0', - account: '', - timestamp: '', - }, - ].map(txn => ( + {accountHistory.history.map(txn => (
)} - {!hasReceivable && !hasHistory && ( -
-

no transactions yet...

-

- get your first nano -
- to see something here! -

-
- )} + {!hasReceivable && + (accountHistory === undefined || accountHistory.history === '') && ( +
+

no transactions yet...

+

+ get your first nano +
+ to see something here! +

+
+ )} {false && (