Ashraf pre appstore

packages/appstore/src/assets/svgs/wallet/index.tsx

@@ -95,6 +95,11 @@ import WechatPayDark from 'Assets/svgs/wallet/wechat-pay-dark.svg';
 import WechatPayLight from 'Assets/svgs/wallet/wechat-pay-light.svg';
 import ZingpayDark from 'Assets/svgs/wallet/zingpay-dark.svg';
 import ZingpayLight from 'Assets/svgs/wallet/zingpay-light.svg';
+import DerivGo from 'Assets/svgs/wallet/ic-brand-derivgo.svg';
+import BinaryBot from 'Assets/svgs/wallet/ic-brand-binarybot.svg';
+import DBot from 'Assets/svgs/wallet/ic-brand-dbot.svg';
+import DTrader from 'Assets/svgs/wallet/ic-brand-dtrader.svg';
+import SmartTrader from 'Assets/svgs/wallet/ic-brand-smarttrader.svg';
 
 const Icons = {
     '1foryouDark': OneforyouDark,
@@ -193,6 +198,11 @@ const Icons = {
     WechatPayLight,
     ZingpayDark,
     ZingpayLight,
+    DerivGo,
+    BinaryBot,
+    DBot,
+    DTrader,
+    SmartTrader,
 };
 
 const WalletIcon = ({ icon, className }: { icon: string; className?: string }) => {

packages/appstore/src/components/platform-launcher/index.ts

@@ -0,0 +1,4 @@
+import PlatformLauncher from './platform-launcher';
+import './platform-launcher.scss';
+
+export default PlatformLauncher;

packages/appstore/src/components/platform-launcher/platform-launcher.scss

@@ -0,0 +1,137 @@
+.platform-launcher {
+    @include mobile {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        padding: 0rem;
+        height: 5.6rem;
+    }
+    &__container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0rem;
+        gap: 1.6rem;
+
+        width: 18.32rem;
+        height: 5.4rem;
+        margin-bottom: 1.6rem;
+        &--icon {
+            width: 3.2rem;
+            height: 3.2rem;
+        }
+        &--title-desc-container {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 0rem;
+
+            width: 13.52rem;
+            height: 5.4rem;
+            &--title {
+                width: 13.52rem;
+                height: 1.8rem;
+
+                font-style: normal;
+                font-weight: 700;
+                font-size: 1.2rem;
+                line-height: 1.8rem;
+            }
+            &--description {
+                width: 16rem;
+                height: 3.6rem;
+
+                font-style: normal;
+                font-weight: 400;
+                font-size: 1.2rem;
+                line-height: 1.8rem;
+            }
+            @include mobile {
+                width: 18.3rem;
+                height: 2.8rem;
+                left: 0rem;
+                top: 0rem;
+
+                &--title {
+                    width: 16.4rem;
+                    height: 1.4rem;
+                    font-size: 1rem;
+                }
+                &--description {
+                    width: 18.3rem;
+                    height: 1.4rem;
+
+                    font-family: 'IBM Plex Sans';
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 0.96rem;
+                    line-height: 1.4rem;
+                    /* or 150% */
+
+                    /* system/light/2 - general (text) */
+
+                    color: $color-black-1;
+                }
+            }
+        }
+        @include mobile {
+            justify-content: center;
+            padding: 0rem 0rem 0rem 0.8rem;
+            gap: 1.2rem;
+
+            width: 27.8rem;
+            height: 3.2rem;
+        }
+    }
+    &__trade-button {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 0.6rem 1.6rem;
+
+        width: 18.32rem;
+        height: 3.2rem;
+        /* brand/coral */
+
+        background: #ff444f;
+        border-radius: 0.4rem;
+
+        &--label {
+            width: 3.8rem;
+            height: 2rem;
+
+            font-family: 'IBM Plex Sans';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 1.4rem;
+            line-height: 2rem;
+            /* identical to box height, or 143% */
+
+            text-align: center;
+
+            /* dark/1 - prominent (text) */
+
+            color: $color-white;
+        }
+
+        @include mobile {
+            padding: 0.3rem 0.8rem;
+            width: 4.9rem;
+            height: 2.4rem;
+            left: 21.9rem;
+            top: 0.2rem;
+
+            /* brand/coral */
+            border-radius: 0.4rem;
+
+            &--label {
+                width: 3.3rem;
+                height: 1.8rem;
+
+                font-size: 1.2rem;
+                line-height: 1.8rem;
+            }
+        }
+    }
+}

packages/appstore/src/components/platform-launcher/platform-launcher.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import WalletIcon from 'Assets/svgs/wallet';
+
+type TPlatformLauncherProps = {
+    app_icon: string;
+    app_title?: string;
+    app_desc?: string;
+};
+
+const PlatformLauncher = ({ app_icon, app_title, app_desc }: TPlatformLauncherProps) => {
+    return (
+        <div className='platform-launcher'>
+            <div className='platform-launcher__container'>
+                <div className='platform-launcher__container--icon'>
+                    <WalletIcon icon={app_icon} />
+                </div>
+                <div className='platform-launcher__container--title-desc-container'>
+                    <Text className='platform-launcher__container--title-desc-container--title' weight='bold'>
+                        <Localize i18n_default_text={app_title} />
+                    </Text>
+                    <Text className='platform-launcher__container--title-desc-container--description'>
+                        <Localize i18n_default_text={app_desc} />
+                    </Text>
+                </div>
+            </div>
+            <div className='platform-launcher__trade-button'>
+                <Button primary small onClick={undefined} type='button'>
+                    <Localize i18n_default_text='Trade' />
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default PlatformLauncher;

packages/appstore/src/components/platform-launcher/stories/platform-launcher.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, Story } from '@storybook/react';
+import PlatformLauncher from '../index';
+
+type PlatformLauncherProps = Parameters<typeof PlatformLauncher>[0];
+
+export default {
+    title: 'PlatformLauncher',
+} as Meta<PlatformLauncherProps>;
+
+const Template: Story<PlatformLauncherProps> = args => <PlatformLauncher {...args} />;
+
+export const PlatformLauncherDTrader = Template.bind({});
+PlatformLauncherDTrader.args = {
+    app_icon: 'DTrader',
+    app_title: 'DTrader',
+    app_desc: 'Options & multipliers trading platform.',
+};
+export const PlatformLauncherDBot = Template.bind({});
+PlatformLauncherDBot.args = {
+    app_icon: 'DBot',
+    app_title: 'DBot',
+    app_desc: 'Automate your trading, no coding needed.',
+};
+export const PlatformLauncherSmartTrader = Template.bind({});
+PlatformLauncherSmartTrader.args = {
+    app_icon: 'SmartTrader',
+    app_title: 'SmartTrader',
+    app_desc: 'Our legacy options trading platform.',
+};
+export const PlatformLauncherBinaryBot = Template.bind({});
+PlatformLauncherBinaryBot.args = {
+    app_icon: 'BinaryBot',
+    app_title: 'Binary Bot',
+    app_desc: 'Our legacy automated trading platform.',
+};
+export const PlatformLauncherDerivGo = Template.bind({});
+PlatformLauncherDerivGo.args = {
+    app_icon: 'DerivGo',
+    app_title: 'DerivGo',
+    app_desc: 'Trade on the go with our mobile app.',
+};

packages/components/src/components/icon/icons.js

@@ -44,6 +44,7 @@ import './brand/ic-brand-binarybot.svg';
 import './brand/ic-brand-dbot.svg';
 import './brand/ic-brand-deriv-apps.svg';
 import './brand/ic-brand-deriv.svg';
+import './brand/ic-brand-derivgo.svg';
 import './brand/ic-brand-dmt5-financial-stp.svg';
 import './brand/ic-brand-dmt5-financial.svg';
 import './brand/ic-brand-dmt5-synthetics.svg';