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',
],