feat: debug mode / alert ui

apps/gallery/stories/composites/wui-alertbar.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui/src/composites/wui-alertbar'
+import '../../components/gallery-container'
+import type { WuiAlertBar } from '@reown/appkit-ui/src/composites/wui-alertbar'
+import { html } from 'lit'
+import { colorOptions, iconOptions } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiAlertBar>
+
+export default {
+  title: 'Composites/wui-alertbar',
+  args: {
+    message: 'Alert',
+    backgroundColor: 'fg-350',
+    iconColor: 'fg-325',
+    icon: 'info'
+  },
+  argTypes: {
+    backgroundColor: {
+      options: colorOptions,
+      control: { type: 'select' }
+    },
+    iconColor: {
+      options: colorOptions,
+      control: { type: 'select' }
+    },
+    icon: {
+      options: iconOptions,
+      control: { type: 'select' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`
+    <gallery-container width="336">
+      <wui-alertbar
+        iconColor=${args.iconColor}
+        backgroundColor=${args.backgroundColor}
+        icon=${args.icon}
+        message=${args.message}
+      >
+      </wui-alertbar>
+    </gallery-container>
+  `
+}

apps/laboratory/package.json

@@ -17,6 +17,7 @@
     "playwright:test:wallet": "playwright test --grep 'wallet.spec.ts'",
     "playwright:test:no-email": "playwright test --grep 'no-email.spec.ts'",
     "playwright:test:no-socials": "playwright test --grep 'no-socials.spec.ts'",
+    "playwright:test:debug-mode": "playwright test --grep 'debug-mode.spec.ts'",
     "playwright:test:email": "playwright test --grep 'email.spec.ts'",
     "playwright:test:siwe": "playwright test --grep siwe.spec.ts",
     "playwright:test:siwe-email": "playwright test --grep siwe-email.spec.ts",
@@ -44,6 +45,7 @@
     "playwright:debug:wallet": "pnpm playwright:test:wallet --debug",
     "playwright:debug:no-email": "pnpm playwright:test:no-email --debug",
     "playwright:debug:no-socials": "pnpm playwright:test:no-socials --debug",
+    "playwright:debug:debug-mode": "pnpm playwright:test:debug-mode --debug",
     "playwright:debug:email": "pnpm playwright:test:email --debug",
     "playwright:debug:siwe": "pnpm playwright:test:siwe --debug",
     "playwright:debug:siwe-email": "pnpm playwright:test:siwe-email --debug",

apps/laboratory/src/pages/library/ethers-debug-mode.tsx

@@ -0,0 +1,35 @@
+import { EthersTests } from '../../components/Ethers/EthersTests'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { createAppKit } from '@reown/appkit/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
+import { EthersAdapter } from '@reown/appkit-adapter-ethers'
+import { siweConfig } from '../../utils/SiweUtils'
+import { arbitrum, mainnet, optimism, polygon, zkSync, sepolia } from '@reown/appkit/networks'
+
+const ethersAdapter = new EthersAdapter()
+
+const modal = createAppKit({
+  adapters: [ethersAdapter],
+  networks: [arbitrum, mainnet, optimism, polygon, zkSync, sepolia],
+  defaultNetwork: mainnet,
+  projectId: '',
+  features: {
+    analytics: true,
+    socials: []
+  },
+  siweConfig,
+  debug: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <EthersModalInfo />
+      <EthersTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/ethers5-debug-mode.tsx

@@ -0,0 +1,37 @@
+import { createAppKit } from '@reown/appkit/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { siweConfig } from '../../utils/SiweUtils'
+import { SiweData } from '../../components/Siwe/SiweData'
+import { Ethers5Tests } from '../../components/Ethers/Ethers5Tests'
+import { Ethers5ModalInfo } from '../../components/Ethers/Ethers5ModalInfo'
+import { Ethers5Adapter } from '@reown/appkit-adapter-ethers5'
+import { arbitrum, mainnet, optimism, polygon, zkSync, sepolia } from '@reown/appkit/networks'
+
+const ethersAdapter = new Ethers5Adapter()
+
+const modal = createAppKit({
+  adapters: [ethersAdapter],
+  networks: [arbitrum, mainnet, optimism, polygon, zkSync, sepolia],
+  defaultNetwork: mainnet,
+  projectId: '',
+  features: {
+    analytics: true,
+    socials: []
+  },
+  siweConfig,
+  debug: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <Ethers5ModalInfo />
+      <SiweData />
+      <Ethers5Tests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/solana-debug-mode.tsx

@@ -0,0 +1,37 @@
+import { createAppKit } from '@reown/appkit/react'
+import { SolanaAdapter } from '@reown/appkit-adapter-solana/react'
+
+import { ThemeStore } from '../../utils/StoreUtil'
+import { solana, solanaDevnet, solanaTestnet } from '@reown/appkit/networks'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { SolanaTests } from '../../components/Solana/SolanaTests'
+import { HuobiWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
+
+const networks = [solana, solanaTestnet, solanaDevnet]
+
+const solanaWeb3JsAdapter = new SolanaAdapter({
+  wallets: [new HuobiWalletAdapter(), new SolflareWalletAdapter()]
+})
+
+const modal = createAppKit({
+  adapters: [solanaWeb3JsAdapter],
+  networks,
+  projectId: '',
+  metadata: ConstantsUtil.Metadata,
+  features: {
+    socials: []
+  },
+  debug: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Solana() {
+  return (
+    <>
+      <AppKitButtons />
+      <SolanaTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/wagmi-debug-mode.tsx

@@ -0,0 +1,45 @@
+import { createAppKit } from '@reown/appkit/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { WagmiTests } from '../../components/Wagmi/WagmiTests'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { arbitrum, mainnet, optimism, polygon, zkSync, sepolia } from '@reown/appkit/networks'
+import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+
+const queryClient = new QueryClient()
+
+const networks = [mainnet, optimism, polygon, zkSync, arbitrum, sepolia]
+
+const wagmiAdapter = new WagmiAdapter({
+  ssr: true,
+  networks,
+  projectId: ''
+})
+
+const modal = createAppKit({
+  adapters: [wagmiAdapter],
+  networks,
+  defaultNetwork: mainnet,
+  projectId: '',
+  features: {
+    analytics: true,
+    socials: []
+  },
+  debug: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  return (
+    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <AppKitButtons />
+        <WagmiModalInfo />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

apps/laboratory/tests/debug-mode.spec.ts

@@ -0,0 +1,33 @@
+import { test, type BrowserContext } from '@playwright/test'
+import { ModalPage } from './shared/pages/ModalPage'
+import { ModalValidator } from './shared/validators/ModalValidator'
+
+/* eslint-disable init-declarations */
+let modalPage: ModalPage
+let modalValidator: ModalValidator
+let context: BrowserContext
+
+// -- Setup --------------------------------------------------------------------
+const debugModeTest = test.extend<{ library: string }>({
+  library: ['wagmi', { option: true }]
+})
+
+debugModeTest.beforeAll(async ({ browser, library }) => {
+  context = await browser.newContext()
+  const browserPage = await context.newPage()
+
+  modalPage = new ModalPage(browserPage, library, 'debug-mode')
+  modalValidator = new ModalValidator(browserPage)
+
+  await modalPage.load()
+  await modalPage.openConnectModal()
+})
+
+debugModeTest.afterAll(async () => {
+  await modalPage.page.close()
+})
+
+// -- Tests --------------------------------------------------------------------
+debugModeTest('should show alert bar if Project ID is not configured', async () => {
+  await modalValidator.expectAlertBarText('Project ID Not Configured')
+})

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

@@ -15,6 +15,7 @@ const maliciousUrl = 'https://malicious-app-verify-simulation.vercel.app'
 export type ModalFlavor =
   | 'default'
   | 'external'
+  | 'debug-mode'
   | 'verify-valid'
   | 'verify-domain-mismatch'
   | 'verify-evil'

apps/laboratory/tests/shared/utils/project.ts

@@ -42,6 +42,7 @@ const SINGLE_ADAPTER_EVM_TESTS = [
   'email.spec.ts',
   'no-email.spec.ts',
   'no-socials.spec.ts',
+  'debug-mode.spec.ts',
   'siwe-email.spec.ts',
   'siwe-sa.spec.ts',
   'siwe.spec.ts',
@@ -55,6 +56,7 @@ const SINGLE_ADAPTER_SOLANA_TESTS = [
   'email.spec.ts',
   'no-email.spec.ts',
   'no-socials.spec.ts',
+  'debug-mode.spec.ts',
   'wallet.spec.ts'
 ]
 

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

@@ -127,6 +127,11 @@ export class ModalValidator {
     await expect(socialList).toBeHidden()
   }
 
+  async expectAlertBarText(text: string) {
+    const alertBarText = this.page.getByTestId('wui-alertbar-text')
+    await expect(alertBarText).toHaveText(text)
+  }
+
   async expectEmailLogin() {
     const emailInput = this.page.getByTestId('wui-email-input')
     await expect(emailInput).toBeVisible()

packages/adapters/ethers/src/client.ts

@@ -13,6 +13,7 @@ import {
   AccountController,
   ChainController,
   CoreHelperUtil,
+  AlertController,
   type CombinedProvider,
   type Connector
 } from '@reown/appkit-core'
@@ -32,7 +33,7 @@ import {
 } from '@reown/appkit-wallet'
 import { ConstantsUtil as CoreConstantsUtil } from '@reown/appkit-core'
 import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common'
-import { ConstantsUtil, HelpersUtil, PresetsUtil } from '@reown/appkit-utils'
+import { ConstantsUtil, ErrorUtil, HelpersUtil, PresetsUtil } from '@reown/appkit-utils'
 import UniversalProvider from '@walletconnect/universal-provider'
 import type { ConnectionControllerClient, NetworkControllerClient } from '@reown/appkit-core'
 import { WcConstantsUtil } from '@reown/appkit'
@@ -214,10 +215,6 @@ export class EthersAdapter {
   }
 
   public construct(appKit: AppKit, options: AppKitOptions) {
-    if (!options.projectId) {
-      throw new Error('appkit:ethers-client:initialize - projectId is undefined')
-    }
-
     this.appKit = appKit
     this.options = options
     this.caipNetworks = options.networks
@@ -1112,7 +1109,19 @@ export class EthersAdapter {
 
   private async syncAuthConnector(projectId: string, bypassWindowCheck = false) {
     if (bypassWindowCheck || typeof window !== 'undefined') {
-      this.authProvider = W3mFrameProviderSingleton.getInstance(projectId)
+      this.authProvider = W3mFrameProviderSingleton.getInstance({
+        projectId,
+        onTimeout: () => {
+          AlertController.open(ErrorUtil.ALERT_ERRORS.INVALID_APP_CONFIGURATION, 'error')
+          // eslint-disable-next-line no-console
+          console.error(
+            ErrorUtil.ALERT_ERRORS.ORIGIN_NOT_WHITELISTED_SOCIALS.replace(
+              '{{origin}}',
+              window.origin
+            )
+          )
+        }
+      })
 
       this.appKit?.addConnector({
         id: ConstantsUtil.AUTH_CONNECTOR_ID,

packages/adapters/ethers5/src/client.ts

@@ -13,6 +13,7 @@ import {
   AccountController,
   ChainController,
   CoreHelperUtil,
+  AlertController,
   type CombinedProvider,
   type Connector
 } from '@reown/appkit-core'
@@ -31,7 +32,7 @@ import {
   type W3mFrameTypes
 } from '@reown/appkit-wallet'
 import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common'
-import { ConstantsUtil, HelpersUtil, PresetsUtil } from '@reown/appkit-utils'
+import { ConstantsUtil, ErrorUtil, HelpersUtil, PresetsUtil } from '@reown/appkit-utils'
 import UniversalProvider from '@walletconnect/universal-provider'
 import type { ConnectionControllerClient, NetworkControllerClient } from '@reown/appkit-core'
 import { ConstantsUtil as CoreConstantsUtil } from '@reown/appkit-core'
@@ -218,10 +219,6 @@ export class Ethers5Adapter {
   }
 
   public construct(appKit: AppKit, options: AppKitOptions) {
-    if (!options.projectId) {
-      throw new Error('appkit:ethers-client:initialize - projectId is undefined')
-    }
-
     this.appKit = appKit
     this.options = options
     this.caipNetworks = options.networks
@@ -1124,7 +1121,19 @@ export class Ethers5Adapter {
 
   private async syncAuthConnector(projectId: string, bypassWindowCheck = false) {
     if (bypassWindowCheck || typeof window !== 'undefined') {
-      this.authProvider = W3mFrameProviderSingleton.getInstance(projectId)
+      this.authProvider = W3mFrameProviderSingleton.getInstance({
+        projectId,
+        onTimeout: () => {
+          AlertController.open(ErrorUtil.ALERT_ERRORS.INVALID_APP_CONFIGURATION, 'error')
+          // eslint-disable-next-line no-console
+          console.error(
+            ErrorUtil.ALERT_ERRORS.ORIGIN_NOT_WHITELISTED_SOCIALS.replace(
+              '{{origin}}',
+              window.origin
+            )
+          )
+        }
+      })
 
       this.appKit?.addConnector({
         id: ConstantsUtil.AUTH_CONNECTOR_ID,