🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@wanderapp/embed-sdk

Package Overview
Dependencies
Maintainers
4
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wanderapp/embed-sdk - npm Package Compare versions

Comparing version
0.0.6
 to
0.0.7
+22
sdk-dist/utils/message/message.constants.cjs
'use strict';
// src/utils/message/message.constants.ts
var EMBEDDED_AUTH_TYPE = [
"PASSKEYS",
"EMAIL_N_PASSWORD",
"GOOGLE",
"FACEBOOK",
"X",
"APPLE"
];
var EMBEDDED_AUTH_STATUS = [
"loading",
"onboarding",
"authenticated",
"not-authenticated"
];
exports.EMBEDDED_AUTH_STATUS = EMBEDDED_AUTH_STATUS;
exports.EMBEDDED_AUTH_TYPE = EMBEDDED_AUTH_TYPE;
//# sourceMappingURL=message.constants.cjs.map
//# sourceMappingURL=message.constants.cjs.map
+1
sdk-dist/utils/message/message.constants.cjs.map
{"version":3,"sources":["../../../src/utils/message/message.constants.ts"],"names":[],"mappings":";;;AAEO,IAAM,kBAAqB,GAAA;AAAA,EAChC,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF;AAEO,IAAM,oBAAuB,GAAA;AAAA,EAClC,SAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF","file":"message.constants.cjs","sourcesContent":["import { EmbeddedAuthProviderType, EmbeddedAuthStatus } from \"./message.types\";\n\nexport const EMBEDDED_AUTH_TYPE = [\n \"PASSKEYS\",\n \"EMAIL_N_PASSWORD\",\n \"GOOGLE\",\n \"FACEBOOK\",\n \"X\",\n \"APPLE\"\n] as const satisfies EmbeddedAuthProviderType[];\n\nexport const EMBEDDED_AUTH_STATUS = [\n \"loading\",\n \"onboarding\",\n \"authenticated\",\n \"not-authenticated\"\n] as const satisfies EmbeddedAuthStatus[];\n"]}
+4
sdk-dist/utils/message/message.constants.d.cts
declare const EMBEDDED_AUTH_TYPE: ["PASSKEYS", "EMAIL_N_PASSWORD", "GOOGLE", "FACEBOOK", "X", "APPLE"];
declare const EMBEDDED_AUTH_STATUS: ["loading", "onboarding", "authenticated", "not-authenticated"];
export { EMBEDDED_AUTH_STATUS, EMBEDDED_AUTH_TYPE };
+4
sdk-dist/utils/message/message.constants.d.ts
declare const EMBEDDED_AUTH_TYPE: ["PASSKEYS", "EMAIL_N_PASSWORD", "GOOGLE", "FACEBOOK", "X", "APPLE"];
declare const EMBEDDED_AUTH_STATUS: ["loading", "onboarding", "authenticated", "not-authenticated"];
export { EMBEDDED_AUTH_STATUS, EMBEDDED_AUTH_TYPE };
+27
sdk-dist/utils/message/message.constants.global.js
(function (exports) {
'use strict';
// src/utils/message/message.constants.ts
var EMBEDDED_AUTH_TYPE = [
"PASSKEYS",
"EMAIL_N_PASSWORD",
"GOOGLE",
"FACEBOOK",
"X",
"APPLE"
];
var EMBEDDED_AUTH_STATUS = [
"loading",
"onboarding",
"authenticated",
"not-authenticated"
];
exports.EMBEDDED_AUTH_STATUS = EMBEDDED_AUTH_STATUS;
exports.EMBEDDED_AUTH_TYPE = EMBEDDED_AUTH_TYPE;
return exports;
})({});
//# sourceMappingURL=message.constants.global.js.map
//# sourceMappingURL=message.constants.global.js.map
+1
sdk-dist/utils/message/message.constants.global.js.map
{"version":3,"sources":["../../../src/utils/message/message.constants.ts"],"names":[],"mappings":";;;;AAEO,MAAM,kBAAqB,GAAA;EAAA,EAChC,UAAA;EAAA,EACA,kBAAA;EAAA,EACA,QAAA;EAAA,EACA,UAAA;EAAA,EACA,GAAA;EAAA,EACA;EACF;AAEO,MAAM,oBAAuB,GAAA;EAAA,EAClC,SAAA;EAAA,EACA,YAAA;EAAA,EACA,eAAA;EAAA,EACA;EACF","file":"message.constants.global.js","sourcesContent":["import { EmbeddedAuthProviderType, EmbeddedAuthStatus } from \"./message.types\";\n\nexport const EMBEDDED_AUTH_TYPE = [\n \"PASSKEYS\",\n \"EMAIL_N_PASSWORD\",\n \"GOOGLE\",\n \"FACEBOOK\",\n \"X\",\n \"APPLE\"\n] as const satisfies EmbeddedAuthProviderType[];\n\nexport const EMBEDDED_AUTH_STATUS = [\n \"loading\",\n \"onboarding\",\n \"authenticated\",\n \"not-authenticated\"\n] as const satisfies EmbeddedAuthStatus[];\n"]}
+19
sdk-dist/utils/message/message.constants.js
// src/utils/message/message.constants.ts
var EMBEDDED_AUTH_TYPE = [
"PASSKEYS",
"EMAIL_N_PASSWORD",
"GOOGLE",
"FACEBOOK",
"X",
"APPLE"
];
var EMBEDDED_AUTH_STATUS = [
"loading",
"onboarding",
"authenticated",
"not-authenticated"
];
export { EMBEDDED_AUTH_STATUS, EMBEDDED_AUTH_TYPE };
//# sourceMappingURL=message.constants.js.map
//# sourceMappingURL=message.constants.js.map
+1
sdk-dist/utils/message/message.constants.js.map
{"version":3,"sources":["../../../src/utils/message/message.constants.ts"],"names":[],"mappings":";AAEO,IAAM,kBAAqB,GAAA;AAAA,EAChC,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF;AAEO,IAAM,oBAAuB,GAAA;AAAA,EAClC,SAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF","file":"message.constants.js","sourcesContent":["import { EmbeddedAuthProviderType, EmbeddedAuthStatus } from \"./message.types\";\n\nexport const EMBEDDED_AUTH_TYPE = [\n \"PASSKEYS\",\n \"EMAIL_N_PASSWORD\",\n \"GOOGLE\",\n \"FACEBOOK\",\n \"X\",\n \"APPLE\"\n] as const satisfies EmbeddedAuthProviderType[];\n\nexport const EMBEDDED_AUTH_STATUS = [\n \"loading\",\n \"onboarding\",\n \"authenticated\",\n \"not-authenticated\"\n] as const satisfies EmbeddedAuthStatus[];\n"]}
+799
sdk-dist/wander-embedded.types-cWXjiYHr.d.cts
/**
* Wander permissions
*/
type PermissionType = "ACCESS_ADDRESS" | "ACCESS_PUBLIC_KEY" | "ACCESS_ALL_ADDRESSES" | "SIGN_TRANSACTION" | "ENCRYPT" | "DECRYPT" | "SIGNATURE" | "ACCESS_ARWEAVE_CONFIG" | "DISPATCH" | "ACCESS_TOKENS";
interface Gateway {
host: string;
port: number;
protocol: string;
}
/** Injected wallet events */
interface InjectedEvents {
connect: null;
disconnect: null;
activeAddress: string;
addresses: string[];
permissions: PermissionType[];
gateway: Gateway;
}
type EmbeddedAuthProviderType = "PASSKEYS" | "EMAIL_N_PASSWORD" | "GOOGLE" | "FACEBOOK" | "X" | "APPLE";
type EmbeddedAuthStatus = "loading" | "onboarding" | "authenticated" | "not-authenticated";
interface EmbeddedUserDetails {
id: string;
email: null | string;
phone: null | string;
username: null | string;
name: null | string;
fullName: null | string;
picture: null | string;
confirmed: boolean;
emailConfirmed: boolean;
phoneConfirmed: boolean;
createdAt: Date;
}
interface IncomingAuthNativeMessageData {
authType: "NATIVE_WALLET";
authStatus: null;
userDetails: null;
}
interface IncomingAuthNoAuthMessageData {
authType: null;
authStatus: "not-authenticated";
userDetails: null;
}
interface IncomingAuthLoadingMessageData {
authType: EmbeddedAuthProviderType;
authStatus: "loading";
userDetails?: EmbeddedUserDetails;
}
interface IncomingAuthCompletedMessageData {
authType: EmbeddedAuthProviderType;
authStatus: "onboarding" | "authenticated";
userDetails: EmbeddedUserDetails;
}
type IncomingAuthMessageData = IncomingAuthNativeMessageData | IncomingAuthNoAuthMessageData | IncomingAuthLoadingMessageData | IncomingAuthCompletedMessageData;
type IncomingResizeMessageData = RouteConfig;
type IncomingBalanceMessageData = BalanceInfo;
interface IncomingRequestMessageData {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
interface BaseIncomingMessage<K extends string = string, D = void> {
id: string;
type: K;
data: D;
}
type IncomingAuthMessage = BaseIncomingMessage<"embedded_auth", IncomingAuthMessageData>;
type IncomingOpenMessage = BaseIncomingMessage<"embedded_open", void>;
type IncomingCloseMessage = BaseIncomingMessage<"embedded_close", void>;
type IncomingResizeMessage = BaseIncomingMessage<"embedded_resize", IncomingResizeMessageData>;
type IncomingBalanceMessage = BaseIncomingMessage<"embedded_balance", IncomingBalanceMessageData>;
type IncomingRequestMessage = BaseIncomingMessage<"embedded_request", IncomingRequestMessageData>;
type IncomingMessage = IncomingAuthMessage | IncomingOpenMessage | IncomingCloseMessage | IncomingResizeMessage | IncomingBalanceMessage | IncomingRequestMessage;
type IncomingMessageId = IncomingMessage["type"];
type EventMessageData = {
[K in keyof InjectedEvents]: {
name: K;
value: InjectedEvents[K];
};
}[keyof InjectedEvents];
type EventMessage = BaseIncomingMessage<"event", EventMessageData>;
type WalletSwitchMessage = BaseIncomingMessage<"switch_wallet_event", string | null>;
type OutgoingMessage = {
type: "THEME_UPDATE" | "BALANCE_CURRENCY";
payload: string;
};
/**
* Types of routes available in the Wander Embedded SDK.
*/
type RouteType =
/** Default home screen */
"default"
/** Authentication screen */
| "auth"
/** Account management screen */
| "account"
/** Settings and preferences screen */
| "settings"
/** Authorization request screen for approving transactions. */
| "auth-request";
/** Supported image extensions */
type ImageExtension = "webp" | "png";
/** Supported Image Path */
type ImgPath = `${RouteType}.${ImageExtension}`;
/** Modal layout configuration */
interface ModalLayoutConfig {
/**
* Specifies this is a modal layout type.
* @required
*/
type: "modal";
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for popup layout type.
* Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.
*/
interface PopupLayoutConfig {
/**
* Specifies this is a popup layout type.
* @required
*/
type: "popup";
/**
* Position of the popup on the screen.
* @default "bottom-right"
*/
position?: WanderEmbeddedPopupPosition;
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for sidebar layout type.
* Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.
*/
interface SidebarLayoutConfig {
/**
* Specifies this is a sidebar layout type.
* @required
*/
type: "sidebar";
/**
* Position of the sidebar on the screen.
* Determines whether the sidebar appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Fixed width in pixels
* @default 375 */
fixedWidth?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for half-screen layout type.
* Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.
*/
interface HalfLayoutConfig {
/**
* Specifies this is a half-screen layout type.
* @required
*/
type: "half";
/**
* Position of the half-screen panel.
* Determines whether the panel appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Background image URL */
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Union of all layout configurations
* A type that can be any of the supported layout types (modal, popup, sidebar, half).
*/
type LayoutConfig = ModalLayoutConfig | PopupLayoutConfig | SidebarLayoutConfig | HalfLayoutConfig;
/**
* Available layout type names
*/
type LayoutType = LayoutConfig["type"];
/**
* Array of all supported layout types
*/
declare const LAYOUT_TYPES: ["modal", "popup", "sidebar", "half"];
/** Validates if an object is a valid layout configuration
* @param obj Object to check
* @returns True if object is a valid layout configuration
*/
declare function isRouteConfig(obj: unknown): obj is LayoutConfig;
/**
* Configuration for a specific route.
* Contains layout and dimension information for a particular UI route.
*/
interface RouteConfig {
/**
* Type of the current route.
*/
routeType: RouteType;
/**
* Preferred layout type for this route.
*/
preferredLayoutType: LayoutType;
/** Content height in pixels */
height: number;
/** Content width in pixels (optional) */
width?: number;
}
type AuthState = IncomingAuthMessageData;
/** User's wallet balance information */
interface BalanceInfo {
/**
* Amount in the specified currency.
*/
amount: number | null;
/**
* Currency code.
*/
currency: Currency | null;
/**
* Formatted amount in the specified currency;
*/
formattedBalance: string;
}
interface RequestsInfo {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
/** Main configuration options for the Wander Embedded SDK */
interface WanderEmbeddedOptions {
/**
* Client ID for your App, registered on the Wander Dashboard.
* @required
*/
clientId: string;
/**
* Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and
* `button.theme`.
* Controls whether the component uses light, dark, or system-based theming.
*/
theme?: ThemeSetting;
/**
* `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser
* extension installed to use that instead of Wander Connect. This implies no authentication information will be
* available from users who use the browser extension.
*/
hideBE?: boolean;
/**
* Base URL for the Wander Embed client app.
* The URL where the Wander Embed client is hosted.
* Only change this if you're using a custom or self-hosted version of the embed client.
* @default "https://embed-dev.wander.app"
*/
baseURL?: string;
/**
* Base URL for the Wander Embed tRPC server.
* The URL where the Wander Embed API server is hosted.
* Only change this if you're using a custom or self-hosted version of the embed API.
* @default "https://embed-api-dev.wander.app"
*/
baseServerURL?: string;
/**
* Configuration options for the iframe component or an existing iframe element.
*/
iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;
/**
* Configure the button that opens the wallet UI, or set to true to use default settings.
* The button can be styled and positioned in various ways.
* @default true - Default Button is shown unless explicitly configured
*/
button?: WanderEmbeddedButtonOptions | boolean;
/**
* Callback function called when authentication state changes.
* @param userDetails User details object when signed in, or null when signed out
*/
onAuth?: (authState: AuthState) => void;
/**
* Callback function called when the wallet interface is opened.
*/
onOpen?: () => void;
/**
* Callback function called when the wallet interface is closed.
*/
onClose?: () => void;
/**
* Callback function called when the wallet interface is resized.
* @param routeConfig Current route configuration
*/
onResize?: (routeConfig: RouteConfig) => void;
/**
* Callback function called when the balance information changes.
* @param balanceInfo Current balance information including amount and currency
*/
onBalance?: (balanceInfo: BalanceInfo) => void;
/**
* Callback function called when wallet receives a request.
* @param pendingRequests Number of pending requests
*/
onRequest?: (requestsInfo: RequestsInfo) => void;
}
/** Theme variants */
type ThemeVariant =
/** Light color scheme */
"light"
/** Dark color scheme */
| "dark";
/** Theme setting options. */
type ThemeSetting = "system" | ThemeVariant;
/**
* Options for Wander Embedded components.
* Base interface for component customization options shared by iframe and button components.
* @template T The type of CSS variables available for styling the component
*/
interface WanderEmbeddedComponentOptions<T> {
/**
* ID of the component element.
*/
id?: string;
/**
* Theme setting for the component.
* Controls whether the component uses light, dark, or system-based theming.
*/
theme?: ThemeSetting;
/**
* CSS variables for styling the component.
* Can be provided as a single set of variables applied to both themes,
* or as separate light and dark theme variables.
*/
cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Custom CSS styles for the component.
* Must use proper CSS selectors due to Shadow DOM encapsulation.
*/
customStyles?: string;
}
/**
* Configuration for Wander Embedded components.
* Resolved configuration with all required fields set.
* @template T The type of CSS variables for this component
*/
interface WanderEmbeddedComponentConfig<T> extends Required<WanderEmbeddedComponentOptions<T>> {
/**
* CSS variables for both light and dark themes.
*/
cssVars: Record<ThemeVariant, T>;
}
/** Checks if CSS variables contain theme-specific settings
* @param cssVars CSS variables object
* @returns True if theme-specific
*/
declare function isThemeRecord<T>(cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>): cssVars is Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Configuration options for the iframe.
* Customizes the appearance and behavior of the Wander Embedded iframe,
* which displays the wallet UI.
*/
interface WanderEmbeddedIframeOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {
/**
* Layout configuration for different routes.
* Controls how the iframe is displayed for each route type:
* - If a single value is passed, we use it for "default", "settings" and "auth-request" routes. "auth" and "account"
* routes fall back to the default layout type (currently "modal").
* - If more than one value is set, the "default" option will be used for "default" routes as well as as fallback for
* "settings" and "auth-request" routes; the "auth" option will be used for "auth" routes as well as as fallback for
* "account" routes.
*/
routeLayout?: LayoutType | LayoutConfig | Partial<Record<RouteType, LayoutType | LayoutConfig>>;
/**
* Close Wander Embedded when clicking outside of it.
* Controls the behavior when a user clicks outside the iframe:
* - false: Will never close. The user must click the close icon.
* - true: Will always close when clicking outside.
* @default "auto"
*/
clickOutsideBehavior?: boolean;
}
/**
* Configuration for the iframe component.
*/
interface WanderEmbeddedIframeConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {
/**
* Layout configuration for all route types.
* Complete mapping of route types to their layout configuration.
*/
routeLayout: Record<RouteType, LayoutConfig>;
/**
* Behavior when clicking outside the iframe.
* How the component responds to clicks outside its boundaries.
*/
clickOutsideBehavior: boolean;
}
/**
* Position of the button on the screen.
* Determines where the button appears on the screen.
*/
type WanderEmbeddedButtonPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left" | "static";
/**
* Position of the popup on the screen.
* Determines where the popup appears on the screen.
*/
type WanderEmbeddedPopupPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
/**
* Variant of the Wander logo to display.
* Controls how the Wander logo appears on the button.
*/
type WanderEmbeddedLogoVariant = "none" | "default" | "text-color";
/**
* Configuration for balance display in the button.
* Controls which balance is displayed and in what currency.
*/
interface WanderEmbeddedBalanceOptions {
/**
* Determines which token or total balance is shown.
* @param "total" Show total balance across all tokens
* @param string Token ID to show specific token balance
* @default "total"
*/
balanceOf: "total" | string;
/**
* Determines the currency used to display the balance.
* @param "auto" Use user's selected currency from their wallet preferences
* @param string Specific token ID or currency symbol (e.g., "USD", "EUR")
* @default "auto"
*/
currency: "auto" | string;
}
/** Notification display options */
type WanderEmbeddedButtonNotifications =
/** No notifications shown */
"off"
/** Show count of pending requests */
| "counter"
/** Show indicator without count */
| "alert";
/**
* Custom labels for button text.
*/
interface WanderEmbeddedButtonLabels {
/**
* Title/tooltip to display when the button is loading.
* @default "Loading"
*/
loading: string;
/**
* Title/tooltip to display when the balance is loading.
* @default "Loading Balance"
*/
loadingBalance: string;
/**
* Title/tooltip to display when the user is authenticated, but the onboarding
* hasn't been completed.
* @default "Complete Sign Up"
*/
completeSignUp: string;
/**
* Text to display when the user is not authenticated.
* @default "Sign In"
*/
signIn: string;
/**
* Text to display when the user has request to review.
* @default "Review Requests"
*/
reviewRequests: string;
}
/**
* Configuration options for the button component.
* Customizes the appearance and behavior of the Wander Embedded button.
*/
interface WanderEmbeddedButtonOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
* @default document.body
*/
parent?: HTMLElement;
/**
* Position of the button on the screen.
* Use "static" for custom positioning via CSS.
* @default "bottom-right"
*/
position?: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
* - "none": No logo is displayed
* - "default": Standard Wander logo is displayed
* - "text-color": Logo with colored text is displayed
* @default "default"
*/
wanderLogo?: WanderEmbeddedLogoVariant;
/**
* Whether to show the button label.
* @default true
*/
label?: boolean;
/**
* Configuration for displaying balance information.
* - false: No balance is displayed
* - true: Balance is displayed
* - WanderEmbeddedBalanceOptions: Customized balance display
* @default { balanceOf: "total", currency: "auto" }
*/
balance?: boolean | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
* @default "counter"
*/
notifications?: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
* @default { signIn: "Sign in", reviewRequests: "Review requests" }
*/
i18n?: WanderEmbeddedButtonLabels;
}
/**
* Configuration for the button component.
*/
interface WanderEmbeddedButtonConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
*/
parent: HTMLElement;
/**
* Position of the button on the screen.
*/
position: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
*/
wanderLogo: WanderEmbeddedLogoVariant;
/**
* Whether to show the button label.
*/
label: boolean;
/**
* Configuration for displaying balance information.
*/
balance: false | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
*/
notifications: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
*/
i18n: WanderEmbeddedButtonLabels;
}
/**
* Button status properties that can be observed.
*/
type WanderEmbeddedButtonStatus =
/** Whether the user's wallet is connected to the application. */
"isConnected"
/** Whether the wallet UI is currently open. */
| "isOpen";
/**
* CSS variables for styling the modal/iframe component.
*/
interface WanderEmbeddedIframeCSSVars {
/**
* Background color of the modal.
*/
background: string;
/**
* Border width of the modal.
*/
borderWidth: number;
/**
* Border color of the modal.
*/
borderColor: string;
/**
* Border radius of the modal.
*/
borderRadius: number | string;
/**
* Box shadow of the modal.
*/
boxShadow: string;
/**
* Z-index of the modal.
*/
zIndex: string;
/**
* Preferred width of the modal.
*/
preferredWidth: number | string;
/**
* Preferred height of the modal.
*/
preferredHeight: number | string;
/**
* Padding inside the iframe.
*/
contentPadding: number;
/**
* Maximum width of the iframe content.
*/
contentMaxWidth: number | string;
/**
* Maximum height of the iframe content.
*/
contentMaxHeight: number | string;
/**
* Background color of the backdrop.
*/
backdropBackground: string;
/**
* Backdrop filter applied to the backdrop.
*/
backdropBackdropFilter: string;
/**
* Padding around the modal within the backdrop.
*/
backdropPadding: number | string;
/**
* Padding on mobile devices.
*/
mobilePadding: number;
/**
* Height on mobile devices.
*/
mobileHeight: string | number;
/**
* Border radius on mobile devices.
*/
mobileBorderRadius: number;
/**
* Border width on mobile devices.
*/
mobileBorderWidth: number;
/**
* Border color on mobile devices.
*/
mobileBorderColor: string;
/**
* Box shadow on mobile devices.
*/
mobileBoxShadow: string;
}
/**
* CSS variables for styling the button component.
*/
interface WanderEmbeddedButtonCSSVars {
/**
* Horizontal gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapX: number | string;
/**
* Vertical gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapY: number | string;
/**
* Gap between elements inside the button.
* @default 12
*/
gapInside: number | string;
/**
* Minimum width of the button.
* @default 0
*/
minWidth: number | string;
/**
* Minimum height of the button.
* @default 0
*/
minHeight: number | string;
/**
* Z-index of the button.
* @default "9999"
*/
zIndex: string;
/**
* Padding of the button.
* @default "12px 20px 12px 16px"
*/
padding: number | string;
/**
* Font style of the button.
* @default "16px monospace"
*/
font: string;
/**
* Background color of the button.
* @default "white" in light mode, "black" in dark mode
*/
background: string;
/**
* Text color of the button.
* @default "black" in light mode, "white" in dark mode
*/
color: string;
/**
* Border width of the button.
* @default 2
*/
borderWidth: number | string;
/**
* Border color of the button.
* @default "white" in light mode, "black" in dark mode
*/
borderColor: string;
/**
* Border radius of the button.
* @default 128
*/
borderRadius: number | string;
/**
* Box shadow of the button.
* @default "0 0 32px 0px rgba(0, 0, 0, 0.25)"
*/
boxShadow: string;
/**
* Background color of the logo.
* @default ""
*/
logoBackground: string;
/**
* Border width of the logo.
* @default ""
*/
logoBorderWidth: number | string;
/**
* Border color of the logo.
* @default ""
*/
logoBorderColor: string;
/**
* Border radius of the logo.
* @default ""
*/
logoBorderRadius: number | string;
/**
* Background color of the notifications badge.
* @default ""
*/
notificationsBackground: string;
/**
* Border width of the notifications badge.
* @default ""
*/
notificationsBorderWidth: number | string;
/**
* Border color of the notifications badge.
* @default ""
*/
notificationsBorderColor: string;
/**
* Border radius of the notifications badge.
* @default ""
*/
notificationsBorderRadius: number | string;
/**
* Box shadow of the notifications badge.
* @default ""
*/
notificationsBoxShadow: string;
/**
* Padding of the notifications badge.
* @default ""
*/
notificationsPadding: number | string;
}
/**
* Supported currency codes.
*/
type Currency = "USD" | "EUR" | "GBP" | "CNY" | "INR" | "AED" | "ARS" | "AUD" | "BDT" | "BHD" | "BMD" | "BRL" | "CAD" | "CHF" | "CLP" | "CZK" | "DKK" | "HKD" | "HUF" | "IDR" | "ILS" | "JPY" | "KRW" | "KWD" | "LKR" | "MMK" | "MXN" | "MYR" | "NGN" | "NOK" | "NZD" | "PHP" | "PKR" | "PLN" | "RUB" | "SAR" | "SEK" | "SGD" | "THB" | "TRY" | "TWD" | "UAH" | "VEF" | "VND" | "ZAR";
export { type IncomingCloseMessage as $, type AuthState as A, type BalanceInfo as B, type Currency as C, type EmbeddedAuthProviderType as D, type EmbeddedAuthStatus as E, type EmbeddedUserDetails as F, type IncomingAuthNativeMessageData as G, type HalfLayoutConfig as H, type ImgPath as I, type IncomingAuthNoAuthMessageData as J, type IncomingAuthLoadingMessageData as K, type LayoutConfig as L, type ModalLayoutConfig as M, type IncomingAuthCompletedMessageData as N, type OutgoingMessage as O, type PopupLayoutConfig as P, type IncomingAuthMessageData as Q, type RouteType as R, type SidebarLayoutConfig as S, type ThemeVariant as T, type IncomingResizeMessageData as U, type IncomingBalanceMessageData as V, type WanderEmbeddedButtonCSSVars as W, type IncomingRequestMessageData as X, type BaseIncomingMessage as Y, type IncomingAuthMessage as Z, type IncomingOpenMessage as _, type WanderEmbeddedButtonOptions as a, type IncomingResizeMessage as a0, type IncomingBalanceMessage as a1, type IncomingRequestMessage as a2, type IncomingMessageId as a3, type EventMessageData as a4, type WanderEmbeddedButtonConfig as b, type WanderEmbeddedButtonStatus as c, type WanderEmbeddedLogoVariant as d, type WanderEmbeddedButtonLabels as e, type WanderEmbeddedIframeCSSVars as f, type WanderEmbeddedIframeOptions as g, type LayoutType as h, type WanderEmbeddedIframeConfig as i, type RouteConfig as j, type EventMessage as k, type WalletSwitchMessage as l, type IncomingMessage as m, type ThemeSetting as n, type WanderEmbeddedOptions as o, type ImageExtension as p, LAYOUT_TYPES as q, isRouteConfig as r, type RequestsInfo as s, type WanderEmbeddedComponentOptions as t, type WanderEmbeddedComponentConfig as u, isThemeRecord as v, type WanderEmbeddedButtonPosition as w, type WanderEmbeddedPopupPosition as x, type WanderEmbeddedBalanceOptions as y, type WanderEmbeddedButtonNotifications as z };
+799
sdk-dist/wander-embedded.types-cWXjiYHr.d.ts
/**
* Wander permissions
*/
type PermissionType = "ACCESS_ADDRESS" | "ACCESS_PUBLIC_KEY" | "ACCESS_ALL_ADDRESSES" | "SIGN_TRANSACTION" | "ENCRYPT" | "DECRYPT" | "SIGNATURE" | "ACCESS_ARWEAVE_CONFIG" | "DISPATCH" | "ACCESS_TOKENS";
interface Gateway {
host: string;
port: number;
protocol: string;
}
/** Injected wallet events */
interface InjectedEvents {
connect: null;
disconnect: null;
activeAddress: string;
addresses: string[];
permissions: PermissionType[];
gateway: Gateway;
}
type EmbeddedAuthProviderType = "PASSKEYS" | "EMAIL_N_PASSWORD" | "GOOGLE" | "FACEBOOK" | "X" | "APPLE";
type EmbeddedAuthStatus = "loading" | "onboarding" | "authenticated" | "not-authenticated";
interface EmbeddedUserDetails {
id: string;
email: null | string;
phone: null | string;
username: null | string;
name: null | string;
fullName: null | string;
picture: null | string;
confirmed: boolean;
emailConfirmed: boolean;
phoneConfirmed: boolean;
createdAt: Date;
}
interface IncomingAuthNativeMessageData {
authType: "NATIVE_WALLET";
authStatus: null;
userDetails: null;
}
interface IncomingAuthNoAuthMessageData {
authType: null;
authStatus: "not-authenticated";
userDetails: null;
}
interface IncomingAuthLoadingMessageData {
authType: EmbeddedAuthProviderType;
authStatus: "loading";
userDetails?: EmbeddedUserDetails;
}
interface IncomingAuthCompletedMessageData {
authType: EmbeddedAuthProviderType;
authStatus: "onboarding" | "authenticated";
userDetails: EmbeddedUserDetails;
}
type IncomingAuthMessageData = IncomingAuthNativeMessageData | IncomingAuthNoAuthMessageData | IncomingAuthLoadingMessageData | IncomingAuthCompletedMessageData;
type IncomingResizeMessageData = RouteConfig;
type IncomingBalanceMessageData = BalanceInfo;
interface IncomingRequestMessageData {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
interface BaseIncomingMessage<K extends string = string, D = void> {
id: string;
type: K;
data: D;
}
type IncomingAuthMessage = BaseIncomingMessage<"embedded_auth", IncomingAuthMessageData>;
type IncomingOpenMessage = BaseIncomingMessage<"embedded_open", void>;
type IncomingCloseMessage = BaseIncomingMessage<"embedded_close", void>;
type IncomingResizeMessage = BaseIncomingMessage<"embedded_resize", IncomingResizeMessageData>;
type IncomingBalanceMessage = BaseIncomingMessage<"embedded_balance", IncomingBalanceMessageData>;
type IncomingRequestMessage = BaseIncomingMessage<"embedded_request", IncomingRequestMessageData>;
type IncomingMessage = IncomingAuthMessage | IncomingOpenMessage | IncomingCloseMessage | IncomingResizeMessage | IncomingBalanceMessage | IncomingRequestMessage;
type IncomingMessageId = IncomingMessage["type"];
type EventMessageData = {
[K in keyof InjectedEvents]: {
name: K;
value: InjectedEvents[K];
};
}[keyof InjectedEvents];
type EventMessage = BaseIncomingMessage<"event", EventMessageData>;
type WalletSwitchMessage = BaseIncomingMessage<"switch_wallet_event", string | null>;
type OutgoingMessage = {
type: "THEME_UPDATE" | "BALANCE_CURRENCY";
payload: string;
};
/**
* Types of routes available in the Wander Embedded SDK.
*/
type RouteType =
/** Default home screen */
"default"
/** Authentication screen */
| "auth"
/** Account management screen */
| "account"
/** Settings and preferences screen */
| "settings"
/** Authorization request screen for approving transactions. */
| "auth-request";
/** Supported image extensions */
type ImageExtension = "webp" | "png";
/** Supported Image Path */
type ImgPath = `${RouteType}.${ImageExtension}`;
/** Modal layout configuration */
interface ModalLayoutConfig {
/**
* Specifies this is a modal layout type.
* @required
*/
type: "modal";
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for popup layout type.
* Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.
*/
interface PopupLayoutConfig {
/**
* Specifies this is a popup layout type.
* @required
*/
type: "popup";
/**
* Position of the popup on the screen.
* @default "bottom-right"
*/
position?: WanderEmbeddedPopupPosition;
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for sidebar layout type.
* Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.
*/
interface SidebarLayoutConfig {
/**
* Specifies this is a sidebar layout type.
* @required
*/
type: "sidebar";
/**
* Position of the sidebar on the screen.
* Determines whether the sidebar appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Fixed width in pixels
* @default 375 */
fixedWidth?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for half-screen layout type.
* Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.
*/
interface HalfLayoutConfig {
/**
* Specifies this is a half-screen layout type.
* @required
*/
type: "half";
/**
* Position of the half-screen panel.
* Determines whether the panel appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Background image URL */
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Union of all layout configurations
* A type that can be any of the supported layout types (modal, popup, sidebar, half).
*/
type LayoutConfig = ModalLayoutConfig | PopupLayoutConfig | SidebarLayoutConfig | HalfLayoutConfig;
/**
* Available layout type names
*/
type LayoutType = LayoutConfig["type"];
/**
* Array of all supported layout types
*/
declare const LAYOUT_TYPES: ["modal", "popup", "sidebar", "half"];
/** Validates if an object is a valid layout configuration
* @param obj Object to check
* @returns True if object is a valid layout configuration
*/
declare function isRouteConfig(obj: unknown): obj is LayoutConfig;
/**
* Configuration for a specific route.
* Contains layout and dimension information for a particular UI route.
*/
interface RouteConfig {
/**
* Type of the current route.
*/
routeType: RouteType;
/**
* Preferred layout type for this route.
*/
preferredLayoutType: LayoutType;
/** Content height in pixels */
height: number;
/** Content width in pixels (optional) */
width?: number;
}
type AuthState = IncomingAuthMessageData;
/** User's wallet balance information */
interface BalanceInfo {
/**
* Amount in the specified currency.
*/
amount: number | null;
/**
* Currency code.
*/
currency: Currency | null;
/**
* Formatted amount in the specified currency;
*/
formattedBalance: string;
}
interface RequestsInfo {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
/** Main configuration options for the Wander Embedded SDK */
interface WanderEmbeddedOptions {
/**
* Client ID for your App, registered on the Wander Dashboard.
* @required
*/
clientId: string;
/**
* Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and
* `button.theme`.
* Controls whether the component uses light, dark, or system-based theming.
*/
theme?: ThemeSetting;
/**
* `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser
* extension installed to use that instead of Wander Connect. This implies no authentication information will be
* available from users who use the browser extension.
*/
hideBE?: boolean;
/**
* Base URL for the Wander Embed client app.
* The URL where the Wander Embed client is hosted.
* Only change this if you're using a custom or self-hosted version of the embed client.
* @default "https://embed-dev.wander.app"
*/
baseURL?: string;
/**
* Base URL for the Wander Embed tRPC server.
* The URL where the Wander Embed API server is hosted.
* Only change this if you're using a custom or self-hosted version of the embed API.
* @default "https://embed-api-dev.wander.app"
*/
baseServerURL?: string;
/**
* Configuration options for the iframe component or an existing iframe element.
*/
iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;
/**
* Configure the button that opens the wallet UI, or set to true to use default settings.
* The button can be styled and positioned in various ways.
* @default true - Default Button is shown unless explicitly configured
*/
button?: WanderEmbeddedButtonOptions | boolean;
/**
* Callback function called when authentication state changes.
* @param userDetails User details object when signed in, or null when signed out
*/
onAuth?: (authState: AuthState) => void;
/**
* Callback function called when the wallet interface is opened.
*/
onOpen?: () => void;
/**
* Callback function called when the wallet interface is closed.
*/
onClose?: () => void;
/**
* Callback function called when the wallet interface is resized.
* @param routeConfig Current route configuration
*/
onResize?: (routeConfig: RouteConfig) => void;
/**
* Callback function called when the balance information changes.
* @param balanceInfo Current balance information including amount and currency
*/
onBalance?: (balanceInfo: BalanceInfo) => void;
/**
* Callback function called when wallet receives a request.
* @param pendingRequests Number of pending requests
*/
onRequest?: (requestsInfo: RequestsInfo) => void;
}
/** Theme variants */
type ThemeVariant =
/** Light color scheme */
"light"
/** Dark color scheme */
| "dark";
/** Theme setting options. */
type ThemeSetting = "system" | ThemeVariant;
/**
* Options for Wander Embedded components.
* Base interface for component customization options shared by iframe and button components.
* @template T The type of CSS variables available for styling the component
*/
interface WanderEmbeddedComponentOptions<T> {
/**
* ID of the component element.
*/
id?: string;
/**
* Theme setting for the component.
* Controls whether the component uses light, dark, or system-based theming.
*/
theme?: ThemeSetting;
/**
* CSS variables for styling the component.
* Can be provided as a single set of variables applied to both themes,
* or as separate light and dark theme variables.
*/
cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Custom CSS styles for the component.
* Must use proper CSS selectors due to Shadow DOM encapsulation.
*/
customStyles?: string;
}
/**
* Configuration for Wander Embedded components.
* Resolved configuration with all required fields set.
* @template T The type of CSS variables for this component
*/
interface WanderEmbeddedComponentConfig<T> extends Required<WanderEmbeddedComponentOptions<T>> {
/**
* CSS variables for both light and dark themes.
*/
cssVars: Record<ThemeVariant, T>;
}
/** Checks if CSS variables contain theme-specific settings
* @param cssVars CSS variables object
* @returns True if theme-specific
*/
declare function isThemeRecord<T>(cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>): cssVars is Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Configuration options for the iframe.
* Customizes the appearance and behavior of the Wander Embedded iframe,
* which displays the wallet UI.
*/
interface WanderEmbeddedIframeOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {
/**
* Layout configuration for different routes.
* Controls how the iframe is displayed for each route type:
* - If a single value is passed, we use it for "default", "settings" and "auth-request" routes. "auth" and "account"
* routes fall back to the default layout type (currently "modal").
* - If more than one value is set, the "default" option will be used for "default" routes as well as as fallback for
* "settings" and "auth-request" routes; the "auth" option will be used for "auth" routes as well as as fallback for
* "account" routes.
*/
routeLayout?: LayoutType | LayoutConfig | Partial<Record<RouteType, LayoutType | LayoutConfig>>;
/**
* Close Wander Embedded when clicking outside of it.
* Controls the behavior when a user clicks outside the iframe:
* - false: Will never close. The user must click the close icon.
* - true: Will always close when clicking outside.
* @default "auto"
*/
clickOutsideBehavior?: boolean;
}
/**
* Configuration for the iframe component.
*/
interface WanderEmbeddedIframeConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {
/**
* Layout configuration for all route types.
* Complete mapping of route types to their layout configuration.
*/
routeLayout: Record<RouteType, LayoutConfig>;
/**
* Behavior when clicking outside the iframe.
* How the component responds to clicks outside its boundaries.
*/
clickOutsideBehavior: boolean;
}
/**
* Position of the button on the screen.
* Determines where the button appears on the screen.
*/
type WanderEmbeddedButtonPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left" | "static";
/**
* Position of the popup on the screen.
* Determines where the popup appears on the screen.
*/
type WanderEmbeddedPopupPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
/**
* Variant of the Wander logo to display.
* Controls how the Wander logo appears on the button.
*/
type WanderEmbeddedLogoVariant = "none" | "default" | "text-color";
/**
* Configuration for balance display in the button.
* Controls which balance is displayed and in what currency.
*/
interface WanderEmbeddedBalanceOptions {
/**
* Determines which token or total balance is shown.
* @param "total" Show total balance across all tokens
* @param string Token ID to show specific token balance
* @default "total"
*/
balanceOf: "total" | string;
/**
* Determines the currency used to display the balance.
* @param "auto" Use user's selected currency from their wallet preferences
* @param string Specific token ID or currency symbol (e.g., "USD", "EUR")
* @default "auto"
*/
currency: "auto" | string;
}
/** Notification display options */
type WanderEmbeddedButtonNotifications =
/** No notifications shown */
"off"
/** Show count of pending requests */
| "counter"
/** Show indicator without count */
| "alert";
/**
* Custom labels for button text.
*/
interface WanderEmbeddedButtonLabels {
/**
* Title/tooltip to display when the button is loading.
* @default "Loading"
*/
loading: string;
/**
* Title/tooltip to display when the balance is loading.
* @default "Loading Balance"
*/
loadingBalance: string;
/**
* Title/tooltip to display when the user is authenticated, but the onboarding
* hasn't been completed.
* @default "Complete Sign Up"
*/
completeSignUp: string;
/**
* Text to display when the user is not authenticated.
* @default "Sign In"
*/
signIn: string;
/**
* Text to display when the user has request to review.
* @default "Review Requests"
*/
reviewRequests: string;
}
/**
* Configuration options for the button component.
* Customizes the appearance and behavior of the Wander Embedded button.
*/
interface WanderEmbeddedButtonOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
* @default document.body
*/
parent?: HTMLElement;
/**
* Position of the button on the screen.
* Use "static" for custom positioning via CSS.
* @default "bottom-right"
*/
position?: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
* - "none": No logo is displayed
* - "default": Standard Wander logo is displayed
* - "text-color": Logo with colored text is displayed
* @default "default"
*/
wanderLogo?: WanderEmbeddedLogoVariant;
/**
* Whether to show the button label.
* @default true
*/
label?: boolean;
/**
* Configuration for displaying balance information.
* - false: No balance is displayed
* - true: Balance is displayed
* - WanderEmbeddedBalanceOptions: Customized balance display
* @default { balanceOf: "total", currency: "auto" }
*/
balance?: boolean | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
* @default "counter"
*/
notifications?: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
* @default { signIn: "Sign in", reviewRequests: "Review requests" }
*/
i18n?: WanderEmbeddedButtonLabels;
}
/**
* Configuration for the button component.
*/
interface WanderEmbeddedButtonConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
*/
parent: HTMLElement;
/**
* Position of the button on the screen.
*/
position: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
*/
wanderLogo: WanderEmbeddedLogoVariant;
/**
* Whether to show the button label.
*/
label: boolean;
/**
* Configuration for displaying balance information.
*/
balance: false | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
*/
notifications: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
*/
i18n: WanderEmbeddedButtonLabels;
}
/**
* Button status properties that can be observed.
*/
type WanderEmbeddedButtonStatus =
/** Whether the user's wallet is connected to the application. */
"isConnected"
/** Whether the wallet UI is currently open. */
| "isOpen";
/**
* CSS variables for styling the modal/iframe component.
*/
interface WanderEmbeddedIframeCSSVars {
/**
* Background color of the modal.
*/
background: string;
/**
* Border width of the modal.
*/
borderWidth: number;
/**
* Border color of the modal.
*/
borderColor: string;
/**
* Border radius of the modal.
*/
borderRadius: number | string;
/**
* Box shadow of the modal.
*/
boxShadow: string;
/**
* Z-index of the modal.
*/
zIndex: string;
/**
* Preferred width of the modal.
*/
preferredWidth: number | string;
/**
* Preferred height of the modal.
*/
preferredHeight: number | string;
/**
* Padding inside the iframe.
*/
contentPadding: number;
/**
* Maximum width of the iframe content.
*/
contentMaxWidth: number | string;
/**
* Maximum height of the iframe content.
*/
contentMaxHeight: number | string;
/**
* Background color of the backdrop.
*/
backdropBackground: string;
/**
* Backdrop filter applied to the backdrop.
*/
backdropBackdropFilter: string;
/**
* Padding around the modal within the backdrop.
*/
backdropPadding: number | string;
/**
* Padding on mobile devices.
*/
mobilePadding: number;
/**
* Height on mobile devices.
*/
mobileHeight: string | number;
/**
* Border radius on mobile devices.
*/
mobileBorderRadius: number;
/**
* Border width on mobile devices.
*/
mobileBorderWidth: number;
/**
* Border color on mobile devices.
*/
mobileBorderColor: string;
/**
* Box shadow on mobile devices.
*/
mobileBoxShadow: string;
}
/**
* CSS variables for styling the button component.
*/
interface WanderEmbeddedButtonCSSVars {
/**
* Horizontal gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapX: number | string;
/**
* Vertical gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapY: number | string;
/**
* Gap between elements inside the button.
* @default 12
*/
gapInside: number | string;
/**
* Minimum width of the button.
* @default 0
*/
minWidth: number | string;
/**
* Minimum height of the button.
* @default 0
*/
minHeight: number | string;
/**
* Z-index of the button.
* @default "9999"
*/
zIndex: string;
/**
* Padding of the button.
* @default "12px 20px 12px 16px"
*/
padding: number | string;
/**
* Font style of the button.
* @default "16px monospace"
*/
font: string;
/**
* Background color of the button.
* @default "white" in light mode, "black" in dark mode
*/
background: string;
/**
* Text color of the button.
* @default "black" in light mode, "white" in dark mode
*/
color: string;
/**
* Border width of the button.
* @default 2
*/
borderWidth: number | string;
/**
* Border color of the button.
* @default "white" in light mode, "black" in dark mode
*/
borderColor: string;
/**
* Border radius of the button.
* @default 128
*/
borderRadius: number | string;
/**
* Box shadow of the button.
* @default "0 0 32px 0px rgba(0, 0, 0, 0.25)"
*/
boxShadow: string;
/**
* Background color of the logo.
* @default ""
*/
logoBackground: string;
/**
* Border width of the logo.
* @default ""
*/
logoBorderWidth: number | string;
/**
* Border color of the logo.
* @default ""
*/
logoBorderColor: string;
/**
* Border radius of the logo.
* @default ""
*/
logoBorderRadius: number | string;
/**
* Background color of the notifications badge.
* @default ""
*/
notificationsBackground: string;
/**
* Border width of the notifications badge.
* @default ""
*/
notificationsBorderWidth: number | string;
/**
* Border color of the notifications badge.
* @default ""
*/
notificationsBorderColor: string;
/**
* Border radius of the notifications badge.
* @default ""
*/
notificationsBorderRadius: number | string;
/**
* Box shadow of the notifications badge.
* @default ""
*/
notificationsBoxShadow: string;
/**
* Padding of the notifications badge.
* @default ""
*/
notificationsPadding: number | string;
}
/**
* Supported currency codes.
*/
type Currency = "USD" | "EUR" | "GBP" | "CNY" | "INR" | "AED" | "ARS" | "AUD" | "BDT" | "BHD" | "BMD" | "BRL" | "CAD" | "CHF" | "CLP" | "CZK" | "DKK" | "HKD" | "HUF" | "IDR" | "ILS" | "JPY" | "KRW" | "KWD" | "LKR" | "MMK" | "MXN" | "MYR" | "NGN" | "NOK" | "NZD" | "PHP" | "PKR" | "PLN" | "RUB" | "SAR" | "SEK" | "SGD" | "THB" | "TRY" | "TWD" | "UAH" | "VEF" | "VND" | "ZAR";
export { type IncomingCloseMessage as $, type AuthState as A, type BalanceInfo as B, type Currency as C, type EmbeddedAuthProviderType as D, type EmbeddedAuthStatus as E, type EmbeddedUserDetails as F, type IncomingAuthNativeMessageData as G, type HalfLayoutConfig as H, type ImgPath as I, type IncomingAuthNoAuthMessageData as J, type IncomingAuthLoadingMessageData as K, type LayoutConfig as L, type ModalLayoutConfig as M, type IncomingAuthCompletedMessageData as N, type OutgoingMessage as O, type PopupLayoutConfig as P, type IncomingAuthMessageData as Q, type RouteType as R, type SidebarLayoutConfig as S, type ThemeVariant as T, type IncomingResizeMessageData as U, type IncomingBalanceMessageData as V, type WanderEmbeddedButtonCSSVars as W, type IncomingRequestMessageData as X, type BaseIncomingMessage as Y, type IncomingAuthMessage as Z, type IncomingOpenMessage as _, type WanderEmbeddedButtonOptions as a, type IncomingResizeMessage as a0, type IncomingBalanceMessage as a1, type IncomingRequestMessage as a2, type IncomingMessageId as a3, type EventMessageData as a4, type WanderEmbeddedButtonConfig as b, type WanderEmbeddedButtonStatus as c, type WanderEmbeddedLogoVariant as d, type WanderEmbeddedButtonLabels as e, type WanderEmbeddedIframeCSSVars as f, type WanderEmbeddedIframeOptions as g, type LayoutType as h, type WanderEmbeddedIframeConfig as i, type RouteConfig as j, type EventMessage as k, type WalletSwitchMessage as l, type IncomingMessage as m, type ThemeSetting as n, type WanderEmbeddedOptions as o, type ImageExtension as p, LAYOUT_TYPES as q, isRouteConfig as r, type RequestsInfo as s, type WanderEmbeddedComponentOptions as t, type WanderEmbeddedComponentConfig as u, isThemeRecord as v, type WanderEmbeddedButtonPosition as w, type WanderEmbeddedPopupPosition as x, type WanderEmbeddedBalanceOptions as y, type WanderEmbeddedButtonNotifications as z };
+3
-2
package.json
{
"name": "@wanderapp/embed-sdk",
"version": "0.0.6",
"version": "0.0.7",
"description": "Wander Embedded SDK.",

@@ -27,3 +27,4 @@ "author": "wanderapp",

"dev": "tsup --watch",
"clean": "rm -rf sdk-dist"
"clean": "rm -rf sdk-dist",
"prepare": "yarn build"
},

@@ -30,0 +31,0 @@ "devDependencies": {

+11
-9
README.md

@@ -134,3 +134,2 @@ # Wander Embedded SDK

- `.indicator` - Targets the connection status indicator
- `.dappLogo` - Targets the dApp logo image
- `.notifications` - Targets the notifications badge

@@ -183,8 +182,2 @@

/* Target the dApp logo */
.dappLogo {
width: 18px;
height: 18px;
}
/* Target the notifications badge */

@@ -200,8 +193,17 @@ .notifications {

The button element has several CSS classes that are added based on its state:
The button element has a `data-variant` HTML attribute you can use for styling:
- `.isAuthenticated` - Added when the user is authenticated
- `[data-variant="loading|onboarding|authenticated|not-authenticated"]`
As well as some CSS classes that are added based on its state:
- `.isConnected` - Added when the wallet is connected
- `.isOpen` - Added when the wallet interface is open
Additionally, the button's `.label` and `.balance` elements also have some modifiers:
- `.label.isLoading`
- `.balance.isLoading`
- `.balance.isHidden`
You can use these classes in your `customStyles` to style different states:

@@ -208,0 +210,0 @@ 

+134
-81
sdk-dist/components/button/wander-button.component.cjs

@@ -5,10 +5,8 @@ 'use strict';

// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/components/button/wander-button.template.ts
var getWanderButtonTemplateContent = ({
wanderLogo,
i18n,
showLabel,
showBalance,
customStyles,

@@ -19,10 +17,12 @@ cssVariableKeys = []

:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
:host {
${cssVariableKeys.map((cssVariableKey) => {

@@ -88,15 +88,36 @@ return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;

.label:empty {
display: none;
.label {
}
.label:not(:empty) + .balance {
.label[hidden],
.label:empty:not(.isLoading) {
display: none;
}
.label.isLoading {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance {
filter: blur(0px);
transition: filter linear 300ms;
display: none;
}
.label:empty:not(.isLoading) + .balance:not([hidden]) {
display: block;
}
.balance:empty {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance.isHidden {

@@ -107,3 +128,2 @@ filter: blur(6px);

.indicator,
.dappLogo,
.notifications {

@@ -114,3 +134,2 @@ position: absolute;

border-radius: 32px;
border: var(--borderWidth) solid var(--borderColor);
transition: transform linear 150ms, background linear 150ms;

@@ -128,9 +147,4 @@ pointer-events: none;

.dappLogo {
width: 22px;
height: 22px;
z-index: 9;
background: var(--background);
transform: translate(50%, 50%) scale(0);
padding: 3px;
.indicator.isLoading {
animation: blink-indicator 3s infinite;
}

@@ -140,2 +154,3 @@

background: red;
color: white;
font-size: 12px;

@@ -154,9 +169,6 @@ font-weight: bold;

.isConnected + .indicator {
/* TODO: Add CSS var */
background: #56C980;
}
.isConnected ~ .dappLogo[src] {
transform: translate(50%, 50%) scale(1);
}
.notifications:empty {

@@ -178,2 +190,20 @@ transform: translate(50%, 50%) scale(0);

@keyframes blink-opacity {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.25;
}
}
@keyframes blink-indicator {
0%, 100% {
background: #CCC;
}
50% {
background: #56C980;
}
}
${customStyles}

@@ -236,49 +266,58 @@ </style>

<span class="label"></span>
<span class="balance"></span>
<span class="label" ${showLabel ? "" : "hidden"}></span>
<span class="balance" ${showBalance ? "" : "hidden"} title="${i18n.loadingBalance}"></span>
</button>
<span class="indicator"></span>
<img hidden class="dappLogo" />
<span class="notifications"></span>
`;
// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = tsDeepmerge.merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = tsDeepmerge.merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = tsDeepmerge.merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = tsDeepmerge.merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
// src/components/button/wander-button.component.ts
var _WanderButton = class _WanderButton {
constructor(options = {}) {
// State:
this.variant = null;
this.status = {};
const cssVars = options.cssVars || {};
let cssVarsLight = _WanderButton.DEFAULT_LIGHT_CSS_VARS;
let cssVarsDark = _WanderButton.DEFAULT_DARK_CSS_VARS;
if (Object.keys(cssVars).length > 0) {
if (isThemeRecord(cssVars)) {
cssVarsLight = tsDeepmerge.merge(
cssVars?.light || {},
_WanderButton.DEFAULT_LIGHT_CSS_VARS
);
cssVarsDark = tsDeepmerge.merge(
cssVars?.dark || {},
_WanderButton.DEFAULT_DARK_CSS_VARS
);
} else if (options.theme !== "dark") {
cssVarsLight = tsDeepmerge.merge(
cssVars || {},
_WanderButton.DEFAULT_LIGHT_CSS_VARS
);
} else {
cssVarsDark = tsDeepmerge.merge(
cssVars || {},
_WanderButton.DEFAULT_DARK_CSS_VARS
);
}
}
const cssVars = mergeCSSVariablesOption(
options.cssVars,
options.theme,
_WanderButton.DEFAULT_LIGHT_CSS_VARS,
_WanderButton.DEFAULT_DARK_CSS_VARS
);
this.config = {

@@ -288,10 +327,6 @@ parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,

theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,
cssVars: {
light: cssVarsLight,
dark: cssVarsDark
},
cssVars,
customStyles: options.customStyles || _WanderButton.DEFAULT_CONFIG.customStyles,
position: options.position || _WanderButton.DEFAULT_CONFIG.position,
wanderLogo: options.wanderLogo || _WanderButton.DEFAULT_CONFIG.wanderLogo,
dappLogoSrc: options.dappLogoSrc || _WanderButton.DEFAULT_CONFIG.dappLogoSrc,
label: options.label ?? _WanderButton.DEFAULT_CONFIG.label,

@@ -313,3 +348,2 @@ balance: options.balance === false ? false : {

this.indicator = elements.indicator;
this.dappLogo = elements.dappLogo;
this.notifications = elements.notifications;

@@ -320,3 +354,2 @@ }

host.id = config.id;
host.setAttribute("data-theme", config.theme);
const shadow = host.attachShadow({ mode: "open" });

@@ -326,2 +359,5 @@ const template = document.createElement("template");

wanderLogo: config.wanderLogo,
i18n: config.i18n,
showLabel: config.label,
showBalance: !!config.balance,
customStyles: config.customStyles,

@@ -337,7 +373,6 @@ // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:

const indicator = shadow.querySelector(".indicator");
const dappLogo = shadow.querySelector(".dappLogo");
const notifications = shadow.querySelector(
".notifications"
);
if (!button || !wanderLogo || !label || !balance || !indicator || !dappLogo || !notifications)
if (!button || !wanderLogo || !label || !balance || !indicator || !notifications)
throw new Error("Missing elements");

@@ -356,3 +391,3 @@ host.style.position = "fixed";

});
addCSSVariables(host, config.cssVars.light);
addCSSVariables(host, config.cssVars.light, "Light");
addCSSVariables(host, config.cssVars.dark, "Dark");

@@ -363,3 +398,2 @@ label.textContent = config.i18n.signIn;

}
dappLogo.src = config.dappLogoSrc;
return {

@@ -372,3 +406,2 @@ host,

indicator,
dappLogo,
notifications

@@ -386,3 +419,2 @@ };

indicator: this.indicator,
dappLogo: this.dappLogo,
notifications: this.notifications

@@ -392,2 +424,5 @@ };

setBalance(balanceInfo) {
if (this.balance.getAttribute("hidden")) return;
this.balance.textContent = balanceInfo.formattedBalance;
this.balance.title = "";
if (balanceInfo.amount === null) {

@@ -398,21 +433,41 @@ this.balance.classList.add("isHidden");

}
this.balance.textContent = balanceInfo.formattedBalance;
}
setNotifications(pendingRequests) {
const { label, notifications, i18n } = this.config;
const { notifications, i18n } = this.config;
if (notifications === "off") return;
if (pendingRequests > 0) {
this.notifications.textContent = notifications === "counter" ? `${pendingRequests}` : "!";
this.label.textContent = label ? i18n.reviewRequests : "";
this.label.textContent = i18n.reviewRequests;
} else {
this.notifications.textContent = "";
this.label.textContent = label ? this.status.isAuthenticated ? "" : i18n.signIn : "";
this.label.textContent = "";
}
}
setVariant(variant) {
this.variant = variant;
this.button.dataset.variant = variant;
if (variant === "loading") {
this.indicator.classList.add("isLoading");
this.label.classList.add("isLoading");
this.label.textContent = "";
this.label.title = this.config.i18n.loading;
} else {
this.indicator.classList.remove("isLoading");
this.label.classList.remove("isLoading");
if (variant === "onboarding") {
this.label.textContent = "Wander";
this.label.title = this.config.i18n.completeSignUp;
} else if (variant === "authenticated") {
this.label.textContent = "";
this.label.title = "";
} else {
this.label.textContent = this.config.i18n.signIn;
this.label.title = "";
this.balance.textContent = "";
}
}
}
setStatus(status) {
this.status[status] = true;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = "";
}
}

@@ -422,5 +477,2 @@ unsetStatus(status) {

this.button.classList.remove(status);
if (status === "isAuthenticated") {
this.label.textContent = this.config.label ? this.config.i18n.signIn : "";
}
}

@@ -441,3 +493,2 @@ destroy() {

font: "16px monospace",
// Button (button, affected by :hover & :focus):
background: "white",

@@ -482,3 +533,2 @@ color: "black",

_WanderButton.DEFAULT_CONFIG = {
parent: document.body,
id: "wanderEmbeddedButtonHost",

@@ -491,5 +541,5 @@ theme: "system",

customStyles: "",
parent: document.body,
position: "bottom-right",
wanderLogo: "default",
dappLogoSrc: "",
label: true,

@@ -502,2 +552,5 @@ balance: {

i18n: {
loading: "Loading",
loadingBalance: "Loading Balance",
completeSignUp: "Complete Sign Up",
signIn: "Sign in",

@@ -504,0 +557,0 @@ reviewRequests: "Review requests"

+1
-1
sdk-dist/components/button/wander-button.component.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/components/button/wander-button.template.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/button/wander-button.component.ts"],"names":["merge"],"mappings":"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","file":"wander-button.component.cjs","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { WanderEmbeddedLogoVariant } from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n :root[data-theme=\"dark\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n\n @media (prefers-color-scheme: dark) {\n :root[data-theme=\"system\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .dappLogo,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n border: var(--borderWidth) solid var(--borderColor);\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .dappLogo {\n width: 22px;\n height: 22px;\n z-index: 9;\n background: var(--background);\n transform: translate(50%, 50%) scale(0);\n padding: 3px;\n }\n\n .notifications {\n background: red;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n background: #56C980;\n }\n\n .isConnected ~ .dappLogo[src] {\n transform: translate(50%, 50%) scale(1);\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\"></span>\n <span class=\"balance\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<img hidden class=\"dappLogo\" />\n<span class=\"notifications\"></span>\n`;\n","export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n","import {\n BalanceInfo,\n isThemeRecord,\n WanderEmbeddedButtonConfig,\n WanderEmbeddedButtonCSSVars,\n WanderEmbeddedButtonOptions,\n WanderEmbeddedButtonStatus\n} from \"../../wander-embedded.types\";\nimport { getWanderButtonTemplateContent } from \"./wander-button.template\";\nimport { addCSSVariables } from \"../../utils/styles/styles.utils\";\nimport { merge } from \"ts-deepmerge\";\n\nexport class WanderButton {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n // Button (button):\n gapX: 16,\n gapY: 16,\n gapInside: 12,\n minWidth: 0,\n minHeight: 0,\n zIndex: \"9999\",\n padding: \"12px 20px 12px 16px\",\n font: \"16px monospace\",\n\n // Button (button, affected by :hover & :focus):\n background: \"white\",\n color: \"black\",\n borderWidth: 2,\n borderColor: \"white\",\n borderRadius: 128,\n boxShadow: \"0 0 32px 0px rgba(0, 0, 0, 0.25)\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n ...WanderButton.DEFAULT_LIGHT_CSS_VARS,\n\n // Button (button, affected by :hover & :focus):\n background: \"black\",\n color: \"white\",\n borderColor: \"black\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_CONFIG = {\n parent: document.body,\n id: \"wanderEmbeddedButtonHost\",\n theme: \"system\",\n cssVars: {\n light: WanderButton.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderButton.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n position: \"bottom-right\",\n wanderLogo: \"default\",\n dappLogoSrc: \"\",\n label: true,\n balance: {\n balanceOf: \"total\",\n currency: \"auto\"\n },\n notifications: \"counter\",\n i18n: {\n signIn: \"Sign in\",\n reviewRequests: \"Review requests\"\n }\n } as const satisfies WanderEmbeddedButtonConfig;\n\n // Elements:\n private parent: HTMLElement;\n private host: HTMLDivElement;\n private button: HTMLButtonElement;\n private wanderLogo: SVGElement;\n private label: HTMLSpanElement;\n private balance: HTMLSpanElement;\n private indicator: HTMLSpanElement;\n private dappLogo: HTMLImageElement;\n private notifications: HTMLSpanElement;\n\n // Config (options):\n private config: WanderEmbeddedButtonConfig;\n\n // State:\n private status: Partial<Record<WanderEmbeddedButtonStatus, boolean>> = {};\n\n constructor(options: WanderEmbeddedButtonOptions = {}) {\n const cssVars = options.cssVars || {};\n\n let cssVarsLight: WanderEmbeddedButtonCSSVars =\n WanderButton.DEFAULT_LIGHT_CSS_VARS;\n let cssVarsDark: WanderEmbeddedButtonCSSVars =\n WanderButton.DEFAULT_DARK_CSS_VARS;\n\n if (Object.keys(cssVars).length > 0) {\n if (isThemeRecord(cssVars)) {\n cssVarsLight = merge(\n cssVars?.light || {},\n WanderButton.DEFAULT_LIGHT_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n cssVarsDark = merge(\n cssVars?.dark || {},\n WanderButton.DEFAULT_DARK_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n } else if (options.theme !== \"dark\") {\n cssVarsLight = merge(\n cssVars || {},\n WanderButton.DEFAULT_LIGHT_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n } else {\n cssVarsDark = merge(\n cssVars || {},\n WanderButton.DEFAULT_DARK_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n }\n }\n\n this.config = {\n parent: options.parent || WanderButton.DEFAULT_CONFIG.parent,\n id: options.id || WanderButton.DEFAULT_CONFIG.id,\n theme: options.theme || WanderButton.DEFAULT_CONFIG.theme,\n cssVars: {\n light: cssVarsLight,\n dark: cssVarsDark\n },\n customStyles:\n options.customStyles || WanderButton.DEFAULT_CONFIG.customStyles,\n position: options.position || WanderButton.DEFAULT_CONFIG.position,\n wanderLogo: options.wanderLogo || WanderButton.DEFAULT_CONFIG.wanderLogo,\n dappLogoSrc:\n options.dappLogoSrc || WanderButton.DEFAULT_CONFIG.dappLogoSrc,\n label: options.label ?? WanderButton.DEFAULT_CONFIG.label,\n balance:\n options.balance === false\n ? false\n : {\n balanceOf:\n (options.balance === true\n ? null\n : options.balance?.balanceOf) ??\n WanderButton.DEFAULT_CONFIG.balance.balanceOf,\n currency:\n (options.balance === true ? null : options.balance?.currency) ??\n WanderButton.DEFAULT_CONFIG.balance.currency\n },\n notifications:\n options.notifications || WanderButton.DEFAULT_CONFIG.notifications,\n i18n: options.i18n || WanderButton.DEFAULT_CONFIG.i18n\n };\n\n const elements = WanderButton.initializeButton(this.config);\n\n this.parent = this.config.parent;\n this.host = elements.host;\n this.button = elements.button;\n this.wanderLogo = elements.wanderLogo;\n this.label = elements.label;\n this.balance = elements.balance;\n this.indicator = elements.indicator;\n this.dappLogo = elements.dappLogo;\n this.notifications = elements.notifications;\n }\n\n static initializeButton(config: WanderEmbeddedButtonConfig) {\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n host.setAttribute(\"data-theme\", config.theme);\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderButtonTemplateContent({\n wanderLogo: config.wanderLogo,\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderButton.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const button = shadow.querySelector(\".button\") as HTMLButtonElement;\n const wanderLogo = shadow.querySelector(\".wanderLogo\") as SVGElement;\n const label = shadow.querySelector(\".label\") as HTMLSpanElement;\n const balance = shadow.querySelector(\".balance\") as HTMLSpanElement;\n const indicator = shadow.querySelector(\".indicator\") as HTMLSpanElement;\n const dappLogo = shadow.querySelector(\".dappLogo\") as HTMLImageElement;\n const notifications = shadow.querySelector(\n \".notifications\"\n ) as HTMLSpanElement;\n\n if (\n !button ||\n !wanderLogo ||\n !label ||\n !balance ||\n !indicator ||\n !dappLogo ||\n !notifications\n )\n throw new Error(\"Missing elements\");\n\n host.style.position = \"fixed\";\n host.style.zIndex = \"var(--zIndex)\";\n\n if (config.position !== \"static\") {\n const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\n }\n host.style.transition = \"opacity linear 150ms\";\n host.style.opacity = \"0\";\n\n setTimeout(() => {\n host.style.opacity = \"1\";\n });\n\n addCSSVariables(host, config.cssVars.light);\n addCSSVariables(host, config.cssVars.dark, \"Dark\");\n\n label.textContent = config.i18n.signIn;\n\n if (config.balance === false) {\n balance.setAttribute(\"hidden\", \"true\");\n }\n\n dappLogo.src = config.dappLogoSrc;\n\n return {\n host,\n button,\n wanderLogo,\n label,\n balance,\n indicator,\n dappLogo,\n notifications\n };\n }\n\n getElements() {\n return {\n parent: this.parent,\n host: this.host,\n button: this.button,\n wanderLogo: this.wanderLogo,\n label: this.label,\n balance: this.balance,\n indicator: this.indicator,\n dappLogo: this.dappLogo,\n notifications: this.notifications\n };\n }\n\n setBalance(balanceInfo: BalanceInfo) {\n if (balanceInfo.amount === null) {\n this.balance.classList.add(\"isHidden\");\n } else {\n this.balance.classList.remove(\"isHidden\");\n }\n\n this.balance.textContent = balanceInfo.formattedBalance;\n }\n\n setNotifications(pendingRequests: number) {\n const { label, notifications, i18n } = this.config;\n\n if (notifications === \"off\") return;\n\n if (pendingRequests > 0) {\n this.notifications.textContent =\n notifications === \"counter\" ? `${pendingRequests}` : \"!\";\n this.label.textContent = label ? i18n.reviewRequests : \"\";\n } else {\n this.notifications.textContent = \"\";\n this.label.textContent = label\n ? this.status.isAuthenticated\n ? \"\"\n : i18n.signIn\n : \"\";\n }\n }\n\n setStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = true;\n this.button.classList.add(status);\n\n if (status === \"isAuthenticated\") {\n this.label.textContent = \"\";\n }\n }\n\n unsetStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = false;\n this.button.classList.remove(status);\n\n if (status === \"isAuthenticated\") {\n this.label.textContent = this.config.label ? this.config.i18n.signIn : \"\";\n }\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
{"version":3,"sources":["../../../src/components/button/wander-button.template.ts","../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/button/wander-button.component.ts"],"names":["merge"],"mappings":"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","file":"wander-button.component.cjs","sourcesContent":["import {\n WanderEmbeddedButtonLabels,\n WanderEmbeddedLogoVariant\n} from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n i18n: WanderEmbeddedButtonLabels;\n showLabel: boolean;\n showBalance: boolean;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n i18n,\n showLabel,\n showBalance,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label {\n }\n\n .label[hidden],\n .label:empty:not(.isLoading) {\n display: none;\n }\n\n .label.isLoading {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n display: none;\n }\n\n .label:empty:not(.isLoading) + .balance:not([hidden]) {\n display: block;\n }\n\n .balance:empty {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .indicator.isLoading {\n animation: blink-indicator 3s infinite;\n }\n\n .notifications {\n background: red;\n color: white;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n /* TODO: Add CSS var */\n background: #56C980;\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n @keyframes blink-opacity {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.25;\n }\n }\n\n @keyframes blink-indicator {\n 0%, 100% {\n background: #CCC;\n }\n 50% {\n background: #56C980;\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\" ${showLabel ? \"\" : \"hidden\"}></span>\n <span class=\"balance\" ${showBalance ? \"\" : \"hidden\"} title=\"${\n i18n.loadingBalance\n}\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<span class=\"notifications\"></span>\n`;\n","import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n","import {\n BalanceInfo,\n WanderEmbeddedButtonConfig,\n WanderEmbeddedButtonCSSVars,\n WanderEmbeddedButtonOptions,\n WanderEmbeddedButtonStatus\n} from \"../../wander-embedded.types\";\nimport { getWanderButtonTemplateContent } from \"./wander-button.template\";\nimport {\n addCSSVariables,\n mergeCSSVariablesOption\n} from \"../../utils/styles/styles.utils\";\nimport { EmbeddedAuthStatus } from \"../../utils/message/message.types\";\n\nexport class WanderButton {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n // Button (button):\n gapX: 16,\n gapY: 16,\n gapInside: 12,\n minWidth: 0,\n minHeight: 0,\n zIndex: \"9999\",\n padding: \"12px 20px 12px 16px\",\n font: \"16px monospace\",\n background: \"white\",\n color: \"black\",\n borderWidth: 2,\n borderColor: \"white\",\n borderRadius: 128,\n boxShadow: \"0 0 32px 0px rgba(0, 0, 0, 0.25)\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n ...WanderButton.DEFAULT_LIGHT_CSS_VARS,\n\n // Button (button, affected by :hover & :focus):\n background: \"black\",\n color: \"white\",\n borderColor: \"black\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_CONFIG = {\n id: \"wanderEmbeddedButtonHost\",\n theme: \"system\",\n cssVars: {\n light: WanderButton.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderButton.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n parent: document.body,\n position: \"bottom-right\",\n wanderLogo: \"default\",\n label: true,\n balance: {\n balanceOf: \"total\",\n currency: \"auto\"\n },\n notifications: \"counter\",\n i18n: {\n loading: \"Loading\",\n loadingBalance: \"Loading Balance\",\n completeSignUp: \"Complete Sign Up\",\n signIn: \"Sign in\",\n reviewRequests: \"Review requests\"\n }\n } as const satisfies WanderEmbeddedButtonConfig;\n\n // Elements:\n private parent: HTMLElement;\n private host: HTMLDivElement;\n private button: HTMLButtonElement;\n private wanderLogo: SVGElement;\n private label: HTMLSpanElement;\n private balance: HTMLSpanElement;\n private indicator: HTMLSpanElement;\n private notifications: HTMLSpanElement;\n\n // Config (options):\n private config: WanderEmbeddedButtonConfig;\n\n // State:\n private variant: null | EmbeddedAuthStatus = null;\n private status: Partial<Record<WanderEmbeddedButtonStatus, boolean>> = {};\n\n constructor(options: WanderEmbeddedButtonOptions = {}) {\n const cssVars = mergeCSSVariablesOption(\n options.cssVars,\n options.theme,\n WanderButton.DEFAULT_LIGHT_CSS_VARS,\n WanderButton.DEFAULT_DARK_CSS_VARS\n );\n\n this.config = {\n parent: options.parent || WanderButton.DEFAULT_CONFIG.parent,\n id: options.id || WanderButton.DEFAULT_CONFIG.id,\n theme: options.theme || WanderButton.DEFAULT_CONFIG.theme,\n cssVars,\n customStyles:\n options.customStyles || WanderButton.DEFAULT_CONFIG.customStyles,\n position: options.position || WanderButton.DEFAULT_CONFIG.position,\n wanderLogo: options.wanderLogo || WanderButton.DEFAULT_CONFIG.wanderLogo,\n label: options.label ?? WanderButton.DEFAULT_CONFIG.label,\n balance:\n options.balance === false\n ? false\n : {\n balanceOf:\n (options.balance === true\n ? null\n : options.balance?.balanceOf) ??\n WanderButton.DEFAULT_CONFIG.balance.balanceOf,\n currency:\n (options.balance === true ? null : options.balance?.currency) ??\n WanderButton.DEFAULT_CONFIG.balance.currency\n },\n notifications:\n options.notifications || WanderButton.DEFAULT_CONFIG.notifications,\n i18n: options.i18n || WanderButton.DEFAULT_CONFIG.i18n\n };\n\n const elements = WanderButton.initializeButton(this.config);\n\n this.parent = this.config.parent;\n this.host = elements.host;\n this.button = elements.button;\n this.wanderLogo = elements.wanderLogo;\n this.label = elements.label;\n this.balance = elements.balance;\n this.indicator = elements.indicator;\n this.notifications = elements.notifications;\n }\n\n static initializeButton(config: WanderEmbeddedButtonConfig) {\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderButtonTemplateContent({\n wanderLogo: config.wanderLogo,\n i18n: config.i18n,\n showLabel: config.label,\n showBalance: !!config.balance,\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderButton.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const button = shadow.querySelector(\".button\") as HTMLButtonElement;\n const wanderLogo = shadow.querySelector(\".wanderLogo\") as SVGElement;\n const label = shadow.querySelector(\".label\") as HTMLSpanElement;\n const balance = shadow.querySelector(\".balance\") as HTMLSpanElement;\n const indicator = shadow.querySelector(\".indicator\") as HTMLSpanElement;\n const notifications = shadow.querySelector(\n \".notifications\"\n ) as HTMLSpanElement;\n\n if (\n !button ||\n !wanderLogo ||\n !label ||\n !balance ||\n !indicator ||\n !notifications\n )\n throw new Error(\"Missing elements\");\n\n host.style.position = \"fixed\";\n host.style.zIndex = \"var(--zIndex)\";\n\n if (config.position !== \"static\") {\n const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\n }\n\n host.style.transition = \"opacity linear 150ms\";\n host.style.opacity = \"0\";\n\n setTimeout(() => {\n host.style.opacity = \"1\";\n });\n\n addCSSVariables(host, config.cssVars.light, \"Light\");\n addCSSVariables(host, config.cssVars.dark, \"Dark\");\n\n label.textContent = config.i18n.signIn;\n\n if (config.balance === false) {\n balance.setAttribute(\"hidden\", \"true\");\n }\n\n return {\n host,\n button,\n wanderLogo,\n label,\n balance,\n indicator,\n notifications\n };\n }\n\n getElements() {\n return {\n parent: this.parent,\n host: this.host,\n button: this.button,\n wanderLogo: this.wanderLogo,\n label: this.label,\n balance: this.balance,\n indicator: this.indicator,\n notifications: this.notifications\n };\n }\n\n setBalance(balanceInfo: BalanceInfo) {\n if (this.balance.getAttribute(\"hidden\")) return;\n\n this.balance.textContent = balanceInfo.formattedBalance;\n this.balance.title = \"\";\n\n if (balanceInfo.amount === null) {\n this.balance.classList.add(\"isHidden\");\n } else {\n this.balance.classList.remove(\"isHidden\");\n }\n }\n\n setNotifications(pendingRequests: number) {\n const { notifications, i18n } = this.config;\n\n if (notifications === \"off\") return;\n\n if (pendingRequests > 0) {\n this.notifications.textContent =\n notifications === \"counter\" ? `${pendingRequests}` : \"!\";\n this.label.textContent = i18n.reviewRequests;\n } else {\n this.notifications.textContent = \"\";\n this.label.textContent = \"\";\n }\n }\n\n setVariant(variant: EmbeddedAuthStatus) {\n this.variant = variant;\n this.button.dataset.variant = variant;\n\n if (variant === \"loading\") {\n this.indicator.classList.add(\"isLoading\");\n this.label.classList.add(\"isLoading\");\n this.label.textContent = \"\";\n this.label.title = this.config.i18n.loading;\n } else {\n this.indicator.classList.remove(\"isLoading\");\n this.label.classList.remove(\"isLoading\");\n\n if (variant === \"onboarding\") {\n this.label.textContent = \"Wander\";\n this.label.title = this.config.i18n.completeSignUp;\n } else if (variant === \"authenticated\") {\n this.label.textContent = \"\";\n this.label.title = \"\";\n } else {\n this.label.textContent = this.config.i18n.signIn;\n this.label.title = \"\";\n this.balance.textContent = \"\";\n }\n }\n }\n\n setStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = true;\n this.button.classList.add(status);\n }\n\n unsetStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = false;\n this.button.classList.remove(status);\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
+7
-6
sdk-dist/components/button/wander-button.component.d.cts

@@ -1,2 +0,2 @@

import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-DZt7tGOM.cjs';
import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, E as EmbeddedAuthStatus, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-cWXjiYHr.cjs';

@@ -7,3 +7,2 @@ declare class WanderButton {

static DEFAULT_CONFIG: {
readonly parent: HTMLElement;
readonly id: "wanderEmbeddedButtonHost";

@@ -16,5 +15,5 @@ readonly theme: "system";

readonly customStyles: "";
readonly parent: HTMLElement;
readonly position: "bottom-right";
readonly wanderLogo: "default";
readonly dappLogoSrc: "";
readonly label: true;

@@ -27,2 +26,5 @@ readonly balance: {

readonly i18n: {
readonly loading: "Loading";
readonly loadingBalance: "Loading Balance";
readonly completeSignUp: "Complete Sign Up";
readonly signIn: "Sign in";

@@ -39,5 +41,5 @@ readonly reviewRequests: "Review requests";

private indicator;
private dappLogo;
private notifications;
private config;
private variant;
private status;

@@ -52,3 +54,2 @@ constructor(options?: WanderEmbeddedButtonOptions);

indicator: HTMLSpanElement;
dappLogo: HTMLImageElement;
notifications: HTMLSpanElement;

@@ -64,3 +65,2 @@ };

indicator: HTMLSpanElement;
dappLogo: HTMLImageElement;
notifications: HTMLSpanElement;

@@ -70,2 +70,3 @@ };

setNotifications(pendingRequests: number): void;
setVariant(variant: EmbeddedAuthStatus): void;
setStatus(status: WanderEmbeddedButtonStatus): void;

@@ -72,0 +73,0 @@ unsetStatus(status: WanderEmbeddedButtonStatus): void;

+7
-6
sdk-dist/components/button/wander-button.component.d.ts

@@ -1,2 +0,2 @@

import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-DZt7tGOM.js';
import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, E as EmbeddedAuthStatus, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-cWXjiYHr.js';

@@ -7,3 +7,2 @@ declare class WanderButton {

static DEFAULT_CONFIG: {
readonly parent: HTMLElement;
readonly id: "wanderEmbeddedButtonHost";

@@ -16,5 +15,5 @@ readonly theme: "system";

readonly customStyles: "";
readonly parent: HTMLElement;
readonly position: "bottom-right";
readonly wanderLogo: "default";
readonly dappLogoSrc: "";
readonly label: true;

@@ -27,2 +26,5 @@ readonly balance: {

readonly i18n: {
readonly loading: "Loading";
readonly loadingBalance: "Loading Balance";
readonly completeSignUp: "Complete Sign Up";
readonly signIn: "Sign in";

@@ -39,5 +41,5 @@ readonly reviewRequests: "Review requests";

private indicator;
private dappLogo;
private notifications;
private config;
private variant;
private status;

@@ -52,3 +54,2 @@ constructor(options?: WanderEmbeddedButtonOptions);

indicator: HTMLSpanElement;
dappLogo: HTMLImageElement;
notifications: HTMLSpanElement;

@@ -64,3 +65,2 @@ };

indicator: HTMLSpanElement;
dappLogo: HTMLImageElement;
notifications: HTMLSpanElement;

@@ -70,2 +70,3 @@ };

setNotifications(pendingRequests: number): void;
setVariant(variant: EmbeddedAuthStatus): void;
setStatus(status: WanderEmbeddedButtonStatus): void;

@@ -72,0 +73,0 @@ unsetStatus(status: WanderEmbeddedButtonStatus): void;

+140
-89
sdk-dist/components/button/wander-button.component.global.js
(function (exports) {
'use strict';
// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/components/button/wander-button.template.ts
var getWanderButtonTemplateContent = ({
wanderLogo,
i18n,
showLabel,
showBalance,
customStyles,

@@ -17,10 +15,12 @@ cssVariableKeys = []

:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
:host {
${cssVariableKeys.map((cssVariableKey) => {

@@ -86,15 +86,36 @@ return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;

.label:empty {
display: none;
.label {
}
.label:not(:empty) + .balance {
.label[hidden],
.label:empty:not(.isLoading) {
display: none;
}
.label.isLoading {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance {
filter: blur(0px);
transition: filter linear 300ms;
display: none;
}
.label:empty:not(.isLoading) + .balance:not([hidden]) {
display: block;
}
.balance:empty {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance.isHidden {

@@ -105,3 +126,2 @@ filter: blur(6px);

.indicator,
.dappLogo,
.notifications {

@@ -112,3 +132,2 @@ position: absolute;

border-radius: 32px;
border: var(--borderWidth) solid var(--borderColor);
transition: transform linear 150ms, background linear 150ms;

@@ -126,9 +145,4 @@ pointer-events: none;

.dappLogo {
width: 22px;
height: 22px;
z-index: 9;
background: var(--background);
transform: translate(50%, 50%) scale(0);
padding: 3px;
.indicator.isLoading {
animation: blink-indicator 3s infinite;
}

@@ -138,2 +152,3 @@

background: red;
color: white;
font-size: 12px;

@@ -152,9 +167,6 @@ font-weight: bold;

.isConnected + .indicator {
/* TODO: Add CSS var */
background: #56C980;
}
.isConnected ~ .dappLogo[src] {
transform: translate(50%, 50%) scale(1);
}
.notifications:empty {

@@ -176,2 +188,20 @@ transform: translate(50%, 50%) scale(0);

@keyframes blink-opacity {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.25;
}
}
@keyframes blink-indicator {
0%, 100% {
background: #CCC;
}
50% {
background: #56C980;
}
}
${customStyles}

@@ -234,21 +264,10 @@ </style>

<span class="label"></span>
<span class="balance"></span>
<span class="label" ${showLabel ? "" : "hidden"}></span>
<span class="balance" ${showBalance ? "" : "hidden"} title="${i18n.loadingBalance}"></span>
</button>
<span class="indicator"></span>
<img hidden class="dappLogo" />
<span class="notifications"></span>
`;
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
}
}
// node_modules/.pnpm/ts-deepmerge@7.0.2/node_modules/ts-deepmerge/esm/index.js

@@ -296,2 +315,38 @@ var isObject = (obj) => {

// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
// src/components/button/wander-button.component.ts

@@ -301,28 +356,10 @@ var _WanderButton = class _WanderButton {

// State:
this.variant = null;
this.status = {};
const cssVars = options.cssVars || {};
let cssVarsLight = _WanderButton.DEFAULT_LIGHT_CSS_VARS;
let cssVarsDark = _WanderButton.DEFAULT_DARK_CSS_VARS;
if (Object.keys(cssVars).length > 0) {
if (isThemeRecord(cssVars)) {
cssVarsLight = merge(
cssVars?.light || {},
_WanderButton.DEFAULT_LIGHT_CSS_VARS
);
cssVarsDark = merge(
cssVars?.dark || {},
_WanderButton.DEFAULT_DARK_CSS_VARS
);
} else if (options.theme !== "dark") {
cssVarsLight = merge(
cssVars || {},
_WanderButton.DEFAULT_LIGHT_CSS_VARS
);
} else {
cssVarsDark = merge(
cssVars || {},
_WanderButton.DEFAULT_DARK_CSS_VARS
);
}
}
const cssVars = mergeCSSVariablesOption(
options.cssVars,
options.theme,
_WanderButton.DEFAULT_LIGHT_CSS_VARS,
_WanderButton.DEFAULT_DARK_CSS_VARS
);
this.config = {

@@ -332,10 +369,6 @@ parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,

theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,
cssVars: {
light: cssVarsLight,
dark: cssVarsDark
},
cssVars,
customStyles: options.customStyles || _WanderButton.DEFAULT_CONFIG.customStyles,
position: options.position || _WanderButton.DEFAULT_CONFIG.position,
wanderLogo: options.wanderLogo || _WanderButton.DEFAULT_CONFIG.wanderLogo,
dappLogoSrc: options.dappLogoSrc || _WanderButton.DEFAULT_CONFIG.dappLogoSrc,
label: options.label ?? _WanderButton.DEFAULT_CONFIG.label,

@@ -357,3 +390,2 @@ balance: options.balance === false ? false : {

this.indicator = elements.indicator;
this.dappLogo = elements.dappLogo;
this.notifications = elements.notifications;

@@ -364,3 +396,2 @@ }

host.id = config.id;
host.setAttribute("data-theme", config.theme);
const shadow = host.attachShadow({ mode: "open" });

@@ -370,2 +401,5 @@ const template = document.createElement("template");

wanderLogo: config.wanderLogo,
i18n: config.i18n,
showLabel: config.label,
showBalance: !!config.balance,
customStyles: config.customStyles,

@@ -381,7 +415,6 @@ // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:

const indicator = shadow.querySelector(".indicator");
const dappLogo = shadow.querySelector(".dappLogo");
const notifications = shadow.querySelector(
".notifications"
);
if (!button || !wanderLogo || !label || !balance || !indicator || !dappLogo || !notifications)
if (!button || !wanderLogo || !label || !balance || !indicator || !notifications)
throw new Error("Missing elements");

@@ -400,3 +433,3 @@ host.style.position = "fixed";

});
addCSSVariables(host, config.cssVars.light);
addCSSVariables(host, config.cssVars.light, "Light");
addCSSVariables(host, config.cssVars.dark, "Dark");

@@ -407,3 +440,2 @@ label.textContent = config.i18n.signIn;

}
dappLogo.src = config.dappLogoSrc;
return {

@@ -416,3 +448,2 @@ host,

indicator,
dappLogo,
notifications

@@ -430,3 +461,2 @@ };

indicator: this.indicator,
dappLogo: this.dappLogo,
notifications: this.notifications

@@ -436,2 +466,5 @@ };

setBalance(balanceInfo) {
if (this.balance.getAttribute("hidden")) return;
this.balance.textContent = balanceInfo.formattedBalance;
this.balance.title = "";
if (balanceInfo.amount === null) {

@@ -442,21 +475,41 @@ this.balance.classList.add("isHidden");

}
this.balance.textContent = balanceInfo.formattedBalance;
}
setNotifications(pendingRequests) {
const { label, notifications, i18n } = this.config;
const { notifications, i18n } = this.config;
if (notifications === "off") return;
if (pendingRequests > 0) {
this.notifications.textContent = notifications === "counter" ? `${pendingRequests}` : "!";
this.label.textContent = label ? i18n.reviewRequests : "";
this.label.textContent = i18n.reviewRequests;
} else {
this.notifications.textContent = "";
this.label.textContent = label ? this.status.isAuthenticated ? "" : i18n.signIn : "";
this.label.textContent = "";
}
}
setVariant(variant) {
this.variant = variant;
this.button.dataset.variant = variant;
if (variant === "loading") {
this.indicator.classList.add("isLoading");
this.label.classList.add("isLoading");
this.label.textContent = "";
this.label.title = this.config.i18n.loading;
} else {
this.indicator.classList.remove("isLoading");
this.label.classList.remove("isLoading");
if (variant === "onboarding") {
this.label.textContent = "Wander";
this.label.title = this.config.i18n.completeSignUp;
} else if (variant === "authenticated") {
this.label.textContent = "";
this.label.title = "";
} else {
this.label.textContent = this.config.i18n.signIn;
this.label.title = "";
this.balance.textContent = "";
}
}
}
setStatus(status) {
this.status[status] = true;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = "";
}
}

@@ -466,5 +519,2 @@ unsetStatus(status) {

this.button.classList.remove(status);
if (status === "isAuthenticated") {
this.label.textContent = this.config.label ? this.config.i18n.signIn : "";
}
}

@@ -485,3 +535,2 @@ destroy() {

font: "16px monospace",
// Button (button, affected by :hover & :focus):
background: "white",

@@ -526,3 +575,2 @@ color: "black",

_WanderButton.DEFAULT_CONFIG = {
parent: document.body,
id: "wanderEmbeddedButtonHost",

@@ -535,5 +583,5 @@ theme: "system",

customStyles: "",
parent: document.body,
position: "bottom-right",
wanderLogo: "default",
dappLogoSrc: "",
label: true,

@@ -546,2 +594,5 @@ balance: {

i18n: {
loading: "Loading",
loadingBalance: "Loading Balance",
completeSignUp: "Complete Sign Up",
signIn: "Sign in",

@@ -548,0 +599,0 @@ reviewRequests: "Review requests"

+1
-1
sdk-dist/component...n/wander-button.component.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/components/button/wander-button.template.ts","../../../src/utils/styles/styles.utils.ts","../../../node_modules/.pnpm/ts-deepmerge@7.0.2/node_modules/ts-deepmerge/esm/index.js","../../../src/components/button/wander-button.component.ts"],"names":[],"mappings":"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","file":"wander-button.component.global.js","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { WanderEmbeddedLogoVariant } from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n :root[data-theme=\"dark\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n\n @media (prefers-color-scheme: dark) {\n :root[data-theme=\"system\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .dappLogo,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n border: var(--borderWidth) solid var(--borderColor);\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .dappLogo {\n width: 22px;\n height: 22px;\n z-index: 9;\n background: var(--background);\n transform: translate(50%, 50%) scale(0);\n padding: 3px;\n }\n\n .notifications {\n background: red;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n background: #56C980;\n }\n\n .isConnected ~ .dappLogo[src] {\n transform: translate(50%, 50%) scale(1);\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\"></span>\n <span class=\"balance\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<img hidden class=\"dappLogo\" />\n<span class=\"notifications\"></span>\n`;\n","export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n","// istanbul ignore next\nconst isObject = (obj) => {\n if (typeof obj === \"object\" && obj !== null) {\n if (typeof Object.getPrototypeOf === \"function\") {\n const prototype = Object.getPrototypeOf(obj);\n return prototype === Object.prototype || prototype === null;\n }\n return Object.prototype.toString.call(obj) === \"[object Object]\";\n }\n return false;\n};\nexport const merge = (...objects) => objects.reduce((result, current) => {\n if (Array.isArray(current)) {\n throw new TypeError(\"Arguments provided to ts-deepmerge must be objects, not arrays.\");\n }\n Object.keys(current).forEach((key) => {\n if ([\"__proto__\", \"constructor\", \"prototype\"].includes(key)) {\n return;\n }\n if (Array.isArray(result[key]) && Array.isArray(current[key])) {\n result[key] = merge.options.mergeArrays\n ? merge.options.uniqueArrayItems\n ? Array.from(new Set(result[key].concat(current[key])))\n : [...result[key], ...current[key]]\n : current[key];\n }\n else if (isObject(result[key]) && isObject(current[key])) {\n result[key] = merge(result[key], current[key]);\n }\n else {\n result[key] =\n current[key] === undefined\n ? merge.options.allowUndefinedOverrides\n ? current[key]\n : result[key]\n : current[key];\n }\n });\n return result;\n}, {});\nconst defaultOptions = {\n allowUndefinedOverrides: true,\n mergeArrays: true,\n uniqueArrayItems: true,\n};\nmerge.options = defaultOptions;\nmerge.withOptions = (options, ...objects) => {\n merge.options = Object.assign(Object.assign({}, defaultOptions), options);\n const result = merge(...objects);\n merge.options = defaultOptions;\n return result;\n};\n","import {\n BalanceInfo,\n isThemeRecord,\n WanderEmbeddedButtonConfig,\n WanderEmbeddedButtonCSSVars,\n WanderEmbeddedButtonOptions,\n WanderEmbeddedButtonStatus\n} from \"../../wander-embedded.types\";\nimport { getWanderButtonTemplateContent } from \"./wander-button.template\";\nimport { addCSSVariables } from \"../../utils/styles/styles.utils\";\nimport { merge } from \"ts-deepmerge\";\n\nexport class WanderButton {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n // Button (button):\n gapX: 16,\n gapY: 16,\n gapInside: 12,\n minWidth: 0,\n minHeight: 0,\n zIndex: \"9999\",\n padding: \"12px 20px 12px 16px\",\n font: \"16px monospace\",\n\n // Button (button, affected by :hover & :focus):\n background: \"white\",\n color: \"black\",\n borderWidth: 2,\n borderColor: \"white\",\n borderRadius: 128,\n boxShadow: \"0 0 32px 0px rgba(0, 0, 0, 0.25)\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n ...WanderButton.DEFAULT_LIGHT_CSS_VARS,\n\n // Button (button, affected by :hover & :focus):\n background: \"black\",\n color: \"white\",\n borderColor: \"black\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_CONFIG = {\n parent: document.body,\n id: \"wanderEmbeddedButtonHost\",\n theme: \"system\",\n cssVars: {\n light: WanderButton.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderButton.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n position: \"bottom-right\",\n wanderLogo: \"default\",\n dappLogoSrc: \"\",\n label: true,\n balance: {\n balanceOf: \"total\",\n currency: \"auto\"\n },\n notifications: \"counter\",\n i18n: {\n signIn: \"Sign in\",\n reviewRequests: \"Review requests\"\n }\n } as const satisfies WanderEmbeddedButtonConfig;\n\n // Elements:\n private parent: HTMLElement;\n private host: HTMLDivElement;\n private button: HTMLButtonElement;\n private wanderLogo: SVGElement;\n private label: HTMLSpanElement;\n private balance: HTMLSpanElement;\n private indicator: HTMLSpanElement;\n private dappLogo: HTMLImageElement;\n private notifications: HTMLSpanElement;\n\n // Config (options):\n private config: WanderEmbeddedButtonConfig;\n\n // State:\n private status: Partial<Record<WanderEmbeddedButtonStatus, boolean>> = {};\n\n constructor(options: WanderEmbeddedButtonOptions = {}) {\n const cssVars = options.cssVars || {};\n\n let cssVarsLight: WanderEmbeddedButtonCSSVars =\n WanderButton.DEFAULT_LIGHT_CSS_VARS;\n let cssVarsDark: WanderEmbeddedButtonCSSVars =\n WanderButton.DEFAULT_DARK_CSS_VARS;\n\n if (Object.keys(cssVars).length > 0) {\n if (isThemeRecord(cssVars)) {\n cssVarsLight = merge(\n cssVars?.light || {},\n WanderButton.DEFAULT_LIGHT_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n cssVarsDark = merge(\n cssVars?.dark || {},\n WanderButton.DEFAULT_DARK_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n } else if (options.theme !== \"dark\") {\n cssVarsLight = merge(\n cssVars || {},\n WanderButton.DEFAULT_LIGHT_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n } else {\n cssVarsDark = merge(\n cssVars || {},\n WanderButton.DEFAULT_DARK_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n }\n }\n\n this.config = {\n parent: options.parent || WanderButton.DEFAULT_CONFIG.parent,\n id: options.id || WanderButton.DEFAULT_CONFIG.id,\n theme: options.theme || WanderButton.DEFAULT_CONFIG.theme,\n cssVars: {\n light: cssVarsLight,\n dark: cssVarsDark\n },\n customStyles:\n options.customStyles || WanderButton.DEFAULT_CONFIG.customStyles,\n position: options.position || WanderButton.DEFAULT_CONFIG.position,\n wanderLogo: options.wanderLogo || WanderButton.DEFAULT_CONFIG.wanderLogo,\n dappLogoSrc:\n options.dappLogoSrc || WanderButton.DEFAULT_CONFIG.dappLogoSrc,\n label: options.label ?? WanderButton.DEFAULT_CONFIG.label,\n balance:\n options.balance === false\n ? false\n : {\n balanceOf:\n (options.balance === true\n ? null\n : options.balance?.balanceOf) ??\n WanderButton.DEFAULT_CONFIG.balance.balanceOf,\n currency:\n (options.balance === true ? null : options.balance?.currency) ??\n WanderButton.DEFAULT_CONFIG.balance.currency\n },\n notifications:\n options.notifications || WanderButton.DEFAULT_CONFIG.notifications,\n i18n: options.i18n || WanderButton.DEFAULT_CONFIG.i18n\n };\n\n const elements = WanderButton.initializeButton(this.config);\n\n this.parent = this.config.parent;\n this.host = elements.host;\n this.button = elements.button;\n this.wanderLogo = elements.wanderLogo;\n this.label = elements.label;\n this.balance = elements.balance;\n this.indicator = elements.indicator;\n this.dappLogo = elements.dappLogo;\n this.notifications = elements.notifications;\n }\n\n static initializeButton(config: WanderEmbeddedButtonConfig) {\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n host.setAttribute(\"data-theme\", config.theme);\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderButtonTemplateContent({\n wanderLogo: config.wanderLogo,\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderButton.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const button = shadow.querySelector(\".button\") as HTMLButtonElement;\n const wanderLogo = shadow.querySelector(\".wanderLogo\") as SVGElement;\n const label = shadow.querySelector(\".label\") as HTMLSpanElement;\n const balance = shadow.querySelector(\".balance\") as HTMLSpanElement;\n const indicator = shadow.querySelector(\".indicator\") as HTMLSpanElement;\n const dappLogo = shadow.querySelector(\".dappLogo\") as HTMLImageElement;\n const notifications = shadow.querySelector(\n \".notifications\"\n ) as HTMLSpanElement;\n\n if (\n !button ||\n !wanderLogo ||\n !label ||\n !balance ||\n !indicator ||\n !dappLogo ||\n !notifications\n )\n throw new Error(\"Missing elements\");\n\n host.style.position = \"fixed\";\n host.style.zIndex = \"var(--zIndex)\";\n\n if (config.position !== \"static\") {\n const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\n }\n host.style.transition = \"opacity linear 150ms\";\n host.style.opacity = \"0\";\n\n setTimeout(() => {\n host.style.opacity = \"1\";\n });\n\n addCSSVariables(host, config.cssVars.light);\n addCSSVariables(host, config.cssVars.dark, \"Dark\");\n\n label.textContent = config.i18n.signIn;\n\n if (config.balance === false) {\n balance.setAttribute(\"hidden\", \"true\");\n }\n\n dappLogo.src = config.dappLogoSrc;\n\n return {\n host,\n button,\n wanderLogo,\n label,\n balance,\n indicator,\n dappLogo,\n notifications\n };\n }\n\n getElements() {\n return {\n parent: this.parent,\n host: this.host,\n button: this.button,\n wanderLogo: this.wanderLogo,\n label: this.label,\n balance: this.balance,\n indicator: this.indicator,\n dappLogo: this.dappLogo,\n notifications: this.notifications\n };\n }\n\n setBalance(balanceInfo: BalanceInfo) {\n if (balanceInfo.amount === null) {\n this.balance.classList.add(\"isHidden\");\n } else {\n this.balance.classList.remove(\"isHidden\");\n }\n\n this.balance.textContent = balanceInfo.formattedBalance;\n }\n\n setNotifications(pendingRequests: number) {\n const { label, notifications, i18n } = this.config;\n\n if (notifications === \"off\") return;\n\n if (pendingRequests > 0) {\n this.notifications.textContent =\n notifications === \"counter\" ? `${pendingRequests}` : \"!\";\n this.label.textContent = label ? i18n.reviewRequests : \"\";\n } else {\n this.notifications.textContent = \"\";\n this.label.textContent = label\n ? this.status.isAuthenticated\n ? \"\"\n : i18n.signIn\n : \"\";\n }\n }\n\n setStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = true;\n this.button.classList.add(status);\n\n if (status === \"isAuthenticated\") {\n this.label.textContent = \"\";\n }\n }\n\n unsetStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = false;\n this.button.classList.remove(status);\n\n if (status === \"isAuthenticated\") {\n this.label.textContent = this.config.label ? this.config.i18n.signIn : \"\";\n }\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
{"version":3,"sources":["../../../src/components/button/wander-button.template.ts","../../../node_modules/.pnpm/ts-deepmerge@7.0.2/node_modules/ts-deepmerge/esm/index.js","../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/button/wander-button.component.ts"],"names":[],"mappings":"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","file":"wander-button.component.global.js","sourcesContent":["import {\n WanderEmbeddedButtonLabels,\n WanderEmbeddedLogoVariant\n} from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n i18n: WanderEmbeddedButtonLabels;\n showLabel: boolean;\n showBalance: boolean;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n i18n,\n showLabel,\n showBalance,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label {\n }\n\n .label[hidden],\n .label:empty:not(.isLoading) {\n display: none;\n }\n\n .label.isLoading {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n display: none;\n }\n\n .label:empty:not(.isLoading) + .balance:not([hidden]) {\n display: block;\n }\n\n .balance:empty {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .indicator.isLoading {\n animation: blink-indicator 3s infinite;\n }\n\n .notifications {\n background: red;\n color: white;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n /* TODO: Add CSS var */\n background: #56C980;\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n @keyframes blink-opacity {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.25;\n }\n }\n\n @keyframes blink-indicator {\n 0%, 100% {\n background: #CCC;\n }\n 50% {\n background: #56C980;\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\" ${showLabel ? \"\" : \"hidden\"}></span>\n <span class=\"balance\" ${showBalance ? \"\" : \"hidden\"} title=\"${\n i18n.loadingBalance\n}\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<span class=\"notifications\"></span>\n`;\n","// istanbul ignore next\nconst isObject = (obj) => {\n if (typeof obj === \"object\" && obj !== null) {\n if (typeof Object.getPrototypeOf === \"function\") {\n const prototype = Object.getPrototypeOf(obj);\n return prototype === Object.prototype || prototype === null;\n }\n return Object.prototype.toString.call(obj) === \"[object Object]\";\n }\n return false;\n};\nexport const merge = (...objects) => objects.reduce((result, current) => {\n if (Array.isArray(current)) {\n throw new TypeError(\"Arguments provided to ts-deepmerge must be objects, not arrays.\");\n }\n Object.keys(current).forEach((key) => {\n if ([\"__proto__\", \"constructor\", \"prototype\"].includes(key)) {\n return;\n }\n if (Array.isArray(result[key]) && Array.isArray(current[key])) {\n result[key] = merge.options.mergeArrays\n ? merge.options.uniqueArrayItems\n ? Array.from(new Set(result[key].concat(current[key])))\n : [...result[key], ...current[key]]\n : current[key];\n }\n else if (isObject(result[key]) && isObject(current[key])) {\n result[key] = merge(result[key], current[key]);\n }\n else {\n result[key] =\n current[key] === undefined\n ? merge.options.allowUndefinedOverrides\n ? current[key]\n : result[key]\n : current[key];\n }\n });\n return result;\n}, {});\nconst defaultOptions = {\n allowUndefinedOverrides: true,\n mergeArrays: true,\n uniqueArrayItems: true,\n};\nmerge.options = defaultOptions;\nmerge.withOptions = (options, ...objects) => {\n merge.options = Object.assign(Object.assign({}, defaultOptions), options);\n const result = merge(...objects);\n merge.options = defaultOptions;\n return result;\n};\n","import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n","import {\n BalanceInfo,\n WanderEmbeddedButtonConfig,\n WanderEmbeddedButtonCSSVars,\n WanderEmbeddedButtonOptions,\n WanderEmbeddedButtonStatus\n} from \"../../wander-embedded.types\";\nimport { getWanderButtonTemplateContent } from \"./wander-button.template\";\nimport {\n addCSSVariables,\n mergeCSSVariablesOption\n} from \"../../utils/styles/styles.utils\";\nimport { EmbeddedAuthStatus } from \"../../utils/message/message.types\";\n\nexport class WanderButton {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n // Button (button):\n gapX: 16,\n gapY: 16,\n gapInside: 12,\n minWidth: 0,\n minHeight: 0,\n zIndex: \"9999\",\n padding: \"12px 20px 12px 16px\",\n font: \"16px monospace\",\n background: \"white\",\n color: \"black\",\n borderWidth: 2,\n borderColor: \"white\",\n borderRadius: 128,\n boxShadow: \"0 0 32px 0px rgba(0, 0, 0, 0.25)\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n ...WanderButton.DEFAULT_LIGHT_CSS_VARS,\n\n // Button (button, affected by :hover & :focus):\n background: \"black\",\n color: \"white\",\n borderColor: \"black\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_CONFIG = {\n id: \"wanderEmbeddedButtonHost\",\n theme: \"system\",\n cssVars: {\n light: WanderButton.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderButton.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n parent: document.body,\n position: \"bottom-right\",\n wanderLogo: \"default\",\n label: true,\n balance: {\n balanceOf: \"total\",\n currency: \"auto\"\n },\n notifications: \"counter\",\n i18n: {\n loading: \"Loading\",\n loadingBalance: \"Loading Balance\",\n completeSignUp: \"Complete Sign Up\",\n signIn: \"Sign in\",\n reviewRequests: \"Review requests\"\n }\n } as const satisfies WanderEmbeddedButtonConfig;\n\n // Elements:\n private parent: HTMLElement;\n private host: HTMLDivElement;\n private button: HTMLButtonElement;\n private wanderLogo: SVGElement;\n private label: HTMLSpanElement;\n private balance: HTMLSpanElement;\n private indicator: HTMLSpanElement;\n private notifications: HTMLSpanElement;\n\n // Config (options):\n private config: WanderEmbeddedButtonConfig;\n\n // State:\n private variant: null | EmbeddedAuthStatus = null;\n private status: Partial<Record<WanderEmbeddedButtonStatus, boolean>> = {};\n\n constructor(options: WanderEmbeddedButtonOptions = {}) {\n const cssVars = mergeCSSVariablesOption(\n options.cssVars,\n options.theme,\n WanderButton.DEFAULT_LIGHT_CSS_VARS,\n WanderButton.DEFAULT_DARK_CSS_VARS\n );\n\n this.config = {\n parent: options.parent || WanderButton.DEFAULT_CONFIG.parent,\n id: options.id || WanderButton.DEFAULT_CONFIG.id,\n theme: options.theme || WanderButton.DEFAULT_CONFIG.theme,\n cssVars,\n customStyles:\n options.customStyles || WanderButton.DEFAULT_CONFIG.customStyles,\n position: options.position || WanderButton.DEFAULT_CONFIG.position,\n wanderLogo: options.wanderLogo || WanderButton.DEFAULT_CONFIG.wanderLogo,\n label: options.label ?? WanderButton.DEFAULT_CONFIG.label,\n balance:\n options.balance === false\n ? false\n : {\n balanceOf:\n (options.balance === true\n ? null\n : options.balance?.balanceOf) ??\n WanderButton.DEFAULT_CONFIG.balance.balanceOf,\n currency:\n (options.balance === true ? null : options.balance?.currency) ??\n WanderButton.DEFAULT_CONFIG.balance.currency\n },\n notifications:\n options.notifications || WanderButton.DEFAULT_CONFIG.notifications,\n i18n: options.i18n || WanderButton.DEFAULT_CONFIG.i18n\n };\n\n const elements = WanderButton.initializeButton(this.config);\n\n this.parent = this.config.parent;\n this.host = elements.host;\n this.button = elements.button;\n this.wanderLogo = elements.wanderLogo;\n this.label = elements.label;\n this.balance = elements.balance;\n this.indicator = elements.indicator;\n this.notifications = elements.notifications;\n }\n\n static initializeButton(config: WanderEmbeddedButtonConfig) {\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderButtonTemplateContent({\n wanderLogo: config.wanderLogo,\n i18n: config.i18n,\n showLabel: config.label,\n showBalance: !!config.balance,\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderButton.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const button = shadow.querySelector(\".button\") as HTMLButtonElement;\n const wanderLogo = shadow.querySelector(\".wanderLogo\") as SVGElement;\n const label = shadow.querySelector(\".label\") as HTMLSpanElement;\n const balance = shadow.querySelector(\".balance\") as HTMLSpanElement;\n const indicator = shadow.querySelector(\".indicator\") as HTMLSpanElement;\n const notifications = shadow.querySelector(\n \".notifications\"\n ) as HTMLSpanElement;\n\n if (\n !button ||\n !wanderLogo ||\n !label ||\n !balance ||\n !indicator ||\n !notifications\n )\n throw new Error(\"Missing elements\");\n\n host.style.position = \"fixed\";\n host.style.zIndex = \"var(--zIndex)\";\n\n if (config.position !== \"static\") {\n const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\n }\n\n host.style.transition = \"opacity linear 150ms\";\n host.style.opacity = \"0\";\n\n setTimeout(() => {\n host.style.opacity = \"1\";\n });\n\n addCSSVariables(host, config.cssVars.light, \"Light\");\n addCSSVariables(host, config.cssVars.dark, \"Dark\");\n\n label.textContent = config.i18n.signIn;\n\n if (config.balance === false) {\n balance.setAttribute(\"hidden\", \"true\");\n }\n\n return {\n host,\n button,\n wanderLogo,\n label,\n balance,\n indicator,\n notifications\n };\n }\n\n getElements() {\n return {\n parent: this.parent,\n host: this.host,\n button: this.button,\n wanderLogo: this.wanderLogo,\n label: this.label,\n balance: this.balance,\n indicator: this.indicator,\n notifications: this.notifications\n };\n }\n\n setBalance(balanceInfo: BalanceInfo) {\n if (this.balance.getAttribute(\"hidden\")) return;\n\n this.balance.textContent = balanceInfo.formattedBalance;\n this.balance.title = \"\";\n\n if (balanceInfo.amount === null) {\n this.balance.classList.add(\"isHidden\");\n } else {\n this.balance.classList.remove(\"isHidden\");\n }\n }\n\n setNotifications(pendingRequests: number) {\n const { notifications, i18n } = this.config;\n\n if (notifications === \"off\") return;\n\n if (pendingRequests > 0) {\n this.notifications.textContent =\n notifications === \"counter\" ? `${pendingRequests}` : \"!\";\n this.label.textContent = i18n.reviewRequests;\n } else {\n this.notifications.textContent = \"\";\n this.label.textContent = \"\";\n }\n }\n\n setVariant(variant: EmbeddedAuthStatus) {\n this.variant = variant;\n this.button.dataset.variant = variant;\n\n if (variant === \"loading\") {\n this.indicator.classList.add(\"isLoading\");\n this.label.classList.add(\"isLoading\");\n this.label.textContent = \"\";\n this.label.title = this.config.i18n.loading;\n } else {\n this.indicator.classList.remove(\"isLoading\");\n this.label.classList.remove(\"isLoading\");\n\n if (variant === \"onboarding\") {\n this.label.textContent = \"Wander\";\n this.label.title = this.config.i18n.completeSignUp;\n } else if (variant === \"authenticated\") {\n this.label.textContent = \"\";\n this.label.title = \"\";\n } else {\n this.label.textContent = this.config.i18n.signIn;\n this.label.title = \"\";\n this.balance.textContent = \"\";\n }\n }\n }\n\n setStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = true;\n this.button.classList.add(status);\n }\n\n unsetStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = false;\n this.button.classList.remove(status);\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
+134
-81
sdk-dist/components/button/wander-button.component.js
import { merge } from 'ts-deepmerge';
// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/components/button/wander-button.template.ts
var getWanderButtonTemplateContent = ({
wanderLogo,
i18n,
showLabel,
showBalance,
customStyles,

@@ -16,10 +14,12 @@ cssVariableKeys = []

:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
:host {
${cssVariableKeys.map((cssVariableKey) => {

@@ -85,15 +85,36 @@ return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;

.label:empty {
display: none;
.label {
}
.label:not(:empty) + .balance {
.label[hidden],
.label:empty:not(.isLoading) {
display: none;
}
.label.isLoading {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance {
filter: blur(0px);
transition: filter linear 300ms;
display: none;
}
.label:empty:not(.isLoading) + .balance:not([hidden]) {
display: block;
}
.balance:empty {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance.isHidden {

@@ -104,3 +125,2 @@ filter: blur(6px);

.indicator,
.dappLogo,
.notifications {

@@ -111,3 +131,2 @@ position: absolute;

border-radius: 32px;
border: var(--borderWidth) solid var(--borderColor);
transition: transform linear 150ms, background linear 150ms;

@@ -125,9 +144,4 @@ pointer-events: none;

.dappLogo {
width: 22px;
height: 22px;
z-index: 9;
background: var(--background);
transform: translate(50%, 50%) scale(0);
padding: 3px;
.indicator.isLoading {
animation: blink-indicator 3s infinite;
}

@@ -137,2 +151,3 @@

background: red;
color: white;
font-size: 12px;

@@ -151,9 +166,6 @@ font-weight: bold;

.isConnected + .indicator {
/* TODO: Add CSS var */
background: #56C980;
}
.isConnected ~ .dappLogo[src] {
transform: translate(50%, 50%) scale(1);
}
.notifications:empty {

@@ -175,2 +187,20 @@ transform: translate(50%, 50%) scale(0);

@keyframes blink-opacity {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.25;
}
}
@keyframes blink-indicator {
0%, 100% {
background: #CCC;
}
50% {
background: #56C980;
}
}
${customStyles}

@@ -233,49 +263,58 @@ </style>

<span class="label"></span>
<span class="balance"></span>
<span class="label" ${showLabel ? "" : "hidden"}></span>
<span class="balance" ${showBalance ? "" : "hidden"} title="${i18n.loadingBalance}"></span>
</button>
<span class="indicator"></span>
<img hidden class="dappLogo" />
<span class="notifications"></span>
`;
// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
// src/components/button/wander-button.component.ts
var _WanderButton = class _WanderButton {
constructor(options = {}) {
// State:
this.variant = null;
this.status = {};
const cssVars = options.cssVars || {};
let cssVarsLight = _WanderButton.DEFAULT_LIGHT_CSS_VARS;
let cssVarsDark = _WanderButton.DEFAULT_DARK_CSS_VARS;
if (Object.keys(cssVars).length > 0) {
if (isThemeRecord(cssVars)) {
cssVarsLight = merge(
cssVars?.light || {},
_WanderButton.DEFAULT_LIGHT_CSS_VARS
);
cssVarsDark = merge(
cssVars?.dark || {},
_WanderButton.DEFAULT_DARK_CSS_VARS
);
} else if (options.theme !== "dark") {
cssVarsLight = merge(
cssVars || {},
_WanderButton.DEFAULT_LIGHT_CSS_VARS
);
} else {
cssVarsDark = merge(
cssVars || {},
_WanderButton.DEFAULT_DARK_CSS_VARS
);
}
}
const cssVars = mergeCSSVariablesOption(
options.cssVars,
options.theme,
_WanderButton.DEFAULT_LIGHT_CSS_VARS,
_WanderButton.DEFAULT_DARK_CSS_VARS
);
this.config = {

@@ -285,10 +324,6 @@ parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,

theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,
cssVars: {
light: cssVarsLight,
dark: cssVarsDark
},
cssVars,
customStyles: options.customStyles || _WanderButton.DEFAULT_CONFIG.customStyles,
position: options.position || _WanderButton.DEFAULT_CONFIG.position,
wanderLogo: options.wanderLogo || _WanderButton.DEFAULT_CONFIG.wanderLogo,
dappLogoSrc: options.dappLogoSrc || _WanderButton.DEFAULT_CONFIG.dappLogoSrc,
label: options.label ?? _WanderButton.DEFAULT_CONFIG.label,

@@ -310,3 +345,2 @@ balance: options.balance === false ? false : {

this.indicator = elements.indicator;
this.dappLogo = elements.dappLogo;
this.notifications = elements.notifications;

@@ -317,3 +351,2 @@ }

host.id = config.id;
host.setAttribute("data-theme", config.theme);
const shadow = host.attachShadow({ mode: "open" });

@@ -323,2 +356,5 @@ const template = document.createElement("template");

wanderLogo: config.wanderLogo,
i18n: config.i18n,
showLabel: config.label,
showBalance: !!config.balance,
customStyles: config.customStyles,

@@ -334,7 +370,6 @@ // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:

const indicator = shadow.querySelector(".indicator");
const dappLogo = shadow.querySelector(".dappLogo");
const notifications = shadow.querySelector(
".notifications"
);
if (!button || !wanderLogo || !label || !balance || !indicator || !dappLogo || !notifications)
if (!button || !wanderLogo || !label || !balance || !indicator || !notifications)
throw new Error("Missing elements");

@@ -353,3 +388,3 @@ host.style.position = "fixed";

});
addCSSVariables(host, config.cssVars.light);
addCSSVariables(host, config.cssVars.light, "Light");
addCSSVariables(host, config.cssVars.dark, "Dark");

@@ -360,3 +395,2 @@ label.textContent = config.i18n.signIn;

}
dappLogo.src = config.dappLogoSrc;
return {

@@ -369,3 +403,2 @@ host,

indicator,
dappLogo,
notifications

@@ -383,3 +416,2 @@ };

indicator: this.indicator,
dappLogo: this.dappLogo,
notifications: this.notifications

@@ -389,2 +421,5 @@ };

setBalance(balanceInfo) {
if (this.balance.getAttribute("hidden")) return;
this.balance.textContent = balanceInfo.formattedBalance;
this.balance.title = "";
if (balanceInfo.amount === null) {

@@ -395,21 +430,41 @@ this.balance.classList.add("isHidden");

}
this.balance.textContent = balanceInfo.formattedBalance;
}
setNotifications(pendingRequests) {
const { label, notifications, i18n } = this.config;
const { notifications, i18n } = this.config;
if (notifications === "off") return;
if (pendingRequests > 0) {
this.notifications.textContent = notifications === "counter" ? `${pendingRequests}` : "!";
this.label.textContent = label ? i18n.reviewRequests : "";
this.label.textContent = i18n.reviewRequests;
} else {
this.notifications.textContent = "";
this.label.textContent = label ? this.status.isAuthenticated ? "" : i18n.signIn : "";
this.label.textContent = "";
}
}
setVariant(variant) {
this.variant = variant;
this.button.dataset.variant = variant;
if (variant === "loading") {
this.indicator.classList.add("isLoading");
this.label.classList.add("isLoading");
this.label.textContent = "";
this.label.title = this.config.i18n.loading;
} else {
this.indicator.classList.remove("isLoading");
this.label.classList.remove("isLoading");
if (variant === "onboarding") {
this.label.textContent = "Wander";
this.label.title = this.config.i18n.completeSignUp;
} else if (variant === "authenticated") {
this.label.textContent = "";
this.label.title = "";
} else {
this.label.textContent = this.config.i18n.signIn;
this.label.title = "";
this.balance.textContent = "";
}
}
}
setStatus(status) {
this.status[status] = true;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = "";
}
}

@@ -419,5 +474,2 @@ unsetStatus(status) {

this.button.classList.remove(status);
if (status === "isAuthenticated") {
this.label.textContent = this.config.label ? this.config.i18n.signIn : "";
}
}

@@ -438,3 +490,2 @@ destroy() {

font: "16px monospace",
// Button (button, affected by :hover & :focus):
background: "white",

@@ -479,3 +530,2 @@ color: "black",

_WanderButton.DEFAULT_CONFIG = {
parent: document.body,
id: "wanderEmbeddedButtonHost",

@@ -488,5 +538,5 @@ theme: "system",

customStyles: "",
parent: document.body,
position: "bottom-right",
wanderLogo: "default",
dappLogoSrc: "",
label: true,

@@ -499,2 +549,5 @@ balance: {

i18n: {
loading: "Loading",
loadingBalance: "Loading Balance",
completeSignUp: "Complete Sign Up",
signIn: "Sign in",

@@ -501,0 +554,0 @@ reviewRequests: "Review requests"

+1
-1
sdk-dist/components/button/wander-button.component.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/components/button/wander-button.template.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/button/wander-button.component.ts"],"names":[],"mappings":"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","file":"wander-button.component.js","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { WanderEmbeddedLogoVariant } from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n :root[data-theme=\"dark\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n\n @media (prefers-color-scheme: dark) {\n :root[data-theme=\"system\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .dappLogo,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n border: var(--borderWidth) solid var(--borderColor);\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .dappLogo {\n width: 22px;\n height: 22px;\n z-index: 9;\n background: var(--background);\n transform: translate(50%, 50%) scale(0);\n padding: 3px;\n }\n\n .notifications {\n background: red;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n background: #56C980;\n }\n\n .isConnected ~ .dappLogo[src] {\n transform: translate(50%, 50%) scale(1);\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\"></span>\n <span class=\"balance\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<img hidden class=\"dappLogo\" />\n<span class=\"notifications\"></span>\n`;\n","export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n","import {\n BalanceInfo,\n isThemeRecord,\n WanderEmbeddedButtonConfig,\n WanderEmbeddedButtonCSSVars,\n WanderEmbeddedButtonOptions,\n WanderEmbeddedButtonStatus\n} from \"../../wander-embedded.types\";\nimport { getWanderButtonTemplateContent } from \"./wander-button.template\";\nimport { addCSSVariables } from \"../../utils/styles/styles.utils\";\nimport { merge } from \"ts-deepmerge\";\n\nexport class WanderButton {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n // Button (button):\n gapX: 16,\n gapY: 16,\n gapInside: 12,\n minWidth: 0,\n minHeight: 0,\n zIndex: \"9999\",\n padding: \"12px 20px 12px 16px\",\n font: \"16px monospace\",\n\n // Button (button, affected by :hover & :focus):\n background: \"white\",\n color: \"black\",\n borderWidth: 2,\n borderColor: \"white\",\n borderRadius: 128,\n boxShadow: \"0 0 32px 0px rgba(0, 0, 0, 0.25)\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n ...WanderButton.DEFAULT_LIGHT_CSS_VARS,\n\n // Button (button, affected by :hover & :focus):\n background: \"black\",\n color: \"white\",\n borderColor: \"black\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_CONFIG = {\n parent: document.body,\n id: \"wanderEmbeddedButtonHost\",\n theme: \"system\",\n cssVars: {\n light: WanderButton.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderButton.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n position: \"bottom-right\",\n wanderLogo: \"default\",\n dappLogoSrc: \"\",\n label: true,\n balance: {\n balanceOf: \"total\",\n currency: \"auto\"\n },\n notifications: \"counter\",\n i18n: {\n signIn: \"Sign in\",\n reviewRequests: \"Review requests\"\n }\n } as const satisfies WanderEmbeddedButtonConfig;\n\n // Elements:\n private parent: HTMLElement;\n private host: HTMLDivElement;\n private button: HTMLButtonElement;\n private wanderLogo: SVGElement;\n private label: HTMLSpanElement;\n private balance: HTMLSpanElement;\n private indicator: HTMLSpanElement;\n private dappLogo: HTMLImageElement;\n private notifications: HTMLSpanElement;\n\n // Config (options):\n private config: WanderEmbeddedButtonConfig;\n\n // State:\n private status: Partial<Record<WanderEmbeddedButtonStatus, boolean>> = {};\n\n constructor(options: WanderEmbeddedButtonOptions = {}) {\n const cssVars = options.cssVars || {};\n\n let cssVarsLight: WanderEmbeddedButtonCSSVars =\n WanderButton.DEFAULT_LIGHT_CSS_VARS;\n let cssVarsDark: WanderEmbeddedButtonCSSVars =\n WanderButton.DEFAULT_DARK_CSS_VARS;\n\n if (Object.keys(cssVars).length > 0) {\n if (isThemeRecord(cssVars)) {\n cssVarsLight = merge(\n cssVars?.light || {},\n WanderButton.DEFAULT_LIGHT_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n cssVarsDark = merge(\n cssVars?.dark || {},\n WanderButton.DEFAULT_DARK_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n } else if (options.theme !== \"dark\") {\n cssVarsLight = merge(\n cssVars || {},\n WanderButton.DEFAULT_LIGHT_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n } else {\n cssVarsDark = merge(\n cssVars || {},\n WanderButton.DEFAULT_DARK_CSS_VARS\n ) as WanderEmbeddedButtonCSSVars;\n }\n }\n\n this.config = {\n parent: options.parent || WanderButton.DEFAULT_CONFIG.parent,\n id: options.id || WanderButton.DEFAULT_CONFIG.id,\n theme: options.theme || WanderButton.DEFAULT_CONFIG.theme,\n cssVars: {\n light: cssVarsLight,\n dark: cssVarsDark\n },\n customStyles:\n options.customStyles || WanderButton.DEFAULT_CONFIG.customStyles,\n position: options.position || WanderButton.DEFAULT_CONFIG.position,\n wanderLogo: options.wanderLogo || WanderButton.DEFAULT_CONFIG.wanderLogo,\n dappLogoSrc:\n options.dappLogoSrc || WanderButton.DEFAULT_CONFIG.dappLogoSrc,\n label: options.label ?? WanderButton.DEFAULT_CONFIG.label,\n balance:\n options.balance === false\n ? false\n : {\n balanceOf:\n (options.balance === true\n ? null\n : options.balance?.balanceOf) ??\n WanderButton.DEFAULT_CONFIG.balance.balanceOf,\n currency:\n (options.balance === true ? null : options.balance?.currency) ??\n WanderButton.DEFAULT_CONFIG.balance.currency\n },\n notifications:\n options.notifications || WanderButton.DEFAULT_CONFIG.notifications,\n i18n: options.i18n || WanderButton.DEFAULT_CONFIG.i18n\n };\n\n const elements = WanderButton.initializeButton(this.config);\n\n this.parent = this.config.parent;\n this.host = elements.host;\n this.button = elements.button;\n this.wanderLogo = elements.wanderLogo;\n this.label = elements.label;\n this.balance = elements.balance;\n this.indicator = elements.indicator;\n this.dappLogo = elements.dappLogo;\n this.notifications = elements.notifications;\n }\n\n static initializeButton(config: WanderEmbeddedButtonConfig) {\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n host.setAttribute(\"data-theme\", config.theme);\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderButtonTemplateContent({\n wanderLogo: config.wanderLogo,\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderButton.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const button = shadow.querySelector(\".button\") as HTMLButtonElement;\n const wanderLogo = shadow.querySelector(\".wanderLogo\") as SVGElement;\n const label = shadow.querySelector(\".label\") as HTMLSpanElement;\n const balance = shadow.querySelector(\".balance\") as HTMLSpanElement;\n const indicator = shadow.querySelector(\".indicator\") as HTMLSpanElement;\n const dappLogo = shadow.querySelector(\".dappLogo\") as HTMLImageElement;\n const notifications = shadow.querySelector(\n \".notifications\"\n ) as HTMLSpanElement;\n\n if (\n !button ||\n !wanderLogo ||\n !label ||\n !balance ||\n !indicator ||\n !dappLogo ||\n !notifications\n )\n throw new Error(\"Missing elements\");\n\n host.style.position = \"fixed\";\n host.style.zIndex = \"var(--zIndex)\";\n\n if (config.position !== \"static\") {\n const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\n }\n host.style.transition = \"opacity linear 150ms\";\n host.style.opacity = \"0\";\n\n setTimeout(() => {\n host.style.opacity = \"1\";\n });\n\n addCSSVariables(host, config.cssVars.light);\n addCSSVariables(host, config.cssVars.dark, \"Dark\");\n\n label.textContent = config.i18n.signIn;\n\n if (config.balance === false) {\n balance.setAttribute(\"hidden\", \"true\");\n }\n\n dappLogo.src = config.dappLogoSrc;\n\n return {\n host,\n button,\n wanderLogo,\n label,\n balance,\n indicator,\n dappLogo,\n notifications\n };\n }\n\n getElements() {\n return {\n parent: this.parent,\n host: this.host,\n button: this.button,\n wanderLogo: this.wanderLogo,\n label: this.label,\n balance: this.balance,\n indicator: this.indicator,\n dappLogo: this.dappLogo,\n notifications: this.notifications\n };\n }\n\n setBalance(balanceInfo: BalanceInfo) {\n if (balanceInfo.amount === null) {\n this.balance.classList.add(\"isHidden\");\n } else {\n this.balance.classList.remove(\"isHidden\");\n }\n\n this.balance.textContent = balanceInfo.formattedBalance;\n }\n\n setNotifications(pendingRequests: number) {\n const { label, notifications, i18n } = this.config;\n\n if (notifications === \"off\") return;\n\n if (pendingRequests > 0) {\n this.notifications.textContent =\n notifications === \"counter\" ? `${pendingRequests}` : \"!\";\n this.label.textContent = label ? i18n.reviewRequests : \"\";\n } else {\n this.notifications.textContent = \"\";\n this.label.textContent = label\n ? this.status.isAuthenticated\n ? \"\"\n : i18n.signIn\n : \"\";\n }\n }\n\n setStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = true;\n this.button.classList.add(status);\n\n if (status === \"isAuthenticated\") {\n this.label.textContent = \"\";\n }\n }\n\n unsetStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = false;\n this.button.classList.remove(status);\n\n if (status === \"isAuthenticated\") {\n this.label.textContent = this.config.label ? this.config.i18n.signIn : \"\";\n }\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
{"version":3,"sources":["../../../src/components/button/wander-button.template.ts","../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/button/wander-button.component.ts"],"names":[],"mappings":"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","file":"wander-button.component.js","sourcesContent":["import {\n WanderEmbeddedButtonLabels,\n WanderEmbeddedLogoVariant\n} from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n i18n: WanderEmbeddedButtonLabels;\n showLabel: boolean;\n showBalance: boolean;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n i18n,\n showLabel,\n showBalance,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label {\n }\n\n .label[hidden],\n .label:empty:not(.isLoading) {\n display: none;\n }\n\n .label.isLoading {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n display: none;\n }\n\n .label:empty:not(.isLoading) + .balance:not([hidden]) {\n display: block;\n }\n\n .balance:empty {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .indicator.isLoading {\n animation: blink-indicator 3s infinite;\n }\n\n .notifications {\n background: red;\n color: white;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n /* TODO: Add CSS var */\n background: #56C980;\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n @keyframes blink-opacity {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.25;\n }\n }\n\n @keyframes blink-indicator {\n 0%, 100% {\n background: #CCC;\n }\n 50% {\n background: #56C980;\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\" ${showLabel ? \"\" : \"hidden\"}></span>\n <span class=\"balance\" ${showBalance ? \"\" : \"hidden\"} title=\"${\n i18n.loadingBalance\n}\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<span class=\"notifications\"></span>\n`;\n","import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n","import {\n BalanceInfo,\n WanderEmbeddedButtonConfig,\n WanderEmbeddedButtonCSSVars,\n WanderEmbeddedButtonOptions,\n WanderEmbeddedButtonStatus\n} from \"../../wander-embedded.types\";\nimport { getWanderButtonTemplateContent } from \"./wander-button.template\";\nimport {\n addCSSVariables,\n mergeCSSVariablesOption\n} from \"../../utils/styles/styles.utils\";\nimport { EmbeddedAuthStatus } from \"../../utils/message/message.types\";\n\nexport class WanderButton {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n // Button (button):\n gapX: 16,\n gapY: 16,\n gapInside: 12,\n minWidth: 0,\n minHeight: 0,\n zIndex: \"9999\",\n padding: \"12px 20px 12px 16px\",\n font: \"16px monospace\",\n background: \"white\",\n color: \"black\",\n borderWidth: 2,\n borderColor: \"white\",\n borderRadius: 128,\n boxShadow: \"0 0 32px 0px rgba(0, 0, 0, 0.25)\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedButtonCSSVars = {\n ...WanderButton.DEFAULT_LIGHT_CSS_VARS,\n\n // Button (button, affected by :hover & :focus):\n background: \"black\",\n color: \"white\",\n borderColor: \"black\",\n\n // Logo (img / svg):\n logoBackground: \"\",\n logoBorderWidth: \"\",\n logoBorderColor: \"\",\n logoBorderRadius: \"\",\n\n // Notifications (span):\n notificationsBackground: \"\",\n notificationsBorderWidth: \"\",\n notificationsBorderColor: \"\",\n notificationsBorderRadius: \"\",\n notificationsBoxShadow: \"\",\n notificationsPadding: \"\"\n };\n\n static DEFAULT_CONFIG = {\n id: \"wanderEmbeddedButtonHost\",\n theme: \"system\",\n cssVars: {\n light: WanderButton.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderButton.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n parent: document.body,\n position: \"bottom-right\",\n wanderLogo: \"default\",\n label: true,\n balance: {\n balanceOf: \"total\",\n currency: \"auto\"\n },\n notifications: \"counter\",\n i18n: {\n loading: \"Loading\",\n loadingBalance: \"Loading Balance\",\n completeSignUp: \"Complete Sign Up\",\n signIn: \"Sign in\",\n reviewRequests: \"Review requests\"\n }\n } as const satisfies WanderEmbeddedButtonConfig;\n\n // Elements:\n private parent: HTMLElement;\n private host: HTMLDivElement;\n private button: HTMLButtonElement;\n private wanderLogo: SVGElement;\n private label: HTMLSpanElement;\n private balance: HTMLSpanElement;\n private indicator: HTMLSpanElement;\n private notifications: HTMLSpanElement;\n\n // Config (options):\n private config: WanderEmbeddedButtonConfig;\n\n // State:\n private variant: null | EmbeddedAuthStatus = null;\n private status: Partial<Record<WanderEmbeddedButtonStatus, boolean>> = {};\n\n constructor(options: WanderEmbeddedButtonOptions = {}) {\n const cssVars = mergeCSSVariablesOption(\n options.cssVars,\n options.theme,\n WanderButton.DEFAULT_LIGHT_CSS_VARS,\n WanderButton.DEFAULT_DARK_CSS_VARS\n );\n\n this.config = {\n parent: options.parent || WanderButton.DEFAULT_CONFIG.parent,\n id: options.id || WanderButton.DEFAULT_CONFIG.id,\n theme: options.theme || WanderButton.DEFAULT_CONFIG.theme,\n cssVars,\n customStyles:\n options.customStyles || WanderButton.DEFAULT_CONFIG.customStyles,\n position: options.position || WanderButton.DEFAULT_CONFIG.position,\n wanderLogo: options.wanderLogo || WanderButton.DEFAULT_CONFIG.wanderLogo,\n label: options.label ?? WanderButton.DEFAULT_CONFIG.label,\n balance:\n options.balance === false\n ? false\n : {\n balanceOf:\n (options.balance === true\n ? null\n : options.balance?.balanceOf) ??\n WanderButton.DEFAULT_CONFIG.balance.balanceOf,\n currency:\n (options.balance === true ? null : options.balance?.currency) ??\n WanderButton.DEFAULT_CONFIG.balance.currency\n },\n notifications:\n options.notifications || WanderButton.DEFAULT_CONFIG.notifications,\n i18n: options.i18n || WanderButton.DEFAULT_CONFIG.i18n\n };\n\n const elements = WanderButton.initializeButton(this.config);\n\n this.parent = this.config.parent;\n this.host = elements.host;\n this.button = elements.button;\n this.wanderLogo = elements.wanderLogo;\n this.label = elements.label;\n this.balance = elements.balance;\n this.indicator = elements.indicator;\n this.notifications = elements.notifications;\n }\n\n static initializeButton(config: WanderEmbeddedButtonConfig) {\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderButtonTemplateContent({\n wanderLogo: config.wanderLogo,\n i18n: config.i18n,\n showLabel: config.label,\n showBalance: !!config.balance,\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderButton.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const button = shadow.querySelector(\".button\") as HTMLButtonElement;\n const wanderLogo = shadow.querySelector(\".wanderLogo\") as SVGElement;\n const label = shadow.querySelector(\".label\") as HTMLSpanElement;\n const balance = shadow.querySelector(\".balance\") as HTMLSpanElement;\n const indicator = shadow.querySelector(\".indicator\") as HTMLSpanElement;\n const notifications = shadow.querySelector(\n \".notifications\"\n ) as HTMLSpanElement;\n\n if (\n !button ||\n !wanderLogo ||\n !label ||\n !balance ||\n !indicator ||\n !notifications\n )\n throw new Error(\"Missing elements\");\n\n host.style.position = \"fixed\";\n host.style.zIndex = \"var(--zIndex)\";\n\n if (config.position !== \"static\") {\n const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\n }\n\n host.style.transition = \"opacity linear 150ms\";\n host.style.opacity = \"0\";\n\n setTimeout(() => {\n host.style.opacity = \"1\";\n });\n\n addCSSVariables(host, config.cssVars.light, \"Light\");\n addCSSVariables(host, config.cssVars.dark, \"Dark\");\n\n label.textContent = config.i18n.signIn;\n\n if (config.balance === false) {\n balance.setAttribute(\"hidden\", \"true\");\n }\n\n return {\n host,\n button,\n wanderLogo,\n label,\n balance,\n indicator,\n notifications\n };\n }\n\n getElements() {\n return {\n parent: this.parent,\n host: this.host,\n button: this.button,\n wanderLogo: this.wanderLogo,\n label: this.label,\n balance: this.balance,\n indicator: this.indicator,\n notifications: this.notifications\n };\n }\n\n setBalance(balanceInfo: BalanceInfo) {\n if (this.balance.getAttribute(\"hidden\")) return;\n\n this.balance.textContent = balanceInfo.formattedBalance;\n this.balance.title = \"\";\n\n if (balanceInfo.amount === null) {\n this.balance.classList.add(\"isHidden\");\n } else {\n this.balance.classList.remove(\"isHidden\");\n }\n }\n\n setNotifications(pendingRequests: number) {\n const { notifications, i18n } = this.config;\n\n if (notifications === \"off\") return;\n\n if (pendingRequests > 0) {\n this.notifications.textContent =\n notifications === \"counter\" ? `${pendingRequests}` : \"!\";\n this.label.textContent = i18n.reviewRequests;\n } else {\n this.notifications.textContent = \"\";\n this.label.textContent = \"\";\n }\n }\n\n setVariant(variant: EmbeddedAuthStatus) {\n this.variant = variant;\n this.button.dataset.variant = variant;\n\n if (variant === \"loading\") {\n this.indicator.classList.add(\"isLoading\");\n this.label.classList.add(\"isLoading\");\n this.label.textContent = \"\";\n this.label.title = this.config.i18n.loading;\n } else {\n this.indicator.classList.remove(\"isLoading\");\n this.label.classList.remove(\"isLoading\");\n\n if (variant === \"onboarding\") {\n this.label.textContent = \"Wander\";\n this.label.title = this.config.i18n.completeSignUp;\n } else if (variant === \"authenticated\") {\n this.label.textContent = \"\";\n this.label.title = \"\";\n } else {\n this.label.textContent = this.config.i18n.signIn;\n this.label.title = \"\";\n this.balance.textContent = \"\";\n }\n }\n }\n\n setStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = true;\n this.button.classList.add(status);\n }\n\n unsetStatus(status: WanderEmbeddedButtonStatus) {\n this.status[status] = false;\n this.button.classList.remove(status);\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
+57
-23
sdk-dist/components/button/wander-button.template.cjs

@@ -6,2 +6,5 @@ 'use strict';

wanderLogo,
i18n,
showLabel,
showBalance,
customStyles,

@@ -12,10 +15,12 @@ cssVariableKeys = []

:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
:host {
${cssVariableKeys.map((cssVariableKey) => {

@@ -81,15 +86,36 @@ return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;

.label:empty {
display: none;
.label {
}
.label:not(:empty) + .balance {
.label[hidden],
.label:empty:not(.isLoading) {
display: none;
}
.label.isLoading {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance {
filter: blur(0px);
transition: filter linear 300ms;
display: none;
}
.label:empty:not(.isLoading) + .balance:not([hidden]) {
display: block;
}
.balance:empty {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance.isHidden {

@@ -100,3 +126,2 @@ filter: blur(6px);

.indicator,
.dappLogo,
.notifications {

@@ -107,3 +132,2 @@ position: absolute;

border-radius: 32px;
border: var(--borderWidth) solid var(--borderColor);
transition: transform linear 150ms, background linear 150ms;

@@ -121,9 +145,4 @@ pointer-events: none;

.dappLogo {
width: 22px;
height: 22px;
z-index: 9;
background: var(--background);
transform: translate(50%, 50%) scale(0);
padding: 3px;
.indicator.isLoading {
animation: blink-indicator 3s infinite;
}

@@ -133,2 +152,3 @@

background: red;
color: white;
font-size: 12px;

@@ -147,9 +167,6 @@ font-weight: bold;

.isConnected + .indicator {
/* TODO: Add CSS var */
background: #56C980;
}
.isConnected ~ .dappLogo[src] {
transform: translate(50%, 50%) scale(1);
}
.notifications:empty {

@@ -171,2 +188,20 @@ transform: translate(50%, 50%) scale(0);

@keyframes blink-opacity {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.25;
}
}
@keyframes blink-indicator {
0%, 100% {
background: #CCC;
}
50% {
background: #56C980;
}
}
${customStyles}

@@ -229,8 +264,7 @@ </style>

<span class="label"></span>
<span class="balance"></span>
<span class="label" ${showLabel ? "" : "hidden"}></span>
<span class="balance" ${showBalance ? "" : "hidden"} title="${i18n.loadingBalance}"></span>
</button>
<span class="indicator"></span>
<img hidden class="dappLogo" />
<span class="notifications"></span>

@@ -237,0 +271,0 @@ `;

+1
-1
sdk-dist/components/button/wander-button.template.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/components/button/wander-button.template.ts"],"names":[],"mappings":";;;AAUO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,UAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAkB;AACpB,CAA0C,KAAA;AAAA;;AAAA;AAAA,IAIpC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;;AAAA;AAAA;AAAA,MAKT,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,EAAA,EA8If,YAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOV,EAAA,UAAA,KAAe,MAAS,GAAA,QAAA,GAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7B,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;AAAA;AAAA,YAGE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA","file":"wander-button.template.cjs","sourcesContent":["import { WanderEmbeddedLogoVariant } from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n :root[data-theme=\"dark\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n\n @media (prefers-color-scheme: dark) {\n :root[data-theme=\"system\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .dappLogo,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n border: var(--borderWidth) solid var(--borderColor);\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .dappLogo {\n width: 22px;\n height: 22px;\n z-index: 9;\n background: var(--background);\n transform: translate(50%, 50%) scale(0);\n padding: 3px;\n }\n\n .notifications {\n background: red;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n background: #56C980;\n }\n\n .isConnected ~ .dappLogo[src] {\n transform: translate(50%, 50%) scale(1);\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\"></span>\n <span class=\"balance\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<img hidden class=\"dappLogo\" />\n<span class=\"notifications\"></span>\n`;\n"]}
{"version":3,"sources":["../../../src/components/button/wander-button.template.ts"],"names":[],"mappings":";;;AAgBO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,UAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAkB;AACpB,CAA0C,KAAA;AAAA;;AAAA;AAAA;AAAA,MAKlC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,OAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA,MAMX,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,EAAA,EA4Kf,YAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOV,EAAA,UAAA,KAAe,MAAS,GAAA,QAAA,GAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7B,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;AAAA;AAAA,YAGE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,sBAsCkB,EAAA,SAAA,GAAY,KAAK,QAAQ,CAAA;AAAA,wBAAA,EACvB,WAAc,GAAA,EAAA,GAAK,QAAQ,CAAA,QAAA,EACnD,KAAK,cACP,CAAA;AAAA;;AAAA;AAAA;AAAA","file":"wander-button.template.cjs","sourcesContent":["import {\n WanderEmbeddedButtonLabels,\n WanderEmbeddedLogoVariant\n} from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n i18n: WanderEmbeddedButtonLabels;\n showLabel: boolean;\n showBalance: boolean;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n i18n,\n showLabel,\n showBalance,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label {\n }\n\n .label[hidden],\n .label:empty:not(.isLoading) {\n display: none;\n }\n\n .label.isLoading {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n display: none;\n }\n\n .label:empty:not(.isLoading) + .balance:not([hidden]) {\n display: block;\n }\n\n .balance:empty {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .indicator.isLoading {\n animation: blink-indicator 3s infinite;\n }\n\n .notifications {\n background: red;\n color: white;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n /* TODO: Add CSS var */\n background: #56C980;\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n @keyframes blink-opacity {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.25;\n }\n }\n\n @keyframes blink-indicator {\n 0%, 100% {\n background: #CCC;\n }\n 50% {\n background: #56C980;\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\" ${showLabel ? \"\" : \"hidden\"}></span>\n <span class=\"balance\" ${showBalance ? \"\" : \"hidden\"} title=\"${\n i18n.loadingBalance\n}\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<span class=\"notifications\"></span>\n`;\n"]}
+5
-2
sdk-dist/components/button/wander-button.template.d.cts

@@ -1,10 +0,13 @@

import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-DZt7tGOM.cjs';
import { d as WanderEmbeddedLogoVariant, e as WanderEmbeddedButtonLabels } from '../../wander-embedded.types-cWXjiYHr.cjs';
interface WanderButtonTemplateContentOptions {
wanderLogo: WanderEmbeddedLogoVariant;
i18n: WanderEmbeddedButtonLabels;
showLabel: boolean;
showBalance: boolean;
customStyles: string;
cssVariableKeys: string[];
}
declare const getWanderButtonTemplateContent: ({ wanderLogo, customStyles, cssVariableKeys }: WanderButtonTemplateContentOptions) => string;
declare const getWanderButtonTemplateContent: ({ wanderLogo, i18n, showLabel, showBalance, customStyles, cssVariableKeys }: WanderButtonTemplateContentOptions) => string;
export { type WanderButtonTemplateContentOptions, getWanderButtonTemplateContent };
+5
-2
sdk-dist/components/button/wander-button.template.d.ts

@@ -1,10 +0,13 @@

import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-DZt7tGOM.js';
import { d as WanderEmbeddedLogoVariant, e as WanderEmbeddedButtonLabels } from '../../wander-embedded.types-cWXjiYHr.js';
interface WanderButtonTemplateContentOptions {
wanderLogo: WanderEmbeddedLogoVariant;
i18n: WanderEmbeddedButtonLabels;
showLabel: boolean;
showBalance: boolean;
customStyles: string;
cssVariableKeys: string[];
}
declare const getWanderButtonTemplateContent: ({ wanderLogo, customStyles, cssVariableKeys }: WanderButtonTemplateContentOptions) => string;
declare const getWanderButtonTemplateContent: ({ wanderLogo, i18n, showLabel, showBalance, customStyles, cssVariableKeys }: WanderButtonTemplateContentOptions) => string;
export { type WanderButtonTemplateContentOptions, getWanderButtonTemplateContent };
+57
-23
sdk-dist/components/button/wander-button.template.global.js

@@ -7,2 +7,5 @@ (function (exports) {

wanderLogo,
i18n,
showLabel,
showBalance,
customStyles,

@@ -13,10 +16,12 @@ cssVariableKeys = []

:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
:host {
${cssVariableKeys.map((cssVariableKey) => {

@@ -82,15 +87,36 @@ return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;

.label:empty {
display: none;
.label {
}
.label:not(:empty) + .balance {
.label[hidden],
.label:empty:not(.isLoading) {
display: none;
}
.label.isLoading {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance {
filter: blur(0px);
transition: filter linear 300ms;
display: none;
}
.label:empty:not(.isLoading) + .balance:not([hidden]) {
display: block;
}
.balance:empty {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance.isHidden {

@@ -101,3 +127,2 @@ filter: blur(6px);

.indicator,
.dappLogo,
.notifications {

@@ -108,3 +133,2 @@ position: absolute;

border-radius: 32px;
border: var(--borderWidth) solid var(--borderColor);
transition: transform linear 150ms, background linear 150ms;

@@ -122,9 +146,4 @@ pointer-events: none;

.dappLogo {
width: 22px;
height: 22px;
z-index: 9;
background: var(--background);
transform: translate(50%, 50%) scale(0);
padding: 3px;
.indicator.isLoading {
animation: blink-indicator 3s infinite;
}

@@ -134,2 +153,3 @@

background: red;
color: white;
font-size: 12px;

@@ -148,9 +168,6 @@ font-weight: bold;

.isConnected + .indicator {
/* TODO: Add CSS var */
background: #56C980;
}
.isConnected ~ .dappLogo[src] {
transform: translate(50%, 50%) scale(1);
}
.notifications:empty {

@@ -172,2 +189,20 @@ transform: translate(50%, 50%) scale(0);

@keyframes blink-opacity {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.25;
}
}
@keyframes blink-indicator {
0%, 100% {
background: #CCC;
}
50% {
background: #56C980;
}
}
${customStyles}

@@ -230,8 +265,7 @@ </style>

<span class="label"></span>
<span class="balance"></span>
<span class="label" ${showLabel ? "" : "hidden"}></span>
<span class="balance" ${showBalance ? "" : "hidden"} title="${i18n.loadingBalance}"></span>
</button>
<span class="indicator"></span>
<img hidden class="dappLogo" />
<span class="notifications"></span>

@@ -238,0 +272,0 @@ `;

+1
-1
sdk-dist/component...on/wander-button.template.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/components/button/wander-button.template.ts"],"names":[],"mappings":";;;;AAUO,MAAM,iCAAiC,CAAC;EAAA,EAC7C,UAAA;EAAA,EACA,YAAA;EAAA,EACA,kBAAkB;EACpB,CAA0C,KAAA;AAAA;;AAAA;AAAA,IAIpC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;;AAAA;AAAA;AAAA,MAKT,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,EAAA,EA8If,YAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOV,EAAA,UAAA,KAAe,MAAS,GAAA,QAAA,GAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7B,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;AAAA;AAAA,YAGE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA","file":"wander-button.template.global.js","sourcesContent":["import { WanderEmbeddedLogoVariant } from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n :root[data-theme=\"dark\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n\n @media (prefers-color-scheme: dark) {\n :root[data-theme=\"system\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .dappLogo,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n border: var(--borderWidth) solid var(--borderColor);\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .dappLogo {\n width: 22px;\n height: 22px;\n z-index: 9;\n background: var(--background);\n transform: translate(50%, 50%) scale(0);\n padding: 3px;\n }\n\n .notifications {\n background: red;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n background: #56C980;\n }\n\n .isConnected ~ .dappLogo[src] {\n transform: translate(50%, 50%) scale(1);\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\"></span>\n <span class=\"balance\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<img hidden class=\"dappLogo\" />\n<span class=\"notifications\"></span>\n`;\n"]}
{"version":3,"sources":["../../../src/components/button/wander-button.template.ts"],"names":[],"mappings":";;;;AAgBO,MAAM,iCAAiC,CAAC;EAAA,EAC7C,UAAA;EAAA,EACA,IAAA;EAAA,EACA,SAAA;EAAA,EACA,WAAA;EAAA,EACA,YAAA;EAAA,EACA,kBAAkB;EACpB,CAA0C,KAAA;AAAA;;AAAA;AAAA;AAAA,MAKlC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,OAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA,MAMX,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,EAAA,EA4Kf,YAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOV,EAAA,UAAA,KAAe,MAAS,GAAA,QAAA,GAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7B,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;AAAA;AAAA,YAGE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,sBAsCkB,EAAA,SAAA,GAAY,KAAK,QAAQ,CAAA;AAAA,wBAAA,EACvB,WAAc,GAAA,EAAA,GAAK,QAAQ,CAAA,QAAA,EACnD,KAAK,cACP,CAAA;AAAA;;AAAA;AAAA;AAAA","file":"wander-button.template.global.js","sourcesContent":["import {\n WanderEmbeddedButtonLabels,\n WanderEmbeddedLogoVariant\n} from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n i18n: WanderEmbeddedButtonLabels;\n showLabel: boolean;\n showBalance: boolean;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n i18n,\n showLabel,\n showBalance,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label {\n }\n\n .label[hidden],\n .label:empty:not(.isLoading) {\n display: none;\n }\n\n .label.isLoading {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n display: none;\n }\n\n .label:empty:not(.isLoading) + .balance:not([hidden]) {\n display: block;\n }\n\n .balance:empty {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .indicator.isLoading {\n animation: blink-indicator 3s infinite;\n }\n\n .notifications {\n background: red;\n color: white;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n /* TODO: Add CSS var */\n background: #56C980;\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n @keyframes blink-opacity {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.25;\n }\n }\n\n @keyframes blink-indicator {\n 0%, 100% {\n background: #CCC;\n }\n 50% {\n background: #56C980;\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\" ${showLabel ? \"\" : \"hidden\"}></span>\n <span class=\"balance\" ${showBalance ? \"\" : \"hidden\"} title=\"${\n i18n.loadingBalance\n}\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<span class=\"notifications\"></span>\n`;\n"]}
+57
-23
sdk-dist/components/button/wander-button.template.js
// src/components/button/wander-button.template.ts
var getWanderButtonTemplateContent = ({
wanderLogo,
i18n,
showLabel,
showBalance,
customStyles,

@@ -9,10 +12,12 @@ cssVariableKeys = []

:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
:host {
${cssVariableKeys.map((cssVariableKey) => {

@@ -78,15 +83,36 @@ return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;

.label:empty {
display: none;
.label {
}
.label:not(:empty) + .balance {
.label[hidden],
.label:empty:not(.isLoading) {
display: none;
}
.label.isLoading {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance {
filter: blur(0px);
transition: filter linear 300ms;
display: none;
}
.label:empty:not(.isLoading) + .balance:not([hidden]) {
display: block;
}
.balance:empty {
background: currentColor;
width: 64px;
height: 12px;
border-radius: 6px;
animation: blink-opacity 3s infinite;
}
.balance.isHidden {

@@ -97,3 +123,2 @@ filter: blur(6px);

.indicator,
.dappLogo,
.notifications {

@@ -104,3 +129,2 @@ position: absolute;

border-radius: 32px;
border: var(--borderWidth) solid var(--borderColor);
transition: transform linear 150ms, background linear 150ms;

@@ -118,9 +142,4 @@ pointer-events: none;

.dappLogo {
width: 22px;
height: 22px;
z-index: 9;
background: var(--background);
transform: translate(50%, 50%) scale(0);
padding: 3px;
.indicator.isLoading {
animation: blink-indicator 3s infinite;
}

@@ -130,2 +149,3 @@

background: red;
color: white;
font-size: 12px;

@@ -144,9 +164,6 @@ font-weight: bold;

.isConnected + .indicator {
/* TODO: Add CSS var */
background: #56C980;
}
.isConnected ~ .dappLogo[src] {
transform: translate(50%, 50%) scale(1);
}
.notifications:empty {

@@ -168,2 +185,20 @@ transform: translate(50%, 50%) scale(0);

@keyframes blink-opacity {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.25;
}
}
@keyframes blink-indicator {
0%, 100% {
background: #CCC;
}
50% {
background: #56C980;
}
}
${customStyles}

@@ -226,8 +261,7 @@ </style>

<span class="label"></span>
<span class="balance"></span>
<span class="label" ${showLabel ? "" : "hidden"}></span>
<span class="balance" ${showBalance ? "" : "hidden"} title="${i18n.loadingBalance}"></span>
</button>
<span class="indicator"></span>
<img hidden class="dappLogo" />
<span class="notifications"></span>

@@ -234,0 +268,0 @@ `;

+1
-1
sdk-dist/components/button/wander-button.template.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/components/button/wander-button.template.ts"],"names":[],"mappings":";AAUO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,UAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAkB;AACpB,CAA0C,KAAA;AAAA;;AAAA;AAAA,IAIpC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;;AAAA;AAAA;AAAA,MAKT,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,EAAA,EA8If,YAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOV,EAAA,UAAA,KAAe,MAAS,GAAA,QAAA,GAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7B,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;AAAA;AAAA,YAGE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA","file":"wander-button.template.js","sourcesContent":["import { WanderEmbeddedLogoVariant } from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n :root[data-theme=\"dark\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n\n @media (prefers-color-scheme: dark) {\n :root[data-theme=\"system\"] {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .dappLogo,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n border: var(--borderWidth) solid var(--borderColor);\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .dappLogo {\n width: 22px;\n height: 22px;\n z-index: 9;\n background: var(--background);\n transform: translate(50%, 50%) scale(0);\n padding: 3px;\n }\n\n .notifications {\n background: red;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n background: #56C980;\n }\n\n .isConnected ~ .dappLogo[src] {\n transform: translate(50%, 50%) scale(1);\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\"></span>\n <span class=\"balance\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<img hidden class=\"dappLogo\" />\n<span class=\"notifications\"></span>\n`;\n"]}
{"version":3,"sources":["../../../src/components/button/wander-button.template.ts"],"names":[],"mappings":";AAgBO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,UAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAkB;AACpB,CAA0C,KAAA;AAAA;;AAAA;AAAA;AAAA,MAKlC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,OAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA,MAMX,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,EAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AACrD,CAAC,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,EAAA,EA4Kf,YAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOV,EAAA,UAAA,KAAe,MAAS,GAAA,QAAA,GAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7B,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;AAAA;AAAA,YAGE,EAAA,UAAA,KAAe,YAAe,GAAA,cAAA,GAAiB,iBACjD,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,sBAsCkB,EAAA,SAAA,GAAY,KAAK,QAAQ,CAAA;AAAA,wBAAA,EACvB,WAAc,GAAA,EAAA,GAAK,QAAQ,CAAA,QAAA,EACnD,KAAK,cACP,CAAA;AAAA;;AAAA;AAAA;AAAA","file":"wander-button.template.js","sourcesContent":["import {\n WanderEmbeddedButtonLabels,\n WanderEmbeddedLogoVariant\n} from \"../../wander-embedded.types\";\n\nexport interface WanderButtonTemplateContentOptions {\n wanderLogo: WanderEmbeddedLogoVariant;\n i18n: WanderEmbeddedButtonLabels;\n showLabel: boolean;\n showBalance: boolean;\n customStyles: string;\n cssVariableKeys: string[];\n}\n\n// TODO: Missing :hover, :active and :focus styles\n\nexport const getWanderButtonTemplateContent = ({\n wanderLogo,\n i18n,\n showLabel,\n showBalance,\n customStyles,\n cssVariableKeys = []\n}: WanderButtonTemplateContentOptions) => `\n<style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n .button {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: 0;\n padding: var(--padding);\n font: var(--font);\n color: var(--color);\n background: transparent;\n border: none;\n border-radius: var(--borderRadius);\n }\n\n .button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n z-index: -1;\n transition: transform linear 50ms;\n }\n\n .button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--borderRadius);\n border-bottom-right-radius: 0;\n z-index: -1;\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active::before {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n transition: transform linear 50ms;\n }\n\n .label {\n }\n\n .label[hidden],\n .label:empty:not(.isLoading) {\n display: none;\n }\n\n .label.isLoading {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance {\n filter: blur(0px);\n transition: filter linear 300ms;\n display: none;\n }\n\n .label:empty:not(.isLoading) + .balance:not([hidden]) {\n display: block;\n }\n\n .balance:empty {\n background: currentColor;\n width: 64px;\n height: 12px;\n border-radius: 6px;\n animation: blink-opacity 3s infinite;\n }\n\n .balance.isHidden {\n filter: blur(6px);\n }\n\n .indicator,\n .notifications {\n position: absolute;\n right: calc(4px + var(--borderWidth));\n bottom: calc(4px + var(--borderWidth));\n border-radius: 32px;\n transition: transform linear 150ms, background linear 150ms;\n pointer-events: none;\n }\n\n .indicator {\n width: 8px;\n height: 8px;\n z-index: 8;\n background: #CCC;\n transform: translate(50%, 50%);\n }\n\n .indicator.isLoading {\n animation: blink-indicator 3s infinite;\n }\n\n .notifications {\n background: red;\n color: white;\n font-size: 12px;\n font-weight: bold;\n min-height: 22px;\n min-width: 22px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transform: translate(50%, 50%) scale(1);\n }\n\n .isConnected + .indicator {\n /* TODO: Add CSS var */\n background: #56C980;\n }\n\n .notifications:empty {\n transform: translate(50%, 50%) scale(0);\n }\n\n @keyframes sail {\n 0% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n 50% {\n transform: rotate(10deg) translate(0, -1px);\n }\n 100% {\n transform: rotate(-10deg) translate(0, 1px);\n }\n }\n\n @keyframes blink-opacity {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.25;\n }\n }\n\n @keyframes blink-indicator {\n 0%, 100% {\n background: #CCC;\n }\n 50% {\n background: #56C980;\n }\n }\n\n ${customStyles}\n</style>\n\n<button class=\"button\">\n\n <svg\n class=\"wanderLogo\"\n ${wanderLogo === \"none\" ? \"hidden\" : \"\"}\n viewBox=\"0 0 257 121\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <path d=\"M177.235 60.5134L131.532 2.56198C129.607 0.0634354 127.719 -0.344614 125.651 2.33897L79.8771 60.4191L124.181 100.462L128.483 8.72145L132.785 100.462L177.235 60.5134Z\"\n fill=\"${wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient1)\"}\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\" />\n <path d=\"M209.689 120.406L256.138 21.2852C257.135 19.114 254.755 16.9443 252.685 18.1364L183.231 58.0562L138.086 108.914L209.689 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient2)\"\n }\" />\n <path d=\"M47.211 120.406L0.762138 21.2853C-0.234245 19.1141 2.14523 16.9445 4.21552 18.1365L73.6694 58.0564L118.814 108.914L47.211 120.406Z\"\n fill=\"${\n wanderLogo === \"text-color\" ? \"currentColor\" : \"url(#gradient3)\"\n }\" />\n\n <defs>\n <linearGradient\n id=\"gradient1\"\n x1=\"128.213\"\n y1=\"100.462\"\n x2=\"128.213\"\n y2=\"0.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient2\"\n x1=\"156.561\"\n y1=\"80.0762\"\n x2=\"218.926\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n\n <linearGradient\n id=\"gradient3\"\n x1=\"100.34\"\n y1=\"80.0764\"\n x2=\"37.9744\"\n y2=\"115.502\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#6B57F9\"/>\n <stop offset=\"1\" stop-color=\"#9787FF\"/>\n </linearGradient>\n </defs>\n </svg>\n\n <span class=\"label\" ${showLabel ? \"\" : \"hidden\"}></span>\n <span class=\"balance\" ${showBalance ? \"\" : \"hidden\"} title=\"${\n i18n.loadingBalance\n}\"></span>\n</button>\n\n<span class=\"indicator\"></span>\n<span class=\"notifications\"></span>\n`;\n"]}
+229
-150
sdk-dist/components/iframe/wander-iframe.component.cjs
'use strict';
var tsDeepmerge = require('ts-deepmerge');
// src/wander-embedded.types.ts

@@ -16,27 +18,65 @@ var LAYOUT_TYPES = [

}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = tsDeepmerge.merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = tsDeepmerge.merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = tsDeepmerge.merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = tsDeepmerge.merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
customStyles,
cssVariableKeys = []
}) => {
return `
<style>
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
}
}
/* Base backdrop styles */
.backdrop {
position: fixed;
z-index: var(--zIndex, 9999);
z-index: calc(var(--zIndex) + 1);
inset: 0;
background: var(--backdropBackground, rgba(255, 255, 255, .0625));
backdrop-filter: var(--backdropBackdropFilter, blur(12px));
padding: var(--backdropPadding, 32px);
background: var(--backdropBackground);
backdrop-filter: var(--backdropBackdropFilter);
padding: var(--backdropPadding);
transition: opacity linear 150ms;

@@ -53,17 +93,17 @@ pointer-events: none;

/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
background: var(--background, white);
border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));
border-radius: var(--borderRadius, 10px);
box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));
width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));
min-width: calc(400px - 2 * var(--borderWidth, 2px));
min-height: calc(400px - 2 * var(--borderWidth, 2px));
max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
box-sizing: content-box;
transition: transform linear 150ms, opacity linear 150ms;
z-index: calc(var(--zIndex, 9999) + 3);
background: var(--background);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
width: calc(var(--preferredWidth) + 2 * var(--borderWidth));
height: calc(var(--preferredHeight) + 2 * var(--borderWidth));
min-width: 400px;
min-height: 400px;
max-width: calc(100dvw - 2 * var(--backdropPadding));
max-height: calc(100dvh - 2 * var(--backdropPadding));
box-sizing: border-box;
pointer-events: none;

@@ -88,5 +128,7 @@ opacity: 0;

/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
width: calc(50vw - 2 * var(--backdropPadding, 0px));
z-index: calc(var(--zIndex) + 2);
opacity: 0;

@@ -98,2 +140,3 @@ transition: opacity 300ms ease-in-out;

display: none;
}

@@ -103,9 +146,8 @@

opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}

@@ -115,6 +157,6 @@

right: 0;
width: 50vw;
}
/* Mobile styles */
@media (max-width: 540px) {

@@ -159,27 +201,29 @@ .backdrop {

/* Popup specific styles */
.iframe-wrapper[data-layout="popup"] {
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
.iframe-wrapper[data-layout="popup"][data-position="top-left"] {
top: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
top: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
top: var(--backdropPadding);
right: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
right: var(--backdropPadding);
}
/* Modal specific styles */
.iframe-wrapper[data-layout="modal"] {

@@ -189,64 +233,49 @@ top: 50%;

transform: translate(-50%, -50%);
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
opacity: 1;
transition: transform ease-in-out 150ms;
}
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
transition: opacity linear 150ms;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Right position - Sidebar & Half */
/* Right position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
border-width: 0;
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Left position - Sidebar & Half */
/* Left position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
border-width: 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);
}
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state - Sidebar */
/* Show transform state */
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show {
transform: translate(0, 0);

@@ -256,7 +285,8 @@ }

/* Expanded styles */
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;
height: var(--preferredHeight, 100dvh);
max-height: var(--preferredHeight, 100dvh);
height: var(--preferredHeight);
max-height: var(--preferredHeight);
border-radius: 0;

@@ -268,2 +298,3 @@ }

right: 0;
border-width: 0 0 0 var(--borderWidth);
}

@@ -274,2 +305,3 @@

left: 0;
border-width: 0 var(--borderWidth) 0 0;
}

@@ -289,8 +321,16 @@

this.imageBaseUrl = null;
this.options = options;
const { routeLayout } = options;
if (typeof routeLayout === "string" || isRouteConfig(routeLayout)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayout);
this.routeLayout = {
const cssVars = mergeCSSVariablesOption(
options.cssVars,
options.theme,
_WanderIframe.DEFAULT_LIGHT_CSS_VARS,
_WanderIframe.DEFAULT_DARK_CSS_VARS
);
const routeLayoutOption = options.routeLayout;
let routeLayout = null;
if (typeof routeLayoutOption === "string" || isRouteConfig(routeLayoutOption)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayoutOption);
routeLayout = {
default: defaultLayoutConfig,
auth: _WanderIframe.DEFAULT_CONFIG.routeLayout.auth,
account: _WanderIframe.DEFAULT_CONFIG.routeLayout.auth,
settings: defaultLayoutConfig,

@@ -300,18 +340,22 @@ "auth-request": defaultLayoutConfig

} else {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.default || "popup"
);
const authLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.auth || "modal"
);
this.routeLayout = {
const defaultLayoutConfig = routeLayoutOption?.default ? _WanderIframe.getLayoutConfig(routeLayoutOption?.default) : _WanderIframe.DEFAULT_CONFIG.routeLayout.default;
const authLayoutConfig = routeLayoutOption?.auth ? _WanderIframe.getLayoutConfig(routeLayoutOption?.auth) : _WanderIframe.DEFAULT_CONFIG.routeLayout.auth;
routeLayout = {
default: defaultLayoutConfig,
auth: authLayoutConfig,
account: _WanderIframe.getLayoutConfig(routeLayout?.account) || authLayoutConfig,
settings: _WanderIframe.getLayoutConfig(routeLayout?.settings) || defaultLayoutConfig,
"auth-request": _WanderIframe.getLayoutConfig(routeLayout?.["auth-request"]) || defaultLayoutConfig
account: routeLayoutOption?.account ? _WanderIframe.getLayoutConfig(routeLayoutOption.account) : authLayoutConfig,
settings: routeLayoutOption?.settings ? _WanderIframe.getLayoutConfig(routeLayoutOption.settings) : defaultLayoutConfig,
"auth-request": routeLayoutOption?.["auth-request"] ? _WanderIframe.getLayoutConfig(routeLayoutOption["auth-request"]) : defaultLayoutConfig
};
}
this.config = {
id: options.id || _WanderIframe.DEFAULT_CONFIG.id,
theme: options.theme || _WanderIframe.DEFAULT_CONFIG.theme,
cssVars,
customStyles: options.customStyles || _WanderIframe.DEFAULT_CONFIG.customStyles,
routeLayout,
clickOutsideBehavior: options.clickOutsideBehavior || _WanderIframe.DEFAULT_CONFIG.clickOutsideBehavior
};
this.imageBaseUrl = new URL(src).origin;
const elements = _WanderIframe.initializeIframe(src, options);
const elements = _WanderIframe.initializeIframe(src, this.config);
this.host = elements.host;

@@ -324,3 +368,3 @@ this.backdrop = elements.backdrop;

routeType: "auth",
preferredLayoutType: this.routeLayout.auth?.type || "modal",
preferredLayoutType: routeLayout.auth.type,
height: 0

@@ -336,16 +380,19 @@ });

static getLayoutConfig(layoutConfig) {
if (!layoutConfig) return void 0;
return typeof layoutConfig === "object" ? layoutConfig : _WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];
return typeof layoutConfig === "object" ? layoutConfig : {
type: layoutConfig
};
}
static initializeIframe(src, options) {
static initializeIframe(src, config) {
const host = document.createElement("div");
host.id = options.id || _WanderIframe.DEFAULT_IFRAME_ID;
host.id = config.id;
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
template.innerHTML = getWanderIframeTemplateContent({
customStyles: config.customStyles,
// TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:
cssVariableKeys: Object.keys(_WanderIframe.DEFAULT_LIGHT_CSS_VARS)
});
shadow.appendChild(template.content);
const backdrop = document.createElement("div");
backdrop.className = "backdrop";
backdrop.id = _WanderIframe.DEFAULT_BACKDROP_ID;
const wrapper = document.createElement("div");

@@ -394,3 +441,4 @@ wrapper.className = "iframe-wrapper";

resize(routeConfig) {
const layoutConfig = this.routeLayout[routeConfig.routeType] || _WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];
const { config, wrapper } = this;
const layoutConfig = config.routeLayout[routeConfig.routeType];
const layoutType = layoutConfig.type;

@@ -402,58 +450,58 @@ this.currentLayoutType = layoutType;

}
this.wrapper.dataset.layout = layoutType;
this.wrapper.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
if (this.options.cssVars && isThemeRecord(this.options.cssVars)) {
throw new Error("Not implemented yet");
}
const cssVars = {
...this.options.cssVars
};
wrapper.dataset.layout = layoutType;
wrapper.dataset.position = "";
wrapper.dataset.expanded = "";
wrapper.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
const layoutCssVarsUpdates = {};
switch (layoutConfig.type) {
case "modal": {
cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
break;
}
case "popup": {
const position = layoutConfig.position || "bottom-right";
this.wrapper.dataset.position = position;
cssVars.preferredWidth = layoutConfig.fixedWidth || "";
cssVars.preferredHeight = layoutConfig.fixedHeight || "";
wrapper.dataset.position = layoutConfig.position || "bottom-right";
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
break;
}
case "sidebar":
case "sidebar": {
wrapper.dataset.position = layoutConfig.position || "right";
wrapper.dataset.expanded = layoutConfig.expanded ? "true" : "false";
if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
break;
}
case "half": {
const position = layoutConfig.position || "right";
this.wrapper.dataset.position = position;
if (layoutConfig.expanded) {
this.wrapper.dataset.expanded = "true";
cssVars.backdropPadding = 0;
cssVars.borderRadius = 0;
const position = wrapper.dataset.position = layoutConfig.position || "right";
wrapper.dataset.expanded = layoutConfig.expanded ? "true" : "false";
if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;
layoutCssVarsUpdates.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))";
layoutCssVarsUpdates.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
this.halfImage.dataset.position = position === "left" ? "right" : "left";
this.halfImage.dataset.expanded = layoutConfig.expanded ? "true" : "false";
const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);
if (this.isOpen && imgSrc) {
this.halfImage.src = imgSrc;
this.halfImage.style.display = "block";
this.halfImage.classList.add("show");
} else {
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding = 8;
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
if (layoutConfig.type === "sidebar") {
cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
} else {
cssVars.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))";
cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
this.halfImage.dataset.position = position === "left" ? "right" : "left";
this.halfImage.dataset.expanded = layoutConfig.expanded ? "true" : "false";
const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);
if (this.isOpen && imgSrc) {
this.halfImage.src = imgSrc;
this.halfImage.style.display = "block";
this.halfImage.classList.add("show");
} else {
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
}
break;
}
}
addCSSVariables(this.backdrop, cssVars);
addCSSVariables(this.wrapper, cssVars);
this.host.removeAttribute("style");
addCSSVariables(
this.host,
{ ...config.cssVars.light, ...layoutCssVarsUpdates },
"Light"
);
addCSSVariables(
this.host,
{ ...config.cssVars.dark, ...layoutCssVarsUpdates },
"Dark"
);
}

@@ -464,17 +512,48 @@ destroy() {

};
_WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";
_WanderIframe.DEFAULT_IFRAME_ID = "wanderEmbeddedIframe";
_WanderIframe.DEFAULT_ROUTE_LAYOUT = {
modal: {
type: "modal"
_WanderIframe.DEFAULT_LIGHT_CSS_VARS = {
// Iframe Wrapper (div.iframe-wrapper)
background: "white",
borderWidth: 2,
borderColor: "rgba(0, 0, 0, .125)",
borderRadius: 10,
boxShadow: "0 0 16px 0 rgba(0, 0, 0, 0.125)",
zIndex: "9999",
preferredWidth: 400,
preferredHeight: 400,
// Iframe Content:
contentPadding: 0,
contentMaxWidth: 600,
contentMaxHeight: "100dvh",
// Backdrop (div):
backdropBackground: "rgba(255, 255, 255, .0625)",
backdropBackdropFilter: "blur(12px)",
backdropPadding: 8,
// Mobile-specific:
mobilePadding: 0,
mobileHeight: 0,
mobileBorderRadius: 0,
mobileBorderWidth: 0,
mobileBorderColor: "transparent",
mobileBoxShadow: "none"
};
_WanderIframe.DEFAULT_DARK_CSS_VARS = {
..._WanderIframe.DEFAULT_LIGHT_CSS_VARS,
background: "black"
};
_WanderIframe.DEFAULT_CONFIG = {
id: "wanderEmbeddedIframeHost",
theme: "system",
cssVars: {
light: _WanderIframe.DEFAULT_LIGHT_CSS_VARS,
dark: _WanderIframe.DEFAULT_DARK_CSS_VARS
},
popup: {
type: "popup"
customStyles: "",
routeLayout: {
default: _WanderIframe.getLayoutConfig("popup"),
auth: _WanderIframe.getLayoutConfig("modal"),
account: _WanderIframe.getLayoutConfig("modal"),
settings: _WanderIframe.getLayoutConfig("popup"),
"auth-request": _WanderIframe.getLayoutConfig("popup")
},
sidebar: {
type: "sidebar"
},
half: {
type: "half"
}
clickOutsideBehavior: true
};

@@ -481,0 +560,0 @@ _WanderIframe.IMAGE_EXTENSIONS = ["png", "webp"];

+1
-1
sdk-dist/components/iframe/wander-iframe.component.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.cjs","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n","export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n /* Base backdrop styles */\n .backdrop {\n position: fixed;\n z-index: var(--zIndex, 9999);\n inset: 0;\n background: var(--backdropBackground, rgba(255, 255, 255, .0625));\n backdrop-filter: var(--backdropBackdropFilter, blur(12px));\n padding: var(--backdropPadding, 32px);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n background: var(--background, white);\n border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));\n border-radius: var(--borderRadius, 10px);\n box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));\n width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));\n height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));\n min-width: calc(400px - 2 * var(--borderWidth, 2px));\n min-height: calc(400px - 2 * var(--borderWidth, 2px));\n max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n box-sizing: content-box;\n transition: transform linear 150ms, opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n .half-image {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .half-image.show {\n opacity: 1;\n pointer-events: auto;\n }\n\n /* Position-specific styles for half-image */\n .half-image[data-position=\"left\"] {\n left: 0;\n width: 50vw;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n width: 50vw;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n /* Modal specific styles */\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n\n /* Sidebar specific styles */\n .iframe-wrapper[data-layout=\"sidebar\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n\n /* Half specific styles */\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;\n }\n\n /* Right position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Right position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Left position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Left position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Hide transform states - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n /* Hide transform states - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n /* Show transform state */\n .iframe-wrapper[data-layout=\"sidebar\"].show,\n .iframe-wrapper[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight, 100dvh);\n max-height: var(--preferredHeight, 100dvh);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n","import { CSSProperties } from \"react\";\nimport {\n HalfLayoutConfig,\n ImgPath,\n isRouteConfig,\n isThemeRecord,\n LayoutConfig,\n LayoutType,\n ModalLayoutConfig,\n PopupLayoutConfig,\n RouteConfig,\n RouteType,\n SidebarLayoutConfig,\n WanderEmbeddedIframeConfig,\n WanderEmbeddedIframeOptions,\n WanderEmbeddedModalCSSVars\n} from \"../../wander-embedded.types\";\nimport { addCSSVariables } from \"../../utils/styles/styles.utils\";\nimport { getWanderIframeTemplateContent } from \"./wander-iframe.template\";\n\nexport class WanderIframe {\n static DEFAULT_BACKDROP_ID = \"wanderEmbeddedBackdrop\" as const;\n static DEFAULT_IFRAME_ID = \"wanderEmbeddedIframe\" as const;\n static DEFAULT_ROUTE_LAYOUT = {\n modal: {\n type: \"modal\"\n } as ModalLayoutConfig,\n popup: {\n type: \"popup\"\n } as PopupLayoutConfig,\n sidebar: {\n type: \"sidebar\"\n } as SidebarLayoutConfig,\n half: {\n type: \"half\"\n } as HalfLayoutConfig\n };\n static readonly IMAGE_EXTENSIONS = [\"png\", \"webp\"] as const;\n static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[] = [\n \"default\",\n \"auth\",\n \"account\",\n \"auth-request\",\n \"settings\"\n ];\n static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath> = new Set(\n WanderIframe.DEFAULT_ROUTE_TYPES.flatMap((route) =>\n WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}` as ImgPath)\n )\n );\n\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private wrapper: HTMLDivElement;\n private iframe: HTMLIFrameElement;\n private halfImage: HTMLImageElement;\n\n // Config (options):\n // private config: WanderEmbeddedIframeConfig;\n private options: WanderEmbeddedIframeOptions;\n private routeLayout: Partial<Record<RouteType, LayoutConfig>>;\n\n // State:\n private currentLayoutType: LayoutType | null = null;\n private isOpen = false;\n\n private imageBaseUrl: string | null = null;\n\n constructor(src: string, options: WanderEmbeddedIframeOptions = {}) {\n this.options = options;\n\n const { routeLayout } = options;\n\n if (typeof routeLayout === \"string\" || isRouteConfig(routeLayout)) {\n // If a single value is passed, we use it for default, settings and auth-request. auth and account fallbacks to\n // the default (currently modal):\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(routeLayout);\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n settings: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If only default and auth are defined by the developer, default is used for default, settings and auth-request,\n // while auth is used for auth and account:\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(\n routeLayout?.default || \"popup\"\n );\n\n const authLayoutConfig = WanderIframe.getLayoutConfig(\n routeLayout?.auth || \"modal\"\n );\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n auth: authLayoutConfig,\n account:\n WanderIframe.getLayoutConfig(routeLayout?.account) ||\n authLayoutConfig,\n settings:\n WanderIframe.getLayoutConfig(routeLayout?.settings) ||\n defaultLayoutConfig,\n \"auth-request\":\n WanderIframe.getLayoutConfig(routeLayout?.[\"auth-request\"]) ||\n defaultLayoutConfig\n };\n }\n\n this.imageBaseUrl = new URL(src).origin;\n const elements = WanderIframe.initializeIframe(src, options);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.wrapper = elements.wrapper;\n this.iframe = elements.iframe;\n this.halfImage = elements.halfImage;\n\n // Apply initial styling:\n\n this.resize({\n routeType: \"auth\",\n preferredLayoutType: this.routeLayout.auth?.type || \"modal\",\n height: 0\n });\n }\n\n private getRouteImageUrl(imgPath: string): string | null {\n if (!imgPath || !WanderIframe.ALLOWED_IMG_PATHS.has(imgPath as ImgPath)) {\n return null;\n }\n\n return `${this.imageBaseUrl}/assets/routes/${imgPath}`;\n }\n\n static getLayoutConfig(\n layoutConfig?: LayoutConfig | LayoutType\n ): LayoutConfig | undefined {\n if (!layoutConfig) return undefined;\n\n return typeof layoutConfig === \"object\"\n ? layoutConfig\n : WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];\n }\n\n static initializeIframe(src: string, options: WanderEmbeddedIframeOptions) {\n // TODO: Considering using a `<dialog>` element or adding proper aria- tags.\n const host = document.createElement(\"div\");\n host.id = options.id || WanderIframe.DEFAULT_IFRAME_ID;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n const customStyles =\n typeof options.customStyles === \"string\" ? options.customStyles : \"\";\n template.innerHTML = getWanderIframeTemplateContent({ customStyles });\n\n shadow.appendChild(template.content);\n\n const backdrop = document.createElement(\"div\");\n backdrop.className = \"backdrop\";\n backdrop.id = WanderIframe.DEFAULT_BACKDROP_ID;\n\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"iframe-wrapper\";\n\n const iframe = document.createElement(\"iframe\");\n iframe.className = \"iframe\";\n iframe.src = src;\n\n wrapper.appendChild(iframe);\n\n const halfImage = document.createElement(\"img\");\n halfImage.className = \"half-image\";\n\n // We don't add the iframe as a child of backdrop to have more control over the hide/show transitions:\n shadow.appendChild(wrapper);\n shadow.appendChild(backdrop);\n shadow.appendChild(halfImage);\n\n return {\n iframe,\n host,\n backdrop,\n wrapper,\n halfImage\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n wrapper: this.wrapper,\n iframe: this.iframe,\n halfImage: this.halfImage\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.wrapper.classList.add(\"show\");\n\n if (this.currentLayoutType === \"half\" && this.halfImage.src) {\n this.halfImage.classList.add(\"show\");\n }\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.wrapper.classList.remove(\"show\");\n this.halfImage.classList.remove(\"show\");\n }\n\n resize(routeConfig: RouteConfig): void {\n const layoutConfig =\n this.routeLayout[routeConfig.routeType] ||\n WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];\n\n const layoutType: LayoutType = layoutConfig.type;\n\n this.currentLayoutType = layoutType;\n\n // Reset image visibility when switching layouts\n if (layoutType !== \"half\") {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n this.wrapper.dataset.layout = layoutType;\n\n // Default to true, unless explicitly set to false, false is WIP\n this.wrapper.dataset.expandOnMobile =\n layoutConfig.expandOnMobile !== false ? \"true\" : \"false\";\n\n if (this.options.cssVars && isThemeRecord(this.options.cssVars)) {\n throw new Error(\"Not implemented yet\");\n }\n\n const cssVars: Partial<WanderEmbeddedModalCSSVars> = {\n ...this.options.cssVars\n };\n\n switch (layoutConfig.type) {\n case \"modal\": {\n // Modal resizes to fit content:\n cssVars.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n cssVars.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"popup\": {\n const position = layoutConfig.position || \"bottom-right\";\n this.wrapper.dataset.position = position;\n // Popup should not resize to fit content:\n cssVars.preferredWidth = layoutConfig.fixedWidth || \"\";\n cssVars.preferredHeight = layoutConfig.fixedHeight || \"\";\n break;\n }\n\n case \"sidebar\":\n case \"half\": {\n const position = layoutConfig.position || \"right\";\n this.wrapper.dataset.position = position;\n\n if (layoutConfig.expanded) {\n this.wrapper.dataset.expanded = \"true\";\n cssVars.backdropPadding = 0;\n cssVars.borderRadius = 0;\n } else {\n this.wrapper.dataset.expanded = \"false\";\n cssVars.backdropPadding = 8;\n }\n\n if (layoutConfig.type === \"sidebar\") {\n cssVars.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n cssVars.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n } else {\n cssVars.preferredWidth = \"calc(50vw - 2 * var(--backdropPadding, 0))\";\n cssVars.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n // Handle imgSrc for half layout\n this.halfImage.dataset.position =\n position === \"left\" ? \"right\" : \"left\";\n this.halfImage.dataset.expanded = layoutConfig.expanded\n ? \"true\"\n : \"false\";\n\n // Get the image url based on the route type\n const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);\n\n if (this.isOpen && imgSrc) {\n this.halfImage.src = imgSrc;\n this.halfImage.style.display = \"block\";\n this.halfImage.classList.add(\"show\");\n } else {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n }\n\n break;\n }\n }\n\n // Every time we change the layout type (e.g. going from the auth routes \"modal\" to the default routes \"popup\"), the\n // style attribute must be reset to avoid conflicts with leftover properties from the previous layout\n\n addCSSVariables(this.backdrop, cssVars);\n addCSSVariables(this.wrapper, cssVars);\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":["merge"],"mappings":"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","file":"wander-iframe.component.cjs","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n","export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n cssVariableKeys: string[];\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles,\n cssVariableKeys = []\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n /* Base backdrop styles */\n\n .backdrop {\n position: fixed;\n z-index: calc(var(--zIndex) + 1);\n inset: 0;\n background: var(--backdropBackground);\n backdrop-filter: var(--backdropBackdropFilter);\n padding: var(--backdropPadding);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 3);\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n width: calc(var(--preferredWidth) + 2 * var(--borderWidth));\n height: calc(var(--preferredHeight) + 2 * var(--borderWidth));\n min-width: 400px;\n min-height: 400px;\n max-width: calc(100dvw - 2 * var(--backdropPadding));\n max-height: calc(100dvh - 2 * var(--backdropPadding));\n box-sizing: border-box;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n\n .half-image {\n position: fixed;\n width: calc(50vw - 2 * var(--backdropPadding, 0px));\n z-index: calc(var(--zIndex) + 2);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n\n }\n\n .half-image.show {\n opacity: 1;\n }\n\n /* Position-specific styles for half-image */\n\n .half-image[data-position=\"left\"] {\n left: 0;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n }\n\n /* Mobile styles */\n\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n /* Modal specific styles */\n\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n /* Sidebar specific styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"] {\n opacity: 1;\n transition: transform ease-in-out 150ms;\n }\n\n /* Half specific styles */\n\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity linear 150ms;\n }\n\n /* Right position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Left position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Hide transform states - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);\n }\n\n /* Show transform state - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight);\n max-height: var(--preferredHeight);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n border-width: 0 0 0 var(--borderWidth);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n border-width: 0 var(--borderWidth) 0 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n","import {\n ImgPath,\n isRouteConfig,\n LayoutConfig,\n LayoutType,\n RouteConfig,\n RouteType,\n WanderEmbeddedIframeConfig,\n WanderEmbeddedIframeOptions,\n WanderEmbeddedIframeCSSVars\n} from \"../../wander-embedded.types\";\nimport {\n addCSSVariables,\n mergeCSSVariablesOption\n} from \"../../utils/styles/styles.utils\";\nimport { getWanderIframeTemplateContent } from \"./wander-iframe.template\";\n\nexport class WanderIframe {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedIframeCSSVars = {\n // Iframe Wrapper (div.iframe-wrapper)\n background: \"white\",\n borderWidth: 2,\n borderColor: \"rgba(0, 0, 0, .125)\",\n borderRadius: 10,\n boxShadow: \"0 0 16px 0 rgba(0, 0, 0, 0.125)\",\n zIndex: \"9999\",\n preferredWidth: 400,\n preferredHeight: 400,\n\n // Iframe Content:\n contentPadding: 0,\n contentMaxWidth: 600,\n contentMaxHeight: \"100dvh\",\n\n // Backdrop (div):\n backdropBackground: \"rgba(255, 255, 255, .0625)\",\n backdropBackdropFilter: \"blur(12px)\",\n backdropPadding: 8,\n\n // Mobile-specific:\n mobilePadding: 0,\n mobileHeight: 0,\n mobileBorderRadius: 0,\n mobileBorderWidth: 0,\n mobileBorderColor: \"transparent\",\n mobileBoxShadow: \"none\"\n } as const;\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedIframeCSSVars = {\n ...WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n background: \"black\"\n } as const;\n\n static DEFAULT_CONFIG = {\n id: \"wanderEmbeddedIframeHost\",\n theme: \"system\",\n cssVars: {\n light: WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderIframe.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n routeLayout: {\n default: WanderIframe.getLayoutConfig(\"popup\"),\n auth: WanderIframe.getLayoutConfig(\"modal\"),\n account: WanderIframe.getLayoutConfig(\"modal\"),\n settings: WanderIframe.getLayoutConfig(\"popup\"),\n \"auth-request\": WanderIframe.getLayoutConfig(\"popup\")\n },\n clickOutsideBehavior: true\n } as const satisfies WanderEmbeddedIframeConfig;\n\n static readonly IMAGE_EXTENSIONS = [\"png\", \"webp\"] as const;\n static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[] = [\n \"default\",\n \"auth\",\n \"account\",\n \"auth-request\",\n \"settings\"\n ];\n static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath> = new Set(\n WanderIframe.DEFAULT_ROUTE_TYPES.flatMap((route) =>\n WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}` as ImgPath)\n )\n );\n\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private wrapper: HTMLDivElement;\n private iframe: HTMLIFrameElement;\n private halfImage: HTMLImageElement;\n\n // Config (options):\n private config: WanderEmbeddedIframeConfig;\n\n // State:\n private currentLayoutType: LayoutType | null = null;\n private isOpen = false;\n\n private imageBaseUrl: string | null = null;\n\n constructor(src: string, options: WanderEmbeddedIframeOptions = {}) {\n const cssVars = mergeCSSVariablesOption(\n options.cssVars,\n options.theme,\n WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n WanderIframe.DEFAULT_DARK_CSS_VARS\n );\n\n const routeLayoutOption = options.routeLayout;\n\n let routeLayout: null | Record<RouteType, LayoutConfig> = null;\n\n if (\n typeof routeLayoutOption === \"string\" ||\n isRouteConfig(routeLayoutOption)\n ) {\n // If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and\n // \"account\" routes fall back to the default layout type (currently \"modal\"):\n\n const defaultLayoutConfig =\n WanderIframe.getLayoutConfig(routeLayoutOption);\n\n routeLayout = {\n default: defaultLayoutConfig,\n auth: WanderIframe.DEFAULT_CONFIG.routeLayout.auth,\n account: WanderIframe.DEFAULT_CONFIG.routeLayout.auth,\n settings: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback\n // for \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as\n // fallback for \"account\" routes:\n\n const defaultLayoutConfig = routeLayoutOption?.default\n ? WanderIframe.getLayoutConfig(routeLayoutOption?.default)\n : WanderIframe.DEFAULT_CONFIG.routeLayout.default;\n\n const authLayoutConfig = routeLayoutOption?.auth\n ? WanderIframe.getLayoutConfig(routeLayoutOption?.auth)\n : WanderIframe.DEFAULT_CONFIG.routeLayout.auth;\n\n routeLayout = {\n default: defaultLayoutConfig,\n auth: authLayoutConfig,\n account: routeLayoutOption?.account\n ? WanderIframe.getLayoutConfig(routeLayoutOption.account)\n : authLayoutConfig,\n settings: routeLayoutOption?.settings\n ? WanderIframe.getLayoutConfig(routeLayoutOption.settings)\n : defaultLayoutConfig,\n \"auth-request\": routeLayoutOption?.[\"auth-request\"]\n ? WanderIframe.getLayoutConfig(routeLayoutOption[\"auth-request\"])\n : defaultLayoutConfig\n };\n }\n\n this.config = {\n id: options.id || WanderIframe.DEFAULT_CONFIG.id,\n theme: options.theme || WanderIframe.DEFAULT_CONFIG.theme,\n cssVars,\n customStyles:\n options.customStyles || WanderIframe.DEFAULT_CONFIG.customStyles,\n routeLayout,\n clickOutsideBehavior:\n options.clickOutsideBehavior ||\n WanderIframe.DEFAULT_CONFIG.clickOutsideBehavior\n };\n\n this.imageBaseUrl = new URL(src).origin;\n\n const elements = WanderIframe.initializeIframe(src, this.config);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.wrapper = elements.wrapper;\n this.iframe = elements.iframe;\n this.halfImage = elements.halfImage;\n\n // Apply initial styling:\n\n this.resize({\n routeType: \"auth\",\n preferredLayoutType: routeLayout.auth.type,\n height: 0\n });\n }\n\n private getRouteImageUrl(imgPath: string): string | null {\n if (!imgPath || !WanderIframe.ALLOWED_IMG_PATHS.has(imgPath as ImgPath)) {\n return null;\n }\n\n return `${this.imageBaseUrl}/assets/routes/${imgPath}`;\n }\n\n static getLayoutConfig(\n layoutConfig: LayoutConfig | LayoutType\n ): LayoutConfig {\n return typeof layoutConfig === \"object\"\n ? layoutConfig\n : ({\n type: layoutConfig\n } satisfies LayoutConfig);\n }\n\n static initializeIframe(src: string, config: WanderEmbeddedIframeConfig) {\n // TODO: Considering using a `<dialog>` element or adding proper aria- tags.\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderIframeTemplateContent({\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderIframe.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const backdrop = document.createElement(\"div\");\n backdrop.className = \"backdrop\";\n\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"iframe-wrapper\";\n\n const iframe = document.createElement(\"iframe\");\n iframe.className = \"iframe\";\n iframe.src = src;\n\n wrapper.appendChild(iframe);\n\n const halfImage = document.createElement(\"img\");\n halfImage.className = \"half-image\";\n\n // We don't add the iframe as a child of backdrop to have more control over the hide/show transitions:\n shadow.appendChild(wrapper);\n shadow.appendChild(backdrop);\n shadow.appendChild(halfImage);\n\n return {\n iframe,\n host,\n backdrop,\n wrapper,\n halfImage\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n wrapper: this.wrapper,\n iframe: this.iframe,\n halfImage: this.halfImage\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.wrapper.classList.add(\"show\");\n\n if (this.currentLayoutType === \"half\" && this.halfImage.src) {\n this.halfImage.classList.add(\"show\");\n }\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.wrapper.classList.remove(\"show\");\n this.halfImage.classList.remove(\"show\");\n }\n\n resize(routeConfig: RouteConfig): void {\n const { config, wrapper } = this;\n const layoutConfig = config.routeLayout[routeConfig.routeType];\n const layoutType = layoutConfig.type;\n\n this.currentLayoutType = layoutType;\n\n // Reset image visibility when switching layouts\n if (layoutType !== \"half\") {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n // TODO: if (this.currentLayoutType !== layoutType) { ... }\n\n wrapper.dataset.layout = layoutType;\n wrapper.dataset.position = \"\";\n wrapper.dataset.expanded = \"\";\n\n // TODO: Default to true, unless explicitly set to false, false is WIP\n wrapper.dataset.expandOnMobile =\n layoutConfig.expandOnMobile !== false ? \"true\" : \"false\";\n\n const layoutCssVarsUpdates: Partial<WanderEmbeddedIframeCSSVars> = {};\n\n switch (layoutConfig.type) {\n case \"modal\": {\n // Modal resizes to fit content (unless fixed-size provided):\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"popup\": {\n wrapper.dataset.position = layoutConfig.position || \"bottom-right\";\n\n // Popup resizes to fit content (unless fixed-size provided):\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"sidebar\": {\n wrapper.dataset.position = layoutConfig.position || \"right\";\n wrapper.dataset.expanded = layoutConfig.expanded ? \"true\" : \"false\";\n\n if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;\n\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n break;\n }\n\n case \"half\": {\n const position = (wrapper.dataset.position =\n layoutConfig.position || \"right\");\n wrapper.dataset.expanded = layoutConfig.expanded ? \"true\" : \"false\";\n\n if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;\n\n layoutCssVarsUpdates.preferredWidth =\n \"calc(50vw - 2 * var(--backdropPadding, 0))\";\n layoutCssVarsUpdates.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n // TODO: Fix sidebar flying over the screen when initialized.\n // TODO: Make the image work for the sidebar too?\n // TODO: iframe.show + backdrop\n // TODO: iframe.show ~ .half-image\n // TODO: Do this with selectors alone:\n // Handle imgSrc for half layout\n this.halfImage.dataset.position =\n position === \"left\" ? \"right\" : \"left\";\n this.halfImage.dataset.expanded = layoutConfig.expanded\n ? \"true\"\n : \"false\";\n\n // Get the image url based on the route type\n const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);\n\n if (this.isOpen && imgSrc) {\n this.halfImage.src = imgSrc;\n this.halfImage.style.display = \"block\";\n this.halfImage.classList.add(\"show\");\n } else {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n break;\n }\n }\n\n // Every time we change the layout type (e.g. going from the auth routes \"modal\" to the default routes \"popup\"), the\n // style attribute must be reset to avoid conflicts with leftover properties from the previous layout\n\n this.host.removeAttribute(\"style\");\n\n addCSSVariables(\n this.host,\n { ...config.cssVars.light, ...layoutCssVarsUpdates },\n \"Light\"\n );\n\n addCSSVariables(\n this.host,\n { ...config.cssVars.dark, ...layoutCssVarsUpdates },\n \"Dark\"\n );\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
+22
-12
sdk-dist/components/iframe/wander-iframe.component.d.cts

@@ -1,11 +0,22 @@

import { M as ModalLayoutConfig, P as PopupLayoutConfig, S as SidebarLayoutConfig, H as HalfLayoutConfig, R as RouteType, I as ImgPath, e as WanderEmbeddedIframeOptions, L as LayoutConfig, f as LayoutType, g as RouteConfig } from '../../wander-embedded.types-DZt7tGOM.cjs';
import { f as WanderEmbeddedIframeCSSVars, L as LayoutConfig, R as RouteType, I as ImgPath, g as WanderEmbeddedIframeOptions, h as LayoutType, i as WanderEmbeddedIframeConfig, j as RouteConfig } from '../../wander-embedded.types-cWXjiYHr.cjs';
declare class WanderIframe {
static DEFAULT_BACKDROP_ID: "wanderEmbeddedBackdrop";
static DEFAULT_IFRAME_ID: "wanderEmbeddedIframe";
static DEFAULT_ROUTE_LAYOUT: {
modal: ModalLayoutConfig;
popup: PopupLayoutConfig;
sidebar: SidebarLayoutConfig;
half: HalfLayoutConfig;
static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedIframeCSSVars;
static DEFAULT_DARK_CSS_VARS: WanderEmbeddedIframeCSSVars;
static DEFAULT_CONFIG: {
readonly id: "wanderEmbeddedIframeHost";
readonly theme: "system";
readonly cssVars: {
readonly light: WanderEmbeddedIframeCSSVars;
readonly dark: WanderEmbeddedIframeCSSVars;
};
readonly customStyles: "";
readonly routeLayout: {
readonly default: LayoutConfig;
readonly auth: LayoutConfig;
readonly account: LayoutConfig;
readonly settings: LayoutConfig;
readonly "auth-request": LayoutConfig;
};
readonly clickOutsideBehavior: true;
};

@@ -20,4 +31,3 @@ static readonly IMAGE_EXTENSIONS: readonly ["png", "webp"];

private halfImage;
private options;
private routeLayout;
private config;
private currentLayoutType;

@@ -28,4 +38,4 @@ private isOpen;

private getRouteImageUrl;
static getLayoutConfig(layoutConfig?: LayoutConfig | LayoutType): LayoutConfig | undefined;
static initializeIframe(src: string, options: WanderEmbeddedIframeOptions): {
static getLayoutConfig(layoutConfig: LayoutConfig | LayoutType): LayoutConfig;
static initializeIframe(src: string, config: WanderEmbeddedIframeConfig): {
iframe: HTMLIFrameElement;

@@ -32,0 +42,0 @@ host: HTMLDivElement;

+22
-12
sdk-dist/components/iframe/wander-iframe.component.d.ts

@@ -1,11 +0,22 @@

import { M as ModalLayoutConfig, P as PopupLayoutConfig, S as SidebarLayoutConfig, H as HalfLayoutConfig, R as RouteType, I as ImgPath, e as WanderEmbeddedIframeOptions, L as LayoutConfig, f as LayoutType, g as RouteConfig } from '../../wander-embedded.types-DZt7tGOM.js';
import { f as WanderEmbeddedIframeCSSVars, L as LayoutConfig, R as RouteType, I as ImgPath, g as WanderEmbeddedIframeOptions, h as LayoutType, i as WanderEmbeddedIframeConfig, j as RouteConfig } from '../../wander-embedded.types-cWXjiYHr.js';
declare class WanderIframe {
static DEFAULT_BACKDROP_ID: "wanderEmbeddedBackdrop";
static DEFAULT_IFRAME_ID: "wanderEmbeddedIframe";
static DEFAULT_ROUTE_LAYOUT: {
modal: ModalLayoutConfig;
popup: PopupLayoutConfig;
sidebar: SidebarLayoutConfig;
half: HalfLayoutConfig;
static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedIframeCSSVars;
static DEFAULT_DARK_CSS_VARS: WanderEmbeddedIframeCSSVars;
static DEFAULT_CONFIG: {
readonly id: "wanderEmbeddedIframeHost";
readonly theme: "system";
readonly cssVars: {
readonly light: WanderEmbeddedIframeCSSVars;
readonly dark: WanderEmbeddedIframeCSSVars;
};
readonly customStyles: "";
readonly routeLayout: {
readonly default: LayoutConfig;
readonly auth: LayoutConfig;
readonly account: LayoutConfig;
readonly settings: LayoutConfig;
readonly "auth-request": LayoutConfig;
};
readonly clickOutsideBehavior: true;
};

@@ -20,4 +31,3 @@ static readonly IMAGE_EXTENSIONS: readonly ["png", "webp"];

private halfImage;
private options;
private routeLayout;
private config;
private currentLayoutType;

@@ -28,4 +38,4 @@ private isOpen;

private getRouteImageUrl;
static getLayoutConfig(layoutConfig?: LayoutConfig | LayoutType): LayoutConfig | undefined;
static initializeIframe(src: string, options: WanderEmbeddedIframeOptions): {
static getLayoutConfig(layoutConfig: LayoutConfig | LayoutType): LayoutConfig;
static initializeIframe(src: string, config: WanderEmbeddedIframeConfig): {
iframe: HTMLIFrameElement;

@@ -32,0 +42,0 @@ host: HTMLDivElement;

+269
-148
sdk-dist/components/iframe/wander-iframe.component.global.js

@@ -18,26 +18,108 @@ (function (exports) {

// node_modules/.pnpm/ts-deepmerge@7.0.2/node_modules/ts-deepmerge/esm/index.js
var isObject = (obj) => {
if (typeof obj === "object" && obj !== null) {
if (typeof Object.getPrototypeOf === "function") {
const prototype = Object.getPrototypeOf(obj);
return prototype === Object.prototype || prototype === null;
}
return Object.prototype.toString.call(obj) === "[object Object]";
}
return false;
};
var merge = (...objects) => objects.reduce((result, current) => {
if (Array.isArray(current)) {
throw new TypeError("Arguments provided to ts-deepmerge must be objects, not arrays.");
}
Object.keys(current).forEach((key) => {
if (["__proto__", "constructor", "prototype"].includes(key)) {
return;
}
if (Array.isArray(result[key]) && Array.isArray(current[key])) {
result[key] = merge.options.mergeArrays ? merge.options.uniqueArrayItems ? Array.from(new Set(result[key].concat(current[key]))) : [...result[key], ...current[key]] : current[key];
} else if (isObject(result[key]) && isObject(current[key])) {
result[key] = merge(result[key], current[key]);
} else {
result[key] = current[key] === void 0 ? merge.options.allowUndefinedOverrides ? current[key] : result[key] : current[key];
}
});
return result;
}, {});
var defaultOptions = {
allowUndefinedOverrides: true,
mergeArrays: true,
uniqueArrayItems: true
};
merge.options = defaultOptions;
merge.withOptions = (options, ...objects) => {
merge.options = Object.assign(Object.assign({}, defaultOptions), options);
const result = merge(...objects);
merge.options = defaultOptions;
return result;
};
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
customStyles,
cssVariableKeys = []
}) => {
return `
<style>
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
}
}
/* Base backdrop styles */
.backdrop {
position: fixed;
z-index: var(--zIndex, 9999);
z-index: calc(var(--zIndex) + 1);
inset: 0;
background: var(--backdropBackground, rgba(255, 255, 255, .0625));
backdrop-filter: var(--backdropBackdropFilter, blur(12px));
padding: var(--backdropPadding, 32px);
background: var(--backdropBackground);
backdrop-filter: var(--backdropBackdropFilter);
padding: var(--backdropPadding);
transition: opacity linear 150ms;

@@ -54,17 +136,17 @@ pointer-events: none;

/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
background: var(--background, white);
border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));
border-radius: var(--borderRadius, 10px);
box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));
width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));
min-width: calc(400px - 2 * var(--borderWidth, 2px));
min-height: calc(400px - 2 * var(--borderWidth, 2px));
max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
box-sizing: content-box;
transition: transform linear 150ms, opacity linear 150ms;
z-index: calc(var(--zIndex, 9999) + 3);
background: var(--background);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
width: calc(var(--preferredWidth) + 2 * var(--borderWidth));
height: calc(var(--preferredHeight) + 2 * var(--borderWidth));
min-width: 400px;
min-height: 400px;
max-width: calc(100dvw - 2 * var(--backdropPadding));
max-height: calc(100dvh - 2 * var(--backdropPadding));
box-sizing: border-box;
pointer-events: none;

@@ -89,5 +171,7 @@ opacity: 0;

/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
width: calc(50vw - 2 * var(--backdropPadding, 0px));
z-index: calc(var(--zIndex) + 2);
opacity: 0;

@@ -99,2 +183,3 @@ transition: opacity 300ms ease-in-out;

display: none;
}

@@ -104,9 +189,8 @@

opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}

@@ -116,6 +200,6 @@

right: 0;
width: 50vw;
}
/* Mobile styles */
@media (max-width: 540px) {

@@ -160,27 +244,29 @@ .backdrop {

/* Popup specific styles */
.iframe-wrapper[data-layout="popup"] {
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
.iframe-wrapper[data-layout="popup"][data-position="top-left"] {
top: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
top: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
top: var(--backdropPadding);
right: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
right: var(--backdropPadding);
}
/* Modal specific styles */
.iframe-wrapper[data-layout="modal"] {

@@ -190,64 +276,49 @@ top: 50%;

transform: translate(-50%, -50%);
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
opacity: 1;
transition: transform ease-in-out 150ms;
}
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
transition: opacity linear 150ms;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Right position - Sidebar & Half */
/* Right position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
border-width: 0;
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Left position - Sidebar & Half */
/* Left position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
border-width: 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);
}
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state - Sidebar */
/* Show transform state */
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show {
transform: translate(0, 0);

@@ -257,7 +328,8 @@ }

/* Expanded styles */
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;
height: var(--preferredHeight, 100dvh);
max-height: var(--preferredHeight, 100dvh);
height: var(--preferredHeight);
max-height: var(--preferredHeight);
border-radius: 0;

@@ -269,2 +341,3 @@ }

right: 0;
border-width: 0 0 0 var(--borderWidth);
}

@@ -275,2 +348,3 @@

left: 0;
border-width: 0 var(--borderWidth) 0 0;
}

@@ -290,8 +364,16 @@

this.imageBaseUrl = null;
this.options = options;
const { routeLayout } = options;
if (typeof routeLayout === "string" || isRouteConfig(routeLayout)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayout);
this.routeLayout = {
const cssVars = mergeCSSVariablesOption(
options.cssVars,
options.theme,
_WanderIframe.DEFAULT_LIGHT_CSS_VARS,
_WanderIframe.DEFAULT_DARK_CSS_VARS
);
const routeLayoutOption = options.routeLayout;
let routeLayout = null;
if (typeof routeLayoutOption === "string" || isRouteConfig(routeLayoutOption)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayoutOption);
routeLayout = {
default: defaultLayoutConfig,
auth: _WanderIframe.DEFAULT_CONFIG.routeLayout.auth,
account: _WanderIframe.DEFAULT_CONFIG.routeLayout.auth,
settings: defaultLayoutConfig,

@@ -301,18 +383,22 @@ "auth-request": defaultLayoutConfig

} else {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.default || "popup"
);
const authLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.auth || "modal"
);
this.routeLayout = {
const defaultLayoutConfig = routeLayoutOption?.default ? _WanderIframe.getLayoutConfig(routeLayoutOption?.default) : _WanderIframe.DEFAULT_CONFIG.routeLayout.default;
const authLayoutConfig = routeLayoutOption?.auth ? _WanderIframe.getLayoutConfig(routeLayoutOption?.auth) : _WanderIframe.DEFAULT_CONFIG.routeLayout.auth;
routeLayout = {
default: defaultLayoutConfig,
auth: authLayoutConfig,
account: _WanderIframe.getLayoutConfig(routeLayout?.account) || authLayoutConfig,
settings: _WanderIframe.getLayoutConfig(routeLayout?.settings) || defaultLayoutConfig,
"auth-request": _WanderIframe.getLayoutConfig(routeLayout?.["auth-request"]) || defaultLayoutConfig
account: routeLayoutOption?.account ? _WanderIframe.getLayoutConfig(routeLayoutOption.account) : authLayoutConfig,
settings: routeLayoutOption?.settings ? _WanderIframe.getLayoutConfig(routeLayoutOption.settings) : defaultLayoutConfig,
"auth-request": routeLayoutOption?.["auth-request"] ? _WanderIframe.getLayoutConfig(routeLayoutOption["auth-request"]) : defaultLayoutConfig
};
}
this.config = {
id: options.id || _WanderIframe.DEFAULT_CONFIG.id,
theme: options.theme || _WanderIframe.DEFAULT_CONFIG.theme,
cssVars,
customStyles: options.customStyles || _WanderIframe.DEFAULT_CONFIG.customStyles,
routeLayout,
clickOutsideBehavior: options.clickOutsideBehavior || _WanderIframe.DEFAULT_CONFIG.clickOutsideBehavior
};
this.imageBaseUrl = new URL(src).origin;
const elements = _WanderIframe.initializeIframe(src, options);
const elements = _WanderIframe.initializeIframe(src, this.config);
this.host = elements.host;

@@ -325,3 +411,3 @@ this.backdrop = elements.backdrop;

routeType: "auth",
preferredLayoutType: this.routeLayout.auth?.type || "modal",
preferredLayoutType: routeLayout.auth.type,
height: 0

@@ -337,16 +423,19 @@ });

static getLayoutConfig(layoutConfig) {
if (!layoutConfig) return void 0;
return typeof layoutConfig === "object" ? layoutConfig : _WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];
return typeof layoutConfig === "object" ? layoutConfig : {
type: layoutConfig
};
}
static initializeIframe(src, options) {
static initializeIframe(src, config) {
const host = document.createElement("div");
host.id = options.id || _WanderIframe.DEFAULT_IFRAME_ID;
host.id = config.id;
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
template.innerHTML = getWanderIframeTemplateContent({
customStyles: config.customStyles,
// TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:
cssVariableKeys: Object.keys(_WanderIframe.DEFAULT_LIGHT_CSS_VARS)
});
shadow.appendChild(template.content);
const backdrop = document.createElement("div");
backdrop.className = "backdrop";
backdrop.id = _WanderIframe.DEFAULT_BACKDROP_ID;
const wrapper = document.createElement("div");

@@ -395,3 +484,4 @@ wrapper.className = "iframe-wrapper";

resize(routeConfig) {
const layoutConfig = this.routeLayout[routeConfig.routeType] || _WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];
const { config, wrapper } = this;
const layoutConfig = config.routeLayout[routeConfig.routeType];
const layoutType = layoutConfig.type;

@@ -403,58 +493,58 @@ this.currentLayoutType = layoutType;

}
this.wrapper.dataset.layout = layoutType;
this.wrapper.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
if (this.options.cssVars && isThemeRecord(this.options.cssVars)) {
throw new Error("Not implemented yet");
}
const cssVars = {
...this.options.cssVars
};
wrapper.dataset.layout = layoutType;
wrapper.dataset.position = "";
wrapper.dataset.expanded = "";
wrapper.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
const layoutCssVarsUpdates = {};
switch (layoutConfig.type) {
case "modal": {
cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
break;
}
case "popup": {
const position = layoutConfig.position || "bottom-right";
this.wrapper.dataset.position = position;
cssVars.preferredWidth = layoutConfig.fixedWidth || "";
cssVars.preferredHeight = layoutConfig.fixedHeight || "";
wrapper.dataset.position = layoutConfig.position || "bottom-right";
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
break;
}
case "sidebar":
case "sidebar": {
wrapper.dataset.position = layoutConfig.position || "right";
wrapper.dataset.expanded = layoutConfig.expanded ? "true" : "false";
if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
break;
}
case "half": {
const position = layoutConfig.position || "right";
this.wrapper.dataset.position = position;
if (layoutConfig.expanded) {
this.wrapper.dataset.expanded = "true";
cssVars.backdropPadding = 0;
cssVars.borderRadius = 0;
const position = wrapper.dataset.position = layoutConfig.position || "right";
wrapper.dataset.expanded = layoutConfig.expanded ? "true" : "false";
if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;
layoutCssVarsUpdates.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))";
layoutCssVarsUpdates.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
this.halfImage.dataset.position = position === "left" ? "right" : "left";
this.halfImage.dataset.expanded = layoutConfig.expanded ? "true" : "false";
const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);
if (this.isOpen && imgSrc) {
this.halfImage.src = imgSrc;
this.halfImage.style.display = "block";
this.halfImage.classList.add("show");
} else {
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding = 8;
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
if (layoutConfig.type === "sidebar") {
cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
} else {
cssVars.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))";
cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
this.halfImage.dataset.position = position === "left" ? "right" : "left";
this.halfImage.dataset.expanded = layoutConfig.expanded ? "true" : "false";
const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);
if (this.isOpen && imgSrc) {
this.halfImage.src = imgSrc;
this.halfImage.style.display = "block";
this.halfImage.classList.add("show");
} else {
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
}
break;
}
}
addCSSVariables(this.backdrop, cssVars);
addCSSVariables(this.wrapper, cssVars);
this.host.removeAttribute("style");
addCSSVariables(
this.host,
{ ...config.cssVars.light, ...layoutCssVarsUpdates },
"Light"
);
addCSSVariables(
this.host,
{ ...config.cssVars.dark, ...layoutCssVarsUpdates },
"Dark"
);
}

@@ -465,17 +555,48 @@ destroy() {

};
_WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";
_WanderIframe.DEFAULT_IFRAME_ID = "wanderEmbeddedIframe";
_WanderIframe.DEFAULT_ROUTE_LAYOUT = {
modal: {
type: "modal"
_WanderIframe.DEFAULT_LIGHT_CSS_VARS = {
// Iframe Wrapper (div.iframe-wrapper)
background: "white",
borderWidth: 2,
borderColor: "rgba(0, 0, 0, .125)",
borderRadius: 10,
boxShadow: "0 0 16px 0 rgba(0, 0, 0, 0.125)",
zIndex: "9999",
preferredWidth: 400,
preferredHeight: 400,
// Iframe Content:
contentPadding: 0,
contentMaxWidth: 600,
contentMaxHeight: "100dvh",
// Backdrop (div):
backdropBackground: "rgba(255, 255, 255, .0625)",
backdropBackdropFilter: "blur(12px)",
backdropPadding: 8,
// Mobile-specific:
mobilePadding: 0,
mobileHeight: 0,
mobileBorderRadius: 0,
mobileBorderWidth: 0,
mobileBorderColor: "transparent",
mobileBoxShadow: "none"
};
_WanderIframe.DEFAULT_DARK_CSS_VARS = {
..._WanderIframe.DEFAULT_LIGHT_CSS_VARS,
background: "black"
};
_WanderIframe.DEFAULT_CONFIG = {
id: "wanderEmbeddedIframeHost",
theme: "system",
cssVars: {
light: _WanderIframe.DEFAULT_LIGHT_CSS_VARS,
dark: _WanderIframe.DEFAULT_DARK_CSS_VARS
},
popup: {
type: "popup"
customStyles: "",
routeLayout: {
default: _WanderIframe.getLayoutConfig("popup"),
auth: _WanderIframe.getLayoutConfig("modal"),
account: _WanderIframe.getLayoutConfig("modal"),
settings: _WanderIframe.getLayoutConfig("popup"),
"auth-request": _WanderIframe.getLayoutConfig("popup")
},
sidebar: {
type: "sidebar"
},
half: {
type: "half"
}
clickOutsideBehavior: true
};

@@ -482,0 +603,0 @@ _WanderIframe.IMAGE_EXTENSIONS = ["png", "webp"];

+1
-1
sdk-dist/component...e/wander-iframe.component.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.global.js","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n","export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n /* Base backdrop styles */\n .backdrop {\n position: fixed;\n z-index: var(--zIndex, 9999);\n inset: 0;\n background: var(--backdropBackground, rgba(255, 255, 255, .0625));\n backdrop-filter: var(--backdropBackdropFilter, blur(12px));\n padding: var(--backdropPadding, 32px);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n background: var(--background, white);\n border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));\n border-radius: var(--borderRadius, 10px);\n box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));\n width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));\n height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));\n min-width: calc(400px - 2 * var(--borderWidth, 2px));\n min-height: calc(400px - 2 * var(--borderWidth, 2px));\n max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n box-sizing: content-box;\n transition: transform linear 150ms, opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n .half-image {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .half-image.show {\n opacity: 1;\n pointer-events: auto;\n }\n\n /* Position-specific styles for half-image */\n .half-image[data-position=\"left\"] {\n left: 0;\n width: 50vw;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n width: 50vw;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n /* Modal specific styles */\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n\n /* Sidebar specific styles */\n .iframe-wrapper[data-layout=\"sidebar\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n\n /* Half specific styles */\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;\n }\n\n /* Right position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Right position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Left position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Left position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Hide transform states - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n /* Hide transform states - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n /* Show transform state */\n .iframe-wrapper[data-layout=\"sidebar\"].show,\n .iframe-wrapper[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight, 100dvh);\n max-height: var(--preferredHeight, 100dvh);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n","import { CSSProperties } from \"react\";\nimport {\n HalfLayoutConfig,\n ImgPath,\n isRouteConfig,\n isThemeRecord,\n LayoutConfig,\n LayoutType,\n ModalLayoutConfig,\n PopupLayoutConfig,\n RouteConfig,\n RouteType,\n SidebarLayoutConfig,\n WanderEmbeddedIframeConfig,\n WanderEmbeddedIframeOptions,\n WanderEmbeddedModalCSSVars\n} from \"../../wander-embedded.types\";\nimport { addCSSVariables } from \"../../utils/styles/styles.utils\";\nimport { getWanderIframeTemplateContent } from \"./wander-iframe.template\";\n\nexport class WanderIframe {\n static DEFAULT_BACKDROP_ID = \"wanderEmbeddedBackdrop\" as const;\n static DEFAULT_IFRAME_ID = \"wanderEmbeddedIframe\" as const;\n static DEFAULT_ROUTE_LAYOUT = {\n modal: {\n type: \"modal\"\n } as ModalLayoutConfig,\n popup: {\n type: \"popup\"\n } as PopupLayoutConfig,\n sidebar: {\n type: \"sidebar\"\n } as SidebarLayoutConfig,\n half: {\n type: \"half\"\n } as HalfLayoutConfig\n };\n static readonly IMAGE_EXTENSIONS = [\"png\", \"webp\"] as const;\n static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[] = [\n \"default\",\n \"auth\",\n \"account\",\n \"auth-request\",\n \"settings\"\n ];\n static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath> = new Set(\n WanderIframe.DEFAULT_ROUTE_TYPES.flatMap((route) =>\n WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}` as ImgPath)\n )\n );\n\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private wrapper: HTMLDivElement;\n private iframe: HTMLIFrameElement;\n private halfImage: HTMLImageElement;\n\n // Config (options):\n // private config: WanderEmbeddedIframeConfig;\n private options: WanderEmbeddedIframeOptions;\n private routeLayout: Partial<Record<RouteType, LayoutConfig>>;\n\n // State:\n private currentLayoutType: LayoutType | null = null;\n private isOpen = false;\n\n private imageBaseUrl: string | null = null;\n\n constructor(src: string, options: WanderEmbeddedIframeOptions = {}) {\n this.options = options;\n\n const { routeLayout } = options;\n\n if (typeof routeLayout === \"string\" || isRouteConfig(routeLayout)) {\n // If a single value is passed, we use it for default, settings and auth-request. auth and account fallbacks to\n // the default (currently modal):\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(routeLayout);\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n settings: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If only default and auth are defined by the developer, default is used for default, settings and auth-request,\n // while auth is used for auth and account:\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(\n routeLayout?.default || \"popup\"\n );\n\n const authLayoutConfig = WanderIframe.getLayoutConfig(\n routeLayout?.auth || \"modal\"\n );\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n auth: authLayoutConfig,\n account:\n WanderIframe.getLayoutConfig(routeLayout?.account) ||\n authLayoutConfig,\n settings:\n WanderIframe.getLayoutConfig(routeLayout?.settings) ||\n defaultLayoutConfig,\n \"auth-request\":\n WanderIframe.getLayoutConfig(routeLayout?.[\"auth-request\"]) ||\n defaultLayoutConfig\n };\n }\n\n this.imageBaseUrl = new URL(src).origin;\n const elements = WanderIframe.initializeIframe(src, options);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.wrapper = elements.wrapper;\n this.iframe = elements.iframe;\n this.halfImage = elements.halfImage;\n\n // Apply initial styling:\n\n this.resize({\n routeType: \"auth\",\n preferredLayoutType: this.routeLayout.auth?.type || \"modal\",\n height: 0\n });\n }\n\n private getRouteImageUrl(imgPath: string): string | null {\n if (!imgPath || !WanderIframe.ALLOWED_IMG_PATHS.has(imgPath as ImgPath)) {\n return null;\n }\n\n return `${this.imageBaseUrl}/assets/routes/${imgPath}`;\n }\n\n static getLayoutConfig(\n layoutConfig?: LayoutConfig | LayoutType\n ): LayoutConfig | undefined {\n if (!layoutConfig) return undefined;\n\n return typeof layoutConfig === \"object\"\n ? layoutConfig\n : WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];\n }\n\n static initializeIframe(src: string, options: WanderEmbeddedIframeOptions) {\n // TODO: Considering using a `<dialog>` element or adding proper aria- tags.\n const host = document.createElement(\"div\");\n host.id = options.id || WanderIframe.DEFAULT_IFRAME_ID;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n const customStyles =\n typeof options.customStyles === \"string\" ? options.customStyles : \"\";\n template.innerHTML = getWanderIframeTemplateContent({ customStyles });\n\n shadow.appendChild(template.content);\n\n const backdrop = document.createElement(\"div\");\n backdrop.className = \"backdrop\";\n backdrop.id = WanderIframe.DEFAULT_BACKDROP_ID;\n\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"iframe-wrapper\";\n\n const iframe = document.createElement(\"iframe\");\n iframe.className = \"iframe\";\n iframe.src = src;\n\n wrapper.appendChild(iframe);\n\n const halfImage = document.createElement(\"img\");\n halfImage.className = \"half-image\";\n\n // We don't add the iframe as a child of backdrop to have more control over the hide/show transitions:\n shadow.appendChild(wrapper);\n shadow.appendChild(backdrop);\n shadow.appendChild(halfImage);\n\n return {\n iframe,\n host,\n backdrop,\n wrapper,\n halfImage\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n wrapper: this.wrapper,\n iframe: this.iframe,\n halfImage: this.halfImage\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.wrapper.classList.add(\"show\");\n\n if (this.currentLayoutType === \"half\" && this.halfImage.src) {\n this.halfImage.classList.add(\"show\");\n }\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.wrapper.classList.remove(\"show\");\n this.halfImage.classList.remove(\"show\");\n }\n\n resize(routeConfig: RouteConfig): void {\n const layoutConfig =\n this.routeLayout[routeConfig.routeType] ||\n WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];\n\n const layoutType: LayoutType = layoutConfig.type;\n\n this.currentLayoutType = layoutType;\n\n // Reset image visibility when switching layouts\n if (layoutType !== \"half\") {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n this.wrapper.dataset.layout = layoutType;\n\n // Default to true, unless explicitly set to false, false is WIP\n this.wrapper.dataset.expandOnMobile =\n layoutConfig.expandOnMobile !== false ? \"true\" : \"false\";\n\n if (this.options.cssVars && isThemeRecord(this.options.cssVars)) {\n throw new Error(\"Not implemented yet\");\n }\n\n const cssVars: Partial<WanderEmbeddedModalCSSVars> = {\n ...this.options.cssVars\n };\n\n switch (layoutConfig.type) {\n case \"modal\": {\n // Modal resizes to fit content:\n cssVars.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n cssVars.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"popup\": {\n const position = layoutConfig.position || \"bottom-right\";\n this.wrapper.dataset.position = position;\n // Popup should not resize to fit content:\n cssVars.preferredWidth = layoutConfig.fixedWidth || \"\";\n cssVars.preferredHeight = layoutConfig.fixedHeight || \"\";\n break;\n }\n\n case \"sidebar\":\n case \"half\": {\n const position = layoutConfig.position || \"right\";\n this.wrapper.dataset.position = position;\n\n if (layoutConfig.expanded) {\n this.wrapper.dataset.expanded = \"true\";\n cssVars.backdropPadding = 0;\n cssVars.borderRadius = 0;\n } else {\n this.wrapper.dataset.expanded = \"false\";\n cssVars.backdropPadding = 8;\n }\n\n if (layoutConfig.type === \"sidebar\") {\n cssVars.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n cssVars.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n } else {\n cssVars.preferredWidth = \"calc(50vw - 2 * var(--backdropPadding, 0))\";\n cssVars.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n // Handle imgSrc for half layout\n this.halfImage.dataset.position =\n position === \"left\" ? \"right\" : \"left\";\n this.halfImage.dataset.expanded = layoutConfig.expanded\n ? \"true\"\n : \"false\";\n\n // Get the image url based on the route type\n const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);\n\n if (this.isOpen && imgSrc) {\n this.halfImage.src = imgSrc;\n this.halfImage.style.display = \"block\";\n this.halfImage.classList.add(\"show\");\n } else {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n }\n\n break;\n }\n }\n\n // Every time we change the layout type (e.g. going from the auth routes \"modal\" to the default routes \"popup\"), the\n // style attribute must be reset to avoid conflicts with leftover properties from the previous layout\n\n addCSSVariables(this.backdrop, cssVars);\n addCSSVariables(this.wrapper, cssVars);\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../node_modules/.pnpm/ts-deepmerge@7.0.2/node_modules/ts-deepmerge/esm/index.js","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.global.js","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","// istanbul ignore next\nconst isObject = (obj) => {\n if (typeof obj === \"object\" && obj !== null) {\n if (typeof Object.getPrototypeOf === \"function\") {\n const prototype = Object.getPrototypeOf(obj);\n return prototype === Object.prototype || prototype === null;\n }\n return Object.prototype.toString.call(obj) === \"[object Object]\";\n }\n return false;\n};\nexport const merge = (...objects) => objects.reduce((result, current) => {\n if (Array.isArray(current)) {\n throw new TypeError(\"Arguments provided to ts-deepmerge must be objects, not arrays.\");\n }\n Object.keys(current).forEach((key) => {\n if ([\"__proto__\", \"constructor\", \"prototype\"].includes(key)) {\n return;\n }\n if (Array.isArray(result[key]) && Array.isArray(current[key])) {\n result[key] = merge.options.mergeArrays\n ? merge.options.uniqueArrayItems\n ? Array.from(new Set(result[key].concat(current[key])))\n : [...result[key], ...current[key]]\n : current[key];\n }\n else if (isObject(result[key]) && isObject(current[key])) {\n result[key] = merge(result[key], current[key]);\n }\n else {\n result[key] =\n current[key] === undefined\n ? merge.options.allowUndefinedOverrides\n ? current[key]\n : result[key]\n : current[key];\n }\n });\n return result;\n}, {});\nconst defaultOptions = {\n allowUndefinedOverrides: true,\n mergeArrays: true,\n uniqueArrayItems: true,\n};\nmerge.options = defaultOptions;\nmerge.withOptions = (options, ...objects) => {\n merge.options = Object.assign(Object.assign({}, defaultOptions), options);\n const result = merge(...objects);\n merge.options = defaultOptions;\n return result;\n};\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n","export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n cssVariableKeys: string[];\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles,\n cssVariableKeys = []\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n /* Base backdrop styles */\n\n .backdrop {\n position: fixed;\n z-index: calc(var(--zIndex) + 1);\n inset: 0;\n background: var(--backdropBackground);\n backdrop-filter: var(--backdropBackdropFilter);\n padding: var(--backdropPadding);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 3);\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n width: calc(var(--preferredWidth) + 2 * var(--borderWidth));\n height: calc(var(--preferredHeight) + 2 * var(--borderWidth));\n min-width: 400px;\n min-height: 400px;\n max-width: calc(100dvw - 2 * var(--backdropPadding));\n max-height: calc(100dvh - 2 * var(--backdropPadding));\n box-sizing: border-box;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n\n .half-image {\n position: fixed;\n width: calc(50vw - 2 * var(--backdropPadding, 0px));\n z-index: calc(var(--zIndex) + 2);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n\n }\n\n .half-image.show {\n opacity: 1;\n }\n\n /* Position-specific styles for half-image */\n\n .half-image[data-position=\"left\"] {\n left: 0;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n }\n\n /* Mobile styles */\n\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n /* Modal specific styles */\n\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n /* Sidebar specific styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"] {\n opacity: 1;\n transition: transform ease-in-out 150ms;\n }\n\n /* Half specific styles */\n\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity linear 150ms;\n }\n\n /* Right position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Left position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Hide transform states - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);\n }\n\n /* Show transform state - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight);\n max-height: var(--preferredHeight);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n border-width: 0 0 0 var(--borderWidth);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n border-width: 0 var(--borderWidth) 0 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n","import {\n ImgPath,\n isRouteConfig,\n LayoutConfig,\n LayoutType,\n RouteConfig,\n RouteType,\n WanderEmbeddedIframeConfig,\n WanderEmbeddedIframeOptions,\n WanderEmbeddedIframeCSSVars\n} from \"../../wander-embedded.types\";\nimport {\n addCSSVariables,\n mergeCSSVariablesOption\n} from \"../../utils/styles/styles.utils\";\nimport { getWanderIframeTemplateContent } from \"./wander-iframe.template\";\n\nexport class WanderIframe {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedIframeCSSVars = {\n // Iframe Wrapper (div.iframe-wrapper)\n background: \"white\",\n borderWidth: 2,\n borderColor: \"rgba(0, 0, 0, .125)\",\n borderRadius: 10,\n boxShadow: \"0 0 16px 0 rgba(0, 0, 0, 0.125)\",\n zIndex: \"9999\",\n preferredWidth: 400,\n preferredHeight: 400,\n\n // Iframe Content:\n contentPadding: 0,\n contentMaxWidth: 600,\n contentMaxHeight: \"100dvh\",\n\n // Backdrop (div):\n backdropBackground: \"rgba(255, 255, 255, .0625)\",\n backdropBackdropFilter: \"blur(12px)\",\n backdropPadding: 8,\n\n // Mobile-specific:\n mobilePadding: 0,\n mobileHeight: 0,\n mobileBorderRadius: 0,\n mobileBorderWidth: 0,\n mobileBorderColor: \"transparent\",\n mobileBoxShadow: \"none\"\n } as const;\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedIframeCSSVars = {\n ...WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n background: \"black\"\n } as const;\n\n static DEFAULT_CONFIG = {\n id: \"wanderEmbeddedIframeHost\",\n theme: \"system\",\n cssVars: {\n light: WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderIframe.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n routeLayout: {\n default: WanderIframe.getLayoutConfig(\"popup\"),\n auth: WanderIframe.getLayoutConfig(\"modal\"),\n account: WanderIframe.getLayoutConfig(\"modal\"),\n settings: WanderIframe.getLayoutConfig(\"popup\"),\n \"auth-request\": WanderIframe.getLayoutConfig(\"popup\")\n },\n clickOutsideBehavior: true\n } as const satisfies WanderEmbeddedIframeConfig;\n\n static readonly IMAGE_EXTENSIONS = [\"png\", \"webp\"] as const;\n static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[] = [\n \"default\",\n \"auth\",\n \"account\",\n \"auth-request\",\n \"settings\"\n ];\n static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath> = new Set(\n WanderIframe.DEFAULT_ROUTE_TYPES.flatMap((route) =>\n WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}` as ImgPath)\n )\n );\n\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private wrapper: HTMLDivElement;\n private iframe: HTMLIFrameElement;\n private halfImage: HTMLImageElement;\n\n // Config (options):\n private config: WanderEmbeddedIframeConfig;\n\n // State:\n private currentLayoutType: LayoutType | null = null;\n private isOpen = false;\n\n private imageBaseUrl: string | null = null;\n\n constructor(src: string, options: WanderEmbeddedIframeOptions = {}) {\n const cssVars = mergeCSSVariablesOption(\n options.cssVars,\n options.theme,\n WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n WanderIframe.DEFAULT_DARK_CSS_VARS\n );\n\n const routeLayoutOption = options.routeLayout;\n\n let routeLayout: null | Record<RouteType, LayoutConfig> = null;\n\n if (\n typeof routeLayoutOption === \"string\" ||\n isRouteConfig(routeLayoutOption)\n ) {\n // If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and\n // \"account\" routes fall back to the default layout type (currently \"modal\"):\n\n const defaultLayoutConfig =\n WanderIframe.getLayoutConfig(routeLayoutOption);\n\n routeLayout = {\n default: defaultLayoutConfig,\n auth: WanderIframe.DEFAULT_CONFIG.routeLayout.auth,\n account: WanderIframe.DEFAULT_CONFIG.routeLayout.auth,\n settings: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback\n // for \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as\n // fallback for \"account\" routes:\n\n const defaultLayoutConfig = routeLayoutOption?.default\n ? WanderIframe.getLayoutConfig(routeLayoutOption?.default)\n : WanderIframe.DEFAULT_CONFIG.routeLayout.default;\n\n const authLayoutConfig = routeLayoutOption?.auth\n ? WanderIframe.getLayoutConfig(routeLayoutOption?.auth)\n : WanderIframe.DEFAULT_CONFIG.routeLayout.auth;\n\n routeLayout = {\n default: defaultLayoutConfig,\n auth: authLayoutConfig,\n account: routeLayoutOption?.account\n ? WanderIframe.getLayoutConfig(routeLayoutOption.account)\n : authLayoutConfig,\n settings: routeLayoutOption?.settings\n ? WanderIframe.getLayoutConfig(routeLayoutOption.settings)\n : defaultLayoutConfig,\n \"auth-request\": routeLayoutOption?.[\"auth-request\"]\n ? WanderIframe.getLayoutConfig(routeLayoutOption[\"auth-request\"])\n : defaultLayoutConfig\n };\n }\n\n this.config = {\n id: options.id || WanderIframe.DEFAULT_CONFIG.id,\n theme: options.theme || WanderIframe.DEFAULT_CONFIG.theme,\n cssVars,\n customStyles:\n options.customStyles || WanderIframe.DEFAULT_CONFIG.customStyles,\n routeLayout,\n clickOutsideBehavior:\n options.clickOutsideBehavior ||\n WanderIframe.DEFAULT_CONFIG.clickOutsideBehavior\n };\n\n this.imageBaseUrl = new URL(src).origin;\n\n const elements = WanderIframe.initializeIframe(src, this.config);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.wrapper = elements.wrapper;\n this.iframe = elements.iframe;\n this.halfImage = elements.halfImage;\n\n // Apply initial styling:\n\n this.resize({\n routeType: \"auth\",\n preferredLayoutType: routeLayout.auth.type,\n height: 0\n });\n }\n\n private getRouteImageUrl(imgPath: string): string | null {\n if (!imgPath || !WanderIframe.ALLOWED_IMG_PATHS.has(imgPath as ImgPath)) {\n return null;\n }\n\n return `${this.imageBaseUrl}/assets/routes/${imgPath}`;\n }\n\n static getLayoutConfig(\n layoutConfig: LayoutConfig | LayoutType\n ): LayoutConfig {\n return typeof layoutConfig === \"object\"\n ? layoutConfig\n : ({\n type: layoutConfig\n } satisfies LayoutConfig);\n }\n\n static initializeIframe(src: string, config: WanderEmbeddedIframeConfig) {\n // TODO: Considering using a `<dialog>` element or adding proper aria- tags.\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderIframeTemplateContent({\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderIframe.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const backdrop = document.createElement(\"div\");\n backdrop.className = \"backdrop\";\n\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"iframe-wrapper\";\n\n const iframe = document.createElement(\"iframe\");\n iframe.className = \"iframe\";\n iframe.src = src;\n\n wrapper.appendChild(iframe);\n\n const halfImage = document.createElement(\"img\");\n halfImage.className = \"half-image\";\n\n // We don't add the iframe as a child of backdrop to have more control over the hide/show transitions:\n shadow.appendChild(wrapper);\n shadow.appendChild(backdrop);\n shadow.appendChild(halfImage);\n\n return {\n iframe,\n host,\n backdrop,\n wrapper,\n halfImage\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n wrapper: this.wrapper,\n iframe: this.iframe,\n halfImage: this.halfImage\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.wrapper.classList.add(\"show\");\n\n if (this.currentLayoutType === \"half\" && this.halfImage.src) {\n this.halfImage.classList.add(\"show\");\n }\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.wrapper.classList.remove(\"show\");\n this.halfImage.classList.remove(\"show\");\n }\n\n resize(routeConfig: RouteConfig): void {\n const { config, wrapper } = this;\n const layoutConfig = config.routeLayout[routeConfig.routeType];\n const layoutType = layoutConfig.type;\n\n this.currentLayoutType = layoutType;\n\n // Reset image visibility when switching layouts\n if (layoutType !== \"half\") {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n // TODO: if (this.currentLayoutType !== layoutType) { ... }\n\n wrapper.dataset.layout = layoutType;\n wrapper.dataset.position = \"\";\n wrapper.dataset.expanded = \"\";\n\n // TODO: Default to true, unless explicitly set to false, false is WIP\n wrapper.dataset.expandOnMobile =\n layoutConfig.expandOnMobile !== false ? \"true\" : \"false\";\n\n const layoutCssVarsUpdates: Partial<WanderEmbeddedIframeCSSVars> = {};\n\n switch (layoutConfig.type) {\n case \"modal\": {\n // Modal resizes to fit content (unless fixed-size provided):\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"popup\": {\n wrapper.dataset.position = layoutConfig.position || \"bottom-right\";\n\n // Popup resizes to fit content (unless fixed-size provided):\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"sidebar\": {\n wrapper.dataset.position = layoutConfig.position || \"right\";\n wrapper.dataset.expanded = layoutConfig.expanded ? \"true\" : \"false\";\n\n if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;\n\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n break;\n }\n\n case \"half\": {\n const position = (wrapper.dataset.position =\n layoutConfig.position || \"right\");\n wrapper.dataset.expanded = layoutConfig.expanded ? \"true\" : \"false\";\n\n if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;\n\n layoutCssVarsUpdates.preferredWidth =\n \"calc(50vw - 2 * var(--backdropPadding, 0))\";\n layoutCssVarsUpdates.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n // TODO: Fix sidebar flying over the screen when initialized.\n // TODO: Make the image work for the sidebar too?\n // TODO: iframe.show + backdrop\n // TODO: iframe.show ~ .half-image\n // TODO: Do this with selectors alone:\n // Handle imgSrc for half layout\n this.halfImage.dataset.position =\n position === \"left\" ? \"right\" : \"left\";\n this.halfImage.dataset.expanded = layoutConfig.expanded\n ? \"true\"\n : \"false\";\n\n // Get the image url based on the route type\n const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);\n\n if (this.isOpen && imgSrc) {\n this.halfImage.src = imgSrc;\n this.halfImage.style.display = \"block\";\n this.halfImage.classList.add(\"show\");\n } else {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n break;\n }\n }\n\n // Every time we change the layout type (e.g. going from the auth routes \"modal\" to the default routes \"popup\"), the\n // style attribute must be reset to avoid conflicts with leftover properties from the previous layout\n\n this.host.removeAttribute(\"style\");\n\n addCSSVariables(\n this.host,\n { ...config.cssVars.light, ...layoutCssVarsUpdates },\n \"Light\"\n );\n\n addCSSVariables(\n this.host,\n { ...config.cssVars.dark, ...layoutCssVarsUpdates },\n \"Dark\"\n );\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
+229
-150
sdk-dist/components/iframe/wander-iframe.component.js

@@ -0,1 +1,3 @@

import { merge } from 'ts-deepmerge';
// src/wander-embedded.types.ts

@@ -14,27 +16,65 @@ var LAYOUT_TYPES = [

}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
customStyles,
cssVariableKeys = []
}) => {
return `
<style>
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
}
}
/* Base backdrop styles */
.backdrop {
position: fixed;
z-index: var(--zIndex, 9999);
z-index: calc(var(--zIndex) + 1);
inset: 0;
background: var(--backdropBackground, rgba(255, 255, 255, .0625));
backdrop-filter: var(--backdropBackdropFilter, blur(12px));
padding: var(--backdropPadding, 32px);
background: var(--backdropBackground);
backdrop-filter: var(--backdropBackdropFilter);
padding: var(--backdropPadding);
transition: opacity linear 150ms;

@@ -51,17 +91,17 @@ pointer-events: none;

/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
background: var(--background, white);
border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));
border-radius: var(--borderRadius, 10px);
box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));
width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));
min-width: calc(400px - 2 * var(--borderWidth, 2px));
min-height: calc(400px - 2 * var(--borderWidth, 2px));
max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
box-sizing: content-box;
transition: transform linear 150ms, opacity linear 150ms;
z-index: calc(var(--zIndex, 9999) + 3);
background: var(--background);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
width: calc(var(--preferredWidth) + 2 * var(--borderWidth));
height: calc(var(--preferredHeight) + 2 * var(--borderWidth));
min-width: 400px;
min-height: 400px;
max-width: calc(100dvw - 2 * var(--backdropPadding));
max-height: calc(100dvh - 2 * var(--backdropPadding));
box-sizing: border-box;
pointer-events: none;

@@ -86,5 +126,7 @@ opacity: 0;

/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
width: calc(50vw - 2 * var(--backdropPadding, 0px));
z-index: calc(var(--zIndex) + 2);
opacity: 0;

@@ -96,2 +138,3 @@ transition: opacity 300ms ease-in-out;

display: none;
}

@@ -101,9 +144,8 @@

opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}

@@ -113,6 +155,6 @@

right: 0;
width: 50vw;
}
/* Mobile styles */
@media (max-width: 540px) {

@@ -157,27 +199,29 @@ .backdrop {

/* Popup specific styles */
.iframe-wrapper[data-layout="popup"] {
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
.iframe-wrapper[data-layout="popup"][data-position="top-left"] {
top: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
top: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
top: var(--backdropPadding);
right: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
right: var(--backdropPadding);
}
/* Modal specific styles */
.iframe-wrapper[data-layout="modal"] {

@@ -187,64 +231,49 @@ top: 50%;

transform: translate(-50%, -50%);
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
opacity: 1;
transition: transform ease-in-out 150ms;
}
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
transition: opacity linear 150ms;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Right position - Sidebar & Half */
/* Right position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
border-width: 0;
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Left position - Sidebar & Half */
/* Left position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
border-width: 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);
}
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state - Sidebar */
/* Show transform state */
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show {
transform: translate(0, 0);

@@ -254,7 +283,8 @@ }

/* Expanded styles */
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;
height: var(--preferredHeight, 100dvh);
max-height: var(--preferredHeight, 100dvh);
height: var(--preferredHeight);
max-height: var(--preferredHeight);
border-radius: 0;

@@ -266,2 +296,3 @@ }

right: 0;
border-width: 0 0 0 var(--borderWidth);
}

@@ -272,2 +303,3 @@

left: 0;
border-width: 0 var(--borderWidth) 0 0;
}

@@ -287,8 +319,16 @@

this.imageBaseUrl = null;
this.options = options;
const { routeLayout } = options;
if (typeof routeLayout === "string" || isRouteConfig(routeLayout)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayout);
this.routeLayout = {
const cssVars = mergeCSSVariablesOption(
options.cssVars,
options.theme,
_WanderIframe.DEFAULT_LIGHT_CSS_VARS,
_WanderIframe.DEFAULT_DARK_CSS_VARS
);
const routeLayoutOption = options.routeLayout;
let routeLayout = null;
if (typeof routeLayoutOption === "string" || isRouteConfig(routeLayoutOption)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayoutOption);
routeLayout = {
default: defaultLayoutConfig,
auth: _WanderIframe.DEFAULT_CONFIG.routeLayout.auth,
account: _WanderIframe.DEFAULT_CONFIG.routeLayout.auth,
settings: defaultLayoutConfig,

@@ -298,18 +338,22 @@ "auth-request": defaultLayoutConfig

} else {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.default || "popup"
);
const authLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.auth || "modal"
);
this.routeLayout = {
const defaultLayoutConfig = routeLayoutOption?.default ? _WanderIframe.getLayoutConfig(routeLayoutOption?.default) : _WanderIframe.DEFAULT_CONFIG.routeLayout.default;
const authLayoutConfig = routeLayoutOption?.auth ? _WanderIframe.getLayoutConfig(routeLayoutOption?.auth) : _WanderIframe.DEFAULT_CONFIG.routeLayout.auth;
routeLayout = {
default: defaultLayoutConfig,
auth: authLayoutConfig,
account: _WanderIframe.getLayoutConfig(routeLayout?.account) || authLayoutConfig,
settings: _WanderIframe.getLayoutConfig(routeLayout?.settings) || defaultLayoutConfig,
"auth-request": _WanderIframe.getLayoutConfig(routeLayout?.["auth-request"]) || defaultLayoutConfig
account: routeLayoutOption?.account ? _WanderIframe.getLayoutConfig(routeLayoutOption.account) : authLayoutConfig,
settings: routeLayoutOption?.settings ? _WanderIframe.getLayoutConfig(routeLayoutOption.settings) : defaultLayoutConfig,
"auth-request": routeLayoutOption?.["auth-request"] ? _WanderIframe.getLayoutConfig(routeLayoutOption["auth-request"]) : defaultLayoutConfig
};
}
this.config = {
id: options.id || _WanderIframe.DEFAULT_CONFIG.id,
theme: options.theme || _WanderIframe.DEFAULT_CONFIG.theme,
cssVars,
customStyles: options.customStyles || _WanderIframe.DEFAULT_CONFIG.customStyles,
routeLayout,
clickOutsideBehavior: options.clickOutsideBehavior || _WanderIframe.DEFAULT_CONFIG.clickOutsideBehavior
};
this.imageBaseUrl = new URL(src).origin;
const elements = _WanderIframe.initializeIframe(src, options);
const elements = _WanderIframe.initializeIframe(src, this.config);
this.host = elements.host;

@@ -322,3 +366,3 @@ this.backdrop = elements.backdrop;

routeType: "auth",
preferredLayoutType: this.routeLayout.auth?.type || "modal",
preferredLayoutType: routeLayout.auth.type,
height: 0

@@ -334,16 +378,19 @@ });

static getLayoutConfig(layoutConfig) {
if (!layoutConfig) return void 0;
return typeof layoutConfig === "object" ? layoutConfig : _WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];
return typeof layoutConfig === "object" ? layoutConfig : {
type: layoutConfig
};
}
static initializeIframe(src, options) {
static initializeIframe(src, config) {
const host = document.createElement("div");
host.id = options.id || _WanderIframe.DEFAULT_IFRAME_ID;
host.id = config.id;
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
template.innerHTML = getWanderIframeTemplateContent({
customStyles: config.customStyles,
// TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:
cssVariableKeys: Object.keys(_WanderIframe.DEFAULT_LIGHT_CSS_VARS)
});
shadow.appendChild(template.content);
const backdrop = document.createElement("div");
backdrop.className = "backdrop";
backdrop.id = _WanderIframe.DEFAULT_BACKDROP_ID;
const wrapper = document.createElement("div");

@@ -392,3 +439,4 @@ wrapper.className = "iframe-wrapper";

resize(routeConfig) {
const layoutConfig = this.routeLayout[routeConfig.routeType] || _WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];
const { config, wrapper } = this;
const layoutConfig = config.routeLayout[routeConfig.routeType];
const layoutType = layoutConfig.type;

@@ -400,58 +448,58 @@ this.currentLayoutType = layoutType;

}
this.wrapper.dataset.layout = layoutType;
this.wrapper.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
if (this.options.cssVars && isThemeRecord(this.options.cssVars)) {
throw new Error("Not implemented yet");
}
const cssVars = {
...this.options.cssVars
};
wrapper.dataset.layout = layoutType;
wrapper.dataset.position = "";
wrapper.dataset.expanded = "";
wrapper.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
const layoutCssVarsUpdates = {};
switch (layoutConfig.type) {
case "modal": {
cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
break;
}
case "popup": {
const position = layoutConfig.position || "bottom-right";
this.wrapper.dataset.position = position;
cssVars.preferredWidth = layoutConfig.fixedWidth || "";
cssVars.preferredHeight = layoutConfig.fixedHeight || "";
wrapper.dataset.position = layoutConfig.position || "bottom-right";
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = layoutConfig.fixedHeight || routeConfig.height || "";
break;
}
case "sidebar":
case "sidebar": {
wrapper.dataset.position = layoutConfig.position || "right";
wrapper.dataset.expanded = layoutConfig.expanded ? "true" : "false";
if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;
layoutCssVarsUpdates.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
layoutCssVarsUpdates.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
break;
}
case "half": {
const position = layoutConfig.position || "right";
this.wrapper.dataset.position = position;
if (layoutConfig.expanded) {
this.wrapper.dataset.expanded = "true";
cssVars.backdropPadding = 0;
cssVars.borderRadius = 0;
const position = wrapper.dataset.position = layoutConfig.position || "right";
wrapper.dataset.expanded = layoutConfig.expanded ? "true" : "false";
if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;
layoutCssVarsUpdates.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))";
layoutCssVarsUpdates.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
this.halfImage.dataset.position = position === "left" ? "right" : "left";
this.halfImage.dataset.expanded = layoutConfig.expanded ? "true" : "false";
const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);
if (this.isOpen && imgSrc) {
this.halfImage.src = imgSrc;
this.halfImage.style.display = "block";
this.halfImage.classList.add("show");
} else {
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding = 8;
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
if (layoutConfig.type === "sidebar") {
cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width || "";
cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
} else {
cssVars.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))";
cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))";
this.halfImage.dataset.position = position === "left" ? "right" : "left";
this.halfImage.dataset.expanded = layoutConfig.expanded ? "true" : "false";
const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);
if (this.isOpen && imgSrc) {
this.halfImage.src = imgSrc;
this.halfImage.style.display = "block";
this.halfImage.classList.add("show");
} else {
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
}
break;
}
}
addCSSVariables(this.backdrop, cssVars);
addCSSVariables(this.wrapper, cssVars);
this.host.removeAttribute("style");
addCSSVariables(
this.host,
{ ...config.cssVars.light, ...layoutCssVarsUpdates },
"Light"
);
addCSSVariables(
this.host,
{ ...config.cssVars.dark, ...layoutCssVarsUpdates },
"Dark"
);
}

@@ -462,17 +510,48 @@ destroy() {

};
_WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";
_WanderIframe.DEFAULT_IFRAME_ID = "wanderEmbeddedIframe";
_WanderIframe.DEFAULT_ROUTE_LAYOUT = {
modal: {
type: "modal"
_WanderIframe.DEFAULT_LIGHT_CSS_VARS = {
// Iframe Wrapper (div.iframe-wrapper)
background: "white",
borderWidth: 2,
borderColor: "rgba(0, 0, 0, .125)",
borderRadius: 10,
boxShadow: "0 0 16px 0 rgba(0, 0, 0, 0.125)",
zIndex: "9999",
preferredWidth: 400,
preferredHeight: 400,
// Iframe Content:
contentPadding: 0,
contentMaxWidth: 600,
contentMaxHeight: "100dvh",
// Backdrop (div):
backdropBackground: "rgba(255, 255, 255, .0625)",
backdropBackdropFilter: "blur(12px)",
backdropPadding: 8,
// Mobile-specific:
mobilePadding: 0,
mobileHeight: 0,
mobileBorderRadius: 0,
mobileBorderWidth: 0,
mobileBorderColor: "transparent",
mobileBoxShadow: "none"
};
_WanderIframe.DEFAULT_DARK_CSS_VARS = {
..._WanderIframe.DEFAULT_LIGHT_CSS_VARS,
background: "black"
};
_WanderIframe.DEFAULT_CONFIG = {
id: "wanderEmbeddedIframeHost",
theme: "system",
cssVars: {
light: _WanderIframe.DEFAULT_LIGHT_CSS_VARS,
dark: _WanderIframe.DEFAULT_DARK_CSS_VARS
},
popup: {
type: "popup"
customStyles: "",
routeLayout: {
default: _WanderIframe.getLayoutConfig("popup"),
auth: _WanderIframe.getLayoutConfig("modal"),
account: _WanderIframe.getLayoutConfig("modal"),
settings: _WanderIframe.getLayoutConfig("popup"),
"auth-request": _WanderIframe.getLayoutConfig("popup")
},
sidebar: {
type: "sidebar"
},
half: {
type: "half"
}
clickOutsideBehavior: true
};

@@ -479,0 +558,0 @@ _WanderIframe.IMAGE_EXTENSIONS = ["png", "webp"];

+1
-1
sdk-dist/components/iframe/wander-iframe.component.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.js","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n","export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n /* Base backdrop styles */\n .backdrop {\n position: fixed;\n z-index: var(--zIndex, 9999);\n inset: 0;\n background: var(--backdropBackground, rgba(255, 255, 255, .0625));\n backdrop-filter: var(--backdropBackdropFilter, blur(12px));\n padding: var(--backdropPadding, 32px);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n background: var(--background, white);\n border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));\n border-radius: var(--borderRadius, 10px);\n box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));\n width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));\n height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));\n min-width: calc(400px - 2 * var(--borderWidth, 2px));\n min-height: calc(400px - 2 * var(--borderWidth, 2px));\n max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n box-sizing: content-box;\n transition: transform linear 150ms, opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n .half-image {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .half-image.show {\n opacity: 1;\n pointer-events: auto;\n }\n\n /* Position-specific styles for half-image */\n .half-image[data-position=\"left\"] {\n left: 0;\n width: 50vw;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n width: 50vw;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n /* Modal specific styles */\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n\n /* Sidebar specific styles */\n .iframe-wrapper[data-layout=\"sidebar\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n\n /* Half specific styles */\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;\n }\n\n /* Right position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Right position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Left position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Left position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Hide transform states - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n /* Hide transform states - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n /* Show transform state */\n .iframe-wrapper[data-layout=\"sidebar\"].show,\n .iframe-wrapper[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight, 100dvh);\n max-height: var(--preferredHeight, 100dvh);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n","import { CSSProperties } from \"react\";\nimport {\n HalfLayoutConfig,\n ImgPath,\n isRouteConfig,\n isThemeRecord,\n LayoutConfig,\n LayoutType,\n ModalLayoutConfig,\n PopupLayoutConfig,\n RouteConfig,\n RouteType,\n SidebarLayoutConfig,\n WanderEmbeddedIframeConfig,\n WanderEmbeddedIframeOptions,\n WanderEmbeddedModalCSSVars\n} from \"../../wander-embedded.types\";\nimport { addCSSVariables } from \"../../utils/styles/styles.utils\";\nimport { getWanderIframeTemplateContent } from \"./wander-iframe.template\";\n\nexport class WanderIframe {\n static DEFAULT_BACKDROP_ID = \"wanderEmbeddedBackdrop\" as const;\n static DEFAULT_IFRAME_ID = \"wanderEmbeddedIframe\" as const;\n static DEFAULT_ROUTE_LAYOUT = {\n modal: {\n type: \"modal\"\n } as ModalLayoutConfig,\n popup: {\n type: \"popup\"\n } as PopupLayoutConfig,\n sidebar: {\n type: \"sidebar\"\n } as SidebarLayoutConfig,\n half: {\n type: \"half\"\n } as HalfLayoutConfig\n };\n static readonly IMAGE_EXTENSIONS = [\"png\", \"webp\"] as const;\n static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[] = [\n \"default\",\n \"auth\",\n \"account\",\n \"auth-request\",\n \"settings\"\n ];\n static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath> = new Set(\n WanderIframe.DEFAULT_ROUTE_TYPES.flatMap((route) =>\n WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}` as ImgPath)\n )\n );\n\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private wrapper: HTMLDivElement;\n private iframe: HTMLIFrameElement;\n private halfImage: HTMLImageElement;\n\n // Config (options):\n // private config: WanderEmbeddedIframeConfig;\n private options: WanderEmbeddedIframeOptions;\n private routeLayout: Partial<Record<RouteType, LayoutConfig>>;\n\n // State:\n private currentLayoutType: LayoutType | null = null;\n private isOpen = false;\n\n private imageBaseUrl: string | null = null;\n\n constructor(src: string, options: WanderEmbeddedIframeOptions = {}) {\n this.options = options;\n\n const { routeLayout } = options;\n\n if (typeof routeLayout === \"string\" || isRouteConfig(routeLayout)) {\n // If a single value is passed, we use it for default, settings and auth-request. auth and account fallbacks to\n // the default (currently modal):\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(routeLayout);\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n settings: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If only default and auth are defined by the developer, default is used for default, settings and auth-request,\n // while auth is used for auth and account:\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(\n routeLayout?.default || \"popup\"\n );\n\n const authLayoutConfig = WanderIframe.getLayoutConfig(\n routeLayout?.auth || \"modal\"\n );\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n auth: authLayoutConfig,\n account:\n WanderIframe.getLayoutConfig(routeLayout?.account) ||\n authLayoutConfig,\n settings:\n WanderIframe.getLayoutConfig(routeLayout?.settings) ||\n defaultLayoutConfig,\n \"auth-request\":\n WanderIframe.getLayoutConfig(routeLayout?.[\"auth-request\"]) ||\n defaultLayoutConfig\n };\n }\n\n this.imageBaseUrl = new URL(src).origin;\n const elements = WanderIframe.initializeIframe(src, options);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.wrapper = elements.wrapper;\n this.iframe = elements.iframe;\n this.halfImage = elements.halfImage;\n\n // Apply initial styling:\n\n this.resize({\n routeType: \"auth\",\n preferredLayoutType: this.routeLayout.auth?.type || \"modal\",\n height: 0\n });\n }\n\n private getRouteImageUrl(imgPath: string): string | null {\n if (!imgPath || !WanderIframe.ALLOWED_IMG_PATHS.has(imgPath as ImgPath)) {\n return null;\n }\n\n return `${this.imageBaseUrl}/assets/routes/${imgPath}`;\n }\n\n static getLayoutConfig(\n layoutConfig?: LayoutConfig | LayoutType\n ): LayoutConfig | undefined {\n if (!layoutConfig) return undefined;\n\n return typeof layoutConfig === \"object\"\n ? layoutConfig\n : WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];\n }\n\n static initializeIframe(src: string, options: WanderEmbeddedIframeOptions) {\n // TODO: Considering using a `<dialog>` element or adding proper aria- tags.\n const host = document.createElement(\"div\");\n host.id = options.id || WanderIframe.DEFAULT_IFRAME_ID;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n const customStyles =\n typeof options.customStyles === \"string\" ? options.customStyles : \"\";\n template.innerHTML = getWanderIframeTemplateContent({ customStyles });\n\n shadow.appendChild(template.content);\n\n const backdrop = document.createElement(\"div\");\n backdrop.className = \"backdrop\";\n backdrop.id = WanderIframe.DEFAULT_BACKDROP_ID;\n\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"iframe-wrapper\";\n\n const iframe = document.createElement(\"iframe\");\n iframe.className = \"iframe\";\n iframe.src = src;\n\n wrapper.appendChild(iframe);\n\n const halfImage = document.createElement(\"img\");\n halfImage.className = \"half-image\";\n\n // We don't add the iframe as a child of backdrop to have more control over the hide/show transitions:\n shadow.appendChild(wrapper);\n shadow.appendChild(backdrop);\n shadow.appendChild(halfImage);\n\n return {\n iframe,\n host,\n backdrop,\n wrapper,\n halfImage\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n wrapper: this.wrapper,\n iframe: this.iframe,\n halfImage: this.halfImage\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.wrapper.classList.add(\"show\");\n\n if (this.currentLayoutType === \"half\" && this.halfImage.src) {\n this.halfImage.classList.add(\"show\");\n }\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.wrapper.classList.remove(\"show\");\n this.halfImage.classList.remove(\"show\");\n }\n\n resize(routeConfig: RouteConfig): void {\n const layoutConfig =\n this.routeLayout[routeConfig.routeType] ||\n WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];\n\n const layoutType: LayoutType = layoutConfig.type;\n\n this.currentLayoutType = layoutType;\n\n // Reset image visibility when switching layouts\n if (layoutType !== \"half\") {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n this.wrapper.dataset.layout = layoutType;\n\n // Default to true, unless explicitly set to false, false is WIP\n this.wrapper.dataset.expandOnMobile =\n layoutConfig.expandOnMobile !== false ? \"true\" : \"false\";\n\n if (this.options.cssVars && isThemeRecord(this.options.cssVars)) {\n throw new Error(\"Not implemented yet\");\n }\n\n const cssVars: Partial<WanderEmbeddedModalCSSVars> = {\n ...this.options.cssVars\n };\n\n switch (layoutConfig.type) {\n case \"modal\": {\n // Modal resizes to fit content:\n cssVars.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n cssVars.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"popup\": {\n const position = layoutConfig.position || \"bottom-right\";\n this.wrapper.dataset.position = position;\n // Popup should not resize to fit content:\n cssVars.preferredWidth = layoutConfig.fixedWidth || \"\";\n cssVars.preferredHeight = layoutConfig.fixedHeight || \"\";\n break;\n }\n\n case \"sidebar\":\n case \"half\": {\n const position = layoutConfig.position || \"right\";\n this.wrapper.dataset.position = position;\n\n if (layoutConfig.expanded) {\n this.wrapper.dataset.expanded = \"true\";\n cssVars.backdropPadding = 0;\n cssVars.borderRadius = 0;\n } else {\n this.wrapper.dataset.expanded = \"false\";\n cssVars.backdropPadding = 8;\n }\n\n if (layoutConfig.type === \"sidebar\") {\n cssVars.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n cssVars.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n } else {\n cssVars.preferredWidth = \"calc(50vw - 2 * var(--backdropPadding, 0))\";\n cssVars.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n // Handle imgSrc for half layout\n this.halfImage.dataset.position =\n position === \"left\" ? \"right\" : \"left\";\n this.halfImage.dataset.expanded = layoutConfig.expanded\n ? \"true\"\n : \"false\";\n\n // Get the image url based on the route type\n const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);\n\n if (this.isOpen && imgSrc) {\n this.halfImage.src = imgSrc;\n this.halfImage.style.display = \"block\";\n this.halfImage.classList.add(\"show\");\n } else {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n }\n\n break;\n }\n }\n\n // Every time we change the layout type (e.g. going from the auth routes \"modal\" to the default routes \"popup\"), the\n // style attribute must be reset to avoid conflicts with leftover properties from the previous layout\n\n addCSSVariables(this.backdrop, cssVars);\n addCSSVariables(this.wrapper, cssVars);\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.js","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n","export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n cssVariableKeys: string[];\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles,\n cssVariableKeys = []\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n /* Base backdrop styles */\n\n .backdrop {\n position: fixed;\n z-index: calc(var(--zIndex) + 1);\n inset: 0;\n background: var(--backdropBackground);\n backdrop-filter: var(--backdropBackdropFilter);\n padding: var(--backdropPadding);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 3);\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n width: calc(var(--preferredWidth) + 2 * var(--borderWidth));\n height: calc(var(--preferredHeight) + 2 * var(--borderWidth));\n min-width: 400px;\n min-height: 400px;\n max-width: calc(100dvw - 2 * var(--backdropPadding));\n max-height: calc(100dvh - 2 * var(--backdropPadding));\n box-sizing: border-box;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n\n .half-image {\n position: fixed;\n width: calc(50vw - 2 * var(--backdropPadding, 0px));\n z-index: calc(var(--zIndex) + 2);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n\n }\n\n .half-image.show {\n opacity: 1;\n }\n\n /* Position-specific styles for half-image */\n\n .half-image[data-position=\"left\"] {\n left: 0;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n }\n\n /* Mobile styles */\n\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n /* Modal specific styles */\n\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n /* Sidebar specific styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"] {\n opacity: 1;\n transition: transform ease-in-out 150ms;\n }\n\n /* Half specific styles */\n\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity linear 150ms;\n }\n\n /* Right position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Left position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Hide transform states - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);\n }\n\n /* Show transform state - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight);\n max-height: var(--preferredHeight);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n border-width: 0 0 0 var(--borderWidth);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n border-width: 0 var(--borderWidth) 0 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n","import {\n ImgPath,\n isRouteConfig,\n LayoutConfig,\n LayoutType,\n RouteConfig,\n RouteType,\n WanderEmbeddedIframeConfig,\n WanderEmbeddedIframeOptions,\n WanderEmbeddedIframeCSSVars\n} from \"../../wander-embedded.types\";\nimport {\n addCSSVariables,\n mergeCSSVariablesOption\n} from \"../../utils/styles/styles.utils\";\nimport { getWanderIframeTemplateContent } from \"./wander-iframe.template\";\n\nexport class WanderIframe {\n static DEFAULT_LIGHT_CSS_VARS: WanderEmbeddedIframeCSSVars = {\n // Iframe Wrapper (div.iframe-wrapper)\n background: \"white\",\n borderWidth: 2,\n borderColor: \"rgba(0, 0, 0, .125)\",\n borderRadius: 10,\n boxShadow: \"0 0 16px 0 rgba(0, 0, 0, 0.125)\",\n zIndex: \"9999\",\n preferredWidth: 400,\n preferredHeight: 400,\n\n // Iframe Content:\n contentPadding: 0,\n contentMaxWidth: 600,\n contentMaxHeight: \"100dvh\",\n\n // Backdrop (div):\n backdropBackground: \"rgba(255, 255, 255, .0625)\",\n backdropBackdropFilter: \"blur(12px)\",\n backdropPadding: 8,\n\n // Mobile-specific:\n mobilePadding: 0,\n mobileHeight: 0,\n mobileBorderRadius: 0,\n mobileBorderWidth: 0,\n mobileBorderColor: \"transparent\",\n mobileBoxShadow: \"none\"\n } as const;\n\n static DEFAULT_DARK_CSS_VARS: WanderEmbeddedIframeCSSVars = {\n ...WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n background: \"black\"\n } as const;\n\n static DEFAULT_CONFIG = {\n id: \"wanderEmbeddedIframeHost\",\n theme: \"system\",\n cssVars: {\n light: WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n dark: WanderIframe.DEFAULT_DARK_CSS_VARS\n },\n customStyles: \"\",\n routeLayout: {\n default: WanderIframe.getLayoutConfig(\"popup\"),\n auth: WanderIframe.getLayoutConfig(\"modal\"),\n account: WanderIframe.getLayoutConfig(\"modal\"),\n settings: WanderIframe.getLayoutConfig(\"popup\"),\n \"auth-request\": WanderIframe.getLayoutConfig(\"popup\")\n },\n clickOutsideBehavior: true\n } as const satisfies WanderEmbeddedIframeConfig;\n\n static readonly IMAGE_EXTENSIONS = [\"png\", \"webp\"] as const;\n static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[] = [\n \"default\",\n \"auth\",\n \"account\",\n \"auth-request\",\n \"settings\"\n ];\n static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath> = new Set(\n WanderIframe.DEFAULT_ROUTE_TYPES.flatMap((route) =>\n WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}` as ImgPath)\n )\n );\n\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private wrapper: HTMLDivElement;\n private iframe: HTMLIFrameElement;\n private halfImage: HTMLImageElement;\n\n // Config (options):\n private config: WanderEmbeddedIframeConfig;\n\n // State:\n private currentLayoutType: LayoutType | null = null;\n private isOpen = false;\n\n private imageBaseUrl: string | null = null;\n\n constructor(src: string, options: WanderEmbeddedIframeOptions = {}) {\n const cssVars = mergeCSSVariablesOption(\n options.cssVars,\n options.theme,\n WanderIframe.DEFAULT_LIGHT_CSS_VARS,\n WanderIframe.DEFAULT_DARK_CSS_VARS\n );\n\n const routeLayoutOption = options.routeLayout;\n\n let routeLayout: null | Record<RouteType, LayoutConfig> = null;\n\n if (\n typeof routeLayoutOption === \"string\" ||\n isRouteConfig(routeLayoutOption)\n ) {\n // If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and\n // \"account\" routes fall back to the default layout type (currently \"modal\"):\n\n const defaultLayoutConfig =\n WanderIframe.getLayoutConfig(routeLayoutOption);\n\n routeLayout = {\n default: defaultLayoutConfig,\n auth: WanderIframe.DEFAULT_CONFIG.routeLayout.auth,\n account: WanderIframe.DEFAULT_CONFIG.routeLayout.auth,\n settings: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback\n // for \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as\n // fallback for \"account\" routes:\n\n const defaultLayoutConfig = routeLayoutOption?.default\n ? WanderIframe.getLayoutConfig(routeLayoutOption?.default)\n : WanderIframe.DEFAULT_CONFIG.routeLayout.default;\n\n const authLayoutConfig = routeLayoutOption?.auth\n ? WanderIframe.getLayoutConfig(routeLayoutOption?.auth)\n : WanderIframe.DEFAULT_CONFIG.routeLayout.auth;\n\n routeLayout = {\n default: defaultLayoutConfig,\n auth: authLayoutConfig,\n account: routeLayoutOption?.account\n ? WanderIframe.getLayoutConfig(routeLayoutOption.account)\n : authLayoutConfig,\n settings: routeLayoutOption?.settings\n ? WanderIframe.getLayoutConfig(routeLayoutOption.settings)\n : defaultLayoutConfig,\n \"auth-request\": routeLayoutOption?.[\"auth-request\"]\n ? WanderIframe.getLayoutConfig(routeLayoutOption[\"auth-request\"])\n : defaultLayoutConfig\n };\n }\n\n this.config = {\n id: options.id || WanderIframe.DEFAULT_CONFIG.id,\n theme: options.theme || WanderIframe.DEFAULT_CONFIG.theme,\n cssVars,\n customStyles:\n options.customStyles || WanderIframe.DEFAULT_CONFIG.customStyles,\n routeLayout,\n clickOutsideBehavior:\n options.clickOutsideBehavior ||\n WanderIframe.DEFAULT_CONFIG.clickOutsideBehavior\n };\n\n this.imageBaseUrl = new URL(src).origin;\n\n const elements = WanderIframe.initializeIframe(src, this.config);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.wrapper = elements.wrapper;\n this.iframe = elements.iframe;\n this.halfImage = elements.halfImage;\n\n // Apply initial styling:\n\n this.resize({\n routeType: \"auth\",\n preferredLayoutType: routeLayout.auth.type,\n height: 0\n });\n }\n\n private getRouteImageUrl(imgPath: string): string | null {\n if (!imgPath || !WanderIframe.ALLOWED_IMG_PATHS.has(imgPath as ImgPath)) {\n return null;\n }\n\n return `${this.imageBaseUrl}/assets/routes/${imgPath}`;\n }\n\n static getLayoutConfig(\n layoutConfig: LayoutConfig | LayoutType\n ): LayoutConfig {\n return typeof layoutConfig === \"object\"\n ? layoutConfig\n : ({\n type: layoutConfig\n } satisfies LayoutConfig);\n }\n\n static initializeIframe(src: string, config: WanderEmbeddedIframeConfig) {\n // TODO: Considering using a `<dialog>` element or adding proper aria- tags.\n const host = document.createElement(\"div\");\n\n host.id = config.id;\n\n const shadow = host.attachShadow({ mode: \"open\" });\n const template = document.createElement(\"template\");\n\n template.innerHTML = getWanderIframeTemplateContent({\n customStyles: config.customStyles,\n // TODO: It would be better to create an interface with the subset of vars that we can override when changing themes:\n cssVariableKeys: Object.keys(WanderIframe.DEFAULT_LIGHT_CSS_VARS)\n });\n\n shadow.appendChild(template.content);\n\n const backdrop = document.createElement(\"div\");\n backdrop.className = \"backdrop\";\n\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"iframe-wrapper\";\n\n const iframe = document.createElement(\"iframe\");\n iframe.className = \"iframe\";\n iframe.src = src;\n\n wrapper.appendChild(iframe);\n\n const halfImage = document.createElement(\"img\");\n halfImage.className = \"half-image\";\n\n // We don't add the iframe as a child of backdrop to have more control over the hide/show transitions:\n shadow.appendChild(wrapper);\n shadow.appendChild(backdrop);\n shadow.appendChild(halfImage);\n\n return {\n iframe,\n host,\n backdrop,\n wrapper,\n halfImage\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n wrapper: this.wrapper,\n iframe: this.iframe,\n halfImage: this.halfImage\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.wrapper.classList.add(\"show\");\n\n if (this.currentLayoutType === \"half\" && this.halfImage.src) {\n this.halfImage.classList.add(\"show\");\n }\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.wrapper.classList.remove(\"show\");\n this.halfImage.classList.remove(\"show\");\n }\n\n resize(routeConfig: RouteConfig): void {\n const { config, wrapper } = this;\n const layoutConfig = config.routeLayout[routeConfig.routeType];\n const layoutType = layoutConfig.type;\n\n this.currentLayoutType = layoutType;\n\n // Reset image visibility when switching layouts\n if (layoutType !== \"half\") {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n // TODO: if (this.currentLayoutType !== layoutType) { ... }\n\n wrapper.dataset.layout = layoutType;\n wrapper.dataset.position = \"\";\n wrapper.dataset.expanded = \"\";\n\n // TODO: Default to true, unless explicitly set to false, false is WIP\n wrapper.dataset.expandOnMobile =\n layoutConfig.expandOnMobile !== false ? \"true\" : \"false\";\n\n const layoutCssVarsUpdates: Partial<WanderEmbeddedIframeCSSVars> = {};\n\n switch (layoutConfig.type) {\n case \"modal\": {\n // Modal resizes to fit content (unless fixed-size provided):\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"popup\": {\n wrapper.dataset.position = layoutConfig.position || \"bottom-right\";\n\n // Popup resizes to fit content (unless fixed-size provided):\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n layoutConfig.fixedHeight || routeConfig.height || \"\";\n break;\n }\n\n case \"sidebar\": {\n wrapper.dataset.position = layoutConfig.position || \"right\";\n wrapper.dataset.expanded = layoutConfig.expanded ? \"true\" : \"false\";\n\n if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;\n\n layoutCssVarsUpdates.preferredWidth =\n layoutConfig.fixedWidth || routeConfig.width || \"\";\n layoutCssVarsUpdates.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n break;\n }\n\n case \"half\": {\n const position = (wrapper.dataset.position =\n layoutConfig.position || \"right\");\n wrapper.dataset.expanded = layoutConfig.expanded ? \"true\" : \"false\";\n\n if (layoutConfig.expanded) layoutCssVarsUpdates.backdropPadding = 0;\n\n layoutCssVarsUpdates.preferredWidth =\n \"calc(50vw - 2 * var(--backdropPadding, 0))\";\n layoutCssVarsUpdates.preferredHeight =\n \"calc(100dvh - 2 * var(--backdropPadding, 0))\";\n\n // TODO: Fix sidebar flying over the screen when initialized.\n // TODO: Make the image work for the sidebar too?\n // TODO: iframe.show + backdrop\n // TODO: iframe.show ~ .half-image\n // TODO: Do this with selectors alone:\n // Handle imgSrc for half layout\n this.halfImage.dataset.position =\n position === \"left\" ? \"right\" : \"left\";\n this.halfImage.dataset.expanded = layoutConfig.expanded\n ? \"true\"\n : \"false\";\n\n // Get the image url based on the route type\n const imgSrc = this.getRouteImageUrl(`${routeConfig.routeType}.png`);\n\n if (this.isOpen && imgSrc) {\n this.halfImage.src = imgSrc;\n this.halfImage.style.display = \"block\";\n this.halfImage.classList.add(\"show\");\n } else {\n this.halfImage.style.display = \"none\";\n this.halfImage.classList.remove(\"show\");\n }\n\n break;\n }\n }\n\n // Every time we change the layout type (e.g. going from the auth routes \"modal\" to the default routes \"popup\"), the\n // style attribute must be reset to avoid conflicts with leftover properties from the previous layout\n\n this.host.removeAttribute(\"style\");\n\n addCSSVariables(\n this.host,\n { ...config.cssVars.light, ...layoutCssVarsUpdates },\n \"Light\"\n );\n\n addCSSVariables(\n this.host,\n { ...config.cssVars.dark, ...layoutCssVarsUpdates },\n \"Dark\"\n );\n }\n\n destroy() {\n this.host?.remove();\n }\n}\n"]}
+76
-65
sdk-dist/components/iframe/wander-iframe.template.cjs

@@ -5,14 +5,33 @@ 'use strict';

var getWanderIframeTemplateContent = ({
customStyles
customStyles,
cssVariableKeys = []
}) => {
return `
<style>
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
}
}
/* Base backdrop styles */
.backdrop {
position: fixed;
z-index: var(--zIndex, 9999);
z-index: calc(var(--zIndex) + 1);
inset: 0;
background: var(--backdropBackground, rgba(255, 255, 255, .0625));
backdrop-filter: var(--backdropBackdropFilter, blur(12px));
padding: var(--backdropPadding, 32px);
background: var(--backdropBackground);
backdrop-filter: var(--backdropBackdropFilter);
padding: var(--backdropPadding);
transition: opacity linear 150ms;

@@ -29,17 +48,17 @@ pointer-events: none;

/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
background: var(--background, white);
border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));
border-radius: var(--borderRadius, 10px);
box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));
width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));
min-width: calc(400px - 2 * var(--borderWidth, 2px));
min-height: calc(400px - 2 * var(--borderWidth, 2px));
max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
box-sizing: content-box;
transition: transform linear 150ms, opacity linear 150ms;
z-index: calc(var(--zIndex, 9999) + 3);
background: var(--background);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
width: calc(var(--preferredWidth) + 2 * var(--borderWidth));
height: calc(var(--preferredHeight) + 2 * var(--borderWidth));
min-width: 400px;
min-height: 400px;
max-width: calc(100dvw - 2 * var(--backdropPadding));
max-height: calc(100dvh - 2 * var(--backdropPadding));
box-sizing: border-box;
pointer-events: none;

@@ -64,5 +83,7 @@ opacity: 0;

/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
width: calc(50vw - 2 * var(--backdropPadding, 0px));
z-index: calc(var(--zIndex) + 2);
opacity: 0;

@@ -74,2 +95,3 @@ transition: opacity 300ms ease-in-out;

display: none;
}

@@ -79,9 +101,8 @@

opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}

@@ -91,6 +112,6 @@

right: 0;
width: 50vw;
}
/* Mobile styles */
@media (max-width: 540px) {

@@ -135,27 +156,29 @@ .backdrop {

/* Popup specific styles */
.iframe-wrapper[data-layout="popup"] {
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
.iframe-wrapper[data-layout="popup"][data-position="top-left"] {
top: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
top: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
top: var(--backdropPadding);
right: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
right: var(--backdropPadding);
}
/* Modal specific styles */
.iframe-wrapper[data-layout="modal"] {

@@ -165,64 +188,49 @@ top: 50%;

transform: translate(-50%, -50%);
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
opacity: 1;
transition: transform ease-in-out 150ms;
}
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
transition: opacity linear 150ms;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Right position - Sidebar & Half */
/* Right position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
border-width: 0;
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Left position - Sidebar & Half */
/* Left position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
border-width: 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);
}
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state - Sidebar */
/* Show transform state */
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show {
transform: translate(0, 0);

@@ -232,7 +240,8 @@ }

/* Expanded styles */
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;
height: var(--preferredHeight, 100dvh);
max-height: var(--preferredHeight, 100dvh);
height: var(--preferredHeight);
max-height: var(--preferredHeight);
border-radius: 0;

@@ -244,2 +253,3 @@ }

right: 0;
border-width: 0 0 0 var(--borderWidth);
}

@@ -250,2 +260,3 @@

left: 0;
border-width: 0 var(--borderWidth) 0 0;
}

@@ -252,0 +263,0 @@ 

+1
-1
sdk-dist/components/iframe/wander-iframe.template.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";;;AAIO,IAAM,iCAAiC,CAAC;AAAA,EAC7C;AACF,CAA0C,KAAA;AACxC,EAAO,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA,IAAA,EA2OH,YAAY;AAAA;AAAA,CAAA;AAGlB","file":"wander-iframe.template.cjs","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n /* Base backdrop styles */\n .backdrop {\n position: fixed;\n z-index: var(--zIndex, 9999);\n inset: 0;\n background: var(--backdropBackground, rgba(255, 255, 255, .0625));\n backdrop-filter: var(--backdropBackdropFilter, blur(12px));\n padding: var(--backdropPadding, 32px);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n background: var(--background, white);\n border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));\n border-radius: var(--borderRadius, 10px);\n box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));\n width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));\n height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));\n min-width: calc(400px - 2 * var(--borderWidth, 2px));\n min-height: calc(400px - 2 * var(--borderWidth, 2px));\n max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n box-sizing: content-box;\n transition: transform linear 150ms, opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n .half-image {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .half-image.show {\n opacity: 1;\n pointer-events: auto;\n }\n\n /* Position-specific styles for half-image */\n .half-image[data-position=\"left\"] {\n left: 0;\n width: 50vw;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n width: 50vw;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n /* Modal specific styles */\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n\n /* Sidebar specific styles */\n .iframe-wrapper[data-layout=\"sidebar\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n\n /* Half specific styles */\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;\n }\n\n /* Right position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Right position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Left position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Left position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Hide transform states - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n /* Hide transform states - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n /* Show transform state */\n .iframe-wrapper[data-layout=\"sidebar\"].show,\n .iframe-wrapper[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight, 100dvh);\n max-height: var(--preferredHeight, 100dvh);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n"]}
{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";;;AAKO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,YAAA;AAAA,EACA,kBAAkB;AACpB,CAA0C,KAAA;AACxC,EAAO,OAAA;AAAA;;AAAA;AAAA;AAAA,QAKC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,IAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,OAAA,CAAA;AAAA,GACpD,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA,QAMX,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,IAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AAAA,GACpD,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,IAAA,EAsOf,YAAY;AAAA;AAAA,CAAA;AAGlB","file":"wander-iframe.template.cjs","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n cssVariableKeys: string[];\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles,\n cssVariableKeys = []\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n /* Base backdrop styles */\n\n .backdrop {\n position: fixed;\n z-index: calc(var(--zIndex) + 1);\n inset: 0;\n background: var(--backdropBackground);\n backdrop-filter: var(--backdropBackdropFilter);\n padding: var(--backdropPadding);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 3);\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n width: calc(var(--preferredWidth) + 2 * var(--borderWidth));\n height: calc(var(--preferredHeight) + 2 * var(--borderWidth));\n min-width: 400px;\n min-height: 400px;\n max-width: calc(100dvw - 2 * var(--backdropPadding));\n max-height: calc(100dvh - 2 * var(--backdropPadding));\n box-sizing: border-box;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n\n .half-image {\n position: fixed;\n width: calc(50vw - 2 * var(--backdropPadding, 0px));\n z-index: calc(var(--zIndex) + 2);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n\n }\n\n .half-image.show {\n opacity: 1;\n }\n\n /* Position-specific styles for half-image */\n\n .half-image[data-position=\"left\"] {\n left: 0;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n }\n\n /* Mobile styles */\n\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n /* Modal specific styles */\n\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n /* Sidebar specific styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"] {\n opacity: 1;\n transition: transform ease-in-out 150ms;\n }\n\n /* Half specific styles */\n\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity linear 150ms;\n }\n\n /* Right position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Left position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Hide transform states - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);\n }\n\n /* Show transform state - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight);\n max-height: var(--preferredHeight);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n border-width: 0 0 0 var(--borderWidth);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n border-width: 0 var(--borderWidth) 0 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n"]}
+2
-1
sdk-dist/components/iframe/wander-iframe.template.d.cts
interface WanderIframeTemplateContentOptions {
customStyles: string;
cssVariableKeys: string[];
}
declare const getWanderIframeTemplateContent: ({ customStyles }: WanderIframeTemplateContentOptions) => string;
declare const getWanderIframeTemplateContent: ({ customStyles, cssVariableKeys }: WanderIframeTemplateContentOptions) => string;
export { type WanderIframeTemplateContentOptions, getWanderIframeTemplateContent };
+2
-1
sdk-dist/components/iframe/wander-iframe.template.d.ts
interface WanderIframeTemplateContentOptions {
customStyles: string;
cssVariableKeys: string[];
}
declare const getWanderIframeTemplateContent: ({ customStyles }: WanderIframeTemplateContentOptions) => string;
declare const getWanderIframeTemplateContent: ({ customStyles, cssVariableKeys }: WanderIframeTemplateContentOptions) => string;
export { type WanderIframeTemplateContentOptions, getWanderIframeTemplateContent };
+76
-65
sdk-dist/components/iframe/wander-iframe.template.global.js

@@ -6,14 +6,33 @@ (function (exports) {

var getWanderIframeTemplateContent = ({
customStyles
customStyles,
cssVariableKeys = []
}) => {
return `
<style>
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
}
}
/* Base backdrop styles */
.backdrop {
position: fixed;
z-index: var(--zIndex, 9999);
z-index: calc(var(--zIndex) + 1);
inset: 0;
background: var(--backdropBackground, rgba(255, 255, 255, .0625));
backdrop-filter: var(--backdropBackdropFilter, blur(12px));
padding: var(--backdropPadding, 32px);
background: var(--backdropBackground);
backdrop-filter: var(--backdropBackdropFilter);
padding: var(--backdropPadding);
transition: opacity linear 150ms;

@@ -30,17 +49,17 @@ pointer-events: none;

/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
background: var(--background, white);
border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));
border-radius: var(--borderRadius, 10px);
box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));
width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));
min-width: calc(400px - 2 * var(--borderWidth, 2px));
min-height: calc(400px - 2 * var(--borderWidth, 2px));
max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
box-sizing: content-box;
transition: transform linear 150ms, opacity linear 150ms;
z-index: calc(var(--zIndex, 9999) + 3);
background: var(--background);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
width: calc(var(--preferredWidth) + 2 * var(--borderWidth));
height: calc(var(--preferredHeight) + 2 * var(--borderWidth));
min-width: 400px;
min-height: 400px;
max-width: calc(100dvw - 2 * var(--backdropPadding));
max-height: calc(100dvh - 2 * var(--backdropPadding));
box-sizing: border-box;
pointer-events: none;

@@ -65,5 +84,7 @@ opacity: 0;

/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
width: calc(50vw - 2 * var(--backdropPadding, 0px));
z-index: calc(var(--zIndex) + 2);
opacity: 0;

@@ -75,2 +96,3 @@ transition: opacity 300ms ease-in-out;

display: none;
}

@@ -80,9 +102,8 @@

opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}

@@ -92,6 +113,6 @@

right: 0;
width: 50vw;
}
/* Mobile styles */
@media (max-width: 540px) {

@@ -136,27 +157,29 @@ .backdrop {

/* Popup specific styles */
.iframe-wrapper[data-layout="popup"] {
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
.iframe-wrapper[data-layout="popup"][data-position="top-left"] {
top: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
top: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
top: var(--backdropPadding);
right: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
right: var(--backdropPadding);
}
/* Modal specific styles */
.iframe-wrapper[data-layout="modal"] {

@@ -166,64 +189,49 @@ top: 50%;

transform: translate(-50%, -50%);
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
opacity: 1;
transition: transform ease-in-out 150ms;
}
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
transition: opacity linear 150ms;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Right position - Sidebar & Half */
/* Right position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
border-width: 0;
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Left position - Sidebar & Half */
/* Left position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
border-width: 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);
}
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state - Sidebar */
/* Show transform state */
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show {
transform: translate(0, 0);

@@ -233,7 +241,8 @@ }

/* Expanded styles */
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;
height: var(--preferredHeight, 100dvh);
max-height: var(--preferredHeight, 100dvh);
height: var(--preferredHeight);
max-height: var(--preferredHeight);
border-radius: 0;

@@ -245,2 +254,3 @@ }

right: 0;
border-width: 0 0 0 var(--borderWidth);
}

@@ -251,2 +261,3 @@

left: 0;
border-width: 0 var(--borderWidth) 0 0;
}

@@ -253,0 +264,0 @@ 

+1
-1
sdk-dist/component...me/wander-iframe.template.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";;;;AAIO,MAAM,iCAAiC,CAAC;EAAA,EAC7C;EACF,CAA0C,KAAA;EACxC,EAAO,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA,IAAA,EA2OH,YAAY;AAAA;AAAA,CAAA;EAGlB","file":"wander-iframe.template.global.js","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n /* Base backdrop styles */\n .backdrop {\n position: fixed;\n z-index: var(--zIndex, 9999);\n inset: 0;\n background: var(--backdropBackground, rgba(255, 255, 255, .0625));\n backdrop-filter: var(--backdropBackdropFilter, blur(12px));\n padding: var(--backdropPadding, 32px);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n background: var(--background, white);\n border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));\n border-radius: var(--borderRadius, 10px);\n box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));\n width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));\n height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));\n min-width: calc(400px - 2 * var(--borderWidth, 2px));\n min-height: calc(400px - 2 * var(--borderWidth, 2px));\n max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n box-sizing: content-box;\n transition: transform linear 150ms, opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n .half-image {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .half-image.show {\n opacity: 1;\n pointer-events: auto;\n }\n\n /* Position-specific styles for half-image */\n .half-image[data-position=\"left\"] {\n left: 0;\n width: 50vw;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n width: 50vw;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n /* Modal specific styles */\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n\n /* Sidebar specific styles */\n .iframe-wrapper[data-layout=\"sidebar\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n\n /* Half specific styles */\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;\n }\n\n /* Right position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Right position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Left position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Left position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Hide transform states - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n /* Hide transform states - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n /* Show transform state */\n .iframe-wrapper[data-layout=\"sidebar\"].show,\n .iframe-wrapper[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight, 100dvh);\n max-height: var(--preferredHeight, 100dvh);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n"]}
{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";;;;AAKO,MAAM,iCAAiC,CAAC;EAAA,EAC7C,YAAA;EAAA,EACA,kBAAkB;EACpB,CAA0C,KAAA;EACxC,EAAO,OAAA;AAAA;;AAAA;AAAA;AAAA,QAKC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,IAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,OAAA,CAAA;AAAA,GACpD,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA,QAMX,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,IAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AAAA,GACpD,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,IAAA,EAsOf,YAAY;AAAA;AAAA,CAAA;EAGlB","file":"wander-iframe.template.global.js","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n cssVariableKeys: string[];\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles,\n cssVariableKeys = []\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n /* Base backdrop styles */\n\n .backdrop {\n position: fixed;\n z-index: calc(var(--zIndex) + 1);\n inset: 0;\n background: var(--backdropBackground);\n backdrop-filter: var(--backdropBackdropFilter);\n padding: var(--backdropPadding);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 3);\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n width: calc(var(--preferredWidth) + 2 * var(--borderWidth));\n height: calc(var(--preferredHeight) + 2 * var(--borderWidth));\n min-width: 400px;\n min-height: 400px;\n max-width: calc(100dvw - 2 * var(--backdropPadding));\n max-height: calc(100dvh - 2 * var(--backdropPadding));\n box-sizing: border-box;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n\n .half-image {\n position: fixed;\n width: calc(50vw - 2 * var(--backdropPadding, 0px));\n z-index: calc(var(--zIndex) + 2);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n\n }\n\n .half-image.show {\n opacity: 1;\n }\n\n /* Position-specific styles for half-image */\n\n .half-image[data-position=\"left\"] {\n left: 0;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n }\n\n /* Mobile styles */\n\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n /* Modal specific styles */\n\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n /* Sidebar specific styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"] {\n opacity: 1;\n transition: transform ease-in-out 150ms;\n }\n\n /* Half specific styles */\n\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity linear 150ms;\n }\n\n /* Right position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Left position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Hide transform states - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);\n }\n\n /* Show transform state - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight);\n max-height: var(--preferredHeight);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n border-width: 0 0 0 var(--borderWidth);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n border-width: 0 var(--borderWidth) 0 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n"]}
+76
-65
sdk-dist/components/iframe/wander-iframe.template.js
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
customStyles,
cssVariableKeys = []
}) => {
return `
<style>
@media (prefers-color-scheme: light) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;
}).join("\n")}
}
}
@media (prefers-color-scheme: dark) {
:host {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
}
}
/* Base backdrop styles */
.backdrop {
position: fixed;
z-index: var(--zIndex, 9999);
z-index: calc(var(--zIndex) + 1);
inset: 0;
background: var(--backdropBackground, rgba(255, 255, 255, .0625));
backdrop-filter: var(--backdropBackdropFilter, blur(12px));
padding: var(--backdropPadding, 32px);
background: var(--backdropBackground);
backdrop-filter: var(--backdropBackdropFilter);
padding: var(--backdropPadding);
transition: opacity linear 150ms;

@@ -26,17 +45,17 @@ pointer-events: none;

/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
background: var(--background, white);
border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));
border-radius: var(--borderRadius, 10px);
box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));
width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));
min-width: calc(400px - 2 * var(--borderWidth, 2px));
min-height: calc(400px - 2 * var(--borderWidth, 2px));
max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));
box-sizing: content-box;
transition: transform linear 150ms, opacity linear 150ms;
z-index: calc(var(--zIndex, 9999) + 3);
background: var(--background);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
width: calc(var(--preferredWidth) + 2 * var(--borderWidth));
height: calc(var(--preferredHeight) + 2 * var(--borderWidth));
min-width: 400px;
min-height: 400px;
max-width: calc(100dvw - 2 * var(--backdropPadding));
max-height: calc(100dvh - 2 * var(--backdropPadding));
box-sizing: border-box;
pointer-events: none;

@@ -61,5 +80,7 @@ opacity: 0;

/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
width: calc(50vw - 2 * var(--backdropPadding, 0px));
z-index: calc(var(--zIndex) + 2);
opacity: 0;

@@ -71,2 +92,3 @@ transition: opacity 300ms ease-in-out;

display: none;
}

@@ -76,9 +98,8 @@

opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}

@@ -88,6 +109,6 @@

right: 0;
width: 50vw;
}
/* Mobile styles */
@media (max-width: 540px) {

@@ -132,27 +153,29 @@ .backdrop {

/* Popup specific styles */
.iframe-wrapper[data-layout="popup"] {
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
.iframe-wrapper[data-layout="popup"][data-position="top-left"] {
top: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
top: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
top: var(--backdropPadding);
right: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);
left: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
left: var(--backdropPadding);
}
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);
right: var(--backdropPadding, 32px);
bottom: var(--backdropPadding);
right: var(--backdropPadding);
}
/* Modal specific styles */
.iframe-wrapper[data-layout="modal"] {

@@ -162,64 +185,49 @@ top: 50%;

transform: translate(-50%, -50%);
transition: opacity linear 150ms;
transition: opacity linear 150ms, height ease-in-out 150ms;
}
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
opacity: 1;
transition: transform ease-in-out 150ms;
}
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
transition: opacity linear 150ms;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Right position - Sidebar & Half */
/* Right position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
border-width: 0;
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Left position - Sidebar & Half */
/* Left position - Half */
.iframe-wrapper[data-layout="sidebar"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
border-width: 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);
}
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state - Sidebar */
/* Show transform state */
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show {
transform: translate(0, 0);

@@ -229,7 +237,8 @@ }

/* Expanded styles */
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;
height: var(--preferredHeight, 100dvh);
max-height: var(--preferredHeight, 100dvh);
height: var(--preferredHeight);
max-height: var(--preferredHeight);
border-radius: 0;

@@ -241,2 +250,3 @@ }

right: 0;
border-width: 0 0 0 var(--borderWidth);
}

@@ -247,2 +257,3 @@

left: 0;
border-width: 0 var(--borderWidth) 0 0;
}

@@ -249,0 +260,0 @@ 

+1
-1
sdk-dist/components/iframe/wander-iframe.template.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";AAIO,IAAM,iCAAiC,CAAC;AAAA,EAC7C;AACF,CAA0C,KAAA;AACxC,EAAO,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA,IAAA,EA2OH,YAAY;AAAA;AAAA,CAAA;AAGlB","file":"wander-iframe.template.js","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n /* Base backdrop styles */\n .backdrop {\n position: fixed;\n z-index: var(--zIndex, 9999);\n inset: 0;\n background: var(--backdropBackground, rgba(255, 255, 255, .0625));\n backdrop-filter: var(--backdropBackdropFilter, blur(12px));\n padding: var(--backdropPadding, 32px);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n background: var(--background, white);\n border: var(--borderWidth, 2px) solid var(--borderColor, rgba(0, 0, 0, .125));\n border-radius: var(--borderRadius, 10px);\n box-shadow: var(--boxShadow, 0 0 16px 0 rgba(0, 0, 0, 0.125));\n width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));\n height: calc(var(--preferredHeight, 800px) - 2 * var(--borderWidth, 2px));\n min-width: calc(400px - 2 * var(--borderWidth, 2px));\n min-height: calc(400px - 2 * var(--borderWidth, 2px));\n max-width: calc(100dvw - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));\n box-sizing: content-box;\n transition: transform linear 150ms, opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n .half-image {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 1);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .half-image.show {\n opacity: 1;\n pointer-events: auto;\n }\n\n /* Position-specific styles for half-image */\n .half-image[data-position=\"left\"] {\n left: 0;\n width: 50vw;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n width: 50vw;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n /* Modal specific styles */\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n\n /* Sidebar specific styles */\n .iframe-wrapper[data-layout=\"sidebar\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n\n /* Half specific styles */\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;\n }\n\n /* Right position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Right position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0 0 0 var(--borderWidth, 2px);\n }\n\n /* Left position - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Left position - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0 var(--borderWidth, 2px) 0 0;\n }\n\n /* Hide transform states - Sidebar */\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n /* Hide transform states - Half */\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);\n }\n\n /* Show transform state */\n .iframe-wrapper[data-layout=\"sidebar\"].show,\n .iframe-wrapper[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight, 100dvh);\n max-height: var(--preferredHeight, 100dvh);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n"]}
{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";AAKO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,YAAA;AAAA,EACA,kBAAkB;AACpB,CAA0C,KAAA;AACxC,EAAO,OAAA;AAAA;;AAAA;AAAA;AAAA,QAKC,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,IAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,OAAA,CAAA;AAAA,GACpD,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;AAAA;AAAA,QAMX,EAAA,eAAA,CACC,GAAI,CAAA,CAAC,cAAmB,KAAA;AACvB,IAAO,OAAA,CAAA,EAAA,EAAK,cAAc,CAAA,QAAA,EAAW,cAAc,CAAA,MAAA,CAAA;AAAA,GACpD,CAAA,CACA,IAAK,CAAA,IAAI,CAAC;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,IAAA,EAsOf,YAAY;AAAA;AAAA,CAAA;AAGlB","file":"wander-iframe.template.js","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n customStyles: string;\n cssVariableKeys: string[];\n}\n\nexport const getWanderIframeTemplateContent = ({\n customStyles,\n cssVariableKeys = []\n}: WanderIframeTemplateContentOptions) => {\n return `\n <style>\n\n @media (prefers-color-scheme: light) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Light);`;\n })\n .join(\"\\n\")}\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n ${cssVariableKeys\n .map((cssVariableKey) => {\n return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;\n })\n .join(\"\\n\")}\n }\n }\n\n /* Base backdrop styles */\n\n .backdrop {\n position: fixed;\n z-index: calc(var(--zIndex) + 1);\n inset: 0;\n background: var(--backdropBackground);\n backdrop-filter: var(--backdropBackdropFilter);\n padding: var(--backdropPadding);\n transition: opacity linear 150ms;\n pointer-events: none;\n opacity: 0;\n }\n\n .backdrop.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Iframe wrapper styles */\n\n .iframe-wrapper {\n position: fixed;\n z-index: calc(var(--zIndex, 9999) + 3);\n background: var(--background);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n width: calc(var(--preferredWidth) + 2 * var(--borderWidth));\n height: calc(var(--preferredHeight) + 2 * var(--borderWidth));\n min-width: 400px;\n min-height: 400px;\n max-width: calc(100dvw - 2 * var(--backdropPadding));\n max-height: calc(100dvh - 2 * var(--backdropPadding));\n box-sizing: border-box;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n }\n\n .iframe-wrapper.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Base iframe styles */\n .iframe {\n border: none;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n /* Half layout image styles */\n\n .half-image {\n position: fixed;\n width: calc(50vw - 2 * var(--backdropPadding, 0px));\n z-index: calc(var(--zIndex) + 2);\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n\n }\n\n .half-image.show {\n opacity: 1;\n }\n\n /* Position-specific styles for half-image */\n\n .half-image[data-position=\"left\"] {\n left: 0;\n }\n\n .half-image[data-position=\"right\"] {\n right: 0;\n }\n\n /* Mobile styles */\n\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe-wrapper {\n inset: var(--mobilePadding, 0);\n width: calc(100dvw - 2 * var(--mobilePadding, 0));\n height: var(--mobileHeight, 100dvh);\n min-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n min-height: var(--mobileHeight, 100dvh);\n max-width: calc(100dvw - 2 * var(--mobilePadding, 0));\n max-height: var(--mobileHeight, 100dvh);\n border-width: var(--mobileBorderWidth, 0);\n border-color: var(--mobileBorderColor, rgba(0, 0, 0, .125));\n border-radius: var(--mobileBorderRadius, 0);\n box-shadow: var(--mobileBoxShadow, none);\n transform: none;\n }\n\n .half-image {\n display: none;\n }\n\n .iframe-wrapper[data-expand-on-mobile=\"true\"] {\n inset: 0;\n width: 100dvw;\n height: 100dvh;\n min-width: 100dvw;\n min-height: 100dvh;\n max-width: 100dvw;\n max-height: 100dvh;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n }\n\n /* Popup specific styles */\n\n .iframe-wrapper[data-layout=\"popup\"] {\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding);\n left: var(--backdropPadding);\n }\n\n .iframe-wrapper[data-layout=\"popup\"][data-position=\"bottom-right\"] {\n bottom: var(--backdropPadding);\n right: var(--backdropPadding);\n }\n\n /* Modal specific styles */\n\n .iframe-wrapper[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms, height ease-in-out 150ms;\n }\n\n /* Sidebar specific styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"] {\n opacity: 1;\n transition: transform ease-in-out 150ms;\n }\n\n /* Half specific styles */\n\n .iframe-wrapper[data-layout=\"half\"] {\n transition: opacity linear 150ms;\n }\n\n /* Right position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"right\"] {\n top: var(--backdropPadding, 0);\n right: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Left position - Sidebar & Half */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-position=\"left\"] {\n top: var(--backdropPadding, 0);\n left: var(--backdropPadding, 0);\n border-width: 0;\n }\n\n /* Hide transform states - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding) + 32px), 0);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show) {\n transform: translate(calc(-100% - var(--backdropPadding) - 32px), 0);\n }\n\n /* Show transform state - Sidebar */\n\n .iframe-wrapper[data-layout=\"sidebar\"].show {\n transform: translate(0, 0);\n }\n\n /* Expanded styles */\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"] {\n top: 0;\n height: var(--preferredHeight);\n max-height: var(--preferredHeight);\n border-radius: 0;\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n border-width: 0 0 0 var(--borderWidth);\n }\n\n .iframe-wrapper[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe-wrapper[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n border-width: 0 var(--borderWidth) 0 0;\n }\n\n ${customStyles}\n </style>\n`;\n};\n"]}
+1
-1
sdk-dist/index.d.cts
export { WanderEmbedded } from './wander-embedded.cjs';
export { B as BalanceInfo, C as Currency, H as HalfLayoutConfig, j as ImageExtension, I as ImgPath, k as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, m as RequestsInfo, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, u as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, w as WanderEmbeddedButtonLabels, v as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, s as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, p as WanderEmbeddedComponentConfig, o as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, q as isThemeRecord } from './wander-embedded.types-DZt7tGOM.cjs';
export { A as AuthState, B as BalanceInfo, C as Currency, H as HalfLayoutConfig, p as ImageExtension, I as ImgPath, q as LAYOUT_TYPES, L as LayoutConfig, h as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, s as RequestsInfo, j as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, y as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, e as WanderEmbeddedButtonLabels, z as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, w as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, u as WanderEmbeddedComponentConfig, t as WanderEmbeddedComponentOptions, f as WanderEmbeddedIframeCSSVars, i as WanderEmbeddedIframeConfig, g as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, o as WanderEmbeddedOptions, x as WanderEmbeddedPopupPosition, r as isRouteConfig, v as isThemeRecord } from './wander-embedded.types-cWXjiYHr.cjs';
+1
-1
sdk-dist/index.d.ts
export { WanderEmbedded } from './wander-embedded.js';
export { B as BalanceInfo, C as Currency, H as HalfLayoutConfig, j as ImageExtension, I as ImgPath, k as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, m as RequestsInfo, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, u as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, w as WanderEmbeddedButtonLabels, v as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, s as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, p as WanderEmbeddedComponentConfig, o as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, q as isThemeRecord } from './wander-embedded.types-DZt7tGOM.js';
export { A as AuthState, B as BalanceInfo, C as Currency, H as HalfLayoutConfig, p as ImageExtension, I as ImgPath, q as LAYOUT_TYPES, L as LayoutConfig, h as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, s as RequestsInfo, j as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, y as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, e as WanderEmbeddedButtonLabels, z as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, w as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, u as WanderEmbeddedComponentConfig, t as WanderEmbeddedComponentOptions, f as WanderEmbeddedIframeCSSVars, i as WanderEmbeddedIframeConfig, g as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, o as WanderEmbeddedOptions, x as WanderEmbeddedPopupPosition, r as isRouteConfig, v as isThemeRecord } from './wander-embedded.types-cWXjiYHr.js';
+1
-1
sdk-dist/utils/message/message.types.d.cts

@@ -1,1 +0,1 @@

export { E as BaseIncomingMessage, F as IncomingAuthMessage, y as IncomingAuthMessageData, V as IncomingBalanceMessage, A as IncomingBalanceMessageData, N as IncomingCloseMessage, G as IncomingConnectMessage, J as IncomingDisconnectMessage, h as IncomingMessage, Y as IncomingMessageId, K as IncomingOpenMessage, X as IncomingRequestMessage, D as IncomingRequestMessageData, Q as IncomingResizeMessage, z as IncomingResizeMessageData, O as OutgoingMessage, U as UserDetails } from '../../wander-embedded.types-DZt7tGOM.cjs';
export { Y as BaseIncomingMessage, D as EmbeddedAuthProviderType, E as EmbeddedAuthStatus, F as EmbeddedUserDetails, k as EventMessage, a4 as EventMessageData, N as IncomingAuthCompletedMessageData, K as IncomingAuthLoadingMessageData, Z as IncomingAuthMessage, Q as IncomingAuthMessageData, G as IncomingAuthNativeMessageData, J as IncomingAuthNoAuthMessageData, a1 as IncomingBalanceMessage, V as IncomingBalanceMessageData, $ as IncomingCloseMessage, m as IncomingMessage, a3 as IncomingMessageId, _ as IncomingOpenMessage, a2 as IncomingRequestMessage, X as IncomingRequestMessageData, a0 as IncomingResizeMessage, U as IncomingResizeMessageData, O as OutgoingMessage, l as WalletSwitchMessage } from '../../wander-embedded.types-cWXjiYHr.cjs';
+1
-1
sdk-dist/utils/message/message.types.d.ts

@@ -1,1 +0,1 @@

export { E as BaseIncomingMessage, F as IncomingAuthMessage, y as IncomingAuthMessageData, V as IncomingBalanceMessage, A as IncomingBalanceMessageData, N as IncomingCloseMessage, G as IncomingConnectMessage, J as IncomingDisconnectMessage, h as IncomingMessage, Y as IncomingMessageId, K as IncomingOpenMessage, X as IncomingRequestMessage, D as IncomingRequestMessageData, Q as IncomingResizeMessage, z as IncomingResizeMessageData, O as OutgoingMessage, U as UserDetails } from '../../wander-embedded.types-DZt7tGOM.js';
export { Y as BaseIncomingMessage, D as EmbeddedAuthProviderType, E as EmbeddedAuthStatus, F as EmbeddedUserDetails, k as EventMessage, a4 as EventMessageData, N as IncomingAuthCompletedMessageData, K as IncomingAuthLoadingMessageData, Z as IncomingAuthMessage, Q as IncomingAuthMessageData, G as IncomingAuthNativeMessageData, J as IncomingAuthNoAuthMessageData, a1 as IncomingBalanceMessage, V as IncomingBalanceMessageData, $ as IncomingCloseMessage, m as IncomingMessage, a3 as IncomingMessageId, _ as IncomingOpenMessage, a2 as IncomingRequestMessage, X as IncomingRequestMessageData, a0 as IncomingResizeMessage, U as IncomingResizeMessageData, O as OutgoingMessage, l as WalletSwitchMessage } from '../../wander-embedded.types-cWXjiYHr.js';
+40
-3
sdk-dist/utils/message/message.utils.cjs
'use strict';
// src/utils/message/message.constants.ts
var EMBEDDED_AUTH_TYPE = [
"PASSKEYS",
"EMAIL_N_PASSWORD",
"GOOGLE",
"FACEBOOK",
"X",
"APPLE"
];
var EMBEDDED_AUTH_STATUS = [
"loading",
"onboarding",
"authenticated",
"not-authenticated"
];
// src/utils/message/message.utils.ts
function isEventMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message) || message.type !== "event") {
return false;
}
const data = message.data;
return typeof data.name === "string";
}
function isWalletSwitchMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message) || message.type !== "switch_wallet_event") {
return false;
}
const data = message.data;
return data === null || typeof data === "string";
}
function isIncomingMessage(message) {

@@ -11,6 +41,11 @@ if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message)) {

const data = message.data;
return !!(data && typeof data === "object" && "userDetails" in data);
if (!data || typeof data !== "object") return false;
if (data.authType === "NATIVE_WALLET") {
return data.authStatus === null && data.userDetails === null;
}
if (data.authStatus === "not-authenticated") {
return data.authType === null && data.userDetails === null;
}
return EMBEDDED_AUTH_STATUS.includes(data.authStatus) && EMBEDDED_AUTH_TYPE.includes(data.authType) && (data.userDetails === null || !!data.userDetails && typeof data.userDetails === "object");
}
case "embedded_connect":
case "embedded_disconnect":
case "embedded_open":

@@ -49,5 +84,7 @@ case "embedded_close":

exports.isEventMessage = isEventMessage;
exports.isIncomingMessage = isIncomingMessage;
exports.isOutgoingMessage = isOutgoingMessage;
exports.isWalletSwitchMessage = isWalletSwitchMessage;
//# sourceMappingURL=message.utils.cjs.map
//# sourceMappingURL=message.utils.cjs.map
+1
-1
sdk-dist/utils/message/message.utils.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/message/message.utils.ts"],"names":[],"mappings":";;;AAYO,SAAS,kBACd,OAC4B,EAAA;AAC5B,EACE,IAAA,CAAC,OACD,IAAA,OAAO,OAAY,KAAA,QAAA,IACnB,EAAE,IAAA,IAAQ,OAAW,IAAA,MAAA,IAAU,OAAW,IAAA,MAAA,IAAU,OACpD,CAAA,EAAA;AACA,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,QAAQ,QAAQ,IAA2B;AAAA,IACzC,KAAK,eAAiB,EAAA;AACpB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAA,OAAO,CAAC,EAAE,IAAA,IAAQ,OAAO,IAAA,KAAS,YAAY,aAAiB,IAAA,IAAA,CAAA;AAAA;AACjE,IAEA,KAAK,kBAAA;AAAA,IACL,KAAK,qBAAA;AAAA,IACL,KAAK,eAAA;AAAA,IACL,KAAK,gBAAA;AACH,MAAO,OAAA,IAAA;AAAA,IAET,KAAK,iBAAmB,EAAA;AACtB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAA,OAAO,CAAC,EACN,IAAA,IACA,OAAO,IAAA,KAAS,YAChB,OAAO,IAAA,CAAK,SAAc,KAAA,QAAA,IAC1B,OAAO,IAAK,CAAA,mBAAA,KAAwB,QACpC,IAAA,OAAO,KAAK,MAAW,KAAA,QAAA,CAAA;AAAA;AAE3B,IAEA,KAAK,kBAAoB,EAAA;AACvB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAO,OAAA,CAAC,EACN,IACA,IAAA,OAAO,SAAS,QACf,KAAA,IAAA,CAAK,MAAW,KAAA,IAAA,IAAQ,OAAO,IAAA,CAAK,WAAW,QAC/C,CAAA,KAAA,IAAA,CAAK,aAAa,IAAQ,IAAA,OAAO,KAAK,QAAa,KAAA,QAAA,CAAA,IACpD,OAAO,IAAA,CAAK,gBAAoB,IAAA,QAAA,CAAA;AAAA;AAEpC,IAEA,KAAK,kBAAoB,EAAA;AACvB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAO,OAAA,CAAC,EACN,IACA,IAAA,OAAO,SAAS,QAChB,IAAA,OAAO,KAAK,eAAoB,KAAA,QAAA,CAAA;AAAA;AAEpC,IAEA;AACE,MAAO,OAAA,KAAA;AAAA;AAEb;AAGO,SAAS,kBAAkB,OAA0C,EAAA;AAC1E,EAAI,IAAA,CAAC,WAAW,OAAO,OAAA,KAAY,YAAY,CAAC,OAAA,CAAQ,MAAa,OAAA,KAAA;AAErE,EAAA,QAAQ,QAAQ,IAAM;AAAA,IACpB,KAAK,cAAA;AACH,MAAA,OACE,OAAQ,CAAA,OAAA,IACR,OAAO,OAAA,CAAQ,YAAY,QAC3B,IAAA,OAAO,OAAQ,CAAA,OAAA,CAAQ,OAAY,KAAA,QAAA,IACnC,OAAO,OAAA,CAAQ,QAAQ,SAAc,KAAA,QAAA;AAAA,IAEzC,KAAK,kBAAA;AACH,MACE,OAAA,OAAA,CAAQ,WACR,OAAO,OAAA,CAAQ,YAAY,QAC3B,IAAA,OAAO,OAAQ,CAAA,OAAA,CAAQ,OAAY,KAAA,QAAA;AAAA,IAEvC,KAAK,qBAAA;AACH,MAAO,OAAA,IAAA;AAAA,IACT;AACE,MAAO,OAAA,KAAA;AAAA;AAEb","file":"message.utils.cjs","sourcesContent":["import {\n IncomingAuthMessageData,\n IncomingBalanceMessageData,\n IncomingMessage,\n IncomingMessageId,\n IncomingRequestMessageData,\n IncomingResizeMessage,\n IncomingResizeMessageData,\n OutgoingMessage\n} from \"./message.types\";\n\n// Type guard for incoming messages\nexport function isIncomingMessage(\n message: unknown\n): message is IncomingMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message)\n ) {\n return false;\n }\n\n switch (message.type as IncomingMessageId) {\n case \"embedded_auth\": {\n const data = message.data as IncomingAuthMessageData;\n\n return !!(data && typeof data === \"object\" && \"userDetails\" in data);\n }\n\n case \"embedded_connect\":\n case \"embedded_disconnect\":\n case \"embedded_open\":\n case \"embedded_close\":\n return true;\n\n case \"embedded_resize\": {\n const data = message.data as IncomingResizeMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.routeType === \"string\" &&\n typeof data.preferredLayoutType === \"string\" &&\n typeof data.height === \"number\"\n );\n }\n\n case \"embedded_balance\": {\n const data = message.data as IncomingBalanceMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n (data.amount === null || typeof data.amount === \"number\") &&\n (data.currency === null || typeof data.currency === \"string\") &&\n typeof data.formattedBalance == \"string\"\n );\n }\n\n case \"embedded_request\": {\n const data = message.data as IncomingRequestMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.pendingRequests === \"number\"\n );\n }\n\n default:\n return false;\n }\n}\n\n// Type guard for outgoing messages\nexport function isOutgoingMessage(message: any): message is OutgoingMessage {\n if (!message || typeof message !== \"object\" || !message.type) return false;\n\n switch (message.type) {\n case \"THEME_UPDATE\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.primary === \"string\" &&\n typeof message.payload.secondary === \"string\"\n );\n case \"WALLET_CONNECTED\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.address === \"string\"\n );\n case \"WALLET_DISCONNECTED\":\n return true;\n default:\n return false;\n }\n}\n"]}
{"version":3,"sources":["../../../src/utils/message/message.constants.ts","../../../src/utils/message/message.utils.ts"],"names":[],"mappings":"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","file":"message.utils.cjs","sourcesContent":["import { EmbeddedAuthProviderType, EmbeddedAuthStatus } from \"./message.types\";\n\nexport const EMBEDDED_AUTH_TYPE = [\n \"PASSKEYS\",\n \"EMAIL_N_PASSWORD\",\n \"GOOGLE\",\n \"FACEBOOK\",\n \"X\",\n \"APPLE\"\n] as const satisfies EmbeddedAuthProviderType[];\n\nexport const EMBEDDED_AUTH_STATUS = [\n \"loading\",\n \"onboarding\",\n \"authenticated\",\n \"not-authenticated\"\n] as const satisfies EmbeddedAuthStatus[];\n","import { EMBEDDED_AUTH_STATUS, EMBEDDED_AUTH_TYPE } from \"./message.constants\";\nimport {\n EventMessage,\n EventMessageData,\n IncomingAuthMessageData,\n IncomingBalanceMessageData,\n IncomingMessage,\n IncomingMessageId,\n IncomingRequestMessageData,\n IncomingResizeMessageData,\n OutgoingMessage,\n WalletSwitchMessage\n} from \"./message.types\";\n\nexport function isEventMessage(message: unknown): message is EventMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message) ||\n message.type !== \"event\"\n ) {\n return false;\n }\n\n const data = message.data as EventMessageData;\n\n // TODO: Validate the different value types/formats:\n return typeof data.name === \"string\";\n}\n\nexport function isWalletSwitchMessage(\n message: unknown\n): message is WalletSwitchMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message) ||\n message.type !== \"switch_wallet_event\"\n ) {\n return false;\n }\n\n const data = message.data as string | null;\n\n // TODO: Validate address format:\n return data === null || typeof data === \"string\";\n}\n\n// Type guard for incoming messages\nexport function isIncomingMessage(\n message: unknown\n): message is IncomingMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message)\n ) {\n return false;\n }\n\n switch (message.type as IncomingMessageId) {\n case \"embedded_auth\": {\n const data = message.data as IncomingAuthMessageData;\n\n if (!data || typeof data !== \"object\") return false;\n\n if (data.authType === \"NATIVE_WALLET\") {\n return data.authStatus === null && data.userDetails === null;\n }\n\n if (data.authStatus === \"not-authenticated\") {\n return data.authType === null && data.userDetails === null;\n }\n\n return (\n EMBEDDED_AUTH_STATUS.includes(data.authStatus) &&\n EMBEDDED_AUTH_TYPE.includes(data.authType) &&\n (data.userDetails === null ||\n (!!data.userDetails && typeof data.userDetails === \"object\"))\n );\n }\n\n case \"embedded_open\":\n case \"embedded_close\":\n return true;\n\n case \"embedded_resize\": {\n const data = message.data as IncomingResizeMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.routeType === \"string\" &&\n typeof data.preferredLayoutType === \"string\" &&\n typeof data.height === \"number\"\n );\n }\n\n case \"embedded_balance\": {\n const data = message.data as IncomingBalanceMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n (data.amount === null || typeof data.amount === \"number\") &&\n (data.currency === null || typeof data.currency === \"string\") &&\n typeof data.formattedBalance == \"string\"\n );\n }\n\n case \"embedded_request\": {\n const data = message.data as IncomingRequestMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.pendingRequests === \"number\"\n );\n }\n\n default:\n return false;\n }\n}\n\n// Type guard for outgoing messages\n// TODO: Is this needed?\nexport function isOutgoingMessage(message: any): message is OutgoingMessage {\n if (!message || typeof message !== \"object\" || !message.type) return false;\n\n switch (message.type) {\n case \"THEME_UPDATE\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.primary === \"string\" &&\n typeof message.payload.secondary === \"string\"\n );\n case \"WALLET_CONNECTED\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.address === \"string\"\n );\n case \"WALLET_DISCONNECTED\":\n return true;\n default:\n return false;\n }\n}\n"]}
+4
-2
sdk-dist/utils/message/message.utils.d.cts

@@ -1,6 +0,8 @@

import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-DZt7tGOM.cjs';
import { k as EventMessage, l as WalletSwitchMessage, m as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-cWXjiYHr.cjs';
declare function isEventMessage(message: unknown): message is EventMessage;
declare function isWalletSwitchMessage(message: unknown): message is WalletSwitchMessage;
declare function isIncomingMessage(message: unknown): message is IncomingMessage;
declare function isOutgoingMessage(message: any): message is OutgoingMessage;
export { isIncomingMessage, isOutgoingMessage };
export { isEventMessage, isIncomingMessage, isOutgoingMessage, isWalletSwitchMessage };
+4
-2
sdk-dist/utils/message/message.utils.d.ts

@@ -1,6 +0,8 @@

import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-DZt7tGOM.js';
import { k as EventMessage, l as WalletSwitchMessage, m as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-cWXjiYHr.js';
declare function isEventMessage(message: unknown): message is EventMessage;
declare function isWalletSwitchMessage(message: unknown): message is WalletSwitchMessage;
declare function isIncomingMessage(message: unknown): message is IncomingMessage;
declare function isOutgoingMessage(message: any): message is OutgoingMessage;
export { isIncomingMessage, isOutgoingMessage };
export { isEventMessage, isIncomingMessage, isOutgoingMessage, isWalletSwitchMessage };
+40
-3
sdk-dist/utils/message/message.utils.global.js
(function (exports) {
'use strict';
// src/utils/message/message.constants.ts
var EMBEDDED_AUTH_TYPE = [
"PASSKEYS",
"EMAIL_N_PASSWORD",
"GOOGLE",
"FACEBOOK",
"X",
"APPLE"
];
var EMBEDDED_AUTH_STATUS = [
"loading",
"onboarding",
"authenticated",
"not-authenticated"
];
// src/utils/message/message.utils.ts
function isEventMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message) || message.type !== "event") {
return false;
}
const data = message.data;
return typeof data.name === "string";
}
function isWalletSwitchMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message) || message.type !== "switch_wallet_event") {
return false;
}
const data = message.data;
return data === null || typeof data === "string";
}
function isIncomingMessage(message) {

@@ -12,6 +42,11 @@ if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message)) {

const data = message.data;
return !!(data && typeof data === "object" && "userDetails" in data);
if (!data || typeof data !== "object") return false;
if (data.authType === "NATIVE_WALLET") {
return data.authStatus === null && data.userDetails === null;
}
if (data.authStatus === "not-authenticated") {
return data.authType === null && data.userDetails === null;
}
return EMBEDDED_AUTH_STATUS.includes(data.authStatus) && EMBEDDED_AUTH_TYPE.includes(data.authType) && (data.userDetails === null || !!data.userDetails && typeof data.userDetails === "object");
}
case "embedded_connect":
case "embedded_disconnect":
case "embedded_open":

@@ -50,4 +85,6 @@ case "embedded_close":

exports.isEventMessage = isEventMessage;
exports.isIncomingMessage = isIncomingMessage;
exports.isOutgoingMessage = isOutgoingMessage;
exports.isWalletSwitchMessage = isWalletSwitchMessage;

@@ -54,0 +91,0 @@ return exports;

+1
-1
sdk-dist/utils/message/message.utils.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/message/message.utils.ts"],"names":[],"mappings":";;;;EAYO,SAAS,kBACd,OAC4B,EAAA;EAC5B,EACE,IAAA,CAAC,OACD,IAAA,OAAO,OAAY,KAAA,QAAA,IACnB,EAAE,IAAA,IAAQ,OAAW,IAAA,MAAA,IAAU,OAAW,IAAA,MAAA,IAAU,OACpD,CAAA,EAAA;EACA,IAAO,OAAA,KAAA;EAAA;EAGT,EAAA,QAAQ,QAAQ,IAA2B;EAAA,IACzC,KAAK,eAAiB,EAAA;EACpB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;EAErB,MAAA,OAAO,CAAC,EAAE,IAAA,IAAQ,OAAO,IAAA,KAAS,YAAY,aAAiB,IAAA,IAAA,CAAA;EAAA;EACjE,IAEA,KAAK,kBAAA;EAAA,IACL,KAAK,qBAAA;EAAA,IACL,KAAK,eAAA;EAAA,IACL,KAAK,gBAAA;EACH,MAAO,OAAA,IAAA;EAAA,IAET,KAAK,iBAAmB,EAAA;EACtB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;EAErB,MAAA,OAAO,CAAC,EACN,IAAA,IACA,OAAO,IAAA,KAAS,YAChB,OAAO,IAAA,CAAK,SAAc,KAAA,QAAA,IAC1B,OAAO,IAAK,CAAA,mBAAA,KAAwB,QACpC,IAAA,OAAO,KAAK,MAAW,KAAA,QAAA,CAAA;EAAA;EAE3B,IAEA,KAAK,kBAAoB,EAAA;EACvB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;EAErB,MAAO,OAAA,CAAC,EACN,IACA,IAAA,OAAO,SAAS,QACf,KAAA,IAAA,CAAK,MAAW,KAAA,IAAA,IAAQ,OAAO,IAAA,CAAK,WAAW,QAC/C,CAAA,KAAA,IAAA,CAAK,aAAa,IAAQ,IAAA,OAAO,KAAK,QAAa,KAAA,QAAA,CAAA,IACpD,OAAO,IAAA,CAAK,gBAAoB,IAAA,QAAA,CAAA;EAAA;EAEpC,IAEA,KAAK,kBAAoB,EAAA;EACvB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;EAErB,MAAO,OAAA,CAAC,EACN,IACA,IAAA,OAAO,SAAS,QAChB,IAAA,OAAO,KAAK,eAAoB,KAAA,QAAA,CAAA;EAAA;EAEpC,IAEA;EACE,MAAO,OAAA,KAAA;EAAA;EAEb;EAGO,SAAS,kBAAkB,OAA0C,EAAA;EAC1E,EAAI,IAAA,CAAC,WAAW,OAAO,OAAA,KAAY,YAAY,CAAC,OAAA,CAAQ,MAAa,OAAA,KAAA;EAErE,EAAA,QAAQ,QAAQ,IAAM;EAAA,IACpB,KAAK,cAAA;EACH,MAAA,OACE,OAAQ,CAAA,OAAA,IACR,OAAO,OAAA,CAAQ,YAAY,QAC3B,IAAA,OAAO,OAAQ,CAAA,OAAA,CAAQ,OAAY,KAAA,QAAA,IACnC,OAAO,OAAA,CAAQ,QAAQ,SAAc,KAAA,QAAA;EAAA,IAEzC,KAAK,kBAAA;EACH,MACE,OAAA,OAAA,CAAQ,WACR,OAAO,OAAA,CAAQ,YAAY,QAC3B,IAAA,OAAO,OAAQ,CAAA,OAAA,CAAQ,OAAY,KAAA,QAAA;EAAA,IAEvC,KAAK,qBAAA;EACH,MAAO,OAAA,IAAA;EAAA,IACT;EACE,MAAO,OAAA,KAAA;EAAA;EAEb","file":"message.utils.global.js","sourcesContent":["import {\n IncomingAuthMessageData,\n IncomingBalanceMessageData,\n IncomingMessage,\n IncomingMessageId,\n IncomingRequestMessageData,\n IncomingResizeMessage,\n IncomingResizeMessageData,\n OutgoingMessage\n} from \"./message.types\";\n\n// Type guard for incoming messages\nexport function isIncomingMessage(\n message: unknown\n): message is IncomingMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message)\n ) {\n return false;\n }\n\n switch (message.type as IncomingMessageId) {\n case \"embedded_auth\": {\n const data = message.data as IncomingAuthMessageData;\n\n return !!(data && typeof data === \"object\" && \"userDetails\" in data);\n }\n\n case \"embedded_connect\":\n case \"embedded_disconnect\":\n case \"embedded_open\":\n case \"embedded_close\":\n return true;\n\n case \"embedded_resize\": {\n const data = message.data as IncomingResizeMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.routeType === \"string\" &&\n typeof data.preferredLayoutType === \"string\" &&\n typeof data.height === \"number\"\n );\n }\n\n case \"embedded_balance\": {\n const data = message.data as IncomingBalanceMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n (data.amount === null || typeof data.amount === \"number\") &&\n (data.currency === null || typeof data.currency === \"string\") &&\n typeof data.formattedBalance == \"string\"\n );\n }\n\n case \"embedded_request\": {\n const data = message.data as IncomingRequestMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.pendingRequests === \"number\"\n );\n }\n\n default:\n return false;\n }\n}\n\n// Type guard for outgoing messages\nexport function isOutgoingMessage(message: any): message is OutgoingMessage {\n if (!message || typeof message !== \"object\" || !message.type) return false;\n\n switch (message.type) {\n case \"THEME_UPDATE\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.primary === \"string\" &&\n typeof message.payload.secondary === \"string\"\n );\n case \"WALLET_CONNECTED\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.address === \"string\"\n );\n case \"WALLET_DISCONNECTED\":\n return true;\n default:\n return false;\n }\n}\n"]}
{"version":3,"sources":["../../../src/utils/message/message.constants.ts","../../../src/utils/message/message.utils.ts"],"names":[],"mappings":"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","file":"message.utils.global.js","sourcesContent":["import { EmbeddedAuthProviderType, EmbeddedAuthStatus } from \"./message.types\";\n\nexport const EMBEDDED_AUTH_TYPE = [\n \"PASSKEYS\",\n \"EMAIL_N_PASSWORD\",\n \"GOOGLE\",\n \"FACEBOOK\",\n \"X\",\n \"APPLE\"\n] as const satisfies EmbeddedAuthProviderType[];\n\nexport const EMBEDDED_AUTH_STATUS = [\n \"loading\",\n \"onboarding\",\n \"authenticated\",\n \"not-authenticated\"\n] as const satisfies EmbeddedAuthStatus[];\n","import { EMBEDDED_AUTH_STATUS, EMBEDDED_AUTH_TYPE } from \"./message.constants\";\nimport {\n EventMessage,\n EventMessageData,\n IncomingAuthMessageData,\n IncomingBalanceMessageData,\n IncomingMessage,\n IncomingMessageId,\n IncomingRequestMessageData,\n IncomingResizeMessageData,\n OutgoingMessage,\n WalletSwitchMessage\n} from \"./message.types\";\n\nexport function isEventMessage(message: unknown): message is EventMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message) ||\n message.type !== \"event\"\n ) {\n return false;\n }\n\n const data = message.data as EventMessageData;\n\n // TODO: Validate the different value types/formats:\n return typeof data.name === \"string\";\n}\n\nexport function isWalletSwitchMessage(\n message: unknown\n): message is WalletSwitchMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message) ||\n message.type !== \"switch_wallet_event\"\n ) {\n return false;\n }\n\n const data = message.data as string | null;\n\n // TODO: Validate address format:\n return data === null || typeof data === \"string\";\n}\n\n// Type guard for incoming messages\nexport function isIncomingMessage(\n message: unknown\n): message is IncomingMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message)\n ) {\n return false;\n }\n\n switch (message.type as IncomingMessageId) {\n case \"embedded_auth\": {\n const data = message.data as IncomingAuthMessageData;\n\n if (!data || typeof data !== \"object\") return false;\n\n if (data.authType === \"NATIVE_WALLET\") {\n return data.authStatus === null && data.userDetails === null;\n }\n\n if (data.authStatus === \"not-authenticated\") {\n return data.authType === null && data.userDetails === null;\n }\n\n return (\n EMBEDDED_AUTH_STATUS.includes(data.authStatus) &&\n EMBEDDED_AUTH_TYPE.includes(data.authType) &&\n (data.userDetails === null ||\n (!!data.userDetails && typeof data.userDetails === \"object\"))\n );\n }\n\n case \"embedded_open\":\n case \"embedded_close\":\n return true;\n\n case \"embedded_resize\": {\n const data = message.data as IncomingResizeMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.routeType === \"string\" &&\n typeof data.preferredLayoutType === \"string\" &&\n typeof data.height === \"number\"\n );\n }\n\n case \"embedded_balance\": {\n const data = message.data as IncomingBalanceMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n (data.amount === null || typeof data.amount === \"number\") &&\n (data.currency === null || typeof data.currency === \"string\") &&\n typeof data.formattedBalance == \"string\"\n );\n }\n\n case \"embedded_request\": {\n const data = message.data as IncomingRequestMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.pendingRequests === \"number\"\n );\n }\n\n default:\n return false;\n }\n}\n\n// Type guard for outgoing messages\n// TODO: Is this needed?\nexport function isOutgoingMessage(message: any): message is OutgoingMessage {\n if (!message || typeof message !== \"object\" || !message.type) return false;\n\n switch (message.type) {\n case \"THEME_UPDATE\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.primary === \"string\" &&\n typeof message.payload.secondary === \"string\"\n );\n case \"WALLET_CONNECTED\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.address === \"string\"\n );\n case \"WALLET_DISCONNECTED\":\n return true;\n default:\n return false;\n }\n}\n"]}
+39
-4
sdk-dist/utils/message/message.utils.js

@@ -0,2 +1,32 @@

// src/utils/message/message.constants.ts
var EMBEDDED_AUTH_TYPE = [
"PASSKEYS",
"EMAIL_N_PASSWORD",
"GOOGLE",
"FACEBOOK",
"X",
"APPLE"
];
var EMBEDDED_AUTH_STATUS = [
"loading",
"onboarding",
"authenticated",
"not-authenticated"
];
// src/utils/message/message.utils.ts
function isEventMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message) || message.type !== "event") {
return false;
}
const data = message.data;
return typeof data.name === "string";
}
function isWalletSwitchMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message) || message.type !== "switch_wallet_event") {
return false;
}
const data = message.data;
return data === null || typeof data === "string";
}
function isIncomingMessage(message) {

@@ -9,6 +39,11 @@ if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message)) {

const data = message.data;
return !!(data && typeof data === "object" && "userDetails" in data);
if (!data || typeof data !== "object") return false;
if (data.authType === "NATIVE_WALLET") {
return data.authStatus === null && data.userDetails === null;
}
if (data.authStatus === "not-authenticated") {
return data.authType === null && data.userDetails === null;
}
return EMBEDDED_AUTH_STATUS.includes(data.authStatus) && EMBEDDED_AUTH_TYPE.includes(data.authType) && (data.userDetails === null || !!data.userDetails && typeof data.userDetails === "object");
}
case "embedded_connect":
case "embedded_disconnect":
case "embedded_open":

@@ -47,4 +82,4 @@ case "embedded_close":

export { isIncomingMessage, isOutgoingMessage };
export { isEventMessage, isIncomingMessage, isOutgoingMessage, isWalletSwitchMessage };
//# sourceMappingURL=message.utils.js.map
//# sourceMappingURL=message.utils.js.map
+1
-1
sdk-dist/utils/message/message.utils.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/message/message.utils.ts"],"names":[],"mappings":";AAYO,SAAS,kBACd,OAC4B,EAAA;AAC5B,EACE,IAAA,CAAC,OACD,IAAA,OAAO,OAAY,KAAA,QAAA,IACnB,EAAE,IAAA,IAAQ,OAAW,IAAA,MAAA,IAAU,OAAW,IAAA,MAAA,IAAU,OACpD,CAAA,EAAA;AACA,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,QAAQ,QAAQ,IAA2B;AAAA,IACzC,KAAK,eAAiB,EAAA;AACpB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAA,OAAO,CAAC,EAAE,IAAA,IAAQ,OAAO,IAAA,KAAS,YAAY,aAAiB,IAAA,IAAA,CAAA;AAAA;AACjE,IAEA,KAAK,kBAAA;AAAA,IACL,KAAK,qBAAA;AAAA,IACL,KAAK,eAAA;AAAA,IACL,KAAK,gBAAA;AACH,MAAO,OAAA,IAAA;AAAA,IAET,KAAK,iBAAmB,EAAA;AACtB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAA,OAAO,CAAC,EACN,IAAA,IACA,OAAO,IAAA,KAAS,YAChB,OAAO,IAAA,CAAK,SAAc,KAAA,QAAA,IAC1B,OAAO,IAAK,CAAA,mBAAA,KAAwB,QACpC,IAAA,OAAO,KAAK,MAAW,KAAA,QAAA,CAAA;AAAA;AAE3B,IAEA,KAAK,kBAAoB,EAAA;AACvB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAO,OAAA,CAAC,EACN,IACA,IAAA,OAAO,SAAS,QACf,KAAA,IAAA,CAAK,MAAW,KAAA,IAAA,IAAQ,OAAO,IAAA,CAAK,WAAW,QAC/C,CAAA,KAAA,IAAA,CAAK,aAAa,IAAQ,IAAA,OAAO,KAAK,QAAa,KAAA,QAAA,CAAA,IACpD,OAAO,IAAA,CAAK,gBAAoB,IAAA,QAAA,CAAA;AAAA;AAEpC,IAEA,KAAK,kBAAoB,EAAA;AACvB,MAAA,MAAM,OAAO,OAAQ,CAAA,IAAA;AAErB,MAAO,OAAA,CAAC,EACN,IACA,IAAA,OAAO,SAAS,QAChB,IAAA,OAAO,KAAK,eAAoB,KAAA,QAAA,CAAA;AAAA;AAEpC,IAEA;AACE,MAAO,OAAA,KAAA;AAAA;AAEb;AAGO,SAAS,kBAAkB,OAA0C,EAAA;AAC1E,EAAI,IAAA,CAAC,WAAW,OAAO,OAAA,KAAY,YAAY,CAAC,OAAA,CAAQ,MAAa,OAAA,KAAA;AAErE,EAAA,QAAQ,QAAQ,IAAM;AAAA,IACpB,KAAK,cAAA;AACH,MAAA,OACE,OAAQ,CAAA,OAAA,IACR,OAAO,OAAA,CAAQ,YAAY,QAC3B,IAAA,OAAO,OAAQ,CAAA,OAAA,CAAQ,OAAY,KAAA,QAAA,IACnC,OAAO,OAAA,CAAQ,QAAQ,SAAc,KAAA,QAAA;AAAA,IAEzC,KAAK,kBAAA;AACH,MACE,OAAA,OAAA,CAAQ,WACR,OAAO,OAAA,CAAQ,YAAY,QAC3B,IAAA,OAAO,OAAQ,CAAA,OAAA,CAAQ,OAAY,KAAA,QAAA;AAAA,IAEvC,KAAK,qBAAA;AACH,MAAO,OAAA,IAAA;AAAA,IACT;AACE,MAAO,OAAA,KAAA;AAAA;AAEb","file":"message.utils.js","sourcesContent":["import {\n IncomingAuthMessageData,\n IncomingBalanceMessageData,\n IncomingMessage,\n IncomingMessageId,\n IncomingRequestMessageData,\n IncomingResizeMessage,\n IncomingResizeMessageData,\n OutgoingMessage\n} from \"./message.types\";\n\n// Type guard for incoming messages\nexport function isIncomingMessage(\n message: unknown\n): message is IncomingMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message)\n ) {\n return false;\n }\n\n switch (message.type as IncomingMessageId) {\n case \"embedded_auth\": {\n const data = message.data as IncomingAuthMessageData;\n\n return !!(data && typeof data === \"object\" && \"userDetails\" in data);\n }\n\n case \"embedded_connect\":\n case \"embedded_disconnect\":\n case \"embedded_open\":\n case \"embedded_close\":\n return true;\n\n case \"embedded_resize\": {\n const data = message.data as IncomingResizeMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.routeType === \"string\" &&\n typeof data.preferredLayoutType === \"string\" &&\n typeof data.height === \"number\"\n );\n }\n\n case \"embedded_balance\": {\n const data = message.data as IncomingBalanceMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n (data.amount === null || typeof data.amount === \"number\") &&\n (data.currency === null || typeof data.currency === \"string\") &&\n typeof data.formattedBalance == \"string\"\n );\n }\n\n case \"embedded_request\": {\n const data = message.data as IncomingRequestMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.pendingRequests === \"number\"\n );\n }\n\n default:\n return false;\n }\n}\n\n// Type guard for outgoing messages\nexport function isOutgoingMessage(message: any): message is OutgoingMessage {\n if (!message || typeof message !== \"object\" || !message.type) return false;\n\n switch (message.type) {\n case \"THEME_UPDATE\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.primary === \"string\" &&\n typeof message.payload.secondary === \"string\"\n );\n case \"WALLET_CONNECTED\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.address === \"string\"\n );\n case \"WALLET_DISCONNECTED\":\n return true;\n default:\n return false;\n }\n}\n"]}
{"version":3,"sources":["../../../src/utils/message/message.constants.ts","../../../src/utils/message/message.utils.ts"],"names":[],"mappings":"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","file":"message.utils.js","sourcesContent":["import { EmbeddedAuthProviderType, EmbeddedAuthStatus } from \"./message.types\";\n\nexport const EMBEDDED_AUTH_TYPE = [\n \"PASSKEYS\",\n \"EMAIL_N_PASSWORD\",\n \"GOOGLE\",\n \"FACEBOOK\",\n \"X\",\n \"APPLE\"\n] as const satisfies EmbeddedAuthProviderType[];\n\nexport const EMBEDDED_AUTH_STATUS = [\n \"loading\",\n \"onboarding\",\n \"authenticated\",\n \"not-authenticated\"\n] as const satisfies EmbeddedAuthStatus[];\n","import { EMBEDDED_AUTH_STATUS, EMBEDDED_AUTH_TYPE } from \"./message.constants\";\nimport {\n EventMessage,\n EventMessageData,\n IncomingAuthMessageData,\n IncomingBalanceMessageData,\n IncomingMessage,\n IncomingMessageId,\n IncomingRequestMessageData,\n IncomingResizeMessageData,\n OutgoingMessage,\n WalletSwitchMessage\n} from \"./message.types\";\n\nexport function isEventMessage(message: unknown): message is EventMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message) ||\n message.type !== \"event\"\n ) {\n return false;\n }\n\n const data = message.data as EventMessageData;\n\n // TODO: Validate the different value types/formats:\n return typeof data.name === \"string\";\n}\n\nexport function isWalletSwitchMessage(\n message: unknown\n): message is WalletSwitchMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message) ||\n message.type !== \"switch_wallet_event\"\n ) {\n return false;\n }\n\n const data = message.data as string | null;\n\n // TODO: Validate address format:\n return data === null || typeof data === \"string\";\n}\n\n// Type guard for incoming messages\nexport function isIncomingMessage(\n message: unknown\n): message is IncomingMessage {\n if (\n !message ||\n typeof message !== \"object\" ||\n !(\"id\" in message && \"type\" in message && \"data\" in message)\n ) {\n return false;\n }\n\n switch (message.type as IncomingMessageId) {\n case \"embedded_auth\": {\n const data = message.data as IncomingAuthMessageData;\n\n if (!data || typeof data !== \"object\") return false;\n\n if (data.authType === \"NATIVE_WALLET\") {\n return data.authStatus === null && data.userDetails === null;\n }\n\n if (data.authStatus === \"not-authenticated\") {\n return data.authType === null && data.userDetails === null;\n }\n\n return (\n EMBEDDED_AUTH_STATUS.includes(data.authStatus) &&\n EMBEDDED_AUTH_TYPE.includes(data.authType) &&\n (data.userDetails === null ||\n (!!data.userDetails && typeof data.userDetails === \"object\"))\n );\n }\n\n case \"embedded_open\":\n case \"embedded_close\":\n return true;\n\n case \"embedded_resize\": {\n const data = message.data as IncomingResizeMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.routeType === \"string\" &&\n typeof data.preferredLayoutType === \"string\" &&\n typeof data.height === \"number\"\n );\n }\n\n case \"embedded_balance\": {\n const data = message.data as IncomingBalanceMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n (data.amount === null || typeof data.amount === \"number\") &&\n (data.currency === null || typeof data.currency === \"string\") &&\n typeof data.formattedBalance == \"string\"\n );\n }\n\n case \"embedded_request\": {\n const data = message.data as IncomingRequestMessageData;\n\n return !!(\n data &&\n typeof data === \"object\" &&\n typeof data.pendingRequests === \"number\"\n );\n }\n\n default:\n return false;\n }\n}\n\n// Type guard for outgoing messages\n// TODO: Is this needed?\nexport function isOutgoingMessage(message: any): message is OutgoingMessage {\n if (!message || typeof message !== \"object\" || !message.type) return false;\n\n switch (message.type) {\n case \"THEME_UPDATE\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.primary === \"string\" &&\n typeof message.payload.secondary === \"string\"\n );\n case \"WALLET_CONNECTED\":\n return (\n message.payload &&\n typeof message.payload === \"object\" &&\n typeof message.payload.address === \"string\"\n );\n case \"WALLET_DISCONNECTED\":\n return true;\n default:\n return false;\n }\n}\n"]}
+33
-2
sdk-dist/utils/styles/styles.utils.cjs
'use strict';
var tsDeepmerge = require('ts-deepmerge');
// src/utils/styles/styles.utils.ts
// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = tsDeepmerge.merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = tsDeepmerge.merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = tsDeepmerge.merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = tsDeepmerge.merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
exports.addCSSVariables = addCSSVariables;
exports.mergeCSSVariablesOption = mergeCSSVariablesOption;
//# sourceMappingURL=styles.utils.cjs.map
//# sourceMappingURL=styles.utils.cjs.map
+1
-1
sdk-dist/utils/styles/styles.utils.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/styles/styles.utils.ts"],"names":[],"mappings":";;;AAAO,SAAS,eAAmB,CAAA,OAAA,EAAsB,IAAS,EAAA,MAAA,GAAS,EAAI,EAAA;AAC7E,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAM,MAAA,KAAA,GAAQ,KAAK,GAAG,CAAA;AAEtB,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA,OAAA,CAAQ,MAAM,WAAY,CAAA,CAAA,EAAA,EAAK,GAAG,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,SAAA,IACjE,OAAO,KAAU,KAAA,QAAA;AACxB,MAAQ,OAAA,CAAA,KAAA,CAAM,YAAY,CAAK,EAAA,EAAA,GAAG,GAAG,MAAM,CAAA,CAAA,EAAI,CAAG,EAAA,KAAK,CAAI,EAAA,CAAA,CAAA;AAAA;AAEjE","file":"styles.utils.cjs","sourcesContent":["export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts"],"names":["merge"],"mappings":";;;;;;;AAgXO,SAAS,cACd,OACsD,EAAA;AACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;AAErC;;;ACjXO,SAAS,eAAmB,CAAA,OAAA,EAAsB,IAAS,EAAA,MAAA,GAAS,EAAI,EAAA;AAC7E,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAA,MAAM,IAAO,GAAA,CAAA,EAAA,EAAK,GAAG,CAAA,EAAG,MAAM,CAAA,CAAA;AAC9B,IAAM,MAAA,KAAA,GAAQ,KAAK,GAAG,CAAA;AAEtB,IAAA,IAAI,OAAO,KAAU,KAAA,QAAA,UAAkB,KAAM,CAAA,WAAA,CAAY,MAAM,KAAK,CAAA;AAAA,SAAA,IAC3D,OAAO,KAAU,KAAA,QAAA;AACxB,MAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,CAAY,IAAM,EAAA,CAAA,EAAG,KAAK,CAAI,EAAA,CAAA,CAAA;AAAA;AAElD;AAEO,SAAS,uBACd,CAAA,aAAA,EAIA,WACA,EAAA,mBAAA,EACA,kBACyB,EAAA;AACzB,EAAA,IAAI,YAAe,GAAA,mBAAA;AACnB,EAAA,IAAI,WAAc,GAAA,kBAAA;AAElB,EAAA,IAAI,iBAAiB,MAAO,CAAA,IAAA,CAAK,aAAa,CAAA,CAAE,SAAS,CAAG,EAAA;AAC1D,IAAI,IAAA,aAAA,CAAc,aAAa,CAAG,EAAA;AAChC,MAAA,YAAA,GAAeA,iBAAM,CAAA,YAAA,EAAc,aAAe,EAAA,KAAA,IAAS,EAAE,CAAA;AAC7D,MAAA,WAAA,GAAcA,iBAAM,CAAA,kBAAA,EAAoB,aAAe,EAAA,IAAA,IAAQ,EAAE,CAAA;AAAA,KACnE,MAAA,IAAW,gBAAgB,MAAQ,EAAA;AACjC,MAAA,WAAA,GAAcA,iBAAM,CAAA,kBAAA,EAAoB,aAAiB,IAAA,EAAE,CAAA;AAAA,KACtD,MAAA;AACL,MAAA,YAAA,GAAeA,iBAAM,CAAA,YAAA,EAAc,aAAiB,IAAA,EAAE,CAAA;AAAA;AACxD;AAGF,EAAI,IAAA,WAAA,KAAgB,SAAuB,WAAA,GAAA,YAAA;AAC3C,EAAI,IAAA,WAAA,KAAgB,QAAuB,YAAA,GAAA,WAAA;AAE3C,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,YAAA;AAAA,IACP,IAAM,EAAA;AAAA,GACR;AACF","file":"styles.utils.cjs","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n"]}
+4
-1
sdk-dist/utils/styles/styles.utils.d.cts

@@ -0,3 +1,6 @@

import { T as ThemeVariant, n as ThemeSetting } from '../../wander-embedded.types-cWXjiYHr.cjs';
declare function addCSSVariables<T>(element: HTMLElement, vars: T, suffix?: string): void;
declare function mergeCSSVariablesOption<T extends Object>(cssVarsOption: undefined | Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>, themeOption: undefined | ThemeSetting, defaultLightCssVars: T, defaultDarkCssVars: T): Record<ThemeVariant, T>;
export { addCSSVariables };
export { addCSSVariables, mergeCSSVariablesOption };
+4
-1
sdk-dist/utils/styles/styles.utils.d.ts

@@ -0,3 +1,6 @@

import { T as ThemeVariant, n as ThemeSetting } from '../../wander-embedded.types-cWXjiYHr.js';
declare function addCSSVariables<T>(element: HTMLElement, vars: T, suffix?: string): void;
declare function mergeCSSVariablesOption<T extends Object>(cssVarsOption: undefined | Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>, themeOption: undefined | ThemeSetting, defaultLightCssVars: T, defaultDarkCssVars: T): Record<ThemeVariant, T>;
export { addCSSVariables };
export { addCSSVariables, mergeCSSVariablesOption };
+71
-2
sdk-dist/utils/styles/styles.utils.global.js
(function (exports) {
'use strict';
// node_modules/.pnpm/ts-deepmerge@7.0.2/node_modules/ts-deepmerge/esm/index.js
var isObject = (obj) => {
if (typeof obj === "object" && obj !== null) {
if (typeof Object.getPrototypeOf === "function") {
const prototype = Object.getPrototypeOf(obj);
return prototype === Object.prototype || prototype === null;
}
return Object.prototype.toString.call(obj) === "[object Object]";
}
return false;
};
var merge = (...objects) => objects.reduce((result, current) => {
if (Array.isArray(current)) {
throw new TypeError("Arguments provided to ts-deepmerge must be objects, not arrays.");
}
Object.keys(current).forEach((key) => {
if (["__proto__", "constructor", "prototype"].includes(key)) {
return;
}
if (Array.isArray(result[key]) && Array.isArray(current[key])) {
result[key] = merge.options.mergeArrays ? merge.options.uniqueArrayItems ? Array.from(new Set(result[key].concat(current[key]))) : [...result[key], ...current[key]] : current[key];
} else if (isObject(result[key]) && isObject(current[key])) {
result[key] = merge(result[key], current[key]);
} else {
result[key] = current[key] === void 0 ? merge.options.allowUndefinedOverrides ? current[key] : result[key] : current[key];
}
});
return result;
}, {});
var defaultOptions = {
allowUndefinedOverrides: true,
mergeArrays: true,
uniqueArrayItems: true
};
merge.options = defaultOptions;
merge.withOptions = (options, ...objects) => {
merge.options = Object.assign(Object.assign({}, defaultOptions), options);
const result = merge(...objects);
merge.options = defaultOptions;
return result;
};
// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
exports.addCSSVariables = addCSSVariables;
exports.mergeCSSVariablesOption = mergeCSSVariablesOption;

@@ -16,0 +85,0 @@ return exports;

+1
-1
sdk-dist/utils/styles/styles.utils.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/styles/styles.utils.ts"],"names":[],"mappings":";;;;EAAO,SAAS,eAAmB,CAAA,OAAA,EAAsB,IAAS,EAAA,MAAA,GAAS,EAAI,EAAA;EAC7E,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;EACtB,IAAM,MAAA,KAAA,GAAQ,KAAK,GAAG,CAAA;EAEtB,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA,OAAA,CAAQ,MAAM,WAAY,CAAA,CAAA,EAAA,EAAK,GAAG,CAAA,CAAA,EAAI,KAAK,CAAA;EAAA,SAAA,IACjE,OAAO,KAAU,KAAA,QAAA;EACxB,MAAQ,OAAA,CAAA,KAAA,CAAM,YAAY,CAAK,EAAA,EAAA,GAAG,GAAG,MAAM,CAAA,CAAA,EAAI,CAAG,EAAA,KAAK,CAAI,EAAA,CAAA,CAAA;EAAA;EAEjE","file":"styles.utils.global.js","sourcesContent":["export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n"]}
{"version":3,"sources":["../../../node_modules/.pnpm/ts-deepmerge@7.0.2/node_modules/ts-deepmerge/esm/index.js","../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts"],"names":[],"mappings":"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","file":"styles.utils.global.js","sourcesContent":["// istanbul ignore next\nconst isObject = (obj) => {\n if (typeof obj === \"object\" && obj !== null) {\n if (typeof Object.getPrototypeOf === \"function\") {\n const prototype = Object.getPrototypeOf(obj);\n return prototype === Object.prototype || prototype === null;\n }\n return Object.prototype.toString.call(obj) === \"[object Object]\";\n }\n return false;\n};\nexport const merge = (...objects) => objects.reduce((result, current) => {\n if (Array.isArray(current)) {\n throw new TypeError(\"Arguments provided to ts-deepmerge must be objects, not arrays.\");\n }\n Object.keys(current).forEach((key) => {\n if ([\"__proto__\", \"constructor\", \"prototype\"].includes(key)) {\n return;\n }\n if (Array.isArray(result[key]) && Array.isArray(current[key])) {\n result[key] = merge.options.mergeArrays\n ? merge.options.uniqueArrayItems\n ? Array.from(new Set(result[key].concat(current[key])))\n : [...result[key], ...current[key]]\n : current[key];\n }\n else if (isObject(result[key]) && isObject(current[key])) {\n result[key] = merge(result[key], current[key]);\n }\n else {\n result[key] =\n current[key] === undefined\n ? merge.options.allowUndefinedOverrides\n ? current[key]\n : result[key]\n : current[key];\n }\n });\n return result;\n}, {});\nconst defaultOptions = {\n allowUndefinedOverrides: true,\n mergeArrays: true,\n uniqueArrayItems: true,\n};\nmerge.options = defaultOptions;\nmerge.withOptions = (options, ...objects) => {\n merge.options = Object.assign(Object.assign({}, defaultOptions), options);\n const result = merge(...objects);\n merge.options = defaultOptions;\n return result;\n};\n","import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n"]}
+33
-3
sdk-dist/utils/styles/styles.utils.js

@@ -0,13 +1,43 @@

import { merge } from 'ts-deepmerge';
// src/utils/styles/styles.utils.ts
// src/wander-embedded.types.ts
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
// src/utils/styles/styles.utils.ts
function addCSSVariables(element, vars, suffix = "") {
for (const key in vars) {
const name = `--${key}${suffix}`;
const value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
if (typeof value === "string") element.style.setProperty(name, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
element.style.setProperty(name, `${value}px`);
}
}
function mergeCSSVariablesOption(cssVarsOption, themeOption, defaultLightCssVars, defaultDarkCssVars) {
let cssVarsLight = defaultLightCssVars;
let cssVarsDark = defaultDarkCssVars;
if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {
if (isThemeRecord(cssVarsOption)) {
cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {});
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {});
} else if (themeOption === "dark") {
cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {});
} else {
cssVarsLight = merge(cssVarsLight, cssVarsOption || {});
}
}
if (themeOption === "light") cssVarsDark = cssVarsLight;
if (themeOption === "dark") cssVarsLight = cssVarsDark;
return {
light: cssVarsLight,
dark: cssVarsDark
};
}
export { addCSSVariables };
export { addCSSVariables, mergeCSSVariablesOption };
//# sourceMappingURL=styles.utils.js.map
//# sourceMappingURL=styles.utils.js.map
+1
-1
sdk-dist/utils/styles/styles.utils.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/styles/styles.utils.ts"],"names":[],"mappings":";AAAO,SAAS,eAAmB,CAAA,OAAA,EAAsB,IAAS,EAAA,MAAA,GAAS,EAAI,EAAA;AAC7E,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAM,MAAA,KAAA,GAAQ,KAAK,GAAG,CAAA;AAEtB,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA,OAAA,CAAQ,MAAM,WAAY,CAAA,CAAA,EAAA,EAAK,GAAG,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,SAAA,IACjE,OAAO,KAAU,KAAA,QAAA;AACxB,MAAQ,OAAA,CAAA,KAAA,CAAM,YAAY,CAAK,EAAA,EAAA,GAAG,GAAG,MAAM,CAAA,CAAA,EAAI,CAAG,EAAA,KAAK,CAAI,EAAA,CAAA,CAAA;AAAA;AAEjE","file":"styles.utils.js","sourcesContent":["export function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(`--${key}`, value);\n else if (typeof value === \"number\")\n element.style.setProperty(`--${key}${suffix}`, `${value}px`);\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts"],"names":[],"mappings":";;;;;AAgXO,SAAS,cACd,OACsD,EAAA;AACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;AAErC;;;ACjXO,SAAS,eAAmB,CAAA,OAAA,EAAsB,IAAS,EAAA,MAAA,GAAS,EAAI,EAAA;AAC7E,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAA,MAAM,IAAO,GAAA,CAAA,EAAA,EAAK,GAAG,CAAA,EAAG,MAAM,CAAA,CAAA;AAC9B,IAAM,MAAA,KAAA,GAAQ,KAAK,GAAG,CAAA;AAEtB,IAAA,IAAI,OAAO,KAAU,KAAA,QAAA,UAAkB,KAAM,CAAA,WAAA,CAAY,MAAM,KAAK,CAAA;AAAA,SAAA,IAC3D,OAAO,KAAU,KAAA,QAAA;AACxB,MAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,CAAY,IAAM,EAAA,CAAA,EAAG,KAAK,CAAI,EAAA,CAAA,CAAA;AAAA;AAElD;AAEO,SAAS,uBACd,CAAA,aAAA,EAIA,WACA,EAAA,mBAAA,EACA,kBACyB,EAAA;AACzB,EAAA,IAAI,YAAe,GAAA,mBAAA;AACnB,EAAA,IAAI,WAAc,GAAA,kBAAA;AAElB,EAAA,IAAI,iBAAiB,MAAO,CAAA,IAAA,CAAK,aAAa,CAAA,CAAE,SAAS,CAAG,EAAA;AAC1D,IAAI,IAAA,aAAA,CAAc,aAAa,CAAG,EAAA;AAChC,MAAA,YAAA,GAAe,KAAM,CAAA,YAAA,EAAc,aAAe,EAAA,KAAA,IAAS,EAAE,CAAA;AAC7D,MAAA,WAAA,GAAc,KAAM,CAAA,kBAAA,EAAoB,aAAe,EAAA,IAAA,IAAQ,EAAE,CAAA;AAAA,KACnE,MAAA,IAAW,gBAAgB,MAAQ,EAAA;AACjC,MAAA,WAAA,GAAc,KAAM,CAAA,kBAAA,EAAoB,aAAiB,IAAA,EAAE,CAAA;AAAA,KACtD,MAAA;AACL,MAAA,YAAA,GAAe,KAAM,CAAA,YAAA,EAAc,aAAiB,IAAA,EAAE,CAAA;AAAA;AACxD;AAGF,EAAI,IAAA,WAAA,KAAgB,SAAuB,WAAA,GAAA,YAAA;AAC3C,EAAI,IAAA,WAAA,KAAgB,QAAuB,YAAA,GAAA,WAAA;AAE3C,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,YAAA;AAAA,IACP,IAAM,EAAA;AAAA,GACR;AACF","file":"styles.utils.js","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n","import { merge } from \"ts-deepmerge\";\nimport {\n isThemeRecord,\n ThemeSetting,\n ThemeVariant\n} from \"../../wander-embedded.types\";\n\nexport function addCSSVariables<T>(element: HTMLElement, vars: T, suffix = \"\") {\n for (const key in vars) {\n const name = `--${key}${suffix}`;\n const value = vars[key];\n\n if (typeof value === \"string\") element.style.setProperty(name, value);\n else if (typeof value === \"number\")\n element.style.setProperty(name, `${value}px`);\n }\n}\n\nexport function mergeCSSVariablesOption<T extends Object>(\n cssVarsOption:\n | undefined\n | Partial<T>\n | Partial<Record<ThemeVariant, Partial<T>>>,\n themeOption: undefined | ThemeSetting,\n defaultLightCssVars: T,\n defaultDarkCssVars: T\n): Record<ThemeVariant, T> {\n let cssVarsLight = defaultLightCssVars;\n let cssVarsDark = defaultDarkCssVars;\n\n if (cssVarsOption && Object.keys(cssVarsOption).length > 0) {\n if (isThemeRecord(cssVarsOption)) {\n cssVarsLight = merge(cssVarsLight, cssVarsOption?.light || {}) as T;\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption?.dark || {}) as T;\n } else if (themeOption === \"dark\") {\n cssVarsDark = merge(defaultDarkCssVars, cssVarsOption || {}) as T;\n } else {\n cssVarsLight = merge(cssVarsLight, cssVarsOption || {}) as T;\n }\n }\n\n if (themeOption === \"light\") cssVarsDark = cssVarsLight;\n if (themeOption === \"dark\") cssVarsLight = cssVarsDark;\n\n return {\n light: cssVarsLight,\n dark: cssVarsDark\n };\n}\n"]}
+10
-4
sdk-dist/utils/url/url.utils.cjs

@@ -5,8 +5,12 @@ 'use strict';

var PARAM_CLIENT_ID = "client-id";
var PARAM_THEME = "theme";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
var PARAM_HIDE_BE = "hide-be";
var PARAM_SERVER_BASE_URL = "server-base-url";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
function getEmbeddedURL({
baseURL,
clientId,
baseURL,
baseServerURL = ""
theme,
hideBE,
baseServerURL
}) {

@@ -16,4 +20,6 @@ const url = new URL(baseURL);

searchParams.set(PARAM_CLIENT_ID, clientId);
searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
searchParams.set(PARAM_THEME, theme);
searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);
if (hideBE) searchParams.set(PARAM_HIDE_BE, "1");
if (baseServerURL) searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
return url.toString();

@@ -20,0 +26,0 @@ }

+1
-1
sdk-dist/utils/url/url.utils.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/url/url.utils.ts"],"names":[],"mappings":";;;AASA,IAAM,eAAkB,GAAA,WAAA;AACxB,IAAM,qBAAwB,GAAA,iBAAA;AAC9B,IAAM,qBAAwB,GAAA,iBAAA;AAQvB,SAAS,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAA0B,EAAA;AACxB,EAAM,MAAA,GAAA,GAAM,IAAI,GAAA,CAAI,OAAO,CAAA;AAC3B,EAAM,MAAA,EAAE,cAAiB,GAAA,GAAA;AAEzB,EAAa,YAAA,CAAA,GAAA,CAAI,iBAAiB,QAAQ,CAAA;AAC1C,EAAa,YAAA,CAAA,GAAA,CAAI,uBAAuB,aAAa,CAAA;AACrD,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA;AAE9D,EAAA,OAAO,IAAI,QAAS,EAAA;AACtB","file":"url.utils.cjs","sourcesContent":["// When the Wander Embedded <iframe> is created, its URL will include the following search params:\n// - client-id\n// - server-base-url\n// - origin\n//\n// The code/functions below run in the context of the SKD, that is, in the domain of the dApp that integrates Wander\n// Embedded.\n\n// Duplicated in `src/utils/embedded/embedded.utils.ts`:\nconst PARAM_CLIENT_ID = \"client-id\";\nconst PARAM_SERVER_BASE_URL = \"server-base-url\";\nconst PARAM_ANCESTOR_ORIGIN = \"ancestor-origin\";\n\nexport interface GetEmbeddedURLOptions {\n clientId: string;\n baseURL: string;\n baseServerURL?: string;\n}\n\nexport function getEmbeddedURL({\n clientId,\n baseURL,\n baseServerURL = \"\"\n}: GetEmbeddedURLOptions) {\n const url = new URL(baseURL);\n const { searchParams } = url;\n\n searchParams.set(PARAM_CLIENT_ID, clientId);\n searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);\n searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);\n\n return url.toString();\n}\n"]}
{"version":3,"sources":["../../../src/utils/url/url.utils.ts"],"names":[],"mappings":";;;AAWA,IAAM,eAAkB,GAAA,WAAA;AACxB,IAAM,WAAc,GAAA,OAAA;AACpB,IAAM,qBAAwB,GAAA,iBAAA;AAC9B,IAAM,aAAgB,GAAA,SAAA;AACtB,IAAM,qBAAwB,GAAA,iBAAA;AAUvB,SAAS,cAAe,CAAA;AAAA,EAC7B,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAM,MAAA,GAAA,GAAM,IAAI,GAAA,CAAI,OAAO,CAAA;AAC3B,EAAM,MAAA,EAAE,cAAiB,GAAA,GAAA;AAEzB,EAAa,YAAA,CAAA,GAAA,CAAI,iBAAiB,QAAQ,CAAA;AAC1C,EAAa,YAAA,CAAA,GAAA,CAAI,aAAa,KAAK,CAAA;AACnC,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA;AAG9D,EAAA,IAAI,MAAQ,EAAA,YAAA,CAAa,GAAI,CAAA,aAAA,EAAe,GAAG,CAAA;AAC/C,EAAA,IAAI,aAAe,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,aAAa,CAAA;AAExE,EAAA,OAAO,IAAI,QAAS,EAAA;AACtB","file":"url.utils.cjs","sourcesContent":["import { ThemeSetting } from \"../../wander-embedded.types\";\n\n// When the Wander Embedded <iframe> is created, its URL will include the following search params:\n// - client-id\n// - server-base-url\n// - origin\n//\n// The code/functions below run in the context of the SKD, that is, in the domain of the dApp that integrates Wander\n// Embedded.\n\n// Duplicated in `src/utils/embedded/embedded.utils.ts`:\nconst PARAM_CLIENT_ID = \"client-id\";\nconst PARAM_THEME = \"theme\";\nconst PARAM_ANCESTOR_ORIGIN = \"ancestor-origin\";\nconst PARAM_HIDE_BE = \"hide-be\";\nconst PARAM_SERVER_BASE_URL = \"server-base-url\";\n\nexport interface GetEmbeddedURLOptions {\n baseURL: string;\n clientId: string;\n theme: ThemeSetting;\n hideBE?: boolean;\n baseServerURL?: string;\n}\n\nexport function getEmbeddedURL({\n baseURL,\n clientId,\n theme,\n hideBE,\n baseServerURL\n}: GetEmbeddedURLOptions) {\n const url = new URL(baseURL);\n const { searchParams } = url;\n\n searchParams.set(PARAM_CLIENT_ID, clientId);\n searchParams.set(PARAM_THEME, theme);\n searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);\n\n // Optional:\n if (hideBE) searchParams.set(PARAM_HIDE_BE, \"1\");\n if (baseServerURL) searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);\n\n return url.toString();\n}\n"]}
+6
-2
sdk-dist/utils/url/url.utils.d.cts

@@ -0,8 +1,12 @@

import { n as ThemeSetting } from '../../wander-embedded.types-cWXjiYHr.cjs';
interface GetEmbeddedURLOptions {
baseURL: string;
clientId: string;
baseURL: string;
theme: ThemeSetting;
hideBE?: boolean;
baseServerURL?: string;
}
declare function getEmbeddedURL({ clientId, baseURL, baseServerURL }: GetEmbeddedURLOptions): string;
declare function getEmbeddedURL({ baseURL, clientId, theme, hideBE, baseServerURL }: GetEmbeddedURLOptions): string;
export { type GetEmbeddedURLOptions, getEmbeddedURL };
+6
-2
sdk-dist/utils/url/url.utils.d.ts

@@ -0,8 +1,12 @@

import { n as ThemeSetting } from '../../wander-embedded.types-cWXjiYHr.js';
interface GetEmbeddedURLOptions {
baseURL: string;
clientId: string;
baseURL: string;
theme: ThemeSetting;
hideBE?: boolean;
baseServerURL?: string;
}
declare function getEmbeddedURL({ clientId, baseURL, baseServerURL }: GetEmbeddedURLOptions): string;
declare function getEmbeddedURL({ baseURL, clientId, theme, hideBE, baseServerURL }: GetEmbeddedURLOptions): string;
export { type GetEmbeddedURLOptions, getEmbeddedURL };
+10
-4
sdk-dist/utils/url/url.utils.global.js

@@ -6,8 +6,12 @@ (function (exports) {

var PARAM_CLIENT_ID = "client-id";
var PARAM_THEME = "theme";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
var PARAM_HIDE_BE = "hide-be";
var PARAM_SERVER_BASE_URL = "server-base-url";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
function getEmbeddedURL({
baseURL,
clientId,
baseURL,
baseServerURL = ""
theme,
hideBE,
baseServerURL
}) {

@@ -17,4 +21,6 @@ const url = new URL(baseURL);

searchParams.set(PARAM_CLIENT_ID, clientId);
searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
searchParams.set(PARAM_THEME, theme);
searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);
if (hideBE) searchParams.set(PARAM_HIDE_BE, "1");
if (baseServerURL) searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
return url.toString();

@@ -21,0 +27,0 @@ }

+1
-1
sdk-dist/utils/url/url.utils.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/url/url.utils.ts"],"names":[],"mappings":";;;;EASA,IAAM,eAAkB,GAAA,WAAA;EACxB,IAAM,qBAAwB,GAAA,iBAAA;EAC9B,IAAM,qBAAwB,GAAA,iBAAA;EAQvB,SAAS,cAAe,CAAA;EAAA,EAC7B,QAAA;EAAA,EACA,OAAA;EAAA,EACA,aAAgB,GAAA;EAClB,CAA0B,EAAA;EACxB,EAAM,MAAA,GAAA,GAAM,IAAI,GAAA,CAAI,OAAO,CAAA;EAC3B,EAAM,MAAA,EAAE,cAAiB,GAAA,GAAA;EAEzB,EAAa,YAAA,CAAA,GAAA,CAAI,iBAAiB,QAAQ,CAAA;EAC1C,EAAa,YAAA,CAAA,GAAA,CAAI,uBAAuB,aAAa,CAAA;EACrD,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA;EAE9D,EAAA,OAAO,IAAI,QAAS,EAAA;EACtB","file":"url.utils.global.js","sourcesContent":["// When the Wander Embedded <iframe> is created, its URL will include the following search params:\n// - client-id\n// - server-base-url\n// - origin\n//\n// The code/functions below run in the context of the SKD, that is, in the domain of the dApp that integrates Wander\n// Embedded.\n\n// Duplicated in `src/utils/embedded/embedded.utils.ts`:\nconst PARAM_CLIENT_ID = \"client-id\";\nconst PARAM_SERVER_BASE_URL = \"server-base-url\";\nconst PARAM_ANCESTOR_ORIGIN = \"ancestor-origin\";\n\nexport interface GetEmbeddedURLOptions {\n clientId: string;\n baseURL: string;\n baseServerURL?: string;\n}\n\nexport function getEmbeddedURL({\n clientId,\n baseURL,\n baseServerURL = \"\"\n}: GetEmbeddedURLOptions) {\n const url = new URL(baseURL);\n const { searchParams } = url;\n\n searchParams.set(PARAM_CLIENT_ID, clientId);\n searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);\n searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);\n\n return url.toString();\n}\n"]}
{"version":3,"sources":["../../../src/utils/url/url.utils.ts"],"names":[],"mappings":";;;;EAWA,IAAM,eAAkB,GAAA,WAAA;EACxB,IAAM,WAAc,GAAA,OAAA;EACpB,IAAM,qBAAwB,GAAA,iBAAA;EAC9B,IAAM,aAAgB,GAAA,SAAA;EACtB,IAAM,qBAAwB,GAAA,iBAAA;EAUvB,SAAS,cAAe,CAAA;EAAA,EAC7B,OAAA;EAAA,EACA,QAAA;EAAA,EACA,KAAA;EAAA,EACA,MAAA;EAAA,EACA;EACF,CAA0B,EAAA;EACxB,EAAM,MAAA,GAAA,GAAM,IAAI,GAAA,CAAI,OAAO,CAAA;EAC3B,EAAM,MAAA,EAAE,cAAiB,GAAA,GAAA;EAEzB,EAAa,YAAA,CAAA,GAAA,CAAI,iBAAiB,QAAQ,CAAA;EAC1C,EAAa,YAAA,CAAA,GAAA,CAAI,aAAa,KAAK,CAAA;EACnC,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA;EAG9D,EAAA,IAAI,MAAQ,EAAA,YAAA,CAAa,GAAI,CAAA,aAAA,EAAe,GAAG,CAAA;EAC/C,EAAA,IAAI,aAAe,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,aAAa,CAAA;EAExE,EAAA,OAAO,IAAI,QAAS,EAAA;EACtB","file":"url.utils.global.js","sourcesContent":["import { ThemeSetting } from \"../../wander-embedded.types\";\n\n// When the Wander Embedded <iframe> is created, its URL will include the following search params:\n// - client-id\n// - server-base-url\n// - origin\n//\n// The code/functions below run in the context of the SKD, that is, in the domain of the dApp that integrates Wander\n// Embedded.\n\n// Duplicated in `src/utils/embedded/embedded.utils.ts`:\nconst PARAM_CLIENT_ID = \"client-id\";\nconst PARAM_THEME = \"theme\";\nconst PARAM_ANCESTOR_ORIGIN = \"ancestor-origin\";\nconst PARAM_HIDE_BE = \"hide-be\";\nconst PARAM_SERVER_BASE_URL = \"server-base-url\";\n\nexport interface GetEmbeddedURLOptions {\n baseURL: string;\n clientId: string;\n theme: ThemeSetting;\n hideBE?: boolean;\n baseServerURL?: string;\n}\n\nexport function getEmbeddedURL({\n baseURL,\n clientId,\n theme,\n hideBE,\n baseServerURL\n}: GetEmbeddedURLOptions) {\n const url = new URL(baseURL);\n const { searchParams } = url;\n\n searchParams.set(PARAM_CLIENT_ID, clientId);\n searchParams.set(PARAM_THEME, theme);\n searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);\n\n // Optional:\n if (hideBE) searchParams.set(PARAM_HIDE_BE, \"1\");\n if (baseServerURL) searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);\n\n return url.toString();\n}\n"]}
+10
-4
sdk-dist/utils/url/url.utils.js
// src/utils/url/url.utils.ts
var PARAM_CLIENT_ID = "client-id";
var PARAM_THEME = "theme";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
var PARAM_HIDE_BE = "hide-be";
var PARAM_SERVER_BASE_URL = "server-base-url";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
function getEmbeddedURL({
baseURL,
clientId,
baseURL,
baseServerURL = ""
theme,
hideBE,
baseServerURL
}) {

@@ -13,4 +17,6 @@ const url = new URL(baseURL);

searchParams.set(PARAM_CLIENT_ID, clientId);
searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
searchParams.set(PARAM_THEME, theme);
searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);
if (hideBE) searchParams.set(PARAM_HIDE_BE, "1");
if (baseServerURL) searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
return url.toString();

@@ -17,0 +23,0 @@ }

+1
-1
sdk-dist/utils/url/url.utils.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../../../src/utils/url/url.utils.ts"],"names":[],"mappings":";AASA,IAAM,eAAkB,GAAA,WAAA;AACxB,IAAM,qBAAwB,GAAA,iBAAA;AAC9B,IAAM,qBAAwB,GAAA,iBAAA;AAQvB,SAAS,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAA0B,EAAA;AACxB,EAAM,MAAA,GAAA,GAAM,IAAI,GAAA,CAAI,OAAO,CAAA;AAC3B,EAAM,MAAA,EAAE,cAAiB,GAAA,GAAA;AAEzB,EAAa,YAAA,CAAA,GAAA,CAAI,iBAAiB,QAAQ,CAAA;AAC1C,EAAa,YAAA,CAAA,GAAA,CAAI,uBAAuB,aAAa,CAAA;AACrD,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA;AAE9D,EAAA,OAAO,IAAI,QAAS,EAAA;AACtB","file":"url.utils.js","sourcesContent":["// When the Wander Embedded <iframe> is created, its URL will include the following search params:\n// - client-id\n// - server-base-url\n// - origin\n//\n// The code/functions below run in the context of the SKD, that is, in the domain of the dApp that integrates Wander\n// Embedded.\n\n// Duplicated in `src/utils/embedded/embedded.utils.ts`:\nconst PARAM_CLIENT_ID = \"client-id\";\nconst PARAM_SERVER_BASE_URL = \"server-base-url\";\nconst PARAM_ANCESTOR_ORIGIN = \"ancestor-origin\";\n\nexport interface GetEmbeddedURLOptions {\n clientId: string;\n baseURL: string;\n baseServerURL?: string;\n}\n\nexport function getEmbeddedURL({\n clientId,\n baseURL,\n baseServerURL = \"\"\n}: GetEmbeddedURLOptions) {\n const url = new URL(baseURL);\n const { searchParams } = url;\n\n searchParams.set(PARAM_CLIENT_ID, clientId);\n searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);\n searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);\n\n return url.toString();\n}\n"]}
{"version":3,"sources":["../../../src/utils/url/url.utils.ts"],"names":[],"mappings":";AAWA,IAAM,eAAkB,GAAA,WAAA;AACxB,IAAM,WAAc,GAAA,OAAA;AACpB,IAAM,qBAAwB,GAAA,iBAAA;AAC9B,IAAM,aAAgB,GAAA,SAAA;AACtB,IAAM,qBAAwB,GAAA,iBAAA;AAUvB,SAAS,cAAe,CAAA;AAAA,EAC7B,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAM,MAAA,GAAA,GAAM,IAAI,GAAA,CAAI,OAAO,CAAA;AAC3B,EAAM,MAAA,EAAE,cAAiB,GAAA,GAAA;AAEzB,EAAa,YAAA,CAAA,GAAA,CAAI,iBAAiB,QAAQ,CAAA;AAC1C,EAAa,YAAA,CAAA,GAAA,CAAI,aAAa,KAAK,CAAA;AACnC,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA;AAG9D,EAAA,IAAI,MAAQ,EAAA,YAAA,CAAa,GAAI,CAAA,aAAA,EAAe,GAAG,CAAA;AAC/C,EAAA,IAAI,aAAe,EAAA,YAAA,CAAa,GAAI,CAAA,qBAAA,EAAuB,aAAa,CAAA;AAExE,EAAA,OAAO,IAAI,QAAS,EAAA;AACtB","file":"url.utils.js","sourcesContent":["import { ThemeSetting } from \"../../wander-embedded.types\";\n\n// When the Wander Embedded <iframe> is created, its URL will include the following search params:\n// - client-id\n// - server-base-url\n// - origin\n//\n// The code/functions below run in the context of the SKD, that is, in the domain of the dApp that integrates Wander\n// Embedded.\n\n// Duplicated in `src/utils/embedded/embedded.utils.ts`:\nconst PARAM_CLIENT_ID = \"client-id\";\nconst PARAM_THEME = \"theme\";\nconst PARAM_ANCESTOR_ORIGIN = \"ancestor-origin\";\nconst PARAM_HIDE_BE = \"hide-be\";\nconst PARAM_SERVER_BASE_URL = \"server-base-url\";\n\nexport interface GetEmbeddedURLOptions {\n baseURL: string;\n clientId: string;\n theme: ThemeSetting;\n hideBE?: boolean;\n baseServerURL?: string;\n}\n\nexport function getEmbeddedURL({\n baseURL,\n clientId,\n theme,\n hideBE,\n baseServerURL\n}: GetEmbeddedURLOptions) {\n const url = new URL(baseURL);\n const { searchParams } = url;\n\n searchParams.set(PARAM_CLIENT_ID, clientId);\n searchParams.set(PARAM_THEME, theme);\n searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);\n\n // Optional:\n if (hideBE) searchParams.set(PARAM_HIDE_BE, \"1\");\n if (baseServerURL) searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);\n\n return url.toString();\n}\n"]}
+13
-3
sdk-dist/wander-embedded.d.cts

@@ -1,2 +0,2 @@

import { U as UserDetails, g as RouteConfig, B as BalanceInfo, i as WanderEmbeddedOptions } from './wander-embedded.types-DZt7tGOM.cjs';
import { A as AuthState, j as RouteConfig, B as BalanceInfo, o as WanderEmbeddedOptions } from './wander-embedded.types-cWXjiYHr.cjs';

@@ -34,3 +34,7 @@ /**

private static instance;
static WANDER_CONNECT_WALLET_NAME: "Wander Embedded";
static AUTH_STATE_LS_KEY: "WANDER_CONNECT_AUTH_STATE";
static NATIVE_WALLET_ENABLED_KEY: "WANDER_CONNECT_NATIVE_WALLET_ENABLED";
static DEFAULT_IFRAME_SRC: "http://localhost:5173/" | "https://embed-dev.wander.app/";
static DEFAULT_THEME: "system";
private onAuth;

@@ -51,5 +55,6 @@ private onOpen;

/**
* Contains details about the authenticated user, or null if not authenticated
* Contains the current authentication state of the SDK, and it is initialized with cached data in order to show as
* soon as possible the non-auth or the loading auth version of the SDK.
*/
userDetails: UserDetails | null;
authenticationState: AuthState;
/**

@@ -67,2 +72,4 @@ * Current route configuration including dimensions and layout preferences

pendingRequests: number;
private isWalletReady;
private isNativeWalletEnabled;
private windowArweaveWallet;

@@ -85,2 +92,5 @@ /**

constructor(options: WanderEmbeddedOptions);
private injectConnectWalletSDK;
private injectNativeWalletSDK;
private dispatchWalletLoadedEvents;
private initializeComponents;

@@ -87,0 +97,0 @@ private handleMessage;

+13
-3
sdk-dist/wander-embedded.d.ts

@@ -1,2 +0,2 @@

import { U as UserDetails, g as RouteConfig, B as BalanceInfo, i as WanderEmbeddedOptions } from './wander-embedded.types-DZt7tGOM.js';
import { A as AuthState, j as RouteConfig, B as BalanceInfo, o as WanderEmbeddedOptions } from './wander-embedded.types-cWXjiYHr.js';

@@ -34,3 +34,7 @@ /**

private static instance;
static WANDER_CONNECT_WALLET_NAME: "Wander Embedded";
static AUTH_STATE_LS_KEY: "WANDER_CONNECT_AUTH_STATE";
static NATIVE_WALLET_ENABLED_KEY: "WANDER_CONNECT_NATIVE_WALLET_ENABLED";
static DEFAULT_IFRAME_SRC: "http://localhost:5173/" | "https://embed-dev.wander.app/";
static DEFAULT_THEME: "system";
private onAuth;

@@ -51,5 +55,6 @@ private onOpen;

/**
* Contains details about the authenticated user, or null if not authenticated
* Contains the current authentication state of the SDK, and it is initialized with cached data in order to show as
* soon as possible the non-auth or the loading auth version of the SDK.
*/
userDetails: UserDetails | null;
authenticationState: AuthState;
/**

@@ -67,2 +72,4 @@ * Current route configuration including dimensions and layout preferences

pendingRequests: number;
private isWalletReady;
private isNativeWalletEnabled;
private windowArweaveWallet;

@@ -85,2 +92,5 @@ /**

constructor(options: WanderEmbeddedOptions);
private injectConnectWalletSDK;
private injectNativeWalletSDK;
private dispatchWalletLoadedEvents;
private initializeComponents;

@@ -87,0 +97,0 @@ private handleMessage;

+1
-1
sdk-dist/wander-embedded.types.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;AAyJO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAMO,SAAS,cAAc,GAAmC,EAAA;AAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;AAEhD;AAqLO,SAAS,cACd,OACsD,EAAA;AACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;AAErC","file":"wander-embedded.types.cjs","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n"]}
{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;AAyJO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAMO,SAAS,cAAc,GAAmC,EAAA;AAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;AAEhD;AAqMO,SAAS,cACd,OACsD,EAAA;AACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;AAErC","file":"wander-embedded.types.cjs","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n"]}
+1
-1
sdk-dist/wander-embedded.types.d.cts

@@ -1,1 +0,1 @@

export { B as BalanceInfo, C as Currency, H as HalfLayoutConfig, j as ImageExtension, I as ImgPath, k as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, m as RequestsInfo, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, u as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, w as WanderEmbeddedButtonLabels, v as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, s as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, p as WanderEmbeddedComponentConfig, o as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, q as isThemeRecord } from './wander-embedded.types-DZt7tGOM.cjs';
export { A as AuthState, B as BalanceInfo, C as Currency, H as HalfLayoutConfig, p as ImageExtension, I as ImgPath, q as LAYOUT_TYPES, L as LayoutConfig, h as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, s as RequestsInfo, j as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, y as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, e as WanderEmbeddedButtonLabels, z as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, w as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, u as WanderEmbeddedComponentConfig, t as WanderEmbeddedComponentOptions, f as WanderEmbeddedIframeCSSVars, i as WanderEmbeddedIframeConfig, g as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, o as WanderEmbeddedOptions, x as WanderEmbeddedPopupPosition, r as isRouteConfig, v as isThemeRecord } from './wander-embedded.types-cWXjiYHr.cjs';
+1
-1
sdk-dist/wander-embedded.types.d.ts

@@ -1,1 +0,1 @@

export { B as BalanceInfo, C as Currency, H as HalfLayoutConfig, j as ImageExtension, I as ImgPath, k as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, m as RequestsInfo, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, u as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, w as WanderEmbeddedButtonLabels, v as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, s as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, p as WanderEmbeddedComponentConfig, o as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, q as isThemeRecord } from './wander-embedded.types-DZt7tGOM.js';
export { A as AuthState, B as BalanceInfo, C as Currency, H as HalfLayoutConfig, p as ImageExtension, I as ImgPath, q as LAYOUT_TYPES, L as LayoutConfig, h as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, s as RequestsInfo, j as RouteConfig, R as RouteType, S as SidebarLayoutConfig, n as ThemeSetting, T as ThemeVariant, y as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, e as WanderEmbeddedButtonLabels, z as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, w as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, u as WanderEmbeddedComponentConfig, t as WanderEmbeddedComponentOptions, f as WanderEmbeddedIframeCSSVars, i as WanderEmbeddedIframeConfig, g as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, o as WanderEmbeddedOptions, x as WanderEmbeddedPopupPosition, r as isRouteConfig, v as isThemeRecord } from './wander-embedded.types-cWXjiYHr.js';
+1
-1
sdk-dist/wander-embedded.types.global.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;;AAyJO,MAAM,YAAe,GAAA;EAAA,EAC1B,OAAA;EAAA,EACA,OAAA;EAAA,EACA,SAAA;EAAA,EACA;EACF;EAMO,SAAS,cAAc,GAAmC,EAAA;EAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;EAEhD;EAqLO,SAAS,cACd,OACsD,EAAA;EACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;EAErC","file":"wander-embedded.types.global.js","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n"]}
{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;;AAyJO,MAAM,YAAe,GAAA;EAAA,EAC1B,OAAA;EAAA,EACA,OAAA;EAAA,EACA,SAAA;EAAA,EACA;EACF;EAMO,SAAS,cAAc,GAAmC,EAAA;EAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;EAEhD;EAqMO,SAAS,cACd,OACsD,EAAA;EACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;EAErC","file":"wander-embedded.types.global.js","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n"]}
+1
-1
sdk-dist/wander-embedded.types.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";AAyJO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAMO,SAAS,cAAc,GAAmC,EAAA;AAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;AAEhD;AAqLO,SAAS,cACd,OACsD,EAAA;AACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;AAErC","file":"wander-embedded.types.js","sourcesContent":["import { UserDetails } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (userDetails: UserDetails | null) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type.\n * Can be a single layout type/config applied to all routes or a map of specific layouts per route type.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Text to display for the sign in button.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display for reviewing requests button.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo that will be displayed next to the Wander logo when connected.\n * @default \"\"\n */\n dappLogoSrc?: string;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * URL of the dApp logo.\n */\n dappLogoSrc: string;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user is authenticated. */\n | \"isAuthenticated\"\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n /**\n * Padding inside the iframe.\n */\n iframePadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n iframeMaxWidth: number;\n\n /**\n * Maximum height of the iframe content.\n */\n iframeMaxHeight: number;\n\n // Backdrop (div):\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n /**\n * Pointer events setting for the backdrop.\n * If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to \"none\", unless\n * a different value is specified. In any other case, this is ignored.\n */\n backdropPointerEvents: string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n"]}
{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";AAyJO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAMO,SAAS,cAAc,GAAmC,EAAA;AAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;AAEhD;AAqMO,SAAS,cACd,OACsD,EAAA;AACtD,EAAO,OAAA,CAAC,EACN,OACA,IAAA,OAAO,YAAY,QAClB,KAAA,OAAA,IAAW,WAAW,MAAU,IAAA,OAAA,CAAA,CAAA;AAErC","file":"wander-embedded.types.js","sourcesContent":["import { IncomingAuthMessageData } from \"./utils/message/message.types\";\n\n/**\n * Types of routes available in the Wander Embedded SDK.\n */\nexport type RouteType =\n /** Default home screen */\n | \"default\"\n /** Authentication screen */\n | \"auth\"\n /** Account management screen */\n | \"account\"\n /** Settings and preferences screen */\n | \"settings\"\n /** Authorization request screen for approving transactions. */\n | \"auth-request\";\n\n/** Supported image extensions */\nexport type ImageExtension = \"webp\" | \"png\";\n\n/** Supported Image Path */\nexport type ImgPath = `${RouteType}.${ImageExtension}`;\n\n/** Modal layout configuration */\nexport interface ModalLayoutConfig {\n /**\n * Specifies this is a modal layout type.\n * @required\n */\n type: \"modal\";\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for popup layout type.\n * Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.\n */\nexport interface PopupLayoutConfig {\n /**\n * Specifies this is a popup layout type.\n * @required\n */\n type: \"popup\";\n\n /**\n * Position of the popup on the screen.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedPopupPosition;\n\n /** Fixed width in pixels\n * @default Auto-sized based on content */\n fixedWidth?: number;\n\n /** Fixed height in pixels\n * @default Auto-sized based on content */\n fixedHeight?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for sidebar layout type.\n * Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.\n */\nexport interface SidebarLayoutConfig {\n /**\n * Specifies this is a sidebar layout type.\n * @required\n */\n type: \"sidebar\";\n\n /**\n * Position of the sidebar on the screen.\n * Determines whether the sidebar appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Fixed width in pixels\n * @default 375 */\n fixedWidth?: number;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Configuration for half-screen layout type.\n * Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.\n */\nexport interface HalfLayoutConfig {\n /**\n * Specifies this is a half-screen layout type.\n * @required\n */\n type: \"half\";\n\n /**\n * Position of the half-screen panel.\n * Determines whether the panel appears on the left or right side of the screen.\n * @default \"right\"\n */\n position?: \"left\" | \"right\";\n\n /** Start in expanded state\n * @default true */\n expanded?: boolean;\n\n /** Background image URL */\n // imgSrc?: string;\n\n /** Expand to full screen on mobile\n * @default true */\n expandOnMobile?: boolean;\n}\n\n/**\n * Union of all layout configurations\n * A type that can be any of the supported layout types (modal, popup, sidebar, half).\n */\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\n/**\n * Available layout type names\n */\nexport type LayoutType = LayoutConfig[\"type\"];\n\n/**\n * Array of all supported layout types\n */\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\n\n/** Validates if an object is a valid layout configuration\n * @param obj Object to check\n * @returns True if object is a valid layout configuration\n */\nexport function isRouteConfig(obj: unknown): obj is LayoutConfig {\n return !!(\n obj &&\n typeof obj === \"object\" &&\n \"type\" in obj &&\n LAYOUT_TYPES.includes(obj.type as LayoutType)\n );\n}\n\n/**\n * Configuration for a specific route.\n * Contains layout and dimension information for a particular UI route.\n */\nexport interface RouteConfig {\n /**\n * Type of the current route.\n */\n routeType: RouteType;\n\n /**\n * Preferred layout type for this route.\n */\n preferredLayoutType: LayoutType;\n\n /** Content height in pixels */\n height: number;\n\n /** Content width in pixels (optional) */\n width?: number;\n\n /** Background image URL (optional) */\n // imgSrc?: string;\n}\n\nexport type AuthState = IncomingAuthMessageData;\n\n/** User's wallet balance information */\nexport interface BalanceInfo {\n /**\n * Amount in the specified currency.\n */\n amount: number | null;\n\n /**\n * Currency code.\n */\n currency: Currency | null;\n\n /**\n * Formatted amount in the specified currency;\n */\n formattedBalance: string;\n}\n\nexport interface RequestsInfo {\n pendingRequests: number;\n hasNewConnectRequest: boolean;\n}\n\n/** Main configuration options for the Wander Embedded SDK */\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n * @required\n */\n clientId: string;\n\n /**\n * Theme setting for the Wander Connect UI. It will also be used as the default value for `iframe.theme` and\n * `button.theme`.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * `true` to hide the Wander button on the authentication screen, which allow users that have the Wander browser\n * extension installed to use that instead of Wander Connect. This implies no authentication information will be\n * available from users who use the browser extension.\n */\n hideBE?: boolean;\n\n /**\n * Base URL for the Wander Embed client app.\n * The URL where the Wander Embed client is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed client.\n * @default \"https://embed-dev.wander.app\"\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n * The URL where the Wander Embed API server is hosted.\n * Only change this if you're using a custom or self-hosted version of the embed API.\n * @default \"https://embed-api-dev.wander.app\"\n */\n baseServerURL?: string;\n\n /**\n * Configuration options for the iframe component or an existing iframe element.\n */\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n\n /**\n * Configure the button that opens the wallet UI, or set to true to use default settings.\n * The button can be styled and positioned in various ways.\n * @default true - Default Button is shown unless explicitly configured\n */\n button?: WanderEmbeddedButtonOptions | boolean;\n\n /**\n * Callback function called when authentication state changes.\n * @param userDetails User details object when signed in, or null when signed out\n */\n onAuth?: (authState: AuthState) => void;\n\n /**\n * Callback function called when the wallet interface is opened.\n */\n onOpen?: () => void;\n\n /**\n * Callback function called when the wallet interface is closed.\n */\n onClose?: () => void;\n\n /**\n * Callback function called when the wallet interface is resized.\n * @param routeConfig Current route configuration\n */\n onResize?: (routeConfig: RouteConfig) => void;\n\n /**\n * Callback function called when the balance information changes.\n * @param balanceInfo Current balance information including amount and currency\n */\n onBalance?: (balanceInfo: BalanceInfo) => void;\n\n /**\n * Callback function called when wallet receives a request.\n * @param pendingRequests Number of pending requests\n */\n onRequest?: (requestsInfo: RequestsInfo) => void;\n}\n\n// Common:\n\n/** Theme variants */\nexport type ThemeVariant =\n /** Light color scheme */\n | \"light\"\n /** Dark color scheme */\n | \"dark\";\n\n/** Theme setting options. */\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\n/**\n * Options for Wander Embedded components.\n * Base interface for component customization options shared by iframe and button components.\n * @template T The type of CSS variables available for styling the component\n */\nexport interface WanderEmbeddedComponentOptions<T> {\n /**\n * ID of the component element.\n */\n id?: string;\n\n /**\n * Theme setting for the component.\n * Controls whether the component uses light, dark, or system-based theming.\n */\n theme?: ThemeSetting;\n\n /**\n * CSS variables for styling the component.\n * Can be provided as a single set of variables applied to both themes,\n * or as separate light and dark theme variables.\n */\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n\n /**\n * Custom CSS styles for the component.\n * Must use proper CSS selectors due to Shadow DOM encapsulation.\n */\n customStyles?: string;\n}\n\n/**\n * Configuration for Wander Embedded components.\n * Resolved configuration with all required fields set.\n * @template T The type of CSS variables for this component\n */\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n /**\n * CSS variables for both light and dark themes.\n */\n cssVars: Record<ThemeVariant, T>;\n}\n\n/** Checks if CSS variables contain theme-specific settings\n * @param cssVars CSS variables object\n * @returns True if theme-specific\n */\nexport function isThemeRecord<T>(\n cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>\n): cssVars is Partial<Record<ThemeVariant, Partial<T>>> {\n return !!(\n cssVars &&\n typeof cssVars === \"object\" &&\n (\"light\" in cssVars || \"dark\" in cssVars)\n );\n}\n\n// Modal (iframe):\n\n/**\n * Configuration options for the iframe.\n * Customizes the appearance and behavior of the Wander Embedded iframe,\n * which displays the wallet UI.\n */\nexport interface WanderEmbeddedIframeOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedIframeCSSVars> {\n // TODO: Default should automatically be used for auth-requests, and auth for account and settings?\n /**\n * Layout configuration for different routes.\n * Controls how the iframe is displayed for each route type:\n * - If a single value is passed, we use it for \"default\", \"settings\" and \"auth-request\" routes. \"auth\" and \"account\"\n * routes fall back to the default layout type (currently \"modal\").\n * - If more than one value is set, the \"default\" option will be used for \"default\" routes as well as as fallback for\n * \"settings\" and \"auth-request\" routes; the \"auth\" option will be used for \"auth\" routes as well as as fallback for\n * \"account\" routes.\n */\n routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it.\n * Controls the behavior when a user clicks outside the iframe:\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside.\n * @default \"auto\"\n */\n clickOutsideBehavior?: boolean;\n}\n\n/**\n * Configuration for the iframe component.\n */\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedIframeCSSVars> {\n /**\n * Layout configuration for all route types.\n * Complete mapping of route types to their layout configuration.\n */\n routeLayout: Record<RouteType, LayoutConfig>;\n\n /**\n * Behavior when clicking outside the iframe.\n * How the component responds to clicks outside its boundaries.\n */\n clickOutsideBehavior: boolean;\n}\n\n// Button:\n\n/**\n * Position of the button on the screen.\n * Determines where the button appears on the screen.\n */\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\"\n | \"static\";\n\n/**\n * Position of the popup on the screen.\n * Determines where the popup appears on the screen.\n */\nexport type WanderEmbeddedPopupPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\n/**\n * Variant of the Wander logo to display.\n * Controls how the Wander logo appears on the button.\n */\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\n/**\n * Configuration for balance display in the button.\n * Controls which balance is displayed and in what currency.\n */\nexport interface WanderEmbeddedBalanceOptions {\n /**\n * Determines which token or total balance is shown.\n * @param \"total\" Show total balance across all tokens\n * @param string Token ID to show specific token balance\n * @default \"total\"\n */\n balanceOf: \"total\" | string;\n\n /**\n * Determines the currency used to display the balance.\n * @param \"auto\" Use user's selected currency from their wallet preferences\n * @param string Specific token ID or currency symbol (e.g., \"USD\", \"EUR\")\n * @default \"auto\"\n */\n currency: \"auto\" | string;\n}\n\n/** Notification display options */\nexport type WanderEmbeddedButtonNotifications =\n /** No notifications shown */\n | \"off\"\n /** Show count of pending requests */\n | \"counter\"\n /** Show indicator without count */\n | \"alert\";\n\n/**\n * Custom labels for button text.\n */\nexport interface WanderEmbeddedButtonLabels {\n /**\n * Title/tooltip to display when the button is loading.\n * @default \"Loading\"\n */\n loading: string;\n\n /**\n * Title/tooltip to display when the balance is loading.\n * @default \"Loading Balance\"\n */\n loadingBalance: string;\n\n /**\n * Title/tooltip to display when the user is authenticated, but the onboarding\n * hasn't been completed.\n * @default \"Complete Sign Up\"\n */\n completeSignUp: string;\n\n /**\n * Text to display when the user is not authenticated.\n * @default \"Sign In\"\n */\n signIn: string;\n\n /**\n * Text to display when the user has request to review.\n * @default \"Review Requests\"\n */\n reviewRequests: string;\n}\n\n/**\n * Configuration options for the button component.\n * Customizes the appearance and behavior of the Wander Embedded button.\n */\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n * @default document.body\n */\n parent?: HTMLElement;\n\n /**\n * Position of the button on the screen.\n * Use \"static\" for custom positioning via CSS.\n * @default \"bottom-right\"\n */\n position?: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n * - \"none\": No logo is displayed\n * - \"default\": Standard Wander logo is displayed\n * - \"text-color\": Logo with colored text is displayed\n * @default \"default\"\n */\n wanderLogo?: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n * @default true\n */\n label?: boolean;\n\n /**\n * Configuration for displaying balance information.\n * - false: No balance is displayed\n * - true: Balance is displayed\n * - WanderEmbeddedBalanceOptions: Customized balance display\n * @default { balanceOf: \"total\", currency: \"auto\" }\n */\n balance?: boolean | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n * @default \"counter\"\n */\n notifications?: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n * @default { signIn: \"Sign in\", reviewRequests: \"Review requests\" }\n */\n i18n?: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Configuration for the button component.\n */\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n /**\n * Element the button will be appended to.\n */\n parent: HTMLElement;\n\n /**\n * Position of the button on the screen.\n */\n position: WanderEmbeddedButtonPosition;\n\n /**\n * Variant of the Wander logo to display.\n */\n wanderLogo: WanderEmbeddedLogoVariant;\n\n /**\n * Whether to show the button label.\n */\n label: boolean;\n\n /**\n * Configuration for displaying balance information.\n */\n balance: false | WanderEmbeddedBalanceOptions;\n\n /**\n * Type of notifications to display.\n */\n notifications: WanderEmbeddedButtonNotifications;\n\n /**\n * Custom labels for button text.\n */\n i18n: WanderEmbeddedButtonLabels;\n}\n\n/**\n * Button status properties that can be observed.\n */\nexport type WanderEmbeddedButtonStatus =\n /** Whether the user's wallet is connected to the application. */\n | \"isConnected\"\n /** Whether the wallet UI is currently open. */\n | \"isOpen\";\n\n// Styles:\n\n/**\n * CSS variables for styling the modal/iframe component.\n */\nexport interface WanderEmbeddedIframeCSSVars {\n // Modal (iframe):\n /**\n * Background color of the modal.\n */\n background: string;\n\n /**\n * Border width of the modal.\n */\n borderWidth: number;\n\n /**\n * Border color of the modal.\n */\n borderColor: string;\n\n /**\n * Border radius of the modal.\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the modal.\n */\n boxShadow: string;\n\n /**\n * Z-index of the modal.\n */\n zIndex: string;\n\n /**\n * Preferred width of the modal.\n */\n preferredWidth: number | string;\n\n /**\n * Preferred height of the modal.\n */\n preferredHeight: number | string;\n\n // App wrapper (content inside iframe):\n\n /**\n * Padding inside the iframe.\n */\n contentPadding: number;\n\n /**\n * Maximum width of the iframe content.\n */\n contentMaxWidth: number | string;\n\n /**\n * Maximum height of the iframe content.\n */\n contentMaxHeight: number | string;\n\n // Backdrop (div):\n\n /**\n * Background color of the backdrop.\n */\n backdropBackground: string;\n\n /**\n * Backdrop filter applied to the backdrop.\n */\n backdropBackdropFilter: string;\n\n /**\n * Padding around the modal within the backdrop.\n */\n backdropPadding: number | string;\n\n // Mobile specific styles\n /**\n * Padding on mobile devices.\n */\n mobilePadding: number;\n\n /**\n * Height on mobile devices.\n */\n mobileHeight: string | number;\n\n /**\n * Border radius on mobile devices.\n */\n mobileBorderRadius: number;\n\n /**\n * Border width on mobile devices.\n */\n mobileBorderWidth: number;\n\n /**\n * Border color on mobile devices.\n */\n mobileBorderColor: string;\n\n /**\n * Box shadow on mobile devices.\n */\n mobileBoxShadow: string;\n}\n\n/**\n * CSS variables for styling the button component.\n */\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n /**\n * Horizontal gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapX: number | string;\n\n /**\n * Vertical gap from the edge of the screen.\n * Not used when position is \"static\".\n * @default 16\n */\n gapY: number | string;\n\n /**\n * Gap between elements inside the button.\n * @default 12\n */\n gapInside: number | string;\n\n /**\n * Minimum width of the button.\n * @default 0\n */\n minWidth: number | string;\n\n /**\n * Minimum height of the button.\n * @default 0\n */\n minHeight: number | string;\n\n /**\n * Z-index of the button.\n * @default \"9999\"\n */\n zIndex: string;\n\n /**\n * Padding of the button.\n * @default \"12px 20px 12px 16px\"\n */\n padding: number | string;\n\n /**\n * Font style of the button.\n * @default \"16px monospace\"\n */\n font: string;\n\n // Button (button, affected by :hover & :focus):\n /**\n * Background color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n background: string;\n\n /**\n * Text color of the button.\n * @default \"black\" in light mode, \"white\" in dark mode\n */\n color: string;\n\n /**\n * Border width of the button.\n * @default 2\n */\n borderWidth: number | string;\n\n /**\n * Border color of the button.\n * @default \"white\" in light mode, \"black\" in dark mode\n */\n borderColor: string;\n\n /**\n * Border radius of the button.\n * @default 128\n */\n borderRadius: number | string;\n\n /**\n * Box shadow of the button.\n * @default \"0 0 32px 0px rgba(0, 0, 0, 0.25)\"\n */\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n /**\n * Background color of the logo.\n * @default \"\"\n */\n logoBackground: string;\n\n /**\n * Border width of the logo.\n * @default \"\"\n */\n logoBorderWidth: number | string;\n\n /**\n * Border color of the logo.\n * @default \"\"\n */\n logoBorderColor: string;\n\n /**\n * Border radius of the logo.\n * @default \"\"\n */\n logoBorderRadius: number | string;\n\n // Notifications (span):\n /**\n * Background color of the notifications badge.\n * @default \"\"\n */\n notificationsBackground: string;\n\n /**\n * Border width of the notifications badge.\n * @default \"\"\n */\n notificationsBorderWidth: number | string;\n\n /**\n * Border color of the notifications badge.\n * @default \"\"\n */\n notificationsBorderColor: string;\n\n /**\n * Border radius of the notifications badge.\n * @default \"\"\n */\n notificationsBorderRadius: number | string;\n\n /**\n * Box shadow of the notifications badge.\n * @default \"\"\n */\n notificationsBoxShadow: string;\n\n /**\n * Padding of the notifications badge.\n * @default \"\"\n */\n notificationsPadding: number | string;\n}\n\n// TODO: :hover and :focus specific styling.\n\n/**\n * Supported currency codes.\n */\nexport type Currency =\n | \"USD\"\n | \"EUR\"\n | \"GBP\"\n | \"CNY\"\n | \"INR\"\n | \"AED\"\n | \"ARS\"\n | \"AUD\"\n | \"BDT\"\n | \"BHD\"\n | \"BMD\"\n | \"BRL\"\n | \"CAD\"\n | \"CHF\"\n | \"CLP\"\n | \"CZK\"\n | \"DKK\"\n | \"HKD\"\n | \"HUF\"\n | \"IDR\"\n | \"ILS\"\n | \"JPY\"\n | \"KRW\"\n | \"KWD\"\n | \"LKR\"\n | \"MMK\"\n | \"MXN\"\n | \"MYR\"\n | \"NGN\"\n | \"NOK\"\n | \"NZD\"\n | \"PHP\"\n | \"PKR\"\n | \"PLN\"\n | \"RUB\"\n | \"SAR\"\n | \"SEK\"\n | \"SGD\"\n | \"THB\"\n | \"TRY\"\n | \"TWD\"\n | \"UAH\"\n | \"VEF\"\n | \"VND\"\n | \"ZAR\";\n"]}
-725
sdk-dist/wander-embedded.types-DZt7tGOM.d.cts
interface UserDetails {
}
interface IncomingAuthMessageData {
userDetails: null | UserDetails;
}
type IncomingResizeMessageData = RouteConfig;
type IncomingBalanceMessageData = BalanceInfo;
interface IncomingRequestMessageData {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
interface BaseIncomingMessage<K extends string = string, D = void> {
id: string;
type: K;
data: D;
}
type IncomingAuthMessage = BaseIncomingMessage<"embedded_auth", IncomingAuthMessageData>;
type IncomingConnectMessage = BaseIncomingMessage<"embedded_connect", void>;
type IncomingDisconnectMessage = BaseIncomingMessage<"embedded_disconnect", void>;
type IncomingOpenMessage = BaseIncomingMessage<"embedded_open", void>;
type IncomingCloseMessage = BaseIncomingMessage<"embedded_close", void>;
type IncomingResizeMessage = BaseIncomingMessage<"embedded_resize", IncomingResizeMessageData>;
type IncomingBalanceMessage = BaseIncomingMessage<"embedded_balance", IncomingBalanceMessageData>;
type IncomingRequestMessage = BaseIncomingMessage<"embedded_request", IncomingRequestMessageData>;
type IncomingMessage = IncomingAuthMessage | IncomingConnectMessage | IncomingDisconnectMessage | IncomingOpenMessage | IncomingCloseMessage | IncomingResizeMessage | IncomingBalanceMessage | IncomingRequestMessage;
type IncomingMessageId = IncomingMessage["type"];
type OutgoingMessage = {
type: "THEME_UPDATE" | "BALANCE_CURRENCY";
payload: string;
};
/**
* Types of routes available in the Wander Embedded SDK.
*/
type RouteType =
/** Default home screen */
"default"
/** Authentication screen */
| "auth"
/** Account management screen */
| "account"
/** Settings and preferences screen */
| "settings"
/** Authorization request screen for approving transactions. */
| "auth-request";
/** Supported image extensions */
type ImageExtension = "webp" | "png";
/** Supported Image Path */
type ImgPath = `${RouteType}.${ImageExtension}`;
/** Modal layout configuration */
interface ModalLayoutConfig {
/**
* Specifies this is a modal layout type.
* @required
*/
type: "modal";
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for popup layout type.
* Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.
*/
interface PopupLayoutConfig {
/**
* Specifies this is a popup layout type.
* @required
*/
type: "popup";
/**
* Position of the popup on the screen.
* @default "bottom-right"
*/
position?: WanderEmbeddedPopupPosition;
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for sidebar layout type.
* Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.
*/
interface SidebarLayoutConfig {
/**
* Specifies this is a sidebar layout type.
* @required
*/
type: "sidebar";
/**
* Position of the sidebar on the screen.
* Determines whether the sidebar appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Fixed width in pixels
* @default 375 */
fixedWidth?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for half-screen layout type.
* Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.
*/
interface HalfLayoutConfig {
/**
* Specifies this is a half-screen layout type.
* @required
*/
type: "half";
/**
* Position of the half-screen panel.
* Determines whether the panel appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Background image URL */
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Union of all layout configurations
* A type that can be any of the supported layout types (modal, popup, sidebar, half).
*/
type LayoutConfig = ModalLayoutConfig | PopupLayoutConfig | SidebarLayoutConfig | HalfLayoutConfig;
/**
* Available layout type names
*/
type LayoutType = LayoutConfig["type"];
/**
* Array of all supported layout types
*/
declare const LAYOUT_TYPES: ["modal", "popup", "sidebar", "half"];
/** Validates if an object is a valid layout configuration
* @param obj Object to check
* @returns True if object is a valid layout configuration
*/
declare function isRouteConfig(obj: unknown): obj is LayoutConfig;
/**
* Configuration for a specific route.
* Contains layout and dimension information for a particular UI route.
*/
interface RouteConfig {
/**
* Type of the current route.
*/
routeType: RouteType;
/**
* Preferred layout type for this route.
*/
preferredLayoutType: LayoutType;
/** Content height in pixels */
height: number;
/** Content width in pixels (optional) */
width?: number;
}
/** User's wallet balance information */
interface BalanceInfo {
/**
* Amount in the specified currency.
*/
amount: number | null;
/**
* Currency code.
*/
currency: Currency | null;
/**
* Formatted amount in the specified currency;
*/
formattedBalance: string;
}
interface RequestsInfo {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
/** Main configuration options for the Wander Embedded SDK */
interface WanderEmbeddedOptions {
/**
* Client ID for your App, registered on the Wander Dashboard.
* @required
*/
clientId: string;
/**
* Base URL for the Wander Embed client app.
* The URL where the Wander Embed client is hosted.
* Only change this if you're using a custom or self-hosted version of the embed client.
* @default "https://embed-dev.wander.app"
*/
baseURL?: string;
/**
* Base URL for the Wander Embed tRPC server.
* The URL where the Wander Embed API server is hosted.
* Only change this if you're using a custom or self-hosted version of the embed API.
* @default "https://embed-api-dev.wander.app"
*/
baseServerURL?: string;
/**
* Configuration options for the iframe component or an existing iframe element.
*/
iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;
/**
* Configure the button that opens the wallet UI, or set to true to use default settings.
* The button can be styled and positioned in various ways.
* @default true - Default Button is shown unless explicitly configured
*/
button?: WanderEmbeddedButtonOptions | boolean;
/**
* Callback function called when authentication state changes.
* @param userDetails User details object when signed in, or null when signed out
*/
onAuth?: (userDetails: UserDetails | null) => void;
/**
* Callback function called when the wallet interface is opened.
*/
onOpen?: () => void;
/**
* Callback function called when the wallet interface is closed.
*/
onClose?: () => void;
/**
* Callback function called when the wallet interface is resized.
* @param routeConfig Current route configuration
*/
onResize?: (routeConfig: RouteConfig) => void;
/**
* Callback function called when the balance information changes.
* @param balanceInfo Current balance information including amount and currency
*/
onBalance?: (balanceInfo: BalanceInfo) => void;
/**
* Callback function called when wallet receives a request.
* @param pendingRequests Number of pending requests
*/
onRequest?: (requestsInfo: RequestsInfo) => void;
}
/** Theme variants */
type ThemeVariant =
/** Light color scheme */
"light"
/** Dark color scheme */
| "dark";
/** Theme setting options. */
type ThemeSetting = "system" | ThemeVariant;
/**
* Options for Wander Embedded components.
* Base interface for component customization options shared by iframe and button components.
* @template T The type of CSS variables available for styling the component
*/
interface WanderEmbeddedComponentOptions<T> {
/**
* ID of the component element.
*/
id?: string;
/**
* Theme setting for the component.
* Controls whether the component uses light, dark, or system-based theming.
*/
theme?: ThemeSetting;
/**
* CSS variables for styling the component.
* Can be provided as a single set of variables applied to both themes,
* or as separate light and dark theme variables.
*/
cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Custom CSS styles for the component.
* Must use proper CSS selectors due to Shadow DOM encapsulation.
*/
customStyles?: string;
}
/**
* Configuration for Wander Embedded components.
* Resolved configuration with all required fields set.
* @template T The type of CSS variables for this component
*/
interface WanderEmbeddedComponentConfig<T> extends Required<WanderEmbeddedComponentOptions<T>> {
/**
* CSS variables for both light and dark themes.
*/
cssVars: Record<ThemeVariant, T>;
}
/** Checks if CSS variables contain theme-specific settings
* @param cssVars CSS variables object
* @returns True if theme-specific
*/
declare function isThemeRecord<T>(cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>): cssVars is Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Configuration options for the iframe.
* Customizes the appearance and behavior of the Wander Embedded iframe,
* which displays the wallet UI.
*/
interface WanderEmbeddedIframeOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {
/**
* Layout configuration for different routes.
* Controls how the iframe is displayed for each route type.
* Can be a single layout type/config applied to all routes or a map of specific layouts per route type.
*/
routeLayout?: LayoutType | LayoutConfig | Partial<Record<RouteType, LayoutType | LayoutConfig>>;
/**
* Close Wander Embedded when clicking outside of it.
* Controls the behavior when a user clicks outside the iframe:
* - false: Will never close. The user must click the close icon.
* - true: Will always close when clicking outside.
* @default "auto"
*/
clickOutsideBehavior?: boolean;
}
/**
* Configuration for the iframe component.
*/
interface WanderEmbeddedIframeConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {
/**
* Layout configuration for all route types.
* Complete mapping of route types to their layout configuration.
*/
routeLayout: Record<RouteType, LayoutConfig>;
/**
* Behavior when clicking outside the iframe.
* How the component responds to clicks outside its boundaries.
*/
clickOutsideBehavior: boolean;
}
/**
* Position of the button on the screen.
* Determines where the button appears on the screen.
*/
type WanderEmbeddedButtonPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left" | "static";
/**
* Position of the popup on the screen.
* Determines where the popup appears on the screen.
*/
type WanderEmbeddedPopupPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
/**
* Variant of the Wander logo to display.
* Controls how the Wander logo appears on the button.
*/
type WanderEmbeddedLogoVariant = "none" | "default" | "text-color";
/**
* Configuration for balance display in the button.
* Controls which balance is displayed and in what currency.
*/
interface WanderEmbeddedBalanceOptions {
/**
* Determines which token or total balance is shown.
* @param "total" Show total balance across all tokens
* @param string Token ID to show specific token balance
* @default "total"
*/
balanceOf: "total" | string;
/**
* Determines the currency used to display the balance.
* @param "auto" Use user's selected currency from their wallet preferences
* @param string Specific token ID or currency symbol (e.g., "USD", "EUR")
* @default "auto"
*/
currency: "auto" | string;
}
/** Notification display options */
type WanderEmbeddedButtonNotifications =
/** No notifications shown */
"off"
/** Show count of pending requests */
| "counter"
/** Show indicator without count */
| "alert";
/**
* Custom labels for button text.
*/
interface WanderEmbeddedButtonLabels {
/**
* Text to display for the sign in button.
* @default "Sign In"
*/
signIn: string;
/**
* Text to display for reviewing requests button.
* @default "Review Requests"
*/
reviewRequests: string;
}
/**
* Configuration options for the button component.
* Customizes the appearance and behavior of the Wander Embedded button.
*/
interface WanderEmbeddedButtonOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
* @default document.body
*/
parent?: HTMLElement;
/**
* Position of the button on the screen.
* Use "static" for custom positioning via CSS.
* @default "bottom-right"
*/
position?: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
* - "none": No logo is displayed
* - "default": Standard Wander logo is displayed
* - "text-color": Logo with colored text is displayed
* @default "default"
*/
wanderLogo?: WanderEmbeddedLogoVariant;
/**
* URL of the dApp logo that will be displayed next to the Wander logo when connected.
* @default ""
*/
dappLogoSrc?: string;
/**
* Whether to show the button label.
* @default true
*/
label?: boolean;
/**
* Configuration for displaying balance information.
* - false: No balance is displayed
* - true: Balance is displayed
* - WanderEmbeddedBalanceOptions: Customized balance display
* @default { balanceOf: "total", currency: "auto" }
*/
balance?: boolean | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
* @default "counter"
*/
notifications?: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
* @default { signIn: "Sign in", reviewRequests: "Review requests" }
*/
i18n?: WanderEmbeddedButtonLabels;
}
/**
* Configuration for the button component.
*/
interface WanderEmbeddedButtonConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
*/
parent: HTMLElement;
/**
* Position of the button on the screen.
*/
position: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
*/
wanderLogo: WanderEmbeddedLogoVariant;
/**
* URL of the dApp logo.
*/
dappLogoSrc: string;
/**
* Whether to show the button label.
*/
label: boolean;
/**
* Configuration for displaying balance information.
*/
balance: false | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
*/
notifications: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
*/
i18n: WanderEmbeddedButtonLabels;
}
/**
* Button status properties that can be observed.
*/
type WanderEmbeddedButtonStatus =
/** Whether the user is authenticated. */
"isAuthenticated"
/** Whether the user's wallet is connected to the application. */
| "isConnected"
/** Whether the wallet UI is currently open. */
| "isOpen";
/**
* CSS variables for styling the modal/iframe component.
*/
interface WanderEmbeddedModalCSSVars {
/**
* Background color of the modal.
*/
background: string;
/**
* Border width of the modal.
*/
borderWidth: number;
/**
* Border color of the modal.
*/
borderColor: string;
/**
* Border radius of the modal.
*/
borderRadius: number | string;
/**
* Box shadow of the modal.
*/
boxShadow: string;
/**
* Z-index of the modal.
*/
zIndex: string;
/**
* Preferred width of the modal.
*/
preferredWidth: number | string;
/**
* Preferred height of the modal.
*/
preferredHeight: number | string;
/**
* Padding inside the iframe.
*/
iframePadding: number;
/**
* Maximum width of the iframe content.
*/
iframeMaxWidth: number;
/**
* Maximum height of the iframe content.
*/
iframeMaxHeight: number;
/**
* Background color of the backdrop.
*/
backdropBackground: string;
/**
* Backdrop filter applied to the backdrop.
*/
backdropBackdropFilter: string;
/**
* Padding around the modal within the backdrop.
*/
backdropPadding: number | string;
/**
* Pointer events setting for the backdrop.
* If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to "none", unless
* a different value is specified. In any other case, this is ignored.
*/
backdropPointerEvents: string;
/**
* Padding on mobile devices.
*/
mobilePadding: number;
/**
* Height on mobile devices.
*/
mobileHeight: string | number;
/**
* Border radius on mobile devices.
*/
mobileBorderRadius: number;
/**
* Border width on mobile devices.
*/
mobileBorderWidth: number;
/**
* Border color on mobile devices.
*/
mobileBorderColor: string;
/**
* Box shadow on mobile devices.
*/
mobileBoxShadow: string;
}
/**
* CSS variables for styling the button component.
*/
interface WanderEmbeddedButtonCSSVars {
/**
* Horizontal gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapX: number | string;
/**
* Vertical gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapY: number | string;
/**
* Gap between elements inside the button.
* @default 12
*/
gapInside: number | string;
/**
* Minimum width of the button.
* @default 0
*/
minWidth: number | string;
/**
* Minimum height of the button.
* @default 0
*/
minHeight: number | string;
/**
* Z-index of the button.
* @default "9999"
*/
zIndex: string;
/**
* Padding of the button.
* @default "12px 20px 12px 16px"
*/
padding: number | string;
/**
* Font style of the button.
* @default "16px monospace"
*/
font: string;
/**
* Background color of the button.
* @default "white" in light mode, "black" in dark mode
*/
background: string;
/**
* Text color of the button.
* @default "black" in light mode, "white" in dark mode
*/
color: string;
/**
* Border width of the button.
* @default 2
*/
borderWidth: number | string;
/**
* Border color of the button.
* @default "white" in light mode, "black" in dark mode
*/
borderColor: string;
/**
* Border radius of the button.
* @default 128
*/
borderRadius: number | string;
/**
* Box shadow of the button.
* @default "0 0 32px 0px rgba(0, 0, 0, 0.25)"
*/
boxShadow: string;
/**
* Background color of the logo.
* @default ""
*/
logoBackground: string;
/**
* Border width of the logo.
* @default ""
*/
logoBorderWidth: number | string;
/**
* Border color of the logo.
* @default ""
*/
logoBorderColor: string;
/**
* Border radius of the logo.
* @default ""
*/
logoBorderRadius: number | string;
/**
* Background color of the notifications badge.
* @default ""
*/
notificationsBackground: string;
/**
* Border width of the notifications badge.
* @default ""
*/
notificationsBorderWidth: number | string;
/**
* Border color of the notifications badge.
* @default ""
*/
notificationsBorderColor: string;
/**
* Border radius of the notifications badge.
* @default ""
*/
notificationsBorderRadius: number | string;
/**
* Box shadow of the notifications badge.
* @default ""
*/
notificationsBoxShadow: string;
/**
* Padding of the notifications badge.
* @default ""
*/
notificationsPadding: number | string;
}
/**
* Supported currency codes.
*/
type Currency = "USD" | "EUR" | "GBP" | "CNY" | "INR" | "AED" | "ARS" | "AUD" | "BDT" | "BHD" | "BMD" | "BRL" | "CAD" | "CHF" | "CLP" | "CZK" | "DKK" | "HKD" | "HUF" | "IDR" | "ILS" | "JPY" | "KRW" | "KWD" | "LKR" | "MMK" | "MXN" | "MYR" | "NGN" | "NOK" | "NZD" | "PHP" | "PKR" | "PLN" | "RUB" | "SAR" | "SEK" | "SGD" | "THB" | "TRY" | "TWD" | "UAH" | "VEF" | "VND" | "ZAR";
export { type IncomingBalanceMessageData as A, type BalanceInfo as B, type Currency as C, type IncomingRequestMessageData as D, type BaseIncomingMessage as E, type IncomingAuthMessage as F, type IncomingConnectMessage as G, type HalfLayoutConfig as H, type ImgPath as I, type IncomingDisconnectMessage as J, type IncomingOpenMessage as K, type LayoutConfig as L, type ModalLayoutConfig as M, type IncomingCloseMessage as N, type OutgoingMessage as O, type PopupLayoutConfig as P, type IncomingResizeMessage as Q, type RouteType as R, type SidebarLayoutConfig as S, type ThemeVariant as T, type UserDetails as U, type IncomingBalanceMessage as V, type WanderEmbeddedButtonCSSVars as W, type IncomingRequestMessage as X, type IncomingMessageId as Y, type WanderEmbeddedButtonOptions as a, type WanderEmbeddedButtonConfig as b, type WanderEmbeddedButtonStatus as c, type WanderEmbeddedLogoVariant as d, type WanderEmbeddedIframeOptions as e, type LayoutType as f, type RouteConfig as g, type IncomingMessage as h, type WanderEmbeddedOptions as i, type ImageExtension as j, LAYOUT_TYPES as k, isRouteConfig as l, type RequestsInfo as m, type ThemeSetting as n, type WanderEmbeddedComponentOptions as o, type WanderEmbeddedComponentConfig as p, isThemeRecord as q, type WanderEmbeddedIframeConfig as r, type WanderEmbeddedButtonPosition as s, type WanderEmbeddedPopupPosition as t, type WanderEmbeddedBalanceOptions as u, type WanderEmbeddedButtonNotifications as v, type WanderEmbeddedButtonLabels as w, type WanderEmbeddedModalCSSVars as x, type IncomingAuthMessageData as y, type IncomingResizeMessageData as z };
-725
sdk-dist/wander-embedded.types-DZt7tGOM.d.ts
interface UserDetails {
}
interface IncomingAuthMessageData {
userDetails: null | UserDetails;
}
type IncomingResizeMessageData = RouteConfig;
type IncomingBalanceMessageData = BalanceInfo;
interface IncomingRequestMessageData {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
interface BaseIncomingMessage<K extends string = string, D = void> {
id: string;
type: K;
data: D;
}
type IncomingAuthMessage = BaseIncomingMessage<"embedded_auth", IncomingAuthMessageData>;
type IncomingConnectMessage = BaseIncomingMessage<"embedded_connect", void>;
type IncomingDisconnectMessage = BaseIncomingMessage<"embedded_disconnect", void>;
type IncomingOpenMessage = BaseIncomingMessage<"embedded_open", void>;
type IncomingCloseMessage = BaseIncomingMessage<"embedded_close", void>;
type IncomingResizeMessage = BaseIncomingMessage<"embedded_resize", IncomingResizeMessageData>;
type IncomingBalanceMessage = BaseIncomingMessage<"embedded_balance", IncomingBalanceMessageData>;
type IncomingRequestMessage = BaseIncomingMessage<"embedded_request", IncomingRequestMessageData>;
type IncomingMessage = IncomingAuthMessage | IncomingConnectMessage | IncomingDisconnectMessage | IncomingOpenMessage | IncomingCloseMessage | IncomingResizeMessage | IncomingBalanceMessage | IncomingRequestMessage;
type IncomingMessageId = IncomingMessage["type"];
type OutgoingMessage = {
type: "THEME_UPDATE" | "BALANCE_CURRENCY";
payload: string;
};
/**
* Types of routes available in the Wander Embedded SDK.
*/
type RouteType =
/** Default home screen */
"default"
/** Authentication screen */
| "auth"
/** Account management screen */
| "account"
/** Settings and preferences screen */
| "settings"
/** Authorization request screen for approving transactions. */
| "auth-request";
/** Supported image extensions */
type ImageExtension = "webp" | "png";
/** Supported Image Path */
type ImgPath = `${RouteType}.${ImageExtension}`;
/** Modal layout configuration */
interface ModalLayoutConfig {
/**
* Specifies this is a modal layout type.
* @required
*/
type: "modal";
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for popup layout type.
* Defines appearance and behavior of the popup layout, which appears anchored to a corner of the screen.
*/
interface PopupLayoutConfig {
/**
* Specifies this is a popup layout type.
* @required
*/
type: "popup";
/**
* Position of the popup on the screen.
* @default "bottom-right"
*/
position?: WanderEmbeddedPopupPosition;
/** Fixed width in pixels
* @default Auto-sized based on content */
fixedWidth?: number;
/** Fixed height in pixels
* @default Auto-sized based on content */
fixedHeight?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for sidebar layout type.
* Defines appearance and behavior of the sidebar layout, which appears as a panel on the left or right side of the screen.
*/
interface SidebarLayoutConfig {
/**
* Specifies this is a sidebar layout type.
* @required
*/
type: "sidebar";
/**
* Position of the sidebar on the screen.
* Determines whether the sidebar appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Fixed width in pixels
* @default 375 */
fixedWidth?: number;
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Configuration for half-screen layout type.
* Defines appearance and behavior of the half-screen layout, which takes up approximately half of the viewport.
*/
interface HalfLayoutConfig {
/**
* Specifies this is a half-screen layout type.
* @required
*/
type: "half";
/**
* Position of the half-screen panel.
* Determines whether the panel appears on the left or right side of the screen.
* @default "right"
*/
position?: "left" | "right";
/** Start in expanded state
* @default true */
expanded?: boolean;
/** Background image URL */
/** Expand to full screen on mobile
* @default true */
expandOnMobile?: boolean;
}
/**
* Union of all layout configurations
* A type that can be any of the supported layout types (modal, popup, sidebar, half).
*/
type LayoutConfig = ModalLayoutConfig | PopupLayoutConfig | SidebarLayoutConfig | HalfLayoutConfig;
/**
* Available layout type names
*/
type LayoutType = LayoutConfig["type"];
/**
* Array of all supported layout types
*/
declare const LAYOUT_TYPES: ["modal", "popup", "sidebar", "half"];
/** Validates if an object is a valid layout configuration
* @param obj Object to check
* @returns True if object is a valid layout configuration
*/
declare function isRouteConfig(obj: unknown): obj is LayoutConfig;
/**
* Configuration for a specific route.
* Contains layout and dimension information for a particular UI route.
*/
interface RouteConfig {
/**
* Type of the current route.
*/
routeType: RouteType;
/**
* Preferred layout type for this route.
*/
preferredLayoutType: LayoutType;
/** Content height in pixels */
height: number;
/** Content width in pixels (optional) */
width?: number;
}
/** User's wallet balance information */
interface BalanceInfo {
/**
* Amount in the specified currency.
*/
amount: number | null;
/**
* Currency code.
*/
currency: Currency | null;
/**
* Formatted amount in the specified currency;
*/
formattedBalance: string;
}
interface RequestsInfo {
pendingRequests: number;
hasNewConnectRequest: boolean;
}
/** Main configuration options for the Wander Embedded SDK */
interface WanderEmbeddedOptions {
/**
* Client ID for your App, registered on the Wander Dashboard.
* @required
*/
clientId: string;
/**
* Base URL for the Wander Embed client app.
* The URL where the Wander Embed client is hosted.
* Only change this if you're using a custom or self-hosted version of the embed client.
* @default "https://embed-dev.wander.app"
*/
baseURL?: string;
/**
* Base URL for the Wander Embed tRPC server.
* The URL where the Wander Embed API server is hosted.
* Only change this if you're using a custom or self-hosted version of the embed API.
* @default "https://embed-api-dev.wander.app"
*/
baseServerURL?: string;
/**
* Configuration options for the iframe component or an existing iframe element.
*/
iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;
/**
* Configure the button that opens the wallet UI, or set to true to use default settings.
* The button can be styled and positioned in various ways.
* @default true - Default Button is shown unless explicitly configured
*/
button?: WanderEmbeddedButtonOptions | boolean;
/**
* Callback function called when authentication state changes.
* @param userDetails User details object when signed in, or null when signed out
*/
onAuth?: (userDetails: UserDetails | null) => void;
/**
* Callback function called when the wallet interface is opened.
*/
onOpen?: () => void;
/**
* Callback function called when the wallet interface is closed.
*/
onClose?: () => void;
/**
* Callback function called when the wallet interface is resized.
* @param routeConfig Current route configuration
*/
onResize?: (routeConfig: RouteConfig) => void;
/**
* Callback function called when the balance information changes.
* @param balanceInfo Current balance information including amount and currency
*/
onBalance?: (balanceInfo: BalanceInfo) => void;
/**
* Callback function called when wallet receives a request.
* @param pendingRequests Number of pending requests
*/
onRequest?: (requestsInfo: RequestsInfo) => void;
}
/** Theme variants */
type ThemeVariant =
/** Light color scheme */
"light"
/** Dark color scheme */
| "dark";
/** Theme setting options. */
type ThemeSetting = "system" | ThemeVariant;
/**
* Options for Wander Embedded components.
* Base interface for component customization options shared by iframe and button components.
* @template T The type of CSS variables available for styling the component
*/
interface WanderEmbeddedComponentOptions<T> {
/**
* ID of the component element.
*/
id?: string;
/**
* Theme setting for the component.
* Controls whether the component uses light, dark, or system-based theming.
*/
theme?: ThemeSetting;
/**
* CSS variables for styling the component.
* Can be provided as a single set of variables applied to both themes,
* or as separate light and dark theme variables.
*/
cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Custom CSS styles for the component.
* Must use proper CSS selectors due to Shadow DOM encapsulation.
*/
customStyles?: string;
}
/**
* Configuration for Wander Embedded components.
* Resolved configuration with all required fields set.
* @template T The type of CSS variables for this component
*/
interface WanderEmbeddedComponentConfig<T> extends Required<WanderEmbeddedComponentOptions<T>> {
/**
* CSS variables for both light and dark themes.
*/
cssVars: Record<ThemeVariant, T>;
}
/** Checks if CSS variables contain theme-specific settings
* @param cssVars CSS variables object
* @returns True if theme-specific
*/
declare function isThemeRecord<T>(cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>): cssVars is Partial<Record<ThemeVariant, Partial<T>>>;
/**
* Configuration options for the iframe.
* Customizes the appearance and behavior of the Wander Embedded iframe,
* which displays the wallet UI.
*/
interface WanderEmbeddedIframeOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {
/**
* Layout configuration for different routes.
* Controls how the iframe is displayed for each route type.
* Can be a single layout type/config applied to all routes or a map of specific layouts per route type.
*/
routeLayout?: LayoutType | LayoutConfig | Partial<Record<RouteType, LayoutType | LayoutConfig>>;
/**
* Close Wander Embedded when clicking outside of it.
* Controls the behavior when a user clicks outside the iframe:
* - false: Will never close. The user must click the close icon.
* - true: Will always close when clicking outside.
* @default "auto"
*/
clickOutsideBehavior?: boolean;
}
/**
* Configuration for the iframe component.
*/
interface WanderEmbeddedIframeConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {
/**
* Layout configuration for all route types.
* Complete mapping of route types to their layout configuration.
*/
routeLayout: Record<RouteType, LayoutConfig>;
/**
* Behavior when clicking outside the iframe.
* How the component responds to clicks outside its boundaries.
*/
clickOutsideBehavior: boolean;
}
/**
* Position of the button on the screen.
* Determines where the button appears on the screen.
*/
type WanderEmbeddedButtonPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left" | "static";
/**
* Position of the popup on the screen.
* Determines where the popup appears on the screen.
*/
type WanderEmbeddedPopupPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
/**
* Variant of the Wander logo to display.
* Controls how the Wander logo appears on the button.
*/
type WanderEmbeddedLogoVariant = "none" | "default" | "text-color";
/**
* Configuration for balance display in the button.
* Controls which balance is displayed and in what currency.
*/
interface WanderEmbeddedBalanceOptions {
/**
* Determines which token or total balance is shown.
* @param "total" Show total balance across all tokens
* @param string Token ID to show specific token balance
* @default "total"
*/
balanceOf: "total" | string;
/**
* Determines the currency used to display the balance.
* @param "auto" Use user's selected currency from their wallet preferences
* @param string Specific token ID or currency symbol (e.g., "USD", "EUR")
* @default "auto"
*/
currency: "auto" | string;
}
/** Notification display options */
type WanderEmbeddedButtonNotifications =
/** No notifications shown */
"off"
/** Show count of pending requests */
| "counter"
/** Show indicator without count */
| "alert";
/**
* Custom labels for button text.
*/
interface WanderEmbeddedButtonLabels {
/**
* Text to display for the sign in button.
* @default "Sign In"
*/
signIn: string;
/**
* Text to display for reviewing requests button.
* @default "Review Requests"
*/
reviewRequests: string;
}
/**
* Configuration options for the button component.
* Customizes the appearance and behavior of the Wander Embedded button.
*/
interface WanderEmbeddedButtonOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
* @default document.body
*/
parent?: HTMLElement;
/**
* Position of the button on the screen.
* Use "static" for custom positioning via CSS.
* @default "bottom-right"
*/
position?: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
* - "none": No logo is displayed
* - "default": Standard Wander logo is displayed
* - "text-color": Logo with colored text is displayed
* @default "default"
*/
wanderLogo?: WanderEmbeddedLogoVariant;
/**
* URL of the dApp logo that will be displayed next to the Wander logo when connected.
* @default ""
*/
dappLogoSrc?: string;
/**
* Whether to show the button label.
* @default true
*/
label?: boolean;
/**
* Configuration for displaying balance information.
* - false: No balance is displayed
* - true: Balance is displayed
* - WanderEmbeddedBalanceOptions: Customized balance display
* @default { balanceOf: "total", currency: "auto" }
*/
balance?: boolean | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
* @default "counter"
*/
notifications?: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
* @default { signIn: "Sign in", reviewRequests: "Review requests" }
*/
i18n?: WanderEmbeddedButtonLabels;
}
/**
* Configuration for the button component.
*/
interface WanderEmbeddedButtonConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {
/**
* Element the button will be appended to.
*/
parent: HTMLElement;
/**
* Position of the button on the screen.
*/
position: WanderEmbeddedButtonPosition;
/**
* Variant of the Wander logo to display.
*/
wanderLogo: WanderEmbeddedLogoVariant;
/**
* URL of the dApp logo.
*/
dappLogoSrc: string;
/**
* Whether to show the button label.
*/
label: boolean;
/**
* Configuration for displaying balance information.
*/
balance: false | WanderEmbeddedBalanceOptions;
/**
* Type of notifications to display.
*/
notifications: WanderEmbeddedButtonNotifications;
/**
* Custom labels for button text.
*/
i18n: WanderEmbeddedButtonLabels;
}
/**
* Button status properties that can be observed.
*/
type WanderEmbeddedButtonStatus =
/** Whether the user is authenticated. */
"isAuthenticated"
/** Whether the user's wallet is connected to the application. */
| "isConnected"
/** Whether the wallet UI is currently open. */
| "isOpen";
/**
* CSS variables for styling the modal/iframe component.
*/
interface WanderEmbeddedModalCSSVars {
/**
* Background color of the modal.
*/
background: string;
/**
* Border width of the modal.
*/
borderWidth: number;
/**
* Border color of the modal.
*/
borderColor: string;
/**
* Border radius of the modal.
*/
borderRadius: number | string;
/**
* Box shadow of the modal.
*/
boxShadow: string;
/**
* Z-index of the modal.
*/
zIndex: string;
/**
* Preferred width of the modal.
*/
preferredWidth: number | string;
/**
* Preferred height of the modal.
*/
preferredHeight: number | string;
/**
* Padding inside the iframe.
*/
iframePadding: number;
/**
* Maximum width of the iframe content.
*/
iframeMaxWidth: number;
/**
* Maximum height of the iframe content.
*/
iframeMaxHeight: number;
/**
* Background color of the backdrop.
*/
backdropBackground: string;
/**
* Backdrop filter applied to the backdrop.
*/
backdropBackdropFilter: string;
/**
* Padding around the modal within the backdrop.
*/
backdropPadding: number | string;
/**
* Pointer events setting for the backdrop.
* If `backdropBackground` is transparent and `backdropBackdropFilter` is not set, this will be set to "none", unless
* a different value is specified. In any other case, this is ignored.
*/
backdropPointerEvents: string;
/**
* Padding on mobile devices.
*/
mobilePadding: number;
/**
* Height on mobile devices.
*/
mobileHeight: string | number;
/**
* Border radius on mobile devices.
*/
mobileBorderRadius: number;
/**
* Border width on mobile devices.
*/
mobileBorderWidth: number;
/**
* Border color on mobile devices.
*/
mobileBorderColor: string;
/**
* Box shadow on mobile devices.
*/
mobileBoxShadow: string;
}
/**
* CSS variables for styling the button component.
*/
interface WanderEmbeddedButtonCSSVars {
/**
* Horizontal gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapX: number | string;
/**
* Vertical gap from the edge of the screen.
* Not used when position is "static".
* @default 16
*/
gapY: number | string;
/**
* Gap between elements inside the button.
* @default 12
*/
gapInside: number | string;
/**
* Minimum width of the button.
* @default 0
*/
minWidth: number | string;
/**
* Minimum height of the button.
* @default 0
*/
minHeight: number | string;
/**
* Z-index of the button.
* @default "9999"
*/
zIndex: string;
/**
* Padding of the button.
* @default "12px 20px 12px 16px"
*/
padding: number | string;
/**
* Font style of the button.
* @default "16px monospace"
*/
font: string;
/**
* Background color of the button.
* @default "white" in light mode, "black" in dark mode
*/
background: string;
/**
* Text color of the button.
* @default "black" in light mode, "white" in dark mode
*/
color: string;
/**
* Border width of the button.
* @default 2
*/
borderWidth: number | string;
/**
* Border color of the button.
* @default "white" in light mode, "black" in dark mode
*/
borderColor: string;
/**
* Border radius of the button.
* @default 128
*/
borderRadius: number | string;
/**
* Box shadow of the button.
* @default "0 0 32px 0px rgba(0, 0, 0, 0.25)"
*/
boxShadow: string;
/**
* Background color of the logo.
* @default ""
*/
logoBackground: string;
/**
* Border width of the logo.
* @default ""
*/
logoBorderWidth: number | string;
/**
* Border color of the logo.
* @default ""
*/
logoBorderColor: string;
/**
* Border radius of the logo.
* @default ""
*/
logoBorderRadius: number | string;
/**
* Background color of the notifications badge.
* @default ""
*/
notificationsBackground: string;
/**
* Border width of the notifications badge.
* @default ""
*/
notificationsBorderWidth: number | string;
/**
* Border color of the notifications badge.
* @default ""
*/
notificationsBorderColor: string;
/**
* Border radius of the notifications badge.
* @default ""
*/
notificationsBorderRadius: number | string;
/**
* Box shadow of the notifications badge.
* @default ""
*/
notificationsBoxShadow: string;
/**
* Padding of the notifications badge.
* @default ""
*/
notificationsPadding: number | string;
}
/**
* Supported currency codes.
*/
type Currency = "USD" | "EUR" | "GBP" | "CNY" | "INR" | "AED" | "ARS" | "AUD" | "BDT" | "BHD" | "BMD" | "BRL" | "CAD" | "CHF" | "CLP" | "CZK" | "DKK" | "HKD" | "HUF" | "IDR" | "ILS" | "JPY" | "KRW" | "KWD" | "LKR" | "MMK" | "MXN" | "MYR" | "NGN" | "NOK" | "NZD" | "PHP" | "PKR" | "PLN" | "RUB" | "SAR" | "SEK" | "SGD" | "THB" | "TRY" | "TWD" | "UAH" | "VEF" | "VND" | "ZAR";
export { type IncomingBalanceMessageData as A, type BalanceInfo as B, type Currency as C, type IncomingRequestMessageData as D, type BaseIncomingMessage as E, type IncomingAuthMessage as F, type IncomingConnectMessage as G, type HalfLayoutConfig as H, type ImgPath as I, type IncomingDisconnectMessage as J, type IncomingOpenMessage as K, type LayoutConfig as L, type ModalLayoutConfig as M, type IncomingCloseMessage as N, type OutgoingMessage as O, type PopupLayoutConfig as P, type IncomingResizeMessage as Q, type RouteType as R, type SidebarLayoutConfig as S, type ThemeVariant as T, type UserDetails as U, type IncomingBalanceMessage as V, type WanderEmbeddedButtonCSSVars as W, type IncomingRequestMessage as X, type IncomingMessageId as Y, type WanderEmbeddedButtonOptions as a, type WanderEmbeddedButtonConfig as b, type WanderEmbeddedButtonStatus as c, type WanderEmbeddedLogoVariant as d, type WanderEmbeddedIframeOptions as e, type LayoutType as f, type RouteConfig as g, type IncomingMessage as h, type WanderEmbeddedOptions as i, type ImageExtension as j, LAYOUT_TYPES as k, isRouteConfig as l, type RequestsInfo as m, type ThemeSetting as n, type WanderEmbeddedComponentOptions as o, type WanderEmbeddedComponentConfig as p, isThemeRecord as q, type WanderEmbeddedIframeConfig as r, type WanderEmbeddedButtonPosition as s, type WanderEmbeddedPopupPosition as t, type WanderEmbeddedBalanceOptions as u, type WanderEmbeddedButtonNotifications as v, type WanderEmbeddedButtonLabels as w, type WanderEmbeddedModalCSSVars as x, type IncomingAuthMessageData as y, type IncomingResizeMessageData as z };
sdk-dist/index.cjs

Sorry, the diff of this file is too big to display

sdk-dist/index.cjs.map

Sorry, the diff of this file is too big to display

sdk-dist/index.global.js

Sorry, the diff of this file is too big to display

sdk-dist/index.global.js.map

Sorry, the diff of this file is too big to display

sdk-dist/index.js

Sorry, the diff of this file is too big to display

sdk-dist/index.js.map

Sorry, the diff of this file is too big to display

sdk-dist/wander-embedded.cjs

Sorry, the diff of this file is too big to display

sdk-dist/wander-embedded.cjs.map

Sorry, the diff of this file is too big to display

sdk-dist/wander-embedded.global.js

Sorry, the diff of this file is too big to display

sdk-dist/wander-embedded.global.js.map

Sorry, the diff of this file is too big to display

sdk-dist/wander-embedded.js

Sorry, the diff of this file is too big to display

sdk-dist/wander-embedded.js.map

Sorry, the diff of this file is too big to display