diff --git a/packages/appstore/package.json b/packages/appstore/package.json index 22d95c52c8ed..953c8042f6ec 100644 --- a/packages/appstore/package.json +++ b/packages/appstore/package.json @@ -29,7 +29,6 @@ "@deriv/cashier": "^1.0.0", "@deriv/components": "^1.0.0", "@deriv/cfd": "^1.0.0", - "@deriv/hooks": "^1.0.0", "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/trader": "^3.8.0", diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.scss b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.scss new file mode 100644 index 000000000000..079da1291c28 --- /dev/null +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.scss @@ -0,0 +1,25 @@ +.wallet-account { + width: 28.8rem; + height: 4.8rem; + display: flex; + align-items: center; + justify-content: flex-start; + border: 1px solid $color-grey-2; + border-radius: 0.8rem; + + @include mobile { + width: 24.4rem; + } + + &__details { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + margin-left: 1.6rem; + } + + &__icon { + margin-left: 1.6rem; + } +} diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.tsx b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.tsx new file mode 100644 index 000000000000..b55f6f26bf1d --- /dev/null +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Icon, Text } from '@deriv/components'; +import './wallet-account.scss'; + +type TWalletAccount = { + balance: string; + currency: string; + name: string; + icon: string; +}; + +const WalletAccount = ({ balance, name, currency, icon }: TWalletAccount) => { + return ( +
+ +
+ + {name} + + + {balance} {currency} + +
+
+ ); +}; + +export default WalletAccount; diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.scss b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.scss new file mode 100644 index 000000000000..8df5f96a0fe8 --- /dev/null +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.scss @@ -0,0 +1,149 @@ +.wallet-link-wrapper { + display: grid; + grid-template-columns: repeat(3, auto); + align-items: center; + justify-content: flex-start; + gap: 1.6rem; + + &__title { + display: flex; + align-items: center; + justify-content: center; + width: 28.8rem; + + &-text { + width: fit-content; + padding: 0.4rem 0.8rem; + border-radius: 24px; + text-align: center; + background-color: var(--general-section-2); + + @include mobile { + background-color: var(--general-section-1); + } + } + } + + @include mobile { + width: 100%; + display: flex; + flex-direction: column; + gap: 1.2rem; + } + + &__accounts { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1.6rem; + + @include mobile { + gap: 0.8rem; + + &-title { + width: 100%; + display: block; + border-radius: 8px 8px 0 0; + } + } + } + + &__link { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + @include mobile { + width: 100%; + flex-direction: column; + } + + &-bracket { + width: 1.5rem; + height: calc(100% - 4.8rem); + border: 1px solid var(--brand-red-coral); + border-left: none; + + &--single { + height: 0; + border: none; + border-top: 1px solid var(--brand-red-coral); + } + + @include mobile { + width: 24.4rem; + height: 0.8rem; + border: 1px solid var(--brand-red-coral); + border-top: none; + } + } + + &-icon { + display: flex; + flex-direction: row; + align-items: center; + gap: 1.4rem; + + @include mobile { + flex-direction: column; + gap: 0.6rem; + } + + &:before, + &:after { + content: ''; + display: inline-block; + background: var(--brand-red-coral); + } + + &:before { + width: 48px; + height: 1px; + + @include mobile { + width: 1px; + height: 16px; + } + } + + &:after { + width: 63px; + height: 1px; + + @include mobile { + width: 1px; + height: 24px; + } + } + } + } + + &__card-wrapper { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &:after { + display: inline-block; + content: ''; + } + + &-title { + display: block; + position: absolute; + bottom: 0; + width: 100%; + border-radius: 0 0 8px 8px; + } + + @include mobile { + display: block; + height: 14rem; + } + } +} diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.tsx b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.tsx new file mode 100644 index 000000000000..b3dddc817cec --- /dev/null +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import classNames from 'classnames'; +import { Icon, Text, WalletCard } from '@deriv/components'; +import { isMobile } from '@deriv/shared'; +import { localize } from '@deriv/translations'; +import WalletAccount from '../wallet-account/wallet-account'; +import './wallet-link-wrapper.scss'; + +export type TWalletLinkWrapper = { + wallet_details: React.ComponentProps['wallet']; + account_list: { + balance: string; + currency: string; + account_name: string; + icon: string; + }[]; +}; + +const WalletLinkWrapper = ({ wallet_details, account_list }: TWalletLinkWrapper) => { + return ( +
+
+ {isMobile() && ( + + {localize('Your current trading account(s)')} + + )} + {account_list.map((account, index) => { + return ( + + ); + })} +
+
+
+
+ +
+
+
+ + {isMobile() && ( + + {localize('Your new Wallet')} + + )} +
+
+ ); +}; + +export default WalletLinkWrapper; diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.scss b/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.scss index 72c5d890ab5b..50b94024cc91 100644 --- a/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.scss +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.scss @@ -1,11 +1,13 @@ .wallet-steps { width: 100%; height: 100%; - display: grid; - place-content: center; + display: flex; + + @include mobile { + align-items: center; + } &__content { - height: 100%; max-width: 77.6rem; margin: 0 auto; text-align: center; @@ -18,6 +20,11 @@ } &__footer { + width: 100%; + position: sticky; + bottom: 0; + background-color: inherit; + @include mobile { justify-content: center; background: var(--fill-normal); diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.tsx b/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.tsx index c5641533babe..3990316bcfad 100644 --- a/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.tsx +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.tsx @@ -6,6 +6,8 @@ import { observer, useStore } from '@deriv/stores'; import { WalletsIntro } from './components/wallets-intro/wallets-intro'; import ReadyToUpgradeWallets from './components/ready-to-upgrade-wallets'; import './real-wallets-upgrade.scss'; +import WalletLinkingStep from './wallet-linking-step/wallet-linking-step'; +import mock_wallet_migration_response from '../../../constants/mock_wallet_migration_response'; const RealWalletsUpgrade = observer(() => { const { traders_hub } = useStore(); @@ -96,6 +98,15 @@ const RealWalletsUpgrade = observer(() => { name: 'intro_wallets', component: , }, + { + component: , + }, + { + component: , + }, + { + component: , + }, { name: 'ready_to_upgrade', component: , @@ -140,7 +151,7 @@ const RealWalletsUpgrade = observer(() => { wrapper_classname='wallet-steps' footer={ModalFooter} > - {ModalContent} + {ModalContent} diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/wallet-linking-step/wallet-linking-step.scss b/packages/appstore/src/components/modals/real-wallets-upgrade/wallet-linking-step/wallet-linking-step.scss new file mode 100644 index 000000000000..8b7a2f0041ac --- /dev/null +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/wallet-linking-step/wallet-linking-step.scss @@ -0,0 +1,62 @@ +.wallet-linking-step { + width: 100%; + height: calc(57.4rem); // 73.4rem (modal-height) - 16rem (~15.2rem height of header + footer + margin from top) + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + @include mobile { + height: 100%; + margin-top: 4rem; + margin-bottom: 7.4rem; + } + + &__description { + margin-top: 0.8rem; + } + + &__content { + display: flex; + flex-direction: column; + margin-top: 2rem; + padding: 0.4rem 1.6rem; + gap: 2.2rem; + + @include mobile { + gap: 3.2rem; + padding: 0.4rem 3.8rem; + } + } + + &__title-small { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 36.1rem; + margin-top: 5.6rem; + + &-text { + padding: 0.4rem 0.8rem; + border-radius: 24px; + } + } + + &__note { + margin-top: 2.4rem; + padding: 0.8rem 1.6rem; + border-radius: $BORDER_RADIUS; + } + + &__title-text { + width: fit-content; + text-align: center; + background-color: var(--general-section-2); + + @include mobile { + background-color: var(--general-section-1); + } + } +} diff --git a/packages/appstore/src/components/modals/real-wallets-upgrade/wallet-linking-step/wallet-linking-step.tsx b/packages/appstore/src/components/modals/real-wallets-upgrade/wallet-linking-step/wallet-linking-step.tsx new file mode 100644 index 000000000000..a9bf0c6185b0 --- /dev/null +++ b/packages/appstore/src/components/modals/real-wallets-upgrade/wallet-linking-step/wallet-linking-step.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { Text, ThemedScrollbars } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import { observer, useStore } from '@deriv/stores'; +import WalletLinkWrapper, { TWalletLinkWrapper } from '../components/wallet-link/wallet-link-wrapper'; +import './wallet-linking-step.scss'; + +type TWalletLinkingStep = { + data: { title: string; wallets: TWalletLinkWrapper[] }; +}; + +const WalletLinkingStep = observer(({ data }: TWalletLinkingStep) => { + const { ui } = useStore(); + const { is_mobile } = ui; + return ( +
+ + {localize(data.title)} + + + {localize('This is how we link your accounts with your new Wallet.')} + + + {localize( + 'Your existing funds will remain in your trading account(s) and can be transferred to your Wallet after the upgrade.' + )} + + {!is_mobile && ( +
+ + {localize('Your current trading account(s)')} + + + {localize('Your new Wallet(s)')} + +
+ )} + + {data.wallets.map((wallet, index) => { + return ( + + ); + })} + +
+ ); +}); + +export default WalletLinkingStep; diff --git a/packages/appstore/src/constants/mock_wallet_migration_response.ts b/packages/appstore/src/constants/mock_wallet_migration_response.ts new file mode 100644 index 000000000000..d4859db78430 --- /dev/null +++ b/packages/appstore/src/constants/mock_wallet_migration_response.ts @@ -0,0 +1,203 @@ +const mock_wallet_migration_response = [ + { + title: 'Non-EU USD accounts', + wallets: [ + { + wallet_details: { + balance: '0.00', + currency: 'USD', + icon: 'IcCurrencyUsd', + icon_type: 'fiat', + jurisdiction_title: 'SVG', + name: 'USD', + }, + account_list: [ + { + balance: '1000.00', + currency: 'USD', + account_name: 'US Dollar', + icon: 'IcCurrencyUsd', + platform: 'deriv', + }, + { + balance: '100.00', + currency: 'USD', + account_name: 'MT5 Derived SVG', + icon: 'IcRebrandingMt5DerivedDashboard', + platform: 'mt5', + sub_account_type: 'Derived', + landing_company_name: 'SVG', + }, + { + balance: '123.00', + currency: 'USD', + account_name: 'MT5 Derived BVI', + icon: 'IcRebrandingMt5DerivedDashboard', + platform: 'mt5', + sub_account_type: 'Derived', + landing_company_name: 'BVI', + }, + { + balance: '20.00', + currency: 'USD', + account_name: 'MT5 Derived Vanuata', + icon: 'IcRebrandingMt5DerivedDashboard', + platform: 'mt5', + sub_account_type: 'Derived', + landing_company_name: 'Vanuatu', + }, + { + balance: '100.00', + currency: 'USD', + account_name: 'MT5 Financial SVG', + icon: 'IcRebrandingMt5FinancialDashboard', + platform: 'mt5', + sub_account_type: 'Financial', + landing_company_name: 'SVG', + }, + { + balance: '100.00', + currency: 'USD', + account_name: 'MT5 Financial BVI', + icon: 'IcRebrandingMt5FinancialDashboard', + platform: 'mt5', + sub_account_type: 'Financial', + landing_company_name: 'SVG', + }, + { + balance: '100.00', + currency: 'USD', + account_name: 'MT5 Financial Vanuatu', + icon: 'IcRebrandingMt5FinancialDashboard', + platform: 'mt5', + sub_account_type: 'Financial', + landing_company_name: 'SVG', + }, + { + balance: '100.00', + currency: 'USD', + account_name: 'MT5 Financial Labuan', + icon: 'IcRebrandingMt5FinancialDashboard', + platform: 'mt5', + sub_account_type: 'Financial', + landing_company_name: 'SVG', + }, + { + balance: '150.00', + currency: 'USD', + account_name: 'MT5 Swap-free', + icon: 'IcRebrandingMt5SwapFree', + platform: 'mt5', + sub_account_type: 'Swap-Free', + }, + { + balance: '100.00', + currency: 'USD', + account_name: 'Deriv X', + icon: 'IcRebrandingDerivx', + platform: 'derivx', + }, + { + balance: '100.00', + currency: 'USD', + account_name: 'Deriv EZ', + icon: 'IcDerivez', + platform: 'derivez', + }, + ], + }, + ], + }, + { + title: 'EU-regulated USD accounts', + wallets: [ + { + wallet_details: { + balance: '0.00', + currency: 'USD', + icon: 'IcCurrencyUsd', + icon_type: 'fiat', + jurisdiction_title: 'MALTA', + name: 'USD', + }, + account_list: [ + { + balance: '1000.00', + currency: 'USD', + account_name: 'US Dollar', + icon: 'IcCurrencyUsd', + platform: 'deriv', + }, + { + balance: '234.00', + currency: 'USD', + account_name: 'MT5 CFDs', + icon: 'IcRebrandingMt5Cfds', + platform: 'mt5', + }, + ], + }, + ], + }, + { + title: 'Cryptocurrency accounts', + wallets: [ + { + wallet_details: { + balance: '0.00', + currency: 'BTC', + icon: 'IcCashierBitcoinLight', + icon_type: 'crypto', + jurisdiction_title: 'SVG', + name: 'Bitcoin', + }, + account_list: [ + { + balance: '0.00212012', + currency: 'BTC', + account_name: 'Bitcoin', + icon: 'IcCurrencyBtc', + }, + ], + }, + { + wallet_details: { + balance: '0.00', + currency: 'ETH', + icon: 'IcCashierEthereumLight', + icon_type: 'crypto', + jurisdiction_title: 'SVG', + name: 'Ethereum', + }, + account_list: [ + { + balance: '0.00212012', + currency: 'ETH', + account_name: 'Ethereum', + icon: 'IcCurrencyEth', + }, + ], + }, + { + wallet_details: { + balance: '0.00', + currency: 'USDC', + icon: 'IcCashierUsdCoinLight', + icon_type: 'crypto', + jurisdiction_title: 'SVG', + name: 'USD Coin', + }, + account_list: [ + { + balance: '0.00212012', + currency: 'USDC', + account_name: 'USD Coin', + icon: 'IcCurrencyUsdc', + }, + ], + }, + ], + }, +]; + +export default mock_wallet_migration_response; diff --git a/packages/components/src/components/icon/appstore/ic-appstore-wallets-link.svg b/packages/components/src/components/icon/appstore/ic-appstore-wallets-link.svg new file mode 100644 index 000000000000..535dbed2cb41 --- /dev/null +++ b/packages/components/src/components/icon/appstore/ic-appstore-wallets-link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index aaaa8281320c..54ab67298dc8 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -53,6 +53,7 @@ import './appstore/ic-appstore-wallet-small.svg'; import './appstore/ic-appstore-wallet-usd-light.svg'; import './appstore/ic-appstore-wallet-usdc-light.svg'; import './appstore/ic-appstore-wallet-usdt-light.svg'; +import './appstore/ic-appstore-wallets-link.svg'; import './appstore/ic-appstore-warning.svg'; import './brand/ic-brand-deriv.svg'; import './brand/ic-brand-derivgo.svg'; @@ -683,7 +684,11 @@ import './rebranding/ic-rebranding-dmt5-dashboard.svg'; import './rebranding/ic-rebranding-dmt5.svg'; import './rebranding/ic-rebranding-dxtrade-dashboard.svg'; import './rebranding/ic-rebranding-dxtrade.svg'; +import './rebranding/ic-rebranding-mt5-cfds.svg'; +import './rebranding/ic-rebranding-mt5-derived-dashboard.svg'; +import './rebranding/ic-rebranding-mt5-financial-dashboard.svg'; import './rebranding/ic-rebranding-mt5-logo.svg'; +import './rebranding/ic-rebranding-mt5-swap-free.svg'; import './rebranding/ic-rebranding-smarttrader-dashboard.svg'; import './rebranding/ic-rebranding-smarttrader.svg'; import './stock/ic-stock-adidas-salomon.svg'; diff --git a/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-cfds.svg b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-cfds.svg new file mode 100644 index 000000000000..d1c1de309a37 --- /dev/null +++ b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-cfds.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-derived-dashboard.svg b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-derived-dashboard.svg new file mode 100644 index 000000000000..2372cba7b4bc --- /dev/null +++ b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-derived-dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-financial-dashboard.svg b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-financial-dashboard.svg new file mode 100644 index 000000000000..7fd867a129f0 --- /dev/null +++ b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-financial-dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-swap-free.svg b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-swap-free.svg new file mode 100644 index 000000000000..7b464b0951e6 --- /dev/null +++ b/packages/components/src/components/icon/rebranding/ic-rebranding-mt5-swap-free.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index b8e5d1cbbca0..609d6116a180 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -1,11 +1,15 @@ .wallet-card { position: relative; - border-radius: $BORDER_RADIUS; &__container { border-radius: inherit; width: 100%; height: 100%; + background: linear-gradient(to right, #f2bfba, #e8b4c0, #d6acc7, #bca7cc, #9ca3cc); + + &--active { + border: 2px solid var(--text-red); + } &--small { display: flex; @@ -40,9 +44,20 @@ } } + &__shine { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + clip-path: polygon(40% 10%, 104% -6.94%, 92.5% 100%, 28% 100%); + mix-blend-mode: overlay; + opacity: 0.16; + background-color: $color-white; + } + &__content { position: relative; - z-index: 1; height: 100%; width: 100%; display: flex; @@ -58,10 +73,6 @@ } } - &--active { - border: 2px solid var(--text-red); - } - &--small { width: 6.4rem; height: 4rem; @@ -99,7 +110,6 @@ display: flex; justify-content: center; align-items: center; - z-index: 1; &--small { position: absolute; @@ -108,22 +118,9 @@ transform: translate(-1.2rem, -0.4rem); width: unset; height: unset; - z-index: 1; } } - &__shine { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - clip-path: polygon(40% 10%, 104% -6.94%, 92.5% 100%, 28% 100%); - mix-blend-mode: overlay; - opacity: 0.16; - background-color: $color-white; - } - &__top-wrapper { display: flex; flex-direction: row; @@ -136,22 +133,6 @@ flex-direction: column; justify-content: flex-start; width: 100%; - - &-wallet-name { - font-size: var(--text-size-xxxs); - - @include mobile { - font-size: var(--text-size-xxxxs); - } - } - - &-balance { - font-size: var(--text-size-xs); - - @include mobile { - font-size: var(--text-size-xxs); - } - } } &__wallet-button { diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index bac7f5d87d2e..1991116b356c 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -11,7 +11,14 @@ import './wallet-card.scss'; type TWalletCardProps = { // TODO: This type should be updated when the response is ready - wallet: any; + wallet: { + balance: string; + currency: string; + icon: string; + icon_type: 'fiat' | 'crypto' | 'app'; + jurisdiction_title: string; + name: string; + }; size?: 'small' | 'medium' | 'large'; state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded'; }; @@ -34,6 +41,7 @@ const WalletCard: React.FC> = ({
+ {size !== 'small' &&
}
> = ({ {size === 'small' && } {size !== 'small' && (
-
-
> = ({
{state !== 'add' && state !== 'added' ? ( - + {wallet.name} {localize('Wallet')} - + {wallet.balance} {wallet.currency} diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index cff67b0607a5..6383a9a9efee 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -56,6 +56,7 @@ export const icons = 'IcAppstoreWalletUsdLight', 'IcAppstoreWalletUsdcLight', 'IcAppstoreWalletUsdtLight', + 'IcAppstoreWalletsLink', 'IcAppstoreWarning', ], 'brand': [ @@ -708,7 +709,11 @@ export const icons = 'IcRebrandingDmt5', 'IcRebrandingDxtradeDashboard', 'IcRebrandingDxtrade', + 'IcRebrandingMt5Cfds', + 'IcRebrandingMt5DerivedDashboard', + 'IcRebrandingMt5FinancialDashboard', 'IcRebrandingMt5Logo', + 'IcRebrandingMt5SwapFree', 'IcRebrandingSmarttraderDashboard', 'IcRebrandingSmarttrader', ],