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

@wanderapp/embed-sdk

Package Overview
Dependencies
Maintainers
3
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.2
 to
0.0.3
+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 };
+1
-1
package.json
{
"name": "@wanderapp/embed-sdk",
"version": "0.0.2",
"version": "0.0.3",
"description": "Wander Embedded SDK.",

@@ -5,0 +5,0 @@ "author": "wanderapp",

+509
-20
README.md
# Wander Embedded SDK
## Dev Setup
[![npm version](https://img.shields.io/npm/v/@wanderapp/embed-sdk.svg)](https://www.npmjs.com/package/@wanderapp/embed-sdk)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
A lightweight, customizable SDK for integrating Wander wallet functionality into your web applications.
## Features
- 🔌 **Easy Integration**: Simple API to embed Wander wallet functionality in any web app
- 🎨 **Customizable UI**: Extensive theming options for both light and dark modes
- 📱 **Responsive Design**: Adapts to different screen sizes with multiple layout options
- 🔒 **Secure**: Communication with Wander wallet happens in a secure iframe
- 🔔 **Event Callbacks**: Listen to authentication, balance changes, and transaction requests
## Installation
```bash
npm install @wanderapp/embed-sdk
```
or
```bash
yarn add @wanderapp/embed-sdk
```
## Basic Usage
### React
```javascript
import { useEffect, useState } from "react";
import { WanderEmbedded } from "@wanderapp/embed-sdk";
function WalletConnect() {
const [instance, setInstance] = useState(null);
useEffect(() => {
// Initialize the wallet
const wanderInstance = new WanderEmbedded({
iframe: {
routeLayout: {
auth: "modal"
}
},
button: {
position: "bottom-right",
theme: "light",
label: true,
wanderLogo: "default"
}
});
setInstance(wanderInstance);
// Clean up on unmount
return () => {
if (wanderInstance) {
wanderInstance.destroy();
}
};
}, []);
return ...;
}
export default WalletConnect;
```
## Configuration Options
```javascript
const wander = new WanderEmbedded({
// Button configuration
button: {
position: "bottom-right", // "bottom-right", "bottom-left", "top-right", "top-left", "static"
theme: "system",
wanderLogo: "default", // 'none', 'default', or 'text-color'
label: true
},
// Iframe configuration
iframe: {
routeLayout: {
auth: "popup" // "popup" | "modal" | "half" | "sidebar";
}
}
});
```
## Advanced Configuration
### Button Configuration
#### Custom Button Styling
```javascript
const wander = new WanderEmbedded({
button: {
position: "top-right",
cssVars: {
// Light theme variables
light: {
background: "#ffffff",
color: "#000000",
borderRadius: 16,
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
},
// Dark theme variables
dark: {
background: "#1a1a1a",
color: "#ffffff",
borderRadius: 16,
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
}
}
}
});
```
#### Custom CSS Styles
You can add custom CSS styles to the button using `customStyles` option. When using this option, you must use CSS selectors to target specific elements.
Available selectors:
- `:host` - Targets the button container
- `.button` - Targets the button element
- `.wanderLogo` - Targets the Wander logo SVG
- `.label` - Targets the button text label
- `.balance` - Targets the balance display
- `.indicator` - Targets the connection status indicator
- `.dappLogo` - Targets the dApp logo image
- `.notifications` - Targets the notifications badge
Example usage:
```javascript
const wander = new WanderEmbedded({
button: {
customStyles: `
/* Position the button container */
:host {
position: fixed;
top: 20px;
right: 20px;
}
/* Target the button element */
.button {
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Target the Wander logo */
.wanderLogo {
width: 24px;
height: 24px;
}
/* Target the button label */
.label {
font-size: 14px;
font-weight: 500;
}
/* Target the balance display */
.balance {
font-size: 12px;
opacity: 0.8;
}
/* Target the connection indicator */
.indicator {
width: 6px;
height: 6px;
}
/* Target the dApp logo */
.dappLogo {
width: 18px;
height: 18px;
}
/* Target the notifications badge */
.notifications {
font-size: 10px;
padding: 2px 6px;
}
`
}
});
```
The button element has several CSS classes that are added based on its state:
- `.isAuthenticated` - Added when the user is authenticated
- `.isConnected` - Added when the wallet is connected
- `.isOpen` - Added when the wallet interface is open
You can use these classes in your `customStyles` to style different states:
```javascript
customStyles: `
.button.isAuthenticated {
border-color: green;
}
.button.isConnected {
background: rgba(0, 255, 0, 0.1);
}
.button.isOpen {
transform: scale(0.95);
}
`;
```
#### Custom Button Positioning
There are two approaches to positioning the Wander button:
##### 1. Using Predefined Positions
```javascript
const wander = new WanderEmbedded({
button: {
position: "bottom-right" // Options: "bottom-right", "bottom-left", "top-right", "top-left"
}
});
```
##### 2. Using Custom Positioning with "static"
You have three methods for custom positioning:
###### 2.1. Using a Parent Element
First, create a container element:
```html
<div id="wanderButtonContainer"></div>
```
Then reference it in your configuration:
```javascript
const wander = new WanderEmbedded({
button: {
position: "static",
parent: document.getElementById("wanderButtonContainer")
}
});
```
###### 2.2. Using Custom Styles
```javascript
const wander = new WanderEmbedded({
button: {
position: "static",
// Using customStyles for precise control over button appearance and position
customStyles: `
/* Position the button container */
:host {
position: fixed;
top: 20px;
right: 20px;
}
/* Style the button itself */
.button {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
}
`
}
});
```
###### 2.3. Using External CSS
Define the button with a custom ID:
```javascript
const wander = new WanderEmbedded({
button: {
position: "static",
id: "my-wander-button" // Default is "wanderEmbeddedButtonHost"
}
});
```
Then style it with external CSS:
```css
/* Position the button container */
#my-wander-button {
position: fixed;
top: 20px;
right: 20px;
}
```
### Iframe Configuration
#### Custom Modal Layouts
```javascript
const wander = new WanderEmbedded({
iframe: {
routeLayout: {
// Different layouts for different routes
default: {
type: "popup",
position: "bottom-right"
},
auth: {
type: "modal"
},
"auth-request": {
type: "sidebar",
position: "right",
expanded: true
}
},
cssVars: {
background: "#f5f5f5",
borderRadius: 12,
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12)"
}
}
});
```
#### Custom CSS Styles
You can add custom CSS styles to the iframe using `customStyles` option. When using this option, you must use CSS selectors to target specific elements.
Available selectors:
- `.backdrop` - Targets the backdrop overlay behind the iframe
- `.backdrop.show` - Applied when the backdrop is visible
- `.iframe-wrapper` - Targets the container that wraps the iframe
- `.iframe-wrapper.show` - Applied when the iframe is visible
- `.iframe` - Targets the actual iframe element
- `.half-image` - Targets the image element used in half layout mode
- `.half-image.show` - Applied when the half-image is visible
Example usage:
```javascript
const wander = new WanderEmbedded({
iframe: {
customStyles: `
/* Style the backdrop */
.backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
transition: opacity 200ms ease;
}
.backdrop.show {
opacity: 1;
}
/* Style the iframe wrapper */
.iframe-wrapper {
border: none;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
transition: transform 200ms ease, opacity 200ms ease;
}
.iframe-wrapper.show {
opacity: 1;
transform: none;
}
/* Style the iframe itself */
.iframe {
border-radius: inherit;
background: white;
}
/* Style the half-image */
.half-image {
object-fit: cover;
transition: opacity 300ms ease;
}
.half-image.show {
opacity: 1;
}
/* Mobile-specific styles */
@media (max-width: 540px) {
.backdrop {
backdrop-filter: none;
}
.iframe-wrapper {
border-radius: 0;
}
}
`
}
});
```
The iframe elements have several data attributes that you can use for conditional styling:
- `[data-layout="popup|modal|sidebar|half"]` - Current layout type
- `[data-position="left|right|top-left|top-right|bottom-left|bottom-right"]` - Position of the iframe
- `[data-expanded="true|false"]` - Whether the iframe is in expanded mode
- `[data-expand-on-mobile="true|false"]` - Whether the iframe expands on mobile devices
You can use these attributes in your `customStyles` to style different states:
```javascript
customStyles: `
/* Style popup layout */
.iframe-wrapper[data-layout="popup"] {
transform: scale(0.95);
}
.iframe-wrapper[data-layout="popup"].show {
transform: scale(1);
}
/* Style expanded sidebar */
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"] {
border: none;
border-radius: 0;
}
/* Style right-positioned half layout */
.iframe-wrapper[data-layout="half"][data-position="right"] {
border-left: 2px solid rgba(0, 0, 0, 0.1);
}
/* Style mobile expanded state */
.iframe-wrapper[data-expand-on-mobile="true"] {
width: 100vw;
height: 100vh;
border: none;
border-radius: 0;
}
/* Combine attributes for specific cases */
.iframe-wrapper[data-layout="sidebar"][data-position="right"][data-expanded="true"] {
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
}
`;
```
## API Reference
### Methods
- `open()` - Opens the wallet interface
- `close()` - Closes the wallet interface
- `destroy()` - Removes all elements and event listeners
## Using with Arweave
The SDK automatically sets up `window.arweaveWallet` for compatibility with Arweave applications:
```javascript
// After initializing WanderEmbedded, you can use window.arweaveWallet
const wander = new WanderEmbedded();
// Example Arweave interaction
async function connectWallet() {
try {
await window.arweaveWallet.connect(["ACCESS_ADDRESS", "SIGN_TRANSACTION"]);
const address = await window.arweaveWallet.getActiveAddress();
console.log("Connected to wallet address:", address);
} catch (error) {
console.error("Error connecting to wallet:", error);
}
}
```
## Browser Support
The SDK supports all modern browsers (Chrome, Firefox, Safari, Edge).
## Development Setup
1. `yarn install`

@@ -34,8 +523,8 @@

### Using the Wander Embedded SDK:
### Using the Wander Embedded SDK
The minimum setup you must do to get Wander Embedded to work on a project looks like this:
```
import { WanderEmbedded } from "wander-embedded-sdk";
```javascript
import { WanderEmbedded } from "@wanderapp/embed-sdk";

@@ -70,8 +559,8 @@ // ...

You can play around with Wander Embedded at https://playground.othent.io/, which uses:
You can play around with Wander Embedded at <https://playground.othent.io/>, which uses:
- The latest version of the playground itself: https://playground.othent.io/
- The latest version of the Wander Embedded app: https://embed.wander.app/
- The latest version of `@wanderapp/embed-sdk`: https://www.npmjs.com/package/@wanderapp/embed-sdk
- The latest version of the server & tRPC API: https://embed-api.wander.app/
- The latest version of the playground itself: <https://playground.othent.io/>
- The latest version of the Wander Embedded app: <https://embed.wander.app/>
- The latest version of `@wanderapp/embed-sdk`: <https://www.npmjs.com/package/@wanderapp/embed-sdk>
- The latest version of the server & tRPC API: <https://embed-api.wander.app/>

@@ -90,4 +579,4 @@ Most likely you need that playground to load your local version of the app, SDK, and/or server. See

By default, the app will point its tRPC client to http://localhost:3001 when running in development
mode, or to https://embed-api.wander.app/ when running in production mode. See:
By default, the app will point its tRPC client to <http://localhost:3001> when running in development
mode, or to <https://embed-api.wander.app/> when running in production mode. See:

@@ -100,3 +589,3 @@ - `createTRPCClient` call in `src/utils/embedded/embedded.utils.ts` for the setup logic.

Next, clone https://github.com/Othent/KMS-test-repo/ and run `pnpm install && pnpm start`. The
Next, clone <https://github.com/Othent/KMS-test-repo/> and run `pnpm install && pnpm start`. The
playground should be running at `http://localhost:3000`, using the published version of

@@ -107,3 +596,3 @@ `@wanderapp/embed-sdk`.

Wander Embedded app, which in turn will point its tRPC client to the latest version of the server
(https://embed-api.wander.app/).
(<https://embed-api.wander.app/>).

@@ -114,7 +603,7 @@ You now need to make the SDK load `http://localhost:5173`, which you can do using the `baseURL`

```
```javascript
const wander = new WanderEmbedded({
clientId: "ALPHA",
baseURL: "http://localhost:5173",
baseServerURL: "http://localhost:3001",
baseServerURL: "http://localhost:3001"
});

@@ -141,3 +630,3 @@ ```

- If you want to use the currently published version of `embed-api`, then it should say:
"embed-api": "https://github.com/wanderwallet/embed-api#<SOME_HASH>",
"embed-api": "<https://github.com/wanderwallet/embed-api#><SOME_HASH>",

@@ -151,10 +640,10 @@ <br />

```
```json
"@wanderapp/embed-sdk": "link:./../wander/Wander/wander-embedded-sdk/"`
```
You can revert this change running `pnpm link-embed`, which changes the `wander-embedded-sdk`
You can revert this change running `pnpm link-embed`, which changes the `@wanderapp/embed-sdk`
dependency back to:
```
```json
"@wanderapp/embed-sdk": "^0.0.1"`

@@ -170,5 +659,5 @@ ```

> [!WARNING]
> Temporarily, the https://embed.wander.app/ URLs are actually https://embed-dev.wander.app/. This
> Temporarily, the <https://embed.wander.app/> URLs are actually <https://embed-dev.wander.app/>. This
> should be replaced before launch.
<br />
+13
-4
sdk-dist/components/button/wander-button.component.cjs

@@ -246,2 +246,3 @@ 'use strict';

this.config = {
parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,
id: options.id || _WanderButton.DEFAULT_CONFIG.id,

@@ -257,3 +258,3 @@ theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,

dappLogoSrc: options.dappLogoSrc || _WanderButton.DEFAULT_CONFIG.dappLogoSrc,
label: options.label || _WanderButton.DEFAULT_CONFIG.label,
label: options.label ?? _WanderButton.DEFAULT_CONFIG.label,
balance: options.balance === false ? false : {

@@ -267,2 +268,3 @@ balanceOf: (options.balance === true ? null : options.balance?.balanceOf) ?? _WanderButton.DEFAULT_CONFIG.balance.balanceOf,

const elements = _WanderButton.initializeButton(this.config);
this.parent = this.config.parent;
this.host = elements.host;

@@ -301,6 +303,8 @@ this.button = elements.button;

throw new Error("Missing elements");
const [y, x] = config.position.split("-");
host.style.position = "fixed";
host.style[y] = "var(--gapY)";
host.style[x] = "var(--gapX)";
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";

@@ -331,2 +335,3 @@ host.style.opacity = "0";

return {
parent: this.parent,
host: this.host,

@@ -373,2 +378,5 @@ button: this.button,

}
destroy() {
this.host?.remove();
}
};

@@ -425,2 +433,3 @@ _WanderButton.DEFAULT_LIGHT_CSS_VARS = {

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

@@ -427,0 +436,0 @@ theme: "system",

+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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\n}\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 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 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 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.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 const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style.position = \"fixed\";\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\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 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"]}
{"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"]}
+5
-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-PsqOwcWI.cjs';
import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-CIHHwk0q.cjs';

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

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

@@ -29,2 +30,3 @@ readonly theme: "system";

};
private parent;
private host;

@@ -52,2 +54,3 @@ private button;

getElements(): {
parent: HTMLElement;
host: HTMLDivElement;

@@ -66,4 +69,5 @@ button: HTMLButtonElement;

unsetStatus(status: WanderEmbeddedButtonStatus): void;
destroy(): void;
}
export { WanderButton };
+5
-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-PsqOwcWI.js';
import { W as WanderEmbeddedButtonCSSVars, a as WanderEmbeddedButtonOptions, b as WanderEmbeddedButtonConfig, B as BalanceInfo, c as WanderEmbeddedButtonStatus } from '../../wander-embedded.types-CIHHwk0q.js';

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

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

@@ -29,2 +30,3 @@ readonly theme: "system";

};
private parent;
private host;

@@ -52,2 +54,3 @@ private button;

getElements(): {
parent: HTMLElement;
host: HTMLDivElement;

@@ -66,4 +69,5 @@ button: HTMLButtonElement;

unsetStatus(status: WanderEmbeddedButtonStatus): void;
destroy(): void;
}
export { WanderButton };
+13
-4
sdk-dist/components/button/wander-button.component.global.js

@@ -289,2 +289,3 @@ (function (exports) {

this.config = {
parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,
id: options.id || _WanderButton.DEFAULT_CONFIG.id,

@@ -300,3 +301,3 @@ theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,

dappLogoSrc: options.dappLogoSrc || _WanderButton.DEFAULT_CONFIG.dappLogoSrc,
label: options.label || _WanderButton.DEFAULT_CONFIG.label,
label: options.label ?? _WanderButton.DEFAULT_CONFIG.label,
balance: options.balance === false ? false : {

@@ -310,2 +311,3 @@ balanceOf: (options.balance === true ? null : options.balance?.balanceOf) ?? _WanderButton.DEFAULT_CONFIG.balance.balanceOf,

const elements = _WanderButton.initializeButton(this.config);
this.parent = this.config.parent;
this.host = elements.host;

@@ -344,6 +346,8 @@ this.button = elements.button;

throw new Error("Missing elements");
const [y, x] = config.position.split("-");
host.style.position = "fixed";
host.style[y] = "var(--gapY)";
host.style[x] = "var(--gapX)";
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";

@@ -374,2 +378,3 @@ host.style.opacity = "0";

return {
parent: this.parent,
host: this.host,

@@ -416,2 +421,5 @@ button: this.button,

}
destroy() {
this.host?.remove();
}
};

@@ -468,2 +476,3 @@ _WanderButton.DEFAULT_LIGHT_CSS_VARS = {

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

@@ -470,0 +479,0 @@ theme: "system",

+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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\n}\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 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 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 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.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 const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style.position = \"fixed\";\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\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 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"]}
{"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"]}
+13
-4
sdk-dist/components/button/wander-button.component.js

@@ -244,2 +244,3 @@ import { merge } from 'ts-deepmerge';

this.config = {
parent: options.parent || _WanderButton.DEFAULT_CONFIG.parent,
id: options.id || _WanderButton.DEFAULT_CONFIG.id,

@@ -255,3 +256,3 @@ theme: options.theme || _WanderButton.DEFAULT_CONFIG.theme,

dappLogoSrc: options.dappLogoSrc || _WanderButton.DEFAULT_CONFIG.dappLogoSrc,
label: options.label || _WanderButton.DEFAULT_CONFIG.label,
label: options.label ?? _WanderButton.DEFAULT_CONFIG.label,
balance: options.balance === false ? false : {

@@ -265,2 +266,3 @@ balanceOf: (options.balance === true ? null : options.balance?.balanceOf) ?? _WanderButton.DEFAULT_CONFIG.balance.balanceOf,

const elements = _WanderButton.initializeButton(this.config);
this.parent = this.config.parent;
this.host = elements.host;

@@ -299,6 +301,8 @@ this.button = elements.button;

throw new Error("Missing elements");
const [y, x] = config.position.split("-");
host.style.position = "fixed";
host.style[y] = "var(--gapY)";
host.style[x] = "var(--gapX)";
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";

@@ -329,2 +333,3 @@ host.style.opacity = "0";

return {
parent: this.parent,
host: this.host,

@@ -371,2 +376,5 @@ button: this.button,

}
destroy() {
this.host?.remove();
}
};

@@ -423,2 +431,3 @@ _WanderButton.DEFAULT_LIGHT_CSS_VARS = {

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

@@ -425,0 +434,0 @@ theme: "system",

+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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\n}\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 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 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 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.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 const [y, x] = config.position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"left\" | \"right\"\n ];\n\n host.style.position = \"fixed\";\n host.style[y] = \"var(--gapY)\";\n host.style[x] = \"var(--gapX)\";\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 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"]}
{"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"]}
+1
-1
sdk-dist/components/button/wander-button.template.d.cts

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

import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-PsqOwcWI.cjs';
import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-CIHHwk0q.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-PsqOwcWI.js';
import { d as WanderEmbeddedLogoVariant } from '../../wander-embedded.types-CIHHwk0q.js';

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

+181
-60
sdk-dist/components/iframe/wander-iframe.component.cjs

@@ -29,4 +29,4 @@ 'use strict';

var getWanderIframeTemplateContent = ({
src = ""
} = {}) => {
customStyles
}) => {
return `

@@ -52,4 +52,4 @@ <style>

/* Base iframe styles */
.iframe {
/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;

@@ -71,5 +71,6 @@ z-index: calc(var(--zIndex, 9999) + 1);

opacity: 0;
overflow: hidden;
}
.iframe.show {
.iframe-wrapper.show {
pointer-events: auto;

@@ -79,2 +80,38 @@ opacity: 1;

/* Base iframe styles */
.iframe {
border: none;
width: 100%;
height: 100%;
display: block;
}
/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
opacity: 0;
transition: opacity 300ms ease-in-out;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
display: none;
}
.half-image.show {
opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}
.half-image[data-position="right"] {
right: 0;
width: 50vw;
}
/* Mobile styles */

@@ -86,3 +123,3 @@ @media (max-width: 540px) {

.iframe {
.iframe-wrapper {
inset: var(--mobilePadding, 0);

@@ -102,3 +139,7 @@ width: calc(100dvw - 2 * var(--mobilePadding, 0));

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

@@ -118,7 +159,7 @@ width: 100dvw;

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

@@ -128,3 +169,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="top-right"] {
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);

@@ -134,3 +175,3 @@ right: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-left"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);

@@ -140,3 +181,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-right"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);

@@ -147,3 +188,3 @@ right: var(--backdropPadding, 32px);

/* Modal specific styles */
.iframe[data-layout="modal"] {
.iframe-wrapper[data-layout="modal"] {
top: 50%;

@@ -155,11 +196,14 @@ left: 50%;

/* Sidebar and Half specific styles */
.iframe[data-layout="sidebar"],
.iframe[data-layout="half"] {
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
}
/* Right position */
.iframe[data-layout="sidebar"][data-position="right"],
.iframe[data-layout="half"][data-position="right"] {
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);

@@ -169,25 +213,45 @@ right: var(--backdropPadding, 0);

}
/* Left position */
.iframe[data-layout="sidebar"][data-position="left"],
.iframe[data-layout="half"][data-position="left"] {
/* Right position - Half */
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states */
.iframe[data-layout="sidebar"][data-position="right"]:not(.show),
.iframe[data-layout="half"][data-position="right"]:not(.show) {
/* Left position - Half */
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe[data-layout="sidebar"][data-position="left"]:not(.show),
.iframe[data-layout="half"][data-position="left"]:not(.show) {
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state */
.iframe[data-layout="sidebar"].show,
.iframe[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
transform: translate(0, 0);

@@ -197,4 +261,4 @@ }

/* Expanded styles */
.iframe[data-layout="sidebar"][data-expanded="true"],
.iframe[data-layout="half"][data-expanded="true"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;

@@ -206,14 +270,14 @@ height: var(--preferredHeight, 100dvh);

.iframe[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe[data-layout="half"][data-expanded="true"][data-position="right"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {
right: 0;
}
.iframe[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe[data-layout="half"][data-expanded="true"][data-position="left"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {
left: 0;
}
${customStyles}
</style>
<div class="backdrop" id="wanderEmbeddedBackdrop"></div>
<iframe class="iframe" src="${src}"></iframe>
`;

@@ -228,2 +292,3 @@ };

this.isOpen = false;
this.imageBaseUrl = null;
this.options = options;

@@ -252,6 +317,9 @@ const { routeLayout } = options;

}
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({

@@ -263,2 +331,8 @@ routeType: "auth",

}
getRouteImageUrl(imgPath) {
if (!imgPath || !_WanderIframe.ALLOWED_IMG_PATHS.has(imgPath)) {
return null;
}
return `${this.imageBaseUrl}/assets/routes/${imgPath}`;
}
static getLayoutConfig(layoutConfig) {

@@ -273,10 +347,25 @@ if (!layoutConfig) return void 0;

const template = document.createElement("template");
template.innerHTML = getWanderIframeTemplateContent({ src });
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
shadow.appendChild(template.content);
const backdrop = shadow.querySelector(".backdrop");
const iframe = shadow.querySelector(".iframe");
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
backdrop,
wrapper,
halfImage
};

@@ -288,3 +377,5 @@ }

backdrop: this.backdrop,
iframe: this.iframe
wrapper: this.wrapper,
iframe: this.iframe,
halfImage: this.halfImage
};

@@ -295,3 +386,6 @@ }

this.backdrop.classList.add("show");
this.iframe.classList.add("show");
this.wrapper.classList.add("show");
if (this.currentLayoutType === "half" && this.halfImage.src) {
this.halfImage.classList.add("show");
}
}

@@ -301,3 +395,4 @@ hide() {

this.backdrop.classList.remove("show");
this.iframe.classList.remove("show");
this.wrapper.classList.remove("show");
this.halfImage.classList.remove("show");
}

@@ -307,6 +402,9 @@ resize(routeConfig) {

const layoutType = layoutConfig.type;
const resetLayout = layoutType !== this.currentLayoutType;
this.currentLayoutType = layoutType;
this.iframe.dataset.layout = layoutType;
this.iframe.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
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)) {

@@ -326,3 +424,3 @@ throw new Error("Not implemented yet");

const position = layoutConfig.position || "bottom-right";
this.iframe.dataset.position = position;
this.wrapper.dataset.position = position;
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);

@@ -335,9 +433,9 @@ cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);

const position = layoutConfig.position || "right";
this.iframe.dataset.position = position;
this.wrapper.dataset.position = position;
if (layoutConfig.expanded) {
this.iframe.dataset.expanded = "true";
this.wrapper.dataset.expanded = "true";
cssVars.backdropPadding = 0;
cssVars.borderRadius ?? (cssVars.borderRadius = 0);
} else {
this.iframe.dataset.expanded = "false";
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding ?? (cssVars.backdropPadding = 8);

@@ -351,2 +449,13 @@ }

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");
}
}

@@ -356,9 +465,8 @@ break;

}
if (resetLayout) {
this.backdrop.removeAttribute("style");
this.iframe.removeAttribute("style");
}
addCSSVariables(this.backdrop, cssVars);
addCSSVariables(this.iframe, cssVars);
addCSSVariables(this.wrapper, cssVars);
}
destroy() {
this.host?.remove();
}
};

@@ -381,2 +489,15 @@ _WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";

};
_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;

@@ -383,0 +504,0 @@ 

+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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\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","export interface WanderIframeTemplateContentOptions {\n src?: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n src = \"\"\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 /* Base iframe styles */\n .iframe {\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 }\n\n .iframe.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe {\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 .iframe[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[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[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[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n \n /* Sidebar and Half specific styles */\n .iframe[data-layout=\"sidebar\"],\n .iframe[data-layout=\"half\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n \n /* Right position */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show),\n .iframe[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n \n .iframe[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show),\n .iframe[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[data-layout=\"sidebar\"].show,\n .iframe[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n \n /* Expanded styles */\n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe[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[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n \n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n </style>\n <div class=\"backdrop\" id=\"wanderEmbeddedBackdrop\"></div>\n <iframe class=\"iframe\" src=\"${src}\"></iframe>\n`;\n};\n","import { CSSProperties } from \"react\";\nimport {\n HalfLayoutConfig,\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\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private iframe: HTMLIFrameElement;\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 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 const elements = WanderIframe.initializeIframe(src, options);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.iframe = elements.iframe;\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 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 template.innerHTML = getWanderIframeTemplateContent({ src });\n\n shadow.appendChild(template.content);\n\n // Elements from the shadow DOM\n const backdrop = shadow.querySelector(\".backdrop\") as HTMLDivElement;\n const iframe = shadow.querySelector(\".iframe\") as HTMLIFrameElement;\n\n return {\n iframe,\n host,\n backdrop\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n iframe: this.iframe\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.iframe.classList.add(\"show\");\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.iframe.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 const resetLayout = layoutType !== this.currentLayoutType;\n\n this.currentLayoutType = layoutType;\n\n this.iframe.dataset.layout = layoutType;\n\n // Default to true, unless explicitly set to false, false is WIP\n this.iframe.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.iframe.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.iframe.dataset.position = position;\n\n if (layoutConfig.expanded) {\n this.iframe.dataset.expanded = \"true\";\n cssVars.backdropPadding = 0;\n cssVars.borderRadius ??= 0;\n } else {\n this.iframe.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 // TODO Set imgSrc\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 if (resetLayout) {\n this.backdrop.removeAttribute(\"style\");\n this.iframe.removeAttribute(\"style\");\n }\n\n addCSSVariables(this.backdrop, cssVars);\n addCSSVariables(this.iframe, cssVars);\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.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"]}
+13
-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, e as WanderEmbeddedIframeOptions, L as LayoutConfig, f as LayoutType, R as RouteConfig } from '../../wander-embedded.types-PsqOwcWI.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-CIHHwk0q.cjs';

@@ -12,5 +12,10 @@ declare class WanderIframe {

};
static readonly IMAGE_EXTENSIONS: readonly ["png", "webp"];
static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[];
static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath>;
private host;
private backdrop;
private wrapper;
private iframe;
private halfImage;
private options;

@@ -20,3 +25,5 @@ private routeLayout;

private isOpen;
private imageBaseUrl;
constructor(src: string, options?: WanderEmbeddedIframeOptions);
private getRouteImageUrl;
static getLayoutConfig(layoutConfig?: LayoutConfig | LayoutType): LayoutConfig | undefined;

@@ -27,2 +34,4 @@ static initializeIframe(src: string, options: WanderEmbeddedIframeOptions): {

backdrop: HTMLDivElement;
wrapper: HTMLDivElement;
halfImage: HTMLImageElement;
};

@@ -32,3 +41,5 @@ getElements(): {

backdrop: HTMLDivElement;
wrapper: HTMLDivElement;
iframe: HTMLIFrameElement;
halfImage: HTMLImageElement;
};

@@ -38,4 +49,5 @@ show(): void;

resize(routeConfig: RouteConfig): void;
destroy(): void;
}
export { WanderIframe };
+13
-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, e as WanderEmbeddedIframeOptions, L as LayoutConfig, f as LayoutType, R as RouteConfig } from '../../wander-embedded.types-PsqOwcWI.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-CIHHwk0q.js';

@@ -12,5 +12,10 @@ declare class WanderIframe {

};
static readonly IMAGE_EXTENSIONS: readonly ["png", "webp"];
static readonly DEFAULT_ROUTE_TYPES: readonly RouteType[];
static readonly ALLOWED_IMG_PATHS: ReadonlySet<ImgPath>;
private host;
private backdrop;
private wrapper;
private iframe;
private halfImage;
private options;

@@ -20,3 +25,5 @@ private routeLayout;

private isOpen;
private imageBaseUrl;
constructor(src: string, options?: WanderEmbeddedIframeOptions);
private getRouteImageUrl;
static getLayoutConfig(layoutConfig?: LayoutConfig | LayoutType): LayoutConfig | undefined;

@@ -27,2 +34,4 @@ static initializeIframe(src: string, options: WanderEmbeddedIframeOptions): {

backdrop: HTMLDivElement;
wrapper: HTMLDivElement;
halfImage: HTMLImageElement;
};

@@ -32,3 +41,5 @@ getElements(): {

backdrop: HTMLDivElement;
wrapper: HTMLDivElement;
iframe: HTMLIFrameElement;
halfImage: HTMLImageElement;
};

@@ -38,4 +49,5 @@ show(): void;

resize(routeConfig: RouteConfig): void;
destroy(): void;
}
export { WanderIframe };
+181
-60
sdk-dist/components/iframe/wander-iframe.component.global.js

@@ -30,4 +30,4 @@ (function (exports) {

var getWanderIframeTemplateContent = ({
src = ""
} = {}) => {
customStyles
}) => {
return `

@@ -53,4 +53,4 @@ <style>

/* Base iframe styles */
.iframe {
/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;

@@ -72,5 +72,6 @@ z-index: calc(var(--zIndex, 9999) + 1);

opacity: 0;
overflow: hidden;
}
.iframe.show {
.iframe-wrapper.show {
pointer-events: auto;

@@ -80,2 +81,38 @@ opacity: 1;

/* Base iframe styles */
.iframe {
border: none;
width: 100%;
height: 100%;
display: block;
}
/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
opacity: 0;
transition: opacity 300ms ease-in-out;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
display: none;
}
.half-image.show {
opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}
.half-image[data-position="right"] {
right: 0;
width: 50vw;
}
/* Mobile styles */

@@ -87,3 +124,3 @@ @media (max-width: 540px) {

.iframe {
.iframe-wrapper {
inset: var(--mobilePadding, 0);

@@ -103,3 +140,7 @@ width: calc(100dvw - 2 * var(--mobilePadding, 0));

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

@@ -119,7 +160,7 @@ width: 100dvw;

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

@@ -129,3 +170,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="top-right"] {
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);

@@ -135,3 +176,3 @@ right: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-left"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);

@@ -141,3 +182,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-right"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);

@@ -148,3 +189,3 @@ right: var(--backdropPadding, 32px);

/* Modal specific styles */
.iframe[data-layout="modal"] {
.iframe-wrapper[data-layout="modal"] {
top: 50%;

@@ -156,11 +197,14 @@ left: 50%;

/* Sidebar and Half specific styles */
.iframe[data-layout="sidebar"],
.iframe[data-layout="half"] {
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
}
/* Right position */
.iframe[data-layout="sidebar"][data-position="right"],
.iframe[data-layout="half"][data-position="right"] {
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);

@@ -170,25 +214,45 @@ right: var(--backdropPadding, 0);

}
/* Left position */
.iframe[data-layout="sidebar"][data-position="left"],
.iframe[data-layout="half"][data-position="left"] {
/* Right position - Half */
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states */
.iframe[data-layout="sidebar"][data-position="right"]:not(.show),
.iframe[data-layout="half"][data-position="right"]:not(.show) {
/* Left position - Half */
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe[data-layout="sidebar"][data-position="left"]:not(.show),
.iframe[data-layout="half"][data-position="left"]:not(.show) {
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state */
.iframe[data-layout="sidebar"].show,
.iframe[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
transform: translate(0, 0);

@@ -198,4 +262,4 @@ }

/* Expanded styles */
.iframe[data-layout="sidebar"][data-expanded="true"],
.iframe[data-layout="half"][data-expanded="true"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;

@@ -207,14 +271,14 @@ height: var(--preferredHeight, 100dvh);

.iframe[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe[data-layout="half"][data-expanded="true"][data-position="right"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {
right: 0;
}
.iframe[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe[data-layout="half"][data-expanded="true"][data-position="left"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {
left: 0;
}
${customStyles}
</style>
<div class="backdrop" id="wanderEmbeddedBackdrop"></div>
<iframe class="iframe" src="${src}"></iframe>
`;

@@ -229,2 +293,3 @@ };

this.isOpen = false;
this.imageBaseUrl = null;
this.options = options;

@@ -253,6 +318,9 @@ const { routeLayout } = options;

}
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({

@@ -264,2 +332,8 @@ routeType: "auth",

}
getRouteImageUrl(imgPath) {
if (!imgPath || !_WanderIframe.ALLOWED_IMG_PATHS.has(imgPath)) {
return null;
}
return `${this.imageBaseUrl}/assets/routes/${imgPath}`;
}
static getLayoutConfig(layoutConfig) {

@@ -274,10 +348,25 @@ if (!layoutConfig) return void 0;

const template = document.createElement("template");
template.innerHTML = getWanderIframeTemplateContent({ src });
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
shadow.appendChild(template.content);
const backdrop = shadow.querySelector(".backdrop");
const iframe = shadow.querySelector(".iframe");
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
backdrop,
wrapper,
halfImage
};

@@ -289,3 +378,5 @@ }

backdrop: this.backdrop,
iframe: this.iframe
wrapper: this.wrapper,
iframe: this.iframe,
halfImage: this.halfImage
};

@@ -296,3 +387,6 @@ }

this.backdrop.classList.add("show");
this.iframe.classList.add("show");
this.wrapper.classList.add("show");
if (this.currentLayoutType === "half" && this.halfImage.src) {
this.halfImage.classList.add("show");
}
}

@@ -302,3 +396,4 @@ hide() {

this.backdrop.classList.remove("show");
this.iframe.classList.remove("show");
this.wrapper.classList.remove("show");
this.halfImage.classList.remove("show");
}

@@ -308,6 +403,9 @@ resize(routeConfig) {

const layoutType = layoutConfig.type;
const resetLayout = layoutType !== this.currentLayoutType;
this.currentLayoutType = layoutType;
this.iframe.dataset.layout = layoutType;
this.iframe.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
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)) {

@@ -327,3 +425,3 @@ throw new Error("Not implemented yet");

const position = layoutConfig.position || "bottom-right";
this.iframe.dataset.position = position;
this.wrapper.dataset.position = position;
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);

@@ -336,9 +434,9 @@ cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);

const position = layoutConfig.position || "right";
this.iframe.dataset.position = position;
this.wrapper.dataset.position = position;
if (layoutConfig.expanded) {
this.iframe.dataset.expanded = "true";
this.wrapper.dataset.expanded = "true";
cssVars.backdropPadding = 0;
cssVars.borderRadius ?? (cssVars.borderRadius = 0);
} else {
this.iframe.dataset.expanded = "false";
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding ?? (cssVars.backdropPadding = 8);

@@ -352,2 +450,13 @@ }

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");
}
}

@@ -357,9 +466,8 @@ break;

}
if (resetLayout) {
this.backdrop.removeAttribute("style");
this.iframe.removeAttribute("style");
}
addCSSVariables(this.backdrop, cssVars);
addCSSVariables(this.iframe, cssVars);
addCSSVariables(this.wrapper, cssVars);
}
destroy() {
this.host?.remove();
}
};

@@ -382,2 +490,15 @@ _WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";

};
_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;

@@ -384,0 +505,0 @@ 

+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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\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","export interface WanderIframeTemplateContentOptions {\n src?: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n src = \"\"\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 /* Base iframe styles */\n .iframe {\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 }\n\n .iframe.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe {\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 .iframe[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[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[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[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n \n /* Sidebar and Half specific styles */\n .iframe[data-layout=\"sidebar\"],\n .iframe[data-layout=\"half\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n \n /* Right position */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show),\n .iframe[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n \n .iframe[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show),\n .iframe[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[data-layout=\"sidebar\"].show,\n .iframe[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n \n /* Expanded styles */\n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe[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[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n \n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n </style>\n <div class=\"backdrop\" id=\"wanderEmbeddedBackdrop\"></div>\n <iframe class=\"iframe\" src=\"${src}\"></iframe>\n`;\n};\n","import { CSSProperties } from \"react\";\nimport {\n HalfLayoutConfig,\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\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private iframe: HTMLIFrameElement;\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 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 const elements = WanderIframe.initializeIframe(src, options);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.iframe = elements.iframe;\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 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 template.innerHTML = getWanderIframeTemplateContent({ src });\n\n shadow.appendChild(template.content);\n\n // Elements from the shadow DOM\n const backdrop = shadow.querySelector(\".backdrop\") as HTMLDivElement;\n const iframe = shadow.querySelector(\".iframe\") as HTMLIFrameElement;\n\n return {\n iframe,\n host,\n backdrop\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n iframe: this.iframe\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.iframe.classList.add(\"show\");\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.iframe.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 const resetLayout = layoutType !== this.currentLayoutType;\n\n this.currentLayoutType = layoutType;\n\n this.iframe.dataset.layout = layoutType;\n\n // Default to true, unless explicitly set to false, false is WIP\n this.iframe.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.iframe.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.iframe.dataset.position = position;\n\n if (layoutConfig.expanded) {\n this.iframe.dataset.expanded = \"true\";\n cssVars.backdropPadding = 0;\n cssVars.borderRadius ??= 0;\n } else {\n this.iframe.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 // TODO Set imgSrc\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 if (resetLayout) {\n this.backdrop.removeAttribute(\"style\");\n this.iframe.removeAttribute(\"style\");\n }\n\n addCSSVariables(this.backdrop, cssVars);\n addCSSVariables(this.iframe, cssVars);\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.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"]}
+181
-60
sdk-dist/components/iframe/wander-iframe.component.js

@@ -27,4 +27,4 @@ // src/wander-embedded.types.ts

var getWanderIframeTemplateContent = ({
src = ""
} = {}) => {
customStyles
}) => {
return `

@@ -50,4 +50,4 @@ <style>

/* Base iframe styles */
.iframe {
/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;

@@ -69,5 +69,6 @@ z-index: calc(var(--zIndex, 9999) + 1);

opacity: 0;
overflow: hidden;
}
.iframe.show {
.iframe-wrapper.show {
pointer-events: auto;

@@ -77,2 +78,38 @@ opacity: 1;

/* Base iframe styles */
.iframe {
border: none;
width: 100%;
height: 100%;
display: block;
}
/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
opacity: 0;
transition: opacity 300ms ease-in-out;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
display: none;
}
.half-image.show {
opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}
.half-image[data-position="right"] {
right: 0;
width: 50vw;
}
/* Mobile styles */

@@ -84,3 +121,3 @@ @media (max-width: 540px) {

.iframe {
.iframe-wrapper {
inset: var(--mobilePadding, 0);

@@ -100,3 +137,7 @@ width: calc(100dvw - 2 * var(--mobilePadding, 0));

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

@@ -116,7 +157,7 @@ width: 100dvw;

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

@@ -126,3 +167,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="top-right"] {
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);

@@ -132,3 +173,3 @@ right: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-left"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);

@@ -138,3 +179,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-right"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);

@@ -145,3 +186,3 @@ right: var(--backdropPadding, 32px);

/* Modal specific styles */
.iframe[data-layout="modal"] {
.iframe-wrapper[data-layout="modal"] {
top: 50%;

@@ -153,11 +194,14 @@ left: 50%;

/* Sidebar and Half specific styles */
.iframe[data-layout="sidebar"],
.iframe[data-layout="half"] {
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
}
/* Right position */
.iframe[data-layout="sidebar"][data-position="right"],
.iframe[data-layout="half"][data-position="right"] {
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);

@@ -167,25 +211,45 @@ right: var(--backdropPadding, 0);

}
/* Left position */
.iframe[data-layout="sidebar"][data-position="left"],
.iframe[data-layout="half"][data-position="left"] {
/* Right position - Half */
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states */
.iframe[data-layout="sidebar"][data-position="right"]:not(.show),
.iframe[data-layout="half"][data-position="right"]:not(.show) {
/* Left position - Half */
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe[data-layout="sidebar"][data-position="left"]:not(.show),
.iframe[data-layout="half"][data-position="left"]:not(.show) {
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state */
.iframe[data-layout="sidebar"].show,
.iframe[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
transform: translate(0, 0);

@@ -195,4 +259,4 @@ }

/* Expanded styles */
.iframe[data-layout="sidebar"][data-expanded="true"],
.iframe[data-layout="half"][data-expanded="true"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;

@@ -204,14 +268,14 @@ height: var(--preferredHeight, 100dvh);

.iframe[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe[data-layout="half"][data-expanded="true"][data-position="right"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {
right: 0;
}
.iframe[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe[data-layout="half"][data-expanded="true"][data-position="left"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {
left: 0;
}
${customStyles}
</style>
<div class="backdrop" id="wanderEmbeddedBackdrop"></div>
<iframe class="iframe" src="${src}"></iframe>
`;

@@ -226,2 +290,3 @@ };

this.isOpen = false;
this.imageBaseUrl = null;
this.options = options;

@@ -250,6 +315,9 @@ const { routeLayout } = options;

}
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({

@@ -261,2 +329,8 @@ routeType: "auth",

}
getRouteImageUrl(imgPath) {
if (!imgPath || !_WanderIframe.ALLOWED_IMG_PATHS.has(imgPath)) {
return null;
}
return `${this.imageBaseUrl}/assets/routes/${imgPath}`;
}
static getLayoutConfig(layoutConfig) {

@@ -271,10 +345,25 @@ if (!layoutConfig) return void 0;

const template = document.createElement("template");
template.innerHTML = getWanderIframeTemplateContent({ src });
const customStyles = typeof options.customStyles === "string" ? options.customStyles : "";
template.innerHTML = getWanderIframeTemplateContent({ customStyles });
shadow.appendChild(template.content);
const backdrop = shadow.querySelector(".backdrop");
const iframe = shadow.querySelector(".iframe");
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
backdrop,
wrapper,
halfImage
};

@@ -286,3 +375,5 @@ }

backdrop: this.backdrop,
iframe: this.iframe
wrapper: this.wrapper,
iframe: this.iframe,
halfImage: this.halfImage
};

@@ -293,3 +384,6 @@ }

this.backdrop.classList.add("show");
this.iframe.classList.add("show");
this.wrapper.classList.add("show");
if (this.currentLayoutType === "half" && this.halfImage.src) {
this.halfImage.classList.add("show");
}
}

@@ -299,3 +393,4 @@ hide() {

this.backdrop.classList.remove("show");
this.iframe.classList.remove("show");
this.wrapper.classList.remove("show");
this.halfImage.classList.remove("show");
}

@@ -305,6 +400,9 @@ resize(routeConfig) {

const layoutType = layoutConfig.type;
const resetLayout = layoutType !== this.currentLayoutType;
this.currentLayoutType = layoutType;
this.iframe.dataset.layout = layoutType;
this.iframe.dataset.expandOnMobile = layoutConfig.expandOnMobile !== false ? "true" : "false";
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)) {

@@ -324,3 +422,3 @@ throw new Error("Not implemented yet");

const position = layoutConfig.position || "bottom-right";
this.iframe.dataset.position = position;
this.wrapper.dataset.position = position;
cssVars.preferredWidth ?? (cssVars.preferredWidth = layoutConfig.fixedWidth || routeConfig.width);

@@ -333,9 +431,9 @@ cssVars.preferredHeight ?? (cssVars.preferredHeight = layoutConfig.fixedHeight || routeConfig.height);

const position = layoutConfig.position || "right";
this.iframe.dataset.position = position;
this.wrapper.dataset.position = position;
if (layoutConfig.expanded) {
this.iframe.dataset.expanded = "true";
this.wrapper.dataset.expanded = "true";
cssVars.backdropPadding = 0;
cssVars.borderRadius ?? (cssVars.borderRadius = 0);
} else {
this.iframe.dataset.expanded = "false";
this.wrapper.dataset.expanded = "false";
cssVars.backdropPadding ?? (cssVars.backdropPadding = 8);

@@ -349,2 +447,13 @@ }

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");
}
}

@@ -354,9 +463,8 @@ break;

}
if (resetLayout) {
this.backdrop.removeAttribute("style");
this.iframe.removeAttribute("style");
}
addCSSVariables(this.backdrop, cssVars);
addCSSVariables(this.iframe, cssVars);
addCSSVariables(this.wrapper, cssVars);
}
destroy() {
this.host?.remove();
}
};

@@ -379,2 +487,15 @@ _WanderIframe.DEFAULT_BACKDROP_ID = "wanderEmbeddedBackdrop";

};
_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;

@@ -381,0 +502,0 @@ 

+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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\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","export interface WanderIframeTemplateContentOptions {\n src?: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n src = \"\"\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 /* Base iframe styles */\n .iframe {\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 }\n\n .iframe.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe {\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 .iframe[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[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[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[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n \n /* Sidebar and Half specific styles */\n .iframe[data-layout=\"sidebar\"],\n .iframe[data-layout=\"half\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n \n /* Right position */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show),\n .iframe[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n \n .iframe[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show),\n .iframe[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[data-layout=\"sidebar\"].show,\n .iframe[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n \n /* Expanded styles */\n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe[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[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n \n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n </style>\n <div class=\"backdrop\" id=\"wanderEmbeddedBackdrop\"></div>\n <iframe class=\"iframe\" src=\"${src}\"></iframe>\n`;\n};\n","import { CSSProperties } from \"react\";\nimport {\n HalfLayoutConfig,\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\n // Elements:\n private host: HTMLDivElement;\n private backdrop: HTMLDivElement;\n private iframe: HTMLIFrameElement;\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 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 const elements = WanderIframe.initializeIframe(src, options);\n\n this.host = elements.host;\n this.backdrop = elements.backdrop;\n this.iframe = elements.iframe;\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 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 template.innerHTML = getWanderIframeTemplateContent({ src });\n\n shadow.appendChild(template.content);\n\n // Elements from the shadow DOM\n const backdrop = shadow.querySelector(\".backdrop\") as HTMLDivElement;\n const iframe = shadow.querySelector(\".iframe\") as HTMLIFrameElement;\n\n return {\n iframe,\n host,\n backdrop\n };\n }\n\n getElements() {\n return {\n host: this.host,\n backdrop: this.backdrop,\n iframe: this.iframe\n };\n }\n\n show(): void {\n this.isOpen = true;\n this.backdrop.classList.add(\"show\");\n this.iframe.classList.add(\"show\");\n }\n\n hide(): void {\n this.isOpen = false;\n this.backdrop.classList.remove(\"show\");\n this.iframe.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 const resetLayout = layoutType !== this.currentLayoutType;\n\n this.currentLayoutType = layoutType;\n\n this.iframe.dataset.layout = layoutType;\n\n // Default to true, unless explicitly set to false, false is WIP\n this.iframe.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.iframe.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.iframe.dataset.position = position;\n\n if (layoutConfig.expanded) {\n this.iframe.dataset.expanded = \"true\";\n cssVars.backdropPadding = 0;\n cssVars.borderRadius ??= 0;\n } else {\n this.iframe.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 // TODO Set imgSrc\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 if (resetLayout) {\n this.backdrop.removeAttribute(\"style\");\n this.iframe.removeAttribute(\"style\");\n }\n\n addCSSVariables(this.backdrop, cssVars);\n addCSSVariables(this.iframe, cssVars);\n }\n}\n"]}
{"version":3,"sources":["../../../src/wander-embedded.types.ts","../../../src/utils/styles/styles.utils.ts","../../../src/components/iframe/wander-iframe.template.ts","../../../src/components/iframe/wander-iframe.component.ts"],"names":[],"mappings":"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","file":"wander-iframe.component.js","sourcesContent":["import { 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"]}
+105
-41
sdk-dist/components/iframe/wander-iframe.template.cjs

@@ -5,4 +5,4 @@ 'use strict';

var getWanderIframeTemplateContent = ({
src = ""
} = {}) => {
customStyles
}) => {
return `

@@ -28,4 +28,4 @@ <style>

/* Base iframe styles */
.iframe {
/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;

@@ -47,5 +47,6 @@ z-index: calc(var(--zIndex, 9999) + 1);

opacity: 0;
overflow: hidden;
}
.iframe.show {
.iframe-wrapper.show {
pointer-events: auto;

@@ -55,2 +56,38 @@ opacity: 1;

/* Base iframe styles */
.iframe {
border: none;
width: 100%;
height: 100%;
display: block;
}
/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
opacity: 0;
transition: opacity 300ms ease-in-out;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
display: none;
}
.half-image.show {
opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}
.half-image[data-position="right"] {
right: 0;
width: 50vw;
}
/* Mobile styles */

@@ -62,3 +99,3 @@ @media (max-width: 540px) {

.iframe {
.iframe-wrapper {
inset: var(--mobilePadding, 0);

@@ -78,3 +115,7 @@ width: calc(100dvw - 2 * var(--mobilePadding, 0));

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

@@ -94,7 +135,7 @@ width: 100dvw;

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

@@ -104,3 +145,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="top-right"] {
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);

@@ -110,3 +151,3 @@ right: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-left"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);

@@ -116,3 +157,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-right"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);

@@ -123,3 +164,3 @@ right: var(--backdropPadding, 32px);

/* Modal specific styles */
.iframe[data-layout="modal"] {
.iframe-wrapper[data-layout="modal"] {
top: 50%;

@@ -131,11 +172,14 @@ left: 50%;

/* Sidebar and Half specific styles */
.iframe[data-layout="sidebar"],
.iframe[data-layout="half"] {
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
}
/* Right position */
.iframe[data-layout="sidebar"][data-position="right"],
.iframe[data-layout="half"][data-position="right"] {
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);

@@ -145,25 +189,45 @@ right: var(--backdropPadding, 0);

}
/* Left position */
.iframe[data-layout="sidebar"][data-position="left"],
.iframe[data-layout="half"][data-position="left"] {
/* Right position - Half */
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states */
.iframe[data-layout="sidebar"][data-position="right"]:not(.show),
.iframe[data-layout="half"][data-position="right"]:not(.show) {
/* Left position - Half */
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe[data-layout="sidebar"][data-position="left"]:not(.show),
.iframe[data-layout="half"][data-position="left"]:not(.show) {
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state */
.iframe[data-layout="sidebar"].show,
.iframe[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
transform: translate(0, 0);

@@ -173,4 +237,4 @@ }

/* Expanded styles */
.iframe[data-layout="sidebar"][data-expanded="true"],
.iframe[data-layout="half"][data-expanded="true"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;

@@ -182,14 +246,14 @@ height: var(--preferredHeight, 100dvh);

.iframe[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe[data-layout="half"][data-expanded="true"][data-position="right"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {
right: 0;
}
.iframe[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe[data-layout="half"][data-expanded="true"][data-position="left"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {
left: 0;
}
${customStyles}
</style>
<div class="backdrop" id="wanderEmbeddedBackdrop"></div>
<iframe class="iframe" src="${src}"></iframe>
`;

@@ -196,0 +260,0 @@ };

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

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

{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";;;AAIO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,GAAM,GAAA;AACR,CAAA,GAAwC,EAAO,KAAA;AAC7C,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,8BAAA,EA4KuB,GAAG,CAAA;AAAA,CAAA;AAEnC","file":"wander-iframe.template.cjs","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n src?: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n src = \"\"\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 /* Base iframe styles */\n .iframe {\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 }\n\n .iframe.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe {\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 .iframe[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[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[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[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n \n /* Sidebar and Half specific styles */\n .iframe[data-layout=\"sidebar\"],\n .iframe[data-layout=\"half\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n \n /* Right position */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show),\n .iframe[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n \n .iframe[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show),\n .iframe[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[data-layout=\"sidebar\"].show,\n .iframe[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n \n /* Expanded styles */\n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe[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[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n \n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n </style>\n <div class=\"backdrop\" id=\"wanderEmbeddedBackdrop\"></div>\n <iframe class=\"iframe\" src=\"${src}\"></iframe>\n`;\n};\n"]}
{"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"]}
+2
-2
sdk-dist/components/iframe/wander-iframe.template.d.cts
interface WanderIframeTemplateContentOptions {
src?: string;
customStyles: string;
}
declare const getWanderIframeTemplateContent: ({ src }?: WanderIframeTemplateContentOptions) => string;
declare const getWanderIframeTemplateContent: ({ customStyles }: WanderIframeTemplateContentOptions) => string;
export { type WanderIframeTemplateContentOptions, getWanderIframeTemplateContent };
+2
-2
sdk-dist/components/iframe/wander-iframe.template.d.ts
interface WanderIframeTemplateContentOptions {
src?: string;
customStyles: string;
}
declare const getWanderIframeTemplateContent: ({ src }?: WanderIframeTemplateContentOptions) => string;
declare const getWanderIframeTemplateContent: ({ customStyles }: WanderIframeTemplateContentOptions) => string;
export { type WanderIframeTemplateContentOptions, getWanderIframeTemplateContent };
+105
-41
sdk-dist/components/iframe/wander-iframe.template.global.js

@@ -6,4 +6,4 @@ (function (exports) {

var getWanderIframeTemplateContent = ({
src = ""
} = {}) => {
customStyles
}) => {
return `

@@ -29,4 +29,4 @@ <style>

/* Base iframe styles */
.iframe {
/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;

@@ -48,5 +48,6 @@ z-index: calc(var(--zIndex, 9999) + 1);

opacity: 0;
overflow: hidden;
}
.iframe.show {
.iframe-wrapper.show {
pointer-events: auto;

@@ -56,2 +57,38 @@ opacity: 1;

/* Base iframe styles */
.iframe {
border: none;
width: 100%;
height: 100%;
display: block;
}
/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
opacity: 0;
transition: opacity 300ms ease-in-out;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
display: none;
}
.half-image.show {
opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}
.half-image[data-position="right"] {
right: 0;
width: 50vw;
}
/* Mobile styles */

@@ -63,3 +100,3 @@ @media (max-width: 540px) {

.iframe {
.iframe-wrapper {
inset: var(--mobilePadding, 0);

@@ -79,3 +116,7 @@ width: calc(100dvw - 2 * var(--mobilePadding, 0));

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

@@ -95,7 +136,7 @@ width: 100dvw;

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

@@ -105,3 +146,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="top-right"] {
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);

@@ -111,3 +152,3 @@ right: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-left"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);

@@ -117,3 +158,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-right"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);

@@ -124,3 +165,3 @@ right: var(--backdropPadding, 32px);

/* Modal specific styles */
.iframe[data-layout="modal"] {
.iframe-wrapper[data-layout="modal"] {
top: 50%;

@@ -132,11 +173,14 @@ left: 50%;

/* Sidebar and Half specific styles */
.iframe[data-layout="sidebar"],
.iframe[data-layout="half"] {
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
}
/* Right position */
.iframe[data-layout="sidebar"][data-position="right"],
.iframe[data-layout="half"][data-position="right"] {
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);

@@ -146,25 +190,45 @@ right: var(--backdropPadding, 0);

}
/* Left position */
.iframe[data-layout="sidebar"][data-position="left"],
.iframe[data-layout="half"][data-position="left"] {
/* Right position - Half */
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states */
.iframe[data-layout="sidebar"][data-position="right"]:not(.show),
.iframe[data-layout="half"][data-position="right"]:not(.show) {
/* Left position - Half */
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe[data-layout="sidebar"][data-position="left"]:not(.show),
.iframe[data-layout="half"][data-position="left"]:not(.show) {
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state */
.iframe[data-layout="sidebar"].show,
.iframe[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
transform: translate(0, 0);

@@ -174,4 +238,4 @@ }

/* Expanded styles */
.iframe[data-layout="sidebar"][data-expanded="true"],
.iframe[data-layout="half"][data-expanded="true"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;

@@ -183,14 +247,14 @@ height: var(--preferredHeight, 100dvh);

.iframe[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe[data-layout="half"][data-expanded="true"][data-position="right"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {
right: 0;
}
.iframe[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe[data-layout="half"][data-expanded="true"][data-position="left"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {
left: 0;
}
${customStyles}
</style>
<div class="backdrop" id="wanderEmbeddedBackdrop"></div>
<iframe class="iframe" src="${src}"></iframe>
`;

@@ -197,0 +261,0 @@ };

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

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

{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";;;;AAIO,MAAM,iCAAiC,CAAC;EAAA,EAC7C,GAAM,GAAA;EACR,CAAA,GAAwC,EAAO,KAAA;EAC7C,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,8BAAA,EA4KuB,GAAG,CAAA;AAAA,CAAA;EAEnC","file":"wander-iframe.template.global.js","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n src?: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n src = \"\"\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 /* Base iframe styles */\n .iframe {\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 }\n\n .iframe.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe {\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 .iframe[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[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[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[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n \n /* Sidebar and Half specific styles */\n .iframe[data-layout=\"sidebar\"],\n .iframe[data-layout=\"half\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n \n /* Right position */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show),\n .iframe[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n \n .iframe[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show),\n .iframe[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[data-layout=\"sidebar\"].show,\n .iframe[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n \n /* Expanded styles */\n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe[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[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n \n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n </style>\n <div class=\"backdrop\" id=\"wanderEmbeddedBackdrop\"></div>\n <iframe class=\"iframe\" src=\"${src}\"></iframe>\n`;\n};\n"]}
{"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"]}
+105
-41
sdk-dist/components/iframe/wander-iframe.template.js
// src/components/iframe/wander-iframe.template.ts
var getWanderIframeTemplateContent = ({
src = ""
} = {}) => {
customStyles
}) => {
return `

@@ -25,4 +25,4 @@ <style>

/* Base iframe styles */
.iframe {
/* Iframe wrapper styles */
.iframe-wrapper {
position: fixed;

@@ -44,5 +44,6 @@ z-index: calc(var(--zIndex, 9999) + 1);

opacity: 0;
overflow: hidden;
}
.iframe.show {
.iframe-wrapper.show {
pointer-events: auto;

@@ -52,2 +53,38 @@ opacity: 1;

/* Base iframe styles */
.iframe {
border: none;
width: 100%;
height: 100%;
display: block;
}
/* Half layout image styles */
.half-image {
position: fixed;
z-index: calc(var(--zIndex, 9999) + 1);
opacity: 0;
transition: opacity 300ms ease-in-out;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
display: none;
}
.half-image.show {
opacity: 1;
pointer-events: auto;
}
/* Position-specific styles for half-image */
.half-image[data-position="left"] {
left: 0;
width: 50vw;
}
.half-image[data-position="right"] {
right: 0;
width: 50vw;
}
/* Mobile styles */

@@ -59,3 +96,3 @@ @media (max-width: 540px) {

.iframe {
.iframe-wrapper {
inset: var(--mobilePadding, 0);

@@ -75,3 +112,7 @@ width: calc(100dvw - 2 * var(--mobilePadding, 0));

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

@@ -91,7 +132,7 @@ width: 100dvw;

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

@@ -101,3 +142,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="top-right"] {
.iframe-wrapper[data-layout="popup"][data-position="top-right"] {
top: var(--backdropPadding, 32px);

@@ -107,3 +148,3 @@ right: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-left"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-left"] {
bottom: var(--backdropPadding, 32px);

@@ -113,3 +154,3 @@ left: var(--backdropPadding, 32px);

.iframe[data-layout="popup"][data-position="bottom-right"] {
.iframe-wrapper[data-layout="popup"][data-position="bottom-right"] {
bottom: var(--backdropPadding, 32px);

@@ -120,3 +161,3 @@ right: var(--backdropPadding, 32px);

/* Modal specific styles */
.iframe[data-layout="modal"] {
.iframe-wrapper[data-layout="modal"] {
top: 50%;

@@ -128,11 +169,14 @@ left: 50%;

/* Sidebar and Half specific styles */
.iframe[data-layout="sidebar"],
.iframe[data-layout="half"] {
/* Sidebar specific styles */
.iframe-wrapper[data-layout="sidebar"] {
transition: opacity linear 150ms, transform linear 150ms;
}
/* Right position */
.iframe[data-layout="sidebar"][data-position="right"],
.iframe[data-layout="half"][data-position="right"] {
/* Half specific styles */
.iframe-wrapper[data-layout="half"] {
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
/* Right position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"] {
top: var(--backdropPadding, 0);

@@ -142,25 +186,45 @@ right: var(--backdropPadding, 0);

}
/* Left position */
.iframe[data-layout="sidebar"][data-position="left"],
.iframe[data-layout="half"][data-position="left"] {
/* Right position - Half */
.iframe-wrapper[data-layout="half"][data-position="right"] {
top: var(--backdropPadding, 0);
right: var(--backdropPadding, 0);
border-width: 0 0 0 var(--borderWidth, 2px);
}
/* Left position - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states */
.iframe[data-layout="sidebar"][data-position="right"]:not(.show),
.iframe[data-layout="half"][data-position="right"]:not(.show) {
/* Left position - Half */
.iframe-wrapper[data-layout="half"][data-position="left"] {
top: var(--backdropPadding, 0);
left: var(--backdropPadding, 0);
border-width: 0 var(--borderWidth, 2px) 0 0;
}
/* Hide transform states - Sidebar */
.iframe-wrapper[data-layout="sidebar"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe[data-layout="sidebar"][data-position="left"]:not(.show),
.iframe[data-layout="half"][data-position="left"]:not(.show) {
/* Hide transform states - Half */
.iframe-wrapper[data-layout="half"][data-position="right"]:not(.show) {
transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="sidebar"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
.iframe-wrapper[data-layout="half"][data-position="left"]:not(.show) {
transform: translate(calc(-100% - var(--backdropPadding, 32px)), 0);
}
/* Show transform state */
.iframe[data-layout="sidebar"].show,
.iframe[data-layout="half"].show {
.iframe-wrapper[data-layout="sidebar"].show,
.iframe-wrapper[data-layout="half"].show {
transform: translate(0, 0);

@@ -170,4 +234,4 @@ }

/* Expanded styles */
.iframe[data-layout="sidebar"][data-expanded="true"],
.iframe[data-layout="half"][data-expanded="true"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"],
.iframe-wrapper[data-layout="half"][data-expanded="true"] {
top: 0;

@@ -179,14 +243,14 @@ height: var(--preferredHeight, 100dvh);

.iframe[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe[data-layout="half"][data-expanded="true"][data-position="right"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="right"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="right"] {
right: 0;
}
.iframe[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe[data-layout="half"][data-expanded="true"][data-position="left"] {
.iframe-wrapper[data-layout="sidebar"][data-expanded="true"][data-position="left"],
.iframe-wrapper[data-layout="half"][data-expanded="true"][data-position="left"] {
left: 0;
}
${customStyles}
</style>
<div class="backdrop" id="wanderEmbeddedBackdrop"></div>
<iframe class="iframe" src="${src}"></iframe>
`;

@@ -193,0 +257,0 @@ };

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

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

{"version":3,"sources":["../../../src/components/iframe/wander-iframe.template.ts"],"names":[],"mappings":";AAIO,IAAM,iCAAiC,CAAC;AAAA,EAC7C,GAAM,GAAA;AACR,CAAA,GAAwC,EAAO,KAAA;AAC7C,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,8BAAA,EA4KuB,GAAG,CAAA;AAAA,CAAA;AAEnC","file":"wander-iframe.template.js","sourcesContent":["export interface WanderIframeTemplateContentOptions {\n src?: string;\n}\n\nexport const getWanderIframeTemplateContent = ({\n src = \"\"\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 /* Base iframe styles */\n .iframe {\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 }\n\n .iframe.show {\n pointer-events: auto;\n opacity: 1;\n }\n\n /* Mobile styles */\n @media (max-width: 540px) {\n .backdrop {\n padding: var(--mobilePadding, 0);\n }\n\n .iframe {\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 .iframe[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[data-layout=\"popup\"] {\n transition: opacity linear 150ms;\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-left\"] {\n top: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"top-right\"] {\n top: var(--backdropPadding, 32px);\n right: var(--backdropPadding, 32px);\n }\n\n .iframe[data-layout=\"popup\"][data-position=\"bottom-left\"] {\n bottom: var(--backdropPadding, 32px);\n left: var(--backdropPadding, 32px);\n }\n\n .iframe[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[data-layout=\"modal\"] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: opacity linear 150ms;\n }\n \n /* Sidebar and Half specific styles */\n .iframe[data-layout=\"sidebar\"],\n .iframe[data-layout=\"half\"] {\n transition: opacity linear 150ms, transform linear 150ms;\n }\n \n /* Right position */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"left\"],\n .iframe[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 */\n .iframe[data-layout=\"sidebar\"][data-position=\"right\"]:not(.show),\n .iframe[data-layout=\"half\"][data-position=\"right\"]:not(.show) {\n transform: translate(calc(100% + var(--backdropPadding, 32px)), 0);\n }\n \n .iframe[data-layout=\"sidebar\"][data-position=\"left\"]:not(.show),\n .iframe[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[data-layout=\"sidebar\"].show,\n .iframe[data-layout=\"half\"].show {\n transform: translate(0, 0);\n }\n \n /* Expanded styles */\n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"],\n .iframe[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[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"right\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"right\"] {\n right: 0;\n }\n \n .iframe[data-layout=\"sidebar\"][data-expanded=\"true\"][data-position=\"left\"],\n .iframe[data-layout=\"half\"][data-expanded=\"true\"][data-position=\"left\"] {\n left: 0;\n }\n </style>\n <div class=\"backdrop\" id=\"wanderEmbeddedBackdrop\"></div>\n <iframe class=\"iframe\" src=\"${src}\"></iframe>\n`;\n};\n"]}
{"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"]}
+1
-1
sdk-dist/index.d.cts
export { WanderEmbedded } from './wander-embedded.cjs';
export { B as BalanceInfo, H as HalfLayoutConfig, i as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, R as RouteConfig, h as RouteType, S as SidebarLayoutConfig, k as ThemeSetting, T as ThemeVariant, r as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, t as WanderEmbeddedButtonLabels, s as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, q as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, o as WanderEmbeddedClickOutsideBehavior, m as WanderEmbeddedComponentConfig, l as WanderEmbeddedComponentOptions, p as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, u as WanderEmbeddedModalCSSVars, g as WanderEmbeddedOptions, j as isRouteConfig, n as isThemeRecord } from './wander-embedded.types-PsqOwcWI.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';
+1
-1
sdk-dist/index.d.ts
export { WanderEmbedded } from './wander-embedded.js';
export { B as BalanceInfo, H as HalfLayoutConfig, i as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, R as RouteConfig, h as RouteType, S as SidebarLayoutConfig, k as ThemeSetting, T as ThemeVariant, r as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, t as WanderEmbeddedButtonLabels, s as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, q as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, o as WanderEmbeddedClickOutsideBehavior, m as WanderEmbeddedComponentConfig, l as WanderEmbeddedComponentOptions, p as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, u as WanderEmbeddedModalCSSVars, g as WanderEmbeddedOptions, j as isRouteConfig, n as isThemeRecord } from './wander-embedded.types-PsqOwcWI.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';
+1
-1
sdk-dist/utils/message/message.types.d.cts

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

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

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

export { z as BaseIncomingMessage, A as IncomingAuthMessage, v as IncomingAuthMessageData, E as IncomingBalanceMessage, x as IncomingBalanceMessageData, C as IncomingCloseMessage, I as IncomingMessage, G as IncomingMessageId, F as IncomingRequestMessage, y as IncomingRequestMessageData, D as IncomingResizeMessage, w as IncomingResizeMessageData, O as OutgoingMessage, U as UserDetails } from '../../wander-embedded.types-PsqOwcWI.js';
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';
+1
-1
sdk-dist/utils/message/message.utils.d.cts

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

import { I as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-PsqOwcWI.cjs';
import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-CIHHwk0q.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 { I as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-PsqOwcWI.js';
import { h as IncomingMessage, O as OutgoingMessage } from '../../wander-embedded.types-CIHHwk0q.js';

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

+85
-1
sdk-dist/wander-embedded.d.cts

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

import { U as UserDetails, R as RouteConfig, B as BalanceInfo, g as WanderEmbeddedOptions } from './wander-embedded.types-PsqOwcWI.cjs';
import { U as UserDetails, g as RouteConfig, B as BalanceInfo, i as WanderEmbeddedOptions } from './wander-embedded.types-CIHHwk0q.cjs';
/**
* WanderEmbedded provides a wallet interface for Arweave applications
*
* This SDK creates and manages:
* - An iframe that loads the Wander wallet interface
* - An optional button component for user interaction
* - Communication between the hosting application and the wallet
*
* When initialized, it automatically sets up `window.arweaveWallet` to enable
* interaction with Arweave applications.
*
* @example
* ```typescript
* const wallet = new WanderEmbedded({
* clientId: 'your-client-id',
* onAuth: (user) => console.log('User authenticated:', user)
* });
*
* // Open the wallet interface
* wallet.open();
*
* // You can also use window.arweaveWallet which is automatically set up
* async function connectWallet() {
* await window.arweaveWallet.connect(["ACCESS_ADDRESS", "SIGN_TRANSACTION"]);
* const address = await window.arweaveWallet.getActiveAddress();
* console.log("Connected to wallet address:", address);
* }
* ```
*/
declare class WanderEmbedded {

@@ -19,8 +48,38 @@ private static instance;

private shouldOpenAutomatically;
/**
* Indicates whether the wallet interface is currently open/visible
*/
isOpen: boolean;
/**
* Contains details about the authenticated user, or null if not authenticated
*/
userDetails: UserDetails | null;
/**
* Current route configuration including dimensions and layout preferences
*/
routeConfig: RouteConfig | null;
/**
* User's current balance information
*/
balanceInfo: BalanceInfo | null;
/**
* Number of pending requests awaiting user action
*/
pendingRequests: number;
private windowArweaveWallet;
/**
* Creates a new instance of the WanderEmbedded SDK
*
* Initializes the wallet interface with the provided configuration options.
* Only one instance of WanderEmbedded can exist at a time.
*
* @param options Configuration options for the SDK including:
* - clientId: Required identifier for your application
* - baseURL: Optional custom URL for the embedded iframe
* - baseServerURL: Optional custom URL for the API server
* - iframe: Configuration for the iframe (layout, styling, behavior)
* - button: Configuration for the button (position, styling, behavior)
* - callbacks: onAuth, onOpen, onClose, onResize, onBalance, onRequest
* @throws Error if an instance already exists or if clientId is not provided
*/
constructor(options: WanderEmbeddedOptions);

@@ -30,7 +89,32 @@ private initializeComponents;

private handleButtonClick;
/**
* Opens the wallet interface
*
* @throws Error if Wander Embedded's iframe and button has been created manually
*/
open(): void;
/**
* Closes the wallet interface
*
* @throws Error if Wander Embedded's iframe and button has been created manually
*/
close(): void;
/**
* Removes all elements and event listeners
*/
destroy(): void;
/**
* Whether a user is currently authenticated
* @returns True if authenticated, false otherwise
*/
get isAuthenticated(): boolean;
/**
* Current width of the wallet interface in pixels
* @returns Width if available
*/
get width(): number | undefined;
/**
* Current height of the wallet interface in pixels
* @returns Height if available
*/
get height(): number | undefined;

@@ -37,0 +121,0 @@ }

+85
-1
sdk-dist/wander-embedded.d.ts

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

import { U as UserDetails, R as RouteConfig, B as BalanceInfo, g as WanderEmbeddedOptions } from './wander-embedded.types-PsqOwcWI.js';
import { U as UserDetails, g as RouteConfig, B as BalanceInfo, i as WanderEmbeddedOptions } from './wander-embedded.types-CIHHwk0q.js';
/**
* WanderEmbedded provides a wallet interface for Arweave applications
*
* This SDK creates and manages:
* - An iframe that loads the Wander wallet interface
* - An optional button component for user interaction
* - Communication between the hosting application and the wallet
*
* When initialized, it automatically sets up `window.arweaveWallet` to enable
* interaction with Arweave applications.
*
* @example
* ```typescript
* const wallet = new WanderEmbedded({
* clientId: 'your-client-id',
* onAuth: (user) => console.log('User authenticated:', user)
* });
*
* // Open the wallet interface
* wallet.open();
*
* // You can also use window.arweaveWallet which is automatically set up
* async function connectWallet() {
* await window.arweaveWallet.connect(["ACCESS_ADDRESS", "SIGN_TRANSACTION"]);
* const address = await window.arweaveWallet.getActiveAddress();
* console.log("Connected to wallet address:", address);
* }
* ```
*/
declare class WanderEmbedded {

@@ -19,8 +48,38 @@ private static instance;

private shouldOpenAutomatically;
/**
* Indicates whether the wallet interface is currently open/visible
*/
isOpen: boolean;
/**
* Contains details about the authenticated user, or null if not authenticated
*/
userDetails: UserDetails | null;
/**
* Current route configuration including dimensions and layout preferences
*/
routeConfig: RouteConfig | null;
/**
* User's current balance information
*/
balanceInfo: BalanceInfo | null;
/**
* Number of pending requests awaiting user action
*/
pendingRequests: number;
private windowArweaveWallet;
/**
* Creates a new instance of the WanderEmbedded SDK
*
* Initializes the wallet interface with the provided configuration options.
* Only one instance of WanderEmbedded can exist at a time.
*
* @param options Configuration options for the SDK including:
* - clientId: Required identifier for your application
* - baseURL: Optional custom URL for the embedded iframe
* - baseServerURL: Optional custom URL for the API server
* - iframe: Configuration for the iframe (layout, styling, behavior)
* - button: Configuration for the button (position, styling, behavior)
* - callbacks: onAuth, onOpen, onClose, onResize, onBalance, onRequest
* @throws Error if an instance already exists or if clientId is not provided
*/
constructor(options: WanderEmbeddedOptions);

@@ -30,7 +89,32 @@ private initializeComponents;

private handleButtonClick;
/**
* Opens the wallet interface
*
* @throws Error if Wander Embedded's iframe and button has been created manually
*/
open(): void;
/**
* Closes the wallet interface
*
* @throws Error if Wander Embedded's iframe and button has been created manually
*/
close(): void;
/**
* Removes all elements and event listeners
*/
destroy(): void;
/**
* Whether a user is currently authenticated
* @returns True if authenticated, false otherwise
*/
get isAuthenticated(): boolean;
/**
* Current width of the wallet interface in pixels
* @returns Width if available
*/
get width(): number | undefined;
/**
* Current height of the wallet interface in pixels
* @returns Height if available
*/
get height(): number | undefined;

@@ -37,0 +121,0 @@ }

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

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

{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;AAgDO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAEO,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;AA4DO,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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\n}\n"]}
{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;AAyJO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAMO,SAAS,cAAc,GAAmC,EAAA;AAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;AAEhD;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"]}
+1
-1
sdk-dist/wander-embedded.types.d.cts

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

export { B as BalanceInfo, H as HalfLayoutConfig, i as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, R as RouteConfig, h as RouteType, S as SidebarLayoutConfig, k as ThemeSetting, T as ThemeVariant, r as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, t as WanderEmbeddedButtonLabels, s as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, q as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, o as WanderEmbeddedClickOutsideBehavior, m as WanderEmbeddedComponentConfig, l as WanderEmbeddedComponentOptions, p as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, u as WanderEmbeddedModalCSSVars, g as WanderEmbeddedOptions, j as isRouteConfig, n as isThemeRecord } from './wander-embedded.types-PsqOwcWI.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';
+1
-1
sdk-dist/wander-embedded.types.d.ts

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

export { B as BalanceInfo, H as HalfLayoutConfig, i as LAYOUT_TYPES, L as LayoutConfig, f as LayoutType, M as ModalLayoutConfig, P as PopupLayoutConfig, R as RouteConfig, h as RouteType, S as SidebarLayoutConfig, k as ThemeSetting, T as ThemeVariant, r as WanderEmbeddedBalanceOptions, W as WanderEmbeddedButtonCSSVars, b as WanderEmbeddedButtonConfig, t as WanderEmbeddedButtonLabels, s as WanderEmbeddedButtonNotifications, a as WanderEmbeddedButtonOptions, q as WanderEmbeddedButtonPosition, c as WanderEmbeddedButtonStatus, o as WanderEmbeddedClickOutsideBehavior, m as WanderEmbeddedComponentConfig, l as WanderEmbeddedComponentOptions, p as WanderEmbeddedIframeConfig, e as WanderEmbeddedIframeOptions, d as WanderEmbeddedLogoVariant, u as WanderEmbeddedModalCSSVars, g as WanderEmbeddedOptions, j as isRouteConfig, n as isThemeRecord } from './wander-embedded.types-PsqOwcWI.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';
+1
-1
sdk-dist/wander-embedded.types.global.js.map

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

{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;;AAgDO,MAAM,YAAe,GAAA;EAAA,EAC1B,OAAA;EAAA,EACA,OAAA;EAAA,EACA,SAAA;EAAA,EACA;EACF;EAEO,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;EA4DO,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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\n}\n"]}
{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";;;;AAyJO,MAAM,YAAe,GAAA;EAAA,EAC1B,OAAA;EAAA,EACA,OAAA;EAAA,EACA,SAAA;EAAA,EACA;EACF;EAMO,SAAS,cAAc,GAAmC,EAAA;EAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;EAEhD;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"]}
+1
-1
sdk-dist/wander-embedded.types.js.map

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

{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";AAgDO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAEO,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;AA4DO,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\nexport type RouteType =\n | \"default\"\n | \"auth\"\n | \"account\"\n | \"settings\"\n | \"auth-request\";\n\nexport interface ModalLayoutConfig {\n type: \"modal\";\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface PopupLayoutConfig {\n type: \"popup\";\n position?: WanderEmbeddedButtonPosition;\n fixedWidth?: number;\n fixedHeight?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface SidebarLayoutConfig {\n type: \"sidebar\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n fixedWidth?: number;\n expandOnMobile?: boolean;\n}\n\nexport interface HalfLayoutConfig {\n type: \"half\";\n position?: \"left\" | \"right\";\n expanded?: boolean;\n imgSrc?: string | boolean;\n expandOnMobile?: boolean;\n}\n\nexport type LayoutConfig =\n | ModalLayoutConfig\n | PopupLayoutConfig\n | SidebarLayoutConfig\n | HalfLayoutConfig;\n\nexport type LayoutType = LayoutConfig[\"type\"];\n\nexport const LAYOUT_TYPES = [\n \"modal\",\n \"popup\",\n \"sidebar\",\n \"half\"\n] as const satisfies LayoutType[];\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\nexport interface RouteConfig {\n routeType: RouteType;\n preferredLayoutType: LayoutType;\n width?: number;\n height: number;\n}\n\nexport interface BalanceInfo {\n amount: number;\n currency: \"USD\" | \"EUR\"; // TODO: Replace with a type that includes all options in the settings?\n}\n\nexport interface WanderEmbeddedOptions {\n /**\n * Client ID for your App, registered on the Wander Dashboard.\n */\n clientId: string;\n\n /**\n * Base URL for the Wander Embed client app.\n */\n baseURL?: string;\n\n /**\n * Base URL for the Wander Embed tRPC server.\n */\n baseServerURL?: string;\n\n iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;\n button?: WanderEmbeddedButtonOptions | boolean;\n\n // TODO: Also export the param types:\n onAuth?: (userDetails: UserDetails | null) => void;\n onOpen?: () => void;\n onClose?: () => void;\n onResize?: (routeConfig: RouteConfig) => void;\n onBalance?: (balanceInfo: BalanceInfo) => void;\n onRequest?: (pendingRequests: number) => void;\n}\n\n// Common:\n\nexport type ThemeVariant = \"light\" | \"dark\";\n\nexport type ThemeSetting = \"system\" | ThemeVariant;\n\nexport interface WanderEmbeddedComponentOptions<T> {\n id?: string;\n theme?: ThemeSetting;\n cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;\n customStyles?: string;\n}\n\nexport interface WanderEmbeddedComponentConfig<T>\n extends Required<WanderEmbeddedComponentOptions<T>> {\n cssVars: Record<ThemeVariant, T>;\n}\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\nexport type WanderEmbeddedClickOutsideBehavior = \"auto\" | boolean;\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 routeLayout?:\n | LayoutType\n | LayoutConfig\n | Partial<Record<RouteType, LayoutType | LayoutConfig>>;\n\n /**\n * Close Wander Embedded when clicking outside of it:\n *\n * - \"auto\": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.\n * - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.\n * - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the\n * backdrop is not visible.\n */\n clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;\n}\n\nexport interface WanderEmbeddedIframeConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {\n routeLayout: Record<RouteType, LayoutConfig>;\n clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;\n}\n\n// Button:\n\nexport type WanderEmbeddedButtonPosition =\n | \"top-right\"\n | \"bottom-right\"\n | \"top-left\"\n | \"bottom-left\";\n\nexport type WanderEmbeddedLogoVariant = \"none\" | \"default\" | \"text-color\";\n\nexport interface WanderEmbeddedBalanceOptions {\n balanceOf: \"total\" | string; // string would be a token id\n currency: \"auto\" | string; // \"auto\" would be the one the user selected on the wallet, string would be a token id or currency symbol (e.g. USD).\n}\n\nexport type WanderEmbeddedButtonNotifications = \"off\" | \"counter\" | \"alert\";\n\nexport interface WanderEmbeddedButtonLabels {\n signIn: string;\n reviewRequests: string;\n}\n\nexport interface WanderEmbeddedButtonOptions\n extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {\n position?: WanderEmbeddedButtonPosition;\n wanderLogo?: WanderEmbeddedLogoVariant;\n /**\n * TODO: Decide if we want this. Currently hidden, as it doesn't really look good.\n * URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.\n */\n dappLogoSrc?: string;\n label?: boolean;\n balance?: boolean | WanderEmbeddedBalanceOptions;\n notifications?: WanderEmbeddedButtonNotifications;\n i18n?: WanderEmbeddedButtonLabels;\n}\n\nexport interface WanderEmbeddedButtonConfig\n extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {\n position: WanderEmbeddedButtonPosition;\n wanderLogo: WanderEmbeddedLogoVariant;\n dappLogoSrc: string;\n label: boolean;\n balance: false | WanderEmbeddedBalanceOptions;\n notifications: WanderEmbeddedButtonNotifications;\n i18n: WanderEmbeddedButtonLabels;\n}\n\nexport type WanderEmbeddedButtonStatus =\n | \"isAuthenticated\"\n | \"isConnected\"\n | \"isOpen\";\n\n// Styles:\n\nexport interface WanderEmbeddedModalCSSVars {\n // Modal (iframe):\n background: string;\n borderWidth: number;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n zIndex: string;\n preferredWidth: number | string;\n preferredHeight: number | string;\n\n // App wrapper (inside iframe):\n iframePadding: number;\n iframeMaxWidth: number;\n iframeMaxHeight: number;\n\n // Backdrop (div):\n backdropBackground: string;\n backdropBackdropFilter: string;\n backdropPadding: number | string;\n\n /**\n * TODO: 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 mobilePadding: number;\n mobileHeight: string | number;\n mobileBorderRadius: number;\n mobileBorderWidth: number;\n mobileBorderColor: string;\n mobileBoxShadow: string;\n}\n\nexport interface WanderEmbeddedButtonCSSVars {\n // Button (button):\n gapX: number | string;\n gapY: number | string;\n gapInside: number | string;\n minWidth: number | string;\n minHeight: number | string;\n zIndex: string;\n padding: number | string;\n font: string;\n\n // Button (button, affected by :hover & :focus):\n background: string;\n color: string;\n borderWidth: number | string;\n borderColor: string;\n borderRadius: number | string;\n boxShadow: string;\n\n // TODO: Vars below are not used yet:\n\n // Logo (img / svg):\n logoBackground: string;\n logoBorderWidth: number | string;\n logoBorderColor: string;\n logoBorderRadius: number | string;\n\n // Notifications (span):\n notificationsBackground: string;\n notificationsBorderWidth: number | string;\n notificationsBorderColor: string;\n notificationsBorderRadius: number | string;\n notificationsBoxShadow: string;\n notificationsPadding: number | string;\n\n // TODO: :hover and :focus specific styling.\n}\n"]}
{"version":3,"sources":["../src/wander-embedded.types.ts"],"names":[],"mappings":";AAyJO,IAAM,YAAe,GAAA;AAAA,EAC1B,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAMO,SAAS,cAAc,GAAmC,EAAA;AAC/D,EAAO,OAAA,CAAC,EACN,GAAA,IACA,OAAO,GAAA,KAAQ,QACf,IAAA,MAAA,IAAU,GACV,IAAA,YAAA,CAAa,QAAS,CAAA,GAAA,CAAI,IAAkB,CAAA,CAAA;AAEhD;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"]}
-209
sdk-dist/wander-embedded.types-PsqOwcWI.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;
};
type RouteType = "default" | "auth" | "account" | "settings" | "auth-request";
interface ModalLayoutConfig {
type: "modal";
fixedWidth?: number;
fixedHeight?: number;
expandOnMobile?: boolean;
}
interface PopupLayoutConfig {
type: "popup";
position?: WanderEmbeddedButtonPosition;
fixedWidth?: number;
fixedHeight?: number;
expandOnMobile?: boolean;
}
interface SidebarLayoutConfig {
type: "sidebar";
position?: "left" | "right";
expanded?: boolean;
fixedWidth?: number;
expandOnMobile?: boolean;
}
interface HalfLayoutConfig {
type: "half";
position?: "left" | "right";
expanded?: boolean;
imgSrc?: string | boolean;
expandOnMobile?: boolean;
}
type LayoutConfig = ModalLayoutConfig | PopupLayoutConfig | SidebarLayoutConfig | HalfLayoutConfig;
type LayoutType = LayoutConfig["type"];
declare const LAYOUT_TYPES: ["modal", "popup", "sidebar", "half"];
declare function isRouteConfig(obj: unknown): obj is LayoutConfig;
interface RouteConfig {
routeType: RouteType;
preferredLayoutType: LayoutType;
width?: number;
height: number;
}
interface BalanceInfo {
amount: number;
currency: "USD" | "EUR";
}
interface WanderEmbeddedOptions {
/**
* Client ID for your App, registered on the Wander Dashboard.
*/
clientId: string;
/**
* Base URL for the Wander Embed client app.
*/
baseURL?: string;
/**
* Base URL for the Wander Embed tRPC server.
*/
baseServerURL?: string;
iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;
button?: WanderEmbeddedButtonOptions | boolean;
onAuth?: (userDetails: UserDetails | null) => void;
onOpen?: () => void;
onClose?: () => void;
onResize?: (routeConfig: RouteConfig) => void;
onBalance?: (balanceInfo: BalanceInfo) => void;
onRequest?: (pendingRequests: number) => void;
}
type ThemeVariant = "light" | "dark";
type ThemeSetting = "system" | ThemeVariant;
interface WanderEmbeddedComponentOptions<T> {
id?: string;
theme?: ThemeSetting;
cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;
customStyles?: string;
}
interface WanderEmbeddedComponentConfig<T> extends Required<WanderEmbeddedComponentOptions<T>> {
cssVars: Record<ThemeVariant, T>;
}
declare function isThemeRecord<T>(cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>): cssVars is Partial<Record<ThemeVariant, Partial<T>>>;
type WanderEmbeddedClickOutsideBehavior = "auto" | boolean;
interface WanderEmbeddedIframeOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {
routeLayout?: LayoutType | LayoutConfig | Partial<Record<RouteType, LayoutType | LayoutConfig>>;
/**
* Close Wander Embedded when clicking outside of it:
*
* - "auto": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.
* - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.
* - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the
* backdrop is not visible.
*/
clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;
}
interface WanderEmbeddedIframeConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {
routeLayout: Record<RouteType, LayoutConfig>;
clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;
}
type WanderEmbeddedButtonPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
type WanderEmbeddedLogoVariant = "none" | "default" | "text-color";
interface WanderEmbeddedBalanceOptions {
balanceOf: "total" | string;
currency: "auto" | string;
}
type WanderEmbeddedButtonNotifications = "off" | "counter" | "alert";
interface WanderEmbeddedButtonLabels {
signIn: string;
reviewRequests: string;
}
interface WanderEmbeddedButtonOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {
position?: WanderEmbeddedButtonPosition;
wanderLogo?: WanderEmbeddedLogoVariant;
/**
* TODO: Decide if we want this. Currently hidden, as it doesn't really look good.
* URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.
*/
dappLogoSrc?: string;
label?: boolean;
balance?: boolean | WanderEmbeddedBalanceOptions;
notifications?: WanderEmbeddedButtonNotifications;
i18n?: WanderEmbeddedButtonLabels;
}
interface WanderEmbeddedButtonConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {
position: WanderEmbeddedButtonPosition;
wanderLogo: WanderEmbeddedLogoVariant;
dappLogoSrc: string;
label: boolean;
balance: false | WanderEmbeddedBalanceOptions;
notifications: WanderEmbeddedButtonNotifications;
i18n: WanderEmbeddedButtonLabels;
}
type WanderEmbeddedButtonStatus = "isAuthenticated" | "isConnected" | "isOpen";
interface WanderEmbeddedModalCSSVars {
background: string;
borderWidth: number;
borderColor: string;
borderRadius: number | string;
boxShadow: string;
zIndex: string;
preferredWidth: number | string;
preferredHeight: number | string;
iframePadding: number;
iframeMaxWidth: number;
iframeMaxHeight: number;
backdropBackground: string;
backdropBackdropFilter: string;
backdropPadding: number | string;
/**
* TODO: 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;
mobilePadding: number;
mobileHeight: string | number;
mobileBorderRadius: number;
mobileBorderWidth: number;
mobileBorderColor: string;
mobileBoxShadow: string;
}
interface WanderEmbeddedButtonCSSVars {
gapX: number | string;
gapY: number | string;
gapInside: number | string;
minWidth: number | string;
minHeight: number | string;
zIndex: string;
padding: number | string;
font: string;
background: string;
color: string;
borderWidth: number | string;
borderColor: string;
borderRadius: number | string;
boxShadow: string;
logoBackground: string;
logoBorderWidth: number | string;
logoBorderColor: string;
logoBorderRadius: number | string;
notificationsBackground: string;
notificationsBorderWidth: number | string;
notificationsBorderColor: string;
notificationsBorderRadius: number | string;
notificationsBoxShadow: string;
notificationsPadding: number | string;
}
export { type IncomingAuthMessage as A, type BalanceInfo as B, type IncomingCloseMessage as C, type IncomingResizeMessage as D, type IncomingBalanceMessage as E, type IncomingRequestMessage as F, type IncomingMessageId as G, type HalfLayoutConfig as H, type IncomingMessage as I, type LayoutConfig as L, type ModalLayoutConfig as M, type OutgoingMessage as O, type PopupLayoutConfig as P, type RouteConfig 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 WanderEmbeddedOptions as g, type RouteType as h, LAYOUT_TYPES as i, isRouteConfig as j, type ThemeSetting as k, type WanderEmbeddedComponentOptions as l, type WanderEmbeddedComponentConfig as m, isThemeRecord as n, type WanderEmbeddedClickOutsideBehavior as o, type WanderEmbeddedIframeConfig as p, type WanderEmbeddedButtonPosition as q, type WanderEmbeddedBalanceOptions as r, type WanderEmbeddedButtonNotifications as s, type WanderEmbeddedButtonLabels as t, type WanderEmbeddedModalCSSVars as u, type IncomingAuthMessageData as v, type IncomingResizeMessageData as w, type IncomingBalanceMessageData as x, type IncomingRequestMessageData as y, type BaseIncomingMessage as z };
-209
sdk-dist/wander-embedded.types-PsqOwcWI.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;
};
type RouteType = "default" | "auth" | "account" | "settings" | "auth-request";
interface ModalLayoutConfig {
type: "modal";
fixedWidth?: number;
fixedHeight?: number;
expandOnMobile?: boolean;
}
interface PopupLayoutConfig {
type: "popup";
position?: WanderEmbeddedButtonPosition;
fixedWidth?: number;
fixedHeight?: number;
expandOnMobile?: boolean;
}
interface SidebarLayoutConfig {
type: "sidebar";
position?: "left" | "right";
expanded?: boolean;
fixedWidth?: number;
expandOnMobile?: boolean;
}
interface HalfLayoutConfig {
type: "half";
position?: "left" | "right";
expanded?: boolean;
imgSrc?: string | boolean;
expandOnMobile?: boolean;
}
type LayoutConfig = ModalLayoutConfig | PopupLayoutConfig | SidebarLayoutConfig | HalfLayoutConfig;
type LayoutType = LayoutConfig["type"];
declare const LAYOUT_TYPES: ["modal", "popup", "sidebar", "half"];
declare function isRouteConfig(obj: unknown): obj is LayoutConfig;
interface RouteConfig {
routeType: RouteType;
preferredLayoutType: LayoutType;
width?: number;
height: number;
}
interface BalanceInfo {
amount: number;
currency: "USD" | "EUR";
}
interface WanderEmbeddedOptions {
/**
* Client ID for your App, registered on the Wander Dashboard.
*/
clientId: string;
/**
* Base URL for the Wander Embed client app.
*/
baseURL?: string;
/**
* Base URL for the Wander Embed tRPC server.
*/
baseServerURL?: string;
iframe?: WanderEmbeddedIframeOptions | HTMLIFrameElement;
button?: WanderEmbeddedButtonOptions | boolean;
onAuth?: (userDetails: UserDetails | null) => void;
onOpen?: () => void;
onClose?: () => void;
onResize?: (routeConfig: RouteConfig) => void;
onBalance?: (balanceInfo: BalanceInfo) => void;
onRequest?: (pendingRequests: number) => void;
}
type ThemeVariant = "light" | "dark";
type ThemeSetting = "system" | ThemeVariant;
interface WanderEmbeddedComponentOptions<T> {
id?: string;
theme?: ThemeSetting;
cssVars?: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>;
customStyles?: string;
}
interface WanderEmbeddedComponentConfig<T> extends Required<WanderEmbeddedComponentOptions<T>> {
cssVars: Record<ThemeVariant, T>;
}
declare function isThemeRecord<T>(cssVars: Partial<T> | Partial<Record<ThemeVariant, Partial<T>>>): cssVars is Partial<Record<ThemeVariant, Partial<T>>>;
type WanderEmbeddedClickOutsideBehavior = "auto" | boolean;
interface WanderEmbeddedIframeOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedModalCSSVars> {
routeLayout?: LayoutType | LayoutConfig | Partial<Record<RouteType, LayoutType | LayoutConfig>>;
/**
* Close Wander Embedded when clicking outside of it:
*
* - "auto": Will close if `backdropBackground` is not transparent or if `backdropBackdropFilter` is used.
* - false: Will never close. Use this if you want Wander Embedded to close by clicking the close icon.
* - true: Will always close. Use this if you want Wander Embedded to close when clicking outside, even if the
* backdrop is not visible.
*/
clickOutsideBehavior?: WanderEmbeddedClickOutsideBehavior;
}
interface WanderEmbeddedIframeConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedModalCSSVars> {
routeLayout: Record<RouteType, LayoutConfig>;
clickOutsideBehavior: WanderEmbeddedClickOutsideBehavior;
}
type WanderEmbeddedButtonPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
type WanderEmbeddedLogoVariant = "none" | "default" | "text-color";
interface WanderEmbeddedBalanceOptions {
balanceOf: "total" | string;
currency: "auto" | string;
}
type WanderEmbeddedButtonNotifications = "off" | "counter" | "alert";
interface WanderEmbeddedButtonLabels {
signIn: string;
reviewRequests: string;
}
interface WanderEmbeddedButtonOptions extends WanderEmbeddedComponentOptions<WanderEmbeddedButtonCSSVars> {
position?: WanderEmbeddedButtonPosition;
wanderLogo?: WanderEmbeddedLogoVariant;
/**
* TODO: Decide if we want this. Currently hidden, as it doesn't really look good.
* URL of the dApp logo that will be displayed next to (overlaid) the Wander logo when connected.
*/
dappLogoSrc?: string;
label?: boolean;
balance?: boolean | WanderEmbeddedBalanceOptions;
notifications?: WanderEmbeddedButtonNotifications;
i18n?: WanderEmbeddedButtonLabels;
}
interface WanderEmbeddedButtonConfig extends WanderEmbeddedComponentConfig<WanderEmbeddedButtonCSSVars> {
position: WanderEmbeddedButtonPosition;
wanderLogo: WanderEmbeddedLogoVariant;
dappLogoSrc: string;
label: boolean;
balance: false | WanderEmbeddedBalanceOptions;
notifications: WanderEmbeddedButtonNotifications;
i18n: WanderEmbeddedButtonLabels;
}
type WanderEmbeddedButtonStatus = "isAuthenticated" | "isConnected" | "isOpen";
interface WanderEmbeddedModalCSSVars {
background: string;
borderWidth: number;
borderColor: string;
borderRadius: number | string;
boxShadow: string;
zIndex: string;
preferredWidth: number | string;
preferredHeight: number | string;
iframePadding: number;
iframeMaxWidth: number;
iframeMaxHeight: number;
backdropBackground: string;
backdropBackdropFilter: string;
backdropPadding: number | string;
/**
* TODO: 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;
mobilePadding: number;
mobileHeight: string | number;
mobileBorderRadius: number;
mobileBorderWidth: number;
mobileBorderColor: string;
mobileBoxShadow: string;
}
interface WanderEmbeddedButtonCSSVars {
gapX: number | string;
gapY: number | string;
gapInside: number | string;
minWidth: number | string;
minHeight: number | string;
zIndex: string;
padding: number | string;
font: string;
background: string;
color: string;
borderWidth: number | string;
borderColor: string;
borderRadius: number | string;
boxShadow: string;
logoBackground: string;
logoBorderWidth: number | string;
logoBorderColor: string;
logoBorderRadius: number | string;
notificationsBackground: string;
notificationsBorderWidth: number | string;
notificationsBorderColor: string;
notificationsBorderRadius: number | string;
notificationsBoxShadow: string;
notificationsPadding: number | string;
}
export { type IncomingAuthMessage as A, type BalanceInfo as B, type IncomingCloseMessage as C, type IncomingResizeMessage as D, type IncomingBalanceMessage as E, type IncomingRequestMessage as F, type IncomingMessageId as G, type HalfLayoutConfig as H, type IncomingMessage as I, type LayoutConfig as L, type ModalLayoutConfig as M, type OutgoingMessage as O, type PopupLayoutConfig as P, type RouteConfig 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 WanderEmbeddedOptions as g, type RouteType as h, LAYOUT_TYPES as i, isRouteConfig as j, type ThemeSetting as k, type WanderEmbeddedComponentOptions as l, type WanderEmbeddedComponentConfig as m, isThemeRecord as n, type WanderEmbeddedClickOutsideBehavior as o, type WanderEmbeddedIframeConfig as p, type WanderEmbeddedButtonPosition as q, type WanderEmbeddedBalanceOptions as r, type WanderEmbeddedButtonNotifications as s, type WanderEmbeddedButtonLabels as t, type WanderEmbeddedModalCSSVars as u, type IncomingAuthMessageData as v, type IncomingResizeMessageData as w, type IncomingBalanceMessageData as x, type IncomingRequestMessageData as y, type BaseIncomingMessage 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