@funkit/connect 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @funkit/connect
 
+## 1.4.0
+
+### Minor Changes
+
+- e466e0f: fix: remove node-fetch in favor of esm's native fetch
+
+## 1.3.1
+
+### Patch Changes
+
+- 5417c66: fix: better handling & fallback for mesh get holdings error
+- d3b6b3f: fix: 2FA input for email uses numeric keyboard
+- cd5b2dd: refactor: disable mantle assets for payment
+- cd5b2dd: feat: add new flag disable_mantle_source_assets
+- 5417c66: refactor: deprecate allowBrokerageUnlinking config
+- cf610d8: refactor: Clean up implementation of the FunInput component
+- e2b9215: fix: cleanup logging
+- Updated dependencies [e2b9215]
+  - @funkit/core@1.0.19
+  - @funkit/wagmi-tools@2.0.4
+
 ## 1.3.0
 
 ### Minor Changes

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

@@ -3,10 +3,11 @@ import { FunCheckoutStep } from './FunCheckoutModal';
 /**
  * Based on which payment method was selected, allow users to select which asset they want to fund
  */
-export declare function FunCheckoutSelectAssetStep({ checkoutId, checkoutStep, onFinish, isOnFinishLoading, animateOut, }: {
+export declare function FunCheckoutSelectAssetStep({ checkoutId, checkoutStep, onFinish, onBack, isOnFinishLoading, animateOut, }: {
     checkoutId: string | null;
     checkoutStep: FunCheckoutStep;
     isOnFinishLoading: boolean;
     onFinish: () => void;
+    onBack: () => void;
     animateOut?: boolean;
 }): React.JSX.Element;

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

@@ -24,6 +24,4 @@ export interface FunInputProps {
     textColor?: BoxProps['color'];
     overrideBorderWidth?: undefined | BoxProps['borderWidth'];
 }
-export declare function FunInputDefault({ prefix, prefixIcon, placeholder, value, label, onChange, onKeyDown, onKeySubmit, onPaste, onMouseDown, hasBackground, textColor, inputStyle, inputProps, error, focused: _focused, overrideBorderWidth, }: FunInputProps): React.JSX.Element;
-export declare const FunInputWithRef: React.ForwardRefExoticComponent<Omit<FunInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export declare function FunInput(props: FunInputProps): React.JSX.Element;
+export declare const FunInput: React.ForwardRefExoticComponent<Omit<FunInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -36,8 +36,6 @@ interface FunkitAccountOptionsConfig {
 interface FunkitPaymentsConfig {
     /** If available, the specified payment method will be selected by default during checkout or deposits **/
     defaultPaymentMethod?: PaymentMethod | undefined;
-    /** Whether end users are given the option to unlink a previously connected brokerage **/
-    allowBrokerageUnlinking?: boolean;
     /** Max width of the title of each payment method **/
     paymentTitleMaxWidth?: BoxProps['maxWidth'];
     /** Payment method options styling **/

package/dist/index.js

@@ -371,6 +371,16 @@ var flagConfig = {
           }
         ],
         value: true
+      },
+      {
+        if_any: [
+          {
+            key: "userId",
+            type: "pctRollout",
+            pct: 50
+          }
+        ],
+        value: true
       }
     ]
   },
@@ -399,18 +409,21 @@ var flagConfig = {
           {
             key: "userId",
             type: "pctRollout",
-            pct: 100
+            pct: 50
           }
         ],
         value: true
       }
     ]
+  },
+  ["disable_mantle_source_assets" /* DisableMantleSourceAssets */]: {
+    type: "boolean",
+    default_value: true
   }
 };
 
 // src/utils/flags/impl.ts
 import { datadogLogs as datadogLogs2 } from "@datadog/browser-logs";
-import fetch2 from "node-fetch";
 
 // src/utils/flags/endpoint.ts
 var FLAG_ENDPOINT_HOST = "sdk-cdn.fun.xyz";
@@ -443,18 +456,16 @@ async function fetchWithTimeout(url, options = {}, timeout = 15e3) {
   const id = setTimeout(() => controller.abort(), timeout);
   options.signal = controller.signal;
   try {
-    const response = await fetch2(url, options);
+    const response = await fetch(url, options);
     clearTimeout(id);
     return response;
   } catch (error) {
-    if (error.name === "AbortError") {
+    if ((error == null ? void 0 : error.name) === "AbortError") {
       throw new Error(`Request timed out after ${timeout / 1e3} seconds`);
     }
     throw error;
   }
 }
-var warn = (...args) => {
-};
 var fetchConfigFromServer = async () => {
   const response = await fetchWithTimeout(FLAG_PROD_ENDPOINT, {}, 5e3);
   const configData = await response.json();
@@ -483,7 +494,7 @@ var FeatureFlag = class {
         this.deriveAllFlags(userContext);
       }
     } catch (err) {
-      warn("Failed to fetch config:", err);
+      logger.error("flag_initError", err);
       this.flagConfig = this._config;
       this.isUsingOnlineConfig = false;
       this.deriveAllFlags(userContext);
@@ -501,10 +512,6 @@ var FeatureFlag = class {
       ])
     );
     this.userContext = userContext;
-    logger.log("flag_deriveAllFlags", {
-      flags: this.derivedFlags,
-      userContext
-    });
     datadogLogs2.setGlobalContextProperty("flags", this.derivedFlags);
   }
   deriveFlag(flagKey, flagConfig2, context) {
@@ -827,7 +834,6 @@ var DEFAULT_FUNKIT_CONFIG = {
   },
   accountModalConfig: { showUnknownTokens: false, allowDepositing: false },
   paymentsConfig: {
-    allowBrokerageUnlinking: false,
     defaultPaymentMethod: void 0,
     paymentTitleMaxWidth: "240",
     methodsConfig: {
@@ -1728,6 +1734,7 @@ var useSymbolRefresh_default = useSymbolRefresh;
 // src/utils/assets.ts
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO } from "@funkit/core";
 import { formatUnits } from "viem";
+import { mantle } from "viem/chains";
 
 // src/hooks/useCheckoutType.ts
 function getCheckoutType(checkoutItem) {
@@ -1768,7 +1775,12 @@ var isAssetUsableToPayForCheckout = (checkoutItem, paymentMethod, assetChainId,
   const { isCheckoutPostActionRequired } = getCheckoutType(checkoutItem);
   const isSameAsPurchasingToken = !isCheckoutPostActionRequired && paymentMethod === "balance" /* ACCOUNT_BALANCE */ && checkoutItem.initSettings.config.targetChain === assetChainId && checkoutItem.initSettings.config.targetAsset.toLowerCase() === assetTokenAddress.toLowerCase();
   const isConnectedAccountSupported = isWeb2Login && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[assetChainId].isFunWalletSupported || isWeb3Login || !isWeb2Login && !isWeb3Login;
-  const isPickedChainSupportedForCheckout = isConnectedAccountSupported && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[assetChainId].isCheckoutSupported;
+  const isMantleAssetsDisabled = flags.getBool(
+    "disable_mantle_source_assets" /* DisableMantleSourceAssets */,
+    true
+  );
+  const isAssetDisabled = isMantleAssetsDisabled && assetChainId === mantle.id.toString();
+  const isPickedChainSupportedForCheckout = isConnectedAccountSupported && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[assetChainId].isCheckoutSupported && !isAssetDisabled;
   const isUsable = !isSameAsPurchasingToken && isPickedChainSupportedForCheckout;
   return {
     isUsable,
@@ -4414,112 +4426,8 @@ var inputClassDisabled = "zue0i63 _1rsrm2fxv";
 
 // src/components/FunInput/FunInput.tsx
 var InputTextSize = "57px";
-function FunInputDefault({
-  prefix,
-  prefixIcon,
-  placeholder,
-  value,
-  label,
-  onChange,
-  onKeyDown,
-  onKeySubmit,
-  onPaste,
-  onMouseDown,
-  hasBackground = true,
-  textColor = "modalTextSecondary",
-  inputStyle = {},
-  inputProps = {
-    type: "text"
-  },
-  error,
-  focused: _focused,
-  overrideBorderWidth
-}) {
-  const { paymentsConfig } = useFunkitConfig();
-  const [focused, setFocused] = React29.useState(false);
-  const onFocus = () => setFocused(true);
-  const onBlur = () => setFocused(false);
-  return /* @__PURE__ */ React29.createElement(Box, {
-    color: "modalText",
-    display: "flex",
-    flexDirection: "column",
-    gap: "8",
-    width: "full"
-  }, label && /* @__PURE__ */ React29.createElement(Text, {
-    color: textColor,
-    size: "14",
-    weight: "medium"
-  }, label), /* @__PURE__ */ React29.createElement(Box, {
-    background: hasBackground ? "actionButtonSecondaryBackground" : void 0,
-    borderRadius: "connectButton",
-    fontFamily: "body",
-    minWidth: "full",
-    display: "flex",
-    color: textColor,
-    alignItems: "center",
-    borderColor: error ? "error" : focused && _focused ? "accentColor" : void 0,
-    borderWidth: overrideBorderWidth ? overrideBorderWidth : error && focused ? "2" : error ? "1" : focused && _focused ? "1" : "0",
-    borderStyle: "solid",
-    fontWeight: value ? "semibold" : "medium"
-  }, prefix ? /* @__PURE__ */ React29.createElement(Box, {
-    paddingLeft: paymentsConfig.optionsConfig.optionsPadding,
-    height: "max"
-  }, prefix) : null, prefixIcon && (prefixIcon === "SearchIcon" ? /* @__PURE__ */ React29.createElement(Box, {
-    display: "flex",
-    paddingLeft: paymentsConfig.optionsConfig.optionsPadding,
-    height: "max",
-    alignItems: "center"
-  }, /* @__PURE__ */ React29.createElement(SearchIcon, {
-    selected: focused
-  })) : prefixIcon === "$" ? /* @__PURE__ */ React29.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    paddingLeft: "32"
-  }, /* @__PURE__ */ React29.createElement(Text, {
-    color: "modalText",
-    style: {
-      paddingBottom: 2,
-      fontSize: inputStyle.fontSize || InputTextSize,
-      fontWeight: 800
-    }
-  }, "$")) : void 0), /* @__PURE__ */ React29.createElement("input", {
-    type: (inputProps == null ? void 0 : inputProps.type) || "text",
-    value,
-    placeholder,
-    onChange: (e) => onChange(e),
-    onKeyDown: (e) => {
-      e.stopPropagation();
-      if (onKeyDown) {
-        onKeyDown(e);
-      }
-      if (e.key === "Enter" && onKeySubmit) {
-        onKeySubmit();
-        e.stopPropagation();
-      }
-    },
-    onPaste,
-    onMouseDown: (e) => {
-      if (onMouseDown) {
-        onMouseDown(e);
-      }
-    },
-    onFocus,
-    onBlur,
-    onWheel: (e) => e.currentTarget.blur(),
-    className: inputProps.disabled ? inputClassDisabled : inputClass,
-    ...inputProps,
-    style: {
-      fontWeight: "inherit",
-      ...inputStyle
-    }
-  })), error && typeof error === "string" && /* @__PURE__ */ React29.createElement(Text, {
-    color: "error",
-    size: "14",
-    weight: "medium"
-  }, error));
-}
-var FunInputWithRef = forwardRef2(
-  function FunInputWithRef2({
+var FunInput = forwardRef2(
+  function FunInputWithRef({
     prefix,
     prefixIcon,
     placeholder,
@@ -4548,7 +4456,8 @@ var FunInputWithRef = forwardRef2(
       color: "modalText",
       display: "flex",
       flexDirection: "column",
-      gap: "8"
+      gap: "8",
+      width: "full"
     }, label && /* @__PURE__ */ React29.createElement(Text, {
       color: textColor,
       size: "14",
@@ -4557,6 +4466,7 @@ var FunInputWithRef = forwardRef2(
       background: hasBackground ? "actionButtonSecondaryBackground" : void 0,
       borderRadius: "connectButton",
       fontFamily: "body",
+      minWidth: "full",
       display: "flex",
       color: textColor,
       alignItems: "center",
@@ -4589,7 +4499,7 @@ var FunInputWithRef = forwardRef2(
       ref,
       type: (inputProps == null ? void 0 : inputProps.type) || "text",
       value,
-      placeholder: placeholder == null ? void 0 : placeholder.toString(),
+      placeholder,
       onChange: (e) => onChange(e),
       onKeyDown: (e) => {
         e.stopPropagation();
@@ -4600,7 +4510,6 @@ var FunInputWithRef = forwardRef2(
           onKeySubmit();
         }
       },
-      onWheel: (e) => e.currentTarget.blur(),
       onPaste,
       onMouseDown: (e) => {
         if (onMouseDown) {
@@ -4609,6 +4518,7 @@ var FunInputWithRef = forwardRef2(
       },
       onFocus,
       onBlur,
+      onWheel: (e) => e.currentTarget.blur(),
       className: inputProps.disabled ? inputClassDisabled : inputClass,
       ...inputProps,
       style: {
@@ -4622,13 +4532,6 @@ var FunInputWithRef = forwardRef2(
     }, error));
   }
 );
-function FunInput(props) {
-  return props.ref ? /* @__PURE__ */ React29.createElement(FunInputWithRef, {
-    ...props
-  }) : /* @__PURE__ */ React29.createElement(FunInputDefault, {
-    ...props
-  });
-}
 
 // src/components/FunKeyValue/FunKeyValue.tsx
 import React30 from "react";
@@ -4764,7 +4667,7 @@ import {
   getTokenInfo as getTokenInfo2
 } from "@funkit/core";
 import React83, { useCallback as useCallback20, useEffect as useEffect20, useMemo as useMemo22, useState as useState23 } from "react";
-import { arbitrum, mainnet as mainnet3, mantle, zkSync as zkSync2 } from "viem/chains";
+import { arbitrum, mainnet as mainnet3, mantle as mantle2, zkSync as zkSync2 } from "viem/chains";
 
 // src/hooks/useCheckoutAccountBalanceTransfer.ts
 import { useCallback as useCallback9 } from "react";
@@ -4877,38 +4780,38 @@ import {
 } from "@funkit/api-base";
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_ID_LIST } from "@funkit/core";
 var FUNKIT_MESH_CLIENT_ID = "8132aff4-56c9-4b1d-85b4-08dbdcc6199d";
-var MeshExchanges = /* @__PURE__ */ ((MeshExchanges4) => {
-  MeshExchanges4["Robinhood"] = "Robinhood";
-  MeshExchanges4["ETrade"] = "ETrade";
-  MeshExchanges4["Alpaca"] = "Alpaca";
-  MeshExchanges4["WeBull"] = "WeBull";
-  MeshExchanges4["Stash"] = "Stash";
-  MeshExchanges4["InteractiveBrokers"] = "InteractiveBrokers";
-  MeshExchanges4["Public"] = "Public";
-  MeshExchanges4["Coinbase"] = "Coinbase";
-  MeshExchanges4["Kraken"] = "Kraken";
-  MeshExchanges4["CoinbasePro"] = "CoinbasePro";
-  MeshExchanges4["CryptoCom"] = "CryptoCom";
-  MeshExchanges4["Binance"] = "Binance";
-  MeshExchanges4["BinanceUs"] = "BinanceUs";
-  MeshExchanges4["Gemini"] = "Gemini";
-  MeshExchanges4["OkCoin"] = "OkCoin";
-  MeshExchanges4["KuCoin"] = "KuCoin";
-  MeshExchanges4["Etoro"] = "Etoro";
-  MeshExchanges4["CexIo"] = "CexIo";
-  MeshExchanges4["Bitstamp"] = "Bitstamp";
-  MeshExchanges4["GateIo"] = "GateIo";
-  MeshExchanges4["Acorns"] = "Acorns";
-  MeshExchanges4["Okx"] = "Okx";
-  MeshExchanges4["BitFlyer"] = "BitFlyer";
-  MeshExchanges4["Coinlist"] = "Coinlist";
-  MeshExchanges4["Huobi"] = "Huobi";
-  MeshExchanges4["Bitfinex"] = "Bitfinex";
-  MeshExchanges4["KrakenDirect"] = "KrakenDirect";
-  MeshExchanges4["Vanguard"] = "Vanguard";
-  MeshExchanges4["BitfinexDirect"] = "BitfinexDirect";
-  MeshExchanges4["Bybit"] = "Bybit";
-  return MeshExchanges4;
+var MeshExchanges = /* @__PURE__ */ ((MeshExchanges5) => {
+  MeshExchanges5["Robinhood"] = "Robinhood";
+  MeshExchanges5["ETrade"] = "ETrade";
+  MeshExchanges5["Alpaca"] = "Alpaca";
+  MeshExchanges5["WeBull"] = "WeBull";
+  MeshExchanges5["Stash"] = "Stash";
+  MeshExchanges5["InteractiveBrokers"] = "InteractiveBrokers";
+  MeshExchanges5["Public"] = "Public";
+  MeshExchanges5["Coinbase"] = "Coinbase";
+  MeshExchanges5["Kraken"] = "Kraken";
+  MeshExchanges5["CoinbasePro"] = "CoinbasePro";
+  MeshExchanges5["CryptoCom"] = "CryptoCom";
+  MeshExchanges5["Binance"] = "Binance";
+  MeshExchanges5["BinanceUs"] = "BinanceUs";
+  MeshExchanges5["Gemini"] = "Gemini";
+  MeshExchanges5["OkCoin"] = "OkCoin";
+  MeshExchanges5["KuCoin"] = "KuCoin";
+  MeshExchanges5["Etoro"] = "Etoro";
+  MeshExchanges5["CexIo"] = "CexIo";
+  MeshExchanges5["Bitstamp"] = "Bitstamp";
+  MeshExchanges5["GateIo"] = "GateIo";
+  MeshExchanges5["Acorns"] = "Acorns";
+  MeshExchanges5["Okx"] = "Okx";
+  MeshExchanges5["BitFlyer"] = "BitFlyer";
+  MeshExchanges5["Coinlist"] = "Coinlist";
+  MeshExchanges5["Huobi"] = "Huobi";
+  MeshExchanges5["Bitfinex"] = "Bitfinex";
+  MeshExchanges5["KrakenDirect"] = "KrakenDirect";
+  MeshExchanges5["Vanguard"] = "Vanguard";
+  MeshExchanges5["BitfinexDirect"] = "BitfinexDirect";
+  MeshExchanges5["Bybit"] = "Bybit";
+  return MeshExchanges5;
 })(MeshExchanges || {});
 var EXCHANGE_NAME_TO_TYPE = {
   ["Robinhood" /* Robinhood */]: "robinhood",
@@ -5900,11 +5803,14 @@ var FunTwoFaInput = ({
     return /* @__PURE__ */ React50.createElement(Box, {
       key: i,
       style: { display: "flex", flex: 1 }
-    }, /* @__PURE__ */ React50.createElement(FunInputWithRef, {
+    }, /* @__PURE__ */ React50.createElement(FunInput, {
       ref: (el) => inputRefs.current[i] = el,
       inputStyle: {
         textAlign: "center"
       },
+      inputProps: {
+        inputMode: "numeric"
+      },
       value: value[i] || "",
       onChange: (e) => {
         e.stopPropagation();
@@ -6618,12 +6524,7 @@ function FunPaymentMeshType({
     gap: "24"
   }, (filteredOptions == null ? void 0 : filteredOptions.length) > 0 ? /* @__PURE__ */ React58.createElement(FunNotification, {
     type: hasMeshPreError ? "error" : "default",
-    description: hasMeshPreError ? meshPreError : hasActiveConnectionCheck(exchange) ? /* @__PURE__ */ React58.createElement("div", null, `You will be directed to your linked ${exchange} account.`, funkitConfig.paymentsConfig.allowBrokerageUnlinking ? /* @__PURE__ */ React58.createElement(FunLinkButton, {
-      text: "Unlink.",
-      color: "buttonPrimary",
-      textProps: { weight: "medium" },
-      onClick: () => unlinkBrokerage(exchange)
-    }) : null) : "You will be redirected to Mesh to securely link your account."
+    description: hasMeshPreError ? meshPreError : hasActiveConnectionCheck(exchange) ? `You will be directed to your linked ${exchange} account.` : "You will be redirected to Mesh to securely link your account."
   }) : null, /* @__PURE__ */ React58.createElement(FunButton, {
     title: "Continue",
     onClick: onClickContinue,
@@ -8824,6 +8725,8 @@ var SwitchIcon = () => {
 };
 
 // src/components/FunCheckoutModal/FunCheckoutInputAmountStep.tsx
+var USD_REGEX = /^\$?\d*(\.\d{0,2})?/;
+var ABSOLUTE_REGEX = /^\d*(\.\d{0,5})?/;
 function FunCheckoutInputAmountStep({
   checkoutId,
   onContinue,
@@ -8853,6 +8756,7 @@ function FunCheckoutInputAmountStep({
           setUnitPrice(info.unitPrice);
         }
       } catch (err) {
+        logger.error("Error fetching price for token", err);
         setErrorMessage("Unable to fetch price for token. Please try again.");
       }
     };
@@ -8925,20 +8829,23 @@ function FunCheckoutInputAmountStep({
     value: amountInput === "" ? "" : isAmountInAbsolute ? amountInput : `$${amountInput}`,
     placeholder: isAmountInAbsolute ? "0.00000" : "$0.00",
     onChange: (newAmount) => {
+      const regex = isAmountInAbsolute ? ABSOLUTE_REGEX : USD_REGEX;
       let newValue = newAmount.target.value;
+      const match = newValue.match(regex);
+      if (!match) {
+        return;
+      }
+      newValue = match[0];
       if (!isAmountInAbsolute && newValue.startsWith("$")) {
-        if (newValue === "$") {
-          newValue = "";
-        } else if (newValue.length > 0) {
-          newValue = newValue.slice(1);
-        }
+        newValue = newValue.slice(1);
       }
       setAmountInput(newValue);
     },
     inputProps: {
       type: isAmountInAbsolute ? "number" : "text",
       autoFocus: true,
-      disabled: isContinuing || unitPrice == null
+      disabled: isContinuing || unitPrice == null,
+      inputMode: "decimal"
     },
     inputStyle: {
       textAlign: "center",
@@ -9105,16 +9012,20 @@ function MeshOrAccountSelectAsset({
   checkoutId,
   checkoutStep,
   onFinish,
+  onBack,
   isOnFinishLoading
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const [accountHoldingsMap, setAccountHoldingsMap] = useState22({});
   const [isLoadingAssets, setIsLoadingAssets] = useState22(true);
+  const [fetchAssetsError, setFetchAssetsError] = useState22("");
+  const hasFetchAssetsError = !!fetchAssetsError;
   const [selectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState22("");
   const { checkoutItem, updateSourceAsset } = useFunkitPreCheckoutInternal(checkoutId);
   const { isCheckoutCrFlow } = useCheckoutType(checkoutItem);
   const draftDollarValueNormalized = (checkoutItem == null ? void 0 : checkoutItem.draftDollarValue) || 0;
   const funkitConfig = useFunkitConfig();
+  const { unlinkBrokerage } = useFunkitMesh({});
   const { fetchInfo: manualFetchNetworkInfo } = useMeshNetworkInfo(
     (_c = (_b = (_a = checkoutItem == null ? void 0 : checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _a.meta) == null ? void 0 : _b.accessToken) == null ? void 0 : _c.brokerName
   );
@@ -9124,7 +9035,7 @@ function MeshOrAccountSelectAsset({
   const { walletAssets, isWeb2Login, isWeb3Login } = useGeneralWallet();
   const generateAccountHoldingsMapForMesh = useCallback19(async () => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
-    if (funkitConfig == null ? void 0 : funkitConfig.apiKey) {
+    try {
       const [cryptoHoldings, meshNetworkInfo] = await Promise.all([
         fetchMeshAccountCryptoHoldings({
           authToken: (_d2 = (_c2 = (_b2 = (_a2 = checkoutItem == null ? void 0 : checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _a2.meta) == null ? void 0 : _b2.accessToken) == null ? void 0 : _c2.accountTokens) == null ? void 0 : _d2[0].accessToken,
@@ -9191,8 +9102,13 @@ function MeshOrAccountSelectAsset({
       });
       logger.log("generateAccountHoldingsMapForMesh_itemMap", itemMap);
       return itemMap;
+    } catch (err) {
+      logger.error("generateAccountHoldingsMapForMesh:error", err);
+      setFetchAssetsError(
+        "Unable to retrieve your account balance. Please try re-linking your account."
+      );
+      return {};
     }
-    return {};
   }, [
     checkoutItem == null ? void 0 : checkoutItem.initSettings.config.targetChain,
     (_g = (_f = (_e = checkoutItem == null ? void 0 : checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _e.meta) == null ? void 0 : _f.accessToken) == null ? void 0 : _g.accountTokens,
@@ -9200,7 +9116,7 @@ function MeshOrAccountSelectAsset({
     funkitConfig == null ? void 0 : funkitConfig.apiKey,
     manualFetchNetworkInfo
   ]);
-  const generateAccountHoldingsMapForBalance = useCallback19(async () => {
+  const generateAccountHoldingsMapForBalance = useCallback19(() => {
     var _a2, _b2;
     const itemMap = {};
     const checkoutTargetChainId = checkoutItem == null ? void 0 : checkoutItem.initSettings.config.targetChain;
@@ -9248,14 +9164,19 @@ function MeshOrAccountSelectAsset({
       if (paymentMethod === "brokerage" /* BROKERAGE */) {
         itemMap = await generateAccountHoldingsMapForMesh();
       } else if (paymentMethod === "balance" /* ACCOUNT_BALANCE */) {
-        itemMap = await generateAccountHoldingsMapForBalance();
+        itemMap = generateAccountHoldingsMapForBalance();
       }
       setAccountHoldingsMap(itemMap);
       setIsLoadingAssets(false);
     }
-    fetchAccountHoldings().catch(
-      (reason) => logger.error("fetchAccountHoldings:error", reason)
-    );
+    fetchAccountHoldings().catch((reason) => {
+      logger.error("fetchAccountHoldings:error", reason);
+      setFetchAssetsError(
+        "Unable to retrieve your account balance. Please try again."
+      );
+      setAccountHoldingsMap({});
+      setIsLoadingAssets(false);
+    });
   }, [
     (_k = checkoutItem == null ? void 0 : checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _k.paymentMethod,
     manualFetchNetworkInfo,
@@ -9340,7 +9261,26 @@ function MeshOrAccountSelectAsset({
   } = useCheckoutQuoteNotification(checkoutId || "");
   const [insufficientAssetError, setInsufficientAssetError] = useState22("");
   const hasInsufficientAssetError = !!insufficientAssetError;
-  const showNotification = hasInsufficientAssetError || showQuoteNotification;
+  const showNotification = hasFetchAssetsError || hasInsufficientAssetError || showQuoteNotification;
+  const notificationDescription = useMemo21(() => {
+    return hasFetchAssetsError ? /* @__PURE__ */ React81.createElement("div", null, fetchAssetsError, /* @__PURE__ */ React81.createElement(FunLinkButton, {
+      text: "Unlink.",
+      color: "buttonPrimary",
+      textProps: { weight: "medium" },
+      onClick: () => {
+        var _a2, _b2, _c2;
+        unlinkBrokerage(
+          (_c2 = (_b2 = (_a2 = checkoutItem == null ? void 0 : checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _a2.meta) == null ? void 0 : _b2.accessToken) == null ? void 0 : _c2.brokerName
+        );
+        onBack();
+      }
+    })) : quoteNotificationMessage || insufficientAssetError;
+  }, [
+    hasFetchAssetsError,
+    fetchAssetsError,
+    quoteNotificationMessage,
+    insufficientAssetError
+  ]);
   useEffect19(() => {
     if (checkoutItem == null ? void 0 : checkoutItem.isDrafting) {
       setSelectedChainTokenSymbol("");
@@ -9393,8 +9333,8 @@ function MeshOrAccountSelectAsset({
     paddingBottom: showNotification ? "24" : "0"
   }, /* @__PURE__ */ React81.createElement(FunNotification, {
     isVisible: showNotification,
-    type: hasQuoteError ? "error" : "default",
-    description: quoteNotificationMessage || insufficientAssetError
+    type: hasQuoteError || hasFetchAssetsError ? "error" : "default",
+    description: notificationDescription
   })), /* @__PURE__ */ React81.createElement(FunButton, {
     type: "primary",
     title: "Continue",
@@ -9414,6 +9354,7 @@ function FunCheckoutSelectAssetStep({
   checkoutId,
   checkoutStep,
   onFinish,
+  onBack,
   isOnFinishLoading,
   animateOut = false
 }) {
@@ -9430,6 +9371,7 @@ function FunCheckoutSelectAssetStep({
   ) ? /* @__PURE__ */ React81.createElement(MeshOrAccountSelectAsset, {
     isOnFinishLoading,
     onFinish,
+    onBack,
     checkoutId,
     checkoutStep
   }) : /* @__PURE__ */ React81.createElement(Text, {
@@ -9735,7 +9677,7 @@ function FunCheckoutModal({
     const originalTargetChainId = checkoutItem == null ? void 0 : checkoutItem.initSettings.config.targetChain.toString();
     const moonpayChainId = [
       zkSync2.id.toString(),
-      mantle.id.toString()
+      mantle2.id.toString()
     ].includes(originalTargetChainId) ? arbitrum.id.toString() : originalTargetChainId;
     const wethAddrOnTargetChain = (await getTokenInfo2("weth", moonpayChainId)).toLowerCase();
     const isTargetAssetEthOrWeth = [NATIVE_TOKEN, wethAddrOnTargetChain].includes(
@@ -9860,6 +9802,7 @@ function FunCheckoutModal({
     checkoutStep,
     isOnFinishLoading: isSourceAssetConfirming,
     onFinish: triggerSourceAssetConfirmedFn,
+    onBack: titleConfig.onBack,
     animateOut
   }) : checkoutStep === "confirmation" /* CONFIRMATION */ ? /* @__PURE__ */ React83.createElement(FunCheckoutConfirmationStep, {
     checkoutId,
@@ -17351,7 +17294,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey6, version);
 }
 function getCurrentSdkVersion() {
-  return "1.3.0";
+  return "1.4.0";
 }
 function useFingerprint() {
   const fingerprint = useCallback33(() => {

package/dist/utils/flags/config.d.ts

@@ -15,10 +15,13 @@ export declare enum FlagKey {
      * - “Debit or Credit” → Card
      * - “Brokerage or Exchange” → Exchange
      */
-    PaymentMethodCopyV1 = "payment_method_copy_v1"
+    PaymentMethodCopyV1 = "payment_method_copy_v1",
+    /** Whether mantle assets can be used as source asset for payment in `isAssetUsableToPayForCheckout` */
+    DisableMantleSourceAssets = "disable_mantle_source_assets"
 }
 export declare const flagConfig: {
     [FlagKey.ConnectSignInShowSocialLabel]: BooleanFlagConfig;
     [FlagKey.SelectPaymentMethodText]: StringFlagConfig;
     [FlagKey.PaymentMethodCopyV1]: BooleanFlagConfig;
+    [FlagKey.DisableMantleSourceAssets]: BooleanFlagConfig;
 };

package/dist/utils/flags/index.d.ts

@@ -5,5 +5,6 @@ declare const singleton: FeatureFlag<{
     connect_sign_in_show_social_label: import("./types").BooleanFlagConfig;
     select_payment_method_text: import("./types").StringFlagConfig;
     payment_method_copy_v1: import("./types").BooleanFlagConfig;
+    disable_mantle_source_assets: import("./types").BooleanFlagConfig;
 }>;
 export declare const flags: Pick<typeof singleton, "init" | "getBool" | "getNumber" | "getString">;