🚀 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.3
 to
0.0.4
+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 };
+9
-1
package.json
{
"name": "@wanderapp/embed-sdk",
"version": "0.0.3",
"version": "0.0.4",
"description": "Wander Embedded SDK.",

@@ -35,3 +35,11 @@ "author": "wanderapp",

"ts-deepmerge": "^7.0.2"
},
"pnpm": {
"ignoredBuiltDependencies": [
"esbuild"
],
"onlyBuiltDependencies": [
"esbuild"
]
}
}
+46
-280
sdk-dist/components/button/wander-button.component.cjs

@@ -1,22 +0,7 @@

'use strict';
var tsDeepmerge = require('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,
customStyles,
cssVariableKeys = []
}) => `
'use strict';var tsDeepmerge=require('ts-deepmerge');function f(r){return !!(r&&typeof r=="object"&&("light"in r||"dark"in r))}var h=({wanderLogo:r,customStyles:e,cssVariableKeys:t=[]})=>`
<style>
:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${t.map(o=>`--${o}: var(--${o}Dark);`).join(`
`)}
}

@@ -26,5 +11,4 @@

:root[data-theme="system"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${t.map(o=>`--${o}: var(--${o}Dark);`).join(`
`)}
}

@@ -34,2 +18,3 @@ }

.button {
position: relative;
display: flex;

@@ -41,17 +26,34 @@ align-items: center;

cursor: pointer;
transition: transform linear 50ms;
min-width: var(--minWidth);
min-height: var(--minHeight);
z-index: var(--zIndex);
z-index: 0;
padding: var(--padding);
font: var(--font);
color: var(--color);
background: transparent;
border: none;
border-radius: var(--borderRadius);
}
.button::before {
content: "";
position: absolute;
inset: 0;
background: var(--background);
color: var(--color);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
z-index: -1;
transition: transform linear 50ms;
}
.button::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--borderRadius);
border-bottom-right-radius: 0;
z-index: -1;
}
.button:hover .wanderLogo {

@@ -61,3 +63,3 @@ animation: sail 3s infinite;

.button:active {
.button:active::before {
transform: scale(0.95);

@@ -69,2 +71,3 @@ }

aspect-ratio: 1;
transition: transform linear 50ms;
}

@@ -80,2 +83,11 @@

.balance {
filter: blur(0px);
transition: filter linear 300ms;
}
.balance.isHidden {
filter: blur(6px);
}
.indicator,

@@ -90,2 +102,3 @@ .dappLogo,

transition: transform linear 150ms, background linear 150ms;
pointer-events: none;
}

@@ -125,3 +138,3 @@

.isConnected + .indicator {
background: green;
background: #56C980;
}

@@ -149,3 +162,3 @@

${customStyles}
${e}
</style>

@@ -157,3 +170,3 @@

class="wanderLogo"
${wanderLogo === "none" ? "hidden" : ""}
${r==="none"?"hidden":""}
viewBox="0 0 257 121"

@@ -164,9 +177,9 @@ fill="none"

<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient1)"}"
fill="${r==="text-color"?"currentColor":"url(#gradient1)"}"
fill-rule="evenodd"
clip-rule="evenodd" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient2)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient2)"}" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient3)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient3)"}" />

@@ -216,250 +229,3 @@ <defs>

<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`);
}
}
var _WanderButton = class _WanderButton {
constructor(options = {}) {
// State:
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
);
}
}
this.config = {
parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,
id: options.id || _WanderButton.DEFAULT_CONFIG.id,
theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,
cssVars: {
light: cssVarsLight,
dark: cssVarsDark
},
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,
balance: options.balance === false ? false : {
balanceOf: (options.balance === true ? null : options.balance?.balanceOf) ?? _WanderButton.DEFAULT_CONFIG.balance.balanceOf,
currency: (options.balance === true ? null : options.balance?.currency) ?? _WanderButton.DEFAULT_CONFIG.balance.currency
},
notifications: options.notifications || _WanderButton.DEFAULT_CONFIG.notifications,
i18n: options.i18n || _WanderButton.DEFAULT_CONFIG.i18n
};
const elements = _WanderButton.initializeButton(this.config);
this.parent = this.config.parent;
this.host = elements.host;
this.button = elements.button;
this.wanderLogo = elements.wanderLogo;
this.label = elements.label;
this.balance = elements.balance;
this.indicator = elements.indicator;
this.dappLogo = elements.dappLogo;
this.notifications = elements.notifications;
}
static initializeButton(config) {
const host = document.createElement("div");
host.id = config.id;
host.setAttribute("data-theme", config.theme);
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
template.innerHTML = getWanderButtonTemplateContent({
wanderLogo: config.wanderLogo,
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(_WanderButton.DEFAULT_LIGHT_CSS_VARS)
});
shadow.appendChild(template.content);
const button = shadow.querySelector(".button");
const wanderLogo = shadow.querySelector(".wanderLogo");
const label = shadow.querySelector(".label");
const balance = shadow.querySelector(".balance");
const indicator = shadow.querySelector(".indicator");
const dappLogo = shadow.querySelector(".dappLogo");
const notifications = shadow.querySelector(
".notifications"
);
if (!button || !wanderLogo || !label || !balance || !indicator || !dappLogo || !notifications)
throw new Error("Missing elements");
host.style.position = "fixed";
if (config.position !== "static") {
const [y, x] = config.position.split("-");
host.style[y] = "var(--gapY)";
host.style[x] = "var(--gapX)";
}
host.style.transition = "opacity linear 150ms";
host.style.opacity = "0";
setTimeout(() => {
host.style.opacity = "1";
});
addCSSVariables(host, config.cssVars.light);
addCSSVariables(host, config.cssVars.dark, "Dark");
label.textContent = config.i18n.signIn;
if (config.balance === false) {
balance.setAttribute("hidden", "true");
}
dappLogo.src = config.dappLogoSrc;
return {
host,
button,
wanderLogo,
label,
balance,
indicator,
dappLogo,
notifications
};
}
getElements() {
return {
parent: this.parent,
host: this.host,
button: this.button,
wanderLogo: this.wanderLogo,
label: this.label,
balance: this.balance,
indicator: this.indicator,
dappLogo: this.dappLogo,
notifications: this.notifications
};
}
setBalance(balanceInfo) {
const formattedBalance = new Intl.NumberFormat(void 0, {
currency: balanceInfo.currency
}).format(balanceInfo.amount);
this.balance.textContent = `${formattedBalance}`;
}
setNotifications(pendingRequests) {
const { label, notifications, i18n } = this.config;
if (notifications === "off") return;
if (pendingRequests > 0) {
this.notifications.textContent = notifications === "counter" ? `${pendingRequests}` : "!";
this.label.textContent = label ? i18n.reviewRequests : "";
} else {
this.notifications.textContent = "";
this.label.textContent = label ? this.status.isAuthenticated ? "" : i18n.signIn : "";
}
}
setStatus(status) {
this.status[status] = true;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = "";
}
}
unsetStatus(status) {
this.status[status] = false;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = this.config.label ? this.config.i18n.signIn : "";
}
}
destroy() {
this.host?.remove();
}
};
_WanderButton.DEFAULT_LIGHT_CSS_VARS = {
// Button (button):
gapX: 16,
gapY: 16,
gapInside: 12,
minWidth: 0,
minHeight: 0,
zIndex: "9999",
padding: "12px 20px 12px 16px",
font: "16px monospace",
// Button (button, affected by :hover & :focus):
background: "white",
color: "black",
borderWidth: 2,
borderColor: "white",
borderRadius: 128,
boxShadow: "0 0 32px 0px rgba(0, 0, 0, 0.25)",
// Logo (img / svg):
logoBackground: "",
logoBorderWidth: "",
logoBorderColor: "",
logoBorderRadius: "",
// Notifications (span):
notificationsBackground: "",
notificationsBorderWidth: "",
notificationsBorderColor: "",
notificationsBorderRadius: "",
notificationsBoxShadow: "",
notificationsPadding: ""
};
_WanderButton.DEFAULT_DARK_CSS_VARS = {
..._WanderButton.DEFAULT_LIGHT_CSS_VARS,
// Button (button, affected by :hover & :focus):
background: "black",
color: "white",
borderColor: "black",
// Logo (img / svg):
logoBackground: "",
logoBorderWidth: "",
logoBorderColor: "",
logoBorderRadius: "",
// Notifications (span):
notificationsBackground: "",
notificationsBorderWidth: "",
notificationsBorderColor: "",
notificationsBorderRadius: "",
notificationsBoxShadow: "",
notificationsPadding: ""
};
_WanderButton.DEFAULT_CONFIG = {
parent: document.body,
id: "wanderEmbeddedButtonHost",
theme: "system",
cssVars: {
light: _WanderButton.DEFAULT_LIGHT_CSS_VARS,
dark: _WanderButton.DEFAULT_DARK_CSS_VARS
},
customStyles: "",
position: "bottom-right",
wanderLogo: "default",
dappLogoSrc: "",
label: true,
balance: {
balanceOf: "total",
currency: "auto"
},
notifications: "counter",
i18n: {
signIn: "Sign in",
reviewRequests: "Review requests"
}
};
var WanderButton = _WanderButton;
exports.WanderButton = WanderButton;
//# sourceMappingURL=wander-button.component.cjs.map
`;function u(r,e,t=""){for(let o in e){let a=e[o];typeof a=="string"?r.style.setProperty(`--${o}`,a):typeof a=="number"&&r.style.setProperty(`--${o}${t}`,`${a}px`);}}var n=class n{constructor(e={}){this.status={};let t=e.cssVars||{},o=n.DEFAULT_LIGHT_CSS_VARS,a=n.DEFAULT_DARK_CSS_VARS;Object.keys(t).length>0&&(f(t)?(o=tsDeepmerge.merge(t?.light||{},n.DEFAULT_LIGHT_CSS_VARS),a=tsDeepmerge.merge(t?.dark||{},n.DEFAULT_DARK_CSS_VARS)):e.theme!=="dark"?o=tsDeepmerge.merge(t||{},n.DEFAULT_LIGHT_CSS_VARS):a=tsDeepmerge.merge(t||{},n.DEFAULT_DARK_CSS_VARS)),this.config={parent:e.parent||n.DEFAULT_CONFIG.parent,id:e.id||n.DEFAULT_CONFIG.id,theme:e.theme||n.DEFAULT_CONFIG.theme,cssVars:{light:o,dark:a},customStyles:e.customStyles||n.DEFAULT_CONFIG.customStyles,position:e.position||n.DEFAULT_CONFIG.position,wanderLogo:e.wanderLogo||n.DEFAULT_CONFIG.wanderLogo,dappLogoSrc:e.dappLogoSrc||n.DEFAULT_CONFIG.dappLogoSrc,label:e.label??n.DEFAULT_CONFIG.label,balance:e.balance===false?false:{balanceOf:(e.balance===true?null:e.balance?.balanceOf)??n.DEFAULT_CONFIG.balance.balanceOf,currency:(e.balance===true?null:e.balance?.currency)??n.DEFAULT_CONFIG.balance.currency},notifications:e.notifications||n.DEFAULT_CONFIG.notifications,i18n:e.i18n||n.DEFAULT_CONFIG.i18n};let i=n.initializeButton(this.config);this.parent=this.config.parent,this.host=i.host,this.button=i.button,this.wanderLogo=i.wanderLogo,this.label=i.label,this.balance=i.balance,this.indicator=i.indicator,this.dappLogo=i.dappLogo,this.notifications=i.notifications;}static initializeButton(e){let t=document.createElement("div");t.id=e.id,t.setAttribute("data-theme",e.theme);let o=t.attachShadow({mode:"open"}),a=document.createElement("template");a.innerHTML=h({wanderLogo:e.wanderLogo,customStyles:e.customStyles,cssVariableKeys:Object.keys(n.DEFAULT_LIGHT_CSS_VARS)}),o.appendChild(a.content);let i=o.querySelector(".button"),b=o.querySelector(".wanderLogo"),s=o.querySelector(".label"),l=o.querySelector(".balance"),m=o.querySelector(".indicator"),c=o.querySelector(".dappLogo"),g=o.querySelector(".notifications");if(!i||!b||!s||!l||!m||!c||!g)throw new Error("Missing elements");if(t.style.position="fixed",t.style.zIndex="var(--zIndex)",e.position!=="static"){let[S,x]=e.position.split("-");t.style[S]="var(--gapY)",t.style[x]="var(--gapX)";}return t.style.transition="opacity linear 150ms",t.style.opacity="0",setTimeout(()=>{t.style.opacity="1";}),u(t,e.cssVars.light),u(t,e.cssVars.dark,"Dark"),s.textContent=e.i18n.signIn,e.balance===false&&l.setAttribute("hidden","true"),c.src=e.dappLogoSrc,{host:t,button:i,wanderLogo:b,label:s,balance:l,indicator:m,dappLogo:c,notifications:g}}getElements(){return {parent:this.parent,host:this.host,button:this.button,wanderLogo:this.wanderLogo,label:this.label,balance:this.balance,indicator:this.indicator,dappLogo:this.dappLogo,notifications:this.notifications}}setBalance(e){e.amount===null?this.balance.classList.add("isHidden"):this.balance.classList.remove("isHidden"),this.balance.textContent=e.formattedBalance;}setNotifications(e){let{label:t,notifications:o,i18n:a}=this.config;o!=="off"&&(e>0?(this.notifications.textContent=o==="counter"?`${e}`:"!",this.label.textContent=t?a.reviewRequests:""):(this.notifications.textContent="",this.label.textContent=t?this.status.isAuthenticated?"":a.signIn:""));}setStatus(e){this.status[e]=true,this.button.classList.add(e),e==="isAuthenticated"&&(this.label.textContent="");}unsetStatus(e){this.status[e]=false,this.button.classList.remove(e),e==="isAuthenticated"&&(this.label.textContent=this.config.label?this.config.i18n.signIn:"");}destroy(){this.host?.remove();}};n.DEFAULT_LIGHT_CSS_VARS={gapX:16,gapY:16,gapInside:12,minWidth:0,minHeight:0,zIndex:"9999",padding:"12px 20px 12px 16px",font:"16px monospace",background:"white",color:"black",borderWidth:2,borderColor:"white",borderRadius:128,boxShadow:"0 0 32px 0px rgba(0, 0, 0, 0.25)",logoBackground:"",logoBorderWidth:"",logoBorderColor:"",logoBorderRadius:"",notificationsBackground:"",notificationsBorderWidth:"",notificationsBorderColor:"",notificationsBorderRadius:"",notificationsBoxShadow:"",notificationsPadding:""},n.DEFAULT_DARK_CSS_VARS={...n.DEFAULT_LIGHT_CSS_VARS,background:"black",color:"white",borderColor:"black",logoBackground:"",logoBorderWidth:"",logoBorderColor:"",logoBorderRadius:"",notificationsBackground:"",notificationsBorderWidth:"",notificationsBorderColor:"",notificationsBorderRadius:"",notificationsBoxShadow:"",notificationsPadding:""},n.DEFAULT_CONFIG={parent:document.body,id:"wanderEmbeddedButtonHost",theme:"system",cssVars:{light:n.DEFAULT_LIGHT_CSS_VARS,dark:n.DEFAULT_DARK_CSS_VARS},customStyles:"",position:"bottom-right",wanderLogo:"default",dappLogoSrc:"",label:true,balance:{balanceOf:"total",currency:"auto"},notifications:"counter",i18n:{signIn:"Sign in",reviewRequests:"Review requests"}};var L=n;exports.WanderButton=L;//# sourceMappingURL=wander-button.component.cjs.map
//# sourceMappingURL=wander-button.component.cjs.map
+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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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 display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n transition: transform linear 50ms;\n\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: var(--zIndex);\n padding: var(--padding);\n font: var(--font);\n\n background: var(--background);\n color: var(--color);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\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 }\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: green;\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 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 const formattedBalance = new Intl.NumberFormat(undefined, {\n currency: balanceInfo.currency\n }).format(balanceInfo.amount);\n\n this.balance.textContent = `${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.add(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/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":["isThemeRecord","cssVars","getWanderButtonTemplateContent","wanderLogo","customStyles","cssVariableKeys","cssVariableKey","addCSSVariables","element","vars","suffix","key","value","_WanderButton","options","cssVarsLight","cssVarsDark","merge","elements","config","host","shadow","template","button","label","balance","indicator","dappLogo","notifications","y","balanceInfo","pendingRequests","i18n","status","WanderButton"],"mappings":"qDAgWO,SAASA,CAAAA,CACdC,CACsD,CAAA,CACtD,OAAO,CAAC,EACNA,CAAAA,EACA,OAAOA,CAAAA,EAAY,QAClB,GAAA,OAAA,GAAWA,CAAW,EAAA,MAAA,GAAUA,CAErC,CAAA,CAAA,CC9VO,IAAMC,CAAAA,CAAiC,CAAC,CAC7C,UAAAC,CAAAA,CAAAA,CACA,YAAAC,CAAAA,CAAAA,CACA,eAAAC,CAAAA,CAAAA,CAAkB,EACpB,CAA0C,GAAA;AAAA;;AAAA;AAAA,IAIpCA,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,CAAC;AAAA;;AAAA;AAAA;AAAA,MAKTD,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,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,EA8IfF,CAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOVD,EAAAA,CAAAA,GAAe,MAAS,CAAA,QAAA,CAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7BA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBACjD,CAAA;AAAA;AAAA,YAGEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,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;ECpMC,SAASI,CAAAA,CAAmBC,EAAsBC,CAASC,CAAAA,CAAAA,CAAS,GAAI,CAC7E,IAAA,IAAWC,KAAOF,CAAM,CAAA,CACtB,IAAMG,CAAQH,CAAAA,CAAAA,CAAKE,CAAG,CAElB,CAAA,OAAOC,GAAU,QAAUJ,CAAAA,CAAAA,CAAQ,MAAM,WAAY,CAAA,CAAA,EAAA,EAAKG,CAAG,CAAIC,CAAAA,CAAAA,CAAK,EACjE,OAAOA,CAAAA,EAAU,UACxBJ,CAAQ,CAAA,KAAA,CAAM,YAAY,CAAKG,EAAAA,EAAAA,CAAG,GAAGD,CAAM,CAAA,CAAA,CAAI,GAAGE,CAAK,CAAA,EAAA,CAAI,EAC/D,CACF,CCIO,IAAMC,CAAAA,CAAN,MAAMA,CAAa,CAmGxB,YAAYC,CAAuC,CAAA,GAAI,CAFvD,IAAA,CAAQ,OAA+D,EAAC,CAGtE,IAAMb,CAAUa,CAAAA,CAAAA,CAAQ,SAAW,EAAC,CAEhCC,EACFF,CAAa,CAAA,sBAAA,CACXG,EACFH,CAAa,CAAA,qBAAA,CAEX,OAAO,IAAKZ,CAAAA,CAAO,EAAE,MAAS,CAAA,CAAA,GAC5BD,EAAcC,CAAO,CAAA,EACvBc,EAAeE,iBACbhB,CAAAA,CAAAA,EAAS,OAAS,EAAC,CACnBY,EAAa,sBACf,CAAA,CACAG,CAAcC,CAAAA,iBAAAA,CACZhB,CAAS,EAAA,IAAA,EAAQ,EACjBY,CAAAA,CAAAA,CAAa,qBACf,CACSC,EAAAA,CAAAA,CAAQ,QAAU,MAC3BC,CAAAA,CAAAA,CAAeE,kBACbhB,CAAW,EAAA,GACXY,CAAa,CAAA,sBACf,EAEAG,CAAcC,CAAAA,iBAAAA,CACZhB,GAAW,EAAC,CACZY,EAAa,qBACf,CAAA,CAAA,CAIJ,KAAK,MAAS,CAAA,CACZ,OAAQC,CAAQ,CAAA,MAAA,EAAUD,EAAa,cAAe,CAAA,MAAA,CACtD,GAAIC,CAAQ,CAAA,EAAA,EAAMD,EAAa,cAAe,CAAA,EAAA,CAC9C,MAAOC,CAAQ,CAAA,KAAA,EAASD,EAAa,cAAe,CAAA,KAAA,CACpD,OAAS,CAAA,CACP,KAAOE,CAAAA,CAAAA,CACP,KAAMC,CACR,CAAA,CACA,aACEF,CAAQ,CAAA,YAAA,EAAgBD,EAAa,cAAe,CAAA,YAAA,CACtD,SAAUC,CAAQ,CAAA,QAAA,EAAYD,EAAa,cAAe,CAAA,QAAA,CAC1D,WAAYC,CAAQ,CAAA,UAAA,EAAcD,EAAa,cAAe,CAAA,UAAA,CAC9D,YACEC,CAAQ,CAAA,WAAA,EAAeD,EAAa,cAAe,CAAA,WAAA,CACrD,MAAOC,CAAQ,CAAA,KAAA,EAASD,EAAa,cAAe,CAAA,KAAA,CACpD,QACEC,CAAQ,CAAA,OAAA,GAAY,MAChB,KACA,CAAA,CACE,WACGA,CAAQ,CAAA,OAAA,GAAY,KACjB,IACAA,CAAAA,CAAAA,CAAQ,OAAS,EAAA,SAAA,GACrBD,CAAa,CAAA,cAAA,CAAe,QAAQ,SACtC,CAAA,QAAA,CAAA,CACGC,EAAQ,OAAY,GAAA,IAAA,CAAO,KAAOA,CAAQ,CAAA,OAAA,EAAS,WACpDD,CAAa,CAAA,cAAA,CAAe,QAAQ,QACxC,CAAA,CACN,cACEC,CAAQ,CAAA,aAAA,EAAiBD,EAAa,cAAe,CAAA,aAAA,CACvD,KAAMC,CAAQ,CAAA,IAAA,EAAQD,EAAa,cAAe,CAAA,IACpD,EAEA,IAAMK,CAAAA,CAAWL,EAAa,gBAAiB,CAAA,IAAA,CAAK,MAAM,CAE1D,CAAA,IAAA,CAAK,OAAS,IAAK,CAAA,MAAA,CAAO,OAC1B,IAAK,CAAA,IAAA,CAAOK,EAAS,IACrB,CAAA,IAAA,CAAK,OAASA,CAAS,CAAA,MAAA,CACvB,KAAK,UAAaA,CAAAA,CAAAA,CAAS,WAC3B,IAAK,CAAA,KAAA,CAAQA,EAAS,KACtB,CAAA,IAAA,CAAK,QAAUA,CAAS,CAAA,OAAA,CACxB,KAAK,SAAYA,CAAAA,CAAAA,CAAS,UAC1B,IAAK,CAAA,QAAA,CAAWA,EAAS,QACzB,CAAA,IAAA,CAAK,cAAgBA,CAAS,CAAA,cAChC,CAEA,OAAO,gBAAA,CAAiBC,EAAoC,CAC1D,IAAMC,EAAO,QAAS,CAAA,aAAA,CAAc,KAAK,CAEzCA,CAAAA,CAAAA,CAAK,GAAKD,CAAO,CAAA,EAAA,CACjBC,EAAK,YAAa,CAAA,YAAA,CAAcD,EAAO,KAAK,CAAA,CAE5C,IAAME,CAAAA,CAASD,CAAK,CAAA,YAAA,CAAa,CAAE,IAAM,CAAA,MAAO,CAAC,CAC3CE,CAAAA,CAAAA,CAAW,SAAS,aAAc,CAAA,UAAU,EAElDA,CAAS,CAAA,SAAA,CAAYpB,EAA+B,CAClD,UAAA,CAAYiB,EAAO,UACnB,CAAA,YAAA,CAAcA,EAAO,YAErB,CAAA,eAAA,CAAiB,OAAO,IAAKN,CAAAA,CAAAA,CAAa,sBAAsB,CAClE,CAAC,EAEDQ,CAAO,CAAA,WAAA,CAAYC,EAAS,OAAO,CAAA,CAEnC,IAAMC,CAASF,CAAAA,CAAAA,CAAO,cAAc,SAAS,CAAA,CACvClB,EAAakB,CAAO,CAAA,aAAA,CAAc,aAAa,CAC/CG,CAAAA,CAAAA,CAAQH,CAAO,CAAA,aAAA,CAAc,QAAQ,CAAA,CACrCI,EAAUJ,CAAO,CAAA,aAAA,CAAc,UAAU,CACzCK,CAAAA,CAAAA,CAAYL,EAAO,aAAc,CAAA,YAAY,EAC7CM,CAAWN,CAAAA,CAAAA,CAAO,cAAc,WAAW,CAAA,CAC3CO,EAAgBP,CAAO,CAAA,aAAA,CAC3B,gBACF,CAEA,CAAA,GACE,CAACE,CACD,EAAA,CAACpB,GACD,CAACqB,CAAAA,EACD,CAACC,CACD,EAAA,CAACC,GACD,CAACC,CAAAA,EACD,CAACC,CAED,CAAA,MAAM,IAAI,KAAM,CAAA,kBAAkB,EAKpC,GAHAR,CAAAA,CAAK,MAAM,QAAW,CAAA,OAAA,CACtBA,CAAK,CAAA,KAAA,CAAM,MAAS,CAAA,eAAA,CAEhBD,EAAO,QAAa,GAAA,QAAA,CAAU,CAChC,GAAM,CAACU,EAAG,CAAC,CAAA,CAAIV,EAAO,QAAS,CAAA,KAAA,CAAM,GAAG,CAKxCC,CAAAA,CAAAA,CAAK,MAAMS,CAAC,CAAA,CAAI,cAChBT,CAAK,CAAA,KAAA,CAAM,CAAC,CAAI,CAAA,cAClB,CACA,OAAAA,CAAAA,CAAK,MAAM,UAAa,CAAA,sBAAA,CACxBA,EAAK,KAAM,CAAA,OAAA,CAAU,IAErB,UAAW,CAAA,IAAM,CACfA,CAAK,CAAA,KAAA,CAAM,QAAU,IACvB,CAAC,EAEDb,CAAgBa,CAAAA,CAAAA,CAAMD,EAAO,OAAQ,CAAA,KAAK,EAC1CZ,CAAgBa,CAAAA,CAAAA,CAAMD,EAAO,OAAQ,CAAA,IAAA,CAAM,MAAM,CAEjDK,CAAAA,CAAAA,CAAM,YAAcL,CAAO,CAAA,IAAA,CAAK,OAE5BA,CAAO,CAAA,OAAA,GAAY,OACrBM,CAAQ,CAAA,YAAA,CAAa,SAAU,MAAM,CAAA,CAGvCE,EAAS,GAAMR,CAAAA,CAAAA,CAAO,YAEf,CACL,IAAA,CAAAC,EACA,MAAAG,CAAAA,CAAAA,CACA,WAAApB,CACA,CAAA,KAAA,CAAAqB,EACA,OAAAC,CAAAA,CAAAA,CACA,UAAAC,CACA,CAAA,QAAA,CAAAC,EACA,aAAAC,CAAAA,CACF,CACF,CAEA,WAAA,EAAc,CACZ,OAAO,CACL,MAAA,CAAQ,KAAK,MACb,CAAA,IAAA,CAAM,KAAK,IACX,CAAA,MAAA,CAAQ,KAAK,MACb,CAAA,UAAA,CAAY,KAAK,UACjB,CAAA,KAAA,CAAO,KAAK,KACZ,CAAA,OAAA,CAAS,KAAK,OACd,CAAA,SAAA,CAAW,KAAK,SAChB,CAAA,QAAA,CAAU,KAAK,QACf,CAAA,aAAA,CAAe,KAAK,aACtB,CACF,CAEA,UAAWE,CAAAA,CAAAA,CAA0B,CAC/BA,CAAY,CAAA,MAAA,GAAW,KACzB,IAAK,CAAA,OAAA,CAAQ,UAAU,GAAI,CAAA,UAAU,EAErC,IAAK,CAAA,OAAA,CAAQ,UAAU,MAAO,CAAA,UAAU,CAG1C,CAAA,IAAA,CAAK,OAAQ,CAAA,WAAA,CAAcA,EAAY,iBACzC,CAEA,iBAAiBC,CAAyB,CAAA,CACxC,GAAM,CAAE,KAAA,CAAAP,EAAO,aAAAI,CAAAA,CAAAA,CAAe,KAAAI,CAAK,CAAA,CAAI,KAAK,MAExCJ,CAAAA,CAAAA,GAAkB,QAElBG,CAAkB,CAAA,CAAA,EACpB,KAAK,aAAc,CAAA,WAAA,CACjBH,IAAkB,SAAY,CAAA,CAAA,EAAGG,CAAe,CAAK,CAAA,CAAA,GAAA,CACvD,KAAK,KAAM,CAAA,WAAA,CAAcP,EAAQQ,CAAK,CAAA,cAAA,CAAiB,KAEvD,IAAK,CAAA,aAAA,CAAc,YAAc,EACjC,CAAA,IAAA,CAAK,MAAM,WAAcR,CAAAA,CAAAA,CACrB,IAAK,CAAA,MAAA,CAAO,eACV,CAAA,EAAA,CACAQ,EAAK,MACP,CAAA,EAAA,CAAA,EAER,CAEA,SAAUC,CAAAA,CAAAA,CAAoC,CAC5C,IAAK,CAAA,MAAA,CAAOA,CAAM,CAAI,CAAA,IAAA,CACtB,KAAK,MAAO,CAAA,SAAA,CAAU,IAAIA,CAAM,CAAA,CAE5BA,IAAW,iBACb,GAAA,IAAA,CAAK,MAAM,WAAc,CAAA,EAAA,EAE7B,CAEA,WAAYA,CAAAA,CAAAA,CAAoC,CAC9C,IAAK,CAAA,MAAA,CAAOA,CAAM,CAAI,CAAA,KAAA,CACtB,KAAK,MAAO,CAAA,SAAA,CAAU,OAAOA,CAAM,CAAA,CAE/BA,IAAW,iBACb,GAAA,IAAA,CAAK,MAAM,WAAc,CAAA,IAAA,CAAK,OAAO,KAAQ,CAAA,IAAA,CAAK,OAAO,IAAK,CAAA,MAAA,CAAS,IAE3E,CAEA,OAAA,EAAU,CACR,IAAK,CAAA,IAAA,EAAM,SACb,CACF,EAjUapB,CACJ,CAAA,sBAAA,CAAsD,CAE3D,IAAM,CAAA,EAAA,CACN,KAAM,EACN,CAAA,SAAA,CAAW,GACX,QAAU,CAAA,CAAA,CACV,UAAW,CACX,CAAA,MAAA,CAAQ,OACR,OAAS,CAAA,qBAAA,CACT,KAAM,gBAGN,CAAA,UAAA,CAAY,QACZ,KAAO,CAAA,OAAA,CACP,YAAa,CACb,CAAA,WAAA,CAAa,QACb,YAAc,CAAA,GAAA,CACd,UAAW,kCAGX,CAAA,cAAA,CAAgB,EAChB,CAAA,eAAA,CAAiB,EACjB,CAAA,eAAA,CAAiB,GACjB,gBAAkB,CAAA,EAAA,CAGlB,wBAAyB,EACzB,CAAA,wBAAA,CAA0B,GAC1B,wBAA0B,CAAA,EAAA,CAC1B,0BAA2B,EAC3B,CAAA,sBAAA,CAAwB,GACxB,oBAAsB,CAAA,EACxB,EAjCWA,CAmCJ,CAAA,qBAAA,CAAqD,CAC1D,GAAGA,CAAAA,CAAa,uBAGhB,UAAY,CAAA,OAAA,CACZ,MAAO,OACP,CAAA,WAAA,CAAa,QAGb,cAAgB,CAAA,EAAA,CAChB,gBAAiB,EACjB,CAAA,eAAA,CAAiB,GACjB,gBAAkB,CAAA,EAAA,CAGlB,wBAAyB,EACzB,CAAA,wBAAA,CAA0B,GAC1B,wBAA0B,CAAA,EAAA,CAC1B,0BAA2B,EAC3B,CAAA,sBAAA,CAAwB,EACxB,CAAA,oBAAA,CAAsB,EACxB,CAAA,CAxDWA,EA0DJ,cAAiB,CAAA,CACtB,OAAQ,QAAS,CAAA,IAAA,CACjB,GAAI,0BACJ,CAAA,KAAA,CAAO,SACP,OAAS,CAAA,CACP,MAAOA,CAAa,CAAA,sBAAA,CACpB,KAAMA,CAAa,CAAA,qBACrB,EACA,YAAc,CAAA,EAAA,CACd,SAAU,cACV,CAAA,UAAA,CAAY,UACZ,WAAa,CAAA,EAAA,CACb,MAAO,IACP,CAAA,OAAA,CAAS,CACP,SAAW,CAAA,OAAA,CACX,SAAU,MACZ,CAAA,CACA,cAAe,SACf,CAAA,IAAA,CAAM,CACJ,MAAQ,CAAA,SAAA,CACR,eAAgB,iBAClB,CACF,CAhFK,CAAA,IAAMqB,CAANrB,CAAAA","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"]}
+1
-1
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-CIHHwk0q.cjs';
import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-DZt7tGOM.cjs';

@@ -3,0 +3,0 @@ declare class WanderButton {

+1
-1
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-CIHHwk0q.js';
import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-DZt7tGOM.js';

@@ -3,0 +3,0 @@ declare class WanderButton {

+46
-327
sdk-dist/components/button/wander-button.component.global.js

@@ -1,21 +0,7 @@

(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,
customStyles,
cssVariableKeys = []
}) => `
(function(exports){'use strict';function f(r){return !!(r&&typeof r=="object"&&("light"in r||"dark"in r))}var h=({wanderLogo:r,customStyles:e,cssVariableKeys:n=[]})=>`
<style>
:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${n.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -25,5 +11,4 @@

:root[data-theme="system"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${n.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -33,2 +18,3 @@ }

.button {
position: relative;
display: flex;

@@ -40,17 +26,34 @@ align-items: center;

cursor: pointer;
transition: transform linear 50ms;
min-width: var(--minWidth);
min-height: var(--minHeight);
z-index: var(--zIndex);
z-index: 0;
padding: var(--padding);
font: var(--font);
color: var(--color);
background: transparent;
border: none;
border-radius: var(--borderRadius);
}
.button::before {
content: "";
position: absolute;
inset: 0;
background: var(--background);
color: var(--color);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
z-index: -1;
transition: transform linear 50ms;
}
.button::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--borderRadius);
border-bottom-right-radius: 0;
z-index: -1;
}
.button:hover .wanderLogo {

@@ -60,3 +63,3 @@ animation: sail 3s infinite;

.button:active {
.button:active::before {
transform: scale(0.95);

@@ -68,2 +71,3 @@ }

aspect-ratio: 1;
transition: transform linear 50ms;
}

@@ -79,2 +83,11 @@

.balance {
filter: blur(0px);
transition: filter linear 300ms;
}
.balance.isHidden {
filter: blur(6px);
}
.indicator,

@@ -89,2 +102,3 @@ .dappLogo,

transition: transform linear 150ms, background linear 150ms;
pointer-events: none;
}

@@ -124,3 +138,3 @@

.isConnected + .indicator {
background: green;
background: #56C980;
}

@@ -148,3 +162,3 @@

${customStyles}
${e}
</style>

@@ -156,3 +170,3 @@

class="wanderLogo"
${wanderLogo === "none" ? "hidden" : ""}
${r==="none"?"hidden":""}
viewBox="0 0 257 121"

@@ -163,9 +177,9 @@ fill="none"

<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient1)"}"
fill="${r==="text-color"?"currentColor":"url(#gradient1)"}"
fill-rule="evenodd"
clip-rule="evenodd" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient2)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient2)"}" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient3)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient3)"}" />

@@ -215,298 +229,3 @@ <defs>

<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
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/components/button/wander-button.component.ts
var _WanderButton = class _WanderButton {
constructor(options = {}) {
// State:
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
);
}
}
this.config = {
parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,
id: options.id || _WanderButton.DEFAULT_CONFIG.id,
theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,
cssVars: {
light: cssVarsLight,
dark: cssVarsDark
},
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,
balance: options.balance === false ? false : {
balanceOf: (options.balance === true ? null : options.balance?.balanceOf) ?? _WanderButton.DEFAULT_CONFIG.balance.balanceOf,
currency: (options.balance === true ? null : options.balance?.currency) ?? _WanderButton.DEFAULT_CONFIG.balance.currency
},
notifications: options.notifications || _WanderButton.DEFAULT_CONFIG.notifications,
i18n: options.i18n || _WanderButton.DEFAULT_CONFIG.i18n
};
const elements = _WanderButton.initializeButton(this.config);
this.parent = this.config.parent;
this.host = elements.host;
this.button = elements.button;
this.wanderLogo = elements.wanderLogo;
this.label = elements.label;
this.balance = elements.balance;
this.indicator = elements.indicator;
this.dappLogo = elements.dappLogo;
this.notifications = elements.notifications;
}
static initializeButton(config) {
const host = document.createElement("div");
host.id = config.id;
host.setAttribute("data-theme", config.theme);
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
template.innerHTML = getWanderButtonTemplateContent({
wanderLogo: config.wanderLogo,
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(_WanderButton.DEFAULT_LIGHT_CSS_VARS)
});
shadow.appendChild(template.content);
const button = shadow.querySelector(".button");
const wanderLogo = shadow.querySelector(".wanderLogo");
const label = shadow.querySelector(".label");
const balance = shadow.querySelector(".balance");
const indicator = shadow.querySelector(".indicator");
const dappLogo = shadow.querySelector(".dappLogo");
const notifications = shadow.querySelector(
".notifications"
);
if (!button || !wanderLogo || !label || !balance || !indicator || !dappLogo || !notifications)
throw new Error("Missing elements");
host.style.position = "fixed";
if (config.position !== "static") {
const [y, x] = config.position.split("-");
host.style[y] = "var(--gapY)";
host.style[x] = "var(--gapX)";
}
host.style.transition = "opacity linear 150ms";
host.style.opacity = "0";
setTimeout(() => {
host.style.opacity = "1";
});
addCSSVariables(host, config.cssVars.light);
addCSSVariables(host, config.cssVars.dark, "Dark");
label.textContent = config.i18n.signIn;
if (config.balance === false) {
balance.setAttribute("hidden", "true");
}
dappLogo.src = config.dappLogoSrc;
return {
host,
button,
wanderLogo,
label,
balance,
indicator,
dappLogo,
notifications
};
}
getElements() {
return {
parent: this.parent,
host: this.host,
button: this.button,
wanderLogo: this.wanderLogo,
label: this.label,
balance: this.balance,
indicator: this.indicator,
dappLogo: this.dappLogo,
notifications: this.notifications
};
}
setBalance(balanceInfo) {
const formattedBalance = new Intl.NumberFormat(void 0, {
currency: balanceInfo.currency
}).format(balanceInfo.amount);
this.balance.textContent = `${formattedBalance}`;
}
setNotifications(pendingRequests) {
const { label, notifications, i18n } = this.config;
if (notifications === "off") return;
if (pendingRequests > 0) {
this.notifications.textContent = notifications === "counter" ? `${pendingRequests}` : "!";
this.label.textContent = label ? i18n.reviewRequests : "";
} else {
this.notifications.textContent = "";
this.label.textContent = label ? this.status.isAuthenticated ? "" : i18n.signIn : "";
}
}
setStatus(status) {
this.status[status] = true;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = "";
}
}
unsetStatus(status) {
this.status[status] = false;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = this.config.label ? this.config.i18n.signIn : "";
}
}
destroy() {
this.host?.remove();
}
};
_WanderButton.DEFAULT_LIGHT_CSS_VARS = {
// Button (button):
gapX: 16,
gapY: 16,
gapInside: 12,
minWidth: 0,
minHeight: 0,
zIndex: "9999",
padding: "12px 20px 12px 16px",
font: "16px monospace",
// Button (button, affected by :hover & :focus):
background: "white",
color: "black",
borderWidth: 2,
borderColor: "white",
borderRadius: 128,
boxShadow: "0 0 32px 0px rgba(0, 0, 0, 0.25)",
// Logo (img / svg):
logoBackground: "",
logoBorderWidth: "",
logoBorderColor: "",
logoBorderRadius: "",
// Notifications (span):
notificationsBackground: "",
notificationsBorderWidth: "",
notificationsBorderColor: "",
notificationsBorderRadius: "",
notificationsBoxShadow: "",
notificationsPadding: ""
};
_WanderButton.DEFAULT_DARK_CSS_VARS = {
..._WanderButton.DEFAULT_LIGHT_CSS_VARS,
// Button (button, affected by :hover & :focus):
background: "black",
color: "white",
borderColor: "black",
// Logo (img / svg):
logoBackground: "",
logoBorderWidth: "",
logoBorderColor: "",
logoBorderRadius: "",
// Notifications (span):
notificationsBackground: "",
notificationsBorderWidth: "",
notificationsBorderColor: "",
notificationsBorderRadius: "",
notificationsBoxShadow: "",
notificationsPadding: ""
};
_WanderButton.DEFAULT_CONFIG = {
parent: document.body,
id: "wanderEmbeddedButtonHost",
theme: "system",
cssVars: {
light: _WanderButton.DEFAULT_LIGHT_CSS_VARS,
dark: _WanderButton.DEFAULT_DARK_CSS_VARS
},
customStyles: "",
position: "bottom-right",
wanderLogo: "default",
dappLogoSrc: "",
label: true,
balance: {
balanceOf: "total",
currency: "auto"
},
notifications: "counter",
i18n: {
signIn: "Sign in",
reviewRequests: "Review requests"
}
};
var WanderButton = _WanderButton;
exports.WanderButton = WanderButton;
return exports;
})({});
//# sourceMappingURL=wander-button.component.global.js.map
`;function p(r,e,n=""){for(let t in e){let a=e[t];typeof a=="string"?r.style.setProperty(`--${t}`,a):typeof a=="number"&&r.style.setProperty(`--${t}${n}`,`${a}px`);}}var L=r=>{if(typeof r=="object"&&r!==null){if(typeof Object.getPrototypeOf=="function"){let e=Object.getPrototypeOf(r);return e===Object.prototype||e===null}return Object.prototype.toString.call(r)==="[object Object]"}return false},i=(...r)=>r.reduce((e,n)=>{if(Array.isArray(n))throw new TypeError("Arguments provided to ts-deepmerge must be objects, not arrays.");return Object.keys(n).forEach(t=>{["__proto__","constructor","prototype"].includes(t)||(Array.isArray(e[t])&&Array.isArray(n[t])?e[t]=i.options.mergeArrays?i.options.uniqueArrayItems?Array.from(new Set(e[t].concat(n[t]))):[...e[t],...n[t]]:n[t]:L(e[t])&&L(n[t])?e[t]=i(e[t],n[t]):e[t]=n[t]===void 0?i.options.allowUndefinedOverrides?n[t]:e[t]:n[t]);}),e},{}),u={allowUndefinedOverrides:true,mergeArrays:true,uniqueArrayItems:true};i.options=u;i.withOptions=(r,...e)=>{i.options=Object.assign(Object.assign({},u),r);let n=i(...e);return i.options=u,n};var o=class o{constructor(e={}){this.status={};let n=e.cssVars||{},t=o.DEFAULT_LIGHT_CSS_VARS,a=o.DEFAULT_DARK_CSS_VARS;Object.keys(n).length>0&&(f(n)?(t=i(n?.light||{},o.DEFAULT_LIGHT_CSS_VARS),a=i(n?.dark||{},o.DEFAULT_DARK_CSS_VARS)):e.theme!=="dark"?t=i(n||{},o.DEFAULT_LIGHT_CSS_VARS):a=i(n||{},o.DEFAULT_DARK_CSS_VARS)),this.config={parent:e.parent||o.DEFAULT_CONFIG.parent,id:e.id||o.DEFAULT_CONFIG.id,theme:e.theme||o.DEFAULT_CONFIG.theme,cssVars:{light:t,dark:a},customStyles:e.customStyles||o.DEFAULT_CONFIG.customStyles,position:e.position||o.DEFAULT_CONFIG.position,wanderLogo:e.wanderLogo||o.DEFAULT_CONFIG.wanderLogo,dappLogoSrc:e.dappLogoSrc||o.DEFAULT_CONFIG.dappLogoSrc,label:e.label??o.DEFAULT_CONFIG.label,balance:e.balance===false?false:{balanceOf:(e.balance===true?null:e.balance?.balanceOf)??o.DEFAULT_CONFIG.balance.balanceOf,currency:(e.balance===true?null:e.balance?.currency)??o.DEFAULT_CONFIG.balance.currency},notifications:e.notifications||o.DEFAULT_CONFIG.notifications,i18n:e.i18n||o.DEFAULT_CONFIG.i18n};let d=o.initializeButton(this.config);this.parent=this.config.parent,this.host=d.host,this.button=d.button,this.wanderLogo=d.wanderLogo,this.label=d.label,this.balance=d.balance,this.indicator=d.indicator,this.dappLogo=d.dappLogo,this.notifications=d.notifications;}static initializeButton(e){let n=document.createElement("div");n.id=e.id,n.setAttribute("data-theme",e.theme);let t=n.attachShadow({mode:"open"}),a=document.createElement("template");a.innerHTML=h({wanderLogo:e.wanderLogo,customStyles:e.customStyles,cssVariableKeys:Object.keys(o.DEFAULT_LIGHT_CSS_VARS)}),t.appendChild(a.content);let d=t.querySelector(".button"),b=t.querySelector(".wanderLogo"),s=t.querySelector(".label"),l=t.querySelector(".balance"),m=t.querySelector(".indicator"),c=t.querySelector(".dappLogo"),g=t.querySelector(".notifications");if(!d||!b||!s||!l||!m||!c||!g)throw new Error("Missing elements");if(n.style.position="fixed",n.style.zIndex="var(--zIndex)",e.position!=="static"){let[x,y]=e.position.split("-");n.style[x]="var(--gapY)",n.style[y]="var(--gapX)";}return n.style.transition="opacity linear 150ms",n.style.opacity="0",setTimeout(()=>{n.style.opacity="1";}),p(n,e.cssVars.light),p(n,e.cssVars.dark,"Dark"),s.textContent=e.i18n.signIn,e.balance===false&&l.setAttribute("hidden","true"),c.src=e.dappLogoSrc,{host:n,button:d,wanderLogo:b,label:s,balance:l,indicator:m,dappLogo:c,notifications:g}}getElements(){return {parent:this.parent,host:this.host,button:this.button,wanderLogo:this.wanderLogo,label:this.label,balance:this.balance,indicator:this.indicator,dappLogo:this.dappLogo,notifications:this.notifications}}setBalance(e){e.amount===null?this.balance.classList.add("isHidden"):this.balance.classList.remove("isHidden"),this.balance.textContent=e.formattedBalance;}setNotifications(e){let{label:n,notifications:t,i18n:a}=this.config;t!=="off"&&(e>0?(this.notifications.textContent=t==="counter"?`${e}`:"!",this.label.textContent=n?a.reviewRequests:""):(this.notifications.textContent="",this.label.textContent=n?this.status.isAuthenticated?"":a.signIn:""));}setStatus(e){this.status[e]=true,this.button.classList.add(e),e==="isAuthenticated"&&(this.label.textContent="");}unsetStatus(e){this.status[e]=false,this.button.classList.remove(e),e==="isAuthenticated"&&(this.label.textContent=this.config.label?this.config.i18n.signIn:"");}destroy(){this.host?.remove();}};o.DEFAULT_LIGHT_CSS_VARS={gapX:16,gapY:16,gapInside:12,minWidth:0,minHeight:0,zIndex:"9999",padding:"12px 20px 12px 16px",font:"16px monospace",background:"white",color:"black",borderWidth:2,borderColor:"white",borderRadius:128,boxShadow:"0 0 32px 0px rgba(0, 0, 0, 0.25)",logoBackground:"",logoBorderWidth:"",logoBorderColor:"",logoBorderRadius:"",notificationsBackground:"",notificationsBorderWidth:"",notificationsBorderColor:"",notificationsBorderRadius:"",notificationsBoxShadow:"",notificationsPadding:""},o.DEFAULT_DARK_CSS_VARS={...o.DEFAULT_LIGHT_CSS_VARS,background:"black",color:"white",borderColor:"black",logoBackground:"",logoBorderWidth:"",logoBorderColor:"",logoBorderRadius:"",notificationsBackground:"",notificationsBorderWidth:"",notificationsBorderColor:"",notificationsBorderRadius:"",notificationsBoxShadow:"",notificationsPadding:""},o.DEFAULT_CONFIG={parent:document.body,id:"wanderEmbeddedButtonHost",theme:"system",cssVars:{light:o.DEFAULT_LIGHT_CSS_VARS,dark:o.DEFAULT_DARK_CSS_VARS},customStyles:"",position:"bottom-right",wanderLogo:"default",dappLogoSrc:"",label:true,balance:{balanceOf:"total",currency:"auto"},notifications:"counter",i18n:{signIn:"Sign in",reviewRequests:"Review requests"}};var S=o;exports.WanderButton=S;return exports;})({});//# sourceMappingURL=wander-button.component.global.js.map
//# sourceMappingURL=wander-button.component.global.js.map
+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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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 display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n transition: transform linear 50ms;\n\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: var(--zIndex);\n padding: var(--padding);\n font: var(--font);\n\n background: var(--background);\n color: var(--color);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\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 }\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: green;\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 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 const formattedBalance = new Intl.NumberFormat(undefined, {\n currency: balanceInfo.currency\n }).format(balanceInfo.amount);\n\n this.balance.textContent = `${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.add(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/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":["isThemeRecord","cssVars","getWanderButtonTemplateContent","wanderLogo","customStyles","cssVariableKeys","cssVariableKey","addCSSVariables","element","vars","suffix","key","value","isObject","obj","prototype","merge","objects","result","current","defaultOptions","options","_WanderButton","cssVarsLight","cssVarsDark","elements","config","host","shadow","template","button","label","balance","indicator","dappLogo","notifications","y","x","balanceInfo","pendingRequests","i18n","status","WanderButton"],"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"]}
+46
-278
sdk-dist/components/button/wander-button.component.js

@@ -1,20 +0,7 @@

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,
customStyles,
cssVariableKeys = []
}) => `
import {merge}from'ts-deepmerge';function h(r){return !!(r&&typeof r=="object"&&("light"in r||"dark"in r))}var L=({wanderLogo:r,customStyles:e,cssVariableKeys:t=[]})=>`
<style>
:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${t.map(o=>`--${o}: var(--${o}Dark);`).join(`
`)}
}

@@ -24,5 +11,4 @@

:root[data-theme="system"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${t.map(o=>`--${o}: var(--${o}Dark);`).join(`
`)}
}

@@ -32,2 +18,3 @@ }

.button {
position: relative;
display: flex;

@@ -39,17 +26,34 @@ align-items: center;

cursor: pointer;
transition: transform linear 50ms;
min-width: var(--minWidth);
min-height: var(--minHeight);
z-index: var(--zIndex);
z-index: 0;
padding: var(--padding);
font: var(--font);
color: var(--color);
background: transparent;
border: none;
border-radius: var(--borderRadius);
}
.button::before {
content: "";
position: absolute;
inset: 0;
background: var(--background);
color: var(--color);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
z-index: -1;
transition: transform linear 50ms;
}
.button::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--borderRadius);
border-bottom-right-radius: 0;
z-index: -1;
}
.button:hover .wanderLogo {

@@ -59,3 +63,3 @@ animation: sail 3s infinite;

.button:active {
.button:active::before {
transform: scale(0.95);

@@ -67,2 +71,3 @@ }

aspect-ratio: 1;
transition: transform linear 50ms;
}

@@ -78,2 +83,11 @@

.balance {
filter: blur(0px);
transition: filter linear 300ms;
}
.balance.isHidden {
filter: blur(6px);
}
.indicator,

@@ -88,2 +102,3 @@ .dappLogo,

transition: transform linear 150ms, background linear 150ms;
pointer-events: none;
}

@@ -123,3 +138,3 @@

.isConnected + .indicator {
background: green;
background: #56C980;
}

@@ -147,3 +162,3 @@

${customStyles}
${e}
</style>

@@ -155,3 +170,3 @@

class="wanderLogo"
${wanderLogo === "none" ? "hidden" : ""}
${r==="none"?"hidden":""}
viewBox="0 0 257 121"

@@ -162,9 +177,9 @@ fill="none"

<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient1)"}"
fill="${r==="text-color"?"currentColor":"url(#gradient1)"}"
fill-rule="evenodd"
clip-rule="evenodd" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient2)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient2)"}" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient3)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient3)"}" />

@@ -214,250 +229,3 @@ <defs>

<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`);
}
}
var _WanderButton = class _WanderButton {
constructor(options = {}) {
// State:
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
);
}
}
this.config = {
parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,
id: options.id || _WanderButton.DEFAULT_CONFIG.id,
theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,
cssVars: {
light: cssVarsLight,
dark: cssVarsDark
},
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,
balance: options.balance === false ? false : {
balanceOf: (options.balance === true ? null : options.balance?.balanceOf) ?? _WanderButton.DEFAULT_CONFIG.balance.balanceOf,
currency: (options.balance === true ? null : options.balance?.currency) ?? _WanderButton.DEFAULT_CONFIG.balance.currency
},
notifications: options.notifications || _WanderButton.DEFAULT_CONFIG.notifications,
i18n: options.i18n || _WanderButton.DEFAULT_CONFIG.i18n
};
const elements = _WanderButton.initializeButton(this.config);
this.parent = this.config.parent;
this.host = elements.host;
this.button = elements.button;
this.wanderLogo = elements.wanderLogo;
this.label = elements.label;
this.balance = elements.balance;
this.indicator = elements.indicator;
this.dappLogo = elements.dappLogo;
this.notifications = elements.notifications;
}
static initializeButton(config) {
const host = document.createElement("div");
host.id = config.id;
host.setAttribute("data-theme", config.theme);
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
template.innerHTML = getWanderButtonTemplateContent({
wanderLogo: config.wanderLogo,
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(_WanderButton.DEFAULT_LIGHT_CSS_VARS)
});
shadow.appendChild(template.content);
const button = shadow.querySelector(".button");
const wanderLogo = shadow.querySelector(".wanderLogo");
const label = shadow.querySelector(".label");
const balance = shadow.querySelector(".balance");
const indicator = shadow.querySelector(".indicator");
const dappLogo = shadow.querySelector(".dappLogo");
const notifications = shadow.querySelector(
".notifications"
);
if (!button || !wanderLogo || !label || !balance || !indicator || !dappLogo || !notifications)
throw new Error("Missing elements");
host.style.position = "fixed";
if (config.position !== "static") {
const [y, x] = config.position.split("-");
host.style[y] = "var(--gapY)";
host.style[x] = "var(--gapX)";
}
host.style.transition = "opacity linear 150ms";
host.style.opacity = "0";
setTimeout(() => {
host.style.opacity = "1";
});
addCSSVariables(host, config.cssVars.light);
addCSSVariables(host, config.cssVars.dark, "Dark");
label.textContent = config.i18n.signIn;
if (config.balance === false) {
balance.setAttribute("hidden", "true");
}
dappLogo.src = config.dappLogoSrc;
return {
host,
button,
wanderLogo,
label,
balance,
indicator,
dappLogo,
notifications
};
}
getElements() {
return {
parent: this.parent,
host: this.host,
button: this.button,
wanderLogo: this.wanderLogo,
label: this.label,
balance: this.balance,
indicator: this.indicator,
dappLogo: this.dappLogo,
notifications: this.notifications
};
}
setBalance(balanceInfo) {
const formattedBalance = new Intl.NumberFormat(void 0, {
currency: balanceInfo.currency
}).format(balanceInfo.amount);
this.balance.textContent = `${formattedBalance}`;
}
setNotifications(pendingRequests) {
const { label, notifications, i18n } = this.config;
if (notifications === "off") return;
if (pendingRequests > 0) {
this.notifications.textContent = notifications === "counter" ? `${pendingRequests}` : "!";
this.label.textContent = label ? i18n.reviewRequests : "";
} else {
this.notifications.textContent = "";
this.label.textContent = label ? this.status.isAuthenticated ? "" : i18n.signIn : "";
}
}
setStatus(status) {
this.status[status] = true;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = "";
}
}
unsetStatus(status) {
this.status[status] = false;
this.button.classList.add(status);
if (status === "isAuthenticated") {
this.label.textContent = this.config.label ? this.config.i18n.signIn : "";
}
}
destroy() {
this.host?.remove();
}
};
_WanderButton.DEFAULT_LIGHT_CSS_VARS = {
// Button (button):
gapX: 16,
gapY: 16,
gapInside: 12,
minWidth: 0,
minHeight: 0,
zIndex: "9999",
padding: "12px 20px 12px 16px",
font: "16px monospace",
// Button (button, affected by :hover & :focus):
background: "white",
color: "black",
borderWidth: 2,
borderColor: "white",
borderRadius: 128,
boxShadow: "0 0 32px 0px rgba(0, 0, 0, 0.25)",
// Logo (img / svg):
logoBackground: "",
logoBorderWidth: "",
logoBorderColor: "",
logoBorderRadius: "",
// Notifications (span):
notificationsBackground: "",
notificationsBorderWidth: "",
notificationsBorderColor: "",
notificationsBorderRadius: "",
notificationsBoxShadow: "",
notificationsPadding: ""
};
_WanderButton.DEFAULT_DARK_CSS_VARS = {
..._WanderButton.DEFAULT_LIGHT_CSS_VARS,
// Button (button, affected by :hover & :focus):
background: "black",
color: "white",
borderColor: "black",
// Logo (img / svg):
logoBackground: "",
logoBorderWidth: "",
logoBorderColor: "",
logoBorderRadius: "",
// Notifications (span):
notificationsBackground: "",
notificationsBorderWidth: "",
notificationsBorderColor: "",
notificationsBorderRadius: "",
notificationsBoxShadow: "",
notificationsPadding: ""
};
_WanderButton.DEFAULT_CONFIG = {
parent: document.body,
id: "wanderEmbeddedButtonHost",
theme: "system",
cssVars: {
light: _WanderButton.DEFAULT_LIGHT_CSS_VARS,
dark: _WanderButton.DEFAULT_DARK_CSS_VARS
},
customStyles: "",
position: "bottom-right",
wanderLogo: "default",
dappLogoSrc: "",
label: true,
balance: {
balanceOf: "total",
currency: "auto"
},
notifications: "counter",
i18n: {
signIn: "Sign in",
reviewRequests: "Review requests"
}
};
var WanderButton = _WanderButton;
export { WanderButton };
//# sourceMappingURL=wander-button.component.js.map
`;function b(r,e,t=""){for(let o in e){let a=e[o];typeof a=="string"?r.style.setProperty(`--${o}`,a):typeof a=="number"&&r.style.setProperty(`--${o}${t}`,`${a}px`);}}var n=class n{constructor(e={}){this.status={};let t=e.cssVars||{},o=n.DEFAULT_LIGHT_CSS_VARS,a=n.DEFAULT_DARK_CSS_VARS;Object.keys(t).length>0&&(h(t)?(o=merge(t?.light||{},n.DEFAULT_LIGHT_CSS_VARS),a=merge(t?.dark||{},n.DEFAULT_DARK_CSS_VARS)):e.theme!=="dark"?o=merge(t||{},n.DEFAULT_LIGHT_CSS_VARS):a=merge(t||{},n.DEFAULT_DARK_CSS_VARS)),this.config={parent:e.parent||n.DEFAULT_CONFIG.parent,id:e.id||n.DEFAULT_CONFIG.id,theme:e.theme||n.DEFAULT_CONFIG.theme,cssVars:{light:o,dark:a},customStyles:e.customStyles||n.DEFAULT_CONFIG.customStyles,position:e.position||n.DEFAULT_CONFIG.position,wanderLogo:e.wanderLogo||n.DEFAULT_CONFIG.wanderLogo,dappLogoSrc:e.dappLogoSrc||n.DEFAULT_CONFIG.dappLogoSrc,label:e.label??n.DEFAULT_CONFIG.label,balance:e.balance===false?false:{balanceOf:(e.balance===true?null:e.balance?.balanceOf)??n.DEFAULT_CONFIG.balance.balanceOf,currency:(e.balance===true?null:e.balance?.currency)??n.DEFAULT_CONFIG.balance.currency},notifications:e.notifications||n.DEFAULT_CONFIG.notifications,i18n:e.i18n||n.DEFAULT_CONFIG.i18n};let i=n.initializeButton(this.config);this.parent=this.config.parent,this.host=i.host,this.button=i.button,this.wanderLogo=i.wanderLogo,this.label=i.label,this.balance=i.balance,this.indicator=i.indicator,this.dappLogo=i.dappLogo,this.notifications=i.notifications;}static initializeButton(e){let t=document.createElement("div");t.id=e.id,t.setAttribute("data-theme",e.theme);let o=t.attachShadow({mode:"open"}),a=document.createElement("template");a.innerHTML=L({wanderLogo:e.wanderLogo,customStyles:e.customStyles,cssVariableKeys:Object.keys(n.DEFAULT_LIGHT_CSS_VARS)}),o.appendChild(a.content);let i=o.querySelector(".button"),m=o.querySelector(".wanderLogo"),s=o.querySelector(".label"),l=o.querySelector(".balance"),g=o.querySelector(".indicator"),c=o.querySelector(".dappLogo"),f=o.querySelector(".notifications");if(!i||!m||!s||!l||!g||!c||!f)throw new Error("Missing elements");if(t.style.position="fixed",t.style.zIndex="var(--zIndex)",e.position!=="static"){let[x,C]=e.position.split("-");t.style[x]="var(--gapY)",t.style[C]="var(--gapX)";}return t.style.transition="opacity linear 150ms",t.style.opacity="0",setTimeout(()=>{t.style.opacity="1";}),b(t,e.cssVars.light),b(t,e.cssVars.dark,"Dark"),s.textContent=e.i18n.signIn,e.balance===false&&l.setAttribute("hidden","true"),c.src=e.dappLogoSrc,{host:t,button:i,wanderLogo:m,label:s,balance:l,indicator:g,dappLogo:c,notifications:f}}getElements(){return {parent:this.parent,host:this.host,button:this.button,wanderLogo:this.wanderLogo,label:this.label,balance:this.balance,indicator:this.indicator,dappLogo:this.dappLogo,notifications:this.notifications}}setBalance(e){e.amount===null?this.balance.classList.add("isHidden"):this.balance.classList.remove("isHidden"),this.balance.textContent=e.formattedBalance;}setNotifications(e){let{label:t,notifications:o,i18n:a}=this.config;o!=="off"&&(e>0?(this.notifications.textContent=o==="counter"?`${e}`:"!",this.label.textContent=t?a.reviewRequests:""):(this.notifications.textContent="",this.label.textContent=t?this.status.isAuthenticated?"":a.signIn:""));}setStatus(e){this.status[e]=true,this.button.classList.add(e),e==="isAuthenticated"&&(this.label.textContent="");}unsetStatus(e){this.status[e]=false,this.button.classList.remove(e),e==="isAuthenticated"&&(this.label.textContent=this.config.label?this.config.i18n.signIn:"");}destroy(){this.host?.remove();}};n.DEFAULT_LIGHT_CSS_VARS={gapX:16,gapY:16,gapInside:12,minWidth:0,minHeight:0,zIndex:"9999",padding:"12px 20px 12px 16px",font:"16px monospace",background:"white",color:"black",borderWidth:2,borderColor:"white",borderRadius:128,boxShadow:"0 0 32px 0px rgba(0, 0, 0, 0.25)",logoBackground:"",logoBorderWidth:"",logoBorderColor:"",logoBorderRadius:"",notificationsBackground:"",notificationsBorderWidth:"",notificationsBorderColor:"",notificationsBorderRadius:"",notificationsBoxShadow:"",notificationsPadding:""},n.DEFAULT_DARK_CSS_VARS={...n.DEFAULT_LIGHT_CSS_VARS,background:"black",color:"white",borderColor:"black",logoBackground:"",logoBorderWidth:"",logoBorderColor:"",logoBorderRadius:"",notificationsBackground:"",notificationsBorderWidth:"",notificationsBorderColor:"",notificationsBorderRadius:"",notificationsBoxShadow:"",notificationsPadding:""},n.DEFAULT_CONFIG={parent:document.body,id:"wanderEmbeddedButtonHost",theme:"system",cssVars:{light:n.DEFAULT_LIGHT_CSS_VARS,dark:n.DEFAULT_DARK_CSS_VARS},customStyles:"",position:"bottom-right",wanderLogo:"default",dappLogoSrc:"",label:true,balance:{balanceOf:"total",currency:"auto"},notifications:"counter",i18n:{signIn:"Sign in",reviewRequests:"Review requests"}};var S=n;export{S as WanderButton};//# sourceMappingURL=wander-button.component.js.map
//# sourceMappingURL=wander-button.component.js.map
+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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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 display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n transition: transform linear 50ms;\n\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: var(--zIndex);\n padding: var(--padding);\n font: var(--font);\n\n background: var(--background);\n color: var(--color);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\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 }\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: green;\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 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 const formattedBalance = new Intl.NumberFormat(undefined, {\n currency: balanceInfo.currency\n }).format(balanceInfo.amount);\n\n this.balance.textContent = `${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.add(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/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":["isThemeRecord","cssVars","getWanderButtonTemplateContent","wanderLogo","customStyles","cssVariableKeys","cssVariableKey","addCSSVariables","element","vars","suffix","key","value","_WanderButton","options","cssVarsLight","cssVarsDark","merge","elements","config","host","shadow","template","button","label","balance","indicator","dappLogo","notifications","y","x","balanceInfo","pendingRequests","i18n","status","WanderButton"],"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"]}
+46
-29
sdk-dist/components/button/wander-button.template.cjs

@@ -1,15 +0,7 @@

'use strict';
// src/components/button/wander-button.template.ts
var getWanderButtonTemplateContent = ({
wanderLogo,
customStyles,
cssVariableKeys = []
}) => `
'use strict';var a=({wanderLogo:r,customStyles:n,cssVariableKeys:e=[]})=>`
<style>
:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${e.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -19,5 +11,4 @@

:root[data-theme="system"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${e.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -27,2 +18,3 @@ }

.button {
position: relative;
display: flex;

@@ -34,17 +26,34 @@ align-items: center;

cursor: pointer;
transition: transform linear 50ms;
min-width: var(--minWidth);
min-height: var(--minHeight);
z-index: var(--zIndex);
z-index: 0;
padding: var(--padding);
font: var(--font);
color: var(--color);
background: transparent;
border: none;
border-radius: var(--borderRadius);
}
.button::before {
content: "";
position: absolute;
inset: 0;
background: var(--background);
color: var(--color);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
z-index: -1;
transition: transform linear 50ms;
}
.button::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--borderRadius);
border-bottom-right-radius: 0;
z-index: -1;
}
.button:hover .wanderLogo {

@@ -54,3 +63,3 @@ animation: sail 3s infinite;

.button:active {
.button:active::before {
transform: scale(0.95);

@@ -62,2 +71,3 @@ }

aspect-ratio: 1;
transition: transform linear 50ms;
}

@@ -73,2 +83,11 @@

.balance {
filter: blur(0px);
transition: filter linear 300ms;
}
.balance.isHidden {
filter: blur(6px);
}
.indicator,

@@ -83,2 +102,3 @@ .dappLogo,

transition: transform linear 150ms, background linear 150ms;
pointer-events: none;
}

@@ -118,3 +138,3 @@

.isConnected + .indicator {
background: green;
background: #56C980;
}

@@ -142,3 +162,3 @@

${customStyles}
${n}
</style>

@@ -150,3 +170,3 @@

class="wanderLogo"
${wanderLogo === "none" ? "hidden" : ""}
${r==="none"?"hidden":""}
viewBox="0 0 257 121"

@@ -157,9 +177,9 @@ fill="none"

<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient1)"}"
fill="${r==="text-color"?"currentColor":"url(#gradient1)"}"
fill-rule="evenodd"
clip-rule="evenodd" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient2)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient2)"}" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient3)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient3)"}" />

@@ -209,6 +229,3 @@ <defs>

<span class="notifications"></span>
`;
exports.getWanderButtonTemplateContent = getWanderButtonTemplateContent;
//# sourceMappingURL=wander-button.template.cjs.map
`;exports.getWanderButtonTemplateContent=a;//# sourceMappingURL=wander-button.template.cjs.map
//# sourceMappingURL=wander-button.template.cjs.map
+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,EAAA,EAiHf,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 display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n transition: transform linear 50ms;\n\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: var(--zIndex);\n padding: var(--padding);\n font: var(--font);\n\n background: var(--background);\n color: var(--color);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\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 }\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: green;\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":["getWanderButtonTemplateContent","wanderLogo","customStyles","cssVariableKeys","cssVariableKey"],"mappings":"aAUaA,IAAAA,CAAAA,CAAiC,CAAC,CAC7C,UAAAC,CAAAA,CAAAA,CACA,YAAAC,CAAAA,CAAAA,CACA,eAAAC,CAAAA,CAAAA,CAAkB,EACpB,CAA0C,GAAA;AAAA;;AAAA;AAAA,IAIpCA,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,CAAC;AAAA;;AAAA;AAAA;AAAA,MAKTD,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,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,EA8IfF,CAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOVD,EAAAA,CAAAA,GAAe,MAAS,CAAA,QAAA,CAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7BA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBACjD,CAAA;AAAA;AAAA,YAGEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,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","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"]}
+1
-1
sdk-dist/components/button/wander-button.template.d.cts

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

import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-CIHHwk0q.cjs';
import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-DZt7tGOM.cjs';

@@ -3,0 +3,0 @@ interface WanderButtonTemplateContentOptions {

+1
-1
sdk-dist/components/button/wander-button.template.d.ts

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

import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-CIHHwk0q.js';
import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-DZt7tGOM.js';

@@ -3,0 +3,0 @@ interface WanderButtonTemplateContentOptions {

+46
-34
sdk-dist/components/button/wander-button.template.global.js

@@ -1,16 +0,7 @@

(function (exports) {
'use strict';
// src/components/button/wander-button.template.ts
var getWanderButtonTemplateContent = ({
wanderLogo,
customStyles,
cssVariableKeys = []
}) => `
(function(exports){'use strict';var o=({wanderLogo:r,customStyles:n,cssVariableKeys:e=[]})=>`
<style>
:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${e.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -20,5 +11,4 @@

:root[data-theme="system"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${e.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -28,2 +18,3 @@ }

.button {
position: relative;
display: flex;

@@ -35,17 +26,34 @@ align-items: center;

cursor: pointer;
transition: transform linear 50ms;
min-width: var(--minWidth);
min-height: var(--minHeight);
z-index: var(--zIndex);
z-index: 0;
padding: var(--padding);
font: var(--font);
color: var(--color);
background: transparent;
border: none;
border-radius: var(--borderRadius);
}
.button::before {
content: "";
position: absolute;
inset: 0;
background: var(--background);
color: var(--color);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
z-index: -1;
transition: transform linear 50ms;
}
.button::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--borderRadius);
border-bottom-right-radius: 0;
z-index: -1;
}
.button:hover .wanderLogo {

@@ -55,3 +63,3 @@ animation: sail 3s infinite;

.button:active {
.button:active::before {
transform: scale(0.95);

@@ -63,2 +71,3 @@ }

aspect-ratio: 1;
transition: transform linear 50ms;
}

@@ -74,2 +83,11 @@

.balance {
filter: blur(0px);
transition: filter linear 300ms;
}
.balance.isHidden {
filter: blur(6px);
}
.indicator,

@@ -84,2 +102,3 @@ .dappLogo,

transition: transform linear 150ms, background linear 150ms;
pointer-events: none;
}

@@ -119,3 +138,3 @@

.isConnected + .indicator {
background: green;
background: #56C980;
}

@@ -143,3 +162,3 @@

${customStyles}
${n}
</style>

@@ -151,3 +170,3 @@

class="wanderLogo"
${wanderLogo === "none" ? "hidden" : ""}
${r==="none"?"hidden":""}
viewBox="0 0 257 121"

@@ -158,9 +177,9 @@ fill="none"

<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient1)"}"
fill="${r==="text-color"?"currentColor":"url(#gradient1)"}"
fill-rule="evenodd"
clip-rule="evenodd" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient2)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient2)"}" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient3)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient3)"}" />

@@ -210,10 +229,3 @@ <defs>

<span class="notifications"></span>
`;
exports.getWanderButtonTemplateContent = getWanderButtonTemplateContent;
return exports;
})({});
//# sourceMappingURL=wander-button.template.global.js.map
`;exports.getWanderButtonTemplateContent=o;return exports;})({});//# sourceMappingURL=wander-button.template.global.js.map
//# sourceMappingURL=wander-button.template.global.js.map
+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,EAAA,EAiHf,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 display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n transition: transform linear 50ms;\n\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: var(--zIndex);\n padding: var(--padding);\n font: var(--font);\n\n background: var(--background);\n color: var(--color);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\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 }\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: green;\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":["getWanderButtonTemplateContent","wanderLogo","customStyles","cssVariableKeys","cssVariableKey"],"mappings":"gCAUaA,IAAAA,CAAAA,CAAiC,CAAC,CAC7C,UAAAC,CAAAA,CAAAA,CACA,YAAAC,CAAAA,CAAAA,CACA,eAAAC,CAAAA,CAAAA,CAAkB,EACpB,CAA0C,GAAA;AAAA;;AAAA;AAAA,IAIpCA,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,CAAC;AAAA;;AAAA;AAAA;AAAA,MAKTD,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,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,EA8IfF,CAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOVD,EAAAA,CAAAA,GAAe,MAAS,CAAA,QAAA,CAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7BA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBACjD,CAAA;AAAA;AAAA,YAGEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,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","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"]}
+46
-27
sdk-dist/components/button/wander-button.template.js

@@ -1,13 +0,7 @@

// src/components/button/wander-button.template.ts
var getWanderButtonTemplateContent = ({
wanderLogo,
customStyles,
cssVariableKeys = []
}) => `
var i=({wanderLogo:r,customStyles:n,cssVariableKeys:e=[]})=>`
<style>
:root[data-theme="dark"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${e.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -17,5 +11,4 @@

:root[data-theme="system"] {
${cssVariableKeys.map((cssVariableKey) => {
return `--${cssVariableKey}: var(--${cssVariableKey}Dark);`;
}).join("\n")}
${e.map(t=>`--${t}: var(--${t}Dark);`).join(`
`)}
}

@@ -25,2 +18,3 @@ }

.button {
position: relative;
display: flex;

@@ -32,17 +26,34 @@ align-items: center;

cursor: pointer;
transition: transform linear 50ms;
min-width: var(--minWidth);
min-height: var(--minHeight);
z-index: var(--zIndex);
z-index: 0;
padding: var(--padding);
font: var(--font);
color: var(--color);
background: transparent;
border: none;
border-radius: var(--borderRadius);
}
.button::before {
content: "";
position: absolute;
inset: 0;
background: var(--background);
color: var(--color);
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
z-index: -1;
transition: transform linear 50ms;
}
.button::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--borderRadius);
border-bottom-right-radius: 0;
z-index: -1;
}
.button:hover .wanderLogo {

@@ -52,3 +63,3 @@ animation: sail 3s infinite;

.button:active {
.button:active::before {
transform: scale(0.95);

@@ -60,2 +71,3 @@ }

aspect-ratio: 1;
transition: transform linear 50ms;
}

@@ -71,2 +83,11 @@

.balance {
filter: blur(0px);
transition: filter linear 300ms;
}
.balance.isHidden {
filter: blur(6px);
}
.indicator,

@@ -81,2 +102,3 @@ .dappLogo,

transition: transform linear 150ms, background linear 150ms;
pointer-events: none;
}

@@ -116,3 +138,3 @@

.isConnected + .indicator {
background: green;
background: #56C980;
}

@@ -140,3 +162,3 @@

${customStyles}
${n}
</style>

@@ -148,3 +170,3 @@

class="wanderLogo"
${wanderLogo === "none" ? "hidden" : ""}
${r==="none"?"hidden":""}
viewBox="0 0 257 121"

@@ -155,9 +177,9 @@ fill="none"

<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient1)"}"
fill="${r==="text-color"?"currentColor":"url(#gradient1)"}"
fill-rule="evenodd"
clip-rule="evenodd" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient2)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient2)"}" />
<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"
fill="${wanderLogo === "text-color" ? "currentColor" : "url(#gradient3)"}" />
fill="${r==="text-color"?"currentColor":"url(#gradient3)"}" />

@@ -207,6 +229,3 @@ <defs>

<span class="notifications"></span>
`;
export { getWanderButtonTemplateContent };
//# sourceMappingURL=wander-button.template.js.map
`;export{i as getWanderButtonTemplateContent};//# sourceMappingURL=wander-button.template.js.map
//# sourceMappingURL=wander-button.template.js.map
+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,EAAA,EAiHf,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 display: flex;\n align-items: center;\n gap: var(--gapInside);\n outline: none;\n user-select: none;\n cursor: pointer;\n transition: transform linear 50ms;\n\n min-width: var(--minWidth);\n min-height: var(--minHeight);\n z-index: var(--zIndex);\n padding: var(--padding);\n font: var(--font);\n\n background: var(--background);\n color: var(--color);\n border: var(--borderWidth) solid var(--borderColor);\n border-radius: var(--borderRadius);\n box-shadow: var(--boxShadow);\n }\n\n .button:hover .wanderLogo {\n animation: sail 3s infinite;\n }\n\n .button:active {\n transform: scale(0.95);\n }\n\n .wanderLogo {\n width: 32px;\n aspect-ratio: 1;\n }\n\n .label:empty {\n display: none;\n }\n\n .label:not(:empty) + .balance {\n display: none;\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 }\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: green;\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":["getWanderButtonTemplateContent","wanderLogo","customStyles","cssVariableKeys","cssVariableKey"],"mappings":"AAUaA,IAAAA,CAAAA,CAAiC,CAAC,CAC7C,UAAAC,CAAAA,CAAAA,CACA,YAAAC,CAAAA,CAAAA,CACA,eAAAC,CAAAA,CAAAA,CAAkB,EACpB,CAA0C,GAAA;AAAA;;AAAA;AAAA,IAIpCA,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,CAAC;AAAA;;AAAA;AAAA;AAAA,MAKTD,EAAAA,CAAAA,CACC,IAAKC,CACG,EAAA,CAAA,EAAA,EAAKA,CAAc,CAAWA,QAAAA,EAAAA,CAAc,CACpD,MAAA,CAAA,CAAA,CACA,IAAK,CAAA;AAAA,CAAI,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,EA8IfF,CAAY;AAAA;;AAAA;;AAAA;AAAA;AAAA,IAOVD,EAAAA,CAAAA,GAAe,MAAS,CAAA,QAAA,CAAW,EAAE;AAAA;AAAA;AAAA;;AAAA;AAAA,YAM7BA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,YAKtEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,iBACjD,CAAA;AAAA;AAAA,YAGEA,EAAAA,CAAAA,GAAe,YAAe,CAAA,cAAA,CAAiB,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","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"]}
+17
-257
sdk-dist/components/iframe/wander-iframe.component.cjs

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

'use strict';
// src/wander-embedded.types.ts
var LAYOUT_TYPES = [
"modal",
"popup",
"sidebar",
"half"
];
function isRouteConfig(obj) {
return !!(obj && typeof obj === "object" && "type" in obj && LAYOUT_TYPES.includes(obj.type));
}
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 value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
}
}
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
}) => {
return `
'use strict';var y=["modal","popup","sidebar","half"];function f(d){return !!(d&&typeof d=="object"&&"type"in d&&y.includes(d.type))}function c(d){return !!(d&&typeof d=="object"&&("light"in d||"dark"in d))}function u(d,t,a=""){for(let o in t){let e=t[o];typeof e=="string"?d.style.setProperty(`--${o}`,e):typeof e=="number"&&d.style.setProperty(`--${o}${a}`,`${e}px`);}}var g=({customStyles:d})=>`
<style>

@@ -60,5 +30,5 @@ /* Base backdrop styles */

width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 600px) - 2 * var(--borderWidth, 2px));
min-width: 400px;
min-height: 400px;
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));

@@ -85,3 +55,3 @@ max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));

}
/* Half layout image styles */

@@ -98,3 +68,3 @@ .half-image {

}
.half-image.show {

@@ -104,3 +74,3 @@ opacity: 1;

}
/* Position-specific styles for half-image */

@@ -111,3 +81,3 @@ .half-image[data-position="left"] {

}
.half-image[data-position="right"] {

@@ -138,7 +108,7 @@ right: 0;

}
.half-image {
display: none;
}
.iframe-wrapper[data-expand-on-mobile="true"] {

@@ -190,3 +160,3 @@ inset: 0;

}
/* Sidebar specific styles */

@@ -247,3 +217,3 @@ .iframe-wrapper[data-layout="sidebar"] {

}
/* Show transform state */

@@ -254,3 +224,3 @@ .iframe-wrapper[data-layout="sidebar"].show,

}
/* Expanded styles */

@@ -264,3 +234,3 @@ .iframe-wrapper[data-layout="sidebar"][data-expanded="true"],

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],

@@ -270,3 +240,3 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],

@@ -277,215 +247,5 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {

${customStyles}
${d}
</style>
`;
};
// src/components/iframe/wander-iframe.component.ts
var _WanderIframe = class _WanderIframe {
constructor(src, options = {}) {
// State:
this.currentLayoutType = null;
this.isOpen = false;
this.imageBaseUrl = null;
this.options = options;
const { routeLayout } = options;
if (typeof routeLayout === "string" || isRouteConfig(routeLayout)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayout);
this.routeLayout = {
default: defaultLayoutConfig,
"auth-request": defaultLayoutConfig
};
} else {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.default || "popup"
);
const authLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.auth || "modal"
);
this.routeLayout = {
default: defaultLayoutConfig,
auth: authLayoutConfig,
account: _WanderIframe.getLayoutConfig(routeLayout?.account) || authLayoutConfig,
settings: _WanderIframe.getLayoutConfig(routeLayout?.settings) || authLayoutConfig,
"auth-request": _WanderIframe.getLayoutConfig(routeLayout?.["auth-request"]) || defaultLayoutConfig
};
}
this.imageBaseUrl = new URL(src).origin;
const elements = _WanderIframe.initializeIframe(src, options);
this.host = elements.host;
this.backdrop = elements.backdrop;
this.wrapper = elements.wrapper;
this.iframe = elements.iframe;
this.halfImage = elements.halfImage;
this.resize({
routeType: "auth",
preferredLayoutType: this.routeLayout.auth?.type || "modal",
height: 0
});
}
getRouteImageUrl(imgPath) {
if (!imgPath || !_WanderIframe.ALLOWED_IMG_PATHS.has(imgPath)) {
return null;
}
return `${this.imageBaseUrl}/assets/routes/${imgPath}`;
}
static getLayoutConfig(layoutConfig) {
if (!layoutConfig) return void 0;
return typeof layoutConfig === "object" ? layoutConfig : _WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];
}
static initializeIframe(src, options) {
const host = document.createElement("div");
host.id = options.id || _WanderIframe.DEFAULT_IFRAME_ID;
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
shadow.appendChild(template.content);
const backdrop = document.createElement("div");
backdrop.className = "backdrop";
backdrop.id = _WanderIframe.DEFAULT_BACKDROP_ID;
const wrapper = document.createElement("div");
wrapper.className = "iframe-wrapper";
const iframe = document.createElement("iframe");
iframe.className = "iframe";
iframe.src = src;
wrapper.appendChild(iframe);
const halfImage = document.createElement("img");
halfImage.className = "half-image";
shadow.appendChild(backdrop);
shadow.appendChild(halfImage);
shadow.appendChild(wrapper);
return {
iframe,
host,
backdrop,
wrapper,
halfImage
};
}
getElements() {
return {
host: this.host,
backdrop: this.backdrop,
wrapper: this.wrapper,
iframe: this.iframe,
halfImage: this.halfImage
};
}
show() {
this.isOpen = true;
this.backdrop.classList.add("show");
this.wrapper.classList.add("show");
if (this.currentLayoutType === "half" && this.halfImage.src) {
this.halfImage.classList.add("show");
}
}
hide() {
this.isOpen = false;
this.backdrop.classList.remove("show");
this.wrapper.classList.remove("show");
this.halfImage.classList.remove("show");
}
resize(routeConfig) {
const layoutConfig = this.routeLayout[routeConfig.routeType] || _WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];
const layoutType = layoutConfig.type;
this.currentLayoutType = layoutType;
if (layoutType !== "half") {
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
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
};
switch (layoutConfig.type) {
case "modal": {
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);
break;
}
case "popup": {
const position = layoutConfig.position || "bottom-right";
this.wrapper.dataset.position = position;
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);
break;
}
case "sidebar":
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 ?? (cssVars.borderRadius = 0);
} else {
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding ?? (cssVars.backdropPadding = 8);
}
if (layoutConfig.type === "sidebar") {
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))");
} else {
cssVars.preferredWidth ?? (cssVars.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))");
cssVars.preferredHeight ?? (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);
}
destroy() {
this.host?.remove();
}
};
_WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";
_WanderIframe.DEFAULT_IFRAME_ID = "wanderEmbeddedIframe";
_WanderIframe.DEFAULT_ROUTE_LAYOUT = {
modal: {
type: "modal"
},
popup: {
type: "popup"
},
sidebar: {
type: "sidebar"
},
half: {
type: "half"
}
};
_WanderIframe.IMAGE_EXTENSIONS = ["png", "webp"];
_WanderIframe.DEFAULT_ROUTE_TYPES = [
"default",
"auth",
"account",
"auth-request",
"settings"
];
_WanderIframe.ALLOWED_IMG_PATHS = new Set(
_WanderIframe.DEFAULT_ROUTE_TYPES.flatMap(
(route) => _WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}`)
)
);
var WanderIframe = _WanderIframe;
exports.WanderIframe = WanderIframe;
//# sourceMappingURL=wander-iframe.component.cjs.map
`;var r=class r{constructor(t,a={}){this.currentLayoutType=null;this.isOpen=false;this.imageBaseUrl=null;this.options=a;let{routeLayout:o}=a;if(typeof o=="string"||f(o)){let i=r.getLayoutConfig(o);this.routeLayout={default:i,settings:i,"auth-request":i};}else {let i=r.getLayoutConfig(o?.default||"popup"),n=r.getLayoutConfig(o?.auth||"modal");this.routeLayout={default:i,auth:n,account:r.getLayoutConfig(o?.account)||n,settings:r.getLayoutConfig(o?.settings)||i,"auth-request":r.getLayoutConfig(o?.["auth-request"])||i};}this.imageBaseUrl=new URL(t).origin;let e=r.initializeIframe(t,a);this.host=e.host,this.backdrop=e.backdrop,this.wrapper=e.wrapper,this.iframe=e.iframe,this.halfImage=e.halfImage,this.resize({routeType:"auth",preferredLayoutType:this.routeLayout.auth?.type||"modal",height:0});}getRouteImageUrl(t){return !t||!r.ALLOWED_IMG_PATHS.has(t)?null:`${this.imageBaseUrl}/assets/routes/${t}`}static getLayoutConfig(t){if(t)return typeof t=="object"?t:r.DEFAULT_ROUTE_LAYOUT[t]}static initializeIframe(t,a){let o=document.createElement("div");o.id=a.id||r.DEFAULT_IFRAME_ID;let e=o.attachShadow({mode:"open"}),i=document.createElement("template"),n=typeof a.customStyles=="string"?a.customStyles:"";i.innerHTML=g({customStyles:n}),e.appendChild(i.content);let s=document.createElement("div");s.className="backdrop",s.id=r.DEFAULT_BACKDROP_ID;let p=document.createElement("div");p.className="iframe-wrapper";let l=document.createElement("iframe");l.className="iframe",l.src=t,p.appendChild(l);let m=document.createElement("img");return m.className="half-image",e.appendChild(s),e.appendChild(m),e.appendChild(p),{iframe:l,host:o,backdrop:s,wrapper:p,halfImage:m}}getElements(){return {host:this.host,backdrop:this.backdrop,wrapper:this.wrapper,iframe:this.iframe,halfImage:this.halfImage}}show(){this.isOpen=true,this.backdrop.classList.add("show"),this.wrapper.classList.add("show"),this.currentLayoutType==="half"&&this.halfImage.src&&this.halfImage.classList.add("show");}hide(){this.isOpen=false,this.backdrop.classList.remove("show"),this.wrapper.classList.remove("show"),this.halfImage.classList.remove("show");}resize(t){let a=this.routeLayout[t.routeType]||r.DEFAULT_ROUTE_LAYOUT[t.preferredLayoutType],o=a.type;if(this.currentLayoutType=o,o!=="half"&&(this.halfImage.style.display="none",this.halfImage.classList.remove("show")),this.wrapper.dataset.layout=o,this.wrapper.dataset.expandOnMobile=a.expandOnMobile!==false?"true":"false",this.options.cssVars&&c(this.options.cssVars))throw new Error("Not implemented yet");let e={...this.options.cssVars};switch(a.type){case "modal":{e.preferredWidth=a.fixedWidth||t.width||"",e.preferredHeight=a.fixedHeight||t.height||"";break}case "popup":{let i=a.position||"bottom-right";this.wrapper.dataset.position=i,e.preferredWidth=a.fixedWidth||"",e.preferredHeight=a.fixedHeight||"";break}case "sidebar":case "half":{let i=a.position||"right";if(this.wrapper.dataset.position=i,a.expanded?(this.wrapper.dataset.expanded="true",e.backdropPadding=0,e.borderRadius=0):(this.wrapper.dataset.expanded="false",e.backdropPadding=8),a.type==="sidebar")e.preferredWidth=a.fixedWidth||t.width||"",e.preferredHeight="calc(100dvh - 2 * var(--backdropPadding, 0))";else {e.preferredWidth="calc(50vw - 2 * var(--backdropPadding, 0))",e.preferredHeight="calc(100dvh - 2 * var(--backdropPadding, 0))",this.halfImage.dataset.position=i==="left"?"right":"left",this.halfImage.dataset.expanded=a.expanded?"true":"false";let n=this.getRouteImageUrl(`${t.routeType}.png`);this.isOpen&&n?(this.halfImage.src=n,this.halfImage.style.display="block",this.halfImage.classList.add("show")):(this.halfImage.style.display="none",this.halfImage.classList.remove("show"));}break}}u(this.backdrop,e),u(this.wrapper,e);}destroy(){this.host?.remove();}};r.DEFAULT_BACKDROP_ID="wanderEmbeddedBackdrop",r.DEFAULT_IFRAME_ID="wanderEmbeddedIframe",r.DEFAULT_ROUTE_LAYOUT={modal:{type:"modal"},popup:{type:"popup"},sidebar:{type:"sidebar"},half:{type:"half"}},r.IMAGE_EXTENSIONS=["png","webp"],r.DEFAULT_ROUTE_TYPES=["default","auth","account","auth-request","settings"],r.ALLOWED_IMG_PATHS=new Set(r.DEFAULT_ROUTE_TYPES.flatMap(t=>r.IMAGE_EXTENSIONS.map(a=>`${t}.${a}`)));var b=r;exports.WanderIframe=b;//# sourceMappingURL=wander-iframe.component.cjs.map
//# sourceMappingURL=wander-iframe.component.cjs.map
+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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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, 600px) - 2 * var(--borderWidth, 2px));\n min-width: 400px;\n min-height: 400px;\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 and auth-requests. Anything else fallbacks to the default\n // (currently modal):\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(routeLayout);\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If only default and auth are defined by the developer, default is used for both default and auth-request, and\n // auth is used for auth, account and settings:\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 authLayoutConfig,\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(backdrop);\n shadow.appendChild(halfImage);\n shadow.appendChild(wrapper);\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 cssVars.preferredWidth ??= 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\n cssVars.preferredWidth ??= layoutConfig.fixedWidth || routeConfig.width;\n cssVars.preferredHeight ??=\n layoutConfig.fixedHeight || routeConfig.height;\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 ??=\n \"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":["LAYOUT_TYPES","isRouteConfig","obj","isThemeRecord","cssVars","addCSSVariables","element","vars","suffix","key","value","getWanderIframeTemplateContent","customStyles","_WanderIframe","src","options","routeLayout","defaultLayoutConfig","authLayoutConfig","elements","imgPath","layoutConfig","host","shadow","template","backdrop","wrapper","iframe","halfImage","routeConfig","layoutType","position","imgSrc","route","ext","WanderIframe"],"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(backdrop);\n shadow.appendChild(halfImage);\n shadow.appendChild(wrapper);\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"]}
+1
-1
sdk-dist/components/iframe/wander-iframe.component.d.cts

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

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-CIHHwk0q.cjs';
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';

@@ -3,0 +3,0 @@ declare class WanderIframe {

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

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

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-CIHHwk0q.js';
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';

@@ -3,0 +3,0 @@ declare class WanderIframe {

+17
-262
sdk-dist/components/iframe/wander-iframe.component.global.js

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

(function (exports) {
'use strict';
// src/wander-embedded.types.ts
var LAYOUT_TYPES = [
"modal",
"popup",
"sidebar",
"half"
];
function isRouteConfig(obj) {
return !!(obj && typeof obj === "object" && "type" in obj && LAYOUT_TYPES.includes(obj.type));
}
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 value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
}
}
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
}) => {
return `
(function(exports){'use strict';var b=["modal","popup","sidebar","half"];function u(d){return !!(d&&typeof d=="object"&&"type"in d&&b.includes(d.type))}function f(d){return !!(d&&typeof d=="object"&&("light"in d||"dark"in d))}function h(d,t,a=""){for(let o in t){let e=t[o];typeof e=="string"?d.style.setProperty(`--${o}`,e):typeof e=="number"&&d.style.setProperty(`--${o}${a}`,`${e}px`);}}var c=({customStyles:d})=>`
<style>

@@ -61,5 +30,5 @@ /* Base backdrop styles */

width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 600px) - 2 * var(--borderWidth, 2px));
min-width: 400px;
min-height: 400px;
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));

@@ -86,3 +55,3 @@ max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));

}
/* Half layout image styles */

@@ -99,3 +68,3 @@ .half-image {

}
.half-image.show {

@@ -105,3 +74,3 @@ opacity: 1;

}
/* Position-specific styles for half-image */

@@ -112,3 +81,3 @@ .half-image[data-position="left"] {

}
.half-image[data-position="right"] {

@@ -139,7 +108,7 @@ right: 0;

}
.half-image {
display: none;
}
.iframe-wrapper[data-expand-on-mobile="true"] {

@@ -191,3 +160,3 @@ inset: 0;

}
/* Sidebar specific styles */

@@ -248,3 +217,3 @@ .iframe-wrapper[data-layout="sidebar"] {

}
/* Show transform state */

@@ -255,3 +224,3 @@ .iframe-wrapper[data-layout="sidebar"].show,

}
/* Expanded styles */

@@ -265,3 +234,3 @@ .iframe-wrapper[data-layout="sidebar"][data-expanded="true"],

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],

@@ -271,3 +240,3 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],

@@ -278,219 +247,5 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {

${customStyles}
${d}
</style>
`;
};
// src/components/iframe/wander-iframe.component.ts
var _WanderIframe = class _WanderIframe {
constructor(src, options = {}) {
// State:
this.currentLayoutType = null;
this.isOpen = false;
this.imageBaseUrl = null;
this.options = options;
const { routeLayout } = options;
if (typeof routeLayout === "string" || isRouteConfig(routeLayout)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayout);
this.routeLayout = {
default: defaultLayoutConfig,
"auth-request": defaultLayoutConfig
};
} else {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.default || "popup"
);
const authLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.auth || "modal"
);
this.routeLayout = {
default: defaultLayoutConfig,
auth: authLayoutConfig,
account: _WanderIframe.getLayoutConfig(routeLayout?.account) || authLayoutConfig,
settings: _WanderIframe.getLayoutConfig(routeLayout?.settings) || authLayoutConfig,
"auth-request": _WanderIframe.getLayoutConfig(routeLayout?.["auth-request"]) || defaultLayoutConfig
};
}
this.imageBaseUrl = new URL(src).origin;
const elements = _WanderIframe.initializeIframe(src, options);
this.host = elements.host;
this.backdrop = elements.backdrop;
this.wrapper = elements.wrapper;
this.iframe = elements.iframe;
this.halfImage = elements.halfImage;
this.resize({
routeType: "auth",
preferredLayoutType: this.routeLayout.auth?.type || "modal",
height: 0
});
}
getRouteImageUrl(imgPath) {
if (!imgPath || !_WanderIframe.ALLOWED_IMG_PATHS.has(imgPath)) {
return null;
}
return `${this.imageBaseUrl}/assets/routes/${imgPath}`;
}
static getLayoutConfig(layoutConfig) {
if (!layoutConfig) return void 0;
return typeof layoutConfig === "object" ? layoutConfig : _WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];
}
static initializeIframe(src, options) {
const host = document.createElement("div");
host.id = options.id || _WanderIframe.DEFAULT_IFRAME_ID;
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
shadow.appendChild(template.content);
const backdrop = document.createElement("div");
backdrop.className = "backdrop";
backdrop.id = _WanderIframe.DEFAULT_BACKDROP_ID;
const wrapper = document.createElement("div");
wrapper.className = "iframe-wrapper";
const iframe = document.createElement("iframe");
iframe.className = "iframe";
iframe.src = src;
wrapper.appendChild(iframe);
const halfImage = document.createElement("img");
halfImage.className = "half-image";
shadow.appendChild(backdrop);
shadow.appendChild(halfImage);
shadow.appendChild(wrapper);
return {
iframe,
host,
backdrop,
wrapper,
halfImage
};
}
getElements() {
return {
host: this.host,
backdrop: this.backdrop,
wrapper: this.wrapper,
iframe: this.iframe,
halfImage: this.halfImage
};
}
show() {
this.isOpen = true;
this.backdrop.classList.add("show");
this.wrapper.classList.add("show");
if (this.currentLayoutType === "half" && this.halfImage.src) {
this.halfImage.classList.add("show");
}
}
hide() {
this.isOpen = false;
this.backdrop.classList.remove("show");
this.wrapper.classList.remove("show");
this.halfImage.classList.remove("show");
}
resize(routeConfig) {
const layoutConfig = this.routeLayout[routeConfig.routeType] || _WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];
const layoutType = layoutConfig.type;
this.currentLayoutType = layoutType;
if (layoutType !== "half") {
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
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
};
switch (layoutConfig.type) {
case "modal": {
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);
break;
}
case "popup": {
const position = layoutConfig.position || "bottom-right";
this.wrapper.dataset.position = position;
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);
break;
}
case "sidebar":
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 ?? (cssVars.borderRadius = 0);
} else {
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding ?? (cssVars.backdropPadding = 8);
}
if (layoutConfig.type === "sidebar") {
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))");
} else {
cssVars.preferredWidth ?? (cssVars.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))");
cssVars.preferredHeight ?? (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);
}
destroy() {
this.host?.remove();
}
};
_WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";
_WanderIframe.DEFAULT_IFRAME_ID = "wanderEmbeddedIframe";
_WanderIframe.DEFAULT_ROUTE_LAYOUT = {
modal: {
type: "modal"
},
popup: {
type: "popup"
},
sidebar: {
type: "sidebar"
},
half: {
type: "half"
}
};
_WanderIframe.IMAGE_EXTENSIONS = ["png", "webp"];
_WanderIframe.DEFAULT_ROUTE_TYPES = [
"default",
"auth",
"account",
"auth-request",
"settings"
];
_WanderIframe.ALLOWED_IMG_PATHS = new Set(
_WanderIframe.DEFAULT_ROUTE_TYPES.flatMap(
(route) => _WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}`)
)
);
var WanderIframe = _WanderIframe;
exports.WanderIframe = WanderIframe;
return exports;
})({});
//# sourceMappingURL=wander-iframe.component.global.js.map
`;var r=class r{constructor(t,a={}){this.currentLayoutType=null;this.isOpen=false;this.imageBaseUrl=null;this.options=a;let{routeLayout:o}=a;if(typeof o=="string"||u(o)){let i=r.getLayoutConfig(o);this.routeLayout={default:i,settings:i,"auth-request":i};}else {let i=r.getLayoutConfig(o?.default||"popup"),n=r.getLayoutConfig(o?.auth||"modal");this.routeLayout={default:i,auth:n,account:r.getLayoutConfig(o?.account)||n,settings:r.getLayoutConfig(o?.settings)||i,"auth-request":r.getLayoutConfig(o?.["auth-request"])||i};}this.imageBaseUrl=new URL(t).origin;let e=r.initializeIframe(t,a);this.host=e.host,this.backdrop=e.backdrop,this.wrapper=e.wrapper,this.iframe=e.iframe,this.halfImage=e.halfImage,this.resize({routeType:"auth",preferredLayoutType:this.routeLayout.auth?.type||"modal",height:0});}getRouteImageUrl(t){return !t||!r.ALLOWED_IMG_PATHS.has(t)?null:`${this.imageBaseUrl}/assets/routes/${t}`}static getLayoutConfig(t){if(t)return typeof t=="object"?t:r.DEFAULT_ROUTE_LAYOUT[t]}static initializeIframe(t,a){let o=document.createElement("div");o.id=a.id||r.DEFAULT_IFRAME_ID;let e=o.attachShadow({mode:"open"}),i=document.createElement("template"),n=typeof a.customStyles=="string"?a.customStyles:"";i.innerHTML=c({customStyles:n}),e.appendChild(i.content);let s=document.createElement("div");s.className="backdrop",s.id=r.DEFAULT_BACKDROP_ID;let p=document.createElement("div");p.className="iframe-wrapper";let l=document.createElement("iframe");l.className="iframe",l.src=t,p.appendChild(l);let m=document.createElement("img");return m.className="half-image",e.appendChild(s),e.appendChild(m),e.appendChild(p),{iframe:l,host:o,backdrop:s,wrapper:p,halfImage:m}}getElements(){return {host:this.host,backdrop:this.backdrop,wrapper:this.wrapper,iframe:this.iframe,halfImage:this.halfImage}}show(){this.isOpen=true,this.backdrop.classList.add("show"),this.wrapper.classList.add("show"),this.currentLayoutType==="half"&&this.halfImage.src&&this.halfImage.classList.add("show");}hide(){this.isOpen=false,this.backdrop.classList.remove("show"),this.wrapper.classList.remove("show"),this.halfImage.classList.remove("show");}resize(t){let a=this.routeLayout[t.routeType]||r.DEFAULT_ROUTE_LAYOUT[t.preferredLayoutType],o=a.type;if(this.currentLayoutType=o,o!=="half"&&(this.halfImage.style.display="none",this.halfImage.classList.remove("show")),this.wrapper.dataset.layout=o,this.wrapper.dataset.expandOnMobile=a.expandOnMobile!==false?"true":"false",this.options.cssVars&&f(this.options.cssVars))throw new Error("Not implemented yet");let e={...this.options.cssVars};switch(a.type){case "modal":{e.preferredWidth=a.fixedWidth||t.width||"",e.preferredHeight=a.fixedHeight||t.height||"";break}case "popup":{let i=a.position||"bottom-right";this.wrapper.dataset.position=i,e.preferredWidth=a.fixedWidth||"",e.preferredHeight=a.fixedHeight||"";break}case "sidebar":case "half":{let i=a.position||"right";if(this.wrapper.dataset.position=i,a.expanded?(this.wrapper.dataset.expanded="true",e.backdropPadding=0,e.borderRadius=0):(this.wrapper.dataset.expanded="false",e.backdropPadding=8),a.type==="sidebar")e.preferredWidth=a.fixedWidth||t.width||"",e.preferredHeight="calc(100dvh - 2 * var(--backdropPadding, 0))";else {e.preferredWidth="calc(50vw - 2 * var(--backdropPadding, 0))",e.preferredHeight="calc(100dvh - 2 * var(--backdropPadding, 0))",this.halfImage.dataset.position=i==="left"?"right":"left",this.halfImage.dataset.expanded=a.expanded?"true":"false";let n=this.getRouteImageUrl(`${t.routeType}.png`);this.isOpen&&n?(this.halfImage.src=n,this.halfImage.style.display="block",this.halfImage.classList.add("show")):(this.halfImage.style.display="none",this.halfImage.classList.remove("show"));}break}}h(this.backdrop,e),h(this.wrapper,e);}destroy(){this.host?.remove();}};r.DEFAULT_BACKDROP_ID="wanderEmbeddedBackdrop",r.DEFAULT_IFRAME_ID="wanderEmbeddedIframe",r.DEFAULT_ROUTE_LAYOUT={modal:{type:"modal"},popup:{type:"popup"},sidebar:{type:"sidebar"},half:{type:"half"}},r.IMAGE_EXTENSIONS=["png","webp"],r.DEFAULT_ROUTE_TYPES=["default","auth","account","auth-request","settings"],r.ALLOWED_IMG_PATHS=new Set(r.DEFAULT_ROUTE_TYPES.flatMap(t=>r.IMAGE_EXTENSIONS.map(a=>`${t}.${a}`)));var g=r;exports.WanderIframe=g;return exports;})({});//# sourceMappingURL=wander-iframe.component.global.js.map
//# sourceMappingURL=wander-iframe.component.global.js.map
+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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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, 600px) - 2 * var(--borderWidth, 2px));\n min-width: 400px;\n min-height: 400px;\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 and auth-requests. Anything else fallbacks to the default\n // (currently modal):\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(routeLayout);\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If only default and auth are defined by the developer, default is used for both default and auth-request, and\n // auth is used for auth, account and settings:\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 authLayoutConfig,\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(backdrop);\n shadow.appendChild(halfImage);\n shadow.appendChild(wrapper);\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 cssVars.preferredWidth ??= 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\n cssVars.preferredWidth ??= layoutConfig.fixedWidth || routeConfig.width;\n cssVars.preferredHeight ??=\n layoutConfig.fixedHeight || routeConfig.height;\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 ??=\n \"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":["LAYOUT_TYPES","isRouteConfig","obj","isThemeRecord","cssVars","addCSSVariables","element","vars","suffix","key","value","getWanderIframeTemplateContent","customStyles","_WanderIframe","src","options","routeLayout","defaultLayoutConfig","authLayoutConfig","elements","imgPath","layoutConfig","host","shadow","template","backdrop","wrapper","iframe","halfImage","routeConfig","layoutType","position","imgSrc","route","ext","WanderIframe"],"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(backdrop);\n shadow.appendChild(halfImage);\n shadow.appendChild(wrapper);\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"]}
+17
-255
sdk-dist/components/iframe/wander-iframe.component.js

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

// src/wander-embedded.types.ts
var LAYOUT_TYPES = [
"modal",
"popup",
"sidebar",
"half"
];
function isRouteConfig(obj) {
return !!(obj && typeof obj === "object" && "type" in obj && LAYOUT_TYPES.includes(obj.type));
}
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 value = vars[key];
if (typeof value === "string") element.style.setProperty(`--${key}`, value);
else if (typeof value === "number")
element.style.setProperty(`--${key}${suffix}`, `${value}px`);
}
}
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
}) => {
return `
var x=["modal","popup","sidebar","half"];function c(d){return !!(d&&typeof d=="object"&&"type"in d&&x.includes(d.type))}function g(d){return !!(d&&typeof d=="object"&&("light"in d||"dark"in d))}function f(d,t,a=""){for(let o in t){let e=t[o];typeof e=="string"?d.style.setProperty(`--${o}`,e):typeof e=="number"&&d.style.setProperty(`--${o}${a}`,`${e}px`);}}var b=({customStyles:d})=>`
<style>

@@ -58,5 +30,5 @@ /* Base backdrop styles */

width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 600px) - 2 * var(--borderWidth, 2px));
min-width: 400px;
min-height: 400px;
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));

@@ -83,3 +55,3 @@ max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));

}
/* Half layout image styles */

@@ -96,3 +68,3 @@ .half-image {

}
.half-image.show {

@@ -102,3 +74,3 @@ opacity: 1;

}
/* Position-specific styles for half-image */

@@ -109,3 +81,3 @@ .half-image[data-position="left"] {

}
.half-image[data-position="right"] {

@@ -136,7 +108,7 @@ right: 0;

}
.half-image {
display: none;
}
.iframe-wrapper[data-expand-on-mobile="true"] {

@@ -188,3 +160,3 @@ inset: 0;

}
/* Sidebar specific styles */

@@ -245,3 +217,3 @@ .iframe-wrapper[data-layout="sidebar"] {

}
/* Show transform state */

@@ -252,3 +224,3 @@ .iframe-wrapper[data-layout="sidebar"].show,

}
/* Expanded styles */

@@ -262,3 +234,3 @@ .iframe-wrapper[data-layout="sidebar"][data-expanded="true"],

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],

@@ -268,3 +240,3 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],

@@ -275,215 +247,5 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {

${customStyles}
${d}
</style>
`;
};
// src/components/iframe/wander-iframe.component.ts
var _WanderIframe = class _WanderIframe {
constructor(src, options = {}) {
// State:
this.currentLayoutType = null;
this.isOpen = false;
this.imageBaseUrl = null;
this.options = options;
const { routeLayout } = options;
if (typeof routeLayout === "string" || isRouteConfig(routeLayout)) {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(routeLayout);
this.routeLayout = {
default: defaultLayoutConfig,
"auth-request": defaultLayoutConfig
};
} else {
const defaultLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.default || "popup"
);
const authLayoutConfig = _WanderIframe.getLayoutConfig(
routeLayout?.auth || "modal"
);
this.routeLayout = {
default: defaultLayoutConfig,
auth: authLayoutConfig,
account: _WanderIframe.getLayoutConfig(routeLayout?.account) || authLayoutConfig,
settings: _WanderIframe.getLayoutConfig(routeLayout?.settings) || authLayoutConfig,
"auth-request": _WanderIframe.getLayoutConfig(routeLayout?.["auth-request"]) || defaultLayoutConfig
};
}
this.imageBaseUrl = new URL(src).origin;
const elements = _WanderIframe.initializeIframe(src, options);
this.host = elements.host;
this.backdrop = elements.backdrop;
this.wrapper = elements.wrapper;
this.iframe = elements.iframe;
this.halfImage = elements.halfImage;
this.resize({
routeType: "auth",
preferredLayoutType: this.routeLayout.auth?.type || "modal",
height: 0
});
}
getRouteImageUrl(imgPath) {
if (!imgPath || !_WanderIframe.ALLOWED_IMG_PATHS.has(imgPath)) {
return null;
}
return `${this.imageBaseUrl}/assets/routes/${imgPath}`;
}
static getLayoutConfig(layoutConfig) {
if (!layoutConfig) return void 0;
return typeof layoutConfig === "object" ? layoutConfig : _WanderIframe.DEFAULT_ROUTE_LAYOUT[layoutConfig];
}
static initializeIframe(src, options) {
const host = document.createElement("div");
host.id = options.id || _WanderIframe.DEFAULT_IFRAME_ID;
const shadow = host.attachShadow({ mode: "open" });
const template = document.createElement("template");
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
shadow.appendChild(template.content);
const backdrop = document.createElement("div");
backdrop.className = "backdrop";
backdrop.id = _WanderIframe.DEFAULT_BACKDROP_ID;
const wrapper = document.createElement("div");
wrapper.className = "iframe-wrapper";
const iframe = document.createElement("iframe");
iframe.className = "iframe";
iframe.src = src;
wrapper.appendChild(iframe);
const halfImage = document.createElement("img");
halfImage.className = "half-image";
shadow.appendChild(backdrop);
shadow.appendChild(halfImage);
shadow.appendChild(wrapper);
return {
iframe,
host,
backdrop,
wrapper,
halfImage
};
}
getElements() {
return {
host: this.host,
backdrop: this.backdrop,
wrapper: this.wrapper,
iframe: this.iframe,
halfImage: this.halfImage
};
}
show() {
this.isOpen = true;
this.backdrop.classList.add("show");
this.wrapper.classList.add("show");
if (this.currentLayoutType === "half" && this.halfImage.src) {
this.halfImage.classList.add("show");
}
}
hide() {
this.isOpen = false;
this.backdrop.classList.remove("show");
this.wrapper.classList.remove("show");
this.halfImage.classList.remove("show");
}
resize(routeConfig) {
const layoutConfig = this.routeLayout[routeConfig.routeType] || _WanderIframe.DEFAULT_ROUTE_LAYOUT[routeConfig.preferredLayoutType];
const layoutType = layoutConfig.type;
this.currentLayoutType = layoutType;
if (layoutType !== "half") {
this.halfImage.style.display = "none";
this.halfImage.classList.remove("show");
}
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
};
switch (layoutConfig.type) {
case "modal": {
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);
break;
}
case "popup": {
const position = layoutConfig.position || "bottom-right";
this.wrapper.dataset.position = position;
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);
break;
}
case "sidebar":
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 ?? (cssVars.borderRadius = 0);
} else {
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding ?? (cssVars.backdropPadding = 8);
}
if (layoutConfig.type === "sidebar") {
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);
cssVars.preferredHeight ?? (cssVars.preferredHeight = "calc(100dvh - 2 * var(--backdropPadding, 0))");
} else {
cssVars.preferredWidth ?? (cssVars.preferredWidth = "calc(50vw - 2 * var(--backdropPadding, 0))");
cssVars.preferredHeight ?? (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);
}
destroy() {
this.host?.remove();
}
};
_WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";
_WanderIframe.DEFAULT_IFRAME_ID = "wanderEmbeddedIframe";
_WanderIframe.DEFAULT_ROUTE_LAYOUT = {
modal: {
type: "modal"
},
popup: {
type: "popup"
},
sidebar: {
type: "sidebar"
},
half: {
type: "half"
}
};
_WanderIframe.IMAGE_EXTENSIONS = ["png", "webp"];
_WanderIframe.DEFAULT_ROUTE_TYPES = [
"default",
"auth",
"account",
"auth-request",
"settings"
];
_WanderIframe.ALLOWED_IMG_PATHS = new Set(
_WanderIframe.DEFAULT_ROUTE_TYPES.flatMap(
(route) => _WanderIframe.IMAGE_EXTENSIONS.map((ext) => `${route}.${ext}`)
)
);
var WanderIframe = _WanderIframe;
export { WanderIframe };
//# sourceMappingURL=wander-iframe.component.js.map
`;var r=class r{constructor(t,a={}){this.currentLayoutType=null;this.isOpen=false;this.imageBaseUrl=null;this.options=a;let{routeLayout:o}=a;if(typeof o=="string"||c(o)){let i=r.getLayoutConfig(o);this.routeLayout={default:i,settings:i,"auth-request":i};}else {let i=r.getLayoutConfig(o?.default||"popup"),n=r.getLayoutConfig(o?.auth||"modal");this.routeLayout={default:i,auth:n,account:r.getLayoutConfig(o?.account)||n,settings:r.getLayoutConfig(o?.settings)||i,"auth-request":r.getLayoutConfig(o?.["auth-request"])||i};}this.imageBaseUrl=new URL(t).origin;let e=r.initializeIframe(t,a);this.host=e.host,this.backdrop=e.backdrop,this.wrapper=e.wrapper,this.iframe=e.iframe,this.halfImage=e.halfImage,this.resize({routeType:"auth",preferredLayoutType:this.routeLayout.auth?.type||"modal",height:0});}getRouteImageUrl(t){return !t||!r.ALLOWED_IMG_PATHS.has(t)?null:`${this.imageBaseUrl}/assets/routes/${t}`}static getLayoutConfig(t){if(t)return typeof t=="object"?t:r.DEFAULT_ROUTE_LAYOUT[t]}static initializeIframe(t,a){let o=document.createElement("div");o.id=a.id||r.DEFAULT_IFRAME_ID;let e=o.attachShadow({mode:"open"}),i=document.createElement("template"),n=typeof a.customStyles=="string"?a.customStyles:"";i.innerHTML=b({customStyles:n}),e.appendChild(i.content);let s=document.createElement("div");s.className="backdrop",s.id=r.DEFAULT_BACKDROP_ID;let p=document.createElement("div");p.className="iframe-wrapper";let l=document.createElement("iframe");l.className="iframe",l.src=t,p.appendChild(l);let m=document.createElement("img");return m.className="half-image",e.appendChild(s),e.appendChild(m),e.appendChild(p),{iframe:l,host:o,backdrop:s,wrapper:p,halfImage:m}}getElements(){return {host:this.host,backdrop:this.backdrop,wrapper:this.wrapper,iframe:this.iframe,halfImage:this.halfImage}}show(){this.isOpen=true,this.backdrop.classList.add("show"),this.wrapper.classList.add("show"),this.currentLayoutType==="half"&&this.halfImage.src&&this.halfImage.classList.add("show");}hide(){this.isOpen=false,this.backdrop.classList.remove("show"),this.wrapper.classList.remove("show"),this.halfImage.classList.remove("show");}resize(t){let a=this.routeLayout[t.routeType]||r.DEFAULT_ROUTE_LAYOUT[t.preferredLayoutType],o=a.type;if(this.currentLayoutType=o,o!=="half"&&(this.halfImage.style.display="none",this.halfImage.classList.remove("show")),this.wrapper.dataset.layout=o,this.wrapper.dataset.expandOnMobile=a.expandOnMobile!==false?"true":"false",this.options.cssVars&&g(this.options.cssVars))throw new Error("Not implemented yet");let e={...this.options.cssVars};switch(a.type){case "modal":{e.preferredWidth=a.fixedWidth||t.width||"",e.preferredHeight=a.fixedHeight||t.height||"";break}case "popup":{let i=a.position||"bottom-right";this.wrapper.dataset.position=i,e.preferredWidth=a.fixedWidth||"",e.preferredHeight=a.fixedHeight||"";break}case "sidebar":case "half":{let i=a.position||"right";if(this.wrapper.dataset.position=i,a.expanded?(this.wrapper.dataset.expanded="true",e.backdropPadding=0,e.borderRadius=0):(this.wrapper.dataset.expanded="false",e.backdropPadding=8),a.type==="sidebar")e.preferredWidth=a.fixedWidth||t.width||"",e.preferredHeight="calc(100dvh - 2 * var(--backdropPadding, 0))";else {e.preferredWidth="calc(50vw - 2 * var(--backdropPadding, 0))",e.preferredHeight="calc(100dvh - 2 * var(--backdropPadding, 0))",this.halfImage.dataset.position=i==="left"?"right":"left",this.halfImage.dataset.expanded=a.expanded?"true":"false";let n=this.getRouteImageUrl(`${t.routeType}.png`);this.isOpen&&n?(this.halfImage.src=n,this.halfImage.style.display="block",this.halfImage.classList.add("show")):(this.halfImage.style.display="none",this.halfImage.classList.remove("show"));}break}}f(this.backdrop,e),f(this.wrapper,e);}destroy(){this.host?.remove();}};r.DEFAULT_BACKDROP_ID="wanderEmbeddedBackdrop",r.DEFAULT_IFRAME_ID="wanderEmbeddedIframe",r.DEFAULT_ROUTE_LAYOUT={modal:{type:"modal"},popup:{type:"popup"},sidebar:{type:"sidebar"},half:{type:"half"}},r.IMAGE_EXTENSIONS=["png","webp"],r.DEFAULT_ROUTE_TYPES=["default","auth","account","auth-request","settings"],r.ALLOWED_IMG_PATHS=new Set(r.DEFAULT_ROUTE_TYPES.flatMap(t=>r.IMAGE_EXTENSIONS.map(a=>`${t}.${a}`)));var y=r;export{y as WanderIframe};//# sourceMappingURL=wander-iframe.component.js.map
//# sourceMappingURL=wander-iframe.component.js.map
+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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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, 600px) - 2 * var(--borderWidth, 2px));\n min-width: 400px;\n min-height: 400px;\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 and auth-requests. Anything else fallbacks to the default\n // (currently modal):\n\n const defaultLayoutConfig = WanderIframe.getLayoutConfig(routeLayout);\n\n this.routeLayout = {\n default: defaultLayoutConfig,\n \"auth-request\": defaultLayoutConfig\n };\n } else {\n // If only default and auth are defined by the developer, default is used for both default and auth-request, and\n // auth is used for auth, account and settings:\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 authLayoutConfig,\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(backdrop);\n shadow.appendChild(halfImage);\n shadow.appendChild(wrapper);\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 cssVars.preferredWidth ??= 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\n cssVars.preferredWidth ??= layoutConfig.fixedWidth || routeConfig.width;\n cssVars.preferredHeight ??=\n layoutConfig.fixedHeight || routeConfig.height;\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 ??=\n \"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":["LAYOUT_TYPES","isRouteConfig","obj","isThemeRecord","cssVars","addCSSVariables","element","vars","suffix","key","value","getWanderIframeTemplateContent","customStyles","_WanderIframe","src","options","routeLayout","defaultLayoutConfig","authLayoutConfig","elements","imgPath","layoutConfig","host","shadow","template","backdrop","wrapper","iframe","halfImage","routeConfig","layoutType","position","imgSrc","route","ext","WanderIframe"],"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(backdrop);\n shadow.appendChild(halfImage);\n shadow.appendChild(wrapper);\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"]}
+17
-27
sdk-dist/components/iframe/wander-iframe.template.cjs

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

'use strict';
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
}) => {
return `
'use strict';var t=({customStyles:a})=>`
<style>

@@ -36,5 +30,5 @@ /* Base backdrop styles */

width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 600px) - 2 * var(--borderWidth, 2px));
min-width: 400px;
min-height: 400px;
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));

@@ -61,3 +55,3 @@ max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));

}
/* Half layout image styles */

@@ -74,3 +68,3 @@ .half-image {

}
.half-image.show {

@@ -80,3 +74,3 @@ opacity: 1;

}
/* Position-specific styles for half-image */

@@ -87,3 +81,3 @@ .half-image[data-position="left"] {

}
.half-image[data-position="right"] {

@@ -114,7 +108,7 @@ right: 0;

}
.half-image {
display: none;
}
.iframe-wrapper[data-expand-on-mobile="true"] {

@@ -166,3 +160,3 @@ inset: 0;

}
/* Sidebar specific styles */

@@ -223,3 +217,3 @@ .iframe-wrapper[data-layout="sidebar"] {

}
/* Show transform state */

@@ -230,3 +224,3 @@ .iframe-wrapper[data-layout="sidebar"].show,

}
/* Expanded styles */

@@ -240,3 +234,3 @@ .iframe-wrapper[data-layout="sidebar"][data-expanded="true"],

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],

@@ -246,3 +240,3 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],

@@ -253,9 +247,5 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {

${customStyles}
${a}
</style>
`;
};
exports.getWanderIframeTemplateContent = getWanderIframeTemplateContent;
//# sourceMappingURL=wander-iframe.template.cjs.map
`;exports.getWanderIframeTemplateContent=t;//# sourceMappingURL=wander-iframe.template.cjs.map
//# sourceMappingURL=wander-iframe.template.cjs.map
+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;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, 600px) - 2 * var(--borderWidth, 2px));\n min-width: 400px;\n min-height: 400px;\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":["getWanderIframeTemplateContent","customStyles"],"mappings":"aAIO,IAAMA,CAAiC,CAAA,CAAC,CAC7C,YAAA,CAAAC,CACF,CACS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;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,EA2OHA,CAAY;AAAA","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"]}
+17
-32
sdk-dist/components/iframe/wander-iframe.template.global.js

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

(function (exports) {
'use strict';
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
}) => {
return `
(function(exports){'use strict';var r=({customStyles:a})=>`
<style>

@@ -37,5 +30,5 @@ /* Base backdrop styles */

width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 600px) - 2 * var(--borderWidth, 2px));
min-width: 400px;
min-height: 400px;
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));

@@ -62,3 +55,3 @@ max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));

}
/* Half layout image styles */

@@ -75,3 +68,3 @@ .half-image {

}
.half-image.show {

@@ -81,3 +74,3 @@ opacity: 1;

}
/* Position-specific styles for half-image */

@@ -88,3 +81,3 @@ .half-image[data-position="left"] {

}
.half-image[data-position="right"] {

@@ -115,7 +108,7 @@ right: 0;

}
.half-image {
display: none;
}
.iframe-wrapper[data-expand-on-mobile="true"] {

@@ -167,3 +160,3 @@ inset: 0;

}
/* Sidebar specific styles */

@@ -224,3 +217,3 @@ .iframe-wrapper[data-layout="sidebar"] {

}
/* Show transform state */

@@ -231,3 +224,3 @@ .iframe-wrapper[data-layout="sidebar"].show,

}
/* Expanded styles */

@@ -241,3 +234,3 @@ .iframe-wrapper[data-layout="sidebar"][data-expanded="true"],

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],

@@ -247,3 +240,3 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],

@@ -254,13 +247,5 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {

${customStyles}
${a}
</style>
`;
};
exports.getWanderIframeTemplateContent = getWanderIframeTemplateContent;
return exports;
})({});
//# sourceMappingURL=wander-iframe.template.global.js.map
`;exports.getWanderIframeTemplateContent=r;return exports;})({});//# sourceMappingURL=wander-iframe.template.global.js.map
//# sourceMappingURL=wander-iframe.template.global.js.map
+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;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, 600px) - 2 * var(--borderWidth, 2px));\n min-width: 400px;\n min-height: 400px;\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":["getWanderIframeTemplateContent","customStyles"],"mappings":"gCAIO,IAAMA,CAAiC,CAAA,CAAC,CAC7C,YAAA,CAAAC,CACF,CACS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;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,EA2OHA,CAAY;AAAA","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"]}
+17
-25
sdk-dist/components/iframe/wander-iframe.template.js

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

// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
customStyles
}) => {
return `
var e=({customStyles:a})=>`
<style>

@@ -34,5 +30,5 @@ /* Base backdrop styles */

width: calc(var(--preferredWidth, 400px) - 2 * var(--borderWidth, 2px));
height: calc(var(--preferredHeight, 600px) - 2 * var(--borderWidth, 2px));
min-width: 400px;
min-height: 400px;
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));

@@ -59,3 +55,3 @@ max-height: calc(100dvh - 2 * var(--backdropPadding, 32px) - 2 * var(--borderWidth, 2px));

}
/* Half layout image styles */

@@ -72,3 +68,3 @@ .half-image {

}
.half-image.show {

@@ -78,3 +74,3 @@ opacity: 1;

}
/* Position-specific styles for half-image */

@@ -85,3 +81,3 @@ .half-image[data-position="left"] {

}
.half-image[data-position="right"] {

@@ -112,7 +108,7 @@ right: 0;

}
.half-image {
display: none;
}
.iframe-wrapper[data-expand-on-mobile="true"] {

@@ -164,3 +160,3 @@ inset: 0;

}
/* Sidebar specific styles */

@@ -221,3 +217,3 @@ .iframe-wrapper[data-layout="sidebar"] {

}
/* Show transform state */

@@ -228,3 +224,3 @@ .iframe-wrapper[data-layout="sidebar"].show,

}
/* Expanded styles */

@@ -238,3 +234,3 @@ .iframe-wrapper[data-layout="sidebar"][data-expanded="true"],

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],

@@ -244,3 +240,3 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {

}
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],

@@ -251,9 +247,5 @@ .iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {

${customStyles}
${a}
</style>
`;
};
export { getWanderIframeTemplateContent };
//# sourceMappingURL=wander-iframe.template.js.map
`;export{e as getWanderIframeTemplateContent};//# sourceMappingURL=wander-iframe.template.js.map
//# sourceMappingURL=wander-iframe.template.js.map
+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;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, 600px) - 2 * var(--borderWidth, 2px));\n min-width: 400px;\n min-height: 400px;\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":["getWanderIframeTemplateContent","customStyles"],"mappings":"AAIO,IAAMA,CAAiC,CAAA,CAAC,CAC7C,YAAA,CAAAC,CACF,CACS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;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,EA2OHA,CAAY;AAAA","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"]}
+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, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, m 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, q as WanderEmbeddedClickOutsideBehavior, o as WanderEmbeddedComponentConfig, n as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, p as isThemeRecord } from './wander-embedded.types-CIHHwk0q.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';
+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, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, m 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, q as WanderEmbeddedClickOutsideBehavior, o as WanderEmbeddedComponentConfig, n as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, p as isThemeRecord } from './wander-embedded.types-CIHHwk0q.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';
+1
-3
sdk-dist/types/global.d.cjs

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

'use strict';
//# sourceMappingURL=global.d.cjs.map
'use strict';//# sourceMappingURL=global.d.cjs.map
//# sourceMappingURL=global.d.cjs.map
+1
-7
sdk-dist/types/global.d.global.js

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

(function () {
'use strict';
})();
//# sourceMappingURL=global.d.global.js.map
(function(){'use strict';})();//# sourceMappingURL=global.d.global.js.map
//# sourceMappingURL=global.d.global.js.map
+0
-1
sdk-dist/types/global.d.js

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

//# sourceMappingURL=global.d.js.map
//# sourceMappingURL=global.d.js.map
+1
-3
sdk-dist/utils/message/message.types.cjs

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

'use strict';
//# sourceMappingURL=message.types.cjs.map
'use strict';//# sourceMappingURL=message.types.cjs.map
//# sourceMappingURL=message.types.cjs.map
+1
-1
sdk-dist/utils/message/message.types.d.cts

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

export { E as BaseIncomingMessage, F as IncomingAuthMessage, y as IncomingAuthMessageData, K as IncomingBalanceMessage, A as IncomingBalanceMessageData, G as IncomingCloseMessage, h as IncomingMessage, Q as IncomingMessageId, N as IncomingRequestMessage, D as IncomingRequestMessageData, J as IncomingResizeMessage, z as IncomingResizeMessageData, O as OutgoingMessage, U as UserDetails } from '../../wander-embedded.types-CIHHwk0q.cjs';
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';
+1
-1
sdk-dist/utils/message/message.types.d.ts

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

export { E as BaseIncomingMessage, F as IncomingAuthMessage, y as IncomingAuthMessageData, K as IncomingBalanceMessage, A as IncomingBalanceMessageData, G as IncomingCloseMessage, h as IncomingMessage, Q as IncomingMessageId, N as IncomingRequestMessage, D as IncomingRequestMessageData, J as IncomingResizeMessage, z as IncomingResizeMessageData, O as OutgoingMessage, U as UserDetails } from '../../wander-embedded.types-CIHHwk0q.js';
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';
+1
-7
sdk-dist/utils/message/message.types.global.js

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

(function () {
'use strict';
})();
//# sourceMappingURL=message.types.global.js.map
(function(){'use strict';})();//# sourceMappingURL=message.types.global.js.map
//# sourceMappingURL=message.types.global.js.map
+0
-1
sdk-dist/utils/message/message.types.js

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

//# sourceMappingURL=message.types.js.map
//# sourceMappingURL=message.types.js.map
+1
-47
sdk-dist/utils/message/message.utils.cjs

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

'use strict';
// src/utils/message/message.utils.ts
function isIncomingMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message)) {
return false;
}
switch (message.type) {
case "embedded_auth": {
const data = message.data;
return !!(data && typeof data === "object" && "userDetails" in data);
}
case "embedded_close":
return true;
case "embedded_resize": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.routeType === "string" && typeof data.preferredLayoutType === "string" && typeof data.height === "number");
}
case "embedded_balance": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.amount === "number" && typeof data.currency === "string");
}
case "embedded_request": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.pendingRequests === "number");
}
default:
return false;
}
}
function isOutgoingMessage(message) {
if (!message || typeof message !== "object" || !message.type) return false;
switch (message.type) {
case "THEME_UPDATE":
return message.payload && typeof message.payload === "object" && typeof message.payload.primary === "string" && typeof message.payload.secondary === "string";
case "WALLET_CONNECTED":
return message.payload && typeof message.payload === "object" && typeof message.payload.address === "string";
case "WALLET_DISCONNECTED":
return true;
default:
return false;
}
}
exports.isIncomingMessage = isIncomingMessage;
exports.isOutgoingMessage = isOutgoingMessage;
//# sourceMappingURL=message.utils.cjs.map
'use strict';function n(e){if(!e||typeof e!="object"||!("id"in e&&"type"in e&&"data"in e))return false;switch(e.type){case "embedded_auth":{let t=e.data;return !!(t&&typeof t=="object"&&"userDetails"in t)}case "embedded_connect":case "embedded_disconnect":case "embedded_open":case "embedded_close":return true;case "embedded_resize":{let t=e.data;return !!(t&&typeof t=="object"&&typeof t.routeType=="string"&&typeof t.preferredLayoutType=="string"&&typeof t.height=="number")}case "embedded_balance":{let t=e.data;return !!(t&&typeof t=="object"&&(t.amount===null||typeof t.amount=="number")&&(t.currency===null||typeof t.currency=="string")&&typeof t.formattedBalance=="string")}case "embedded_request":{let t=e.data;return !!(t&&typeof t=="object"&&typeof t.pendingRequests=="number")}default:return false}}function o(e){if(!e||typeof e!="object"||!e.type)return false;switch(e.type){case "THEME_UPDATE":return e.payload&&typeof e.payload=="object"&&typeof e.payload.primary=="string"&&typeof e.payload.secondary=="string";case "WALLET_CONNECTED":return e.payload&&typeof e.payload=="object"&&typeof e.payload.address=="string";case "WALLET_DISCONNECTED":return true;default:return false}}exports.isIncomingMessage=n;exports.isOutgoingMessage=o;//# 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,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,MAAA,OAAO,CAAC,EACN,IACA,IAAA,OAAO,IAAS,KAAA,QAAA,IAChB,OAAO,IAAA,CAAK,MAAW,KAAA,QAAA,IACvB,OAAO,IAAA,CAAK,QAAa,KAAA,QAAA,CAAA;AAAA;AAE7B,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_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 typeof data.amount === \"number\" &&\n typeof data.currency === \"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.utils.ts"],"names":["isIncomingMessage","message","data","isOutgoingMessage"],"mappings":"aAYO,SAASA,CAAAA,CACdC,EAC4B,CAC5B,GACE,CAACA,CACD,EAAA,OAAOA,GAAY,QACnB,EAAA,EAAE,OAAQA,CAAW,EAAA,MAAA,GAAUA,GAAW,MAAUA,GAAAA,CAAAA,CAAAA,CAEpD,OAAO,MAGT,CAAA,OAAQA,EAAQ,IAA2B,EACzC,KAAK,eAAiB,CAAA,CACpB,IAAMC,CAAOD,CAAAA,CAAAA,CAAQ,KAErB,OAAO,CAAC,EAAEC,CAAQ,EAAA,OAAOA,GAAS,QAAY,EAAA,aAAA,GAAiBA,EACjE,CAEA,KAAK,mBACL,KAAK,qBAAA,CACL,KAAK,eAAA,CACL,KAAK,gBAAA,CACH,OAAO,KAET,CAAA,KAAK,kBAAmB,CACtB,IAAMA,EAAOD,CAAQ,CAAA,IAAA,CAErB,OAAO,CAAC,EACNC,GACA,OAAOA,CAAAA,EAAS,UAChB,OAAOA,CAAAA,CAAK,WAAc,QAC1B,EAAA,OAAOA,EAAK,mBAAwB,EAAA,QAAA,EACpC,OAAOA,CAAK,CAAA,MAAA,EAAW,SAE3B,CAEA,KAAK,mBAAoB,CACvB,IAAMA,EAAOD,CAAQ,CAAA,IAAA,CAErB,OAAO,CAAC,EACNC,GACA,OAAOA,CAAAA,EAAS,WACfA,CAAK,CAAA,MAAA,GAAW,IAAQ,EAAA,OAAOA,CAAK,CAAA,MAAA,EAAW,YAC/CA,CAAK,CAAA,QAAA,GAAa,MAAQ,OAAOA,CAAAA,CAAK,UAAa,QACpD,CAAA,EAAA,OAAOA,EAAK,gBAAoB,EAAA,QAAA,CAEpC,CAEA,KAAK,kBAAA,CAAoB,CACvB,IAAMA,CAAAA,CAAOD,EAAQ,IAErB,CAAA,OAAO,CAAC,EACNC,CAAAA,EACA,OAAOA,CAAS,EAAA,QAAA,EAChB,OAAOA,CAAK,CAAA,eAAA,EAAoB,SAEpC,CAEA,QACE,OAAO,MACX,CACF,CAGO,SAASC,CAAAA,CAAkBF,EAA0C,CAC1E,GAAI,CAACA,CAAW,EAAA,OAAOA,CAAY,EAAA,QAAA,EAAY,CAACA,CAAAA,CAAQ,KAAM,OAAO,MAAA,CAErE,OAAQA,CAAQ,CAAA,IAAA,EACd,KAAK,cAAA,CACH,OACEA,CAAQ,CAAA,OAAA,EACR,OAAOA,CAAQ,CAAA,OAAA,EAAY,UAC3B,OAAOA,CAAAA,CAAQ,QAAQ,OAAY,EAAA,QAAA,EACnC,OAAOA,CAAQ,CAAA,OAAA,CAAQ,WAAc,QAEzC,CAAA,KAAK,mBACH,OACEA,CAAAA,CAAQ,SACR,OAAOA,CAAAA,CAAQ,SAAY,QAC3B,EAAA,OAAOA,EAAQ,OAAQ,CAAA,OAAA,EAAY,SAEvC,KAAK,qBAAA,CACH,OAAO,KACT,CAAA,QACE,OAAO,MACX,CACF","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"]}
+1
-1
sdk-dist/utils/message/message.utils.d.cts

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

import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-CIHHwk0q.cjs';
import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-DZt7tGOM.cjs';

@@ -3,0 +3,0 @@ declare function isIncomingMessage(message: unknown): message is IncomingMessage;

+1
-1
sdk-dist/utils/message/message.utils.d.ts

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

import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-CIHHwk0q.js';
import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-DZt7tGOM.js';

@@ -3,0 +3,0 @@ declare function isIncomingMessage(message: unknown): message is IncomingMessage;

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

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

(function (exports) {
'use strict';
// src/utils/message/message.utils.ts
function isIncomingMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message)) {
return false;
}
switch (message.type) {
case "embedded_auth": {
const data = message.data;
return !!(data && typeof data === "object" && "userDetails" in data);
}
case "embedded_close":
return true;
case "embedded_resize": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.routeType === "string" && typeof data.preferredLayoutType === "string" && typeof data.height === "number");
}
case "embedded_balance": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.amount === "number" && typeof data.currency === "string");
}
case "embedded_request": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.pendingRequests === "number");
}
default:
return false;
}
}
function isOutgoingMessage(message) {
if (!message || typeof message !== "object" || !message.type) return false;
switch (message.type) {
case "THEME_UPDATE":
return message.payload && typeof message.payload === "object" && typeof message.payload.primary === "string" && typeof message.payload.secondary === "string";
case "WALLET_CONNECTED":
return message.payload && typeof message.payload === "object" && typeof message.payload.address === "string";
case "WALLET_DISCONNECTED":
return true;
default:
return false;
}
}
exports.isIncomingMessage = isIncomingMessage;
exports.isOutgoingMessage = isOutgoingMessage;
return exports;
})({});
//# sourceMappingURL=message.utils.global.js.map
(function(exports){'use strict';function a(e){if(!e||typeof e!="object"||!("id"in e&&"type"in e&&"data"in e))return false;switch(e.type){case "embedded_auth":{let t=e.data;return !!(t&&typeof t=="object"&&"userDetails"in t)}case "embedded_connect":case "embedded_disconnect":case "embedded_open":case "embedded_close":return true;case "embedded_resize":{let t=e.data;return !!(t&&typeof t=="object"&&typeof t.routeType=="string"&&typeof t.preferredLayoutType=="string"&&typeof t.height=="number")}case "embedded_balance":{let t=e.data;return !!(t&&typeof t=="object"&&(t.amount===null||typeof t.amount=="number")&&(t.currency===null||typeof t.currency=="string")&&typeof t.formattedBalance=="string")}case "embedded_request":{let t=e.data;return !!(t&&typeof t=="object"&&typeof t.pendingRequests=="number")}default:return false}}function n(e){if(!e||typeof e!="object"||!e.type)return false;switch(e.type){case "THEME_UPDATE":return e.payload&&typeof e.payload=="object"&&typeof e.payload.primary=="string"&&typeof e.payload.secondary=="string";case "WALLET_CONNECTED":return e.payload&&typeof e.payload=="object"&&typeof e.payload.address=="string";case "WALLET_DISCONNECTED":return true;default:return false}}exports.isIncomingMessage=a;exports.isOutgoingMessage=n;return exports;})({});//# sourceMappingURL=message.utils.global.js.map
//# sourceMappingURL=message.utils.global.js.map
+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,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,MAAA,OAAO,CAAC,EACN,IACA,IAAA,OAAO,IAAS,KAAA,QAAA,IAChB,OAAO,IAAA,CAAK,MAAW,KAAA,QAAA,IACvB,OAAO,IAAA,CAAK,QAAa,KAAA,QAAA,CAAA;EAAA;EAE7B,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_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 typeof data.amount === \"number\" &&\n typeof data.currency === \"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.utils.ts"],"names":["isIncomingMessage","message","data","isOutgoingMessage"],"mappings":"gCAYO,SAASA,CAAAA,CACdC,EAC4B,CAC5B,GACE,CAACA,CACD,EAAA,OAAOA,GAAY,QACnB,EAAA,EAAE,OAAQA,CAAW,EAAA,MAAA,GAAUA,GAAW,MAAUA,GAAAA,CAAAA,CAAAA,CAEpD,OAAO,MAGT,CAAA,OAAQA,EAAQ,IAA2B,EACzC,KAAK,eAAiB,CAAA,CACpB,IAAMC,CAAOD,CAAAA,CAAAA,CAAQ,KAErB,OAAO,CAAC,EAAEC,CAAQ,EAAA,OAAOA,GAAS,QAAY,EAAA,aAAA,GAAiBA,EACjE,CAEA,KAAK,mBACL,KAAK,qBAAA,CACL,KAAK,eAAA,CACL,KAAK,gBAAA,CACH,OAAO,KAET,CAAA,KAAK,kBAAmB,CACtB,IAAMA,EAAOD,CAAQ,CAAA,IAAA,CAErB,OAAO,CAAC,EACNC,GACA,OAAOA,CAAAA,EAAS,UAChB,OAAOA,CAAAA,CAAK,WAAc,QAC1B,EAAA,OAAOA,EAAK,mBAAwB,EAAA,QAAA,EACpC,OAAOA,CAAK,CAAA,MAAA,EAAW,SAE3B,CAEA,KAAK,mBAAoB,CACvB,IAAMA,EAAOD,CAAQ,CAAA,IAAA,CAErB,OAAO,CAAC,EACNC,GACA,OAAOA,CAAAA,EAAS,WACfA,CAAK,CAAA,MAAA,GAAW,IAAQ,EAAA,OAAOA,CAAK,CAAA,MAAA,EAAW,YAC/CA,CAAK,CAAA,QAAA,GAAa,MAAQ,OAAOA,CAAAA,CAAK,UAAa,QACpD,CAAA,EAAA,OAAOA,EAAK,gBAAoB,EAAA,QAAA,CAEpC,CAEA,KAAK,kBAAA,CAAoB,CACvB,IAAMA,CAAAA,CAAOD,EAAQ,IAErB,CAAA,OAAO,CAAC,EACNC,CAAAA,EACA,OAAOA,CAAS,EAAA,QAAA,EAChB,OAAOA,CAAK,CAAA,eAAA,EAAoB,SAEpC,CAEA,QACE,OAAO,MACX,CACF,CAGO,SAASC,CAAAA,CAAkBF,EAA0C,CAC1E,GAAI,CAACA,CAAW,EAAA,OAAOA,CAAY,EAAA,QAAA,EAAY,CAACA,CAAAA,CAAQ,KAAM,OAAO,MAAA,CAErE,OAAQA,CAAQ,CAAA,IAAA,EACd,KAAK,cAAA,CACH,OACEA,CAAQ,CAAA,OAAA,EACR,OAAOA,CAAQ,CAAA,OAAA,EAAY,UAC3B,OAAOA,CAAAA,CAAQ,QAAQ,OAAY,EAAA,QAAA,EACnC,OAAOA,CAAQ,CAAA,OAAA,CAAQ,WAAc,QAEzC,CAAA,KAAK,mBACH,OACEA,CAAAA,CAAQ,SACR,OAAOA,CAAAA,CAAQ,SAAY,QAC3B,EAAA,OAAOA,EAAQ,OAAQ,CAAA,OAAA,EAAY,SAEvC,KAAK,qBAAA,CACH,OAAO,KACT,CAAA,QACE,OAAO,MACX,CACF","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"]}
+1
-44
sdk-dist/utils/message/message.utils.js

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

// src/utils/message/message.utils.ts
function isIncomingMessage(message) {
if (!message || typeof message !== "object" || !("id" in message && "type" in message && "data" in message)) {
return false;
}
switch (message.type) {
case "embedded_auth": {
const data = message.data;
return !!(data && typeof data === "object" && "userDetails" in data);
}
case "embedded_close":
return true;
case "embedded_resize": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.routeType === "string" && typeof data.preferredLayoutType === "string" && typeof data.height === "number");
}
case "embedded_balance": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.amount === "number" && typeof data.currency === "string");
}
case "embedded_request": {
const data = message.data;
return !!(data && typeof data === "object" && typeof data.pendingRequests === "number");
}
default:
return false;
}
}
function isOutgoingMessage(message) {
if (!message || typeof message !== "object" || !message.type) return false;
switch (message.type) {
case "THEME_UPDATE":
return message.payload && typeof message.payload === "object" && typeof message.payload.primary === "string" && typeof message.payload.secondary === "string";
case "WALLET_CONNECTED":
return message.payload && typeof message.payload === "object" && typeof message.payload.address === "string";
case "WALLET_DISCONNECTED":
return true;
default:
return false;
}
}
export { isIncomingMessage, isOutgoingMessage };
//# sourceMappingURL=message.utils.js.map
function o(e){if(!e||typeof e!="object"||!("id"in e&&"type"in e&&"data"in e))return false;switch(e.type){case "embedded_auth":{let t=e.data;return !!(t&&typeof t=="object"&&"userDetails"in t)}case "embedded_connect":case "embedded_disconnect":case "embedded_open":case "embedded_close":return true;case "embedded_resize":{let t=e.data;return !!(t&&typeof t=="object"&&typeof t.routeType=="string"&&typeof t.preferredLayoutType=="string"&&typeof t.height=="number")}case "embedded_balance":{let t=e.data;return !!(t&&typeof t=="object"&&(t.amount===null||typeof t.amount=="number")&&(t.currency===null||typeof t.currency=="string")&&typeof t.formattedBalance=="string")}case "embedded_request":{let t=e.data;return !!(t&&typeof t=="object"&&typeof t.pendingRequests=="number")}default:return false}}function r(e){if(!e||typeof e!="object"||!e.type)return false;switch(e.type){case "THEME_UPDATE":return e.payload&&typeof e.payload=="object"&&typeof e.payload.primary=="string"&&typeof e.payload.secondary=="string";case "WALLET_CONNECTED":return e.payload&&typeof e.payload=="object"&&typeof e.payload.address=="string";case "WALLET_DISCONNECTED":return true;default:return false}}export{o as isIncomingMessage,r as isOutgoingMessage};//# 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,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,MAAA,OAAO,CAAC,EACN,IACA,IAAA,OAAO,IAAS,KAAA,QAAA,IAChB,OAAO,IAAA,CAAK,MAAW,KAAA,QAAA,IACvB,OAAO,IAAA,CAAK,QAAa,KAAA,QAAA,CAAA;AAAA;AAE7B,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_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 typeof data.amount === \"number\" &&\n typeof data.currency === \"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.utils.ts"],"names":["isIncomingMessage","message","data","isOutgoingMessage"],"mappings":"AAYO,SAASA,CAAAA,CACdC,EAC4B,CAC5B,GACE,CAACA,CACD,EAAA,OAAOA,GAAY,QACnB,EAAA,EAAE,OAAQA,CAAW,EAAA,MAAA,GAAUA,GAAW,MAAUA,GAAAA,CAAAA,CAAAA,CAEpD,OAAO,MAGT,CAAA,OAAQA,EAAQ,IAA2B,EACzC,KAAK,eAAiB,CAAA,CACpB,IAAMC,CAAOD,CAAAA,CAAAA,CAAQ,KAErB,OAAO,CAAC,EAAEC,CAAQ,EAAA,OAAOA,GAAS,QAAY,EAAA,aAAA,GAAiBA,EACjE,CAEA,KAAK,mBACL,KAAK,qBAAA,CACL,KAAK,eAAA,CACL,KAAK,gBAAA,CACH,OAAO,KAET,CAAA,KAAK,kBAAmB,CACtB,IAAMA,EAAOD,CAAQ,CAAA,IAAA,CAErB,OAAO,CAAC,EACNC,GACA,OAAOA,CAAAA,EAAS,UAChB,OAAOA,CAAAA,CAAK,WAAc,QAC1B,EAAA,OAAOA,EAAK,mBAAwB,EAAA,QAAA,EACpC,OAAOA,CAAK,CAAA,MAAA,EAAW,SAE3B,CAEA,KAAK,mBAAoB,CACvB,IAAMA,EAAOD,CAAQ,CAAA,IAAA,CAErB,OAAO,CAAC,EACNC,GACA,OAAOA,CAAAA,EAAS,WACfA,CAAK,CAAA,MAAA,GAAW,IAAQ,EAAA,OAAOA,CAAK,CAAA,MAAA,EAAW,YAC/CA,CAAK,CAAA,QAAA,GAAa,MAAQ,OAAOA,CAAAA,CAAK,UAAa,QACpD,CAAA,EAAA,OAAOA,EAAK,gBAAoB,EAAA,QAAA,CAEpC,CAEA,KAAK,kBAAA,CAAoB,CACvB,IAAMA,CAAAA,CAAOD,EAAQ,IAErB,CAAA,OAAO,CAAC,EACNC,CAAAA,EACA,OAAOA,CAAS,EAAA,QAAA,EAChB,OAAOA,CAAK,CAAA,eAAA,EAAoB,SAEpC,CAEA,QACE,OAAO,MACX,CACF,CAGO,SAASC,CAAAA,CAAkBF,EAA0C,CAC1E,GAAI,CAACA,CAAW,EAAA,OAAOA,CAAY,EAAA,QAAA,EAAY,CAACA,CAAAA,CAAQ,KAAM,OAAO,MAAA,CAErE,OAAQA,CAAQ,CAAA,IAAA,EACd,KAAK,cAAA,CACH,OACEA,CAAQ,CAAA,OAAA,EACR,OAAOA,CAAQ,CAAA,OAAA,EAAY,UAC3B,OAAOA,CAAAA,CAAQ,QAAQ,OAAY,EAAA,QAAA,EACnC,OAAOA,CAAQ,CAAA,OAAA,CAAQ,WAAc,QAEzC,CAAA,KAAK,mBACH,OACEA,CAAAA,CAAQ,SACR,OAAOA,CAAAA,CAAQ,SAAY,QAC3B,EAAA,OAAOA,EAAQ,OAAQ,CAAA,OAAA,EAAY,SAEvC,KAAK,qBAAA,CACH,OAAO,KACT,CAAA,QACE,OAAO,MACX,CACF","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"]}
+1
-14
sdk-dist/utils/styles/styles.utils.cjs

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

'use strict';
// 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`);
}
}
exports.addCSSVariables = addCSSVariables;
//# sourceMappingURL=styles.utils.cjs.map
'use strict';function y(o,r,s=""){for(let t in r){let e=r[t];typeof e=="string"?o.style.setProperty(`--${t}`,e):typeof e=="number"&&o.style.setProperty(`--${t}${s}`,`${e}px`);}}exports.addCSSVariables=y;//# 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/utils/styles/styles.utils.ts"],"names":["addCSSVariables","element","vars","suffix","key","value"],"mappings":"aAAO,SAASA,EAAmBC,CAAsBC,CAAAA,CAAAA,CAASC,EAAS,EAAI,CAAA,CAC7E,QAAWC,CAAOF,IAAAA,CAAAA,CAAM,CACtB,IAAMG,EAAQH,CAAKE,CAAAA,CAAG,EAElB,OAAOC,CAAAA,EAAU,SAAUJ,CAAQ,CAAA,KAAA,CAAM,WAAY,CAAA,CAAA,EAAA,EAAKG,CAAG,CAAIC,CAAAA,CAAAA,CAAK,EACjE,OAAOA,CAAAA,EAAU,UACxBJ,CAAQ,CAAA,KAAA,CAAM,YAAY,CAAKG,EAAAA,EAAAA,CAAG,GAAGD,CAAM,CAAA,CAAA,CAAI,GAAGE,CAAK,CAAA,EAAA,CAAI,EAC/D,CACF","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"]}
+1
-19
sdk-dist/utils/styles/styles.utils.global.js

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

(function (exports) {
'use strict';
// 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`);
}
}
exports.addCSSVariables = addCSSVariables;
return exports;
})({});
//# sourceMappingURL=styles.utils.global.js.map
(function(exports){'use strict';function n(o,r,s=""){for(let t in r){let e=r[t];typeof e=="string"?o.style.setProperty(`--${t}`,e):typeof e=="number"&&o.style.setProperty(`--${t}${s}`,`${e}px`);}}exports.addCSSVariables=n;return exports;})({});//# sourceMappingURL=styles.utils.global.js.map
//# sourceMappingURL=styles.utils.global.js.map
+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":["../../../src/utils/styles/styles.utils.ts"],"names":["addCSSVariables","element","vars","suffix","key","value"],"mappings":"gCAAO,SAASA,EAAmBC,CAAsBC,CAAAA,CAAAA,CAASC,EAAS,EAAI,CAAA,CAC7E,QAAWC,CAAOF,IAAAA,CAAAA,CAAM,CACtB,IAAMG,EAAQH,CAAKE,CAAAA,CAAG,EAElB,OAAOC,CAAAA,EAAU,SAAUJ,CAAQ,CAAA,KAAA,CAAM,WAAY,CAAA,CAAA,EAAA,EAAKG,CAAG,CAAIC,CAAAA,CAAAA,CAAK,EACjE,OAAOA,CAAAA,EAAU,UACxBJ,CAAQ,CAAA,KAAA,CAAM,YAAY,CAAKG,EAAAA,EAAAA,CAAG,GAAGD,CAAM,CAAA,CAAA,CAAI,GAAGE,CAAK,CAAA,EAAA,CAAI,EAC/D,CACF","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"]}
+1
-12
sdk-dist/utils/styles/styles.utils.js

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

// 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`);
}
}
export { addCSSVariables };
//# sourceMappingURL=styles.utils.js.map
function f(o,r,s=""){for(let t in r){let e=r[t];typeof e=="string"?o.style.setProperty(`--${t}`,e):typeof e=="number"&&o.style.setProperty(`--${t}${s}`,`${e}px`);}}export{f as addCSSVariables};//# 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/utils/styles/styles.utils.ts"],"names":["addCSSVariables","element","vars","suffix","key","value"],"mappings":"AAAO,SAASA,EAAmBC,CAAsBC,CAAAA,CAAAA,CAASC,EAAS,EAAI,CAAA,CAC7E,QAAWC,CAAOF,IAAAA,CAAAA,CAAM,CACtB,IAAMG,EAAQH,CAAKE,CAAAA,CAAG,EAElB,OAAOC,CAAAA,EAAU,SAAUJ,CAAQ,CAAA,KAAA,CAAM,WAAY,CAAA,CAAA,EAAA,EAAKG,CAAG,CAAIC,CAAAA,CAAAA,CAAK,EACjE,OAAOA,CAAAA,EAAU,UACxBJ,CAAQ,CAAA,KAAA,CAAM,YAAY,CAAKG,EAAAA,EAAAA,CAAG,GAAGD,CAAM,CAAA,CAAA,CAAI,GAAGE,CAAK,CAAA,EAAA,CAAI,EAC/D,CACF","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"]}
+1
-21
sdk-dist/utils/url/url.utils.cjs

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

'use strict';
// src/utils/url/url.utils.ts
var PARAM_CLIENT_ID = "client-id";
var PARAM_SERVER_BASE_URL = "server-base-url";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
function getEmbeddedURL({
clientId,
baseURL,
baseServerURL = ""
}) {
const url = new URL(baseURL);
const { searchParams } = url;
searchParams.set(PARAM_CLIENT_ID, clientId);
searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);
return url.toString();
}
exports.getEmbeddedURL = getEmbeddedURL;
//# sourceMappingURL=url.utils.cjs.map
'use strict';var i="client-id",o="server-base-url",R="ancestor-origin";function d({clientId:n,baseURL:r,baseServerURL:s=""}){let t=new URL(r),{searchParams:e}=t;return e.set(i,n),e.set(o,s),e.set(R,window.location.origin),t.toString()}exports.getEmbeddedURL=d;//# sourceMappingURL=url.utils.cjs.map
//# sourceMappingURL=url.utils.cjs.map
+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":["PARAM_CLIENT_ID","PARAM_SERVER_BASE_URL","PARAM_ANCESTOR_ORIGIN","getEmbeddedURL","clientId","baseURL","baseServerURL","url","searchParams"],"mappings":"aASA,IAAMA,CAAAA,CAAkB,YAClBC,CAAwB,CAAA,iBAAA,CACxBC,EAAwB,iBAQvB,CAAA,SAASC,CAAe,CAAA,CAC7B,QAAAC,CAAAA,CAAAA,CACA,QAAAC,CACA,CAAA,aAAA,CAAAC,EAAgB,EAClB,CAAA,CAA0B,CACxB,IAAMC,CAAAA,CAAM,IAAI,GAAA,CAAIF,CAAO,CAAA,CACrB,CAAE,YAAAG,CAAAA,CAAa,EAAID,CAEzB,CAAA,OAAAC,EAAa,GAAIR,CAAAA,CAAAA,CAAiBI,CAAQ,CAAA,CAC1CI,CAAa,CAAA,GAAA,CAAIP,EAAuBK,CAAa,CAAA,CACrDE,CAAa,CAAA,GAAA,CAAIN,CAAuB,CAAA,MAAA,CAAO,SAAS,MAAM,CAAA,CAEvDK,CAAI,CAAA,QAAA,EACb","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"]}
+1
-26
sdk-dist/utils/url/url.utils.global.js

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

(function (exports) {
'use strict';
// src/utils/url/url.utils.ts
var PARAM_CLIENT_ID = "client-id";
var PARAM_SERVER_BASE_URL = "server-base-url";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
function getEmbeddedURL({
clientId,
baseURL,
baseServerURL = ""
}) {
const url = new URL(baseURL);
const { searchParams } = url;
searchParams.set(PARAM_CLIENT_ID, clientId);
searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);
return url.toString();
}
exports.getEmbeddedURL = getEmbeddedURL;
return exports;
})({});
//# sourceMappingURL=url.utils.global.js.map
(function(exports){'use strict';var i="client-id",o="server-base-url",R="ancestor-origin";function c({clientId:n,baseURL:r,baseServerURL:s=""}){let t=new URL(r),{searchParams:e}=t;return e.set(i,n),e.set(o,s),e.set(R,window.location.origin),t.toString()}exports.getEmbeddedURL=c;return exports;})({});//# sourceMappingURL=url.utils.global.js.map
//# sourceMappingURL=url.utils.global.js.map
+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":["PARAM_CLIENT_ID","PARAM_SERVER_BASE_URL","PARAM_ANCESTOR_ORIGIN","getEmbeddedURL","clientId","baseURL","baseServerURL","url","searchParams"],"mappings":"gCASA,IAAMA,CAAAA,CAAkB,YAClBC,CAAwB,CAAA,iBAAA,CACxBC,EAAwB,iBAQvB,CAAA,SAASC,CAAe,CAAA,CAC7B,QAAAC,CAAAA,CAAAA,CACA,QAAAC,CACA,CAAA,aAAA,CAAAC,EAAgB,EAClB,CAAA,CAA0B,CACxB,IAAMC,CAAAA,CAAM,IAAI,GAAA,CAAIF,CAAO,CAAA,CACrB,CAAE,YAAAG,CAAAA,CAAa,EAAID,CAEzB,CAAA,OAAAC,EAAa,GAAIR,CAAAA,CAAAA,CAAiBI,CAAQ,CAAA,CAC1CI,CAAa,CAAA,GAAA,CAAIP,EAAuBK,CAAa,CAAA,CACrDE,CAAa,CAAA,GAAA,CAAIN,CAAuB,CAAA,MAAA,CAAO,SAAS,MAAM,CAAA,CAEvDK,CAAI,CAAA,QAAA,EACb","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"]}
+1
-19
sdk-dist/utils/url/url.utils.js

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

// src/utils/url/url.utils.ts
var PARAM_CLIENT_ID = "client-id";
var PARAM_SERVER_BASE_URL = "server-base-url";
var PARAM_ANCESTOR_ORIGIN = "ancestor-origin";
function getEmbeddedURL({
clientId,
baseURL,
baseServerURL = ""
}) {
const url = new URL(baseURL);
const { searchParams } = url;
searchParams.set(PARAM_CLIENT_ID, clientId);
searchParams.set(PARAM_SERVER_BASE_URL, baseServerURL);
searchParams.set(PARAM_ANCESTOR_ORIGIN, window.location.origin);
return url.toString();
}
export { getEmbeddedURL };
//# sourceMappingURL=url.utils.js.map
var i="client-id",o="server-base-url",R="ancestor-origin";function a({clientId:n,baseURL:r,baseServerURL:s=""}){let t=new URL(r),{searchParams:e}=t;return e.set(i,n),e.set(o,s),e.set(R,window.location.origin),t.toString()}export{a as getEmbeddedURL};//# sourceMappingURL=url.utils.js.map
//# sourceMappingURL=url.utils.js.map
+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":["PARAM_CLIENT_ID","PARAM_SERVER_BASE_URL","PARAM_ANCESTOR_ORIGIN","getEmbeddedURL","clientId","baseURL","baseServerURL","url","searchParams"],"mappings":"AASA,IAAMA,CAAAA,CAAkB,YAClBC,CAAwB,CAAA,iBAAA,CACxBC,EAAwB,iBAQvB,CAAA,SAASC,CAAe,CAAA,CAC7B,QAAAC,CAAAA,CAAAA,CACA,QAAAC,CACA,CAAA,aAAA,CAAAC,EAAgB,EAClB,CAAA,CAA0B,CACxB,IAAMC,CAAAA,CAAM,IAAI,GAAA,CAAIF,CAAO,CAAA,CACrB,CAAE,YAAAG,CAAAA,CAAa,EAAID,CAEzB,CAAA,OAAAC,EAAa,GAAIR,CAAAA,CAAAA,CAAiBI,CAAQ,CAAA,CAC1CI,CAAa,CAAA,GAAA,CAAIP,EAAuBK,CAAa,CAAA,CACrDE,CAAa,CAAA,GAAA,CAAIN,CAAuB,CAAA,MAAA,CAAO,SAAS,MAAM,CAAA,CAEvDK,CAAI,CAAA,QAAA,EACb","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"]}
+11
-6
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-CIHHwk0q.cjs';
import { U as UserDetails, g as RouteConfig, B as BalanceInfo, i as WanderEmbeddedOptions } from './wander-embedded.types-DZt7tGOM.cjs';

@@ -47,8 +47,5 @@ /**

private iframeRef;
private shouldOpenAutomatically;
private openReason;
private allowOpeningAutomatically;
/**
* Indicates whether the wallet interface is currently open/visible
*/
isOpen: boolean;
/**
* Contains details about the authenticated user, or null if not authenticated

@@ -89,2 +86,3 @@ */

private handleButtonClick;
private _open;
/**

@@ -96,2 +94,3 @@ * Opens the wallet interface

open(): void;
private _close;
/**

@@ -113,2 +112,8 @@ * Closes the wallet interface

/**
* Indicates whether the wallet interface is currently open/visible
*/
get isOpen(): boolean;
private get shouldOpenAutomatically();
private get shouldCloseAutomatically();
/**
* Current width of the wallet interface in pixels

@@ -115,0 +120,0 @@ * @returns Width if available

+11
-6
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-CIHHwk0q.js';
import { U as UserDetails, g as RouteConfig, B as BalanceInfo, i as WanderEmbeddedOptions } from './wander-embedded.types-DZt7tGOM.js';

@@ -47,8 +47,5 @@ /**

private iframeRef;
private shouldOpenAutomatically;
private openReason;
private allowOpeningAutomatically;
/**
* Indicates whether the wallet interface is currently open/visible
*/
isOpen: boolean;
/**
* Contains details about the authenticated user, or null if not authenticated

@@ -89,2 +86,3 @@ */

private handleButtonClick;
private _open;
/**

@@ -96,2 +94,3 @@ * Opens the wallet interface

open(): void;
private _close;
/**

@@ -113,2 +112,8 @@ * Closes the wallet interface

/**
* Indicates whether the wallet interface is currently open/visible
*/
get isOpen(): boolean;
private get shouldOpenAutomatically();
private get shouldCloseAutomatically();
/**
* Current width of the wallet interface in pixels

@@ -115,0 +120,0 @@ * @returns Width if available

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

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

'use strict';
// src/wander-embedded.types.ts
var LAYOUT_TYPES = [
"modal",
"popup",
"sidebar",
"half"
];
function isRouteConfig(obj) {
return !!(obj && typeof obj === "object" && "type" in obj && LAYOUT_TYPES.includes(obj.type));
}
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
exports.LAYOUT_TYPES = LAYOUT_TYPES;
exports.isRouteConfig = isRouteConfig;
exports.isThemeRecord = isThemeRecord;
//# sourceMappingURL=wander-embedded.types.cjs.map
'use strict';var t=["modal","popup","sidebar","half"];function o(e){return !!(e&&typeof e=="object"&&"type"in e&&t.includes(e.type))}function r(e){return !!(e&&typeof e=="object"&&("light"in e||"dark"in e))}exports.LAYOUT_TYPES=t;exports.isRouteConfig=o;exports.isThemeRecord=r;//# sourceMappingURL=wander-embedded.types.cjs.map
//# sourceMappingURL=wander-embedded.types.cjs.map
+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;AA2KO,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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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":["LAYOUT_TYPES","isRouteConfig","obj","isThemeRecord","cssVars"],"mappings":"aAyJO,IAAMA,EAAe,CAC1B,OAAA,CACA,QACA,SACA,CAAA,MACF,EAMO,SAASC,CAAAA,CAAcC,CAAmC,CAAA,CAC/D,OAAO,CAAC,EACNA,GACA,OAAOA,CAAAA,EAAQ,UACf,MAAUA,GAAAA,CAAAA,EACVF,CAAa,CAAA,QAAA,CAASE,EAAI,IAAkB,CAAA,CAEhD,CAqLO,SAASC,CAAAA,CACdC,EACsD,CACtD,OAAO,CAAC,EACNA,GACA,OAAOA,CAAAA,EAAY,WAClB,OAAWA,GAAAA,CAAAA,EAAW,SAAUA,CAErC,CAAA,CAAA","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"]}
+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, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, m 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, q as WanderEmbeddedClickOutsideBehavior, o as WanderEmbeddedComponentConfig, n as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, p as isThemeRecord } from './wander-embedded.types-CIHHwk0q.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';
+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, g as RouteConfig, R as RouteType, S as SidebarLayoutConfig, m 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, q as WanderEmbeddedClickOutsideBehavior, o as WanderEmbeddedComponentConfig, n as WanderEmbeddedComponentOptions, r as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, x as WanderEmbeddedModalCSSVars, i as WanderEmbeddedOptions, t as WanderEmbeddedPopupPosition, l as isRouteConfig, p as isThemeRecord } from './wander-embedded.types-CIHHwk0q.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';
+1
-25
sdk-dist/wander-embedded.types.global.js

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

(function (exports) {
'use strict';
// src/wander-embedded.types.ts
var LAYOUT_TYPES = [
"modal",
"popup",
"sidebar",
"half"
];
function isRouteConfig(obj) {
return !!(obj && typeof obj === "object" && "type" in obj && LAYOUT_TYPES.includes(obj.type));
}
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
exports.LAYOUT_TYPES = LAYOUT_TYPES;
exports.isRouteConfig = isRouteConfig;
exports.isThemeRecord = isThemeRecord;
return exports;
})({});
//# sourceMappingURL=wander-embedded.types.global.js.map
(function(exports){'use strict';var t=["modal","popup","sidebar","half"];function n(e){return !!(e&&typeof e=="object"&&"type"in e&&t.includes(e.type))}function o(e){return !!(e&&typeof e=="object"&&("light"in e||"dark"in e))}exports.LAYOUT_TYPES=t;exports.isRouteConfig=n;exports.isThemeRecord=o;return exports;})({});//# sourceMappingURL=wander-embedded.types.global.js.map
//# sourceMappingURL=wander-embedded.types.global.js.map
+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;EA2KO,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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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":["LAYOUT_TYPES","isRouteConfig","obj","isThemeRecord","cssVars"],"mappings":"gCAyJO,IAAMA,EAAe,CAC1B,OAAA,CACA,QACA,SACA,CAAA,MACF,EAMO,SAASC,CAAAA,CAAcC,CAAmC,CAAA,CAC/D,OAAO,CAAC,EACNA,GACA,OAAOA,CAAAA,EAAQ,UACf,MAAUA,GAAAA,CAAAA,EACVF,CAAa,CAAA,QAAA,CAASE,EAAI,IAAkB,CAAA,CAEhD,CAqLO,SAASC,CAAAA,CACdC,EACsD,CACtD,OAAO,CAAC,EACNA,GACA,OAAOA,CAAAA,EAAY,WAClB,OAAWA,GAAAA,CAAAA,EAAW,SAAUA,CAErC,CAAA,CAAA","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"]}
+1
-16
sdk-dist/wander-embedded.types.js

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

// src/wander-embedded.types.ts
var LAYOUT_TYPES = [
"modal",
"popup",
"sidebar",
"half"
];
function isRouteConfig(obj) {
return !!(obj && typeof obj === "object" && "type" in obj && LAYOUT_TYPES.includes(obj.type));
}
function isThemeRecord(cssVars) {
return !!(cssVars && typeof cssVars === "object" && ("light" in cssVars || "dark" in cssVars));
}
export { LAYOUT_TYPES, isRouteConfig, isThemeRecord };
//# sourceMappingURL=wander-embedded.types.js.map
var t=["modal","popup","sidebar","half"];function r(e){return !!(e&&typeof e=="object"&&"type"in e&&t.includes(e.type))}function i(e){return !!(e&&typeof e=="object"&&("light"in e||"dark"in e))}export{t as LAYOUT_TYPES,r as isRouteConfig,i as isThemeRecord};//# sourceMappingURL=wander-embedded.types.js.map
//# sourceMappingURL=wander-embedded.types.js.map
+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;AA2KO,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;\n\n /**\n * Currency code.\n */\n currency: Currency;\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?: (pendingRequests: number) => 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 * Behavior when clicking outside the iframe.\n * Controls how the iframe responds when users click outside of it.\n */\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. The user must click the close icon.\n * - true: Will always close when clicking outside, even if the backdrop is not visible.\n * @default \"auto\"\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\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: WanderEmbeddedClickOutsideBehavior;\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":["LAYOUT_TYPES","isRouteConfig","obj","isThemeRecord","cssVars"],"mappings":"AAyJO,IAAMA,EAAe,CAC1B,OAAA,CACA,QACA,SACA,CAAA,MACF,EAMO,SAASC,CAAAA,CAAcC,CAAmC,CAAA,CAC/D,OAAO,CAAC,EACNA,GACA,OAAOA,CAAAA,EAAQ,UACf,MAAUA,GAAAA,CAAAA,EACVF,CAAa,CAAA,QAAA,CAASE,EAAI,IAAkB,CAAA,CAEhD,CAqLO,SAASC,CAAAA,CACdC,EACsD,CACtD,OAAO,CAAC,EACNA,GACA,OAAOA,CAAAA,EAAY,WAClB,OAAWA,GAAAA,CAAAA,EAAW,SAAUA,CAErC,CAAA,CAAA","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"]}
-719
sdk-dist/wander-embedded.types-CIHHwk0q.d.cts
interface UserDetails {
}
interface IncomingAuthMessageData {
userDetails: null | UserDetails;
}
type IncomingResizeMessageData = RouteConfig;
type IncomingBalanceMessageData = BalanceInfo;
interface IncomingRequestMessageData {
pendingRequests: number;
}
interface BaseIncomingMessage<K extends string = string, D = void> {
id: string;
type: K;
data: D;
}
type IncomingAuthMessage = BaseIncomingMessage<"embedded_auth", IncomingAuthMessageData>;
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 | 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;
/**
* Currency code.
*/
currency: Currency;
}
/** 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?: (pendingRequests: number) => 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>>>;
/**
* Behavior when clicking outside the iframe.
* Controls how the iframe responds when users click outside of it.
*/
type WanderEmbeddedClickOutsideBehavior = "auto" | boolean;
/**
* 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:
* - "auto": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.
* - false: Will never close. The user must click the close icon.
* - true: Will always close when clicking outside, even if the backdrop is not visible.
* @default "auto"
*/
clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;
}
/**
* 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: WanderEmbeddedClickOutsideBehavior;
}
/**
* 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 IncomingCloseMessage as G, type HalfLayoutConfig as H, type ImgPath as I, type IncomingResizeMessage as J, type IncomingBalanceMessage as K, type LayoutConfig as L, type ModalLayoutConfig as M, type IncomingRequestMessage as N, type OutgoingMessage as O, type PopupLayoutConfig as P, type IncomingMessageId as Q, type RouteType as R, type SidebarLayoutConfig as S, type ThemeVariant as T, type UserDetails as U, type WanderEmbeddedButtonCSSVars as W, 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 ThemeSetting as m, type WanderEmbeddedComponentOptions as n, type WanderEmbeddedComponentConfig as o, isThemeRecord as p, type WanderEmbeddedClickOutsideBehavior 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 };
-719
sdk-dist/wander-embedded.types-CIHHwk0q.d.ts
interface UserDetails {
}
interface IncomingAuthMessageData {
userDetails: null | UserDetails;
}
type IncomingResizeMessageData = RouteConfig;
type IncomingBalanceMessageData = BalanceInfo;
interface IncomingRequestMessageData {
pendingRequests: number;
}
interface BaseIncomingMessage<K extends string = string, D = void> {
id: string;
type: K;
data: D;
}
type IncomingAuthMessage = BaseIncomingMessage<"embedded_auth", IncomingAuthMessageData>;
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 | 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;
/**
* Currency code.
*/
currency: Currency;
}
/** 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?: (pendingRequests: number) => 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>>>;
/**
* Behavior when clicking outside the iframe.
* Controls how the iframe responds when users click outside of it.
*/
type WanderEmbeddedClickOutsideBehavior = "auto" | boolean;
/**
* 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:
* - "auto": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.
* - false: Will never close. The user must click the close icon.
* - true: Will always close when clicking outside, even if the backdrop is not visible.
* @default "auto"
*/
clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;
}
/**
* 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: WanderEmbeddedClickOutsideBehavior;
}
/**
* 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 IncomingCloseMessage as G, type HalfLayoutConfig as H, type ImgPath as I, type IncomingResizeMessage as J, type IncomingBalanceMessage as K, type LayoutConfig as L, type ModalLayoutConfig as M, type IncomingRequestMessage as N, type OutgoingMessage as O, type PopupLayoutConfig as P, type IncomingMessageId as Q, type RouteType as R, type SidebarLayoutConfig as S, type ThemeVariant as T, type UserDetails as U, type WanderEmbeddedButtonCSSVars as W, 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 ThemeSetting as m, type WanderEmbeddedComponentOptions as n, type WanderEmbeddedComponentConfig as o, isThemeRecord as p, type WanderEmbeddedClickOutsideBehavior 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