@funkit/connect 0.1.15 → 0.1.17

package/dist/components/AsyncImage/AsyncImage.d.ts

@@ -7,6 +7,7 @@ type CustomBorderColor = {
 interface AsyncImageProps {
     alt?: string;
     src: string | AsyncImageSrc | undefined;
+    fallbackSrc?: string | undefined;
     width: BoxProps['width'] | number;
     height: BoxProps['height'] | number;
     background?: string;
@@ -15,5 +16,5 @@ interface AsyncImageProps {
     boxShadow?: BoxProps['boxShadow'];
     testId?: string;
 }
-export declare function AsyncImage({ alt, background, borderColor, borderRadius, boxShadow, height, src: srcProp, width, testId, }: AsyncImageProps): React.JSX.Element;
+export declare function AsyncImage({ alt, background, borderColor, borderRadius, boxShadow, height, src: srcProp, fallbackSrc, width, testId, }: AsyncImageProps): React.JSX.Element;
 export {};

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

@@ -47,17 +47,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" | "440" | "600" | "half" | "max" | undefined;
+    readonly height?: "1" | "2" | "10" | "24" | "full" | "4" | "12" | "14" | "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" | "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 minHeight?: "1" | "2" | "10" | "24" | "full" | "4" | "12" | "14" | "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" | "10" | "24" | "full" | "4" | "12" | "14" | "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" | "10" | "24" | "full" | "4" | "12" | "14" | "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" | "10" | "24" | "full" | "4" | "12" | "14" | "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;
@@ -67,7 +67,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" | "440" | "600" | "half" | "max" | undefined;
+    readonly width?: "1" | "2" | "10" | "24" | "full" | "4" | "12" | "14" | "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/FunAssetAvatar/FunAssetAvatar.css.d.ts

@@ -0,0 +1,3 @@
+export declare const containerStyle: string;
+export declare const assetContainerStyle: string;
+export declare const chainContainerStyle: string;

package/dist/components/FunAssetAvatar/FunAssetAvatar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BoxProps } from '../Box/Box';
+interface FunAssetAvatarProps {
+    assetSrc?: string | undefined;
+    assetTicker: string;
+    assetName: string;
+    assetIconSize?: BoxProps['height'] | BoxProps['width'];
+    chainId: string | number;
+    chainIconSize?: BoxProps['height'] | BoxProps['width'];
+}
+export declare function FunAssetAvatar({ assetSrc, assetTicker, assetName, assetIconSize, chainId, chainIconSize, }: FunAssetAvatarProps): React.JSX.Element;
+export {};

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

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

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { PaymentMethodInfo } from '../FunPayments/FunPaymentMethods';
-export declare function FunCheckoutConfirmationStep({ checkoutId, onFinish, selectedPaymentMethodInfo, animateOut, }: {
+import { FunCheckoutStep } from './FunCheckoutModal';
+export declare function FunCheckoutConfirmationStep({ checkoutId, checkoutStep, onFinish, selectedPaymentMethodInfo, animateOut, }: {
     checkoutId: string | null;
+    checkoutStep: FunCheckoutStep;
     onFinish: (prevId: string, expirationTime: number, depositAddress: string) => void;
     selectedPaymentMethodInfo: PaymentMethodInfo | null;
     animateOut: boolean;

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

@@ -1,9 +1,15 @@
 import React from 'react';
 import { FunkitActiveCheckoutItem } from '../FunkitProvider/FunkitCheckoutContext';
-export declare function CheckoutPrimaryInfoSnapshot({ checkoutItem, isLoading, }: {
+import { PaymentMethod } from '../FunPayments/FunPaymentMethods';
+import { FunCheckoutStep } from './FunCheckoutModal';
+export declare function CheckoutPrimaryInfoSnapshot({ checkoutItem, isLoading, isEditable, onConfirmEdit, }: {
     checkoutItem: FunkitActiveCheckoutItem;
     isLoading: boolean;
+    isEditable: boolean;
+    onConfirmEdit?: (newValue: number) => void;
 }): React.JSX.Element;
-export declare function CheckoutPrimaryInfo({ checkoutId, }: {
+export declare function CheckoutPrimaryInfo({ checkoutId, checkoutStep, selectedPaymentMethod, }: {
     checkoutId: string | null;
+    checkoutStep: FunCheckoutStep;
+    selectedPaymentMethod: PaymentMethod | undefined;
 }): React.JSX.Element | null;

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

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

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { PaymentMethodInfo } from '../FunPayments/FunPaymentMethods';
-export declare function FunCheckoutVerifyDetailsStep({ checkoutId, onSelectPaymentMethod, }: {
+import { FunCheckoutStep } from './FunCheckoutModal';
+export declare function FunCheckoutVerifyDetailsStep({ checkoutId, checkoutStep, onSelectPaymentMethod, }: {
     checkoutId: string | null;
+    checkoutStep: FunCheckoutStep;
     onSelectPaymentMethod: (p: PaymentMethodInfo) => void;
 }): React.JSX.Element;

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

@@ -22,7 +22,8 @@ export interface FunInputProps {
     error?: string | boolean;
     focused?: boolean;
     textColor?: BoxProps['color'];
+    overrideBorderWidth?: undefined | BoxProps['borderWidth'];
 }
-export declare function FunInputDefault({ prefix, prefixIcon, placeholder, value, label, onChange, onKeyDown, onKeySubmit, onPaste, onMouseDown, hasBackground, textColor, inputStyle, inputProps, error, focused: _focused, }: 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, overrideBorderWidth, }: 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/FunKeyValue/FunKeyValue.d.ts

@@ -15,6 +15,9 @@ export interface FunKeyValueProps {
     valueTextColor?: BoxProps['color'];
     valueTextSize?: TextProps['size'];
     valueTextWeight?: TextProps['weight'];
+    valueGap?: BoxProps['gap'];
+    reverseValueItems?: boolean;
+    customValueComponent?: ReactNode;
     disclaimerTextColor?: BoxProps['color'];
     backgroundBaseColor?: BoxProps['background'] | undefined | any;
     paddingY?: BoxProps['paddingY'];
@@ -22,4 +25,4 @@ export interface FunKeyValueProps {
     isDisabled?: boolean;
 }
 export declare function FunKeyValue({ keyIcon, keyText, valueIcon, valueText, disclaimerText, onClick, hasBorder, backgroundBaseColor, // 'actionButtonSecondaryBackground'
-keyTextColor, keyTextSize, keyTextWeight, valueTextColor, valueTextSize, valueTextWeight, disclaimerTextColor, paddingY, paddingX, isDisabled, }: FunKeyValueProps): React.JSX.Element;
+keyTextColor, keyTextSize, keyTextWeight, valueTextColor, valueTextSize, valueTextWeight, valueGap, reverseValueItems, customValueComponent, disclaimerTextColor, paddingY, paddingX, isDisabled, }: FunKeyValueProps): React.JSX.Element;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface FunPaymentMeshTypeProps {
+    isParentLoading: boolean;
     onSoftHide: (p: boolean) => void;
     onFinish: (meshMeta: any) => void;
     backAnimation?: boolean;
@@ -7,4 +8,4 @@ export interface FunPaymentMeshTypeProps {
 /**
  * This component handles payments <> mesh integration
  */
-export declare function FunPaymentMeshType({ onFinish, onSoftHide, backAnimation, }: FunPaymentMeshTypeProps): React.JSX.Element;
+export declare function FunPaymentMeshType({ isParentLoading, onFinish, onSoftHide, backAnimation, }: FunPaymentMeshTypeProps): React.JSX.Element;

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

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

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

@@ -84,6 +84,8 @@ export interface FunkitActiveCheckoutItem {
     id: string;
     /** Time of creation of the active checkout item. For frontend use only. **/
     startTimestampMs: number;
+    /** Whether the checkout draft dollar value is being fetched **/
+    isDrafting: boolean;
     /** The draft dollar value estimate of the checkout. Not the actual quote. **/
     draftDollarValue: null | number;
     /** Whether the checkout quote is being fetched **/
@@ -110,7 +112,9 @@ export declare function FunkitCheckoutProvider({ children }: {
 }): React.JSX.Element;
 interface useFunkitPreCheckoutInternalReturn {
     checkoutItem: null | FunkitActiveCheckoutItem;
+    reDraftSymbol: symbol;
     updateSourceAsset: (newSourceAsset: Address, newSourceAssetSymbol: string, newSourceAssetChainId: string) => void;
+    updateTargetAssetAmount: (newTargetAssetAmount: number, isCheckoutCrFlow: boolean) => void;
     confirmCheckout: (shouldBatchOpBypassInit: boolean) => Promise<Address>;
     getCheckoutDraftDollarValue: () => Promise<void>;
     getCheckoutQuote: (sponsorInitialTransferGasLimit: number, paymentMethod: PaymentMethod, meshMeta: MeshCheckoutQuoteMeta) => Promise<void>;

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

@@ -1,20 +1,36 @@
 /// <reference types="react" />
-interface LoginOptions {
+export interface FunkitTextCustomizationsConfig {
+    selectPaymentMethod: string;
+    brokerageOrExchange: string;
+    debitOrCredit: string;
+    accountBalance: string;
+    transferCrypto: string;
+    selectAccount: string;
+    enterPaymentInfo: string;
+    selectAssetToPay: string;
+}
+export declare const DEFAULT_TEXT_CUSTOMIZATIONS: FunkitTextCustomizationsConfig;
+interface FunkitLoginOptionsConfig {
     web2: boolean;
     web3: boolean;
 }
-export interface FunkitConfig {
+export type FunkitConfig = {
     /** Funkit api key **/
     apiKey: string;
     /** Privy app id **/
     privyAppId: string;
     /** Login options toggle **/
-    enabledLoginOptions: LoginOptions;
+    enabledLoginOptions: FunkitLoginOptionsConfig;
     /** App name **/
     appName: string;
     /** App logo (rendered as 80px x 80px) **/
     appLogoSrc?: string;
+    /** Text Customizations **/
+    textCustomizations?: Partial<FunkitTextCustomizationsConfig>;
+};
+interface FinalFunkitConfigInternal extends FunkitConfig {
+    textCustomizations: FunkitTextCustomizationsConfig;
 }
 export declare const FunkitConfigContext: import("react").Context<FunkitConfig>;
-export declare function useFunkitConfig(): FunkitConfig;
+export declare function useFunkitConfig(): FinalFunkitConfigInternal;
 export {};

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

@@ -15,5 +15,9 @@ interface FunkitConnectChainProviderProps {
 export declare function FunkitConnectChainProvider({ chains, children, initialChain, }: FunkitConnectChainProviderProps): React.JSX.Element;
 export declare const useFunkitConnectChains: () => FunkitConnectChain[];
 export declare const useInitialChainId: () => number | undefined;
-export declare const useFunkitConnectChainsById: () => Record<number, FunkitConnectChain>;
+export declare const useAllPossibleFunkitConnectChains: () => Chain[];
+export declare const useFunkitConnectChainsById: () => {
+    enabledFunkitConnectChainsById: Record<number, FunkitConnectChain>;
+    allPossibleFunkitConnectChainsById: Record<number, FunkitConnectChain>;
+};
 export {};

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

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

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

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

package/dist/components/ProfileDetails/FunWalletProfileViews/FWDeposit.d.ts

@@ -3,7 +3,6 @@ export declare enum DepositTokenSymbol {
     USDC = "USDC",
     ETH = "ETH"
 }
-export declare const MINIMUM_MOONPAY_DEPOSIT_AMOUNT_USD = 30;
 /**
  * Deposit a.k.a Onramp flows
  */