diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx
index 7e0c7b031559..118d0252ae10 100644
--- a/packages/p2p/src/components/app-content.jsx
+++ b/packages/p2p/src/components/app-content.jsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { isMobile } from '@deriv/shared';
import { Loading, Tabs } from '@deriv/components';
+import { isAction, reaction } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useStores } from 'Stores';
import AdvertiserPage from 'Components/advertiser-page/advertiser-page.jsx';
@@ -13,9 +14,32 @@ import NicknameForm from './nickname-form';
import Orders from './orders/orders.jsx';
import TemporarilyBarredHint from './temporarily-barred-hint';
import Verification from './verification/verification.jsx';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-const AppContent = () => {
+const AppContent = ({ order_id }) => {
const { buy_sell_store, general_store } = useStores();
+ const { showModal, hideModal } = useModalManagerContext();
+
+ React.useEffect(() => {
+ return reaction(
+ () => general_store.props.setP2POrderProps,
+ () => {
+ if (isAction(general_store.props.setP2POrderProps)) {
+ general_store.props.setP2POrderProps({
+ order_id,
+ redirectToOrderDetails: general_store.redirectToOrderDetails,
+ setIsRatingModalOpen: is_open => {
+ if (is_open) {
+ showModal({ key: 'RatingModal' });
+ } else {
+ hideModal();
+ }
+ },
+ });
+ }
+ }
+ );
+ }, []);
if (general_store.is_loading) {
return
;
diff --git a/packages/p2p/src/components/app.jsx b/packages/p2p/src/components/app.jsx
index c718f88deef9..87348a2a3dd0 100644
--- a/packages/p2p/src/components/app.jsx
+++ b/packages/p2p/src/components/app.jsx
@@ -8,6 +8,7 @@ import { waitWS } from 'Utils/websocket';
import { useStores } from 'Stores';
import AppContent from './app-content.jsx';
import { setLanguage } from './i18next';
+import { ModalManager, ModalManagerContextProvider } from './modal-manager';
import './app.scss';
const App = props => {
@@ -67,11 +68,7 @@ const App = props => {
general_store.redirectTo('orders');
order_store.setOrderId(order_id);
}
- general_store.props.setP2POrderProps({
- order_id,
- redirectToOrderDetails: general_store.redirectToOrderDetails,
- setIsRatingModalOpen: order_store.setIsRatingModalOpen,
- });
+
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [order_id]);
@@ -91,7 +88,7 @@ const App = props => {
order_store.setVerificationCode(verification_code);
}
if (verification_action && verification_code) {
- order_store.setIsLoadingModalOpen(true);
+ general_store.showModal({ key: 'LoadingModal', props: {} });
order_store.verifyEmailVerificationCode(verification_action, verification_code);
}
@@ -101,7 +98,10 @@ const App = props => {
return (
-
+
+
+
+
);
};
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-form.jsx b/packages/p2p/src/components/buy-sell/buy-sell-form.jsx
index 563d6d7c7ea1..7af4c4db7ee4 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-form.jsx
+++ b/packages/p2p/src/components/buy-sell/buy-sell-form.jsx
@@ -14,12 +14,14 @@ import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card
import { floatingPointValidator } from 'Utils/validations';
import { countDecimalPlaces } from 'Utils/string';
import { generateEffectiveRate, setDecimalPlaces, roundOffDecimal, removeTrailingZeros } from 'Utils/format-value';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
const BuySellForm = props => {
const isMounted = useIsMounted();
const { advertiser_page_store, buy_sell_store, floating_rate_store, general_store, my_profile_store } = useStores();
const [selected_methods, setSelectedMethods] = React.useState([]);
buy_sell_store.setFormProps(props);
+ const { showModal } = useModalManagerContext();
const { setPageFooterParent } = props;
const {
@@ -80,12 +82,25 @@ const BuySellForm = props => {
}
advertiser_page_store.setFormErrorMessage('');
- buy_sell_store.setShowRateChangePopup(rate_type === ad_type.FLOAT);
+ const disposeRateChangeModal = reaction(
+ () => floating_rate_store.is_market_rate_changed,
+ is_market_rate_changed => {
+ if (is_market_rate_changed && rate_type === ad_type.FLOAT) {
+ showModal({
+ key: 'RateChangeModal',
+ props: {
+ currency: buy_sell_store.local_currency,
+ },
+ });
+ }
+ }
+ );
buy_sell_store.setInitialReceiveAmount(calculated_rate);
return () => {
buy_sell_store.payment_method_ids = [];
disposeReceiveAmountReaction();
+ disposeRateChangeModal();
};
},
[] // eslint-disable-line react-hooks/exhaustive-deps
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-header.jsx b/packages/p2p/src/components/buy-sell/buy-sell-header.jsx
index 2d6a5827e1b3..e583655e3617 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-header.jsx
+++ b/packages/p2p/src/components/buy-sell/buy-sell-header.jsx
@@ -102,7 +102,7 @@ const BuySellHeader = ({ table_type }) => {
buy_sell_store.setIsFilterModalOpen(true)}
+ onClick={() => general_store.showModal({ key: 'FilterModal', props: {} })}
size={40}
/>
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-table.jsx b/packages/p2p/src/components/buy-sell/buy-sell-table.jsx
index 2b8da108c4be..848bb54b36b6 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-table.jsx
+++ b/packages/p2p/src/components/buy-sell/buy-sell-table.jsx
@@ -8,7 +8,6 @@ import { Localize } from 'Components/i18next';
import { TableError } from 'Components/table/table-error.jsx';
import { useStores } from 'Stores';
import BuySellRow from './buy-sell-row.jsx';
-import CancelAddPaymentMethodModal from '../my-profile/payment-methods/add-payment-method/cancel-add-payment-method-modal.jsx';
import NoAds from './no-ads/no-ads.jsx';
const BuySellRowRendererComponent = row_props => {
@@ -31,7 +30,7 @@ const BuySellTable = ({ onScroll }) => {
React.useEffect(
() => {
- my_profile_store.setIsCancelAddPaymentMethodModalOpen(false);
+ my_profile_store.getPaymentMethodsList();
reaction(
() => buy_sell_store.is_buy,
() => buy_sell_store.fetchAdvertiserAdverts(),
@@ -53,7 +52,6 @@ const BuySellTable = ({ onScroll }) => {
if (buy_sell_store.items.length) {
return (
<>
-
@@ -143,52 +135,6 @@ const MyAdsTable = () => {