coinley-checkout
Version:
A React SDK for Coinley cryptocurrency payment processing with multi-network support
1,598 lines (1,543 loc) • 55.2 kB
JavaScript
import { p as proxy, w as withErrorBoundary, s as subscribe, q as subscribeKey, R as RouterController, M as ModalController, t as SIWXUtil, i, r as resetStyles, a as i$1, x, u as AlertController, e as elementStyles, o as colorStyles, h as ChainController, d as AssetUtil, j as AssetController, v as ConstantsUtil, E as EventsController, O as OptionsController, C as ConnectorController, y as AccountController, k as SnackController, A as ApiController, T as ThemeController, z as initializeTheming, b as CoreHelperUtil, g as ConstantsUtil$1 } from "./core-be16e657.mjs";
import { c as customElement, n, r, o, U as UiHelperUtil } from "./index-e8592264.mjs";
import "./index-2161e56b.mjs";
import "./index-703c58ee.mjs";
import "./index-1c96ce10.mjs";
import "react";
import "./events-856718af.mjs";
import "./index.es-2cef285a.mjs";
import "./index-ad797676.mjs";
const state = proxy({
message: "",
open: false,
triggerRect: {
width: 0,
height: 0,
top: 0,
left: 0
},
variant: "shade"
});
const controller = {
state,
subscribe(callback) {
return subscribe(state, () => callback(state));
},
subscribeKey(key, callback) {
return subscribeKey(state, key, callback);
},
showTooltip({ message, triggerRect, variant }) {
state.open = true;
state.message = message;
state.triggerRect = triggerRect;
state.variant = variant;
},
hide() {
state.open = false;
state.message = "";
state.triggerRect = {
width: 0,
height: 0,
top: 0,
left: 0
};
}
};
const TooltipController = withErrorBoundary(controller);
const ModalUtil = {
isUnsupportedChainView() {
return RouterController.state.view === "UnsupportedChain" || RouterController.state.view === "SwitchNetwork" && RouterController.state.history.includes("UnsupportedChain");
},
async safeClose() {
if (this.isUnsupportedChainView()) {
ModalController.shake();
return;
}
const isSIWXCloseDisabled = await SIWXUtil.isSIWXCloseDisabled();
if (isSIWXCloseDisabled) {
ModalController.shake();
return;
}
ModalController.close();
}
};
const styles$a = i`
:host {
display: block;
border-radius: clamp(0px, var(--wui-border-radius-l), 44px);
box-shadow: 0 0 0 1px var(--wui-color-gray-glass-005);
background-color: var(--wui-color-modal-bg);
overflow: hidden;
}
:host([data-embedded='true']) {
box-shadow:
0 0 0 1px var(--wui-color-gray-glass-005),
0px 4px 12px 4px var(--w3m-card-embedded-shadow-color);
}
`;
var __decorate$a = globalThis && globalThis.__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 WuiCard = class WuiCard2 extends i$1 {
render() {
return x`<slot></slot>`;
}
};
WuiCard.styles = [resetStyles, styles$a];
WuiCard = __decorate$a([
customElement("wui-card")
], WuiCard);
const styles$9 = i`
:host {
display: flex;
align-items: center;
justify-content: center;
padding: var(--wui-spacing-s);
border-radius: var(--wui-border-radius-s);
border: 1px solid var(--wui-color-dark-glass-100);
box-sizing: border-box;
background-color: var(--wui-color-bg-325);
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.25);
}
wui-flex {
width: 100%;
}
wui-text {
word-break: break-word;
flex: 1;
}
.close {
cursor: pointer;
}
.icon-box {
height: 40px;
width: 40px;
border-radius: var(--wui-border-radius-3xs);
background-color: var(--local-icon-bg-value);
}
`;
var __decorate$9 = globalThis && globalThis.__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 WuiAlertBar = class WuiAlertBar2 extends i$1 {
constructor() {
super(...arguments);
this.message = "";
this.backgroundColor = "accent-100";
this.iconColor = "accent-100";
this.icon = "info";
}
render() {
this.style.cssText = `
--local-icon-bg-value: var(--wui-color-${this.backgroundColor});
`;
return x`
<wui-flex flexDirection="row" justifyContent="space-between" alignItems="center">
<wui-flex columnGap="xs" flexDirection="row" alignItems="center">
<wui-flex
flexDirection="row"
alignItems="center"
justifyContent="center"
class="icon-box"
>
<wui-icon color=${this.iconColor} size="md" name=${this.icon}></wui-icon>
</wui-flex>
<wui-text variant="small-500" color="bg-350" data-testid="wui-alertbar-text"
>${this.message}</wui-text
>
</wui-flex>
<wui-icon
class="close"
color="bg-350"
size="sm"
name="close"
@click=${this.onClose}
></wui-icon>
</wui-flex>
`;
}
onClose() {
AlertController.close();
}
};
WuiAlertBar.styles = [resetStyles, styles$9];
__decorate$9([
n()
], WuiAlertBar.prototype, "message", void 0);
__decorate$9([
n()
], WuiAlertBar.prototype, "backgroundColor", void 0);
__decorate$9([
n()
], WuiAlertBar.prototype, "iconColor", void 0);
__decorate$9([
n()
], WuiAlertBar.prototype, "icon", void 0);
WuiAlertBar = __decorate$9([
customElement("wui-alertbar")
], WuiAlertBar);
const styles$8 = i`
:host {
display: block;
position: absolute;
top: var(--wui-spacing-s);
left: var(--wui-spacing-l);
right: var(--wui-spacing-l);
opacity: 0;
pointer-events: none;
}
`;
var __decorate$8 = globalThis && globalThis.__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;
};
const presets$1 = {
info: {
backgroundColor: "fg-350",
iconColor: "fg-325",
icon: "info"
},
success: {
backgroundColor: "success-glass-reown-020",
iconColor: "success-125",
icon: "checkmark"
},
warning: {
backgroundColor: "warning-glass-reown-020",
iconColor: "warning-100",
icon: "warningCircle"
},
error: {
backgroundColor: "error-glass-reown-020",
iconColor: "error-125",
icon: "exclamationTriangle"
}
};
let W3mAlertBar = class W3mAlertBar2 extends i$1 {
constructor() {
super();
this.unsubscribe = [];
this.open = AlertController.state.open;
this.onOpen(true);
this.unsubscribe.push(AlertController.subscribeKey("open", (val) => {
this.open = val;
this.onOpen(false);
}));
}
disconnectedCallback() {
this.unsubscribe.forEach((unsubscribe) => unsubscribe());
}
render() {
const { message, variant } = AlertController.state;
const preset = presets$1[variant];
return x`
<wui-alertbar
message=${message}
backgroundColor=${preset?.backgroundColor}
iconColor=${preset?.iconColor}
icon=${preset?.icon}
></wui-alertbar>
`;
}
onOpen(isMounted) {
if (this.open) {
this.animate([
{ opacity: 0, transform: "scale(0.85)" },
{ opacity: 1, transform: "scale(1)" }
], {
duration: 150,
fill: "forwards",
easing: "ease"
});
this.style.cssText = `pointer-events: auto`;
} else if (!isMounted) {
this.animate([
{ opacity: 1, transform: "scale(1)" },
{ opacity: 0, transform: "scale(0.85)" }
], {
duration: 150,
fill: "forwards",
easing: "ease"
});
this.style.cssText = `pointer-events: none`;
}
}
};
W3mAlertBar.styles = styles$8;
__decorate$8([
r()
], W3mAlertBar.prototype, "open", void 0);
W3mAlertBar = __decorate$8([
customElement("w3m-alertbar")
], W3mAlertBar);
const styles$7 = i`
button {
border-radius: var(--local-border-radius);
color: var(--wui-color-fg-100);
padding: var(--local-padding);
}
@media (max-width: 700px) {
button {
padding: var(--wui-spacing-s);
}
}
button > wui-icon {
pointer-events: none;
}
button:disabled > wui-icon {
color: var(--wui-color-bg-300) !important;
}
button:disabled {
background-color: transparent;
}
`;
var __decorate$7 = globalThis && globalThis.__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 WuiIconLink = class WuiIconLink2 extends i$1 {
constructor() {
super(...arguments);
this.size = "md";
this.disabled = false;
this.icon = "copy";
this.iconColor = "inherit";
}
render() {
const borderRadius = this.size === "lg" ? "--wui-border-radius-xs" : "--wui-border-radius-xxs";
const padding = this.size === "lg" ? "--wui-spacing-1xs" : "--wui-spacing-2xs";
this.style.cssText = `
--local-border-radius: var(${borderRadius});
--local-padding: var(${padding});
`;
return x`
<button ?disabled=${this.disabled}>
<wui-icon color=${this.iconColor} size=${this.size} name=${this.icon}></wui-icon>
</button>
`;
}
};
WuiIconLink.styles = [resetStyles, elementStyles, colorStyles, styles$7];
__decorate$7([
n()
], WuiIconLink.prototype, "size", void 0);
__decorate$7([
n({ type: Boolean })
], WuiIconLink.prototype, "disabled", void 0);
__decorate$7([
n()
], WuiIconLink.prototype, "icon", void 0);
__decorate$7([
n()
], WuiIconLink.prototype, "iconColor", void 0);
WuiIconLink = __decorate$7([
customElement("wui-icon-link")
], WuiIconLink);
const styles$6 = i`
button {
display: block;
display: flex;
align-items: center;
padding: var(--wui-spacing-xxs);
gap: var(--wui-spacing-xxs);
transition: all var(--wui-ease-out-power-1) var(--wui-duration-md);
border-radius: var(--wui-border-radius-xxs);
}
wui-image {
border-radius: 100%;
width: var(--wui-spacing-xl);
height: var(--wui-spacing-xl);
}
wui-icon-box {
width: var(--wui-spacing-xl);
height: var(--wui-spacing-xl);
}
button:hover {
background-color: var(--wui-color-gray-glass-002);
}
button:active {
background-color: var(--wui-color-gray-glass-005);
}
`;
var __decorate$6 = globalThis && globalThis.__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 WuiSelect = class WuiSelect2 extends i$1 {
constructor() {
super(...arguments);
this.imageSrc = "";
}
render() {
return x`<button>
${this.imageTemplate()}
<wui-icon size="xs" color="fg-200" name="chevronBottom"></wui-icon>
</button>`;
}
imageTemplate() {
if (this.imageSrc) {
return x`<wui-image src=${this.imageSrc} alt="select visual"></wui-image>`;
}
return x`<wui-icon-box
size="xxs"
iconColor="fg-200"
backgroundColor="fg-100"
background="opaque"
icon="networkPlaceholder"
></wui-icon-box>`;
}
};
WuiSelect.styles = [resetStyles, elementStyles, colorStyles, styles$6];
__decorate$6([
n()
], WuiSelect.prototype, "imageSrc", void 0);
WuiSelect = __decorate$6([
customElement("wui-select")
], WuiSelect);
const styles$5 = i`
:host {
height: 64px;
}
wui-text {
text-transform: capitalize;
}
wui-flex.w3m-header-title {
transform: translateY(0);
opacity: 1;
}
wui-flex.w3m-header-title[view-direction='prev'] {
animation:
slide-down-out 120ms forwards var(--wui-ease-out-power-2),
slide-down-in 120ms forwards var(--wui-ease-out-power-2);
animation-delay: 0ms, 200ms;
}
wui-flex.w3m-header-title[view-direction='next'] {
animation:
slide-up-out 120ms forwards var(--wui-ease-out-power-2),
slide-up-in 120ms forwards var(--wui-ease-out-power-2);
animation-delay: 0ms, 200ms;
}
wui-icon-link[data-hidden='true'] {
opacity: 0 !important;
pointer-events: none;
}
@keyframes slide-up-out {
from {
transform: translateY(0px);
opacity: 1;
}
to {
transform: translateY(3px);
opacity: 0;
}
}
@keyframes slide-up-in {
from {
transform: translateY(-3px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-down-out {
from {
transform: translateY(0px);
opacity: 1;
}
to {
transform: translateY(-3px);
opacity: 0;
}
}
@keyframes slide-down-in {
from {
transform: translateY(3px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
`;
var __decorate$5 = globalThis && globalThis.__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;
};
const BETA_SCREENS = ["SmartSessionList"];
function headings() {
const connectorName = RouterController.state.data?.connector?.name;
const walletName = RouterController.state.data?.wallet?.name;
const networkName = RouterController.state.data?.network?.name;
const name = walletName ?? connectorName;
const connectors = ConnectorController.getConnectors();
const isEmail = connectors.length === 1 && connectors[0]?.id === "w3m-email";
return {
Connect: `Connect ${isEmail ? "Email" : ""} Wallet`,
Create: "Create Wallet",
ChooseAccountName: void 0,
Account: void 0,
AccountSettings: void 0,
AllWallets: "All Wallets",
ApproveTransaction: "Approve Transaction",
BuyInProgress: "Buy",
ConnectingExternal: name ?? "Connect Wallet",
ConnectingWalletConnect: name ?? "WalletConnect",
ConnectingWalletConnectBasic: "WalletConnect",
ConnectingSiwe: "Sign In",
Convert: "Convert",
ConvertSelectToken: "Select token",
ConvertPreview: "Preview convert",
Downloads: name ? `Get ${name}` : "Downloads",
EmailLogin: "Email Login",
EmailVerifyOtp: "Confirm Email",
EmailVerifyDevice: "Register Device",
GetWallet: "Get a wallet",
Networks: "Choose Network",
OnRampProviders: "Choose Provider",
OnRampActivity: "Activity",
OnRampTokenSelect: "Select Token",
OnRampFiatSelect: "Select Currency",
Pay: "How you pay",
Profile: void 0,
SwitchNetwork: networkName ?? "Switch Network",
SwitchAddress: "Switch Address",
Transactions: "Activity",
UnsupportedChain: "Switch Network",
UpgradeEmailWallet: "Upgrade your Wallet",
UpdateEmailWallet: "Edit Email",
UpdateEmailPrimaryOtp: "Confirm Current Email",
UpdateEmailSecondaryOtp: "Confirm New Email",
WhatIsABuy: "What is Buy?",
RegisterAccountName: "Choose name",
RegisterAccountNameSuccess: "",
WalletReceive: "Receive",
WalletCompatibleNetworks: "Compatible Networks",
Swap: "Swap",
SwapSelectToken: "Select token",
SwapPreview: "Preview swap",
WalletSend: "Send",
WalletSendPreview: "Review send",
WalletSendSelectToken: "Select Token",
WhatIsANetwork: "What is a network?",
WhatIsAWallet: "What is a wallet?",
ConnectWallets: "Connect wallet",
ConnectSocials: "All socials",
ConnectingSocial: AccountController.state.socialProvider ? AccountController.state.socialProvider : "Connect Social",
ConnectingMultiChain: "Select chain",
ConnectingFarcaster: "Farcaster",
SwitchActiveChain: "Switch chain",
SmartSessionCreated: void 0,
SmartSessionList: "Smart Sessions",
SIWXSignMessage: "Sign In",
PayLoading: "Payment in progress"
};
}
let W3mHeader = class W3mHeader2 extends i$1 {
constructor() {
super();
this.unsubscribe = [];
this.heading = headings()[RouterController.state.view];
this.network = ChainController.state.activeCaipNetwork;
this.networkImage = AssetUtil.getNetworkImage(this.network);
this.showBack = false;
this.prevHistoryLength = 1;
this.view = RouterController.state.view;
this.viewDirection = "";
this.headerText = headings()[RouterController.state.view];
this.unsubscribe.push(AssetController.subscribeNetworkImages(() => {
this.networkImage = AssetUtil.getNetworkImage(this.network);
}), RouterController.subscribeKey("view", (val) => {
setTimeout(() => {
this.view = val;
this.headerText = headings()[val];
}, ConstantsUtil.ANIMATION_DURATIONS.HeaderText);
this.onViewChange();
this.onHistoryChange();
}), ChainController.subscribeKey("activeCaipNetwork", (val) => {
this.network = val;
this.networkImage = AssetUtil.getNetworkImage(this.network);
}));
}
disconnectCallback() {
this.unsubscribe.forEach((unsubscribe) => unsubscribe());
}
render() {
return x`
<wui-flex .padding=${this.getPadding()} justifyContent="space-between" alignItems="center">
${this.leftHeaderTemplate()} ${this.titleTemplate()} ${this.rightHeaderTemplate()}
</wui-flex>
`;
}
onWalletHelp() {
EventsController.sendEvent({ type: "track", event: "CLICK_WALLET_HELP" });
RouterController.push("WhatIsAWallet");
}
async onClose() {
await ModalUtil.safeClose();
}
rightHeaderTemplate() {
const isSmartSessionsEnabled = OptionsController?.state?.features?.smartSessions;
if (RouterController.state.view !== "Account" || !isSmartSessionsEnabled) {
return this.closeButtonTemplate();
}
return x`<wui-flex>
<wui-icon-link
icon="clock"
@click=${() => RouterController.push("SmartSessionList")}
data-testid="w3m-header-smart-sessions"
></wui-icon-link>
${this.closeButtonTemplate()}
</wui-flex> `;
}
closeButtonTemplate() {
return x`
<wui-icon-link
icon="close"
@click=${this.onClose.bind(this)}
data-testid="w3m-header-close"
></wui-icon-link>
`;
}
titleTemplate() {
const isBeta = BETA_SCREENS.includes(this.view);
return x`
<wui-flex
view-direction="${this.viewDirection}"
class="w3m-header-title"
alignItems="center"
gap="xs"
>
<wui-text variant="paragraph-700" color="fg-100" data-testid="w3m-header-text"
>${this.headerText}</wui-text
>
${isBeta ? x`<wui-tag variant="main">Beta</wui-tag>` : null}
</wui-flex>
`;
}
leftHeaderTemplate() {
const { view } = RouterController.state;
const isConnectHelp = view === "Connect";
const isEmbeddedEnable = OptionsController.state.enableEmbedded;
const isApproveTransaction = view === "ApproveTransaction";
const isConnectingSIWEView = view === "ConnectingSiwe";
const isAccountView = view === "Account";
const enableNetworkSwitch = OptionsController.state.enableNetworkSwitch;
const shouldHideBack = isApproveTransaction || isConnectingSIWEView || isConnectHelp && isEmbeddedEnable;
if (isAccountView && enableNetworkSwitch) {
return x`<wui-select
id="dynamic"
data-testid="w3m-account-select-network"
active-network=${o(this.network?.name)}
@click=${this.onNetworks.bind(this)}
imageSrc=${o(this.networkImage)}
></wui-select>`;
}
if (this.showBack && !shouldHideBack) {
return x`<wui-icon-link
data-testid="header-back"
id="dynamic"
icon="chevronLeft"
@click=${this.onGoBack.bind(this)}
></wui-icon-link>`;
}
return x`<wui-icon-link
data-hidden=${!isConnectHelp}
id="dynamic"
icon="helpCircle"
@click=${this.onWalletHelp.bind(this)}
></wui-icon-link>`;
}
onNetworks() {
if (this.isAllowedNetworkSwitch()) {
EventsController.sendEvent({ type: "track", event: "CLICK_NETWORKS" });
RouterController.push("Networks");
}
}
isAllowedNetworkSwitch() {
const requestedCaipNetworks = ChainController.getAllRequestedCaipNetworks();
const isMultiNetwork = requestedCaipNetworks ? requestedCaipNetworks.length > 1 : false;
const isValidNetwork = requestedCaipNetworks?.find(({ id }) => id === this.network?.id);
return isMultiNetwork || !isValidNetwork;
}
getPadding() {
if (this.heading) {
return ["l", "2l", "l", "2l"];
}
return ["0", "2l", "0", "2l"];
}
onViewChange() {
const { history } = RouterController.state;
let direction = ConstantsUtil.VIEW_DIRECTION.Next;
if (history.length < this.prevHistoryLength) {
direction = ConstantsUtil.VIEW_DIRECTION.Prev;
}
this.prevHistoryLength = history.length;
this.viewDirection = direction;
}
async onHistoryChange() {
const { history } = RouterController.state;
const buttonEl = this.shadowRoot?.querySelector("#dynamic");
if (history.length > 1 && !this.showBack && buttonEl) {
await buttonEl.animate([{ opacity: 1 }, { opacity: 0 }], {
duration: 200,
fill: "forwards",
easing: "ease"
}).finished;
this.showBack = true;
buttonEl.animate([{ opacity: 0 }, { opacity: 1 }], {
duration: 200,
fill: "forwards",
easing: "ease"
});
} else if (history.length <= 1 && this.showBack && buttonEl) {
await buttonEl.animate([{ opacity: 1 }, { opacity: 0 }], {
duration: 200,
fill: "forwards",
easing: "ease"
}).finished;
this.showBack = false;
buttonEl.animate([{ opacity: 0 }, { opacity: 1 }], {
duration: 200,
fill: "forwards",
easing: "ease"
});
}
}
onGoBack() {
RouterController.goBack();
}
};
W3mHeader.styles = styles$5;
__decorate$5([
r()
], W3mHeader.prototype, "heading", void 0);
__decorate$5([
r()
], W3mHeader.prototype, "network", void 0);
__decorate$5([
r()
], W3mHeader.prototype, "networkImage", void 0);
__decorate$5([
r()
], W3mHeader.prototype, "showBack", void 0);
__decorate$5([
r()
], W3mHeader.prototype, "prevHistoryLength", void 0);
__decorate$5([
r()
], W3mHeader.prototype, "view", void 0);
__decorate$5([
r()
], W3mHeader.prototype, "viewDirection", void 0);
__decorate$5([
r()
], W3mHeader.prototype, "headerText", void 0);
W3mHeader = __decorate$5([
customElement("w3m-header")
], W3mHeader);
const styles$4 = i`
:host {
display: flex;
column-gap: var(--wui-spacing-s);
align-items: center;
padding: var(--wui-spacing-xs) var(--wui-spacing-m) var(--wui-spacing-xs) var(--wui-spacing-xs);
border-radius: var(--wui-border-radius-s);
border: 1px solid var(--wui-color-gray-glass-005);
box-sizing: border-box;
background-color: var(--wui-color-bg-175);
box-shadow:
0px 14px 64px -4px rgba(0, 0, 0, 0.15),
0px 8px 22px -6px rgba(0, 0, 0, 0.15);
max-width: 300px;
}
:host wui-loading-spinner {
margin-left: var(--wui-spacing-3xs);
}
`;
var __decorate$4 = globalThis && globalThis.__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 WuiSnackbar = class WuiSnackbar2 extends i$1 {
constructor() {
super(...arguments);
this.backgroundColor = "accent-100";
this.iconColor = "accent-100";
this.icon = "checkmark";
this.message = "";
this.loading = false;
this.iconType = "default";
}
render() {
return x`
${this.templateIcon()}
<wui-text variant="paragraph-500" color="fg-100" data-testid="wui-snackbar-message"
>${this.message}</wui-text
>
`;
}
templateIcon() {
if (this.loading) {
return x`<wui-loading-spinner size="md" color="accent-100"></wui-loading-spinner>`;
}
if (this.iconType === "default") {
return x`<wui-icon size="xl" color=${this.iconColor} name=${this.icon}></wui-icon>`;
}
return x`<wui-icon-box
size="sm"
iconSize="xs"
iconColor=${this.iconColor}
backgroundColor=${this.backgroundColor}
icon=${this.icon}
background="opaque"
></wui-icon-box>`;
}
};
WuiSnackbar.styles = [resetStyles, styles$4];
__decorate$4([
n()
], WuiSnackbar.prototype, "backgroundColor", void 0);
__decorate$4([
n()
], WuiSnackbar.prototype, "iconColor", void 0);
__decorate$4([
n()
], WuiSnackbar.prototype, "icon", void 0);
__decorate$4([
n()
], WuiSnackbar.prototype, "message", void 0);
__decorate$4([
n()
], WuiSnackbar.prototype, "loading", void 0);
__decorate$4([
n()
], WuiSnackbar.prototype, "iconType", void 0);
WuiSnackbar = __decorate$4([
customElement("wui-snackbar")
], WuiSnackbar);
const styles$3 = i`
:host {
display: block;
position: absolute;
opacity: 0;
pointer-events: none;
top: 11px;
left: 50%;
width: max-content;
}
`;
var __decorate$3 = globalThis && globalThis.__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;
};
const presets = {
loading: void 0,
success: {
backgroundColor: "success-100",
iconColor: "success-100",
icon: "checkmark"
},
error: {
backgroundColor: "error-100",
iconColor: "error-100",
icon: "close"
}
};
let W3mSnackBar = class W3mSnackBar2 extends i$1 {
constructor() {
super();
this.unsubscribe = [];
this.timeout = void 0;
this.open = SnackController.state.open;
this.unsubscribe.push(SnackController.subscribeKey("open", (val) => {
this.open = val;
this.onOpen();
}));
}
disconnectedCallback() {
clearTimeout(this.timeout);
this.unsubscribe.forEach((unsubscribe) => unsubscribe());
}
render() {
const { message, variant, svg } = SnackController.state;
const preset = presets[variant];
const { icon, iconColor } = svg ?? preset ?? {};
return x`
<wui-snackbar
message=${message}
backgroundColor=${preset?.backgroundColor}
iconColor=${iconColor}
icon=${icon}
.loading=${variant === "loading"}
></wui-snackbar>
`;
}
onOpen() {
clearTimeout(this.timeout);
if (this.open) {
this.animate([
{ opacity: 0, transform: "translateX(-50%) scale(0.85)" },
{ opacity: 1, transform: "translateX(-50%) scale(1)" }
], {
duration: 150,
fill: "forwards",
easing: "ease"
});
if (this.timeout) {
clearTimeout(this.timeout);
}
if (SnackController.state.autoClose) {
this.timeout = setTimeout(() => SnackController.hide(), 2500);
}
} else {
this.animate([
{ opacity: 1, transform: "translateX(-50%) scale(1)" },
{ opacity: 0, transform: "translateX(-50%) scale(0.85)" }
], {
duration: 150,
fill: "forwards",
easing: "ease"
});
}
}
};
W3mSnackBar.styles = styles$3;
__decorate$3([
r()
], W3mSnackBar.prototype, "open", void 0);
W3mSnackBar = __decorate$3([
customElement("w3m-snackbar")
], W3mSnackBar);
const styles$2 = i`
:host {
pointer-events: none;
}
:host > wui-flex {
display: var(--w3m-tooltip-display);
opacity: var(--w3m-tooltip-opacity);
padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s);
border-radius: var(--wui-border-radius-xxs);
color: var(--wui-color-bg-100);
position: fixed;
top: var(--w3m-tooltip-top);
left: var(--w3m-tooltip-left);
transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px));
max-width: calc(var(--w3m-modal-width) - var(--wui-spacing-xl));
transition: opacity 0.2s var(--wui-ease-out-power-2);
will-change: opacity;
}
:host([data-variant='shade']) > wui-flex {
background-color: var(--wui-color-bg-150);
border: 1px solid var(--wui-color-gray-glass-005);
}
:host([data-variant='shade']) > wui-flex > wui-text {
color: var(--wui-color-fg-150);
}
:host([data-variant='fill']) > wui-flex {
background-color: var(--wui-color-fg-100);
border: none;
}
wui-icon {
position: absolute;
width: 12px !important;
height: 4px !important;
color: var(--wui-color-bg-150);
}
wui-icon[data-placement='top'] {
bottom: 0px;
left: 50%;
transform: translate(-50%, 95%);
}
wui-icon[data-placement='bottom'] {
top: 0;
left: 50%;
transform: translate(-50%, -95%) rotate(180deg);
}
wui-icon[data-placement='right'] {
top: 50%;
left: 0;
transform: translate(-65%, -50%) rotate(90deg);
}
wui-icon[data-placement='left'] {
top: 50%;
right: 0%;
transform: translate(65%, -50%) rotate(270deg);
}
`;
var __decorate$2 = globalThis && globalThis.__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 W3mTooltip = class W3mTooltip2 extends i$1 {
constructor() {
super();
this.unsubscribe = [];
this.open = TooltipController.state.open;
this.message = TooltipController.state.message;
this.triggerRect = TooltipController.state.triggerRect;
this.variant = TooltipController.state.variant;
this.unsubscribe.push(...[
TooltipController.subscribe((newState) => {
this.open = newState.open;
this.message = newState.message;
this.triggerRect = newState.triggerRect;
this.variant = newState.variant;
})
]);
}
disconnectedCallback() {
this.unsubscribe.forEach((unsubscribe) => unsubscribe());
}
render() {
this.dataset["variant"] = this.variant;
const topValue = this.triggerRect.top;
const leftValue = this.triggerRect.left;
this.style.cssText = `
--w3m-tooltip-top: ${topValue}px;
--w3m-tooltip-left: ${leftValue}px;
--w3m-tooltip-parent-width: ${this.triggerRect.width / 2}px;
--w3m-tooltip-display: ${this.open ? "flex" : "none"};
--w3m-tooltip-opacity: ${this.open ? 1 : 0};
`;
return x`<wui-flex>
<wui-icon data-placement="top" color="fg-100" size="inherit" name="cursor"></wui-icon>
<wui-text color="inherit" variant="small-500">${this.message}</wui-text>
</wui-flex>`;
}
};
W3mTooltip.styles = [styles$2];
__decorate$2([
r()
], W3mTooltip.prototype, "open", void 0);
__decorate$2([
r()
], W3mTooltip.prototype, "message", void 0);
__decorate$2([
r()
], W3mTooltip.prototype, "triggerRect", void 0);
__decorate$2([
r()
], W3mTooltip.prototype, "variant", void 0);
W3mTooltip = __decorate$2([
customElement("w3m-tooltip"),
customElement("w3m-tooltip")
], W3mTooltip);
const styles$1 = i`
:host {
--prev-height: 0px;
--new-height: 0px;
display: block;
}
div.w3m-router-container {
transform: translateY(0);
opacity: 1;
}
div.w3m-router-container[view-direction='prev'] {
animation:
slide-left-out 150ms forwards ease,
slide-left-in 150ms forwards ease;
animation-delay: 0ms, 200ms;
}
div.w3m-router-container[view-direction='next'] {
animation:
slide-right-out 150ms forwards ease,
slide-right-in 150ms forwards ease;
animation-delay: 0ms, 200ms;
}
@keyframes slide-left-out {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(10px);
opacity: 0;
}
}
@keyframes slide-left-in {
from {
transform: translateX(-10px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-right-out {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-10px);
opacity: 0;
}
}
@keyframes slide-right-in {
from {
transform: translateX(10px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
`;
var __decorate$1 = globalThis && globalThis.__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 W3mRouter = class W3mRouter2 extends i$1 {
constructor() {
super();
this.resizeObserver = void 0;
this.prevHeight = "0px";
this.prevHistoryLength = 1;
this.unsubscribe = [];
this.view = RouterController.state.view;
this.viewDirection = "";
this.unsubscribe.push(RouterController.subscribeKey("view", (val) => this.onViewChange(val)));
}
firstUpdated() {
this.resizeObserver = new ResizeObserver(([content]) => {
const height = `${content?.contentRect.height}px`;
if (this.prevHeight !== "0px") {
this.style.setProperty("--prev-height", this.prevHeight);
this.style.setProperty("--new-height", height);
this.style.animation = "w3m-view-height 150ms forwards ease";
this.style.height = "auto";
}
setTimeout(() => {
this.prevHeight = height;
this.style.animation = "unset";
}, ConstantsUtil.ANIMATION_DURATIONS.ModalHeight);
});
this.resizeObserver?.observe(this.getWrapper());
}
disconnectedCallback() {
this.resizeObserver?.unobserve(this.getWrapper());
this.unsubscribe.forEach((unsubscribe) => unsubscribe());
}
render() {
return x`<div class="w3m-router-container" view-direction="${this.viewDirection}">
${this.viewTemplate()}
</div>`;
}
viewTemplate() {
switch (this.view) {
case "AccountSettings":
return x`<w3m-account-settings-view></w3m-account-settings-view>`;
case "Account":
return x`<w3m-account-view></w3m-account-view>`;
case "AllWallets":
return x`<w3m-all-wallets-view></w3m-all-wallets-view>`;
case "ApproveTransaction":
return x`<w3m-approve-transaction-view></w3m-approve-transaction-view>`;
case "BuyInProgress":
return x`<w3m-buy-in-progress-view></w3m-buy-in-progress-view>`;
case "ChooseAccountName":
return x`<w3m-choose-account-name-view></w3m-choose-account-name-view>`;
case "Connect":
return x`<w3m-connect-view></w3m-connect-view>`;
case "Create":
return x`<w3m-connect-view walletGuide="explore"></w3m-connect-view>`;
case "ConnectingWalletConnect":
return x`<w3m-connecting-wc-view></w3m-connecting-wc-view>`;
case "ConnectingWalletConnectBasic":
return x`<w3m-connecting-wc-basic-view></w3m-connecting-wc-basic-view>`;
case "ConnectingExternal":
return x`<w3m-connecting-external-view></w3m-connecting-external-view>`;
case "ConnectingSiwe":
return x`<w3m-connecting-siwe-view></w3m-connecting-siwe-view>`;
case "ConnectWallets":
return x`<w3m-connect-wallets-view></w3m-connect-wallets-view>`;
case "ConnectSocials":
return x`<w3m-connect-socials-view></w3m-connect-socials-view>`;
case "ConnectingSocial":
return x`<w3m-connecting-social-view></w3m-connecting-social-view>`;
case "Downloads":
return x`<w3m-downloads-view></w3m-downloads-view>`;
case "EmailLogin":
return x`<w3m-email-login-view></w3m-email-login-view>`;
case "EmailVerifyOtp":
return x`<w3m-email-verify-otp-view></w3m-email-verify-otp-view>`;
case "EmailVerifyDevice":
return x`<w3m-email-verify-device-view></w3m-email-verify-device-view>`;
case "GetWallet":
return x`<w3m-get-wallet-view></w3m-get-wallet-view>`;
case "Networks":
return x`<w3m-networks-view></w3m-networks-view>`;
case "SwitchNetwork":
return x`<w3m-network-switch-view></w3m-network-switch-view>`;
case "Profile":
return x`<w3m-profile-view></w3m-profile-view>`;
case "SwitchAddress":
return x`<w3m-switch-address-view></w3m-switch-address-view>`;
case "Transactions":
return x`<w3m-transactions-view></w3m-transactions-view>`;
case "OnRampProviders":
return x`<w3m-onramp-providers-view></w3m-onramp-providers-view>`;
case "OnRampActivity":
return x`<w3m-onramp-activity-view></w3m-onramp-activity-view>`;
case "OnRampTokenSelect":
return x`<w3m-onramp-token-select-view></w3m-onramp-token-select-view>`;
case "OnRampFiatSelect":
return x`<w3m-onramp-fiat-select-view></w3m-onramp-fiat-select-view>`;
case "UpgradeEmailWallet":
return x`<w3m-upgrade-wallet-view></w3m-upgrade-wallet-view>`;
case "UpdateEmailWallet":
return x`<w3m-update-email-wallet-view></w3m-update-email-wallet-view>`;
case "UpdateEmailPrimaryOtp":
return x`<w3m-update-email-primary-otp-view></w3m-update-email-primary-otp-view>`;
case "UpdateEmailSecondaryOtp":
return x`<w3m-update-email-secondary-otp-view></w3m-update-email-secondary-otp-view>`;
case "UnsupportedChain":
return x`<w3m-unsupported-chain-view></w3m-unsupported-chain-view>`;
case "Swap":
return x`<w3m-swap-view></w3m-swap-view>`;
case "SwapSelectToken":
return x`<w3m-swap-select-token-view></w3m-swap-select-token-view>`;
case "SwapPreview":
return x`<w3m-swap-preview-view></w3m-swap-preview-view>`;
case "WalletSend":
return x`<w3m-wallet-send-view></w3m-wallet-send-view>`;
case "WalletSendSelectToken":
return x`<w3m-wallet-send-select-token-view></w3m-wallet-send-select-token-view>`;
case "WalletSendPreview":
return x`<w3m-wallet-send-preview-view></w3m-wallet-send-preview-view>`;
case "WhatIsABuy":
return x`<w3m-what-is-a-buy-view></w3m-what-is-a-buy-view>`;
case "WalletReceive":
return x`<w3m-wallet-receive-view></w3m-wallet-receive-view>`;
case "WalletCompatibleNetworks":
return x`<w3m-wallet-compatible-networks-view></w3m-wallet-compatible-networks-view>`;
case "WhatIsAWallet":
return x`<w3m-what-is-a-wallet-view></w3m-what-is-a-wallet-view>`;
case "ConnectingMultiChain":
return x`<w3m-connecting-multi-chain-view></w3m-connecting-multi-chain-view>`;
case "WhatIsANetwork":
return x`<w3m-what-is-a-network-view></w3m-what-is-a-network-view>`;
case "ConnectingFarcaster":
return x`<w3m-connecting-farcaster-view></w3m-connecting-farcaster-view>`;
case "SwitchActiveChain":
return x`<w3m-switch-active-chain-view></w3m-switch-active-chain-view>`;
case "RegisterAccountName":
return x`<w3m-register-account-name-view></w3m-register-account-name-view>`;
case "RegisterAccountNameSuccess":
return x`<w3m-register-account-name-success-view></w3m-register-account-name-success-view>`;
case "SmartSessionCreated":
return x`<w3m-smart-session-created-view></w3m-smart-session-created-view>`;
case "SmartSessionList":
return x`<w3m-smart-session-list-view></w3m-smart-session-list-view>`;
case "SIWXSignMessage":
return x`<w3m-siwx-sign-message-view></w3m-siwx-sign-message-view>`;
case "Pay":
return x`<w3m-pay-view></w3m-pay-view>`;
case "PayLoading":
return x`<w3m-pay-loading-view></w3m-pay-loading-view>`;
default:
return x`<w3m-connect-view></w3m-connect-view>`;
}
}
onViewChange(newView) {
TooltipController.hide();
let direction = ConstantsUtil.VIEW_DIRECTION.Next;
const { history } = RouterController.state;
if (history.length < this.prevHistoryLength) {
direction = ConstantsUtil.VIEW_DIRECTION.Prev;
}
this.prevHistoryLength = history.length;
this.viewDirection = direction;
setTimeout(() => {
this.view = newView;
}, ConstantsUtil.ANIMATION_DURATIONS.ViewTransition);
}
getWrapper() {
return this.shadowRoot?.querySelector("div");
}
};
W3mRouter.styles = styles$1;
__decorate$1([
r()
], W3mRouter.prototype, "view", void 0);
__decorate$1([
r()
], W3mRouter.prototype, "viewDirection", void 0);
W3mRouter = __decorate$1([
customElement("w3m-router")
], W3mRouter);
const styles = i`
:host {
z-index: var(--w3m-z-index);
display: block;
backface-visibility: hidden;
will-change: opacity;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
opacity: 0;
background-color: var(--wui-cover);
transition: opacity 0.2s var(--wui-ease-out-power-2);
will-change: opacity;
}
:host(.open) {
opacity: 1;
}
:host(.appkit-modal) {
position: relative;
pointer-events: unset;
background: none;
width: 100%;
opacity: 1;
}
wui-card {
max-width: var(--w3m-modal-width);
width: 100%;
position: relative;
animation: zoom-in 0.2s var(--wui-ease-out-power-2);
animation-fill-mode: backwards;
outline: none;
transition:
border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1),
background-color var(--wui-duration-lg) var(--wui-ease-out-power-1);
will-change: border-radius, background-color;
}
:host(.appkit-modal) wui-card {
max-width: 400px;
}
wui-card[shake='true'] {
animation:
zoom-in 0.2s var(--wui-ease-out-power-2),
w3m-shake 0.5s var(--wui-ease-out-power-2);
}
wui-flex {
overflow-x: hidden;
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
@media (max-height: 700px) and (min-width: 431px) {
wui-flex {
align-items: flex-start;
}
wui-card {
margin: var(--wui-spacing-xxl) 0px;
}
}
@media (max-width: 430px) {
wui-flex {
align-items: flex-end;
}
wui-card {
max-width: 100%;
border-bottom-left-radius: var(--local-border-bottom-mobile-radius);
border-bottom-right-radius: var(--local-border-bottom-mobile-radius);
border-bottom: none;
animation: slide-in 0.2s var(--wui-ease-out-power-2);
}
wui-card[shake='true'] {
animation:
slide-in 0.2s var(--wui-ease-out-power-2),
w3m-shake 0.5s var(--wui-ease-out-power-2);
}
}
@keyframes zoom-in {
0% {
transform: scale(0.95) translateY(0);
}
100% {
transform: scale(1) translateY(0);
}
}
@keyframes slide-in {
0% {
transform: scale(1) translateY(50px);
}
100% {
transform: scale(1) translateY(0);
}
}
@keyframes w3m-shake {
0% {
transform: scale(1) rotate(0deg);
}
20% {
transform: scale(1) rotate(-1deg);
}
40% {
transform: scale(1) rotate(1.5deg);
}
60% {
transform: scale(1) rotate(-1.5deg);
}
80% {
transform: scale(1) rotate(1deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
@keyframes w3m-view-height {
from {
height: var(--prev-height);
}
to {
height: var(--new-height);
}
}
`;
var __decorate = globalThis && globalThis.__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;
};
const SCROLL_LOCK = "scroll-lock";
class W3mModalBase extends i$1 {
constructor() {
super();
this.unsubscribe = [];
this.abortController = void 0;
this.hasPrefetched = false;
this.enableEmbedded = OptionsController.state.enableEmbedded;
this.open = ModalController.state.open;
this.caipAddress = ChainController.state.activeCaipAddress;
this.caipNetwork = ChainController.state.activeCaipNetwork;
this.shake = ModalController.state.shake;
this.filterByNamespace = ConnectorController.state.filterByNamespace;
this.initializeTheming();
ApiController.prefetchAnalyticsConfig();
this.unsubscribe.push(...[
ModalController.subscribeKey("open", (val) => val ? this.onOpen() : this.onClose()),
ModalController.subscribeKey("shake", (val) => this.shake = val),
ChainController.subscribeKey("activeCaipNetwork", (val) => this.onNewNetwork(val)),
ChainController.subscribeKey("activeCaipAddress", (val) => this.onNewAddress(val)),
OptionsController.subscribeKey("enableEmbedded", (val) => this.enableEmbedded = val),
ConnectorController.subscribeKey("filterByNamespace", (val) => {
if (this.filterByNamespace !== val && !ChainController.getAccountData(val)?.caipAddress) {
ApiController.fetchRecommendedWallets();
this.filterByNamespace = val;
}
})
]);
}
firstUpdated() {
if (this.caipAddress) {
if (this.enableEmbedded) {
ModalController.close();
this.prefetch();
return;
}
this.onNewAddress(this.caipAddress);
}
if (this.open) {
this.onOpen();
}
if (this.enableEmbedded) {
this.prefetch();
}
}
disconnectedCallback() {
this.unsubscribe.forEach((unsubscribe) => unsubscribe());
this.onRemoveKeyboardListener();
}
render() {
this.style.cssText = `
--local-border-bottom-mobile-radius: ${this.enableEmbedded ? "clamp(0px, var(--wui-border-radius-l), 44px)" : "0px"};
`;
if (this.enableEmbedded) {
return x`${this.contentTemplate()}
<w3m-tooltip></w3m-tooltip> `;
}
return this.open ? x`
<wui-flex @click=${this.onOverlayClick.bind(this)} data-testid="w3m-modal-overlay">
${this.contentTemplate()}
</wui-flex>
<w3m-tooltip></w3m-tooltip>
` : null;
}
contentTemplate() {
return x` <wui-card
shake="${this.shake}"
data-embedded="${o(this.enableEmbedded)}"
role="alertdialog"
aria-modal="true"
tabindex="0"
data-testid="w3m-