From 6d23a31b79a6cdc72b8bd7d6e6101b0313b9fe14 Mon Sep 17 00:00:00 2001
From: ameerul <ameerul@deriv.com>
Date: Tue, 10 May 2022 15:00:25 +0800
Subject: [PATCH 01/11] changed the margin-top for mobile view for buy-sell

---
 packages/p2p/src/components/advertiser-page/advertiser-page.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.scss b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
index 89cfa9036c43..7cf1a15dca2f 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.scss
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
@@ -224,7 +224,6 @@
             @include mobile {
                 display: flex;
                 flex-flow: column;
-                margin-top: 1rem;
                 width: 100vw;
             }
 

From b2366f64b86ee89b626803c92ebbbca001b01459 Mon Sep 17 00:00:00 2001
From: ameerul <ameerul@deriv.com>
Date: Wed, 18 May 2022 10:15:06 +0800
Subject: [PATCH 02/11] merging upstream master

---
 packages/bot-web-ui/src/app/app.jsx           | 11 ++++
 .../network-toast-popup.jsx                   | 55 +++++++++++++++++++
 .../advertiser-page/advertiser-page.scss      |  1 +
 3 files changed, 67 insertions(+)
 create mode 100644 packages/bot-web-ui/src/components/network-toast-popup/network-toast-popup.jsx

diff --git a/packages/bot-web-ui/src/app/app.jsx b/packages/bot-web-ui/src/app/app.jsx
index e7cb64512773..6c36e1744cd2 100644
--- a/packages/bot-web-ui/src/app/app.jsx
+++ b/packages/bot-web-ui/src/app/app.jsx
@@ -47,6 +47,17 @@ const App = ({ passthrough }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [onMount, onUnmount]);
 
+    React.useEffect(() => {
+        const onDisconnectFromNetwork = () => {
+            setIsLoading(false);
+        };
+
+        window.addEventListener('offline', onDisconnectFromNetwork);
+        return () => {
+            window.removeEventListener('offline', onDisconnectFromNetwork);
+        };
+    }, []);
+
     return is_loading ? (
         <Loading />
     ) : (
diff --git a/packages/bot-web-ui/src/components/network-toast-popup/network-toast-popup.jsx b/packages/bot-web-ui/src/components/network-toast-popup/network-toast-popup.jsx
new file mode 100644
index 000000000000..be94bf2291f5
--- /dev/null
+++ b/packages/bot-web-ui/src/components/network-toast-popup/network-toast-popup.jsx
@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { MobileWrapper, Toast } from '@deriv/components';
+import { connect } from 'Stores/connect';
+
+// TODO: Need to sanitize,
+// Same sort of component is being used inside DTrader,
+// In Future we might move the `NetworkStatusToastError` to the core packages for resuability.
+
+/**
+ * Network status Toast components
+ */
+const NetworkStatusToastError = ({ status, portal_id, message }) => {
+    const [is_open, setIsOpen] = React.useState(false);
+
+    if (!document.getElementById(portal_id) || !message) return null;
+
+    if (!is_open && status !== 'online') {
+        setIsOpen(true); // open if status === 'blinker' or 'offline'
+    } else if (is_open && status === 'online') {
+        setTimeout(() => {
+            setIsOpen(false);
+        }, 1500);
+    }
+
+    return ReactDOM.createPortal(
+        <MobileWrapper>
+            <Toast
+                className={classNames({
+                    'dc-toast--blinker': status === 'blinker',
+                })}
+                is_open={is_open}
+                timeout={0}
+                type='error'
+            >
+                {message}
+            </Toast>
+        </MobileWrapper>,
+        document.getElementById(portal_id)
+    );
+};
+
+NetworkStatusToastError.propTypes = {
+    portal_id: PropTypes.string,
+    status: PropTypes.string,
+    message: PropTypes.string,
+};
+
+export default connect(({ common }) => ({
+    network_status: common.network_status,
+}))(({ network_status }) => (
+    <NetworkStatusToastError portal_id='popup_root' message={network_status.tooltip} status={network_status.class} />
+));
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.scss b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
index 7cf1a15dca2f..89cfa9036c43 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.scss
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
@@ -224,6 +224,7 @@
             @include mobile {
                 display: flex;
                 flex-flow: column;
+                margin-top: 1rem;
                 width: 100vw;
             }
 

From bbb6bfe7d4077086f72b12936b5af583b68d96e6 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Fri, 5 Aug 2022 16:46:55 +0800
Subject: [PATCH 03/11] changed the payment methods list modal and wrapped the
 text for long bank names

---
 .../payment-methods-list.jsx                   | 18 ++++++++++--------
 .../payment-methods-list.scss                  |  5 +++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
index e32b8ea87df2..ec5829e2d8fa 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
+++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
@@ -145,18 +145,20 @@ const PaymentMethodsList = () => {
                 is_open={my_profile_store.is_confirm_delete_modal_open}
                 small
                 has_close_icon={false}
-                title={localize('Delete {{payment_method_name}}?', {
-                    payment_method_name:
-                        my_profile_store?.payment_method_to_delete?.fields?.bank_name?.value ||
-                        my_profile_store?.payment_method_to_delete?.fields?.name?.value ||
-                        my_profile_store?.payment_method_to_delete?.fields?.account?.value,
-                })}
                 onMount={() => general_store.setIsModalOpen(true)}
                 onUnmount={() => general_store.setIsModalOpen(false)}
             >
-                <Modal.Body>
+                <Modal.Body className='payment-methods-list__modal-wrapper'>
                     <Text as='p' size='xs' color='prominent'>
-                        <Localize i18n_default_text='Are you sure you want to remove this payment method?' />
+                        <Localize
+                            i18n_default_text='Delete {{payment_method_name}}?'
+                            values={{
+                                payment_method_name:
+                                    my_profile_store?.payment_method_to_delete?.fields?.bank_name?.value ||
+                                    my_profile_store?.payment_method_to_delete?.fields?.name?.value ||
+                                    my_profile_store?.payment_method_to_delete?.fields?.account?.value,
+                            }}
+                        />
                     </Text>
                 </Modal.Body>
                 <Modal.Footer>
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
index 0c5f213260e4..cd7a6c0b5b83 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
+++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
@@ -14,6 +14,11 @@
             bottom: 0;
             position: fixed;
         }
+
+        &-wrapper {
+            display: flex;
+            word-break: break-all;
+        }
     }
     &__button {
         margin: 0 0 2.4rem;

From 11f316e0cffc88d21f9f78119c43d46a84261466 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Wed, 10 Aug 2022 10:32:06 +0800
Subject: [PATCH 04/11] reverted changes

---
 .../payment-methods-list.jsx                  | 19 +++++++++----------
 .../payment-methods-list.scss                 |  8 ++------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
index ec5829e2d8fa..c5bdce2e83b7 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
+++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
@@ -85,6 +85,7 @@ const PaymentMethodsList = () => {
                 <MobileFullPageModal
                     body_className='payment-methods-list__modal'
                     height_offset='80px'
+                    is_flex
                     is_modal_open
                     page_header_text={localize('Payment methods')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
@@ -145,20 +146,18 @@ const PaymentMethodsList = () => {
                 is_open={my_profile_store.is_confirm_delete_modal_open}
                 small
                 has_close_icon={false}
+                title={localize('Delete {{payment_method_name}}?', {
+                    payment_method_name:
+                        my_profile_store?.payment_method_to_delete?.fields?.bank_name?.value ||
+                        my_profile_store?.payment_method_to_delete?.fields?.name?.value ||
+                        my_profile_store?.payment_method_to_delete?.fields?.account?.value,
+                })}
                 onMount={() => general_store.setIsModalOpen(true)}
                 onUnmount={() => general_store.setIsModalOpen(false)}
             >
-                <Modal.Body className='payment-methods-list__modal-wrapper'>
+                <Modal.Body>
                     <Text as='p' size='xs' color='prominent'>
-                        <Localize
-                            i18n_default_text='Delete {{payment_method_name}}?'
-                            values={{
-                                payment_method_name:
-                                    my_profile_store?.payment_method_to_delete?.fields?.bank_name?.value ||
-                                    my_profile_store?.payment_method_to_delete?.fields?.name?.value ||
-                                    my_profile_store?.payment_method_to_delete?.fields?.account?.value,
-                            }}
-                        />
+                        <Localize i18n_default_text='Are you sure you want to remove this payment method?' />
                     </Text>
                 </Modal.Body>
                 <Modal.Footer>
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
index cd7a6c0b5b83..5aaa89ac6a9d 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
+++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
@@ -12,12 +12,8 @@
 
         &--footer {
             bottom: 0;
-            position: fixed;
-        }
-
-        &-wrapper {
-            display: flex;
-            word-break: break-all;
+            width: 100%;
+            background-color: var(--general-main-1);
         }
     }
     &__button {

From 2e52c28dc2d962b3d9e1e7ea8ff86f32e76662b0 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 25 Aug 2022 12:28:01 +0800
Subject: [PATCH 05/11] changed floating rate field and ad type styling

---
 .../p2p/src/components/floating-rate/floating-rate.jsx |  6 ++----
 .../src/components/floating-rate/floating-rate.scss    |  2 +-
 packages/p2p/src/components/my-ads/ad-type.jsx         |  4 ++--
 packages/p2p/src/components/my-ads/ad-type.scss        | 10 +++++++---
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/p2p/src/components/floating-rate/floating-rate.jsx b/packages/p2p/src/components/floating-rate/floating-rate.jsx
index 2888ddd6635b..461fbd0ad67d 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.jsx
+++ b/packages/p2p/src/components/floating-rate/floating-rate.jsx
@@ -58,7 +58,6 @@ const FloatingRate = ({
                     current_focus={general_store.current_focus}
                     decimal_point_change={2}
                     id='floating_rate_input'
-                    inline_prefix='%'
                     is_autocomplete_disabled
                     is_float
                     is_incrementable
@@ -70,7 +69,7 @@ const FloatingRate = ({
                     setCurrentFocus={general_store.setCurrentFocus}
                     required={required}
                     type={isMobile() && os !== 'iOS' ? 'tel' : 'number'}
-                    value={value}
+                    value={`${value}%`}
                     data_testid={data_testid}
                 />
                 <div className='floating-rate__mkt-rate'>
@@ -93,8 +92,7 @@ const FloatingRate = ({
                         className='floating-rate__mkt-rate--msg'
                     >
                         1 {fiat_currency} ={' '}
-                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}{' '}
-                        {local_currency}
+                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}
                     </Text>
                 </div>
             </section>
diff --git a/packages/p2p/src/components/floating-rate/floating-rate.scss b/packages/p2p/src/components/floating-rate/floating-rate.scss
index 97fa6ffeb1de..b639538aa4a2 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.scss
+++ b/packages/p2p/src/components/floating-rate/floating-rate.scss
@@ -139,7 +139,7 @@
         }
 
         .input {
-            text-align: right;
+            text-align: center;
             border: unset;
             background-color: unset;
             padding: unset;
diff --git a/packages/p2p/src/components/my-ads/ad-type.jsx b/packages/p2p/src/components/my-ads/ad-type.jsx
index 64ad1a6c9a06..419c4c27d427 100644
--- a/packages/p2p/src/components/my-ads/ad-type.jsx
+++ b/packages/p2p/src/components/my-ads/ad-type.jsx
@@ -6,8 +6,8 @@ import './ad-type.scss';
 
 const AdType = ({ float_rate }) => {
     return (
-        <div className='ad-type'>
-            <Text as='span' size='xxs' weight='normal' line_height='xs' className='ad-type__badge'>
+        <div className='ad-types'>
+            <Text as='span' size='xxs' weight='normal' line_height='xs' className='ad-types__badge'>
                 {localize('Float')}
             </Text>
             <Text as='span' size='xxs' weight='normal' line_height='xxs'>
diff --git a/packages/p2p/src/components/my-ads/ad-type.scss b/packages/p2p/src/components/my-ads/ad-type.scss
index f12ea13ea9c6..b7b8bf38685b 100644
--- a/packages/p2p/src/components/my-ads/ad-type.scss
+++ b/packages/p2p/src/components/my-ads/ad-type.scss
@@ -1,7 +1,11 @@
-.ad-type {
+.ad-types {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    justify-content: space-around;
+
+    @include mobile {
+        justify-content: flex-end;
+    }
 
     &__badge {
         align-items: center;
@@ -9,7 +13,7 @@
         border: 1px solid var(--border-normal);
         display: flex;
         flex-direction: row;
-        margin: 0.25rem;
+        margin: 0.3rem 0.5rem 0.3rem 0;
         padding: 0.1rem 0.8rem;
         width: fit-content;
     }

From 297796bbfbee978f5160f3aa93dd9116d0588ccc Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 25 Aug 2022 12:30:33 +0800
Subject: [PATCH 06/11] removed code from other PR

---
 .../payment-methods-list/payment-methods-list.jsx              | 1 -
 .../payment-methods-list/payment-methods-list.scss             | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
index cc48b7025848..ec5829e2d8fa 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
+++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
@@ -85,7 +85,6 @@ const PaymentMethodsList = () => {
                 <MobileFullPageModal
                     body_className='payment-methods-list__modal'
                     height_offset='80px'
-                    is_flex
                     is_modal_open
                     page_header_text={localize('Payment methods')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
index ae4603c9a14c..cd7a6c0b5b83 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
+++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
@@ -12,8 +12,7 @@
 
         &--footer {
             bottom: 0;
-            width: 100%;
-            background-color: var(--general-main-1);
+            position: fixed;
         }
 
         &-wrapper {

From 9602eb7287b81e48651f7f55437994f53f4cff83 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 25 Aug 2022 14:24:36 +0800
Subject: [PATCH 07/11] changed input field value text

---
 packages/p2p/src/components/floating-rate/floating-rate.jsx | 6 ++++--
 .../p2p/src/components/floating-rate/floating-rate.scss     | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/p2p/src/components/floating-rate/floating-rate.jsx b/packages/p2p/src/components/floating-rate/floating-rate.jsx
index 461fbd0ad67d..2888ddd6635b 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.jsx
+++ b/packages/p2p/src/components/floating-rate/floating-rate.jsx
@@ -58,6 +58,7 @@ const FloatingRate = ({
                     current_focus={general_store.current_focus}
                     decimal_point_change={2}
                     id='floating_rate_input'
+                    inline_prefix='%'
                     is_autocomplete_disabled
                     is_float
                     is_incrementable
@@ -69,7 +70,7 @@ const FloatingRate = ({
                     setCurrentFocus={general_store.setCurrentFocus}
                     required={required}
                     type={isMobile() && os !== 'iOS' ? 'tel' : 'number'}
-                    value={`${value}%`}
+                    value={value}
                     data_testid={data_testid}
                 />
                 <div className='floating-rate__mkt-rate'>
@@ -92,7 +93,8 @@ const FloatingRate = ({
                         className='floating-rate__mkt-rate--msg'
                     >
                         1 {fiat_currency} ={' '}
-                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}
+                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}{' '}
+                        {local_currency}
                     </Text>
                 </div>
             </section>
diff --git a/packages/p2p/src/components/floating-rate/floating-rate.scss b/packages/p2p/src/components/floating-rate/floating-rate.scss
index b639538aa4a2..97fa6ffeb1de 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.scss
+++ b/packages/p2p/src/components/floating-rate/floating-rate.scss
@@ -139,7 +139,7 @@
         }
 
         .input {
-            text-align: center;
+            text-align: right;
             border: unset;
             background-color: unset;
             padding: unset;

From 49ec9925c1f2cf52b1e17a1c02b57512a6b6f54a Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 25 Aug 2022 14:53:02 +0800
Subject: [PATCH 08/11] removed local currency from market rate

---
 packages/p2p/src/components/floating-rate/floating-rate.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/p2p/src/components/floating-rate/floating-rate.jsx b/packages/p2p/src/components/floating-rate/floating-rate.jsx
index 2888ddd6635b..3f4c927666e8 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.jsx
+++ b/packages/p2p/src/components/floating-rate/floating-rate.jsx
@@ -93,8 +93,7 @@ const FloatingRate = ({
                         className='floating-rate__mkt-rate--msg'
                     >
                         1 {fiat_currency} ={' '}
-                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}{' '}
-                        {local_currency}
+                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}
                     </Text>
                 </div>
             </section>

From fa9b86378ceafeba02d0bd0b4f7bbbc5664c2f2e Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 25 Aug 2022 17:23:20 +0800
Subject: [PATCH 09/11] changed floating rate spec file

---
 .../src/components/floating-rate/__test__/floating-rate.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js b/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js
index 8cbd16743ff7..36c6b09c0443 100644
--- a/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js
+++ b/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js
@@ -39,6 +39,6 @@ describe('<FloatingRate/>', () => {
     it('should render the exchange rate in hint', () => {
         render(<FloatingRate fiat_currency='AED' local_currency='INR' />);
 
-        expect(screen.getByText('1 AED = 100.00 INR')).toBeInTheDocument();
+        expect(screen.getByText('1 AED = 100.00')).toBeInTheDocument();
     });
 });

From 18cc47704a2d6f26a70ffabfb64fd8cfd076c04a Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Wed, 28 Sep 2022 15:15:11 +0800
Subject: [PATCH 10/11] changed floating rate msg font size to small

---
 packages/p2p/src/components/floating-rate/floating-rate.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/p2p/src/components/floating-rate/floating-rate.scss b/packages/p2p/src/components/floating-rate/floating-rate.scss
index 97fa6ffeb1de..9a17c5073440 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.scss
+++ b/packages/p2p/src/components/floating-rate/floating-rate.scss
@@ -91,11 +91,11 @@
             height: 18px;
             left: 8px;
             top: 18px;
-            font-style: normal;
             flex: none;
             order: 2;
             flex-grow: 0;
             margin: 0px;
+            font-size: small;
         }
     }
 

From 9d9e4e52380b51df519f946e9ed8ac5c79d4961e Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Wed, 28 Sep 2022 17:00:26 +0800
Subject: [PATCH 11/11] fixed font size

---
 packages/p2p/src/components/floating-rate/floating-rate.jsx  | 2 +-
 packages/p2p/src/components/floating-rate/floating-rate.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/p2p/src/components/floating-rate/floating-rate.jsx b/packages/p2p/src/components/floating-rate/floating-rate.jsx
index 3f4c927666e8..0964d58e51d8 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.jsx
+++ b/packages/p2p/src/components/floating-rate/floating-rate.jsx
@@ -86,7 +86,7 @@ const FloatingRate = ({
                     </Text>
                     <Text
                         as='span'
-                        size='xs'
+                        size='xxs'
                         color='prominent'
                         weight='normal'
                         line_height='xs'
diff --git a/packages/p2p/src/components/floating-rate/floating-rate.scss b/packages/p2p/src/components/floating-rate/floating-rate.scss
index 9a17c5073440..98951b6f8017 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.scss
+++ b/packages/p2p/src/components/floating-rate/floating-rate.scss
@@ -95,7 +95,6 @@
             order: 2;
             flex-grow: 0;
             margin: 0px;
-            font-size: small;
         }
     }
 
@@ -143,6 +142,7 @@
             border: unset;
             background-color: unset;
             padding: unset;
+            font-size: small;
             &:focus {
                 border-color: unset;
             }