@deframe-sdk/components 0.1.6 → 0.1.7

package/dist/index.d.ts

@@ -856,4 +856,389 @@ interface StrategyDetailsViewProps {
 }
 declare const StrategyDetailsView: React__default.FC<StrategyDetailsViewProps>;
 
-export { ActionButton, ActionSheet, type ActionSheetProps, AddressDisplay, type AddressDisplayProps, BackgroundContainer, type BackgroundContainerProps, BannerNotification, type BannerNotificationProps, type ButtonProps, ChooseAStrategyActionsheetView, type ChooseAStrategyActionsheetViewProps, CloseButton, type CloseButtonProps, CollapsibleInfoRow, type CollapsibleInfoRowProps, ConnectWalletList, type ConnectWalletListProps, Currency, type CurrencyProps, type CurrencyType, DeframeComponentsProvider, type DeframeTheme, type DeframeThemeColors, type DeframeThemeConfig, type DetailItem, DetailsHeader, type DetailsHeaderProps, Currency as Fiat, type FiatProps, FlexCol, type FlexColProps, FlexRow, type FlexRowProps, HighRiskBadge, type HighRiskBadgeProps, type HistoryAssetViewProps, HistoryDepositDetailsView, type HistoryDetailsLabels, type HistoryDetailsViewProps, HistoryWithdrawDetailsView, InfoLabel, type InfoLabelProps, InfoRow, InfoRowIconLabel, type InfoRowIconLabelProps, InfoRowIconValue, type InfoRowIconValueProps, type InfoRowProps, InfoRowWithIcon, type InfoRowWithIconProps, InfoValue, type InfoValueProps, Input, type InputFieldRegistration, type InputProps, Link, type LinkProps, ListItem, ListItemContent, ListItemLeftSide, type ListItemProps, ListItemRightSide, LowRiskBadge, type LowRiskBadgeProps, MediumRiskBadge, type MediumRiskBadgeProps, Navbar, type NavbarProps, PercentageButton, PrimaryButton, ScrollableContent, type ScrollableContentProps, SecondaryButton, SectionCard, type SectionCardProps, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Skeleton, type SkeletonProps, StrategyDetailsView, type StrategyDetailsViewProps, SummaryDetails, SummaryDetailsCryptoControlV2, type SummaryDetailsProps, SwapAmountInputView, type SwapAmountInputViewProps, SwapNetworkSelectorView, type SwapNetworkSelectorViewProps, SwapOutputAmountView, type SwapOutputAmountViewProps, SwapQuoteBlockchainCostsView, type SwapQuoteBlockchainCostsViewProps, SwapQuoteErrorsView, type SwapQuoteErrorsViewProps, SwapQuoteHeaderView, type SwapQuoteHeaderViewProps, SwapSlippageToleranceButtonsView, type SwapSlippageToleranceButtonsViewProps, SwapTokenSelectorView, type SwapTokenSelectorViewProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TertiaryButton, Text, TextAccent, type TextAccentProps, TextBody, type TextBodyProps, TextHeading, type TextHeadingProps, type TextProps, type ThemeMode, type ThemePreset, Title, WalletItem, type WalletItemProps, ConnectWalletList as WalletList, WalletListContainer, type WalletListContainerProps, type ConnectWalletListProps as WalletListProps, type WalletOption, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
+interface ProgressIndicatorProps {
+    /** Progress percentage (0-100) */
+    progress: number;
+    /** Optional className for custom styling */
+    className?: string;
+}
+declare const ProgressIndicator: React__default.FC<ProgressIndicatorProps>;
+
+interface LoadingDotsProps {
+    className?: string;
+}
+/**
+ * Animated loading dots component with a bouncing effect
+ * Used to indicate loading states throughout the application
+ */
+declare const LoadingDots: React__default.FC<LoadingDotsProps>;
+
+interface SearchInputProps {
+    /**
+     * Placeholder text (default: "Search")
+     */
+    placeholder?: string;
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Change handler — called immediately on every keystroke
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Search handler — called immediately on every keystroke (debounce in the container)
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Additional CSS class names for container
+     */
+    className?: string;
+    /**
+     * Additional CSS class names for input element (e.g., custom background)
+     */
+    inputClassName?: string;
+    /**
+     * Whether the input should be auto focused
+     */
+    autoFocus?: boolean;
+    /**
+     * test id for the container
+     */
+    containerTestId?: string;
+    /**
+     * test id for the input element
+     */
+    inputTestId?: string;
+}
+/**
+ * SearchInput - Search input component with search icon
+ */
+declare const SearchInput: React__default.FC<SearchInputProps>;
+
+interface SearchEmptyStateProps {
+    title: string;
+    description: string;
+}
+declare const SearchEmptyState: React__default.FC<SearchEmptyStateProps>;
+
+interface CollapsibleSectionProps {
+    /** Section title */
+    title: string;
+    /** Optional subtitle shown next to title */
+    subtitle?: string;
+    /** Content to show when expanded */
+    children: React__default.ReactNode;
+    /** Whether section is open by default (uncontrolled mode) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Optional className */
+    className?: string;
+    /** Aria label text for "Collapse" */
+    collapseText: string;
+    /** Aria label text for "Expand" */
+    expandText: string;
+}
+declare const CollapsibleSection: React__default.FC<CollapsibleSectionProps>;
+
+interface TransactionScreenIconProps {
+    type: 'processing' | 'success' | 'warning';
+    gradient?: string;
+}
+declare const TransactionScreenIcon: React__default.FC<TransactionScreenIconProps>;
+
+interface TransactionScreenProps {
+    progress: number;
+    iconType: TransactionScreenIconProps['type'];
+    iconGradient?: string;
+    title: React__default.ReactNode;
+    description: React__default.ReactNode;
+    /** Renders a close (X) button in the top-left */
+    onClose?: () => void;
+    /** Renders a back-arrow header */
+    onBack?: () => void;
+    backTitle?: string;
+    /** Bottom action bar (buttons) */
+    actions?: React__default.ReactNode;
+    /** Card / details content between hero and actions */
+    children?: React__default.ReactNode;
+    /** data-testid placed on the header wrapper div when onClose is used */
+    testId?: string;
+}
+declare const TransactionScreen: React__default.FC<TransactionScreenProps>;
+
+interface TransactionScreenInvestmentCardProps {
+    strategyName: React__default.ReactNode;
+    apyLabel: string;
+    apyValue: string;
+    iconSrc?: string;
+    iconAlt?: string;
+    amountUSD: React__default.ReactNode;
+    amountToken: React__default.ReactNode;
+}
+declare const TransactionScreenInvestmentCard: React__default.FC<TransactionScreenInvestmentCardProps>;
+
+type TransactionStepStatus = 'completed' | 'processing' | 'failed';
+interface TransactionStep {
+    /** Step label/title */
+    label: string;
+    /** Current status of the step */
+    status?: TransactionStepStatus;
+    /** Optional status text override (e.g., "Processando...") - can be string or React node */
+    statusText?: React.ReactNode;
+    /** Optional explorer URL for this step */
+    explorerUrl?: string;
+    /** Optional static value (for info-only steps like "Tempo estimado") */
+    value?: ReactNode;
+}
+
+interface TransactionProcessingDetailsLabels {
+    title: string;
+    completedText: string;
+    processingText: string;
+    failedText: string;
+    viewOnExplorerText: string;
+}
+
+interface TransactionProcessingDetailsProps {
+    /** Array of transaction steps to display */
+    steps: TransactionStep[];
+    /** Optional CSS class name */
+    className?: string;
+    /** Whether the details section is open by default */
+    defaultOpen?: boolean;
+    /** All translated strings for this component */
+    labels: TransactionProcessingDetailsLabels;
+}
+/**
+ * Displays transaction processing steps with visual breakdown using vertical connectors
+ * Similar to SwapProcessingDetails but designed for deposit/withdraw flows
+ */
+declare function TransactionProcessingDetails({ steps, className, defaultOpen, labels, }: TransactionProcessingDetailsProps): react_jsx_runtime.JSX.Element | null;
+
+interface StepStatusIconProps {
+    status: TransactionStepStatus;
+}
+/**
+ * Renders a step status icon based on the step status
+ * Only three icon types: success (checkmark), timer (clock), and error (alert)
+ */
+declare function StepStatusIcon({ status }: StepStatusIconProps): react_jsx_runtime.JSX.Element;
+
+interface StepStatusTextProps {
+    step: TransactionStep;
+    completedText: string;
+    processingText: string;
+    failedText: string;
+    viewOnExplorerText: string;
+}
+/**
+ * Renders the status text and optional explorer link for a step
+ */
+declare function StepStatusText({ step, completedText, processingText, failedText, viewOnExplorerText, }: StepStatusTextProps): react_jsx_runtime.JSX.Element;
+
+interface StepDisplayProps {
+    step: TransactionStep;
+    completedText: string;
+    processingText: string;
+    failedText: string;
+    viewOnExplorerText: string;
+}
+/**
+ * Renders a single processing step with icon, label, and status
+ */
+declare function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }: StepDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface TokenWithChainBadgeProps {
+    tokenLogoUrl?: string;
+    tokenAlt?: string;
+    chainId?: number;
+    chainLogoUrl?: string;
+    chainName?: string;
+}
+declare const TokenWithChainBadge: React__default.FC<TokenWithChainBadgeProps>;
+
+interface SwapProcessingViewProps {
+    fromTokenSymbol: string;
+    fromTokenIcon: string;
+    toTokenSymbol: string;
+    toTokenIcon: string;
+    formattedInputAmount: string;
+    formattedOutputAmount: string;
+    formattedInputAmountUSD: string;
+    formattedOutputAmountUSD: string;
+    progress: number;
+    transactionSteps: TransactionStep[];
+    onClose: () => void;
+    onGoToHistory: () => void;
+    titleText: string;
+    descriptionPrefix: string;
+    activityHistoryText: string;
+    processingDetailsLabels: TransactionProcessingDetailsLabels;
+}
+declare const SwapProcessingView: React__default.FC<SwapProcessingViewProps>;
+
+interface SwapCrossChainProcessingViewProps {
+    fromTokenSymbol: string;
+    fromTokenIcon: string;
+    toTokenSymbol: string;
+    toTokenIcon: string;
+    originChainId?: number;
+    destinationChainId?: number;
+    originChainLogoUrl: string;
+    originChainName: string;
+    destinationChainLogoUrl: string;
+    destinationChainName: string;
+    formattedInputAmount: string;
+    formattedOutputAmount: string;
+    formattedInputAmountUSD: string;
+    formattedOutputAmountUSD: string;
+    progress: number;
+    title: string;
+    description: string;
+    transactionSteps: TransactionStep[];
+    onClose: () => void;
+    onGoToHistory: () => void;
+    viewHistoryText: string;
+    processingDetailsLabels: TransactionProcessingDetailsLabels;
+}
+declare const SwapCrossChainProcessingView: React__default.FC<SwapCrossChainProcessingViewProps>;
+
+interface SwapSignatureWarningViewProps {
+    fromTokenSymbol: string;
+    fromTokenIcon: string;
+    toTokenSymbol: string;
+    toTokenIcon: string;
+    formattedInputAmount: string;
+    formattedOutputAmount: string;
+    formattedInputAmountUSD: string;
+    formattedOutputAmountUSD: string;
+    progress: number;
+    errorTitle: string;
+    errorDescription: string;
+    transactionSteps: TransactionStep[];
+    onCancel: () => void;
+    onTryAgain: () => void;
+    cancelButtonText: string;
+    retryButtonText: string;
+    processingDetailsLabels: TransactionProcessingDetailsLabels;
+}
+declare const SwapSignatureWarningView: React__default.FC<SwapSignatureWarningViewProps>;
+
+interface SwapSuccessLabels {
+    title: string;
+    descriptionPrefix: string;
+    descriptionMiddle: string;
+    descriptionSuffix: string;
+    walletLinkText: string;
+    startNewSwapButton: string;
+}
+
+interface SwapSuccessViewProps {
+    fromTokenSymbol: string;
+    fromTokenIcon: string;
+    toTokenSymbol: string;
+    toTokenIcon: string;
+    formattedInputAmount: string;
+    formattedOutputAmount: string;
+    formattedInputAmountUSD: string;
+    formattedOutputAmountUSD: string;
+    transactionSteps: TransactionStep[];
+    onClose: () => void;
+    onStartNewSwap: () => void;
+    onGoToWallet: () => void;
+    labels: SwapSuccessLabels;
+    processingDetailsLabels: TransactionProcessingDetailsLabels;
+}
+declare const SwapSuccessView: React__default.FC<SwapSuccessViewProps>;
+
+interface SwapTransactionFailedViewProps {
+    fromTokenSymbol: string;
+    fromTokenIcon: string;
+    toTokenSymbol: string;
+    toTokenIcon: string;
+    formattedInputAmount: string;
+    formattedOutputAmount: string;
+    formattedInputAmountUSD: string;
+    formattedOutputAmountUSD: string;
+    progress: number;
+    errorTitle: string;
+    errorDescription: string;
+    transactionSteps: TransactionStep[];
+    hasExplorerLink: boolean;
+    onBack: () => void;
+    onViewExplorer: () => void;
+    onTryAgain: () => void;
+    viewOnExplorerText: string;
+    retryButtonText: string;
+    processingDetailsLabels: TransactionProcessingDetailsLabels;
+}
+declare const SwapTransactionFailedView: React__default.FC<SwapTransactionFailedViewProps>;
+
+interface ChooseAnAssetSwapLabels {
+    title: string;
+    searchPlaceholder: string;
+    searchingText: string;
+    loadMoreButton: string;
+    searchEmptyTitle: string;
+    searchEmptyDescription: string;
+}
+
+/**
+ * Token data representing a single token available for selection.
+ */
+interface TokenData {
+    address: string;
+    chainId: number;
+    decimals: number;
+    symbol: string;
+    name: string;
+    logoURI: string | null;
+    priceInUSD?: number | null;
+}
+
+/**
+ * Balance information for a token in the user's wallet.
+ */
+interface BalanceDomain {
+    address: string;
+    chainId: number;
+    name: string;
+    symbol: string;
+    decimals: number;
+    logoUrl: string;
+    priceUSD: string;
+    amountBase: string;
+    amountUI: string;
+    amountHumanized?: string;
+    amountInUSD: string;
+    id: string;
+}
+
+interface ChooseAnAssetSwapViewProps {
+    actionSheetId: string;
+    isOpen: boolean;
+    currentActionSheetId: string | null;
+    onClose: () => void;
+    onSearch: (value: string) => void;
+    autoFocus: boolean;
+    displayedTokens: TokenData[];
+    hasMore: boolean;
+    onLoadMore: () => void;
+    findBalance: (token: TokenData) => BalanceDomain | undefined;
+    isFetching: boolean;
+    onAssetClick: (token: TokenData) => void;
+    labels: ChooseAnAssetSwapLabels;
+    formatTokenAmount: (amountUI: string, priceUSD: number, decimals: number) => string;
+    formatCurrencyValue: (value: number) => string;
+}
+declare const ChooseAnAssetSwapView: React__default.FC<ChooseAnAssetSwapViewProps>;
+
+export { ActionButton, ActionSheet, type ActionSheetProps, AddressDisplay, type AddressDisplayProps, BackgroundContainer, type BackgroundContainerProps, type BalanceDomain, BannerNotification, type BannerNotificationProps, type ButtonProps, ChooseAStrategyActionsheetView, type ChooseAStrategyActionsheetViewProps, type ChooseAnAssetSwapLabels, ChooseAnAssetSwapView, type ChooseAnAssetSwapViewProps, CloseButton, type CloseButtonProps, CollapsibleInfoRow, type CollapsibleInfoRowProps, CollapsibleSection, type CollapsibleSectionProps, ConnectWalletList, type ConnectWalletListProps, Currency, type CurrencyProps, type CurrencyType, DeframeComponentsProvider, type DeframeTheme, type DeframeThemeColors, type DeframeThemeConfig, type DetailItem, DetailsHeader, type DetailsHeaderProps, Currency as Fiat, type FiatProps, FlexCol, type FlexColProps, FlexRow, type FlexRowProps, HighRiskBadge, type HighRiskBadgeProps, type HistoryAssetViewProps, HistoryDepositDetailsView, type HistoryDetailsLabels, type HistoryDetailsViewProps, HistoryWithdrawDetailsView, InfoLabel, type InfoLabelProps, InfoRow, InfoRowIconLabel, type InfoRowIconLabelProps, InfoRowIconValue, type InfoRowIconValueProps, type InfoRowProps, InfoRowWithIcon, type InfoRowWithIconProps, InfoValue, type InfoValueProps, Input, type InputFieldRegistration, type InputProps, Link, type LinkProps, ListItem, ListItemContent, ListItemLeftSide, type ListItemProps, ListItemRightSide, LoadingDots, type LoadingDotsProps, LowRiskBadge, type LowRiskBadgeProps, MediumRiskBadge, type MediumRiskBadgeProps, Navbar, type NavbarProps, PercentageButton, PrimaryButton, ProgressIndicator, type ProgressIndicatorProps, ScrollableContent, type ScrollableContentProps, SearchEmptyState, type SearchEmptyStateProps, SearchInput, type SearchInputProps, SecondaryButton, SectionCard, type SectionCardProps, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Skeleton, type SkeletonProps, StepDisplay, type StepDisplayProps, StepStatusIcon, type StepStatusIconProps, StepStatusText, type StepStatusTextProps, StrategyDetailsView, type StrategyDetailsViewProps, SummaryDetails, SummaryDetailsCryptoControlV2, type SummaryDetailsProps, SwapAmountInputView, type SwapAmountInputViewProps, SwapCrossChainProcessingView, type SwapCrossChainProcessingViewProps, SwapNetworkSelectorView, type SwapNetworkSelectorViewProps, SwapOutputAmountView, type SwapOutputAmountViewProps, SwapProcessingView, type SwapProcessingViewProps, SwapQuoteBlockchainCostsView, type SwapQuoteBlockchainCostsViewProps, SwapQuoteErrorsView, type SwapQuoteErrorsViewProps, SwapQuoteHeaderView, type SwapQuoteHeaderViewProps, SwapSignatureWarningView, type SwapSignatureWarningViewProps, SwapSlippageToleranceButtonsView, type SwapSlippageToleranceButtonsViewProps, type SwapSuccessLabels, SwapSuccessView, type SwapSuccessViewProps, SwapTokenSelectorView, type SwapTokenSelectorViewProps, SwapTransactionFailedView, type SwapTransactionFailedViewProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TertiaryButton, Text, TextAccent, type TextAccentProps, TextBody, type TextBodyProps, TextHeading, type TextHeadingProps, type TextProps, type ThemeMode, type ThemePreset, Title, type TokenData, TokenWithChainBadge, type TokenWithChainBadgeProps, TransactionProcessingDetails, type TransactionProcessingDetailsLabels, type TransactionProcessingDetailsProps, TransactionScreen, TransactionScreenIcon, type TransactionScreenIconProps, TransactionScreenInvestmentCard, type TransactionScreenInvestmentCardProps, type TransactionScreenProps, type TransactionStep, type TransactionStepStatus, WalletItem, type WalletItemProps, ConnectWalletList as WalletList, WalletListContainer, type WalletListContainerProps, type ConnectWalletListProps as WalletListProps, type WalletOption, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };