Merge pull request #2154 from oasisprotocol/lw/less-embed-transak

Fallback to transak button if embedded doesn't initialize after 5sec

Author: lukaw3d

.changelog/2154.bugfix.md

@@ -0,0 +1 @@
+Fallback to transak button if embedded doesn't initialize after 5sec

playwright/tests/extension.spec.ts

@@ -2,8 +2,6 @@ import { test } from '../utils/extensionTestExtend'
 import { expect } from '@playwright/test'
 import { warnSlowApi } from '../utils/warnSlowApi'
 import { mockApi } from '../utils/mockApi'
-import { fillPrivateKeyAndPassword } from '../utils/fillPrivateKey'
-import { privateKey, privateKeyAddress } from '../../src/utils/__fixtures__/test-inputs'
 
 test.beforeEach(async ({ context }) => {
   await warnSlowApi(context)
@@ -48,7 +46,6 @@ test.describe('The extension popup should load', () => {
    */
   test('Transak can not be embedded in extension', async ({ page, extensionPopupURL }) => {
     test.fail()
-    await page.setViewportSize({ width: 1280, height: 720 })
 
     /* TODO: reenable when transak throws only a few errors
     await expectNoErrorsInConsole(page, {
@@ -61,28 +58,14 @@ test.describe('The extension popup should load', () => {
       },
     })
     */
-    await page.goto(`${extensionPopupURL}/open-wallet/private-key`)
-    await fillPrivateKeyAndPassword(page, {
-      privateKey: privateKey,
-      privateKeyAddress: privateKeyAddress,
-      persistenceCheckboxDisabled: 'disabled-checked',
+    await page.goto(`${extensionPopupURL}/`)
+    await page.evaluate(() => {
+      const iframe = document.createElement('iframe')
+      iframe.src = 'https://global.transak.com'
+      document.body.appendChild(iframe)
     })
-    await expect(page.getByTestId('account-selector')).toBeVisible()
-    await page.getByRole('link', { name: 'Buy' }).click()
-    await expect(page.getByRole('heading', { name: 'Buy ROSE' })).toBeVisible()
-
-    await page
-      .getByText(
-        'I understand that I’m using a third-party solution and Oasis* does not carry any responsibility over the usage of this solution.',
-      )
-      .click()
+    await page.locator('iframe').scrollIntoViewIfNeeded()
     await expect(page.frameLocator('iframe')!.getByAltText('Powered by Transak')).toBeVisible()
-    // Wait for conversion to be loaded otherwise clicking "Buy now" early reloads the iframe
-    await expect(page.frameLocator('iframe')!.locator('#transak-calculator-source:disabled')).toHaveValue(
-      /\d/,
-    )
-    await page.frameLocator('iframe')!.getByText('Buy now').click()
-    await expect(page.frameLocator('iframe')!.getByText(/email/i).first()).toBeVisible()
   })
 
   test('recover from fatal errors', async ({ extensionPopupURL, context }) => {

playwright/tests/fiat.spec.ts

@@ -54,7 +54,7 @@ test.describe('Fiat on-ramp', () => {
     await expectNoErrorsInConsole(page)
     await setup(page)
     await page.route('https://*.transak.com/?*', route =>
-      route.fulfill({ status: 301, headers: { Location: 'https://global-stg.transak.com/' } }),
+      route.fulfill({ status: 302, headers: { Location: 'https://global-stg.transak.com/' } }),
     )
 
     await page
@@ -70,7 +70,7 @@ test.describe('Fiat on-ramp', () => {
     await expectNoErrorsInConsole(page)
     await setup(page)
     await page.route('https://*.transak.com/*', route =>
-      route.fulfill({ status: 301, headers: { Location: 'https://phishing-transak.com/' } }),
+      route.fulfill({ status: 302, headers: { Location: 'https://phishing-transak.com/' } }),
     )
     await page.route('https://phishing-transak.com/', route => route.fulfill({ body: `phishing` }))
 

src/app/pages/FiatOnrampPage/index.tsx

@@ -55,7 +55,9 @@ export function FiatOnramp() {
   const thirdPartyAcknowledged = useSelector(selectThirdPartyAcknowledged)
   // Intentionally not responsive. If it initializes with embedded iframe, user
   // inputs some data, then resizes: do not lose user's inputs!
-  const [shouldOpenTransakInNewTab] = useState(window.innerWidth <= 768 || window.innerHeight <= 700)
+  const [shouldOpenTransakInNewTab, setShouldOpenTransakInNewTab] = useState(
+    window.innerWidth <= 768 || window.innerHeight <= 700,
+  )
 
   // Ignore refreshing account balance. Don't destroy and re-create iframe if balance changes and account balance is loading again.
   const [isInitialLoading, setInitialLoading] = useState(true)
@@ -164,6 +166,23 @@ export function FiatOnramp() {
                   // 'allow-top-navigation-by-user-activation',
                 ].join(' ')}
                 src={transakUrl}
+                onLoad={event => {
+                  // Fallback to button if embedding fails.
+                  // Note: onError isn't called on X-Frame-Options errors, and onLoad is called even on error. So rely on Transak's postMessage.
+                  const onMessage = (event: MessageEvent) => {
+                    if (event?.data?.event_id === 'TRANSAK_WIDGET_INITIALISED') {
+                      // Success
+                      clearTimeout(failureTimeoutId)
+                      window.removeEventListener('message', onMessage)
+                    }
+                  }
+                  window.addEventListener('message', onMessage)
+                  const failureTimeoutId = window.setTimeout(() => {
+                    // Error (assumed - after 5 seconds of not initializing)
+                    setShouldOpenTransakInNewTab(true)
+                    window.removeEventListener('message', onMessage)
+                  }, 5_000)
+                }}
                 style={{
                   display: 'block',
                   width: '100%',