diff --git a/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/__tests__/my-profile-balance-modal.spec.tsx b/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/__tests__/my-profile-balance-modal.spec.tsx index 53ce90a30bb7..b1a46d79c0e1 100755 --- a/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/__tests__/my-profile-balance-modal.spec.tsx +++ b/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/__tests__/my-profile-balance-modal.spec.tsx @@ -29,7 +29,15 @@ describe('', () => { it('should render MyProfileBalanceModal', () => { render(); - expect(screen.getByText('Deriv P2P Balance')).toBeInTheDocument(); + expect(screen.getByText('Available Deriv P2P Balance')).toBeInTheDocument(); + expect( + screen.getByText('Your Deriv P2P balance only includes deposits that can’t be reversed.') + ).toBeInTheDocument(); + expect( + screen.getByText( + 'Deposits via cards and the following payment methods aren’t included: Maestro, Diners Club, ZingPay, Skrill, Neteller, Ozow, and UPI QR.' + ) + ).toBeInTheDocument(); }); it('should call hideModal when clicking on the OK button', () => { diff --git a/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.scss b/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.scss index 08cd21191441..3c098638f5f9 100755 --- a/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.scss +++ b/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.scss @@ -5,5 +5,9 @@ @include mobile { padding: 0 1.6rem; } + + &-text { + margin-bottom: 1.6rem; + } } } diff --git a/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.tsx b/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.tsx index eeca53d94813..754b0f42688a 100755 --- a/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.tsx +++ b/packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Modal } from '@deriv/components'; +import { Button, Modal, Text } from '@deriv/components'; import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; import { Localize, localize } from 'Components/i18next'; @@ -12,10 +12,15 @@ const MyProfileBalanceModal = () => { has_close_icon={false} is_open={is_modal_open} small - title={localize('Deriv P2P Balance')} + title={localize('Available Deriv P2P Balance')} > - + + + + + +