diff --git a/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx b/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx
index 9896b9e17d46..4b1946c5399b 100644
--- a/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx
+++ b/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx
@@ -2,9 +2,15 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { mockStore, StoreProvider } from '@deriv/stores';
+import { useDevice } from '@deriv-com/ui';
import WalletsBannerUpgrade from '../wallets-banner-upgrade';
import WalletsBannerUpgrading from '../wallets-banner-upgrading';
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({ isDesktop: true })),
+}));
+
describe('', () => {
const mockRootStore = mockStore({
traders_hub: {
@@ -25,7 +31,6 @@ describe('', () => {
});
it('Should render image properly for desktop', () => {
- mockRootStore.ui.is_mobile = false;
render(, {
wrapper: ({ children }) => {children},
});
@@ -37,7 +42,7 @@ describe('', () => {
});
it('Should render image properly for mobile', () => {
- mockRootStore.ui.is_mobile = true;
+ (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
render(, {
wrapper: ({ children }) => {children},
});
@@ -81,7 +86,6 @@ describe('', () => {
});
it('Should render image properly for desktop', () => {
- mockRootStore.ui.is_mobile = false;
render(, {
wrapper: ({ children }) => {children},
});
@@ -93,7 +97,7 @@ describe('', () => {
});
it('Should render image properly for mobile', () => {
- mockRootStore.ui.is_mobile = true;
+ (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
render(, {
wrapper: ({ children }) => {children},
});
diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
index 515cb9618963..79b975bfff08 100644
--- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
+++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
@@ -3,6 +3,7 @@ import { Analytics, TEvents } from '@deriv-com/analytics';
import { Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize } from '@deriv/translations';
+import { useDevice } from '@deriv-com/ui';
const trackAnalyticsEvent = (
action: TEvents['ce_tradershub_banner']['action'],
@@ -18,10 +19,28 @@ const trackAnalyticsEvent = (
};
const WalletsBannerUnsuccessful = observer(() => {
- const { traders_hub, ui } = useStore();
- const { is_desktop } = ui;
+ const { traders_hub } = useStore();
+ const { isDesktop, isMobile, isTablet } = useDevice();
const { is_demo, toggleWalletsUpgrade } = traders_hub;
const account_mode = is_demo ? 'demo' : 'real';
+ let titleFontSize, descriptionFontSize, iconHeight, iconWidth;
+
+ if (isTablet) {
+ titleFontSize = 's';
+ descriptionFontSize = 'xxs';
+ iconHeight = 112;
+ iconWidth = 192;
+ } else if (isDesktop) {
+ titleFontSize = 'sm';
+ descriptionFontSize = 'xs';
+ iconHeight = 142;
+ iconWidth = 242;
+ } else {
+ titleFontSize = 'xs';
+ descriptionFontSize = 'xxxs';
+ iconHeight = 112;
+ iconWidth = 192;
+ }
React.useEffect(() => {
trackAnalyticsEvent('open', account_mode);
@@ -38,25 +57,20 @@ const WalletsBannerUnsuccessful = observer(() => {
,
+ ,
]}
/>
,
+ ,
,
@@ -66,8 +80,8 @@ const WalletsBannerUnsuccessful = observer(() => {
diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
index 79880cf0cccd..2d86a4e8aab6 100644
--- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
+++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
@@ -3,6 +3,7 @@ import { Analytics, TEvents } from '@deriv-com/analytics';
import { Button, Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize, localize } from '@deriv/translations';
+import { useDevice } from '@deriv-com/ui';
const trackAnalyticsEvent = (
action: TEvents['ce_tradershub_banner']['action'],
@@ -22,10 +23,25 @@ type TProps = {
};
const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => {
- const { traders_hub, ui } = useStore();
- const { is_desktop, is_mobile } = ui;
+ const { traders_hub } = useStore();
+ const { isDesktop, isMobile, isTablet } = useDevice();
const { is_demo, toggleWalletsUpgrade } = traders_hub;
const account_mode = is_demo ? 'demo' : 'real';
+ let titleFontSize, iconHeight, iconWidth;
+
+ if (isTablet) {
+ titleFontSize = 'xsm';
+ iconHeight = 98;
+ iconWidth = 234;
+ } else if (isDesktop) {
+ titleFontSize = 'm';
+ iconHeight = 154;
+ iconWidth = 368;
+ } else {
+ titleFontSize = 'xs';
+ iconHeight = 138;
+ iconWidth = 156;
+ }
React.useEffect(() => {
trackAnalyticsEvent('open', account_mode);
@@ -43,8 +59,8 @@ const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => {
,
- ,
+ ,
+ ,
]}
/>
@@ -58,11 +74,11 @@ const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => {
/>
);
diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx
index b800b61d0a64..a158ddc37e2b 100644
--- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx
+++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx
@@ -3,11 +3,30 @@ import { Analytics } from '@deriv-com/analytics';
import { Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize } from '@deriv/translations';
+import { useDevice } from '@deriv-com/ui';
const WalletsBannerUpgrading = observer(() => {
- const { traders_hub, ui } = useStore();
+ const { traders_hub } = useStore();
const { is_demo } = traders_hub;
- const { is_desktop, is_mobile } = ui;
+ const { isDesktop, isMobile, isTablet } = useDevice();
+ let titleFontSize, descriptionFontSize, iconHeight, iconWidth;
+
+ if (isTablet) {
+ titleFontSize = 's';
+ descriptionFontSize = 'xxs';
+ iconHeight = 98;
+ iconWidth = 234;
+ } else if (isDesktop) {
+ titleFontSize = 'sm';
+ descriptionFontSize = 'xs';
+ iconHeight = 154;
+ iconWidth = 368;
+ } else {
+ titleFontSize = 'xs';
+ descriptionFontSize = 'xxxs';
+ iconHeight = 138;
+ iconWidth = 156;
+ }
React.useEffect(() => {
Analytics.trackEvent('ce_tradershub_banner', {
@@ -30,12 +49,7 @@ const WalletsBannerUpgrading = observer(() => {
,
+ ,
]}
/>
{
className='wallets-banner-upgrading__description'
key={0}
line_height='s'
- size={is_desktop ? 'xs' : 'xxxs'}
+ size={descriptionFontSize}
/>,
]}
/>
);
diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss b/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss
index 4168c79fec4c..d01b1719355e 100644
--- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss
+++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss
@@ -1,8 +1,13 @@
.wallets-banner {
position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.2rem;
height: 18rem;
- padding: 2.4rem;
margin-block: 2.4rem;
+ padding-block: 2.4rem;
+ padding-inline-start: 2.4rem;
overflow: hidden;
background-color: var(--general-section-1);
border: 1px solid var(--wallets-banner-border-color);
@@ -10,8 +15,9 @@
@include mobile-or-tablet-screen {
height: 14.2rem;
- padding: 1.6rem;
border-radius: $BORDER_RADIUS * 2;
+ padding-block: 1.6rem;
+ padding-inline-start: 1.6rem;
}
&__content {
@@ -24,11 +30,18 @@
&-upgrade {
&__content {
width: 55.7rem;
+ min-width: 55.7rem;
justify-content: center;
gap: 1.6rem;
- @include mobile-or-tablet-screen {
- width: 20rem;
+ @include mobile-screen {
+ width: 19rem;
+ min-width: 19rem;
+ }
+
+ @include tablet-screen {
+ width: 25.6rem;
+ min-width: 25.6rem;
}
}
@@ -44,16 +57,30 @@
&-upgrading {
&__content {
width: 48.6rem;
+ min-width: 48.6rem;
justify-content: space-between;
+ gap: 0.8rem;
- @include mobile-or-tablet-screen {
+ @include mobile-screen {
width: 20rem;
+ min-width: 20rem;
+ }
+
+ @include tablet-screen {
+ width: 27.3rem;
+ min-width: 27.3rem;
}
}
&__description {
- @include mobile-or-tablet-screen {
+ @include mobile-screen {
width: 15.1rem;
+ min-width: 15.1rem;
+ }
+
+ @include tablet-screen {
+ width: 27.3rem;
+ min-width: 27.3rem;
}
}
@@ -65,7 +92,7 @@
align-items: center;
gap: 0.6rem;
- @include mobile-or-tablet-screen {
+ @include mobile-screen {
width: 3.2rem;
height: 3.2rem;
}
@@ -93,7 +120,7 @@
border-radius: 50%;
background-color: var(--wallets-banner-dot-color);
- @include mobile-or-tablet-screen {
+ @include mobile-screen {
height: 0.5rem;
width: 0.5rem;
}
@@ -103,12 +130,19 @@
&-unsuccessful {
&__content {
width: 48.6rem;
+ min-width: 48.6rem;
justify-content: center;
gap: 0.8rem;
z-index: 1;
- @include mobile-or-tablet-screen {
+ @include mobile-screen {
width: 17rem;
+ min-width: 17rem;
+ }
+
+ @include tablet-screen {
+ width: 29.5rem;
+ min-width: 29.5rem;
}
}
@@ -117,14 +151,15 @@
}
&__image {
- position: absolute;
- inset-inline-end: 8rem;
- inset-block-start: 0rem;
+ width: fit-content;
+ min-width: 24.2rem;
+ overflow: hidden;
+ margin-inline-end: 8rem;
@include mobile-or-tablet-screen {
- inset-inline-end: -3rem;
+ min-width: 19.2rem;
+ margin-inline-end: 2.4rem;
}
-
@include rtl {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
@@ -137,13 +172,20 @@
.wallets-banner-upgrade__image,
.wallets-banner-upgrading__image {
- position: absolute;
- inset-inline-end: 8rem;
- inset-block-start: 0rem;
+ width: fit-content;
+ min-width: 36.8rem;
+ overflow: hidden;
+ margin-inline-end: 8rem;
- @include mobile-or-tablet-screen {
- inset-inline-end: -4.5rem;
- inset-block-start: -3rem;
+ @include mobile-screen {
+ min-width: 15.6rem;
+ margin-block-start: 0.4rem;
+ margin-inline-end: unset;
+ }
+
+ @include tablet-screen {
+ min-width: 23.4rem;
+ margin-inline-end: 2.4rem;
}
}
diff --git a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss
index 5e70547f5044..8e44dc5a3128 100644
--- a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss
+++ b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss
@@ -5,18 +5,27 @@
flex-direction: column;
align-items: center;
gap: 3.2rem;
- max-width: 63.8rem;
- margin: 0 auto;
- padding-top: calc(
+ min-width: 61.6rem;
+ padding-inline: 8rem;
+ padding-block-start: calc(
5.4rem + 3.2rem
); // 5.4rem is the height of the header, 3.2rem is the padding-top of the content
- padding-bottom: 3.2rem;
+ padding-block-end: 3.2rem;
- @include mobile-or-tablet-screen {
+ @include mobile-screen {
gap: 1.6rem;
- max-width: 28rem;
- padding-top: 4.8rem;
- padding-bottom: 1.6rem;
+ min-width: 28.8rem;
+ padding-block-start: 4.8rem;
+ padding-block-end: 1.6rem;
+ padding-inline: 2rem;
+ }
+
+ @include tablet-screen {
+ gap: 1.6rem;
+ min-width: 40rem;
+ padding-block-start: 4.8rem;
+ padding-block-end: 1.6rem;
+ padding-inline: 2rem;
}
}
@@ -26,9 +35,14 @@
min-height: 32rem;
filter: drop-shadow(0px 4px 6px rgba(14, 14, 14, 0.03)) drop-shadow(0px 12px 16px rgba(14, 14, 14, 0.08));
- @include mobile-or-tablet-screen {
- width: 28rem;
- min-height: 15.7rem;
+ @include mobile-screen {
+ width: 27.9rem;
+ min-height: 16.1rem;
+ }
+
+ @include tablet-screen {
+ width: 38.6rem;
+ min-height: 22.2rem;
}
}
@@ -74,6 +88,7 @@
& .dc-modal-body {
padding: 0;
+ overflow: scroll;
}
}
diff --git a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg
index c3aa39ff5fe5..f4435c29ddaa 100644
--- a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg
+++ b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg
index 4204eb3c6454..daf4253a6cd7 100644
--- a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg
+++ b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg
index 77cb1954da8c..cf243be0ffcb 100644
--- a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg
+++ b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file