@funkit/connect 3.0.0-next.4 → 3.0.0-next.6

package/dist/index.js

@@ -2,12 +2,12 @@
 import {
   en_US_default
 } from "./chunk-FRCBBARC.js";
-import {
-  lightTheme
-} from "./chunk-76VEFMWE.js";
 import {
   darkTheme
 } from "./chunk-Z3QREJ3Q.js";
+import {
+  lightTheme
+} from "./chunk-76VEFMWE.js";
 import "./chunk-HFT6OV3T.js";
 
 // src/components/DevTest/DevEmbed.tsx
@@ -522,7 +522,7 @@ import React169, {
   useCallback as useCallback31,
   useContext as useContext18,
   useEffect as useEffect35,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useState as useState43
 } from "react";
 import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect2 } from "wagmi";
@@ -733,22 +733,6 @@ import React9, {
 } from "react";
 import { useConfig } from "wagmi";
 
-// src/utils/memoize.ts
-var memoize = (fn) => {
-  const cache = /* @__PURE__ */ new Map();
-  const memoizedFn = (...args) => {
-    const key = JSON.stringify(args);
-    if (cache.has(key)) {
-      return cache.get(key);
-    }
-    const result = fn(...args);
-    cache.set(key, result);
-    return result;
-  };
-  memoizedFn.cache = cache;
-  return memoizedFn;
-};
-
 // src/utils/mesh.ts
 import {
   meshGetCryptocurrencyHoldings,
@@ -941,6 +925,22 @@ var flagConfig = {
 // src/utils/flags/impl.ts
 import { datadogLogs as datadogLogs2 } from "@datadog/browser-logs";
 
+// src/utils/memoize.ts
+var memoize = (fn) => {
+  const cache = /* @__PURE__ */ new Map();
+  const memoizedFn = (...args) => {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  };
+  memoizedFn.cache = cache;
+  return memoizedFn;
+};
+
 // src/utils/flags/endpoint.ts
 var FLAG_ENDPOINT_HOST = "sdk-cdn.fun.xyz";
 var FLAG_PROD_ENDPOINT_PATH = "flags/v0/config.json";
@@ -1073,7 +1073,14 @@ var FeatureFlag = class _FeatureFlag {
       return fallback;
     }
     const flagValue = this.derivedFlags?.[flagKey];
-    return typeof flagValue === "boolean" ? flagValue : fallback;
+    const flagResult = typeof flagValue === "boolean" ? flagValue : fallback;
+    logger.log("flagExposure_getBool", {
+      flagKey,
+      fallback,
+      flagValue,
+      type: "number"
+    });
+    return flagResult;
   }
   getNumber(flagKey, fallback) {
     if (this.derivedFlags === null) {
@@ -1084,7 +1091,14 @@ var FeatureFlag = class _FeatureFlag {
       return fallback;
     }
     const flagValue = this.derivedFlags?.[flagKey];
-    return typeof flagValue === "number" ? flagValue : fallback;
+    const flagResult = typeof flagValue === "number" ? flagValue : fallback;
+    logger.log("flagExposure_getNumber", {
+      flagKey,
+      fallback,
+      flagValue,
+      type: "number"
+    });
+    return flagResult;
   }
   getString(flagKey, fallback) {
     if (this.derivedFlags === null) {
@@ -1095,47 +1109,30 @@ var FeatureFlag = class _FeatureFlag {
       return fallback;
     }
     const flagValue = this.derivedFlags?.[flagKey];
-    return typeof flagValue === "string" ? flagValue : fallback;
+    const flagResult = typeof flagValue === "string" ? flagValue : fallback;
+    logger.log("flagExposure_getString", {
+      flagKey,
+      fallback,
+      flagValue,
+      type: "bool"
+    });
+    return flagResult;
   }
 };
 
 // src/utils/flags/index.ts
 var singleton = new FeatureFlag(flagConfig);
-var getBool = memoize((...args) => {
-  const result = singleton.getBool(...args);
-  logger.log("flag_exposure", {
-    flagKey: args[0],
-    fallback: args[1],
-    flagValue: result,
-    type: "bool"
-  });
-  return result;
-});
-var getNumber = memoize((...args) => {
-  const result = singleton.getNumber(...args);
-  logger.log("flag_exposure", {
-    flagKey: args[0],
-    fallback: args[1],
-    flagValue: result,
-    type: "number"
-  });
-  return result;
-});
-var getString = memoize((...args) => {
-  const result = singleton.getString(...args);
-  logger.log("flag_exposure", {
-    flagKey: args[0],
-    fallback: args[1],
-    flagValue: result,
-    type: "string"
-  });
-  return result;
-});
+var getBool = (...args) => {
+  return singleton.getBool(...args);
+};
+var getNumber = (...args) => {
+  return singleton.getNumber(...args);
+};
+var getString = (...args) => {
+  return singleton.getString(...args);
+};
 var init = (context) => {
   singleton.init(context);
-  getBool.cache = /* @__PURE__ */ new Map();
-  getNumber.cache = /* @__PURE__ */ new Map();
-  getString.cache = /* @__PURE__ */ new Map();
 };
 var flags = {
   init,
@@ -1417,7 +1414,7 @@ import React168, {
   useCallback as useCallback30,
   useContext as useContext17,
   useEffect as useEffect34,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useState as useState42
 } from "react";
 import { useAccount as useAccount10, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
@@ -2618,9 +2615,9 @@ var DialogBottom = ({
   return /* @__PURE__ */ React27.createElement(Box, { paddingX, ...boxProps });
 };
 var DYDX_API = "NJq0CGrsE19xBbP1vHyBOp8xJvzYo9kayJHqDFP5";
-function useDydxHideBack(hasBackButton) {
+function useDydxHideBack(hasBackButton, dydxHideBack) {
   const { apiKey } = useFunkitConfig();
-  return apiKey === DYDX_API && !hasBackButton;
+  return apiKey === DYDX_API && !hasBackButton && dydxHideBack;
 }
 var DialogTitle = ({
   title,
@@ -2632,7 +2629,8 @@ var DialogTitle = ({
   skipBackDelay = false,
   countdownSeconds,
   countdownKey,
-  delayCountdownReturnByBuffer = false
+  delayCountdownReturnByBuffer = false,
+  dydxHideBack
 }) => {
   const hasTimeLeft = countdownSeconds !== void 0 && countdownSeconds > 0;
   const [isCountdownVisible, setIsCountdownVisible] = useState7(hasTimeLeft);
@@ -2654,7 +2652,7 @@ var DialogTitle = ({
   useEffect10(() => {
     setIsCountdownVisible(hasTimeLeft);
   }, [hasTimeLeft, countdownKey]);
-  const hideAllBackSection = useDydxHideBack(hasBackButton);
+  const hideAllBackSection = useDydxHideBack(hasBackButton, !!dydxHideBack);
   return /* @__PURE__ */ React27.createElement(
     Box,
     {
@@ -4809,22 +4807,6 @@ var generateMoonpayCurrencyCode = (tokenSymbol, chainId) => {
   const mpCurrencyCode = `${tokenSymbol}${moonpayChainName}`.toLowerCase();
   return mpCurrencyCode;
 };
-function colorToHex(color) {
-  let hexColor = color;
-  const rgbMatch = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch.map(Number);
-    const rHex = r.toString(16).padStart(2, "0");
-    const gHex = g.toString(16).padStart(2, "0");
-    const bHex = b.toString(16).padStart(2, "0");
-    hexColor = `#${rHex}${gHex}${bHex}`;
-  }
-  const hexMatch = color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
-  if (hexMatch) {
-    hexColor = hexMatch[0].toLowerCase();
-  }
-  return hexColor;
-}
 
 // src/utils/payment.ts
 function generateSourceOfFundString({
@@ -5603,7 +5585,7 @@ function FunkitCheckoutProvider({ children }) {
         }),
         clientMetadata: _generateClientMetadataForBackend(checkoutId)
       });
-      checkoutItem?.initSettings?.onConfirmation?.();
+      checkoutItem?.initSettings?.onConfirmation?.(depositAddress);
       logger.log("checkoutConfirmed", { depositAddress });
       setActiveCheckouts({
         ...activeCheckouts,
@@ -5980,7 +5962,8 @@ function FunKeyValue({
       flexDirection: "row",
       display: "flex",
       alignItems: "center",
-      justifyContent: "flex-end"
+      justifyContent: "flex-end",
+      color: valueTextColor
     },
     valueIcon
   ) : null;
@@ -6407,10 +6390,8 @@ var FunTwoFaInput = ({
       borderWidth: "1",
       borderColor: getBorderColor(),
       borderRadius: "10",
-      style: {
-        overflowX: "auto",
-        cursor: isFocused ? "default" : "pointer"
-      },
+      cursor: isFocused ? "default" : "pointer",
+      style: { overflowX: "auto" },
       onFocus,
       onBlur,
       onMouseDown: handleMouseDown
@@ -6425,7 +6406,7 @@ var FunTwoFaInput = ({
           style: {
             textAlign: "center",
             padding: 0,
-            width: "min-content",
+            width: "20px",
             fontSize: 13,
             fontWeight: "inherit",
             cursor: "inherit"
@@ -10907,7 +10888,7 @@ import {
   FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO8,
   getTokenInfo as getTokenInfo2
 } from "@funkit/core";
-import React167, { useCallback as useCallback29, useEffect as useEffect33, useMemo as useMemo31, useRef as useRef15, useState as useState41 } from "react";
+import React167, { useCallback as useCallback29, useEffect as useEffect33, useMemo as useMemo32, useRef as useRef15, useState as useState41 } from "react";
 import { arbitrum, mainnet as mainnet6, mantle as mantle2, zkSync as zkSync3 } from "viem/chains";
 
 // src/hooks/useCheckoutAccountBalanceTransfer.ts
@@ -12294,6 +12275,7 @@ function DydxSwitchTab({
     /* @__PURE__ */ React130.createElement(
       Box,
       {
+        width: "half",
         borderRadius: "10",
         borderWidth: "2",
         borderStyle: "solid",
@@ -12310,10 +12292,11 @@ function DydxSwitchTab({
     /* @__PURE__ */ React130.createElement(
       Box,
       {
-        style: { cursor: "pointer" },
+        width: "half",
         paddingLeft: "16",
         paddingRight: "12",
         paddingY: "12",
+        cursor: "pointer",
         onClick: onSwitch
       },
       /* @__PURE__ */ React130.createElement(Text, { color: "tertiaryText", style: { float: "right" } }, Standard),
@@ -12950,6 +12933,27 @@ function FunPaymentMeshType({
 import { getMoonpayUrlSignature } from "@funkit/api-base";
 import React141, { memo, useEffect as useEffect28, useMemo as useMemo24, useState as useState32 } from "react";
 
+// src/utils/colors.ts
+function colorToHex(color) {
+  let hexColor = color;
+  const rgbMatch = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch.map(Number);
+    const rHex = r.toString(16).padStart(2, "0");
+    const gHex = g.toString(16).padStart(2, "0");
+    const bHex = b.toString(16).padStart(2, "0");
+    hexColor = `#${rHex}${gHex}${bHex}`;
+  }
+  const hexMatch = color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  if (hexMatch) {
+    hexColor = hexMatch[0].toLowerCase();
+  }
+  return hexColor;
+}
+var isHexString = (color) => {
+  return /^#([0-9a-f]{3}){1,2}$/i.test(color);
+};
+
 // src/components/FunPayments/FunPaymentMoonpayType.css.ts
 var mpClass = "_1kmpeyf0";
 var stretchStyle = "_1kmpeyf1";
@@ -13198,7 +13202,7 @@ import {
   meshPreviewTransfer as meshPreviewTransfer2
 } from "@funkit/api-base";
 import { ERC20_ABI, isAddress as isAddress3, USDT_ABI } from "@funkit/core";
-import React154, { useCallback as useCallback24, useMemo as useMemo28, useState as useState36 } from "react";
+import React154, { useCallback as useCallback24, useMemo as useMemo29, useState as useState36 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { useAccount as useAccount9, useSendTransaction, useWriteContract } from "wagmi";
 
@@ -13222,9 +13226,34 @@ function isMainnetUsdt(chainId, address) {
 
 // src/components/FunPayments/FunPaymentMethods.tsx
 import { getAssetPriceInfo as getAssetPriceInfo3 } from "@funkit/api-base";
-import React148, { useCallback as useCallback23, useMemo as useMemo25, useState as useState33 } from "react";
+import React148, { useCallback as useCallback23, useMemo as useMemo26, useState as useState33 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
+// src/hooks/useUsableWalletAssetsForCheckout.ts
+import { useMemo as useMemo25 } from "react";
+function useUsableWalletAssetsForCheckout(checkoutId) {
+  const { checkoutItem } = useFunkitPreCheckoutInternal(checkoutId);
+  const { walletAssets, isWeb3Login, isWeb2Login } = useGeneralWallet();
+  return useMemo25(() => {
+    if (!walletAssets || !checkoutItem) return;
+    const usableAssets = {};
+    for (const [assetKey, asset] of Object.entries(walletAssets)) {
+      const { isUsable } = isAssetUsableToPayForCheckout(
+        checkoutItem,
+        "balance" /* ACCOUNT_BALANCE */,
+        asset.chainId,
+        asset.contractAddress,
+        isWeb2Login,
+        isWeb3Login
+      );
+      if (isUsable) {
+        usableAssets[assetKey] = asset;
+      }
+    }
+    return usableAssets;
+  }, [checkoutItem, isWeb2Login, isWeb3Login, walletAssets]);
+}
+
 // src/components/FunPaymentMethodItem/FunPaymentMethodItem.tsx
 import React145 from "react";
 function FunPaymentMethodItem({
@@ -13410,6 +13439,7 @@ function AddPaymentMethodItem({
   const { textCustomizations } = useFunkitConfig();
   const { walletAddress, walletAssets, isWeb3Login, isWeb2Login, userInfo } = useGeneralWallet();
   const { checkoutItem } = useFunkitPreCheckoutInternal(checkoutId);
+  const usableWalletAssets = useUsableWalletAssetsForCheckout(checkoutId);
   const isEnabledForFlow = config.isEnabledForCheckout;
   const labelText = config.labelDynamic(
     textCustomizations,
@@ -13425,36 +13455,27 @@ function AddPaymentMethodItem({
     return /* @__PURE__ */ React148.createElement(React148.Fragment, null);
   }
   const getDynamicValueIconComponent = () => {
-    if (paymentMethod !== "balance" /* ACCOUNT_BALANCE */ || !checkoutItem) {
+    if (paymentMethod !== "balance" /* ACCOUNT_BALANCE */ || !checkoutItem || !usableWalletAssets) {
       return config.conditionalIcon;
     }
-    const availableChainMetadata = Object.values(walletAssets ?? {}).filter(
-      (asset) => isAssetUsableToPayForCheckout(
-        checkoutItem,
-        paymentMethod,
-        asset.chainId,
-        asset.contractAddress,
-        isWeb2Login,
-        isWeb3Login
-      ).isUsable
-    ).map((asset) => {
-      return chainMetadataById[asset.chainId];
-    });
-    const uniqueChains = Array.from(new Set(availableChainMetadata));
-    return /* @__PURE__ */ React148.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end" }, uniqueChains.map((chain, index) => {
+    const uniqueChainIds = Array.from(
+      new Set(Object.values(usableWalletAssets).map((asset) => asset.chainId))
+    );
+    return /* @__PURE__ */ React148.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end" }, uniqueChainIds.map((chainId, index) => {
+      const metadata = chainMetadataById[chainId];
       return /* @__PURE__ */ React148.createElement(
         Box,
         {
-          key: chain.name,
+          key: metadata.name,
           position: "relative",
-          style: { right: `${(uniqueChains.length - index - 1) * -2}px` }
+          style: { right: `${(uniqueChainIds.length - index - 1) * -2}px` }
         },
         /* @__PURE__ */ React148.createElement(
           AsyncImage,
           {
-            alt: chain.name,
+            alt: metadata.name,
             borderRadius: "full",
-            src: chain.iconUrl,
+            src: metadata.iconUrl,
             height: 12,
             width: 12
           }
@@ -13531,46 +13552,50 @@ function FunPaymentMethods({
 }) {
   const { apiKey } = useFunkitConfig();
   useWalletAssetsListener();
-  const {
-    walletAssets,
-    totalWalletAssetsUsd,
-    isWeb3Login,
-    isWeb2Login,
-    isUserLoggedIn
-  } = useGeneralWallet();
+  const { isUserLoggedIn } = useGeneralWallet();
   const { checkoutItem, updateTargetAssetAmount, getCheckoutDraftDollarValue } = useFunkitPreCheckoutInternal(checkoutId);
   const defaultPaymentMethod = checkoutItem?.initSettings.config.defaultPaymentMethod;
   const [selectedOption, setSelectedOption] = useState33(
     defaultPaymentMethod || null
   );
-  const maxUsdUsableAsset = useMemo25(() => {
-    if (!checkoutItem || !depositAmount || !walletAssets) {
+  const usableWalletAssets = useUsableWalletAssetsForCheckout(checkoutId);
+  const totalUsableWalletAssetsUsd = Object.values(
+    usableWalletAssets ?? {}
+  ).reduce((total, asset) => total + (asset.totalUsdValue || 0), 0);
+  const maxUsdUsableAsset = useMemo26(() => {
+    if (!depositAmount || !usableWalletAssets) {
       return null;
     }
-    let maybeAsset = null;
-    for (const assetKey of Object.keys(walletAssets)) {
-      const asset = walletAssets[assetKey];
-      if (!asset || assetKey == "nfts") {
-        continue;
-      }
-      const { isUsable } = isAssetUsableToPayForCheckout(
-        checkoutItem,
-        "balance" /* ACCOUNT_BALANCE */,
-        asset.chainId,
-        asset.contractAddress,
-        isWeb2Login,
-        isWeb3Login
-      );
-      if (!isUsable) {
-        continue;
-      }
-      if (!maybeAsset || maybeAsset.totalUsdValue < asset.totalUsdValue) {
-        maybeAsset = asset;
+    let maxAsset = null;
+    for (const assetKey in usableWalletAssets) {
+      const asset = usableWalletAssets[assetKey];
+      if (!maxAsset || maxAsset.totalUsdValue < asset.totalUsdValue) {
+        maxAsset = asset;
       }
     }
-    return maybeAsset;
-  }, [checkoutItem, depositAmount, isWeb2Login, isWeb3Login, walletAssets]);
-  const hasSufficientBalance2 = useMemo25(() => {
+    return maxAsset;
+  }, [depositAmount, usableWalletAssets]);
+  const recommendedCheckoutUsdAmountWithMaxUsdUsableAsset = useMemo26(() => {
+    if (!maxUsdUsableAsset || !checkoutItem || selectedOption !== "balance" /* ACCOUNT_BALANCE */) {
+      return 0;
+    }
+    const maxUsdAssetHoldingItem = {
+      iconSrc: maxUsdUsableAsset.logo,
+      symbol: maxUsdUsableAsset.symbol,
+      amount: getNormalizedTokenBalance(
+        Number(maxUsdUsableAsset.tokenBalance),
+        maxUsdUsableAsset.decimals
+      ),
+      usdAmount: maxUsdUsableAsset.totalUsdValue,
+      tokenAddress: maxUsdUsableAsset.contractAddress,
+      pickedChainId: maxUsdUsableAsset.chainId
+    };
+    return Math.max(
+      maxUsdAssetHoldingItem.usdAmount - getFeesUsdEstimate(checkoutItem, maxUsdAssetHoldingItem),
+      1
+    );
+  }, [checkoutItem, maxUsdUsableAsset, selectedOption]);
+  const hasSufficientBalance2 = useMemo26(() => {
     if (!depositAmount) return true;
     return maxUsdUsableAsset && maxUsdUsableAsset.totalUsdValue >= parseFloat(depositAmount);
   }, [depositAmount, maxUsdUsableAsset]);
@@ -13588,26 +13613,7 @@ function FunPaymentMethods({
       assetTokenAddress: checkoutItem.initSettings.config.targetAsset
     });
     if (!info || !info.unitPrice) return;
-    const maxUsdAmountFromHolding = () => {
-      const maxUsdAsset = maxUsdUsableAsset;
-      if (!maxUsdAsset) return 0;
-      const maxUsdAssetHoldingItem = {
-        iconSrc: maxUsdAsset.logo,
-        symbol: maxUsdAsset.symbol,
-        amount: getNormalizedTokenBalance(
-          Number(maxUsdAsset.tokenBalance),
-          maxUsdAsset.decimals
-        ),
-        usdAmount: maxUsdAsset.totalUsdValue,
-        tokenAddress: maxUsdAsset.contractAddress,
-        pickedChainId: maxUsdAsset.chainId
-      };
-      return Math.max(
-        maxUsdAssetHoldingItem.usdAmount - getFeesUsdEstimate(checkoutItem, maxUsdAssetHoldingItem),
-        1
-      );
-    };
-    const newTargetAmountUsd = selectedOption === "card" /* CARD */ ? MINIMUM_MOONPAY_DEPOSIT_AMOUNT_USD : selectedOption === "balance" /* ACCOUNT_BALANCE */ ? maxUsdAmountFromHolding() : 0;
+    const newTargetAmountUsd = selectedOption === "card" /* CARD */ ? MINIMUM_MOONPAY_DEPOSIT_AMOUNT_USD : selectedOption === "balance" /* ACCOUNT_BALANCE */ ? recommendedCheckoutUsdAmountWithMaxUsdUsableAsset : 0;
     const minTargetAmount = roundUpToXDecimalPlaces(
       (newTargetAmountUsd / info.unitPrice).toString(),
       5
@@ -13616,21 +13622,22 @@ function FunPaymentMethods({
     await getCheckoutDraftDollarValue();
   }, [
     apiKey,
-    checkoutItem,
+    checkoutItem?.initSettings.config.targetAsset,
+    checkoutItem?.initSettings.config.targetChain,
     getCheckoutDraftDollarValue,
-    maxUsdUsableAsset,
+    recommendedCheckoutUsdAmountWithMaxUsdUsableAsset,
     selectedOption,
     updateTargetAssetAmount
   ]);
-  const isWalletEmpty = totalWalletAssetsUsd === 0;
-  const notificationConfig = useMemo25(() => {
+  const notificationConfig = useMemo26(() => {
     const isInvalidMoonpay = "card" /* CARD */ === selectedOption && isAmountInvalidForMoonpay({ amountUsd: depositAmount });
     const isInvalidAccBalance = "balance" /* ACCOUNT_BALANCE */ === selectedOption && !hasSufficientBalance2;
     const isContinuable = !isDisabled && !isInvalidMoonpay && !isInvalidAccBalance;
-    const continueErrorText = isInvalidMoonpay ? generateInsufficientAmountForMoonpayError(true) : isInvalidAccBalance ? totalWalletAssetsUsd > 0.01 ? `${formatCurrencyAndStringify(
-      maxUsdUsableAsset?.totalUsdValue || 0
+    const continueErrorText = isInvalidMoonpay ? generateInsufficientAmountForMoonpayError(true) : isInvalidAccBalance ? recommendedCheckoutUsdAmountWithMaxUsdUsableAsset > 0.01 ? `${formatCurrencyAndStringify(
+      recommendedCheckoutUsdAmountWithMaxUsdUsableAsset
     )} maximum order` : `Insufficient balance.` : "";
     const hasQuoteError = messageType === "error";
+    const isWalletEmpty = totalUsableWalletAssetsUsd === 0;
     return {
       isUpdateNeeded: !isContinuable || hasQuoteError,
       isUpdatePossible: "balance" /* ACCOUNT_BALANCE */ !== selectedOption || !isWalletEmpty,
@@ -13639,24 +13646,23 @@ function FunPaymentMethods({
       notificationType: hasQuoteError ? "error" : !isContinuable ? "warning" : "default"
     };
   }, [
-    totalWalletAssetsUsd,
-    maxUsdUsableAsset?.totalUsdValue,
+    recommendedCheckoutUsdAmountWithMaxUsdUsableAsset,
     depositAmount,
     hasSufficientBalance2,
     isDisabled,
-    isWalletEmpty,
     messageType,
     quoteMessage,
-    selectedOption
+    selectedOption,
+    totalUsableWalletAssetsUsd
   ]);
-  const enabledPaymentMethods = useMemo25(() => {
+  const enabledPaymentMethods = useMemo26(() => {
     return Object.keys(PAYMENT_METHOD_CONFIG).filter((paymentMethod) => {
       const disabled = paymentMethod === "transfer" /* TRANSFER */ || paymentMethod === "balance" /* ACCOUNT_BALANCE */ && !isUserLoggedIn;
       return !disabled;
     });
   }, [isUserLoggedIn]);
   const [isContinuing, setIsContinuing] = useState33(false);
-  const canContinue = useMemo25(() => {
+  const canContinue = useMemo26(() => {
     return isNotNullish(selectedOption) && Object.values(PaymentMethod).includes(selectedOption) && !isContinuing && !checkoutItem?.isDrafting && enabledPaymentMethods.includes(selectedOption);
   }, [
     isContinuing,
@@ -13691,7 +13697,7 @@ function FunPaymentMethods({
         isClickable: !isContinuing,
         onClick: () => setSelectedOption(expressOption),
         disclaimerText: PAYMENT_METHOD_CONFIG[expressOption].disclaimerTextFn(
-          formatCurrencyAndStringify(totalWalletAssetsUsd)
+          formatCurrencyAndStringify(totalUsableWalletAssetsUsd)
         )
       }
     ), /* @__PURE__ */ React148.createElement(Text, { size: "13", weight: "medium", color: "secondaryText" }, "More options"), enabledPaymentMethods.filter((pm) => pm !== expressOption).map((paymentMethod) => {
@@ -13705,7 +13711,7 @@ function FunPaymentMethods({
           isClickable: !isContinuing,
           onClick: () => setSelectedOption(paymentMethod),
           disclaimerText: PAYMENT_METHOD_CONFIG[paymentMethod].disclaimerTextFn(
-            formatCurrencyAndStringify(totalWalletAssetsUsd)
+            formatCurrencyAndStringify(totalUsableWalletAssetsUsd)
           )
         }
       );
@@ -13748,7 +13754,7 @@ function FunPaymentMethods({
 }
 
 // src/components/FunTransactionSummary/FunTransactionSummary.tsx
-import React151, { useMemo as useMemo26, useState as useState34 } from "react";
+import React151, { useMemo as useMemo27, useState as useState34 } from "react";
 
 // src/components/Icons/CaretDownIcon.tsx
 import React149 from "react";
@@ -14030,7 +14036,7 @@ function FunTransactionSummary({
     )
   };
   const estTime = (checkoutItem?.latestQuote?.finalTimeEstimationMs || 0) / 1e3 || 0;
-  const paymentTokenString = useMemo26(() => {
+  const paymentTokenString = useMemo27(() => {
     return formatCryptoAndStringify(
       parseFloat(checkoutItem?.latestQuote?.finalPaymentTokenAmount || "0"),
       `${checkoutItem?.selectedSourceAssetInfo?.symbol}` || ""
@@ -14111,7 +14117,7 @@ var FunInfoIcon = ({ size = 14 }) => /* @__PURE__ */ React152.createElement(
 );
 
 // src/components/FunCheckoutModal/FunCheckoutPrimaryInfo.tsx
-import React153, { useEffect as useEffect29, useMemo as useMemo27, useState as useState35 } from "react";
+import React153, { useEffect as useEffect29, useMemo as useMemo28, useState as useState35 } from "react";
 function CheckoutPrimaryInfoSnapshot({
   checkoutItem,
   isLoading,
@@ -14119,10 +14125,10 @@ function CheckoutPrimaryInfoSnapshot({
   preserveMinHeight = true
 }) {
   const checkoutConfig = checkoutItem.initSettings.config;
-  const displaySubtitle = useMemo27(() => {
+  const displaySubtitle = useMemo28(() => {
     return getCheckoutItemDisplay(checkoutConfig, checkoutItem);
   }, [checkoutConfig, checkoutItem]);
-  const displayDollarValue = useMemo27(() => {
+  const displayDollarValue = useMemo28(() => {
     const prioritizedValue = prioritizeDraftValue ? checkoutItem.draftDollarValue : checkoutItem.finalDollarValue;
     const fallbackValue = prioritizeDraftValue ? checkoutItem.finalDollarValue : checkoutItem.draftDollarValue;
     return prioritizedValue || fallbackValue || 0;
@@ -14541,7 +14547,7 @@ function FunCheckoutConfirmationStep({
   const stepMessage = isRegeneratingQuote ? "Regenerating quote..." : postCheckoutStepMessage || checkoutStepMessage;
   const hasStepMessage = !hasError && Boolean(stepMessage);
   const bottomSectionRef = document.getElementById(CHECKOUT_MODAL_BOTTOM_BAR_ID);
-  const cardDisclaimer = useMemo28(() => {
+  const cardDisclaimer = useMemo29(() => {
     const finalConvertedAssetName = getCheckoutItemDisplay(
       // @ts-expect-error - TODO: Add guardrail for this being undefined (technically it should never be undefined)
       checkoutItem?.initSettings.config,
@@ -14822,17 +14828,14 @@ var FunCheckoutConnectExchangeStep = ({
 
 // src/components/FunCheckoutModal/FunCheckoutInputAmountStep.tsx
 import { getAssetPriceInfo as getAssetPriceInfo4 } from "@funkit/api-base";
-import React162, { useCallback as useCallback27, useEffect as useEffect31, useMemo as useMemo29, useState as useState39 } from "react";
+import React162, { useCallback as useCallback27, useEffect as useEffect31, useMemo as useMemo30, useState as useState39 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/hooks/useDynamicFont.ts
 import { useCallback as useCallback26, useEffect as useEffect30, useRef as useRef14, useState as useState38 } from "react";
 var SIZE_STEP = 1;
-var MIN_WIDTH = 10;
-var MAX_WIDTH = 235;
 var ALLOWANCE = 20;
 var useDynamicFont = (inputValue, max, min = 16) => {
-  const [textWidth, setTextWidth] = useState38(MIN_WIDTH);
   const [fontSize, setFontSize] = useState38(max);
   const inputRef = useRef14(null);
   const canvasRef = useRef14(document.createElement("canvas"));
@@ -14848,22 +14851,30 @@ var useDynamicFont = (inputValue, max, min = 16) => {
     };
     const resizeText = () => {
       if (!inputRef.current) return;
-      const textWidth2 = measureTextWidth(inputValue);
-      if (textWidth2 === void 0) return;
-      if (textWidth2 > MIN_WIDTH) setTextWidth(textWidth2 + ALLOWANCE);
-      if (fontSize > min && textWidth2 > MAX_WIDTH) {
+      const textWidth = measureTextWidth(inputValue);
+      if (textWidth === void 0) return;
+      const maxWidth = inputRef.current.getBoundingClientRect().width;
+      if (fontSize > min && textWidth > maxWidth) {
         setFontSize((prevSize) => prevSize - SIZE_STEP);
-      } else if (fontSize < max && textWidth2 < MAX_WIDTH - ALLOWANCE) {
+      } else if (fontSize < max && textWidth < maxWidth - ALLOWANCE) {
         setFontSize((prevSize) => prevSize + SIZE_STEP);
       }
     };
     resizeText();
   }, [max, min, inputValue, fontSize]);
-  const resetText = useCallback26(() => {
-    setTextWidth(MAX_WIDTH);
-    setFontSize(max);
-  }, [max]);
-  return { ref: inputRef, fontSize, textWidth, resetText };
+  const resetText = useCallback26(() => setFontSize(max), [max]);
+  return { ref: inputRef, fontSize, resetText };
+};
+
+// src/hooks/useInputAmountRestriction.ts
+var MAX_AMOUNT = 2e3;
+var useAmountRestriction = (currentAmount) => {
+  const { apiKey } = useFunkitConfig();
+  const isDydx = apiKey === "NJq0CGrsE19xBbP1vHyBOp8xJvzYo9kayJHqDFP5";
+  const isOverLimit = currentAmount > MAX_AMOUNT && isDydx;
+  return {
+    error: isOverLimit && `$${MAX_AMOUNT} maximum order`
+  };
 };
 
 // src/components/Icons/SwitchIcon.tsx
@@ -14912,7 +14923,7 @@ var FunCheckoutInputAmountStep = ({
   const [errorMessage, setErrorMessage] = useState39("");
   const inputPlaceholder = isAmountInAbsolute ? "0.0000" : "$0";
   const inputValue = amountInput === "" ? "" : isAmountInAbsolute ? amountInput : `$${amountInput}`;
-  const { ref, fontSize, textWidth, resetText } = useDynamicFont(
+  const { ref, fontSize, resetText } = useDynamicFont(
     inputValue || inputPlaceholder,
     BASE_FONT_SIZE
   );
@@ -14949,7 +14960,7 @@ var FunCheckoutInputAmountStep = ({
     }
     setIsInited(true);
   }, [initialAssetAmount, isAmountInAbsolute, isInited, unitPrice]);
-  const finalAmounts = useMemo29(() => {
+  const finalAmounts = useMemo30(() => {
     if (unitPrice == null) {
       return {
         usdEquivalent: 0,
@@ -14963,6 +14974,9 @@ var FunCheckoutInputAmountStep = ({
       absoluteEquivalent: parseFloat(absoluteEquivalent.toFixed(5))
     };
   }, [amountInput, isAmountInAbsolute, unitPrice]);
+  const { error: inputLimitError } = useAmountRestriction(
+    finalAmounts.usdEquivalent
+  );
   const [isContinuing, setIsContinuing] = useState39(false);
   const onClickContinue = useCallback27(async () => {
     setIsContinuing(true);
@@ -15026,10 +15040,10 @@ var FunCheckoutInputAmountStep = ({
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        gap: "10",
+        gap: "8",
         width: "full"
       },
-      unitPrice == null && !errorMessage ? /* @__PURE__ */ React162.createElement(Box, { style: { marginBottom: "8px", marginTop: "11px" } }, /* @__PURE__ */ React162.createElement(FunSkeletonBlock, { height: fontSize, width: fontSize * 3 })) : /* @__PURE__ */ React162.createElement(
+      unitPrice == null && !errorMessage ? /* @__PURE__ */ React162.createElement(FunSkeletonBlock, { height: fontSize, width: fontSize * 3 }) : /* @__PURE__ */ React162.createElement(
         Box,
         {
           display: "flex",
@@ -15038,41 +15052,29 @@ var FunCheckoutInputAmountStep = ({
           alignItems: "flex-end"
         },
         /* @__PURE__ */ React162.createElement(
-          Box,
+          FunInput,
           {
-            style: {
-              maxWidth: `${textWidth}px`,
-              transform: "translateY(15%)"
-            }
-          },
-          /* @__PURE__ */ React162.createElement(
-            FunInput,
-            {
-              ref,
-              value: inputValue,
-              placeholder: inputPlaceholder,
-              onChange: handleInputChange,
-              inputProps: {
-                type: isAmountInAbsolute ? "number" : "text",
-                autoFocus: true,
-                disabled: unitPrice == null,
-                // get ios to use numpad key with period
-                inputMode: "decimal"
-              },
-              inputStyle: {
-                textAlign: "center",
-                padding: "0px",
-                fontSize: `${fontSize}px`,
-                lineHeight: `${fontSize}px`,
-                maxWidth: `${textWidth}px`
-              },
-              textColor: "primaryText",
-              overrideBorderWidth: "0",
-              overrideBackground: "transparent"
-            }
-          )
-        ),
-        ticker && isAmountInAbsolute && /* @__PURE__ */ React162.createElement(Text, { size: "20", color: "primaryText", weight: "semibold" }, ticker)
+            ref,
+            value: inputValue,
+            placeholder: inputPlaceholder,
+            onChange: handleInputChange,
+            inputProps: {
+              type: isAmountInAbsolute ? "number" : "text",
+              autoFocus: true,
+              disabled: unitPrice == null,
+              // get ios to use numpad key with period
+              inputMode: "decimal"
+            },
+            inputStyle: {
+              textAlign: "center",
+              padding: "0px",
+              fontSize: `${fontSize}px`
+            },
+            textColor: "primaryText",
+            overrideBorderWidth: "0",
+            overrideBackground: "transparent"
+          }
+        )
       ),
       ticker && /* @__PURE__ */ React162.createElement(
         Box,
@@ -15109,6 +15111,13 @@ var FunCheckoutInputAmountStep = ({
             type: "error",
             description: errorMessage
           }
+        ), /* @__PURE__ */ React162.createElement(
+          FunNotification,
+          {
+            isVisible: !!inputLimitError,
+            type: "warning",
+            description: inputLimitError
+          }
         ), showAssetAvailableElement && targetAssetInWallet && !!targetAssetInWallet.totalUsdValue && /* @__PURE__ */ React162.createElement(
           Box,
           {
@@ -15135,7 +15144,7 @@ var FunCheckoutInputAmountStep = ({
         actionButtonProps: {
           title: "Continue",
           onClick: onClickContinue,
-          isDisabled: unitPrice == null || isContinuing || (finalAmounts.absoluteEquivalent || 0) <= 0 || finalAmounts.usdEquivalent <= 0,
+          isDisabled: unitPrice == null || isContinuing || (finalAmounts.absoluteEquivalent || 0) <= 0 || finalAmounts.usdEquivalent <= 0 || !!inputLimitError,
           isLoading: isContinuing
         }
       }
@@ -15149,7 +15158,7 @@ import {
   FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS as FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS3,
   FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO7
 } from "@funkit/core";
-import React165, { useCallback as useCallback28, useEffect as useEffect32, useMemo as useMemo30, useState as useState40 } from "react";
+import React165, { useCallback as useCallback28, useEffect as useEffect32, useMemo as useMemo31, useState as useState40 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/FunAsset/FunAssetItem.tsx
@@ -15432,7 +15441,7 @@ function MeshOrAccountSelectAsset({
     generateAccountHoldingsMapForMesh,
     generateAccountHoldingsMapForBalance
   ]);
-  const defaultTokenSymbols = useMemo30(() => {
+  const defaultTokenSymbols = useMemo31(() => {
     if (!checkoutItem) {
       return [];
     }
@@ -15449,7 +15458,7 @@ function MeshOrAccountSelectAsset({
     }
     return [];
   }, [checkoutItem, accountHoldingsMap]);
-  const assetOptions = useMemo30(() => {
+  const assetOptions = useMemo31(() => {
     if (!checkoutItem || !checkoutItem.selectedPaymentMethodInfo?.paymentMethod)
       return [];
     return Object.keys(accountHoldingsMap).map((chainSymbolKey) => {
@@ -15517,7 +15526,7 @@ function MeshOrAccountSelectAsset({
   const { messageType, quoteMessage } = quoteNotification;
   const hasError = hasFetchAssetsError || hasInsufficientAssetError || messageType === "error";
   const showQuoteMessage = messageType === "step" && !hasError;
-  const errorMessage = useMemo30(() => {
+  const errorMessage = useMemo31(() => {
     if (hasFetchAssetsError) {
       return /* @__PURE__ */ React165.createElement("div", null, fetchAssetsError, /* @__PURE__ */ React165.createElement(
         FunLinkButton,
@@ -15960,7 +15969,7 @@ function FunCheckoutModal({
       setAnimateOut(false);
     }, ANIMATION_DELAY4);
   };
-  const titleConfig = useMemo31(() => {
+  const titleConfig = useMemo32(() => {
     const baseTitle = checkoutItem?.initSettings?.config?.modalTitle || "Checkout";
     const selectedPaymentMethod2 = checkoutItem?.selectedPaymentMethodInfo?.paymentMethod;
     switch (checkoutStep) {
@@ -16134,7 +16143,8 @@ function FunCheckoutModal({
         onClose: onCloseWrapper,
         countdownSeconds: checkoutStep === "confirmation" /* CONFIRMATION */ ? countdown : 0,
         countdownKey: countdownKey.toString(),
-        delayCountdownReturnByBuffer: true
+        delayCountdownReturnByBuffer: true,
+        dydxHideBack: checkoutStep === "input_amount" /* INPUT_AMOUNT */
       }
     ),
     /* @__PURE__ */ React167.createElement(
@@ -16331,7 +16341,7 @@ function ModalProvider({ children }) {
   return /* @__PURE__ */ React168.createElement(
     ModalContext.Provider,
     {
-      value: useMemo32(
+      value: useMemo33(
         () => ({
           accountModalOpen,
           chainModalOpen,
@@ -17073,7 +17083,7 @@ var FunkitWeb2Provider = ({
     },
     [privy]
   );
-  const web2UserInfo = useMemo33(() => {
+  const web2UserInfo = useMemo34(() => {
     if (!loggedInUser || !loggedInUser?.linked_accounts || !loggedInUser?.linked_accounts?.length) {
       return PLACEHOLDER_FUNKIT_USER_INFO;
     }
@@ -17571,11 +17581,6 @@ var computeWalletConnectMetaData = ({
   };
 };
 
-// src/utils/colors.ts
-var isHexString = (color) => {
-  return /^#([0-9a-f]{3}){1,2}$/i.test(color);
-};
-
 // src/utils/omitUndefinedValues.ts
 function omitUndefinedValues(obj) {
   return Object.fromEntries(
@@ -18355,7 +18360,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "3.0.0-next.4";
+  return "3.0.0-next.6";
 }
 function useFingerprint() {
   const fingerprint = useCallback33(() => {