feat: add type for options

Author: sergei-deriv

packages/tradershub/src/constants/regulators-modal-content.ts

@@ -1,8 +1,16 @@
 /* eslint-disable sort-keys */
+import { TextProps } from '@deriv-com/ui/dist/components/Text';
+
 export type TRowItem = {
-    options?: Record<string, boolean | string>;
+    options?: {
+        align?: TextProps['align'];
+        color?: TextProps['color'];
+        shouldShowAsterickAtEnd?: boolean;
+        weight?: TextProps['weight'];
+    };
     text: string;
 };
+
 type TRegulatorContent = Record<string, TRowItem | TRowItem[]>;
 
 export type TRegulatorsContentProps = {
@@ -76,7 +84,7 @@ export const getCFDContents: TRegulatorsContentProps[] = [
                 { text: 'Cryptocurrencies' },
             ],
             euRegulator: [
-                { options: { should_show_asterick_at_end: true }, text: 'Synthetics' },
+                { options: { shouldShowAsterickAtEnd: true }, text: 'Synthetics' },
                 { text: 'Forex' },
                 { text: 'Stocks' },
                 { text: 'Stock indices' },
@@ -143,7 +151,7 @@ export const getOptionsContents: TRegulatorsContentProps[] = [
             ],
             euRegulator: [
                 {
-                    options: { should_show_asterick_at_end: true },
+                    options: { shouldShowAsterickAtEnd: true },
                     text: 'Synthetics',
                 },
                 { text: 'Forex' },

packages/tradershub/src/modals/RegulationModal/RegulationModal.tsx

@@ -25,7 +25,7 @@ const RegulationModal = () => (
                             </th>
                         </tr>
                     </thead>
-                    <tbody className=''>
+                    <tbody>
                         {getCFDContents.map((row, idx) => (
                             <Row key={row.id} {...row} idx={idx} />
                         ))}

packages/tradershub/src/modals/RegulationModal/Row.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { qtMerge } from '@deriv/quill-design';
-import { Text, TextProps } from '@deriv-com/ui/dist/components/Text';
+import { Text } from '@deriv-com/ui/dist/components/Text';
 import { TRegulatorsContentProps, TRowItem } from '../../constants/regulators-modal-content';
 
 type TProps = TRegulatorsContentProps & {
@@ -26,24 +26,24 @@ const Row = ({ attribute, content, id, idx }: TProps) => (
                 {Array.isArray(content[rowKey]) ? (
                     (content[rowKey] as TRowItem[])?.map(item => (
                         <Text
-                            align={(item?.options?.align as TextProps['align']) ?? 'center'}
+                            align={item?.options?.align ?? 'center'}
                             as='p'
-                            color={(item?.options?.color as TextProps['color']) ?? 'prominent'}
+                            color={item?.options?.color ?? 'prominent'}
                             key={`${id}_${rowKey}_${item?.text}`}
                             size='2xs'
-                            weight={item?.options?.weight as TextProps['weight']}
+                            weight={item?.options?.weight}
                         >
                             {item?.text}
-                            {item?.options?.should_show_asterick_at_end && <Text color='error'>*</Text>}
+                            {item?.options?.shouldShowAsterickAtEnd && <Text color='error'>*</Text>}
                         </Text>
                     ))
                 ) : (
                     <Text
-                        align={((content[rowKey] as TRowItem)?.options?.align as TextProps['align']) ?? 'center'}
+                        align={(content[rowKey] as TRowItem)?.options?.align ?? 'center'}
                         as='p'
-                        color={((content[rowKey] as TRowItem)?.options?.color as TextProps['color']) ?? 'prominent'}
+                        color={(content[rowKey] as TRowItem)?.options?.color ?? 'prominent'}
                         size='2xs'
-                        weight={(content[rowKey] as TRowItem)?.options?.weight as TextProps['weight']}
+                        weight={(content[rowKey] as TRowItem)?.options?.weight}
                     >
                         {(content[rowKey] as TRowItem)?.text}
                     </Text>