From bdebbf37ad2a70c6397da22513e7843f19af0d54 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Date: Thu, 25 Jul 2024 21:25:14 +0800 Subject: [PATCH] [WALL] Jim/WALL-4349/replace walletbutton with button (#16146) * refactor: replace walletbutton with button * chore: update package and fix component test * chore: add package-lock --- package-lock.json | 8 +++--- packages/account/package.json | 2 +- packages/cashier-v2/package.json | 2 +- packages/cfd/package.json | 2 +- packages/components/package.json | 2 +- packages/core/package.json | 2 +- packages/reports/package.json | 2 +- packages/trader/package.json | 2 +- .../crypto-payment-redirection.spec.tsx | 4 +-- packages/wallets/package.json | 2 +- .../WalletsErrorScreen/WalletsErrorScreen.tsx | 8 +++--- .../WalletActionModal/WalletActionModal.tsx | 10 +++++--- .../cashier/modules/FiatOnRamp/FiatOnRamp.tsx | 7 +++--- .../FiatOnRampDisclaimer.tsx | 11 ++++---- .../__tests__/FiatOnRampDisclaimer.spec.tsx | 6 +---- .../FiatOnRampProviderCard.tsx | 7 +++--- .../modules/ResetBalance/ResetBalance.tsx | 9 ++++--- .../CryptoTransaction/CryptoTransaction.tsx | 9 ++++--- .../TransactionStatusError.tsx | 8 +++--- .../TransactionStatusSuccess.tsx | 10 +++++--- .../TransactionsPendingRow.tsx | 15 ++++++++--- .../cashier/modules/Transfer/Transfer.tsx | 2 +- .../components/TransferForm/TransferForm.tsx | 9 ++++--- .../__tests__/TransferForm.spec.tsx | 25 +++++++------------ .../TransferMessages/TransferMessages.tsx | 7 +++--- .../TransferReceipt/TransferReceipt.tsx | 8 +++--- .../WithdrawalCryptoForm.tsx | 9 ++++--- .../WithdrawalCryptoReceipt.tsx | 14 ++++++----- .../WithdrawalVerificationRequest.tsx | 7 +++--- .../WithdrawalVerificationSent.tsx | 14 +++++++---- .../TransferNotAvailableProvider.tsx | 10 ++++---- .../WithdrawalErrorScreen.tsx | 5 ++-- .../WithdrawalNoBalance.tsx | 7 +++--- 33 files changed, 136 insertions(+), 109 deletions(-) diff --git a/package-lock.json b/package-lock.json index f2b47090e177..5a0bd7fef0b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@deriv-com/quill-tokens": "^2.0.4", "@deriv-com/quill-ui": "1.13.17", "@deriv-com/translations": "1.3.4", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv-com/utils": "^0.0.25", "@deriv/api-types": "1.0.172", "@deriv/deriv-api": "^1.0.15", @@ -3146,9 +3146,9 @@ } }, "node_modules/@deriv-com/ui": { - "version": "1.29.7", - "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.29.7.tgz", - "integrity": "sha512-lIjNusj4dF55amS+Y0xLBkg64vTSOW+aD4sUX3GEcYssLgziaumNiM/qgdpLZ2aKUE6vInC4p13X0HW+7Z0TVg==", + "version": "1.29.9", + "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.29.9.tgz", + "integrity": "sha512-11rxCG5eSn3huaf+dqqMUzRhNogHu+Qv9NNlJdXiwdHzNt2X7NGtrNpAtB669yjjtdt11ImwFQsN6BIPJg6DeA==", "dependencies": { "@popperjs/core": "^2.11.8", "@types/react-modal": "^3.16.3", diff --git a/packages/account/package.json b/packages/account/package.json index ae946efe204d..62707f08a289 100644 --- a/packages/account/package.json +++ b/packages/account/package.json @@ -33,7 +33,7 @@ "@deriv-com/analytics": "1.10.0", "@deriv-com/translations": "1.3.4", "@deriv-com/utils": "^0.0.25", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv/api": "^1.0.0", "@deriv-com/quill-ui": "1.13.17", "@deriv/components": "^1.0.0", diff --git a/packages/cashier-v2/package.json b/packages/cashier-v2/package.json index 32ccf1e2a380..c98247c437ab 100644 --- a/packages/cashier-v2/package.json +++ b/packages/cashier-v2/package.json @@ -14,7 +14,7 @@ "start": "rimraf dist && npm run test && npm run serve" }, "dependencies": { - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv-com/utils": "^0.0.25", "@deriv/api-v2": "^1.0.0", "@deriv/integration": "^1.0.0", diff --git a/packages/cfd/package.json b/packages/cfd/package.json index 7251b294bd84..9ed896b8739f 100644 --- a/packages/cfd/package.json +++ b/packages/cfd/package.json @@ -86,7 +86,7 @@ }, "dependencies": { "@deriv-com/analytics": "1.10.0", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv-com/translations": "1.3.4", "@deriv-com/utils": "^0.0.25", "@deriv/account": "^1.0.0", diff --git a/packages/components/package.json b/packages/components/package.json index 0392c01c3419..89c7c4caf3d8 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -73,7 +73,7 @@ }, "dependencies": { "@contentpass/zxcvbn": "^4.4.3", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", diff --git a/packages/core/package.json b/packages/core/package.json index b2b43908cd0c..fad236217e25 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -100,7 +100,7 @@ "@deriv-com/quill-tokens": "^2.0.4", "@deriv-com/quill-ui": "1.13.17", "@deriv-com/translations": "1.3.4", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv-com/utils": "^0.0.25", "@deriv/account": "^1.0.0", "@deriv/api": "^1.0.0", diff --git a/packages/reports/package.json b/packages/reports/package.json index 236d2de8aafc..432ec292aee8 100644 --- a/packages/reports/package.json +++ b/packages/reports/package.json @@ -78,7 +78,7 @@ }, "dependencies": { "@deriv-com/analytics": "1.10.0", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv/components": "^1.0.0", "@deriv/deriv-api": "^1.0.15", "@deriv/api-types": "1.0.172", diff --git a/packages/trader/package.json b/packages/trader/package.json index cbd0a0def17e..5e27b0a16533 100644 --- a/packages/trader/package.json +++ b/packages/trader/package.json @@ -92,7 +92,7 @@ "@deriv-com/quill-tokens": "^2.0.4", "@deriv-com/quill-ui": "1.13.17", "@deriv-com/utils": "^0.0.25", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv/api-types": "1.0.172", "@deriv/components": "^1.0.0", "@deriv/deriv-api": "^1.0.15", diff --git a/packages/wallets/component-tests/crypto-payment-redirection.spec.tsx b/packages/wallets/component-tests/crypto-payment-redirection.spec.tsx index 7249360d1af9..862172bb48df 100644 --- a/packages/wallets/component-tests/crypto-payment-redirection.spec.tsx +++ b/packages/wallets/component-tests/crypto-payment-redirection.spec.tsx @@ -54,8 +54,8 @@ test.describe('Wallets - Crypto withdrawal', () => { // #fiatAmount await expect(page.locator('#fiatAmount')).toBeVisible(); - // button of type "submit" with text "Withdraw" and with class .wallets-button - const submitButton = await page.locator('button.wallets-button[type="submit"]'); + // button of type "submit" with text "Withdraw" and with class .deriv-button + const submitButton = await page.locator('button.deriv-button[type="submit"]'); await expect(submitButton).toBeVisible(); await expect(submitButton).toHaveText('Withdraw'); }); diff --git a/packages/wallets/package.json b/packages/wallets/package.json index 7b63c6e4cd74..50c53631ab20 100644 --- a/packages/wallets/package.json +++ b/packages/wallets/package.json @@ -16,7 +16,7 @@ }, "dependencies": { "@deriv-com/analytics": "1.10.0", - "@deriv-com/ui": "1.29.7", + "@deriv-com/ui": "1.29.9", "@deriv-com/utils": "^0.0.25", "@deriv/api-v2": "^1.0.0", "@deriv/integration": "^1.0.0", diff --git a/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx b/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx index d0e0d290a299..b0f9f15359f9 100644 --- a/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx +++ b/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx @@ -1,11 +1,11 @@ import React, { ComponentProps } from 'react'; -import { WalletButton } from '../Base'; +import { Button } from '@deriv-com/ui'; import { WalletsActionScreen } from '../WalletsActionScreen'; import './WalletsErrorScreen.scss'; type TProps = { buttonText?: string; - buttonVariant?: ComponentProps['variant']; + buttonVariant?: ComponentProps['variant']; message?: string; onClick?: () => void; title?: string; @@ -24,9 +24,9 @@ const WalletsErrorScreen: React.FC = ({ description={message} renderButtons={() => buttonText ? ( - + ) : null } title={title} diff --git a/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx b/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx index f240a725e70f..184bb9681b70 100644 --- a/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx +++ b/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { ModalWrapper, WalletButton, WalletText } from '../../../../components/Base'; +import { Button } from '@deriv-com/ui'; +import { ModalWrapper, WalletText } from '../../../../components/Base'; import useDevice from '../../../../hooks/useDevice'; import './WalletActionModal.scss'; @@ -34,14 +35,17 @@ const WalletActionModal: React.FC = ({ {!!actionButtonsOptions.length && (
{actionButtonsOptions.map(action => ( - {action.text} - + ))}
)} diff --git a/packages/wallets/src/features/cashier/modules/FiatOnRamp/FiatOnRamp.tsx b/packages/wallets/src/features/cashier/modules/FiatOnRamp/FiatOnRamp.tsx index 6ce67b9dee9d..dc01e56989c4 100644 --- a/packages/wallets/src/features/cashier/modules/FiatOnRamp/FiatOnRamp.tsx +++ b/packages/wallets/src/features/cashier/modules/FiatOnRamp/FiatOnRamp.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import { LegacyArrowLeft2pxIcon } from '@deriv/quill-icons'; -import { WalletButton, WalletText } from '../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletText } from '../../../../components'; import { FiatOnRampDisclaimer, FiatOnRampProviderCard } from './components'; import { fiatOnRampProvider } from './constants'; import './FiatOnRamp.scss'; @@ -19,13 +20,13 @@ const FiatOnRamp = () => { ) : (
- } onClick={() => history.push('/wallet/deposit')} > Back - +
diff --git a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/FiatOnRampDisclaimer.tsx b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/FiatOnRampDisclaimer.tsx index cc78870e7732..92b47f750df9 100644 --- a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/FiatOnRampDisclaimer.tsx +++ b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/FiatOnRampDisclaimer.tsx @@ -1,6 +1,7 @@ import React, { MouseEventHandler, useCallback, useEffect } from 'react'; import { useMutation } from '@deriv/api-v2'; -import { WalletButton, WalletText } from '../../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletText } from '../../../../../../components'; import './FiatOnRampDisclaimer.scss'; type TFiatOnRampDisclaimer = { @@ -32,12 +33,12 @@ const FiatOnRampDisclaimer: React.FC = ({ handleDisclaime you encounter any issues related to Banxa services, you should contact Banxa directly.
- + +
); diff --git a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/__tests__/FiatOnRampDisclaimer.spec.tsx b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/__tests__/FiatOnRampDisclaimer.spec.tsx index b9dce53f0e90..89339635f071 100644 --- a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/__tests__/FiatOnRampDisclaimer.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/__tests__/FiatOnRampDisclaimer.spec.tsx @@ -8,10 +8,6 @@ jest.mock('@deriv/api-v2', () => ({ })); const mockUseMutation = useMutation as jest.Mock; -jest.mock('@deriv-com/ui', () => ({ - Loader: jest.fn(() =>
Loading...
), -})); - describe('FiatOnRampDisclaimer', () => { beforeEach(() => { mockUseMutation.mockReturnValue({ @@ -46,7 +42,7 @@ describe('FiatOnRampDisclaimer', () => { const handleDisclaimer = jest.fn(); render(); - expect(screen.getByText('Loading...')).toBeInTheDocument(); + expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument(); }); it('should call handleDisclaimer function on "Back" button click', () => { diff --git a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.tsx b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.tsx index 81ab35f59043..eae1e0dc5595 100644 --- a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.tsx +++ b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.tsx @@ -1,5 +1,6 @@ import React, { MouseEventHandler } from 'react'; -import { WalletButton, WalletText } from '../../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletText } from '../../../../../../components'; import './FiatOnRampProviderCard.scss'; type TFiatOnRampProvider = { @@ -48,9 +49,9 @@ const FiatOnRampProviderCard: React.FC = ({
))}
- + ); }; diff --git a/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx b/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx index 5222ad391b14..ffbfbc82316c 100644 --- a/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx +++ b/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { useMutation } from '@deriv/api-v2'; -import { WalletButton, WalletsActionScreen } from '../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletsActionScreen } from '../../../../components'; //TODO: replace with quill-icons import IcResetDemoBalance from '../../../../public/images/ic-demo-reset-balance.svg'; import IcResetDemoBalanceDone from '../../../../public/images/ic-demo-reset-balance-done.svg'; @@ -22,12 +23,14 @@ const ResetBalance = () => { } icon={isResetBalanceSuccess ? : } renderButtons={() => ( - history.push('/wallet/account-transfer') : resetBalance} size='lg' + textSize='md' > {isResetBalanceSuccess ? 'Transfer funds' : 'Reset balance'} - + )} title={isResetBalanceSuccess ? 'Success' : 'Reset balance'} /> diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx index f603fec0049e..7ab32dc1a46e 100644 --- a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx +++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx @@ -3,7 +3,8 @@ import classNames from 'classnames'; import moment from 'moment'; import { useCancelCryptoTransaction } from '@deriv/api-v2'; import { LegacyClose1pxIcon } from '@deriv/quill-icons'; -import { WalletButton, WalletText } from '../../../../../../components/Base'; +import { Button } from '@deriv-com/ui'; +import { WalletText } from '../../../../../../components/Base'; import { useModal } from '../../../../../../components/ModalProvider'; import useDevice from '../../../../../../hooks/useDevice'; import { THooks } from '../../../../../../types'; @@ -133,14 +134,16 @@ const CryptoTransaction: React.FC = ({ )} {!!transaction.is_valid_to_cancel && isMobile && (
- Cancel transaction - +
)} diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusError/TransactionStatusError.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusError/TransactionStatusError.tsx index c99305ae67c2..044f32fe8be2 100644 --- a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusError/TransactionStatusError.tsx +++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusError/TransactionStatusError.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Divider } from '@deriv-com/ui'; -import { WalletButton, WalletText } from '../../../../../../components/Base'; +import { Button, Divider } from '@deriv-com/ui'; +import { WalletText } from '../../../../../../components/Base'; type TTransactionStatusError = { refresh: VoidFunction; @@ -12,9 +12,9 @@ const TransactionStatusError: React.FC = ({ refresh }) Unfortunately, we cannot retrieve the information at this time. - + ); diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx index 8a4713deb12b..5c0f12544868 100644 --- a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx +++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; -import { Divider } from '@deriv-com/ui'; -import { WalletButton, WalletText } from '../../../../../../components/Base'; +import { Button, Divider } from '@deriv-com/ui'; +import { WalletText } from '../../../../../../components/Base'; import { THooks } from '../../../../../../types'; import { CryptoTransaction } from '../CryptoTransaction'; @@ -41,7 +41,9 @@ const TransactionStatusSuccess: React.FC = ({ transac ))} {filteredTransactions.length > 3 && ( - { // should navigate to transactions page with "Pending transactions" toggle on and filter set to `transactionType` @@ -54,7 +56,7 @@ const TransactionStatusSuccess: React.FC = ({ transac variant='outlined' > View more - + )} ) : ( diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index e6e3b03f8635..a0db1d26f8f9 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -3,8 +3,8 @@ import classNames from 'classnames'; import moment from 'moment'; import { useActiveWalletAccount, useCancelCryptoTransaction } from '@deriv/api-v2'; import { LegacyClose1pxIcon } from '@deriv/quill-icons'; -import { Divider, Tooltip } from '@deriv-com/ui'; -import { WalletButton, WalletText } from '../../../../../../components/Base'; +import { Button, Divider, Tooltip } from '@deriv-com/ui'; +import { WalletText } from '../../../../../../components/Base'; import { useModal } from '../../../../../../components/ModalProvider'; import { WalletCurrencyCard } from '../../../../../../components/WalletCurrencyCard'; import useDevice from '../../../../../../hooks/useDevice'; @@ -196,9 +196,16 @@ const TransactionsPendingRow: React.FC = ({ transaction }) => { {isMobile && !!transaction.is_valid_to_cancel && ( - + )} diff --git a/packages/wallets/src/features/cashier/modules/Transfer/Transfer.tsx b/packages/wallets/src/features/cashier/modules/Transfer/Transfer.tsx index fff258e2ac6f..87e856547f83 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/Transfer.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/Transfer.tsx @@ -1,8 +1,8 @@ import React from 'react'; import type { THooks } from '../../../../types'; +import { TransferErrorScreen } from '../../screens/TransferErrorScreen'; import { TransferForm, TransferReceipt } from './components'; import { TransferProvider, useTransfer } from './provider'; -import { TransferErrorScreen } from '../../screens/TransferErrorScreen'; type TProps = { accounts: THooks.TransferAccount[]; diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx index aad95bef92ca..f04a81ffc37d 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useRef } from 'react'; import { Formik } from 'formik'; -import { Loader } from '@deriv-com/ui'; -import { WalletButton } from '../../../../../../components'; +import { Button, Loader } from '@deriv-com/ui'; import useDevice from '../../../../../../hooks/useDevice'; import { useTransfer } from '../../provider'; import type { TInitialTransferFormValues } from '../../types'; @@ -54,13 +53,15 @@ const TransferForm = () => {
- Transfer - +
)} diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx index f4b80a51b5e2..caa0bf580e5b 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx @@ -9,10 +9,6 @@ import TransferForm from '../TransferForm'; const mockAccounts = ['CR1', 'CR2']; let mockFormikValues: unknown; -jest.mock('@deriv-com/ui', () => ({ - Loader: jest.fn(() =>
Loading...
), -})); - jest.mock('../../../../../../../hooks/useDevice', () => jest.fn()); jest.mock('../../../provider', () => ({ @@ -21,16 +17,6 @@ jest.mock('../../../provider', () => ({ useTransfer: jest.fn(), })); // const mockUseFormikContext = jest.spyOn(formik, 'useFormikContext') as jest.Mock; -jest.mock('../../TransferFormAmountInput', () => ({ - ...jest.requireActual('../../TransferFormAmountInput'), - TransferFormAmountInput: jest.fn(({ fieldName }) => ), -})); - -jest.mock('../../TransferFormDropdown', () => ({ - ...jest.requireActual('../../TransferFormDropdown'), - TransferFormDropdown: jest.fn(({ fieldName }) =>
{fieldName}
), -})); - const mockTransferMessages = jest.fn(() => { const { setValues } = useFormikContext(); useEffect(() => { @@ -40,8 +26,15 @@ const mockTransferMessages = jest.fn(() => { return
TransferMessages
; }); +jest.mock('../../TransferFormAmountInput', () => ({ + TransferFormAmountInput: jest.fn(({ fieldName }) => ), +})); + +jest.mock('../../TransferFormDropdown', () => ({ + TransferFormDropdown: jest.fn(({ fieldName }) =>
{fieldName}
), +})); + jest.mock('../../TransferMessages', () => ({ - ...jest.requireActual('../../TransferMessages'), TransferMessages: jest.fn(() => mockTransferMessages()), })); @@ -61,7 +54,7 @@ describe('', () => { render(, { wrapper }); - expect(screen.getByText('Loading...')).toBeInTheDocument(); + expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument(); }); it('should test that transfer button is disabled when fromAmount is 0', async () => { diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferMessages/TransferMessages.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferMessages/TransferMessages.tsx index 6ba873ddde87..10a11028e97c 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferMessages/TransferMessages.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferMessages/TransferMessages.tsx @@ -2,7 +2,8 @@ import React, { useEffect } from 'react'; import { useFormikContext } from 'formik'; import { Trans } from 'react-i18next'; import { Link } from 'react-router-dom'; -import { FadedAnimatedList, WalletAlertMessage, WalletButton } from '../../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { FadedAnimatedList, WalletAlertMessage } from '../../../../../../components'; import { useTransferMessages } from '../../hooks'; import { useTransfer } from '../../provider'; import { TInitialTransferFormValues } from '../../types'; @@ -36,7 +37,7 @@ const TransferMessages: React.FC = () => { {action?.buttonLabel && action?.navigateTo && (
- +
)} diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/TransferReceipt.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/TransferReceipt.tsx index b209b4245d3f..c6b8dfd92f37 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/TransferReceipt.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/TransferReceipt.tsx @@ -1,7 +1,8 @@ import React from 'react'; import classNames from 'classnames'; import { LegacyArrowRight2pxIcon } from '@deriv/quill-icons'; -import { AppCard, WalletButton, WalletCard, WalletText } from '../../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { AppCard, WalletCard, WalletText } from '../../../../../../components'; import useDevice from '../../../../../../hooks/useDevice'; import { TPlatforms } from '../../../../../../types'; import { useTransfer } from '../../provider'; @@ -103,13 +104,14 @@ const TransferReceipt = () => {
- resetTransfer()} size={isMobile ? 'md' : 'lg'} textSize={isMobile ? 'md' : 'sm'} > Make a new transfer - +
); diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx index e9ad00165cc1..0db0ed237736 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { Field, FieldProps, Formik } from 'formik'; import { useGrowthbookIsOn } from '@deriv/api-v2'; -import { WalletButton, WalletTextField } from '../../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletTextField } from '../../../../../../components'; import { useWithdrawalCryptoContext } from '../../provider'; import { validateCryptoAddress } from '../../utils'; import { WithdrawalCryptoAmountConverter } from './components/WithdrawalCryptoAmountConverter'; @@ -59,14 +60,16 @@ const WithdrawalCryptoForm: React.FC = () => { {Boolean(isPriorityCryptoWithdrawalEnabled) && }
- Withdraw - +
); diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx index 2ee43a84dd6f..8d7601ca2d85 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { LegacyArrowDown2pxIcon } from '@deriv/quill-icons'; -import { WalletButton, WalletCard, WalletText } from '../../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletCard, WalletText } from '../../../../../../components'; import { TWithdrawalReceipt } from '../../types'; import { WithdrawalCryptoDestinationAddress } from './components'; import './WithdrawalCryptoReceipt.scss'; @@ -43,17 +44,18 @@ const WithdrawalCryptoReceipt: React.FC = ({ onClose, withdrawalReceipt
- history.push('/wallet/transactions')} size='lg' + textSize='md' variant='outlined' > View transactions - - + +
); diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx index 4bd86dbf8924..f9da3c5420c8 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { DerivLightEmailVerificationIcon } from '@deriv/quill-icons'; -import { WalletButton, WalletsActionScreen, WalletText } from '../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletsActionScreen, WalletText } from '../../../../../components'; import './WithdrawalVerificationRequest.scss'; type TProps = { @@ -30,9 +31,9 @@ const WithdrawalVerificationRequest: React.FC = ({ sendEmail }) => { } renderButtons={() => ( - + )} title='Confirm your identity to make a withdrawal.' /> diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx index 6b62a690fba7..08346db09c54 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { WalletButton, WalletsActionScreen } from '../../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletsActionScreen } from '../../../../../components'; import EmailSent from '../../../../../public/images/email-sent.svg'; import './WithdrawalVerificationSent.scss'; @@ -26,16 +27,19 @@ const WithdrawalVerificationSent: React.FC = ({ counter, sendEmail }) => renderButtons={ !showResend ? () => ( - { sendEmail(); setShowResend(!showResend); }} size='lg' + textSize='md' variant='ghost' > Didn't receive the email? - + ) : undefined } @@ -46,9 +50,9 @@ const WithdrawalVerificationSent: React.FC = ({ counter, sendEmail }) => ( - + )} title="Didn't receive the email?" /> diff --git a/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx b/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx index b266cd4957cb..291d8da55519 100644 --- a/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx +++ b/packages/wallets/src/features/cashier/screens/TransferNotAvailable/TransferNotAvailableProvider.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; -import { WalletButton } from '../../../../components'; +import { Button } from '@deriv-com/ui'; import { THooks } from '../../../../types'; type TGetMessageProps = { @@ -28,9 +28,9 @@ const getMessage = ({ return { actionButton: () => ( - history.push('/')} size='lg'> + ), description, title, @@ -49,9 +49,9 @@ const getMessage = ({ return { actionButton: () => ( - history.push(locationPathName)} size='lg'> + ), description, title, diff --git a/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx b/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx index 700916cbded6..f3a745da521b 100644 --- a/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx +++ b/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx @@ -2,7 +2,8 @@ import React, { ComponentProps } from 'react'; import { useHistory } from 'react-router-dom'; import { useActiveWalletAccount } from '@deriv/api-v2'; import { TSocketError } from '@deriv/api-v2/types'; -import { WalletButton, WalletsErrorScreen } from '../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletsErrorScreen } from '../../../../components'; import { CryptoWithdrawalErrorCodes } from '../../../../constants/errorCodes'; type TProps = { @@ -13,7 +14,7 @@ type TProps = { type TErrorContent = { buttonText?: string; - buttonVariant?: ComponentProps['variant']; + buttonVariant?: ComponentProps['variant']; message?: string; onClick?: () => void; title?: string; diff --git a/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx b/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx index bbee25723a48..700ad1111902 100644 --- a/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx +++ b/packages/wallets/src/features/cashier/screens/WithdrawalNoBalance/WithdrawalNoBalance.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { DerivLightCashierNoBalanceIcon } from '@deriv/quill-icons'; -import { WalletButton, WalletsActionScreen } from '../../../../components'; +import { Button } from '@deriv-com/ui'; +import { WalletsActionScreen } from '../../../../components'; import { THooks } from '../../../../types'; type TWithdrawalNoBalanceProps = { @@ -17,9 +18,9 @@ const WithdrawalNoBalance: React.FC = ({ activeWallet descriptionSize='md' icon={} renderButtons={() => ( - history.push('/wallet/deposit')} size='lg'> + )} title={`No funds in ${activeWallet.currency} Wallet`} />