feat: added p2p standalone iframe + setup localstorage synchronisation (

deriv-com#15439) * feat: added p2p standalone iframe + setup localstorage sync for it [WIP] * feat: fixed minor issues * chore: resolved pr comments * chore: resolved pr comments * chore: resolved pr comments * fix: fixed build error
kate-deriv · Jun 5, 2024 · 1855373 · 1855373
1 parent 8f8365b
commit 1855373
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 1 deletion.
diff --git a/packages/core/src/App/AppContent.tsx b/packages/core/src/App/AppContent.tsx
@@ -5,6 +5,7 @@ import { useIsMounted } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser';
 import BinaryBotIFrame from 'Modules/BinaryBotIFrame';
+import P2PIFrame from 'Modules/P2PIFrame';
 import SmartTraderIFrame from 'Modules/SmartTraderIFrame';
 import ErrorBoundary from './Components/Elements/Errors/error-boundary.jsx';
 import AppToastMessages from './Containers/app-toast-messages.jsx';
@@ -74,6 +75,7 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
             </ErrorBoundary>
             <SmartTraderIFrame />
             <BinaryBotIFrame />
+            <P2PIFrame />
             <AppToastMessages />
             <Devtools />
         </ThemeProvider>

diff --git a/packages/core/src/Modules/P2PIFrame/P2PIFrame.tsx b/packages/core/src/Modules/P2PIFrame/P2PIFrame.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { getUrlP2P } from '@deriv/shared';
+
+const P2PIFrame = () => {
+    const base_link = getUrlP2P();
+
+    return (
+        <iframe
+            id='localstorage-sync__p2p'
+            src={`${base_link}/localstorage-sync.html`}
+            style={{ display: 'none', visibility: 'hidden' }}
+            sandbox='allow-same-origin allow-scripts'
+        />
+    );
+};
+
+export default P2PIFrame;
diff --git a/packages/core/src/Modules/P2PIFrame/index.ts b/packages/core/src/Modules/P2PIFrame/index.ts
@@ -0,0 +1,3 @@
+import P2PIFrame from './P2PIFrame';
+
+export default P2PIFrame;
diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
@@ -30,6 +30,7 @@ import {
     sortApiData,
     urlForLanguage,
     getAppId,
+    getUrlp2p,
 } from '@deriv/shared';
 import { Analytics } from '@deriv-com/analytics';
 import { getLanguage, localize, getRedirectionLanguage } from '@deriv/translations';
@@ -2490,13 +2491,16 @@ export default class ClientStore extends BaseStore {
     syncWithLegacyPlatforms(active_loginid, client_accounts) {
         const smartTrader = {};
         const binaryBot = {};
+        const p2p = {};
 
         smartTrader.iframe = document.getElementById('localstorage-sync');
         binaryBot.iframe = document.getElementById('localstorage-sync__bot');
+        p2p.iframe = document.getElementById('localstorage-sync__p2p');
         smartTrader.origin = getUrlSmartTrader();
         binaryBot.origin = getUrlBinaryBot(false);
+        p2p.origin = getUrlp2p();
 
-        [smartTrader, binaryBot].forEach(platform => {
+        [smartTrader, binaryBot, p2p].forEach(platform => {
             if (platform.iframe) {
                 // Keep client.accounts in sync (in case user wasn't logged in).
                 platform.iframe.contentWindow.postMessage(

diff --git a/packages/core/src/root_files/localstorage-sync.html b/packages/core/src/root_files/localstorage-sync.html
@@ -19,6 +19,8 @@
                     `https://staging-smarttrader.${domain_url}`,
                     `https://bot.${domain_url}`,
                     `https://staging-bot.deriv.com`,
+                    `https://p2p.deriv.com`,
+                    'https://deriv-p2p-app.pages.dev/',
                 ];
                 if (allowed_origins.includes(message.origin)) {
                     switch (message.data.key) {

diff --git a/packages/shared/src/utils/url/constants.ts b/packages/shared/src/utils/url/constants.ts
@@ -19,6 +19,7 @@ export const deriv_urls = Object.freeze({
     SMARTTRADER_STAGING: `https://staging-smarttrader.${domain_url}`,
     BINARYBOT_PRODUCTION: `https://bot.${domain_url}`,
     BINARYBOT_STAGING: `https://staging-bot.${domain_url}`,
+    P2P_PRODUCTION: `https://p2p.deriv.com`,
 });
 /**
  * @deprecated Please use 'URLConstants.whatsApp' from '@deriv-com/utils' instead of this.

diff --git a/packages/shared/src/utils/url/helpers.ts b/packages/shared/src/utils/url/helpers.ts
@@ -47,6 +47,14 @@ export const getUrlBinaryBot = (is_language_required = true) => {
     return is_language_required ? `${base_link}/?l=${i18n_language.toLowerCase()}` : base_link;
 };
 
+export const getUrlP2P = (is_language_required = true) => {
+    const url_lang = getlangFromUrl();
+    const i18n_language = window.localStorage.getItem('i18n_language') || url_lang || 'en';
+    const base_link = deriv_urls.P2P_PRODUCTION;
+
+    return is_language_required ? `${base_link}/?l=${i18n_language.toLowerCase()}` : base_link;
+};
+
 export const getPlatformFromUrl = (domain = window.location.hostname) => {
     const resolutions = {
         is_staging_deriv_app: /^staging-app\.deriv\.(com|me|be)$/i.test(domain),