fix: applied comments

packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
-import { Localize, useTranslations } from '@deriv-com/translations';
+import { useTranslations } from '@deriv-com/translations';
 import useDevice from '../../hooks/useDevice';
 import { THooks } from '../../types';
-import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../Base';
+import { ModalStepWrapper, ModalWrapper } from '../Base';
 import { WalletCard } from '../WalletCard';
 import { WalletSuccess } from '../WalletSuccess';
+import WalletAddedSuccessFooter from './WalletAddedSuccessFooter';
 
 type TWalletAddedSuccessProps = {
     currency: THooks.CreateWallet['currency'];
@@ -23,18 +24,6 @@ const WalletAddedSuccess: React.FC<TWalletAddedSuccessProps> = ({
     const { localize } = useTranslations();
     const description = localize('Make a deposit into your new Wallet.');
     const title = useMemo(() => localize('Your {{currency}} wallet is ready', { currency }), [currency, localize]);
-    const renderFooter = (
-        <div className='wallets-add-more__success-footer'>
-            <WalletButtonGroup isFlex isFullWidth>
-                <WalletButton onClick={onSecondaryButtonClick} variant='outlined'>
-                    <Localize i18n_default_text='Maybe later' />
-                </WalletButton>
-                <WalletButton onClick={onPrimaryButtonClick}>
-                    <Localize i18n_default_text='Deposit' />
-                </WalletButton>
-            </WalletButtonGroup>
-        </div>
-    );
 
     const renderIcon = useCallback(
         () => (
@@ -47,15 +36,28 @@ const WalletAddedSuccess: React.FC<TWalletAddedSuccessProps> = ({
 
     if (isMobile)
         return (
-            <ModalStepWrapper renderFooter={() => renderFooter} title=''>
+            <ModalStepWrapper
+                renderFooter={() => (
+                    <WalletAddedSuccessFooter
+                        onPrimaryButtonClick={onPrimaryButtonClick}
+                        onSecondaryButtonClick={onSecondaryButtonClick}
+                    />
+                )}
+                title=''
+            >
                 <WalletSuccess description={description} renderIcon={renderIcon} title={title} />
             </ModalStepWrapper>
         );
 
     return (
         <ModalWrapper hideCloseButton>
             <WalletSuccess
-                actionButtons={renderFooter}
+                actionButtons={
+                    <WalletAddedSuccessFooter
+                        onPrimaryButtonClick={onPrimaryButtonClick}
+                        onSecondaryButtonClick={onSecondaryButtonClick}
+                    />
+                }
                 description={description}
                 renderIcon={renderIcon}
                 title={title}

packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccessFooter.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Localize } from '@deriv-com/translations';
+import { Button } from '@deriv-com/ui';
+import { WalletButtonGroup } from '../Base';
+
+type TWalletAddedSuccessFooterProps = {
+    onPrimaryButtonClick: () => void;
+    onSecondaryButtonClick: () => void;
+};
+
+const WalletAddedSuccessFooter = ({ onPrimaryButtonClick, onSecondaryButtonClick }: TWalletAddedSuccessFooterProps) => {
+    return (
+        <div className='wallets-add-more__success-footer'>
+            <WalletButtonGroup isFlex isFullWidth>
+                <Button onClick={onSecondaryButtonClick} variant='outlined'>
+                    <Localize i18n_default_text='Maybe later' />
+                </Button>
+                <Button onClick={onPrimaryButtonClick}>
+                    <Localize i18n_default_text='Deposit' />
+                </Button>
+            </WalletButtonGroup>
+        </div>
+    );
+};
+
+export default WalletAddedSuccessFooter;

packages/wallets/src/components/WalletAddedSuccess/__test__/WalletAddedSuccess.spec.tsx → packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccess.spec.tsx

@@ -24,8 +24,8 @@ const wrapper = ({ children }: PropsWithChildren) => (
 
 jest.mock('../../../hooks/useDevice', () => jest.fn());
 
-describe('<WalletAddedSuccess />', () => {
-    it('should render success modal', () => {
+describe('WalletAddedSuccess', () => {
+    it('renders success modal content', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });
@@ -34,7 +34,7 @@ describe('<WalletAddedSuccess />', () => {
         expect(screen.getByRole('button', { name: 'Maybe later' })).toBeInTheDocument();
     });
 
-    it('should render WalletCard', () => {
+    it('renders WalletCard', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });
@@ -43,7 +43,7 @@ describe('<WalletAddedSuccess />', () => {
         expect(screen.getByTestId('dt_wallet_currency_icon')).toBeInTheDocument();
     });
 
-    it('should run function on button click', () => {
+    it('runs function on button click', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });
@@ -57,7 +57,7 @@ describe('<WalletAddedSuccess />', () => {
         expect(props.onSecondaryButtonClick).toHaveBeenCalled();
     });
 
-    it('should render mobile modal', () => {
+    it('renders modal in mobile', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });

packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccessFooter.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import WalletAddedSuccessFooter from '../WalletAddedSuccessFooter';
+
+describe('WalletAddedSuccessFooter', () => {
+    const mockPrimaryClick = jest.fn();
+    const mockSecondaryClick = jest.fn();
+
+    beforeEach(() => {
+        render(
+            <WalletAddedSuccessFooter
+                onPrimaryButtonClick={mockPrimaryClick}
+                onSecondaryButtonClick={mockSecondaryClick}
+            />
+        );
+    });
+
+    it('renders the component with correct buttons', () => {
+        expect(screen.getByText('Maybe later')).toBeInTheDocument();
+        expect(screen.getByText('Deposit')).toBeInTheDocument();
+    });
+
+    it('calls onSecondaryButtonClick when "Maybe later" button is clicked', () => {
+        fireEvent.click(screen.getByText('Maybe later'));
+        expect(mockSecondaryClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onPrimaryButtonClick when "Deposit" button is clicked', () => {
+        fireEvent.click(screen.getByText('Deposit'));
+        expect(mockPrimaryClick).toHaveBeenCalledTimes(1);
+    });
+});