From 3af7eaff9a564839c976b5a9622cb70995f119ae Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi <125247833+farhan-nurzi-deriv@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:09:58 +0800 Subject: [PATCH] farhan/feat: Cashier Completed Transactions (#10566) * feat: cashier transactions * chore: rename components and invalidate query * chore: move effects down to child components * refactor: filter logics * fix: status and filter logics --- .../api/src/hooks/useCryptoTransactions.ts | 7 +- packages/api/src/hooks/useTransactions.ts | 25 ++++-- .../WalletTransactions.scss | 4 + .../WalletTransactions/WalletTransactions.tsx | 86 +++++++++++++++---- .../WalletTransactionsCompleted.scss | 16 ++++ .../WalletTransactionsCompleted.tsx | 64 ++++++++++++++ .../WalletTransactionsCompleted/index.ts | 1 + .../WalletTransactionsCompletedRow.scss | 67 +++++++++++++++ .../WalletTransactionsCompletedRow.tsx | 54 ++++++++++++ .../WalletTransactionsCompletedRow/index.ts | 1 + .../WalletTransactionsCrypto/index.ts | 1 - .../WalletTransactionsCryptoRow/index.ts | 1 - .../WalletTransactionsFilter.tsx | 9 +- .../WalletTransactionsPending.scss} | 4 +- .../WalletTransactionsPending.tsx} | 26 +++--- .../WalletTransactionsPending/index.ts | 1 + .../WalletTransactionsPendingRow.scss} | 2 +- .../WalletTransactionsPendingRow.tsx} | 37 ++++---- .../WalletTransactionsPendingRow/index.ts | 1 + .../WalletTransactionsTable.scss | 6 ++ .../WalletTransactionsTable.tsx | 12 ++- .../WalletTransactionsScreens/index.ts | 6 +- 22 files changed, 359 insertions(+), 72 deletions(-) create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.scss create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.tsx create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/index.ts create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.scss create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.tsx create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/index.ts delete mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/index.ts delete mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/index.ts rename packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/{WalletTransactionsCrypto/WalletTransactionsCrypto.scss => WalletTransactionsPending/WalletTransactionsPending.scss} (85%) rename packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/{WalletTransactionsCrypto/WalletTransactionsCrypto.tsx => WalletTransactionsPending/WalletTransactionsPending.tsx} (56%) create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/index.ts rename packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/{WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.scss => WalletTransactionsPendingRow/WalletTransactionsPendingRow.scss} (98%) rename packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/{WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.tsx => WalletTransactionsPendingRow/WalletTransactionsPendingRow.tsx} (72%) create mode 100644 packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/index.ts diff --git a/packages/api/src/hooks/useCryptoTransactions.ts b/packages/api/src/hooks/useCryptoTransactions.ts index 50fec1d43299..6535e6a10409 100644 --- a/packages/api/src/hooks/useCryptoTransactions.ts +++ b/packages/api/src/hooks/useCryptoTransactions.ts @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import useSubscription from '../useSubscription'; import { getTruncatedString } from '@deriv/utils'; @@ -25,6 +25,9 @@ const useCryptoTransactions = () => { const { subscribe, data, ...rest } = useSubscription('cashier_payments'); const [transactions, setTransactions] = useState(); + // Reset transactions data + const resetData = useCallback(() => setTransactions(undefined), []); + useEffect(() => { setTransactions(old_transactions => { const new_transactions = data?.cashier_payments?.crypto as TModifiedTransaction[] | undefined; @@ -91,6 +94,8 @@ const useCryptoTransactions = () => { data: sorted_transactions, /** Returns the last transaction if exists. */ last_transaction, + /** Reset transactions data */ + resetData, subscribe, ...rest, }; diff --git a/packages/api/src/hooks/useTransactions.ts b/packages/api/src/hooks/useTransactions.ts index 1491b69c6265..b535a27f9b3b 100644 --- a/packages/api/src/hooks/useTransactions.ts +++ b/packages/api/src/hooks/useTransactions.ts @@ -1,29 +1,42 @@ -import { useMemo } from 'react'; - +import { useEffect, useMemo, useState } from 'react'; import useInfiniteQuery from '../useInfiniteQuery'; - +import { TSocketRequestPayload } from '../../types'; import useAuthorize from './useAuthorize'; +import useInvalidateQuery from '../useInvalidateQuery'; + +type TFilter = NonNullable['payload']>['action_type']; /** A custom hook to get the summary of account transactions */ const useTransactions = () => { - const { isSuccess } = useAuthorize(); + const { isFetching, isSuccess } = useAuthorize(); + const [filter, setFilter] = useState(); + const invalidate = useInvalidateQuery(); const { data, fetchNextPage, ...rest } = useInfiniteQuery('statement', { options: { - enabled: isSuccess, + enabled: !isFetching && isSuccess, getNextPageParam: (lastPage, pages) => { if (!lastPage?.statement?.count) return; return pages.length; }, }, + payload: { + action_type: filter, + }, }); + useEffect(() => { + invalidate('statement'); + }, [filter, invalidate]); + + // Flatten the data array. const flatten_data = useMemo(() => { if (!data?.pages?.length) return; return data?.pages?.flatMap(page => page?.statement?.transactions); }, [data?.pages]); + // Modify the data. const modified_data = useMemo(() => { if (!flatten_data?.length) return; @@ -37,6 +50,8 @@ const useTransactions = () => { data: modified_data, /** Fetch the next page of transactions */ fetchNextPage, + /** Filter the transactions by type */ + setFilter, ...rest, }; }; diff --git a/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.scss b/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.scss index 6b2b88a1b72e..b1457c850180 100644 --- a/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.scss +++ b/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.scss @@ -1,6 +1,10 @@ .wallets-transactions { width: 70vw; + @include mobile { + width: 100%; + } + &__header { display: flex; gap: 16px; diff --git a/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.tsx b/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.tsx index 8bf6c2a186c0..104d554b07ba 100644 --- a/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.tsx +++ b/packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.tsx @@ -1,31 +1,79 @@ -import React, { ComponentProps, useState } from 'react'; -import { WalletTransactionsCrypto, WalletTransactionsFilter } from '../../screens/WalletTransactionsScreens'; +import React, { ComponentProps, useEffect, useState } from 'react'; +import { useActiveWalletAccount } from '@deriv/api'; +import { + WalletTransactionsCompleted, + WalletTransactionsFilter, + WalletTransactionsPending, +} from '../../screens/WalletTransactionsScreens'; import './WalletTransactions.scss'; +type TWalletTransactionsPendingFilter = ComponentProps['filter']; +type TWalletTransactionCompletedFilter = ComponentProps['filter']; +type TFilterValue = TWalletTransactionCompletedFilter | TWalletTransactionsPendingFilter; + +const filtersMapper: Record> = { + completed: { + all: undefined, + deposit: 'deposit', + transfer: 'transfer', + withdrawal: 'withdrawal', + }, + pending: { + all: 'all', + deposit: 'deposit', + withdrawal: 'withdrawal', + }, +}; + const WalletTransactions = () => { - const [filterValue, setFilterValue] = - useState['filter']>(undefined); - const [isPendingActive, setIsPendingActive] = useState(true); + const { data } = useActiveWalletAccount(); + const [isPendingActive, setIsPendingActive] = useState(false); + const [filterValue, setFilterValue] = useState('all'); + + useEffect(() => { + if (!data?.currency_config?.is_crypto && isPendingActive) { + setIsPendingActive(false); + } + }, [data?.currency_config?.is_crypto, isPendingActive]); + + useEffect(() => { + if (isPendingActive && !Object.keys(filtersMapper.pending).includes(filterValue)) { + setFilterValue('all'); + } + if (!isPendingActive && !Object.keys(filtersMapper.completed).includes(filterValue)) { + setFilterValue('all'); + } + }, [filterValue, isPendingActive]); // eslint-disable-line react-hooks/exhaustive-deps return (
-
-

Pending Transactions

- setIsPendingActive(!isPendingActive)} - type='checkbox' - /> - -
+ {data?.currency_config?.is_crypto && ( +
+

Pending Transactions

+ setIsPendingActive(!isPendingActive)} + type='checkbox' + /> + +
+ )}
- {isPendingActive ? : null} + {isPendingActive ? ( + + ) : ( + + )}
); }; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.scss b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.scss new file mode 100644 index 000000000000..18a168edad18 --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.scss @@ -0,0 +1,16 @@ +.wallets-transactions-completed { + position: relative; + + &__group-title { + width: 74px; + height: 14px; + color: var(--system-light-3-less-prominent-text, #999); + text-align: right; + + /* desktop/extra small/XS - regular */ + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 14px; /* 140% */ + } +} diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.tsx b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.tsx new file mode 100644 index 000000000000..431c5c95ca39 --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/WalletTransactionsCompleted.tsx @@ -0,0 +1,64 @@ +import React, { useCallback, useEffect } from 'react'; +import moment from 'moment'; +import { useTransactions } from '@deriv/api'; +import { TSocketRequestPayload } from '@deriv/api/types'; +import { WalletTransactionsCompletedRow } from '../WalletTransactionsCompletedRow'; +import { WalletTransactionsNoDataState } from '../WalletTransactionsNoDataState'; +import { WalletTransactionsTable } from '../WalletTransactionsTable'; +import './WalletTransactionsCompleted.scss'; + +type TFilter = NonNullable['payload']>['action_type']; + +type TProps = { + filter?: TFilter; +}; + +const WalletTransactionsCompleted: React.FC = ({ filter }) => { + const { data, fetchNextPage, isFetching, setFilter } = useTransactions(); + + const fetchMoreOnBottomReached = useCallback( + (containerRefElement?: HTMLDivElement | null) => { + if (containerRefElement) { + const { clientHeight, scrollHeight, scrollTop } = containerRefElement; + //once the user has scrolled within 300px of the bottom of the table, fetch more data if there is any + if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching) { + fetchNextPage(); + } + } + }, + [fetchNextPage, isFetching] + ); + + useEffect(() => { + setFilter(filter); + }, [filter]); // eslint-disable-line react-hooks/exhaustive-deps + + if (!data) return ; + + return ( +
+ + row.transaction_time && moment.unix(row.transaction_time).format('DD MMM YYYY'), + accessorKey: 'date', + header: 'Date', + }, + ]} + data={data} + fetchMore={fetchMoreOnBottomReached} + groupBy={['date']} + rowGroupRender={transaction => ( +

+ {transaction.transaction_time && + moment.unix(transaction.transaction_time).format('DD MMM YYYY')} +

+ )} + rowRender={transaction => } + /> +
+ ); +}; + +export default WalletTransactionsCompleted; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/index.ts b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/index.ts new file mode 100644 index 000000000000..797c63d5e749 --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompleted/index.ts @@ -0,0 +1 @@ +export { default as WalletTransactionsCompleted } from './WalletTransactionsCompleted'; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.scss b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.scss new file mode 100644 index 000000000000..e09aed143cbd --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.scss @@ -0,0 +1,67 @@ +.wallets-transactions-completed-row { + display: flex; + padding: 16px; + justify-content: space-between; + align-items: center; + border-top: 1px solid var(--system-light-3-border, #e5e5e5); + + &-content { + display: flex; + justify-content: space-between; + } + + &__account-details { + display: flex; + width: max-content; + gap: 8px; + + &__action-type { + color: var(--system-light-3-less-prominent-text, #999); + + /* desktop/small/S - regular */ + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 150% */ + text-transform: capitalize; + } + + &__wallet-name { + color: var(--system-light-1-prominent-text, #333); + + /* desktop/small/S - bold */ + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; /* 150% */ + } + } + + &__transaction-details { + &__amount { + color: var(--status-light-success, #4bb4b3); + text-align: right; + + /* desktop/small/S - bold */ + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; /* 150% */ + + &--negative { + color: var(--status-light-danger, #ec3f3f); + } + } + + &__balance { + color: var(--system-light-3-less-prominent-text, #999); + text-align: right; + + /* desktop/extra small/XS - regular */ + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 14px; /* 140% */ + } + } +} diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.tsx b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.tsx new file mode 100644 index 000000000000..2b6f9b2b5a03 --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/WalletTransactionsCompletedRow.tsx @@ -0,0 +1,54 @@ +import React, { useMemo } from 'react'; +import { useActiveWalletAccount, useTransactions } from '@deriv/api'; +import { WalletCurrencyCard } from '../../../../../components/WalletCurrencyCard'; +import './WalletTransactionsCompletedRow.scss'; + +type TProps = { + transaction: NonNullable['data']>[number]; +}; + +const WalletTransactionsCompletedRow: React.FC = ({ transaction }) => { + const { data } = useActiveWalletAccount(); + const displayCode = useMemo(() => data?.currency_config?.display_code || 'USD', [data]); + + const formattedAmount = useMemo(() => { + if (!transaction?.amount) return; + + if (transaction.amount > 0) { + return `+${transaction.amount}`; + } + return transaction.amount; + }, [transaction]); + + return ( +
+
+ +
+

+ {transaction.action_type} +

+

+ {displayCode} Wallet +

+
+
+
+

+ {formattedAmount} +

+

+ Balance: {transaction.balance_after} +

+
+
+ ); +}; + +export default WalletTransactionsCompletedRow; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/index.ts b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/index.ts new file mode 100644 index 000000000000..2640cccd5078 --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCompletedRow/index.ts @@ -0,0 +1 @@ +export { default as WalletTransactionsCompletedRow } from './WalletTransactionsCompletedRow'; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/index.ts b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/index.ts deleted file mode 100644 index 9c026abbabd4..000000000000 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WalletTransactionsCrypto } from './WalletTransactionsCrypto'; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/index.ts b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/index.ts deleted file mode 100644 index f377a1754c2b..000000000000 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WalletTransactionsCryptoRow } from './WalletTransactionsCryptoRow'; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsFilter/WalletTransactionsFilter.tsx b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsFilter/WalletTransactionsFilter.tsx index 5a99974c3da6..565f88702ec3 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsFilter/WalletTransactionsFilter.tsx +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsFilter/WalletTransactionsFilter.tsx @@ -1,18 +1,15 @@ -import React, { ComponentProps } from 'react'; -import { WalletTransactionsCrypto } from '../WalletTransactionsCrypto'; +import React from 'react'; import './WalletTransactionsFilter.scss'; -type TValue = ComponentProps['filter']; - type TProps = { isPendingActive: boolean; - onSelect: (value: TValue) => void; + onSelect: (value: string) => void; }; const WalletTransactionsFilter: React.FC = ({ isPendingActive, onSelect }) => { return (
- onSelect(e.target.value)}> diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/WalletTransactionsCrypto.scss b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/WalletTransactionsPending.scss similarity index 85% rename from packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/WalletTransactionsCrypto.scss rename to packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/WalletTransactionsPending.scss index dc99761817fd..eb474f8a9cc5 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/WalletTransactionsCrypto.scss +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/WalletTransactionsPending.scss @@ -1,4 +1,6 @@ -.wallets-transactions-crypto { +.wallets-transactions-pending { + position: relative; + &__group-title { width: 74px; height: 14px; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/WalletTransactionsCrypto.tsx b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/WalletTransactionsPending.tsx similarity index 56% rename from packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/WalletTransactionsCrypto.tsx rename to packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/WalletTransactionsPending.tsx index f7c08b47aa49..3010a2a0c74f 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/WalletTransactionsCrypto.tsx +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/WalletTransactionsPending.tsx @@ -1,11 +1,10 @@ import React, { useEffect } from 'react'; import moment from 'moment'; import { useCryptoTransactions } from '@deriv/api'; -import { Loader } from '../../../../../components/Loader'; -import { WalletTransactionsCryptoRow } from '../WalletTransactionsCryptoRow'; import { WalletTransactionsNoDataState } from '../WalletTransactionsNoDataState'; +import { WalletTransactionsPendingRow } from '../WalletTransactionsPendingRow'; import { WalletTransactionsTable } from '../WalletTransactionsTable'; -import './WalletTransactionsCrypto.scss'; +import './WalletTransactionsPending.scss'; type TProps = { filter?: NonNullable< @@ -13,25 +12,24 @@ type TProps = { >['transaction_type']; }; -const WalletTransactionsCrypto: React.FC = ({ filter }) => { - const { data, isLoading, subscribe, unsubscribe } = useCryptoTransactions(); +const WalletTransactionsPending: React.FC = ({ filter = 'all' }) => { + const { data, resetData, subscribe, unsubscribe } = useCryptoTransactions(); useEffect(() => { + resetData(); subscribe({ payload: { transaction_type: filter } }); return () => unsubscribe(); - }, [filter, subscribe, unsubscribe]); - - if (isLoading) return ; + }, [filter, resetData, subscribe, unsubscribe]); if (!data) return ; return ( -
+
moment(row.submit_date).format('DD MMM YYYY'), + accessorFn: row => moment.unix(row.submit_date).format('DD MMM YYYY'), accessorKey: 'date', header: 'Date', }, @@ -39,14 +37,14 @@ const WalletTransactionsCrypto: React.FC = ({ filter }) => { data={data} groupBy={['date']} rowGroupRender={transaction => ( -

- {moment(transaction.submit_date).format('DD MMM YYYY')} +

+ {moment.unix(transaction.submit_date).format('DD MMM YYYY')}

)} - rowRender={transaction => } + rowRender={transaction => } />
); }; -export default WalletTransactionsCrypto; +export default WalletTransactionsPending; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/index.ts b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/index.ts new file mode 100644 index 000000000000..b79fef8c0ee1 --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPending/index.ts @@ -0,0 +1 @@ +export { default as WalletTransactionsPending } from './WalletTransactionsPending'; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.scss b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/WalletTransactionsPendingRow.scss similarity index 98% rename from packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.scss rename to packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/WalletTransactionsPendingRow.scss index c1880f143b2f..0d1052864a82 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.scss +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/WalletTransactionsPendingRow.scss @@ -1,4 +1,4 @@ -.wallets-transactions-crypto-row { +.wallets-transactions-pending-row { width: 100%; height: 78px; display: grid; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.tsx b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/WalletTransactionsPendingRow.tsx similarity index 72% rename from packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.tsx rename to packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/WalletTransactionsPendingRow.tsx index 6cfe245a28e1..c239f6cdc9a5 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.tsx +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/WalletTransactionsPendingRow.tsx @@ -1,7 +1,8 @@ import React, { useMemo } from 'react'; +import moment from 'moment'; import { useActiveWalletAccount, useCryptoTransactions } from '@deriv/api'; import { WalletCurrencyCard } from '../../../../../components/WalletCurrencyCard'; -import './WalletTransactionsCryptoRow.scss'; +import './WalletTransactionsPendingRow.scss'; const statusCodeMapper = { deposit: { @@ -81,45 +82,45 @@ const WalletTransactionsCryptoRow: React.FC = ({ transaction }) => { }, [transaction]); return ( -
-
+
+
-

{transaction.transaction_type}

-

{displayCode} Wallet

+

{transaction.transaction_type}

+

{displayCode} Wallet

-
-

Transaction hash

-

+

+

Transaction hash

+

{transaction.formatted_transaction_hash}

-
-

Address

-

+

+

Address

+

{transaction.formatted_address_hash}

-

Confirmations

-

+

Confirmations

+

{transaction.formatted_confirmations}

-

Time

-

{new Date(transaction.submit_date).toLocaleString()}

+

Time

+

{moment.unix(transaction.submit_date).toLocaleString()}

{transaction.is_deposit ? '+' : '-'} {transaction.amount} {displayCode}
-
+
{formattedStatus?.name}
diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/index.ts b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/index.ts new file mode 100644 index 000000000000..6ea7116db229 --- /dev/null +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsPendingRow/index.ts @@ -0,0 +1 @@ +export { default as WalletTransactionsPendingRow } from './WalletTransactionsPendingRow'; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.scss b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.scss index 451820e3a26f..daab308bbf5e 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.scss +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.scss @@ -3,6 +3,12 @@ display: flex; flex-direction: column; gap: 16px; + height: 65vh; + overflow: auto; + + @include mobile { + height: 75vh; + } &-row { display: flex; diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.tsx b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.tsx index b75ce1a60d42..2209c2acc40b 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.tsx +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsTable/WalletTransactionsTable.tsx @@ -1,16 +1,17 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useRef } from 'react'; import { ColumnDef, getCoreRowModel, getGroupedRowModel, GroupingState, useReactTable } from '@tanstack/react-table'; import './WalletTransactionsTable.scss'; type TProps = { columns: ColumnDef[]; data: T[]; + fetchMore?: (target: HTMLDivElement) => void; groupBy?: GroupingState; rowGroupRender: (data: T) => JSX.Element; rowRender: (data: T) => JSX.Element; }; -const WalletTransactionsTable = ({ columns, data, groupBy, rowGroupRender, rowRender }: TProps) => { +const WalletTransactionsTable = ({ columns, data, fetchMore, groupBy, rowGroupRender, rowRender }: TProps) => { const table = useReactTable({ columns, data, @@ -18,9 +19,14 @@ const WalletTransactionsTable = ({ columns, data, groupBy, rowGroupRender, r getGroupedRowModel: getGroupedRowModel(), state: { grouping: useMemo(() => groupBy, [groupBy]) }, }); + const tableContainerRef = useRef(null); return ( -
+
(fetchMore ? fetchMore(e.target as HTMLDivElement) : null)} + ref={tableContainerRef} + > {table.getRowModel().rows.map(rowGroup => (
{rowGroupRender(rowGroup.original)} diff --git a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/index.ts b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/index.ts index 2ad1d1b7249d..f3ee46464993 100644 --- a/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/index.ts +++ b/packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/index.ts @@ -1,5 +1,7 @@ -export * from './WalletTransactionsCrypto'; -export * from './WalletTransactionsCryptoRow'; +export * from './WalletTransactionsCompleted'; +export * from './WalletTransactionsCompletedRow'; export * from './WalletTransactionsFilter'; export * from './WalletTransactionsNoDataState'; +export * from './WalletTransactionsPending'; +export * from './WalletTransactionsPendingRow'; export * from './WalletTransactionsTable';