From fd0ce0b739e5a75416dcdae4446a06d32e4d55e9 Mon Sep 17 00:00:00 2001 From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com> Date: Mon, 1 Apr 2024 20:14:59 +0800 Subject: [PATCH] [WALL] Aizad/WALL-3688/Replace Icons inside of CFD Compare Modal with quill-icons (#14407) * chore: update title icons with quill icons * chore: update arrow icons for carousel --- .../WalletsAddMoreCarousel.tsx | 7 ++-- .../CompareAccountsCarouselButton.tsx | 40 ++++++++++--------- .../CompareAccountsTitleIcon.tsx | 7 +--- .../{constants.ts => constants.tsx} | 21 +++++++--- .../CompareAccounts/tradingPlatformIcons.tsx | 17 -------- .../wallets/src/public/images/left-arrow.svg | 3 -- .../wallets/src/public/images/right-arrow.svg | 3 -- 7 files changed, 41 insertions(+), 57 deletions(-) rename packages/wallets/src/features/cfd/screens/CompareAccounts/{constants.ts => constants.tsx} (58%) delete mode 100644 packages/wallets/src/features/cfd/screens/CompareAccounts/tradingPlatformIcons.tsx delete mode 100644 packages/wallets/src/public/images/left-arrow.svg delete mode 100644 packages/wallets/src/public/images/right-arrow.svg diff --git a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx index 209b92cea680..79023dd5a8a7 100644 --- a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx @@ -2,9 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import useEmblaCarousel, { EmblaCarouselType } from 'embla-carousel-react'; import { useHover } from 'usehooks-ts'; import { useAllWalletAccounts, useAuthorize } from '@deriv/api-v2'; +import { LabelPairedChevronLeftLgFillIcon, LabelPairedChevronRightLgFillIcon } from '@deriv/quill-icons'; import useDevice from '../../hooks/useDevice'; -import LeftArrow from '../../public/images/left-arrow.svg'; -import RightArrow from '../../public/images/right-arrow.svg'; import { IconButton, WalletText } from '../Base'; import { WalletsAddMoreLoader } from '../SkeletonLoader'; import WalletsAddMoreCard from '../WalletsAddMoreCard'; @@ -74,7 +73,7 @@ const WalletsAddMoreCarousel: React.FC = () => { className='wallets-add-more__carousel-btn wallets-add-more__carousel-btn--prev' color='white' disabled={!prevBtnEnabled} - icon={} + icon={} isRound onClick={scrollPrev} size='lg' @@ -83,7 +82,7 @@ const WalletsAddMoreCarousel: React.FC = () => { className='wallets-add-more__carousel-btn wallets-add-more__carousel-btn--next' color='white' disabled={!nextBtnEnabled} - icon={} + icon={} isRound onClick={scrollNext} size='lg' diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx index ab2ea5ba41e2..f05b38fd795d 100644 --- a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx +++ b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx @@ -1,8 +1,7 @@ import React from 'react'; import classNames from 'classnames'; +import { LabelPairedChevronLeftLgFillIcon, LabelPairedChevronRightLgFillIcon } from '@deriv/quill-icons'; import { IconButton } from '../../../../components/Base'; -import LeftArrow from '../../../../public/images/left-arrow.svg'; -import RightArrow from '../../../../public/images/right-arrow.svg'; import './CompareAccountsCarouselButton.scss'; type TPrevNextButtonProps = { @@ -11,22 +10,25 @@ type TPrevNextButtonProps = { onClick: () => void; }; -const CFDCompareAccountsCarouselButton = (props: TPrevNextButtonProps) => { - const { enabled, isNext, onClick } = props; +const CFDCompareAccountsCarouselButton = ({ enabled, isNext, onClick }: TPrevNextButtonProps) => ( + + ) : ( + + ) + } + isRound + onClick={onClick} + size='md' + /> +); - return ( - : } - isRound - onClick={onClick} - size='md' - /> - ); -}; export default CFDCompareAccountsCarouselButton; diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx index efaefb1a707c..5c7c054c3087 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx @@ -6,7 +6,6 @@ import InfoIcon from '../../../../public/images/ic-info-outline.svg'; import { THooks, TPlatforms } from '../../../../types'; import { CFD_PLATFORMS } from '../../constants'; import { ACCOUNT_ICONS, MARKET_TYPE_SHORTCODE } from './constants'; -import TradingPlatformIcons from './tradingPlatformIcons'; import './CompareAccountsTitleIcon.scss'; type TMarketType = THooks.AvailableMT5Accounts['market_type']; @@ -69,12 +68,10 @@ const CompareAccountsTitleIcon = ({ isDemo, marketType, platform, shortCode }: T const labuanJurisdictionMessage = 'Choosing this jurisdiction will give you a Financial STP account. Your trades will go directly to the market and have tighter spreads.'; - const TradingPlatformIcon = TradingPlatformIcons[jurisdictionCardIcon]; - return ( -
- +
+ {jurisdictionCardIcon}
{jurisdictionCardTitle} diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.ts b/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx similarity index 58% rename from packages/wallets/src/features/cfd/screens/CompareAccounts/constants.ts rename to packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx index c53ed8878f89..7eeeeca05adf 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.ts +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx @@ -1,12 +1,21 @@ +import React from 'react'; +import { + AccountsDerivXIcon, + AccountsDmt5CfdsIcon, + AccountsDmt5DerivedIcon, + AccountsDmt5FinancialIcon, + AccountsDmt5SwfIcon, + PartnersProductDerivCtraderBrandLightLogoHorizontalIcon, +} from '@deriv/quill-icons'; import { CFD_PLATFORMS, MARKET_TYPE } from '../../constants'; export const ACCOUNT_ICONS = { - [MARKET_TYPE.SYNTHETIC]: 'Derived', - [MARKET_TYPE.FINANCIAL]: 'Financial', - [MARKET_TYPE.ALL]: 'SwapFree', - [CFD_PLATFORMS.DXTRADE]: 'DerivX', - [CFD_PLATFORMS.CTRADER]: 'CTrader', - default: 'CFDs', + [MARKET_TYPE.SYNTHETIC]: , + [MARKET_TYPE.FINANCIAL]: , + [MARKET_TYPE.ALL]: , + [CFD_PLATFORMS.DXTRADE]: , + [CFD_PLATFORMS.CTRADER]: , + default: , } as const; export const MARKET_TYPE_SHORTCODE = { diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/tradingPlatformIcons.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/tradingPlatformIcons.tsx deleted file mode 100644 index d21a491b513f..000000000000 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/tradingPlatformIcons.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import CTrader from '../../../../public/images/ctrader.svg'; -import DerivX from '../../../../public/images/derivx.svg'; -import CFDs from '../../../../public/images/mt5-cfds.svg'; -import Derived from '../../../../public/images/mt5-derived.svg'; -import Financial from '../../../../public/images/mt5-financial.svg'; -import SwapFree from '../../../../public/images/mt5-swap-free.svg'; - -const PlatformIcons = { - CFDs, - CTrader, - Derived, - DerivX, - Financial, - SwapFree, -}; - -export default PlatformIcons; diff --git a/packages/wallets/src/public/images/left-arrow.svg b/packages/wallets/src/public/images/left-arrow.svg deleted file mode 100644 index f4b5055253d9..000000000000 --- a/packages/wallets/src/public/images/left-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/wallets/src/public/images/right-arrow.svg b/packages/wallets/src/public/images/right-arrow.svg deleted file mode 100644 index 29b430fa5160..000000000000 --- a/packages/wallets/src/public/images/right-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file