\ No newline at end of file
diff --git a/packages/components/src/components/icon/wallet/ic-wallet-info-message-with-three-dots.svg b/packages/components/src/components/icon/wallet/ic-wallet-info-message-with-three-dots.svg
new file mode 100644
index 000000000000..48023c82e0e7
--- /dev/null
+++ b/packages/components/src/components/icon/wallet/ic-wallet-info-message-with-three-dots.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/components/src/components/icon/wallet/ic-wallet-success-message.svg b/packages/components/src/components/icon/wallet/ic-wallet-success-message.svg
new file mode 100644
index 000000000000..03491c4831f3
--- /dev/null
+++ b/packages/components/src/components/icon/wallet/ic-wallet-success-message.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/components/src/components/message-list/__tests__/alert-message.spec.tsx b/packages/components/src/components/message-list/__tests__/alert-message.spec.tsx
new file mode 100644
index 000000000000..e8ef334dcd8d
--- /dev/null
+++ b/packages/components/src/components/message-list/__tests__/alert-message.spec.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AlertMessage from '../alert-message';
+
+describe('AlertMessage', () => {
+ it('Should render proper icon type', () => {
+ const { rerender } = render(
);
+
+ expect(screen.getByTestId('dt_IcWalletErrorMessageWithCross')).toBeInTheDocument();
+
+ rerender(
);
+
+ expect(screen.getByTestId('dt_IcWalletInfoMessageWithThreeDots')).toBeInTheDocument();
+
+ rerender(
);
+
+ expect(screen.getByTestId('dt_IcWalletSuccessMessage')).toBeInTheDocument();
+ });
+
+ it('Should render proper message', () => {
+ render(
);
+
+ expect(screen.getByText('Error message')).toBeInTheDocument();
+ });
+
+ it('Should render proper button', () => {
+ render(
+
+ );
+
+ expect(screen.getByRole('button', { name: 'Error button' })).toBeInTheDocument();
+ });
+
+ it('Should trigger onClick handler when the user is clicking on the button', () => {
+ const onClickHandler = jest.fn();
+
+ render(
+
+ );
+
+ const el_btn = screen.getByRole('button', { name: 'Error button' });
+ userEvent.click(el_btn);
+
+ expect(onClickHandler).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/packages/components/src/components/message-list/__tests__/message-list.spec.tsx b/packages/components/src/components/message-list/__tests__/message-list.spec.tsx
new file mode 100644
index 000000000000..80a591e753fa
--- /dev/null
+++ b/packages/components/src/components/message-list/__tests__/message-list.spec.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MessageList from '../message-list';
+
+describe('MessageList', () => {
+ it('Should render the list of messages', () => {
+ const list: React.ComponentProps
['list'] = [
+ { variant: 'base', key: '1', message: 'Success message', type: 'success' },
+ { variant: 'base', key: '2', message: 'Error message', type: 'error' },
+ { variant: 'base', key: '3', message: 'Info message', type: 'info' },
+ ];
+
+ render();
+
+ expect(screen.getAllByTestId('dt_alert_message').length).toBe(3);
+ });
+});
diff --git a/packages/components/src/components/message-list/alert-message.tsx b/packages/components/src/components/message-list/alert-message.tsx
new file mode 100644
index 000000000000..151df49a1607
--- /dev/null
+++ b/packages/components/src/components/message-list/alert-message.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { isMobile } from '@deriv/shared';
+import Button from '../button';
+import Icon from '../icon';
+import Text from '../text';
+
+const type_mapper = {
+ info: {
+ icon: 'IcWalletInfoMessageWithThreeDots',
+ color: 'status-info-blue',
+ },
+ error: {
+ icon: 'IcWalletErrorMessageWithCross',
+ color: 'loss-danger',
+ },
+ success: {
+ icon: 'IcWalletSuccessMessage',
+ color: 'profit-success',
+ },
+};
+
+type TAlertMessageProps =
+ | {
+ variant: 'with-action-button';
+ button_label: string;
+ message: string | JSX.Element;
+ onClickHandler: VoidFunction;
+ type: 'info' | 'error' | 'success';
+ }
+ | {
+ variant: 'base';
+ message: string | JSX.Element;
+ type: 'info' | 'error' | 'success';
+ };
+
+const AlertMessage = (props: TAlertMessageProps) => {
+ const { type, message, variant } = props;
+
+ const icon = type_mapper[type].icon;
+ const color = type_mapper[type].color;
+
+ return (
+
+
+
+
+ {message}
+
+
+ {variant === 'with-action-button' && props.button_label && (
+
+
+
+ )}
+
+
+ {list.map(item => {
+ return (
+
+
+
+ );
+ })}
+
+
Wallet Tile
));
-
-describe('TransferAccountList', () => {
- let mocked_props: React.ComponentProps;
-
- beforeEach(() => {
- mocked_props = {
- is_mobile: false,
- selected_account: {
- balance: '100',
- currency: 'USD',
- icon: 'Icon',
- jurisdiction: ,
- label: 'Account Label',
- loginid: '12345678',
- type: 'fiat',
- wallet_icon: 'Wallet Icon',
- wallet_name: 'USD Wallet',
- },
- setIsListModalOpen: jest.fn(),
- setSelectedAccount: jest.fn(),
- transfer_accounts: {
- accounts: [
- {
- loginid: '1',
- label: 'Deriv Apps',
- currency: 'USD',
- balance: '10.00',
- wallet_icon: 'IcCurrencyUsd',
- icon: 'IcDerivApps',
- jurisdiction: ,
- type: 'fiat',
- },
- {
- loginid: '2',
- label: 'MT5 Derived',
- currency: 'USD',
- balance: '10.00',
- wallet_icon: 'IcCurrencyUsd',
- icon: 'IcMT5Derived',
- jurisdiction: ,
- type: 'fiat',
- },
- ],
- wallets: [
- {
- loginid: '3',
- label: 'USD Wallet',
- currency: 'USD',
- balance: '10,000.00',
- wallet_icon: 'IcCurrencyUsd',
- jurisdiction: ,
- type: 'fiat',
- },
- ],
- },
- transfer_hint: 'Transfer hint',
- wallet_name: 'USD Wallet',
- };
- });
-
- it('Should render proper titles of transfer accounts', () => {
- render();
-
- expect(screen.getByText('Trading accounts linked with USD Wallet')).toBeInTheDocument();
- expect(screen.getByText('Wallets')).toBeInTheDocument();
- });
-
- it('Should render proper amount of transfer accounts', () => {
- render();
-
- expect(screen.getAllByText('Wallet Tile').length).toBe(3);
- });
-
- it('Should render transfer hint for Wallets account list', () => {
- mocked_props.transfer_accounts = { ...mocked_props.transfer_accounts, accounts: [] };
- render();
-
- expect(screen.getByText('Transfer hint')).toBeInTheDocument();
- });
-});
diff --git a/packages/components/src/components/transfer-account-selector/__tests__/transfer-account-selector.spec.tsx b/packages/components/src/components/transfer-account-selector/__tests__/transfer-account-selector.spec.tsx
deleted file mode 100644
index b655830e02ee..000000000000
--- a/packages/components/src/components/transfer-account-selector/__tests__/transfer-account-selector.spec.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import TransferAccountSelector from '../transfer-account-selector';
-import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
-
-jest.mock('../../transfer-account-selector/transfer-tile', () => jest.fn(() => Transfer Tile
));
-jest.mock('../../transfer-account-selector/transfer-account-list', () =>
- jest.fn(() => Transfer Account List
)
-);
-
-describe('TransferAccountSelector', () => {
- let modal_root_el: HTMLDivElement, mocked_props: React.ComponentProps;
-
- beforeAll(() => {
- modal_root_el = document.createElement('div');
- modal_root_el.setAttribute('id', 'modal_root');
- document.body.appendChild(modal_root_el);
- });
-
- beforeEach(() => {
- mocked_props = {
- is_mobile: false,
- is_wallet_name_visible: false,
- label: 'Transfer from',
- onSelectAccount: jest.fn(),
- placeholder: 'Placeholder',
- portal_id: 'modal_root',
- setIsWalletNameVisible: jest.fn(),
- transfer_accounts: {
- accounts: [],
- wallets: [],
- },
- transfer_hint: 'Transfer hint',
- value: undefined,
- wallet_name: 'USD Wallet',
- };
- });
-
- it('Should render transfer tile by default', () => {
- render();
-
- expect(screen.getByText('Transfer Tile')).toBeInTheDocument();
- });
-
- it('Should render TransferAccountList when the user is clicking on Transfer selector', () => {
- render();
-
- const el_transfer_tile = screen.getByTestId('dt_transfer_account_selector');
- userEvent.click(el_transfer_tile);
-
- expect(screen.getByText('Transfer Account List')).toBeInTheDocument();
- });
-});
diff --git a/packages/components/src/components/transfer-account-selector/__tests__/transfer-tile.spec.tsx b/packages/components/src/components/transfer-account-selector/__tests__/transfer-tile.spec.tsx
deleted file mode 100644
index 7e5cb2ae2281..000000000000
--- a/packages/components/src/components/transfer-account-selector/__tests__/transfer-tile.spec.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import Badge from '../../badge';
-import TransferTile from '../transfer-tile';
-import { render, screen } from '@testing-library/react';
-
-jest.mock('../../wallet-tile/wallet-tile', () => jest.fn(() => Wallet Tile
));
-
-describe('TransferTile', () => {
- let mocked_props: React.ComponentProps;
-
- beforeEach(() => {
- mocked_props = {
- is_mobile: false,
- label: 'Transfer from',
- selected_account: {
- balance: '100',
- currency: 'USD',
- icon: 'IconSrc',
- jurisdiction: ,
- label: 'Account Label',
- loginid: '12345678',
- type: 'fiat',
- wallet_icon: 'Wallet Icon',
- wallet_name: 'USD Wallet',
- },
- placeholder: 'Placeholder',
- };
- });
-
- it('Should render proper label', () => {
- render();
-
- expect(screen.getByText('Transfer from')).toBeInTheDocument();
- });
-
- it('Should render wallet tile if selected account exists', () => {
- render();
-
- expect(screen.getByText('Wallet Tile')).toBeInTheDocument();
- });
-
- it("Should render placeholder if selected account doesn't exist", () => {
- mocked_props.selected_account = undefined;
- render();
-
- expect(screen.getByText('Placeholder')).toBeInTheDocument();
- });
-
- it('Should render proper jurisdiction if selected account exists', () => {
- render();
-
- expect(screen.getByText('SVG')).toBeInTheDocument();
- });
-
- it('Should render chevron icon', () => {
- render();
-
- expect(screen.getByTestId('dt_chevron_icon')).toBeInTheDocument();
- });
-});
diff --git a/packages/components/src/components/transfer-account-selector/transfer-tile.tsx b/packages/components/src/components/transfer-account-selector/transfer-tile.tsx
deleted file mode 100644
index 8f8a4f89bdbf..000000000000
--- a/packages/components/src/components/transfer-account-selector/transfer-tile.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import Icon from '../icon';
-import Text from '../text';
-import { WalletTile } from '../wallet-tile';
-import type { TTransferAccount } from './transfer-account-selector';
-
-type TTransferTile = {
- is_mobile?: boolean;
- label?: string;
- selected_account?: TTransferAccount;
- placeholder?: string;
-};
-
-const ChevronIcon = () => {
- return (
-
-
-
- );
-};
-
-const TransferTile = ({ is_mobile, label, placeholder, selected_account }: TTransferTile) => {
- return (
-
-
-
-
- {label}
-
-
- {is_mobile &&
}
-
-
- {selected_account ? (
-
- ) : (
-
- {placeholder}
-
- )}
-
AppLinkedWithWalletIcon
)
-);
-jest.mock('../../wallet-icon/wallet-icon', () => jest.fn(() => WalletIcon
));
-
-describe('WalletTile', () => {
- let mocked_props: React.ComponentProps;
-
- beforeEach(() => {
- mocked_props = {
- account: {
- balance: '100',
- currency: 'USD',
- icon: 'Icon',
- jurisdiction: ,
- label: 'Account Label',
- loginid: '12345678',
- type: 'fiat',
- wallet_icon: 'Wallet Icon',
- wallet_name: 'USD Wallet',
- },
- className: 'classname',
- has_hover: false,
- icon_size: 'small',
- is_active: false,
- is_mobile: false,
- is_value: false,
- onClick: jest.fn(),
- };
- });
-
- it('Should render merged icon (App with Wallet)', () => {
- render();
-
- expect(screen.getByText('AppLinkedWithWalletIcon')).toBeInTheDocument();
- });
-
- it('Should render single wallet icon, if there is no app icon', () => {
- mocked_props.account = { ...mocked_props.account, icon: '' };
- render();
-
- expect(screen.getByText('WalletIcon')).toBeInTheDocument();
- });
-
- it('Should render jurisdiction in mobile view', () => {
- mocked_props.is_value = true;
- mocked_props.is_mobile = true;
- render();
-
- expect(screen.getByText('SVG')).toBeInTheDocument();
- });
-
- it('Should render jurisdiction in desktop view', () => {
- mocked_props.is_value = false;
- render();
-
- expect(screen.getByText('SVG')).toBeInTheDocument();
- });
-
- it('Should render proper account label', () => {
- render();
-
- expect(screen.getByText('Account Label')).toBeInTheDocument();
- });
-
- it('Should render proper account balance', () => {
- render();
-
- expect(screen.getByText('Balance: 100 USD')).toBeInTheDocument();
- });
-
- it('Should trigger onClick callback when the user is clicking on Wallet tile', () => {
- render();
-
- const el_wallet_tile = screen.getByTestId('dt_wallet_tile');
- userEvent.click(el_wallet_tile);
-
- expect(mocked_props.onClick).toHaveBeenCalledTimes(1);
- });
-});
diff --git a/packages/components/src/components/wallet-tile/index.ts b/packages/components/src/components/wallet-tile/index.ts
deleted file mode 100644
index 5838b63b8187..000000000000
--- a/packages/components/src/components/wallet-tile/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import WalletTile from './wallet-tile';
-
-export { WalletTile };
diff --git a/packages/components/src/components/wallet-tile/wallet-tile.tsx b/packages/components/src/components/wallet-tile/wallet-tile.tsx
deleted file mode 100644
index 813d80869989..000000000000
--- a/packages/components/src/components/wallet-tile/wallet-tile.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import Text from '../text';
-import { getCurrencyDisplayCode } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import { AppLinkedWithWalletIcon } from '../app-linked-with-wallet-icon';
-import { WalletIcon } from '../wallet-icon';
-import './wallet-tile.scss';
-
-type TAccount = {
- balance?: string;
- currency: string;
- gradient_class: string;
- icon?: string;
- jurisdiction?: JSX.Element;
- label?: string;
- loginid: string;
- type: 'fiat' | 'crypto';
- wallet_icon?: string;
- wallet_name?: string;
-};
-
-type TIconSize =
- | React.ComponentProps['size']
- | React.ComponentProps['size'];
-
-type TWalletTileProps = {
- account: TAccount;
- className?: string;
- has_hover?: boolean;
- icon_size?: TIconSize;
- is_active?: boolean;
- is_mobile?: boolean;
- is_value?: boolean;
- onClick?: () => void;
-};
-
-const WalletTile = ({
- account,
- className,
- has_hover,
- icon_size = 'small',
- is_active,
- is_mobile,
- is_value,
- onClick,
-}: TWalletTileProps) => {
- const IconComponent = () => {
- if (account.icon && account.wallet_icon) {
- return (
- ['size']}
- type={account.type}
- wallet_icon={account.wallet_icon}
- />
- );
- } else if (account.wallet_icon) {
- return (
- ['size']}
- type={account.type}
- />
- );
- }
-
- return null;
- };
-
- const Label = () => {
- if (account.label) {
- let size;
- if (is_value) size = is_mobile ? 'xxxxs' : 'xxxs';
- else size = is_mobile ? 'xxs' : 'xs';
-
- return (
-
- {account.label}
-
- );
- }
-
- return null;
- };
-
- const Balance = () => {
- if (account.balance) {
- let size;
- if (is_value) size = is_mobile ? 'xxxxs' : 'xxxs';
- else size = is_mobile ? 'xxxs' : 'xxs';
-
- return (
-
- {localize('Balance')}: {account.balance} {getCurrencyDisplayCode(account.currency)}
-
- );
- }
-
- return null;
- };
-
- return (
- onClick?.()}
- >
-
-
-
-
-
- {is_value && is_mobile && account.jurisdiction}
-
-
-
-
-
-
-
- {!is_value && account.jurisdiction}
-