+
{
diff --git a/apps/builder/public/appkit-demo-open-graph.png b/apps/builder/public/appkit-demo-open-graph.png
new file mode 100644
index 0000000000..785dc0a020
Binary files /dev/null and b/apps/builder/public/appkit-demo-open-graph.png differ
diff --git a/packages/scaffold-ui/src/modal/w3m-modal/index.ts b/packages/scaffold-ui/src/modal/w3m-modal/index.ts
index 7554e5197c..919b7482d7 100644
--- a/packages/scaffold-ui/src/modal/w3m-modal/index.ts
+++ b/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` 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 ----------------------------------- //
diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts b/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts
index 6418b58467..ade8d7cafb 100644
--- a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts
+++ b/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 {
diff --git a/packages/scaffold-ui/test/views/w3m-connect-view.test.ts b/packages/scaffold-ui/test/views/w3m-connect-view.test.ts
index 00923c1d65..5b333cc4c6 100644
--- a/packages/scaffold-ui/test/views/w3m-connect-view.test.ts
+++ b/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)
diff --git a/packages/ui/src/components/wui-card/styles.ts b/packages/ui/src/components/wui-card/styles.ts
index 05c7289251..b95f699287 100644
--- a/packages/ui/src/components/wui-card/styles.ts
+++ b/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);
+ }
`
diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
index cb9e487898..24ce83a492 100644
--- a/packages/ui/src/utils/ThemeUtil.ts
+++ b/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%);
}
`
}