Henry/dtra 282/rewrite contract type info component

packages/components/src/components/vertical-tab/vertical-tab-header-group.tsx

@@ -62,7 +62,7 @@ const VerticalTabHeaderGroup = ({
             })}
             onClick={handleClick}
         >
-            <HeaderIcon icon={group.icon} is_active={selected} />
+            <HeaderIcon icon={group.icon ?? ''} is_active={selected} />
             <Header text={label} />
             {is_collapsible && (
                 <Icon
@@ -83,7 +83,7 @@ const VerticalTabHeaderGroup = ({
                 })}
                 onClick={handleClick}
             >
-                <HeaderIcon icon={group.icon} is_active={selected} />
+                <HeaderIcon icon={group.icon ?? ''} is_active={selected} />
                 <Header text={label} />
                 {is_collapsible && (
                     <Icon

packages/components/src/components/vertical-tab/vertical-tab-header.tsx

@@ -16,14 +16,15 @@ export type THeader = {
 };
 
 export type TItem = {
-    component?: typeof React.Component;
+    component?: JSX.Element | null;
     count?: number;
     default?: boolean;
     getTitle?: () => string;
     has_side_note?: boolean;
-    icon: string;
+    icon?: string;
     is_hidden?: boolean;
     is_disabled?: boolean;
+    key?: string;
     label?: string;
     path?: string;
     subitems?: number[];
@@ -88,7 +89,7 @@ const VerticalTabHeader = ({
                 'dc-vertical-tab__header--active': is_active,
             })}
         >
-            <HeaderIcon icon={item.icon} is_active={is_active} />
+            <HeaderIcon icon={item.icon ?? ''} is_active={is_active} />
             <Header text={label} path={item.path} />
             {!!count && <Counter count={count} className='dc-vertical-tab__header__counter' />}
             {children}
@@ -102,7 +103,7 @@ const VerticalTabHeader = ({
             })}
             onClick={handleClick}
         >
-            <HeaderIcon icon={item.icon} is_active={is_active} />
+            <HeaderIcon icon={item.icon ?? ''} is_active={is_active} />
             <Header text={label} />
             {children}
             <>{item.component}</>

packages/components/stories/icon/icons.js

@@ -54,7 +54,7 @@ export const icons =
         'IcAppstoreWalletUsdLight',
         'IcAppstoreWalletUsdcLight',
         'IcAppstoreWalletUsdtLight',
-        'IcAppstoreWarning',
+        'IcAppstoreWarning'
     ],
     'brand': [
         'IcBrandDerivEzWordmark',
@@ -64,7 +64,7 @@ export const icons =
         'IcBrandDmt5FinancialStp',
         'IcBrandDmt5Financial',
         'IcBrandDmt5Synthetics',
-        'IcBrandDxtradeWordmark',
+        'IcBrandDxtradeWordmark'
     ],
     'cashier': [
         'IcCashierAdd',
@@ -238,7 +238,7 @@ export const icons =
         'IcCashierWyreLight',
         'IcCashierZenithbankDark',
         'IcCashierZenithbankLight',
-        'IcCashier',
+        'IcCashier'
     ],
     'common': [
         'IcAccountCross',
@@ -611,7 +611,7 @@ export const icons =
         'IcWip',
         'IcZingpay',
         'IcZoomIn',
-        'IcZoomOut',
+        'IcZoomOut'
     ],
     'contract': [
         'IcContractBarrier',
@@ -629,7 +629,7 @@ export const icons =
         'IcContractStartTimeCircle',
         'IcContractStartTime',
         'IcContractStrike',
-        'IcContractTarget',
+        'IcContractTarget'
     ],
     'currency': [
         'IcCurrencyAud',
@@ -653,10 +653,10 @@ export const icons =
         'IcCurrencyUsdc',
         'IcCurrencyUsdk',
         'IcCurrencyUst',
-        'IcCurrencyVirtual',
+        'IcCurrencyVirtual'
     ],
     'derivez': [
-        'IcDerivez',
+        'IcDerivez'
     ],
     'dxtrade': [
         'IcDxtradeDerivX',
@@ -673,7 +673,7 @@ export const icons =
         'IcDxtradeFinancialPlatform',
         'IcDxtradeFinancial',
         'IcDxtradeOnePassword',
-        'IcDxtradeSyntheticPlatform',
+        'IcDxtradeSyntheticPlatform'
     ],
     'flag': [
         'IcFlagDe',
@@ -690,7 +690,7 @@ export const icons =
         'IcFlagUk',
         'IcFlagVi',
         'IcFlagZhCn',
-        'IcFlagZhTw',
+        'IcFlagZhTw'
     ],
     'mt5': [
         'IcMt5Acuity',
@@ -719,7 +719,7 @@ export const icons =
         'IcMt5SyntheticDashboard',
         'IcMt5SyntheticIndices',
         'IcMt5SyntheticPlatform',
-        'IcMt5TradeTypes',
+        'IcMt5TradeTypes'
     ],
     'option': [
         'IcOptionAccumulators',
@@ -737,7 +737,7 @@ export const icons =
         'IcOptionOverUnder',
         'IcOptionRaiseFall',
         'IcOptionTouchNotouch',
-        'IcOptionUpDownAsian',
+        'IcOptionUpDownAsian'
     ],
     'rebranding': [
         'IcRebrandingBinaryBot',
@@ -758,7 +758,7 @@ export const icons =
         'IcRebrandingDxtrade',
         'IcRebrandingMt5Logo',
         'IcRebrandingSmarttraderDashboard',
-        'IcRebrandingSmarttrader',
+        'IcRebrandingSmarttrader'
     ],
     'stock': [
         'IcStockAdidasSalomon',
@@ -808,7 +808,7 @@ export const icons =
         'IcStockVisa',
         'IcStockWallMart',
         'IcStockWaltDisney',
-        'IcStockZoom',
+        'IcStockZoom'
     ],
     'tradetype': [
         'IcTradetypeAccu',
@@ -848,7 +848,7 @@ export const icons =
         'IcTradetypeTurbosshort',
         'IcTradetypeUpordown',
         'IcTradetypeVanillaLongCall',
-        'IcTradetypeVanillaLongPut',
+        'IcTradetypeVanillaLongPut'
     ],
     'underlying': [
         'IcUnderlying1HZ100V',
@@ -1007,7 +1007,7 @@ export const icons =
         'IcUnderlyingWLDEUR',
         'IcUnderlyingWLDGBP',
         'IcUnderlyingWLDUSD',
-        'IcUnderlyingWLDXAU',
+        'IcUnderlyingWLDXAU'
     ],
     'wallet': [
         'IcWalletClearFunds',
@@ -1043,6 +1043,6 @@ export const icons =
         'IcWalletWebmoneyLight',
         'IcWalletWebmoney',
         'IcWalletZingpayDark',
-        'IcWalletZingpayLight',
-    ],
-}
+        'IcWalletZingpayLight'
+    ]
+}

packages/shared/src/utils/route/route.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 // TODO: Add test cases for this
 type TRoute = {
-    component?: React.ComponentType;
+    component?: JSX.Element | null;
     default?: boolean;
     exact?: boolean;
     getTitle?: () => string;

packages/trader/src/Modules/SmartChart/Components/buy-toast-notification.tsx

@@ -6,7 +6,7 @@ import { findContractCategory } from 'Modules/Trading/Helpers/contract-type';
 import { observer, useStore } from '@deriv/stores';
 
 type TContractType = {
-    text: string;
+    text?: string;
     value: string;
 };
 

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-glossary.tsx

@@ -34,7 +34,7 @@ const ContractTypeGlossary = ({ category }: { category: string }) => {
                     {
                         type: 'paragraph',
                         text: localize(
-                            'The spot price may change by the time your order reaches our servers. When this happens, your payout maybe affected.'
+                            'The spot price may change by the time your order reaches our servers. When this happens, your payout may be affected.'
                         ),
                     },
                 ];

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info-header.jsx → packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info-header.tsx

@@ -1,8 +1,13 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Text } from '@deriv/components';
 
-const Header = ({ onClickGoBack, text_size = 's', title }) => (
+type THeader = {
+    onClickGoBack?: () => void;
+    text_size?: string;
+    title: string;
+};
+
+const Header = ({ onClickGoBack, text_size = 's', title }: THeader) => (
     <div className='contract-type-info__action-bar'>
         <span className='contract-type-info__icon' id='dt_contract_info_back_nav' onClick={onClickGoBack}>
             <Icon icon='IcArrowLeftBold' />
@@ -13,10 +18,4 @@ const Header = ({ onClickGoBack, text_size = 's', title }) => (
     </div>
 );
 
-Header.propTypes = {
-    onClickGoBack: PropTypes.func,
-    text_size: PropTypes.string,
-    title: PropTypes.string,
-};
-
 export default Header;