chore: add max timeouts for frame requests (#3073)

Co-authored-by: Enes <[email protected]>

.changeset/cool-walls-fix.md

@@ -0,0 +1,23 @@
+---
+'@apps/laboratory': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-ui': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+---
+
+Added maximum timeouts for frame requests

apps/laboratory/playwright.config.ts

@@ -21,7 +21,7 @@ export default defineConfig<ModalFixture>({
   expect: {
     timeout: getValue(60, 15) * 1000
   },
-  timeout: 60 * 1000,
+  timeout: 90 * 1000,
 
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

apps/laboratory/tests/email.spec.ts

@@ -11,7 +11,8 @@ let page: ModalWalletPage
 let validator: ModalWalletValidator
 let context: BrowserContext
 let browserPage: Page
-/* eslint-enable init-declarations */
+let email: Email
+let tempEmail: string
 
 // -- Setup --------------------------------------------------------------------
 const emailTest = test.extend<{ library: string }>({
@@ -27,14 +28,15 @@ emailTest.beforeAll(async ({ browser, library }) => {
   page = new ModalWalletPage(browserPage, library, 'default')
   validator = new ModalWalletValidator(browserPage)
 
+  await page.page.context().setOffline(false)
   await page.load()
 
   const mailsacApiKey = process.env['MAILSAC_API_KEY']
   if (!mailsacApiKey) {
     throw new Error('MAILSAC_API_KEY is not set')
   }
-  const email = new Email(mailsacApiKey)
-  const tempEmail = await email.getEmailAddressToUse()
+  email = new Email(mailsacApiKey)
+  tempEmail = await email.getEmailAddressToUse()
   await page.emailFlow(tempEmail, context, mailsacApiKey)
 
   await validator.expectConnected()
@@ -105,3 +107,10 @@ emailTest('it should disconnect correctly', async () => {
   await page.disconnect()
   await validator.expectDisconnected()
 })
+
+emailTest('it should abort request if it takes more than 30 seconds', async () => {
+  await page.page.context().setOffline(true)
+  await page.loginWithEmail(tempEmail, false)
+  await page.page.waitForTimeout(30_000)
+  await validator.expectSnackbar('Something went wrong')
+})

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -179,7 +179,7 @@ export class ModalPage {
     await this.enterOTP(otp)
   }
 
-  async loginWithEmail(email: string) {
+  async loginWithEmail(email: string, validate = true) {
     // Connect Button doesn't have a proper `disabled` attribute so we need to wait for the button to change the text
     await this.page
       .getByTestId('connect-button')
@@ -188,12 +188,14 @@ export class ModalPage {
     await this.page.getByTestId('wui-email-input').locator('input').focus()
     await this.page.getByTestId('wui-email-input').locator('input').fill(email)
     await this.page.getByTestId('wui-email-input').locator('input').press('Enter')
-    await expect(
-      this.page.getByText(email),
-      `Expected current email: ${email} to be visible on the notification screen`
-    ).toBeVisible({
-      timeout: 20_000
-    })
+    if (validate) {
+      await expect(
+        this.page.getByText(email),
+        `Expected current email: ${email} to be visible on the notification screen`
+      ).toBeVisible({
+        timeout: 20_000
+      })
+    }
   }
 
   async loginWithSocial(socialOption: 'github', socialMail: string, socialPass: string) {

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -306,4 +306,10 @@ export class ModalValidator {
     const modal = this.page.getByTestId('w3m-modal')
     await expect(modal).toBeHidden()
   }
+
+  async expectSnackbar(message: string) {
+    await expect(this.page.getByTestId('wui-snackbar-message')).toHaveText(message, {
+      timeout: MAX_WAIT
+    })
+  }
 }

packages/ui/src/composites/wui-snackbar/index.ts

@@ -36,7 +36,9 @@ export class WuiSnackbar extends LitElement {
             icon=${this.icon}
             background="opaque"
           ></wui-icon-box>`}
-      <wui-text variant="paragraph-500" color="fg-100">${this.message}</wui-text>
+      <wui-text variant="paragraph-500" color="fg-100" data-testid="wui-snackbar-message"
+        >${this.message}</wui-text
+      >
     `
   }
 }

packages/wallet/src/W3mFrameProvider.ts

@@ -471,6 +471,8 @@ export class W3mFrameProvider {
       return type.replace('@w3m-app/', '')
     }
 
+    const abortController = new AbortController()
+
     const type = replaceEventType(event.type)
 
     const shouldCheckForTimeout = [
@@ -484,23 +486,27 @@ export class W3mFrameProvider {
       .map(replaceEventType)
       .includes(type)
 
-    if (shouldCheckForTimeout && this.onTimeout) {
-      // 15 seconds timeout
-      timer = setTimeout(this.onTimeout, 15_000)
+    if (shouldCheckForTimeout) {
+      timer = setTimeout(() => {
+        this.onTimeout?.()
+        abortController.abort()
+      }, 30_000)
     }
 
     return new Promise((resolve, reject) => {
       const id = Math.random().toString(36).substring(7)
       this.w3mLogger.logger.info?.({ event, id }, 'Sending app event')
       this.w3mFrame.events.postAppEvent({ ...event, id } as W3mFrameTypes.AppEvent)
-      const abortController = new AbortController()
+
       if (type === 'RPC_REQUEST') {
         const rpcEvent = event as Extract<W3mFrameTypes.AppEvent, { type: '@w3m-app/RPC_REQUEST' }>
         this.openRpcRequests = [...this.openRpcRequests, { ...rpcEvent.payload, abortController }]
       }
       abortController.signal.addEventListener('abort', () => {
         if (type === 'RPC_REQUEST') {
           reject(new Error('Request was aborted'))
+        } else {
+          reject(new Error('Something went wrong'))
         }
       })