@funkit/connect 0.1.3 → 0.1.5

package/dist/components/Box/Box.d.ts

@@ -35,7 +35,7 @@ export declare const Box: React.ForwardRefExoticComponent<{
     readonly alignSelf?: "flex-start" | "flex-end" | "center" | undefined;
     readonly backgroundSize?: "cover" | undefined;
     readonly borderRadius?: "1" | "actionButton" | "connectButton" | "menuButton" | "modal" | "modalMobile" | "6" | "10" | "13" | "16" | "24" | "25%" | "full" | undefined;
-    readonly borderStyle?: "solid" | "dotted" | undefined;
+    readonly borderStyle?: "solid" | "dotted" | "hidden" | undefined;
     readonly borderWidth?: "0" | "1" | "2" | "4" | undefined;
     readonly cursor?: "pointer" | undefined;
     readonly flexDirection?: "row" | "column" | undefined;
@@ -43,17 +43,17 @@ export declare const Box: React.ForwardRefExoticComponent<{
     readonly fontSize?: "10" | "13" | "16" | "12" | "14" | "18" | "20" | "23" | "57" | undefined;
     readonly fontWeight?: "regular" | "medium" | "semibold" | "bold" | "heavy" | undefined;
     readonly gap?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
-    readonly height?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "600" | "half" | "max" | undefined;
+    readonly height?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "440" | "600" | "half" | "max" | undefined;
     readonly justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | undefined;
     readonly textAlign?: "left" | "inherit" | "center" | undefined;
     readonly marginBottom?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
     readonly marginLeft?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
     readonly marginRight?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
     readonly marginTop?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
-    readonly minHeight?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "600" | "half" | "max" | undefined;
-    readonly maxHeight?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "600" | "half" | "max" | undefined;
-    readonly maxWidth?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "600" | "half" | "max" | undefined;
-    readonly minWidth?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "600" | "half" | "max" | undefined;
+    readonly minHeight?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxHeight?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxWidth?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "440" | "600" | "half" | "max" | undefined;
+    readonly minWidth?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "440" | "600" | "half" | "max" | undefined;
     readonly overflow?: "hidden" | undefined;
     readonly paddingBottom?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
     readonly paddingLeft?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
@@ -63,7 +63,7 @@ export declare const Box: React.ForwardRefExoticComponent<{
     readonly right?: "0" | undefined;
     readonly transition?: "default" | "transform" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly width?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "600" | "half" | "max" | undefined;
+    readonly width?: "1" | "2" | "24" | "full" | "4" | "12" | "20" | "400" | "8" | "28" | "30" | "32" | "36" | "44" | "34" | "40" | "48" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "440" | "600" | "half" | "max" | undefined;
     readonly backdropFilter?: "modalOverlay" | undefined;
     margin?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;
     marginX?: "0" | "1" | "2" | "3" | "6" | "10" | "16" | "24" | "4" | "12" | "14" | "18" | "20" | "-1" | "5" | "8" | "28" | "30" | "32" | "36" | "44" | "64" | undefined;

package/dist/components/FunButton/FunButton.css.d.ts

@@ -1 +1,2 @@
 export declare const funLinkButtonStyle: string;
+export declare const funIconButtonStyle: string;

package/dist/components/FunButton/FunIconButton.d.ts

@@ -3,9 +3,10 @@ import { BoxProps } from '../Box/Box';
 /**
  * Circular icon button with dynamic height and width
  */
-export declare const FunIconButton: ({ onClick, icon, size, showBorder, }: {
+export declare const FunIconButton: ({ onClick, icon, size, showBorder, ariaLabel, }: {
     onClick: () => void;
     icon: React.ReactNode;
     size?: BoxProps['height'];
     showBorder?: boolean | undefined;
+    ariaLabel?: string | undefined;
 }) => React.JSX.Element;

package/dist/components/FunButton/FunLinkButton.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TextProps } from '../Text/Text';
-export declare function FunLinkButton({ onClick, text, textProps, }: {
+export declare function FunLinkButton({ onClick, text, textProps, hasPadding, }: {
     onClick: () => void;
     text: string;
     textProps?: Omit<TextProps, 'color'>;
+    hasPadding?: boolean;
 }): React.JSX.Element;

package/dist/components/FunCheckoutModal/FunCheckoutSelectAssetStep.d.ts

@@ -3,9 +3,10 @@ import { PaymentMethodInfo } from '../FunPayments/FunPaymentMethods';
 /**
  * Based on which payment method was selected, allow users to select which asset they want to fund
  */
-export declare function FunCheckoutSelectAssetStep({ checkoutId, selectedPaymentMethodInfo, onFinish, animateOut, }: {
+export declare function FunCheckoutSelectAssetStep({ checkoutId, selectedPaymentMethodInfo, onFinish, isOnFinishLoading, animateOut, }: {
     checkoutId: string | null;
     selectedPaymentMethodInfo: PaymentMethodInfo | null;
+    isOnFinishLoading: boolean;
     onFinish: () => void;
     animateOut?: boolean;
 }): React.JSX.Element;

package/dist/components/FunDivider/FunDivider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../Box/Box';
-export declare function FunDivider({ marginY, }: {
+export declare function FunDivider({ marginY, transparent, }: {
     marginY?: BoxProps['margin'];
+    transparent?: boolean;
 }): React.JSX.Element;

package/dist/components/FunInput/FunInput.d.ts

@@ -3,6 +3,7 @@ import React, { HTMLInputTypeAttribute, ReactNode } from 'react';
 import { BoxProps } from '../Box/Box';
 export interface FunInputProps {
     prefix?: ReactNode;
+    prefixIcon?: 'SearchIcon' | '$';
     placeholder?: string;
     value: string | number | readonly string[] | undefined;
     label?: string;
@@ -18,11 +19,11 @@ export interface FunInputProps {
         [x: string]: any;
     };
     ref?: any;
-    error?: boolean;
+    error?: string | boolean;
     focused?: boolean;
     textColor?: BoxProps['color'];
     inputClass?: string;
 }
-export declare function FunInputDefault({ prefix, placeholder, value, label, onChange, onKeyDown, onKeySubmit, onPaste, onMouseDown, hasBackground, textColor, inputStyle, inputProps, error, focused, inputClass, }: FunInputProps): React.JSX.Element;
+export declare function FunInputDefault({ prefix, prefixIcon, placeholder, value, label, onChange, onKeyDown, onKeySubmit, onPaste, onMouseDown, hasBackground, textColor, inputStyle, inputProps, error, focused: _focused, inputClass, }: FunInputProps): React.JSX.Element;
 export declare const FunInputWithRef: React.ForwardRefExoticComponent<Omit<FunInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export declare function FunInput(props: FunInputProps): React.JSX.Element;

package/dist/components/FunNotification/FunNotification.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import { Box } from '../Box/Box';
 import { TextProps } from '../Text/Text';
 interface FunNotificationProps {
     type?: FunNotificationType;
     description: string;
     textProps?: Omit<TextProps, 'color'>;
+    containerProps?: React.ComponentProps<typeof Box>;
 }
 type FunNotificationType = 'default' | 'error';
-export declare function FunNotification({ type, description, textProps, }: FunNotificationProps): React.JSX.Element;
+export declare function FunNotification({ type, description, textProps, containerProps, }: FunNotificationProps): React.JSX.Element;
 export {};

package/dist/components/FunPayments/FunPaymentMoonpayType.css.d.ts

@@ -2,6 +2,7 @@ export declare const contentAnimationDefaults: {
     animationDuration: string;
     animationTimingFunction: string;
     animationFillMode: string;
+    height: string;
 };
 export declare const animateContentInClass: string;
 export declare const animateContentOutClass: string;

package/dist/components/FunPayments/FunPaymentMoonpayType.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Address } from 'wagmi';
 import { PaymentFlow } from './FunPaymentMethods';
-export declare function FunPaymentMoonpayType({ paymentFlow, paymentAddress, depositToken, depositUsdAmount, onBackToHome, backAnimation, redirectToCheckoutHistory, }: {
+export declare function FunPaymentMoonpayType({ paymentFlow, paymentAddress, depositToken, depositTokenChainId, depositTokenAmount, onBackToHome, backAnimation, redirectToCheckoutHistory, }: {
     paymentFlow: PaymentFlow;
     paymentAddress: Address;
     depositToken: string;
-    depositUsdAmount: number;
+    depositTokenChainId: string;
+    depositTokenAmount: number;
     onBackToHome: () => void;
     backAnimation?: boolean;
     redirectToCheckoutHistory?: (depositAddress: string) => void;

package/dist/components/FunPayments/FunPaymentSetup.d.ts

@@ -9,9 +9,10 @@ interface FunPaymentSetupProps {
     onBackToHome: () => void;
     paymentAddress: Address;
     token: string;
+    tokenChainId: string;
     tokenAmountUsd: number;
     backAnimation?: boolean;
     redirectToCheckoutHistory?: (depositAddress: string) => void;
 }
-export declare function FunPaymentSetup({ paymentFlow, paymentAddress, paymentMethod, onSetup, onSoftHide, onBackToHome, token, tokenAmountUsd, backAnimation, redirectToCheckoutHistory, }: FunPaymentSetupProps): React.JSX.Element;
+export declare function FunPaymentSetup({ paymentFlow, paymentAddress, paymentMethod, onSetup, onSoftHide, onBackToHome, token, tokenChainId, tokenAmountUsd, backAnimation, redirectToCheckoutHistory, }: FunPaymentSetupProps): React.JSX.Element;
 export {};

package/dist/components/FunProgressBar/FunVerticalProgressBar.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 interface ProgressLabel {
     text: string;
     description: string;
+    linkText?: string;
+    linkUrl?: string;
 }
 interface FunVerticalProgressBarProps {
     step: number;

package/dist/components/FunSelect/FunSelect.d.ts

@@ -4,12 +4,13 @@ export interface FunSelectOption {
     value: string;
     label: ReactNode;
 }
-export declare function FunSelectDropdown({ handleSelect, isDropdownOpen, options, selectedValue, optionItemPadding, }: {
+export declare function FunSelectDropdown({ handleSelect, isDropdownOpen, options, selectedValue, optionItemPadding, showBorder, }: {
     handleSelect: (newValue: FunSelectOption['value']) => void;
     isDropdownOpen: boolean;
     options: FunSelectOption[];
     selectedValue: FunSelectOption['value'];
     optionItemPadding?: BoxProps['padding'];
+    showBorder?: boolean;
 }): React.JSX.Element | null;
 interface FunSelectProps {
     initValue?: FunSelectOption['value'];

package/dist/components/FunToast/FunToast.d.ts

@@ -10,8 +10,9 @@ export interface FunToastProps {
     title: string;
     hideTitleSuffix?: boolean;
     titleSuffix?: ReactNode;
-    description: string;
+    description: string | ReactNode;
+    isDescriptionText?: boolean;
     icon?: ReactNode;
     closing?: boolean;
 }
-export declare function FunToast({ type, title, titleSuffix, hideTitleSuffix, description, icon, }: FunToastProps): React.JSX.Element;
+export declare function FunToast({ type, title, titleSuffix, hideTitleSuffix, description, isDescriptionText, icon, }: FunToastProps): React.JSX.Element;

package/dist/components/FunkitProvider/FunkitCheckoutContext.d.ts

@@ -1,4 +1,4 @@
-import { CheckoutCoreQuoteResponse, CheckoutHistoryItem, ExecutionReceipt } from '@funkit/core';
+import { CheckoutCoreQuoteResponse, CheckoutHistoryItem, Operation } from '@funkit/core';
 import React, { ReactNode } from 'react';
 import { Abi, Address } from 'viem';
 import { CheckoutHistoryStateMap } from '../../utils/checkout';
@@ -23,8 +23,6 @@ export interface FunkitCheckoutConfig {
     targetAssetAmount: number;
     /** Timestamp (in milliseconds) after which the checkout should not be performed, and the funds will become rescuable. Min: 300000 (5 mins), Max: 3600000 (1 hour). **/
     expirationTimestampMs: number;
-    /** Whether direct checkout execution should be allowed **/
-    enableDirectExecution?: boolean;
     /** ****************************************
      * Checkout ModalUI-related configurations *
      *******************************************/
@@ -34,17 +32,20 @@ export interface FunkitCheckoutConfig {
     icon?: null | ReactNode;
     /** Title of the item being checked out. e.g. Staked Ether, XYZ Option, Solar Bond ABC **/
     checkoutItemTitle: string;
-    /** Description of the item being checked out. If not specified, it will default to "Amount". **/
+    /** Description of the item being checked out. If not specified, it will default to blank. **/
     checkoutItemDescription?: string;
+    /** The quantity of the item being checked out. If not specified (0, null, undefined), it will default to blank. **/
+    checkoutItemAmount?: number;
 }
 interface FunkitCheckoutValidationResult {
     isValid: boolean;
     message: string;
 }
 type FunkitCheckoutQuoteResult = CheckoutCoreQuoteResponse;
-export type FunkitDirectExecutionResult = {
-    receipt: ExecutionReceipt | string | null;
-    type: 'web2' | 'web3';
+export type FunkitCheckoutResult = {
+    type: 'error' | 'success';
+    message: string;
+    metadata: object | Error;
 };
 interface useFunkitCheckoutProps {
     /** @required the checkout config object **/
@@ -55,8 +56,10 @@ interface useFunkitCheckoutProps {
     onEstimation?: (result: FunkitCheckoutQuoteResult) => void;
     /** @optional fires when a checkout if confirmed with the funkit server **/
     onConfirmation?: () => void;
-    /** @optional fires if the checkout is unneeded and the transaction can be executed directly. Recommended to implement this if `config.enableDirectExecution` is set to true.**/
-    onDirectExecution?: (result: FunkitDirectExecutionResult) => void;
+    /** @optional fires if the checkout fails at any point */
+    onError?: (result: FunkitCheckoutResult) => void;
+    /** @optional fires if the checkout fails at any point */
+    onSuccess?: (result: FunkitCheckoutResult) => void;
 }
 /**
  * Checkout Item for frontend use
@@ -84,6 +87,8 @@ export interface FunkitActiveCheckoutItem {
         symbol: string | null;
         chainId: string;
     };
+    /** Whether the checkout is a direct execution. If true, the initSettings.actionsParamfalse, it would go through the fun checkout protocol. */
+    isDirectExecution: boolean;
 }
 export declare function FunkitCheckoutProvider({ children }: {
     children: ReactNode;
@@ -93,7 +98,9 @@ interface useFunkitPreCheckoutInternalReturn {
     updateSourceAsset: (newSourceAsset: Address, newSourceAssetSymbol: string, newSourceAssetChainId: string) => void;
     confirmCheckout: (paymentMethod: PaymentMethod) => Promise<Address>;
     getCheckoutDraftDollarValue: () => Promise<void>;
-    getCheckoutQuote: () => Promise<void>;
+    getCheckoutQuote: (sponsorInitialTransferGasLimit: number) => Promise<void>;
+    handleWeb2DirectExecution: () => Promise<void>;
+    generateSignedBatchOperationForDirectExecution: () => Promise<Operation | null>;
 }
 /**
  * Internal hook to handle frontend pre-checkout operations, PER-CHECKOUT ITEM.

package/dist/components/FunkitProvider/FunkitProvider.d.ts

@@ -14,7 +14,7 @@ export type Theme = ThemeVars | {
     lightMode: ThemeVars;
     darkMode: ThemeVars;
 };
-export interface RainbowKitProviderProps {
+export interface FunkitProviderProps {
     wagmiConfig: CreateConfigParameters;
     chains: RainbowKitChain[];
     initialChain?: RainbowKitChain | number;
@@ -33,5 +33,5 @@ export interface RainbowKitProviderProps {
     funkitConfig: FunkitConfig;
 }
 export declare const RESERVED_GROUP_NAME = "funkit-web2";
-export declare function FunkitProvider(props: PropsWithChildren<RainbowKitProviderProps>): React.JSX.Element;
-export declare function FunkitProviderInner({ appInfo, avatar, chains, children, coolMode, id, initialChain, locale, modalSize, showRecentTransactions, theme, funkitConfig, }: PropsWithChildren<RainbowKitProviderProps>): React.JSX.Element;
+export declare function FunkitProvider(props: PropsWithChildren<FunkitProviderProps>): React.JSX.Element;
+export declare function FunkitProviderInner({ appInfo, avatar, chains, children, coolMode, id, initialChain, locale, modalSize, showRecentTransactions, theme, funkitConfig, }: PropsWithChildren<FunkitProviderProps>): React.JSX.Element;

package/dist/components/FunkitWeb2Provider/FunkitWeb2Provider.d.ts

@@ -5,6 +5,10 @@ interface OtpErrors {
     otpValue: string;
 }
 type OtpErrorType = OtpErrors | null;
+export declare const PRIVY_ERROR_CODES: {
+    readonly INVALID_CREDENTIALS: "invalid_credentials";
+    readonly NETWORK_ERROR: "network_error";
+};
 interface FunkitWeb2ContextType {
     privy: PrivyJS | null;
     loading: boolean;

package/dist/components/Icons/NoAssetsFoundIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const NotFoundIcon: ({ size }: {
+    size?: number | undefined;
+}) => React.JSX.Element;

package/dist/components/Icons/SearchIcon.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SearchIcon: () => React.JSX.Element;
+export declare const SearchIcon: ({ selected }: {
+    selected?: boolean | undefined;
+}) => React.JSX.Element;

package/dist/components/ProfileDetails/FunWalletProfileViews/FWHome/FWHome.css.d.ts

@@ -14,3 +14,4 @@ export declare const animateAvatarInClass: string;
 export declare const animateAvatarOutClass: string;
 export declare const animateContentInClass: string;
 export declare const animateContentOutClass: string;
+export declare const scroll: string;

package/dist/components/SkeletalLoader/SkeletalLoader.css.d.ts

@@ -0,0 +1 @@
+export declare const pulseAnimation: string;

package/dist/components/SkeletalLoader/SkeletalLoader.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SkeletalLoader: () => React.JSX.Element[];