From f0367d48394b3f383085133fbb4c713621354b5f Mon Sep 17 00:00:00 2001
From: tay suisin <suisin@regentmarkets.com>
Date: Fri, 7 Oct 2022 17:23:04 +0800
Subject: [PATCH 1/4] TS Migration for account limits table header

---
 ...eader.spec.js => account-limits-table-header.spec.tsx} | 0
 ...s-table-header.jsx => account-limits-table-header.tsx} | 8 +++++++-
 .../src/Components/account-limits/account-limits.jsx      | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)
 rename packages/account/src/Components/account-limits/__tests__/{account-limits-table-header.spec.js => account-limits-table-header.spec.tsx} (100%)
 rename packages/account/src/Components/account-limits/{account-limits-table-header.jsx => account-limits-table-header.tsx} (86%)

diff --git a/packages/account/src/Components/account-limits/__tests__/account-limits-table-header.spec.js b/packages/account/src/Components/account-limits/__tests__/account-limits-table-header.spec.tsx
similarity index 100%
rename from packages/account/src/Components/account-limits/__tests__/account-limits-table-header.spec.js
rename to packages/account/src/Components/account-limits/__tests__/account-limits-table-header.spec.tsx
diff --git a/packages/account/src/Components/account-limits/account-limits-table-header.jsx b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
similarity index 86%
rename from packages/account/src/Components/account-limits/account-limits-table-header.jsx
rename to packages/account/src/Components/account-limits/account-limits-table-header.tsx
index da50e278c3f4..6bd9fc63ce26 100644
--- a/packages/account/src/Components/account-limits/account-limits-table-header.jsx
+++ b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
@@ -3,7 +3,13 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
 
-const AccountLimitsTableHeader = ({ align, children, renderExtraInfo }) => {
+type TAccountLimitsTableHeader = {
+    align?: 'left' | 'right';
+    children?: React.ReactNode;
+    renderExtraInfo?: () => React.ReactNode;
+};
+
+const AccountLimitsTableHeader = ({ align, children, renderExtraInfo }: TAccountLimitsTableHeader) => {
     return (
         <th
             className={classNames('da-account-limits__table-header', {
diff --git a/packages/account/src/Components/account-limits/account-limits.jsx b/packages/account/src/Components/account-limits/account-limits.jsx
index 4be46dbedeed..78e7c12c7886 100644
--- a/packages/account/src/Components/account-limits/account-limits.jsx
+++ b/packages/account/src/Components/account-limits/account-limits.jsx
@@ -12,7 +12,7 @@ import AccountLimitsExtraInfo from './account-limits-extra-info.jsx';
 import AccountLimitsFooter from './account-limits-footer.jsx';
 import AccountLimitsOverlay from './account-limits-overlay.jsx';
 import AccountLimitsTableCell from './account-limits-table-cell.jsx';
-import AccountLimitsTableHeader from './account-limits-table-header.jsx';
+import AccountLimitsTableHeader from './account-limits-table-header';
 import AccountLimitsTurnoverLimitRow from './account-limits-turnover-limit-row.jsx';
 
 const AccountLimits = ({

From 1be453f4e9e2736e50d7b7d367292dbc330eaf1b Mon Sep 17 00:00:00 2001
From: tay suisin <suisin@regentmarkets.com>
Date: Fri, 7 Oct 2022 17:28:36 +0800
Subject: [PATCH 2/4] Update Refactored codes

---
 .../account-limits/account-limits-table-header.tsx         | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/account/src/Components/account-limits/account-limits-table-header.tsx b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
index 6bd9fc63ce26..87901e73cee7 100644
--- a/packages/account/src/Components/account-limits/account-limits-table-header.tsx
+++ b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
@@ -36,10 +35,4 @@ const AccountLimitsTableHeader = ({ align, children, renderExtraInfo }: TAccount
     );
 };
 
-AccountLimitsTableHeader.propTypes = {
-    align: PropTypes.oneOf(['right', 'left']),
-    children: PropTypes.any,
-    renderExtraInfo: PropTypes.func,
-};
-
 export default AccountLimitsTableHeader;

From a6b71cc8409e4ac231cbcd97fce4e89e4490df3f Mon Sep 17 00:00:00 2001
From: tay suisin <suisin@regentmarkets.com>
Date: Tue, 18 Oct 2022 17:10:56 +0800
Subject: [PATCH 3/4] update Type Script coding pattern

---
 .../account-limits/account-limits-table-header.tsx         | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/account/src/Components/account-limits/account-limits-table-header.tsx b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
index 87901e73cee7..3eb259fa4427 100644
--- a/packages/account/src/Components/account-limits/account-limits-table-header.tsx
+++ b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
@@ -4,11 +4,14 @@ import { Text } from '@deriv/components';
 
 type TAccountLimitsTableHeader = {
     align?: 'left' | 'right';
-    children?: React.ReactNode;
     renderExtraInfo?: () => React.ReactNode;
 };
 
-const AccountLimitsTableHeader = ({ align, children, renderExtraInfo }: TAccountLimitsTableHeader) => {
+const AccountLimitsTableHeader = ({
+    align,
+    children,
+    renderExtraInfo,
+}: React.PropsWithChildren<Partial<TAccountLimitsTableHeader>>) => {
     return (
         <th
             className={classNames('da-account-limits__table-header', {

From 6638a8a17888e227927d595315af980fc5aa9517 Mon Sep 17 00:00:00 2001
From: tay suisin <suisin@regentmarkets.com>
Date: Tue, 18 Oct 2022 18:19:47 +0800
Subject: [PATCH 4/4] remove ? from ts rule for  props

---
 .../Components/account-limits/account-limits-table-header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/account/src/Components/account-limits/account-limits-table-header.tsx b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
index 3eb259fa4427..cd5d080aab8a 100644
--- a/packages/account/src/Components/account-limits/account-limits-table-header.tsx
+++ b/packages/account/src/Components/account-limits/account-limits-table-header.tsx
@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import { Text } from '@deriv/components';
 
 type TAccountLimitsTableHeader = {
-    align?: 'left' | 'right';
-    renderExtraInfo?: () => React.ReactNode;
+    align: 'left' | 'right';
+    renderExtraInfo: () => React.ReactNode;
 };
 
 const AccountLimitsTableHeader = ({