From 7fc723f70d8ba1e7106677589df4aee58116ebe0 Mon Sep 17 00:00:00 2001 From: GeorgeUsynin <70709786+GeorgeUsynin@users.noreply.github.com> Date: Tue, 24 Jan 2023 12:47:22 +0300 Subject: [PATCH] fix: icon design mismatch (#26) --- packages/cashier/globals.d.ts | 4 ++ .../trading-platform}/ic-appstore-cfds.svg | 0 .../trading-platform}/ic-appstore-derived.svg | 0 .../ic-appstore-financial.svg | 0 .../trading-platform}/ic-appstore-options.svg | 0 .../assets/svgs/trading-platform/index.tsx | 29 ++++++++++++++ .../account-platform-icon.tsx | 39 +++++++++++++++++++ .../components/account-platform-icon/index.ts | 3 ++ .../account-transfer-form.tsx | 12 ++---- .../account-transfer-receipt.tsx | 19 ++------- .../src/stores/account-transfer-store.js | 6 +-- .../cashier/src/types/shared/account.types.ts | 3 +- packages/cashier/tsconfig.json | 3 +- .../components/src/components/icon/icons.js | 4 -- packages/components/stories/icon/icons.js | 5 --- 15 files changed, 87 insertions(+), 40 deletions(-) create mode 100644 packages/cashier/globals.d.ts rename packages/{components/src/components/icon/appstore => cashier/src/assets/svgs/trading-platform}/ic-appstore-cfds.svg (100%) rename packages/{components/src/components/icon/appstore => cashier/src/assets/svgs/trading-platform}/ic-appstore-derived.svg (100%) rename packages/{components/src/components/icon/appstore => cashier/src/assets/svgs/trading-platform}/ic-appstore-financial.svg (100%) rename packages/{components/src/components/icon/appstore => cashier/src/assets/svgs/trading-platform}/ic-appstore-options.svg (100%) create mode 100644 packages/cashier/src/assets/svgs/trading-platform/index.tsx create mode 100644 packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx create mode 100644 packages/cashier/src/components/account-platform-icon/index.ts diff --git a/packages/cashier/globals.d.ts b/packages/cashier/globals.d.ts new file mode 100644 index 000000000000..397f524acbf5 --- /dev/null +++ b/packages/cashier/globals.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: React.SVGAttributes; + export default content; +} diff --git a/packages/components/src/components/icon/appstore/ic-appstore-cfds.svg b/packages/cashier/src/assets/svgs/trading-platform/ic-appstore-cfds.svg similarity index 100% rename from packages/components/src/components/icon/appstore/ic-appstore-cfds.svg rename to packages/cashier/src/assets/svgs/trading-platform/ic-appstore-cfds.svg diff --git a/packages/components/src/components/icon/appstore/ic-appstore-derived.svg b/packages/cashier/src/assets/svgs/trading-platform/ic-appstore-derived.svg similarity index 100% rename from packages/components/src/components/icon/appstore/ic-appstore-derived.svg rename to packages/cashier/src/assets/svgs/trading-platform/ic-appstore-derived.svg diff --git a/packages/components/src/components/icon/appstore/ic-appstore-financial.svg b/packages/cashier/src/assets/svgs/trading-platform/ic-appstore-financial.svg similarity index 100% rename from packages/components/src/components/icon/appstore/ic-appstore-financial.svg rename to packages/cashier/src/assets/svgs/trading-platform/ic-appstore-financial.svg diff --git a/packages/components/src/components/icon/appstore/ic-appstore-options.svg b/packages/cashier/src/assets/svgs/trading-platform/ic-appstore-options.svg similarity index 100% rename from packages/components/src/components/icon/appstore/ic-appstore-options.svg rename to packages/cashier/src/assets/svgs/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 new file mode 100644 index 000000000000..9c9989562c7a --- /dev/null +++ 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 { + icon: T; + className?: string; + size?: number; + onClick?: () => void; +} + +export const PlatformIcons = { + Derived, + Financial, + Options, + CFDs, +}; + +const TradingPlatformIcon = ({ icon, className, size, onClick }: IconProps) => { + const PlatformIcon = PlatformIcons[icon] as React.ElementType; + + return PlatformIcon ? ( + + ) : 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 new file mode 100644 index 000000000000..17f77f2c5883 --- /dev/null +++ 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 ? ( + + ) : ( + + ); +}; + +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 new file mode 100644 index 000000000000..05d8e6ed1d41 --- /dev/null +++ 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 index 1ca12566269f..73b95a01fdff 100644 --- 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 ( {(account.currency || account.platform_icon) && (
- +
)} @@ -85,7 +80,6 @@ const AccountTransferForm = observer( client, common: { is_from_derivgo }, modules: { cashier }, - traders_hub, } = useStore(); const { diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx index 9f23e63a552a..07bfe75e2b6a 100644 --- a/packages/cashier/src/pages/account-transfer/account-transfer-receipt/account-transfer-receipt.tsx +++ b/packages/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({}); - 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
- + @@ -125,10 +115,7 @@ const AccountTransferReceipt = observer(({ onClose, history }: TAccountTransferR
- + diff --git a/packages/cashier/src/stores/account-transfer-store.js b/packages/cashier/src/stores/account-transfer-store.js index 30c618e3c36a..824cdad47e57 100644 --- 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 index e48742fd5237..f19df4b6a4ae 100644 --- 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 index 4ef66721411e..b78761ddbc50 100644 --- 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 index 2ac29c5d44d7..aeec6f844987 100644 --- 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 index 9e5e30f6c4a6..7198ce7eb30e 100644 --- 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',