feat: terms of service / privacy policy checkbox

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

@@ -0,0 +1,24 @@
+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'
+
+type Component = Meta<WuiCheckBox>
+
+export default {
+  title: 'Composites/wui-checkbox',
+  args: {
+    checked: false
+  },
+  argTypes: {
+    checked: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: (args) => html`<wui-checkbox ?checked=${args.checked}></wui-checkbox>`
+}

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
 })
 

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
 })
 

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)

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
 })
 

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()
+})

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)
+  }
 }

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()
+  }
 }

packages/appkit/src/client.ts

@@ -505,6 +505,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) {

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
   },

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'

packages/scaffold-ui/src/partials/w3m-legal-checkbox/index.ts

@@ -0,0 +1,63 @@
+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, enableLegalCheckbox } = OptionsController.state
+
+    if (!termsConditionsUrl && !privacyPolicyUrl) {
+      return null
+    }
+
+    if (!enableLegalCheckbox) {
+      return null
+    }
+
+    return html`
+      <wui-checkbox data-testid="wui-checkbox">
+        <wui-text color="fg-250" variant="small-400" align="left">
+          I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()}
+        </wui-text>
+      </wui-checkbox>
+    `
+  }
+
+  // -- Private ------------------------------------------- //
+  private andTemplate() {
+    const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state
+
+    return termsConditionsUrl && privacyPolicyUrl ? 'and' : ''
+  }
+
+  private termsTemplate() {
+    const { termsConditionsUrl } = OptionsController.state
+
+    if (!termsConditionsUrl) {
+      return null
+    }
+
+    return html`<a rel="noreferrer" target="_blank" href=${termsConditionsUrl}>terms of service</a>`
+  }
+
+  private privacyTemplate() {
+    const { privacyPolicyUrl } = OptionsController.state
+
+    if (!privacyPolicyUrl) {
+      return null
+    }
+
+    return html`<a rel="noreferrer" target="_blank" href=${privacyPolicyUrl}>privacy policy</a>`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'w3m-legal-checkbox': W3mLegalCheckbox
+  }
+}

packages/scaffold-ui/src/partials/w3m-legal-checkbox/styles.ts

@@ -0,0 +1,17 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  wui-checkbox {
+    padding: var(--wui-spacing-s);
+  }
+  a {
+    text-decoration: none;
+    color: var(--wui-color-fg-150);
+    font-weight: 500;
+  }
+`

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`
       <wui-flex .padding=${['m', 's', 's', 's'] as const} justifyContent="center">
         <wui-text color="fg-250" variant="small-400" align="center">

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

@@ -2,20 +2,41 @@ 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, enableLegalCheckbox } = OptionsController.state
+
+    const legalUrl = termsConditionsUrl || privacyPolicyUrl
+    const showLegalCheckbox = Boolean(legalUrl) && Boolean(enableLegalCheckbox)
+
     return html`
-      <wui-flex flexDirection="column" padding="s" gap="xs">
+      <w3m-legal-checkbox @checkboxChange=${this.onCheckboxChange.bind(this)}></w3m-legal-checkbox>
+      <wui-flex
+        flexDirection="column"
+        .padding=${showLegalCheckbox ? ['0', 's', 's', 's'] : 's'}
+        gap="xs"
+        class=${ifDefined(showLegalCheckbox && !this.checked ? 'disabled' : undefined)}
+      >
         <w3m-social-login-list></w3m-social-login-list>
       </wui-flex>
       <w3m-legal-footer></w3m-legal-footer>
     `
   }
+
+  // -- Private Methods ----------------------------------- //
+  private onCheckboxChange(event: CustomEvent<string>) {
+    this.checked = Boolean(event.detail)
+  }
 }
 
 declare global {

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

@@ -5,8 +5,15 @@ 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;
   }
+  wui-flex.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+    user-select: none;
+  }
 `