From c7d07c25347fc156059fe95376d96dc9bdeab07b Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 7 Oct 2022 11:10:48 +0400
Subject: [PATCH 1/7] refactor: :art: migrated hooks folder to ts

---
 ...{use-blockscroll.js => use-blockscroll.ts} |  8 +++--
 ...{use-constructor.js => use-constructor.ts} |  2 +-
 ...{use-deep-effect.js => use-deep-effect.ts} |  2 +-
 .../src/hooks/{use-hover.js => use-hover.ts}  | 10 +++----
 .../{use-interval.js => use-interval.ts}      |  4 +--
 .../{use-on-scroll.js => use-on-scroll.ts}    |  8 ++---
 .../src/hooks/use-onclickoutside.js           | 21 -------------
 .../src/hooks/use-onclickoutside.ts           | 30 +++++++++++++++++++
 ...{use-onlongpress.js => use-onlongpress.ts} | 10 +++----
 ...nt-ios-zoom.js => use-prevent-ios-zoom.ts} |  2 +-
 .../{use-previous.js => use-previous.ts}      |  2 +-
 .../{use-safe-state.js => use-safe-state.ts}  | 14 ++++++---
 ...tate-callback.js => use-state-callback.ts} | 10 +++++--
 13 files changed, 72 insertions(+), 51 deletions(-)
 rename packages/components/src/hooks/{use-blockscroll.js => use-blockscroll.ts} (79%)
 rename packages/components/src/hooks/{use-constructor.js => use-constructor.ts} (73%)
 rename packages/components/src/hooks/{use-deep-effect.js => use-deep-effect.ts} (83%)
 rename packages/components/src/hooks/{use-hover.js => use-hover.ts} (87%)
 rename packages/components/src/hooks/{use-interval.js => use-interval.ts} (73%)
 rename packages/components/src/hooks/{use-on-scroll.js => use-on-scroll.ts} (71%)
 delete mode 100644 packages/components/src/hooks/use-onclickoutside.js
 create mode 100644 packages/components/src/hooks/use-onclickoutside.ts
 rename packages/components/src/hooks/{use-onlongpress.js => use-onlongpress.ts} (80%)
 rename packages/components/src/hooks/{use-prevent-ios-zoom.js => use-prevent-ios-zoom.ts} (90%)
 rename packages/components/src/hooks/{use-previous.js => use-previous.ts} (78%)
 rename packages/components/src/hooks/{use-safe-state.js => use-safe-state.ts} (56%)
 rename packages/components/src/hooks/{use-state-callback.js => use-state-callback.ts} (63%)

diff --git a/packages/components/src/hooks/use-blockscroll.js b/packages/components/src/hooks/use-blockscroll.ts
similarity index 79%
rename from packages/components/src/hooks/use-blockscroll.js
rename to packages/components/src/hooks/use-blockscroll.ts
index 7f8866d3e437..d22b7915ea95 100644
--- a/packages/components/src/hooks/use-blockscroll.js
+++ b/packages/components/src/hooks/use-blockscroll.ts
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 
-export const useBlockScroll = target_ref => {
+export const useBlockScroll = (target_ref: RefObject<HTMLElement>) => {
     React.useEffect(() => {
         if (!target_ref) return undefined;
 
-        const getScrollableParentElement = elem => {
+        const getScrollableParentElement: (prop: HTMLElement | null) => HTMLElement | null = (
+            elem: HTMLElement | null
+        ) => {
             if (!elem) return null;
             if (elem.classList.contains('dc-themed-scrollbars') && elem.scrollHeight > elem.clientHeight) return elem;
             return getScrollableParentElement(elem.parentElement);
diff --git a/packages/components/src/hooks/use-constructor.js b/packages/components/src/hooks/use-constructor.ts
similarity index 73%
rename from packages/components/src/hooks/use-constructor.js
rename to packages/components/src/hooks/use-constructor.ts
index 1b5f85750ebc..4118b0b689c3 100644
--- a/packages/components/src/hooks/use-constructor.js
+++ b/packages/components/src/hooks/use-constructor.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const useConstructor = (callBack = () => {}) => {
+export const useConstructor = (callBack = () => undefined) => {
     const is_called_ref = React.useRef(false);
     if (!is_called_ref.current) {
         callBack();
diff --git a/packages/components/src/hooks/use-deep-effect.js b/packages/components/src/hooks/use-deep-effect.ts
similarity index 83%
rename from packages/components/src/hooks/use-deep-effect.js
rename to packages/components/src/hooks/use-deep-effect.ts
index 2aa73faba7e4..40f3caff8cea 100644
--- a/packages/components/src/hooks/use-deep-effect.js
+++ b/packages/components/src/hooks/use-deep-effect.ts
@@ -3,7 +3,7 @@ import { isDeepEqual } from '@deriv/shared';
 
 // Note: Do not use this effect on huge objects or objects with
 // circular references as performance may suffer.
-export const useDeepEffect = (callback, dependencies) => {
+export const useDeepEffect = (callback: () => void, dependencies: any) => {
     const prev_dependencies = React.useRef(null);
 
     if (!isDeepEqual(prev_dependencies, dependencies)) {
diff --git a/packages/components/src/hooks/use-hover.js b/packages/components/src/hooks/use-hover.ts
similarity index 87%
rename from packages/components/src/hooks/use-hover.js
rename to packages/components/src/hooks/use-hover.ts
index 7fd3d0c1b390..a97e53223585 100644
--- a/packages/components/src/hooks/use-hover.js
+++ b/packages/components/src/hooks/use-hover.ts
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 
-export const useHover = (refSetter, should_prevent_bubbling) => {
+export const useHover = (refSetter: RefObject<HTMLElement>, should_prevent_bubbling: boolean) => {
     const [value, setValue] = React.useState(false);
     const default_ref = React.useRef(null);
-    const ref = refSetter || default_ref;
+    const ref = refSetter ?? default_ref;
 
     const handleHoverBegin = () => setValue(true);
     const handleHoverFinish = () => setValue(false);
@@ -40,10 +40,10 @@ export const useHoverCallback = () => {
 
     const handleMouseOver = React.useCallback(() => setValue(true), []);
     const handleMouseOut = React.useCallback(() => setValue(false), []);
-    const ref = React.useRef();
+    const ref: React.MutableRefObject<HTMLElement | null> = React.useRef(null);
 
     const callbackRef = React.useCallback(
-        node => {
+        (node: HTMLElement) => {
             if (ref.current) {
                 ref.current.removeEventListener('mouseover', handleMouseOver);
                 ref.current.removeEventListener('mouseout', handleMouseOut);
diff --git a/packages/components/src/hooks/use-interval.js b/packages/components/src/hooks/use-interval.ts
similarity index 73%
rename from packages/components/src/hooks/use-interval.js
rename to packages/components/src/hooks/use-interval.ts
index c8160a06532d..98f276e4e713 100644
--- a/packages/components/src/hooks/use-interval.js
+++ b/packages/components/src/hooks/use-interval.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 
-export const useInterval = (callback, delay) => {
-    const savedCallback = React.useRef();
+export const useInterval = (callback: () => void, delay: number) => {
+    const savedCallback: React.MutableRefObject<any> = React.useRef();
     React.useEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
diff --git a/packages/components/src/hooks/use-on-scroll.js b/packages/components/src/hooks/use-on-scroll.ts
similarity index 71%
rename from packages/components/src/hooks/use-on-scroll.js
rename to packages/components/src/hooks/use-on-scroll.ts
index bcb254930bf5..556d6da10f1b 100644
--- a/packages/components/src/hooks/use-on-scroll.js
+++ b/packages/components/src/hooks/use-on-scroll.ts
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 
-export const useOnScroll = (ref, callback) => {
+export const useOnScroll = (ref: NonNullable<RefObject<HTMLElement>>, callback: () => any) => {
     // Allow consumer to prematurely dispose this scroll listener.
-    const remover = React.useRef(null);
+    const remover: React.MutableRefObject<any> = React.useRef(null);
     const has_removed = React.useRef(false);
 
     const diposeListener = () => {
@@ -19,7 +19,7 @@ export const useOnScroll = (ref, callback) => {
             ref.current.addEventListener('scroll', callback);
 
             remover.current = () => {
-                ref.current.removeEventListener('scroll', callback);
+                ref.current!.removeEventListener('scroll', callback);
             };
         }
 
diff --git a/packages/components/src/hooks/use-onclickoutside.js b/packages/components/src/hooks/use-onclickoutside.js
deleted file mode 100644
index 94d732e27d74..000000000000
--- a/packages/components/src/hooks/use-onclickoutside.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-export const useOnClickOutside = (ref, handler, validationFn) => {
-    React.useEffect(() => {
-        const listener = event => {
-            const path = event.path ?? event.composedPath?.();
-
-            // When component is isolated (e.g, iframe, shadow DOM) event.target refers to whole container not the component. path[0] is the node that the event originated from, it does not need to walk the array
-            if (ref && ref.current && !ref.current.contains(event.target) && !ref.current.contains(path && path[0])) {
-                if (validationFn && !validationFn(event)) return;
-                handler(event);
-            }
-        };
-
-        document.addEventListener('mousedown', listener);
-
-        return () => {
-            document.removeEventListener('mousedown', listener);
-        };
-    }, [ref, handler, validationFn]);
-};
diff --git a/packages/components/src/hooks/use-onclickoutside.ts b/packages/components/src/hooks/use-onclickoutside.ts
new file mode 100644
index 000000000000..bf3756b14469
--- /dev/null
+++ b/packages/components/src/hooks/use-onclickoutside.ts
@@ -0,0 +1,30 @@
+import React, { RefObject } from 'react';
+
+export const useOnClickOutside = (
+    ref: RefObject<HTMLElement>,
+    handler: (event: any) => void,
+    validationFn: (event: any) => any
+) => {
+    React.useEffect(() => {
+        const listener = (event: MouseEvent) => {
+            const path = event.composedPath?.()[0] ?? (event as any).path; //event.path is non-standard and will be deprecated
+
+            // When component is isolated (e.g, iframe, shadow DOM) event.target refers to whole container not the component. path[0] is the node that the event originated from, it does not need to walk the array
+            if (
+                ref &&
+                ref.current &&
+                !ref.current.contains(event.target as HTMLElement) &&
+                !ref.current.contains(path as HTMLElement)
+            ) {
+                if (validationFn && !validationFn(event)) return;
+                handler(event);
+            }
+        };
+
+        document.addEventListener('mousedown', listener);
+
+        return () => {
+            document.removeEventListener('mousedown', listener);
+        };
+    }, [ref, handler, validationFn]);
+};
diff --git a/packages/components/src/hooks/use-onlongpress.js b/packages/components/src/hooks/use-onlongpress.ts
similarity index 80%
rename from packages/components/src/hooks/use-onlongpress.js
rename to packages/components/src/hooks/use-onlongpress.ts
index 6ebd213a2bb0..ab92b7edf64a 100644
--- a/packages/components/src/hooks/use-onlongpress.js
+++ b/packages/components/src/hooks/use-onlongpress.ts
@@ -1,20 +1,20 @@
 import React from 'react';
 
 export const useLongPress = (
-    callback = () => {
+    callback: () => void = () => {
         /** empty function */
     },
     ms = 300
 ) => {
     const [startLongPress, setStartLongPress] = React.useState(false);
 
-    const preventDefaults = e => {
+    const preventDefaults = (e: Event) => {
         e.preventDefault();
         e.stopPropagation();
     };
 
     React.useEffect(() => {
-        let timer;
+        let timer: ReturnType<typeof setTimeout> | undefined;
         if (startLongPress) {
             timer = setTimeout(callback, ms);
         } else if (timer) {
@@ -28,13 +28,13 @@ export const useLongPress = (
     }, [startLongPress]);
 
     return {
-        onMouseDown: e => {
+        onMouseDown: (e: MouseEvent) => {
             preventDefaults(e);
             setStartLongPress(true);
         },
         onMouseUp: () => setStartLongPress(false),
         onMouseLeave: () => setStartLongPress(false),
-        onTouchStart: e => {
+        onTouchStart: (e: TouchEvent) => {
             preventDefaults(e);
             setStartLongPress(true);
         },
diff --git a/packages/components/src/hooks/use-prevent-ios-zoom.js b/packages/components/src/hooks/use-prevent-ios-zoom.ts
similarity index 90%
rename from packages/components/src/hooks/use-prevent-ios-zoom.js
rename to packages/components/src/hooks/use-prevent-ios-zoom.ts
index 5348424e0767..4526ed880252 100644
--- a/packages/components/src/hooks/use-prevent-ios-zoom.js
+++ b/packages/components/src/hooks/use-prevent-ios-zoom.ts
@@ -3,7 +3,7 @@ import React from 'react';
 export const usePreventIOSZoom = () => {
     React.useEffect(() => {
         // Fix to prevent iOS from zooming in erratically on quick taps
-        const preventIOSZoom = event => {
+        const preventIOSZoom = (event: TouchEvent) => {
             if (event.touches.length > 1) {
                 event.preventDefault();
                 event.stopPropagation();
diff --git a/packages/components/src/hooks/use-previous.js b/packages/components/src/hooks/use-previous.ts
similarity index 78%
rename from packages/components/src/hooks/use-previous.js
rename to packages/components/src/hooks/use-previous.ts
index 3ef31e621c38..391d110a4eef 100644
--- a/packages/components/src/hooks/use-previous.js
+++ b/packages/components/src/hooks/use-previous.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const usePrevious = value => {
+export const usePrevious = (value: any) => {
     const ref = React.useRef();
     React.useEffect(() => {
         ref.current = value;
diff --git a/packages/components/src/hooks/use-safe-state.js b/packages/components/src/hooks/use-safe-state.ts
similarity index 56%
rename from packages/components/src/hooks/use-safe-state.js
rename to packages/components/src/hooks/use-safe-state.ts
index 8947dcd1a95e..d96cb5af0db4 100644
--- a/packages/components/src/hooks/use-safe-state.js
+++ b/packages/components/src/hooks/use-safe-state.ts
@@ -1,23 +1,29 @@
 import * as React from 'react';
 
-export const useSafeState = (initial_state, optIsMountedFunc = null) => {
+type TUseSafeStateProps<T> = {
+    initial_state: T;
+};
+
+export const useSafeState = <T>({ initial_state }: TUseSafeStateProps<T>, optIsMountedFunc: () => void) => {
     const [state, setState] = React.useState(initial_state);
     const is_mounted = React.useRef(false);
 
     React.useLayoutEffect(() => {
         is_mounted.current = true;
-        return () => (is_mounted.current = false);
+        return () => {
+            is_mounted.current = false;
+        };
     }, []);
 
     const isMounted = () => {
-        if (typeof optIsMountedFunc === 'function') {
+        if (optIsMountedFunc && typeof optIsMountedFunc === 'function') {
             return optIsMountedFunc();
         }
 
         return is_mounted.current === true;
     };
 
-    const wrappedSetState = value => {
+    const wrappedSetState = (value: any) => {
         if (isMounted()) {
             setState(value);
         }
diff --git a/packages/components/src/hooks/use-state-callback.js b/packages/components/src/hooks/use-state-callback.ts
similarity index 63%
rename from packages/components/src/hooks/use-state-callback.js
rename to packages/components/src/hooks/use-state-callback.ts
index cafbbb063038..c1c4a4dd278d 100644
--- a/packages/components/src/hooks/use-state-callback.js
+++ b/packages/components/src/hooks/use-state-callback.ts
@@ -1,11 +1,15 @@
 import React from 'react';
 
+type TUseStateCallbackProps<T> = {
+    initial_state: T;
+};
+
 // this hook mimics this.setState({ state: value, ... }, () => callbackFunc());
-export const useStateCallback = initial_state => {
+export const useStateCallback = <T>({ initial_state }: TUseStateCallbackProps<T>) => {
     const [state, setState] = React.useState(initial_state);
-    const callbackRef = React.useRef(null); // a mutable ref to store existing callback
+    const callbackRef: React.MutableRefObject<any> = React.useRef(null); // a mutable ref to store existing callback
 
-    const setStateCallback = React.useCallback((current_state, cb) => {
+    const setStateCallback = React.useCallback((current_state: any, cb: (param: any) => void) => {
         callbackRef.current = cb; // store the passed callback to the ref
         setState(current_state);
     }, []);

From fcf6d252d16db441b41b43f2fa1ef5602743db04 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 7 Oct 2022 11:17:31 +0400
Subject: [PATCH 2/7] fix: :recycle: fixed type

---
 packages/components/src/hooks/use-on-scroll.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/hooks/use-on-scroll.ts b/packages/components/src/hooks/use-on-scroll.ts
index 556d6da10f1b..2df0bd414498 100644
--- a/packages/components/src/hooks/use-on-scroll.ts
+++ b/packages/components/src/hooks/use-on-scroll.ts
@@ -1,6 +1,6 @@
 import React, { RefObject } from 'react';
 
-export const useOnScroll = (ref: NonNullable<RefObject<HTMLElement>>, callback: () => any) => {
+export const useOnScroll = (ref: RefObject<HTMLElement>, callback: () => any) => {
     // Allow consumer to prematurely dispose this scroll listener.
     const remover: React.MutableRefObject<any> = React.useRef(null);
     const has_removed = React.useRef(false);

From 048ac8c53a2d5681e5098abb36487ee27969e49f Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 7 Oct 2022 11:36:37 +0400
Subject: [PATCH 3/7] fix: :recycle: migrated index file\

---
 packages/components/src/hooks/{index.js => index.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/components/src/hooks/{index.js => index.ts} (100%)

diff --git a/packages/components/src/hooks/index.js b/packages/components/src/hooks/index.ts
similarity index 100%
rename from packages/components/src/hooks/index.js
rename to packages/components/src/hooks/index.ts

From e5259a83c0ead024e17537e481a2c2a5d6759edb Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 7 Oct 2022 12:24:48 +0400
Subject: [PATCH 4/7] fix: :bug: incorrect typing of params

---
 packages/components/src/hooks/use-safe-state.ts     | 6 +-----
 packages/components/src/hooks/use-state-callback.ts | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/hooks/use-safe-state.ts b/packages/components/src/hooks/use-safe-state.ts
index d96cb5af0db4..48c3417289a5 100644
--- a/packages/components/src/hooks/use-safe-state.ts
+++ b/packages/components/src/hooks/use-safe-state.ts
@@ -1,10 +1,6 @@
 import * as React from 'react';
 
-type TUseSafeStateProps<T> = {
-    initial_state: T;
-};
-
-export const useSafeState = <T>({ initial_state }: TUseSafeStateProps<T>, optIsMountedFunc: () => void) => {
+export const useSafeState = <T>(initial_state: T, optIsMountedFunc: () => void) => {
     const [state, setState] = React.useState(initial_state);
     const is_mounted = React.useRef(false);
 
diff --git a/packages/components/src/hooks/use-state-callback.ts b/packages/components/src/hooks/use-state-callback.ts
index c1c4a4dd278d..aa8ae2b0307a 100644
--- a/packages/components/src/hooks/use-state-callback.ts
+++ b/packages/components/src/hooks/use-state-callback.ts
@@ -1,11 +1,7 @@
 import React from 'react';
 
-type TUseStateCallbackProps<T> = {
-    initial_state: T;
-};
-
 // this hook mimics this.setState({ state: value, ... }, () => callbackFunc());
-export const useStateCallback = <T>({ initial_state }: TUseStateCallbackProps<T>) => {
+export const useStateCallback = <T>(initial_state: T) => {
     const [state, setState] = React.useState(initial_state);
     const callbackRef: React.MutableRefObject<any> = React.useRef(null); // a mutable ref to store existing callback
 

From 62c3ab0547ef37abc1ef9688512dcf367c74d2d8 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 7 Oct 2022 14:45:48 +0400
Subject: [PATCH 5/7] refactor: :recycle: incorporated review comments

---
 packages/components/src/hooks/use-hover.ts          | 6 +++---
 packages/components/src/hooks/use-interval.ts       | 4 ++--
 packages/components/src/hooks/use-on-scroll.ts      | 4 ++--
 packages/components/src/hooks/use-previous.ts       | 4 ++--
 packages/components/src/hooks/use-safe-state.ts     | 2 +-
 packages/components/src/hooks/use-state-callback.ts | 6 +++---
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/hooks/use-hover.ts b/packages/components/src/hooks/use-hover.ts
index a97e53223585..6a4318755160 100644
--- a/packages/components/src/hooks/use-hover.ts
+++ b/packages/components/src/hooks/use-hover.ts
@@ -1,9 +1,9 @@
 import React, { RefObject } from 'react';
 
-export const useHover = (refSetter: RefObject<HTMLElement>, should_prevent_bubbling: boolean) => {
+export const useHover = (refSetter: RefObject<HTMLElement> | null, should_prevent_bubbling: boolean) => {
     const [value, setValue] = React.useState(false);
     const default_ref = React.useRef(null);
-    const ref = refSetter ?? default_ref;
+    const ref = refSetter || default_ref;
 
     const handleHoverBegin = () => setValue(true);
     const handleHoverFinish = () => setValue(false);
@@ -40,7 +40,7 @@ export const useHoverCallback = () => {
 
     const handleMouseOver = React.useCallback(() => setValue(true), []);
     const handleMouseOut = React.useCallback(() => setValue(false), []);
-    const ref: React.MutableRefObject<HTMLElement | null> = React.useRef(null);
+    const ref = React.useRef<HTMLElement | null>(null);
 
     const callbackRef = React.useCallback(
         (node: HTMLElement) => {
diff --git a/packages/components/src/hooks/use-interval.ts b/packages/components/src/hooks/use-interval.ts
index 98f276e4e713..ece6c2c11fee 100644
--- a/packages/components/src/hooks/use-interval.ts
+++ b/packages/components/src/hooks/use-interval.ts
@@ -1,14 +1,14 @@
 import React from 'react';
 
 export const useInterval = (callback: () => void, delay: number) => {
-    const savedCallback: React.MutableRefObject<any> = React.useRef();
+    const savedCallback = React.useRef<() => void | undefined>();
     React.useEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
 
     React.useEffect(() => {
         function tick() {
-            savedCallback.current();
+            savedCallback.current?.();
         }
         if (delay !== null) {
             const id = setInterval(tick, delay);
diff --git a/packages/components/src/hooks/use-on-scroll.ts b/packages/components/src/hooks/use-on-scroll.ts
index 2df0bd414498..33ec728aaa94 100644
--- a/packages/components/src/hooks/use-on-scroll.ts
+++ b/packages/components/src/hooks/use-on-scroll.ts
@@ -1,8 +1,8 @@
 import React, { RefObject } from 'react';
 
-export const useOnScroll = (ref: RefObject<HTMLElement>, callback: () => any) => {
+export const useOnScroll = (ref: RefObject<HTMLElement>, callback: EventListener) => {
     // Allow consumer to prematurely dispose this scroll listener.
-    const remover: React.MutableRefObject<any> = React.useRef(null);
+    const remover = React.useRef<(() => void) | null>(null);
     const has_removed = React.useRef(false);
 
     const diposeListener = () => {
diff --git a/packages/components/src/hooks/use-previous.ts b/packages/components/src/hooks/use-previous.ts
index 391d110a4eef..e8d4d168015e 100644
--- a/packages/components/src/hooks/use-previous.ts
+++ b/packages/components/src/hooks/use-previous.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 
-export const usePrevious = (value: any) => {
-    const ref = React.useRef();
+export const usePrevious = <T>(value: T) => {
+    const ref = React.useRef<T | undefined>();
     React.useEffect(() => {
         ref.current = value;
     }, [value]);
diff --git a/packages/components/src/hooks/use-safe-state.ts b/packages/components/src/hooks/use-safe-state.ts
index 48c3417289a5..670fd5242e95 100644
--- a/packages/components/src/hooks/use-safe-state.ts
+++ b/packages/components/src/hooks/use-safe-state.ts
@@ -19,7 +19,7 @@ export const useSafeState = <T>(initial_state: T, optIsMountedFunc: () => void)
         return is_mounted.current === true;
     };
 
-    const wrappedSetState = (value: any) => {
+    const wrappedSetState = (value: T) => {
         if (isMounted()) {
             setState(value);
         }
diff --git a/packages/components/src/hooks/use-state-callback.ts b/packages/components/src/hooks/use-state-callback.ts
index aa8ae2b0307a..b6c8a640b107 100644
--- a/packages/components/src/hooks/use-state-callback.ts
+++ b/packages/components/src/hooks/use-state-callback.ts
@@ -2,10 +2,10 @@ import React from 'react';
 
 // this hook mimics this.setState({ state: value, ... }, () => callbackFunc());
 export const useStateCallback = <T>(initial_state: T) => {
-    const [state, setState] = React.useState(initial_state);
-    const callbackRef: React.MutableRefObject<any> = React.useRef(null); // a mutable ref to store existing callback
+    const [state, setState] = React.useState<T>(initial_state);
+    const callbackRef = React.useRef<((param: T) => void) | null>(null); // a mutable ref to store existing callback
 
-    const setStateCallback = React.useCallback((current_state: any, cb: (param: any) => void) => {
+    const setStateCallback = React.useCallback((current_state: T, cb: (param: T) => void) => {
         callbackRef.current = cb; // store the passed callback to the ref
         setState(current_state);
     }, []);

From 96ca095ee53b516f2a267438cf3c1d721db9027d Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Mon, 10 Oct 2022 08:47:58 +0400
Subject: [PATCH 6/7] refactor: :recycle: incorporated review comments

---
 packages/components/src/hooks/use-deep-effect.ts    | 4 ++--
 packages/components/src/hooks/use-onclickoutside.ts | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/hooks/use-deep-effect.ts b/packages/components/src/hooks/use-deep-effect.ts
index 40f3caff8cea..a808d6cfc169 100644
--- a/packages/components/src/hooks/use-deep-effect.ts
+++ b/packages/components/src/hooks/use-deep-effect.ts
@@ -3,8 +3,8 @@ import { isDeepEqual } from '@deriv/shared';
 
 // Note: Do not use this effect on huge objects or objects with
 // circular references as performance may suffer.
-export const useDeepEffect = (callback: () => void, dependencies: any) => {
-    const prev_dependencies = React.useRef(null);
+export const useDeepEffect = (callback: () => void, dependencies: unknown[]) => {
+    const prev_dependencies = React.useRef<unknown[] | null>(null);
 
     if (!isDeepEqual(prev_dependencies, dependencies)) {
         prev_dependencies.current = dependencies;
diff --git a/packages/components/src/hooks/use-onclickoutside.ts b/packages/components/src/hooks/use-onclickoutside.ts
index bf3756b14469..ba95fac82b8a 100644
--- a/packages/components/src/hooks/use-onclickoutside.ts
+++ b/packages/components/src/hooks/use-onclickoutside.ts
@@ -2,13 +2,12 @@ import React, { RefObject } from 'react';
 
 export const useOnClickOutside = (
     ref: RefObject<HTMLElement>,
-    handler: (event: any) => void,
-    validationFn: (event: any) => any
+    handler: (event: MouseEvent) => void,
+    validationFn: (event: MouseEvent) => boolean
 ) => {
     React.useEffect(() => {
         const listener = (event: MouseEvent) => {
-            const path = event.composedPath?.()[0] ?? (event as any).path; //event.path is non-standard and will be deprecated
-
+            const path = event.composedPath?.()[0] ?? (event as MouseEvent & { path: HTMLElement }).path; //event.path is non-standard and will be deprecated
             // When component is isolated (e.g, iframe, shadow DOM) event.target refers to whole container not the component. path[0] is the node that the event originated from, it does not need to walk the array
             if (
                 ref &&

From c8cb08dd1de4363214621244420f2a240b52a9bd Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Mon, 10 Oct 2022 08:51:27 +0400
Subject: [PATCH 7/7] refactor: :art: added type for callback

---
 packages/components/src/hooks/use-constructor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/hooks/use-constructor.ts b/packages/components/src/hooks/use-constructor.ts
index 4118b0b689c3..a3738c19c003 100644
--- a/packages/components/src/hooks/use-constructor.ts
+++ b/packages/components/src/hooks/use-constructor.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const useConstructor = (callBack = () => undefined) => {
+export const useConstructor = (callBack: () => void = () => undefined) => {
     const is_called_ref = React.useRef(false);
     if (!is_called_ref.current) {
         callBack();