@make-software/csprclick-ui 1.2.1 → 1.4.2

package/dist/cjs/lib/lib/BuyCspr/BuyCSPRContainer.d.ts

@@ -0,0 +1,9 @@
+import { CSPRClickSDK } from '@make-software/csprclick-core-client';
+import { ThemeModeType } from '../types';
+interface BuyCsprContainerProps {
+    clickRef: CSPRClickSDK;
+    themeMode?: ThemeModeType;
+    onModalClose: () => void;
+}
+export declare const BuyCSPRContainer: ({ clickRef, themeMode, onModalClose }: BuyCsprContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/lib/lib/BuyCspr/api/onRampApi.d.ts

@@ -0,0 +1,9 @@
+import { ConfirmBuyCSPRResponse, GetOnRampResponse, GetResponseType, ResponseOnRampProps } from '../types';
+export declare const ON_RAMP_API: string;
+type OnRampApi = {
+    getBuyCSPRData: () => Promise<GetResponseType<GetOnRampResponse>>;
+    getProvidersList: (payload: any) => Promise<GetResponseType<ResponseOnRampProps>>;
+    confirmBuyCSPR: (payload: any) => Promise<GetResponseType<ConfirmBuyCSPRResponse>>;
+};
+export declare const onRampApi: OnRampApi;
+export {};

package/dist/cjs/lib/lib/BuyCspr/api/useOnRamApi.d.ts

@@ -0,0 +1,14 @@
+import { ConfirmBuyCSPRResponse, GetOnRampResponse, GetResponseType, ResponseOnRampProps } from "../types";
+export declare const useGetBuyCSPRData: () => GetResponseType<GetOnRampResponse>;
+export declare const useGetProvidersList: () => {
+    loading?: boolean | undefined;
+    error?: import("../types").ErrorResult | null | undefined;
+    data?: ResponseOnRampProps | null | undefined;
+    update: (payload: any) => void;
+};
+export declare const useConfirmBuyCSPR: () => {
+    loading?: boolean | undefined;
+    error?: import("../types").ErrorResult | null | undefined;
+    data?: ConfirmBuyCSPRResponse | null | undefined;
+    update: (payload: any) => void;
+};

package/dist/cjs/lib/lib/BuyCspr/components/BuyCSPRForm.d.ts

@@ -0,0 +1,2 @@
+import { BuyCSPRFormProps } from '../types';
+export declare const BuyCSPRForm: ({ acc, buyCSPRFormData, onNextStep, themeMode, }: BuyCSPRFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/lib/lib/BuyCspr/components/ChooseProvider.d.ts

@@ -0,0 +1,12 @@
+import { ResponseOnRampProps } from '../types';
+interface ChooseProviderProps {
+    rampData: ResponseOnRampProps;
+    lastInputIsCrypto: boolean;
+    countryTitle: string;
+    currencyCode: string;
+    onSubmit: (data: any) => void;
+    onBack: () => void;
+    onClose: () => void;
+}
+export declare const ChooseProvider: ({ rampData, lastInputIsCrypto, countryTitle, currencyCode, onSubmit, onBack, onClose, }: ChooseProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/lib/lib/BuyCspr/components/NoAvailableProviders.d.ts

@@ -0,0 +1,11 @@
+import { OnRampError } from '../types';
+interface NoAvailableProvidersProps {
+    countryTitle?: string;
+    currencyCode?: string;
+    message?: string;
+    onBack?: () => void;
+    onClose: () => void;
+    error?: OnRampError;
+}
+export declare const NoAvailableProviders: ({ countryTitle, currencyCode, message, error, onBack, onClose, }: NoAvailableProvidersProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/lib/lib/BuyCspr/components/ProviderRow.d.ts

@@ -0,0 +1,3 @@
+import { ProviderRowProps } from '../types';
+export declare const ProviderRow: ({ providerName, csprExchangeRate, cryptoAsset, cryptoAmount, isActive, onClick, logoSVG, logoPNG, margin, fees, }: ProviderRowProps) => import("react/jsx-runtime").JSX.Element;
+export default ProviderRow;

package/dist/cjs/lib/lib/BuyCspr/components/RedirectionBlocked.d.ts

@@ -0,0 +1,6 @@
+export interface RedirectionBlockedProps {
+    provider: string;
+    location: string;
+    onClose: () => void;
+}
+export declare const RedirectionBlocked: ({ provider, location, onClose, }: RedirectionBlockedProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/lib/lib/BuyCspr/types.d.ts

@@ -0,0 +1,113 @@
+import { AccountType } from '@make-software/csprclick-core-types';
+import { ThemeModeType } from '../types';
+import React from "react";
+export interface CountryProps {
+    value: string;
+    label: string;
+    icon?: React.ReactElement;
+}
+export interface CurrencyProps {
+    value: string;
+    label: string;
+    rate: number;
+}
+export interface ResponseCountryProps {
+    name: string;
+    code: string;
+}
+export interface ResponseCurrencyProps {
+    id: number;
+    code: string;
+    type_id: string;
+    rate: number;
+}
+export interface BuyCSPRFormDataProps {
+    countryList: CountryProps[];
+    country: CountryProps;
+    currencyList: CurrencyProps[];
+    currency: CurrencyProps;
+    isLoading: boolean;
+    fiatAmount: string;
+    csprAmount: string;
+    isLastInputCrypto: boolean;
+    providersList: any;
+    reloadProviders: boolean;
+}
+export interface GetOnRampResponse {
+    countries: ResponseCountryProps[];
+    defaultCountry: string;
+    currencies: ResponseCurrencyProps[];
+    defaultCurrency: string;
+    defaultAmount: string;
+}
+export interface BuyCSPRFormProps {
+    acc: AccountType | null;
+    buyCSPRFormData: BuyCSPRFormDataProps;
+    onNextStep: (data: RequestOnRampProps, lastInputIsCrypto: boolean) => void;
+    themeMode?: ThemeModeType;
+}
+export interface RequestOnRampProps {
+    country: string | CountryProps;
+    currency: string | CurrencyProps;
+    amount: number;
+    approxAmount: number;
+    paymentCurrency: string;
+}
+export interface ProviderProps {
+    cryptoAmount: string;
+    cryptoCurrency: string;
+    fiatAmount: string;
+    fiatCurrency: string;
+    csprExchangeRate: string;
+    fees: string;
+    logoPNG: string;
+    logoSVG?: string;
+    providerKey: string;
+    providerName: string;
+}
+export interface ResponseOnRampProps {
+    availableProviders: ProviderProps[];
+    currencies: CurrencyProps[];
+    fiatAmount: number;
+    fiatCurrency: string;
+    cryptoAmount: number;
+    cryptoCurrency: string;
+    isCryptoChanged: boolean;
+}
+export interface OnRampError {
+    code?: string;
+    message?: string;
+    description?: string;
+    serverIsDown?: boolean;
+}
+export interface ResponseOnRampErrorProps {
+    error: OnRampError | null;
+}
+export interface ConfirmBuyCSPRResponse {
+    provider: string;
+    location: string;
+}
+export interface ProviderRowProps {
+    logoSVG?: string | null;
+    logoPNG?: string | null;
+    providerName: string;
+    fees: string;
+    cryptoAmount: string;
+    cryptoAsset: string;
+    csprExchangeRate: string;
+    margin?: string;
+    isActive?: boolean;
+    onClick?: () => any;
+}
+export interface ErrorResult {
+    code: string;
+    message: string;
+    description?: string;
+}
+export type GetResponseType<Entity> = {
+    loading: boolean;
+    error: ErrorResult | null;
+    data: Entity | null;
+};
+export declare const initCountry: CountryProps;
+export declare const initCurrency: CurrencyProps;

package/dist/cjs/lib/lib/Click.d.ts

@@ -12,5 +12,5 @@ interface ClickProviderProps {
     children: any;
 }
 export declare function ClickProvider(props: ClickProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useClickRef(): CSPRClickSDK | undefined;
+export declare function useClickRef(): CSPRClickSDK;
 export default ClickProvider;

package/dist/cjs/lib/lib/ClickModal.d.ts

@@ -9,6 +9,7 @@ interface ClickModalProps {
     clickRef: any;
     signInOptions: any;
     themeMode?: ThemeModeType;
+    rootAppElement?: string;
 }
 export declare function ClickModal(props: ClickModalProps): import("react/jsx-runtime").JSX.Element;
 export default ClickModal;

package/dist/cjs/lib/lib/{ClickTopBar.d.ts → ClickUI.d.ts}

@@ -1,7 +1,6 @@
 import React from 'react';
 import { CurrencySettings, LanguageSettings, NetworkSettings, ThemeModeType, CustomTopBarMenuSettings } from './types';
-interface ClickTopBarProps {
-    themeMode?: ThemeModeType;
+export interface TopBarSettings {
     onThemeSwitch?: () => void;
     accountMenuItems?: React.ReactElement[];
     languageSettings?: LanguageSettings;
@@ -9,5 +8,11 @@ interface ClickTopBarProps {
     networkSettings?: NetworkSettings;
     customTopBarMenuSettings?: CustomTopBarMenuSettings[];
 }
-export declare function ClickTopBar({ themeMode, onThemeSwitch, accountMenuItems, languageSettings, currencySettings, networkSettings, customTopBarMenuSettings, }: ClickTopBarProps): import("react/jsx-runtime").JSX.Element;
-export default ClickTopBar;
+interface ClickUIProps {
+    themeMode?: ThemeModeType;
+    topBarSettings?: TopBarSettings;
+    rootAppElement?: string;
+    show1ClickModal?: boolean;
+}
+export declare function ClickUI({ themeMode, topBarSettings, rootAppElement, show1ClickModal, }: ClickUIProps): import("react/jsx-runtime").JSX.Element;
+export default ClickUI;

package/dist/cjs/lib/lib/InfoPopup/InfoPopup.d.ts

@@ -0,0 +1,10 @@
+import { ThemeModeType } from '@make-software/cspr-ui';
+import React from "react";
+export interface InfoPopupRef {
+    hide: () => void;
+}
+interface InfoPopupProps {
+    themeMode?: ThemeModeType;
+}
+export declare const InfoPopup: React.ForwardRefExoticComponent<InfoPopupProps & React.RefAttributes<InfoPopupRef>>;
+export default InfoPopup;

package/dist/cjs/lib/lib/OneClickSignIn/OneClickSignIn.d.ts

@@ -0,0 +1,12 @@
+import { AccountType } from '@make-software/csprclick-core-types';
+import { ThemeModeType } from "../types";
+interface OneClickSignInProps {
+    accounts: AccountType[];
+    onAccountClick: (acc: AccountType | null) => Promise<void>;
+    handleClose: () => void;
+    onMoreAccountsClick: () => void;
+    themeMode?: ThemeModeType;
+}
+export declare const OneClickSignInInner: (props: OneClickSignInProps) => import("react/jsx-runtime").JSX.Element;
+declare const OneClickSignIn: (props: OneClickSignInProps) => import("react/jsx-runtime").JSX.Element;
+export default OneClickSignIn;

package/dist/cjs/lib/lib/ProviderConnection/ProviderConnection.d.ts

@@ -20,5 +20,5 @@ interface ProviderConnectionProps {
     themeMode?: ThemeModeType;
     onModalClose?: () => void;
 }
-export declare const ProviderConnection: ({ clickRef, event, themeMode, onModalClose }: ProviderConnectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProviderConnection: ({ clickRef, event, themeMode, onModalClose, }: ProviderConnectionProps) => import("react/jsx-runtime").JSX.Element;
 export default ProviderConnection;

package/dist/cjs/lib/lib/{TopBar/components → SkeletonLoader}/SkeletonLoader.d.ts

@@ -4,5 +4,5 @@ interface SkeletonComponentProps {
     width?: string;
     height?: string;
 }
-export declare const SkeletonLoader: ({ baseColor, animationColor, height, width }: SkeletonComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SkeletonLoader: ({ baseColor, animationColor, height, width, }: SkeletonComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/lib/lib/TopBar/components/BuyCSPRMenuItem.d.ts

@@ -1,4 +1,4 @@
-import { BadgeProps } from "./AccountMenuItem";
+import { BadgeProps } from './AccountMenuItem';
 interface BuyCSPRMenuItemProps {
     badge?: BadgeProps;
 }

package/dist/cjs/lib/lib/{ProviderConnection/components → TransactionReview}/DeploySignatureInstructions.d.ts

@@ -1,6 +1,8 @@
-import { ThemeModeType } from "../../types";
+import { ThemeModeType } from '../types';
 interface DeploySignatureInstructionsProps {
     deployHash: string;
+    deviceTitle: string;
+    warningInfo?: any;
     themeMode?: ThemeModeType;
 }
 export declare const DeploySignatureInstructions: (props: DeploySignatureInstructionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/lib/lib/{ProviderConnection/components → TransactionReview}/MessageSignatureInstructions.d.ts

@@ -1,7 +1,8 @@
-import { ThemeModeType } from "../../types";
+import { ThemeModeType } from "../types";
 interface MessageSignatureInstructionsProps {
     message: string;
     messageHash: string;
+    deviceTitle: string;
     themeMode?: ThemeModeType;
 }
 export declare const MessageSignatureInstructions: (props: MessageSignatureInstructionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/lib/lib/TransactionReview/TransactionReviewHandler.d.ts

@@ -0,0 +1,2 @@
+import { CSPRClickSDK } from '@make-software/csprclick-core-client';
+export declare const transactionReviewHandler: (event: any, clickRef: CSPRClickSDK) => void;

package/dist/cjs/lib/lib/WalletConnect/WalletConnectConnection.d.ts

@@ -0,0 +1,22 @@
+import { AccountType, WCConnectionStatusEvent, WCPairing } from '@make-software/csprclick-core-types';
+import { CSPRClickSDK } from '@make-software/csprclick-core-client';
+import { ThemeModeType } from '../types';
+export type WalletConnectStatus = {
+    status: WCConnectionStatusEvent;
+    pairings?: WCPairing[];
+    pairingUri?: string;
+    accounts?: AccountType[];
+    deployHash?: string;
+    signatureHex?: string;
+    message?: string;
+    msgHash?: string;
+    error?: any;
+};
+interface WalletConnectConnectionProps {
+    clickRef: CSPRClickSDK;
+    event: WalletConnectStatus;
+    themeMode?: ThemeModeType;
+    onModalClose?: () => void;
+}
+export declare const WalletConnectConnection: ({ clickRef, event, themeMode, onModalClose, }: WalletConnectConnectionProps) => import("react/jsx-runtime").JSX.Element;
+export default WalletConnectConnection;

package/dist/cjs/lib/lib/WalletConnect/components/ListAccounts.d.ts

@@ -0,0 +1,13 @@
+import { AccountType } from '@make-software/csprclick-core-types';
+import { CSPRClickSDK } from '@make-software/csprclick-core-client';
+import { ThemeModeType } from '../../types';
+interface ListAccountsProps {
+    appName: string;
+    clickRef: CSPRClickSDK;
+    accounts: Array<AccountType>;
+    onAccountClick: (acc: AccountType) => Promise<void>;
+    onUseAnotherAccountClick: () => Promise<void>;
+    themeMode?: ThemeModeType;
+}
+export declare const ListAccounts: (props: ListAccountsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/lib/lib/WalletConnect/components/NewPairing.d.ts

@@ -0,0 +1,10 @@
+import { ThemeModeType } from '../../types';
+import { CSPRClickSDK } from "@make-software/csprclick-core-client";
+interface NewPairingProps {
+    pairingUri: string;
+    appName: string;
+    themeMode?: ThemeModeType;
+    clickRef: CSPRClickSDK;
+}
+export declare const NewPairing: ({ pairingUri, appName, clickRef }: NewPairingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/lib/lib/WalletConnect/components/PairedWalletListItem.d.ts

@@ -0,0 +1,13 @@
+import { WCPairing } from '@make-software/csprclick-core-types';
+import { ThemeModeType } from '../../types';
+interface PairedWalletListItemProps {
+    wallet?: WCPairing;
+    isNarrowItem?: boolean;
+    onClick: (wallet: WCPairing | null) => void;
+    onUnpair?: (e: any, wallet: WCPairing) => void;
+    themeMode?: ThemeModeType;
+    withBalance?: boolean;
+    isItemActive?: boolean;
+}
+declare const PairedWalletListItem: ({ wallet, onClick, onUnpair, isNarrowItem, isItemActive, themeMode }: PairedWalletListItemProps) => import("react/jsx-runtime").JSX.Element;
+export default PairedWalletListItem;

package/dist/cjs/lib/lib/WalletConnect/components/PairedWallets.d.ts

@@ -0,0 +1,13 @@
+import { WCPairing } from '@make-software/csprclick-core-types';
+import { CSPRClickSDK } from '@make-software/csprclick-core-client';
+import { ThemeModeType } from '../../types';
+interface PairedWalletsProps {
+    appName: string;
+    clickRef: CSPRClickSDK;
+    pairings: Array<WCPairing>;
+    onWalletClick: (wallet: WCPairing) => Promise<void>;
+    onNewPairing: () => Promise<void>;
+    themeMode?: ThemeModeType;
+}
+export declare const PairedWallets: ({ pairings, onWalletClick, themeMode, onNewPairing, appName, clickRef }: PairedWalletsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/lib/lib/components/AccountIdenticon.d.ts

@@ -0,0 +1,9 @@
+export declare const CanvasContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    size: number;
+}, never>;
+interface AccountIdenticonProps {
+    hex: string;
+    size: 'xs' | 'sm' | 'm' | 'l' | number;
+}
+export declare const AccountIdenticon: ({ hex, size }: AccountIdenticonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/lib/lib/components/AccountListItemMenu.d.ts

@@ -2,6 +2,7 @@ interface AccountListItemMenuProps {
     onMenuOpen: () => void;
     onCloseSession: (e: any) => void;
     isItemActive?: boolean;
+    title?: string;
 }
-declare const AccountListItemMenu: ({ onMenuOpen, onCloseSession, isItemActive }: AccountListItemMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccountListItemMenu: ({ onMenuOpen, onCloseSession, isItemActive, title }: AccountListItemMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default AccountListItemMenu;

package/dist/cjs/lib/lib/components/ScrollContainer.d.ts

@@ -2,17 +2,20 @@
 interface ScrollContainerProps {
     isModalOverflowing?: boolean;
     customMaxHeight?: number;
+    customMinHeight?: number;
     children: any;
     variation?: string;
 }
 export declare const ScrollWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@make-software/cspr-ui").FlexColumnProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, ScrollContainerProps & {
     maxHeight: number;
+    minHeight?: number | undefined;
     isScrolling?: boolean | undefined;
     onMouseLeave?: (() => void) | undefined;
 }, never>;
 export declare enum ScrollVariations {
     'small' = "small",
-    'big' = "big"
+    'big' = "big",
+    'medium' = "medium"
 }
-declare const ScrollContainer: ({ children, isModalOverflowing, variation, customMaxHeight, }: ScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ScrollContainer: ({ children, isModalOverflowing, variation, customMaxHeight, customMinHeight, }: ScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollContainer;

package/dist/cjs/lib/lib/components/WalletLogo.d.ts

@@ -1,4 +1,4 @@
-import { ThemeModeType } from '../types';
+import { ThemeModeType } from '@make-software/cspr-ui';
 export declare enum Size {
     small = "small",
     default = "default"
@@ -7,6 +7,7 @@ interface WalletLogoProps {
     providerKey: string;
     size?: Size.small | Size.default;
     themeMode?: ThemeModeType;
+    logoPath?: string;
 }
-declare const WalletLogo: ({ providerKey, size, themeMode }: WalletLogoProps) => import("react/jsx-runtime").JSX.Element;
+declare const WalletLogo: ({ providerKey, size, themeMode, logoPath }: WalletLogoProps) => import("react/jsx-runtime").JSX.Element;
 export default WalletLogo;

package/dist/cjs/lib/lib/constants/index.d.ts

@@ -5,5 +5,7 @@ export declare const MODAL_ACTIONS: {
     CHOSE_ACCOUNT: string;
     LEDGER_PROVIDER_UI: string;
     METAMASK_PROVIDER_UI: string;
+    WALLETCONNECT_PROVIDER_UI: string;
+    BUY_CSPR: string;
 };
 export type MODAL_ACTIONS = string;

package/dist/cjs/lib/lib/index.d.ts

@@ -1,7 +1,7 @@
-export * from './ChooseAccount/ChooseAccount';
+export * from './OneClickSignIn/OneClickSignIn';
 export * from './Click';
 export * from './ClickModal';
-export * from './ClickTopBar';
+export * from './ClickUI';
 export * from './constants';
 export * from './SignIn/SignIn';
 export * from './TopBar/TopBar';
@@ -10,4 +10,5 @@ export * from './TopBar/components/AccountMenuItem';
 export * from './TopBar/components/BuyCSPRMenuItem';
 export * from './TopBar/components/CopyHashMenuItem';
 export * from './TopBar/components/ViewAccountOnExplorerMenuItem';
+export * from './components/AccountIdenticon';
 export * from './types';

package/dist/cjs/lib/lib/types/theme.d.ts

@@ -1,5 +1,22 @@
 export declare const CsprClickThemes: any;
+export interface getThemesByColorProps {
+    csprclickDarkTheme: object;
+    csprclickLightTheme: object;
+    appDarkTheme: object;
+    appLightTheme: object;
+}
+export declare enum mappedColors {
+    backgroundTopBarColor = "backgroundTertiary",
+    backgroundMenuColor = "backgroundPrimary",
+    hoverProductMenu = "backgroundSecondary",
+    hoverAccountMenu = "fillSecondary",
+    textColor = "contentPrimary"
+}
 export declare enum ThemeModeType {
     light = "light",
     dark = "dark"
 }
+export declare const getThemesByColor: (theme: getThemesByColorProps) => {
+    dark: any;
+    light: any;
+};

package/dist/cjs/lib/lib/types/wallet.d.ts

@@ -1,17 +1,8 @@
-import { AccountType } from '@make-software/csprclick-core-types';
-export declare enum WalletKeys {
-    CasperWallet = "casper-wallet",
-    CasperSigner = "casper-signer",
-    Ledger = "ledger",
-    Torus = "torus-wallet",
-    CasperDash = "casperdash",
-    MetamaskSnap = "metamask-snap"
-}
-export type ProviderKeys = WalletKeys.CasperWallet | WalletKeys.CasperSigner;
+import { AccountType, WALLET_KEYS } from '@make-software/csprclick-core-types';
 export type Provider = {
     connected: boolean;
     icon: string;
-    key: ProviderKeys;
+    key: WALLET_KEYS;
     text: string;
 };
 export type Options = {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AccountType, BadgeSettings } from '@make-software/csprclick-core-types';
+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';
@@ -67,24 +67,32 @@ interface NetworkSettings {
 }
 
 declare const CsprClickThemes: any;
+interface getThemesByColorProps {
+    csprclickDarkTheme: object;
+    csprclickLightTheme: object;
+    appDarkTheme: object;
+    appLightTheme: object;
+}
+declare enum mappedColors {
+    backgroundTopBarColor = "backgroundTertiary",
+    backgroundMenuColor = "backgroundPrimary",
+    hoverProductMenu = "backgroundSecondary",
+    hoverAccountMenu = "fillSecondary",
+    textColor = "contentPrimary"
+}
 declare enum ThemeModeType {
     light = "light",
     dark = "dark"
 }
+declare const getThemesByColor: (theme: getThemesByColorProps) => {
+    dark: any;
+    light: any;
+};
 
-declare enum WalletKeys {
-    CasperWallet = "casper-wallet",
-    CasperSigner = "casper-signer",
-    Ledger = "ledger",
-    Torus = "torus-wallet",
-    CasperDash = "casperdash",
-    MetamaskSnap = "metamask-snap"
-}
-type ProviderKeys = WalletKeys.CasperWallet | WalletKeys.CasperSigner;
 type Provider = {
     connected: boolean;
     icon: string;
-    key: ProviderKeys;
+    key: WALLET_KEYS;
     text: string;
 };
 type Options = {
@@ -92,14 +100,14 @@ type Options = {
     accounts: AccountType[];
 };
 
-interface ChooseAccountProps {
+interface OneClickSignInProps {
     accounts: AccountType[];
     onAccountClick: (acc: AccountType | null) => Promise<void>;
     handleClose: () => void;
-    onChooseAccount: () => void;
+    onMoreAccountsClick: () => void;
     themeMode?: ThemeModeType;
 }
-declare const ChooseAccountInner: (props: ChooseAccountProps) => react_jsx_runtime.JSX.Element;
+declare const OneClickSignInInner: (props: OneClickSignInProps) => react_jsx_runtime.JSX.Element;
 
 declare global {
     interface Window {
@@ -113,7 +121,7 @@ interface ClickProviderProps {
     children: any;
 }
 declare function ClickProvider(props: ClickProviderProps): react_jsx_runtime.JSX.Element;
-declare function useClickRef(): CSPRClickSDK | undefined;
+declare function useClickRef(): CSPRClickSDK;
 
 interface ClickModalProps {
     modalAction: string;
@@ -124,11 +132,11 @@ interface ClickModalProps {
     clickRef: any;
     signInOptions: any;
     themeMode?: ThemeModeType;
+    rootAppElement?: string;
 }
 declare function ClickModal(props: ClickModalProps): react_jsx_runtime.JSX.Element;
 
-interface ClickTopBarProps {
-    themeMode?: ThemeModeType;
+interface TopBarSettings {
     onThemeSwitch?: () => void;
     accountMenuItems?: React.ReactElement[];
     languageSettings?: LanguageSettings;
@@ -136,7 +144,13 @@ interface ClickTopBarProps {
     networkSettings?: NetworkSettings;
     customTopBarMenuSettings?: CustomTopBarMenuSettings[];
 }
-declare function ClickTopBar({ themeMode, onThemeSwitch, accountMenuItems, languageSettings, currencySettings, networkSettings, customTopBarMenuSettings, }: ClickTopBarProps): react_jsx_runtime.JSX.Element;
+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;
@@ -145,6 +159,8 @@ declare const MODAL_ACTIONS: {
     CHOSE_ACCOUNT: string;
     LEDGER_PROVIDER_UI: string;
     METAMASK_PROVIDER_UI: string;
+    WALLETCONNECT_PROVIDER_UI: string;
+    BUY_CSPR: string;
 };
 type MODAL_ACTIONS = string;
 
@@ -203,4 +219,13 @@ declare const CopyHashMenuItem: (props: any) => react_jsx_runtime.JSX.Element;
 
 declare const ViewAccountOnExplorerMenuItem: (props: any) => react_jsx_runtime.JSX.Element;
 
-export { AccountMenuItem, type AccountMenuItemProps, type BadgeBackgroundColor, type BadgeProps, BannerLink, BuyCSPRMenuItem, CURRENCY, CUSTOM, ChooseAccountInner, ClickModal, ClickProvider, ClickTopBar, CopyHashMenuItem, CsprClickThemes, type Currency, type CurrencySettings, CurrencyType, type CustomTopBarMenuItem, type CustomTopBarMenuSettings, LANGUAGE, Lang, type LanguageSettings, MODAL_ACTIONS, NETWORK, type Network, type NetworkSettings, type Options, type Provider, type ProviderKeys, SignIn, type SignInSceneProps, ThemeModeType, TopBar, ViewAccountOnExplorerMenuItem, WalletKeys, useClickBadge, useClickRef };
+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, BuyCSPRMenuItem, CURRENCY, CUSTOM, CanvasContainer, ClickModal, ClickProvider, ClickUI, CopyHashMenuItem, CsprClickThemes, type Currency, type CurrencySettings, CurrencyType, type CustomTopBarMenuItem, type CustomTopBarMenuSettings, LANGUAGE, Lang, type LanguageSettings, MODAL_ACTIONS, NETWORK, type Network, type NetworkSettings, OneClickSignInInner, type Options, type Provider, SignIn, type SignInSceneProps, ThemeModeType, TopBar, type TopBarSettings, ViewAccountOnExplorerMenuItem, getThemesByColor, type getThemesByColorProps, mappedColors, useClickBadge, useClickRef };