fix: make it single responsibility component

packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts

@@ -0,0 +1,4 @@
+import PayoutInfoModal from './payout-info-modal';
+import './payout-info-modal.scss';
+
+export default PayoutInfoModal;

packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx

@@ -0,0 +1,33 @@
+import { CaptionText, Modal } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv/translations';
+import React from 'react';
+
+const PayoutInfoModal = () => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return (
+        <>
+            <button onClick={() => setIsVisible(!isVisible)}>
+                <CaptionText size='sm' bold underlined className='payout-info-text'>
+                    <Localize i18n_default_text='How do I earn a payout?' />
+                </CaptionText>
+            </button>
+            <Modal
+                isOpened={isVisible}
+                toggleModal={setIsVisible}
+                primaryButtonLabel={<Localize i18n_default_text='Got it' />}
+                shouldCloseOnPrimaryButtonClick
+                isMobile
+                showHandleBar
+            >
+                <Modal.Header title={<Localize i18n_default_text='How do I earn a payout?' />} />
+                <Modal.Body>
+                    {
+                        <Localize i18n_default_text='After the entry spot tick, your stake will grow continuously by 1% for every tick that the spot price remains within the ± 0.06444% from the previous spot price.' />
+                    }
+                </Modal.Body>
+            </Modal>
+        </>
+    );
+};
+
+export default PayoutInfoModal;

packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Text } from '@deriv-com/quill-ui';
-import InfoSheet from 'AppV2/Components/InfoModal';
-import { localize } from '@deriv/translations';
-import { LabelPairedCircleInfoSmRegularIcon } from '@deriv/quill-icons';
+import PayoutInfoModal from 'AppV2/Components/PayoutInfoModal';
 import ChartPlaceholder from '../Chart';
 
 const ContractDetails = () => {
@@ -11,23 +9,11 @@ const ContractDetails = () => {
             <div className='placeholder'>
                 <Text size='sm'>Contract Details</Text>
             </div>
-            <InfoSheet
-                header_content={localize('How do I earn a payout?')}
-                body_content={localize(
-                    'After the entry spot tick, your stake will grow continuously by 1% for every tick that the spot price remains within the ± 0.06444% from the previous spot price.'
-                )}
-            />
+            <PayoutInfoModal />
             <div className='placeholder'>
                 <Text size='sm'>Contract card</Text>
             </div>
             Take Profit
-            <InfoSheet
-                icon={<LabelPairedCircleInfoSmRegularIcon />}
-                header_content={localize('Take profit')}
-                body_content={localize(
-                    'When your profit reaches or exceeds the set amount, your trade will be closed automatically.'
-                )}
-            />
             <div className='placeholder'>
                 <ChartPlaceholder />
             </div>