From b991a6706f05fc3707dec21fcdb491c1954e33d0 Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Tue, 16 May 2023 15:27:35 +0800 Subject: [PATCH 1/9] feat: icon reusable component v1.0 --- .../ic-appstore-basket-indices.svg | 12 ++++++ .../ic-appstore-commodities.svg | 1 + .../ic-appstore-cryptocurrencies.svg | 1 + .../ic-appstore-derived-fx.svg | 7 ++++ .../trading-instruments/ic-appstore-etf.svg | 1 + .../trading-instruments/ic-appstore-forex.svg | 1 + .../ic-appstore-stock-indices.svg | 1 + .../ic-appstore-stocks.svg | 1 + .../ic-appstore-synthetics.svg | 7 ++++ .../Assets/svgs/trading-instruments/index.tsx | 39 +++++++++++++++++++ 10 files changed, 71 insertions(+) create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-basket-indices.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-commodities.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-cryptocurrencies.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-derived-fx.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-etf.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-forex.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stock-indices.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stocks.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-synthetics.svg create mode 100644 packages/cfd/src/Assets/svgs/trading-instruments/index.tsx diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-basket-indices.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-basket-indices.svg new file mode 100644 index 000000000000..44c28bd3c7db --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-basket-indices.svg @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-commodities.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-commodities.svg new file mode 100644 index 000000000000..3b0ec9032df4 --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-commodities.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-cryptocurrencies.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-cryptocurrencies.svg new file mode 100644 index 000000000000..2910a1a088e0 --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-cryptocurrencies.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-derived-fx.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-derived-fx.svg new file mode 100644 index 000000000000..5c2014c21c95 --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-derived-fx.svg @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-etf.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-etf.svg new file mode 100644 index 000000000000..ecaba49dd980 --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-etf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-forex.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-forex.svg new file mode 100644 index 000000000000..cb059c723893 --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-forex.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stock-indices.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stock-indices.svg new file mode 100644 index 000000000000..bae58577ad7c --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stock-indices.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stocks.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stocks.svg new file mode 100644 index 000000000000..bae58577ad7c --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-stocks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-synthetics.svg b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-synthetics.svg new file mode 100644 index 000000000000..57c1c7500777 --- /dev/null +++ b/packages/cfd/src/Assets/svgs/trading-instruments/ic-appstore-synthetics.svg @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx b/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx new file mode 100644 index 000000000000..1f0b394f9068 --- /dev/null +++ b/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 interface IconProps { + 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) => { + const InstrumentIcon = InstrumentsIcons[icon] as React.ElementType; + + return InstrumentIcon ? ( + + ) : null; +}; + +export default TradingInstrumentsIcon; From cdabf47488ca3edfccadee8db2e6df95880c6caf Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Wed, 17 May 2023 10:00:47 +0800 Subject: [PATCH 2/9] feat: icon reusable component v1.1 --- packages/cfd/src/Components/props.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 3dae634df84c..5ce54a8a8ffc 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -52,7 +52,7 @@ export type TCFDAccountCardActionProps = { }; export type TTradingPlatformAvailableAccount = { - market_type: 'financial' | 'gaming'; + market_type: 'financial' | 'gaming' | 'all'; name: string; requirements: { after_first_deposit: { From 5ff5beab2746ecbfcd89699dd035736cf65cd524 Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Wed, 17 May 2023 10:18:55 +0800 Subject: [PATCH 3/9] feat: icon reusable component v1.1.1 --- .../compare-accounts/compare-accounts.tsx | 40 +++++++++++++++++ .../instruments-icon-with-label.tsx | 45 +++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 packages/cfd/src/Containers/compare-accounts/compare-accounts.tsx create mode 100644 packages/cfd/src/Containers/compare-accounts/instruments-icon-with-label.tsx diff --git a/packages/cfd/src/Containers/compare-accounts/compare-accounts.tsx b/packages/cfd/src/Containers/compare-accounts/compare-accounts.tsx new file mode 100644 index 000000000000..1f6c0823857f --- /dev/null +++ b/packages/cfd/src/Containers/compare-accounts/compare-accounts.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import InstumentsIconWithLabel from './instruments-icon-with-label'; + +type TIconData = { + icon: + | 'DerivedFX' + | 'Synthetics' + | 'BasketIndices' + | 'Stocks' + | 'StockIndices' + | 'Commodities' + | 'Forex' + | 'Cryptocurrencies' + | 'ETF'; + text: string; +}; + +const iconData: TIconData[] = [ + { icon: 'Synthetics', text: 'Synthetics' }, + { icon: 'BasketIndices', text: 'Basket Indices' }, + { icon: 'DerivedFX', text: 'Derived FX' }, + { icon: 'Stocks', text: 'Stock' }, + { icon: 'StockIndices', text: 'Stock Indices' }, + { icon: 'Commodities', text: 'Commodities' }, + { icon: 'Forex', text: 'Forex' }, + { icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, + { icon: 'ETF', text: 'ETF' }, +]; + +const CompareAccounts: React.FC = () => { + return ( +
+ {iconData.map(item => ( + + ))} +
+ ); +}; + +export default CompareAccounts; diff --git a/packages/cfd/src/Containers/compare-accounts/instruments-icon-with-label.tsx b/packages/cfd/src/Containers/compare-accounts/instruments-icon-with-label.tsx new file mode 100644 index 000000000000..fc3df472342a --- /dev/null +++ b/packages/cfd/src/Containers/compare-accounts/instruments-icon-with-label.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import TradingInstrumentsIcon from 'Assets/svgs/trading-instruments'; + +interface IconProps { + icon: + | 'DerivedFX' + | 'Synthetics' + | 'BasketIndices' + | 'Stocks' + | 'StockIndices' + | 'Commodities' + | 'Forex' + | 'Cryptocurrencies' + | 'ETF'; + text: string; + highlighted: boolean; +} + +const InstumentsIconWithLabel: React.FC = ({ icon, text, highlighted }) => { + let size = 24; + const dummyFunc = () => { + size = 24; + }; + return ( +
+ + + {text} + +
+ ); +}; + +export default InstumentsIconWithLabel; From dde426a0bb742307f6b4c3904886a00adb56e44b Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Mon, 29 May 2023 16:37:46 +0800 Subject: [PATCH 4/9] feat: reusable component v1.2 --- .../cfd-compare-accounts.scss | 6 ++ .../cfd-compare-accounts.tsx | 101 ++++++++++++++++++ .../instruments-icon-with-label.tsx | 6 +- .../compare-accounts/compare-accounts.tsx | 40 ------- 4 files changed, 111 insertions(+), 42 deletions(-) rename packages/cfd/src/Containers/{compare-accounts => cfd-compare-accounts}/instruments-icon-with-label.tsx (85%) delete mode 100644 packages/cfd/src/Containers/compare-accounts/compare-accounts.tsx diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss index 524a360f6fd9..d245a8835e17 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss @@ -16,3 +16,9 @@ } } } + +.compare-cfd-account { + &-outline { + border: 1px solid #000; + } +} diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx index bc3ec528dfba..b299a531d567 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx @@ -4,9 +4,97 @@ import { Text, Icon, PageOverlay, DesktopWrapper, MobileWrapper } from '@deriv/c import { routes } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { useHistory } from 'react-router-dom'; +import InstumentsIconWithLabel from './instruments-icon-with-label'; + +interface CardData { + id: number; + title: string; + description: string; +} + +type TIconData = { + icon: + | 'DerivedFX' + | 'Synthetics' + | 'BasketIndices' + | 'Stocks' + | 'StockIndices' + | 'Commodities' + | 'Forex' + | 'Cryptocurrencies' + | 'ETF'; + text: string; +}; + +const cardData: CardData[] = [ + { + id: 1, + title: 'Card 1', + description: 'This is the description for Card 1.', + }, + { + id: 2, + title: 'Card 2', + description: 'This is the description for Card 2.', + }, + { + id: 3, + title: 'Card 3', + description: 'This is the description for Card 3.', + }, + { + id: 4, + title: 'Card 4', + description: 'This is the description for Card 4.', + }, + { + id: 5, + title: 'Card 5', + description: 'This is the description for Card 5.', + }, + { + id: 6, + title: 'Card 6', + description: 'This is the description for Card 6.', + }, + { + id: 7, + title: 'Card 7', + description: 'This is the description for Card 7.', + }, + // Add more card data as needed + // ... +]; const CompareCFDs = () => { const history = useHistory(); + const iconData: TIconData[] = [ + { icon: 'Synthetics', text: 'Synthetics' }, + { icon: 'BasketIndices', text: 'Basket Indices' }, + { icon: 'DerivedFX', text: 'Derived FX' }, + { icon: 'Stocks', text: 'Stock' }, + { icon: 'StockIndices', text: 'Stock Indices' }, + { icon: 'Commodities', text: 'Commodities' }, + { icon: 'Forex', text: 'Forex' }, + { icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, + { icon: 'ETF', text: 'ETF' }, + ]; + + const CompareAccounts: React.FC = () => { + return ( +
+ {iconData.map(item => ( + + ))} +
+ ); + }; const DesktopHeader = (
@@ -29,12 +117,25 @@ const CompareCFDs = () => {
); + const CardList: React.FC = () => { + return ( +
+ {cardData.map(item => ( + + ))} +
+ ); + }; + return ( Desktop wrapper +
+ +
= ({ icon, text, highlighted }) => { +const InstumentsIconWithLabel: React.FC = ({ icon, text, highlighted, className }) => { let size = 24; const dummyFunc = () => { size = 24; @@ -29,6 +30,7 @@ const InstumentsIconWithLabel: React.FC = ({ icon, text, highlighted margin: '3px', opacity: highlighted ? '' : '0.2', }} + className={className} > { - return ( -
- {iconData.map(item => ( - - ))} -
- ); -}; - -export default CompareAccounts; From 898511b375997b1debf63884f1498db9c2c41564 Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Tue, 30 May 2023 12:13:13 +0800 Subject: [PATCH 5/9] feat: reusable component v1.2.1 --- .../cfd-compare-accounts/cfd-compare-accounts.scss | 13 ++++++++++++- .../cfd-compare-accounts/cfd-compare-accounts.tsx | 14 ++++++++------ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss index d245a8835e17..8b66fd8c0624 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss @@ -19,6 +19,17 @@ .compare-cfd-account { &-outline { - border: 1px solid #000; + 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; +} diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx index b299a531d567..25a399c9f119 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { connect } from '../../Stores/connect'; +import RootStore from '../../Stores/index'; 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 InstumentsIconWithLabel from './instruments-icon-with-label'; +// import { TTradingPlatformAvailableAccount } from '../../Components/props.types'; interface CardData { id: number; @@ -130,10 +132,8 @@ const CompareCFDs = () => { return ( - - Desktop wrapper - -
+ +
@@ -151,4 +151,6 @@ const CompareCFDs = () => { ); }; -export default observer(CompareCFDs); +export default connect(({ client }: RootStore) => ({ + trading_platform_available_accounts: client.trading_platform_available_accounts, +}))(CompareCFDs); From b27dfd7765c7c6dbd12b4c1a28766a58ef2093b4 Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Wed, 31 May 2023 12:00:34 +0800 Subject: [PATCH 6/9] feat: icon reusable component added v1.3 --- .../cfd-compare-accounts.tsx | 107 ++---------------- .../cfd-instruments-label-highlighted.tsx | 40 +++++++ 2 files changed, 50 insertions(+), 97 deletions(-) create mode 100644 packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx index 25a399c9f119..3b55782d8981 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx @@ -1,102 +1,17 @@ import React from 'react'; -import { connect } from '../../Stores/connect'; -import RootStore from '../../Stores/index'; 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 InstumentsIconWithLabel from './instruments-icon-with-label'; -// import { TTradingPlatformAvailableAccount } from '../../Components/props.types'; +import CFDInstrumentsLabelHighlighted from './cfd-instruments-label-highlighted'; +import { observer } from 'mobx-react'; +import { useStore } from '@deriv/stores'; -interface CardData { - id: number; - title: string; - description: string; -} +const CompareCFDs = observer(() => { + const { client } = useStore(); + const { trading_platform_available_accounts } = client; -type TIconData = { - icon: - | 'DerivedFX' - | 'Synthetics' - | 'BasketIndices' - | 'Stocks' - | 'StockIndices' - | 'Commodities' - | 'Forex' - | 'Cryptocurrencies' - | 'ETF'; - text: string; -}; - -const cardData: CardData[] = [ - { - id: 1, - title: 'Card 1', - description: 'This is the description for Card 1.', - }, - { - id: 2, - title: 'Card 2', - description: 'This is the description for Card 2.', - }, - { - id: 3, - title: 'Card 3', - description: 'This is the description for Card 3.', - }, - { - id: 4, - title: 'Card 4', - description: 'This is the description for Card 4.', - }, - { - id: 5, - title: 'Card 5', - description: 'This is the description for Card 5.', - }, - { - id: 6, - title: 'Card 6', - description: 'This is the description for Card 6.', - }, - { - id: 7, - title: 'Card 7', - description: 'This is the description for Card 7.', - }, - // Add more card data as needed - // ... -]; - -const CompareCFDs = () => { const history = useHistory(); - const iconData: TIconData[] = [ - { icon: 'Synthetics', text: 'Synthetics' }, - { icon: 'BasketIndices', text: 'Basket Indices' }, - { icon: 'DerivedFX', text: 'Derived FX' }, - { icon: 'Stocks', text: 'Stock' }, - { icon: 'StockIndices', text: 'Stock Indices' }, - { icon: 'Commodities', text: 'Commodities' }, - { icon: 'Forex', text: 'Forex' }, - { icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { icon: 'ETF', text: 'ETF' }, - ]; - - const CompareAccounts: React.FC = () => { - return ( -
- {iconData.map(item => ( - - ))} -
- ); - }; const DesktopHeader = (
@@ -122,8 +37,8 @@ const CompareCFDs = () => { const CardList: React.FC = () => { return (
- {cardData.map(item => ( - + {trading_platform_available_accounts.map((item, idx) => ( + ))}
); @@ -149,8 +64,6 @@ const CompareCFDs = () => { ); -}; +}); -export default connect(({ client }: RootStore) => ({ - trading_platform_available_accounts: client.trading_platform_available_accounts, -}))(CompareCFDs); +export default CompareCFDs; diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx new file mode 100644 index 000000000000..2ad21f50fae6 --- /dev/null +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import InstumentsIconWithLabel from './instruments-icon-with-label'; + +type TIconData = { + icon: + | 'DerivedFX' + | 'Synthetics' + | 'BasketIndices' + | 'Stocks' + | 'StockIndices' + | 'Commodities' + | 'Forex' + | 'Cryptocurrencies' + | 'ETF'; + text: string; +}; + +const CFDInstrumentsLabelHighlighted: React.FC = () => { + const iconData: TIconData[] = [ + { icon: 'Synthetics', text: 'Synthetics' }, + { icon: 'BasketIndices', text: 'Basket Indices' }, + { icon: 'DerivedFX', text: 'Derived FX' }, + { icon: 'Stocks', text: 'Stock' }, + { icon: 'StockIndices', text: 'Stock Indices' }, + { icon: 'Commodities', text: 'Commodities' }, + { icon: 'Forex', text: 'Forex' }, + { icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, + { icon: 'ETF', text: 'ETF' }, + ]; + + return ( +
+ {iconData.map(item => ( + + ))} +
+ ); +}; + +export default CFDInstrumentsLabelHighlighted; From f042808c5ed01d19d6808b4eb37f9756d73a3acf Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Wed, 31 May 2023 16:49:57 +0800 Subject: [PATCH 7/9] feat: reusable component for Icons --- packages/cfd/src/Components/props.types.ts | 15 ++++++ .../cfd-compare-accounts.tsx | 16 ++----- .../cfd-instruments-label-highlighted.tsx | 37 +++++--------- .../instruments-icon-with-label.tsx | 4 +- packages/cfd/src/Helpers/config.ts | 48 +++++++++++++++++++ 5 files changed, 82 insertions(+), 38 deletions(-) create mode 100644 packages/cfd/src/Helpers/config.ts diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 03d0147dbb6f..55acb51b3cb7 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/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; +}; diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx index 3b55782d8981..d4e8d75cd6e6 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx @@ -34,22 +34,16 @@ const CompareCFDs = observer(() => {
); - const CardList: React.FC = () => { - return ( -
- {trading_platform_available_accounts.map((item, idx) => ( - - ))} -
- ); - }; - return (
- +
+ {trading_platform_available_accounts.map((item, idx) => ( + + ))} +
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx index 2ad21f50fae6..d34f882d522c 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx @@ -1,37 +1,24 @@ import React from 'react'; import InstumentsIconWithLabel from './instruments-icon-with-label'; +import { TTradingPlatformAvailableAccount, TIconData } from '../../Components/props.types'; +import { getHighlightedIconLabel } from '../../Helpers/config'; -type TIconData = { - icon: - | 'DerivedFX' - | 'Synthetics' - | 'BasketIndices' - | 'Stocks' - | 'StockIndices' - | 'Commodities' - | 'Forex' - | 'Cryptocurrencies' - | 'ETF'; - text: string; +type TCFDInstrumentsLabelHighlightedProps = { + trading_platforms: TTradingPlatformAvailableAccount; }; -const CFDInstrumentsLabelHighlighted: React.FC = () => { - const iconData: TIconData[] = [ - { icon: 'Synthetics', text: 'Synthetics' }, - { icon: 'BasketIndices', text: 'Basket Indices' }, - { icon: 'DerivedFX', text: 'Derived FX' }, - { icon: 'Stocks', text: 'Stock' }, - { icon: 'StockIndices', text: 'Stock Indices' }, - { icon: 'Commodities', text: 'Commodities' }, - { icon: 'Forex', text: 'Forex' }, - { icon: 'Cryptocurrencies', text: 'Cryptocurrencies' }, - { icon: 'ETF', text: 'ETF' }, - ]; +const CFDInstrumentsLabelHighlighted: React.FC = ({ trading_platforms }) => { + const iconData: TIconData[] = [...getHighlightedIconLabel(trading_platforms)]; return (
{iconData.map(item => ( - + ))}
); diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx index cd981ada16af..1aa946b19f6e 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx @@ -1,7 +1,7 @@ import React from 'react'; import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments'; -interface IconProps { +interface TIconProps { icon: | 'DerivedFX' | 'Synthetics' @@ -17,7 +17,7 @@ interface IconProps { className?: string; } -const InstumentsIconWithLabel: React.FC = ({ icon, text, highlighted, className }) => { +const InstumentsIconWithLabel: React.FC = ({ icon, text, highlighted, className }) => { let size = 24; const dummyFunc = () => { size = 24; diff --git a/packages/cfd/src/Helpers/config.ts b/packages/cfd/src/Helpers/config.ts new file mode 100644 index 000000000000..157e786d511c --- /dev/null +++ b/packages/cfd/src/Helpers/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 }; From 0c85115851de7360c8b9e89b51294ad6f13b60d5 Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Fri, 2 Jun 2023 12:43:59 +0800 Subject: [PATCH 8/9] feat: reusable component for Icons refactor --- .../Assets/svgs/trading-instruments/index.tsx | 4 +- .../cfd-compare-accounts.tsx | 12 +++-- .../cfd-instruments-label-highlighted.tsx | 11 ++--- .../instruments-icon-with-label.tsx | 6 +-- packages/cfd/src/Helpers/config.ts | 48 ------------------- 5 files changed, 16 insertions(+), 65 deletions(-) delete mode 100644 packages/cfd/src/Helpers/config.ts diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx b/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx index 1f0b394f9068..8d8f57480317 100644 --- a/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx +++ b/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx @@ -9,12 +9,12 @@ import Forex from './ic-appstore-forex.svg'; import Cryptocurrencies from './ic-appstore-cryptocurrencies.svg'; import ETF from './ic-appstore-etf.svg'; -export interface IconProps { +export type IconProps = { icon: T; className?: string; size?: number; onClick?: () => void; -} +}; export const InstrumentsIcons = { DerivedFX, diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx index d4e8d75cd6e6..da9a7a3082dd 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx @@ -1,10 +1,11 @@ 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 { observer } from 'mobx-react'; + import { useStore } from '@deriv/stores'; const CompareCFDs = observer(() => { @@ -40,8 +41,11 @@ const CompareCFDs = observer(() => {
- {trading_platform_available_accounts.map((item, idx) => ( - + {trading_platform_available_accounts.map(item => ( + ))}
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx index d34f882d522c..e7aa25d5a400 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx @@ -1,7 +1,7 @@ import React from 'react'; import InstumentsIconWithLabel from './instruments-icon-with-label'; -import { TTradingPlatformAvailableAccount, TIconData } from '../../Components/props.types'; -import { getHighlightedIconLabel } from '../../Helpers/config'; +import { TTradingPlatformAvailableAccount, TIconData } from 'Components/props.types'; +import { getHighlightedIconLabel } from '../../Helpers/compare-accounts-config'; type TCFDInstrumentsLabelHighlightedProps = { trading_platforms: TTradingPlatformAvailableAccount; @@ -13,12 +13,7 @@ const CFDInstrumentsLabelHighlighted: React.FC {iconData.map(item => ( - + ))}
); diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx index 1aa946b19f6e..5d936877ce47 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx @@ -1,7 +1,7 @@ import React from 'react'; import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments'; -interface TIconProps { +type TIconProps = { icon: | 'DerivedFX' | 'Synthetics' @@ -15,9 +15,9 @@ interface TIconProps { text: string; highlighted: boolean; className?: string; -} +}; -const InstumentsIconWithLabel: React.FC = ({ icon, text, highlighted, className }) => { +const InstumentsIconWithLabel = ({ icon, text, highlighted, className }: TIconProps) => { let size = 24; const dummyFunc = () => { size = 24; diff --git a/packages/cfd/src/Helpers/config.ts b/packages/cfd/src/Helpers/config.ts deleted file mode 100644 index 157e786d511c..000000000000 --- a/packages/cfd/src/Helpers/config.ts +++ /dev/null @@ -1,48 +0,0 @@ -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 }; From 9d52db108ad1e1e603e5bb6410036b79f1316df4 Mon Sep 17 00:00:00 2001 From: hamza-deriv Date: Fri, 2 Jun 2023 13:18:14 +0800 Subject: [PATCH 9/9] feat: reusable component for Icons refactor v1.2 --- .../src/Helpers/compare-accounts-config.ts | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 packages/cfd/src/Helpers/compare-accounts-config.ts diff --git a/packages/cfd/src/Helpers/compare-accounts-config.ts b/packages/cfd/src/Helpers/compare-accounts-config.ts new file mode 100644 index 000000000000..157e786d511c --- /dev/null +++ b/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 };