@funkit/connect 0.1.4 → 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/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/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/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 *
      *******************************************/
@@ -44,9 +42,10 @@ interface FunkitCheckoutValidationResult {
     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 **/
@@ -57,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
@@ -86,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;
@@ -96,6 +99,8 @@ interface useFunkitPreCheckoutInternalReturn {
     confirmCheckout: (paymentMethod: PaymentMethod) => Promise<Address>;
     getCheckoutDraftDollarValue: () => 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/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[];