Rostislav / WALL-454 / Fiat transaction list (post feature branch update)

packages/appstore/package.json

@@ -25,6 +25,7 @@
     "license": "Apache-2.0",
     "dependencies": {
         "@deriv/account": "^1.0.0",
+        "@deriv/api": "^1.0.0",
         "@deriv/api-types": "^1.0.94",
         "@deriv/cashier": "^1.0.0",
         "@deriv/components": "^1.0.0",
@@ -34,7 +35,6 @@
         "@deriv/stores": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
-        "@deriv/hooks": "^1.0.0",
         "@deriv/ui": "^0.8.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",

packages/appstore/src/components/fiat-transaction-list/fiat-transaction-list-item.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import { Statement } from '@deriv/api-types';
+import { isMobile } from '@deriv/shared';
+import { Text, WalletCard } from '@deriv/components';
+
+type StatementTransaction = DeepRequired<Statement>['transactions'][number];
+
+type TFiatTransactionListItem = Pick<StatementTransaction, 'amount' | 'balance_after'> & {
+    action_type:
+        | (StatementTransaction['action_type'] & ('deposit' | 'withdrawal' | 'transfer'))
+        | 'initial_fund'
+        | 'reset_balance';
+    account_name: string;
+    currency: string;
+    wallet: any;
+};
+
+const FiatTransactionListItem = ({
+    account_name,
+    action_type,
+    amount,
+    balance_after,
+    currency,
+    wallet,
+}: TFiatTransactionListItem) => {
+    const formatAmount = useCallback(
+        (value: number) => value.toLocaleString(undefined, { minimumFractionDigits: 2 }),
+        []
+    );
+
+    const formatActionType = useCallback(
+        (value: string) => value[0].toUpperCase() + value.substring(1).replace(/_/, ' '),
+        []
+    );
+
+    return (
+        <div className='fiat-transaction-list__item'>
+            <div>
+                <WalletCard wallet={wallet} size='small' />
+                <span>
+                    <Text
+                        size={isMobile() ? 'xxxs' : 'xxs'}
+                        color='less-prominent'
+                        weight='lighter'
+                        line_height={isMobile() ? 's' : 'm'}
+                    >
+                        {formatActionType(action_type)}
+                    </Text>
+                    <Text
+                        size={isMobile() ? 'xxxs' : 'xxs'}
+                        color='prominent'
+                        weight='bold'
+                        line_height={isMobile() ? 's' : 'm'}
+                    >
+                        {account_name}
+                    </Text>
+                </span>
+            </div>
+            <span>
+                <Text
+                    size={isMobile() ? 'xxxs' : 'xxs'}
+                    color={amount > 0 ? 'profit-success' : 'loss-danger'}
+                    weight='bold'
+                    line_height={isMobile() ? 's' : 'm'}
+                >
+                    {(amount > 0 ? '+' : '') + formatAmount(amount)} {currency}
+                </Text>
+                <Text
+                    size={isMobile() ? 'xxxxs' : 'xxxs'}
+                    color='less-prominent'
+                    weight='lighter'
+                    line_height={isMobile() ? 'm' : 's'}
+                >
+                    Balance: {formatAmount(balance_after)} {currency}
+                </Text>
+            </span>
+        </div>
+    );
+};
+
+export default FiatTransactionListItem;

packages/appstore/src/components/fiat-transaction-list/fiat-transaction-list.scss

@@ -0,0 +1,46 @@
+.fiat-transaction-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &__day {
+        display: flex;
+        flex-direction: column;
+
+        & > span {
+            padding: 8px 16px;
+        }
+
+        & > div {
+            box-shadow: inset 0 1px 0 #f2f3f4;
+        }
+    }
+
+    &__item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 72px;
+        padding: 16px;
+
+        & span {
+            display: flex;
+            flex-direction: column;
+            align-items: end;
+            gap: 4px;
+        }
+
+        & div {
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+
+            & span {
+                align-items: start;
+                justify-content: center;
+                gap: 0;
+            }
+        }
+    }
+}

packages/appstore/src/components/fiat-transaction-list/fiat-transaction-list.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Statement } from '@deriv/api-types';
+import { isMobile } from '@deriv/shared';
+import { Text } from '@deriv/components';
+import { useGroupedFiatTransactions } from '@deriv/hooks';
+import FiatTransactionListItem from './fiat-transaction-list-item';
+
+type TFiatTransactionListProps = {
+    wallet: any;
+};
+
+const FiatTransactionList = ({ wallet }: TFiatTransactionListProps) => {
+    const grouped_transactions = useGroupedFiatTransactions();
+
+    const TransactionsForADay = ({
+        day,
+        transactions,
+    }: {
+        day: string;
+        transactions: Required<Statement>['transactions'];
+    }) => {
+        return (
+            <div className='fiat-transaction-list__day'>
+                <Text
+                    size={isMobile() ? 'xxxxs' : 'xxxs'}
+                    line_height={isMobile() ? 'm' : 's'}
+                    color='less-prominent'
+                    weight='lighter'
+                >
+                    {day}
+                </Text>
+                {transactions
+                    .map(transaction => {
+                        if (
+                            transaction.amount === undefined ||
+                            transaction.balance_after === undefined ||
+                            transaction.action_type === undefined
+                        )
+                            return null;
+                        return (
+                            <FiatTransactionListItem
+                                key={transaction.transaction_id}
+                                action_type={
+                                    transaction.action_type as React.ComponentProps<
+                                        typeof FiatTransactionListItem
+                                    >['action_type']
+                                }
+                                account_name={'TODO get from store'}
+                                amount={transaction.amount}
+                                balance_after={transaction.balance_after}
+                                currency={'TODO'}
+                                wallet={wallet}
+                            />
+                        );
+                    })
+                    .filter(Boolean)}
+            </div>
+        );
+    };
+
+    return (
+        <div className='fiat-transaction-list'>
+            {Object.entries(grouped_transactions).map(([day, transactions]) => (
+                <TransactionsForADay
+                    key={day}
+                    day={day}
+                    transactions={transactions as Required<Statement>['transactions']}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default FiatTransactionList;

packages/appstore/src/components/fiat-transaction-list/index.ts

@@ -0,0 +1,4 @@
+import FiatTransactionList from './fiat-transaction-list';
+import './fiat-transaction-list.scss';
+
+export default FiatTransactionList;

packages/appstore/src/modules/traders-hub/index.tsx

@@ -14,6 +14,19 @@ import classNames from 'classnames';
 import WalletsBanner from 'Components/wallets-banner';
 import './traders-hub.scss';
 import WalletHeader from 'Components/wallet-header';
+import FiatTransactionList from '../../components/fiat-transaction-list';
+
+const FiatTransactionListDemo = () => {
+    return (
+        <FiatTransactionList
+            wallet={{
+                currency: 'usd',
+                icon: 'IcWalletCurrencyUsd',
+                icon_type: 'fiat',
+            }}
+        />
+    );
+};
 
 const TradersHub = () => {
     const { traders_hub, client, ui } = useStores();
@@ -104,6 +117,7 @@ const TradersHub = () => {
                         <div className='traders-hub__main-container'>
                             <OptionsAndMultipliersListing />
                             <CFDsListing />
+                            <FiatTransactionListDemo />
                         </div>
                     </DesktopWrapper>
                     <MobileWrapper>
@@ -122,6 +136,7 @@ const TradersHub = () => {
                         )}
                         {selected_platform_type === 'options' && <OptionsAndMultipliersListing />}
                         {selected_platform_type === 'cfd' && <CFDsListing />}
+                        <FiatTransactionListDemo />
                     </MobileWrapper>
                     <ModalManager />
                     {scrolled && <TourGuide />}

packages/hooks/package.json

@@ -6,12 +6,15 @@
     "dependencies": {
         "@deriv/api": "^1.0.0",
         "@deriv/stores": "^1.0.0",
-        "react": "^17.0.2"
+        "react": "^17.0.2",
+        "lodash.groupby": "^4.6.0",
+        "moment": "^2.29.2"
     },
     "devDependencies": {
         "typescript": "^4.6.3",
         "@testing-library/user-event": "^13.5.0",
         "@testing-library/react": "^12.0.0",
-        "@testing-library/react-hooks": "^7.0.2"
+        "@testing-library/react-hooks": "^7.0.2",
+        "@types/lodash.groupby": "^4.6.7"
     }
 }

packages/hooks/src/index.ts

@@ -7,6 +7,7 @@ export { default as useCFDRealAccounts } from './useCFDRealAccounts';
 export { default as useCountdown } from './useCountdown';
 export { default as useDepositLocked } from './useDepositLocked';
 export { default as useExchangeRate } from './useExchangeRate';
+export { default as useGroupedFiatTransactions } from './useGroupedFiatTransactions';
 export { default as useHasActiveRealAccount } from './useHasActiveRealAccount';
 export { default as useHasFiatCurrency } from './useHasFiatCurrency';
 export { default as useHasMaltaInvestAccount } from './useHasMaltaInvestAccount';

packages/hooks/src/useGroupedFiatTransactions.ts

@@ -0,0 +1,92 @@
+import _ from 'lodash';
+import moment from 'moment';
+
+const useGroupedFiatTransactions = () => {
+    // TODO: don't hardcode, replace with ... = useFetch('statement');
+    const transactions = [
+        {
+            action_type: 'initial_fund',
+            amount: 42,
+            app_id: 1,
+            balance_after: 42,
+            contract_id: 6842558021,
+            longcode: 'Win payout if AUD/JPY is strictly higher than entry spot at 1 minute after contract start time.',
+            payout: 1,
+            reference_id: {},
+            shortcode: 'CALL_FRXAUDJPY_1_1470637406_1470637466_S0P_0',
+            transaction_id: 13693011401,
+            transaction_time: 1685109944,
+        },
+        {
+            action_type: 'reset_balance',
+            amount: -42,
+            app_id: 2,
+            balance_after: 0,
+            contract_id: 6842548881,
+            longcode: 'Win payout if AUD/JPY is strictly lower than entry spot at 1 minute after contract start time.',
+            payout: 1,
+            purchase_time: 1470637295,
+            reference_id: 13692993001,
+            shortcode: 'PUT_FRXAUDJPY_1_1470637295_1470637355_S0P_0',
+            transaction_id: 13693003421,
+            transaction_time: 1685109944,
+        },
+        {
+            action_type: 'deposit',
+            amount: 2,
+            app_id: {},
+            balance_after: 44.24,
+            contract_id: {},
+            longcode: 'Payment from Binary Services Ltd Apr 2017',
+            payout: {},
+            reference_id: {},
+            shortcode: {},
+            transaction_id: 17494117541,
+            transaction_time: 1685009944,
+        },
+        {
+            action_type: 'withdrawal',
+            amount: -5.55,
+            app_id: {},
+            balance_after: 0,
+            contract_id: {},
+            longcode: 'Account closed. Please contact customer support for assistance.',
+            payout: {},
+            reference_id: {},
+            shortcode: {},
+            transaction_id: 17494415481,
+            transaction_time: 1684009944,
+        },
+        {
+            action_type: 'transfer',
+            amount: 5.55,
+            from: {
+                loginid: '',
+                type: 'trading',
+            },
+            to: {
+                loginid: '',
+                type: 'wallet',
+            },
+            app_id: {},
+            balance_after: 5.55,
+            contract_id: {},
+            longcode: 'Transfer from <> to <>. Includes fees',
+            payout: {},
+            reference_id: {},
+            shortcode: {},
+            transaction_id: 17494415481,
+            transaction_time: 1684009944,
+        },
+    ];
+
+    const grouped_transactions = _.groupBy(transactions, transaction =>
+        moment(transaction.transaction_time * 1000)
+            .startOf('day')
+            .format('DD MMM YYYY')
+    );
+
+    return grouped_transactions;
+};
+
+export default useGroupedFiatTransactions;