Merge pull request #96 from shayan-deriv/shayan/feq-2228/add-iframe-t…

…o-recieve-messages-from-deriv-app feat: added iframe with eventListener for coming messages
deriv-com · Jun 6, 2024 · 11f4779 · 11f4779
2 parents 06765ba + fabd85f
commit 11f4779
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 1 deletion.
diff --git a/localstorage-sync.html b/localstorage-sync.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Deriv</title>
+        <meta charset="utf-8" />
+        <meta name="referrer" content="origin" />
+        <script>
+            window.addEventListener('message', function (message) {
+                var allowed_origins = [
+                    'https://deriv.app',
+                    'https://staging.deriv.app',
+                    'https://app.deriv.com',
+                    'https://app.deriv.me',
+                    'https://app.deriv.be',
+                    'https://staging-app.deriv.com',
+                    'https://staging-app.deriv.me',
+                    'https://staging-app.deriv.be',
+                    'https://test-app.deriv.com',
+                ];
+
+                if (allowed_origins.includes(message.origin)) {
+                    switch (message.data.key) {
+                        case 'active_loginid': {
+                            if (localStorage.getItem(message.data.key) !== message.data.value) {
+                                localStorage.setItem(message.data.key, message.data.value);
+                            }
+                            break;
+                        }
+                        case 'client.accounts': {
+                            if (localStorage.getItem(message.data.key) !== message.data.value) {
+                                localStorage.setItem(message.data.key, message.data.value);
+                            }
+                            break;
+                        }
+                    }
+                }
+            });
+        </script>
+    </head>
+    <body></body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
-import { AppFooter, AppHeader } from '@/components';
+import { AppFooter, AppHeader, DerivIframe } from '@/components';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import AppContent from './routes/AppContent';
@@ -18,6 +18,7 @@ const App = () => {
         <BrowserRouter>
             <QueryParamProvider adapter={ReactRouter5Adapter}>
                 <TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
+                    <DerivIframe />
                     <AppHeader />
                     <AppContent />
                     {isDesktop && <AppFooter />}

diff --git a/src/components/DerivIframe/DerivIframe.tsx b/src/components/DerivIframe/DerivIframe.tsx
@@ -0,0 +1,10 @@
+const DerivIframe = () => (
+    <iframe
+        id='localstorage-sync'
+        sandbox='allow-scripts'
+        src='../../../../localstorage-sync.html'
+        style={{ display: 'none', visibility: 'hidden' }}
+    />
+);
+
+export default DerivIframe;
diff --git a/src/components/DerivIframe/index.ts b/src/components/DerivIframe/index.ts
@@ -0,0 +1 @@
+export { default as DerivIframe } from './DerivIframe';
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -6,6 +6,7 @@ export * from './Badge';
 export * from './BuySellForm';
 export * from './Checklist';
 export * from './Clipboard';
+export * from './DerivIframe';
 export * from './FileDropzone';
 export * from './FloatingRate';
 export * from './FormProgress';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as DerivIframe } from './DerivIframe';