@funkit/connect 3.2.1 → 3.4.0

package/dist/components/Dropdown/ChainDropdown.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TokenTransferSourceChainsAndAssets } from '~/modals/CheckoutModal/TransferToken';
+interface ChainDropdownProps {
+    assets: TokenTransferSourceChainsAndAssets;
+    onChainSelected: (chainId: number) => void;
+}
+declare const ChainDropdown: ({ assets, onChainSelected }: ChainDropdownProps) => React.JSX.Element;
+export default ChainDropdown;

package/dist/components/Dropdown/TokenDropdown.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TokenTransferSourceChainsAndAssets } from '~/modals/CheckoutModal/TransferToken';
+interface TokenDropdownProps {
+    selectedChainId: number;
+    assets: TokenTransferSourceChainsAndAssets;
+    onTokenSelected: (token: string) => void;
+}
+declare const TokenDropdown: ({ assets, selectedChainId, onTokenSelected, }: TokenDropdownProps) => React.JSX.Element;
+export default TokenDropdown;

package/dist/components/FunAlert/FunAlert.d.ts

@@ -1,5 +1,8 @@
 import React, { ReactNode } from 'react';
-export declare function FunAlert({ icon, description, }: {
-    icon: ReactNode;
+interface FunAlertProps {
+    icon?: ReactNode;
     description: string | ReactNode;
-}): React.JSX.Element;
+    type?: 'info' | 'error';
+}
+export declare function FunAlert({ icon, description, type }: FunAlertProps): React.JSX.Element;
+export {};

package/dist/components/FunBottomBar/FunBottomBar.d.ts

@@ -4,5 +4,6 @@ export interface FunBottomBarProps {
     topSection?: React.ReactNode;
     actionButtonProps: FunButtonProps;
     bottomSection?: React.ReactNode;
+    onClose?: () => void;
 }
-export declare const FunBottomBar: ({ topSection, actionButtonProps, bottomSection, }: FunBottomBarProps) => React.JSX.Element;
+export declare const FunBottomBar: ({ topSection, actionButtonProps, bottomSection, onClose, }: FunBottomBarProps) => React.JSX.Element;

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

@@ -2,7 +2,10 @@ import React from 'react';
 import { BoxProps } from '../Box/Box';
 export interface FunIconButtonProps extends Pick<BoxProps, 'as' | 'borderRadius' | 'color' | 'fontSize' | 'fontWeight' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'style'> {
     onClick?: () => void;
+    /** Icon element to be rendered */
     icon: React.ReactNode;
+    /** Adjust the visual center of the {@link icon} wrapper component, eg. icons that are visually weighted off-center can be pushed by a pixel to one direction to make them look centered */
+    iconVisualWeightCenter?: 'left' | 'top' | 'right' | 'bottom';
     /** Total height and width of the clickable area (including borders) */
     size?: BoxProps['height'];
     /** Overrides width if the button is not round */
@@ -20,4 +23,4 @@ export interface FunIconButtonProps extends Pick<BoxProps, 'as' | 'borderRadius'
     /** Defaults to 'quiet' */
     variant?: 'filled' | 'quiet' | 'outlined';
 }
-export declare const FunIconButton: ({ children, onClick, icon, size, width, gap, ariaLabel, color, as, isDisabled, borderRadius, style, variant, ...props }: FunIconButtonProps) => React.JSX.Element;
+export declare const FunIconButton: ({ children, onClick, icon, iconVisualWeightCenter, size, width, gap, ariaLabel, color, as, isDisabled, borderRadius, style, variant, ...props }: FunIconButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+interface FunSignInButtonProps {
+    title: string;
+    titlePrefix: ReactNode;
+    onClick: () => void;
+}
+export declare function FunSignInButton({ title, titlePrefix, onClick, }: FunSignInButtonProps): React.JSX.Element;
+export {};

package/dist/components/FunCheckoutBlocked/FunCheckoutBlocked.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
-export declare const FunCheckoutBlocked: () => React.JSX.Element;
+export type CheckoutBlockedReason = 'geoblock' | 'security';
+interface FunCheckoutBlockedProps {
+    reason: CheckoutBlockedReason;
+}
+export declare const FunCheckoutBlocked: ({ reason }: FunCheckoutBlockedProps) => React.JSX.Element;
+export {};

package/dist/components/FunConnectOptions/FunConnectOptions.d.ts

@@ -7,6 +7,9 @@ export declare enum ConnectStep {
     PENDING_FARCASTER = 4,
     ERROR_WEB3 = 5
 }
-export declare function FunConnectOptions({ onClose }: {
+interface FunConnectOptionsProps {
     onClose: () => void;
-}): React.JSX.Element;
+    walletsOnly?: boolean;
+}
+export declare function FunConnectOptions({ onClose, walletsOnly, }: FunConnectOptionsProps): React.JSX.Element;
+export {};

package/dist/components/FunConnectOptions/FunConnectResultStep.d.ts

@@ -3,11 +3,9 @@ import { WalletConnector } from '../../wallets/useWalletConnectors';
 type ResultType = 'success' | 'error';
 interface FunErrorContentProps {
     onClose: () => void;
-    actionTitle: string;
-    onAction: () => void;
     wallet: WalletConnector | undefined;
     type: ResultType;
     qrCodeUri: string;
 }
-export declare const FunConnectResultStep: ({ onClose, onAction, actionTitle, type, wallet, qrCodeUri, }: FunErrorContentProps) => React.JSX.Element;
+export declare const FunConnectResultStep: ({ onClose, type, wallet, qrCodeUri, }: FunErrorContentProps) => React.JSX.Element;
 export {};

package/dist/components/FunConnectOptions/FunSignInStep.d.ts

@@ -7,7 +7,7 @@ export declare function useEnabledSocialLogins(): SocialLoginOption[];
  * Modal content for a user that is not signed-in yet
  * Shows Web2 and Web3 sign in options
  */
-export declare function FunSignInStep({ onClose, signInStep, changeStep, setSelectedWallet, connectToWallet, setQrCodeUri, emailInput, setEmailInput, onFarcasterSuccessInit, }: {
+export declare function FunSignInStep({ onClose, signInStep, changeStep, setSelectedWallet, connectToWallet, setQrCodeUri, emailInput, setEmailInput, onFarcasterSuccessInit, walletsOnly, }: {
     onClose: () => void;
     signInStep: ConnectStep;
     changeStep: (p: ConnectStep) => void;
@@ -17,4 +17,5 @@ export declare function FunSignInStep({ onClose, signInStep, changeStep, setSele
     emailInput: string;
     setEmailInput: React.Dispatch<React.SetStateAction<string>>;
     onFarcasterSuccessInit: (channelToken: string, connectUri: string) => void;
+    walletsOnly?: boolean;
 }): React.JSX.Element;

package/dist/components/FunConnectOptions/FunWeb3ConnectingStep.d.ts

@@ -4,5 +4,5 @@ interface Props {
     selectedWallet: WalletConnector | undefined;
     qrCodeUri: string;
 }
-export declare const FunWeb3ConnectingStep: ({ selectedWallet, qrCodeUri }: Props) => React.JSX.Element;
+export declare const FunWeb3ConnectingStep: ({ selectedWallet, qrCodeUri }: Props) => React.JSX.Element | null;
 export {};

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

@@ -1,2 +1,4 @@
 export declare const backgroundRing: string;
 export declare const counterRing: string;
+export declare const pendingBackgroundRing: string;
+export declare const pendingRing: string;

package/dist/components/FunCountdown/FunCountdown.d.ts

@@ -9,5 +9,6 @@ export interface FunCountdownProps {
     onBeforeCountdownEnds?: () => void;
     onCountdownLastSecond?: () => void;
     children?: ReactNode | ((remainingSeconds: number) => ReactNode);
+    isHidden?: boolean;
 }
-export declare const FunCountdown: ({ countdownSeconds, initialRemainingSeconds, counterSize, onCountdownEnded, onBeforeCountdownEnds, onBeforeCountdownEndsSeconds, onCountdownLastSecond, strokeWidth, children, }: FunCountdownProps) => React.JSX.Element;
+export declare const FunCountdown: ({ countdownSeconds, initialRemainingSeconds, counterSize, onCountdownEnded, onBeforeCountdownEnds, onBeforeCountdownEndsSeconds, onCountdownLastSecond, strokeWidth, isHidden, children, }: FunCountdownProps) => React.JSX.Element | null;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BoxProps } from '../Box/Box';
 interface FunDividerProps {
-    marginTop?: BoxProps['margin'];
-    marginBottom?: BoxProps['margin'];
+    marginTop?: BoxProps['marginTop'];
+    marginBottom?: BoxProps['marginBottom'];
     borderColor?: BoxProps['borderColor'];
     transparent?: boolean;
     label?: string;

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

@@ -11,7 +11,7 @@ interface FunNotificationProps {
     containerProps?: React.ComponentProps<typeof Box>;
     isVisible?: boolean;
 }
-type FunNotificationType = 'default' | 'error' | 'warning' | 'hint';
+export type FunNotificationType = 'default' | 'error' | 'warning' | 'hint';
 /**
  * A notification/message component with height resizing animation.
  * Control visibility by enabling/disabling `isVisible` prop instead of doing an outer conditional rendering.

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

@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react';
-import { PaymentMethod, PaymentMethodInfo } from '../../consts/payment';
+import { PaymentMethod, PaymentMethodInfo } from '../../domains/paymentMethods';
 import { SelectMethodPayloadData } from '../../modals/CheckoutModal/SelectPaymentMethod';
-export declare function ConnectWalletItem({ checkoutId, isClickable, }: {
-    checkoutId: string;
+import { FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
+import { FunkitTextCustomizationsConfig, FunkitUiCustomRecipientConfig } from '../../providers/FunkitConfigContext';
+export declare function ConnectWalletItem({ isClickable, }: {
     isClickable?: boolean;
 }): React.JSX.Element;
-export declare function AddPaymentMethodItem({ paymentMethod, checkoutId, isClickable, isActive, onClick, isSource, dynamicLimit, customValueIcon, }: {
+export declare function AddPaymentMethodItem({ paymentMethod, isClickable, isActive, onClick, isSource, dynamicLimit, customValueIcon, }: {
     paymentMethod: PaymentMethod;
-    checkoutId: string;
     isActive: boolean;
     isClickable?: boolean;
     onClick?: () => void;
@@ -15,17 +15,29 @@ export declare function AddPaymentMethodItem({ paymentMethod, checkoutId, isClic
     dynamicLimit?: string;
     customValueIcon?: ReactNode;
 }): React.JSX.Element;
-export declare function ExistingPaymentMethodItem({ paymentMethodInfo, }: {
+interface PaymentMethodSummaryProps {
     paymentMethodInfo: PaymentMethodInfo;
-}): React.JSX.Element;
+    walletAddress: string | undefined;
+    customRecipient: string | undefined;
+    isLoading: boolean;
+    estimatedTime: number;
+    customizationConfig?: FunkitUiCustomRecipientConfig;
+}
+export declare function PaymentMethodSummary({ paymentMethodInfo, walletAddress, customRecipient, estimatedTime, isLoading, customizationConfig, }: PaymentMethodSummaryProps): React.JSX.Element;
+interface PaymentAmountSummaryProps {
+    isLoading: boolean;
+    targetChainId: string;
+    checkoutItem: FunkitActiveCheckoutItem | null;
+    textCustomizations: FunkitTextCustomizationsConfig['confirmationScreen'];
+}
+export declare function PaymentAmountSummary({ isLoading, targetChainId, checkoutItem, textCustomizations, }: PaymentAmountSummaryProps): React.JSX.Element;
 /**
  * Handle selection and adding of payment methods
  */
-export declare function FunPaymentMethods({ checkoutId, onSelect, isDisabled, depositAmount, isLoadingGeoCheck, onCloseWrapper, }: {
-    checkoutId: string;
+export declare function FunPaymentMethods({ onSelect, isDisabled, isLoadingGeoCheck, onCloseWrapper, }: {
     onSelect: (selectMethodData: SelectMethodPayloadData) => void;
     isDisabled?: boolean;
-    depositAmount: number;
     isLoadingGeoCheck: boolean;
     onCloseWrapper: () => void;
 }): React.JSX.Element;
+export {};

package/dist/components/FunTransactionSummary/FunTxSummaryComponents.d.ts

@@ -1,9 +1,8 @@
 import './FunTxSummaryComponents.css';
-import React, { ReactNode } from 'react';
-export declare function FunTxSummaryBox({ children }: {
-    children: any;
-}): React.JSX.Element;
-export declare function FunTxSummaryLineItem({ children, ...otherProps }: any): React.JSX.Element;
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { BoxProps } from '../Box/Box';
+export declare function FunTxSummaryBox({ children }: PropsWithChildren): React.JSX.Element;
+export declare function FunTxSummaryLineItem({ children, ...otherProps }: BoxProps): React.JSX.Element;
 export declare function FunTxSummaryLineItemCollapsibleTrigger({ children, isDisabled, onClick, }: {
     children: ReactNode;
     isDisabled: boolean;

package/dist/components/FunTransactionSummary/PaymentFeesSummary.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
+export declare function PaymentFeesSummary({ isLoading, checkoutItem, }: {
+    isLoading: boolean;
+    checkoutItem: FunkitActiveCheckoutItem | null;
+}): React.JSX.Element;

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Copy icon that looks like 2 sheets of paper on top of each other
+ */
+export declare const CopyDoublePaperSheetIcon: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Copy icon that looks like 2 rounded squares on top of each other
+ */
+export declare const CopyDoubleRoundedSquareIcon: () => React.JSX.Element;

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,13 @@
 import React from 'react';
-export declare const GoogleIcon: () => React.JSX.Element;
-export declare const TwitterIcon: () => React.JSX.Element;
-export declare const AppleIcon: () => React.JSX.Element;
-export declare const FarcasterIcon: () => React.JSX.Element;
+export declare const GoogleIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;
+export declare const TwitterIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;
+export declare const AppleIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;
+export declare const FarcasterIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/QRCode/QRCode.d.ts

@@ -1,5 +1,6 @@
 import QRCodeUtil from 'qrcode';
 import React from 'react';
+import { BoxProps } from '../Box/Box';
 type Props = {
     ecl?: QRCodeUtil.QRCodeErrorCorrectionLevel;
     logoBackground?: string;
@@ -8,6 +9,12 @@ type Props = {
     logoSize?: number;
     size?: number;
     uri: string;
+    outsidePadding?: BoxProps['padding'];
+    enableCornerMarkersRadius?: boolean;
+    enableOuterBorder?: boolean;
 };
-export declare function QRCode({ ecl, logoBackground, logoMargin, logoSize, logoUrl, size: sizeProp, uri, }: Props): React.JSX.Element;
+/**
+ * CAUTION: The size of the rendered QR code needs to be tested for the longest encoded {@link uri} string to make sure it's still readable/scannable.
+ */
+export declare function QRCode({ ecl, logoBackground, logoMargin, logoSize, logoUrl, size: sizeProp, uri, outsidePadding, enableCornerMarkersRadius, enableOuterBorder, }: Props): React.JSX.Element;
 export {};

package/dist/consts/assets.d.ts

@@ -1,3 +1,4 @@
 export declare const ASSET_LOGO_SRCS: {
     [x: string]: string;
 };
+export declare const FALLBACK_ASSET = "https://sdk-cdn.fun.xyz/images/dollar_circle.png";

package/dist/consts/funkit.d.ts

@@ -1,6 +1,10 @@
 import { CheckoutState } from '@funkit/api-base';
 import { OAuthProviderType } from '@privy-io/js-sdk-core';
 import { Address } from 'viem';
+/**
+ * NATIVE_TOKEN is a special address in Fun to represent different native currency tokens on different chains
+ * e.g. on Base it is ETH, but on Polygon it is MATIC/POL. It is not one specific real token address.
+ **/
 export declare const NATIVE_TOKEN = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
 export declare const FUNKIT_CONNECTOR_ID = "funkitConnector";
 export declare const FUNKIT_CONNECT_WALLET_ID = "funkitConnectWallet";
@@ -27,7 +31,7 @@ export declare enum FunkitSocialLoginMethod {
 export type SocialLoginOption = {
     funkitKey: FunkitSocialLoginMethod;
     provider: OAuthProviderType | 'farcaster';
-    icon: React.ReactNode;
+    getIcon: (size?: number) => React.ReactNode;
     name: string;
 };
 export type FunkitLoginType = 'web2' | 'web3';