feat: terms of service / privacy policy checkbox

.changeset/beige-dodos-fix.md

@@ -0,0 +1,43 @@
+---
+'@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 a new feature with an option to enable the terms of service and/or privacy policy checkbox.
+
+**Example usage**
+
+```ts
+import { createAppKit } from '@reown/appkit/react'
+import { mainnet } from '@reown/appkit/networks'
+
+const modal = createAppKit({
+  adapters: [/* adapters */],
+  networks: [mainnet],
+  defaultNetwork: mainnet,
+  projectId: 'YOUR_PROJECT_ID',
+  features: {
+    legalCheckbox: true // Optional - defaults to false
+  },
+  termsConditionsUrl: '...',
+  privacyPolicyUrl: '...'
+})
+```

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

@@ -19,6 +19,7 @@ const modal = createAppKit({
   features: {
     analytics: true,
     email: false,
+    legalCheckbox: true,
     socials: []
   },
   termsConditionsUrl: 'https://reown.com/terms-of-service',

apps/laboratory/src/pages/library/ethers5-no-email.tsx

@@ -19,6 +19,7 @@ const modal = createAppKit({
   features: {
     analytics: true,
     email: false,
+    legalCheckbox: true,
     socials: []
   },
   termsConditionsUrl: 'https://reown.com/terms-of-service',

apps/laboratory/src/pages/library/solana-no-email.tsx

@@ -23,8 +23,11 @@ const modal = createAppKit({
     analytics: false,
     swaps: false,
     email: false,
+    legalCheckbox: true,
     socials: []
-  }
+  },
+  termsConditionsUrl: 'https://reown.com/terms-of-service',
+  privacyPolicyUrl: 'https://reown.com/privacy-policy'
 })
 
 ThemeStore.setModal(modal)

apps/laboratory/src/pages/library/wagmi-no-email.tsx

@@ -27,6 +27,7 @@ const modal = createAppKit({
   features: {
     analytics: true,
     email: false,
+    legalCheckbox: true,
     socials: []
   },
   termsConditionsUrl: 'https://reown.com/terms-of-service',

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/core/src/utils/ConstantsUtil.ts

@@ -222,6 +222,7 @@ export const ConstantsUtil = {
     history: true,
     analytics: true,
     allWallets: true,
+    legalCheckbox: false,
     smartSessions: false
   } as Features
 }

packages/core/src/utils/TypeUtil.ts

@@ -974,6 +974,11 @@ export type Features = {
    * @type {boolean}
    */
   smartSessions?: boolean
+  /**
+   * Enable or disable the terms of service and/or privacy policy checkbox.
+   * @default false
+   */
+  legalCheckbox?: boolean
 }
 
 export type FeaturesKeys = keyof Features

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-all-wallets-widget/index.ts

@@ -8,14 +8,16 @@ 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 {
   // -- Members ------------------------------------------- //
   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)}
       ></wui-list-wallet>
     `
   }

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,6 +17,8 @@ export class W3mConnectAnnouncedWidget extends LitElement {
   private unsubscribe: (() => void)[] = []
 
   // -- State & Properties -------------------------------- //
+  @property() public tabIdx?: number = undefined
+
   @state() private connectors = ConnectorController.state.connectors
 
   public constructor() {
@@ -58,6 +60,7 @@ export class W3mConnectAnnouncedWidget extends LitElement {
               tagLabel="installed"
               data-testid=${`wallet-selector-${connector.id}`}
               .installed=${true}
+              tabIdx=${ifDefined(this.tabIdx)}
             >
             </wui-list-wallet>
           `

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)}
           >
           </wui-list-wallet>
         `

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() {
@@ -47,6 +49,7 @@ export class W3mConnectExternalWidget extends LitElement {
               name=${connector.name ?? 'Unknown'}
               data-testid=${`wallet-selector-external-${connector.id}`}
               @click=${() => this.onConnector(connector)}
+              tabIdx=${ifDefined(this.tabIdx)}
             >
             </wui-list-wallet>
           `

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)}
             >
             </wui-list-wallet>
           `

packages/scaffold-ui/src/partials/w3m-connect-injected-widget/index.ts

@@ -10,15 +10,17 @@ 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')
 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)}
             >
             </wui-list-wallet>
           `

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)}
             >
             </wui-list-wallet>
           `

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)}
             >
             </wui-list-wallet>
           `