[WALL] Aizad/WALL-3925/Removing SVGs inside of Wallets/Component package and replace it with deriv/quill-icon (deriv-com#14890)

* chore: remove svg from walletalertmessage and other svgs

* chore: migrate WalletClipboard and remove svg icons

* chore: migrate PasswordViewerIcon

* chore: migrate DatePicker component

* chore: migrate WalletError component

* chore: fix Options icon issue in mobile

Author: aizad-deriv

packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx

@@ -1,24 +1,25 @@
 import React, { ReactNode } from 'react';
-import ErrorCircleCrossmark from '../../../public/images/error-circle-crossmark.svg';
-import InfoCircleDots from '../../../public/images/info-circle-dots.svg';
-import SuccessCircleCheckmark from '../../../public/images/success-circle-checkmark.svg';
+import { LegacyLossIcon, LegacySettlementFillIcon, LegacyWonIcon } from '@deriv/quill-icons';
 import { WalletText } from '../index';
 import './WalletAlertMessage.scss';
 
 const typeMapper = {
     error: {
         color: 'error',
-        icon: ErrorCircleCrossmark,
+        fill: '#EC3F3F',
+        icon: LegacyLossIcon,
     },
     info: {
         color: 'blue',
-        icon: InfoCircleDots,
+        fill: '#377CFC',
+        icon: LegacySettlementFillIcon,
     },
     success: {
         color: 'success',
-        icon: SuccessCircleCheckmark,
+        fill: '#4BB4B3',
+        icon: LegacyWonIcon,
     },
-};
+} as const;
 
 type TProps = {
     children?: ReactNode;
@@ -29,14 +30,13 @@ type TProps = {
 const WalletAlertMessage: React.FC<TProps> = ({ children, message, type }) => {
     const Icon = typeMapper[type].icon;
     const color = typeMapper[type].color;
+    const fill = typeMapper[type].fill;
 
     return (
         <div className='wallets-alert-message' data-testid='dt_wallet-alert-message'>
             <div className='wallets-alert-message__icon-container'>
                 <div className='wallets-alert-message__icon-container__line' />
-                <div className='wallets-alert-message__icon-container__icon'>
-                    <Icon />
-                </div>
+                <Icon className='wallets-alert-message__icon-container__icon' fill={fill} iconSize='xs' />
             </div>
             <div className='wallets-alert-message__message-container'>
                 <WalletText color={color} size='xs'>

packages/wallets/src/components/Base/WalletClipboard/WalletClipboard.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard, useHover } from 'usehooks-ts';
+import { LegacyCopy1pxIcon, LegacyWonIcon } from '@deriv/quill-icons';
 import useDevice from '../../../hooks/useDevice';
-import Clipboard from '../../../public/images/clipboard.svg';
-import CheckmarkCircle from '../../../public/images/ic-checkmark-circle.svg';
 import { Tooltip } from '../Tooltip';
 import './WalletClipboard.scss';
 
@@ -40,7 +39,7 @@ const WalletClipboard = ({
     return (
         <Tooltip alignment='right' isVisible={isHovered && !isMobile} message={isCopied ? 'Copied!' : 'Copy'}>
             <button className='wallets-clipboard' onClick={onClick} ref={hoverRef}>
-                {isCopied ? <CheckmarkCircle /> : <Clipboard />}
+                {isCopied ? <LegacyWonIcon iconSize='xs' /> : <LegacyCopy1pxIcon iconSize='xs' />}
             </button>
         </Tooltip>
     );

packages/wallets/src/components/Base/WalletPasswordField/PasswordViewerIcon.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import PasswordHide from '../../../public/images/ic-password-hide.svg';
-import PasswordShow from '../../../public/images/ic-password-show.svg';
+import { LegacyVisibility1pxIcon, LegacyVisibilityOff1pxIcon } from '@deriv/quill-icons';
 import { IconButton } from '../IconButton';
 import './PasswordViewerIcon.scss';
 
@@ -17,7 +16,7 @@ const PasswordViewerIcon: React.FC<PasswordViewerIconProps> = ({ isIconDisabled,
             'wallets-password-viewer-icon--disabled': isIconDisabled,
         })}
         color='transparent'
-        icon={viewPassword ? <PasswordShow /> : <PasswordHide />}
+        icon={viewPassword ? <LegacyVisibility1pxIcon iconSize='xs' /> : <LegacyVisibilityOff1pxIcon iconSize='xs' />}
         isRound
         onClick={() => !isIconDisabled && setViewPassword(!viewPassword)}
         size='sm'

packages/wallets/src/components/DatePicker/DatePicker.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Calendar, { CalendarProps } from 'react-calendar';
 import { useOnClickOutside } from 'usehooks-ts';
-import CalendarIcon from '../../public/images/ic-calendar.svg';
+import { LegacyCalendar1pxIcon } from '@deriv/quill-icons';
 import unixToDateString from '../../utils/utils';
 import FlowTextField, { TFlowFieldProps } from '../FlowField/FlowTextField';
 import customFormatShortWeekday from './utils';
@@ -67,7 +67,7 @@ const DatePicker = ({
                         disabled={disabled}
                         onClick={toggleCalendar}
                     >
-                        <CalendarIcon />
+                        <LegacyCalendar1pxIcon iconSize='xs' />
                     </button>
                 )}
                 showMessage

packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx

@@ -17,7 +17,7 @@ const DerivAppsTradingAccount: React.FC = () => {
     return (
         <div className='wallets-deriv-apps-section wallets-deriv-apps-section__border'>
             <div className={isMobile ? 'wallets-deriv-apps-section__icon-small' : 'wallets-deriv-apps-section__icon'}>
-                <WalletMarketIcon icon='IcWalletOptionsLight' size='lg' />
+                <WalletMarketIcon icon='IcWalletOptionsLight' size={isMobile ? 'md' : 'lg'} />
             </div>
             <div className='wallets-deriv-apps-section__details'>
                 <div className='wallets-deriv-apps-section__title-and-badge'>

packages/wallets/src/components/WalletError/WalletError.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps } from 'react';
+import { LegacyWarningIcon } from '@deriv/quill-icons';
 import useDevice from '../../hooks/useDevice';
-import ErrorIcon from '../../public/images/error-icon.svg';
 import { ModalStepWrapper } from '../Base';
 import WalletButton from '../Base/WalletButton/WalletButton';
 import { WalletsActionScreen } from '../WalletsActionScreen';
@@ -28,7 +28,7 @@ const WalletError: React.FC<TProps> = ({
             <div className='wallets-error'>
                 <WalletsActionScreen
                     description={errorMessage}
-                    icon={<ErrorIcon />}
+                    icon={<LegacyWarningIcon fill='#FF444F' iconSize='2xl' />}
                     renderButtons={() => (
                         <WalletButton isFullWidth={isMobile} onClick={onClick} size='lg' variant={buttonVariant}>
                             {buttonText}

packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorIcon from '../../public/images/error-icon.svg';
+import { LegacyWarningIcon } from '@deriv/quill-icons';
 import { WalletButton } from '../Base';
 import { WalletsActionScreen } from '../WalletsActionScreen';
 
@@ -13,7 +13,7 @@ const ErrorState: React.FC<TProps> = ({
     return (
         <WalletsActionScreen
             description={message}
-            icon={<ErrorIcon data-testid='dt_error_icon' />}
+            icon={<LegacyWarningIcon data-testid='dt_error_icon' fill='#FF444F' iconSize='2xl' />}
             renderButtons={() => (
                 <WalletButton onClick={() => window.location.reload()} size='lg' variant='ghost'>
                     Try again