fix: icon design mismatch (#26)

heorhi-deriv · Jan 24, 2023 · 7fc723f · 7fc723f
1 parent 71a7958
commit 7fc723f
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 40 deletions.
diff --git a/packages/cashier/globals.d.ts b/packages/cashier/globals.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: React.SVGAttributes<SVGElement>;
+    export default content;
+}
diff --git a/...onents/icon/appstore/ic-appstore-cfds.svg → ...vgs/trading-platform/ic-appstore-cfds.svg b/...onents/icon/appstore/ic-appstore-cfds.svg → ...vgs/trading-platform/ic-appstore-cfds.svg
diff --git a/...nts/icon/appstore/ic-appstore-derived.svg → .../trading-platform/ic-appstore-derived.svg b/...nts/icon/appstore/ic-appstore-derived.svg → .../trading-platform/ic-appstore-derived.svg
diff --git a/...s/icon/appstore/ic-appstore-financial.svg → ...rading-platform/ic-appstore-financial.svg b/...s/icon/appstore/ic-appstore-financial.svg → ...rading-platform/ic-appstore-financial.svg
diff --git a/...nts/icon/appstore/ic-appstore-options.svg → .../trading-platform/ic-appstore-options.svg b/...nts/icon/appstore/ic-appstore-options.svg → .../trading-platform/ic-appstore-options.svg
diff --git a/packages/cashier/src/assets/svgs/trading-platform/index.tsx b/packages/cashier/src/assets/svgs/trading-platform/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Derived from './ic-appstore-derived.svg';
+import Financial from './ic-appstore-financial.svg';
+import Options from './ic-appstore-options.svg';
+import CFDs from './ic-appstore-cfds.svg';
+
+export interface IconProps<T> {
+    icon: T;
+    className?: string;
+    size?: number;
+    onClick?: () => void;
+}
+
+export const PlatformIcons = {
+    Derived,
+    Financial,
+    Options,
+    CFDs,
+};
+
+const TradingPlatformIcon = ({ icon, className, size, onClick }: IconProps<keyof typeof PlatformIcons>) => {
+    const PlatformIcon = PlatformIcons[icon] as React.ElementType;
+
+    return PlatformIcon ? (
+        <PlatformIcon className={className} style={{ width: size, height: size }} onClick={onClick} />
+    ) : null;
+};
+
+export default TradingPlatformIcon;
diff --git a/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx b/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+import TradingPlatformIcon from '../../assets/svgs/trading-platform';
+import { TAccountsList } from '../../types';
+
+type TAccountPlatformIcon = {
+    size: number;
+    account: TAccountsList['account'];
+    is_pre_appstore: boolean;
+    icon_class_name?: string;
+    appstore_icon_class_name?: string;
+    appstoreIconOnClickHandler?: () => void;
+};
+
+const AccountPlatformIcon = ({
+    account,
+    is_pre_appstore,
+    size,
+    icon_class_name,
+    appstore_icon_class_name,
+    appstoreIconOnClickHandler,
+}: TAccountPlatformIcon) => {
+    return is_pre_appstore && account.is_mt && account.platform_icon ? (
+        <TradingPlatformIcon
+            icon={account.platform_icon}
+            size={size}
+            className={appstore_icon_class_name}
+            onClick={appstoreIconOnClickHandler}
+        />
+    ) : (
+        <Icon
+            icon={account.platform_icon || `IcCurrency-${account?.currency?.toLowerCase()}`}
+            size={size}
+            className={icon_class_name}
+        />
+    );
+};
+
+export default AccountPlatformIcon;
diff --git a/packages/cashier/src/components/account-platform-icon/index.ts b/packages/cashier/src/components/account-platform-icon/index.ts
@@ -0,0 +1,3 @@
+import AccountPlatformIcon from './account-platform-icon';
+
+export default AccountPlatformIcon;
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { Field, FieldProps, Formik, Form } from 'formik';
-import { Button, Dropdown, Icon, Input, Loading, Money, Text } from '@deriv/components';
+import { Button, Dropdown, Input, Loading, Money, Text } from '@deriv/components';
 import {
     getDecimalPlaces,
     getCurrencyDisplayCode,
@@ -20,6 +20,7 @@ import PercentageSelector from '../../../components/percentage-selector';
 import RecentTransaction from '../../../components/recent-transaction';
 import AccountTransferNote from './account-transfer-form-side-note';
 import SideNote from '../../../components/side-note';
+import AccountPlatformIcon from '../../../components/account-platform-icon';
 import './account-transfer-form.scss';
 
 type TAccountTransferFormProps = {
@@ -30,17 +31,11 @@ type TAccountTransferFormProps = {
 };
 
 const AccountOption = ({ account, idx, is_pre_appstore }: TAccountsList) => {
-    const account_platform_icon =
-        is_pre_appstore && account.is_mt ? `IcAppstore${account.platform_icon}` : account.platform_icon;
-
     return (
         <React.Fragment key={idx}>
             {(account.currency || account.platform_icon) && (
                 <div className='account-transfer-form__icon'>
-                    <Icon
-                        icon={account_platform_icon || `IcCurrency-${account?.currency?.toLowerCase()}`}
-                        className='account-transfer-form__currency-icon'
-                    />
+                    <AccountPlatformIcon account={account} is_pre_appstore={is_pre_appstore} size={16} />
                 </div>
             )}
 
@@ -85,7 +80,6 @@ const AccountTransferForm = observer(
             client,
             common: { is_from_derivgo },
             modules: { cashier },
-            traders_hub,
         } = useStore();
 
         const {

diff --git a/.../cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx b/.../cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import AccountPlatformIcon from '../../../components/account-platform-icon';
 import { withRouter, RouteComponentProps } from 'react-router';
 import { Button, Modal, Icon, Text } from '@deriv/components';
 import { formatMoney, getCurrencyDisplayCode, isMobile, routes } from '@deriv/shared';
@@ -37,14 +38,6 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR
     const [is_switch_visible, setIsSwitchVisible] = React.useState(false);
     const [switch_to, setSwitchTo] = React.useState<TSwitch>({});
 
-    const selcted_from_platform_icon =
-        is_pre_appstore && selected_from.is_mt
-            ? `IcAppstore${selected_from.platform_icon}`
-            : selected_from.platform_icon;
-
-    const selcted_to_platform_icon =
-        is_pre_appstore && selected_to.is_mt ? `IcAppstore${selected_to.platform_icon}` : selected_to.platform_icon;
-
     React.useEffect(() => {
         return () => {
             resetAccountTransfer();
@@ -108,10 +101,7 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR
             <div className='account-transfer-receipt__crypto--details-wrapper'>
                 <div className='crypto-transfer-from'>
                     <div className='crypto-transfer-from-details'>
-                        <Icon
-                            icon={selcted_from_platform_icon || `IcCurrency-${selected_from?.currency?.toLowerCase()}`}
-                            size={32}
-                        />
+                        <AccountPlatformIcon account={selected_from} is_pre_appstore={is_pre_appstore} size={32} />
                         <Text as='p' size='s' weight='bold'>
                             <Localize i18n_default_text={selected_from.text} />
                         </Text>
@@ -125,10 +115,7 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR
                 <Icon className='crypto-transferred-icon' icon='IcArrowDownBold' />
                 <div className='crypto-transfer-to'>
                     <div className='crypto-transfer-to-details'>
-                        <Icon
-                            icon={selcted_to_platform_icon || `IcCurrency-${selected_to?.currency?.toLowerCase()}`}
-                            size={32}
-                        />
+                        <AccountPlatformIcon account={selected_to} is_pre_appstore={is_pre_appstore} size={32} />
                         <Text as='p' size='s' weight='bold'>
                             <Localize i18n_default_text={selected_to.text} />
                         </Text>

diff --git a/packages/cashier/src/stores/account-transfer-store.js b/packages/cashier/src/stores/account-transfer-store.js
@@ -454,10 +454,8 @@ export default class AccountTransferStore {
                     platform_icon:
                         account.account_type === CFD_PLATFORMS.MT5 &&
                         this.root_store.client.is_pre_appstore &&
-                        this.root_store.traders_hub?.combined_cfd_mt5_accounts.find(x => x.login === account.login)
-                            ? this.root_store.traders_hub?.combined_cfd_mt5_accounts.find(
-                                  x => x.login === account.login
-                              ).icon
+                        combined_cfd_mt5_account
+                            ? combined_cfd_mt5_account.icon
                             : cfd_icon_display,
                     status: account?.status,
                     market_type: getCFDAccount({

diff --git a/packages/cashier/src/types/shared/account.types.ts b/packages/cashier/src/types/shared/account.types.ts
@@ -2,6 +2,7 @@
 /* ACCOUNT TYPES                                                              */
 /* -------------------------------------------------------------------------- */
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
+import { PlatformIcons } from '../../assets/svgs/trading-platform/index';
 
 export type TAccount = {
     balance?: string | number;
@@ -12,7 +13,7 @@ export type TAccount = {
     is_mt?: boolean;
     market_type?: string;
     nativepicker_text: string;
-    platform_icon?: string;
+    platform_icon?: string & keyof typeof PlatformIcons;
     text: JSX.Element | string;
     value?: string;
 };

diff --git a/packages/cashier/tsconfig.json b/packages/cashier/tsconfig.json
@@ -2,6 +2,7 @@
     "extends": "../../tsconfig.json",
     "compilerOptions": {
         "paths": {
+            "Assets/*": ["src/Assets/*"],
             "Components/*": ["src/components/*"],
             "Config/*": ["src/config/*"],
             "Constants/*": ["src/constants/*"],
@@ -15,5 +16,5 @@
         "outDir": "./dist",
         "baseUrl": "./"
     },
-    "include": ["src", "@deriv-stores.d.ts", "../../utils.d.ts"]
+    "include": ["src", "globals.d.ts", "@deriv-stores.d.ts", "../../utils.d.ts"]
 }
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
@@ -6,7 +6,6 @@ import './appstore/ic-appstore-add.svg';
 import './appstore/ic-appstore-app-card-default-background-small.svg';
 import './appstore/ic-appstore-app-card-default-background.svg';
 import './appstore/ic-appstore-cfds-trade-type.svg';
-import './appstore/ic-appstore-cfds.svg';
 import './appstore/ic-appstore-check.svg';
 import './appstore/ic-appstore-checked-red-bg.svg';
 import './appstore/ic-appstore-checked-transparent.svg';
@@ -15,10 +14,8 @@ import './appstore/ic-appstore-circle.svg';
 import './appstore/ic-appstore-close-dark.svg';
 import './appstore/ic-appstore-close-light.svg';
 import './appstore/ic-appstore-deriv-logo.svg';
-import './appstore/ic-appstore-derived.svg';
 import './appstore/ic-appstore-ellipse.svg';
 import './appstore/ic-appstore-error.svg';
-import './appstore/ic-appstore-financial.svg';
 import './appstore/ic-appstore-get-more-accounts.svg';
 import './appstore/ic-appstore-home-dark.svg';
 import './appstore/ic-appstore-home.svg';
@@ -28,7 +25,6 @@ import './appstore/ic-appstore-linked-wallets.svg';
 import './appstore/ic-appstore-menu-homepage.svg';
 import './appstore/ic-appstore-multipliers-trade-type.svg';
 import './appstore/ic-appstore-option-trade-type.svg';
-import './appstore/ic-appstore-options.svg';
 import './appstore/ic-appstore-skeleton-card-border.svg';
 import './appstore/ic-appstore-success.svg';
 import './appstore/ic-appstore-traders-hub-home.svg';

diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
@@ -9,7 +9,6 @@ export const icons =
         'IcAppstoreAppCardDefaultBackgroundSmall',
         'IcAppstoreAppCardDefaultBackground',
         'IcAppstoreCfdsTradeType',
-        'IcAppstoreCfds',
         'IcAppstoreCheck',
         'IcAppstoreCheckedRedBg',
         'IcAppstoreCheckedTransparent',
@@ -18,10 +17,8 @@ export const icons =
         'IcAppstoreCloseDark',
         'IcAppstoreCloseLight',
         'IcAppstoreDerivLogo',
-        'IcAppstoreDerived',
         'IcAppstoreEllipse',
         'IcAppstoreError',
-        'IcAppstoreFinancial',
         'IcAppstoreGetMoreAccounts',
         'IcAppstoreHomeDark',
         'IcAppstoreHome',
@@ -31,7 +28,6 @@ export const icons =
         'IcAppstoreMenuHomepage',
         'IcAppstoreMultipliersTradeType',
         'IcAppstoreOptionTradeType',
-        'IcAppstoreOptions',
         'IcAppstoreSkeletonCardBorder',
         'IcAppstoreSuccess',
         'IcAppstoreTradersHubHome',
@@ -59,7 +55,6 @@ export const icons =
         'IcAppstoreWalletUsdcLight',
         'IcAppstoreWalletUsdtLight',
         'IcAppstoreWarning',
-        'IcAppstoreOptions',
     ],
     'brand': [
         'IcBrandBinarybot',