@reown/appkit-scaffold-ui 1.3.0 → 1.3.2

package/dist/esm/src/partials/w3m-wallet-login-list/index.js

@@ -6,16 +6,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 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';
 let W3mWalletLoginList = class W3mWalletLoginList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tabIdx = undefined;
+    }
     render() {
         return html `
       <wui-flex flexDirection="column" gap="xs">
-        <w3m-connector-list></w3m-connector-list>
-        <w3m-all-wallets-widget></w3m-all-wallets-widget>
+        <w3m-connector-list tabIdx=${ifDefined(this.tabIdx)}></w3m-connector-list>
+        <w3m-all-wallets-widget tabIdx=${ifDefined(this.tabIdx)}></w3m-all-wallets-widget>
       </wui-flex>
     `;
     }
 };
+__decorate([
+    property()
+], W3mWalletLoginList.prototype, "tabIdx", void 0);
 W3mWalletLoginList = __decorate([
     customElement('w3m-wallet-login-list')
 ], W3mWalletLoginList);

package/dist/esm/src/partials/w3m-wallet-login-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/partials/w3m-wallet-login-list/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG/B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAEhC,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;KAKV,CAAA;IACH,CAAC;CACF,CAAA;AAVY,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAU9B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/partials/w3m-wallet-login-list/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGjD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAEc,WAAM,GAAY,SAAS,CAAA;IAWhD,CAAC;IARiB,MAAM;QACpB,OAAO,IAAI,CAAA;;qCAEsB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;yCAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;KAE1D,CAAA;IACH,CAAC;CACF,CAAA;AAXoB;IAAlB,QAAQ,EAAE;kDAAmC;AAFnC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAa9B"}

package/dist/esm/src/views/w3m-all-wallets-view/index.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CoreHelperUtil, RouterController } from '@reown/appkit-core';
+import { CoreHelperUtil, RouterController, SnackController } from '@reown/appkit-core';
 import { customElement } from '@reown/appkit-ui';
 import { LitElement, html } from 'lit';
 import { state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 let W3mAllWalletsView = class W3mAllWalletsView extends LitElement {
     constructor() {
         super(...arguments);
@@ -19,18 +20,37 @@ let W3mAllWalletsView = class W3mAllWalletsView extends LitElement {
     render() {
         const isSearch = this.search.length >= 2;
         return html `
-      <wui-flex .padding=${['0', 's', 's', 's']} gap="s">
+      <wui-flex .padding=${['0', 's', 's', 's']} gap="xs">
         <wui-search-bar @inputChange=${this.onInputChange.bind(this)}></wui-search-bar>
+        <wui-certified-switch
+          ?checked=${this.badge}
+          @click=${this.onClick.bind(this)}
+          data-testid="wui-certified-switch"
+        ></wui-certified-switch>
         ${this.qrButtonTemplate()}
       </wui-flex>
-      ${isSearch
-            ? html `<w3m-all-wallets-search query=${this.search}></w3m-all-wallets-search>`
-            : html `<w3m-all-wallets-list></w3m-all-wallets-list>`}
+      ${isSearch || this.badge
+            ? html `<w3m-all-wallets-search
+            query=${this.search}
+            badge=${ifDefined(this.badge)}
+          ></w3m-all-wallets-search>`
+            : html `<w3m-all-wallets-list badge=${ifDefined(this.badge)}></w3m-all-wallets-list>`}
     `;
     }
     onInputChange(event) {
         this.onDebouncedSearch(event.detail);
     }
+    onClick() {
+        if (this.badge === 'certified') {
+            this.badge = undefined;
+            return;
+        }
+        this.badge = 'certified';
+        SnackController.showSvg('Only WalletConnect certified', {
+            icon: 'walletConnectBrown',
+            iconColor: 'accent-100'
+        });
+    }
     qrButtonTemplate() {
         if (CoreHelperUtil.isMobile()) {
             return html `
@@ -56,6 +76,9 @@ let W3mAllWalletsView = class W3mAllWalletsView extends LitElement {
 __decorate([
     state()
 ], W3mAllWalletsView.prototype, "search", void 0);
+__decorate([
+    state()
+], W3mAllWalletsView.prototype, "badge", void 0);
 W3mAllWalletsView = __decorate([
     customElement('w3m-all-wallets-view')
 ], W3mAllWalletsView);

package/dist/esm/src/views/w3m-all-wallets-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-all-wallets-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAEY,WAAM,GAAG,EAAE,CAAA;QAsBpB,sBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE;YACpE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;IAyBJ,CAAC;IA9CiB,MAAM;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAA;QAExC,OAAO,IAAI,CAAA;2BACY,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;uCACR,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;UAC1D,IAAI,CAAC,gBAAgB,EAAE;;QAEzB,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA,iCAAiC,IAAI,CAAC,MAAM,4BAA4B;YAC9E,CAAC,CAAC,IAAI,CAAA,+CAA+C;KACxD,CAAA;IACH,CAAC;IAGO,aAAa,CAAC,KAA0B;QAC9C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;IAMO,gBAAgB;QACtB,IAAI,cAAc,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAA;;;;;;;;;;mBAUE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;OAE7C,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC;IAEO,iBAAiB;QACvB,gBAAgB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA;IAClD,CAAC;CACF,CAAA;AAjDkB;IAAhB,KAAK,EAAE;iDAAoB;AAFjB,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAmD7B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-all-wallets-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,gBAAgB,EAEhB,eAAe,EAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGjD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAEY,WAAM,GAAG,EAAE,CAAA;QA8CpB,sBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE;YACpE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;IAyBJ,CAAC;IApEiB,MAAM;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAA;QAExC,OAAO,IAAI,CAAA;2BACY,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;uCACR,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;qBAE/C,IAAI,CAAC,KAAK;mBACZ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;;UAGhC,IAAI,CAAC,gBAAgB,EAAE;;QAEzB,QAAQ,IAAI,IAAI,CAAC,KAAK;YACtB,CAAC,CAAC,IAAI,CAAA;oBACM,IAAI,CAAC,MAAM;oBACX,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;qCACJ;YAC7B,CAAC,CAAC,IAAI,CAAA,+BAA+B,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,0BAA0B;KACvF,CAAA;IACH,CAAC;IAGO,aAAa,CAAC,KAA0B;QAC9C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;YAEtB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,WAAW,CAAA;QACxB,eAAe,CAAC,OAAO,CAAC,8BAA8B,EAAE;YACtD,IAAI,EAAE,oBAAoB;YAC1B,SAAS,EAAE,YAAY;SACxB,CAAC,CAAA;IACJ,CAAC;IAMO,gBAAgB;QACtB,IAAI,cAAc,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAA;;;;;;;;;;mBAUE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;OAE7C,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC;IAEO,iBAAiB;QACvB,gBAAgB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA;IAClD,CAAC;CACF,CAAA;AAzEkB;IAAhB,KAAK,EAAE;iDAAoB;AAEX;IAAhB,KAAK,EAAE;gDAA0B;AAJvB,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2E7B"}

package/dist/esm/src/views/w3m-connect-socials-view/index.js

@@ -7,17 +7,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
 let W3mConnectSocialsView = class W3mConnectSocialsView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+    }
     render() {
+        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;
+        const legalCheckbox = OptionsController.state.features?.legalCheckbox;
+        const legalUrl = termsConditionsUrl || privacyPolicyUrl;
+        const showLegalCheckbox = Boolean(legalUrl) && Boolean(legalCheckbox);
+        const disabled = showLegalCheckbox && !this.checked;
+        const tabIndex = disabled ? -1 : undefined;
         return html `
-      <wui-flex flexDirection="column" padding="s" gap="xs">
-        <w3m-social-login-list></w3m-social-login-list>
+      <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(disabled ? 'disabled' : undefined)}
+      >
+        <w3m-social-login-list tabIdx=${ifDefined(tabIndex)}></w3m-social-login-list>
       </wui-flex>
       <w3m-legal-footer></w3m-legal-footer>
     `;
     }
+    onCheckboxChange(event) {
+        this.checked = Boolean(event.detail);
+    }
 };
 W3mConnectSocialsView.styles = styles;
+__decorate([
+    state()
+], W3mConnectSocialsView.prototype, "checked", void 0);
 W3mConnectSocialsView = __decorate([
     customElement('w3m-connect-socials-view')
 ], W3mConnectSocialsView);

package/dist/esm/src/views/w3m-connect-socials-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-socials-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAInC,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;KAKV,CAAA;IACH,CAAC;;AAVsB,4BAAM,GAAG,MAAM,AAAT,CAAS;AAD3B,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAYjC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-socials-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGjD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAGY,YAAO,GAAG,KAAK,CAAA;IAiClC,CAAC;IA9BiB,MAAM;QACpB,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAA;QAExE,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,aAAa,CAAA;QAErE,MAAM,QAAQ,GAAG,kBAAkB,IAAI,gBAAgB,CAAA;QACvD,MAAM,iBAAiB,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,CAAA;QAErE,MAAM,QAAQ,GAAG,iBAAiB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;QAEnD,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QAE1C,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;;;mBAGzD,iBAAiB,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;;gBAEjD,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;;wCAEpB,SAAS,CAAC,QAAQ,CAAC;;;KAGtD,CAAA;IACH,CAAC;IAGO,gBAAgB,CAAC,KAA0B;QACjD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;;AAlCsB,4BAAM,GAAG,MAAM,AAAT,CAAS;AAErB;IAAhB,KAAK,EAAE;sDAAwB;AAHrB,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAoCjC"}

package/dist/esm/src/views/w3m-connect-socials-view/styles.js

@@ -4,9 +4,16 @@ 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;
+  }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-connect-socials-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-socials-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;CASjB,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-socials-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAA"}

package/dist/esm/src/views/w3m-connect-view/index.js

@@ -4,12 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement } from '@reown/appkit-ui';
+import { MathUtil, customElement } from '@reown/appkit-ui';
 import { LitElement, html } from 'lit';
 import styles from './styles.js';
 import { ConnectionController, ConnectorController, CoreHelperUtil, OptionsController, RouterController } from '@reown/appkit-core';
 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';
 let W3mConnectView = class W3mConnectView extends LitElement {
     constructor() {
         super();
@@ -18,6 +20,7 @@ let W3mConnectView = class W3mConnectView extends LitElement {
         this.authConnector = this.connectors.find(c => c.type === 'AUTH');
         this.features = OptionsController.state.features;
         this.walletGuide = 'get-started';
+        this.checked = false;
         this.unsubscribe.push(ConnectorController.subscribeKey('connectors', val => {
             this.connectors = val;
             this.authConnector = this.connectors.find(c => c.type === 'AUTH');
@@ -25,28 +28,55 @@ let W3mConnectView = class W3mConnectView extends LitElement {
     }
     disconnectedCallback() {
         this.unsubscribe.forEach(unsubscribe => unsubscribe());
+        const connectEl = this.shadowRoot?.querySelector('.connect');
+        connectEl?.removeEventListener('scroll', this.handleConnectListScroll.bind(this));
+    }
+    firstUpdated() {
+        const connectEl = this.shadowRoot?.querySelector('.connect');
+        requestAnimationFrame(this.handleConnectListScroll.bind(this));
+        connectEl?.addEventListener('scroll', this.handleConnectListScroll.bind(this));
     }
     render() {
+        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;
+        const legalCheckbox = OptionsController.state.features?.legalCheckbox;
+        const legalUrl = termsConditionsUrl || privacyPolicyUrl;
+        const showLegalCheckbox = Boolean(legalUrl) && Boolean(legalCheckbox) && this.walletGuide === 'get-started';
+        const disabled = showLegalCheckbox && !this.checked;
+        const classes = {
+            connect: true,
+            disabled
+        };
         const socials = this.features?.socials;
         const enableWallets = OptionsController.state.enableWallets;
         const socialsExist = socials && socials.length;
         const socialOrEmailLoginEnabled = socialsExist || this.authConnector;
+        const tabIndex = disabled ? -1 : undefined;
         return html `
-      <wui-flex
-        flexDirection="column"
-        .padding=${socialOrEmailLoginEnabled && enableWallets && this.walletGuide === 'get-started'
+      <wui-flex flexDirection="column">
+        ${this.legalCheckboxTemplate()}
+        <wui-flex flexDirection="column" class=${classMap(classes)}>
+          <wui-flex
+            flexDirection="column"
+            .padding=${socialOrEmailLoginEnabled &&
+            enableWallets &&
+            this.walletGuide === 'get-started'
             ? ['3xs', 's', '0', 's']
             : ['3xs', 's', 's', 's']}
-      >
-        <w3m-email-login-widget walletGuide=${this.walletGuide}></w3m-email-login-widget>
-        <w3m-social-login-widget></w3m-social-login-widget>
-        ${this.walletListTemplate()}
+          >
+            <w3m-email-login-widget
+              walletGuide=${this.walletGuide}
+              tabIdx=${ifDefined(tabIndex)}
+            ></w3m-email-login-widget>
+            <w3m-social-login-widget tabIdx=${ifDefined(tabIndex)}></w3m-social-login-widget>
+            ${this.walletListTemplate(tabIndex)}
+          </wui-flex>
+        </wui-flex>
+        ${this.guideTemplate(disabled)}
+        <w3m-legal-footer></w3m-legal-footer>
       </wui-flex>
-      ${this.guideTemplate()}
-      <w3m-legal-footer></w3m-legal-footer>
     `;
     }
-    walletListTemplate() {
+    walletListTemplate(tabIndex) {
         const socials = this.features?.socials;
         const emailShowWallets = this.features?.emailShowWallets;
         const enableWallets = OptionsController.state.enableWallets;
@@ -63,24 +93,30 @@ let W3mConnectView = class W3mConnectView extends LitElement {
             if (this.authConnector && emailShowWallets) {
                 return html `
           <wui-flex flexDirection="column" gap="xs" .margin=${['xs', '0', '0', '0']}>
-            <w3m-connector-list></w3m-connector-list>
+            <w3m-connector-list tabIdx=${ifDefined(tabIndex)}></w3m-connector-list>
             <wui-flex class="all-wallets">
-              <w3m-all-wallets-widget></w3m-all-wallets-widget>
+              <w3m-all-wallets-widget tabIdx=${ifDefined(tabIndex)}></w3m-all-wallets-widget>
             </wui-flex>
           </wui-flex>
         `;
             }
             return html `<wui-list-button
+        tabIdx=${ifDefined(tabIndex)}
         @click=${this.onContinueWalletClick.bind(this)}
         text="Continue with a wallet"
       ></wui-list-button>`;
         }
-        return html `<w3m-wallet-login-list></w3m-wallet-login-list>`;
+        return html `<w3m-wallet-login-list tabIdx=${ifDefined(tabIndex)}></w3m-wallet-login-list>`;
     }
-    guideTemplate() {
+    guideTemplate(disabled = false) {
         const socials = this.features?.socials;
         const enableWallets = OptionsController.state.enableWallets;
         const socialsExist = socials && socials.length;
+        const classes = {
+            guide: true,
+            disabled
+        };
+        const tabIndex = disabled ? -1 : undefined;
         if (!this.authConnector && !socialsExist) {
             return null;
         }
@@ -89,20 +125,51 @@ let W3mConnectView = class W3mConnectView extends LitElement {
         }
         if (this.walletGuide === 'explore') {
             return html `
-        <wui-flex flexDirection="column" .padding=${['0', '0', 'xl', '0']}>
+        <wui-flex
+          flexDirection="column"
+          .padding=${['0', '0', 'xl', '0']}
+          class=${classMap(classes)}
+        >
           <w3m-wallet-guide walletGuide=${this.walletGuide}></w3m-wallet-guide>
         </wui-flex>
       `;
         }
         return html `
-      <wui-flex flexDirection="column" .padding=${['xl', '0', 'xl', '0']}>
-        <w3m-wallet-guide walletGuide=${this.walletGuide}></w3m-wallet-guide>
+      <wui-flex
+        flexDirection="column"
+        .padding=${['xl', '0', 'xl', '0']}
+        class=${classMap(classes)}
+      >
+        <w3m-wallet-guide
+          tabIdx=${ifDefined(tabIndex)}
+          walletGuide=${this.walletGuide}
+        ></w3m-wallet-guide>
       </wui-flex>
     `;
     }
+    legalCheckboxTemplate() {
+        if (this.walletGuide === 'explore') {
+            return null;
+        }
+        return html `<w3m-legal-checkbox
+      @checkboxChange=${this.onCheckboxChange.bind(this)}
+      data-testid="w3m-legal-checkbox"
+    ></w3m-legal-checkbox>`;
+    }
+    handleConnectListScroll() {
+        const connectEl = this.shadowRoot?.querySelector('.connect');
+        if (!connectEl || connectEl.scrollHeight <= 470) {
+            return;
+        }
+        connectEl.style.setProperty('--connect-scroll--top-opacity', MathUtil.interpolate([0, 50], [0, 1], connectEl.scrollTop).toString());
+        connectEl.style.setProperty('--connect-scroll--bottom-opacity', MathUtil.interpolate([0, 50], [0, 1], connectEl.scrollHeight - connectEl.scrollTop - connectEl.offsetHeight).toString());
+    }
     onContinueWalletClick() {
         RouterController.push('ConnectWallets');
     }
+    onCheckboxChange(event) {
+        this.checked = Boolean(event.detail);
+    }
 };
 W3mConnectView.styles = styles;
 __decorate([
@@ -117,6 +184,9 @@ __decorate([
 __decorate([
     property()
 ], W3mConnectView.prototype, "walletGuide", void 0);
+__decorate([
+    state()
+], W3mConnectView.prototype, "checked", void 0);
 W3mConnectView = __decorate([
     customElement('w3m-connect-view')
 ], W3mConnectView);

package/dist/esm/src/views/w3m-connect-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-view/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-view/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/views/w3m-connect-view/styles.js

@@ -1,18 +1,46 @@
 import { css } from 'lit';
 export default css `
-  :host > wui-flex {
-    max-height: clamp(360px, 540px, 80vh);
+  :host {
+    --connect-scroll--top-opacity: 0;
+    --connect-scroll--bottom-opacity: 0;
+  }
+
+  .connect {
+    max-height: clamp(360px, 470px, 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 40px,
+      black calc(100% - 40px),
+      rgba(155, 155, 155, calc(1 - var(--connect-scroll--bottom-opacity))) calc(100% - 1px),
+      rgba(0, 0, 0, calc(1 - var(--connect-scroll--bottom-opacity))) 100%
+    );
+  }
+
+  .guide {
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
   }
 
-  :host > wui-flex::-webkit-scrollbar {
+  .connect::-webkit-scrollbar {
     display: none;
   }
 
   .all-wallets {
     flex-flow: column;
   }
+
+  .connect.disabled,
+  .guide.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+    user-select: none;
+  }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-connect-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;CAejB,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CjB,CAAA"}

package/dist/esm/src/views/w3m-connect-wallets-view/index.js

@@ -7,17 +7,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
 let W3mConnectWalletsView = class W3mConnectWalletsView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+    }
     render() {
+        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;
+        const legalCheckbox = OptionsController.state.features?.legalCheckbox;
+        const legalUrl = termsConditionsUrl || privacyPolicyUrl;
+        const showLegalCheckbox = Boolean(legalUrl) && Boolean(legalCheckbox);
+        const disabled = showLegalCheckbox && !this.checked;
+        const tabIndex = disabled ? -1 : undefined;
         return html `
-      <wui-flex flexDirection="column" padding="s" gap="xs">
-        <w3m-wallet-login-list></w3m-wallet-login-list>
+      <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(disabled ? 'disabled' : undefined)}
+      >
+        <w3m-wallet-login-list tabIdx=${ifDefined(tabIndex)}></w3m-wallet-login-list>
       </wui-flex>
       <w3m-legal-footer></w3m-legal-footer>
     `;
     }
+    onCheckboxChange(event) {
+        this.checked = Boolean(event.detail);
+    }
 };
 W3mConnectWalletsView.styles = styles;
+__decorate([
+    state()
+], W3mConnectWalletsView.prototype, "checked", void 0);
 W3mConnectWalletsView = __decorate([
     customElement('w3m-connect-wallets-view')
 ], W3mConnectWalletsView);

package/dist/esm/src/views/w3m-connect-wallets-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-wallets-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAInC,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;KAKV,CAAA;IACH,CAAC;;AAVsB,4BAAM,GAAG,MAAM,AAAT,CAAS;AAD3B,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAYjC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-wallets-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGjD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAGY,YAAO,GAAG,KAAK,CAAA;IAiClC,CAAC;IA9BiB,MAAM;QACpB,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAA;QAExE,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,aAAa,CAAA;QAErE,MAAM,QAAQ,GAAG,kBAAkB,IAAI,gBAAgB,CAAA;QACvD,MAAM,iBAAiB,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,CAAA;QAErE,MAAM,QAAQ,GAAG,iBAAiB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;QAEnD,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QAE1C,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;;;mBAGzD,iBAAiB,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;;gBAEjD,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;;wCAEpB,SAAS,CAAC,QAAQ,CAAC;;;KAGtD,CAAA;IACH,CAAC;IAGO,gBAAgB,CAAC,KAA0B;QACjD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;;AAlCsB,4BAAM,GAAG,MAAM,AAAT,CAAS;AAErB;IAAhB,KAAK,EAAE;sDAAwB;AAHrB,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAoCjC"}

package/dist/esm/src/views/w3m-connect-wallets-view/styles.js

@@ -4,9 +4,16 @@ 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;
+  }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-connect-wallets-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-wallets-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;CASjB,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-wallets-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAA"}

package/dist/esm/src/views/w3m-onramp-fiat-select-view/index.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { OnRampController, ModalController, AssetController } from '@reown/appkit-core';
+import { OnRampController, ModalController, AssetController, OptionsController } from '@reown/appkit-core';
 import { customElement } from '@reown/appkit-ui';
 import { LitElement, html } from 'lit';
 import { state } from 'lit/decorators.js';
@@ -17,6 +17,7 @@ let W3mOnrampFiatSelectView = class W3mOnrampFiatSelectView extends LitElement {
         this.selectedCurrency = OnRampController.state.paymentCurrency;
         this.currencies = OnRampController.state.paymentCurrencies;
         this.currencyImages = AssetController.state.currencyImages;
+        this.checked = false;
         this.unsubscribe.push(...[
             OnRampController.subscribe(val => {
                 this.selectedCurrency = val.paymentCurrency;
@@ -29,19 +30,31 @@ let W3mOnrampFiatSelectView = class W3mOnrampFiatSelectView extends LitElement {
         this.unsubscribe.forEach(unsubscribe => unsubscribe());
     }
     render() {
+        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;
+        const legalCheckbox = OptionsController.state.features?.legalCheckbox;
+        const legalUrl = termsConditionsUrl || privacyPolicyUrl;
+        const showLegalCheckbox = Boolean(legalUrl) && Boolean(legalCheckbox);
+        const disabled = showLegalCheckbox && !this.checked;
         return html `
-      <wui-flex flexDirection="column" .padding=${['0', 's', 's', 's']} gap="xs">
-        ${this.currenciesTemplate()}
+      <w3m-legal-checkbox @checkboxChange=${this.onCheckboxChange.bind(this)}></w3m-legal-checkbox>
+      <wui-flex
+        flexDirection="column"
+        .padding=${['0', 's', 's', 's']}
+        gap="xs"
+        class=${ifDefined(disabled ? 'disabled' : undefined)}
+      >
+        ${this.currenciesTemplate(disabled)}
       </wui-flex>
       <w3m-legal-footer></w3m-legal-footer>
     `;
     }
-    currenciesTemplate() {
+    currenciesTemplate(disabled = false) {
         return this.currencies.map(currency => html `
         <wui-list-item
           imageSrc=${ifDefined(this.currencyImages?.[currency.id])}
           @click=${() => this.selectCurrency(currency)}
           variant="image"
+          tabIdx=${ifDefined(disabled ? -1 : undefined)}
         >
           <wui-text variant="paragraph-500" color="fg-100">${currency.id}</wui-text>
         </wui-list-item>
@@ -54,6 +67,9 @@ let W3mOnrampFiatSelectView = class W3mOnrampFiatSelectView extends LitElement {
         OnRampController.setPaymentCurrency(currency);
         ModalController.close();
     }
+    onCheckboxChange(event) {
+        this.checked = Boolean(event.detail);
+    }
 };
 W3mOnrampFiatSelectView.styles = styles;
 __decorate([
@@ -65,6 +81,9 @@ __decorate([
 __decorate([
     state()
 ], W3mOnrampFiatSelectView.prototype, "currencyImages", void 0);
+__decorate([
+    state()
+], W3mOnrampFiatSelectView.prototype, "checked", void 0);
 W3mOnrampFiatSelectView = __decorate([
     customElement('w3m-onramp-fiat-select-view')
 ], W3mOnrampFiatSelectView);

package/dist/esm/src/views/w3m-onramp-fiat-select-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-onramp-fiat-select-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEvF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGjD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAWrD;QACE,KAAK,EAAE,CAAA;QARD,gBAAW,GAAmB,EAAE,CAAA;QAGxB,qBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,eAAe,CAAA;QACzD,eAAU,GAAG,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAA;QACpD,mBAAc,GAAG,eAAe,CAAC,KAAK,CAAC,cAAc,CAAA;QAIpE,IAAI,CAAC,WAAW,CAAC,IAAI,CACnB,GAAG;YACD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;gBAC/B,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,eAAe,CAAA;gBAC3C,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,iBAAiB,CAAA;YACzC,CAAC,CAAC;YACF,eAAe,CAAC,YAAY,CAAC,gBAAgB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC;SACnF,CACF,CAAA;IACH,CAAC;IAEe,oBAAoB;QAClC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;IACxD,CAAC;IAGe,MAAM;QACpB,OAAO,IAAI,CAAA;kDACmC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;UAC5D,IAAI,CAAC,kBAAkB,EAAE;;;KAG9B,CAAA;IACH,CAAC;IAGO,kBAAkB;QACxB,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;;qBAED,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;mBAC/C,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;;;6DAGO,QAAQ,CAAC,EAAE;;OAEjE,CACF,CAAA;IACH,CAAC;IAEO,cAAc,CAAC,QAAyB;QAC9C,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAM;QACR,CAAC;QAED,gBAAgB,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;QAC7C,eAAe,CAAC,KAAK,EAAE,CAAA;IACzB,CAAC;;AA3DsB,8BAAM,GAAG,MAAM,AAAT,CAAS;AAMtB;IAAf,KAAK,EAAE;iEAAiE;AACzD;IAAf,KAAK,EAAE;2DAA6D;AACpD;IAAhB,KAAK,EAAE;+DAA8D;AAT3D,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CA6DnC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-onramp-fiat-select-view/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/views/w3m-onramp-fiat-select-view/styles.js

@@ -5,8 +5,19 @@ 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;
   }
+
+  wui-flex.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+    user-select: none;
+  }
 `;
 //# sourceMappingURL=styles.js.map