frontend: use postmessage to communicate with the iframe

frontends/web/public/btcdirect/fiat-to-coin.html

@@ -10,104 +10,123 @@
 
 <script lang="js">
   ;(() => {
-    const {
-      address,
-      apiKey,
-      baseCurrency,
-      mode,
-      quoteCurrency,
-    } = window.frameElement?.dataset;
-
-    if (mode === 'debug') {
-      console.info(window.frameElement?.dataset);
+
+    if (window.top === window) {
+      showError('Unexpected error');
+      return;
     }
 
-    if ( // this should never happen, but if it does we stop here
-      !address
-      || !baseCurrency
-      || !quoteCurrency
-    ) {
-      document.body.append(
-        Object.assign(document.createElement('h1'), {
-          style: 'color: red; padding: 1rem;',
-          textContent: `Unexpected error:
+    const onMessage = (event) => {
+      switch (event.data?.action) {
+      case 'configuration':
+        const {
+          address,
+          apiKey,
+          baseCurrency,
+          mode,
+          quoteCurrency,
+        } = event.data || {};
+
+        if ( // this should never happen, but if it does we stop here
+          !address
+          || !baseCurrency
+          || !quoteCurrency
+        ) {
+          showError(`Unexpected error:
             ${!address ? 'Address missing' : ''}
             ${!baseCurrency ? 'BaseCurrency missing' : ''}
             ${!quoteCurrency ? 'QuoteCurrency missing' : ''}
-          `
-        })
-      );
-      return;
-    }
+          `);
+          return;
+        }
+        const currency = baseCurrency.toUpperCase();
 
-    const currency = baseCurrency.toUpperCase();
+        // add the btcdirect CSS
+        document.head.appendChild(
+          Object.assign(document.createElement('link'), {
+            href: (
+              mode === 'production'
+              ? 'https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.css'
+              : 'https://cdn-sandbox.btcdirect.eu/fiat-to-coin/fiat-to-coin.css'
+            ),
+            rel: 'stylesheet',
+          })
+        );
 
-    // add the btcdirect CSS
-    document.head.appendChild(
-      Object.assign(document.createElement('link'), {
-        href: (
+        // add the btcdirect script
+        (function (btc, d, i, r, e, c, t) {
+          btc[r] = btc[r] || function () {
+            (btc[r].q = btc[r].q || []).push(arguments)
+          };
+          c = d.createElement(i);
+          c.id = r; c.src = e; c.async = true;
+          c.type = 'module'; c.dataset.btcdirect = '';
+          t = d.getElementsByTagName(i)[0];
+          t.parentNode.insertBefore(c, t);
+        })(window, document, 'script', 'btcdirect',
           mode === 'production'
-          ? 'https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.css'
-          : 'https://cdn-sandbox.btcdirect.eu/fiat-to-coin/fiat-to-coin.css'
-        ),
-        rel: 'stylesheet',
-      })
-    );
-
-    // add the btcdirect script
-    (function (btc, d, i, r, e, c, t) {
-      btc[r] = btc[r] || function () {
-        (btc[r].q = btc[r].q || []).push(arguments)
-      };
-      c = d.createElement(i);
-      c.id = r; c.src = e; c.async = true;
-      c.type = 'module'; c.dataset.btcdirect = '';
-      t = d.getElementsByTagName(i)[0];
-      t.parentNode.insertBefore(c, t);
-    })(window, document, 'script', 'btcdirect',
-      mode === 'production'
-      ? 'https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.js'
-      : 'https://cdn-sandbox.btcdirect.eu/fiat-to-coin/fiat-to-coin.js'
-    );
-
-    btcdirect('init', {
-      token: apiKey,
-      debug: mode === 'debug',
-      locale: window.frameElement?.dataset.locale || 'en-US',
-      theme: window.frameElement?.dataset.theme || 'light',
-    });
-
-    // fiat to coin order
-    btcdirect('wallet-addresses', {
-      addresses: {
-        address,
-        currency,
-        id: 'BitBox',
-        walletName: 'BitBox'
-      }
-    });
-
-    btcdirect('set-parameters',
-      mode === 'production' ? {
-        baseCurrency: currency,
-        fixedCurrency: true,
-        quoteCurrency,
-        // paymentMethod: any of 'bancontact', 'bankTransfer', 'creditCard', 'giropay', 'iDeal', 'sofort', 'applepay'
-        showWalletAddress: false,
-      } : {
-        baseCurrency: currency,
-        fixedCurrency: true,
-        paymentMethod: 'sofort', // sandbox currently only supports sofort payment method
-        quoteCurrency,
-        showWalletAddress: false,
+          ? 'https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.js'
+          : 'https://cdn-sandbox.btcdirect.eu/fiat-to-coin/fiat-to-coin.js'
+        );
+
+        btcdirect('init', {
+          token: apiKey,
+          debug: mode === 'debug',
+          locale: window.frameElement?.dataset.locale || 'en-GB',
+          theme: window.frameElement?.dataset.theme || 'light',
+        });
+
+        // fiat to coin order
+        btcdirect('wallet-addresses', {
+          addresses: {
+            address,
+            currency,
+            id: 'BitBox',
+            walletName: 'BitBox'
+          }
+        });
+
+        btcdirect('set-parameters',
+          mode === 'production' ? {
+            baseCurrency: currency,
+            fixedCurrency: true,
+            quoteCurrency,
+            // paymentMethod: any of 'bancontact', 'bankTransfer', 'creditCard', 'giropay', 'iDeal', 'sofort', 'applepay'
+            showWalletAddress: false,
+          } : {
+            baseCurrency: currency,
+            fixedCurrency: true,
+            paymentMethod: 'sofort', // sandbox currently only supports sofort payment method
+            quoteCurrency,
+            showWalletAddress: false,
+          }
+        );
+
+        window.addEventListener('btcdirect-embeddable-fiat-to-coin-order-confirmed', (event) => {
+          console.log('btcdirect-embeddable-fiat-to-coin-order-confirmed', event);
+          // Handle the event
+          // Note that the sent information from the widget is found inside event.detail
+        });
+
+        break;
       }
-    );
+    };
+
+    window.addEventListener('message', onMessage);
+
+    // Request the parent to send attributes
+    window.parent.postMessage({
+      action: 'request-configuration'
+    }, '*');
 
-    window.addEventListener('btcdirect-embeddable-fiat-to-coin-order-confirmed', (event) => {
-      console.log('btcdirect-embeddable-fiat-to-coin-order-confirmed', event);
-      // Handle the event
-      // Note that the sent information from the widget is found inside event.detail
-    });
+    function showError(message) {
+      document.body.append(
+        Object.assign(document.createElement('h1'), {
+          style: 'color: red; padding: 1rem;',
+          textContent: message,
+        })
+      );
+    }
 
   })();
 </script>

frontends/web/src/routes/exchange/btcdirect.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, createRef, useContext, useRef } from 'react';
+import { useState, useEffect, createRef, useContext, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getBTCDirectInfo } from '@/api/exchanges';
 import { AppContext } from '@/contexts/AppContext';
@@ -94,15 +94,45 @@ export const BTCDirect = ({ accounts, code }: TProps) => {
     }, 200);
   };
 
+  const locale = i18n.resolvedLanguage ? localeMapping[i18n.resolvedLanguage] : 'en-GB';
+
+  const onMessage = useCallback((event: MessageEvent) => {
+    // if (!isDevserver && event.origin !== 'https://shiftcrypto.io') { return; }
+
+    if (!account || !btcdirectInfo?.success) {
+      return;
+    }
+    switch (event.data.action) {
+    case 'request-configuration':
+      event.source?.postMessage({
+        action: 'configuration',
+        address,
+        locale,
+        theme: isDarkMode ? 'dark' : 'light',
+        baseCurrency: getCoinCode(account.coinCode),
+        quoteCurrency: 'EUR',
+        mode: isTesting || debug ? 'debug' : 'production',
+        apiKey: btcdirectInfo.apiKey,
+      }, {
+        targetOrigin: event.origin
+      });
+      break;
+    }
+
+  }, [account, address, btcdirectInfo, locale, isDarkMode, isTesting]);
+
+  useEffect(() => {
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  });
+
   if (!account || !config) {
     return null;
   }
 
   const hasOnlyBTCAccounts = accounts.every(({ coinCode }) => isBitcoinOnly(coinCode));
   const translationContext = hasOnlyBTCAccounts ? 'bitcoin' : 'crypto';
 
-  const locale = i18n.resolvedLanguage ? localeMapping[i18n.resolvedLanguage] : 'en-GB';
-
   return (
     <div className="contentWithGuide">
       <div className="container">
@@ -137,15 +167,6 @@ export const BTCDirect = ({ accounts, code }: TProps) => {
                     frameBorder="0"
                     className={`${style.iframe} ${!iframeLoaded ? style.hide : ''}`}
                     allow="camera"
-                    data-locale={locale}
-                    data-theme={isDarkMode ? 'dark' : 'light'}
-                    data-base-currency={getCoinCode(account.coinCode)}
-                    data-quote-currency={'EUR'}
-                    data-address={address}
-                    data-mode={
-                      isTesting || debug ? 'debug' : 'production'
-                    }
-                    data-api-key={btcdirectInfo.apiKey}
                     src={btcdirectInfo.url}>
                   </iframe>
                 )}