@funkit/connect 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @funkit/connect
 
+## 1.0.10
+
+### Patch Changes
+
+- 17a1f0d: feat: checkout pre and post intermediate messages
+  fix: max out inner widths and height
+- fd16517: feat: moonpay additional conditional conversion text
+- 20678a1: refactor: remove tilde on fees for eoa checkouts
+- 82bbc1e: fix: history listener does not start/stop properly in some cases
+
+## 1.0.9
+
+### Patch Changes
+
+- 4e59a88: fix: default payment method
+
 ## 1.0.8
 
 ### Patch Changes

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Address } from 'viem';
 import { PaymentFlow } from '../../consts/payment';
-export declare function FunPaymentMoonpayType({ paymentFlow, paymentAddress, depositToken, depositTokenChainId, depositTokenAmount, onBackToHome, backAnimation, redirectToCheckoutHistory, }: {
+export declare function FunPaymentMoonpayType({ paymentFlow, paymentAddress, depositToken, depositTokenChainId, depositTokenAmount, onBackToHome, backAnimation, redirectToCheckoutHistory, finalConvertedAssetName, }: {
     paymentFlow: PaymentFlow;
     paymentAddress: Address;
     depositToken: string;
@@ -10,4 +10,5 @@ export declare function FunPaymentMoonpayType({ paymentFlow, paymentAddress, dep
     onBackToHome: () => void;
     backAnimation?: boolean;
     redirectToCheckoutHistory?: (depositAddress: string) => void;
+    finalConvertedAssetName: string;
 }): React.JSX.Element;

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

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

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

@@ -8,7 +8,7 @@ export type FeesItem = null | {
     platformFeesTokenAmount?: string | number | null;
     platformFeesTokenSymbol?: string | null;
 };
-export declare function FunTransactionSummary({ estFees, estTime, isLoading, hasTotal, total, hasPaymentToken, symbol, paymentTokenString, suffixComponent, errorMessage, isEstimatedNetworkFees, }: {
+export declare function FunTransactionSummary({ estFees, estTime, isLoading, hasTotal, total, hasPaymentToken, symbol, paymentTokenString, suffixComponent, errorMessage, }: {
     estFees: FeesItem;
     estTime: string | number | null;
     isLoading?: boolean;
@@ -19,5 +19,4 @@ export declare function FunTransactionSummary({ estFees, estTime, isLoading, has
     total?: string | number | null;
     suffixComponent?: ReactNode;
     errorMessage?: string;
-    isEstimatedNetworkFees: boolean;
 }): React.JSX.Element;

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

@@ -1,3 +1,8 @@
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
 import { CheckoutCoreQuoteResponse, CheckoutHistoryItem } from '@funkit/core';
 import React, { ReactNode } from 'react';
 import { Abi, Address } from 'viem';
@@ -127,7 +132,7 @@ interface useFunkitPreCheckoutInternalReturn {
     updateSourceAsset: (newSourceAsset: Address, newSourceAssetSymbol: string, newSourceAssetChainId: string) => void;
     updateTargetAssetAmount: (newTargetAssetAmount: number, isCheckoutCrFlow: boolean) => void;
     updateSelectedPaymentMethodInfo: (newPaymentMethodInfo: PaymentMethodInfo) => void;
-    confirmCheckout: (shouldBatchOpBypassInit: boolean) => Promise<Address>;
+    confirmCheckout: (shouldBatchOpBypassInit: boolean, stepMessageSetter: (m: string) => void) => Promise<Address>;
     getCheckoutDraftDollarValue: () => Promise<void>;
     clearCheckoutQuoteMessages: () => void;
     getCheckoutQuote: (sponsorInitialTransferGasLimit: number, newPaymentMethodInfo: PaymentMethodInfo) => Promise<boolean>;
@@ -151,8 +156,8 @@ export declare const useFunkitAllPostCheckoutsInternal: () => {
     checkoutHistoryStateMap: CheckoutHistoryStateMap;
     isCheckoutHistoryInited: boolean;
     isRefreshingCheckoutHistory: boolean;
-    startCheckoutHistoryListener: (recipientAddr?: Address | undefined) => void;
-    stopCheckoutHistoryListener: () => void;
+    startCheckoutHistoryListener: (recipientAddr?: Address | undefined) => NodeJS.Timeout;
+    stopCheckoutHistoryListener: (cancelIntervalId?: NodeJS.Timeout) => void;
 };
 /**
  * External hook for user to kickstart a checkout in their app

package/dist/consts/checkout.d.ts

@@ -0,0 +1,18 @@
+export declare enum CheckoutInitStepMessage {
+    CONFIRMING = 0,
+    PREPARING_DATA = 1
+}
+export declare const CHECKOUT_STEP_MESSAGE_GENERATOR: {
+    1: () => string;
+    0: () => string;
+};
+export declare enum Web3AccountBalanceMessage {
+    SIGN_TX = 0,
+    SWITCH_CHAIN = 1,
+    APPROVE_TRANSFER = 2
+}
+export declare const WEB3_ACCOUNT_BALANCE_MESSAGE_GENERATOR: {
+    0: () => string;
+    1: (newChainName: string) => string;
+    2: (tokenSymbol: string) => string;
+};

package/dist/hooks/useFunListeners.d.ts

@@ -1,6 +1,7 @@
 import { Address } from 'viem';
 /**
  * Handles the starting and stopping of checkout history listeners based on the calling component's mount/unmount status
+ * Each hook will store and track its own intervalId
  */
 export declare function useCheckoutHistoryListener(activate?: boolean, singleDepositAddr?: Address | undefined): void;
 /**

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { ConnectButton } from './components/ConnectButton/ConnectButton';
 export { useFunkitCheckout } from './components/FunkitProvider/FunkitCheckoutContext';
+export type { FunkitConfig } from './components/FunkitProvider/FunkitConfigContext';
 export { FunkitProvider } from './components/FunkitProvider/FunkitProvider';
 export { useActiveTheme } from './components/FunkitProvider/FunkitThemeProvider';
 export { WalletButton } from './components/WalletButton/WalletButton';

package/dist/index.js

@@ -160,7 +160,8 @@ var TO_PROGRESS_CHECKOUT_STATES = [
   CheckoutState.TO_UNFUNDED,
   CheckoutState.TO_FUNDED,
   CheckoutState.TO_POOLED,
-  CheckoutState.TO_READY
+  CheckoutState.TO_READY,
+  CheckoutState.PENDING_RECEIVAL
 ];
 var IN_PROGRESS_CHECKOUT_STATES = [
   ...TO_PROGRESS_CHECKOUT_STATES,
@@ -1537,7 +1538,7 @@ var animateContentInClass = "stgjxl2";
 var animateContentOutClass = "stgjxl3";
 
 // src/hooks/useFunListeners.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect8, useRef as useRef4 } from "react";
 
 // src/components/FunkitProvider/FunkitCheckoutContext.tsx
 import {
@@ -1576,6 +1577,17 @@ import {
 } from "viem";
 import { useConfig as useConfig2 } from "wagmi";
 
+// src/consts/checkout.ts
+var CHECKOUT_STEP_MESSAGE_GENERATOR = {
+  [1 /* PREPARING_DATA */]: () => "Preparing order data...",
+  [0 /* CONFIRMING */]: () => "Confirming your order..."
+};
+var WEB3_ACCOUNT_BALANCE_MESSAGE_GENERATOR = {
+  [0 /* SIGN_TX */]: () => `Sign the message request in your wallet.`,
+  [1 /* SWITCH_CHAIN */]: (newChainName) => `Accept the network switch request to ${newChainName} in your wallet.`,
+  [2 /* APPROVE_TRANSFER */]: (tokenSymbol) => `Accept the ${tokenSymbol} transfer request in your wallet.`
+};
+
 // src/consts/quote.ts
 var PENDING_QUOTE_MESSAGE_GENERATOR = {
   [0 /* PREPARING */]: () => "Preparing your quote...",
@@ -1592,9 +1604,13 @@ var QUOTE_API_ERROR_STRING_INFO = {
     check: "try to increase the amount",
     display: "Checkout amount is too low. Please try again with a higher amount."
   },
-  [2 /* INSUFFICIENT_AMOUNT_FOR_BRDIGE */]: {
+  [2 /* INSUFFICIENT_AMOUNT_FOR_BRDIGE_1 */]: {
     check: "target token must be at least",
     display: "Checkout amount is too low. Please try again with a higher amount."
+  },
+  [3 /* INSUFFICIENT_AMOUNT_FOR_BRDIGE_2 */]: {
+    check: "Bridge min amount not met",
+    display: "Checkout amount is too low. Please try again with a higher amount."
   }
 };
 function generateQuoteApiErrorForDisplay(errorMessage = "") {
@@ -2119,7 +2135,7 @@ var FunkitCheckoutContext = createContext9({
   isCheckoutHistoryInited: false,
   isRefreshingCheckoutHistory: true,
   reDraftSymbol: Symbol(),
-  _startCheckoutHistoryListener: () => void 0,
+  _startCheckoutHistoryListener: () => setTimeout(() => void 0, 0),
   _stopCheckoutHistoryListener: () => void 0,
   _initNewCheckout: () => "",
   _updateSelectedSourceAsset: () => void 0,
@@ -2228,15 +2244,23 @@ function FunkitCheckoutProvider({ children }) {
       setHistoryDepositAddress(singleDepositAddr);
       clearInterval(intervalRef.current);
       triggerRefreshSymbol();
-      intervalRef.current = setInterval(() => {
+      const newIntervalId = setInterval(() => {
         triggerRefreshSymbol();
       }, CHECKOUT_HISTORY_REFETCH_INTERVAL_MS);
+      intervalRef.current = newIntervalId;
+      return newIntervalId;
     },
     [triggerRefreshSymbol]
   );
-  const _stopCheckoutHistoryListener = useCallback6(() => {
-    clearInterval(intervalRef.current);
-  }, []);
+  const _stopCheckoutHistoryListener = useCallback6(
+    (cancelIntervalId) => {
+      clearInterval(cancelIntervalId);
+      if (cancelIntervalId === intervalRef.current) {
+        intervalRef.current = void 0;
+      }
+    },
+    []
+  );
   const _initNewCheckout = useCallback6(
     (initSettings, hasSufficientBalance, sourceSymbol) => {
       const newCheckoutId = uuid();
@@ -2642,11 +2666,14 @@ function FunkitCheckoutProvider({ children }) {
     ]
   );
   const _generateSignedBatchOperation = useCallback6(
-    async (actionsParams, assetChainId, bypassWalletInit) => {
+    async (actionsParams, assetChainId, bypassWalletInit, stepMessageSetter) => {
       if (!funWallet || !funWalletAuth) {
         throw new Error("Funwallet or auth not defined");
       }
       try {
+        stepMessageSetter(
+          CHECKOUT_STEP_MESSAGE_GENERATOR[1 /* PREPARING_DATA */]()
+        );
         let txParamsList = [];
         actionsParams.forEach((actionParam) => {
           const tokenInterface = new ContractInterface(actionParam.contractAbi);
@@ -2697,6 +2724,11 @@ function FunkitCheckoutProvider({ children }) {
           bypassWalletInit
         });
         const userId = await (funWalletAuth == null ? void 0 : funWalletAuth.getUserId());
+        if (isWeb3Login) {
+          stepMessageSetter(
+            WEB3_ACCOUNT_BALANCE_MESSAGE_GENERATOR[0 /* SIGN_TX */]()
+          );
+        }
         const batchOperation = await funWallet.createBatchOperation(
           funWalletAuth,
           userId,
@@ -2734,7 +2766,7 @@ function FunkitCheckoutProvider({ children }) {
     [_getAndValidateCheckoutItemByCheckoutId]
   );
   const _confirmCheckout = useCallback6(
-    async (checkoutId, shouldbatchOpBypassInit) => {
+    async (checkoutId, shouldbatchOpBypassInit, stepMessageSetter) => {
       var _a, _b, _c;
       if (!(funkitConfig == null ? void 0 : funkitConfig.apiKey)) {
         throw new Error(
@@ -2759,10 +2791,14 @@ function FunkitCheckoutProvider({ children }) {
         const signedBatchOperation = await _generateSignedBatchOperation(
           checkoutItem.initSettings.config.actionsParams,
           checkoutItem.initSettings.config.targetChain,
-          shouldbatchOpBypassInit
+          shouldbatchOpBypassInit,
+          stepMessageSetter
         );
         batchUserOp = signedBatchOperation.userOp;
       }
+      stepMessageSetter(
+        CHECKOUT_STEP_MESSAGE_GENERATOR[0 /* CONFIRMING */]()
+      );
       const depositAddress = await postApiInitializeCheckout({
         userOp: batchUserOp,
         quoteId: checkoutItem.latestQuote.baseQuote.quoteId,
@@ -2857,7 +2893,11 @@ var useFunkitPreCheckoutInternal = (checkoutId) => {
       isCheckoutCrFlow
     ),
     updateSelectedPaymentMethodInfo: (newPaymentMethodInfo) => _updateSelectedPaymentMethodInfo(checkoutId, newPaymentMethodInfo),
-    confirmCheckout: async (shouldBatchOpBypassInit) => await _confirmCheckout(checkoutId, shouldBatchOpBypassInit),
+    confirmCheckout: async (shouldBatchOpBypassInit, stepMessageSetter) => await _confirmCheckout(
+      checkoutId,
+      shouldBatchOpBypassInit,
+      stepMessageSetter
+    ),
     clearCheckoutQuoteMessages: () => _clearCheckoutQuoteMessages(checkoutId),
     getCheckoutQuote: async (sponsorInitialTransferGasLimit, newPaymentMethodInfo) => await _getCheckoutQuote(
       checkoutId,
@@ -3035,12 +3075,14 @@ var useFunkitCheckout = (props) => {
 
 // src/hooks/useFunListeners.ts
 function useCheckoutHistoryListener(activate = true, singleDepositAddr) {
+  const activeIntervalRef = useRef4();
   const { startCheckoutHistoryListener, stopCheckoutHistoryListener } = useFunkitAllPostCheckoutsInternal();
   useEffect8(() => {
     if (activate) {
-      startCheckoutHistoryListener(singleDepositAddr);
+      const createdIntervalId = startCheckoutHistoryListener(singleDepositAddr);
+      activeIntervalRef.current = createdIntervalId;
     }
-    return () => stopCheckoutHistoryListener();
+    return () => stopCheckoutHistoryListener(activeIntervalRef.current);
   }, [activate]);
 }
 function useWalletAssetsListener(activate = true) {
@@ -3655,7 +3697,7 @@ import React89, { useCallback as useCallback19, useMemo as useMemo25, useState a
 import { useAccount as useAccount5 } from "wagmi";
 
 // src/hooks/useMesh.tsx
-import React43, { useCallback as useCallback8, useMemo as useMemo11, useRef as useRef4, useState as useState12 } from "react";
+import React43, { useCallback as useCallback8, useMemo as useMemo11, useRef as useRef5, useState as useState12 } from "react";
 import { useAccount as useAccount3 } from "wagmi";
 
 // src/components/FunDot/FunDot.tsx
@@ -4316,7 +4358,7 @@ var useMeshExchanges = ({
   };
 };
 function useEqualMeshNetworkSupportedTokens(array, clearCache) {
-  const previousArray = useRef4(array);
+  const previousArray = useRef5(array);
   if (!clearCache && array.length === previousArray.current.length) {
     return previousArray.current;
   }
@@ -4339,7 +4381,7 @@ var useMeshActiveNetworkInfo = (exchange) => {
   const { chain: activeChain } = useAccount3();
   const [meshNetworkId, setMeshNetworkId] = useState12(null);
   const [meshSupportedTokens, setMeshSupportedTokens] = useState12([]);
-  const networkandExchange = useRef4(`${exchange}${meshNetworkId}`);
+  const networkandExchange = useRef5(`${exchange}${meshNetworkId}`);
   const meshSupportedTokensEqualLength = useEqualMeshNetworkSupportedTokens(
     meshSupportedTokens,
     networkandExchange.current !== `${exchange}${meshNetworkId}`
@@ -5178,7 +5220,7 @@ function FunPaymentMethods({
   const { isCheckoutCrFlow } = useCheckoutType(checkoutItem);
   useEffect9(() => {
     if (paymentFlow === 1 /* CHECKOUT */ && isCheckoutCrFlow) {
-      setSelectedOption(null);
+      setSelectedOption(paymentsConfig.defaultPaymentMethod || null);
     }
   }, [reDraftSymbol]);
   const hasSufficientBalance = useMemo13(() => {
@@ -5506,8 +5548,7 @@ function LineItem({ children, ...otherProps }) {
 }
 function FeesLineItem({
   feesItem,
-  isLoading,
-  isEstimatedNetworkFees
+  isLoading
 }) {
   const [isExpanded, setIsExpanded] = useState15(false);
   const toggle = () => setIsExpanded(!isExpanded);
@@ -5533,7 +5574,7 @@ function FeesLineItem({
     weight: "medium",
     color: "modalText",
     size: "14"
-  }, isEstimatedNetworkFees ? "~" : "", formatCurrencyAndStringify(
+  }, formatCurrencyAndStringify(
     parseFloat(feesItem.totalUsd.toString())
   )), isExpanded ? /* @__PURE__ */ React58.createElement(FunUpArrow, null) : /* @__PURE__ */ React58.createElement(FunDownArrow, null)) : null), isExpanded ? /* @__PURE__ */ React58.createElement(Fragment, null, /* @__PURE__ */ React58.createElement(LineItem, null, /* @__PURE__ */ React58.createElement(Text, {
     weight: "medium",
@@ -5560,7 +5601,7 @@ function FeesLineItem({
     weight: "medium",
     color: "modalText",
     size: "14"
-  }, isEstimatedNetworkFees ? "~" : "", formatCurrencyAndStringify(
+  }, formatCurrencyAndStringify(
     parseFloat(feesItem.transactionFeesUsd.toString())
   ))) : null), /* @__PURE__ */ React58.createElement(LineItem, null, /* @__PURE__ */ React58.createElement(Text, {
     weight: "medium",
@@ -5608,8 +5649,7 @@ function FunTransactionSummary({
   symbol = "",
   paymentTokenString,
   suffixComponent,
-  errorMessage = "",
-  isEstimatedNetworkFees = false
+  errorMessage = ""
 }) {
   return /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(Box, {
     paddingBottom: "8"
@@ -5664,8 +5704,7 @@ function FunTransactionSummary({
     size: "14"
   }, paymentTokenString))), /* @__PURE__ */ React58.createElement(FunTxSummaryDivider, null)) : null, /* @__PURE__ */ React58.createElement(FeesLineItem, {
     feesItem: estFees,
-    isLoading,
-    isEstimatedNetworkFees
+    isLoading
   }), /* @__PURE__ */ React58.createElement(FunTxSummaryDivider, null), /* @__PURE__ */ React58.createElement(LineItem, null, /* @__PURE__ */ React58.createElement(Text, {
     weight: "medium",
     color: "modalTextDim",
@@ -5695,7 +5734,7 @@ function FunTransactionSummary({
     weight: "medium",
     color: "modalText",
     size: "14"
-  }, isEstimatedNetworkFees ? "~" : "", formatCurrencyAndStringify(parseFloat(total == null ? void 0 : total.toString()))) : null)) : null, suffixComponent));
+  }, formatCurrencyAndStringify(parseFloat(total == null ? void 0 : total.toString()))) : null)) : null, suffixComponent));
 }
 
 // src/components/FunCheckoutModal/FunCheckoutPrimaryInfo.tsx
@@ -6224,7 +6263,7 @@ import React67, {
   Fragment as Fragment2,
   useCallback as useCallback12,
   useEffect as useEffect12,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 var FunTwoFaInput = ({
   value,
@@ -6234,7 +6273,7 @@ var FunTwoFaInput = ({
   errorMessage
 }) => {
   const inputLength = 6;
-  const inputRefs = useRef5([]);
+  const inputRefs = useRef6([]);
   inputRefs.current = Array(inputLength).fill(null);
   const [focusIndex, setFocusIndex] = React67.useState(0);
   const handleBackspace = useCallback12(
@@ -6547,7 +6586,7 @@ import React75 from "react";
 import React71, { useCallback as useCallback14, useMemo as useMemo17, useState as useState19 } from "react";
 
 // src/components/FunSelect/FunSelect.tsx
-import React69, { useMemo as useMemo16, useRef as useRef6 } from "react";
+import React69, { useMemo as useMemo16, useRef as useRef7 } from "react";
 import { useState as useState18 } from "react";
 
 // src/utils/indexBy.ts
@@ -6762,8 +6801,8 @@ function FunPaymentMeshType({
 
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 import { getMoonpayUrlSignature } from "@funkit/core";
-import React72, { useEffect as useEffect14, useMemo as useMemo18, useState as useState20 } from "react";
-var MoonPayBuyWidget = (props) => {
+import React72, { memo, useEffect as useEffect14, useMemo as useMemo18, useState as useState20 } from "react";
+var MoonPayBuyWidget = memo(function Widget(props) {
   const [MoonPayBuyWidgetInner, setMoonPayBuyWidgetInner] = React72.useState(null);
   useEffect14(() => {
     const loadMoonPayBuyWidgetInner = async () => {
@@ -6781,7 +6820,7 @@ var MoonPayBuyWidget = (props) => {
   return /* @__PURE__ */ React72.createElement(MoonPayBuyWidgetInner, {
     ...props
   }, props.children);
-};
+});
 function FunPaymentMoonpayType({
   paymentFlow,
   paymentAddress,
@@ -6790,7 +6829,8 @@ function FunPaymentMoonpayType({
   depositTokenAmount,
   onBackToHome,
   backAnimation = false,
-  redirectToCheckoutHistory
+  redirectToCheckoutHistory,
+  finalConvertedAssetName
 }) {
   const [isSupportedRegion, setIsSupportedRegion] = useState20(true);
   const [isBackToHomeDisabled, setIsBackToHomeDisabled] = useState20(true);
@@ -6806,8 +6846,14 @@ function FunPaymentMoonpayType({
     return signature || "";
   };
   const description = useMemo18(() => {
-    return `${funkitConfig == null ? void 0 : funkitConfig.appName} uses Moonpay to on-ramp ${depositToken} via credit & debit cards.`;
-  }, [funkitConfig == null ? void 0 : funkitConfig.appName, depositToken]);
+    const normalizedConvertedAssetName = finalConvertedAssetName.toLowerCase();
+    if (normalizedConvertedAssetName.startsWith("$")) {
+      return normalizedConvertedAssetName.slice(1);
+    }
+    const isSame = normalizedConvertedAssetName === depositToken.toLowerCase();
+    const conversionText = finalConvertedAssetName && !isSame ? ` that is then automatically converted to ${finalConvertedAssetName}.` : ".";
+    return `${funkitConfig == null ? void 0 : funkitConfig.appName} uses Moonpay to on-ramp ${depositToken} via credit & debit cards${conversionText}`;
+  }, [finalConvertedAssetName, funkitConfig == null ? void 0 : funkitConfig.appName, depositToken]);
   return /* @__PURE__ */ React72.createElement(Box, {
     className: backAnimation ? animateContentOutClass : animateContentInClass
   }, /* @__PURE__ */ React72.createElement(Box, {
@@ -7048,7 +7094,8 @@ function FunPaymentSetup({
   tokenAmountUsd,
   backAnimation = false,
   redirectToCheckoutHistory,
-  isParentLoading = false
+  isParentLoading = false,
+  finalConvertedAssetName = ""
 }) {
   const { optionsMap } = useMeshExchanges({ fullInfo: false });
   return paymentMethod === "brokerage" /* BROKERAGE */ ? /* @__PURE__ */ React75.createElement(FunPaymentMeshType, {
@@ -7080,7 +7127,8 @@ function FunPaymentSetup({
     depositTokenAmount: tokenAmountUsd,
     onBackToHome,
     backAnimation,
-    redirectToCheckoutHistory
+    redirectToCheckoutHistory,
+    finalConvertedAssetName
   }) : /* @__PURE__ */ React75.createElement(Text, {
     color: "modalTextSecondary"
   }, "Unsupported payment method");
@@ -7864,7 +7912,8 @@ function FunCheckoutModal({
       (_l = checkoutItem == null ? void 0 : checkoutItem.latestQuote) == null ? void 0 : _l.baseQuote.estTotalFromAmount
     ) || 0,
     redirectToCheckoutHistory,
-    isParentLoading: !!(checkoutItem == null ? void 0 : checkoutItem.isDrafting)
+    isParentLoading: !!(checkoutItem == null ? void 0 : checkoutItem.isDrafting),
+    finalConvertedAssetName: checkoutItem == null ? void 0 : checkoutItem.initSettings.config.checkoutItemTitle
   })) : checkoutStep === "select_asset" /* SELECT_ASSET */ ? /* @__PURE__ */ React80.createElement(FunCheckoutSelectAssetStep, {
     checkoutId,
     checkoutStep,
@@ -7956,7 +8005,9 @@ function CheckoutPrimaryInfoSnapshot({
     keyTextColor: "modalText",
     keyTextSize: "18",
     keyTextWeight: "bold",
-    valueText: isLoading ? "" : formatCurrencyAndStringify((checkoutItem == null ? void 0 : checkoutItem.draftDollarValue) || 0),
+    valueText: isLoading ? "" : `${formatCurrencyAndStringify(
+      (checkoutItem == null ? void 0 : checkoutItem.draftDollarValue) || 0
+    )} USD`,
     valueIcon: isLoading ? /* @__PURE__ */ React81.createElement(SpinnerIcon, {
       height: 16,
       width: 16
@@ -8080,7 +8131,7 @@ function FunCheckoutConfirmationStep({
   onFinish,
   animateOut
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
   const { writeContractAsync } = useWriteContract();
   const { sendTransactionAsync } = useSendTransaction();
   const { checkoutItem, updateSelectedPaymentMethodInfo, confirmCheckout } = useFunkitPreCheckoutInternal(checkoutId);
@@ -8097,12 +8148,14 @@ function FunCheckoutConfirmationStep({
     amountUsd: ((checkoutItem == null ? void 0 : checkoutItem.draftDollarValue) || 0).toString()
   });
   const [isConfirming, setIsConfirming] = useState24(false);
+  const [checkoutStepMessage, setCheckoutStepMessage] = useState24("");
   const [confirmationError, setConfirmationError] = useState24("");
   const hasCheckoutConfirmationError = useMemo23(
     () => confirmationError !== "",
     [confirmationError]
   );
   const [isPostCheckoutLoading, setIsPostCheckoutLoading] = useState24(false);
+  const [postCheckoutStepMessage, setPostCheckoutStepMessage] = useState24("");
   const [postCheckoutError, setPostCheckoutError] = useState24("");
   const hasPostCheckoutError = useMemo23(
     () => postCheckoutError !== "",
@@ -8203,8 +8256,15 @@ function FunCheckoutConfirmationStep({
           sourceAssetChainId,
           currentChain: chain
         });
+        const chainName = FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO6[sourceAssetChainId].chainInfo.name;
+        setPostCheckoutStepMessage(
+          WEB3_ACCOUNT_BALANCE_MESSAGE_GENERATOR[1 /* SWITCH_CHAIN */](chainName)
+        );
         await (switchChainAsync == null ? void 0 : switchChainAsync({ chainId: parseInt(sourceAssetChainId) }));
       }
+      setPostCheckoutStepMessage(
+        WEB3_ACCOUNT_BALANCE_MESSAGE_GENERATOR[2 /* APPROVE_TRANSFER */]((checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo.symbol) || "")
+      );
       if (((_c2 = checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo) == null ? void 0 : _c2.address) === NATIVE_TOKEN) {
         const hash = await sendTransactionAsync({
           chainId: parseInt(sourceAssetChainId),
@@ -8222,11 +8282,13 @@ function FunCheckoutConfirmationStep({
         });
         logger.log("handleWeb3AccountBalancePostCheckout_hash", { hash });
       }
+      setPostCheckoutStepMessage("");
     },
     [
       (_m = checkoutItem == null ? void 0 : checkoutItem.latestQuote) == null ? void 0 : _m.baseQuote.estTotalFromAmountBaseUnit,
       checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo.chainId,
       (_n = checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo) == null ? void 0 : _n.address,
+      checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo.symbol,
       chain,
       switchChainAsync,
       sendTransactionAsync,
@@ -8288,8 +8350,9 @@ function FunCheckoutConfirmationStep({
       } catch (err) {
         logger.error("postCheckoutFundingError", err);
         setPostCheckoutError(
-          "An error occurred trying to fund the checkout. Please contact support for help."
+          "An error occurred trying to fund the checkout. Please try again or contact support for help."
         );
+        setPostCheckoutStepMessage("");
       } finally {
         setIsPostCheckoutLoading(false);
       }
@@ -8318,7 +8381,10 @@ function FunCheckoutConfirmationStep({
         }));
         shouldBatchOpBypassInit = ((_a2 = checkoutItem == null ? void 0 : checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _a2.paymentMethod) === "balance" /* ACCOUNT_BALANCE */ && !isFunWalletInitializedOnTargetChain && targetChainId === sourceChainId;
       }
-      const depositAddress = await (confirmCheckout == null ? void 0 : confirmCheckout(shouldBatchOpBypassInit));
+      const depositAddress = await (confirmCheckout == null ? void 0 : confirmCheckout(
+        shouldBatchOpBypassInit,
+        setCheckoutStepMessage
+      ));
       if (!depositAddress) {
         throw new Error(
           "Invalid depositAddress - unable to proceed with checkout"
@@ -8347,6 +8413,7 @@ function FunCheckoutConfirmationStep({
         setConfirmationError(
           "An error occurred during checkout. Please go back and try again."
         );
+        setCheckoutStepMessage("");
       }
     } finally {
       setIsConfirming(false);
@@ -8375,6 +8442,7 @@ function FunCheckoutConfirmationStep({
     (_p = checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo) == null ? void 0 : _p.chainId,
     (_q = checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo) == null ? void 0 : _q.symbol
   ]);
+  const hasError = hasDraftValueAndMethodError || hasQuoteError || hasCheckoutConfirmationError || hasPostCheckoutError;
   return /* @__PURE__ */ React82.createElement(Box, {
     display: "flex",
     flexDirection: "column",
@@ -8410,12 +8478,14 @@ function FunCheckoutConfirmationStep({
     hasPaymentToken: true,
     paymentTokenString,
     symbol: (_w = checkoutItem == null ? void 0 : checkoutItem.selectedSourceAssetInfo) == null ? void 0 : _w.symbol,
-    isEstimatedNetworkFees: isWeb3Login && ((_x = checkoutItem == null ? void 0 : checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _x.paymentMethod) === "balance" /* ACCOUNT_BALANCE */,
     errorMessage: hasDraftValueAndMethodError ? generateInsufficientAmountForMoonpayError(
       1 /* CHECKOUT */,
       false
     ) : hasQuoteError ? checkoutItem == null ? void 0 : checkoutItem.quoteErrorMessage : hasCheckoutConfirmationError ? confirmationError : hasPostCheckoutError ? postCheckoutError : ""
-  })), /* @__PURE__ */ React82.createElement(Box, {
+  })), !hasError && (postCheckoutStepMessage || checkoutStepMessage) ? /* @__PURE__ */ React82.createElement(FunNotification, {
+    description: postCheckoutStepMessage || checkoutStepMessage,
+    type: "default"
+  }) : null, /* @__PURE__ */ React82.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "4"
@@ -8505,8 +8575,7 @@ function FunOnrampConfirmationStep({
     hasTotal: true,
     total: totalAmountUsd,
     isLoading: isFetchingEstimatedFees,
-    errorMessage: estimationError,
-    isEstimatedNetworkFees: false
+    errorMessage: estimationError
   })), /* @__PURE__ */ React84.createElement(Box, {
     display: "flex",
     flexDirection: "column",
@@ -10493,7 +10562,7 @@ var AppleIcon = () => {
 import React113, { useContext as useContext15, useState as useState33 } from "react";
 
 // src/components/FunkitProvider/useCoolMode.ts
-import { useContext as useContext14, useEffect as useEffect22, useRef as useRef7 } from "react";
+import { useContext as useContext14, useEffect as useEffect22, useRef as useRef8 } from "react";
 
 // src/components/FunkitProvider/CoolModeContext.ts
 import { createContext as createContext13 } from "react";
@@ -10501,7 +10570,7 @@ var CoolModeContext = createContext13(false);
 
 // src/components/FunkitProvider/useCoolMode.ts
 var useCoolMode = (imageUrl) => {
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   const coolModeEnabled = useContext14(CoolModeContext);
   const resolvedImageUrl = useAsyncImage(imageUrl);
   useEffect22(() => {
@@ -11265,7 +11334,7 @@ var ScanIcon = () => /* @__PURE__ */ React121.createElement(AsyncImage, {
 });
 
 // src/components/ConnectOptions/DesktopOptions.tsx
-import React130, { Fragment as Fragment6, useContext as useContext18, useEffect as useEffect24, useRef as useRef8, useState as useState35 } from "react";
+import React130, { Fragment as Fragment6, useContext as useContext18, useEffect as useEffect24, useRef as useRef9, useState as useState35 } from "react";
 
 // src/components/ConnectModal/ConnectModalIntro.tsx
 import React127, { useContext as useContext17 } from "react";
@@ -11489,7 +11558,7 @@ function DesktopOptions({ onClose }) {
   const { disclaimer: Disclaimer } = useContext18(AppContext);
   const { i18n: i18n2 } = useContext18(I18nContext);
   const safari = isSafari();
-  const initialized = useRef8(false);
+  const initialized = useRef9(false);
   const { connector } = useContext18(WalletButtonContext);
   const mergeEIP6963WithRkConnectors = !connector;
   const wallets = useWalletConnectors(mergeEIP6963WithRkConnectors).filter((wallet) => wallet.ready || !!wallet.extensionDownloadUrl).sort((a, b) => a.groupIndex - b.groupIndex);
@@ -12778,7 +12847,7 @@ function FunConnectOptions({ onClose }) {
 }
 
 // src/components/SignIn/SignIn.tsx
-import React134, { useCallback as useCallback24, useContext as useContext20, useRef as useRef9 } from "react";
+import React134, { useCallback as useCallback24, useContext as useContext20, useRef as useRef10 } from "react";
 import { UserRejectedRequestError } from "viem";
 import { useAccount as useAccount9, useSignMessage } from "wagmi";
 var signInIcon = async () => (await import("./sign-FZVB2CS6.js")).default;
@@ -12801,7 +12870,7 @@ function SignIn({
       }));
     }
   }, [authAdapter, i18n2]);
-  const onceRef = useRef9(false);
+  const onceRef = useRef10(false);
   React134.useEffect(() => {
     if (onceRef.current)
       return;
@@ -15363,7 +15432,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey4, version);
 }
 function getCurrentSdkVersion() {
-  return "1.0.8";
+  return "1.0.10";
 }
 function useFingerprint() {
   const fingerprint = useCallback28(() => {
@@ -15515,7 +15584,11 @@ function FunkitProviderInner({
     apiKey: "pk_live_IxayBRQuBC3RzpPZkbGPrwUsRWAaeO",
     debug: !!debug
   }, /* @__PURE__ */ React146.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React146.createElement("div", {
-    ...createThemeRootProps2(id)
+    ...createThemeRootProps2(id),
+    style: {
+      width: "100%",
+      height: "100%"
+    }
   }, /* @__PURE__ */ React146.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: [
@@ -15725,7 +15798,7 @@ import React149, {
   useCallback as useCallback30,
   useContext as useContext30,
   useEffect as useEffect36,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState45
 } from "react";
 
@@ -15777,7 +15850,7 @@ function WalletButton2({
     showWalletConnectModal
   } = wallet;
   const coolModeRef = useCoolMode(iconUrl);
-  const initialized = useRef10(false);
+  const initialized = useRef11(false);
   const { i18n: i18n2 } = useContext30(I18nContext);
   const onConnect = useCallback30(async () => {
     const onMobileUri = async () => {

package/dist/wallets/walletConnectors/funkitConnectWallet/funkitConnectWallet.js

@@ -18,7 +18,8 @@ var TO_PROGRESS_CHECKOUT_STATES = [
   CheckoutState.TO_UNFUNDED,
   CheckoutState.TO_FUNDED,
   CheckoutState.TO_POOLED,
-  CheckoutState.TO_READY
+  CheckoutState.TO_READY,
+  CheckoutState.PENDING_RECEIVAL
 ];
 var IN_PROGRESS_CHECKOUT_STATES = [
   ...TO_PROGRESS_CHECKOUT_STATES,

package/dist/wallets/walletConnectors/index.js

@@ -1,152 +1,152 @@
 "use client";
 import {
-  xdefiWallet
-} from "./chunk-L734HTUS.js";
+  talismanWallet
+} from "./chunk-H273OTQA.js";
 import {
-  walletConnectWallet
-} from "./chunk-ASPRR7T3.js";
+  zerionWallet
+} from "./chunk-7CQPABJG.js";
 import {
-  zealWallet
-} from "./chunk-DPXMP5KS.js";
+  uniswapWallet
+} from "./chunk-XRSY4JVH.js";
 import {
-  tokenPocketWallet
-} from "./chunk-2UXZAUWT.js";
+  subWallet
+} from "./chunk-ZBAQFL6G.js";
 import {
-  safeWallet
-} from "./chunk-D3DCQ72J.js";
+  tahoWallet
+} from "./chunk-H76YCX2M.js";
 import {
-  mewWallet
-} from "./chunk-PWYTDYBE.js";
+  tokenPocketWallet
+} from "./chunk-2UXZAUWT.js";
 import {
   tokenaryWallet
 } from "./chunk-ENZLEAG2.js";
-import {
-  uniswapWallet
-} from "./chunk-XRSY4JVH.js";
-import {
-  safeheronWallet
-} from "./chunk-63NPZXAL.js";
 import {
   trustWallet
 } from "./chunk-Z2DGDHHZ.js";
 import {
-  zerionWallet
-} from "./chunk-7CQPABJG.js";
+  walletConnectWallet
+} from "./chunk-ASPRR7T3.js";
 import {
-  ramperWallet
-} from "./chunk-ZOL6ZMTJ.js";
+  xdefiWallet
+} from "./chunk-L734HTUS.js";
 import {
-  roninWallet
-} from "./chunk-LVRXH33E.js";
+  zealWallet
+} from "./chunk-DPXMP5KS.js";
 import {
-  safepalWallet
-} from "./chunk-SYELB4QO.js";
+  phantomWallet
+} from "./chunk-KGBLSE7L.js";
+import {
+  rabbyWallet
+} from "./chunk-XPEBP6XV.js";
 import {
   rainbowWallet
 } from "./chunk-O5NKWWEG.js";
 import {
-  subWallet
-} from "./chunk-ZBAQFL6G.js";
+  ramperWallet
+} from "./chunk-ZOL6ZMTJ.js";
 import {
-  tahoWallet
-} from "./chunk-H76YCX2M.js";
+  roninWallet
+} from "./chunk-LVRXH33E.js";
 import {
-  talismanWallet
-} from "./chunk-H273OTQA.js";
+  safeWallet
+} from "./chunk-D3DCQ72J.js";
 import {
-  injectedWallet
-} from "./chunk-KIHCNUU3.js";
+  safeheronWallet
+} from "./chunk-63NPZXAL.js";
 import {
-  oktoWallet
-} from "./chunk-WKHTUEF5.js";
+  safepalWallet
+} from "./chunk-SYELB4QO.js";
+import {
+  ledgerWallet
+} from "./chunk-Y6VY6E3L.js";
 import {
   metaMaskWallet
 } from "./chunk-3WZRNEZH.js";
 import {
-  omniWallet
-} from "./chunk-SVN7OEQR.js";
-import {
-  phantomWallet
-} from "./chunk-KGBLSE7L.js";
+  oktoWallet
+} from "./chunk-WKHTUEF5.js";
 import {
   okxWallet
 } from "./chunk-NGXIHASN.js";
 import {
-  oneKeyWallet
-} from "./chunk-4WOV4ITL.js";
+  omniWallet
+} from "./chunk-SVN7OEQR.js";
 import {
-  rabbyWallet
-} from "./chunk-XPEBP6XV.js";
+  mewWallet
+} from "./chunk-PWYTDYBE.js";
 import {
   oneInchWallet
 } from "./chunk-LCPIZUR3.js";
 import {
-  dawnWallet
-} from "./chunk-4XQDKOGF.js";
-import {
-  foxWallet
-} from "./chunk-Q4RLUJJD.js";
-import {
-  imTokenWallet
-} from "./chunk-5MVV7OVS.js";
+  oneKeyWallet
+} from "./chunk-4WOV4ITL.js";
 import {
   frameWallet
 } from "./chunk-XXFJVY73.js";
 import {
-  kresusWallet
-} from "./chunk-X6T3CICZ.js";
+  coinbaseWallet
+} from "./chunk-XBUTWYE4.js";
 import {
   gateWallet
 } from "./chunk-V45EXW7A.js";
 import {
-  ledgerWallet
-} from "./chunk-Y6VY6E3L.js";
+  injectedWallet
+} from "./chunk-KIHCNUU3.js";
 import {
-  bitgetWallet
-} from "./chunk-ZNXQ4V6G.js";
+  imTokenWallet
+} from "./chunk-5MVV7OVS.js";
 import {
-  coin98Wallet
-} from "./chunk-4FQLUQNA.js";
+  kresusWallet
+} from "./chunk-X6T3CICZ.js";
 import {
   bitverseWallet
 } from "./chunk-NL4I7WOT.js";
 import {
-  coinbaseWallet
-} from "./chunk-XBUTWYE4.js";
+  clvWallet
+} from "./chunk-MIWCKFYE.js";
+import {
+  coin98Wallet
+} from "./chunk-4FQLUQNA.js";
 import {
   coreWallet
 } from "./chunk-JLQ5HJYV.js";
 import {
-  desigWallet
-} from "./chunk-P4JLZ42R.js";
+  dawnWallet
+} from "./chunk-4XQDKOGF.js";
 import {
   enkryptWallet
 } from "./chunk-FLY7F4XA.js";
+import {
+  desigWallet
+} from "./chunk-P4JLZ42R.js";
+import {
+  foxWallet
+} from "./chunk-Q4RLUJJD.js";
 import {
   frontierWallet
 } from "./chunk-AM4SSLAP.js";
 import {
   argentWallet
 } from "./chunk-NZ5G23JP.js";
-import {
-  bitskiWallet
-} from "./chunk-C67TQJ6W.js";
 import {
   bifrostWallet
 } from "./chunk-6LTLPR2Q.js";
+import {
+  bitgetWallet
+} from "./chunk-ZNXQ4V6G.js";
 import {
   bloomWallet
 } from "./chunk-NTGZF5BY.js";
 import "./chunk-ZOLACFTK.js";
 import {
-  bybitWallet
-} from "./chunk-ZUAHWUEL.js";
+  bitskiWallet
+} from "./chunk-C67TQJ6W.js";
 import {
   braveWallet
 } from "./chunk-ABYQAXUX.js";
 import {
-  clvWallet
-} from "./chunk-MIWCKFYE.js";
+  bybitWallet
+} from "./chunk-ZUAHWUEL.js";
 import "./chunk-ZDU3JFGR.js";
 import "./chunk-QII6PY2D.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funkit/connect",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.",
   "files": [
     "dist",