@mytonswap/widget/dist/mytonswap-widget.d.ts

MyTonSwap Widget - Easy to use swap widget for React on TON Blockchain

import { Asset } from '@mytonswap/sdk';
import { default as i18n } from 'i18next';
import { TonConnectUI } from '@tonconnect/ui-react';

export declare const createSwap: (elementId: string, options: SwapProps) => void;

export declare const createWalletProfile: (elementId: string, options: WalletProfileProps) => void;

export { i18n }

declare type onSwap = {
    type: 'start' | 'success' | 'error';
    data: {
        pay: Asset;
        receive: Asset;
        pay_amount: string;
        receive_amount: string;
        pay_rate: number;
        receive_rate: number;
        dex: 'stonfi' | 'dedust' | 'tonco';
        hash: string;
    };
};

declare type onTokenSelect = {
    type: 'pay' | 'receive';
    asset: Asset;
};

declare const popOverVariationsKeyValue: {
    "top-right": {
        initial: {
            opacity: number;
            scale: number;
            transformOrigin: string;
            bottom: string;
            top: string;
            right: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        animate: {
            opacity: number;
            scale: number;
            bottom: string;
            top: string;
            right: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        exit: {
            opacity: number;
            scale: number;
            top: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
    };
    "top-left": {
        initial: {
            opacity: number;
            scale: number;
            transformOrigin: string;
            bottom: string;
            top: string;
            left: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        animate: {
            opacity: number;
            scale: number;
            bottom: string;
            top: string;
            left: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        exit: {
            opacity: number;
            top: string;
            scale: number;
            transition: {
                duration: number;
                ease: string;
            };
        };
    };
    "bottom-right": {
        initial: {
            opacity: number;
            scale: number;
            transformOrigin: string;
            top: string;
            right: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        animate: {
            opacity: number;
            scale: number;
            top: string;
            right: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        exit: {
            opacity: number;
            scale: number;
            transition: {
                duration: number;
                ease: string;
            };
        };
    };
    "bottom-left": {
        initial: {
            opacity: number;
            scale: number;
            transformOrigin: string;
            top: string;
            left: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        animate: {
            opacity: number;
            scale: number;
            top: string;
            left: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        exit: {
            opacity: number;
            scale: number;
            transition: {
                duration: number;
                ease: string;
            };
        };
    };
    "top-center": {
        initial: {
            opacity: number;
            scale: number;
            transformOrigin: string;
            bottom: string;
            top: string;
            left: string;
            transform: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        animate: {
            opacity: number;
            scale: number;
            bottom: string;
            top: string;
            left: string;
            transform: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        exit: {
            opacity: number;
            bottom: string;
            top: string;
            left: string;
            scale: number;
            transform: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
    };
    "bottom-center": {
        initial: {
            opacity: number;
            scale: number;
            transformOrigin: string;
            top: string;
            left: string;
            transform: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        animate: {
            opacity: number;
            scale: number;
            transformOrigin: string;
            top: string;
            left: string;
            transform: string;
            transition: {
                duration: number;
                ease: string;
            };
        };
        exit: {
            opacity: number;
            top: string;
            transformOrigin: string;
            scale: number;
            transition: {
                duration: number;
                ease: string;
            };
        };
    };
};

declare type SwapOptions = {
    default_pay_token?: string;
    default_receive_token?: string;
    default_slippage?: number;
    lock_pay_token?: boolean;
    lock_receive_token?: boolean;
    lock_input?: boolean;
    default_pay_amount?: string;
    pin_tokens?: string[];
    app_id?: string;
    liquidity_provider?: 'mytonswap' | 'stonfi' | 'dedust' | 'tonco' | 'omniston';
    layout_direction?: 'ltr' | 'rtl';
    ui_preferences?: {
        primary_color?: string;
        dark_color?: string;
        disable_provided_text?: boolean;
        show_swap_details?: boolean;
        show_settings_wallet?: boolean;
        show_settings_slippage?: boolean;
        show_settings_community?: boolean;
        show_change_direction?: boolean;
        show_settings?: boolean;
        show_refresh?: boolean;
    };
};

declare type SwapProps = {
    options?: SwapOptions;
    locale?: string;
    tonConnectInstance: TonConnectUI;
    onTokenSelect?: ({ type, asset }: onTokenSelect) => void;
    onSwap?: ({ type, data }: onSwap) => void;
};

declare type WalletProfileProps = {
    tonConnectInstance: TonConnectUI;
    position?: keyof typeof popOverVariationsKeyValue;
    theme?: {
        text_white_color?: string;
        text_black_color?: string;
        primary_color?: string;
        background_color?: string;
        background_shade_color?: string;
        border_color?: string;
    };
};

export { }


declare global {
    interface Window {
        createSwap: (elementId: string, options: SwapProps) => void;
        createWalletProfile: (elementId: string, options: WalletProfileProps) => void;
    }
}