Merge pull request #36 from hamza-deriv/hamza/wall-580/icon-reusable-…

…component

feat: icon reusable component v1.0

packages/cfd/src/Assets/svgs/trading-instruments/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import DerivedFX from './ic-appstore-derived-fx.svg';
+import Synthetics from './ic-appstore-synthetics.svg';
+import BasketIndices from './ic-appstore-basket-indices.svg';
+import Stocks from './ic-appstore-stocks.svg';
+import StockIndices from './ic-appstore-stock-indices.svg';
+import Commodities from './ic-appstore-commodities.svg';
+import Forex from './ic-appstore-forex.svg';
+import Cryptocurrencies from './ic-appstore-cryptocurrencies.svg';
+import ETF from './ic-appstore-etf.svg';
+
+export type IconProps<T> = {
+    icon: T;
+    className?: string;
+    size?: number;
+    onClick?: () => void;
+};
+
+export const InstrumentsIcons = {
+    DerivedFX,
+    Synthetics,
+    BasketIndices,
+    Stocks,
+    StockIndices,
+    Commodities,
+    Forex,
+    Cryptocurrencies,
+    ETF,
+};
+
+const TradingInstrumentsIcon = ({ icon, className, size, onClick }: IconProps<keyof typeof InstrumentsIcons>) => {
+    const InstrumentIcon = InstrumentsIcons[icon] as React.ElementType;
+
+    return InstrumentIcon ? (
+        <InstrumentIcon className={className} style={{ width: size, height: size }} onClick={onClick} />
+    ) : null;
+};
+
+export default TradingInstrumentsIcon;

packages/cfd/src/Components/props.types.ts

@@ -166,3 +166,18 @@ export type TTradingPlatformAccounts = {
      */
     platform?: 'dxtrade' | string;
 };
+
+export type TIconData = {
+    icon:
+        | 'DerivedFX'
+        | 'Synthetics'
+        | 'BasketIndices'
+        | 'Stocks'
+        | 'StockIndices'
+        | 'Commodities'
+        | 'Forex'
+        | 'Cryptocurrencies'
+        | 'ETF';
+    text: string;
+    highlighted: boolean;
+};

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss

@@ -16,3 +16,20 @@
         }
     }
 }
+
+.compare-cfd-account {
+    &-outline {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--general-hover);
+        padding: 2.4rem;
+        border-radius: 2.4rem;
+    }
+    &-container {
+        margin: 5rem;
+    }
+}
+.card-list {
+    display: flex;
+    gap: 2rem;
+}

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import { observer } from 'mobx-react';
+import { useHistory } from 'react-router-dom';
 import { Text, Icon, PageOverlay, DesktopWrapper, MobileWrapper } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-import { useHistory } from 'react-router-dom';
+import CFDInstrumentsLabelHighlighted from './cfd-instruments-label-highlighted';
+
+import { useStore } from '@deriv/stores';
+
+const CompareCFDs = observer(() => {
+    const { client } = useStore();
+    const { trading_platform_available_accounts } = client;
 
-const CompareCFDs = () => {
     const history = useHistory();
 
     const DesktopHeader = (
@@ -32,9 +38,17 @@ const CompareCFDs = () => {
     return (
         <React.Fragment>
             <DesktopWrapper>
-                <PageOverlay header={DesktopHeader} is_from_app={routes.traders_hub}>
-                    Desktop wrapper
-                </PageOverlay>
+                <PageOverlay header={DesktopHeader} is_from_app={routes.traders_hub} />
+                <div className='compare-cfd-account-container'>
+                    <div className='card-list'>
+                        {trading_platform_available_accounts.map(item => (
+                            <CFDInstrumentsLabelHighlighted
+                                key={item.market_type + item.shortcode}
+                                trading_platforms={item}
+                            />
+                        ))}
+                    </div>
+                </div>
             </DesktopWrapper>
             <MobileWrapper>
                 <PageOverlay
@@ -48,6 +62,6 @@ const CompareCFDs = () => {
             </MobileWrapper>
         </React.Fragment>
     );
-};
+});
 
-export default observer(CompareCFDs);
+export default CompareCFDs;

packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import InstumentsIconWithLabel from './instruments-icon-with-label';
+import { TTradingPlatformAvailableAccount, TIconData } from 'Components/props.types';
+import { getHighlightedIconLabel } from '../../Helpers/compare-accounts-config';
+
+type TCFDInstrumentsLabelHighlightedProps = {
+    trading_platforms: TTradingPlatformAvailableAccount;
+};
+
+const CFDInstrumentsLabelHighlighted: React.FC<TCFDInstrumentsLabelHighlightedProps> = ({ trading_platforms }) => {
+    const iconData: TIconData[] = [...getHighlightedIconLabel(trading_platforms)];
+
+    return (
+        <div className={'compare-cfd-account-outline'}>
+            {iconData.map(item => (
+                <InstumentsIconWithLabel key={item.text} {...item} />
+            ))}
+        </div>
+    );
+};
+
+export default CFDInstrumentsLabelHighlighted;

packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments';
+
+type TIconProps = {
+    icon:
+        | 'DerivedFX'
+        | 'Synthetics'
+        | 'BasketIndices'
+        | 'Stocks'
+        | 'StockIndices'
+        | 'Commodities'
+        | 'Forex'
+        | 'Cryptocurrencies'
+        | 'ETF';
+    text: string;
+    highlighted: boolean;
+    className?: string;
+};
+
+const InstumentsIconWithLabel = ({ icon, text, highlighted, className }: TIconProps) => {
+    let size = 24;
+    const dummyFunc = () => {
+        size = 24;
+    };
+    return (
+        <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                margin: '3px',
+                opacity: highlighted ? '' : '0.2',
+            }}
+            className={className}
+        >
+            <TradingInstrumentsIcon icon={icon} size={size} className='trading-instruments__icon' onClick={dummyFunc} />
+            <span
+                style={{
+                    marginLeft: '0.5rem',
+                }}
+            >
+                {text}
+            </span>
+        </div>
+    );
+};
+
+export default InstumentsIconWithLabel;

packages/cfd/src/Helpers/compare-accounts-config.ts

@@ -0,0 +1,48 @@
+import { TTradingPlatformAvailableAccount, TIconData } from '../Components/props.types';
+
+const getHighlightedIconLabel = (trading_platforms: TTradingPlatformAvailableAccount): TIconData[] => {
+    switch (trading_platforms.market_type) {
+        case 'gaming':
+            return [
+                { icon: 'Synthetics', text: 'Synthetics', highlighted: true },
+                { icon: 'BasketIndices', text: 'Basket Indices', highlighted: true },
+                { icon: 'DerivedFX', text: 'Derived FX', highlighted: true },
+                { icon: 'Stocks', text: 'Stock', highlighted: false },
+                { icon: 'StockIndices', text: 'Stock Indices', highlighted: false },
+                { icon: 'Commodities', text: 'Commodities', highlighted: false },
+                { icon: 'Forex', text: 'Forex', highlighted: false },
+                { icon: 'Cryptocurrencies', text: 'Cryptocurrencies', highlighted: false },
+                { icon: 'ETF', text: 'ETF', highlighted: false },
+            ];
+            break;
+        case 'financial':
+            return [
+                { icon: 'Synthetics', text: 'Synthetics', highlighted: false },
+                { icon: 'BasketIndices', text: 'Basket Indices', highlighted: false },
+                { icon: 'DerivedFX', text: 'Derived FX', highlighted: false },
+                { icon: 'Stocks', text: 'Stock', highlighted: true },
+                { icon: 'StockIndices', text: 'Stock Indices', highlighted: true },
+                { icon: 'Commodities', text: 'Commodities', highlighted: true },
+                { icon: 'Forex', text: 'Forex', highlighted: true },
+                { icon: 'Cryptocurrencies', text: 'Cryptocurrencies', highlighted: true },
+                { icon: 'ETF', text: 'ETF', highlighted: true },
+            ];
+            break;
+        case 'all':
+        default:
+            return [
+                { icon: 'Synthetics', text: 'Synthetics', highlighted: true },
+                { icon: 'BasketIndices', text: 'Basket Indices', highlighted: true },
+                { icon: 'DerivedFX', text: 'Derived FX', highlighted: true },
+                { icon: 'Stocks', text: 'Stock', highlighted: true },
+                { icon: 'StockIndices', text: 'Stock Indices', highlighted: true },
+                { icon: 'Commodities', text: 'Commodities', highlighted: true },
+                { icon: 'Forex', text: 'Forex', highlighted: true },
+                { icon: 'Cryptocurrencies', text: 'Cryptocurrencies', highlighted: true },
+                { icon: 'ETF', text: 'ETF', highlighted: true },
+            ];
+            break;
+    }
+};
+
+export { getHighlightedIconLabel };