@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
35 lines (34 loc) • 1.68 kB
TypeScript
import React from 'react';
import type { PerpsTransferStatus } from './PolymarketPerpsTransferScreen';
export interface TransferActionButtonProps {
/** Drives the visual state and the label/icon swap. */
status: PerpsTransferStatus;
/** Label shown in the idle state (already translated). */
idleLabel: string;
/** Label shown while processing (already translated). */
processingLabel: string;
/** Label shown on success (already translated). */
successLabel: string;
/** Greys out / blocks the idle button until an amount is entered. */
isDisabled?: boolean;
onClick?: () => void;
testId?: string;
}
/**
* The bottom-bar transfer button. It morphs across the three flow states:
*
* - **idle**: primary (blue) "Transfer".
* - **processing**: dimmed blue, spinner + "Processing", inert.
* - **success**: secondary (grey) surface, green check + success label, inert.
*
* Two details keep the morph smooth:
*
* 1. Each state's content (icon + label) is a single absolutely-positioned,
* centered layer, and we swap whole layers. Because every layer centres
* itself, the label never shifts horizontally when the icon appears — the
* transition is a pure vertical blur/fade (matching the From/To row swap).
* 2. The grey surface is the always-present base; the blue sits on top as an
* overlay whose opacity only ever fades *out* toward success. Nothing
* brightens mid-transition, so there's no blue "flush" as it turns grey.
*/
export declare function TransferActionButton({ status, idleLabel, processingLabel, successLabel, isDisabled, onClick, testId, }: TransferActionButtonProps): React.JSX.Element;