[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
binary-com · Jul 25, 2024 · bdebbf3 · bdebbf3
1 parent 2b5a801
commit bdebbf3
Show file tree

Hide file tree

Showing 33 changed files with 136 additions and 109 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<typeof WalletButton>['variant'];
+    buttonVariant?: ComponentProps<typeof Button>['variant'];
     message?: string;
     onClick?: () => void;
     title?: string;
@@ -24,9 +24,9 @@ const WalletsErrorScreen: React.FC<TProps> = ({
                 description={message}
                 renderButtons={() =>
                     buttonText ? (
-                        <WalletButton onClick={onClick} size='lg' variant={buttonVariant}>
+                        <Button borderWidth='sm' onClick={onClick} size='lg' textSize='md' variant={buttonVariant}>
                             {buttonText}
-                        </WalletButton>
+                        </Button>
                     ) : 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
@@ -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<TWalletActionModal> = ({
                 {!!actionButtonsOptions.length && (
                     <div className='wallets-action-modal__buttons-container'>
                         {actionButtonsOptions.map(action => (
-                            <WalletButton
+                            <Button
+                                borderWidth='sm'
+                                color={action.isPrimary ? 'primary' : 'black'}
                                 key={action.text}
                                 onClick={action.onClick}
                                 size='lg'
+                                textSize='md'
                                 variant={action.isPrimary ? 'contained' : 'outlined'}
                             >
                                 {action.text}
-                            </WalletButton>
+                            </Button>
                         ))}
                     </div>
                 )}

diff --git 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 = () => {
             ) : (
                 <div className='wallets-fiat-onramp'>
                     <div className='wallets-fiat-onramp__actions'>
-                        <WalletButton
+                        <Button
                             color='white'
                             icon={<LegacyArrowLeft2pxIcon iconSize='xs' />}
                             onClick={() => history.push('/wallet/deposit')}
                         >
                             Back
-                        </WalletButton>
+                        </Button>
                     </div>
                     <div className='wallets-fiat-onramp__content'>
                         <div className='wallets-fiat-onramp__description'>

diff --git a/...tures/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/FiatOnRampDisclaimer.tsx b/...tures/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<TFiatOnRampDisclaimer> = ({ handleDisclaime
                 you encounter any issues related to Banxa services, you should contact Banxa directly.
             </WalletText>
             <div className='wallets-fiat-onramp-disclaimer__buttons'>
-                <WalletButton color='white' onClick={handleDisclaimer} size='md' variant='outlined'>
+                <Button borderWidth='sm' color='black' onClick={handleDisclaimer} size='md' variant='outlined'>
                     Back
-                </WalletButton>
-                <WalletButton isLoading={isLoading} onClick={() => redirectToBanxa()} size='md'>
+                </Button>
+                <Button borderWidth='sm' isLoading={isLoading} onClick={() => redirectToBanxa()} size='md'>
                     Continue
-                </WalletButton>
+                </Button>
             </div>
         </div>
     );

diff --git a/...odules/FiatOnRamp/components/FiatOnRampDisclaimer/__tests__/FiatOnRampDisclaimer.spec.tsx b/...odules/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(() => <div>Loading...</div>),
-}));
-
 describe('FiatOnRampDisclaimer', () => {
     beforeEach(() => {
         mockUseMutation.mockReturnValue({
@@ -46,7 +42,7 @@ describe('FiatOnRampDisclaimer', () => {
         const handleDisclaimer = jest.fn();
 
         render(<FiatOnRampDisclaimer handleDisclaimer={handleDisclaimer} />);
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument();
     });
 
     it('should call handleDisclaimer function on "Back" button click', () => {

diff --git a/...s/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.tsx b/...s/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<TFiatOnRampProvider> = ({
                     </div>
                 ))}
             </div>
-            <WalletButton onClick={handleDisclaimer} size='md'>
+            <Button borderWidth='sm' onClick={handleDisclaimer} size='md'>
                 Select
-            </WalletButton>
+            </Button>
         </div>
     );
 };

diff --git 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 ? <IcResetDemoBalanceDone /> : <IcResetDemoBalance />}
             renderButtons={() => (
-                <WalletButton
+                <Button
+                    borderWidth='sm'
                     onClick={isResetBalanceSuccess ? () => history.push('/wallet/account-transfer') : resetBalance}
                     size='lg'
+                    textSize='md'
                 >
                     {isResetBalanceSuccess ? 'Transfer funds' : 'Reset balance'}
-                </WalletButton>
+                </Button>
             )}
             title={isResetBalanceSuccess ? 'Success' : 'Reset balance'}
         />

diff --git a/...ures/cashier/modules/TransactionStatus/components/CryptoTransaction/CryptoTransaction.tsx b/...ures/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<TCryptoTransaction> = ({
             )}
             {!!transaction.is_valid_to_cancel && isMobile && (
                 <div className='wallets-crypto-transaction__cancel-button-container'>
-                    <WalletButton
+                    <Button
+                        borderWidth='sm'
+                        color='black'
                         data-testid='dt-wallets-crypto-transactions-cancel-button'
                         onClick={onCancelTransactionButtonClick}
                         size='sm'
                         variant='outlined'
                     >
                         Cancel transaction
-                    </WalletButton>
+                    </Button>
                 </div>
             )}
         </div>

diff --git a/...er/modules/TransactionStatus/components/TransactionStatusError/TransactionStatusError.tsx b/...er/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<TTransactionStatusError> = ({ refresh })
             Unfortunately, we cannot retrieve the information at this time.
         </WalletText>
         <Divider color='var(--general-active)' />
-        <WalletButton isFullWidth={true} onClick={refresh} size='sm' variant='outlined'>
+        <Button borderWidth='sm' color='black' isFullWidth={true} onClick={refresh} size='sm' variant='outlined'>
             Refresh
-        </WalletButton>
+        </Button>
     </React.Fragment>
 );
 

diff --git a/...odules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx b/...odules/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<TTransactionStatusSuccess> = ({ transac
                         </React.Fragment>
                     ))}
                     {filteredTransactions.length > 3 && (
-                        <WalletButton
+                        <Button
+                            borderWidth='sm'
+                            color='black'
                             isFullWidth
                             onClick={() => {
                                 // should navigate to transactions page with "Pending transactions" toggle on and filter set to `transactionType`
@@ -54,7 +56,7 @@ const TransactionStatusSuccess: React.FC<TTransactionStatusSuccess> = ({ transac
                             variant='outlined'
                         >
                             View more
-                        </WalletButton>
+                        </Button>
                     )}
                 </React.Fragment>
             ) : (

diff --git a/...cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/...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<TProps> = ({ transaction }) => {
                 </div>
 
                 {isMobile && !!transaction.is_valid_to_cancel && (
-                    <WalletButton isFullWidth onClick={onCancelButtonClick} size='sm' variant='outlined'>
+                    <Button
+                        borderWidth='sm'
+                        color='black'
+                        isFullWidth
+                        onClick={onCancelButtonClick}
+                        size='sm'
+                        variant='outlined'
+                    >
                         Cancel transaction
-                    </WalletButton>
+                    </Button>
                 )}
             </div>
         </React.Fragment>

diff --git 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[];