feat: add logic to render AppKit Core in fullscreen on mobile environments (#5090)

Author: svenvoskamp

.changeset/blue-lizards-exist.md

@@ -0,0 +1,7 @@
+---
+'@reown/appkit-controllers': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+---
+
+Add a param to AppKit to make it possible to render AppKit Core in fullscreen on mobile

apps/laboratory/src/constants/appKitConfigs.ts

@@ -311,7 +311,8 @@ export const appKitConfigs = {
   'multichain-no-adapters': {
     ...commonAppKitConfig,
     adapters: [],
-    networks: ConstantsUtil.AllNetworks
+    networks: ConstantsUtil.AllNetworks,
+    enableMobileFullScreen: true
   },
   'multichain-wagmi-solana': {
     ...commonAppKitConfig,

packages/appkit/exports/constants.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = '1.8.6'
+export const PACKAGE_VERSION = '1.8.7'

packages/appkit/src/client/appkit-base-client.ts

@@ -418,6 +418,7 @@ export abstract class AppKitBaseClient {
     OptionsController.setEIP6963Enabled(options.enableEIP6963 !== false)
     OptionsController.setEnableNetworkSwitch(options.enableNetworkSwitch !== false)
     OptionsController.setEnableReconnect(options.enableReconnect !== false)
+    OptionsController.setEnableMobileFullScreen(options.enableMobileFullScreen === true)
 
     OptionsController.setEnableAuthLogger(options.enableAuthLogger !== false)
     OptionsController.setCustomRpcUrls(options.customRpcUrls)

packages/controllers/src/controllers/OptionsController.ts

@@ -4,6 +4,7 @@ import { subscribeKey as subKey } from 'valtio/vanilla/utils'
 import type { CaipNetworkId, CustomRpcUrl } from '@reown/appkit-common'
 
 import { ConstantsUtil } from '../utils/ConstantsUtil.js'
+import { CoreHelperUtil } from '../utils/CoreHelperUtil.js'
 import { OptionsUtil } from '../utils/OptionsUtil.js'
 import type { SIWXConfig } from '../utils/SIWXUtil.js'
 import type {
@@ -194,6 +195,11 @@ export interface OptionsControllerStatePublic {
    * @default true
    */
   enableNetworkSwitch?: boolean
+  /**
+   * Render the modal as full height on mobile web browsers.
+   * @default false
+   */
+  enableMobileFullScreen?: boolean
 }
 
 export interface OptionsControllerStateInternal {
@@ -216,7 +222,8 @@ const state = proxy<OptionsControllerState>({
   defaultAccountTypes: ConstantsUtil.DEFAULT_ACCOUNT_TYPES,
   enableNetworkSwitch: true,
   experimental_preferUniversalLinks: false,
-  remoteFeatures: {}
+  remoteFeatures: {},
+  enableMobileFullScreen: false
 })
 
 // -- Controller ---------------------------------------- //
@@ -415,6 +422,12 @@ export const OptionsController = {
     state.enableNetworkSwitch = enableNetworkSwitch
   },
 
+  setEnableMobileFullScreen(
+    enableMobileFullScreen: OptionsControllerState['enableMobileFullScreen']
+  ) {
+    state.enableMobileFullScreen = CoreHelperUtil.isMobile() && enableMobileFullScreen
+  },
+
   setEnableReconnect(enableReconnect: OptionsControllerState['enableReconnect']) {
     state.enableReconnect = enableReconnect
   },

packages/controllers/tests/controllers/OptionsController.test.ts

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { OptionsController } from '../../exports/index.js'
 import { ConstantsUtil } from '../../src/utils/ConstantsUtil.js'
+import { CoreHelperUtil } from '../../src/utils/CoreHelperUtil.js'
 import { OptionsUtil } from '../../src/utils/OptionsUtil.js'
 import type { RemoteFeatures, SocialProvider } from '../../src/utils/TypeUtil.js'
 
@@ -32,7 +33,8 @@ describe('OptionsController', () => {
         solana: 'eoa'
       },
       enableNetworkSwitch: true,
-      experimental_preferUniversalLinks: false
+      experimental_preferUniversalLinks: false,
+      enableMobileFullScreen: false
     })
   })
 
@@ -107,4 +109,18 @@ describe('OptionsController', () => {
     OptionsController.setSIWX({ signOutOnDisconnect: false } as any)
     expect(OptionsController.state.siwx!.signOutOnDisconnect).toEqual(false)
   })
+
+  it('should set enableMobileFullScreen to false when not on mobile', () => {
+    const spy = vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false)
+    OptionsController.setEnableMobileFullScreen(true)
+    expect(OptionsController.state.enableMobileFullScreen).toBe(false)
+    spy.mockRestore()
+  })
+
+  it('should set enableMobileFullScreen to true when on mobile', () => {
+    const spy = vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true)
+    OptionsController.setEnableMobileFullScreen(true)
+    expect(OptionsController.state.enableMobileFullScreen).toBe(true)
+    spy.mockRestore()
+  })
 })

packages/scaffold-ui/src/modal/w3m-modal/index.ts

@@ -69,6 +69,8 @@ export class W3mModalBase extends LitElement {
 
   @state() private padding = vars.spacing[1]
 
+  @state() private mobileFullScreen = OptionsController.state.enableMobileFullScreen
+
   public constructor() {
     super()
     this.initializeTheming()
@@ -97,6 +99,10 @@ export class W3mModalBase extends LitElement {
   public override firstUpdated() {
     this.dataset['border'] = HelpersUtil.hasFooter() ? 'true' : 'false'
 
+    if (this.mobileFullScreen) {
+      this.setAttribute('data-mobile-fullscreen', 'true')
+    }
+
     if (this.caipAddress) {
       if (this.enableEmbedded) {
         ModalController.close()
@@ -125,10 +131,6 @@ export class W3mModalBase extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     this.style.setProperty('--local-modal-padding', this.padding)
-    this.style.setProperty(
-      '--local-border-bottom-mobile-radius',
-      this.enableEmbedded ? `clamp(0px, ${vars.borderRadius['8']}, 44px)` : '0px'
-    )
 
     if (this.enableEmbedded) {
       return html`${this.contentTemplate()}
@@ -165,6 +167,9 @@ export class W3mModalBase extends LitElement {
 
   private async onOverlayClick(event: PointerEvent) {
     if (event.target === event.currentTarget) {
+      if (this.mobileFullScreen) {
+        return
+      }
       await this.handleClose()
     }
   }

packages/scaffold-ui/src/modal/w3m-modal/styles.ts

@@ -74,6 +74,10 @@ export default css`
     will-change: box-shadow;
   }
 
+  :host([data-mobile-fullscreen='true']) wui-card::before {
+    border-radius: 0px;
+  }
+
   :host([data-border='true']) wui-card::before {
     box-shadow: inset 0px 0px 0px 4px ${({ tokens }) => tokens.theme.foregroundSecondary};
   }
@@ -132,17 +136,37 @@ export default css`
   }
 
   @media (max-width: 430px) {
-    wui-flex {
+    :host([data-mobile-fullscreen='true']) {
+      height: 100dvh;
+    }
+    :host([data-mobile-fullscreen='true']) wui-flex {
+      align-items: stretch;
+    }
+    :host([data-mobile-fullscreen='true']) wui-card {
+      max-width: 100%;
+      height: 100%;
+      border-radius: 0;
+      border: none;
+    }
+    :host(:not([data-mobile-fullscreen='true'])) wui-flex {
       align-items: flex-end;
     }
 
-    wui-card {
+    :host(:not([data-mobile-fullscreen='true'])) wui-card {
       max-width: 100%;
-      border-bottom-left-radius: var(--local-border-bottom-mobile-radius);
-      border-bottom-right-radius: var(--local-border-bottom-mobile-radius);
       border-bottom: none;
     }
 
+    :host(:not([data-mobile-fullscreen='true'])) wui-card[data-embedded='true'] {
+      border-bottom-left-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+      border-bottom-right-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+    }
+
+    :host(:not([data-mobile-fullscreen='true'])) wui-card:not([data-embedded='true']) {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
     wui-card[shake='true'] {
       animation: w3m-shake 0.5s ${({ easings }) => easings['ease-out-power-2']};
     }

packages/scaffold-ui/src/partials/w3m-all-wallets-list/index.ts

@@ -6,6 +6,7 @@ import {
   ApiController,
   ConnectorController,
   CoreHelperUtil,
+  OptionsController,
   type WcWallet
 } from '@reown/appkit-controllers'
 import { customElement } from '@reown/appkit-ui'
@@ -41,6 +42,8 @@ export class W3mAllWalletsList extends LitElement {
 
   @state() private badge?: 'certified' | undefined
 
+  @state() private mobileFullScreen = OptionsController.state.enableMobileFullScreen
+
   public constructor() {
     super()
     this.unsubscribe.push(
@@ -65,6 +68,10 @@ export class W3mAllWalletsList extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
+    if (this.mobileFullScreen) {
+      this.setAttribute('data-mobile-fullscreen', 'true')
+    }
+
     return html`
       <wui-grid
         data-scroll=${!this.loading}

packages/scaffold-ui/src/partials/w3m-all-wallets-list/styles.ts

@@ -9,6 +9,10 @@ export default css`
     grid-template-columns: repeat(auto-fill, 104px);
   }
 
+  :host([data-mobile-fullscreen='true']) wui-grid {
+    max-height: none;
+  }
+
   @media (max-width: 350px) {
     wui-grid {
       grid-template-columns: repeat(2, 1fr);