Aum/wall 228/crypto cashier changes for third party processor coinspaid

packages/cashier/src/components/alert-banner/alert-banner.scss

@@ -0,0 +1,13 @@
+.alert-banner {
+    display: grid;
+    grid-template-columns: auto auto;
+    width: auto;
+    padding: 0.8rem;
+    margin: 2.4rem 0;
+    border-radius: $BORDER_RADIUS;
+    background-color: $alpha-color-yellow-1;
+
+    svg {
+        margin: 0.3rem 0.3rem 0 0;
+    }
+}

packages/cashier/src/components/alert-banner/alert-banner.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon, Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import './alert-banner.scss';
+
+type TAlertBanner = {
+    className?: string;
+    icon: string;
+    message: JSX.Element | string;
+};
+
+const AlertBanner = ({ className, icon, message }: TAlertBanner) => {
+    return (
+        <div className={classNames('alert-banner', className)}>
+            <Icon size={16} icon={icon} />
+            <Text as='p' align='center' size='xs'>
+                {message}
+            </Text>
+        </div>
+    );
+};
+
+export default AlertBanner;

packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { isMobile } from '@deriv/shared';
 import CryptoTransactionsRenderer from '../crypto-transactions-renderer';
 import CashierProviders from '../../../cashier-providers';
@@ -135,4 +136,68 @@ describe('<CryptoTransactionsRenderer />', () => {
             mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsCancelModal
         ).toHaveBeenCalledTimes(1);
     });
+
+    it('should display popover when hovering on tooltip for third-party transactions (CoinsPaid)', () => {
+        (isMobile as jest.Mock).mockReturnValue(false);
+        const tooltip_props = {
+            row: {
+                address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+                address_url: 'https://explorer.coinspaid.com/CP:Abcd1234',
+                amount: 0.005,
+                id: '3',
+                is_valid_to_cancel: 1,
+                status_code: 'LOCKED',
+                status_message:
+                    "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel.",
+                submit_date: 1640603927,
+                transaction_type: 'withdrawal',
+                transaction_url: 'CP:Abcd1234',
+            },
+        };
+
+        render(<CryptoTransactionsRenderer {...tooltip_props} />, {
+            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
+        });
+
+        const crypto_transactions_history_table_tooltip = screen.getByTestId(
+            'dt_crypto_transactions_history_table_tooltip'
+        );
+
+        expect(crypto_transactions_history_table_tooltip).toBeInTheDocument();
+
+        userEvent.hover(crypto_transactions_history_table_tooltip);
+        expect(screen.getByText('The details of this transaction is available on CoinsPaid.')).toBeInTheDocument();
+        userEvent.unhover(crypto_transactions_history_table_tooltip);
+    });
+
+    it('should check whether the tooltip is clickable for third-party transactions (CoinsPaid)', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        const tooltip_props = {
+            row: {
+                address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+                address_url: 'https://explorer.coinspaid.com/CP:Abcd1234',
+                amount: 0.005,
+                id: '3',
+                is_valid_to_cancel: 1,
+                status_code: 'LOCKED',
+                status_message:
+                    "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel.",
+                submit_date: 1640603927,
+                transaction_type: 'withdrawal',
+                transaction_url: 'CP:Abcd1234',
+            },
+            onTooltipClick: jest.fn(),
+        };
+
+        render(<CryptoTransactionsRenderer {...tooltip_props} />, {
+            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
+        });
+
+        const crypto_transactions_history_table_tooltip_mobile = screen.getByTestId(
+            'dt_crypto_transactions_history_table_tooltip_mobile'
+        );
+
+        expect(crypto_transactions_history_table_tooltip_mobile).toBeInTheDocument();
+        fireEvent.click(crypto_transactions_history_table_tooltip_mobile);
+    });
 });

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss

@@ -156,6 +156,14 @@
                 justify-content: center;
             }
         }
+
+        &-tooltip {
+            margin-left: 0.4rem;
+            svg {
+                display: flex;
+                align-items: center;
+            }
+        }
     }
     &__data-list {
         flex: 1;
@@ -186,4 +194,8 @@
             position: static;
         }
     }
+
+    &-body {
+        font-size: var(--text-size-xxs);
+    }
 }

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataList, Icon, Loading, MobileWrapper, Table, Text } from '@deriv/components';
+import { DataList, Icon, Loading, MobileWrapper, Modal, Table, Text } from '@deriv/components';
 import { isDesktop, isMobile, routes } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
@@ -29,6 +29,7 @@ const CryptoTransactionsHistory = observer(() => {
     const { crypto_transactions, is_loading, setIsCryptoTransactionsVisible } = transaction_history;
     const { setIsDeposit } = general_store;
     const { currency } = client;
+    const [is_modal_visible, setIsModalVisible] = React.useState(false);
 
     React.useEffect(() => {
         return () => setIsCryptoTransactionsVisible(false);
@@ -79,7 +80,10 @@ const CryptoTransactionsHistory = observer(() => {
                                     // TODO: CHECK THIS TYPE ERROR
                                     data_source={crypto_transactions}
                                     rowRenderer={(row_props: TCryptoTransactionDetailsRow) => (
-                                        <CryptoTransactionsRenderer {...row_props} />
+                                        <CryptoTransactionsRenderer
+                                            {...row_props}
+                                            onTooltipClick={() => setIsModalVisible(true)}
+                                        />
                                     )}
                                     keyMapper={(row: TCryptoTransactionDetails) => row.id}
                                     row_gap={isMobile() ? 8 : 0}
@@ -95,6 +99,19 @@ const CryptoTransactionsHistory = observer(() => {
                     </div>
                 )}
             </div>
+            <Modal
+                has_close_icon
+                is_open={is_modal_visible}
+                title='Note'
+                toggleModal={() => setIsModalVisible(old => !old)}
+                width='44rem'
+                height='14rem'
+                className='crypto-transactions-history__modal'
+            >
+                <Modal.Body className='crypto-transactions-history__modal-body'>
+                    {localize('The details of this transaction is available on CoinsPaid.')}
+                </Modal.Body>
+            </Modal>
         </React.Fragment>
     );
 });

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx

@@ -10,9 +10,10 @@ import { useCashierStore } from '../../stores/useCashierStores';
 
 type TCryptoTransactionsRendererProps = {
     row: TCryptoTransactionDetails;
+    onTooltipClick: VoidFunction;
 };
 
-const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransactionsRendererProps) => {
+const CryptoTransactionsRenderer = observer(({ row: crypto, onTooltipClick }: TCryptoTransactionsRendererProps) => {
     const { client } = useStore();
     const { transaction_history } = useCashierStore();
     const { cancelCryptoTransaction, showCryptoTransactionsCancelModal, showCryptoTransactionsStatusModal } =
@@ -61,6 +62,8 @@ const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransaction
         showCryptoTransactionsStatusModal(description, name);
     };
 
+    const is_third_party_transaction = transaction_url?.includes('CP:');
+
     if (isMobile()) {
         return (
             <div>
@@ -130,6 +133,15 @@ const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransaction
                         <Text as='p' color='prominent' size='xxs' weight='bold'>
                             {localize('Transaction hash')}
                         </Text>
+                        {is_third_party_transaction && (
+                            <Icon
+                                className='crypto-transactions-history__table-tooltip'
+                                data_testid='dt_crypto_transactions_history_table_tooltip_mobile'
+                                onClick={onTooltipClick}
+                                icon='IcHelpCentre'
+                                custom_color='#999999'
+                            />
+                        )}
                     </Table.Cell>
                     <Table.Cell className='crypto-transactions-history__table-hash'>
                         <a
@@ -223,22 +235,34 @@ const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransaction
                 </Table.Cell>
                 <Table.Cell className='crypto-transactions-history__table-hash'>
                     {transaction_url ? (
-                        <Popover
-                            alignment='right'
-                            className='crypto-transactions-history__table-popover'
-                            message={localize('View transaction on Blockchain')}
-                        >
-                            <a
-                                className='crypto-transactions-history__table-link'
-                                href={transaction_url}
-                                rel='noopener noreferrer'
-                                target='_blank'
+                        <>
+                            <Popover
+                                alignment='right'
+                                className='crypto-transactions-history__table-popover'
+                                message={localize('View transaction on Blockchain')}
                             >
-                                <Text as='p' size='xs' color='red'>
-                                    {status.transaction_hash}
-                                </Text>
-                            </a>
-                        </Popover>
+                                <a
+                                    className='crypto-transactions-history__table-link'
+                                    href={transaction_url}
+                                    rel='noopener noreferrer'
+                                    target='_blank'
+                                >
+                                    <Text as='p' size='xs' color='red'>
+                                        {status.transaction_hash}
+                                    </Text>
+                                </a>
+                            </Popover>
+                            {is_third_party_transaction && (
+                                <Popover
+                                    alignment='right'
+                                    className='crypto-transactions-history__table-tooltip'
+                                    data_testid='dt_crypto_transactions_history_table_tooltip'
+                                    message={localize('The details of this transaction is available on CoinsPaid.')}
+                                >
+                                    <Icon icon='IcHelpCentre' custom_color='var(--status-adjustment)' />
+                                </Popover>
+                            )}
+                        </>
                     ) : (
                         <Text as='p' size='xs' color='red'>
                             {status.transaction_hash}

packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx

@@ -27,6 +27,24 @@ jest.mock('Components/recent-transaction', () => {
     return RecentTransactions;
 });
 
+jest.mock('@deriv/api', () => {
+    return {
+        ...jest.requireActual('@deriv/api'),
+        useFetch: jest.fn(() => ({
+            data: {
+                currencies_config: {
+                    tUSDT: {
+                        minimum_deposit: 2,
+                        minimum_withdrawal: 4.54,
+                    },
+                },
+            },
+            isLoading: false,
+            isSuccess: true,
+        })),
+    };
+});
+
 describe('<CryptoDeposit />', () => {
     let history: ReturnType<typeof createBrowserHistory>;
     const renderWithRouter = (component: JSX.Element, mockRootStore: TRootStore) => {
@@ -437,4 +455,37 @@ describe('<CryptoDeposit />', () => {
 
         expect(screen.getByText('RecentTransactions')).toBeInTheDocument();
     });
+
+    it('should show AlertBanner for minimum deposit when third-party payment processor is used (CoinsPaid)', () => {
+        const minimum_deposit = 2;
+        const currency = 'tUSDT';
+        const mockRootStore = {
+            client: {
+                currency: 'tUSDT',
+            },
+            modules: {
+                cashier: {
+                    onramp: {
+                        is_deposit_address_loading: false,
+                        api_error: '',
+                        deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+                        pollApiForDepositAddress: jest.fn(),
+                    },
+                    transaction_history: {
+                        crypto_transactions: [{}],
+                        onMount: jest.fn(),
+                    },
+                    general_store: {
+                        setIsDeposit: jest.fn(),
+                    },
+                },
+            },
+        };
+        renderWithRouter(<CryptoDeposit />, mockRootStore as TRootStore);
+        expect(
+            screen.getByText(
+                `A minimum deposit value of ${minimum_deposit} ${currency} is required. Otherwise, the funds will be lost and cannot be recovered.`
+            )
+        ).toBeInTheDocument();
+    });
 });

packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss

@@ -25,24 +25,24 @@
             flex-direction: column;
             align-items: center;
 
-            &__text {
-                display: flex;
-                justify-content: space-between;
-                width: auto;
-                padding: 0.8rem;
-                margin: 2.4rem 0;
-                border-radius: $BORDER_RADIUS;
-                background-color: $alpha-color-yellow-1;
-
-                svg {
-                    margin-right: 0.3rem;
-                }
-            }
             .dc-btn {
                 max-width: 6rem;
                 padding: 0.3rem 0.8rem;
             }
         }
+
+        .crypto-third-party-alert {
+            background-color: $color-yellow;
+
+            .dc-text {
+                background-color: $color-yellow;
+                color: $color-black-1;
+            }
+
+            .dc-icon {
+                --fill-color1: $color-black-1;
+            }
+        }
     }
     &__transaction-currency {
         margin: 2.4rem 0 0.8rem;
@@ -89,4 +89,17 @@
     &__fiat-onramp-button {
         margin-bottom: 2.4rem;
     }
+
+    &__alert-message-box {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 1.6rem;
+        background-color: $color-yellow;
+
+        &__text {
+            margin-left: 0.8rem;
+            color: $color-black-1;
+        }
+    }
 }