@make-software/csprclick-ui/dist/index.d.ts

CSPR.click UI package for React applications

import * as react_jsx_runtime from 'react/jsx-runtime';
import { WALLET_KEYS, AccountType, ICSPRClickSDK, CsprClickInitOptions } from '@make-software/csprclick-core-types';
import * as styled_components from 'styled-components';
import * as _make_software_cspr_design from '@make-software/cspr-design';
import React from 'react';

declare const CURRENCY = "CURRENCY";
declare enum CurrencyType {
    FIAT = 1,
    CRYPTO = 2
}
interface Currency {
    code: string;
    title: string;
    type_id: CurrencyType.FIAT | CurrencyType.CRYPTO;
    icon?: string;
}
interface CurrencySettings {
    currencies: Currency[];
    onChangeCurrency: (curr: any) => void;
    currentCurrency: Currency;
}

declare enum Lang {
    EN = "en",
    AZ = "az",
    DE = "de",
    ES = "es",
    FR = "fr",
    NL = "nl",
    PL = "pl",
    RU = "ru",
    TR = "tr",
    UA = "uk",
    VT = "vi"
}
declare const LANGUAGE = "LANGUAGE";
interface LanguageSettings {
    languages: Lang[];
    creditsUrl?: string;
    contributeUrl?: string;
    currentLanguage: Lang;
    onChangeLanguage: (lang: Lang) => void;
}

declare const CUSTOM = "CUSTOM";
interface CustomTopBarMenuItem {
    title: string;
    icon?: React.ReactNode;
    topBarIcon?: React.ReactNode;
}
interface CustomTopBarMenuSettings {
    items: string[] | CustomTopBarMenuItem[];
    onItemSwitch: (item: string) => void;
    currentItem: string;
    mobileContainerHeight?: string;
}

declare const NETWORK = "NETWORK";
type Network = CustomTopBarMenuItem;
interface NetworkSettings {
    networks: string[] | Network[];
    onNetworkSwitch: (network: string) => void;
    currentNetwork: string;
    mobileContainerHeight?: string;
}

declare const CsprClickThemes: _make_software_cspr_design.ThemeConfigType;
interface BuildThemeProps {
    csprclickDarkTheme: object;
    csprclickLightTheme: object;
    appDarkTheme?: object;
    appLightTheme?: object;
}
declare enum clickStyleguide {
    backgroundTopBarColor = "backgroundTertiary",
    backgroundMenuColor = "backgroundPrimary",
    hoverProductMenu = "backgroundSecondary",
    hoverAccountMenu = "fillSecondary",
    textColor = "contentPrimary",
    topBarTextColor = "contentTertiary",
    menuIconAndLinkColor = "contentBlue",
    topBarIconHoverColor = "contentOnFill"
}
declare const DefaultThemes: {
    csprclick: {
        csprclickDarkTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
        csprclickLightTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
    };
    red: {
        csprclickDarkTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
        csprclickLightTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
    };
    green: {
        csprclickDarkTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
        csprclickLightTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
    };
    blue: {
        csprclickDarkTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
        csprclickLightTheme: {
            backgroundTertiary: string;
            backgroundPrimary: string;
            backgroundSecondary: string;
            fillSecondary: string;
            contentPrimary: string;
            contentTertiary: string;
            contentBlue: string;
            contentOnFill: string;
        };
    };
};
declare enum ThemeModeType {
    light = "light",
    dark = "dark"
}
declare const buildTheme: (theme: BuildThemeProps) => {
    dark: {
        styleguideColors: {
            backgroundPrimary: string;
            backgroundSecondary: string;
            backgroundTertiary: string;
            backgroundQuaternary: string;
            borderPrimary: string;
            borderSecondary: string;
            backgroundOverlay: string;
            borderRed: string;
            fillPrimaryRed: string;
            fillPrimaryRedHover: string;
            fillPrimaryRedClick: string;
            fillPrimaryBlue: string;
            fillPrimaryBlueHover: string;
            fillPrimaryBlueClick: string;
            fillSecondary: string;
            fillSecondaryRedHover: string;
            fillSecondaryRedClick: string;
            fillSecondaryBlueHover: string;
            fillSecondaryBlueClick: string;
            fillTertiary: string;
            fillGreen: string;
            fillVioletGradient: string;
            fillBlueGradient: string;
            fillLoadingInTable: string;
            contentPrimary: string;
            contentSecondary: string;
            contentTertiary: string;
            contentQuaternary: string;
            contentOnFill: string;
            contentBlue: string;
            contentRed: string;
            contentGreen: string;
            contentViolet: string;
            contentYellow: string;
            contentWarmGreen: string;
            contentLightBlue: string;
        };
        colorSpecialCase: {
            blueBanner: string;
            blueBanner2: string;
        };
        boxShadow: {
            unset: string;
            block: string;
            dropdown: string;
            tooltip: string;
        };
        border: {
            base: string;
            separator: string;
            tableRowSeparator: string;
        };
        themeName: string;
        minWidth: number;
        maxWidth: number;
        withMedia: (styled: any) => styled_components.CSSObject;
        zIndex: {
            dropdown: number;
            modal: number;
            tooltip: number;
        };
        typography: {
            fontFamily: {
                primary: string;
                mono: string;
            };
            fontWeight: {
                light: number;
                regular: number;
                medium: number;
                semiBold: number;
                bold: number;
                extraBold: number;
            };
        };
        borderRadius: {
            base: number;
        };
        padding: {
            1: string;
            2: string;
        };
        animations: {
            fadeIn: styled_components.Keyframes;
        };
    };
    light: {
        styleguideColors: {
            backgroundPrimary: string;
            backgroundSecondary: string;
            backgroundTertiary: string;
            backgroundQuaternary: string;
            borderPrimary: string;
            borderSecondary: string;
            backgroundOverlay: string;
            borderRed: string;
            fillPrimaryRed: string;
            fillPrimaryRedHover: string;
            fillPrimaryRedClick: string;
            fillPrimaryBlue: string;
            fillPrimaryBlueHover: string;
            fillPrimaryBlueClick: string;
            fillSecondary: string;
            fillSecondaryRedHover: string;
            fillSecondaryRedClick: string;
            fillSecondaryBlueHover: string;
            fillSecondaryBlueClick: string;
            fillTertiary: string;
            fillGreen: string;
            fillVioletGradient: string;
            fillBlueGradient: string;
            fillLoadingInTable: string;
            contentPrimary: string;
            contentSecondary: string;
            contentTertiary: string;
            contentQuaternary: string;
            contentOnFill: string;
            contentBlue: string;
            contentRed: string;
            contentGreen: string;
            contentViolet: string;
            contentYellow: string;
            contentWarmGreen: string;
            contentLightBlue: string;
        };
        colorSpecialCase: {
            blueBanner: string;
            blueBanner2: string;
        };
        boxShadow: {
            unset: string;
            block: string;
            dropdown: string;
            tooltip: string;
        };
        border: {
            base: string;
            separator: string;
            tableRowSeparator: string;
        };
        themeName: string;
        minWidth: number;
        maxWidth: number;
        withMedia: (styled: any) => styled_components.CSSObject;
        zIndex: {
            dropdown: number;
            modal: number;
            tooltip: number;
        };
        typography: {
            fontFamily: {
                primary: string;
                mono: string;
            };
            fontWeight: {
                light: number;
                regular: number;
                medium: number;
                semiBold: number;
                bold: number;
                extraBold: number;
            };
        };
        borderRadius: {
            base: number;
        };
        padding: {
            1: string;
            2: string;
        };
        animations: {
            fadeIn: styled_components.Keyframes;
        };
    };
};

type Provider = {
    connected: boolean;
    icon: string;
    key: WALLET_KEYS;
    text: string;
};
type Options = {
    providers: Provider[];
    accounts: AccountType[];
};

interface OneClickSignInProps {
    accounts: AccountType[];
    onAccountClick: (acc: AccountType | null) => Promise<void>;
    handleClose: () => void;
    onMoreAccountsClick: () => void;
    themeMode?: ThemeModeType;
}
declare const OneClickSignInInner: (props: OneClickSignInProps) => react_jsx_runtime.JSX.Element;

declare global {
    interface Window {
        csprclick: ICSPRClickSDK;
        csprClickSDKAsyncInit: any;
    }
}
interface ClickProviderProps {
    options: CsprClickInitOptions;
    csprclickSdk?: string;
    children: any;
}
declare function ClickProvider(props: ClickProviderProps): react_jsx_runtime.JSX.Element;
declare function useClickRef(): ICSPRClickSDK;

interface ClickModalProps {
    modalAction: string;
    onModalClose: () => void;
    onRequestClose: () => void;
    onForgetAccount: (acc: AccountType) => void;
    onSignIn: () => void;
    clickRef: any;
    signInOptions: any;
    themeMode?: ThemeModeType;
    rootAppElement?: string;
}
declare function ClickModal(props: ClickModalProps): react_jsx_runtime.JSX.Element;

interface TopBarSettings {
    onThemeSwitch?: () => void;
    accountMenuItems?: React.ReactElement[];
    languageSettings?: LanguageSettings;
    currencySettings?: CurrencySettings;
    networkSettings?: NetworkSettings;
    customTopBarMenuSettings?: CustomTopBarMenuSettings[];
}
interface ClickUIProps {
    themeMode?: ThemeModeType;
    topBarSettings?: TopBarSettings;
    currencyCode?: string;
    rootAppElement?: string;
    show1ClickModal?: boolean;
}
declare function ClickUI({ themeMode, topBarSettings, currencyCode, rootAppElement, show1ClickModal }: ClickUIProps): react_jsx_runtime.JSX.Element;

declare const MODAL_ACTIONS: {
    NONE: string;
    SIGN_IN: string;
    SWITCH_ACCOUNT: string;
    CHOSE_ACCOUNT: string;
    LEDGER_PROVIDER_UI: string;
    METAMASK_PROVIDER_UI: string;
    WALLETCONNECT_PROVIDER_UI: string;
    BUY_CSPR: string;
};
type MODAL_ACTIONS = string;

interface SignInSceneProps {
    options: Options;
    clickRef: any;
    switchingAccount: boolean;
    themeMode?: ThemeModeType;
    isModalOverflowing?: boolean;
}
declare const SignIn: (props: SignInSceneProps) => react_jsx_runtime.JSX.Element;

declare const BannerLink: styled_components.StyledComponent<"a", styled_components.DefaultTheme, {}, never>;
interface TopBarProps {
    account?: AccountType | null;
    ssoAccounts?: AccountType[];
    currencyCode?: string;
    onSignIn: () => void;
    onSwitchAccount: () => void;
    onChooseAccount: () => void;
    onSignOut: () => void;
    themeMode?: ThemeModeType;
    onThemeSwitch?: () => void;
    accountMenuItems?: React.ReactElement[];
    modalAction: string;
    languageSettings?: LanguageSettings;
    currencySettings?: CurrencySettings;
    networkSettings?: NetworkSettings;
    customTopBarMenuSettings?: CustomTopBarMenuSettings[];
}
declare function TopBar(props: TopBarProps): react_jsx_runtime.JSX.Element;

declare const useClickBadge: () => {
    setLeftBadge: (config: BadgeSettings) => void;
    setRightBadge: (config: BadgeSettings) => void;
};

type BadgeBackgroundColor = 'green' | 'violet' | 'blue' | 'gray' | 'fillBlueGradient';
interface BadgeProps {
    title: string;
    variation: BadgeBackgroundColor;
}
interface AccountMenuItemProps {
    icon: string;
    label: string;
    onClick: () => void;
    badge?: BadgeProps;
}
declare const AccountMenuItem: ({ onClick, icon, label, badge }: AccountMenuItemProps) => react_jsx_runtime.JSX.Element;

interface BuyCSPRMenuItemProps {
    badge?: BadgeProps;
}
declare const BuyCSPRMenuItem: ({ badge }: BuyCSPRMenuItemProps) => react_jsx_runtime.JSX.Element;

declare const CopyHashMenuItem: () => react_jsx_runtime.JSX.Element;

declare const ViewAccountOnExplorerMenuItem: (props: any) => react_jsx_runtime.JSX.Element;

interface AccountCardMenuItemProps {
    onViewAccountClick?: () => void;
}
declare const AccountCardMenuItem: {
    ({ onViewAccountClick }: AccountCardMenuItemProps): react_jsx_runtime.JSX.Element;
    /**
    We need this line, to distinguish AccountCardMenuItem as React.Node in array of React.Nodes.
    To filter and put AccountCardMenuItem in the very top of React.Nodes array
     **/
    componentType: string;
};

declare const CanvasContainer: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
    size: number;
}, never>;
interface AccountIdenticonProps {
    hex: string;
    size: 'xs' | 'sm' | 'm' | 'l' | number;
}
declare const AccountIdenticon: ({ hex, size }: AccountIdenticonProps) => react_jsx_runtime.JSX.Element;

export { AccountCardMenuItem, AccountIdenticon, AccountMenuItem, BannerLink, BuyCSPRMenuItem, CURRENCY, CUSTOM, CanvasContainer, ClickModal, ClickProvider, ClickUI, CopyHashMenuItem, CsprClickThemes, CurrencyType, DefaultThemes, LANGUAGE, Lang, MODAL_ACTIONS, NETWORK, OneClickSignInInner, SignIn, ThemeModeType, TopBar, ViewAccountOnExplorerMenuItem, buildTheme, clickStyleguide, useClickBadge, useClickRef };
export type { AccountCardMenuItemProps, AccountMenuItemProps, BadgeBackgroundColor, BadgeProps, BuildThemeProps, Currency, CurrencySettings, CustomTopBarMenuItem, CustomTopBarMenuSettings, LanguageSettings, Network, NetworkSettings, Options, Provider, SignInSceneProps, TopBarSettings };