diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.scss b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.scss
new file mode 100644
index 000000000000..17e3f76d697e
--- /dev/null
+++ b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.scss
@@ -0,0 +1,24 @@
+.wallets-mt5-account-type {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ border-radius: 8px;
+ background: var(--system-light-8-primary-background, #fff);
+
+ &-content {
+ width: 80vw;
+ height: 70vh;
+ display: flex;
+ padding: 24px;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 24px;
+ flex: 1 0 0;
+ align-self: stretch;
+
+ @include mobile {
+ flex-direction: column;
+ }
+ }
+}
diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.tsx b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.tsx
new file mode 100644
index 000000000000..a08a0fe82d3e
--- /dev/null
+++ b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import DerivedMT5 from '../../../public/images/mt5-derived.svg';
+import FinancialMT5 from '../../../public/images/mt5-financial.svg';
+import SwapFreeMT5 from '../../../public/images/mt5-swap-free.svg';
+import { MT5AccountTypeCard } from '../MT5AccountTypeCard';
+import './MT5AccountType.scss';
+
+const marketTypeDetailsMapper = {
+ all: {
+ description:
+ 'Trade swap-free CFDs on MT5 with synthetics, forex, stocks, stock indices, cryptocurrencies, and ETFs.',
+ icon:
,
+ title: 'Swap-Free',
+ },
+ financial: {
+ description: 'Trade CFDs on MT5 with forex, stocks and indices, commodities, cryptocurrencies, and ETFs.',
+ icon:
,
+ title: 'Financial',
+ },
+ synthetic: {
+ description: 'Trade CFDs on MT5 with derived indices that simulate real-world market movements.',
+ icon:
,
+ title: 'Derived',
+ },
+};
+
+type TProps = {
+ onMarketTypeSelect: (marketType: keyof typeof marketTypeDetailsMapper) => void;
+ selectedMarketType?: keyof typeof marketTypeDetailsMapper;
+};
+
+const MT5AccountType: React.FC
= ({ onMarketTypeSelect, selectedMarketType }) => (
+
+ {Object.entries(marketTypeDetailsMapper).map(([key, value]) => (
+ onMarketTypeSelect(key === selectedMarketType ? undefined : key)}
+ title={value.title}
+ />
+ ))}
+
+);
+
+export default MT5AccountType;
diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/index.ts b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/index.ts
new file mode 100644
index 000000000000..b70b17814bba
--- /dev/null
+++ b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/index.ts
@@ -0,0 +1 @@
+export { default as MT5AccountType } from './MT5AccountType';
diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.scss b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.scss
new file mode 100644
index 000000000000..d299d41ffce8
--- /dev/null
+++ b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.scss
@@ -0,0 +1,67 @@
+.wallets-mt5-account-type-card {
+ cursor: pointer;
+ &-list {
+ display: flex;
+ width: 264px;
+ height: 320px;
+ align-items: flex-start;
+
+ &-content {
+ display: flex;
+ align-items: flex-start;
+ flex: 1 0 0;
+ padding: 24px;
+ align-self: stretch;
+ border-radius: 16px;
+ border: 1px solid var(--system-light-5-active-background, #d6dadb);
+ background: var(--system-light-8-primary-background, #fff);
+
+ &-details {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ align-self: stretch;
+ justify-content: center;
+
+ &-title-description {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ align-self: stretch;
+ }
+
+ &-title {
+ flex: 1 0 0;
+ color: var(--system-light-1-prominent-text, #333);
+ text-align: center;
+ align-items: center;
+ display: flex;
+
+ /* desktop/subtitle/Sub 2 - bold */
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 30px; /* 150% */
+ }
+
+ &-description {
+ align-self: stretch;
+ color: var(--system-light-2-general-text, #333);
+ text-align: center;
+
+ /* desktop/paragraph/P2 - regular */
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ }
+ }
+ }
+ }
+ &-selected {
+ border-radius: 16px;
+ box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
+ }
+}
diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.tsx b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.tsx
new file mode 100644
index 000000000000..6adab1bf50ee
--- /dev/null
+++ b/packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import './MT5AccountTypeCard.scss';
+
+type TProps = {
+ description: string;
+ icon: JSX.Element;
+ isSelected: boolean;
+ onClick: () => void;
+ title: string;
+};
+
+const MT5AccountTypeCard: React.FC = ({ description, icon, isSelected, onClick, title }) => {
+ return (
+
+
+
+
+ {icon}
+
+
{title}
+
+ {description}
+
+
+
+
+
+
Next
+
+ )}
+ renderHeader={() => Select Deriv MT5’s account type
}
+ >
+
+
+
+ );
+};
+
+export default MT5AccountTypeModal;
diff --git a/packages/wallets/src/components/MT5AccountTypeModal/index.ts b/packages/wallets/src/components/MT5AccountTypeModal/index.ts
new file mode 100644
index 000000000000..a3b05a816e2b
--- /dev/null
+++ b/packages/wallets/src/components/MT5AccountTypeModal/index.ts
@@ -0,0 +1 @@
+export { default as MT5AccountTypeModal } from './MT5AccountTypeModal';
diff --git a/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.scss b/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.scss
index 346b33af11d1..a4021f55d36c 100644
--- a/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.scss
+++ b/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.scss
@@ -8,4 +8,15 @@
background: #ff444f;
border: unset;
cursor: pointer;
+
+ &-disabled {
+ border: unset;
+ padding: 6px 16px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ background-color: #ccc;
+ color: #666;
+ cursor: not-allowed;
+ }
}
diff --git a/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.tsx b/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.tsx
index cd080bfd7186..6159a6594d36 100644
--- a/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.tsx
+++ b/packages/wallets/src/components/PrimaryActionButton/PrimaryActionButton.tsx
@@ -1,10 +1,16 @@
import React from 'react';
import './PrimaryActionButton.scss';
-const PrimaryActionButton: React.FC> = ({ children, ...rest }) => (
-
-);
+type TProps = React.ComponentProps<'button'> & {
+ disabled?: boolean;
+};
+
+const PrimaryActionButton: React.FC = ({ children, disabled, ...rest }) => {
+ return (
+
+ );
+};
export default PrimaryActionButton;
diff --git a/packages/wallets/src/components/WalletModal/WalletModal.scss b/packages/wallets/src/components/WalletModal/WalletModal.scss
index 32bcb9a54394..fc5d492b9698 100644
--- a/packages/wallets/src/components/WalletModal/WalletModal.scss
+++ b/packages/wallets/src/components/WalletModal/WalletModal.scss
@@ -2,6 +2,7 @@
background-color: #ffffff;
border-radius: 20px;
position: relative;
+
&-close-icon {
position: absolute;
top: 2rem;
diff --git a/packages/wallets/src/components/WideWrapper/WideWrapper.scss b/packages/wallets/src/components/WideWrapper/WideWrapper.scss
index 57c1602f811c..b15ef679a54a 100644
--- a/packages/wallets/src/components/WideWrapper/WideWrapper.scss
+++ b/packages/wallets/src/components/WideWrapper/WideWrapper.scss
@@ -2,9 +2,6 @@
background-color: #ffffff;
border-radius: 8px;
- width: 80vw;
- height: 80vh;
-
&__header {
padding: 2rem;
border-bottom: 2px solid #f2f3f4;
@@ -17,7 +14,6 @@
padding: 2rem;
height: 10%;
width: 100%;
- position: absolute;
bottom: 0;
border-top: 2px solid #f2f3f4;
display: flex;
diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
index de44fe3e8388..3abfde2b0818 100644
--- a/packages/wallets/src/components/index.ts
+++ b/packages/wallets/src/components/index.ts
@@ -6,6 +6,7 @@ export * from './EnterPassword';
export * from './ExternalTradingPlatforms';
export * from './InlineMessage';
export * from './Loader';
+export * from './MT5AccountTypeModal';
export * from './MT5PasswordModal';
export * from './OptionsAndMultipliersListing';
export * from './PrimaryActionButton';
diff --git a/packages/wallets/src/hooks/useDevice.tsx b/packages/wallets/src/hooks/useDevice.tsx
index fe2e85dbd361..1b643fe52d23 100644
--- a/packages/wallets/src/hooks/useDevice.tsx
+++ b/packages/wallets/src/hooks/useDevice.tsx
@@ -8,8 +8,6 @@ const useDevice = () => {
const isDesktop = width >= 1024;
return {
- /** @deprecated Use `isMobile` instead. */
- is_mobile: isMobile,
isDesktop,
isMobile,
isTablet,