diff --git a/packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.js b/packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.js
deleted file mode 100644
index b09cae5445f6..000000000000
--- a/packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import PercentageSelector from '../percentage-selector';
-
-describe('<PercentageSelector />', () => {
-    const getCalculatedAmount = jest.fn();
-
-    it('should render the component', () => {
-        const { container } = render(<PercentageSelector getCalculatedAmount={getCalculatedAmount} />);
-
-        expect(container.firstChild).toHaveClass('percentage-selector');
-    });
-
-    it('should calculate the percentage amount on click of percentage block', () => {
-        const { container } = render(
-            <PercentageSelector amount={100} currency={'USD'} getCalculatedAmount={getCalculatedAmount} />
-        );
-
-        container.querySelectorAll('.percentage-selector-block').forEach(block => {
-            fireEvent.click(block);
-
-            const percentage = block.previousSibling.innerHTML === 'All' ? '100%' : block.previousSibling.innerHTML;
-            expect(screen.getByText(`${percentage} of available balance (100.00 USD)`)).toBeInTheDocument();
-        });
-    });
-
-    it('should reset the percentage block upon clicking twice', () => {
-        const { container } = render(
-            <PercentageSelector amount={100} currency={'USD'} getCalculatedAmount={getCalculatedAmount} />
-        );
-
-        container.querySelectorAll('.percentage-selector-block').forEach(block => {
-            fireEvent.click(block);
-            fireEvent.click(block);
-
-            let percentage =
-                block.previousSibling.innerHTML === 'All' ? 100 : parseInt(block.previousSibling.innerHTML);
-            percentage -= 25;
-            expect(screen.getByText(`${percentage}% of available balance (100.00 USD)`)).toBeInTheDocument();
-        });
-    });
-
-    it('should reset the percentage', () => {
-        render(
-            <PercentageSelector
-                amount={100}
-                currency={'USD'}
-                getCalculatedAmount={getCalculatedAmount}
-                should_percentage_reset
-            />
-        );
-
-        expect(screen.getByText('0% of available balance (100.00 USD)')).toBeInTheDocument();
-    });
-});
diff --git a/packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.tsx b/packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.tsx
new file mode 100644
index 000000000000..10f459cee8b1
--- /dev/null
+++ b/packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import PercentageSelector from '../percentage-selector';
+
+describe('<PercentageSelector />', () => {
+    const getCalculatedAmount = jest.fn();
+    const percentage_selector_props = {
+        amount: 100,
+        currency: 'USD',
+        from_account: '',
+        getCalculatedAmount,
+        percentage: 0,
+        should_percentage_reset: false,
+        to_account: '',
+    };
+
+    it('should render the component', () => {
+        render(<PercentageSelector {...percentage_selector_props} />);
+
+        expect(screen.getByTestId('dt_percentage_selector_id')).toBeInTheDocument();
+    });
+
+    it('should calculate the percentage amount on click of percentage block', () => {
+        render(<PercentageSelector {...percentage_selector_props} />);
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_1'));
+        expect(screen.getByText(`25% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_2'));
+        expect(screen.getByText(`50% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_3'));
+        expect(screen.getByText(`75% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_4'));
+        expect(screen.getByText(`100% of available balance (100.00 USD)`)).toBeInTheDocument();
+    });
+
+    it('should reset the percentage block upon clicking twice', () => {
+        render(<PercentageSelector {...percentage_selector_props} />);
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_1'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_1'));
+
+        expect(screen.getByText(`0% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_2'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_2'));
+
+        expect(screen.getByText(`25% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_3'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_3'));
+
+        expect(screen.getByText(`50% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_4'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_4'));
+
+        expect(screen.getByText(`75% of available balance (100.00 USD)`)).toBeInTheDocument();
+    });
+
+    it('should reset the percentage', () => {
+        render(<PercentageSelector {...percentage_selector_props} should_percentage_reset />);
+
+        expect(screen.getByText('0% of available balance (100.00 USD)')).toBeInTheDocument();
+    });
+});
diff --git a/packages/cashier/src/components/percentage-selector/index.js b/packages/cashier/src/components/percentage-selector/index.ts
similarity index 54%
rename from packages/cashier/src/components/percentage-selector/index.js
rename to packages/cashier/src/components/percentage-selector/index.ts
index 75dc31b20704..825d10c995e7 100644
--- a/packages/cashier/src/components/percentage-selector/index.js
+++ b/packages/cashier/src/components/percentage-selector/index.ts
@@ -1,4 +1,4 @@
-import PercentageSelector from './percentage-selector.jsx';
+import PercentageSelector from './percentage-selector';
 import './percentage-selector.scss';
 
 export default PercentageSelector;
diff --git a/packages/cashier/src/components/percentage-selector/percentage-selector.jsx b/packages/cashier/src/components/percentage-selector/percentage-selector.tsx
similarity index 54%
rename from packages/cashier/src/components/percentage-selector/percentage-selector.jsx
rename to packages/cashier/src/components/percentage-selector/percentage-selector.tsx
index 09841583dca0..5f8384bd310b 100644
--- a/packages/cashier/src/components/percentage-selector/percentage-selector.jsx
+++ b/packages/cashier/src/components/percentage-selector/percentage-selector.tsx
@@ -1,8 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Text } from '@deriv/components';
 import { formatMoney, getCurrencyDisplayCode, getDecimalPlaces } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
+import { TReactMouseEvent } from 'Types';
+
+type TPercentageSelectorProps = {
+    amount: number;
+    currency: string;
+    from_account: string;
+    getCalculatedAmount: (amount: string) => void;
+    percentage: number;
+    should_percentage_reset: boolean;
+    to_account: string;
+};
+
+type TCalculateAmountInputEvent = { target: { id: number } };
 
 const PercentageSelector = ({
     amount,
@@ -12,13 +24,15 @@ const PercentageSelector = ({
     percentage,
     should_percentage_reset,
     to_account,
-}) => {
-    const [selected_percentage, setSelectedPercentage] = React.useState('0');
+}: TPercentageSelectorProps) => {
+    const [selected_percentage, setSelectedPercentage] = React.useState<number | string>('0');
 
     React.useEffect(() => {
         if (should_percentage_reset) {
             for (let i = 1; i <= 4; i++) {
-                document.getElementById(i).style.backgroundColor = 'var(--general-section-1)';
+                const percentage_selector_block = document.getElementById(String(i));
+                if (percentage_selector_block)
+                    percentage_selector_block.style.backgroundColor = 'var(--general-section-1)';
             }
         }
     }, [should_percentage_reset]);
@@ -32,7 +46,7 @@ const PercentageSelector = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [from_account, to_account]);
 
-    const calculateAmount = (e, percent) => {
+    const calculateAmount = (e: TCalculateAmountInputEvent | TReactMouseEvent, percent: number) => {
         let new_percentage = percent;
         const is_percentage_selected = percent > 0 && percent <= selected_percentage;
         if (is_percentage_selected) new_percentage -= 25;
@@ -41,10 +55,16 @@ const PercentageSelector = ({
         getCalculatedAmount((amount * (new_percentage / 100)).toFixed(getDecimalPlaces(currency)));
 
         for (let i = 1; i <= 4; i++) {
-            if (i < e.target.id || (i === +e.target.id && !is_percentage_selected)) {
-                document.getElementById(i).style.backgroundColor = 'var(--status-success)';
-            } else {
-                document.getElementById(i).style.backgroundColor = 'var(--general-section-1)';
+            const percentage_selector_block = document.getElementById(String(i));
+            if (percentage_selector_block) {
+                if (
+                    i < (e as TCalculateAmountInputEvent).target.id ||
+                    (i === +(e as TCalculateAmountInputEvent).target.id && !is_percentage_selected)
+                ) {
+                    percentage_selector_block.style.backgroundColor = 'var(--status-success)';
+                } else {
+                    percentage_selector_block.style.backgroundColor = 'var(--general-section-1)';
+                }
             }
         }
     };
@@ -52,30 +72,50 @@ const PercentageSelector = ({
     const currency__display_code = getCurrencyDisplayCode(currency);
     return (
         <React.Fragment>
-            <div className='percentage-selector'>
+            <div className='percentage-selector' data-testid='dt_percentage_selector_id'>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         {'25%'}
                     </Text>
-                    <div id='1' className='percentage-selector-block' onClick={e => calculateAmount(e, 25)} />
+                    <div
+                        id='1'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 25)}
+                        data-testid='dt_percentage_selector_block_id_1'
+                    />
                 </div>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         {'50%'}
                     </Text>
-                    <div id='2' className='percentage-selector-block' onClick={e => calculateAmount(e, 50)} />
+                    <div
+                        id='2'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 50)}
+                        data-testid='dt_percentage_selector_block_id_2'
+                    />
                 </div>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         {'75%'}
                     </Text>
-                    <div id='3' className='percentage-selector-block' onClick={e => calculateAmount(e, 75)} />
+                    <div
+                        id='3'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 75)}
+                        data-testid='dt_percentage_selector_block_id_3'
+                    />
                 </div>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         <Localize i18n_default_text='All' />
                     </Text>
-                    <div id='4' className='percentage-selector-block' onClick={e => calculateAmount(e, 100)} />
+                    <div
+                        id='4'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 100)}
+                        data-testid='dt_percentage_selector_block_id_4'
+                    />
                 </div>
             </div>
             <Text color='less-prominent' size='xxs' line_height='l' className='percentage-selector__text'>
@@ -88,12 +128,4 @@ const PercentageSelector = ({
     );
 };
 
-PercentageSelector.propTypes = {
-    amount: PropTypes.number,
-    currency: PropTypes.string,
-    getCalculatedAmount: PropTypes.func,
-    percentage: PropTypes.number,
-    should_percentage_reset: PropTypes.bool,
-};
-
 export default PercentageSelector;
diff --git a/packages/cashier/src/types/props.types.ts b/packages/cashier/src/types/props.types.ts
index d99e2b0b6fc5..f2ec1719f15e 100644
--- a/packages/cashier/src/types/props.types.ts
+++ b/packages/cashier/src/types/props.types.ts
@@ -1,3 +1,5 @@
 export type TReactChangeEvent = React.ChangeEvent<HTMLInputElement>;
 
 export type TReactChildren = React.ReactNode;
+
+export type TReactMouseEvent = React.MouseEvent<HTMLElement>;