@unifold/ui-react 0.1.24 → 0.1.26

package/dist/index.d.mts

@@ -24,6 +24,8 @@ interface DepositModalProps {
     showBalanceHeader?: boolean;
     /** Input variant for Transfer Crypto view: "single_input" or "double_input" (default) */
     transferInputVariant?: "single_input" | "double_input";
+    /** Enable browser wallet connection option. Defaults to false */
+    enableConnectWallet?: boolean;
     onDepositSuccess?: (data: {
         message: string;
         transaction?: unknown;
@@ -36,7 +38,7 @@ interface DepositModalProps {
     }) => void;
     theme?: "light" | "dark" | "auto";
 }
-declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, showBalanceHeader, transferInputVariant, onDepositSuccess, onDepositError, theme, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, showBalanceHeader, transferInputVariant, enableConnectWallet, onDepositSuccess, onDepositError, theme, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;
@@ -173,6 +175,19 @@ interface StyledQRCodeProps {
     imageSize?: number;
     darkMode?: boolean;
 }
+/**
+ * Pre-generate a QR code and cache it for instant display later.
+ * Call this when wallet address is fetched, before modal opens.
+ */
+declare function preloadQRCode(value: string, size?: number, imageUrl?: string, imageSize?: number, darkMode?: boolean): Promise<void>;
+/**
+ * Check if a QR code is already cached
+ */
+declare function isQRCodeCached(value: string, size?: number, imageUrl?: string, darkMode?: boolean): boolean;
+/**
+ * Clear the QR code cache (useful for memory management)
+ */
+declare function clearQRCodeCache(): void;
 declare function StyledQRCode({ value, size, imageUrl, imageSize, darkMode, }: StyledQRCodeProps): react_jsx_runtime.JSX.Element;
 
 interface TransferCryptoButtonProps {
@@ -199,6 +214,45 @@ interface DepositTrackerButtonProps {
 }
 declare function DepositTrackerButton({ onClick, title, subtitle, badge, }: DepositTrackerButtonProps): react_jsx_runtime.JSX.Element;
 
+declare global {
+    interface Window {
+        phantom?: {
+            solana?: PhantomSolanaProvider;
+            ethereum?: EthereumProvider;
+        };
+        solana?: PhantomSolanaProvider;
+        ethereum?: EthereumProvider;
+    }
+}
+interface PhantomSolanaProvider {
+    isPhantom?: boolean;
+    isConnected?: boolean;
+    publicKey?: {
+        toString(): string;
+    };
+    connect(opts?: {
+        onlyIfTrusted?: boolean;
+    }): Promise<{
+        publicKey: {
+            toString(): string;
+        };
+    }>;
+    disconnect(): Promise<void>;
+    on(event: string, callback: (...args: unknown[]) => void): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
+}
+interface EthereumProvider {
+    isMetaMask?: boolean;
+    isPhantom?: boolean;
+    selectedAddress?: string;
+    request(args: {
+        method: string;
+        params?: unknown[];
+    }): Promise<unknown>;
+    on(event: string, callback: (...args: unknown[]) => void): void;
+    removeListener(event: string, callback: (...args: unknown[]) => void): void;
+}
+
 interface DepositExecutionItemProps {
     execution: AutoSwapResponse;
     onClick?: () => void;
@@ -227,7 +281,7 @@ declare function CurrencyListSection({ title, currencies, selectedCurrency, onSe
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -263,8 +317,19 @@ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.S
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Tooltip wrapper that supports both hover (desktop) and tap-to-toggle (mobile).
+ *
+ * Radix Tooltip only opens on hover, which is unusable on touch devices.
+ * This wrapper adds controlled open state so the trigger's onClick can toggle it,
+ * while preserving the default hover behavior on desktop.
+ */
+declare function Tooltip({ children, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+/**
+ * Tooltip trigger that adds click-to-toggle for mobile/touch support.
+ * On desktop, hover still works as usual via Radix's built-in behavior.
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -572,4 +637,4 @@ declare function cn(...inputs: ClassValue[]): string;
  */
 declare function truncateAddress(address: string, startChars?: number, endChars?: number): string;
 
-export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, cn, colors, defaultColors, getColors, mergeColors, resolveComponentTokens, truncateAddress, useAllowedCountry, useTheme };
+export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, clearQRCodeCache, cn, colors, defaultColors, getColors, isQRCodeCached, mergeColors, preloadQRCode, resolveComponentTokens, truncateAddress, useAllowedCountry, useTheme };

package/dist/index.d.ts

@@ -24,6 +24,8 @@ interface DepositModalProps {
     showBalanceHeader?: boolean;
     /** Input variant for Transfer Crypto view: "single_input" or "double_input" (default) */
     transferInputVariant?: "single_input" | "double_input";
+    /** Enable browser wallet connection option. Defaults to false */
+    enableConnectWallet?: boolean;
     onDepositSuccess?: (data: {
         message: string;
         transaction?: unknown;
@@ -36,7 +38,7 @@ interface DepositModalProps {
     }) => void;
     theme?: "light" | "dark" | "auto";
 }
-declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, showBalanceHeader, transferInputVariant, onDepositSuccess, onDepositError, theme, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, showBalanceHeader, transferInputVariant, enableConnectWallet, onDepositSuccess, onDepositError, theme, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;
@@ -173,6 +175,19 @@ interface StyledQRCodeProps {
     imageSize?: number;
     darkMode?: boolean;
 }
+/**
+ * Pre-generate a QR code and cache it for instant display later.
+ * Call this when wallet address is fetched, before modal opens.
+ */
+declare function preloadQRCode(value: string, size?: number, imageUrl?: string, imageSize?: number, darkMode?: boolean): Promise<void>;
+/**
+ * Check if a QR code is already cached
+ */
+declare function isQRCodeCached(value: string, size?: number, imageUrl?: string, darkMode?: boolean): boolean;
+/**
+ * Clear the QR code cache (useful for memory management)
+ */
+declare function clearQRCodeCache(): void;
 declare function StyledQRCode({ value, size, imageUrl, imageSize, darkMode, }: StyledQRCodeProps): react_jsx_runtime.JSX.Element;
 
 interface TransferCryptoButtonProps {
@@ -199,6 +214,45 @@ interface DepositTrackerButtonProps {
 }
 declare function DepositTrackerButton({ onClick, title, subtitle, badge, }: DepositTrackerButtonProps): react_jsx_runtime.JSX.Element;
 
+declare global {
+    interface Window {
+        phantom?: {
+            solana?: PhantomSolanaProvider;
+            ethereum?: EthereumProvider;
+        };
+        solana?: PhantomSolanaProvider;
+        ethereum?: EthereumProvider;
+    }
+}
+interface PhantomSolanaProvider {
+    isPhantom?: boolean;
+    isConnected?: boolean;
+    publicKey?: {
+        toString(): string;
+    };
+    connect(opts?: {
+        onlyIfTrusted?: boolean;
+    }): Promise<{
+        publicKey: {
+            toString(): string;
+        };
+    }>;
+    disconnect(): Promise<void>;
+    on(event: string, callback: (...args: unknown[]) => void): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
+}
+interface EthereumProvider {
+    isMetaMask?: boolean;
+    isPhantom?: boolean;
+    selectedAddress?: string;
+    request(args: {
+        method: string;
+        params?: unknown[];
+    }): Promise<unknown>;
+    on(event: string, callback: (...args: unknown[]) => void): void;
+    removeListener(event: string, callback: (...args: unknown[]) => void): void;
+}
+
 interface DepositExecutionItemProps {
     execution: AutoSwapResponse;
     onClick?: () => void;
@@ -227,7 +281,7 @@ declare function CurrencyListSection({ title, currencies, selectedCurrency, onSe
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -263,8 +317,19 @@ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.S
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Tooltip wrapper that supports both hover (desktop) and tap-to-toggle (mobile).
+ *
+ * Radix Tooltip only opens on hover, which is unusable on touch devices.
+ * This wrapper adds controlled open state so the trigger's onClick can toggle it,
+ * while preserving the default hover behavior on desktop.
+ */
+declare function Tooltip({ children, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+/**
+ * Tooltip trigger that adds click-to-toggle for mobile/touch support.
+ * On desktop, hover still works as usual via Radix's built-in behavior.
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -572,4 +637,4 @@ declare function cn(...inputs: ClassValue[]): string;
  */
 declare function truncateAddress(address: string, startChars?: number, endChars?: number): string;
 
-export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, cn, colors, defaultColors, getColors, mergeColors, resolveComponentTokens, truncateAddress, useAllowedCountry, useTheme };
+export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, clearQRCodeCache, cn, colors, defaultColors, getColors, isQRCodeCached, mergeColors, preloadQRCode, resolveComponentTokens, truncateAddress, useAllowedCountry, useTheme };