@tokenflight/swap 0.0.4 → 0.1.2

package/README.md

@@ -1,6 +1,8 @@
 # @tokenflight/swap
 
-Embeddable Web Components for cross-chain token swaps.
+Embeddable Web Component SDK centered on `<tokenflight-widget>`.
+
+For public widget usage, import `registerWidgetElement` from `@tokenflight/swap/widget`.
 
 ## Getting Started
 

package/dist/custom-elements.d.ts

@@ -24,6 +24,8 @@
  */
 import type {
   TokenFlightReceiveAttributes,
+  TokenFlightDepositAttributes,
+  TokenFlightWidgetAttributes,
 } from "./index";
 
 /**
@@ -85,9 +87,13 @@ interface ReactHTMLAttributes {
 
 /** Widget attributes + standard HTML attributes */
 type ReceiveElementAttributes = TokenFlightReceiveAttributes & BaseHTMLAttributes;
+type DepositElementAttributes = TokenFlightDepositAttributes & BaseHTMLAttributes;
+type WidgetElementAttributes = TokenFlightWidgetAttributes & BaseHTMLAttributes;
 
 /** With React/Preact camelCase aliases */
 type ReceiveReactAttributes = ReceiveElementAttributes & ReactHTMLAttributes;
+type DepositReactAttributes = DepositElementAttributes & ReactHTMLAttributes;
+type WidgetReactAttributes = WidgetElementAttributes & ReactHTMLAttributes;
 
 // ---------------------------------------------------------------------------
 // Native DOM  (document.createElement, querySelector, etc.)
@@ -96,12 +102,16 @@ type ReceiveReactAttributes = ReceiveElementAttributes & ReactHTMLAttributes;
 declare global {
   interface HTMLElementTagNameMap {
     "tokenflight-receive": HTMLElement;
+    "tokenflight-deposit": HTMLElement;
+    "tokenflight-widget": HTMLElement;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace svelteHTML {
     interface IntrinsicElements {
       "tokenflight-receive": ReceiveElementAttributes;
+      "tokenflight-deposit": DepositElementAttributes;
+      "tokenflight-widget": WidgetElementAttributes;
     }
   }
 }
@@ -114,6 +124,8 @@ declare module "react/jsx-runtime" {
   namespace JSX {
     interface IntrinsicElements {
       "tokenflight-receive": ReceiveReactAttributes;
+      "tokenflight-deposit": DepositReactAttributes;
+      "tokenflight-widget": WidgetReactAttributes;
     }
   }
 }
@@ -126,6 +138,8 @@ declare module "react" {
   namespace JSX {
     interface IntrinsicElements {
       "tokenflight-receive": ReceiveReactAttributes;
+      "tokenflight-deposit": DepositReactAttributes;
+      "tokenflight-widget": WidgetReactAttributes;
     }
   }
 }
@@ -138,6 +152,8 @@ declare module "preact" {
   namespace JSX {
     interface IntrinsicElements {
       "tokenflight-receive": ReceiveReactAttributes;
+      "tokenflight-deposit": DepositReactAttributes;
+      "tokenflight-widget": WidgetReactAttributes;
     }
   }
 }
@@ -148,6 +164,8 @@ declare module "preact" {
 declare module "vue" {
   interface GlobalComponents {
     "tokenflight-receive": ReceiveElementAttributes;
+    "tokenflight-deposit": DepositElementAttributes;
+    "tokenflight-widget": WidgetElementAttributes;
   }
 }
 
@@ -159,6 +177,8 @@ declare module "solid-js" {
   namespace JSX {
     interface IntrinsicElements {
       "tokenflight-receive": ReceiveElementAttributes;
+      "tokenflight-deposit": DepositElementAttributes;
+      "tokenflight-widget": WidgetElementAttributes;
     }
   }
 }
@@ -169,6 +189,8 @@ declare module "solid-js" {
 declare module "svelte/elements" {
   interface SvelteHTMLElements {
     "tokenflight-receive": ReceiveElementAttributes;
+    "tokenflight-deposit": DepositElementAttributes;
+    "tokenflight-widget": WidgetElementAttributes;
   }
 }
 
@@ -178,5 +200,7 @@ declare module "svelte/elements" {
 declare namespace astroHTML.JSX {
   interface IntrinsicElements {
     "tokenflight-receive": ReceiveElementAttributes;
+    "tokenflight-deposit": DepositElementAttributes;
+    "tokenflight-widget": WidgetElementAttributes;
   }
 }

package/dist/deposit.d.ts

@@ -0,0 +1,304 @@
+import { QuoteResponse } from '@tokenflight/api';
+
+/** Amount change data */
+declare interface AmountChangedData {
+    amount: string;
+    direction: "from" | "to";
+}
+
+/**
+ * Boolean HTML attribute — accepts both native booleans and the
+ * string equivalents that `parseBooleanProp()` understands.
+ */
+declare type BooleanAttribute = boolean | "true" | "false" | "1" | "0" | "yes" | "no" | "";
+
+/** Callback interfaces for widget events */
+export declare interface Callbacks {
+    onSwapSuccess?(data: SwapSuccessData): void;
+    onSwapError?(data: SwapErrorData): void;
+    onWalletConnected?(data: WalletConnectedData): void;
+    onQuoteReceived?(data: QuoteResponse): void;
+    onAmountChanged?(data: AmountChangedData): void;
+    /** Called when user clicks Connect Wallet and no walletAdapter is provided */
+    onConnectWallet?(): void;
+    /** Called when user clicks the connected wallet address (for custom account modal handling) */
+    onAccountModal?(): void;
+    /** Called when a fiat order is created and the payment widget URL is available */
+    onFiatOrderCreated?(data: {
+        orderId: string;
+        widgetUrl: string;
+    }): void;
+    /** Called when a fiat order reaches a terminal status */
+    onFiatOrderCompleted?(data: {
+        orderId: string;
+        status: string;
+        txHash?: string;
+    }): void;
+    /** Called when a deposit completes successfully */
+    onDepositSuccess?(data: SwapSuccessData): void;
+    /** Called when a deposit fails */
+    onDepositError?(data: SwapErrorData): void;
+}
+
+/** Chain type for multi-chain support */
+declare type ChainType = "evm" | "solana";
+
+/**
+ * Custom color overrides — keys are CSS variable names.
+ * Typed keys provide autocomplete; arbitrary `--tf-*` strings are also accepted.
+ *
+ * ```ts
+ * customColors: {
+ *   "--tf-primary": "#FF6B00",
+ *   "--tf-bg": "#1A1A2E",
+ *   "--tf-button-radius": "4px",
+ *   "--tf-widget-max-width": "480px",
+ * }
+ * ```
+ */
+export declare type CustomColors = Partial<Record<TfCssVar, string>> & Record<string, string>;
+
+/** Payment methods available in `<tokenflight-deposit>` */
+export declare type DepositMethod = "wallet" | "card";
+
+/** EVM wallet action via EIP-1193 */
+declare interface EvmWalletAction {
+    type: "eip1193_request";
+    chainId: number;
+    method: string;
+    params: unknown[];
+}
+
+/** How the fiat payment provider UI is opened. */
+export declare type FiatPaymentMode = "overlay" | "popup";
+
+declare interface ImperativeWidgetOptions<TConfig> {
+    container: string | HTMLElement;
+    config: TConfig;
+    walletAdapter?: IWalletAdapter;
+    callbacks?: Callbacks;
+}
+
+/** Wallet adapter interface that all adapters must implement */
+export declare interface IWalletAdapter {
+    /** Human-readable name */
+    readonly name: string;
+    /** Icon URL */
+    readonly icon?: string;
+    /** Supported action types */
+    readonly supportedActionTypes: WalletActionType[];
+    /** Optional: supported chain IDs — when set, the widget only shows tokens on these chains */
+    readonly supportedChainIds?: number[];
+    /** Connect the wallet */
+    connect(chainType?: ChainType): Promise<void>;
+    /** Disconnect the wallet */
+    disconnect(): Promise<void>;
+    /** Check if connected */
+    isConnected(chainType?: ChainType): boolean;
+    /** Get the current address */
+    getAddress(chainType?: ChainType): Promise<string | null>;
+    /** Execute a wallet action */
+    executeWalletAction(action: WalletAction): Promise<WalletActionResult>;
+    /** Optional: sign a message */
+    signMessage?(message: string, chainType?: ChainType): Promise<string>;
+    /** Optional: open the wallet's native account/connected modal */
+    openAccountModal?(): Promise<void>;
+    /** Optional: clean up internal subscriptions and watchers */
+    destroy?(): void;
+    /** Subscribe to wallet events */
+    on(event: WalletEventType, handler: (event: WalletEvent) => void): void;
+    /** Unsubscribe from wallet events */
+    off(event: WalletEventType, handler: (event: WalletEvent) => void): void;
+}
+
+export declare function registerDepositElement(options?: RegisterElementsOptions): void;
+
+export declare interface RegisterElementsOptions {
+    walletAdapter?: IWalletAdapter;
+    callbacks?: Callbacks;
+    /** Custom CSS variable overrides merged on top of the active theme.
+     *  Keys are CSS variable names, e.g. `"--tf-primary"`, `"--tf-font-family"`. */
+    customColors?: CustomColors;
+    /** Default API endpoint for all widget instances. */
+    apiEndpoint?: string;
+    /** Default theme for all widget instances. */
+    theme?: Theme;
+    /** Default locale for all widget instances. */
+    locale?: SupportedLocale;
+}
+
+/** Solana sign and send transaction action */
+declare interface SolanaSignAndSendAction {
+    type: "solana_signAndSendTransaction";
+    transaction: string;
+}
+
+/** Solana sign transaction action */
+declare interface SolanaSignTransactionAction {
+    type: "solana_signTransaction";
+    transaction: string;
+}
+
+/** Supported locale identifiers. Accepts any string for forward-compat; known values get bundled translations. */
+export declare type SupportedLocale = "en-US" | "zh-CN" | "zh-TW" | "ja-JP" | "ko-KR" | (string & {});
+
+/** Data emitted on swap error */
+declare interface SwapErrorData {
+    code: string;
+    message: string;
+    details?: unknown;
+}
+
+/** Data emitted on swap success */
+declare interface SwapSuccessData {
+    orderId: string;
+    fromToken: string;
+    toToken: string;
+    fromAmount: string;
+    toAmount: string;
+    txHash: string;
+}
+
+/** All first-party CSS custom properties exposed for theming. */
+declare type TfCssVar = "--tf-bg" | "--tf-bg-secondary" | "--tf-bg-elevated" | "--tf-surface" | "--tf-surface-hover" | "--tf-input-bg" | "--tf-glass" | "--tf-text" | "--tf-text-secondary" | "--tf-text-tertiary" | "--tf-text-on-primary" | "--tf-border" | "--tf-border-light" | "--tf-primary" | "--tf-primary-alpha" | "--tf-primary-light" | "--tf-primary-glow" | "--tf-success" | "--tf-success-bg" | "--tf-error" | "--tf-error-bg" | "--tf-error-alpha" | "--tf-warning" | "--tf-warning-bg" | "--tf-shadow" | "--tf-shadow-lg" | "--tf-skeleton" | "--tf-radius-xs" | "--tf-radius-sm" | "--tf-radius" | "--tf-radius-lg" | "--tf-radius-xl" | "--tf-button-radius" | "--tf-widget-max-width" | "--tf-font-family" | "--tf-font-family-mono";
+
+/** Visual theme mode. */
+export declare type Theme = "light" | "dark" | "auto";
+
+/** Shared configuration fields for both widgets */
+declare interface TokenFlightConfigBase {
+    /** HyperStream API endpoint */
+    apiEndpoint?: string;
+    /** Fiat on-ramp API endpoint (default: https://fiat-preview.hyperstream.dev) */
+    fiatApiEndpoint?: string;
+    /** Visual theme */
+    theme?: Theme;
+    /** Locale for i18n */
+    locale?: SupportedLocale;
+    /** Custom CSS color overrides */
+    customColors?: CustomColors;
+    /** Optional custom widget title text */
+    titleText?: string;
+    /** Optional custom widget title image URL */
+    titleImageUrl?: string;
+    /** Hide top title/header area */
+    hideTitle?: boolean;
+    /** Hide "Powered by TokenFlight" footer */
+    hidePoweredBy?: boolean;
+    /** Remove container background (transparent) */
+    noBackground?: boolean;
+    /** Remove container border and shadow */
+    noBorder?: boolean;
+}
+
+export declare const TokenFlightDeposit: {
+    new (options: ImperativeWidgetOptions<TokenFlightDepositConfig>): {
+        #dispose: (() => void) | null;
+        #unwatchTheme: (() => void) | null;
+        #container: HTMLElement;
+        #shadowRoot: ShadowRoot | null;
+        #config: TokenFlightDepositConfig;
+        #walletAdapter?: IWalletAdapter;
+        #callbacks?: Callbacks;
+        initialize(): void;
+        destroy(): void;
+        setTheme(theme: Theme): void;
+        setCustomColors(colors: CustomColors): void;
+        #applyThemeStyles(style: HTMLStyleElement, theme: string): void;
+        #setupAutoThemeWatch(style: HTMLStyleElement): void;
+    };
+};
+
+/** Attributes accepted by `<tokenflight-deposit>`. */
+export declare interface TokenFlightDepositAttributes {
+    "api-endpoint"?: string;
+    target?: string;
+    amount?: string;
+    "from-token"?: string;
+    recipient?: string;
+    methods?: string;
+    "target-icon"?: string;
+    "fiat-currency"?: string;
+    "fiat-payment-mode"?: string;
+    "title-text"?: string;
+    "title-image"?: string;
+    theme?: Theme;
+    locale?: SupportedLocale;
+    "csp-nonce"?: string;
+    "hide-title"?: BooleanAttribute;
+    "hide-powered-by"?: BooleanAttribute;
+    "no-background"?: BooleanAttribute;
+    "no-border"?: BooleanAttribute;
+}
+
+/** Configuration for `<tokenflight-deposit>` */
+export declare interface TokenFlightDepositConfig extends TokenFlightConfigBase {
+    /** Target token(s) to deposit into. When omitted, user selects via TokenSelector. */
+    target?: TokenIdentifier | TokenIdentifier[];
+    /** Optional: fixed amount for the target token */
+    amount?: string;
+    /** Optional: recipient address */
+    recipient?: string;
+    /** Payment methods to offer (default: ["wallet"]) */
+    methods?: DepositMethod[];
+    /** Optional source token to pay with */
+    fromToken?: TokenIdentifier;
+    /** Optional icon URL for the target token */
+    targetIcon?: string;
+    /** Fiat currency code for card payments (default: "USD") */
+    fiatCurrency?: string;
+    /** How to open the fiat payment provider (default: "overlay") */
+    fiatPaymentMode?: FiatPaymentMode;
+}
+
+export declare interface TokenFlightDepositOptions {
+    container: string | HTMLElement;
+    config: TokenFlightDepositConfig;
+    walletAdapter?: IWalletAdapter;
+    callbacks?: Callbacks;
+}
+
+/**
+ * Flexible token identifier supporting:
+ * - Direct object: { chainId: 1, address: "0x..." }
+ * - CAIP-10 string: "eip155:1:0x..."
+ * - JSON string: '{"chainId":1,"address":"0x..."}'
+ */
+declare type TokenIdentifier = string | TokenTarget;
+
+/** Token target as chain + address pair */
+declare interface TokenTarget {
+    chainId: number;
+    address: string;
+}
+
+/** Union of all wallet action types */
+declare type WalletAction = EvmWalletAction | SolanaSignTransactionAction | SolanaSignAndSendAction;
+
+/** Result of executing a wallet action */
+declare interface WalletActionResult {
+    success: boolean;
+    data?: unknown;
+    error?: string;
+    txHash?: string;
+}
+
+/** Wallet action types */
+declare type WalletActionType = "eip1193_request" | "solana_signTransaction" | "solana_signAndSendTransaction";
+
+/** Data emitted when wallet is connected */
+declare interface WalletConnectedData {
+    address: string;
+    chainType: string;
+}
+
+/** Wallet event payload */
+declare interface WalletEvent {
+    type: WalletEventType;
+    data?: unknown;
+}
+
+/** Wallet event types */
+declare type WalletEventType = "connect" | "disconnect" | "chainChanged" | "accountsChanged";
+
+export { }

package/dist/deposit.js

@@ -0,0 +1 @@
+import"./dist-D4PEwqKq.js";import"./widget-9I201q7O.js";import{n as e,t}from"./register-deposit-COFuKwk-.js";export{e as TokenFlightDeposit,t as registerDepositElement};