From 7fd955c1bdee191e912419f5b0a5cb77e79df13c Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Thu, 13 Apr 2023 15:18:15 +0400 Subject: [PATCH 01/22] feat: Tooltip for crypto transactions processed by third-party payement processors --- .../crypto-transactions-history.scss | 4 ++ .../crypto-transactions-renderer.tsx | 41 ++++++++++++------- 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss index 6889bd3d18fa..e83df5675492 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss @@ -156,6 +156,10 @@ justify-content: center; } } + + &-tooltip { + margin-left: 0.4rem; + } } &__data-list { flex: 1; diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx index 2891b398837d..4e62f6eb1ebe 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx @@ -223,22 +223,33 @@ const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransaction {transaction_url ? ( - - + - - {status.transaction_hash} - - - + + + {status.transaction_hash} + + + + {transaction_url.includes('CP:') && ( + + + + )} + ) : ( {status.transaction_hash} From adb5c7d253921a5d3be31ab7c453af0f3dd97fc5 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Wed, 19 Apr 2023 13:44:12 +0400 Subject: [PATCH 02/22] feat: Added popup note for mobile view for third-party payment tooltip --- .../crypto-transactions-history.scss | 3 +++ .../crypto-transactions-history.tsx | 20 +++++++++++++++++-- .../crypto-transactions-renderer.tsx | 14 +++++++++++-- 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss index e83df5675492..8bfd695d4fbd 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss @@ -190,4 +190,7 @@ position: static; } } + &__modal-body { + font-size: 1.5rem; + } } diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx index a6d631b8d4c6..6b99938772c7 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx +++ b/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, Table, Text, Modal } 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(() => { data_list_className='crypto-transactions-history__data-list' data_source={crypto_transactions} rowRenderer={(row_props: TCryptoTransactionDetailsRow) => ( - + setIsModalVisible(true)} + /> )} keyMapper={(row: TCryptoTransactionDetails) => row.id} row_gap={isMobile() ? 8 : 0} @@ -95,6 +99,18 @@ const CryptoTransactionsHistory = observer(() => { )} + setIsModalVisible(old => !old)} + width={'44rem'} + height={'14rem'} + > + + {localize('The details of this transaction is available on CoinsPaid.')} + + ); }); diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx index 4e62f6eb1ebe..67fe8f545f0c 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx +++ b/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 } = @@ -130,6 +131,14 @@ const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransaction {localize('Transaction hash')} + {transaction_url.includes('CP:') && ( + + )} From e4b47a521bcb7d24fa8fd2583dc823678b7a7557 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 09:49:44 +0400 Subject: [PATCH 03/22] feat: added alert banner component in cashier package --- .../components/alert-banner/alert-banner.scss | 13 ++++++++++ .../components/alert-banner/alert-banner.tsx | 24 +++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 packages/cashier/src/components/alert-banner/alert-banner.scss create mode 100644 packages/cashier/src/components/alert-banner/alert-banner.tsx diff --git a/packages/cashier/src/components/alert-banner/alert-banner.scss b/packages/cashier/src/components/alert-banner/alert-banner.scss new file mode 100644 index 000000000000..02a81acfc4a0 --- /dev/null +++ b/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; + } +} diff --git a/packages/cashier/src/components/alert-banner/alert-banner.tsx b/packages/cashier/src/components/alert-banner/alert-banner.tsx new file mode 100644 index 000000000000..7d1ee4c6a4df --- /dev/null +++ b/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 = { + icon: string; + message: string; + classname?: string; +}; + +const AlertBanner = ({ icon, message, classname }: TAlertBanner) => { + return ( +
+ + + + +
+ ); +}; + +export default AlertBanner; From 96460757dfdf41f3df8146408a76984d3e11cc7b Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 09:51:11 +0400 Subject: [PATCH 04/22] feat: added IcAlertWarningDark icon --- .../src/components/icon/common/ic-alert-warning-dark.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/components/src/components/icon/common/ic-alert-warning-dark.svg diff --git a/packages/components/src/components/icon/common/ic-alert-warning-dark.svg b/packages/components/src/components/icon/common/ic-alert-warning-dark.svg new file mode 100644 index 000000000000..022a7a984c67 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-alert-warning-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file From 4b4e7b3246e47ab0fca76c3caf891d04d830e0f1 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 11:43:46 +0400 Subject: [PATCH 05/22] chore: working on test cases 1 --- .../crypto-transactions-history.spec.tsx | 75 ++++++- .../crypto-transactions-renderer.spec.tsx | 207 +++++++++++------- 2 files changed, 198 insertions(+), 84 deletions(-) diff --git a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx index 5f75b7b3fd40..891700338ced 100644 --- a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx @@ -1,8 +1,15 @@ import React from 'react'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +// import { isMobile } from '@deriv/shared'; import CryptoTransactionsHistory from '../crypto-transactions-history'; +import CryptoTransactionsRenderer from '../crypto-transactions-renderer'; import CashierProviders from '../../../cashier-providers'; +jest.mock('@deriv/shared', () => ({ + ...jest.requireActual('@deriv/shared'), + isMobile: () => true, +})); + describe('', () => { let mockRootStore; @@ -97,4 +104,70 @@ describe('', () => { expect(screen.getByText(el)).toBeInTheDocument(); }); }); + + fit('should check whether the popup appears when tooltip for transaction hash is clicked in mobile mode', () => { + // (isMobile as jest.Mock).mockReturnValue(true); + // const setIsModalVisible = jest.fn(); + // jest.spyOn(React, 'useState').mockImplementationOnce(() => React.useState(true)); + + mockRootStore.modules.cashier.transaction_history.crypto_transactions = [ + { + 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: 'https://explorer.coinspaid.com/CP:Abcd1234', + transaction_hash: 'CP:Abcd1234', + }, + ]; + mockRootStore.modules.cashier.transaction_history.is_loading = false; + + // const 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: 'https://explorer.coinspaid.com/CP:Abcd1234', + // transaction_hash: 'CP:Abcd1234', + // }, + // }; + + render(, { + wrapper: ({ children }) => {children}, + }); + // render( setIsModalVisible(true)} />, { + // wrapper: ({ children }) => {children}, + // }); + + // screen.debug(); + + waitFor(() => screen.getByTestId('dt_crypto_transactions_history_table_tooltip_mobile')); + + 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); + + waitFor(() => + expect(screen.getByText('The details of this transaction is available on CoinsPaid.')).toBeInTheDocument() + ); + // screen.debug(); + // expect(screen.getByText('The details of this transaction is available on CoinsPaid.')).toBeInTheDocument(); + // expect(screen.getByText('Note')).toBeInTheDocument(); + }); }); diff --git a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx index 290c38cab97a..c7e7ed40d4d8 100644 --- a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx @@ -1,12 +1,13 @@ 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'; -jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({ - ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'), - isMobile: jest.fn(), +jest.mock('@deriv/shared', () => ({ + ...jest.requireActual('@deriv/shared'), + isMobile: () => true, })); describe('', () => { @@ -27,7 +28,7 @@ describe('', () => { }, }; }); - const props = { + const props: React.ComponentProps = { row: { address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', address_url: 'https://www.blockchain.com/btc-testnet/address/tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', @@ -39,11 +40,14 @@ describe('', () => { "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: undefined, + transaction_hash: undefined, }, + onTooltipClick: jest.fn(), }; const renderCryptoTransactionsRenderer = () => - render(, { + render(, { wrapper: ({ children }) => {children}, }); @@ -57,82 +61,119 @@ describe('', () => { expect(screen.getByText('In review')).toBeInTheDocument(); }); - it('should show the popover with the proper message, "Yes" and "No" buttons if the "Cancel transaction" cross-button was clicked in Desktop mode', () => { - renderCryptoTransactionsRenderer(); - - const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); - fireEvent.click(cancel_transaction_div); - - expect(screen.getByText('Are you sure you want to cancel this transaction?')).toBeInTheDocument(); - expect(screen.getByText('Yes')).toBeInTheDocument(); - expect(screen.getByText('No')).toBeInTheDocument(); - }); - - it('should close the popover when "No" button is clicked in Desktop mode', async () => { - renderCryptoTransactionsRenderer(); - - const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); - fireEvent.click(cancel_transaction_div); - const no_btn = screen.getByText('No'); - fireEvent.click(no_btn); - - await waitFor(() => { - expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); - expect(screen.queryByText('Yes')).not.toBeInTheDocument(); - expect(screen.queryByText('No')).not.toBeInTheDocument(); - }); - }); - - it('should close the popover when "Yes" button is clicked in Desktop mode', async () => { - renderCryptoTransactionsRenderer(); - - const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); - fireEvent.click(cancel_transaction_div); - const yes_btn = screen.getByText('Yes'); - fireEvent.click(yes_btn); - - await waitFor(() => { - expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); - expect(screen.queryByText('Yes')).not.toBeInTheDocument(); - expect(screen.queryByText('No')).not.toBeInTheDocument(); - }); - }); - - it('should trigger onClick callback when "crypto-transactions-history__table-status" is clicked in Mobile mode', () => { - (isMobile as jest.Mock).mockReturnValue(true); - - renderCryptoTransactionsRenderer(); - - const table_status = screen.getByTestId('dt_table_status'); - fireEvent.click(table_status); - - expect( - mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsStatusModal - ).toHaveBeenCalledTimes(1); - }); - - it('should show the proper data in Mobile mode', () => { - (isMobile as jest.Mock).mockReturnValue(true); - - renderCryptoTransactionsRenderer(); - - expect(screen.getByText('withdrawal')).toBeInTheDocument(); - expect(screen.getByText('Pending')).toBeInTheDocument(); - expect(screen.getByText('-0.00500000 BTC')).toBeInTheDocument(); - expect(screen.getByText('tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt')).toBeInTheDocument(); - expect(screen.getByText('In review')).toBeInTheDocument(); - expect(screen.getByText('Cancel transaction')).toBeInTheDocument(); - }); - - it('should trigger onClick callback when the user clicks "Cancel transaction" button in Mobile mode', () => { - (isMobile as jest.Mock).mockReturnValue(true); - - renderCryptoTransactionsRenderer(); - - const cancel_transaction_btn = screen.getByTestId('dt_cancel_transaction'); - fireEvent.click(cancel_transaction_btn); - expect( - mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsCancelModal - ).toHaveBeenCalledTimes(1); - }); + // it('should show the popover with the proper message, "Yes" and "No" buttons if the "Cancel transaction" cross-button was clicked in Desktop mode', () => { + // renderCryptoTransactionsRenderer(); + + // const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); + // fireEvent.click(cancel_transaction_div); + + // expect(screen.getByText('Are you sure you want to cancel this transaction?')).toBeInTheDocument(); + // expect(screen.getByText('Yes')).toBeInTheDocument(); + // expect(screen.getByText('No')).toBeInTheDocument(); + // }); + + // it('should close the popover when "No" button is clicked in Desktop mode', async () => { + // renderCryptoTransactionsRenderer(); + + // const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); + // fireEvent.click(cancel_transaction_div); + // const no_btn = screen.getByText('No'); + // fireEvent.click(no_btn); + + // await waitFor(() => { + // expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); + // expect(screen.queryByText('Yes')).not.toBeInTheDocument(); + // expect(screen.queryByText('No')).not.toBeInTheDocument(); + // }); + // }); + + // it('should close the popover when "Yes" button is clicked in Desktop mode', async () => { + // renderCryptoTransactionsRenderer(); + + // const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); + // fireEvent.click(cancel_transaction_div); + // const yes_btn = screen.getByText('Yes'); + // fireEvent.click(yes_btn); + + // await waitFor(() => { + // expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); + // expect(screen.queryByText('Yes')).not.toBeInTheDocument(); + // expect(screen.queryByText('No')).not.toBeInTheDocument(); + // }); + // }); + + // it('should trigger onClick callback when "crypto-transactions-history__table-status" is clicked in Mobile mode', () => { + // (isMobile as jest.Mock).mockReturnValue(true); + + // renderCryptoTransactionsRenderer(); + + // const table_status = screen.getByTestId('dt_table_status'); + // fireEvent.click(table_status); + + // expect( + // mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsStatusModal + // ).toHaveBeenCalledTimes(1); + // }); + + // it('should show the proper data in Mobile mode', () => { + // (isMobile as jest.Mock).mockReturnValue(true); + + // renderCryptoTransactionsRenderer(); + + // expect(screen.getByText('withdrawal')).toBeInTheDocument(); + // expect(screen.getByText('Pending')).toBeInTheDocument(); + // expect(screen.getByText('-0.00500000 BTC')).toBeInTheDocument(); + // expect(screen.getByText('tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt')).toBeInTheDocument(); + // expect(screen.getByText('In review')).toBeInTheDocument(); + // expect(screen.getByText('Cancel transaction')).toBeInTheDocument(); + // }); + + // it('should trigger onClick callback when the user clicks "Cancel transaction" button in Mobile mode', () => { + // (isMobile as jest.Mock).mockReturnValue(true); + + // renderCryptoTransactionsRenderer(); + + // const cancel_transaction_btn = screen.getByTestId('dt_cancel_transaction'); + // fireEvent.click(cancel_transaction_btn); + // expect( + // mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsCancelModal + // ).toHaveBeenCalledTimes(1); + // }); + + // fit('should check whether the tooltip appears beside the transaction hash if the it is processed by a third-party payment processor (CoinsPaid for now)', () => { + // const 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: 'https://explorer.coinspaid.com/CP:Abcd1234', + // transaction_hash: 'CP:Abcd1234', + // }, + // onTooltipClick: jest.fn(), + // }; + + // render(, { + // wrapper: ({ children }) => {children}, + // }); + + // const crypto_transactions_history_table_tooltip = screen.getByTestId( + // 'dt_crypto_transactions_history_table_tooltip_mobile' + // ); + + // 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); + + // userEvent.click(crypto_transactions_history_table_tooltip); + // expect(props.onTooltipClick).toBeCalledTimes(1); + // expect(screen.queryByText('foo')).toBeInTheDocument(); + // }); }); From 0dec7ed7782b2de25958138dc2b767ab11526fe6 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 12:25:28 +0400 Subject: [PATCH 06/22] chore: reseting testcase to upstream/master --- .../crypto-transactions-history.spec.tsx | 75 +------ .../crypto-transactions-renderer.spec.tsx | 207 +++++++----------- 2 files changed, 84 insertions(+), 198 deletions(-) diff --git a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx index 891700338ced..5f75b7b3fd40 100644 --- a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx @@ -1,15 +1,8 @@ import React from 'react'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -// import { isMobile } from '@deriv/shared'; +import { fireEvent, render, screen } from '@testing-library/react'; import CryptoTransactionsHistory from '../crypto-transactions-history'; -import CryptoTransactionsRenderer from '../crypto-transactions-renderer'; import CashierProviders from '../../../cashier-providers'; -jest.mock('@deriv/shared', () => ({ - ...jest.requireActual('@deriv/shared'), - isMobile: () => true, -})); - describe('', () => { let mockRootStore; @@ -104,70 +97,4 @@ describe('', () => { expect(screen.getByText(el)).toBeInTheDocument(); }); }); - - fit('should check whether the popup appears when tooltip for transaction hash is clicked in mobile mode', () => { - // (isMobile as jest.Mock).mockReturnValue(true); - // const setIsModalVisible = jest.fn(); - // jest.spyOn(React, 'useState').mockImplementationOnce(() => React.useState(true)); - - mockRootStore.modules.cashier.transaction_history.crypto_transactions = [ - { - 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: 'https://explorer.coinspaid.com/CP:Abcd1234', - transaction_hash: 'CP:Abcd1234', - }, - ]; - mockRootStore.modules.cashier.transaction_history.is_loading = false; - - // const 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: 'https://explorer.coinspaid.com/CP:Abcd1234', - // transaction_hash: 'CP:Abcd1234', - // }, - // }; - - render(, { - wrapper: ({ children }) => {children}, - }); - // render( setIsModalVisible(true)} />, { - // wrapper: ({ children }) => {children}, - // }); - - // screen.debug(); - - waitFor(() => screen.getByTestId('dt_crypto_transactions_history_table_tooltip_mobile')); - - 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); - - waitFor(() => - expect(screen.getByText('The details of this transaction is available on CoinsPaid.')).toBeInTheDocument() - ); - // screen.debug(); - // expect(screen.getByText('The details of this transaction is available on CoinsPaid.')).toBeInTheDocument(); - // expect(screen.getByText('Note')).toBeInTheDocument(); - }); }); diff --git a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx index c7e7ed40d4d8..290c38cab97a 100644 --- a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx @@ -1,13 +1,12 @@ 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'; -jest.mock('@deriv/shared', () => ({ - ...jest.requireActual('@deriv/shared'), - isMobile: () => true, +jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({ + ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'), + isMobile: jest.fn(), })); describe('', () => { @@ -28,7 +27,7 @@ describe('', () => { }, }; }); - const props: React.ComponentProps = { + const props = { row: { address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', address_url: 'https://www.blockchain.com/btc-testnet/address/tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', @@ -40,14 +39,11 @@ describe('', () => { "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: undefined, - transaction_hash: undefined, }, - onTooltipClick: jest.fn(), }; const renderCryptoTransactionsRenderer = () => - render(, { + render(, { wrapper: ({ children }) => {children}, }); @@ -61,119 +57,82 @@ describe('', () => { expect(screen.getByText('In review')).toBeInTheDocument(); }); - // it('should show the popover with the proper message, "Yes" and "No" buttons if the "Cancel transaction" cross-button was clicked in Desktop mode', () => { - // renderCryptoTransactionsRenderer(); - - // const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); - // fireEvent.click(cancel_transaction_div); - - // expect(screen.getByText('Are you sure you want to cancel this transaction?')).toBeInTheDocument(); - // expect(screen.getByText('Yes')).toBeInTheDocument(); - // expect(screen.getByText('No')).toBeInTheDocument(); - // }); - - // it('should close the popover when "No" button is clicked in Desktop mode', async () => { - // renderCryptoTransactionsRenderer(); - - // const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); - // fireEvent.click(cancel_transaction_div); - // const no_btn = screen.getByText('No'); - // fireEvent.click(no_btn); - - // await waitFor(() => { - // expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); - // expect(screen.queryByText('Yes')).not.toBeInTheDocument(); - // expect(screen.queryByText('No')).not.toBeInTheDocument(); - // }); - // }); - - // it('should close the popover when "Yes" button is clicked in Desktop mode', async () => { - // renderCryptoTransactionsRenderer(); - - // const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); - // fireEvent.click(cancel_transaction_div); - // const yes_btn = screen.getByText('Yes'); - // fireEvent.click(yes_btn); - - // await waitFor(() => { - // expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); - // expect(screen.queryByText('Yes')).not.toBeInTheDocument(); - // expect(screen.queryByText('No')).not.toBeInTheDocument(); - // }); - // }); - - // it('should trigger onClick callback when "crypto-transactions-history__table-status" is clicked in Mobile mode', () => { - // (isMobile as jest.Mock).mockReturnValue(true); - - // renderCryptoTransactionsRenderer(); - - // const table_status = screen.getByTestId('dt_table_status'); - // fireEvent.click(table_status); - - // expect( - // mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsStatusModal - // ).toHaveBeenCalledTimes(1); - // }); - - // it('should show the proper data in Mobile mode', () => { - // (isMobile as jest.Mock).mockReturnValue(true); - - // renderCryptoTransactionsRenderer(); - - // expect(screen.getByText('withdrawal')).toBeInTheDocument(); - // expect(screen.getByText('Pending')).toBeInTheDocument(); - // expect(screen.getByText('-0.00500000 BTC')).toBeInTheDocument(); - // expect(screen.getByText('tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt')).toBeInTheDocument(); - // expect(screen.getByText('In review')).toBeInTheDocument(); - // expect(screen.getByText('Cancel transaction')).toBeInTheDocument(); - // }); - - // it('should trigger onClick callback when the user clicks "Cancel transaction" button in Mobile mode', () => { - // (isMobile as jest.Mock).mockReturnValue(true); - - // renderCryptoTransactionsRenderer(); - - // const cancel_transaction_btn = screen.getByTestId('dt_cancel_transaction'); - // fireEvent.click(cancel_transaction_btn); - // expect( - // mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsCancelModal - // ).toHaveBeenCalledTimes(1); - // }); - - // fit('should check whether the tooltip appears beside the transaction hash if the it is processed by a third-party payment processor (CoinsPaid for now)', () => { - // const 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: 'https://explorer.coinspaid.com/CP:Abcd1234', - // transaction_hash: 'CP:Abcd1234', - // }, - // onTooltipClick: jest.fn(), - // }; - - // render(, { - // wrapper: ({ children }) => {children}, - // }); - - // const crypto_transactions_history_table_tooltip = screen.getByTestId( - // 'dt_crypto_transactions_history_table_tooltip_mobile' - // ); - - // 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); - - // userEvent.click(crypto_transactions_history_table_tooltip); - // expect(props.onTooltipClick).toBeCalledTimes(1); - // expect(screen.queryByText('foo')).toBeInTheDocument(); - // }); + it('should show the popover with the proper message, "Yes" and "No" buttons if the "Cancel transaction" cross-button was clicked in Desktop mode', () => { + renderCryptoTransactionsRenderer(); + + const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); + fireEvent.click(cancel_transaction_div); + + expect(screen.getByText('Are you sure you want to cancel this transaction?')).toBeInTheDocument(); + expect(screen.getByText('Yes')).toBeInTheDocument(); + expect(screen.getByText('No')).toBeInTheDocument(); + }); + + it('should close the popover when "No" button is clicked in Desktop mode', async () => { + renderCryptoTransactionsRenderer(); + + const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); + fireEvent.click(cancel_transaction_div); + const no_btn = screen.getByText('No'); + fireEvent.click(no_btn); + + await waitFor(() => { + expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); + expect(screen.queryByText('Yes')).not.toBeInTheDocument(); + expect(screen.queryByText('No')).not.toBeInTheDocument(); + }); + }); + + it('should close the popover when "Yes" button is clicked in Desktop mode', async () => { + renderCryptoTransactionsRenderer(); + + const cancel_transaction_div = screen.getByTestId('dt_crypto_transactions_history_table_button'); + fireEvent.click(cancel_transaction_div); + const yes_btn = screen.getByText('Yes'); + fireEvent.click(yes_btn); + + await waitFor(() => { + expect(screen.queryByText('Are you sure you want to cancel this transaction?')).not.toBeInTheDocument(); + expect(screen.queryByText('Yes')).not.toBeInTheDocument(); + expect(screen.queryByText('No')).not.toBeInTheDocument(); + }); + }); + + it('should trigger onClick callback when "crypto-transactions-history__table-status" is clicked in Mobile mode', () => { + (isMobile as jest.Mock).mockReturnValue(true); + + renderCryptoTransactionsRenderer(); + + const table_status = screen.getByTestId('dt_table_status'); + fireEvent.click(table_status); + + expect( + mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsStatusModal + ).toHaveBeenCalledTimes(1); + }); + + it('should show the proper data in Mobile mode', () => { + (isMobile as jest.Mock).mockReturnValue(true); + + renderCryptoTransactionsRenderer(); + + expect(screen.getByText('withdrawal')).toBeInTheDocument(); + expect(screen.getByText('Pending')).toBeInTheDocument(); + expect(screen.getByText('-0.00500000 BTC')).toBeInTheDocument(); + expect(screen.getByText('tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt')).toBeInTheDocument(); + expect(screen.getByText('In review')).toBeInTheDocument(); + expect(screen.getByText('Cancel transaction')).toBeInTheDocument(); + }); + + it('should trigger onClick callback when the user clicks "Cancel transaction" button in Mobile mode', () => { + (isMobile as jest.Mock).mockReturnValue(true); + + renderCryptoTransactionsRenderer(); + + const cancel_transaction_btn = screen.getByTestId('dt_cancel_transaction'); + fireEvent.click(cancel_transaction_btn); + expect( + mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsCancelModal + ).toHaveBeenCalledTimes(1); + }); }); From c5db1228eebc36c9b1fb127806fc080f218ce05a Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 12:50:56 +0400 Subject: [PATCH 07/22] chore: added test case for tooltip in desktop mode --- .../crypto-transactions-renderer.spec.tsx | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx index 290c38cab97a..c416b6141766 100644 --- a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx @@ -1,8 +1,11 @@ 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'; +import { transaction } from 'mobx'; +import { freemem } from 'os'; jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({ ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'), @@ -135,4 +138,68 @@ describe('', () => { 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(, { + wrapper: ({ children }) => {children}, + }); + + 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(, { + wrapper: ({ children }) => {children}, + }); + + 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); + }); }); From 7fad31ac8079a28fd53e5cf223127e177ed0deb6 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 13:04:33 +0400 Subject: [PATCH 08/22] feat: AlertBanner for cryptoc with minimum deposit using third-party processor (CoinsPaid) --- .../deposit/crypto-deposit/crypto-deposit.tsx | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx index 2dfb8c851ac3..9d37bdb5815b 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx @@ -3,9 +3,11 @@ import { Button, ButtonLink, Clipboard, Dropdown, Icon, Loading, Text } from '@d import { localize, Localize } from '@deriv/translations'; import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared'; import { useStore, observer } from '@deriv/stores'; +import { useFetch } from '@deriv/api'; import CashierBreadcrumb from '../../../components/cashier-breadcrumb'; import QRCode from 'qrcode.react'; import RecentTransaction from '../../../components/recent-transaction'; +import AlertBanner from '../../../components/alert-banner/alert-banner'; import { useCashierStore } from '../../../stores/useCashierStores'; import './crypto-deposit.scss'; @@ -17,6 +19,12 @@ const CryptoDeposit = observer(() => { const { crypto_transactions, onMount: recentTransactionOnMount } = transaction_history; const { setIsDeposit } = general_store; + const { data, isLoading, isSuccess } = useFetch('crypto_config', { + payload: { + currency_code: currency, + }, + }); + React.useEffect(() => { recentTransactionOnMount(); }, [recentTransactionOnMount]); @@ -150,10 +158,10 @@ const CryptoDeposit = observer(() => { {api_error ? (
- - - - +
) : ( <> - - {qrcode_header || header_note} - + {isSuccess && data?.currencies_config[currency].minimum_deposit ? ( + + ) : ( + + {qrcode_header || header_note} + + )} { <> {((currency === 'ETH' && option_list_value !== option_list[4].value) || From 7186391d0a9e34d042c14a542fa9c3a216817f44 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 13:08:06 +0400 Subject: [PATCH 09/22] feat: changed styles for crypto-deposit.tsx --- .../crypto-deposit/crypto-deposit.scss | 39 ++++++++++++------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss index f4b558219df0..3eb795502beb 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss +++ b/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: #ffad3a; + + .dc-text { + background-color: #ffad3a; + color: #333333; + } + + .dc-icon { + --fill-color1: #333333; + } + } } &__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; + } + } } From c02b91dd3a95e94484782117ff03383d3f016c3e Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 25 Apr 2023 13:16:15 +0400 Subject: [PATCH 10/22] chore: added data-testid for tooltip in mobile view --- .../crypto-transactions-history.scss | 4 ++++ .../crypto-transactions-renderer.tsx | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss index 8bfd695d4fbd..1354fb8c3a28 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss @@ -159,6 +159,10 @@ &-tooltip { margin-left: 0.4rem; + svg { + display: flex; + align-items: center; + } } } &__data-list { diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx index 67fe8f545f0c..757e170b9846 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx @@ -131,9 +131,10 @@ const CryptoTransactionsRenderer = observer(({ row: crypto, onTooltipClick }: TC {localize('Transaction hash')} - {transaction_url.includes('CP:') && ( + {transaction_url?.includes('CP:') && ( Date: Mon, 1 May 2023 16:52:48 +0400 Subject: [PATCH 11/22] chore: added test cases for crypto-deposit.tsx --- .../__tests__/crypto-deposit.spec.tsx | 43 +++++++++++++++++++ .../components/src/components/icon/icons.js | 1 + 2 files changed, 44 insertions(+) diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx index c2ac74412861..fdd023a1f969 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx @@ -437,4 +437,47 @@ describe('', () => { expect(screen.getByText('RecentTransactions')).toBeInTheDocument(); }); + + xit('should show AlertBanner for minimum deposit when third-party payment processor is used (CoinsPaid)', () => { + 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, + })), + }; + }); + 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(, mockRootStore as TRootStore); + }); }); diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index b02d9804b63b..d8e38c49a901 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -262,6 +262,7 @@ import './common/ic-alert-danger.svg'; import './common/ic-alert-info.svg'; import './common/ic-alert-success.svg'; import './common/ic-alert-trustpilot.svg'; +import './common/ic-alert-warning-dark.svg'; import './common/ic-alert-warning.svg'; import './common/ic-amplifier.svg'; import './common/ic-archive.svg'; From 2f7354df7735bfe65abd6db093546f7dd58b8cb0 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Mon, 1 May 2023 17:03:57 +0400 Subject: [PATCH 12/22] chore: added test cases for crypto-deposit.tsx --- .../deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx index fdd023a1f969..79a7848f7990 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx @@ -438,7 +438,7 @@ describe('', () => { expect(screen.getByText('RecentTransactions')).toBeInTheDocument(); }); - xit('should show AlertBanner for minimum deposit when third-party payment processor is used (CoinsPaid)', () => { + it('should show AlertBanner for minimum deposit when third-party payment processor is used (CoinsPaid)', () => { jest.mock('@deriv/api', () => { return { ...jest.requireActual('@deriv/api'), From fc7005163f47211569ebd543e972abe17a5d7e31 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 2 May 2023 14:31:28 +0400 Subject: [PATCH 13/22] fix: fixed the test cases for crypto-deposit.tsx --- .../__tests__/crypto-deposit.spec.tsx | 51 ++++++++++++------- .../deposit/crypto-deposit/crypto-deposit.tsx | 2 +- 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx index 79a7848f7990..8ebb93afe2e1 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx @@ -27,6 +27,40 @@ 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, + }, + BTC: { + minimum_deposit: undefined, + minimum_withdrawal: undefined, + }, + ETH: { + minimum_deposit: undefined, + minimum_withdrawal: undefined, + }, + USDC: { + minimum_deposit: undefined, + minimum_withdrawal: undefined, + }, + eUSDT: { + minimum_deposit: undefined, + minimum_withdrawal: undefined, + }, + }, + }, + isLoading: false, + isSuccess: true, + })), + }; +}); + describe('', () => { let history: ReturnType; const renderWithRouter = (component: JSX.Element, mockRootStore: TRootStore) => { @@ -439,23 +473,6 @@ describe('', () => { }); it('should show AlertBanner for minimum deposit when third-party payment processor is used (CoinsPaid)', () => { - 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, - })), - }; - }); const mockRootStore = { client: { currency: 'tUSDT', diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx index 58312c6d9c80..a3ed7208bc5c 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx @@ -171,7 +171,7 @@ const CryptoDeposit = observer(() => { ) : ( <> - {isSuccess && data?.currencies_config[currency].minimum_deposit ? ( + {isSuccess && data?.currencies_config[currency]?.minimum_deposit ? ( Date: Wed, 3 May 2023 11:07:36 +0400 Subject: [PATCH 14/22] chore: made changes based on comments in PR --- .../components/alert-banner/alert-banner.tsx | 8 +++---- .../crypto-transactions-renderer.spec.tsx | 2 -- .../crypto-transactions-renderer.tsx | 4 +++- .../__tests__/crypto-deposit.spec.tsx | 23 ++++++------------- .../deposit/crypto-deposit/crypto-deposit.tsx | 13 ++++------- 5 files changed, 19 insertions(+), 31 deletions(-) diff --git a/packages/cashier/src/components/alert-banner/alert-banner.tsx b/packages/cashier/src/components/alert-banner/alert-banner.tsx index 7d1ee4c6a4df..097e59ff30b6 100644 --- a/packages/cashier/src/components/alert-banner/alert-banner.tsx +++ b/packages/cashier/src/components/alert-banner/alert-banner.tsx @@ -7,15 +7,15 @@ import './alert-banner.scss'; type TAlertBanner = { icon: string; message: string; - classname?: string; + className?: string; }; -const AlertBanner = ({ icon, message, classname }: TAlertBanner) => { +const AlertBanner = ({ icon, message, className }: TAlertBanner) => { return ( -
+
- +
); diff --git a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx index c416b6141766..fb9882e9f5af 100644 --- a/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx @@ -4,8 +4,6 @@ import userEvent from '@testing-library/user-event'; import { isMobile } from '@deriv/shared'; import CryptoTransactionsRenderer from '../crypto-transactions-renderer'; import CashierProviders from '../../../cashier-providers'; -import { transaction } from 'mobx'; -import { freemem } from 'os'; jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({ ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'), diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx index 757e170b9846..024d5d003c49 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx @@ -62,6 +62,8 @@ const CryptoTransactionsRenderer = observer(({ row: crypto, onTooltipClick }: TC showCryptoTransactionsStatusModal(description, name); }; + const is_third_party_transaction = transaction_url?.includes('CP:'); + if (isMobile()) { return (
@@ -131,7 +133,7 @@ const CryptoTransactionsRenderer = observer(({ row: crypto, onTooltipClick }: TC {localize('Transaction hash')} - {transaction_url?.includes('CP:') && ( + {is_third_party_transaction && ( { minimum_deposit: 2, minimum_withdrawal: 4.54, }, - BTC: { - minimum_deposit: undefined, - minimum_withdrawal: undefined, - }, - ETH: { - minimum_deposit: undefined, - minimum_withdrawal: undefined, - }, - USDC: { - minimum_deposit: undefined, - minimum_withdrawal: undefined, - }, - eUSDT: { - minimum_deposit: undefined, - minimum_withdrawal: undefined, - }, }, }, isLoading: false, @@ -473,6 +457,8 @@ describe('', () => { }); 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', @@ -496,5 +482,10 @@ describe('', () => { }, }; renderWithRouter(, 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(); }); }); diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx index a3ed7208bc5c..4a9a4bab2876 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx @@ -19,11 +19,8 @@ const CryptoDeposit = observer(() => { const { crypto_transactions, onMount: recentTransactionOnMount } = transaction_history; const { setIsDeposit } = general_store; - const { data, isLoading, isSuccess } = useFetch('crypto_config', { - payload: { - currency_code: currency, - }, - }); + const { data } = useFetch('crypto_config', { payload: { currency_code: currency } }); + const minimum_deposit = data?.currencies_config[currency]?.minimum_deposit; React.useEffect(() => { recentTransactionOnMount(); @@ -171,11 +168,11 @@ const CryptoDeposit = observer(() => {
) : ( <> - {isSuccess && data?.currencies_config[currency]?.minimum_deposit ? ( + {minimum_deposit ? ( ) : ( From 03cd1380ab24a02736f7b94c736db1f62bbd3d86 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Wed, 3 May 2023 16:46:34 +0400 Subject: [PATCH 15/22] chore: fixing changes suggested by @heorhi-deriv --- .../crypto-transactions-history.scss | 5 +++-- .../crypto-transactions-history.tsx | 9 +++++---- .../crypto-transactions-renderer.tsx | 4 ++-- .../src/pages/deposit/crypto-deposit/crypto-deposit.scss | 8 ++++---- .../src/pages/deposit/crypto-deposit/crypto-deposit.tsx | 5 +++-- 5 files changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss index 1354fb8c3a28..727705856d3f 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.scss @@ -194,7 +194,8 @@ position: static; } } - &__modal-body { - font-size: 1.5rem; + + &-body { + font-size: var(--text-size-xxs); } } diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx index 760c1d1e5a72..f1eb9a105393 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx +++ b/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, Modal } 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'; @@ -102,10 +102,11 @@ const CryptoTransactionsHistory = observer(() => { setIsModalVisible(old => !old)} - width={'44rem'} - height={'14rem'} + width='44rem' + height='14rem' + className='crypto-transactions-history__modal' > {localize('The details of this transaction is available on CoinsPaid.')} diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx index 024d5d003c49..0164019bb014 100644 --- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx +++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx @@ -252,14 +252,14 @@ const CryptoTransactionsRenderer = observer(({ row: crypto, onTooltipClick }: TC - {transaction_url.includes('CP:') && ( + {is_third_party_transaction && ( - + )} diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss index 3eb795502beb..b55f10df8acc 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss +++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss @@ -32,15 +32,15 @@ } .crypto-third-party-alert { - background-color: #ffad3a; + background-color: $color-yellow; .dc-text { - background-color: #ffad3a; - color: #333333; + background-color: $color-yellow; + color: $color-black-1; } .dc-icon { - --fill-color1: #333333; + --fill-color1: $color-black-1; } } } diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx index 4a9a4bab2876..bbe1389da0df 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx @@ -157,7 +157,7 @@ const CryptoDeposit = observer(() => {