@make-software/csprclick-ui 1.2.0 → 1.3.0

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/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/{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/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/constants/index.d.ts

@@ -5,5 +5,6 @@ export declare const MODAL_ACTIONS: {
     CHOSE_ACCOUNT: string;
     LEDGER_PROVIDER_UI: string;
     METAMASK_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';

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/index.d.ts

@@ -67,10 +67,27 @@ 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",
@@ -92,14 +109,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 {
@@ -124,11 +141,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 +153,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 +168,7 @@ declare const MODAL_ACTIONS: {
     CHOSE_ACCOUNT: string;
     LEDGER_PROVIDER_UI: string;
     METAMASK_PROVIDER_UI: string;
+    BUY_CSPR: string;
 };
 type MODAL_ACTIONS = string;
 
@@ -203,4 +227,4 @@ 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 };
+export { AccountMenuItem, type AccountMenuItemProps, type BadgeBackgroundColor, type BadgeProps, BannerLink, BuyCSPRMenuItem, CURRENCY, CUSTOM, 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, type ProviderKeys, SignIn, type SignInSceneProps, ThemeModeType, TopBar, type TopBarSettings, ViewAccountOnExplorerMenuItem, WalletKeys, getThemesByColor, type getThemesByColorProps, mappedColors, useClickBadge, useClickRef };

package/dist/lib/assets/icons/rate.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="22" viewBox="0 0 17 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M12.0379 22L16.6094 17.1111L13.1808 17.1111L13.1808 8.55556L10.8951 8.55556L10.8951 17.1111L7.46652 17.1111M9.75223 4.88889L5.1808 -4.99559e-07L0.609375 4.88889L4.03795 4.88889L4.03795 13.4444L6.32366 13.4444L6.32366 4.88889L9.75223 4.88889Z" fill="#84858C"/>
+</svg>

package/dist/lib/assets/logos/logo.svg

@@ -0,0 +1,4 @@
+<svg width="86" height="88" viewBox="0 0 86 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M81.8224 32.5H59.9999C58.6192 32.5 57.4999 31.3807 57.4999 30L57.4999 25.1761C57.4999 18.9556 50.3633 15.4389 45.4306 19.2287L20.2789 38.5526C16.3713 41.5548 16.3713 47.4452 20.2789 50.4474L45.4306 69.7713C50.3633 73.5611 57.4999 70.0444 57.4999 63.8239L57.4999 58C57.4999 56.6193 58.6192 55.5 59.9999 55.5H81.8224C83.4952 55.5 84.4995 57.0016 84.0259 58.3246C78.1465 74.7511 62.4434 86.5 44 86.5C20.5279 86.5 1.5 67.4721 1.5 44C1.5 20.5279 20.5279 1.5 44 1.5C62.4434 1.5 78.1465 13.2489 84.0259 29.6754C84.4995 30.9984 83.4952 32.5 81.8224 32.5Z"
+           stroke-width="3"/>
+</svg>