@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, BadgeSettings } from '@make-software/csprclick-core-types';
import CSPRClickSDK from '@make-software/csprclick-core-client/sdk';
import { CsprClickInitOptions } from '@make-software/csprclick-core-client';
import React from 'react';
import * as styled_components from 'styled-components';

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: any;
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: any;
    light: any;
};

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: CSPRClickSDK;
        csprClickSDKAsyncInit: any;
    }
}
interface ClickProviderProps {
    options: CsprClickInitOptions;
    csprclickSdk?: string;
    children: any;
}
declare function ClickProvider(props: ClickProviderProps): react_jsx_runtime.JSX.Element;
declare function useClickRef(): CSPRClickSDK;

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;
    rootAppElement?: string;
    show1ClickModal?: boolean;
}
declare function ClickUI({ themeMode, topBarSettings, 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;
    ssoAccounts?: AccountType[];
    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;

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