@surf_liquid/surf-widget 0.1.5

package/dist/index.d.ts

@@ -0,0 +1,431 @@
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/** Shape returned by surfliquid's client.getAgentMessages() */
+export declare interface AgentMessage {
+    message: string;
+    txHash: string;
+    /** ISO 8601 date string e.g. "2026-04-09T11:59:13.000Z" */
+    timestamp: string;
+    /** e.g. "USER_DEPOSIT" | "USER_WITHDRAWAL" | "AGENT_REBALANCE" */
+    transactionType: string;
+    /** "USER" | "AGENT" */
+    executedBy: string;
+    /** e.g. "v4" */
+    vaultVersion?: string;
+    chainId?: number;
+}
+
+export declare function Button({ variant, size, isLoading, leftIcon, rightIcon, fullWidth, children, className, disabled, style, ...props }: ButtonProps): JSX_2.Element;
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    leftIcon?: default_2.ReactNode;
+    rightIcon?: default_2.ReactNode;
+    fullWidth?: boolean;
+}
+
+export declare type ButtonSize = 'sm' | 'md' | 'lg';
+
+export declare type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'soft';
+
+export declare interface ChainInfo {
+    name: string;
+    id: number;
+}
+
+declare interface Credentials {
+    appId: string;
+    apiSecret: string;
+}
+
+export declare function DepositModal({ isOpen, onClose, vault, onSwitchToWithdraw, }: DepositModalProps): JSX_2.Element;
+
+export declare interface DepositModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    vault: VaultInfo | null;
+    onSwitchToWithdraw?: () => void;
+}
+
+export declare type DepositStep = {
+    id: 'idle';
+} | {
+    id: 'creating_contract';
+    txHash?: string;
+} | {
+    id: 'approving';
+    txHash?: string;
+} | {
+    id: 'depositing';
+    txHash?: string;
+} | {
+    id: 'success';
+    txHash: string;
+    amount: string;
+} | {
+    id: 'error';
+    error: Error;
+};
+
+export declare interface ISurfClient {
+    getVault(walletAddress?: string): Promise<SurfVaultInfo>;
+    deployVault(): Promise<{
+        vaultAddress: string;
+        transactionHash: string;
+    }>;
+    deposit(params: {
+        asset: string;
+        amount: string;
+    }): Promise<{
+        hash: string;
+        wait(): Promise<unknown>;
+    }>;
+    withdraw(params: {
+        asset: string;
+        amount?: string;
+    }): Promise<{
+        hash: string;
+        wait(): Promise<unknown>;
+    }>;
+    getSupportedAssets(chainId?: number): Promise<SurfSupportedAsset[]>;
+    /** Returns wallet's raw token balance in wei (bigint) — from ERC20 balanceOf */
+    getTokenBalance(tokenAddress: string, owner?: string): Promise<bigint>;
+    /** Returns the max withdrawable amount in wei (bigint) — from vault contract */
+    getWithdrawableAmount(assetAddress: string, vaultAddress?: string): Promise<bigint>;
+    /** Returns agent activity messages for the wallet */
+    getAgentMessages(walletAddress?: string, page?: number, limit?: number): Promise<AgentMessage[]>;
+    on(event: string, handler: (data: {
+        txHash: string;
+    }) => void): void;
+    off(event: string, handler: (data: {
+        txHash: string;
+    }) => void): void;
+}
+
+export declare function ManageDropdown({ isOpen, onClose, onWithdraw, onViewDeposits, onViewActivities }: ManageDropdownProps): JSX_2.Element | null;
+
+export declare interface ManageDropdownProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onWithdraw: () => void;
+    onViewDeposits: () => void;
+    onViewActivities: () => void;
+}
+
+export declare function Modal({ isOpen, onClose, children, className }: ModalProps): JSX_2.Element | null;
+
+export declare interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare function RegistrationForm({ walletAddress, onSuccess }: RegistrationFormProps): JSX_2.Element;
+
+export declare interface RegistrationFormProps {
+    /** Pre-fill the wallet address field (e.g. from connected wallet) */
+    walletAddress?: string;
+    /** Called when registration completes successfully */
+    onSuccess?: (credentials: Credentials) => void;
+}
+
+export declare interface Step {
+    id: string;
+    title: string;
+    description: string;
+    status: StepStatus;
+    txHash?: string;
+}
+
+export declare function StepProgress({ steps, className, baseExplorerUrl }: StepProgressProps): JSX_2.Element;
+
+export declare interface StepProgressProps {
+    steps: Step[];
+    className?: string;
+    baseExplorerUrl?: string;
+}
+
+export declare type StepStatus = 'pending' | 'active' | 'completed' | 'error';
+
+export declare interface SurfConfig {
+    client: ISurfClient;
+    walletAddress: string;
+    chainId?: number;
+    theme?: SurfTheme;
+    onSuccess?: (action: 'deposit' | 'withdraw', txHash: string) => void;
+    onError?: (action: 'deposit' | 'withdraw', error: Error) => void;
+}
+
+export declare const SurfContext: default_2.Context<SurfContextValue | null>;
+
+export declare interface SurfContextValue {
+    walletAddress: string;
+    chainId: number;
+    surfClient: ISurfClient;
+    theme: SurfTheme;
+    onSuccess?: SurfConfig['onSuccess'];
+    onError?: SurfConfig['onError'];
+}
+
+export declare function SurfProvider({ config, containerRef, children }: SurfProviderProps): JSX_2.Element;
+
+export declare interface SurfProviderProps {
+    config: SurfConfig;
+    containerRef: default_2.RefObject<HTMLDivElement | null>;
+    children: ReactNode;
+}
+
+declare interface SurfSupportedAsset {
+    assetAddress: string;
+    assetSymbol: string;
+    assetDecimals: number;
+    chainId: number;
+    currentAPY: number;
+}
+
+export declare interface SurfTheme {
+    colors?: {
+        primary?: string;
+        primaryText?: string;
+        background?: string;
+        cardBackground?: string;
+        text?: string;
+        textSecondary?: string;
+        apy?: string;
+        border?: string;
+        success?: string;
+    };
+    borderRadius?: string;
+    fontFamily?: string;
+}
+
+declare interface SurfVaultAsset {
+    assetAddress: string;
+    assetSymbol: string;
+    assetDecimals: number;
+    chainId: number;
+    currentValueUSD: number;
+    totalEarningsUSD: number;
+    currentAPY: number;
+}
+
+/** Shape returned by surfliquid's client.getVault() */
+declare interface SurfVaultInfo {
+    exists: boolean;
+    userVaultAddress: string | null;
+    homeChainId: number;
+    totalValueUSD: number;
+    totalDepositedUSD: number;
+    earned: {
+        totalEarningsUSD: number;
+    };
+    apyBreakdown: {
+        currentAPY: number;
+    };
+    assets: SurfVaultAsset[];
+}
+
+/**
+ * Drop-in DeFi yield widget.
+ * Pass a SurfClient (from surfliquid) + walletAddress and get the full UI.
+ *
+ * @example
+ * const client = SurfClient.create({ appId: '...', chainId: 8453 });
+ * await client.connectWallet('metamask');
+ * await client.authenticate();
+ *
+ * <SurfWidget client={client} walletAddress={address} />
+ */
+export declare function SurfWidget({ client, walletAddress, chainId, theme, onSuccess, onError, className }: SurfWidgetProps): JSX_2.Element;
+
+export declare interface SurfWidgetProps {
+    client: ISurfClient;
+    walletAddress: string;
+    /** 8453 = Base (default), 137 = Polygon */
+    chainId?: number;
+    theme?: SurfTheme;
+    className?: string;
+    onSuccess?: (action: 'deposit' | 'withdraw', txHash: string) => void;
+    onError?: (action: 'deposit' | 'withdraw', error: Error) => void;
+}
+
+export declare interface Tab {
+    id: string;
+    label: string;
+}
+
+export declare function Tabs({ tabs, activeTab, onChange, className, variant }: TabsProps): JSX_2.Element;
+
+export declare interface TabsProps {
+    tabs: Tab[];
+    activeTab: string;
+    onChange: (id: string) => void;
+    className?: string;
+    variant?: 'pill' | 'underline';
+}
+
+export declare function TokenIcon({ symbol, icon, size, className }: TokenIconProps): JSX_2.Element;
+
+export declare interface TokenIconProps {
+    symbol: string;
+    icon?: string;
+    size?: number;
+    className?: string;
+}
+
+export declare interface TokenInfo {
+    symbol: string;
+    name: string;
+    icon?: string;
+    decimals: number;
+    address: string;
+}
+
+export declare function useAgentMessages(): UseAgentMessagesReturn;
+
+export declare interface UseAgentMessagesReturn {
+    activities: VaultActivity[];
+    isLoading: boolean;
+    refetch: () => void;
+}
+
+export declare interface UseBalanceReturn {
+    balance: string;
+    isLoading: boolean;
+    refetch: () => void;
+}
+
+export declare function useDeposit(): UseDepositReturn;
+
+/**
+ * Fetch the wallet's spendable token balance — used in the Deposit form.
+ * getTokenBalance returns a raw bigint (uint256 wei) from ERC20 balanceOf.
+ */
+export declare function useDepositBalance(tokenAddress: string, decimals?: number): UseBalanceReturn;
+
+export declare interface UseDepositReturn {
+    step: DepositStep;
+    isProcessing: boolean;
+    execute: (amount: string, vault: VaultInfo) => Promise<void>;
+    reset: () => void;
+}
+
+export declare function useSurf(): SurfContextValue;
+
+export declare function useVault(): UseVaultReturn;
+
+export declare interface UseVaultReturn {
+    vault: VaultInfo | null;
+    isLoading: boolean;
+    error: Error | null;
+    refetch: () => void;
+}
+
+export declare function useWithdraw(): UseWithdrawReturn;
+
+/**
+ * Fetch the max withdrawable amount from the vault — used in the Withdraw form.
+ * getWithdrawableAmount returns a raw bigint (uint256 wei) from the vault contract.
+ */
+export declare function useWithdrawableBalance(assetAddress: string, vaultAddress?: string, decimals?: number): UseBalanceReturn;
+
+export declare interface UseWithdrawReturn {
+    step: WithdrawStep;
+    isProcessing: boolean;
+    execute: (amount: string, vault: VaultInfo) => Promise<void>;
+    reset: () => void;
+}
+
+export declare interface VaultActivity {
+    id: string;
+    type: 'deposit' | 'withdraw';
+    description: string;
+    protocol: string;
+    timestamp: number;
+    txHash?: string;
+}
+
+export declare function VaultActivityModal({ isOpen, onClose, initialTab, vault, onWithdraw, onDeposit, }: VaultActivityModalProps): JSX_2.Element;
+
+export declare interface VaultActivityModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    initialTab?: "activities" | "deposits";
+    vault?: VaultInfo | null;
+    onWithdraw?: () => void;
+    onDeposit?: () => void;
+}
+
+export declare function VaultCard({ vault, onDeposit, onWithdraw, onViewDeposits, onViewActivities, isSelected, isLoading, className, }: VaultCardProps): JSX_2.Element;
+
+export declare interface VaultCardProps {
+    vault: VaultInfo;
+    onDeposit: () => void;
+    onWithdraw: () => void;
+    onViewDeposits: () => void;
+    onViewActivities: () => void;
+    isSelected?: boolean;
+    isLoading?: boolean;
+    className?: string;
+}
+
+export declare interface VaultDeposit {
+    id: string;
+    token: {
+        symbol: string;
+        icon?: string;
+    };
+    chain: {
+        name: string;
+        id?: number;
+    };
+    amount: string;
+    earned: string;
+    vaultUrl?: string;
+}
+
+export declare interface VaultInfo {
+    token: TokenInfo;
+    chain: ChainInfo;
+    balance: string;
+    earnings: string;
+    apy: number;
+    withdrawalType: 'instant' | 'standard';
+    availableBalance: string;
+    userVaultAddress?: string;
+    /** Raw vault assets — used by the deposits tab in VaultActivityModal */
+    assets?: SurfVaultAsset[];
+}
+
+export declare function WithdrawModal({ isOpen, onClose, vault, onSwitchToDeposit, }: WithdrawModalProps): JSX_2.Element;
+
+export declare interface WithdrawModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    vault: VaultInfo | null;
+    onSwitchToDeposit?: () => void;
+}
+
+export declare type WithdrawStep = {
+    id: 'idle';
+} | {
+    id: 'closing_position';
+    txHash?: string;
+} | {
+    id: 'redeeming_reward';
+    txHash?: string;
+} | {
+    id: 'success';
+    txHash: string;
+    amount: string;
+} | {
+    id: 'error';
+    error: Error;
+};
+
+export { }