refactor: several ui fixes on demo, banner image and metadata (#3485)

.changeset/old-bugs-exercise.md

@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Refactors connect view's mask image styling with resize observer for dynamic masking

apps/builder/app/globals.css

@@ -62,6 +62,9 @@ body {
     --apkt-border-lg: 16px;
 
     --box-shadow-picked-up: 0px 2px 8px 2px hsl(var(--apkt-background-primary) / 0.5);
+
+    /* Page Background */
+    --page-background-image-color: hsl(0, 0%, 87%);
   }
   .dark {
     --apkt-background-primary: 0 0% 13%;
@@ -105,6 +108,9 @@ body {
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
+
+    /* Page Background */
+    --page-background-image-color: hsl(0deg 0% 17.25%);
   }
 }
 
@@ -124,4 +130,9 @@ body {
   .ease {
     transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
   }
+  .page-container {
+    background-image: radial-gradient(var(--page-background-image-color) 1px, #ffffff00 1px);
+    background-size: 16px 16px;
+    background-position: -16px -8px;
+  }
 }

apps/builder/app/layout.tsx

@@ -9,7 +9,7 @@ import { AppKitProvider } from '@/providers/appkit-provider'
 import { headers } from 'next/headers'
 import './globals.css'
 
-const title = 'AppKit | Builder'
+const title = 'AppKit Demo'
 const description = 'The full stack toolkit to build onchain app UX'
 
 export const metadata: Metadata = {
@@ -19,8 +19,37 @@ export const metadata: Metadata = {
     title,
     description,
     locale: 'en_US',
-    type: 'website'
+    type: 'website',
+    images: [
+      {
+        url: '/appkit-demo-open-graph.png',
+        width: 1200,
+        height: 630
+      }
+    ]
+  },
+  twitter: {
+    card: 'summary_large_image',
+    images: [
+      {
+        url: '/appkit-demo-open-graph.png',
+        width: 1200,
+        height: 630
+      }
+    ]
   },
+  creator: 'reown, inc.',
+  keywords: [
+    'appkit',
+    'reown',
+    'demo',
+    'wallet',
+    'connect',
+    'web3',
+    'crypto',
+    'blockchain',
+    'dapp'
+  ],
   icons: {
     icon: [
       {

apps/builder/app/page.tsx

@@ -9,7 +9,7 @@ export default function Page() {
   return (
     <div
       className={cn(
-        'flex flex-col-reverse items-center md:items-start md:flex-row p-4 bg-background gap-4 pt-10 md:pt-4 h-full overflow-auto'
+        'page-container flex flex-col-reverse items-center md:items-start md:flex-row p-4 bg-background gap-4 pt-10 md:pt-4 h-full overflow-auto'
       )}
     >
       <div className="flex max-w-[450px] md:max-w-[340px] w-full bg-transparent md:bg-fg-primary h-none md:h-full text-foreground p-0 md:p-6 flex-col rounded-2xl overflow-none md:overflow-y-auto h-auto pb-20">

apps/builder/components/sidebar-content.tsx

@@ -41,7 +41,7 @@ export function SidebarContent() {
         </div>
       </div>
 
-      <div className="flex flex-col items-center w-full gap-2 mt-8">
+      <div className="flex flex-col items-center w-full gap-2 mt-8 pb-2">
         <Link
           href="https://docs.reown.com/appkit/overview"
           target="_blank"

apps/builder/components/social-option-item/social-option-item.tsx

@@ -74,8 +74,8 @@ export const SocialOptionItem = React.memo(
       const socials = config.features.socials || []
       const { isDraggingByKey } = useAppKitContext()
       const emailDragging = isDraggingByKey['email']
-      const walletsDragging = isDraggingByKey['wallets']
-      const socialsDragging = isDraggingByKey['socials']
+      const walletsDragging = isDraggingByKey['wallet']
+      const socialsDragging = isDraggingByKey['social']
       const isAnyDragging = emailDragging || walletsDragging || socialsDragging
 
       useEffect(() => {

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

@@ -13,6 +13,7 @@ import {
 import { UiHelperUtil, customElement, initializeTheming } from '@reown/appkit-ui'
 import { LitElement, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import styles from './styles.js'
 import { type CaipAddress, type CaipNetwork } from '@reown/appkit-common'
 
@@ -93,6 +94,7 @@ export class W3mModal extends LitElement {
   private contentTemplate() {
     return html` <wui-card
       shake="${this.shake}"
+      data-embedded="${ifDefined(this.enableEmbedded)}"
       role="alertdialog"
       aria-modal="true"
       tabindex="0"

packages/scaffold-ui/src/views/w3m-connect-view/index.ts

@@ -15,6 +15,9 @@ import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { WalletUtil } from '../../utils/WalletUtil.js'
 
+// -- Constants ----------------------------------------- //
+const SCROLL_THRESHOLD = 470
+
 @customElement('w3m-connect-view')
 export class W3mConnectView extends LitElement {
   public static override styles = styles
@@ -35,6 +38,8 @@ export class W3mConnectView extends LitElement {
 
   @state() private checked = false
 
+  private resizeObserver?: ResizeObserver
+
   public constructor() {
     super()
     this.unsubscribe.push(
@@ -49,15 +54,23 @@ export class W3mConnectView extends LitElement {
 
   public override disconnectedCallback() {
     this.unsubscribe.forEach(unsubscribe => unsubscribe())
+    this.resizeObserver?.disconnect()
     const connectEl = this.shadowRoot?.querySelector('.connect')
     connectEl?.removeEventListener('scroll', this.handleConnectListScroll.bind(this))
   }
 
   public override firstUpdated() {
     const connectEl = this.shadowRoot?.querySelector('.connect')
-    // Use requestAnimationFrame to access scroll properties before the next repaint
-    requestAnimationFrame(this.handleConnectListScroll.bind(this))
-    connectEl?.addEventListener('scroll', this.handleConnectListScroll.bind(this))
+    if (connectEl) {
+      // Use requestAnimationFrame to access scroll properties before the next repaint
+      requestAnimationFrame(this.handleConnectListScroll.bind(this))
+      connectEl?.addEventListener('scroll', this.handleConnectListScroll.bind(this))
+      this.resizeObserver = new ResizeObserver(() => {
+        this.handleConnectListScroll()
+      })
+      this.resizeObserver.observe(connectEl)
+      this.handleConnectListScroll()
+    }
   }
 
   // -- Render -------------------------------------------- //
@@ -324,23 +337,43 @@ export class W3mConnectView extends LitElement {
   private handleConnectListScroll() {
     const connectEl = this.shadowRoot?.querySelector('.connect') as HTMLElement | undefined
 
-    // If connect element is not found or is not overflowing do not apply the mask
-    if (!connectEl || connectEl.scrollHeight <= 470) {
+    if (!connectEl) {
       return
     }
 
-    connectEl.style.setProperty(
-      '--connect-scroll--top-opacity',
-      MathUtil.interpolate([0, 50], [0, 1], connectEl.scrollTop).toString()
-    )
-    connectEl.style.setProperty(
-      '--connect-scroll--bottom-opacity',
-      MathUtil.interpolate(
-        [0, 50],
-        [0, 1],
-        connectEl.scrollHeight - connectEl.scrollTop - connectEl.offsetHeight
-      ).toString()
-    )
+    const shouldApplyMask = connectEl.scrollHeight > SCROLL_THRESHOLD
+
+    if (shouldApplyMask) {
+      connectEl.style.setProperty(
+        '--connect-mask-image',
+        `linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, calc(1 - var(--connect-scroll--top-opacity))) 0px,
+          rgba(200, 200, 200, calc(1 - var(--connect-scroll--top-opacity))) 1px,
+          black 40px,
+          black calc(100% - 40px),
+          rgba(155, 155, 155, calc(1 - var(--connect-scroll--bottom-opacity))) calc(100% - 1px),
+          rgba(0, 0, 0, calc(1 - var(--connect-scroll--bottom-opacity))) 100%
+        )`
+      )
+
+      connectEl.style.setProperty(
+        '--connect-scroll--top-opacity',
+        MathUtil.interpolate([0, 50], [0, 1], connectEl.scrollTop).toString()
+      )
+      connectEl.style.setProperty(
+        '--connect-scroll--bottom-opacity',
+        MathUtil.interpolate(
+          [0, 50],
+          [0, 1],
+          connectEl.scrollHeight - connectEl.scrollTop - connectEl.offsetHeight
+        ).toString()
+      )
+    } else {
+      connectEl.style.setProperty('--connect-mask-image', 'none')
+      connectEl.style.setProperty('--connect-scroll--top-opacity', '0')
+      connectEl.style.setProperty('--connect-scroll--bottom-opacity', '0')
+    }
   }
 
   // -- Private Methods ----------------------------------- //

packages/scaffold-ui/src/views/w3m-connect-view/styles.ts

@@ -4,6 +4,7 @@ export default css`
   :host {
     --connect-scroll--top-opacity: 0;
     --connect-scroll--bottom-opacity: 0;
+    --connect-mask-image: none;
   }
 
   .connect {
@@ -13,15 +14,7 @@ export default css`
     overflow-x: hidden;
     transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
     will-change: opacity;
-    mask-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, calc(1 - var(--connect-scroll--top-opacity))) 0px,
-      rgba(200, 200, 200, calc(1 - var(--connect-scroll--top-opacity))) 1px,
-      black 40px,
-      black calc(100% - 40px),
-      rgba(155, 155, 155, calc(1 - var(--connect-scroll--bottom-opacity))) calc(100% - 1px),
-      rgba(0, 0, 0, calc(1 - var(--connect-scroll--bottom-opacity))) 100%
-    );
+    mask-image: var(--connect-mask-image);
   }
 
   .guide {

packages/scaffold-ui/test/views/w3m-connect-view.test.ts

@@ -1,5 +1,5 @@
 import { W3mConnectView } from '../../src/views/w3m-connect-view/index'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest'
 import { fixture } from '@open-wc/testing'
 import { html } from 'lit'
 import { HelpersUtil } from '../utils/HelpersUtil'
@@ -24,6 +24,15 @@ const INSTALLED_WALLET = {
   type: 'ANNOUNCED'
 } as ConnectorWithProviders
 
+// Mock ResizeObserver
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+
 describe('W3mConnectView - Connection Methods', () => {
   beforeEach(() => {
     vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false)

packages/ui/src/components/wui-card/styles.ts

@@ -8,4 +8,10 @@ export default css`
     background-color: var(--wui-color-modal-bg);
     overflow: hidden;
   }
+
+  :host([data-embedded='true']) {
+    box-shadow:
+      0 0 0 1px var(--wui-color-gray-glass-005),
+      0px 4px 12px 4px var(--w3m-card-embedded-shadow-color);
+  }
 `

packages/ui/src/utils/ThemeUtil.ts

@@ -639,6 +639,8 @@ function createRootStyles(themeVariables?: ThemeVariables) {
         --wui-thumbnail-border-base: #252525;
 
         --wui-wallet-button-bg-base: var(--wui-color-bg-125);
+
+        --w3m-card-embedded-shadow-color: rgb(17 17 18 / 25%);
       }
     `,
     dark: css`
@@ -745,6 +747,8 @@ function createRootStyles(themeVariables?: ThemeVariables) {
         --wui-color-gray-glass-090: rgba(0, 0, 0, 0.9);
 
         --wui-color-dark-glass-100: rgba(233, 233, 233, 1);
+
+        --w3m-card-embedded-shadow-color: rgb(224 225 233 / 25%);
       }
     `
   }