From 5bf3f6a9dcd014555c6e39ac11643be3133563aa Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 31 Oct 2024 09:09:06 +0000 Subject: [PATCH 01/19] feat: terms of policy checkbox --- .../composites/wui-checkbox.stories.ts | 18 +++++++ .../ui/src/composites/wui-checkbox/index.ts | 43 ++++++++++++++++ .../ui/src/composites/wui-checkbox/styles.ts | 51 +++++++++++++++++++ packages/ui/src/utils/ThemeUtil.ts | 16 +++++- 4 files changed, 126 insertions(+), 2 deletions(-) create mode 100644 apps/gallery/stories/composites/wui-checkbox.stories.ts create mode 100644 packages/ui/src/composites/wui-checkbox/index.ts create mode 100644 packages/ui/src/composites/wui-checkbox/styles.ts diff --git a/apps/gallery/stories/composites/wui-checkbox.stories.ts b/apps/gallery/stories/composites/wui-checkbox.stories.ts new file mode 100644 index 0000000000..aed7eeec81 --- /dev/null +++ b/apps/gallery/stories/composites/wui-checkbox.stories.ts @@ -0,0 +1,18 @@ +import type { Meta } from '@storybook/web-components' +import '@reown/appkit-ui/src/composites/wui-checkbox' +import '@reown/appkit-ui/src/components/wui-icon' +import type { WuiCheckBox } from '@reown/appkit-ui/src/composites/wui-checkbox' +import { html } from 'lit' + +type Component = Meta + +export default { + title: 'Composites/wui-checkbox', + args: {}, + argTypes: {} +} as Component + +export const Default: Component = { + render: () => + html`I read and agree to 's Terms of Service` +} diff --git a/packages/ui/src/composites/wui-checkbox/index.ts b/packages/ui/src/composites/wui-checkbox/index.ts new file mode 100644 index 0000000000..5876d282f7 --- /dev/null +++ b/packages/ui/src/composites/wui-checkbox/index.ts @@ -0,0 +1,43 @@ +import { html, LitElement } from 'lit' +import { customElement } from '../../utils/WebComponentsUtil.js' +import { createRef, ref, type Ref } from 'lit/directives/ref.js' +import styles from './styles.js' + +@customElement('wui-checkbox') +export class WuiCheckBox extends LitElement { + static override styles = [styles] + + // -- Members ------------------------------------------- // + public inputElementRef: Ref = createRef() + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ` + } + + // -- Private ------------------------------------------- // + + private dispatchChangeEvent() { + this.dispatchEvent( + new CustomEvent('checkboxChange', { + detail: this.inputElementRef.value?.checked, + bubbles: true, + composed: true + }) + ) + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-checkbox': WuiCheckBox + } +} diff --git a/packages/ui/src/composites/wui-checkbox/styles.ts b/packages/ui/src/composites/wui-checkbox/styles.ts new file mode 100644 index 0000000000..4b57f6a69f --- /dev/null +++ b/packages/ui/src/composites/wui-checkbox/styles.ts @@ -0,0 +1,51 @@ +import { css } from 'lit' + +export default css` + label { + display: flex; + align-items: center; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + label > input[type='checkbox'] { + height: 0; + width: 0; + opacity: 0; + } + + label > span { + width: var(--wui-spacing-xl); + height: var(--wui-spacing-xl); + border-radius: var(--wui-border-radius-3xs); + border-width: 1px; + border-style: solid; + border-color: var(--wui-color-gray-glass-010); + display: flex; + align-items: center; + justify-content: center; + transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg); + will-change: background-color; + } + + label > span:hover { + background-color: var(--wui-color-gray-glass-010); + } + + label input[type='checkbox']:checked + span { + background-color: var(--wui-color-blue-base-90); + } + + label > span > wui-icon { + opacity: 0; + transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-lg); + will-change: opacity; + } + + label > input[type='checkbox']:checked + span wui-icon { + opacity: 1; + } +` diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts index cc96e08fe7..547b01b2df 100644 --- a/packages/ui/src/utils/ThemeUtil.ts +++ b/packages/ui/src/utils/ThemeUtil.ts @@ -257,6 +257,7 @@ function createRootStyles(themeVariables?: ThemeVariables) { --wui-color-error-125: var(--wui-color-error-base-125); --wui-color-blue-100: var(--wui-color-blue-base-100); + --wui-color-blue-90: var(--wui-color-blue-base-90); --wui-icon-box-bg-error-100: var(--wui-icon-box-bg-error-base-100); --wui-icon-box-bg-blue-100: var(--wui-icon-box-bg-blue-base-100); @@ -472,6 +473,11 @@ function createRootStyles(themeVariables?: ThemeVariables) { var(--w3m-color-mix) var(--w3m-color-mix-strength), var(--wui-color-blue-base-100) ); + --wui-color-blue-90: color-mix( + in srgb, + var(--w3m-color-mix) var(--w3m-color-mix-strength), + var(--wui-color-blue-base-90) + ); --wui-color-error-125: color-mix( in srgb, var(--w3m-color-mix) var(--w3m-color-mix-strength), @@ -567,7 +573,8 @@ function createRootStyles(themeVariables?: ThemeVariables) { --wui-color-error-base-100: #f25a67; --wui-color-error-base-125: #df4a34; - --wui-color-blue-base-100: #667dff; + --wui-color-blue-base-100: rgba(102, 125, 255, 1); + --wui-color-blue-base-90: rgba(102, 125, 255, 0.9); --wui-color-success-glass-001: rgba(38, 217, 98, 0.01); --wui-color-success-glass-002: rgba(38, 217, 98, 0.02); @@ -670,7 +677,8 @@ function createRootStyles(themeVariables?: ThemeVariables) { --wui-color-error-base-100: #f05142; --wui-color-error-base-125: #df4a34; - --wui-color-blue-base-100: #667dff; + --wui-color-blue-base-100: rgba(102, 125, 255, 1); + --wui-color-blue-base-90: rgba(102, 125, 255, 0.9); --wui-color-success-glass-001: rgba(38, 181, 98, 0.01); --wui-color-success-glass-002: rgba(38, 181, 98, 0.02); @@ -816,6 +824,10 @@ export const colorStyles = css` color: var(--wui-color-blue-100); } + .wui-color-blue-90 { + color: var(--wui-color-blue-90); + } + .wui-color-error-125 { color: var(--wui-color-error-125); } From 73c50f7825210e0bf60db619dcf65a3db3560d5a Mon Sep 17 00:00:00 2001 From: MK Date: Fri, 1 Nov 2024 14:02:46 +0000 Subject: [PATCH 02/19] refactor: wui-checkbox component --- .../composites/wui-checkbox.stories.ts | 14 +++-- packages/scaffold-ui/exports/index.ts | 1 + .../src/partials/w3m-legal-checkbox/index.ts | 58 +++++++++++++++++++ .../src/partials/w3m-legal-checkbox/styles.ts | 9 +++ .../src/views/w3m-connect-view/index.ts | 45 ++++++++++---- .../src/views/w3m-connect-view/styles.ts | 16 ++++- packages/ui/index.ts | 1 + .../ui/src/composites/wui-checkbox/index.ts | 14 ++++- .../ui/src/composites/wui-checkbox/styles.ts | 5 ++ 9 files changed, 144 insertions(+), 19 deletions(-) create mode 100644 packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts create mode 100644 packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts diff --git a/apps/gallery/stories/composites/wui-checkbox.stories.ts b/apps/gallery/stories/composites/wui-checkbox.stories.ts index aed7eeec81..a420dd0ddc 100644 --- a/apps/gallery/stories/composites/wui-checkbox.stories.ts +++ b/apps/gallery/stories/composites/wui-checkbox.stories.ts @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/web-components' import '@reown/appkit-ui/src/composites/wui-checkbox' import '@reown/appkit-ui/src/components/wui-icon' +import '@reown/appkit-ui/src/components/wui-text' import type { WuiCheckBox } from '@reown/appkit-ui/src/composites/wui-checkbox' import { html } from 'lit' @@ -8,11 +9,16 @@ type Component = Meta export default { title: 'Composites/wui-checkbox', - args: {}, - argTypes: {} + args: { + checked: false + }, + argTypes: { + checked: { + control: { type: 'boolean' } + } + } } as Component export const Default: Component = { - render: () => - html`I read and agree to 's Terms of Service` + render: (args) => html`` } diff --git a/packages/scaffold-ui/exports/index.ts b/packages/scaffold-ui/exports/index.ts index a7ded149b5..7c9c69e155 100644 --- a/packages/scaffold-ui/exports/index.ts +++ b/packages/scaffold-ui/exports/index.ts @@ -84,6 +84,7 @@ export * from '../src/partials/w3m-onramp-activity-item/index.js' export * from '../src/partials/w3m-onramp-input/index.js' export * from '../src/partials/w3m-onramp-provider-item/index.js' export * from '../src/partials/w3m-legal-footer/index.js' +export * from '../src/partials/w3m-legal-checkbox/index.js' export * from '../src/partials/w3m-mobile-download-links/index.js' export * from '../src/partials/w3m-onramp-providers-footer/index.js' export * from '../src/partials/w3m-snackbar/index.js' diff --git a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts new file mode 100644 index 0000000000..c7da68a252 --- /dev/null +++ b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts @@ -0,0 +1,58 @@ +import { OptionsController } from '@reown/appkit-core' +import { customElement } from '@reown/appkit-ui' +import { LitElement, html } from 'lit' +import styles from './styles.js' + +@customElement('w3m-legal-checkbox') +export class W3mLegalCheckbox extends LitElement { + public static override styles = [styles] + + // -- Render -------------------------------------------- // + public override render() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + if (!termsConditionsUrl && !privacyPolicyUrl) { + return null + } + + return html` + + + By connecting your wallet, you agree to our ${this.termsTemplate()} ${this.andTemplate()} + ${this.privacyTemplate()} + + + ` + } + + // -- Private ------------------------------------------- // + private andTemplate() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + return termsConditionsUrl && privacyPolicyUrl ? 'and' : '' + } + + private termsTemplate() { + const { termsConditionsUrl } = OptionsController.state + if (!termsConditionsUrl) { + return null + } + + return html`Terms of Service` + } + + private privacyTemplate() { + const { privacyPolicyUrl } = OptionsController.state + if (!privacyPolicyUrl) { + return null + } + + return html`Privacy Policy` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-legal-checkbox': W3mLegalCheckbox + } +} diff --git a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts new file mode 100644 index 0000000000..ea1dc0507e --- /dev/null +++ b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts @@ -0,0 +1,9 @@ +import { css } from 'lit' + +export default css` + a { + text-decoration: none; + color: var(--wui-color-fg-150); + font-weight: 500; + } +` diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 702169c5b2..dfad5169fc 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -11,6 +11,7 @@ import { } from '@reown/appkit-core' import { state } from 'lit/decorators/state.js' import { property } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-view') export class W3mConnectView extends LitElement { @@ -28,6 +29,8 @@ export class W3mConnectView extends LitElement { @property() private walletGuide: WalletGuideType = 'get-started' + @state() private checked = false + public constructor() { super() this.unsubscribe.push( @@ -45,6 +48,8 @@ export class W3mConnectView extends LitElement { // -- Render -------------------------------------------- // public override render() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const socials = this.features?.socials const enableWallets = OptionsController.state.enableWallets @@ -52,18 +57,32 @@ export class W3mConnectView extends LitElement { const socialOrEmailLoginEnabled = socialsExist || this.authConnector return html` - - - - ${this.walletListTemplate()} + + + + + + + ${this.walletListTemplate()} + + ${this.guideTemplate()} + - ${this.guideTemplate()} - ` } @@ -106,6 +125,10 @@ export class W3mConnectView extends LitElement { return html`` } + private onCheckBoxChange(event: CustomEvent) { + this.checked = Boolean(event.detail) + } + private guideTemplate() { const socials = this.features?.socials const enableWallets = OptionsController.state.enableWallets 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 007fa2dc1d..4b21010417 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts @@ -1,18 +1,30 @@ import { css } from 'lit' export default css` - :host > wui-flex { + .connect-scroll-view { max-height: clamp(360px, 540px, 80vh); scrollbar-width: none; overflow-y: scroll; overflow-x: hidden; } - :host > wui-flex::-webkit-scrollbar { + .connect-scroll-view::-webkit-scrollbar { display: none; } .all-wallets { flex-flow: column; } + + w3m-legal-checkbox { + margin: 0 auto; + max-width: fit-content; + padding: var(--wui-spacing-3xs) var(--wui-spacing-s) 0 var(--wui-spacing-s); + } + + .disabled-connect-view { + /* opacity: 0.3; + pointer-events: none; + user-select: none; */ + } ` diff --git a/packages/ui/index.ts b/packages/ui/index.ts index f532c1d542..4f1e0cd2c8 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -76,6 +76,7 @@ export * from './src/composites/wui-icon-button/index.js' export * from './src/composites/wui-list-button/index.js' export * from './src/composites/wui-list-social/index.js' export * from './src/composites/wui-select/index.js' +export * from './src/composites/wui-checkbox/index.js' export * from './src/layout/wui-flex/index.js' export * from './src/layout/wui-grid/index.js' diff --git a/packages/ui/src/composites/wui-checkbox/index.ts b/packages/ui/src/composites/wui-checkbox/index.ts index 5876d282f7..54833f7b88 100644 --- a/packages/ui/src/composites/wui-checkbox/index.ts +++ b/packages/ui/src/composites/wui-checkbox/index.ts @@ -2,6 +2,8 @@ import { html, LitElement } from 'lit' import { customElement } from '../../utils/WebComponentsUtil.js' import { createRef, ref, type Ref } from 'lit/directives/ref.js' import styles from './styles.js' +import { property } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('wui-checkbox') export class WuiCheckBox extends LitElement { @@ -10,13 +12,21 @@ export class WuiCheckBox extends LitElement { // -- Members ------------------------------------------- // public inputElementRef: Ref = createRef() + // -- State & Properties --------------------------------- // + @property({ type: Boolean }) public checked?: boolean = undefined + // -- Render -------------------------------------------- // public override render() { return html` diff --git a/packages/ui/src/composites/wui-checkbox/styles.ts b/packages/ui/src/composites/wui-checkbox/styles.ts index 4b57f6a69f..ac3f7f895a 100644 --- a/packages/ui/src/composites/wui-checkbox/styles.ts +++ b/packages/ui/src/composites/wui-checkbox/styles.ts @@ -9,17 +9,22 @@ export default css` -moz-user-select: none; -ms-user-select: none; user-select: none; + column-gap: var(--wui-spacing-1xs); } label > input[type='checkbox'] { height: 0; width: 0; opacity: 0; + pointer-events: none; + position: absolute; } label > span { width: var(--wui-spacing-xl); height: var(--wui-spacing-xl); + min-width: var(--wui-spacing-xl); + min-height: var(--wui-spacing-xl); border-radius: var(--wui-border-radius-3xs); border-width: 1px; border-style: solid; From 4aedf3ca2b4e4e12ca2ce6844248750e23096140 Mon Sep 17 00:00:00 2001 From: MK Date: Mon, 4 Nov 2024 14:36:02 +0000 Subject: [PATCH 03/19] chore: setup checkbox for all terms of policy views --- .../src/partials/w3m-legal-checkbox/index.ts | 15 ++---- .../src/partials/w3m-legal-checkbox/styles.ts | 5 ++ .../views/w3m-connect-socials-view/index.ts | 36 +++++++++++++- .../views/w3m-connect-socials-view/styles.ts | 10 ++++ .../src/views/w3m-connect-view/index.ts | 47 ++++++++++++------- .../src/views/w3m-connect-view/styles.ts | 12 ++--- .../views/w3m-connect-wallets-view/index.ts | 37 ++++++++++++++- .../views/w3m-connect-wallets-view/styles.ts | 10 ++++ .../w3m-onramp-fiat-select-view/index.ts | 38 ++++++++++++++- .../w3m-onramp-fiat-select-view/styles.ts | 15 ++++++ .../w3m-onramp-tokens-select-view/index.ts | 38 ++++++++++++++- .../w3m-onramp-tokens-select-view/styles.ts | 15 ++++++ 12 files changed, 240 insertions(+), 38 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts index c7da68a252..61d745beca 100644 --- a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts @@ -9,17 +9,10 @@ export class W3mLegalCheckbox extends LitElement { // -- Render -------------------------------------------- // public override render() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state - - if (!termsConditionsUrl && !privacyPolicyUrl) { - return null - } - return html` - By connecting your wallet, you agree to our ${this.termsTemplate()} ${this.andTemplate()} - ${this.privacyTemplate()} + I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()} ` @@ -34,20 +27,22 @@ export class W3mLegalCheckbox extends LitElement { private termsTemplate() { const { termsConditionsUrl } = OptionsController.state + if (!termsConditionsUrl) { return null } - return html`Terms of Service` + return html`terms of service` } private privacyTemplate() { const { privacyPolicyUrl } = OptionsController.state + if (!privacyPolicyUrl) { return null } - return html`Privacy Policy` + return html`privacy policy` } } diff --git a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts index ea1dc0507e..84a7d2ed3c 100644 --- a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts +++ b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts @@ -1,6 +1,11 @@ import { css } from 'lit' export default css` + :host { + display: flex; + align-items: center; + justify-content: center; + } a { text-decoration: none; color: var(--wui-color-fg-150); diff --git a/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts index 3c27ee1ae7..35735ee525 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts @@ -2,20 +2,54 @@ import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' import styles from './styles.js' +import { OptionsController } from '@reown/appkit-core' +import { state } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-socials-view') export class W3mConnectSocialsView extends LitElement { public static override styles = styles + @state() private checked = false + // -- Render -------------------------------------------- // public override render() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + const legal = termsConditionsUrl || privacyPolicyUrl + return html` - + ${this.legalCheckBoxTemplate()} + ` } + + // -- Private ------------------------------------------- // + private legalCheckBoxTemplate() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + if (!termsConditionsUrl && !privacyPolicyUrl) { + return null + } + + return html`` + } + + // -- Private Methods ----------------------------------- // + + private onCheckBoxChange(event: CustomEvent) { + this.checked = Boolean(event.detail) + } } declare global { diff --git a/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts b/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts index a7b23cd611..5172de8c76 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts @@ -5,8 +5,18 @@ export default css` max-height: clamp(360px, 540px, 80vh); overflow: scroll; scrollbar-width: none; + transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); + will-change: opacity; } wui-flex::-webkit-scrollbar { display: none; } + w3m-legal-checkbox { + padding: var(--wui-spacing-s); + } + wui-flex.disabled { + opacity: 0.3; + pointer-events: none; + user-select: none; + } ` diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index dfad5169fc..5018f01fa7 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -11,7 +11,7 @@ import { } from '@reown/appkit-core' import { state } from 'lit/decorators/state.js' import { property } from 'lit/decorators.js' -import { ifDefined } from 'lit/directives/if-defined.js' +import { classMap } from 'lit/directives/class-map.js' @customElement('w3m-connect-view') export class W3mConnectView extends LitElement { @@ -50,6 +50,13 @@ export class W3mConnectView extends LitElement { public override render() { const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const legal = termsConditionsUrl || privacyPolicyUrl + + const classes = { + 'connect-scroll-view': true, + disabled: Boolean(legal) && !this.checked && this.walletGuide === 'get-started' + } + const socials = this.features?.socials const enableWallets = OptionsController.state.enableWallets @@ -57,16 +64,9 @@ export class W3mConnectView extends LitElement { const socialOrEmailLoginEnabled = socialsExist || this.authConnector return html` - - - + + ${this.legalCheckBoxTemplate()} + @@ -125,10 +124,6 @@ export class W3mConnectView extends LitElement { return html`` } - private onCheckBoxChange(event: CustomEvent) { - this.checked = Boolean(event.detail) - } - private guideTemplate() { const socials = this.features?.socials const enableWallets = OptionsController.state.enableWallets @@ -158,10 +153,30 @@ export class W3mConnectView extends LitElement { ` } + private legalCheckBoxTemplate() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + if (!termsConditionsUrl && !privacyPolicyUrl) { + return null + } + + if (this.walletGuide === 'explore') { + return null + } + + return html`` + } + // -- Private Methods ----------------------------------- // private onContinueWalletClick() { RouterController.push('ConnectWallets') } + + private onCheckBoxChange(event: CustomEvent) { + this.checked = Boolean(event.detail) + } } declare global { 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 4b21010417..4fe9047857 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts @@ -6,6 +6,8 @@ export default css` scrollbar-width: none; overflow-y: scroll; overflow-x: hidden; + transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); + will-change: opacity; } .connect-scroll-view::-webkit-scrollbar { @@ -17,14 +19,12 @@ export default css` } w3m-legal-checkbox { - margin: 0 auto; - max-width: fit-content; - padding: var(--wui-spacing-3xs) var(--wui-spacing-s) 0 var(--wui-spacing-s); + padding: var(--wui-spacing-s); } - .disabled-connect-view { - /* opacity: 0.3; + .connect-scroll-view.disabled { + opacity: 0.3; pointer-events: none; - user-select: none; */ + user-select: none; } ` diff --git a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts index bc416249cb..1bdde9bdc6 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts @@ -2,20 +2,55 @@ import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' import styles from './styles.js' +import { state } from 'lit/decorators.js' +import { OptionsController } from '@reown/appkit-core' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-wallets-view') export class W3mConnectWalletsView extends LitElement { public static override styles = styles + @state() private checked = false + // -- Render -------------------------------------------- // public override render() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + const legal = termsConditionsUrl || privacyPolicyUrl + return html` - + ${this.legalCheckBoxTemplate()} + ` } + + // -- Private ------------------------------------------- // + + private legalCheckBoxTemplate() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + if (!termsConditionsUrl && !privacyPolicyUrl) { + return null + } + + return html`` + } + + // -- Private Methods ----------------------------------- // + + private onCheckBoxChange(event: CustomEvent) { + this.checked = Boolean(event.detail) + } } declare global { diff --git a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts index a7b23cd611..5172de8c76 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts @@ -5,8 +5,18 @@ export default css` max-height: clamp(360px, 540px, 80vh); overflow: scroll; scrollbar-width: none; + transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); + will-change: opacity; } wui-flex::-webkit-scrollbar { display: none; } + w3m-legal-checkbox { + padding: var(--wui-spacing-s); + } + wui-flex.disabled { + opacity: 0.3; + pointer-events: none; + user-select: none; + } ` diff --git a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts index 0b0eaabfe8..67853c1114 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts @@ -1,4 +1,9 @@ -import { OnRampController, ModalController, AssetController } from '@reown/appkit-core' +import { + OnRampController, + ModalController, + AssetController, + OptionsController +} from '@reown/appkit-core' import type { PaymentCurrency } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' @@ -17,6 +22,7 @@ export class W3mOnrampFiatSelectView extends LitElement { @state() public selectedCurrency = OnRampController.state.paymentCurrency @state() public currencies = OnRampController.state.paymentCurrencies @state() private currencyImages = AssetController.state.currencyImages + @state() private checked = false public constructor() { super() @@ -37,8 +43,18 @@ export class W3mOnrampFiatSelectView extends LitElement { // -- Render -------------------------------------------- // public override render() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + const legal = termsConditionsUrl || privacyPolicyUrl + return html` - + ${this.legalCheckBoxTemplate()} + ${this.currenciesTemplate()} @@ -60,6 +76,18 @@ export class W3mOnrampFiatSelectView extends LitElement { ) } + private legalCheckBoxTemplate() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + if (!termsConditionsUrl && !privacyPolicyUrl) { + return null + } + + return html`` + } + private selectCurrency(currency: PaymentCurrency) { if (!currency) { return @@ -68,6 +96,12 @@ export class W3mOnrampFiatSelectView extends LitElement { OnRampController.setPaymentCurrency(currency) ModalController.close() } + + // -- Private Methods ----------------------------------- // + + private onCheckBoxChange(event: CustomEvent) { + this.checked = Boolean(event.detail) + } } declare global { diff --git a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts index fae4252e75..45c7fc2f3c 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts @@ -6,7 +6,22 @@ export default css` overflow: auto; } + wui-flex { + transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); + will-change: opacity; + } + wui-grid::-webkit-scrollbar { display: none; } + + w3m-legal-checkbox { + padding: 0 var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s); + } + + wui-flex.disabled { + opacity: 0.3; + pointer-events: none; + user-select: none; + } ` diff --git a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts index 4f2e57c35f..3c1d4a8942 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts @@ -1,4 +1,9 @@ -import { OnRampController, ModalController, AssetController } from '@reown/appkit-core' +import { + OnRampController, + ModalController, + AssetController, + OptionsController +} from '@reown/appkit-core' import type { PurchaseCurrency } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' @@ -17,6 +22,7 @@ export class W3mOnrampTokensView extends LitElement { @state() public selectedCurrency = OnRampController.state.purchaseCurrencies @state() public tokens = OnRampController.state.purchaseCurrencies @state() private tokenImages = AssetController.state.tokenImages + @state() private checked = false public constructor() { super() @@ -37,8 +43,18 @@ export class W3mOnrampTokensView extends LitElement { // -- Render -------------------------------------------- // public override render() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + const legal = termsConditionsUrl || privacyPolicyUrl + return html` - + ${this.legalCheckBoxTemplate()} + ${this.currenciesTemplate()} @@ -71,6 +87,24 @@ export class W3mOnrampTokensView extends LitElement { OnRampController.setPurchaseCurrency(currency) ModalController.close() } + + private legalCheckBoxTemplate() { + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + if (!termsConditionsUrl && !privacyPolicyUrl) { + return null + } + + return html`` + } + + // -- Private Methods ----------------------------------- // + + private onCheckBoxChange(event: CustomEvent) { + this.checked = Boolean(event.detail) + } } declare global { diff --git a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts index fae4252e75..4ed832adaf 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts @@ -6,7 +6,22 @@ export default css` overflow: auto; } + wui-flex { + transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); + will-change: opacity; + } + + w3m-legal-checkbox { + padding: 0 var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s); + } + wui-grid::-webkit-scrollbar { display: none; } + + wui-flex.disabled { + opacity: 0.3; + pointer-events: none; + user-select: none; + } ` From a8bc01a71d3ed84a4bc1c4f840bc6eafa375a885 Mon Sep 17 00:00:00 2001 From: MK Date: Tue, 5 Nov 2024 14:46:35 +0000 Subject: [PATCH 04/19] chore: add graident effect --- apps/laboratory/src/pages/library/wagmi.tsx | 7 +++ .../src/views/w3m-connect-view/index.ts | 58 +++++++++++++++++-- .../src/views/w3m-connect-view/styles.ts | 28 ++++++++- 3 files changed, 85 insertions(+), 8 deletions(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index e727ca2eb2..7e080cfa58 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -20,6 +20,13 @@ const modal = createAppKit({ adapters: [wagmiAdapter], networks: wagmiAdapter.caipNetworks, projectId: ConstantsUtil.ProjectId, + termsConditionsUrl: 'https://www.reown.com/terms', + privacyPolicyUrl: 'https://www.reown.com/privacy', + featuredWalletIds: [ + 'f2436c67184f158d1beda5df53298ee84abfc367581e4505134b5bcf5f46697d', + 'e9ff15be73584489ca4a66f64d32c4537711797e30b6660dbcb71ea72a42b1f4', + 'bc949c5d968ae81310268bf9193f9c9fb7bb4e1283e1284af8f2bd4992535fd6' + ], features: { analytics: true } diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 5018f01fa7..21b026b9f4 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -1,4 +1,4 @@ -import { customElement } from '@reown/appkit-ui' +import { MathUtil, customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' import styles from './styles.js' import { @@ -44,6 +44,15 @@ export class W3mConnectView extends LitElement { public override disconnectedCallback() { this.unsubscribe.forEach(unsubscribe => unsubscribe()) + 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)) } // -- Render -------------------------------------------- // @@ -53,7 +62,7 @@ export class W3mConnectView extends LitElement { const legal = termsConditionsUrl || privacyPolicyUrl const classes = { - 'connect-scroll-view': true, + connect: true, disabled: Boolean(legal) && !this.checked && this.walletGuide === 'get-started' } @@ -79,8 +88,8 @@ export class W3mConnectView extends LitElement { ${this.walletListTemplate()} - ${this.guideTemplate()} + ${this.guideTemplate()} ` } @@ -128,8 +137,17 @@ export class W3mConnectView extends LitElement { const socials = this.features?.socials const enableWallets = OptionsController.state.enableWallets + const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + + const legal = termsConditionsUrl || privacyPolicyUrl + const socialsExist = socials && socials.length + const classes = { + 'guide': true, + disabled: Boolean(legal) && !this.checked && this.walletGuide === 'get-started' + } + if (!this.authConnector && !socialsExist) { return null } @@ -140,14 +158,22 @@ export class W3mConnectView extends LitElement { if (this.walletGuide === 'explore') { return html` - + ` } return html` - + ` @@ -169,6 +195,28 @@ 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 <= 548) { + return + } + + connectEl.style.setProperty( + '--connect-scroll--top-opacity', + MathUtil.interpolate([0, 100], [0, 1], connectEl.scrollTop).toString() + ) + connectEl.style.setProperty( + '--connect-scroll--bottom-opacity', + MathUtil.interpolate( + [0, 100], + [0, 1], + connectEl.scrollHeight - connectEl.scrollTop - connectEl.offsetHeight + ).toString() + ) + } + // -- Private Methods ----------------------------------- // private onContinueWalletClick() { RouterController.push('ConnectWallets') 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 4fe9047857..2fa3fbba07 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts @@ -1,16 +1,37 @@ import { css } from 'lit' export default css` - .connect-scroll-view { + :host { + --connect-scroll--top-opacity: 0; + --connect-scroll--bottom-opacity: 0; + } + + .connect { max-height: clamp(360px, 540px, 80vh); scrollbar-width: none; overflow-y: scroll; 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 80px, + black 110px, + black calc(100% - 150px), + black calc(100% - 110px), + 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% + ); + } + + .guide { + transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); + will-change: opacity; } - .connect-scroll-view::-webkit-scrollbar { + .connect::-webkit-scrollbar { display: none; } @@ -22,7 +43,8 @@ export default css` padding: var(--wui-spacing-s); } - .connect-scroll-view.disabled { + .connect.disabled, + .guide.disabled { opacity: 0.3; pointer-events: none; user-select: none; From ae12324474b7dd280d290608a307e9f50f949f98 Mon Sep 17 00:00:00 2001 From: MK Date: Tue, 5 Nov 2024 16:14:55 +0000 Subject: [PATCH 05/19] chore: add enableLegalCheckbox in OptionsController --- apps/laboratory/src/pages/library/wagmi.tsx | 7 ---- packages/appkit/src/client.ts | 1 + .../core/src/controllers/OptionsController.ts | 9 ++++++ .../src/partials/w3m-legal-checkbox/index.ts | 12 ++++++- .../src/partials/w3m-legal-checkbox/styles.ts | 3 ++ .../src/partials/w3m-legal-footer/index.ts | 6 +++- .../views/w3m-connect-socials-view/index.ts | 27 ++++------------ .../views/w3m-connect-socials-view/styles.ts | 3 -- .../src/views/w3m-connect-view/index.ts | 32 +++++++++---------- .../src/views/w3m-connect-view/styles.ts | 6 +--- .../views/w3m-connect-wallets-view/index.ts | 27 ++++------------ .../views/w3m-connect-wallets-view/styles.ts | 3 -- .../w3m-onramp-fiat-select-view/index.ts | 23 ++++--------- .../w3m-onramp-fiat-select-view/styles.ts | 4 --- .../w3m-onramp-tokens-select-view/index.ts | 23 ++++--------- .../w3m-onramp-tokens-select-view/styles.ts | 4 --- 16 files changed, 72 insertions(+), 118 deletions(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index 7e080cfa58..e727ca2eb2 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -20,13 +20,6 @@ const modal = createAppKit({ adapters: [wagmiAdapter], networks: wagmiAdapter.caipNetworks, projectId: ConstantsUtil.ProjectId, - termsConditionsUrl: 'https://www.reown.com/terms', - privacyPolicyUrl: 'https://www.reown.com/privacy', - featuredWalletIds: [ - 'f2436c67184f158d1beda5df53298ee84abfc367581e4505134b5bcf5f46697d', - 'e9ff15be73584489ca4a66f64d32c4537711797e30b6660dbcb71ea72a42b1f4', - 'bc949c5d968ae81310268bf9193f9c9fb7bb4e1283e1284af8f2bd4992535fd6' - ], features: { analytics: true } diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index e33a84b57c..49220d7f77 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -470,6 +470,7 @@ export class AppKit { OptionsController.setCustomWallets(options.customWallets) OptionsController.setFeatures(options.features) OptionsController.setEnableWalletConnect(options.enableWalletConnect !== false) + OptionsController.setEnableLegalCheckbox(options.enableLegalCheckbox) OptionsController.setEnableWallets(options.enableWallets !== false) if (options.metadata) { diff --git a/packages/core/src/controllers/OptionsController.ts b/packages/core/src/controllers/OptionsController.ts index 21a98becea..1bf85e351f 100644 --- a/packages/core/src/controllers/OptionsController.ts +++ b/packages/core/src/controllers/OptionsController.ts @@ -100,6 +100,11 @@ export interface OptionsControllerStatePublic { * @default true */ enableWalletConnect?: boolean + /** + * Enable or disable the checkbox for accepting terms of service and/or privacy policy. + * @default false + */ + enableLegalCheckbox?: boolean /** * Enable or disable debug mode in your AppKit. This is useful if you want to see UI alerts when debugging. * @default false @@ -234,6 +239,10 @@ export const OptionsController = { state.enableWalletConnect = enableWalletConnect }, + setEnableLegalCheckbox(enableLegalCheckbox: OptionsControllerState['enableLegalCheckbox']) { + state.enableLegalCheckbox = enableLegalCheckbox + }, + setEnableWallets(enableWallets: OptionsControllerState['enableWallets']) { state.enableWallets = enableWallets }, diff --git a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts index 61d745beca..a611216fc0 100644 --- a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts @@ -9,6 +9,16 @@ export class W3mLegalCheckbox extends LitElement { // -- Render -------------------------------------------- // public override render() { + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state + + if (!termsConditionsUrl && !privacyPolicyUrl) { + return null + } + + if (!enableLegalCheckbox) { + return null + } + return html` @@ -27,7 +37,7 @@ export class W3mLegalCheckbox extends LitElement { private termsTemplate() { const { termsConditionsUrl } = OptionsController.state - + if (!termsConditionsUrl) { return null } diff --git a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts index 84a7d2ed3c..81b6e490a2 100644 --- a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts +++ b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts @@ -6,6 +6,9 @@ export default css` align-items: center; justify-content: center; } + wui-checkbox { + padding: var(--wui-spacing-s); + } a { text-decoration: none; color: var(--wui-color-fg-150); diff --git a/packages/scaffold-ui/src/partials/w3m-legal-footer/index.ts b/packages/scaffold-ui/src/partials/w3m-legal-footer/index.ts index e8b3a4a9bd..f4f7de184e 100644 --- a/packages/scaffold-ui/src/partials/w3m-legal-footer/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-legal-footer/index.ts @@ -9,12 +9,16 @@ export class W3mLegalFooter extends LitElement { // -- Render -------------------------------------------- // public override render() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state if (!termsConditionsUrl && !privacyPolicyUrl) { return null } + if (enableLegalCheckbox) { + return null + } + return html` diff --git a/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts index 35735ee525..42e53d8c50 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts @@ -14,17 +14,18 @@ export class W3mConnectSocialsView extends LitElement { // -- Render -------------------------------------------- // public override render() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state - const legal = termsConditionsUrl || privacyPolicyUrl + const legalUrl = termsConditionsUrl || privacyPolicyUrl + const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) return html` - ${this.legalCheckBoxTemplate()} + @@ -32,22 +33,8 @@ export class W3mConnectSocialsView extends LitElement { ` } - // -- Private ------------------------------------------- // - private legalCheckBoxTemplate() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state - - if (!termsConditionsUrl && !privacyPolicyUrl) { - return null - } - - return html`` - } - // -- Private Methods ----------------------------------- // - - private onCheckBoxChange(event: CustomEvent) { + private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } } diff --git a/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts b/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts index 5172de8c76..1b620b9873 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-socials-view/styles.ts @@ -11,9 +11,6 @@ export default css` wui-flex::-webkit-scrollbar { display: none; } - w3m-legal-checkbox { - padding: var(--wui-spacing-s); - } wui-flex.disabled { opacity: 0.3; pointer-events: none; diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 21b026b9f4..05184691ee 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -57,13 +57,14 @@ export class W3mConnectView extends LitElement { // -- Render -------------------------------------------- // public override render() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state - const legal = termsConditionsUrl || privacyPolicyUrl + const legalUrl = termsConditionsUrl || privacyPolicyUrl + const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) const classes = { connect: true, - disabled: Boolean(legal) && !this.checked && this.walletGuide === 'get-started' + disabled: showLegalCheckbox && !this.checked && this.walletGuide === 'get-started' } const socials = this.features?.socials @@ -74,7 +75,7 @@ export class W3mConnectView extends LitElement { return html` - ${this.legalCheckBoxTemplate()} + ${this.legalCheckboxTemplate()} ${this.guideTemplate()} + ` } @@ -137,15 +139,19 @@ export class W3mConnectView extends LitElement { const socials = this.features?.socials const enableWallets = OptionsController.state.enableWallets - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state const legal = termsConditionsUrl || privacyPolicyUrl const socialsExist = socials && socials.length const classes = { - 'guide': true, - disabled: Boolean(legal) && !this.checked && this.walletGuide === 'get-started' + guide: true, + disabled: + Boolean(enableLegalCheckbox) && + Boolean(legal) && + !this.checked && + this.walletGuide === 'get-started' } if (!this.authConnector && !socialsExist) { @@ -179,19 +185,13 @@ export class W3mConnectView extends LitElement { ` } - private legalCheckBoxTemplate() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state - - if (!termsConditionsUrl && !privacyPolicyUrl) { - return null - } - + private legalCheckboxTemplate() { if (this.walletGuide === 'explore') { return null } return html`` } @@ -222,7 +222,7 @@ export class W3mConnectView extends LitElement { RouterController.push('ConnectWallets') } - private onCheckBoxChange(event: CustomEvent) { + private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } } 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 2fa3fbba07..5a5b410eb7 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts @@ -7,7 +7,7 @@ export default css` } .connect { - max-height: clamp(360px, 540px, 80vh); + max-height: clamp(360px, 478px, 80vh); scrollbar-width: none; overflow-y: scroll; overflow-x: hidden; @@ -39,10 +39,6 @@ export default css` flex-flow: column; } - w3m-legal-checkbox { - padding: var(--wui-spacing-s); - } - .connect.disabled, .guide.disabled { opacity: 0.3; diff --git a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts index 1bdde9bdc6..84a58e9f34 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts @@ -14,17 +14,18 @@ export class W3mConnectWalletsView extends LitElement { // -- Render -------------------------------------------- // public override render() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state - const legal = termsConditionsUrl || privacyPolicyUrl + const legalUrl = termsConditionsUrl || privacyPolicyUrl + const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) return html` - ${this.legalCheckBoxTemplate()} + @@ -32,23 +33,9 @@ export class W3mConnectWalletsView extends LitElement { ` } - // -- Private ------------------------------------------- // - - private legalCheckBoxTemplate() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state - - if (!termsConditionsUrl && !privacyPolicyUrl) { - return null - } - - return html`` - } - // -- Private Methods ----------------------------------- // - private onCheckBoxChange(event: CustomEvent) { + private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } } diff --git a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts index 5172de8c76..1b620b9873 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/styles.ts @@ -11,9 +11,6 @@ export default css` wui-flex::-webkit-scrollbar { display: none; } - w3m-legal-checkbox { - padding: var(--wui-spacing-s); - } wui-flex.disabled { opacity: 0.3; pointer-events: none; diff --git a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts index 67853c1114..0d9c2c7b96 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts @@ -43,17 +43,18 @@ export class W3mOnrampFiatSelectView extends LitElement { // -- Render -------------------------------------------- // public override render() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state - const legal = termsConditionsUrl || privacyPolicyUrl + const legalUrl = termsConditionsUrl || privacyPolicyUrl + const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) return html` - ${this.legalCheckBoxTemplate()} + ${this.currenciesTemplate()} @@ -76,18 +77,6 @@ export class W3mOnrampFiatSelectView extends LitElement { ) } - private legalCheckBoxTemplate() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state - - if (!termsConditionsUrl && !privacyPolicyUrl) { - return null - } - - return html`` - } - private selectCurrency(currency: PaymentCurrency) { if (!currency) { return @@ -99,7 +88,7 @@ export class W3mOnrampFiatSelectView extends LitElement { // -- Private Methods ----------------------------------- // - private onCheckBoxChange(event: CustomEvent) { + private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } } diff --git a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts index 45c7fc2f3c..09f7c76155 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/styles.ts @@ -15,10 +15,6 @@ export default css` display: none; } - w3m-legal-checkbox { - padding: 0 var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s); - } - wui-flex.disabled { opacity: 0.3; pointer-events: none; diff --git a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts index 3c1d4a8942..b6090c348e 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts @@ -43,17 +43,18 @@ export class W3mOnrampTokensView extends LitElement { // -- Render -------------------------------------------- // public override render() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state - const legal = termsConditionsUrl || privacyPolicyUrl + const legalUrl = termsConditionsUrl || privacyPolicyUrl + const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) return html` - ${this.legalCheckBoxTemplate()} + ${this.currenciesTemplate()} @@ -88,21 +89,9 @@ export class W3mOnrampTokensView extends LitElement { ModalController.close() } - private legalCheckBoxTemplate() { - const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state - - if (!termsConditionsUrl && !privacyPolicyUrl) { - return null - } - - return html`` - } - // -- Private Methods ----------------------------------- // - private onCheckBoxChange(event: CustomEvent) { + private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } } diff --git a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts index 4ed832adaf..09f7c76155 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/styles.ts @@ -11,10 +11,6 @@ export default css` will-change: opacity; } - w3m-legal-checkbox { - padding: 0 var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s); - } - wui-grid::-webkit-scrollbar { display: none; } From 3eea4ab9a83dc746c36281a1f89f189065ee75a9 Mon Sep 17 00:00:00 2001 From: MK Date: Tue, 5 Nov 2024 19:00:34 +0000 Subject: [PATCH 06/19] chore: improve interpolate --- apps/laboratory/src/pages/library/wagmi.tsx | 8 ++++++++ packages/scaffold-ui/src/views/w3m-connect-view/index.ts | 4 ++-- packages/scaffold-ui/src/views/w3m-connect-view/styles.ts | 6 ++---- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index e727ca2eb2..d524d71522 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -20,6 +20,14 @@ const modal = createAppKit({ adapters: [wagmiAdapter], networks: wagmiAdapter.caipNetworks, projectId: ConstantsUtil.ProjectId, + termsConditionsUrl: 'https://www.reown.com/terms', + privacyPolicyUrl: 'https://www.reown.com/privacy', + featuredWalletIds: [ + 'f2436c67184f158d1beda5df53298ee84abfc367581e4505134b5bcf5f46697d', + 'e9ff15be73584489ca4a66f64d32c4537711797e30b6660dbcb71ea72a42b1f4', + 'bc949c5d968ae81310268bf9193f9c9fb7bb4e1283e1284af8f2bd4992535fd6' + ], + enableLegalCheckbox: true, features: { analytics: true } diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 05184691ee..162443639d 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -205,12 +205,12 @@ export class W3mConnectView extends LitElement { connectEl.style.setProperty( '--connect-scroll--top-opacity', - MathUtil.interpolate([0, 100], [0, 1], connectEl.scrollTop).toString() + MathUtil.interpolate([0, 50], [0, 1], connectEl.scrollTop).toString() ) connectEl.style.setProperty( '--connect-scroll--bottom-opacity', MathUtil.interpolate( - [0, 100], + [0, 50], [0, 1], connectEl.scrollHeight - connectEl.scrollTop - connectEl.offsetHeight ).toString() 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 5a5b410eb7..ba15e72c3b 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts @@ -17,10 +17,8 @@ export default css` 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 80px, - black 110px, - black calc(100% - 150px), - black calc(100% - 110px), + black 140px, + black calc(100% - 140px), 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% ); From ab92b61992ff5888254d146e55b72aa07bb401cc Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 6 Nov 2024 16:29:38 +0000 Subject: [PATCH 07/19] chore: tweak styles --- apps/laboratory/src/pages/library/wagmi.tsx | 8 -------- packages/scaffold-ui/src/views/w3m-connect-view/index.ts | 7 ++++--- packages/scaffold-ui/src/views/w3m-connect-view/styles.ts | 2 +- 3 files changed, 5 insertions(+), 12 deletions(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index d524d71522..e727ca2eb2 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -20,14 +20,6 @@ const modal = createAppKit({ adapters: [wagmiAdapter], networks: wagmiAdapter.caipNetworks, projectId: ConstantsUtil.ProjectId, - termsConditionsUrl: 'https://www.reown.com/terms', - privacyPolicyUrl: 'https://www.reown.com/privacy', - featuredWalletIds: [ - 'f2436c67184f158d1beda5df53298ee84abfc367581e4505134b5bcf5f46697d', - 'e9ff15be73584489ca4a66f64d32c4537711797e30b6660dbcb71ea72a42b1f4', - 'bc949c5d968ae81310268bf9193f9c9fb7bb4e1283e1284af8f2bd4992535fd6' - ], - enableLegalCheckbox: true, features: { analytics: true } diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 162443639d..4ee670ba33 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -60,11 +60,12 @@ export class W3mConnectView extends LitElement { const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state const legalUrl = termsConditionsUrl || privacyPolicyUrl - const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) + const showLegalCheckbox = + Boolean(legalUrl) && Boolean(enableLegalCheckbox) && this.walletGuide === 'get-started' const classes = { connect: true, - disabled: showLegalCheckbox && !this.checked && this.walletGuide === 'get-started' + disabled: showLegalCheckbox && !this.checked } const socials = this.features?.socials @@ -199,7 +200,7 @@ export class W3mConnectView extends LitElement { 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 <= 548) { + if (!connectEl || connectEl.scrollHeight <= 470) { return } 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 ba15e72c3b..1db1601957 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/styles.ts @@ -7,7 +7,7 @@ export default css` } .connect { - max-height: clamp(360px, 478px, 80vh); + max-height: clamp(360px, 470px, 80vh); scrollbar-width: none; overflow-y: scroll; overflow-x: hidden; From 170f4601ff535df3cce265020e91663d0471ac4f Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 6 Nov 2024 17:53:28 +0000 Subject: [PATCH 08/19] chore: add e2e tests --- .../src/pages/library/ethers-no-email.tsx | 1 + .../src/pages/library/ethers5-no-email.tsx | 1 + .../src/pages/library/solana-no-email.tsx | 5 ++++- .../laboratory/src/pages/library/wagmi-no-email.tsx | 1 + apps/laboratory/tests/no-email.spec.ts | 7 +++++++ apps/laboratory/tests/shared/pages/ModalPage.ts | 13 +++++++++++++ .../tests/shared/validators/ModalValidator.ts | 10 ++++++++++ .../scaffold-ui/src/views/w3m-connect-view/index.ts | 1 + packages/ui/src/composites/wui-checkbox/styles.ts | 3 ++- 9 files changed, 40 insertions(+), 2 deletions(-) diff --git a/apps/laboratory/src/pages/library/ethers-no-email.tsx b/apps/laboratory/src/pages/library/ethers-no-email.tsx index d6a1ecec46..df0221af11 100644 --- a/apps/laboratory/src/pages/library/ethers-no-email.tsx +++ b/apps/laboratory/src/pages/library/ethers-no-email.tsx @@ -23,6 +23,7 @@ const modal = createAppKit({ }, termsConditionsUrl: 'https://reown.com/terms-of-service', privacyPolicyUrl: 'https://reown.com/privacy-policy', + enableLegalCheckbox: true, customWallets: ConstantsUtil.CustomWallets }) diff --git a/apps/laboratory/src/pages/library/ethers5-no-email.tsx b/apps/laboratory/src/pages/library/ethers5-no-email.tsx index 2456ad8ce7..ecff137e15 100644 --- a/apps/laboratory/src/pages/library/ethers5-no-email.tsx +++ b/apps/laboratory/src/pages/library/ethers5-no-email.tsx @@ -23,6 +23,7 @@ const modal = createAppKit({ }, termsConditionsUrl: 'https://reown.com/terms-of-service', privacyPolicyUrl: 'https://reown.com/privacy-policy', + enableLegalCheckbox: true, customWallets: ConstantsUtil.CustomWallets }) diff --git a/apps/laboratory/src/pages/library/solana-no-email.tsx b/apps/laboratory/src/pages/library/solana-no-email.tsx index ee7f24753d..ad4e660188 100644 --- a/apps/laboratory/src/pages/library/solana-no-email.tsx +++ b/apps/laboratory/src/pages/library/solana-no-email.tsx @@ -24,7 +24,10 @@ const modal = createAppKit({ swaps: false, email: false, socials: [] - } + }, + termsConditionsUrl: 'https://reown.com/terms-of-service', + privacyPolicyUrl: 'https://reown.com/privacy-policy', + enableLegalCheckbox: true }) ThemeStore.setModal(modal) diff --git a/apps/laboratory/src/pages/library/wagmi-no-email.tsx b/apps/laboratory/src/pages/library/wagmi-no-email.tsx index bf7b11b8c0..bbd9bcf96c 100644 --- a/apps/laboratory/src/pages/library/wagmi-no-email.tsx +++ b/apps/laboratory/src/pages/library/wagmi-no-email.tsx @@ -31,6 +31,7 @@ const modal = createAppKit({ }, termsConditionsUrl: 'https://reown.com/terms-of-service', privacyPolicyUrl: 'https://reown.com/privacy-policy', + enableLegalCheckbox: true, customWallets: ConstantsUtil.CustomWallets }) diff --git a/apps/laboratory/tests/no-email.spec.ts b/apps/laboratory/tests/no-email.spec.ts index d454f52480..05860e6966 100644 --- a/apps/laboratory/tests/no-email.spec.ts +++ b/apps/laboratory/tests/no-email.spec.ts @@ -31,3 +31,10 @@ noEmailTest.afterAll(async () => { noEmailTest('secure site iframe should not be present', () => { modalValidator.expectSecureSiteFrameNotInjected() }) + +noEmailTest('should check the terms of service and privacy policy checkbox', async () => { + await modalPage.openConnectModal() + await modalValidator.expectConnectViewToBeDisabled() + await modalPage.clickLegalCheckbox() + await modalValidator.expectConnectViewNotToBeDisabled() +}) diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts index 057383340c..c8f96452d8 100644 --- a/apps/laboratory/tests/shared/pages/ModalPage.ts +++ b/apps/laboratory/tests/shared/pages/ModalPage.ts @@ -571,4 +571,17 @@ export class ModalPage { async switchNetworkWithHook() { await this.page.getByTestId('switch-network-hook-button').click() } + + async clickLegalCheckbox() { + const legalCheckbox = this.page.getByTestId('w3m-legal-checkbox') + await expect(legalCheckbox).toBeVisible() + const boundingBox = await legalCheckbox.boundingBox() + if (!boundingBox) { + throw new Error('Legal checkbox bounding box not found') + } + const x = boundingBox.x + boundingBox.width / 2 - 100 + const y = boundingBox.y + boundingBox.height / 2 + // Click on the left side of the checkbox to avoid clicking on links + await this.page.mouse.click(x, y) + } } diff --git a/apps/laboratory/tests/shared/validators/ModalValidator.ts b/apps/laboratory/tests/shared/validators/ModalValidator.ts index 1d091be8da..36a56976a7 100644 --- a/apps/laboratory/tests/shared/validators/ModalValidator.ts +++ b/apps/laboratory/tests/shared/validators/ModalValidator.ts @@ -330,4 +330,14 @@ export class ModalValidator { timeout: MAX_WAIT }) } + + async expectConnectViewToBeDisabled() { + const connectDisabled = this.page.locator('.connect.disabled') + await expect(connectDisabled).toBeVisible() + } + + async expectConnectViewNotToBeDisabled() { + const connectDisabled = this.page.locator('.connect.disabled') + await expect(connectDisabled).not.toBeVisible() + } } diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 4ee670ba33..16cbfef2df 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -193,6 +193,7 @@ export class W3mConnectView extends LitElement { return html`` } diff --git a/packages/ui/src/composites/wui-checkbox/styles.ts b/packages/ui/src/composites/wui-checkbox/styles.ts index ac3f7f895a..d5408aa3c3 100644 --- a/packages/ui/src/composites/wui-checkbox/styles.ts +++ b/packages/ui/src/composites/wui-checkbox/styles.ts @@ -36,7 +36,8 @@ export default css` will-change: background-color; } - label > span:hover { + label > span:hover, + label > input[type='checkbox']:focus-visible + span { background-color: var(--wui-color-gray-glass-010); } From 4b1de077389d2209d18c4eb776e0ae30ad4d1003 Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 6 Nov 2024 18:03:43 +0000 Subject: [PATCH 09/19] chore: add more properties to w3m-legal-checkbox component --- .../scaffold-ui/src/partials/w3m-legal-checkbox/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts index a611216fc0..b919ecc259 100644 --- a/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts @@ -20,7 +20,7 @@ export class W3mLegalCheckbox extends LitElement { } return html` - + I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()} @@ -42,7 +42,7 @@ export class W3mLegalCheckbox extends LitElement { return null } - return html`terms of service` + return html`terms of service` } private privacyTemplate() { @@ -52,7 +52,7 @@ export class W3mLegalCheckbox extends LitElement { return null } - return html`privacy policy` + return html`privacy policy` } } From b5a863f17fe8159c869c69b71c956de73cb987ec Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 6 Nov 2024 18:12:45 +0000 Subject: [PATCH 10/19] chore: tweak --- .../scaffold-ui/src/views/w3m-connect-view/index.ts | 10 ++++------ .../src/views/w3m-connect-wallets-view/index.ts | 1 - .../src/views/w3m-onramp-fiat-select-view/index.ts | 1 - .../src/views/w3m-onramp-tokens-select-view/index.ts | 1 - 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 16cbfef2df..69e7e84e55 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -142,17 +142,15 @@ export class W3mConnectView extends LitElement { const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state - const legal = termsConditionsUrl || privacyPolicyUrl + const legalUrl = termsConditionsUrl || privacyPolicyUrl + const showLegalCheckbox = + Boolean(legalUrl) && Boolean(enableLegalCheckbox) && this.walletGuide === 'get-started' const socialsExist = socials && socials.length const classes = { guide: true, - disabled: - Boolean(enableLegalCheckbox) && - Boolean(legal) && - !this.checked && - this.walletGuide === 'get-started' + disabled: showLegalCheckbox && !this.checked } if (!this.authConnector && !socialsExist) { diff --git a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts index 84a58e9f34..a46055818c 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts @@ -34,7 +34,6 @@ export class W3mConnectWalletsView extends LitElement { } // -- Private Methods ----------------------------------- // - private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } diff --git a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts index 0d9c2c7b96..14fb60b6f3 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts @@ -87,7 +87,6 @@ export class W3mOnrampFiatSelectView extends LitElement { } // -- Private Methods ----------------------------------- // - private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } diff --git a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts index b6090c348e..21cc510fee 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts @@ -90,7 +90,6 @@ export class W3mOnrampTokensView extends LitElement { } // -- Private Methods ----------------------------------- // - private onCheckboxChange(event: CustomEvent) { this.checked = Boolean(event.detail) } From 1703b1bdb2453884dfb57b457956bbe0b43fcec6 Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 7 Nov 2024 09:37:29 +0000 Subject: [PATCH 11/19] chore: prettify --- apps/gallery/stories/composites/wui-checkbox.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/gallery/stories/composites/wui-checkbox.stories.ts b/apps/gallery/stories/composites/wui-checkbox.stories.ts index a420dd0ddc..0333e624a7 100644 --- a/apps/gallery/stories/composites/wui-checkbox.stories.ts +++ b/apps/gallery/stories/composites/wui-checkbox.stories.ts @@ -20,5 +20,5 @@ export default { } as Component export const Default: Component = { - render: (args) => html`` + render: args => html`` } From 8dfc7609371223605e559dfa2ddf9b95dfe5fcce Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 7 Nov 2024 09:39:28 +0000 Subject: [PATCH 12/19] chore: changeset --- .changeset/beige-dodos-fix.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 .changeset/beige-dodos-fix.md diff --git a/.changeset/beige-dodos-fix.md b/.changeset/beige-dodos-fix.md new file mode 100644 index 0000000000..81ccfad69c --- /dev/null +++ b/.changeset/beige-dodos-fix.md @@ -0,0 +1,24 @@ +--- +'@reown/appkit-scaffold-ui': patch +'@apps/laboratory': patch +'@reown/appkit': patch +'@reown/appkit-core': patch +'@apps/gallery': patch +'@reown/appkit-ui': patch +'@apps/demo': 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-utils': patch +'@reown/appkit-cdn': patch +'@reown/appkit-common': patch +'@reown/appkit-experimental': patch +'@reown/appkit-polyfills': patch +'@reown/appkit-siwe': patch +'@reown/appkit-siwx': patch +'@reown/appkit-wallet': patch +--- + +Introduced new feature where users can enable checkbox for terms of service and/or privacy policy. From 7f37c88fa6b4efa495659466eb7088318976a159 Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 7 Nov 2024 09:51:04 +0000 Subject: [PATCH 13/19] fix: danger rules --- packages/ui/src/composites/wui-checkbox/index.ts | 5 +++-- packages/ui/src/utils/JSXTypeUtil.ts | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/composites/wui-checkbox/index.ts b/packages/ui/src/composites/wui-checkbox/index.ts index 54833f7b88..080bc2aa9d 100644 --- a/packages/ui/src/composites/wui-checkbox/index.ts +++ b/packages/ui/src/composites/wui-checkbox/index.ts @@ -4,15 +4,16 @@ import { createRef, ref, type Ref } from 'lit/directives/ref.js' import styles from './styles.js' import { property } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' +import { resetStyles } from '../../utils/ThemeUtil.js' @customElement('wui-checkbox') export class WuiCheckBox extends LitElement { - static override styles = [styles] + public static override styles = [resetStyles, styles] // -- Members ------------------------------------------- // public inputElementRef: Ref = createRef() - // -- State & Properties --------------------------------- // + // -- State & Properties -------------------------------- // @property({ type: Boolean }) public checked?: boolean = undefined // -- Render -------------------------------------------- // diff --git a/packages/ui/src/utils/JSXTypeUtil.ts b/packages/ui/src/utils/JSXTypeUtil.ts index 12e562d005..adc4f7515a 100644 --- a/packages/ui/src/utils/JSXTypeUtil.ts +++ b/packages/ui/src/utils/JSXTypeUtil.ts @@ -68,10 +68,11 @@ import type { WuiProfileButton } from '../composites/wui-profile-button/index.js import type { WuiProfileButtonV2 } from '../composites/wui-profile-button-v2/index.js' import type { WuiListAccount } from '../composites/wui-list-account/index.js' import type { WuiPreviewItem } from '../composites/wui-preview-item/index.js' +import type { WuiAlertBar } from '../composites/wui-alertbar/index.js' +import type { WuiCheckBox } from '../composites/wui-checkbox/index.js' import type { WuiFlex } from '../layout/wui-flex/index.js' import type { WuiGrid } from '../layout/wui-grid/index.js' import type { WuiSeparator } from '../layout/wui-separator/index.js' -import type { WuiAlertBar } from '../composites/wui-alertbar/index.js' // eslint-disable-next-line @typescript-eslint/no-explicit-any type CustomElement = Partial @@ -151,6 +152,7 @@ declare global { 'wui-wallet-image': CustomElement 'wui-banner': CustomElement 'wui-list-account': CustomElement + 'wui-checkbox': CustomElement // -- Layout ------------------------------------------- // 'wui-flex': CustomElement 'wui-grid': CustomElement From 253d3cbcc744fb77896abb3626bbf4c17cce257b Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 7 Nov 2024 16:13:27 +0000 Subject: [PATCH 14/19] chore: add tab index property to email and socia login flow --- .../src/partials/w3m-email-login-widget/index.ts | 4 ++++ .../src/partials/w3m-social-login-widget/index.ts | 12 +++++++++++- .../src/views/w3m-connect-view/index.ts | 14 +++++++++++--- .../ui/src/composites/wui-email-input/index.ts | 4 ++++ packages/ui/src/composites/wui-input-text/index.ts | 3 +++ .../ui/src/composites/wui-list-social/index.ts | 4 +++- .../ui/src/composites/wui-logo-select/index.ts | 5 ++++- 7 files changed, 40 insertions(+), 6 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts index 8ea19da16c..12c97d16c3 100644 --- a/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts @@ -13,6 +13,7 @@ import type { Ref } from 'lit/directives/ref.js' import styles from './styles.js' import { SnackController, RouterController, EventsController } from '@reown/appkit-core' import { ConstantsUtil } from '@reown/appkit-common' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-email-login-widget') export class W3mEmailLoginWidget extends LitElement { @@ -36,6 +37,8 @@ export class W3mEmailLoginWidget extends LitElement { @property() private walletGuide: WalletGuideType = 'get-started' + @property() public tabIdx?: number + public constructor() { super() this.unsubscribe.push( @@ -72,6 +75,7 @@ export class W3mEmailLoginWidget extends LitElement { @focus=${this.onFocusEvent.bind(this)} .disabled=${this.loading} @inputChange=${this.onEmailInputChange.bind(this)} + tabIdx=${ifDefined(this.tabIdx)} > diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index 7c3694ba1c..faedad6804 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -39,6 +39,8 @@ export class W3mSocialLoginWidget extends LitElement { @property() public walletGuide: WalletGuideType = 'get-started' + @property() public tabIdx?: number = undefined + public constructor() { super() this.unsubscribe.push( @@ -94,6 +96,7 @@ export class W3mSocialLoginWidget extends LitElement { this.onSocialClick(social) }} logo=${social} + tabIdx=${ifDefined(this.tabIdx)} >` )} ` @@ -107,6 +110,7 @@ export class W3mSocialLoginWidget extends LitElement { logo=${ifDefined(socials[0])} align="center" name=${`Continue with ${socials[0]}`} + tabIdx=${ifDefined(this.tabIdx)} >` } @@ -131,9 +135,14 @@ export class W3mSocialLoginWidget extends LitElement { this.onSocialClick(social) }} logo=${social} + tabIdx=${ifDefined(this.tabIdx)} >` )} - + ` } @@ -146,6 +155,7 @@ export class W3mSocialLoginWidget extends LitElement { this.onSocialClick(social) }} logo=${social} + tabIdx=${ifDefined(this.tabIdx)} >` )} ` diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index 69e7e84e55..a9ab9a41b5 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -12,6 +12,7 @@ import { import { state } from 'lit/decorators/state.js' import { property } from 'lit/decorators.js' import { classMap } from 'lit/directives/class-map.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-view') export class W3mConnectView extends LitElement { @@ -63,9 +64,11 @@ export class W3mConnectView extends LitElement { const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) && this.walletGuide === 'get-started' + const disabled = showLegalCheckbox && !this.checked + const classes = { connect: true, - disabled: showLegalCheckbox && !this.checked + disabled } const socials = this.features?.socials @@ -86,8 +89,13 @@ export class W3mConnectView extends LitElement { ? ['3xs', 's', '0', 's'] : ['3xs', 's', 's', 's']} > - - + + ${this.walletListTemplate()} diff --git a/packages/ui/src/composites/wui-email-input/index.ts b/packages/ui/src/composites/wui-email-input/index.ts index a968347e37..b3443dcefc 100644 --- a/packages/ui/src/composites/wui-email-input/index.ts +++ b/packages/ui/src/composites/wui-email-input/index.ts @@ -6,6 +6,7 @@ import { resetStyles } from '../../utils/ThemeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import '../wui-input-text/index.js' import styles from './styles.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('wui-email-input') export class WuiEmailInput extends LitElement { @@ -18,6 +19,8 @@ export class WuiEmailInput extends LitElement { @property() public value?: string + @property() public tabIdx?: number + // -- Render -------------------------------------------- // public override render() { return html` @@ -29,6 +32,7 @@ export class WuiEmailInput extends LitElement { .disabled=${this.disabled} .value=${this.value} data-testid="wui-email-input" + tabIdx=${ifDefined(this.tabIdx)} > ${this.templateError()} ` diff --git a/packages/ui/src/composites/wui-input-text/index.ts b/packages/ui/src/composites/wui-input-text/index.ts index 5d3aba8990..a4bcef639c 100644 --- a/packages/ui/src/composites/wui-input-text/index.ts +++ b/packages/ui/src/composites/wui-input-text/index.ts @@ -33,6 +33,8 @@ export class WuiInputText extends LitElement { @property() public inputRightPadding?: SpacingType + @property() public tabIdx?: number + // -- Render -------------------------------------------- // public override render() { const inputClass = `wui-padding-right-${this.inputRightPadding}` @@ -53,6 +55,7 @@ export class WuiInputText extends LitElement { placeholder=${this.placeholder} @input=${this.dispatchInputChangeEvent.bind(this)} .value=${this.value || ''} + tabindex=${ifDefined(this.tabIdx)} /> ` } diff --git a/packages/ui/src/composites/wui-list-social/index.ts b/packages/ui/src/composites/wui-list-social/index.ts index 4388fc02e6..a891153e84 100644 --- a/packages/ui/src/composites/wui-list-social/index.ts +++ b/packages/ui/src/composites/wui-list-social/index.ts @@ -18,12 +18,14 @@ export class WuiListSocial extends LitElement { @property() public align: 'left' | 'center' = 'left' + @property() public tabIdx?: boolean + @property({ type: Boolean }) public disabled = false // -- Render -------------------------------------------- // public override render() { return html` - ` From bfce0811dcb5a6ac02f3f185882b719de864207e Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 7 Nov 2024 17:21:30 +0000 Subject: [PATCH 15/19] chore: add tab index for all necessary components that is associated with T&C feature --- .../partials/w3m-all-wallets-widget/index.ts | 5 +- .../w3m-connect-announced-widget/index.ts | 6 +- .../w3m-connect-custom-widget/index.ts | 5 +- .../w3m-connect-external-widget/index.ts | 4 +- .../w3m-connect-featured-widget/index.ts | 5 ++ .../w3m-connect-injected-widget/index.ts | 7 ++- .../w3m-connect-multi-chain-widget/index.ts | 5 +- .../w3m-connect-recent-widget/index.ts | 5 ++ .../w3m-connect-recommended-widget/index.ts | 6 +- .../w3m-connect-walletconnect-widget/index.ts | 5 +- .../src/partials/w3m-connector-list/index.ts | 59 +++++++++++++++---- .../partials/w3m-email-login-widget/index.ts | 3 +- .../partials/w3m-social-login-list/index.ts | 6 +- .../partials/w3m-social-login-widget/index.ts | 8 +-- .../src/partials/w3m-wallet-guide/index.ts | 4 ++ .../partials/w3m-wallet-login-list/index.ts | 9 ++- .../views/w3m-connect-socials-view/index.ts | 8 ++- .../src/views/w3m-connect-view/index.ts | 35 ++++++++--- .../views/w3m-connect-wallets-view/index.ts | 8 ++- .../w3m-onramp-fiat-select-view/index.ts | 9 ++- .../w3m-onramp-tokens-select-view/index.ts | 9 ++- packages/ui/src/composites/wui-link/index.ts | 5 +- .../src/composites/wui-list-button/index.ts | 5 +- .../ui/src/composites/wui-list-item/index.ts | 3 + .../src/composites/wui-list-social/index.ts | 3 +- .../src/composites/wui-list-wallet/index.ts | 5 +- 26 files changed, 182 insertions(+), 50 deletions(-) diff --git a/packages/scaffold-ui/src/partials/w3m-all-wallets-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-all-wallets-widget/index.ts index caaa64cfe0..4ab3c8dea1 100644 --- a/packages/scaffold-ui/src/partials/w3m-all-wallets-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-all-wallets-widget/index.ts @@ -8,7 +8,8 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-all-wallets-widget') export class W3mAllWalletsWidget extends LitElement { @@ -16,6 +17,7 @@ export class W3mAllWalletsWidget extends LitElement { private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined @state() private connectors = ConnectorController.state.connectors @state() private count = ApiController.state.count @@ -58,6 +60,7 @@ export class W3mAllWalletsWidget extends LitElement { tagLabel=${tagLabel} tagVariant="shade" data-testid="all-wallets" + tabIdx=${ifDefined(this.tabIdx)} > ` } diff --git a/packages/scaffold-ui/src/partials/w3m-connect-announced-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-announced-widget/index.ts index 08e16cca4f..3a3500989c 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-announced-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-announced-widget/index.ts @@ -8,7 +8,7 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-announced-widget') @@ -17,8 +17,11 @@ export class W3mConnectAnnouncedWidget extends LitElement { private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors + public constructor() { super() this.unsubscribe.push( @@ -58,6 +61,7 @@ export class W3mConnectAnnouncedWidget extends LitElement { tagLabel="installed" data-testid=${`wallet-selector-${connector.id}`} .installed=${true} + tabIdx=${ifDefined(this.tabIdx)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts index a2be52941f..c27ee9bc29 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-custom-widget/index.ts @@ -9,7 +9,7 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-custom-widget') @@ -18,6 +18,8 @@ export class W3mConnectCustomWidget extends LitElement { private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors public constructor() { @@ -51,6 +53,7 @@ export class W3mConnectCustomWidget extends LitElement { name=${wallet.name ?? 'Unknown'} @click=${() => this.onConnectWallet(wallet)} data-testid=${`wallet-selector-${wallet.id}`} + tabIdx=${ifDefined(this.tabIdx)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-connect-external-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-external-widget/index.ts index 4fe07da220..d19f1ff5bf 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-external-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-external-widget/index.ts @@ -2,7 +2,7 @@ import type { Connector } from '@reown/appkit-core' import { AssetUtil, ConnectorController, RouterController } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-external-widget') @@ -11,6 +11,8 @@ export class W3mConnectExternalWidget extends LitElement { private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors public constructor() { diff --git a/packages/scaffold-ui/src/partials/w3m-connect-featured-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-featured-widget/index.ts index 8908578e9f..b2a81d4309 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-featured-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-featured-widget/index.ts @@ -4,12 +4,16 @@ import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' import { ifDefined } from 'lit/directives/if-defined.js' import { WalletUtil } from '../../utils/WalletUtil.js' +import { property } from 'lit/decorators.js' @customElement('w3m-connect-featured-widget') export class W3mConnectFeaturedWidget extends LitElement { // -- Members ------------------------------------------- // private unsubscribe: (() => void)[] = [] + // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + public override disconnectedCallback() { this.unsubscribe.forEach(unsubscribe => unsubscribe()) } @@ -33,6 +37,7 @@ export class W3mConnectFeaturedWidget extends LitElement { imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))} name=${wallet.name ?? 'Unknown'} @click=${() => this.onConnectWallet(wallet)} + tabIdx=${ifDefined(this.tabIdx)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-connect-injected-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-injected-widget/index.ts index 6f16a7e051..caf6b01c2f 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-injected-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-injected-widget/index.ts @@ -10,7 +10,7 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-injected-widget') @@ -18,7 +18,9 @@ export class W3mConnectInjectedWidget extends LitElement { // -- Members ------------------------------------------- // private unsubscribe: (() => void)[] = [] - // -- State & Properties -------------------------------- // + // -- State & Properties -------------------------------- // // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors public constructor() { @@ -77,6 +79,7 @@ export class W3mConnectInjectedWidget extends LitElement { tagLabel="installed" data-testid=${`wallet-selector-${connector.id}`} @click=${() => this.onConnector(connector)} + tabIdx=${ifDefined(this.tabIdx)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-connect-multi-chain-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-multi-chain-widget/index.ts index 1e4b876d0e..fdb4bd34a3 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-multi-chain-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-multi-chain-widget/index.ts @@ -7,7 +7,7 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-multi-chain-widget') @@ -16,6 +16,8 @@ export class W3mConnectMultiChainWidget extends LitElement { private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors public constructor() { @@ -53,6 +55,7 @@ export class W3mConnectMultiChainWidget extends LitElement { tagLabel="multichain" data-testid=${`wallet-selector-${connector.id}`} @click=${() => this.onConnector(connector)} + tabIdx=${ifDefined(this.tabIdx)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts index b85886c2f9..65173644ef 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-recent-widget/index.ts @@ -2,10 +2,14 @@ import type { WcWallet } from '@reown/appkit-core' import { AssetUtil, RouterController, StorageUtil } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' +import { property } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-recent-widget') export class W3mConnectRecentWidget extends LitElement { + // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + // -- Render -------------------------------------------- // public override render() { const recent = StorageUtil.getRecentWallets() @@ -26,6 +30,7 @@ export class W3mConnectRecentWidget extends LitElement { @click=${() => this.onConnectWallet(wallet)} tagLabel="recent" tagVariant="shade" + tabIdx=${ifDefined(this.tabIdx)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-connect-recommended-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-recommended-widget/index.ts index 6afa3559d0..61f3ad7882 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-recommended-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-recommended-widget/index.ts @@ -9,16 +9,19 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' import { WalletUtil } from '../../utils/WalletUtil.js' @customElement('w3m-connect-recommended-widget') export class W3mConnectRecommendedWidget extends LitElement { // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors public constructor() { @@ -74,6 +77,7 @@ export class W3mConnectRecommendedWidget extends LitElement { imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))} name=${wallet?.name ?? 'Unknown'} @click=${() => this.onConnectWallet(wallet)} + tabIdx=${ifDefined(this.tabIdx)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-connect-walletconnect-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-walletconnect-widget/index.ts index 9c060e01fd..21243eb069 100644 --- a/packages/scaffold-ui/src/partials/w3m-connect-walletconnect-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connect-walletconnect-widget/index.ts @@ -8,7 +8,7 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-walletconnect-widget') @@ -17,6 +17,8 @@ export class W3mConnectWalletConnectWidget extends LitElement { private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors public constructor() { @@ -53,6 +55,7 @@ export class W3mConnectWalletConnectWidget extends LitElement { @click=${() => this.onConnector(connector)} tagLabel="qr code" tagVariant="main" + tabIdx=${ifDefined(this.tabIdx)} data-testid="wallet-selector-walletconnect" > diff --git a/packages/scaffold-ui/src/partials/w3m-connector-list/index.ts b/packages/scaffold-ui/src/partials/w3m-connector-list/index.ts index f00327fbfb..16f03948ce 100644 --- a/packages/scaffold-ui/src/partials/w3m-connector-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-connector-list/index.ts @@ -10,8 +10,9 @@ import { StorageUtil } from '@reown/appkit-core' import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import { WalletUtil } from '../../utils/WalletUtil.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connector-list') export class W3mConnectorList extends LitElement { public static override styles = styles @@ -20,6 +21,8 @@ export class W3mConnectorList extends LitElement { private unsubscribe: (() => void)[] = [] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors public constructor() { @@ -43,27 +46,63 @@ export class W3mConnectorList extends LitElement { return html` ${enableWalletConnect - ? html`` + ? html` + + ` + : null} + ${recent.length + ? html` + + ` : null} - ${recent.length ? html`` : null} ${multiChain.length - ? html`` + ? html` + + ` : null} ${announced.length - ? html`` + ? html` + + ` : null} ${injected.length - ? html`` + ? html` + + ` : null} ${featured.length - ? html`` + ? html` + + ` + : null} + ${custom?.length + ? html` + + ` : null} - ${custom?.length ? html`` : null} ${external.length - ? html`` + ? html`` : null} ${recommended.length - ? html`` + ? html`` : null} ` diff --git a/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts index 12c97d16c3..c0bc40afaa 100644 --- a/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts @@ -25,6 +25,8 @@ export class W3mEmailLoginWidget extends LitElement { private formRef: Ref = createRef() // -- State & Properties -------------------------------- // + @property() public tabIdx?: number + @state() private connectors = ConnectorController.state.connectors @state() private authConnector = this.connectors.find(c => c.type === 'AUTH') @@ -37,7 +39,6 @@ export class W3mEmailLoginWidget extends LitElement { @property() private walletGuide: WalletGuideType = 'get-started' - @property() public tabIdx?: number public constructor() { super() diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts index 2fabdf7205..87e1183a0c 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts @@ -10,10 +10,11 @@ import { } from '@reown/appkit-core' import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' -import { state } from 'lit/decorators.js' +import { property, state } from 'lit/decorators.js' import styles from './styles.js' import type { SocialProvider } from '@reown/appkit-utils' import { SocialProviderEnum } from '@reown/appkit-utils' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-social-login-list') export class W3mSocialLoginList extends LitElement { @@ -25,6 +26,8 @@ export class W3mSocialLoginList extends LitElement { private popupWindow?: Window | null // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors @state() private authConnector = this.connectors.find(c => c.type === 'AUTH') @@ -63,6 +66,7 @@ export class W3mSocialLoginList extends LitElement { }} name=${social} logo=${social} + tabIdx=${ifDefined(this.tabIdx)} >` )} ` diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index faedad6804..965496d8c9 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts @@ -31,16 +31,16 @@ export class W3mSocialLoginWidget extends LitElement { private popupWindow?: Window | null // -- State & Properties -------------------------------- // + @property() public walletGuide: WalletGuideType = 'get-started' + + @property() public tabIdx?: number = undefined + @state() private connectors = ConnectorController.state.connectors @state() private features = OptionsController.state.features @state() private authConnector = this.connectors.find(c => c.type === 'AUTH') - @property() public walletGuide: WalletGuideType = 'get-started' - - @property() public tabIdx?: number = undefined - public constructor() { super() this.unsubscribe.push( diff --git a/packages/scaffold-ui/src/partials/w3m-wallet-guide/index.ts b/packages/scaffold-ui/src/partials/w3m-wallet-guide/index.ts index ac5db64d37..e165fdfc9e 100644 --- a/packages/scaffold-ui/src/partials/w3m-wallet-guide/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-wallet-guide/index.ts @@ -3,12 +3,15 @@ import { LitElement, html } from 'lit' import styles from './styles.js' import { RouterController, type WalletGuideType } from '@reown/appkit-core' import { property } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-wallet-guide') export class W3mWalletGuide extends LitElement { public static override styles = styles // -- State & Properties -------------------------------- // + @property() public tabIdx?: boolean + @property() public walletGuide: WalletGuideType = 'get-started' // -- Render -------------------------------------------- // @@ -50,6 +53,7 @@ export class W3mWalletGuide extends LitElement { color="blue-100" class="get-started-link" @click=${this.onGetStarted} + tabIdx=${ifDefined(this.tabIdx)} > Get started diff --git a/packages/scaffold-ui/src/partials/w3m-wallet-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-wallet-login-list/index.ts index 99cc2917a7..aa4c252718 100644 --- a/packages/scaffold-ui/src/partials/w3m-wallet-login-list/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-wallet-login-list/index.ts @@ -1,14 +1,19 @@ import { customElement } from '@reown/appkit-ui' import { LitElement, html } from 'lit' +import { property } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-wallet-login-list') export class W3mWalletLoginList extends LitElement { + // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + // -- Render -------------------------------------------- // public override render() { return html` - - + + ` } diff --git a/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts index 42e53d8c50..e78eabb414 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-socials-view/index.ts @@ -19,15 +19,19 @@ export class W3mConnectSocialsView extends LitElement { const legalUrl = termsConditionsUrl || privacyPolicyUrl const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) + const disabled = showLegalCheckbox && !this.checked + + const tabIndex = disabled ? -1 : undefined + return html` - + ` diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts index a9ab9a41b5..80f23428e1 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts @@ -77,6 +77,8 @@ export class W3mConnectView extends LitElement { const socialsExist = socials && socials.length const socialOrEmailLoginEnabled = socialsExist || this.authConnector + const tabIndex = disabled ? -1 : undefined + return html` ${this.legalCheckboxTemplate()} @@ -91,11 +93,9 @@ export class W3mConnectView extends LitElement { > - + ${this.walletListTemplate()} @@ -107,10 +107,19 @@ export class W3mConnectView extends LitElement { // -- Private ------------------------------------------- // private walletListTemplate() { + const { termsConditionsUrl, privacyPolicyUrl, enableLegalCheckbox } = OptionsController.state const socials = this.features?.socials const emailShowWallets = this.features?.emailShowWallets const enableWallets = OptionsController.state.enableWallets + const legalUrl = termsConditionsUrl || privacyPolicyUrl + const showLegalCheckbox = + Boolean(legalUrl) && Boolean(enableLegalCheckbox) && this.walletGuide === 'get-started' + + const disabled = showLegalCheckbox && !this.checked + + const tabIndex = disabled ? -1 : undefined + if (!enableWallets) { return null } @@ -127,21 +136,22 @@ export class W3mConnectView extends LitElement { if (this.authConnector && emailShowWallets) { return html` - + - + ` } return html`` } - return html`` + return html`` } private guideTemplate() { @@ -156,11 +166,15 @@ export class W3mConnectView extends LitElement { const socialsExist = socials && socials.length + const disabled = showLegalCheckbox && !this.checked + const classes = { guide: true, - disabled: showLegalCheckbox && !this.checked + disabled } + const tabIndex = disabled ? -1 : undefined + if (!this.authConnector && !socialsExist) { return null } @@ -187,7 +201,10 @@ export class W3mConnectView extends LitElement { .padding=${['xl', '0', 'xl', '0']} class=${classMap(classes)} > - + ` } diff --git a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts index a46055818c..cbb2ef381a 100644 --- a/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connect-wallets-view/index.ts @@ -19,15 +19,19 @@ export class W3mConnectWalletsView extends LitElement { const legalUrl = termsConditionsUrl || privacyPolicyUrl const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) + const disabled = showLegalCheckbox && !this.checked + + const tabIndex = disabled ? -1 : undefined + return html` - + ` diff --git a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts index 14fb60b6f3..fb59256577 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-fiat-select-view/index.ts @@ -48,28 +48,31 @@ export class W3mOnrampFiatSelectView extends LitElement { const legalUrl = termsConditionsUrl || privacyPolicyUrl const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) + const disabled = showLegalCheckbox && !this.checked + return html` - ${this.currenciesTemplate()} + ${this.currenciesTemplate(disabled)} ` } // -- Private ------------------------------------------- // - private currenciesTemplate() { + private currenciesTemplate(disabled = false) { return this.currencies.map( currency => html` this.selectCurrency(currency)} variant="image" + tabIdx=${ifDefined(disabled ? -1 : undefined)} > ${currency.id} diff --git a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts index 21cc510fee..d754403287 100644 --- a/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-onramp-tokens-select-view/index.ts @@ -48,28 +48,31 @@ export class W3mOnrampTokensView extends LitElement { const legalUrl = termsConditionsUrl || privacyPolicyUrl const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox) + const disabled = showLegalCheckbox && !this.checked + return html` - ${this.currenciesTemplate()} + ${this.currenciesTemplate(disabled)} ` } // -- Private ------------------------------------------- // - private currenciesTemplate() { + private currenciesTemplate(disabled = false) { return this.tokens.map( token => html` this.selectToken(token)} variant="image" + tabIdx=${ifDefined(disabled ? -1 : undefined)} > ${token.name} diff --git a/packages/ui/src/composites/wui-link/index.ts b/packages/ui/src/composites/wui-link/index.ts index 896e8256ec..3e44696f21 100644 --- a/packages/ui/src/composites/wui-link/index.ts +++ b/packages/ui/src/composites/wui-link/index.ts @@ -6,12 +6,15 @@ import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' import type { ColorType } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import styles from './styles.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('wui-link') export class WuiLink extends LitElement { public static override styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // + @property() public tabIdx?: number = undefined + @property({ type: Boolean }) public disabled = false @property() color: ColorType = 'inherit' @@ -19,7 +22,7 @@ export class WuiLink extends LitElement { // -- Render -------------------------------------------- // public override render() { return html` - ` diff --git a/packages/ui/src/composites/wui-list-item/index.ts b/packages/ui/src/composites/wui-list-item/index.ts index 16b0e96e87..7bf9acf828 100644 --- a/packages/ui/src/composites/wui-list-item/index.ts +++ b/packages/ui/src/composites/wui-list-item/index.ts @@ -21,6 +21,8 @@ export class WuiListItem extends LitElement { @property() public iconSize?: SizeType + @property() public tabIdx?: number = undefined + @property() public variant: AccountEntryType = 'icon' @property() public iconVariant?: 'blue' | 'overlay' | 'square' | 'square-blue' @@ -42,6 +44,7 @@ export class WuiListItem extends LitElement { ?disabled=${this.loading ? true : Boolean(this.disabled)} data-loading=${this.loading} data-iconvariant=${ifDefined(this.iconVariant)} + tabindex=${ifDefined(this.tabIdx)} ontouchstart > ${this.loadingTemplate()} ${this.visualTemplate()} diff --git a/packages/ui/src/composites/wui-list-social/index.ts b/packages/ui/src/composites/wui-list-social/index.ts index a891153e84..33afaedc97 100644 --- a/packages/ui/src/composites/wui-list-social/index.ts +++ b/packages/ui/src/composites/wui-list-social/index.ts @@ -6,6 +6,7 @@ import { customElement } from '../../utils/WebComponentsUtil.js' import '../wui-logo/index.js' import styles from './styles.js' import type { LogoType } from '../../utils/TypeUtil.js' +import { ifDefined } from 'lit/directives/if-defined.js' @customElement('wui-list-social') export class WuiListSocial extends LitElement { @@ -25,7 +26,7 @@ export class WuiListSocial extends LitElement { // -- Render -------------------------------------------- // public override render() { return html` -