@reown/appkit-cdn 1.8.15-viem-upgrade.0 → 1.8.15-wc-linking-reset-headless.0

package/dist/basic-DFEi41zA.js

@@ -0,0 +1,4914 @@
+import { q as i, o as i$1, x, l as b } from "./appkit-BelUXm_6.js";
+import { n, r, a as e$1 } from "./class-map-ZEs4CrSH.js";
+import { e as elementStyles, r as resetStyles, g as ConnectorController, j as ApiController, O as OptionsController, l as CoreHelperUtil, E as EventsController, R as RouterController, n as ConnectorUtil, b as AssetUtil, o as ConnectionController, q as StorageUtil, m as ConstantsUtil, W as WalletUtil, C as ChainController, d as AssetController, T as ThemeController, i as SnackController, M as ModalController, t as ConstantsUtil$1, c as colorStyles } from "./core-Blm5BnNJ.js";
+import { c as customElement, U as UiHelperUtil } from "./index-C26sVife.js";
+import { o } from "./if-defined-CZFxJBnA.js";
+import { b as browser } from "./browser-5XoTmr4n.js";
+import { e, n as n$1 } from "./ref-DYqCwuKj.js";
+const styles$q = i`
+  :host {
+    position: relative;
+    background-color: var(--wui-color-gray-glass-002);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--local-size);
+    height: var(--local-size);
+    border-radius: inherit;
+    border-radius: var(--local-border-radius);
+  }
+
+  :host > wui-flex {
+    overflow: hidden;
+    border-radius: inherit;
+    border-radius: var(--local-border-radius);
+  }
+
+  :host::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    border: 1px solid var(--wui-color-gray-glass-010);
+    pointer-events: none;
+  }
+
+  :host([name='Extension'])::after {
+    border: 1px solid var(--wui-color-accent-glass-010);
+  }
+
+  :host([data-wallet-icon='allWallets']) {
+    background-color: var(--wui-all-wallets-bg-100);
+  }
+
+  :host([data-wallet-icon='allWallets'])::after {
+    border: 1px solid var(--wui-color-accent-glass-010);
+  }
+
+  wui-icon[data-parent-size='inherit'] {
+    width: 75%;
+    height: 75%;
+    align-items: center;
+  }
+
+  wui-icon[data-parent-size='sm'] {
+    width: 18px;
+    height: 18px;
+  }
+
+  wui-icon[data-parent-size='md'] {
+    width: 24px;
+    height: 24px;
+  }
+
+  wui-icon[data-parent-size='lg'] {
+    width: 42px;
+    height: 42px;
+  }
+
+  wui-icon[data-parent-size='full'] {
+    width: 100%;
+    height: 100%;
+  }
+
+  :host > wui-icon-box {
+    position: absolute;
+    overflow: hidden;
+    right: -1px;
+    bottom: -2px;
+    z-index: 1;
+    border: 2px solid var(--wui-color-bg-150, #1e1f1f);
+    padding: 1px;
+  }
+`;
+var __decorate$K = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiWalletImage = class WuiWalletImage2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.name = "";
+    this.installed = false;
+    this.badgeSize = "xs";
+  }
+  render() {
+    let borderRadius = "xxs";
+    if (this.size === "lg") {
+      borderRadius = "m";
+    } else if (this.size === "md") {
+      borderRadius = "xs";
+    } else {
+      borderRadius = "xxs";
+    }
+    this.style.cssText = `
+       --local-border-radius: var(--wui-border-radius-${borderRadius});
+       --local-size: var(--wui-wallet-image-size-${this.size});
+   `;
+    if (this.walletIcon) {
+      this.dataset["walletIcon"] = this.walletIcon;
+    }
+    return x`
+      <wui-flex justifyContent="center" alignItems="center"> ${this.templateVisual()} </wui-flex>
+    `;
+  }
+  templateVisual() {
+    if (this.imageSrc) {
+      return x`<wui-image src=${this.imageSrc} alt=${this.name}></wui-image>`;
+    } else if (this.walletIcon) {
+      return x`<wui-icon
+        data-parent-size="md"
+        size="md"
+        color="inherit"
+        name=${this.walletIcon}
+      ></wui-icon>`;
+    }
+    return x`<wui-icon
+      data-parent-size=${this.size}
+      size="inherit"
+      color="inherit"
+      name="walletPlaceholder"
+    ></wui-icon>`;
+  }
+};
+WuiWalletImage.styles = [elementStyles, resetStyles, styles$q];
+__decorate$K([
+  n()
+], WuiWalletImage.prototype, "size", void 0);
+__decorate$K([
+  n()
+], WuiWalletImage.prototype, "name", void 0);
+__decorate$K([
+  n()
+], WuiWalletImage.prototype, "imageSrc", void 0);
+__decorate$K([
+  n()
+], WuiWalletImage.prototype, "walletIcon", void 0);
+__decorate$K([
+  n({ type: Boolean })
+], WuiWalletImage.prototype, "installed", void 0);
+__decorate$K([
+  n()
+], WuiWalletImage.prototype, "badgeSize", void 0);
+WuiWalletImage = __decorate$K([
+  customElement("wui-wallet-image")
+], WuiWalletImage);
+const styles$p = i`
+  :host {
+    position: relative;
+    border-radius: var(--wui-border-radius-xxs);
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    background: var(--wui-color-gray-glass-002);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--wui-spacing-4xs);
+    padding: 3.75px !important;
+  }
+
+  :host::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    border: 1px solid var(--wui-color-gray-glass-010);
+    pointer-events: none;
+  }
+
+  :host > wui-wallet-image {
+    width: 14px;
+    height: 14px;
+    border-radius: var(--wui-border-radius-5xs);
+  }
+
+  :host > wui-flex {
+    padding: 2px;
+    position: fixed;
+    overflow: hidden;
+    left: 34px;
+    bottom: 8px;
+    background: var(--dark-background-150, #1e1f1f);
+    border-radius: 50%;
+    z-index: 2;
+    display: flex;
+  }
+`;
+var __decorate$J = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+const TOTAL_IMAGES = 4;
+let WuiAllWalletsImage = class WuiAllWalletsImage2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.walletImages = [];
+  }
+  render() {
+    const isPlaceholders = this.walletImages.length < TOTAL_IMAGES;
+    return x`${this.walletImages.slice(0, TOTAL_IMAGES).map(({ src, walletName }) => x`
+            <wui-wallet-image
+              size="inherit"
+              imageSrc=${src}
+              name=${o(walletName)}
+            ></wui-wallet-image>
+          `)}
+      ${isPlaceholders ? [...Array(TOTAL_IMAGES - this.walletImages.length)].map(() => x` <wui-wallet-image size="inherit" name=""></wui-wallet-image>`) : null}
+      <wui-flex>
+        <wui-icon-box
+          size="xxs"
+          iconSize="xxs"
+          iconcolor="success-100"
+          backgroundcolor="success-100"
+          icon="checkmark"
+          background="opaque"
+        ></wui-icon-box>
+      </wui-flex>`;
+  }
+};
+WuiAllWalletsImage.styles = [resetStyles, styles$p];
+__decorate$J([
+  n({ type: Array })
+], WuiAllWalletsImage.prototype, "walletImages", void 0);
+WuiAllWalletsImage = __decorate$J([
+  customElement("wui-all-wallets-image")
+], WuiAllWalletsImage);
+const styles$o = i`
+  button {
+    column-gap: var(--wui-spacing-s);
+    padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
+    width: 100%;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xs);
+    color: var(--wui-color-fg-100);
+  }
+
+  button > wui-text:nth-child(2) {
+    display: flex;
+    flex: 1;
+  }
+
+  button:disabled {
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
+  }
+
+  button:disabled > wui-tag {
+    background-color: var(--wui-color-gray-glass-010);
+    color: var(--wui-color-fg-300);
+  }
+
+  wui-icon {
+    color: var(--wui-color-fg-200) !important;
+  }
+`;
+var __decorate$I = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiListWallet = class WuiListWallet2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.walletImages = [];
+    this.imageSrc = "";
+    this.name = "";
+    this.tabIdx = void 0;
+    this.installed = false;
+    this.disabled = false;
+    this.showAllWallets = false;
+    this.loading = false;
+    this.loadingSpinnerColor = "accent-100";
+  }
+  render() {
+    return x`
+      <button ?disabled=${this.disabled} tabindex=${o(this.tabIdx)}>
+        ${this.templateAllWallets()} ${this.templateWalletImage()}
+        <wui-text variant="paragraph-500" color="inherit">${this.name}</wui-text>
+        ${this.templateStatus()}
+      </button>
+    `;
+  }
+  templateAllWallets() {
+    if (this.showAllWallets && this.imageSrc) {
+      return x` <wui-all-wallets-image .imageeSrc=${this.imageSrc}> </wui-all-wallets-image> `;
+    } else if (this.showAllWallets && this.walletIcon) {
+      return x` <wui-wallet-image .walletIcon=${this.walletIcon} size="sm"> </wui-wallet-image> `;
+    }
+    return null;
+  }
+  templateWalletImage() {
+    if (!this.showAllWallets && this.imageSrc) {
+      return x`<wui-wallet-image
+        size="sm"
+        imageSrc=${this.imageSrc}
+        name=${this.name}
+        .installed=${this.installed}
+      ></wui-wallet-image>`;
+    } else if (!this.showAllWallets && !this.imageSrc) {
+      return x`<wui-wallet-image size="sm" name=${this.name}></wui-wallet-image>`;
+    }
+    return null;
+  }
+  templateStatus() {
+    if (this.loading) {
+      return x`<wui-loading-spinner
+        size="lg"
+        color=${this.loadingSpinnerColor}
+      ></wui-loading-spinner>`;
+    } else if (this.tagLabel && this.tagVariant) {
+      return x`<wui-tag variant=${this.tagVariant}>${this.tagLabel}</wui-tag>`;
+    } else if (this.icon) {
+      return x`<wui-icon color="inherit" size="sm" name=${this.icon}></wui-icon>`;
+    }
+    return null;
+  }
+};
+WuiListWallet.styles = [resetStyles, elementStyles, styles$o];
+__decorate$I([
+  n({ type: Array })
+], WuiListWallet.prototype, "walletImages", void 0);
+__decorate$I([
+  n()
+], WuiListWallet.prototype, "imageSrc", void 0);
+__decorate$I([
+  n()
+], WuiListWallet.prototype, "name", void 0);
+__decorate$I([
+  n()
+], WuiListWallet.prototype, "tagLabel", void 0);
+__decorate$I([
+  n()
+], WuiListWallet.prototype, "tagVariant", void 0);
+__decorate$I([
+  n()
+], WuiListWallet.prototype, "icon", void 0);
+__decorate$I([
+  n()
+], WuiListWallet.prototype, "walletIcon", void 0);
+__decorate$I([
+  n()
+], WuiListWallet.prototype, "tabIdx", void 0);
+__decorate$I([
+  n({ type: Boolean })
+], WuiListWallet.prototype, "installed", void 0);
+__decorate$I([
+  n({ type: Boolean })
+], WuiListWallet.prototype, "disabled", void 0);
+__decorate$I([
+  n({ type: Boolean })
+], WuiListWallet.prototype, "showAllWallets", void 0);
+__decorate$I([
+  n({ type: Boolean })
+], WuiListWallet.prototype, "loading", void 0);
+__decorate$I([
+  n({ type: String })
+], WuiListWallet.prototype, "loadingSpinnerColor", void 0);
+WuiListWallet = __decorate$I([
+  customElement("wui-list-wallet")
+], WuiListWallet);
+var __decorate$H = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mAllWalletsWidget = class W3mAllWalletsWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.count = ApiController.state.count;
+    this.filteredCount = ApiController.state.filteredWallets.length;
+    this.isFetchingRecommendedWallets = ApiController.state.isFetchingRecommendedWallets;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val), ApiController.subscribeKey("count", (val) => this.count = val), ApiController.subscribeKey("filteredWallets", (val) => this.filteredCount = val.length), ApiController.subscribeKey("isFetchingRecommendedWallets", (val) => this.isFetchingRecommendedWallets = val));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    const wcConnector = this.connectors.find((c) => c.id === "walletConnect");
+    const { allWallets } = OptionsController.state;
+    if (!wcConnector || allWallets === "HIDE") {
+      return null;
+    }
+    if (allWallets === "ONLY_MOBILE" && !CoreHelperUtil.isMobile()) {
+      return null;
+    }
+    const featuredCount = ApiController.state.featured.length;
+    const rawCount = this.count + featuredCount;
+    const roundedCount = rawCount < 10 ? rawCount : Math.floor(rawCount / 10) * 10;
+    const count = this.filteredCount > 0 ? this.filteredCount : roundedCount;
+    let tagLabel = `${count}`;
+    if (this.filteredCount > 0) {
+      tagLabel = `${this.filteredCount}`;
+    } else if (count < rawCount) {
+      tagLabel = `${count}+`;
+    }
+    return x`
+      <wui-list-wallet
+        name="All Wallets"
+        walletIcon="allWallets"
+        showAllWallets
+        @click=${this.onAllWallets.bind(this)}
+        tagLabel=${tagLabel}
+        tagVariant="shade"
+        data-testid="all-wallets"
+        tabIdx=${o(this.tabIdx)}
+        .loading=${this.isFetchingRecommendedWallets}
+        loadingSpinnerColor=${this.isFetchingRecommendedWallets ? "fg-300" : "accent-100"}
+      ></wui-list-wallet>
+    `;
+  }
+  onAllWallets() {
+    EventsController.sendEvent({ type: "track", event: "CLICK_ALL_WALLETS" });
+    RouterController.push("AllWallets");
+  }
+};
+__decorate$H([
+  n()
+], W3mAllWalletsWidget.prototype, "tabIdx", void 0);
+__decorate$H([
+  r()
+], W3mAllWalletsWidget.prototype, "connectors", void 0);
+__decorate$H([
+  r()
+], W3mAllWalletsWidget.prototype, "count", void 0);
+__decorate$H([
+  r()
+], W3mAllWalletsWidget.prototype, "filteredCount", void 0);
+__decorate$H([
+  r()
+], W3mAllWalletsWidget.prototype, "isFetchingRecommendedWallets", void 0);
+W3mAllWalletsWidget = __decorate$H([
+  customElement("w3m-all-wallets-widget")
+], W3mAllWalletsWidget);
+var __decorate$G = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectAnnouncedWidget = class W3mConnectAnnouncedWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    const announcedConnectors = this.connectors.filter((connector) => connector.type === "ANNOUNCED");
+    if (!(announcedConnectors == null ? void 0 : announcedConnectors.length)) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    return x`
+      <wui-flex flexDirection="column" gap="xs">
+        ${announcedConnectors.filter(ConnectorUtil.showConnector).map((connector) => x`
+              <wui-list-wallet
+                imageSrc=${o(AssetUtil.getConnectorImage(connector))}
+                name=${connector.name ?? "Unknown"}
+                @click=${() => this.onConnector(connector)}
+                tagVariant="success"
+                tagLabel="installed"
+                data-testid=${`wallet-selector-${connector.id}`}
+                .installed=${true}
+                tabIdx=${o(this.tabIdx)}
+              >
+              </wui-list-wallet>
+            `)}
+      </wui-flex>
+    `;
+  }
+  onConnector(connector) {
+    if (connector.id === "walletConnect") {
+      if (CoreHelperUtil.isMobile()) {
+        RouterController.push("AllWallets");
+      } else {
+        RouterController.push("ConnectingWalletConnect");
+      }
+    } else {
+      RouterController.push("ConnectingExternal", { connector });
+    }
+  }
+};
+__decorate$G([
+  n()
+], W3mConnectAnnouncedWidget.prototype, "tabIdx", void 0);
+__decorate$G([
+  r()
+], W3mConnectAnnouncedWidget.prototype, "connectors", void 0);
+W3mConnectAnnouncedWidget = __decorate$G([
+  customElement("w3m-connect-announced-widget")
+], W3mConnectAnnouncedWidget);
+var __decorate$F = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectCustomWidget = class W3mConnectCustomWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.loading = false;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val));
+    if (CoreHelperUtil.isTelegram() && CoreHelperUtil.isIos()) {
+      this.loading = !ConnectionController.state.wcUri;
+      this.unsubscribe.push(ConnectionController.subscribeKey("wcUri", (val) => this.loading = !val));
+    }
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    const { customWallets } = OptionsController.state;
+    if (!(customWallets == null ? void 0 : customWallets.length)) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    const wallets = this.filterOutDuplicateWallets(customWallets);
+    return x`<wui-flex flexDirection="column" gap="xs">
+      ${wallets.map((wallet) => x`
+          <wui-list-wallet
+            imageSrc=${o(AssetUtil.getWalletImage(wallet))}
+            name=${wallet.name ?? "Unknown"}
+            @click=${() => this.onConnectWallet(wallet)}
+            data-testid=${`wallet-selector-${wallet.id}`}
+            tabIdx=${o(this.tabIdx)}
+            ?loading=${this.loading}
+          >
+          </wui-list-wallet>
+        `)}
+    </wui-flex>`;
+  }
+  filterOutDuplicateWallets(wallets) {
+    const recent = StorageUtil.getRecentWallets();
+    const connectorRDNSs = this.connectors.map((connector) => {
+      var _a;
+      return (_a = connector.info) == null ? void 0 : _a.rdns;
+    }).filter(Boolean);
+    const recentRDNSs = recent.map((wallet) => wallet.rdns).filter(Boolean);
+    const allRDNSs = connectorRDNSs.concat(recentRDNSs);
+    if (allRDNSs.includes("io.metamask.mobile") && CoreHelperUtil.isMobile()) {
+      const index = allRDNSs.indexOf("io.metamask.mobile");
+      allRDNSs[index] = "io.metamask";
+    }
+    const filtered = wallets.filter((wallet) => !allRDNSs.includes(String(wallet == null ? void 0 : wallet.rdns)));
+    return filtered;
+  }
+  onConnectWallet(wallet) {
+    if (this.loading) {
+      return;
+    }
+    RouterController.push("ConnectingWalletConnect", { wallet });
+  }
+};
+__decorate$F([
+  n()
+], W3mConnectCustomWidget.prototype, "tabIdx", void 0);
+__decorate$F([
+  r()
+], W3mConnectCustomWidget.prototype, "connectors", void 0);
+__decorate$F([
+  r()
+], W3mConnectCustomWidget.prototype, "loading", void 0);
+W3mConnectCustomWidget = __decorate$F([
+  customElement("w3m-connect-custom-widget")
+], W3mConnectCustomWidget);
+var __decorate$E = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectExternalWidget = class W3mConnectExternalWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    const externalConnectors = this.connectors.filter((connector) => connector.type === "EXTERNAL");
+    const filteredOutExcludedConnectors = externalConnectors.filter(ConnectorUtil.showConnector);
+    const filteredOutCoinbaseConnectors = filteredOutExcludedConnectors.filter((connector) => connector.id !== ConstantsUtil.CONNECTOR_ID.COINBASE_SDK);
+    if (!(filteredOutCoinbaseConnectors == null ? void 0 : filteredOutCoinbaseConnectors.length)) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    return x`
+      <wui-flex flexDirection="column" gap="xs">
+        ${filteredOutCoinbaseConnectors.map((connector) => x`
+            <wui-list-wallet
+              imageSrc=${o(AssetUtil.getConnectorImage(connector))}
+              .installed=${true}
+              name=${connector.name ?? "Unknown"}
+              data-testid=${`wallet-selector-external-${connector.id}`}
+              @click=${() => this.onConnector(connector)}
+              tabIdx=${o(this.tabIdx)}
+            >
+            </wui-list-wallet>
+          `)}
+      </wui-flex>
+    `;
+  }
+  onConnector(connector) {
+    RouterController.push("ConnectingExternal", { connector });
+  }
+};
+__decorate$E([
+  n()
+], W3mConnectExternalWidget.prototype, "tabIdx", void 0);
+__decorate$E([
+  r()
+], W3mConnectExternalWidget.prototype, "connectors", void 0);
+W3mConnectExternalWidget = __decorate$E([
+  customElement("w3m-connect-external-widget")
+], W3mConnectExternalWidget);
+var __decorate$D = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectFeaturedWidget = class W3mConnectFeaturedWidget2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.tabIdx = void 0;
+    this.wallets = [];
+  }
+  render() {
+    if (!this.wallets.length) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    return x`
+      <wui-flex flexDirection="column" gap="xs">
+        ${this.wallets.map((wallet) => x`
+            <wui-list-wallet
+              data-testid=${`wallet-selector-featured-${wallet.id}`}
+              imageSrc=${o(AssetUtil.getWalletImage(wallet))}
+              name=${wallet.name ?? "Unknown"}
+              @click=${() => this.onConnectWallet(wallet)}
+              tabIdx=${o(this.tabIdx)}
+            >
+            </wui-list-wallet>
+          `)}
+      </wui-flex>
+    `;
+  }
+  onConnectWallet(wallet) {
+    ConnectorController.selectWalletConnector(wallet);
+  }
+};
+__decorate$D([
+  n()
+], W3mConnectFeaturedWidget.prototype, "tabIdx", void 0);
+__decorate$D([
+  n()
+], W3mConnectFeaturedWidget.prototype, "wallets", void 0);
+W3mConnectFeaturedWidget = __decorate$D([
+  customElement("w3m-connect-featured-widget")
+], W3mConnectFeaturedWidget);
+var __decorate$C = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectInjectedWidget = class W3mConnectInjectedWidget2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.tabIdx = void 0;
+    this.connectors = [];
+  }
+  render() {
+    const injectedConnectors = this.connectors.filter(ConnectorUtil.showConnector);
+    if (injectedConnectors.length === 0) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    return x`
+      <wui-flex flexDirection="column" gap="xs">
+        ${injectedConnectors.map((connector) => x`
+            <wui-list-wallet
+              imageSrc=${o(AssetUtil.getConnectorImage(connector))}
+              .installed=${true}
+              name=${connector.name ?? "Unknown"}
+              tagVariant="success"
+              tagLabel="installed"
+              data-testid=${`wallet-selector-${connector.id}`}
+              @click=${() => this.onConnector(connector)}
+              tabIdx=${o(this.tabIdx)}
+            >
+            </wui-list-wallet>
+          `)}
+      </wui-flex>
+    `;
+  }
+  onConnector(connector) {
+    ConnectorController.setActiveConnector(connector);
+    RouterController.push("ConnectingExternal", { connector });
+  }
+};
+__decorate$C([
+  n()
+], W3mConnectInjectedWidget.prototype, "tabIdx", void 0);
+__decorate$C([
+  n()
+], W3mConnectInjectedWidget.prototype, "connectors", void 0);
+W3mConnectInjectedWidget = __decorate$C([
+  customElement("w3m-connect-injected-widget")
+], W3mConnectInjectedWidget);
+var __decorate$B = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectMultiChainWidget = class W3mConnectMultiChainWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    const multiChainConnectors = this.connectors.filter((connector) => connector.type === "MULTI_CHAIN" && connector.name !== "WalletConnect");
+    if (!(multiChainConnectors == null ? void 0 : multiChainConnectors.length)) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    return x`
+      <wui-flex flexDirection="column" gap="xs">
+        ${multiChainConnectors.map((connector) => x`
+            <wui-list-wallet
+              imageSrc=${o(AssetUtil.getConnectorImage(connector))}
+              .installed=${true}
+              name=${connector.name ?? "Unknown"}
+              tagVariant="shade"
+              tagLabel="multichain"
+              data-testid=${`wallet-selector-${connector.id}`}
+              @click=${() => this.onConnector(connector)}
+              tabIdx=${o(this.tabIdx)}
+            >
+            </wui-list-wallet>
+          `)}
+      </wui-flex>
+    `;
+  }
+  onConnector(connector) {
+    ConnectorController.setActiveConnector(connector);
+    RouterController.push("ConnectingMultiChain");
+  }
+};
+__decorate$B([
+  n()
+], W3mConnectMultiChainWidget.prototype, "tabIdx", void 0);
+__decorate$B([
+  r()
+], W3mConnectMultiChainWidget.prototype, "connectors", void 0);
+W3mConnectMultiChainWidget = __decorate$B([
+  customElement("w3m-connect-multi-chain-widget")
+], W3mConnectMultiChainWidget);
+var __decorate$A = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectRecentWidget = class W3mConnectRecentWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.loading = false;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val));
+    if (CoreHelperUtil.isTelegram() && CoreHelperUtil.isIos()) {
+      this.loading = !ConnectionController.state.wcUri;
+      this.unsubscribe.push(ConnectionController.subscribeKey("wcUri", (val) => this.loading = !val));
+    }
+  }
+  render() {
+    const recentWallets = StorageUtil.getRecentWallets();
+    const filteredRecentWallets = recentWallets.filter((wallet) => !WalletUtil.isExcluded(wallet)).filter((wallet) => !this.hasWalletConnector(wallet)).filter((wallet) => this.isWalletCompatibleWithCurrentChain(wallet));
+    if (!filteredRecentWallets.length) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    return x`
+      <wui-flex flexDirection="column" gap="xs">
+        ${filteredRecentWallets.map((wallet) => x`
+            <wui-list-wallet
+              imageSrc=${o(AssetUtil.getWalletImage(wallet))}
+              name=${wallet.name ?? "Unknown"}
+              @click=${() => this.onConnectWallet(wallet)}
+              tagLabel="recent"
+              tagVariant="shade"
+              tabIdx=${o(this.tabIdx)}
+              ?loading=${this.loading}
+            >
+            </wui-list-wallet>
+          `)}
+      </wui-flex>
+    `;
+  }
+  onConnectWallet(wallet) {
+    if (this.loading) {
+      return;
+    }
+    ConnectorController.selectWalletConnector(wallet);
+  }
+  hasWalletConnector(wallet) {
+    return this.connectors.some((connector) => connector.id === wallet.id || connector.name === wallet.name);
+  }
+  isWalletCompatibleWithCurrentChain(wallet) {
+    const currentNamespace = ChainController.state.activeChain;
+    if (currentNamespace && wallet.chains) {
+      return wallet.chains.some((c) => {
+        const chainNamespace = c.split(":")[0];
+        return currentNamespace === chainNamespace;
+      });
+    }
+    return true;
+  }
+};
+__decorate$A([
+  n()
+], W3mConnectRecentWidget.prototype, "tabIdx", void 0);
+__decorate$A([
+  r()
+], W3mConnectRecentWidget.prototype, "connectors", void 0);
+__decorate$A([
+  r()
+], W3mConnectRecentWidget.prototype, "loading", void 0);
+W3mConnectRecentWidget = __decorate$A([
+  customElement("w3m-connect-recent-widget")
+], W3mConnectRecentWidget);
+var __decorate$z = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectRecommendedWidget = class W3mConnectRecommendedWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.wallets = [];
+    this.loading = false;
+    if (CoreHelperUtil.isTelegram() && CoreHelperUtil.isIos()) {
+      this.loading = !ConnectionController.state.wcUri;
+      this.unsubscribe.push(ConnectionController.subscribeKey("wcUri", (val) => this.loading = !val));
+    }
+  }
+  render() {
+    const { connectors } = ConnectorController.state;
+    const { customWallets, featuredWalletIds } = OptionsController.state;
+    const recentWallets = StorageUtil.getRecentWallets();
+    const wcConnector = connectors.find((c) => c.id === "walletConnect");
+    const injectedConnectors = connectors.filter((c) => c.type === "INJECTED" || c.type === "ANNOUNCED" || c.type === "MULTI_CHAIN");
+    const injectedWallets = injectedConnectors.filter((i2) => i2.name !== "Browser Wallet");
+    if (!wcConnector) {
+      return null;
+    }
+    if (featuredWalletIds || customWallets || !this.wallets.length) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    const overrideLength = injectedWallets.length + recentWallets.length;
+    const maxRecommended = Math.max(0, 2 - overrideLength);
+    const wallets = WalletUtil.filterOutDuplicateWallets(this.wallets).slice(0, maxRecommended);
+    if (!wallets.length) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    return x`
+      <wui-flex flexDirection="column" gap="xs">
+        ${wallets.map((wallet) => x`
+            <wui-list-wallet
+              imageSrc=${o(AssetUtil.getWalletImage(wallet))}
+              name=${(wallet == null ? void 0 : wallet.name) ?? "Unknown"}
+              @click=${() => this.onConnectWallet(wallet)}
+              tabIdx=${o(this.tabIdx)}
+              ?loading=${this.loading}
+            >
+            </wui-list-wallet>
+          `)}
+      </wui-flex>
+    `;
+  }
+  onConnectWallet(wallet) {
+    if (this.loading) {
+      return;
+    }
+    const connector = ConnectorController.getConnector(wallet.id, wallet.rdns);
+    if (connector) {
+      RouterController.push("ConnectingExternal", { connector });
+    } else {
+      RouterController.push("ConnectingWalletConnect", { wallet });
+    }
+  }
+};
+__decorate$z([
+  n()
+], W3mConnectRecommendedWidget.prototype, "tabIdx", void 0);
+__decorate$z([
+  n()
+], W3mConnectRecommendedWidget.prototype, "wallets", void 0);
+__decorate$z([
+  r()
+], W3mConnectRecommendedWidget.prototype, "loading", void 0);
+W3mConnectRecommendedWidget = __decorate$z([
+  customElement("w3m-connect-recommended-widget")
+], W3mConnectRecommendedWidget);
+var __decorate$y = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectWalletConnectWidget = class W3mConnectWalletConnectWidget2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.connectorImages = AssetController.state.connectorImages;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val), AssetController.subscribeKey("connectorImages", (val) => this.connectorImages = val));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    if (CoreHelperUtil.isMobile()) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    const connector = this.connectors.find((c) => c.id === "walletConnect");
+    if (!connector) {
+      this.style.cssText = `display: none`;
+      return null;
+    }
+    const connectorImage = connector.imageUrl || this.connectorImages[(connector == null ? void 0 : connector.imageId) ?? ""];
+    return x`
+      <wui-list-wallet
+        imageSrc=${o(connectorImage)}
+        name=${connector.name ?? "Unknown"}
+        @click=${() => this.onConnector(connector)}
+        tagLabel="qr code"
+        tagVariant="main"
+        tabIdx=${o(this.tabIdx)}
+        data-testid="wallet-selector-walletconnect"
+      >
+      </wui-list-wallet>
+    `;
+  }
+  onConnector(connector) {
+    ConnectorController.setActiveConnector(connector);
+    RouterController.push("ConnectingWalletConnect");
+  }
+};
+__decorate$y([
+  n()
+], W3mConnectWalletConnectWidget.prototype, "tabIdx", void 0);
+__decorate$y([
+  r()
+], W3mConnectWalletConnectWidget.prototype, "connectors", void 0);
+__decorate$y([
+  r()
+], W3mConnectWalletConnectWidget.prototype, "connectorImages", void 0);
+W3mConnectWalletConnectWidget = __decorate$y([
+  customElement("w3m-connect-walletconnect-widget")
+], W3mConnectWalletConnectWidget);
+const styles$n = i`
+  :host {
+    margin-top: var(--wui-spacing-3xs);
+  }
+  wui-separator {
+    margin: var(--wui-spacing-m) calc(var(--wui-spacing-m) * -1) var(--wui-spacing-xs)
+      calc(var(--wui-spacing-m) * -1);
+    width: calc(100% + var(--wui-spacing-s) * 2);
+  }
+`;
+var __decorate$x = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectorList = class W3mConnectorList2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tabIdx = void 0;
+    this.connectors = ConnectorController.state.connectors;
+    this.recommended = ApiController.state.recommended;
+    this.featured = ApiController.state.featured;
+    this.unsubscribe.push(ConnectorController.subscribeKey("connectors", (val) => this.connectors = val), ApiController.subscribeKey("recommended", (val) => this.recommended = val), ApiController.subscribeKey("featured", (val) => this.featured = val));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    return x`
+      <wui-flex flexDirection="column" gap="xs"> ${this.connectorListTemplate()} </wui-flex>
+    `;
+  }
+  connectorListTemplate() {
+    const { custom, recent, announced, injected, multiChain, recommended, featured, external } = ConnectorUtil.getConnectorsByType(this.connectors, this.recommended, this.featured);
+    const connectorTypeOrder = ConnectorUtil.getConnectorTypeOrder({
+      custom,
+      recent,
+      announced,
+      injected,
+      multiChain,
+      recommended,
+      featured,
+      external
+    });
+    return connectorTypeOrder.map((type) => {
+      switch (type) {
+        case "injected":
+          return x`
+            ${multiChain.length ? x`<w3m-connect-multi-chain-widget
+                  tabIdx=${o(this.tabIdx)}
+                ></w3m-connect-multi-chain-widget>` : null}
+            ${announced.length ? x`<w3m-connect-announced-widget
+                  tabIdx=${o(this.tabIdx)}
+                ></w3m-connect-announced-widget>` : null}
+            ${injected.length ? x`<w3m-connect-injected-widget
+                  .connectors=${injected}
+                  tabIdx=${o(this.tabIdx)}
+                ></w3m-connect-injected-widget>` : null}
+          `;
+        case "walletConnect":
+          return x`<w3m-connect-walletconnect-widget
+            tabIdx=${o(this.tabIdx)}
+          ></w3m-connect-walletconnect-widget>`;
+        case "recent":
+          return x`<w3m-connect-recent-widget
+            tabIdx=${o(this.tabIdx)}
+          ></w3m-connect-recent-widget>`;
+        case "featured":
+          return x`<w3m-connect-featured-widget
+            .wallets=${featured}
+            tabIdx=${o(this.tabIdx)}
+          ></w3m-connect-featured-widget>`;
+        case "custom":
+          return x`<w3m-connect-custom-widget
+            tabIdx=${o(this.tabIdx)}
+          ></w3m-connect-custom-widget>`;
+        case "external":
+          return x`<w3m-connect-external-widget
+            tabIdx=${o(this.tabIdx)}
+          ></w3m-connect-external-widget>`;
+        case "recommended":
+          return x`<w3m-connect-recommended-widget
+            .wallets=${recommended}
+            tabIdx=${o(this.tabIdx)}
+          ></w3m-connect-recommended-widget>`;
+        default:
+          console.warn(`Unknown connector type: ${type}`);
+          return null;
+      }
+    });
+  }
+};
+W3mConnectorList.styles = styles$n;
+__decorate$x([
+  n()
+], W3mConnectorList.prototype, "tabIdx", void 0);
+__decorate$x([
+  r()
+], W3mConnectorList.prototype, "connectors", void 0);
+__decorate$x([
+  r()
+], W3mConnectorList.prototype, "recommended", void 0);
+__decorate$x([
+  r()
+], W3mConnectorList.prototype, "featured", void 0);
+W3mConnectorList = __decorate$x([
+  customElement("w3m-connector-list")
+], W3mConnectorList);
+const styles$m = i`
+  :host {
+    display: inline-flex;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-3xl);
+    padding: var(--wui-spacing-3xs);
+    position: relative;
+    height: 36px;
+    min-height: 36px;
+    overflow: hidden;
+  }
+
+  :host::before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 4px;
+    left: 4px;
+    display: block;
+    width: var(--local-tab-width);
+    height: 28px;
+    border-radius: var(--wui-border-radius-3xl);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    transform: translateX(calc(var(--local-tab) * var(--local-tab-width)));
+    transition: transform var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color, opacity;
+  }
+
+  :host([data-type='flex'])::before {
+    left: 3px;
+    transform: translateX(calc((var(--local-tab) * 34px) + (var(--local-tab) * 4px)));
+  }
+
+  :host([data-type='flex']) {
+    display: flex;
+    padding: 0px 0px 0px 12px;
+    gap: 4px;
+  }
+
+  :host([data-type='flex']) > button > wui-text {
+    position: absolute;
+    left: 18px;
+    opacity: 0;
+  }
+
+  button[data-active='true'] > wui-icon,
+  button[data-active='true'] > wui-text {
+    color: var(--wui-color-fg-100);
+  }
+
+  button[data-active='false'] > wui-icon,
+  button[data-active='false'] > wui-text {
+    color: var(--wui-color-fg-200);
+  }
+
+  button[data-active='true']:disabled,
+  button[data-active='false']:disabled {
+    background-color: transparent;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  button[data-active='true']:disabled > wui-text {
+    color: var(--wui-color-fg-200);
+  }
+
+  button[data-active='false']:disabled > wui-text {
+    color: var(--wui-color-fg-300);
+  }
+
+  button > wui-icon,
+  button > wui-text {
+    pointer-events: none;
+    transition: color var(--wui-e ase-out-power-1) var(--wui-duration-md);
+    will-change: color;
+  }
+
+  button {
+    width: var(--local-tab-width);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
+  }
+
+  :host([data-type='flex']) > button {
+    width: 34px;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  button:hover:enabled,
+  button:active:enabled {
+    background-color: transparent !important;
+  }
+
+  button:hover:enabled > wui-icon,
+  button:active:enabled > wui-icon {
+    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    color: var(--wui-color-fg-125);
+  }
+
+  button:hover:enabled > wui-text,
+  button:active:enabled > wui-text {
+    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    color: var(--wui-color-fg-125);
+  }
+
+  button {
+    border-radius: var(--wui-border-radius-3xl);
+  }
+`;
+var __decorate$w = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiTabs = class WuiTabs2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.tabs = [];
+    this.onTabChange = () => null;
+    this.buttons = [];
+    this.disabled = false;
+    this.localTabWidth = "100px";
+    this.activeTab = 0;
+    this.isDense = false;
+  }
+  render() {
+    this.isDense = this.tabs.length > 3;
+    this.style.cssText = `
+      --local-tab: ${this.activeTab};
+      --local-tab-width: ${this.localTabWidth};
+    `;
+    this.dataset["type"] = this.isDense ? "flex" : "block";
+    return this.tabs.map((tab, index) => {
+      var _a;
+      const isActive = index === this.activeTab;
+      return x`
+        <button
+          ?disabled=${this.disabled}
+          @click=${() => this.onTabClick(index)}
+          data-active=${isActive}
+          data-testid="tab-${(_a = tab.label) == null ? void 0 : _a.toLowerCase()}"
+        >
+          ${this.iconTemplate(tab)}
+          <wui-text variant="small-600" color="inherit"> ${tab.label} </wui-text>
+        </button>
+      `;
+    });
+  }
+  firstUpdated() {
+    if (this.shadowRoot && this.isDense) {
+      this.buttons = [...this.shadowRoot.querySelectorAll("button")];
+      setTimeout(() => {
+        this.animateTabs(0, true);
+      }, 0);
+    }
+  }
+  iconTemplate(tab) {
+    if (tab.icon) {
+      return x`<wui-icon size="xs" color="inherit" name=${tab.icon}></wui-icon>`;
+    }
+    return null;
+  }
+  onTabClick(index) {
+    if (this.buttons) {
+      this.animateTabs(index, false);
+    }
+    this.activeTab = index;
+    this.onTabChange(index);
+  }
+  animateTabs(index, initialAnimation) {
+    const passiveBtn = this.buttons[this.activeTab];
+    const activeBtn = this.buttons[index];
+    const passiveBtnText = passiveBtn == null ? void 0 : passiveBtn.querySelector("wui-text");
+    const activeBtnText = activeBtn == null ? void 0 : activeBtn.querySelector("wui-text");
+    const activeBtnBounds = activeBtn == null ? void 0 : activeBtn.getBoundingClientRect();
+    const activeBtnTextBounds = activeBtnText == null ? void 0 : activeBtnText.getBoundingClientRect();
+    if (passiveBtn && passiveBtnText && !initialAnimation && index !== this.activeTab) {
+      passiveBtnText.animate([{ opacity: 0 }], {
+        duration: 50,
+        easing: "ease",
+        fill: "forwards"
+      });
+      passiveBtn.animate([{ width: `34px` }], {
+        duration: 500,
+        easing: "ease",
+        fill: "forwards"
+      });
+    }
+    if (activeBtn && activeBtnBounds && activeBtnTextBounds && activeBtnText) {
+      if (index !== this.activeTab || initialAnimation) {
+        this.localTabWidth = `${Math.round(activeBtnBounds.width + activeBtnTextBounds.width) + 6}px`;
+        activeBtn.animate([{ width: `${activeBtnBounds.width + activeBtnTextBounds.width}px` }], {
+          duration: initialAnimation ? 0 : 500,
+          fill: "forwards",
+          easing: "ease"
+        });
+        activeBtnText.animate([{ opacity: 1 }], {
+          duration: initialAnimation ? 0 : 125,
+          delay: initialAnimation ? 0 : 200,
+          fill: "forwards",
+          easing: "ease"
+        });
+      }
+    }
+  }
+};
+WuiTabs.styles = [resetStyles, elementStyles, styles$m];
+__decorate$w([
+  n({ type: Array })
+], WuiTabs.prototype, "tabs", void 0);
+__decorate$w([
+  n()
+], WuiTabs.prototype, "onTabChange", void 0);
+__decorate$w([
+  n({ type: Array })
+], WuiTabs.prototype, "buttons", void 0);
+__decorate$w([
+  n({ type: Boolean })
+], WuiTabs.prototype, "disabled", void 0);
+__decorate$w([
+  n()
+], WuiTabs.prototype, "localTabWidth", void 0);
+__decorate$w([
+  r()
+], WuiTabs.prototype, "activeTab", void 0);
+__decorate$w([
+  r()
+], WuiTabs.prototype, "isDense", void 0);
+WuiTabs = __decorate$w([
+  customElement("wui-tabs")
+], WuiTabs);
+var __decorate$v = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingHeader = class W3mConnectingHeader2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.platformTabs = [];
+    this.unsubscribe = [];
+    this.platforms = [];
+    this.onSelectPlatfrom = void 0;
+  }
+  disconnectCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    const tabs = this.generateTabs();
+    return x`
+      <wui-flex justifyContent="center" .padding=${["0", "0", "l", "0"]}>
+        <wui-tabs .tabs=${tabs} .onTabChange=${this.onTabChange.bind(this)}></wui-tabs>
+      </wui-flex>
+    `;
+  }
+  generateTabs() {
+    const tabs = this.platforms.map((platform) => {
+      if (platform === "browser") {
+        return { label: "Browser", icon: "extension", platform: "browser" };
+      } else if (platform === "mobile") {
+        return { label: "Mobile", icon: "mobile", platform: "mobile" };
+      } else if (platform === "qrcode") {
+        return { label: "Mobile", icon: "mobile", platform: "qrcode" };
+      } else if (platform === "web") {
+        return { label: "Webapp", icon: "browser", platform: "web" };
+      } else if (platform === "desktop") {
+        return { label: "Desktop", icon: "desktop", platform: "desktop" };
+      }
+      return { label: "Browser", icon: "extension", platform: "unsupported" };
+    });
+    this.platformTabs = tabs.map(({ platform }) => platform);
+    return tabs;
+  }
+  onTabChange(index) {
+    var _a;
+    const tab = this.platformTabs[index];
+    if (tab) {
+      (_a = this.onSelectPlatfrom) == null ? void 0 : _a.call(this, tab);
+    }
+  }
+};
+__decorate$v([
+  n({ type: Array })
+], W3mConnectingHeader.prototype, "platforms", void 0);
+__decorate$v([
+  n()
+], W3mConnectingHeader.prototype, "onSelectPlatfrom", void 0);
+W3mConnectingHeader = __decorate$v([
+  customElement("w3m-connecting-header")
+], W3mConnectingHeader);
+const styles$l = i`
+  :host {
+    width: var(--local-width);
+    position: relative;
+  }
+
+  button {
+    border: none;
+    border-radius: var(--local-border-radius);
+    width: var(--local-width);
+    white-space: nowrap;
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='md'] {
+    padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
+    height: 36px;
+  }
+
+  button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {
+    padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-s);
+  }
+
+  button[data-size='md'][data-icon-right='true'][data-icon-left='false'] {
+    padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);
+  }
+
+  button[data-size='lg'] {
+    padding: var(--wui-spacing-m) var(--wui-spacing-2l);
+    height: 48px;
+  }
+
+  /* -- Variants --------------------------------------------------------- */
+  button[data-variant='main'] {
+    background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='inverse'] {
+    background-color: var(--wui-color-inverse-100);
+    color: var(--wui-color-inverse-000);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  button[data-variant='accent-error'] {
+    background: var(--wui-color-error-glass-015);
+    color: var(--wui-color-error-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
+  }
+
+  button[data-variant='accent-success'] {
+    background: var(--wui-color-success-glass-015);
+    color: var(--wui-color-success-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
+  }
+
+  button[data-variant='neutral'] {
+    background: transparent;
+    color: var(--wui-color-fg-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  /* -- Focus states --------------------------------------------------- */
+  button[data-variant='main']:focus-visible:enabled {
+    background-color: var(--wui-color-accent-090);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='inverse']:focus-visible:enabled {
+    background-color: var(--wui-color-inverse-100);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-gray-glass-010),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='accent']:focus-visible:enabled {
+    background-color: var(--wui-color-accent-glass-010);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='accent-error']:focus-visible:enabled {
+    background: var(--wui-color-error-glass-015);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-error-100),
+      0 0 0 4px var(--wui-color-error-glass-020);
+  }
+  button[data-variant='accent-success']:focus-visible:enabled {
+    background: var(--wui-color-success-glass-015);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-success-100),
+      0 0 0 4px var(--wui-color-success-glass-020);
+  }
+  button[data-variant='neutral']:focus-visible:enabled {
+    background: var(--wui-color-gray-glass-005);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-gray-glass-010),
+      0 0 0 4px var(--wui-color-gray-glass-002);
+  }
+
+  /* -- Hover & Active states ----------------------------------------------------------- */
+  @media (hover: hover) and (pointer: fine) {
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button[data-variant='accent']:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+
+    button[data-variant='accent-error']:hover:enabled {
+      background: var(--wui-color-error-glass-020);
+      color: var(--wui-color-error-100);
+    }
+
+    button[data-variant='accent-error']:active:enabled {
+      background: var(--wui-color-error-glass-030);
+      color: var(--wui-color-error-100);
+    }
+
+    button[data-variant='accent-success']:hover:enabled {
+      background: var(--wui-color-success-glass-020);
+      color: var(--wui-color-success-100);
+    }
+
+    button[data-variant='accent-success']:active:enabled {
+      background: var(--wui-color-success-glass-030);
+      color: var(--wui-color-success-100);
+    }
+
+    button[data-variant='neutral']:hover:enabled {
+      background: var(--wui-color-gray-glass-002);
+    }
+
+    button[data-variant='neutral']:active:enabled {
+      background: var(--wui-color-gray-glass-005);
+    }
+
+    button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
+      padding-left: var(--wui-spacing-m);
+    }
+
+    button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
+      padding-right: var(--wui-spacing-m);
+    }
+  }
+
+  /* -- Disabled state --------------------------------------------------- */
+  button:disabled {
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    color: var(--wui-color-gray-glass-020);
+    cursor: not-allowed;
+  }
+
+  button > wui-text {
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+    opacity: var(--local-opacity-100);
+  }
+
+  ::slotted(*) {
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+    opacity: var(--local-opacity-100);
+  }
+
+  wui-loading-spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    opacity: var(--local-opacity-000);
+  }
+`;
+var __decorate$u = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+const SPINNER_COLOR_BY_VARIANT = {
+  main: "inverse-100",
+  inverse: "inverse-000",
+  accent: "accent-100",
+  "accent-error": "error-100",
+  "accent-success": "success-100",
+  neutral: "fg-100",
+  disabled: "gray-glass-020"
+};
+const TEXT_VARIANT_BY_SIZE = {
+  lg: "paragraph-600",
+  md: "small-600"
+};
+const SPINNER_SIZE_BY_SIZE = {
+  lg: "md",
+  md: "md"
+};
+let WuiButton = class WuiButton2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.size = "lg";
+    this.disabled = false;
+    this.fullWidth = false;
+    this.loading = false;
+    this.variant = "main";
+    this.hasIconLeft = false;
+    this.hasIconRight = false;
+    this.borderRadius = "m";
+  }
+  render() {
+    this.style.cssText = `
+    --local-width: ${this.fullWidth ? "100%" : "auto"};
+    --local-opacity-100: ${this.loading ? 0 : 1};
+    --local-opacity-000: ${this.loading ? 1 : 0};
+    --local-border-radius: var(--wui-border-radius-${this.borderRadius});
+    `;
+    const textVariant = this.textVariant ?? TEXT_VARIANT_BY_SIZE[this.size];
+    return x`
+      <button
+        data-variant=${this.variant}
+        data-icon-left=${this.hasIconLeft}
+        data-icon-right=${this.hasIconRight}
+        data-size=${this.size}
+        ?disabled=${this.disabled}
+      >
+        ${this.loadingTemplate()}
+        <slot name="iconLeft" @slotchange=${() => this.handleSlotLeftChange()}></slot>
+        <wui-text variant=${textVariant} color="inherit">
+          <slot></slot>
+        </wui-text>
+        <slot name="iconRight" @slotchange=${() => this.handleSlotRightChange()}></slot>
+      </button>
+    `;
+  }
+  handleSlotLeftChange() {
+    this.hasIconLeft = true;
+  }
+  handleSlotRightChange() {
+    this.hasIconRight = true;
+  }
+  loadingTemplate() {
+    if (this.loading) {
+      const size = SPINNER_SIZE_BY_SIZE[this.size];
+      const color = this.disabled ? SPINNER_COLOR_BY_VARIANT["disabled"] : SPINNER_COLOR_BY_VARIANT[this.variant];
+      return x`<wui-loading-spinner color=${color} size=${size}></wui-loading-spinner>`;
+    }
+    return x``;
+  }
+};
+WuiButton.styles = [resetStyles, elementStyles, styles$l];
+__decorate$u([
+  n()
+], WuiButton.prototype, "size", void 0);
+__decorate$u([
+  n({ type: Boolean })
+], WuiButton.prototype, "disabled", void 0);
+__decorate$u([
+  n({ type: Boolean })
+], WuiButton.prototype, "fullWidth", void 0);
+__decorate$u([
+  n({ type: Boolean })
+], WuiButton.prototype, "loading", void 0);
+__decorate$u([
+  n()
+], WuiButton.prototype, "variant", void 0);
+__decorate$u([
+  n({ type: Boolean })
+], WuiButton.prototype, "hasIconLeft", void 0);
+__decorate$u([
+  n({ type: Boolean })
+], WuiButton.prototype, "hasIconRight", void 0);
+__decorate$u([
+  n()
+], WuiButton.prototype, "borderRadius", void 0);
+__decorate$u([
+  n()
+], WuiButton.prototype, "textVariant", void 0);
+WuiButton = __decorate$u([
+  customElement("wui-button")
+], WuiButton);
+const styles$k = i`
+  button {
+    padding: var(--wui-spacing-4xs) var(--wui-spacing-xxs);
+    border-radius: var(--wui-border-radius-3xs);
+    background-color: transparent;
+    color: var(--wui-color-accent-100);
+  }
+
+  button:disabled {
+    background-color: transparent;
+    color: var(--wui-color-gray-glass-015);
+  }
+
+  button:hover {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+`;
+var __decorate$t = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiLink = class WuiLink2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.tabIdx = void 0;
+    this.disabled = false;
+    this.color = "inherit";
+  }
+  render() {
+    return x`
+      <button ?disabled=${this.disabled} tabindex=${o(this.tabIdx)}>
+        <slot name="iconLeft"></slot>
+        <wui-text variant="small-600" color=${this.color}>
+          <slot></slot>
+        </wui-text>
+        <slot name="iconRight"></slot>
+      </button>
+    `;
+  }
+};
+WuiLink.styles = [resetStyles, elementStyles, styles$k];
+__decorate$t([
+  n()
+], WuiLink.prototype, "tabIdx", void 0);
+__decorate$t([
+  n({ type: Boolean })
+], WuiLink.prototype, "disabled", void 0);
+__decorate$t([
+  n()
+], WuiLink.prototype, "color", void 0);
+WuiLink = __decorate$t([
+  customElement("wui-link")
+], WuiLink);
+const styles$j = i`
+  :host {
+    display: block;
+    width: var(--wui-box-size-md);
+    height: var(--wui-box-size-md);
+  }
+
+  svg {
+    width: var(--wui-box-size-md);
+    height: var(--wui-box-size-md);
+  }
+
+  rect {
+    fill: none;
+    stroke: var(--wui-color-accent-100);
+    stroke-width: 4px;
+    stroke-linecap: round;
+    animation: dash 1s linear infinite;
+  }
+
+  @keyframes dash {
+    to {
+      stroke-dashoffset: 0px;
+    }
+  }
+`;
+var __decorate$s = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiLoadingThumbnail = class WuiLoadingThumbnail2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.radius = 36;
+  }
+  render() {
+    return this.svgLoaderTemplate();
+  }
+  svgLoaderTemplate() {
+    const radius = this.radius > 50 ? 50 : this.radius;
+    const standardValue = 36;
+    const radiusFactor = standardValue - radius;
+    const dashArrayStart = 116 + radiusFactor;
+    const dashArrayEnd = 245 + radiusFactor;
+    const dashOffset = 360 + radiusFactor * 1.75;
+    return x`
+      <svg viewBox="0 0 110 110" width="110" height="110">
+        <rect
+          x="2"
+          y="2"
+          width="106"
+          height="106"
+          rx=${radius}
+          stroke-dasharray="${dashArrayStart} ${dashArrayEnd}"
+          stroke-dashoffset=${dashOffset}
+        />
+      </svg>
+    `;
+  }
+};
+WuiLoadingThumbnail.styles = [resetStyles, styles$j];
+__decorate$s([
+  n({ type: Number })
+], WuiLoadingThumbnail.prototype, "radius", void 0);
+WuiLoadingThumbnail = __decorate$s([
+  customElement("wui-loading-thumbnail")
+], WuiLoadingThumbnail);
+const styles$i = i`
+  button {
+    border: none;
+    border-radius: var(--wui-border-radius-3xl);
+  }
+
+  button[data-variant='main'] {
+    background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  button[data-variant='gray'] {
+    background-color: transparent;
+    color: var(--wui-color-fg-200);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='shade'] {
+    background-color: transparent;
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-size='sm'] {
+    height: 32px;
+    padding: 0 var(--wui-spacing-s);
+  }
+
+  button[data-size='md'] {
+    height: 40px;
+    padding: 0 var(--wui-spacing-l);
+  }
+
+  button[data-size='sm'] > wui-image {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='md'] > wui-image {
+    width: 24px;
+    height: 24px;
+  }
+
+  button[data-size='sm'] > wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-size='md'] > wui-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  wui-image {
+    border-radius: var(--wui-border-radius-3xl);
+    overflow: hidden;
+  }
+
+  button.disabled > wui-icon,
+  button.disabled > wui-image {
+    filter: grayscale(1);
+  }
+
+  button[data-variant='main'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
+  }
+
+  button[data-variant='shade'] > wui-image,
+  button[data-variant='gray'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button[data-variant='main']:focus-visible {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button[data-variant='accent']:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+
+    button[data-variant='shade']:focus-visible,
+    button[data-variant='gray']:focus-visible,
+    button[data-variant='shade']:hover,
+    button[data-variant='gray']:hover {
+      background-color: var(--wui-color-gray-glass-002);
+    }
+
+    button[data-variant='gray']:active,
+    button[data-variant='shade']:active {
+      background-color: var(--wui-color-gray-glass-005);
+    }
+  }
+
+  button.disabled {
+    color: var(--wui-color-gray-glass-020);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    pointer-events: none;
+  }
+`;
+var __decorate$r = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiChipButton = class WuiChipButton2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.variant = "accent";
+    this.imageSrc = "";
+    this.disabled = false;
+    this.icon = "externalLink";
+    this.size = "md";
+    this.text = "";
+  }
+  render() {
+    const textVariant = this.size === "sm" ? "small-600" : "paragraph-600";
+    return x`
+      <button
+        class=${this.disabled ? "disabled" : ""}
+        data-variant=${this.variant}
+        data-size=${this.size}
+      >
+        ${this.imageSrc ? x`<wui-image src=${this.imageSrc}></wui-image>` : null}
+        <wui-text variant=${textVariant} color="inherit"> ${this.text} </wui-text>
+        <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
+      </button>
+    `;
+  }
+};
+WuiChipButton.styles = [resetStyles, elementStyles, styles$i];
+__decorate$r([
+  n()
+], WuiChipButton.prototype, "variant", void 0);
+__decorate$r([
+  n()
+], WuiChipButton.prototype, "imageSrc", void 0);
+__decorate$r([
+  n({ type: Boolean })
+], WuiChipButton.prototype, "disabled", void 0);
+__decorate$r([
+  n()
+], WuiChipButton.prototype, "icon", void 0);
+__decorate$r([
+  n()
+], WuiChipButton.prototype, "size", void 0);
+__decorate$r([
+  n()
+], WuiChipButton.prototype, "text", void 0);
+WuiChipButton = __decorate$r([
+  customElement("wui-chip-button")
+], WuiChipButton);
+const styles$h = i`
+  wui-flex {
+    width: 100%;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xs);
+  }
+`;
+var __decorate$q = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiCtaButton = class WuiCtaButton2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.label = "";
+    this.buttonLabel = "";
+  }
+  render() {
+    return x`
+      <wui-flex
+        justifyContent="space-between"
+        alignItems="center"
+        .padding=${["1xs", "2l", "1xs", "2l"]}
+      >
+        <wui-text variant="paragraph-500" color="fg-200">${this.label}</wui-text>
+        <wui-chip-button size="sm" variant="shade" text=${this.buttonLabel} icon="chevronRight">
+        </wui-chip-button>
+      </wui-flex>
+    `;
+  }
+};
+WuiCtaButton.styles = [resetStyles, elementStyles, styles$h];
+__decorate$q([
+  n({ type: Boolean })
+], WuiCtaButton.prototype, "disabled", void 0);
+__decorate$q([
+  n()
+], WuiCtaButton.prototype, "label", void 0);
+__decorate$q([
+  n()
+], WuiCtaButton.prototype, "buttonLabel", void 0);
+WuiCtaButton = __decorate$q([
+  customElement("wui-cta-button")
+], WuiCtaButton);
+const styles$g = i`
+  :host {
+    display: block;
+    padding: 0 var(--wui-spacing-xl) var(--wui-spacing-xl);
+  }
+`;
+var __decorate$p = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mMobileDownloadLinks = class W3mMobileDownloadLinks2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.wallet = void 0;
+  }
+  render() {
+    if (!this.wallet) {
+      this.style.display = "none";
+      return null;
+    }
+    const { name, app_store, play_store, chrome_store, homepage } = this.wallet;
+    const isMobile = CoreHelperUtil.isMobile();
+    const isIos = CoreHelperUtil.isIos();
+    const isAndroid = CoreHelperUtil.isAndroid();
+    const isMultiple = [app_store, play_store, homepage, chrome_store].filter(Boolean).length > 1;
+    const shortName = UiHelperUtil.getTruncateString({
+      string: name,
+      charsStart: 12,
+      charsEnd: 0,
+      truncate: "end"
+    });
+    if (isMultiple && !isMobile) {
+      return x`
+        <wui-cta-button
+          label=${`Don't have ${shortName}?`}
+          buttonLabel="Get"
+          @click=${() => RouterController.push("Downloads", { wallet: this.wallet })}
+        ></wui-cta-button>
+      `;
+    }
+    if (!isMultiple && homepage) {
+      return x`
+        <wui-cta-button
+          label=${`Don't have ${shortName}?`}
+          buttonLabel="Get"
+          @click=${this.onHomePage.bind(this)}
+        ></wui-cta-button>
+      `;
+    }
+    if (app_store && isIos) {
+      return x`
+        <wui-cta-button
+          label=${`Don't have ${shortName}?`}
+          buttonLabel="Get"
+          @click=${this.onAppStore.bind(this)}
+        ></wui-cta-button>
+      `;
+    }
+    if (play_store && isAndroid) {
+      return x`
+        <wui-cta-button
+          label=${`Don't have ${shortName}?`}
+          buttonLabel="Get"
+          @click=${this.onPlayStore.bind(this)}
+        ></wui-cta-button>
+      `;
+    }
+    this.style.display = "none";
+    return null;
+  }
+  onAppStore() {
+    var _a;
+    if ((_a = this.wallet) == null ? void 0 : _a.app_store) {
+      CoreHelperUtil.openHref(this.wallet.app_store, "_blank");
+    }
+  }
+  onPlayStore() {
+    var _a;
+    if ((_a = this.wallet) == null ? void 0 : _a.play_store) {
+      CoreHelperUtil.openHref(this.wallet.play_store, "_blank");
+    }
+  }
+  onHomePage() {
+    var _a;
+    if ((_a = this.wallet) == null ? void 0 : _a.homepage) {
+      CoreHelperUtil.openHref(this.wallet.homepage, "_blank");
+    }
+  }
+};
+W3mMobileDownloadLinks.styles = [styles$g];
+__decorate$p([
+  n({ type: Object })
+], W3mMobileDownloadLinks.prototype, "wallet", void 0);
+W3mMobileDownloadLinks = __decorate$p([
+  customElement("w3m-mobile-download-links")
+], W3mMobileDownloadLinks);
+const styles$f = i`
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(3px);
+    }
+    50% {
+      transform: translateX(-3px);
+    }
+    75% {
+      transform: translateX(3px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  wui-flex:first-child:not(:only-child) {
+    position: relative;
+  }
+
+  wui-loading-thumbnail {
+    position: absolute;
+  }
+
+  wui-icon-box {
+    position: absolute;
+    right: calc(var(--wui-spacing-3xs) * -1);
+    bottom: calc(var(--wui-spacing-3xs) * -1);
+    opacity: 0;
+    transform: scale(0.5);
+    transition-property: opacity, transform;
+    transition-duration: var(--wui-duration-lg);
+    transition-timing-function: var(--wui-ease-out-power-2);
+    will-change: opacity, transform;
+  }
+
+  wui-text[align='center'] {
+    width: 100%;
+    padding: 0px var(--wui-spacing-l);
+  }
+
+  [data-error='true'] wui-icon-box {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  [data-error='true'] > wui-flex:first-child {
+    animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  }
+
+  [data-retry='false'] wui-link {
+    display: none;
+  }
+
+  [data-retry='true'] wui-link {
+    display: block;
+    opacity: 1;
+  }
+`;
+var __decorate$o = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+class W3mConnectingWidget extends i$1 {
+  constructor() {
+    var _a, _b, _c, _d, _e;
+    super();
+    this.wallet = (_a = RouterController.state.data) == null ? void 0 : _a.wallet;
+    this.connector = (_b = RouterController.state.data) == null ? void 0 : _b.connector;
+    this.timeout = void 0;
+    this.secondaryBtnIcon = "refresh";
+    this.onConnect = void 0;
+    this.onRender = void 0;
+    this.onAutoConnect = void 0;
+    this.isWalletConnect = true;
+    this.unsubscribe = [];
+    this.imageSrc = AssetUtil.getWalletImage(this.wallet) ?? AssetUtil.getConnectorImage(this.connector);
+    this.name = ((_c = this.wallet) == null ? void 0 : _c.name) ?? ((_d = this.connector) == null ? void 0 : _d.name) ?? "Wallet";
+    this.isRetrying = false;
+    this.uri = ConnectionController.state.wcUri;
+    this.error = ConnectionController.state.wcError;
+    this.ready = false;
+    this.showRetry = false;
+    this.secondaryBtnLabel = "Try again";
+    this.secondaryLabel = "Accept connection request in the wallet";
+    this.isLoading = false;
+    this.isMobile = false;
+    this.onRetry = void 0;
+    this.unsubscribe.push(...[
+      ConnectionController.subscribeKey("wcUri", (val) => {
+        var _a2;
+        this.uri = val;
+        if (this.isRetrying && this.onRetry) {
+          this.isRetrying = false;
+          (_a2 = this.onConnect) == null ? void 0 : _a2.call(this);
+        }
+      }),
+      ConnectionController.subscribeKey("wcError", (val) => this.error = val)
+    ]);
+    if ((CoreHelperUtil.isTelegram() || CoreHelperUtil.isSafari()) && CoreHelperUtil.isIos() && ConnectionController.state.wcUri) {
+      (_e = this.onConnect) == null ? void 0 : _e.call(this);
+    }
+  }
+  firstUpdated() {
+    var _a;
+    (_a = this.onAutoConnect) == null ? void 0 : _a.call(this);
+    this.showRetry = !this.onAutoConnect;
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+    ConnectionController.setWcError(false);
+    clearTimeout(this.timeout);
+  }
+  render() {
+    var _a;
+    (_a = this.onRender) == null ? void 0 : _a.call(this);
+    this.onShowRetry();
+    const subLabel = this.error ? "Connection can be declined if a previous request is still active" : this.secondaryLabel;
+    let label = `Continue in ${this.name}`;
+    if (this.error) {
+      label = "Connection declined";
+    }
+    return x`
+      <wui-flex
+        data-error=${o(this.error)}
+        data-retry=${this.showRetry}
+        flexDirection="column"
+        alignItems="center"
+        .padding=${["3xl", "xl", "xl", "xl"]}
+        gap="xl"
+      >
+        <wui-flex justifyContent="center" alignItems="center">
+          <wui-wallet-image size="lg" imageSrc=${o(this.imageSrc)}></wui-wallet-image>
+
+          ${this.error ? null : this.loaderTemplate()}
+
+          <wui-icon-box
+            backgroundColor="error-100"
+            background="opaque"
+            iconColor="error-100"
+            icon="close"
+            size="sm"
+            border
+            borderColor="wui-color-bg-125"
+          ></wui-icon-box>
+        </wui-flex>
+
+        <wui-flex flexDirection="column" alignItems="center" gap="xs">
+          <wui-text variant="paragraph-500" color=${this.error ? "error-100" : "fg-100"}>
+            ${label}
+          </wui-text>
+          <wui-text align="center" variant="small-500" color="fg-200">${subLabel}</wui-text>
+        </wui-flex>
+
+        ${this.secondaryBtnLabel ? x`
+              <wui-button
+                variant="accent"
+                size="md"
+                ?disabled=${this.isRetrying || this.isLoading}
+                @click=${this.onTryAgain.bind(this)}
+                data-testid="w3m-connecting-widget-secondary-button"
+              >
+                <wui-icon color="inherit" slot="iconLeft" name=${this.secondaryBtnIcon}></wui-icon>
+                ${this.secondaryBtnLabel}
+              </wui-button>
+            ` : null}
+      </wui-flex>
+
+      ${this.isWalletConnect ? x`
+            <wui-flex .padding=${["0", "xl", "xl", "xl"]} justifyContent="center">
+              <wui-link @click=${this.onCopyUri} color="fg-200" data-testid="wui-link-copy">
+                <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
+                Copy link
+              </wui-link>
+            </wui-flex>
+          ` : null}
+
+      <w3m-mobile-download-links .wallet=${this.wallet}></w3m-mobile-download-links>
+    `;
+  }
+  onShowRetry() {
+    var _a;
+    if (this.error && !this.showRetry) {
+      this.showRetry = true;
+      const retryButton = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("wui-button");
+      retryButton == null ? void 0 : retryButton.animate([{ opacity: 0 }, { opacity: 1 }], {
+        fill: "forwards",
+        easing: "ease"
+      });
+    }
+  }
+  onTryAgain() {
+    var _a, _b;
+    ConnectionController.setWcError(false);
+    if (this.onRetry) {
+      this.isRetrying = true;
+      (_a = this.onRetry) == null ? void 0 : _a.call(this);
+    } else {
+      (_b = this.onConnect) == null ? void 0 : _b.call(this);
+    }
+  }
+  loaderTemplate() {
+    const borderRadiusMaster = ThemeController.state.themeVariables["--w3m-border-radius-master"];
+    const radius = borderRadiusMaster ? parseInt(borderRadiusMaster.replace("px", ""), 10) : 4;
+    return x`<wui-loading-thumbnail radius=${radius * 9}></wui-loading-thumbnail>`;
+  }
+  onCopyUri() {
+    try {
+      if (this.uri) {
+        CoreHelperUtil.copyToClopboard(this.uri);
+        SnackController.showSuccess("Link copied");
+      }
+    } catch {
+      SnackController.showError("Failed to copy");
+    }
+  }
+}
+W3mConnectingWidget.styles = styles$f;
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "isRetrying", void 0);
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "uri", void 0);
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "error", void 0);
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "ready", void 0);
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "showRetry", void 0);
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "secondaryBtnLabel", void 0);
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "secondaryLabel", void 0);
+__decorate$o([
+  r()
+], W3mConnectingWidget.prototype, "isLoading", void 0);
+__decorate$o([
+  n({ type: Boolean })
+], W3mConnectingWidget.prototype, "isMobile", void 0);
+__decorate$o([
+  n()
+], W3mConnectingWidget.prototype, "onRetry", void 0);
+var __decorate$n = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcBrowser = class W3mConnectingWcBrowser2 extends W3mConnectingWidget {
+  constructor() {
+    super();
+    if (!this.wallet) {
+      throw new Error("w3m-connecting-wc-browser: No wallet provided");
+    }
+    this.onConnect = this.onConnectProxy.bind(this);
+    this.onAutoConnect = this.onConnectProxy.bind(this);
+    EventsController.sendEvent({
+      type: "track",
+      event: "SELECT_WALLET",
+      properties: { name: this.wallet.name, platform: "browser" }
+    });
+  }
+  async onConnectProxy() {
+    var _a;
+    try {
+      this.error = false;
+      const { connectors } = ConnectorController.state;
+      const connector = connectors.find((c) => {
+        var _a2, _b, _c;
+        return c.type === "ANNOUNCED" && ((_a2 = c.info) == null ? void 0 : _a2.rdns) === ((_b = this.wallet) == null ? void 0 : _b.rdns) || c.type === "INJECTED" || c.name === ((_c = this.wallet) == null ? void 0 : _c.name);
+      });
+      if (connector) {
+        await ConnectionController.connectExternal(connector, connector.chain);
+      } else {
+        throw new Error("w3m-connecting-wc-browser: No connector found");
+      }
+      ModalController.close();
+      EventsController.sendEvent({
+        type: "track",
+        event: "CONNECT_SUCCESS",
+        properties: { method: "browser", name: ((_a = this.wallet) == null ? void 0 : _a.name) || "Unknown" }
+      });
+    } catch (error) {
+      EventsController.sendEvent({
+        type: "track",
+        event: "CONNECT_ERROR",
+        properties: { message: (error == null ? void 0 : error.message) ?? "Unknown" }
+      });
+      this.error = true;
+    }
+  }
+};
+W3mConnectingWcBrowser = __decorate$n([
+  customElement("w3m-connecting-wc-browser")
+], W3mConnectingWcBrowser);
+var __decorate$m = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcDesktop = class W3mConnectingWcDesktop2 extends W3mConnectingWidget {
+  constructor() {
+    super();
+    if (!this.wallet) {
+      throw new Error("w3m-connecting-wc-desktop: No wallet provided");
+    }
+    this.onConnect = this.onConnectProxy.bind(this);
+    this.onRender = this.onRenderProxy.bind(this);
+    EventsController.sendEvent({
+      type: "track",
+      event: "SELECT_WALLET",
+      properties: { name: this.wallet.name, platform: "desktop" }
+    });
+  }
+  onRenderProxy() {
+    var _a;
+    if (!this.ready && this.uri) {
+      this.ready = true;
+      (_a = this.onConnect) == null ? void 0 : _a.call(this);
+    }
+  }
+  onConnectProxy() {
+    var _a;
+    if (((_a = this.wallet) == null ? void 0 : _a.desktop_link) && this.uri) {
+      try {
+        this.error = false;
+        const { desktop_link, name } = this.wallet;
+        const { redirect, href } = CoreHelperUtil.formatNativeUrl(desktop_link, this.uri);
+        ConnectionController.setWcLinking({ name, href });
+        ConnectionController.setRecentWallet(this.wallet);
+        CoreHelperUtil.openHref(redirect, "_blank");
+      } catch {
+        this.error = true;
+      }
+    }
+  }
+};
+W3mConnectingWcDesktop = __decorate$m([
+  customElement("w3m-connecting-wc-desktop")
+], W3mConnectingWcDesktop);
+var __decorate$l = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcMobile = class W3mConnectingWcMobile2 extends W3mConnectingWidget {
+  constructor() {
+    super();
+    this.btnLabelTimeout = void 0;
+    this.redirectDeeplink = void 0;
+    this.redirectUniversalLink = void 0;
+    this.target = void 0;
+    this.preferUniversalLinks = OptionsController.state.experimental_preferUniversalLinks;
+    this.isLoading = true;
+    this.onConnect = () => {
+      var _a;
+      if (((_a = this.wallet) == null ? void 0 : _a.mobile_link) && this.uri) {
+        try {
+          this.error = false;
+          const { mobile_link, link_mode, name } = this.wallet;
+          const { redirect, redirectUniversalLink, href } = CoreHelperUtil.formatNativeUrl(mobile_link, this.uri, link_mode);
+          this.redirectDeeplink = redirect;
+          this.redirectUniversalLink = redirectUniversalLink;
+          this.target = CoreHelperUtil.isIframe() ? "_top" : "_self";
+          ConnectionController.setWcLinking({ name, href });
+          ConnectionController.setRecentWallet(this.wallet);
+          if (this.preferUniversalLinks && this.redirectUniversalLink) {
+            CoreHelperUtil.openHref(this.redirectUniversalLink, this.target);
+          } else {
+            CoreHelperUtil.openHref(this.redirectDeeplink, this.target);
+          }
+        } catch (e2) {
+          EventsController.sendEvent({
+            type: "track",
+            event: "CONNECT_PROXY_ERROR",
+            properties: {
+              message: e2 instanceof Error ? e2.message : "Error parsing the deeplink",
+              uri: this.uri,
+              mobile_link: this.wallet.mobile_link,
+              name: this.wallet.name
+            }
+          });
+          this.error = true;
+        }
+      }
+    };
+    if (!this.wallet) {
+      throw new Error("w3m-connecting-wc-mobile: No wallet provided");
+    }
+    this.secondaryBtnLabel = "Open";
+    this.secondaryLabel = ConstantsUtil$1.CONNECT_LABELS.MOBILE;
+    this.secondaryBtnIcon = "externalLink";
+    this.onHandleURI();
+    this.unsubscribe.push(ConnectionController.subscribeKey("wcUri", () => {
+      this.onHandleURI();
+    }));
+    EventsController.sendEvent({
+      type: "track",
+      event: "SELECT_WALLET",
+      properties: { name: this.wallet.name, platform: "mobile" }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.btnLabelTimeout);
+  }
+  onHandleURI() {
+    var _a;
+    this.isLoading = !this.uri;
+    if (!this.ready && this.uri) {
+      this.ready = true;
+      (_a = this.onConnect) == null ? void 0 : _a.call(this);
+    }
+  }
+  onTryAgain() {
+    var _a;
+    ConnectionController.setWcError(false);
+    (_a = this.onConnect) == null ? void 0 : _a.call(this);
+  }
+};
+__decorate$l([
+  r()
+], W3mConnectingWcMobile.prototype, "redirectDeeplink", void 0);
+__decorate$l([
+  r()
+], W3mConnectingWcMobile.prototype, "redirectUniversalLink", void 0);
+__decorate$l([
+  r()
+], W3mConnectingWcMobile.prototype, "target", void 0);
+__decorate$l([
+  r()
+], W3mConnectingWcMobile.prototype, "preferUniversalLinks", void 0);
+__decorate$l([
+  r()
+], W3mConnectingWcMobile.prototype, "isLoading", void 0);
+W3mConnectingWcMobile = __decorate$l([
+  customElement("w3m-connecting-wc-mobile")
+], W3mConnectingWcMobile);
+const CONNECTING_ERROR_MARGIN = 0.1;
+const CIRCLE_SIZE_MODIFIER = 2.5;
+const QRCODE_MATRIX_MARGIN = 7;
+function isAdjecentDots(cy, otherCy, cellSize) {
+  if (cy === otherCy) {
+    return false;
+  }
+  const diff = cy - otherCy < 0 ? otherCy - cy : cy - otherCy;
+  return diff <= cellSize + CONNECTING_ERROR_MARGIN;
+}
+function getMatrix(value, errorCorrectionLevel) {
+  const arr = Array.prototype.slice.call(browser.create(value, { errorCorrectionLevel }).modules.data, 0);
+  const sqrt = Math.sqrt(arr.length);
+  return arr.reduce((rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows, []);
+}
+const QrCodeUtil = {
+  generate({ uri, size, logoSize, dotColor = "#141414" }) {
+    const edgeColor = "transparent";
+    const strokeWidth = 5;
+    const dots = [];
+    const matrix = getMatrix(uri, "Q");
+    const cellSize = size / matrix.length;
+    const qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 }
+    ];
+    qrList.forEach(({ x: x2, y }) => {
+      const x1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * x2;
+      const y1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * y;
+      const borderRadius = 0.45;
+      for (let i2 = 0; i2 < qrList.length; i2 += 1) {
+        const dotSize = cellSize * (QRCODE_MATRIX_MARGIN - i2 * 2);
+        dots.push(b`
+            <rect
+              fill=${i2 === 2 ? dotColor : edgeColor}
+              width=${i2 === 0 ? dotSize - strokeWidth : dotSize}
+              rx= ${i2 === 0 ? (dotSize - strokeWidth) * borderRadius : dotSize * borderRadius}
+              ry= ${i2 === 0 ? (dotSize - strokeWidth) * borderRadius : dotSize * borderRadius}
+              stroke=${dotColor}
+              stroke-width=${i2 === 0 ? strokeWidth : 0}
+              height=${i2 === 0 ? dotSize - strokeWidth : dotSize}
+              x= ${i2 === 0 ? y1 + cellSize * i2 + strokeWidth / 2 : y1 + cellSize * i2}
+              y= ${i2 === 0 ? x1 + cellSize * i2 + strokeWidth / 2 : x1 + cellSize * i2}
+            />
+          `);
+      }
+    });
+    const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+    const circles = [];
+    matrix.forEach((row, i2) => {
+      row.forEach((_, j) => {
+        if (matrix[i2][j]) {
+          if (!(i2 < QRCODE_MATRIX_MARGIN && j < QRCODE_MATRIX_MARGIN || i2 > matrix.length - (QRCODE_MATRIX_MARGIN + 1) && j < QRCODE_MATRIX_MARGIN || i2 < QRCODE_MATRIX_MARGIN && j > matrix.length - (QRCODE_MATRIX_MARGIN + 1))) {
+            if (!(i2 > matrixMiddleStart && i2 < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
+              const cx = i2 * cellSize + cellSize / 2;
+              const cy = j * cellSize + cellSize / 2;
+              circles.push([cx, cy]);
+            }
+          }
+        }
+      });
+    });
+    const circlesToConnect = {};
+    circles.forEach(([cx, cy]) => {
+      var _a;
+      if (circlesToConnect[cx]) {
+        (_a = circlesToConnect[cx]) == null ? void 0 : _a.push(cy);
+      } else {
+        circlesToConnect[cx] = [cy];
+      }
+    });
+    Object.entries(circlesToConnect).map(([cx, cys]) => {
+      const newCys = cys.filter((cy) => cys.every((otherCy) => !isAdjecentDots(cy, otherCy, cellSize)));
+      return [Number(cx), newCys];
+    }).forEach(([cx, cys]) => {
+      cys.forEach((cy) => {
+        dots.push(b`<circle cx=${cx} cy=${cy} fill=${dotColor} r=${cellSize / CIRCLE_SIZE_MODIFIER} />`);
+      });
+    });
+    Object.entries(circlesToConnect).filter(([_, cys]) => cys.length > 1).map(([cx, cys]) => {
+      const newCys = cys.filter((cy) => cys.some((otherCy) => isAdjecentDots(cy, otherCy, cellSize)));
+      return [Number(cx), newCys];
+    }).map(([cx, cys]) => {
+      cys.sort((a, b2) => a < b2 ? -1 : 1);
+      const groups = [];
+      for (const cy of cys) {
+        const group = groups.find((item) => item.some((otherCy) => isAdjecentDots(cy, otherCy, cellSize)));
+        if (group) {
+          group.push(cy);
+        } else {
+          groups.push([cy]);
+        }
+      }
+      return [cx, groups.map((item) => [item[0], item[item.length - 1]])];
+    }).forEach(([cx, groups]) => {
+      groups.forEach(([y1, y2]) => {
+        dots.push(b`
+              <line
+                x1=${cx}
+                x2=${cx}
+                y1=${y1}
+                y2=${y2}
+                stroke=${dotColor}
+                stroke-width=${cellSize / (CIRCLE_SIZE_MODIFIER / 2)}
+                stroke-linecap="round"
+              />
+            `);
+      });
+    });
+    return dots;
+  }
+};
+const styles$e = i`
+  :host {
+    position: relative;
+    user-select: none;
+    display: block;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    width: var(--local-size);
+  }
+
+  :host([data-theme='dark']) {
+    border-radius: clamp(0px, var(--wui-border-radius-l), 40px);
+    background-color: var(--wui-color-inverse-100);
+    padding: var(--wui-spacing-l);
+  }
+
+  :host([data-theme='light']) {
+    box-shadow: 0 0 0 1px var(--wui-color-bg-125);
+    background-color: var(--wui-color-bg-125);
+  }
+
+  :host([data-clear='true']) > wui-icon {
+    display: none;
+  }
+
+  svg:first-child,
+  wui-image,
+  wui-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+  }
+
+  wui-image {
+    width: 25%;
+    height: 25%;
+    border-radius: var(--wui-border-radius-xs);
+  }
+
+  wui-icon {
+    width: 100%;
+    height: 100%;
+    color: var(--local-icon-color) !important;
+    transform: translateY(-50%) translateX(-50%) scale(0.25);
+  }
+`;
+var __decorate$k = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+const DEFAULT_ICON_COLOR = "#3396ff";
+let WuiQrCode = class WuiQrCode2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.uri = "";
+    this.size = 0;
+    this.theme = "dark";
+    this.imageSrc = void 0;
+    this.alt = void 0;
+    this.arenaClear = void 0;
+    this.farcaster = void 0;
+  }
+  render() {
+    this.dataset["theme"] = this.theme;
+    this.dataset["clear"] = String(this.arenaClear);
+    this.style.cssText = `
+     --local-size: ${this.size}px;
+     --local-icon-color: ${this.color ?? DEFAULT_ICON_COLOR}
+    `;
+    return x`${this.templateVisual()} ${this.templateSvg()}`;
+  }
+  templateSvg() {
+    const size = this.theme === "light" ? this.size : this.size - 16 * 2;
+    return b`
+      <svg height=${size} width=${size}>
+        ${QrCodeUtil.generate({
+      uri: this.uri,
+      size,
+      logoSize: this.arenaClear ? 0 : size / 4,
+      dotColor: this.color
+    })}
+      </svg>
+    `;
+  }
+  templateVisual() {
+    if (this.imageSrc) {
+      return x`<wui-image src=${this.imageSrc} alt=${this.alt ?? "logo"}></wui-image>`;
+    }
+    if (this.farcaster) {
+      return x`<wui-icon
+        class="farcaster"
+        size="inherit"
+        color="inherit"
+        name="farcaster"
+      ></wui-icon>`;
+    }
+    return x`<wui-icon size="inherit" color="inherit" name="walletConnect"></wui-icon>`;
+  }
+};
+WuiQrCode.styles = [resetStyles, styles$e];
+__decorate$k([
+  n()
+], WuiQrCode.prototype, "uri", void 0);
+__decorate$k([
+  n({ type: Number })
+], WuiQrCode.prototype, "size", void 0);
+__decorate$k([
+  n()
+], WuiQrCode.prototype, "theme", void 0);
+__decorate$k([
+  n()
+], WuiQrCode.prototype, "imageSrc", void 0);
+__decorate$k([
+  n()
+], WuiQrCode.prototype, "alt", void 0);
+__decorate$k([
+  n()
+], WuiQrCode.prototype, "color", void 0);
+__decorate$k([
+  n({ type: Boolean })
+], WuiQrCode.prototype, "arenaClear", void 0);
+__decorate$k([
+  n({ type: Boolean })
+], WuiQrCode.prototype, "farcaster", void 0);
+WuiQrCode = __decorate$k([
+  customElement("wui-qr-code")
+], WuiQrCode);
+const styles$d = i`
+  :host {
+    display: block;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+    background: linear-gradient(
+      120deg,
+      var(--wui-color-bg-200) 5%,
+      var(--wui-color-bg-200) 48%,
+      var(--wui-color-bg-300) 55%,
+      var(--wui-color-bg-300) 60%,
+      var(--wui-color-bg-300) calc(60% + 10px),
+      var(--wui-color-bg-200) calc(60% + 12px),
+      var(--wui-color-bg-200) 100%
+    );
+    background-size: 250%;
+    animation: shimmer 3s linear infinite reverse;
+  }
+
+  :host([variant='light']) {
+    background: linear-gradient(
+      120deg,
+      var(--wui-color-bg-150) 5%,
+      var(--wui-color-bg-150) 48%,
+      var(--wui-color-bg-200) 55%,
+      var(--wui-color-bg-200) 60%,
+      var(--wui-color-bg-200) calc(60% + 10px),
+      var(--wui-color-bg-150) calc(60% + 12px),
+      var(--wui-color-bg-150) 100%
+    );
+    background-size: 250%;
+  }
+
+  @keyframes shimmer {
+    from {
+      background-position: -250% 0;
+    }
+    to {
+      background-position: 250% 0;
+    }
+  }
+`;
+var __decorate$j = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiShimmer = class WuiShimmer2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.width = "";
+    this.height = "";
+    this.borderRadius = "m";
+    this.variant = "default";
+  }
+  render() {
+    this.style.cssText = `
+      width: ${this.width};
+      height: ${this.height};
+      border-radius: ${`clamp(0px,var(--wui-border-radius-${this.borderRadius}), 40px)`};
+    `;
+    return x`<slot></slot>`;
+  }
+};
+WuiShimmer.styles = [styles$d];
+__decorate$j([
+  n()
+], WuiShimmer.prototype, "width", void 0);
+__decorate$j([
+  n()
+], WuiShimmer.prototype, "height", void 0);
+__decorate$j([
+  n()
+], WuiShimmer.prototype, "borderRadius", void 0);
+__decorate$j([
+  n()
+], WuiShimmer.prototype, "variant", void 0);
+WuiShimmer = __decorate$j([
+  customElement("wui-shimmer")
+], WuiShimmer);
+const REOWN_URL = "https://reown.com";
+const styles$c = i`
+  .reown-logo {
+    height: var(--wui-spacing-xxl);
+  }
+
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  a:hover {
+    opacity: 0.9;
+  }
+`;
+var __decorate$i = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiUxByReown = class WuiUxByReown2 extends i$1 {
+  render() {
+    return x`
+      <a
+        data-testid="ux-branding-reown"
+        href=${REOWN_URL}
+        rel="noreferrer"
+        target="_blank"
+        style="text-decoration: none;"
+      >
+        <wui-flex
+          justifyContent="center"
+          alignItems="center"
+          gap="xs"
+          .padding=${["0", "0", "l", "0"]}
+        >
+          <wui-text variant="small-500" color="fg-100"> UX by </wui-text>
+          <wui-icon name="reown" size="xxxl" class="reown-logo"></wui-icon>
+        </wui-flex>
+      </a>
+    `;
+  }
+};
+WuiUxByReown.styles = [resetStyles, elementStyles, styles$c];
+WuiUxByReown = __decorate$i([
+  customElement("wui-ux-by-reown")
+], WuiUxByReown);
+const styles$b = i`
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  wui-shimmer {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: clamp(0px, var(--wui-border-radius-l), 40px) !important;
+  }
+
+  wui-qr-code {
+    opacity: 0;
+    animation-duration: 200ms;
+    animation-timing-function: ease;
+    animation-name: fadein;
+    animation-fill-mode: forwards;
+  }
+`;
+var __decorate$h = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcQrcode = class W3mConnectingWcQrcode2 extends W3mConnectingWidget {
+  constructor() {
+    var _a;
+    super();
+    this.forceUpdate = () => {
+      this.requestUpdate();
+    };
+    window.addEventListener("resize", this.forceUpdate);
+    EventsController.sendEvent({
+      type: "track",
+      event: "SELECT_WALLET",
+      properties: { name: ((_a = this.wallet) == null ? void 0 : _a.name) ?? "WalletConnect", platform: "qrcode" }
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.unsubscribe) == null ? void 0 : _a.forEach((unsub) => unsub());
+    window.removeEventListener("resize", this.forceUpdate);
+  }
+  render() {
+    this.onRenderProxy();
+    return x`
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        .padding=${["0", "xl", "xl", "xl"]}
+        gap="xl"
+      >
+        <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTemplate()} </wui-shimmer>
+
+        <wui-text variant="paragraph-500" color="fg-100">
+          Scan this QR Code with your phone
+        </wui-text>
+        ${this.copyTemplate()}
+      </wui-flex>
+      <w3m-mobile-download-links .wallet=${this.wallet}></w3m-mobile-download-links>
+    `;
+  }
+  onRenderProxy() {
+    if (!this.ready && this.uri) {
+      this.timeout = setTimeout(() => {
+        this.ready = true;
+      }, 200);
+    }
+  }
+  qrCodeTemplate() {
+    if (!this.uri || !this.ready) {
+      return null;
+    }
+    const size = this.getBoundingClientRect().width - 40;
+    const alt = this.wallet ? this.wallet.name : void 0;
+    ConnectionController.setWcLinking(void 0);
+    ConnectionController.setRecentWallet(this.wallet);
+    return x` <wui-qr-code
+      size=${size}
+      theme=${ThemeController.state.themeMode}
+      uri=${this.uri}
+      imageSrc=${o(AssetUtil.getWalletImage(this.wallet))}
+      color=${o(ThemeController.state.themeVariables["--w3m-qr-color"])}
+      alt=${o(alt)}
+      data-testid="wui-qr-code"
+    ></wui-qr-code>`;
+  }
+  copyTemplate() {
+    const inactive = !this.uri || !this.ready;
+    return x`<wui-link
+      .disabled=${inactive}
+      @click=${this.onCopyUri}
+      color="fg-200"
+      data-testid="copy-wc2-uri"
+    >
+      <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
+      Copy link
+    </wui-link>`;
+  }
+};
+W3mConnectingWcQrcode.styles = styles$b;
+W3mConnectingWcQrcode = __decorate$h([
+  customElement("w3m-connecting-wc-qrcode")
+], W3mConnectingWcQrcode);
+var __decorate$g = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcUnsupported = class W3mConnectingWcUnsupported2 extends i$1 {
+  constructor() {
+    var _a;
+    super();
+    this.wallet = (_a = RouterController.state.data) == null ? void 0 : _a.wallet;
+    if (!this.wallet) {
+      throw new Error("w3m-connecting-wc-unsupported: No wallet provided");
+    }
+    EventsController.sendEvent({
+      type: "track",
+      event: "SELECT_WALLET",
+      properties: { name: this.wallet.name, platform: "browser" }
+    });
+  }
+  render() {
+    return x`
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        .padding=${["3xl", "xl", "xl", "xl"]}
+        gap="xl"
+      >
+        <wui-wallet-image
+          size="lg"
+          imageSrc=${o(AssetUtil.getWalletImage(this.wallet))}
+        ></wui-wallet-image>
+
+        <wui-text variant="paragraph-500" color="fg-100">Not Detected</wui-text>
+      </wui-flex>
+
+      <w3m-mobile-download-links .wallet=${this.wallet}></w3m-mobile-download-links>
+    `;
+  }
+};
+W3mConnectingWcUnsupported = __decorate$g([
+  customElement("w3m-connecting-wc-unsupported")
+], W3mConnectingWcUnsupported);
+var __decorate$f = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcWeb = class W3mConnectingWcWeb2 extends W3mConnectingWidget {
+  constructor() {
+    super();
+    this.isLoading = true;
+    if (!this.wallet) {
+      throw new Error("w3m-connecting-wc-web: No wallet provided");
+    }
+    this.onConnect = this.onConnectProxy.bind(this);
+    this.secondaryBtnLabel = "Open";
+    this.secondaryLabel = ConstantsUtil$1.CONNECT_LABELS.MOBILE;
+    this.secondaryBtnIcon = "externalLink";
+    this.updateLoadingState();
+    this.unsubscribe.push(ConnectionController.subscribeKey("wcUri", () => {
+      this.updateLoadingState();
+    }));
+    EventsController.sendEvent({
+      type: "track",
+      event: "SELECT_WALLET",
+      properties: { name: this.wallet.name, platform: "web" }
+    });
+  }
+  updateLoadingState() {
+    this.isLoading = !this.uri;
+  }
+  onConnectProxy() {
+    var _a;
+    if (((_a = this.wallet) == null ? void 0 : _a.webapp_link) && this.uri) {
+      try {
+        this.error = false;
+        const { webapp_link, name } = this.wallet;
+        const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, this.uri);
+        ConnectionController.setWcLinking({ name, href });
+        ConnectionController.setRecentWallet(this.wallet);
+        CoreHelperUtil.openHref(redirect, "_blank");
+      } catch {
+        this.error = true;
+      }
+    }
+  }
+};
+__decorate$f([
+  r()
+], W3mConnectingWcWeb.prototype, "isLoading", void 0);
+W3mConnectingWcWeb = __decorate$f([
+  customElement("w3m-connecting-wc-web")
+], W3mConnectingWcWeb);
+var __decorate$e = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcView = class W3mConnectingWcView2 extends i$1 {
+  constructor() {
+    var _a;
+    super();
+    this.wallet = (_a = RouterController.state.data) == null ? void 0 : _a.wallet;
+    this.unsubscribe = [];
+    this.platform = void 0;
+    this.platforms = [];
+    this.isSiwxEnabled = Boolean(OptionsController.state.siwx);
+    this.remoteFeatures = OptionsController.state.remoteFeatures;
+    this.determinePlatforms();
+    this.initializeConnection();
+    this.unsubscribe.push(OptionsController.subscribeKey("remoteFeatures", (val) => this.remoteFeatures = val));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    return x`
+      ${this.headerTemplate()}
+      <div>${this.platformTemplate()}</div>
+      ${this.reownBrandingTemplate()}
+    `;
+  }
+  reownBrandingTemplate() {
+    var _a;
+    if (!((_a = this.remoteFeatures) == null ? void 0 : _a.reownBranding)) {
+      return null;
+    }
+    return x`<wui-ux-by-reown></wui-ux-by-reown>`;
+  }
+  async initializeConnection(retry = false) {
+    if (this.platform === "browser" || OptionsController.state.manualWCControl && !retry) {
+      return;
+    }
+    try {
+      const { wcPairingExpiry, status } = ConnectionController.state;
+      if (retry || OptionsController.state.enableEmbedded || CoreHelperUtil.isPairingExpired(wcPairingExpiry) || status === "connecting") {
+        await ConnectionController.connectWalletConnect();
+        if (!this.isSiwxEnabled) {
+          ModalController.close();
+        }
+      }
+    } catch (error) {
+      EventsController.sendEvent({
+        type: "track",
+        event: "CONNECT_ERROR",
+        properties: { message: (error == null ? void 0 : error.message) ?? "Unknown" }
+      });
+      ConnectionController.setWcError(true);
+      SnackController.showError(error.message ?? "Connection error");
+      ConnectionController.resetWcConnection();
+      RouterController.goBack();
+    }
+  }
+  determinePlatforms() {
+    if (!this.wallet) {
+      this.platforms.push("qrcode");
+      this.platform = "qrcode";
+      return;
+    }
+    if (this.platform) {
+      return;
+    }
+    const { mobile_link, desktop_link, webapp_link, injected, rdns } = this.wallet;
+    const injectedIds = injected == null ? void 0 : injected.map(({ injected_id }) => injected_id).filter(Boolean);
+    const browserIds = [...rdns ? [rdns] : injectedIds ?? []];
+    const isBrowser = OptionsController.state.isUniversalProvider ? false : browserIds.length;
+    const hasMobileWCLink = mobile_link;
+    const isWebWc = webapp_link;
+    const isBrowserInstalled = ConnectionController.checkInstalled(browserIds);
+    const isBrowserWc = isBrowser && isBrowserInstalled;
+    const isDesktopWc = desktop_link && !CoreHelperUtil.isMobile();
+    if (isBrowserWc && !ChainController.state.noAdapters) {
+      this.platforms.push("browser");
+    }
+    if (hasMobileWCLink) {
+      this.platforms.push(CoreHelperUtil.isMobile() ? "mobile" : "qrcode");
+    }
+    if (isWebWc) {
+      this.platforms.push("web");
+    }
+    if (isDesktopWc) {
+      this.platforms.push("desktop");
+    }
+    if (!isBrowserWc && isBrowser && !ChainController.state.noAdapters) {
+      this.platforms.push("unsupported");
+    }
+    this.platform = this.platforms[0];
+  }
+  platformTemplate() {
+    switch (this.platform) {
+      case "browser":
+        return x`<w3m-connecting-wc-browser></w3m-connecting-wc-browser>`;
+      case "web":
+        return x`<w3m-connecting-wc-web></w3m-connecting-wc-web>`;
+      case "desktop":
+        return x`
+          <w3m-connecting-wc-desktop .onRetry=${() => this.initializeConnection(true)}>
+          </w3m-connecting-wc-desktop>
+        `;
+      case "mobile":
+        return x`
+          <w3m-connecting-wc-mobile isMobile .onRetry=${() => this.initializeConnection(true)}>
+          </w3m-connecting-wc-mobile>
+        `;
+      case "qrcode":
+        return x`<w3m-connecting-wc-qrcode></w3m-connecting-wc-qrcode>`;
+      default:
+        return x`<w3m-connecting-wc-unsupported></w3m-connecting-wc-unsupported>`;
+    }
+  }
+  headerTemplate() {
+    const multiPlatform = this.platforms.length > 1;
+    if (!multiPlatform) {
+      return null;
+    }
+    return x`
+      <w3m-connecting-header
+        .platforms=${this.platforms}
+        .onSelectPlatfrom=${this.onSelectPlatform.bind(this)}
+      >
+      </w3m-connecting-header>
+    `;
+  }
+  async onSelectPlatform(platform) {
+    var _a;
+    const container = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("div");
+    if (container) {
+      await container.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: 200,
+        fill: "forwards",
+        easing: "ease"
+      }).finished;
+      this.platform = platform;
+      container.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 200,
+        fill: "forwards",
+        easing: "ease"
+      });
+    }
+  }
+};
+__decorate$e([
+  r()
+], W3mConnectingWcView.prototype, "platform", void 0);
+__decorate$e([
+  r()
+], W3mConnectingWcView.prototype, "platforms", void 0);
+__decorate$e([
+  r()
+], W3mConnectingWcView.prototype, "isSiwxEnabled", void 0);
+__decorate$e([
+  r()
+], W3mConnectingWcView.prototype, "remoteFeatures", void 0);
+W3mConnectingWcView = __decorate$e([
+  customElement("w3m-connecting-wc-view")
+], W3mConnectingWcView);
+var __decorate$d = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mConnectingWcBasicView = class W3mConnectingWcBasicView2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.isMobile = CoreHelperUtil.isMobile();
+  }
+  render() {
+    if (this.isMobile) {
+      const { featured, recommended } = ApiController.state;
+      const { customWallets } = OptionsController.state;
+      const recent = StorageUtil.getRecentWallets();
+      const showConnectors = featured.length || recommended.length || (customWallets == null ? void 0 : customWallets.length) || recent.length;
+      return x`<wui-flex
+        flexDirection="column"
+        gap="xs"
+        .margin=${["3xs", "s", "s", "s"]}
+      >
+        ${showConnectors ? x`<w3m-connector-list></w3m-connector-list>` : null}
+        <w3m-all-wallets-widget></w3m-all-wallets-widget>
+      </wui-flex>`;
+    }
+    return x`<wui-flex flexDirection="column" .padding=${["0", "0", "l", "0"]}>
+      <w3m-connecting-wc-view></w3m-connecting-wc-view>
+      <wui-flex flexDirection="column" .padding=${["0", "m", "0", "m"]}>
+        <w3m-all-wallets-widget></w3m-all-wallets-widget> </wui-flex
+    ></wui-flex>`;
+  }
+};
+__decorate$d([
+  r()
+], W3mConnectingWcBasicView.prototype, "isMobile", void 0);
+W3mConnectingWcBasicView = __decorate$d([
+  customElement("w3m-connecting-wc-basic-view")
+], W3mConnectingWcBasicView);
+const styles$a = i`
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  label {
+    position: relative;
+    display: inline-block;
+    width: 32px;
+    height: 22px;
+  }
+
+  input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  span {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--wui-color-blue-100);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--wui-color-gray-glass-002);
+    border-radius: 999px;
+    transition:
+      background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      border-color var(--wui-ease-inout-power-1) var(--wui-duration-md);
+    will-change: background-color, border-color;
+  }
+
+  span:before {
+    position: absolute;
+    content: '';
+    height: 16px;
+    width: 16px;
+    left: 3px;
+    top: 2px;
+    background-color: var(--wui-color-inverse-100);
+    transition: transform var(--wui-ease-inout-power-1) var(--wui-duration-lg);
+    will-change: transform;
+    border-radius: 50%;
+  }
+
+  input:checked + span {
+    border-color: var(--wui-color-gray-glass-005);
+    background-color: var(--wui-color-blue-100);
+  }
+
+  input:not(:checked) + span {
+    background-color: var(--wui-color-gray-glass-010);
+  }
+
+  input:checked + span:before {
+    transform: translateX(calc(100% - 7px));
+  }
+`;
+var __decorate$c = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiSwitch = class WuiSwitch2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.inputElementRef = e();
+    this.checked = void 0;
+  }
+  render() {
+    return x`
+      <label>
+        <input
+          ${n$1(this.inputElementRef)}
+          type="checkbox"
+          ?checked=${o(this.checked)}
+          @change=${this.dispatchChangeEvent.bind(this)}
+        />
+        <span></span>
+      </label>
+    `;
+  }
+  dispatchChangeEvent() {
+    var _a;
+    this.dispatchEvent(new CustomEvent("switchChange", {
+      detail: (_a = this.inputElementRef.value) == null ? void 0 : _a.checked,
+      bubbles: true,
+      composed: true
+    }));
+  }
+};
+WuiSwitch.styles = [resetStyles, elementStyles, colorStyles, styles$a];
+__decorate$c([
+  n({ type: Boolean })
+], WuiSwitch.prototype, "checked", void 0);
+WuiSwitch = __decorate$c([
+  customElement("wui-switch")
+], WuiSwitch);
+const styles$9 = i`
+  :host {
+    height: 100%;
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: var(--wui-spacing-1xs);
+    padding: var(--wui-spacing-xs) var(--wui-spacing-s);
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xs);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
+    cursor: pointer;
+  }
+
+  wui-switch {
+    pointer-events: none;
+  }
+`;
+var __decorate$b = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiCertifiedSwitch = class WuiCertifiedSwitch2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.checked = void 0;
+  }
+  render() {
+    return x`
+      <button>
+        <wui-icon size="xl" name="walletConnectBrown"></wui-icon>
+        <wui-switch ?checked=${o(this.checked)}></wui-switch>
+      </button>
+    `;
+  }
+};
+WuiCertifiedSwitch.styles = [resetStyles, elementStyles, styles$9];
+__decorate$b([
+  n({ type: Boolean })
+], WuiCertifiedSwitch.prototype, "checked", void 0);
+WuiCertifiedSwitch = __decorate$b([
+  customElement("wui-certified-switch")
+], WuiCertifiedSwitch);
+const styles$8 = i`
+  button {
+    background-color: var(--wui-color-fg-300);
+    border-radius: var(--wui-border-radius-4xs);
+    width: 16px;
+    height: 16px;
+  }
+
+  button:disabled {
+    background-color: var(--wui-color-bg-300);
+  }
+
+  wui-icon {
+    color: var(--wui-color-bg-200) !important;
+  }
+
+  button:focus-visible {
+    background-color: var(--wui-color-fg-250);
+    border: 1px solid var(--wui-color-accent-100);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled {
+      background-color: var(--wui-color-fg-250);
+    }
+
+    button:active:enabled {
+      background-color: var(--wui-color-fg-225);
+    }
+  }
+`;
+var __decorate$a = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiInputElement = class WuiInputElement2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.icon = "copy";
+  }
+  render() {
+    return x`
+      <button>
+        <wui-icon color="inherit" size="xxs" name=${this.icon}></wui-icon>
+      </button>
+    `;
+  }
+};
+WuiInputElement.styles = [resetStyles, elementStyles, styles$8];
+__decorate$a([
+  n()
+], WuiInputElement.prototype, "icon", void 0);
+WuiInputElement = __decorate$a([
+  customElement("wui-input-element")
+], WuiInputElement);
+const styles$7 = i`
+  :host {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    color: var(--wui-color-fg-275);
+  }
+
+  input {
+    width: 100%;
+    border-radius: var(--wui-border-radius-xs);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
+    font-size: var(--wui-font-size-paragraph);
+    letter-spacing: var(--wui-letter-spacing-paragraph);
+    color: var(--wui-color-fg-100);
+    transition:
+      background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      border-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
+    will-change: background-color, border-color, box-shadow;
+    caret-color: var(--wui-color-accent-100);
+  }
+
+  input:disabled {
+    cursor: not-allowed;
+    border: 1px solid var(--wui-color-gray-glass-010);
+  }
+
+  input:disabled::placeholder,
+  input:disabled + wui-icon {
+    color: var(--wui-color-fg-300);
+  }
+
+  input::placeholder {
+    color: var(--wui-color-fg-275);
+  }
+
+  input:focus:enabled {
+    background-color: var(--wui-color-gray-glass-005);
+    -webkit-box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+    -moz-box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+  }
+
+  input:hover:enabled {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+
+  wui-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .wui-size-sm {
+    padding: 9px var(--wui-spacing-m) 10px var(--wui-spacing-s);
+  }
+
+  wui-icon + .wui-size-sm {
+    padding: 9px var(--wui-spacing-m) 10px 36px;
+  }
+
+  wui-icon[data-input='sm'] {
+    left: var(--wui-spacing-s);
+  }
+
+  .wui-size-md {
+    padding: 15px var(--wui-spacing-m) var(--wui-spacing-l) var(--wui-spacing-m);
+  }
+
+  wui-icon + .wui-size-md,
+  wui-loading-spinner + .wui-size-md {
+    padding: 10.5px var(--wui-spacing-3xl) 10.5px var(--wui-spacing-3xl);
+  }
+
+  wui-icon[data-input='md'] {
+    left: var(--wui-spacing-l);
+  }
+
+  .wui-size-lg {
+    padding: var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-l);
+    letter-spacing: var(--wui-letter-spacing-medium-title);
+    font-size: var(--wui-font-size-medium-title);
+    font-weight: var(--wui-font-weight-light);
+    line-height: 130%;
+    color: var(--wui-color-fg-100);
+    height: 64px;
+  }
+
+  .wui-padding-right-xs {
+    padding-right: var(--wui-spacing-xs);
+  }
+
+  .wui-padding-right-s {
+    padding-right: var(--wui-spacing-s);
+  }
+
+  .wui-padding-right-m {
+    padding-right: var(--wui-spacing-m);
+  }
+
+  .wui-padding-right-l {
+    padding-right: var(--wui-spacing-l);
+  }
+
+  .wui-padding-right-xl {
+    padding-right: var(--wui-spacing-xl);
+  }
+
+  .wui-padding-right-2xl {
+    padding-right: var(--wui-spacing-2xl);
+  }
+
+  .wui-padding-right-3xl {
+    padding-right: var(--wui-spacing-3xl);
+  }
+
+  .wui-padding-right-4xl {
+    padding-right: var(--wui-spacing-4xl);
+  }
+
+  .wui-padding-right-5xl {
+    padding-right: var(--wui-spacing-5xl);
+  }
+
+  wui-icon + .wui-size-lg,
+  wui-loading-spinner + .wui-size-lg {
+    padding-left: 50px;
+  }
+
+  wui-icon[data-input='lg'] {
+    left: var(--wui-spacing-l);
+  }
+
+  .wui-size-mdl {
+    padding: 17.25px var(--wui-spacing-m) 17.25px var(--wui-spacing-m);
+  }
+  wui-icon + .wui-size-mdl,
+  wui-loading-spinner + .wui-size-mdl {
+    padding: 17.25px var(--wui-spacing-3xl) 17.25px 40px;
+  }
+  wui-icon[data-input='mdl'] {
+    left: var(--wui-spacing-m);
+  }
+
+  input:placeholder-shown ~ ::slotted(wui-input-element),
+  input:placeholder-shown ~ ::slotted(wui-icon) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  ::slotted(wui-input-element),
+  ::slotted(wui-icon) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  ::slotted(wui-input-element) {
+    right: var(--wui-spacing-m);
+  }
+
+  ::slotted(wui-icon) {
+    right: 0px;
+  }
+`;
+var __decorate$9 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiInputText = class WuiInputText2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.inputElementRef = e();
+    this.size = "md";
+    this.disabled = false;
+    this.placeholder = "";
+    this.type = "text";
+    this.value = "";
+  }
+  render() {
+    const inputClass = `wui-padding-right-${this.inputRightPadding}`;
+    const sizeClass = `wui-size-${this.size}`;
+    const classes = {
+      [sizeClass]: true,
+      [inputClass]: Boolean(this.inputRightPadding)
+    };
+    return x`${this.templateIcon()}
+      <input
+        data-testid="wui-input-text"
+        ${n$1(this.inputElementRef)}
+        class=${e$1(classes)}
+        type=${this.type}
+        enterkeyhint=${o(this.enterKeyHint)}
+        ?disabled=${this.disabled}
+        placeholder=${this.placeholder}
+        @input=${this.dispatchInputChangeEvent.bind(this)}
+        .value=${this.value || ""}
+        tabindex=${o(this.tabIdx)}
+      />
+      <slot></slot>`;
+  }
+  templateIcon() {
+    if (this.icon) {
+      return x`<wui-icon
+        data-input=${this.size}
+        size=${this.size}
+        color="inherit"
+        name=${this.icon}
+      ></wui-icon>`;
+    }
+    return null;
+  }
+  dispatchInputChangeEvent() {
+    var _a;
+    this.dispatchEvent(new CustomEvent("inputChange", {
+      detail: (_a = this.inputElementRef.value) == null ? void 0 : _a.value,
+      bubbles: true,
+      composed: true
+    }));
+  }
+};
+WuiInputText.styles = [resetStyles, elementStyles, styles$7];
+__decorate$9([
+  n()
+], WuiInputText.prototype, "size", void 0);
+__decorate$9([
+  n()
+], WuiInputText.prototype, "icon", void 0);
+__decorate$9([
+  n({ type: Boolean })
+], WuiInputText.prototype, "disabled", void 0);
+__decorate$9([
+  n()
+], WuiInputText.prototype, "placeholder", void 0);
+__decorate$9([
+  n()
+], WuiInputText.prototype, "type", void 0);
+__decorate$9([
+  n()
+], WuiInputText.prototype, "keyHint", void 0);
+__decorate$9([
+  n()
+], WuiInputText.prototype, "value", void 0);
+__decorate$9([
+  n()
+], WuiInputText.prototype, "inputRightPadding", void 0);
+__decorate$9([
+  n()
+], WuiInputText.prototype, "tabIdx", void 0);
+WuiInputText = __decorate$9([
+  customElement("wui-input-text")
+], WuiInputText);
+const styles$6 = i`
+  :host {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+`;
+var __decorate$8 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiSearchBar = class WuiSearchBar2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.inputComponentRef = e();
+  }
+  render() {
+    return x`
+      <wui-input-text
+        ${n$1(this.inputComponentRef)}
+        placeholder="Search wallet"
+        icon="search"
+        type="search"
+        enterKeyHint="search"
+        size="sm"
+      >
+        <wui-input-element @click=${this.clearValue} icon="close"></wui-input-element>
+      </wui-input-text>
+    `;
+  }
+  clearValue() {
+    const inputComponent = this.inputComponentRef.value;
+    const inputElement = inputComponent == null ? void 0 : inputComponent.inputElementRef.value;
+    if (inputElement) {
+      inputElement.value = "";
+      inputElement.focus();
+      inputElement.dispatchEvent(new Event("input"));
+    }
+  }
+};
+WuiSearchBar.styles = [resetStyles, styles$6];
+WuiSearchBar = __decorate$8([
+  customElement("wui-search-bar")
+], WuiSearchBar);
+const networkSvgMd = b`<svg  viewBox="0 0 48 54" fill="none">
+  <path
+    d="M43.4605 10.7248L28.0485 1.61089C25.5438 0.129705 22.4562 0.129705 19.9515 1.61088L4.53951 10.7248C2.03626 12.2051 0.5 14.9365 0.5 17.886V36.1139C0.5 39.0635 2.03626 41.7949 4.53951 43.2752L19.9515 52.3891C22.4562 53.8703 25.5438 53.8703 28.0485 52.3891L43.4605 43.2752C45.9637 41.7949 47.5 39.0635 47.5 36.114V17.8861C47.5 14.9365 45.9637 12.2051 43.4605 10.7248Z"
+  />
+</svg>`;
+const styles$5 = i`
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 104px;
+    row-gap: var(--wui-spacing-xs);
+    padding: var(--wui-spacing-xs) 10px;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
+    position: relative;
+  }
+
+  wui-shimmer[data-type='network'] {
+    border: none;
+    -webkit-clip-path: var(--wui-path-network);
+    clip-path: var(--wui-path-network);
+  }
+
+  svg {
+    position: absolute;
+    width: 48px;
+    height: 54px;
+    z-index: 1;
+  }
+
+  svg > path {
+    stroke: var(--wui-color-gray-glass-010);
+    stroke-width: 1px;
+  }
+
+  @media (max-width: 350px) {
+    :host {
+      width: 100%;
+    }
+  }
+`;
+var __decorate$7 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiCardSelectLoader = class WuiCardSelectLoader2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.type = "wallet";
+  }
+  render() {
+    return x`
+      ${this.shimmerTemplate()}
+      <wui-shimmer width="56px" height="20px" borderRadius="xs"></wui-shimmer>
+    `;
+  }
+  shimmerTemplate() {
+    if (this.type === "network") {
+      return x` <wui-shimmer
+          data-type=${this.type}
+          width="48px"
+          height="54px"
+          borderRadius="xs"
+        ></wui-shimmer>
+        ${networkSvgMd}`;
+    }
+    return x`<wui-shimmer width="56px" height="56px" borderRadius="xs"></wui-shimmer>`;
+  }
+};
+WuiCardSelectLoader.styles = [resetStyles, elementStyles, styles$5];
+__decorate$7([
+  n()
+], WuiCardSelectLoader.prototype, "type", void 0);
+WuiCardSelectLoader = __decorate$7([
+  customElement("wui-card-select-loader")
+], WuiCardSelectLoader);
+const styles$4 = i`
+  :host {
+    display: grid;
+    width: inherit;
+    height: inherit;
+  }
+`;
+var __decorate$6 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiGrid = class WuiGrid2 extends i$1 {
+  render() {
+    this.style.cssText = `
+      grid-template-rows: ${this.gridTemplateRows};
+      grid-template-columns: ${this.gridTemplateColumns};
+      justify-items: ${this.justifyItems};
+      align-items: ${this.alignItems};
+      justify-content: ${this.justifyContent};
+      align-content: ${this.alignContent};
+      column-gap: ${this.columnGap && `var(--wui-spacing-${this.columnGap})`};
+      row-gap: ${this.rowGap && `var(--wui-spacing-${this.rowGap})`};
+      gap: ${this.gap && `var(--wui-spacing-${this.gap})`};
+      padding-top: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 0)};
+      padding-right: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 1)};
+      padding-bottom: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 2)};
+      padding-left: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 3)};
+      margin-top: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 0)};
+      margin-right: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 1)};
+      margin-bottom: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 2)};
+      margin-left: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 3)};
+    `;
+    return x`<slot></slot>`;
+  }
+};
+WuiGrid.styles = [resetStyles, styles$4];
+__decorate$6([
+  n()
+], WuiGrid.prototype, "gridTemplateRows", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "gridTemplateColumns", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "justifyItems", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "alignItems", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "justifyContent", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "alignContent", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "columnGap", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "rowGap", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "gap", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "padding", void 0);
+__decorate$6([
+  n()
+], WuiGrid.prototype, "margin", void 0);
+WuiGrid = __decorate$6([
+  customElement("wui-grid")
+], WuiGrid);
+const styles$3 = i`
+  button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    width: 104px;
+    row-gap: var(--wui-spacing-xs);
+    padding: var(--wui-spacing-s) var(--wui-spacing-0);
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
+    transition:
+      color var(--wui-duration-lg) var(--wui-ease-out-power-1),
+      background-color var(--wui-duration-lg) var(--wui-ease-out-power-1),
+      border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1);
+    will-change: background-color, color, border-radius;
+    outline: none;
+    border: none;
+  }
+
+  button > wui-flex > wui-text {
+    color: var(--wui-color-fg-100);
+    max-width: 86px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    justify-content: center;
+  }
+
+  button > wui-flex > wui-text.certified {
+    max-width: 66px;
+  }
+
+  button:hover:enabled {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+
+  button:disabled > wui-flex > wui-text {
+    color: var(--wui-color-gray-glass-015);
+  }
+
+  [data-selected='true'] {
+    background-color: var(--wui-color-accent-glass-020);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    [data-selected='true']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+  }
+
+  [data-selected='true']:active:enabled {
+    background-color: var(--wui-color-accent-glass-010);
+  }
+
+  @media (max-width: 350px) {
+    button {
+      width: 100%;
+    }
+  }
+`;
+var __decorate$5 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mAllWalletsListItem = class W3mAllWalletsListItem2 extends i$1 {
+  constructor() {
+    super();
+    this.observer = new IntersectionObserver(() => void 0);
+    this.visible = false;
+    this.imageSrc = void 0;
+    this.imageLoading = false;
+    this.wallet = void 0;
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.visible = true;
+          this.fetchImageSrc();
+        } else {
+          this.visible = false;
+        }
+      });
+    }, { threshold: 0.01 });
+  }
+  firstUpdated() {
+    this.observer.observe(this);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    var _a, _b;
+    const certified = ((_a = this.wallet) == null ? void 0 : _a.badge_type) === "certified";
+    return x`
+      <button>
+        ${this.imageTemplate()}
+        <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="3xs">
+          <wui-text
+            variant="tiny-500"
+            color="inherit"
+            class=${o(certified ? "certified" : void 0)}
+            >${(_b = this.wallet) == null ? void 0 : _b.name}</wui-text
+          >
+          ${certified ? x`<wui-icon size="sm" name="walletConnectBrown"></wui-icon>` : null}
+        </wui-flex>
+      </button>
+    `;
+  }
+  imageTemplate() {
+    var _a, _b;
+    if (!this.visible && !this.imageSrc || this.imageLoading) {
+      return this.shimmerTemplate();
+    }
+    return x`
+      <wui-wallet-image
+        size="md"
+        imageSrc=${o(this.imageSrc)}
+        name=${(_a = this.wallet) == null ? void 0 : _a.name}
+        .installed=${(_b = this.wallet) == null ? void 0 : _b.installed}
+        badgeSize="sm"
+      >
+      </wui-wallet-image>
+    `;
+  }
+  shimmerTemplate() {
+    return x`<wui-shimmer width="56px" height="56px" borderRadius="xs"></wui-shimmer>`;
+  }
+  async fetchImageSrc() {
+    if (!this.wallet) {
+      return;
+    }
+    this.imageSrc = AssetUtil.getWalletImage(this.wallet);
+    if (this.imageSrc) {
+      return;
+    }
+    this.imageLoading = true;
+    this.imageSrc = await AssetUtil.fetchWalletImage(this.wallet.image_id);
+    this.imageLoading = false;
+  }
+};
+W3mAllWalletsListItem.styles = styles$3;
+__decorate$5([
+  r()
+], W3mAllWalletsListItem.prototype, "visible", void 0);
+__decorate$5([
+  r()
+], W3mAllWalletsListItem.prototype, "imageSrc", void 0);
+__decorate$5([
+  r()
+], W3mAllWalletsListItem.prototype, "imageLoading", void 0);
+__decorate$5([
+  n()
+], W3mAllWalletsListItem.prototype, "wallet", void 0);
+W3mAllWalletsListItem = __decorate$5([
+  customElement("w3m-all-wallets-list-item")
+], W3mAllWalletsListItem);
+const styles$2 = i`
+  wui-grid {
+    max-height: clamp(360px, 400px, 80vh);
+    overflow: scroll;
+    scrollbar-width: none;
+    grid-auto-rows: min-content;
+    grid-template-columns: repeat(auto-fill, 104px);
+  }
+
+  @media (max-width: 350px) {
+    wui-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  wui-grid[data-scroll='false'] {
+    overflow: hidden;
+  }
+
+  wui-grid::-webkit-scrollbar {
+    display: none;
+  }
+
+  wui-loading-spinner {
+    padding-top: var(--wui-spacing-l);
+    padding-bottom: var(--wui-spacing-l);
+    justify-content: center;
+    grid-column: 1 / span 4;
+  }
+`;
+var __decorate$4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+const PAGINATOR_ID = "local-paginator";
+let W3mAllWalletsList = class W3mAllWalletsList2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.paginationObserver = void 0;
+    this.loading = !ApiController.state.wallets.length;
+    this.wallets = ApiController.state.wallets;
+    this.recommended = ApiController.state.recommended;
+    this.featured = ApiController.state.featured;
+    this.filteredWallets = ApiController.state.filteredWallets;
+    this.unsubscribe.push(...[
+      ApiController.subscribeKey("wallets", (val) => this.wallets = val),
+      ApiController.subscribeKey("recommended", (val) => this.recommended = val),
+      ApiController.subscribeKey("featured", (val) => this.featured = val),
+      ApiController.subscribeKey("filteredWallets", (val) => this.filteredWallets = val)
+    ]);
+  }
+  firstUpdated() {
+    this.initialFetch();
+    this.createPaginationObserver();
+  }
+  disconnectedCallback() {
+    var _a;
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+    (_a = this.paginationObserver) == null ? void 0 : _a.disconnect();
+  }
+  render() {
+    return x`
+      <wui-grid
+        data-scroll=${!this.loading}
+        .padding=${["0", "s", "s", "s"]}
+        columnGap="xxs"
+        rowGap="l"
+        justifyContent="space-between"
+      >
+        ${this.loading ? this.shimmerTemplate(16) : this.walletsTemplate()}
+        ${this.paginationLoaderTemplate()}
+      </wui-grid>
+    `;
+  }
+  async initialFetch() {
+    var _a;
+    this.loading = true;
+    const gridEl = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("wui-grid");
+    if (gridEl) {
+      await ApiController.fetchWalletsByPage({ page: 1 });
+      await gridEl.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: 200,
+        fill: "forwards",
+        easing: "ease"
+      }).finished;
+      this.loading = false;
+      gridEl.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 200,
+        fill: "forwards",
+        easing: "ease"
+      });
+    }
+  }
+  shimmerTemplate(items, id) {
+    return [...Array(items)].map(() => x`
+        <wui-card-select-loader type="wallet" id=${o(id)}></wui-card-select-loader>
+      `);
+  }
+  walletsTemplate() {
+    var _a;
+    const wallets = ((_a = this.filteredWallets) == null ? void 0 : _a.length) > 0 ? CoreHelperUtil.uniqueBy([...this.featured, ...this.recommended, ...this.filteredWallets], "id") : CoreHelperUtil.uniqueBy([...this.featured, ...this.recommended, ...this.wallets], "id");
+    const walletsWithInstalled = WalletUtil.markWalletsAsInstalled(wallets);
+    return walletsWithInstalled.map((wallet) => x`
+        <w3m-all-wallets-list-item
+          @click=${() => this.onConnectWallet(wallet)}
+          .wallet=${wallet}
+        ></w3m-all-wallets-list-item>
+      `);
+  }
+  paginationLoaderTemplate() {
+    const { wallets, recommended, featured, count } = ApiController.state;
+    const columns = window.innerWidth < 352 ? 3 : 4;
+    const currentWallets = wallets.length + recommended.length;
+    const minimumRows = Math.ceil(currentWallets / columns);
+    let shimmerCount = minimumRows * columns - currentWallets + columns;
+    shimmerCount -= wallets.length ? featured.length % columns : 0;
+    if (count === 0 && featured.length > 0) {
+      return null;
+    }
+    if (count === 0 || [...featured, ...wallets, ...recommended].length < count) {
+      return this.shimmerTemplate(shimmerCount, PAGINATOR_ID);
+    }
+    return null;
+  }
+  createPaginationObserver() {
+    var _a;
+    const loaderEl = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`#${PAGINATOR_ID}`);
+    if (loaderEl) {
+      this.paginationObserver = new IntersectionObserver(([element]) => {
+        if ((element == null ? void 0 : element.isIntersecting) && !this.loading) {
+          const { page, count, wallets } = ApiController.state;
+          if (wallets.length < count) {
+            ApiController.fetchWalletsByPage({ page: page + 1 });
+          }
+        }
+      });
+      this.paginationObserver.observe(loaderEl);
+    }
+  }
+  onConnectWallet(wallet) {
+    ConnectorController.selectWalletConnector(wallet);
+  }
+};
+W3mAllWalletsList.styles = styles$2;
+__decorate$4([
+  r()
+], W3mAllWalletsList.prototype, "loading", void 0);
+__decorate$4([
+  r()
+], W3mAllWalletsList.prototype, "wallets", void 0);
+__decorate$4([
+  r()
+], W3mAllWalletsList.prototype, "recommended", void 0);
+__decorate$4([
+  r()
+], W3mAllWalletsList.prototype, "featured", void 0);
+__decorate$4([
+  r()
+], W3mAllWalletsList.prototype, "filteredWallets", void 0);
+W3mAllWalletsList = __decorate$4([
+  customElement("w3m-all-wallets-list")
+], W3mAllWalletsList);
+const styles$1 = i`
+  wui-grid,
+  wui-loading-spinner,
+  wui-flex {
+    height: 360px;
+  }
+
+  wui-grid {
+    overflow: scroll;
+    scrollbar-width: none;
+    grid-auto-rows: min-content;
+    grid-template-columns: repeat(auto-fill, 104px);
+  }
+
+  wui-grid[data-scroll='false'] {
+    overflow: hidden;
+  }
+
+  wui-grid::-webkit-scrollbar {
+    display: none;
+  }
+
+  wui-loading-spinner {
+    justify-content: center;
+    align-items: center;
+  }
+
+  @media (max-width: 350px) {
+    wui-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+`;
+var __decorate$3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mAllWalletsSearch = class W3mAllWalletsSearch2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.prevQuery = "";
+    this.prevBadge = void 0;
+    this.loading = true;
+    this.query = "";
+  }
+  render() {
+    this.onSearch();
+    return this.loading ? x`<wui-loading-spinner color="accent-100"></wui-loading-spinner>` : this.walletsTemplate();
+  }
+  async onSearch() {
+    if (this.query.trim() !== this.prevQuery.trim() || this.badge !== this.prevBadge) {
+      this.prevQuery = this.query;
+      this.prevBadge = this.badge;
+      this.loading = true;
+      await ApiController.searchWallet({ search: this.query, badge: this.badge });
+      this.loading = false;
+    }
+  }
+  walletsTemplate() {
+    const { search } = ApiController.state;
+    const wallets = WalletUtil.markWalletsAsInstalled(search);
+    if (!search.length) {
+      return x`
+        <wui-flex
+          data-testid="no-wallet-found"
+          justifyContent="center"
+          alignItems="center"
+          gap="s"
+          flexDirection="column"
+        >
+          <wui-icon-box
+            size="lg"
+            iconColor="fg-200"
+            backgroundColor="fg-300"
+            icon="wallet"
+            background="transparent"
+          ></wui-icon-box>
+          <wui-text data-testid="no-wallet-found-text" color="fg-200" variant="paragraph-500">
+            No Wallet found
+          </wui-text>
+        </wui-flex>
+      `;
+    }
+    return x`
+      <wui-grid
+        data-testid="wallet-list"
+        .padding=${["0", "s", "s", "s"]}
+        rowGap="l"
+        columnGap="xs"
+        justifyContent="space-between"
+      >
+        ${wallets.map((wallet) => x`
+            <w3m-all-wallets-list-item
+              @click=${() => this.onConnectWallet(wallet)}
+              .wallet=${wallet}
+              data-testid="wallet-search-item-${wallet.id}"
+            ></w3m-all-wallets-list-item>
+          `)}
+      </wui-grid>
+    `;
+  }
+  onConnectWallet(wallet) {
+    ConnectorController.selectWalletConnector(wallet);
+  }
+};
+W3mAllWalletsSearch.styles = styles$1;
+__decorate$3([
+  r()
+], W3mAllWalletsSearch.prototype, "loading", void 0);
+__decorate$3([
+  n()
+], W3mAllWalletsSearch.prototype, "query", void 0);
+__decorate$3([
+  n()
+], W3mAllWalletsSearch.prototype, "badge", void 0);
+W3mAllWalletsSearch = __decorate$3([
+  customElement("w3m-all-wallets-search")
+], W3mAllWalletsSearch);
+var __decorate$2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mAllWalletsView = class W3mAllWalletsView2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.search = "";
+    this.onDebouncedSearch = CoreHelperUtil.debounce((value) => {
+      this.search = value;
+    });
+  }
+  render() {
+    const isSearch = this.search.length >= 2;
+    return x`
+      <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 || this.badge ? x`<w3m-all-wallets-search
+            query=${this.search}
+            badge=${o(this.badge)}
+          ></w3m-all-wallets-search>` : x`<w3m-all-wallets-list badge=${o(this.badge)}></w3m-all-wallets-list>`}
+    `;
+  }
+  onInputChange(event) {
+    this.onDebouncedSearch(event.detail);
+  }
+  onClick() {
+    if (this.badge === "certified") {
+      this.badge = void 0;
+      return;
+    }
+    this.badge = "certified";
+    SnackController.showSvg("Only WalletConnect certified", {
+      icon: "walletConnectBrown",
+      iconColor: "accent-100"
+    });
+  }
+  qrButtonTemplate() {
+    if (CoreHelperUtil.isMobile()) {
+      return x`
+        <wui-icon-box
+          size="lg"
+          iconSize="xl"
+          iconColor="accent-100"
+          backgroundColor="accent-100"
+          icon="qrCode"
+          background="transparent"
+          border
+          borderColor="wui-accent-glass-010"
+          @click=${this.onWalletConnectQr.bind(this)}
+        ></wui-icon-box>
+      `;
+    }
+    return null;
+  }
+  onWalletConnectQr() {
+    RouterController.push("ConnectingWalletConnect");
+  }
+};
+__decorate$2([
+  r()
+], W3mAllWalletsView.prototype, "search", void 0);
+__decorate$2([
+  r()
+], W3mAllWalletsView.prototype, "badge", void 0);
+W3mAllWalletsView = __decorate$2([
+  customElement("w3m-all-wallets-view")
+], W3mAllWalletsView);
+const styles = i`
+  button {
+    column-gap: var(--wui-spacing-s);
+    padding: 11px 18px 11px var(--wui-spacing-s);
+    width: 100%;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xs);
+    color: var(--wui-color-fg-250);
+    transition:
+      color var(--wui-ease-out-power-1) var(--wui-duration-md),
+      background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: color, background-color;
+  }
+
+  button[data-iconvariant='square'],
+  button[data-iconvariant='square-blue'] {
+    padding: 6px 18px 6px 9px;
+  }
+
+  button > wui-flex {
+    flex: 1;
+  }
+
+  button > wui-image {
+    width: 32px;
+    height: 32px;
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
+    border-radius: var(--wui-border-radius-3xl);
+  }
+
+  button > wui-icon {
+    width: 36px;
+    height: 36px;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+  }
+
+  button > wui-icon-box[data-variant='blue'] {
+    box-shadow: 0 0 0 2px var(--wui-color-accent-glass-005);
+  }
+
+  button > wui-icon-box[data-variant='overlay'] {
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
+  }
+
+  button > wui-icon-box[data-variant='square-blue'] {
+    border-radius: var(--wui-border-radius-3xs);
+    position: relative;
+    border: none;
+    width: 36px;
+    height: 36px;
+  }
+
+  button > wui-icon-box[data-variant='square-blue']::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    border: 1px solid var(--wui-color-accent-glass-010);
+    pointer-events: none;
+  }
+
+  button > wui-icon:last-child {
+    width: 14px;
+    height: 14px;
+  }
+
+  button:disabled {
+    color: var(--wui-color-gray-glass-020);
+  }
+
+  button[data-loading='true'] > wui-icon {
+    opacity: 0;
+  }
+
+  wui-loading-spinner {
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+var __decorate$1 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiListItem = class WuiListItem2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.tabIdx = void 0;
+    this.variant = "icon";
+    this.disabled = false;
+    this.imageSrc = void 0;
+    this.alt = void 0;
+    this.chevron = false;
+    this.loading = false;
+  }
+  render() {
+    return x`
+      <button
+        ?disabled=${this.loading ? true : Boolean(this.disabled)}
+        data-loading=${this.loading}
+        data-iconvariant=${o(this.iconVariant)}
+        tabindex=${o(this.tabIdx)}
+      >
+        ${this.loadingTemplate()} ${this.visualTemplate()}
+        <wui-flex gap="3xs">
+          <slot></slot>
+        </wui-flex>
+        ${this.chevronTemplate()}
+      </button>
+    `;
+  }
+  visualTemplate() {
+    if (this.variant === "image" && this.imageSrc) {
+      return x`<wui-image src=${this.imageSrc} alt=${this.alt ?? "list item"}></wui-image>`;
+    }
+    if (this.iconVariant === "square" && this.icon && this.variant === "icon") {
+      return x`<wui-icon name=${this.icon}></wui-icon>`;
+    }
+    if (this.variant === "icon" && this.icon && this.iconVariant) {
+      const color = ["blue", "square-blue"].includes(this.iconVariant) ? "accent-100" : "fg-200";
+      const size = this.iconVariant === "square-blue" ? "mdl" : "md";
+      const iconSize = this.iconSize ? this.iconSize : size;
+      return x`
+        <wui-icon-box
+          data-variant=${this.iconVariant}
+          icon=${this.icon}
+          iconSize=${iconSize}
+          background="transparent"
+          iconColor=${color}
+          backgroundColor=${color}
+          size=${size}
+        ></wui-icon-box>
+      `;
+    }
+    return null;
+  }
+  loadingTemplate() {
+    if (this.loading) {
+      return x`<wui-loading-spinner
+        data-testid="wui-list-item-loading-spinner"
+        color="fg-300"
+      ></wui-loading-spinner>`;
+    }
+    return x``;
+  }
+  chevronTemplate() {
+    if (this.chevron) {
+      return x`<wui-icon size="inherit" color="fg-200" name="chevronRight"></wui-icon>`;
+    }
+    return null;
+  }
+};
+WuiListItem.styles = [resetStyles, elementStyles, styles];
+__decorate$1([
+  n()
+], WuiListItem.prototype, "icon", void 0);
+__decorate$1([
+  n()
+], WuiListItem.prototype, "iconSize", void 0);
+__decorate$1([
+  n()
+], WuiListItem.prototype, "tabIdx", void 0);
+__decorate$1([
+  n()
+], WuiListItem.prototype, "variant", void 0);
+__decorate$1([
+  n()
+], WuiListItem.prototype, "iconVariant", void 0);
+__decorate$1([
+  n({ type: Boolean })
+], WuiListItem.prototype, "disabled", void 0);
+__decorate$1([
+  n()
+], WuiListItem.prototype, "imageSrc", void 0);
+__decorate$1([
+  n()
+], WuiListItem.prototype, "alt", void 0);
+__decorate$1([
+  n({ type: Boolean })
+], WuiListItem.prototype, "chevron", void 0);
+__decorate$1([
+  n({ type: Boolean })
+], WuiListItem.prototype, "loading", void 0);
+WuiListItem = __decorate$1([
+  customElement("wui-list-item")
+], WuiListItem);
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mDownloadsView = class W3mDownloadsView2 extends i$1 {
+  constructor() {
+    var _a;
+    super(...arguments);
+    this.wallet = (_a = RouterController.state.data) == null ? void 0 : _a.wallet;
+  }
+  render() {
+    if (!this.wallet) {
+      throw new Error("w3m-downloads-view");
+    }
+    return x`
+      <wui-flex gap="xs" flexDirection="column" .padding=${["s", "s", "l", "s"]}>
+        ${this.chromeTemplate()} ${this.iosTemplate()} ${this.androidTemplate()}
+        ${this.homepageTemplate()}
+      </wui-flex>
+    `;
+  }
+  chromeTemplate() {
+    var _a;
+    if (!((_a = this.wallet) == null ? void 0 : _a.chrome_store)) {
+      return null;
+    }
+    return x`<wui-list-item
+      variant="icon"
+      icon="chromeStore"
+      iconVariant="square"
+      @click=${this.onChromeStore.bind(this)}
+      chevron
+    >
+      <wui-text variant="paragraph-500" color="fg-100">Chrome Extension</wui-text>
+    </wui-list-item>`;
+  }
+  iosTemplate() {
+    var _a;
+    if (!((_a = this.wallet) == null ? void 0 : _a.app_store)) {
+      return null;
+    }
+    return x`<wui-list-item
+      variant="icon"
+      icon="appStore"
+      iconVariant="square"
+      @click=${this.onAppStore.bind(this)}
+      chevron
+    >
+      <wui-text variant="paragraph-500" color="fg-100">iOS App</wui-text>
+    </wui-list-item>`;
+  }
+  androidTemplate() {
+    var _a;
+    if (!((_a = this.wallet) == null ? void 0 : _a.play_store)) {
+      return null;
+    }
+    return x`<wui-list-item
+      variant="icon"
+      icon="playStore"
+      iconVariant="square"
+      @click=${this.onPlayStore.bind(this)}
+      chevron
+    >
+      <wui-text variant="paragraph-500" color="fg-100">Android App</wui-text>
+    </wui-list-item>`;
+  }
+  homepageTemplate() {
+    var _a;
+    if (!((_a = this.wallet) == null ? void 0 : _a.homepage)) {
+      return null;
+    }
+    return x`
+      <wui-list-item
+        variant="icon"
+        icon="browser"
+        iconVariant="square-blue"
+        @click=${this.onHomePage.bind(this)}
+        chevron
+      >
+        <wui-text variant="paragraph-500" color="fg-100">Website</wui-text>
+      </wui-list-item>
+    `;
+  }
+  onChromeStore() {
+    var _a;
+    if ((_a = this.wallet) == null ? void 0 : _a.chrome_store) {
+      CoreHelperUtil.openHref(this.wallet.chrome_store, "_blank");
+    }
+  }
+  onAppStore() {
+    var _a;
+    if ((_a = this.wallet) == null ? void 0 : _a.app_store) {
+      CoreHelperUtil.openHref(this.wallet.app_store, "_blank");
+    }
+  }
+  onPlayStore() {
+    var _a;
+    if ((_a = this.wallet) == null ? void 0 : _a.play_store) {
+      CoreHelperUtil.openHref(this.wallet.play_store, "_blank");
+    }
+  }
+  onHomePage() {
+    var _a;
+    if ((_a = this.wallet) == null ? void 0 : _a.homepage) {
+      CoreHelperUtil.openHref(this.wallet.homepage, "_blank");
+    }
+  }
+};
+W3mDownloadsView = __decorate([
+  customElement("w3m-downloads-view")
+], W3mDownloadsView);
+export {
+  W3mAllWalletsView,
+  W3mConnectingWcBasicView,
+  W3mDownloadsView
+};
+//# sourceMappingURL=basic-DFEi41zA.js.map