Skip to content

Commit

Permalink
chore: cherry picked
Browse files Browse the repository at this point in the history
Co-authored-by: Carol Sachdeva <58209918+carol-deriv@users.noreply.github.com>
  • Loading branch information
ameerul-deriv committed Mar 1, 2023
1 parent 70d12b1 commit 9a3da34
Show file tree
Hide file tree
Showing 33 changed files with 463 additions and 473 deletions.
152 changes: 7 additions & 145 deletions packages/cashier/src/pages/p2p-cashier/p2p-cashier.tsx
Original file line number Diff line number Diff line change
@@ -1,154 +1,16 @@
import React from 'react';
import { RouteComponentProps } from 'react-router';
import { withRouter } from 'react-router-dom';
import { getLanguage } from '@deriv/translations';
import { routes, WS } from '@deriv/shared';
import { Loading } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import P2P from '@deriv/p2p';
import { get, init, timePromise } from 'Utils/server_time';
import { useCashierStore } from '../../stores/useCashierStores';

type TP2PCashierProps = RouteComponentProps & {
history: History;
location: {
search: string;
hash: string;
};
};
import { observer, useStore } from '@deriv/stores';

/* P2P will use the same websocket connection as Deriv/Binary, we need to pass it as a prop */
const P2PCashier = observer(({ history, location }: TP2PCashierProps) => {
const { notifications, client, ui, common } = useStore();
const {
addNotificationMessage,
filterNotificationMessages,
refreshNotifications,
removeNotificationByKey,
removeNotificationMessage,
setP2POrderProps,
} = notifications;
const { balance, currency, local_currency_config, loginid, is_logging_in, is_virtual, residence } = client;
const { notification_messages_ui: Notifications, is_dark_mode_on, is_mobile, setCurrentFocus, current_focus } = ui;
const { platform } = common;
const { general_store } = useCashierStore();
const { setNotificationCount, setOnRemount } = general_store;
const [order_id, setOrderId] = React.useState<string | null>(null);
const [action_param, setActionParam] = React.useState<string | null>(null);
const [code_param, setCodeParam] = React.useState<string | null>(null);
const url_params = new URLSearchParams(location.search);
const server_time = {
get,
init,
timePromise,
};

const setQueryOrder = React.useCallback(
(input_order_id: string | null) => {
if (is_mobile) {
url_params.delete('action');
url_params.delete('code');
}

if (url_params.has('order_id') || url_params.has('order')) {
url_params.delete('order');
url_params.delete('order_id');
}

if (input_order_id) {
url_params.append('order', input_order_id);
}

if (!input_order_id) {
history.replace({
search: '',
hash: location.hash,
});

setOrderId(null);
} else if (order_id !== input_order_id) {
// Changing query params
history.push({
pathname: routes.cashier_p2p,
search: url_params.toString(),
hash: location.hash,
});
url_params.delete('action');
url_params.delete('code');
setOrderId(input_order_id);
}
},

// eslint-disable-next-line react-hooks/exhaustive-deps
[history, location.hash, location.search]
);

React.useEffect(() => {
let passed_order_id;

setActionParam(url_params.get('action'));
if (is_mobile) {
setCodeParam(localStorage.getItem('verification_code.p2p_order_confirm'));
} else if (!code_param) {
if (url_params.has('code')) {
setCodeParam(url_params.get('code'));
} else if (localStorage.getItem('verification_code.p2p_order_confirm')) {
setCodeParam(localStorage.getItem('verification_code.p2p_order_confirm'));
}
}

// Different emails give us different params (order / order_id),
// don't remove order_id since it's consistent for mobile and web for 2FA
if (url_params.has('order_id')) {
passed_order_id = url_params.get('order_id');
} else if (url_params.has('order')) {
passed_order_id = url_params.get('order');
}

if (passed_order_id) {
setQueryOrder(passed_order_id);
}

return () => setQueryOrder(null);

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

if (is_logging_in) {
return <Loading is_fullscreen />;
}
const P2PCashier = observer(() => {
const { modules } = useStore();
const { cashier } = modules;
const { general_store } = cashier;
const { setNotificationCount } = general_store;

return (
<P2P
addNotificationMessage={addNotificationMessage}
balance={balance}
client={{ currency, local_currency_config, is_virtual, residence, loginid }}
current_focus={current_focus}
filterNotificationMessages={filterNotificationMessages}
history={history}
is_dark_mode_on={is_dark_mode_on}
is_mobile={is_mobile}
lang={getLanguage()}
modal_root_id='modal_root'
order_id={order_id}
platform={platform}
Notifications={Notifications}
poi_url={routes.proof_of_identity}
refreshNotifications={refreshNotifications}
removeNotificationByKey={removeNotificationByKey}
removeNotificationMessage={removeNotificationMessage}
server_time={server_time}
setCurrentFocus={setCurrentFocus}
setNotificationCount={setNotificationCount}
setOrderId={setQueryOrder}
setOnRemount={setOnRemount}
setP2POrderProps={setP2POrderProps}
should_show_verification={/verification/.test(location.hash)}
verification_action={action_param}
verification_code={code_param}
websocket_api={WS}
/>
);
return <P2P setNotificationCount={setNotificationCount} />;
});

export default withRouter(P2PCashier);
10 changes: 10 additions & 0 deletions packages/p2p/@deriv-stores.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import type { TStores } from '@deriv/stores';
import type RootStore from './src/stores/index';

declare module '@deriv/stores' {
export function useStore(): TStores & {
modules: {
p2p: RootStore;
};
};
}
11 changes: 7 additions & 4 deletions packages/p2p/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,14 @@
"dependencies": {
"@deriv/components": "^1.0.0",
"@deriv/shared": "^1.0.0",
"@deriv/stores": "^1.0.0",
"@deriv/translations": "^1.0.0",
"@testing-library/react": "^12.0.0",
"classnames": "^2.2.6",
"commander": "^3.0.2",
"crc-32": "^1.2.0",
"formik": "^2.1.4",
"glob": "^7.1.5",
"i18next": "^20.3.2",
"lodash.debounce": "^4.0.8",
"mobx": "^6.6.1",
Expand All @@ -45,12 +49,11 @@
"react-content-loader": "^6.2.0",
"react-dom": "^17.0.2",
"react-i18next": "^11.11.0",
"react-router-dom": "^5.2.0",
"react-simple-star-rating": "4.0.4",
"react-svg-loader": "^3.0.3",
"react-transition-group": "4.4.2",
"sendbird": "~3.0.137",
"glob": "^7.1.5",
"commander": "^3.0.2"
"sendbird": "~3.0.137"
},
"devDependencies": {
"@babel/eslint-parser": "^7.17.0",
Expand All @@ -65,9 +68,9 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.16.7",
"@deriv/publisher": "0.0.1-beta4",
"@types/react": "^18.0.7",
"@types/react-dom": "^18.0.0",
"@deriv/publisher": "0.0.1-beta4",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^9.0.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@ import React from 'react';
import classNames from 'classnames';
import { InfiniteDataList, Loading, Table, Tabs } from '@deriv/components';
import { isDesktop, isMobile } from '@deriv/shared';
import { observer } from 'mobx-react-lite';
import { useStore, observer } from '@deriv/stores';
import { localize, Localize } from 'Components/i18next';
import { useStores } from 'Stores';
import Empty from 'Components/empty/empty.jsx';
import AdvertiserPageRow from './advertiser-page-row.jsx';
import './advertiser-page.scss';

const AdvertiserPageAdverts = () => {
const { advertiser_page_store, general_store } = useStores();
const {
client: { currency },
} = useStore();

const { advertiser_page_store } = useStores();

const AdvertiserPageRowRenderer = row_props => (
<AdvertiserPageRow {...row_props} showAdPopup={advertiser_page_store.showAdPopup} />
Expand Down Expand Up @@ -43,7 +47,7 @@ const AdvertiserPageAdverts = () => {
<Table.Head>{localize('Limits')}</Table.Head>
<Table.Head>
{localize('Rate (1 {{currency}})', {
currency: general_store.client.currency,
currency,
})}
</Table.Head>
<Table.Head>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import { Button, Table, Text } from '@deriv/components';
import { isMobile } from '@deriv/shared';
import { observer } from 'mobx-react-lite';
import { observer, useStore } from '@deriv/stores';
import { useStores } from 'Stores';
import { buy_sell } from 'Constants/buy-sell';
import { localize, Localize } from 'Components/i18next';
Expand All @@ -11,7 +11,9 @@ import './advertiser-page.scss';

const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
const { advertiser_page_store, buy_sell_store, floating_rate_store, general_store } = useStores();
const { currency } = general_store.client;
const {
client: { currency },
} = useStore();
const {
effective_rate,
local_currency,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import React from 'react';
import { Money, Table, Text } from '@deriv/components';
import { isMobile } from '@deriv/shared';
import { observer } from 'mobx-react-lite';
import { observer, useStore } from '@deriv/stores';
import { localize, Localize } from 'Components/i18next';
import { useStores } from 'Stores';
import './advertiser-page.scss';

const AdvertiserPageStats = () => {
const { advertiser_page_store, general_store } = useStores();
const {
client: { currency },
} = useStore();

const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
// Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
Expand Down Expand Up @@ -140,7 +143,7 @@ const AdvertiserPageStats = () => {
{buy_orders_amount && sell_orders_amount ? (
<Money
amount={Number(buy_orders_amount) + Number(sell_orders_amount)}
currency={general_store.client.currency}
currency={currency}
show_currency
/>
) : (
Expand Down Expand Up @@ -223,7 +226,7 @@ const AdvertiserPageStats = () => {
{buy_orders_amount && sell_orders_amount ? (
<Money
amount={Number(buy_orders_amount) + Number(sell_orders_amount)}
currency={general_store.client.currency}
currency={currency}
show_currency
/>
) : (
Expand Down
2 changes: 1 addition & 1 deletion packages/p2p/src/components/app-content.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const AppContent = () => {
return <NicknameForm />;
}

if (general_store.props.should_show_verification) {
if (/verification/.test(location.hash)) {
return <Verification should_wrap />;
}

Expand Down
Loading

0 comments on commit 9a3da34

Please sign in to comment.