@funkit/connect 1.0.15 → 1.0.16

package/dist/index.js

@@ -11,7 +11,7 @@ import {
 import "./chunk-UK5FXGK3.js";
 
 // src/components/ConnectButton/ConnectButton.tsx
-import React146, { useContext as useContext27, useEffect as useEffect32, useState as useState44 } from "react";
+import React148, { useContext as useContext27, useEffect as useEffect32, useState as useState46 } from "react";
 
 // src/css/sprinkles.css.ts
 import { createMapValueFn as _51c72 } from "@vanilla-extract/sprinkles/createUtils";
@@ -131,13 +131,13 @@ import PrivyJS, {
   getUserEmbeddedWallet,
   LocalStorage
 } from "@privy-io/js-sdk-core";
-import React141, {
+import React143, {
   createContext as createContext17,
   useCallback as useCallback27,
   useContext as useContext23,
   useEffect as useEffect28,
-  useMemo as useMemo33,
-  useState as useState39
+  useMemo as useMemo34,
+  useState as useState41
 } from "react";
 import { useConnect as useConnect2, useDisconnect as useDisconnect3 } from "wagmi";
 
@@ -482,13 +482,13 @@ var useFunkitConnectChainsById = () => {
 };
 
 // src/components/FunkitProvider/ModalContext.tsx
-import React140, {
+import React142, {
   createContext as createContext16,
   useCallback as useCallback26,
   useContext as useContext22,
   useEffect as useEffect27,
-  useMemo as useMemo32,
-  useState as useState38
+  useMemo as useMemo33,
+  useState as useState40
 } from "react";
 import { useAccount as useAccount11, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
 
@@ -1725,10 +1725,18 @@ var QUOTE_API_ERROR_STRING_INFO = {
     display: "Checkout amount is too low. Please try again with a higher amount."
   }
 };
+var QUOTE_CUSTOM_ERROR_STRING_INFO = {
+  [0 /* INSUFFICIENT_BALANCE */]: {
+    check: "custom error - insufficient balance",
+    display: "Insufficient wallet balance to perform checkout with fees. Please try again with a lower amount or another asset."
+  }
+};
 function generateQuoteApiErrorForDisplay(errorMessage = "") {
   const errorMessageNormalized = errorMessage.toLowerCase();
-  console.log(Object.values(QUOTE_API_ERROR_STRING_INFO));
-  const foundItem = Object.values(QUOTE_API_ERROR_STRING_INFO).find(
+  const foundItem = [
+    ...Object.values(QUOTE_API_ERROR_STRING_INFO),
+    ...Object.values(QUOTE_CUSTOM_ERROR_STRING_INFO)
+  ].find(
     (infoItem) => errorMessageNormalized.includes(infoItem.check.toLowerCase())
   );
   return (foundItem == null ? void 0 : foundItem.display) || "";
@@ -1997,25 +2005,35 @@ function validateCheckoutConfig(config, isUserLoggedIn) {
     message: "Valid checkout configuration, proceeding..."
   };
 }
+var hasSufficientBalance = async (wagmiConfig, walletAddress, tokenAddress, tokenChainId, tokenAddressAmount) => {
+  const finalTokenAddress = tokenAddress.toLowerCase() === FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS2.toLowerCase() ? void 0 : tokenAddress;
+  const data = await getBalance(wagmiConfig, {
+    address: walletAddress,
+    token: finalTokenAddress,
+    chainId: Number(tokenChainId)
+  });
+  logger.log("hasSufficientBalance_info", {
+    finalTokenAddress,
+    data,
+    tokenAddressAmount,
+    walletAddress
+  });
+  if (parseFloat(data.formatted) >= tokenAddressAmount) {
+    return { result: true, tokenTicker: data.symbol };
+  } else {
+    return { result: false, tokenTicker: null };
+  }
+};
 var testAutoExecutionDuringCheckout = async (config, walletAddress, wagmiConfig) => {
   const { targetAsset, targetAssetAmount, targetChain } = config;
   try {
-    const tokenAddress = targetAsset.toLowerCase() === FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS2.toLowerCase() ? void 0 : targetAsset;
-    const data = await getBalance(wagmiConfig, {
-      address: walletAddress,
-      token: tokenAddress,
-      chainId: Number(targetChain)
-    });
-    logger.log("testAutoExecutionDuringCheckout_info", {
-      tokenAddress,
-      data,
-      targetAssetAmount,
-      walletAddress
-    });
-    if (parseFloat(data.formatted) >= targetAssetAmount) {
-      return { result: true, tokenTicker: data.symbol };
-    }
-    return { result: false, tokenTicker: null };
+    return hasSufficientBalance(
+      wagmiConfig,
+      walletAddress,
+      targetAsset,
+      targetChain,
+      targetAssetAmount
+    );
   } catch (error) {
     logger.error(`testAutoExecutionDuringCheckout:error`, error);
     return { result: false, tokenTicker: null };
@@ -2114,7 +2132,14 @@ function categorizeCheckoutHistories(checkoutHistoryList) {
   checkoutHistoryList.forEach((item) => {
     depositAddrMap[item.depositAddr] = item;
     currentDepositAddrMap[item.currentDepositAddr] = item;
-    stateMap[item.state].push(item);
+    if (stateMap[item.state]) {
+      stateMap[item.state].push(item);
+    } else {
+      logger.error(
+        "categorizeCheckoutHistories_unrecognizedCheckoutState",
+        new Error("Unrecognized checkout state")
+      );
+    }
   });
   return { stateMap, depositAddrMap, currentDepositAddrMap };
 }
@@ -2316,9 +2341,9 @@ function FunkitCheckoutProvider({ children }) {
     []
   );
   const _initNewCheckout = useCallback6(
-    (initSettings, hasSufficientBalance, sourceSymbol) => {
+    (initSettings, hasSufficientBalance2, sourceSymbol) => {
       const newCheckoutId = uuid();
-      const isFastForwarded = hasSufficientBalance && !!initSettings.config.actionsParams.length;
+      const isFastForwarded = hasSufficientBalance2 && !!initSettings.config.actionsParams.length;
       const selectedSourceAssetFormatted = {
         address: isFastForwarded ? initSettings.config.targetAsset.toLowerCase() : null,
         chainId: isFastForwarded ? initSettings.config.targetChain : null,
@@ -2683,6 +2708,20 @@ function FunkitCheckoutProvider({ children }) {
         const finalTotalUsdAlt = (baseQuote.estTotalUsd - baseQuote.estFeesUsd + finalFeesBreakdown.totalFeesUsd).toString();
         logger.log("finalQuote", { finalEstimation, finalTotalUsdAlt });
         (_g = (_f = checkoutItem == null ? void 0 : checkoutItem.initSettings) == null ? void 0 : _f.onEstimation) == null ? void 0 : _g.call(_f, finalEstimation);
+        if (newPaymentMethodInfo.paymentMethod === "balance" /* ACCOUNT_BALANCE */) {
+          const { result } = await hasSufficientBalance(
+            wagmiConfig,
+            walletAddress,
+            checkoutItem.selectedSourceAssetInfo.address,
+            checkoutItem.selectedSourceAssetInfo.chainId,
+            Number(finalEstimation.finalPaymentTokenAmount)
+          );
+          if (!result) {
+            throw new Error(
+              QUOTE_CUSTOM_ERROR_STRING_INFO[0 /* INSUFFICIENT_BALANCE */].check
+            );
+          }
+        }
         checkoutItem = {
           ...checkoutItem,
           isQuoting: false,
@@ -2807,6 +2846,7 @@ function FunkitCheckoutProvider({ children }) {
   );
   const _generateClientMetadataForBackend = useCallback6(
     (checkoutId) => {
+      var _a, _b, _c, _d;
       const checkoutItem = _getAndValidateCheckoutItemByCheckoutId(checkoutId);
       return {
         id: checkoutItem.id,
@@ -2816,14 +2856,20 @@ function FunkitCheckoutProvider({ children }) {
         depositAddress: checkoutItem.depositAddress,
         initSettings: checkoutItem.initSettings,
         isFastForwarded: checkoutItem.isFastForwarded,
-        selectedSourceAssetInfo: checkoutItem.selectedSourceAssetInfo
+        selectedSourceAssetInfo: checkoutItem.selectedSourceAssetInfo,
+        selectedPaymentMethodInfo: {
+          paymentMethod: (_a = checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _a.paymentMethod,
+          title: (_b = checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _b.title,
+          description: (_c = checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _c.description,
+          meta: (_d = checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _d.meta
+        }
       };
     },
     [_getAndValidateCheckoutItemByCheckoutId]
   );
   const _confirmCheckout = useCallback6(
     async (checkoutId, shouldbatchOpBypassInit, stepMessageSetter) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (!(funkitConfig == null ? void 0 : funkitConfig.apiKey)) {
         throw new Error(
           `Funkit Internal Error: Unable to detect funkit api key`
@@ -2859,9 +2905,10 @@ function FunkitCheckoutProvider({ children }) {
         userOp: batchUserOp,
         quoteId: checkoutItem.latestQuote.baseQuote.quoteId,
         apiKey: funkitConfig.apiKey || "",
+        sourceOfFund: (_b = checkoutItem.selectedPaymentMethodInfo) == null ? void 0 : _b.paymentMethod,
         clientMetadata: _generateClientMetadataForBackend(checkoutId)
       });
-      (_c = (_b = checkoutItem == null ? void 0 : checkoutItem.initSettings) == null ? void 0 : _b.onConfirmation) == null ? void 0 : _c.call(_b);
+      (_d = (_c = checkoutItem == null ? void 0 : checkoutItem.initSettings) == null ? void 0 : _c.onConfirmation) == null ? void 0 : _d.call(_c);
       logger.log("checkoutConfirmed", { depositAddress });
       setActiveCheckouts({
         ...activeCheckouts,
@@ -3458,7 +3505,7 @@ function FunViewTxButton({ onClick }) {
     weight: "semibold",
     color: "buttonPrimary",
     style: { lineHeight: "24px" }
-  }, "View Transaction"));
+  }, "View Order"));
 }
 
 // src/components/FunProgressBar/FunHorizontalStepper.tsx
@@ -4658,6 +4705,7 @@ function CopyAddress({
 // src/components/FunButton/FunButton.tsx
 import React48 from "react";
 function FunButton({
+  id,
   title,
   onClick,
   titlePrefix,
@@ -4677,6 +4725,7 @@ function FunButton({
   };
   const hasBorder = !mobile && !isDisabled;
   return /* @__PURE__ */ React48.createElement(Box, {
+    id,
     as: "button",
     onClick: !isDisabled ? onClick : void 0,
     ...hasBorder ? {
@@ -4789,7 +4838,8 @@ function FunInputDefault({
     color: "modalText",
     display: "flex",
     flexDirection: "column",
-    gap: "8"
+    gap: "8",
+    width: "full"
   }, label && /* @__PURE__ */ React50.createElement(Text, {
     color: textColor,
     size: "14",
@@ -5329,7 +5379,7 @@ function FunTermsAndConditionsTextButton() {
   }, "By clicking Confirm Order you agree to our", /* @__PURE__ */ React54.createElement(FunLinkButton, {
     onClick: () => {
       window.open(
-        "https://the-fun-group.notion.site/the-fun-group/Funkit-Terms-and-Conditions-56cfbd786b3247ce9fae635d17786b39",
+        "https://the-fun-group.notion.site/Funkit-Terms-Conditions-8340448037474928b2d01b41ede947b2",
         "_blank"
       );
     },
@@ -5833,7 +5883,7 @@ function FunPaymentMethods({
       setSelectedOption(paymentsConfig.defaultPaymentMethod || null);
     }
   }, [reDraftSymbol]);
-  const hasSufficientBalance = useMemo14(() => {
+  const hasSufficientBalance2 = useMemo14(() => {
     if (!checkoutItem)
       return false;
     if (!(depositInfo == null ? void 0 : depositInfo.amount))
@@ -5866,7 +5916,7 @@ function FunPaymentMethods({
         };
       }
       const shouldDisableMoonpay = "card" /* CARD */ === paymentMethod && isAmountValidForMoonpay({ amountUsd: depositInfo == null ? void 0 : depositInfo.amount });
-      const shouldDisableAccBalance = "balance" /* ACCOUNT_BALANCE */ === paymentMethod && !hasSufficientBalance;
+      const shouldDisableAccBalance = "balance" /* ACCOUNT_BALANCE */ === paymentMethod && !hasSufficientBalance2;
       const isClickable = !isDisabled && !shouldDisableMoonpay && !shouldDisableAccBalance;
       return {
         paymentMethod,
@@ -5887,7 +5937,7 @@ function FunPaymentMethods({
   }, [
     (_b = (_a = checkoutItem == null ? void 0 : checkoutItem.initSettings) == null ? void 0 : _a.config) == null ? void 0 : _b.customRecipient,
     depositInfo == null ? void 0 : depositInfo.amount,
-    hasSufficientBalance,
+    hasSufficientBalance2,
     isContinuing,
     isDisabled,
     paymentFlow,
@@ -7042,6 +7092,7 @@ function FunPaymentMoonpayType({
     baseCurrencyCode: "usd",
     baseCurrencyAmount: paymentFlow === 0 /* DEPOSIT */ ? depositTokenAmountStringFormatted : void 0,
     quoteCurrencyAmount: paymentFlow === 0 /* DEPOSIT */ ? void 0 : depositTokenAmountStringFormatted,
+    lockAmount: true,
     currencyCode,
     walletAddress: paymentAddress,
     onUrlSignatureRequested: handleGetSignature,
@@ -8173,7 +8224,7 @@ var ProfileTitleSection = ({
     icon: /* @__PURE__ */ React91.createElement(SettingsIcon, null),
     onClick: () => {
       setAnimateOut(true);
-      setTimeout(() => onChangeView(1 /* SETTINGS */), 300);
+      setTimeout(() => onChangeView(1 /* SETTINGS */), 200);
     },
     size: "24"
   }), /* @__PURE__ */ React91.createElement(FunIconButton, {
@@ -11838,7 +11889,7 @@ function ConnectModal({ onClose, open }) {
 }
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryModal.tsx
-import React138 from "react";
+import React140, { useMemo as useMemo32, useState as useState39 } from "react";
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryDetail.tsx
 import {
@@ -11866,7 +11917,10 @@ var EditIcon = ({ size = "24" }) => /* @__PURE__ */ React129.createElement("svg"
 })));
 
 // src/components/FunCheckoutModal/FunCheckoutModal.tsx
-import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO8 } from "@funkit/core";
+import {
+  FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO8,
+  getTokenInfo as getTokenInfo2
+} from "@funkit/core";
 import React135, { useCallback as useCallback24, useEffect as useEffect25, useMemo as useMemo29, useState as useState36 } from "react";
 
 // src/hooks/useCheckoutAccountBalanceTransfer.ts
@@ -13049,7 +13103,10 @@ function FunCheckoutModal({
         const targetChainId = checkoutItem == null ? void 0 : checkoutItem.initSettings.config.targetChain.toString();
         let sourceTokenAddress;
         let sourceTokenTicker;
-        if (((_a2 = checkoutItem == null ? void 0 : checkoutItem.initSettings) == null ? void 0 : _a2.config.targetAsset) === NATIVE_TOKEN && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO8[targetChainId].nativeCurrency.symbol === "ETH" /* ETH */) {
+        const wethAddrOnTargetChain = (await getTokenInfo2("weth", targetChainId)).toLowerCase();
+        if ([NATIVE_TOKEN, wethAddrOnTargetChain].includes(
+          (_a2 = checkoutItem == null ? void 0 : checkoutItem.initSettings) == null ? void 0 : _a2.config.targetAsset
+        ) && FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO8[targetChainId].nativeCurrency.symbol === "ETH" /* ETH */) {
           sourceTokenAddress = NATIVE_TOKEN;
           sourceTokenTicker = "ETH" /* ETH */;
         } else {
@@ -13340,10 +13397,11 @@ function CheckoutPrimaryInfo({
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryDetail.tsx
 var FAKE_DELAY_MS = 4107;
 function FunCheckoutHistoryDetail({
-  checkoutHistoryInfo
+  checkoutHistoryInfo,
+  setCurrentPage,
+  animateOut
 }) {
   const checkoutItem = checkoutHistoryInfo.clientMetadata;
-  console.log("checkoutItem", checkoutItem);
   const { isCheckoutDirectCrFlow } = useCheckoutType(checkoutItem);
   const {
     isProcessing,
@@ -13397,7 +13455,7 @@ function FunCheckoutHistoryDetail({
             )
           ) : isTerminal ? formatTimestamp(
             new Date(checkoutHistoryInfo.lastUpdatedTimeMs)
-          ) : estimatedEndTimeInfo.isExceededEstimation ? "" : `Estimated to complete in ${formatSecondsToReadableForm(
+          ) : estimatedEndTimeInfo.isExceededEstimation ? "Order is experiencing delays. We appreciate your patience." : `Estimated completion in ${formatSecondsToReadableForm(
             Math.floor(
               estimatedEndTimeInfo.estimatedEndTimeFromNowMs / 1e3
             ),
@@ -13427,11 +13485,22 @@ function FunCheckoutHistoryDetail({
     estimatedEndTimeInfo.estimatedEndTimeFromNowMs,
     isCompleted
   ]);
+  const GetHelpButton = /* @__PURE__ */ React137.createElement(FunLinkButton, {
+    hasPadding: false,
+    text: "Get Help \u{1F449}",
+    textProps: {
+      size: "12",
+      weight: "medium",
+      color: "modalTextSecondary"
+    },
+    onClick: () => setCurrentPage(1 /* HELP */)
+  });
   return /* @__PURE__ */ React137.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "24",
-    paddingY: "24"
+    paddingY: "24",
+    className: animateOut ? animateContentOutClass : animateContentInClass
   }, /* @__PURE__ */ React137.createElement(Box, {
     display: "flex",
     flexDirection: "column",
@@ -13441,21 +13510,13 @@ function FunCheckoutHistoryDetail({
     checkoutItem,
     isLoading: false,
     isEditable: false
-  }), isCheckoutDirectCrFlow || isTerminal ? null : /* @__PURE__ */ React137.createElement(FunNotification, {
-    description: "We are currently processing your order."
+  }), isTerminal ? null : /* @__PURE__ */ React137.createElement(FunNotification, {
+    description: isCheckoutDirectCrFlow ? "Funds may take up to 10 minutes to arrive." : "We are currently processing your order."
   }), /* @__PURE__ */ React137.createElement(FunVerticalProgressBar, {
     step: isCheckoutDirectCrFlow ? 2 : isTerminal ? 3 : 2,
     totalSteps: timelineLabels.length,
     labels: timelineLabels
-  }), isTerminal || !isCheckoutDirectCrFlow ? null : /* @__PURE__ */ React137.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center"
-  }, /* @__PURE__ */ React137.createElement(Text, {
-    size: "12",
-    color: "modalTextDim"
-  }, "Funds may take up to 10 minutes to arrive."))), isFailedFinal ? /* @__PURE__ */ React137.createElement(FunToast, {
+  })), isFailedFinal ? /* @__PURE__ */ React137.createElement(FunToast, {
     type: 1 /* ERROR */,
     title: "Order Failed",
     isDescriptionText: false,
@@ -13463,20 +13524,243 @@ function FunCheckoutHistoryDetail({
       size: "12",
       weight: "medium",
       color: "modalTextDim"
-    }, "A problem occurred processing your order. Please", /* @__PURE__ */ React137.createElement(FunLinkButton, {
-      hasPadding: false,
-      text: "contact support",
-      textProps: {
-        size: "12",
-        weight: "medium",
-        color: "modalTextSecondary"
-      },
-      onClick: () => {
-        window.location = "mailto:support@fun.xyz";
-      }
-    }), " ", "for more information."),
+    }, "A problem occurred processing your order. ", GetHelpButton),
     hideTitleSuffix: true
-  }) : null);
+  }) : /* @__PURE__ */ React137.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  }, /* @__PURE__ */ React137.createElement(Text, {
+    size: "12",
+    color: "modalTextDim"
+  }, "Experiencing problems? ", GetHelpButton)));
+}
+
+// src/components/FunCheckoutHistoryModal/FunCheckoutHistoryHelp.tsx
+import React139, { useState as useState38 } from "react";
+
+// src/components/FunInput/FunTextAreaInput.tsx
+import React138 from "react";
+function FunTextAreaInput({
+  placeholder,
+  value,
+  label,
+  onChange,
+  onKeyDown,
+  onKeySubmit,
+  hasBackground = true,
+  textColor = "modalTextSecondary",
+  inputStyle = {},
+  inputProps = {
+    type: "text"
+  },
+  error,
+  focused: _focused,
+  overrideBorderWidth
+}) {
+  const [focused, setFocused] = React138.useState(false);
+  const onFocus = () => setFocused(true);
+  const onBlur = () => setFocused(false);
+  return /* @__PURE__ */ React138.createElement(Box, {
+    color: "modalText",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8"
+  }, label && /* @__PURE__ */ React138.createElement(Text, {
+    color: textColor,
+    size: "14",
+    weight: "medium"
+  }, label), /* @__PURE__ */ React138.createElement(Box, {
+    background: hasBackground ? "actionButtonSecondaryBackground" : void 0,
+    borderRadius: "menuButton",
+    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"
+  }, /* @__PURE__ */ React138.createElement("textarea", {
+    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();
+      }
+    },
+    onFocus,
+    onBlur,
+    onWheel: (e) => e.currentTarget.blur(),
+    className: inputProps.disabled ? inputClassDisabled : inputClass,
+    ...inputProps,
+    style: {
+      fontWeight: value ? "590" : "500",
+      ...inputStyle
+    }
+  })), error && typeof error === "string" && /* @__PURE__ */ React138.createElement(Text, {
+    color: "error",
+    size: "14",
+    weight: "medium"
+  }, error));
+}
+
+// src/components/FunCheckoutHistoryModal/FunCheckoutHistoryHelp.tsx
+function FunCheckoutHistoryHelp({
+  checkoutHistoryInfo,
+  animateOut
+}) {
+  const { appName, apiKey } = useFunkitConfig();
+  const { userInfo } = useGeneralWallet();
+  const [isSubmitting, setIsSubmitting] = useState38(false);
+  const [nameInput, setNameInput] = useState38("");
+  const [telegramInput, setTelegramInput] = useState38("");
+  const [subjectInput, setSubjectInput] = useState38("");
+  const [refundAddressInput, setRefundAddressInput] = useState38("");
+  const [refundChainInput, setRefundChainInput] = useState38("");
+  const [descriptionInput, setDescriptionInput] = useState38("");
+  const onSubmitIssue = (e) => {
+    setIsSubmitting(true);
+    const emailSubject = `[Checkout Help Report] ${subjectInput}`;
+    const emailBody = `
+Checkout ID (Do not remove): ${checkoutHistoryInfo.depositAddr}
+
+App Name: ${appName}
+
+App ID: ${apiKey}
+
+User ID: ${userInfo.userId || "NA"}
+
+=========================
+
+User Name: ${nameInput}
+
+User Telegram ID: ${telegramInput || "NA"}
+
+User Refund Address: ${refundAddressInput || "NA"}
+
+User Refund Chain: ${refundChainInput || "NA"}
+
+=========================
+
+${descriptionInput}
+
+    `;
+    window.location.href = `mailto:support@fun.xyz?subject=${encodeURIComponent(
+      emailSubject
+    )}&body=${encodeURIComponent(emailBody)}`;
+    e.preventDefault();
+    logger.log("checkoutReportStarted", { emailSubject, emailBody });
+    setIsSubmitting(false);
+  };
+  return /* @__PURE__ */ React139.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24",
+    paddingY: "24",
+    className: animateOut ? animateContentOutClass : animateContentInClass
+  }, /* @__PURE__ */ React139.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10"
+  }, /* @__PURE__ */ React139.createElement(Text, {
+    color: "modalText",
+    size: "18",
+    weight: "heavy"
+  }, "Tell us what's wrong"), /* @__PURE__ */ React139.createElement(Text, {
+    color: "modalTextSecondary",
+    size: "14",
+    weight: "medium"
+  }, "If you're experiencing an issue or have a question, please fill out the form below with as much detail as possible. Our support team is committed to assisting you promptly and effectively.")), /* @__PURE__ */ React139.createElement(FunInput, {
+    inputProps: { disabled: true },
+    inputStyle: { fontSize: 14 },
+    label: "Checkout ID",
+    placeholder: checkoutHistoryInfo.depositAddr,
+    value: "",
+    onChange: () => void 0
+  }), /* @__PURE__ */ React139.createElement(Box, {
+    display: "flex",
+    gap: "10",
+    width: "full"
+  }, /* @__PURE__ */ React139.createElement(FunInput, {
+    label: "Name*",
+    inputStyle: { fontSize: 14 },
+    placeholder: "",
+    value: nameInput,
+    onChange: (e) => {
+      var _a;
+      return setNameInput((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+    }
+  }), /* @__PURE__ */ React139.createElement(FunInput, {
+    label: "Telegram (@xyz)",
+    inputStyle: { fontSize: 14 },
+    placeholder: "",
+    value: telegramInput,
+    onChange: (e) => {
+      var _a;
+      return setTelegramInput((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+    }
+  })), /* @__PURE__ */ React139.createElement(FunInput, {
+    label: "Subject*",
+    inputStyle: { fontSize: 14 },
+    placeholder: "",
+    value: subjectInput,
+    onChange: (e) => {
+      var _a;
+      return setSubjectInput((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+    }
+  }), /* @__PURE__ */ React139.createElement(FunTextAreaInput, {
+    label: "Description*",
+    inputStyle: { fontSize: 14, fontFamily: "inherit" },
+    placeholder: "",
+    value: descriptionInput,
+    onChange: (e) => {
+      var _a;
+      return setDescriptionInput((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+    }
+  }), /* @__PURE__ */ React139.createElement(Box, {
+    display: "flex",
+    gap: "10",
+    width: "full"
+  }, /* @__PURE__ */ React139.createElement(FunInput, {
+    label: "Refund Address (if any)",
+    inputStyle: { fontSize: 14, fontFamily: "inherit" },
+    placeholder: "",
+    value: refundAddressInput,
+    onChange: (e) => {
+      var _a;
+      return setRefundAddressInput((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+    }
+  }), /* @__PURE__ */ React139.createElement(FunInput, {
+    label: "Refund Chain (if any)",
+    inputStyle: { fontSize: 14, fontFamily: "inherit" },
+    placeholder: "",
+    value: refundChainInput,
+    onChange: (e) => {
+      var _a;
+      return setRefundChainInput((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+    }
+  })), /* @__PURE__ */ React139.createElement(FunButton, {
+    title: "Submit",
+    onClick: (e) => onSubmitIssue(e),
+    isDisabled: !nameInput || !subjectInput || !descriptionInput,
+    titleSuffix: isSubmitting ? /* @__PURE__ */ React139.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      color: "modalText"
+    }, /* @__PURE__ */ React139.createElement(SpinnerIcon, {
+      height: 16,
+      width: 16
+    })) : null
+  }));
 }
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryModal.tsx
@@ -13491,22 +13775,49 @@ function FunCheckoutHistoryModal({
     );
   }
   const { checkoutHistoryInfo, isLoading } = useFunkitPostCheckoutInternal(depositAddress);
-  return /* @__PURE__ */ React138.createElement(Dialog, {
+  const [currentPage, setCurrentPage] = useState39(
+    0 /* DETAIL */
+  );
+  const ANIMATION_DELAY2 = 150;
+  const [animateOut, setAnimateOut] = useState39(false);
+  const titleConfig = useMemo32(() => {
+    if (currentPage === 1 /* HELP */) {
+      return {
+        hasBackButton: true,
+        onBack: () => {
+          setAnimateOut(true);
+          setTimeout(() => {
+            setCurrentPage(0 /* DETAIL */);
+            setAnimateOut(false);
+          }, ANIMATION_DELAY2);
+        },
+        title: "Get Help"
+      };
+    } else {
+      return {
+        hasBackButton: false,
+        onBack: () => void 0,
+        title: "Order"
+      };
+    }
+  }, [currentPage]);
+  return /* @__PURE__ */ React140.createElement(Dialog, {
     open,
     onClose,
     titleId: "fun-checkout-history-modal"
-  }, /* @__PURE__ */ React138.createElement(DialogContent, {
+  }, /* @__PURE__ */ React140.createElement(DialogContent, {
     bottomSheetOnMobile: true,
     padding: "0"
-  }, /* @__PURE__ */ React138.createElement(Box, {
+  }, /* @__PURE__ */ React140.createElement(Box, {
     paddingTop: "20",
     paddingX: "20"
-  }, /* @__PURE__ */ React138.createElement(FunModalTitleSection, {
-    hasBackButton: false,
-    title: "Order",
+  }, /* @__PURE__ */ React140.createElement(FunModalTitleSection, {
+    hasBackButton: titleConfig.hasBackButton,
+    onBack: titleConfig.onBack,
+    title: titleConfig.title,
     hasCloseButton: true,
     onClose
-  }), isLoading ? /* @__PURE__ */ React138.createElement(Box, {
+  }), isLoading ? /* @__PURE__ */ React140.createElement(Box, {
     width: "full",
     height: "200",
     display: "flex",
@@ -13514,26 +13825,31 @@ function FunCheckoutHistoryModal({
     alignItems: "center",
     justifyContent: "center",
     color: "modalText"
-  }, /* @__PURE__ */ React138.createElement(SpinnerIcon, null)) : checkoutHistoryInfo ? /* @__PURE__ */ React138.createElement(FunCheckoutHistoryDetail, {
-    checkoutHistoryInfo
-  }) : null)));
+  }, /* @__PURE__ */ React140.createElement(SpinnerIcon, null)) : checkoutHistoryInfo ? currentPage === 0 /* DETAIL */ ? /* @__PURE__ */ React140.createElement(FunCheckoutHistoryDetail, {
+    checkoutHistoryInfo,
+    setCurrentPage,
+    animateOut
+  }) : currentPage === 1 /* HELP */ ? /* @__PURE__ */ React140.createElement(FunCheckoutHistoryHelp, {
+    checkoutHistoryInfo,
+    animateOut
+  }) : null : null)));
 }
 
 // src/components/FunDevTestModal/FunDevTestModal.tsx
-import React139 from "react";
+import React141 from "react";
 function FunDevTestModal({ onClose, open }) {
-  return /* @__PURE__ */ React139.createElement(Dialog, {
+  return /* @__PURE__ */ React141.createElement(Dialog, {
     onClose,
     open,
     titleId: "dev/test modal"
-  }, /* @__PURE__ */ React139.createElement(DialogContent, {
+  }, /* @__PURE__ */ React141.createElement(DialogContent, {
     bottomSheetOnMobile: true
-  }, /* @__PURE__ */ React139.createElement(Box, null)));
+  }, /* @__PURE__ */ React141.createElement(Box, null)));
 }
 
 // src/components/FunkitProvider/ModalContext.tsx
 function useModalStateValue() {
-  const [isModalOpen, setModalOpen] = useState38(false);
+  const [isModalOpen, setModalOpen] = useState40(false);
   return {
     closeModal: useCallback26(() => setModalOpen(false), []),
     isModalOpen,
@@ -13541,8 +13857,8 @@ function useModalStateValue() {
   };
 }
 function useModalStateValueWithId() {
-  const [isModalOpen, setModalOpen] = useState38(false);
-  const [modalId, setModalId] = useState38(null);
+  const [isModalOpen, setModalOpen] = useState40(false);
+  const [modalId, setModalId] = useState40(null);
   return {
     closeModal: useCallback26(() => {
       setModalId(null);
@@ -13583,7 +13899,7 @@ function ModalProvider({ children }) {
     isModalOpen: chainModalOpen,
     openModal: openChainModal
   } = useModalStateValue();
-  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState38(false);
+  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState40(false);
   const {
     closeModal: closeFunCheckoutModal,
     isModalOpen: funCheckoutModalOpen,
@@ -13625,8 +13941,8 @@ function ModalProvider({ children }) {
     if (isUnauthenticated)
       closeModals();
   }, [isUnauthenticated]);
-  return /* @__PURE__ */ React140.createElement(ModalContext.Provider, {
-    value: useMemo32(
+  return /* @__PURE__ */ React142.createElement(ModalContext.Provider, {
+    value: useMemo33(
       () => ({
         accountModalOpen,
         chainModalOpen,
@@ -13665,25 +13981,25 @@ function ModalProvider({ children }) {
         openFunDevTestModal
       ]
     )
-  }, children, /* @__PURE__ */ React140.createElement(ConnectModal, {
+  }, children, /* @__PURE__ */ React142.createElement(ConnectModal, {
     onClose: closeConnectModal,
     open: connectModalOpen
-  }), /* @__PURE__ */ React140.createElement(AccountModal, {
+  }), /* @__PURE__ */ React142.createElement(AccountModal, {
     onClose: closeAccountModal,
     open: accountModalOpen
-  }), /* @__PURE__ */ React140.createElement(ChainModal, {
+  }), /* @__PURE__ */ React142.createElement(ChainModal, {
     onClose: closeChainModal,
     open: chainModalOpen
-  }), /* @__PURE__ */ React140.createElement(FunCheckoutModal, {
+  }), /* @__PURE__ */ React142.createElement(FunCheckoutModal, {
     onClose: closeFunCheckoutModal,
     open: funCheckoutModalOpen,
     checkoutId: funCheckoutModalId,
     key: funCheckoutModalId
-  }), depositAddress ? /* @__PURE__ */ React140.createElement(FunCheckoutHistoryModal, {
+  }), depositAddress ? /* @__PURE__ */ React142.createElement(FunCheckoutHistoryModal, {
     onClose: closeFunCheckoutHistoryModal,
     open: funCheckoutHistoryModalOpen,
     depositAddress
-  }) : null, /* @__PURE__ */ React140.createElement(FunDevTestModal, {
+  }) : null, /* @__PURE__ */ React142.createElement(FunDevTestModal, {
     onClose: closeFunDevTestModal,
     open: funDevTestModalOpen
   }));
@@ -13967,15 +14283,15 @@ var FunkitWeb2Provider = ({
   const funkitConfig = useFunkitConfig();
   const { connectAsync } = useConnect2();
   const { connectors, disconnectAsync } = useDisconnect3();
-  const [privy, setPrivy] = useState39(null);
-  const [privyIframeUrl, setPrivyIframeUrl] = useState39();
-  const [loginMethod, setLoginMethod] = useState39(
+  const [privy, setPrivy] = useState41(null);
+  const [privyIframeUrl, setPrivyIframeUrl] = useState41();
+  const [loginMethod, setLoginMethod] = useState41(
     getLoginMethodFromCache() || null
   );
   const wallets = useWalletConnectors();
-  const [isLoggingIn, setIsLoggingIn] = useState39(false);
-  const [loginErrorMessage, setLoginErrorMessage] = useState39("");
-  const [loggedInUser, setLoggedInUser] = useState39(null);
+  const [isLoggingIn, setIsLoggingIn] = useState41(false);
+  const [loginErrorMessage, setLoginErrorMessage] = useState41("");
+  const [loggedInUser, setLoggedInUser] = useState41(null);
   const setLoginMethodAndCache = useCallback27(
     (method) => {
       try {
@@ -14212,7 +14528,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState39(false);
+  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState41(false);
   const handleSendOtpEmail = useCallback27(
     async (emailAddress) => {
       try {
@@ -14240,7 +14556,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const userAccountInfo = useMemo33(() => {
+  const userAccountInfo = useMemo34(() => {
     if (loggedInUser && loggedInUser.linked_accounts && loggedInUser.linked_accounts.length > 0) {
       const loggedInAccount = loggedInUser.linked_accounts.find(
         (account) => (account == null ? void 0 : account.type) === loginMethod
@@ -14290,9 +14606,9 @@ var FunkitWeb2Provider = ({
     handleFunkitWeb2Logout,
     web2AccountInfo: userAccountInfo
   };
-  return /* @__PURE__ */ React141.createElement(FunkitWeb2Context.Provider, {
+  return /* @__PURE__ */ React143.createElement(FunkitWeb2Context.Provider, {
     value: contextValue
-  }, privyIframeUrl ? /* @__PURE__ */ React141.createElement("iframe", {
+  }, privyIframeUrl ? /* @__PURE__ */ React143.createElement("iframe", {
     id: PRIVY_IFRAME_ID,
     src: privyIframeUrl,
     style: { display: "none" }
@@ -14321,27 +14637,27 @@ function useConnectionStatus() {
 }
 
 // src/components/FunkitProvider/ShowBalanceContext.tsx
-import React142, { createContext as createContext18, useContext as useContext24, useState as useState40 } from "react";
+import React144, { createContext as createContext18, useContext as useContext24, useState as useState42 } from "react";
 var ShowBalanceContext = createContext18({
   showBalance: void 0,
   setShowBalance: () => void 0
 });
 function ShowBalanceProvider({ children }) {
-  const [showBalance, setShowBalance] = useState40();
-  return /* @__PURE__ */ React142.createElement(ShowBalanceContext.Provider, {
+  const [showBalance, setShowBalance] = useState42();
+  return /* @__PURE__ */ React144.createElement(ShowBalanceContext.Provider, {
     value: { showBalance, setShowBalance }
   }, children);
 }
 var useShowBalance = () => useContext24(ShowBalanceContext);
 
 // src/components/Icons/Dropdown.tsx
-import React143 from "react";
-var DropdownIcon = () => /* @__PURE__ */ React143.createElement("svg", {
+import React145 from "react";
+var DropdownIcon = () => /* @__PURE__ */ React145.createElement("svg", {
   fill: "none",
   height: "7",
   width: "14",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React143.createElement("path", {
+}, /* @__PURE__ */ React145.createElement("path", {
   d: "M12.75 1.54001L8.51647 5.0038C7.77974 5.60658 6.72026 5.60658 5.98352 5.0038L1.75 1.54001",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -14351,13 +14667,13 @@ var DropdownIcon = () => /* @__PURE__ */ React143.createElement("svg", {
 }));
 
 // src/components/ConnectButton/ConnectButtonRenderer.tsx
-import React145, { useContext as useContext26 } from "react";
+import React147, { useContext as useContext26 } from "react";
 import { useAccount as useAccount16, useBalance, useConfig as useConfig5 } from "wagmi";
 
 // src/hooks/useIsMounted.ts
-import { useCallback as useCallback28, useEffect as useEffect29, useState as useState41 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect29, useState as useState43 } from "react";
 function useIsMounted() {
-  const [isMounted, setIsMounted] = useState41(false);
+  const [isMounted, setIsMounted] = useState43(false);
   useEffect29(() => {
     setIsMounted(true);
     return () => {
@@ -14384,7 +14700,7 @@ function useMainnetEnsAvatar(name) {
 }
 
 // src/transactions/useRecentTransactions.ts
-import { useEffect as useEffect31, useState as useState43 } from "react";
+import { useEffect as useEffect31, useState as useState45 } from "react";
 import { useAccount as useAccount15 } from "wagmi";
 
 // src/hooks/useChainId.ts
@@ -14396,7 +14712,7 @@ function useChainId() {
 }
 
 // src/transactions/TransactionStoreContext.tsx
-import React144, { createContext as createContext19, useContext as useContext25, useEffect as useEffect30, useState as useState42 } from "react";
+import React146, { createContext as createContext19, useContext as useContext25, useEffect as useEffect30, useState as useState44 } from "react";
 import { useAccount as useAccount14, usePublicClient } from "wagmi";
 
 // src/transactions/transactionStore.ts
@@ -14546,7 +14862,7 @@ function TransactionStoreProvider({
   const provider = usePublicClient();
   const { address } = useAccount14();
   const chainId = useChainId();
-  const [store] = useState42(
+  const [store] = useState44(
     () => storeSingleton != null ? storeSingleton : storeSingleton = createTransactionStore({ provider })
   );
   useEffect30(() => {
@@ -14557,7 +14873,7 @@ function TransactionStoreProvider({
       store.waitForPendingTransactions(address, chainId);
     }
   }, [store, address, chainId]);
-  return /* @__PURE__ */ React144.createElement(TransactionStoreContext.Provider, {
+  return /* @__PURE__ */ React146.createElement(TransactionStoreContext.Provider, {
     value: store
   }, children);
 }
@@ -14574,7 +14890,7 @@ function useRecentTransactions() {
   const store = useTransactionStore();
   const { address } = useAccount15();
   const chainId = useChainId();
-  const [transactions, setTransactions] = useState43(
+  const [transactions, setTransactions] = useState45(
     () => store && address && chainId ? store.getTransactions(address, chainId) : []
   );
   useEffect31(() => {
@@ -14661,7 +14977,7 @@ function ConnectButtonRenderer({
   const { openChainModal } = useChainModal();
   const { openAccountModal } = useAccountModal();
   const { accountModalOpen, chainModalOpen, connectModalOpen } = useModalState();
-  return /* @__PURE__ */ React145.createElement(React145.Fragment, null, children({
+  return /* @__PURE__ */ React147.createElement(React147.Fragment, null, children({
     account: address ? {
       address,
       balanceDecimals: balanceData == null ? void 0 : balanceData.decimals,
@@ -14709,7 +15025,7 @@ function ChainSelectorButton({
 }) {
   var _a, _b;
   const { i18n: i18n2 } = useContext27(I18nContext);
-  return /* @__PURE__ */ React146.createElement(Box, {
+  return /* @__PURE__ */ React148.createElement(Box, {
     alignItems: "center",
     "aria-label": "Chain Selector",
     as: "button",
@@ -14735,37 +15051,37 @@ function ChainSelectorButton({
     testId: unsupportedChain ? "wrong-network-button" : "chain-button",
     transition: "default",
     type: "button"
-  }, unsupportedChain ? /* @__PURE__ */ React146.createElement(Box, {
+  }, unsupportedChain ? /* @__PURE__ */ React148.createElement(Box, {
     alignItems: "center",
     display: "flex",
     height: "24",
     paddingX: "4"
-  }, i18n2.t("connect_wallet.wrong_network.label")) : /* @__PURE__ */ React146.createElement(Box, {
+  }, i18n2.t("connect_wallet.wrong_network.label")) : /* @__PURE__ */ React148.createElement(Box, {
     alignItems: "center",
     display: "flex",
     gap: "6"
-  }, chain.hasIcon ? /* @__PURE__ */ React146.createElement(Box, {
+  }, chain.hasIcon ? /* @__PURE__ */ React148.createElement(Box, {
     display: mapResponsiveValue(
       chainStatus,
       (value) => value === "full" || value === "icon" ? "block" : "none"
     ),
     height: "24",
     width: "24"
-  }, /* @__PURE__ */ React146.createElement(AsyncImage, {
+  }, /* @__PURE__ */ React148.createElement(AsyncImage, {
     alt: (_a = chain.name) != null ? _a : "Chain icon",
     background: chain.iconBackground,
     borderRadius: "full",
     height: "24",
     src: chain.iconUrl,
     width: "24"
-  })) : null, /* @__PURE__ */ React146.createElement(Box, {
+  })) : null, /* @__PURE__ */ React148.createElement(Box, {
     display: mapResponsiveValue(chainStatus, (value) => {
       if (value === "icon" && !chain.iconUrl) {
         return "block";
       }
       return value === "full" || value === "name" ? "block" : "none";
     })
-  }, (_b = chain.name) != null ? _b : chain.id)), /* @__PURE__ */ React146.createElement(DropdownIcon, null));
+  }, (_b = chain.name) != null ? _b : chain.id)), /* @__PURE__ */ React148.createElement(DropdownIcon, null));
 }
 function AccountButton({
   openAccountModal,
@@ -14774,7 +15090,7 @@ function AccountButton({
   accountStatus
 }) {
   const { userInfo } = useGeneralWallet();
-  return /* @__PURE__ */ React146.createElement(Box, {
+  return /* @__PURE__ */ React148.createElement(Box, {
     alignItems: "center",
     as: "button",
     background: "accentColor",
@@ -14792,14 +15108,14 @@ function AccountButton({
     testId: "account-button",
     transition: "default",
     type: "button"
-  }, account.displayBalance && /* @__PURE__ */ React146.createElement(Box, {
+  }, account.displayBalance && /* @__PURE__ */ React148.createElement(Box, {
     display: mapResponsiveValue(
       showBalance,
       (value) => value ? "block" : "none"
     ),
     padding: "8",
     paddingLeft: "12"
-  }, account.displayBalance), /* @__PURE__ */ React146.createElement(Box, {
+  }, account.displayBalance), /* @__PURE__ */ React148.createElement(Box, {
     background: "connectButtonInnerBackground",
     borderColor: "accentColor",
     borderRadius: "connectButton",
@@ -14811,32 +15127,32 @@ function AccountButton({
     paddingX: "8",
     paddingY: "6",
     transition: "default"
-  }, /* @__PURE__ */ React146.createElement(Box, {
+  }, /* @__PURE__ */ React148.createElement(Box, {
     alignItems: "center",
     display: "flex",
     gap: "6",
     height: "24"
-  }, /* @__PURE__ */ React146.createElement(Box, {
+  }, /* @__PURE__ */ React148.createElement(Box, {
     display: mapResponsiveValue(
       accountStatus,
       (value) => value === "full" || value === "avatar" ? "block" : "none"
     )
-  }, /* @__PURE__ */ React146.createElement(Avatar, {
+  }, /* @__PURE__ */ React148.createElement(Avatar, {
     address: account.address,
     imageUrl: account.ensAvatar,
     loading: account.hasPendingTransactions,
     size: 24
-  })), /* @__PURE__ */ React146.createElement(Box, {
+  })), /* @__PURE__ */ React148.createElement(Box, {
     alignItems: "center",
     display: "flex",
     gap: "6"
-  }, /* @__PURE__ */ React146.createElement(Box, {
+  }, /* @__PURE__ */ React148.createElement(Box, {
     display: mapResponsiveValue(
       accountStatus,
       (value) => value === "full" || value === "address" ? "block" : "none"
     ),
     style: { textWrap: "nowrap" }
-  }, userInfo.accountName), /* @__PURE__ */ React146.createElement(DropdownIcon, null)))));
+  }, userInfo.accountName), /* @__PURE__ */ React148.createElement(DropdownIcon, null)))));
 }
 function ConnectButton({
   accountStatus = defaultProps.accountStatus,
@@ -14848,14 +15164,14 @@ function ConnectButton({
   const chains = useFunkitConnectChains();
   const connectionStatus = useConnectionStatus();
   const { setShowBalance } = useShowBalance();
-  const [ready, setReady] = useState44(false);
+  const [ready, setReady] = useState46(false);
   const { i18n: i18n2 } = useContext27(I18nContext);
   useEffect32(() => {
     setShowBalance(showBalance);
     if (!ready)
       setReady(true);
   }, [showBalance, setShowBalance, ready]);
-  return ready ? /* @__PURE__ */ React146.createElement(ConnectButtonRenderer, null, ({
+  return ready ? /* @__PURE__ */ React148.createElement(ConnectButtonRenderer, null, ({
     account,
     chain,
     mounted,
@@ -14866,7 +15182,7 @@ function ConnectButton({
     var _a;
     const ready2 = mounted && connectionStatus !== "loading";
     const unsupportedChain = (_a = chain == null ? void 0 : chain.unsupported) != null ? _a : false;
-    return /* @__PURE__ */ React146.createElement(Box, {
+    return /* @__PURE__ */ React148.createElement(Box, {
       display: "flex",
       gap: "12",
       ...!ready2 && {
@@ -14877,17 +15193,17 @@ function ConnectButton({
           userSelect: "none"
         }
       }
-    }, ready2 && account && connectionStatus === "connected" ? /* @__PURE__ */ React146.createElement(React146.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React146.createElement(ChainSelectorButton, {
+    }, ready2 && account && connectionStatus === "connected" ? /* @__PURE__ */ React148.createElement(React148.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React148.createElement(ChainSelectorButton, {
       unsupportedChain,
       chainStatus,
       openChainModal,
       chain
-    }), !unsupportedChain && /* @__PURE__ */ React146.createElement(AccountButton, {
+    }), !unsupportedChain && /* @__PURE__ */ React148.createElement(AccountButton, {
       openAccountModal,
       account,
       showBalance,
       accountStatus
-    })) : /* @__PURE__ */ React146.createElement(Box, {
+    })) : /* @__PURE__ */ React148.createElement(Box, {
       as: "button",
       background: "accentColor",
       borderRadius: "connectButton",
@@ -14907,14 +15223,14 @@ function ConnectButton({
       transition: "default",
       type: "button"
     }, mounted && label === "Connect Wallet" ? i18n2.t("connect_wallet.label") : label));
-  }) : /* @__PURE__ */ React146.createElement(React146.Fragment, null);
+  }) : /* @__PURE__ */ React148.createElement(React148.Fragment, null);
 }
 ConnectButton.__defaultProps = defaultProps;
 ConnectButton.Custom = ConnectButtonRenderer;
 
 // src/components/FunkitProvider/FunkitProvider.tsx
 import { QueryClientProvider } from "@tanstack/react-query";
-import React147, { createContext as createContext21, useContext as useContext28, useEffect as useEffect35 } from "react";
+import React149, { createContext as createContext21, useContext as useContext28, useEffect as useEffect35 } from "react";
 import { useAccountEffect as useAccountEffect3, WagmiProvider } from "wagmi";
 
 // src/css/cssObjectFromTheme.ts
@@ -15726,7 +16042,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey4, version);
 }
 function getCurrentSdkVersion() {
-  return "1.0.15";
+  return "1.0.16";
 }
 function useFingerprint() {
   const fingerprint = useCallback29(() => {
@@ -15781,7 +16097,7 @@ function clearWalletConnectDeepLink() {
 
 // src/components/FunkitProvider/FunkitProvider.tsx
 var MoonPayProvider = (props) => {
-  const [MoonPayProviderInner, setMoonPayProviderInner] = React147.useState(null);
+  const [MoonPayProviderInner, setMoonPayProviderInner] = React149.useState(null);
   useEffect35(() => {
     const loadMoonPayProviderInner = async () => {
       try {
@@ -15794,8 +16110,8 @@ var MoonPayProvider = (props) => {
     loadMoonPayProviderInner();
   }, []);
   if (!MoonPayProviderInner)
-    return /* @__PURE__ */ React147.createElement(React147.Fragment, null, props.children);
-  return /* @__PURE__ */ React147.createElement(MoonPayProviderInner, {
+    return /* @__PURE__ */ React149.createElement(React149.Fragment, null, props.children);
+  return /* @__PURE__ */ React149.createElement(MoonPayProviderInner, {
     ...props
   }, props.children);
 };
@@ -15817,13 +16133,13 @@ function FunkitProvider(props) {
     getCurrentSdkVersion()
   );
   const initialChainId = getInitialChainIdFromFunkitProviderProps(props);
-  return /* @__PURE__ */ React147.createElement(WagmiProvider, {
+  return /* @__PURE__ */ React149.createElement(WagmiProvider, {
     config: finalWagmiConfig
-  }, /* @__PURE__ */ React147.createElement(QueryClientProvider, {
+  }, /* @__PURE__ */ React149.createElement(QueryClientProvider, {
     client: props.queryClient
-  }, /* @__PURE__ */ React147.createElement(FunkitThemeProvider, {
+  }, /* @__PURE__ */ React149.createElement(FunkitThemeProvider, {
     theme: props.theme
-  }, /* @__PURE__ */ React147.createElement(FunkitProviderInner, {
+  }, /* @__PURE__ */ React149.createElement(FunkitProviderInner, {
     appInfo: props.appInfo,
     avatar: props.avatar,
     id: props.id,
@@ -15859,36 +16175,36 @@ function FunkitProviderInner({
   const modalSize = ModalSizeOptions.WIDE;
   const coolMode = false;
   const showRecentTransactions = false;
-  return /* @__PURE__ */ React147.createElement(FunkitConnectChainProvider, {
+  return /* @__PURE__ */ React149.createElement(FunkitConnectChainProvider, {
     initialChain
-  }, /* @__PURE__ */ React147.createElement(FunkitConfigContext.Provider, {
+  }, /* @__PURE__ */ React149.createElement(FunkitConfigContext.Provider, {
     value: funkitConfig
-  }, /* @__PURE__ */ React147.createElement(WalletButtonProvider, null, /* @__PURE__ */ React147.createElement(I18nProvider, {
+  }, /* @__PURE__ */ React149.createElement(WalletButtonProvider, null, /* @__PURE__ */ React149.createElement(I18nProvider, {
     locale
-  }, /* @__PURE__ */ React147.createElement(CoolModeContext.Provider, {
+  }, /* @__PURE__ */ React149.createElement(CoolModeContext.Provider, {
     value: coolMode
-  }, /* @__PURE__ */ React147.createElement(ModalSizeProvider, {
+  }, /* @__PURE__ */ React149.createElement(ModalSizeProvider, {
     modalSize
-  }, /* @__PURE__ */ React147.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React147.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React147.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React147.createElement(ShowRecentTransactionsContext.Provider, {
+  }, /* @__PURE__ */ React149.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React149.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React149.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React149.createElement(ShowRecentTransactionsContext.Provider, {
     value: showRecentTransactions
-  }, /* @__PURE__ */ React147.createElement(FunkitSandboxContext.Provider, {
+  }, /* @__PURE__ */ React149.createElement(FunkitSandboxContext.Provider, {
     value: isSandboxMode
-  }, /* @__PURE__ */ React147.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React147.createElement(TransactionStoreProvider, null, /* @__PURE__ */ React147.createElement(AvatarContext.Provider, {
+  }, /* @__PURE__ */ React149.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React149.createElement(TransactionStoreProvider, null, /* @__PURE__ */ React149.createElement(AvatarContext.Provider, {
     value: avatarContext
-  }, /* @__PURE__ */ React147.createElement(AppContext.Provider, {
+  }, /* @__PURE__ */ React149.createElement(AppContext.Provider, {
     value: appContext
-  }, /* @__PURE__ */ React147.createElement(ThemeIdContext2.Provider, {
+  }, /* @__PURE__ */ React149.createElement(ThemeIdContext2.Provider, {
     value: id
-  }, /* @__PURE__ */ React147.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React147.createElement(FunToastProvider, null, /* @__PURE__ */ React147.createElement(MoonPayProvider, {
+  }, /* @__PURE__ */ React149.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React149.createElement(FunToastProvider, null, /* @__PURE__ */ React149.createElement(MoonPayProvider, {
     apiKey: isSandboxMode ? "pk_test_dWfAhBbvVexIId9S5hPd78mKM7ivIsqu" : "pk_live_IxayBRQuBC3RzpPZkbGPrwUsRWAaeO",
     debug: !!debug
-  }, /* @__PURE__ */ React147.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React147.createElement("div", {
+  }, /* @__PURE__ */ React149.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React149.createElement("div", {
     ...createThemeRootProps2(id),
     style: {
       width: "100%",
       height: "100%"
     }
-  }, /* @__PURE__ */ React147.createElement("style", {
+  }, /* @__PURE__ */ React149.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: [
         `${selector}{${cssStringFromTheme(
@@ -15900,18 +16216,18 @@ function FunkitProviderInner({
 }
 
 // src/components/WalletButton/WalletButton.tsx
-import React149, { useContext as useContext30 } from "react";
+import React151, { useContext as useContext30 } from "react";
 
 // src/components/WalletButton/WalletButton.css.ts
 var border = "_85s11r0";
 var maxWidth = "_85s11r1";
 
 // src/components/WalletButton/WalletButtonRenderer.tsx
-import React148, {
+import React150, {
   useContext as useContext29,
   useEffect as useEffect36,
-  useMemo as useMemo34,
-  useState as useState45
+  useMemo as useMemo35,
+  useState as useState47
 } from "react";
 import { useAccount as useAccount17, useAccountEffect as useAccountEffect4 } from "wagmi";
 function WalletButtonRenderer({
@@ -15927,8 +16243,8 @@ function WalletButtonRenderer({
     throw new Error("Connector not found");
   }
   const connectionStatus = useConnectionStatus();
-  const [loading, setLoading] = useState45(false);
-  const [isError, setIsError] = useState45(false);
+  const [loading, setLoading] = useState47(false);
+  const [isError, setIsError] = useState47(false);
   const mobile = isMobile();
   useEffect36(() => {
     if (!connectModalOpen && connector)
@@ -15942,7 +16258,7 @@ function WalletButtonRenderer({
     },
     onDisconnect: clearLatestWalletId
   });
-  const isLastWalletIdConnected = useMemo34(() => {
+  const isLastWalletIdConnected = useMemo35(() => {
     const lastWalletId = getLatestWalletId();
     if (!lastWalletId || !(firstConnector == null ? void 0 : firstConnector.id)) {
       return false;
@@ -15967,7 +16283,7 @@ function WalletButtonRenderer({
   const isStatusLoading = connectionStatus === "loading";
   const ready = !isConnecting && !!openConnectModal && firstConnector && !isStatusLoading;
   const isNotSupported = !(firstConnector == null ? void 0 : firstConnector.installed) || !(firstConnector == null ? void 0 : firstConnector.ready);
-  return /* @__PURE__ */ React148.createElement(React148.Fragment, null, children({
+  return /* @__PURE__ */ React150.createElement(React150.Fragment, null, children({
     error: isError,
     loading,
     connected: isLastWalletIdConnected,
@@ -15989,14 +16305,14 @@ function WalletButtonRenderer({
 // src/components/WalletButton/WalletButton.tsx
 var WalletButton = ({ wallet }) => {
   const { i18n: i18n2 } = useContext30(I18nContext);
-  return /* @__PURE__ */ React149.createElement(WalletButtonRenderer, {
+  return /* @__PURE__ */ React151.createElement(WalletButtonRenderer, {
     wallet
   }, ({ ready, connect, connected, mounted, connector, loading }) => {
     const isDisabled = !ready || loading;
     const connectorName = (connector == null ? void 0 : connector.name) || "";
     if (!mounted)
       return;
-    return /* @__PURE__ */ React149.createElement(Box, {
+    return /* @__PURE__ */ React151.createElement(Box, {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -16004,7 +16320,7 @@ var WalletButton = ({ wallet }) => {
       style: {
         pointerEvents: isDisabled ? "none" : "all"
       }
-    }, /* @__PURE__ */ React149.createElement(Box, {
+    }, /* @__PURE__ */ React151.createElement(Box, {
       as: "button",
       borderRadius: "menuButton",
       borderStyle: "solid",
@@ -16026,7 +16342,7 @@ var WalletButton = ({ wallet }) => {
       transition: "default",
       width: "full",
       background: "connectButtonBackground"
-    }, /* @__PURE__ */ React149.createElement(Box, {
+    }, /* @__PURE__ */ React151.createElement(Box, {
       color: "modalText",
       fontFamily: "body",
       fontSize: "16",
@@ -16034,28 +16350,28 @@ var WalletButton = ({ wallet }) => {
       transition: "default",
       display: "flex",
       alignItems: "center"
-    }, /* @__PURE__ */ React149.createElement(Box, {
+    }, /* @__PURE__ */ React151.createElement(Box, {
       alignItems: "center",
       display: "flex",
       flexDirection: "row",
       gap: "12",
       paddingRight: "6"
-    }, /* @__PURE__ */ React149.createElement(Box, null, loading ? /* @__PURE__ */ React149.createElement(SpinnerIcon, null) : /* @__PURE__ */ React149.createElement(AsyncImage, {
+    }, /* @__PURE__ */ React151.createElement(Box, null, loading ? /* @__PURE__ */ React151.createElement(SpinnerIcon, null) : /* @__PURE__ */ React151.createElement(AsyncImage, {
       background: connector == null ? void 0 : connector.iconBackground,
       borderRadius: "6",
       height: "28",
       src: connector == null ? void 0 : connector.iconUrl,
       width: "28"
-    })), /* @__PURE__ */ React149.createElement(Box, {
+    })), /* @__PURE__ */ React151.createElement(Box, {
       alignItems: "center",
       display: "flex",
       flexDirection: "column",
       color: "modalText"
-    }, /* @__PURE__ */ React149.createElement(Box, {
+    }, /* @__PURE__ */ React151.createElement(Box, {
       testId: `wallet-button-label-${(connector == null ? void 0 : connector.id) || ""}`
     }, loading ? i18n2.t("connect.status.connecting", {
       wallet: connectorName
-    }) : connectorName)), connected ? /* @__PURE__ */ React149.createElement(Box, {
+    }) : connectorName)), connected ? /* @__PURE__ */ React151.createElement(Box, {
       background: "connectionIndicator",
       borderColor: "selectedOptionBorder",
       borderRadius: "full",
@@ -16093,12 +16409,12 @@ function getDefaultWallets(parameters) {
 }
 
 // src/components/ConnectOptions/MobileOptions.tsx
-import React150, {
+import React152, {
   useCallback as useCallback31,
   useContext as useContext31,
   useEffect as useEffect37,
   useRef as useRef11,
-  useState as useState46
+  useState as useState48
 } from "react";
 
 // src/components/ConnectOptions/MobileOptions.css.ts
@@ -16112,12 +16428,12 @@ var LoadingSpinner = ({ wallet }) => {
   const height = 80;
   const radiusFactor = 20;
   const perimeter = 2 * (width + height - 4 * radiusFactor);
-  return /* @__PURE__ */ React150.createElement("svg", {
+  return /* @__PURE__ */ React152.createElement("svg", {
     className: spinner,
     viewBox: "0 0 86 86",
     width: "86",
     height: "86"
-  }, /* @__PURE__ */ React150.createElement("title", null, "Loading"), /* @__PURE__ */ React150.createElement("rect", {
+  }, /* @__PURE__ */ React152.createElement("title", null, "Loading"), /* @__PURE__ */ React152.createElement("rect", {
     x: "3",
     y: "3",
     width,
@@ -16184,7 +16500,7 @@ function WalletButton2({
       initialized.current = true;
     }
   }, [connecting, onConnect]);
-  return /* @__PURE__ */ React150.createElement(Box, {
+  return /* @__PURE__ */ React152.createElement(Box, {
     as: "button",
     color: ready ? "modalText" : "modalTextSecondary",
     disabled: !ready,
@@ -16196,40 +16512,40 @@ function WalletButton2({
     testId: `wallet-option-${id}`,
     type: "button",
     width: "full"
-  }, /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(Box, {
     alignItems: "center",
     display: "flex",
     flexDirection: "column",
     justifyContent: "center"
-  }, /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(Box, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     paddingBottom: "8",
     paddingTop: "10",
     position: "relative"
-  }, connecting ? /* @__PURE__ */ React150.createElement(LoadingSpinner, {
+  }, connecting ? /* @__PURE__ */ React152.createElement(LoadingSpinner, {
     wallet
-  }) : null, /* @__PURE__ */ React150.createElement(AsyncImage, {
+  }) : null, /* @__PURE__ */ React152.createElement(AsyncImage, {
     background: iconBackground,
     borderRadius: "13",
     boxShadow: "walletLogo",
     height: "60",
     src: iconUrl,
     width: "60"
-  })), !connecting ? /* @__PURE__ */ React150.createElement(Box, {
+  })), !connecting ? /* @__PURE__ */ React152.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     textAlign: "center"
-  }, /* @__PURE__ */ React150.createElement(Text, {
+  }, /* @__PURE__ */ React152.createElement(Text, {
     as: "h2",
     color: wallet.ready ? "modalText" : "modalTextSecondary",
     size: "13",
     weight: "medium"
-  }, /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(Box, {
     as: "span",
     position: "relative"
-  }, shortName != null ? shortName : name, !wallet.ready && " (unsupported)")), wallet.recent && /* @__PURE__ */ React150.createElement(Text, {
+  }, shortName != null ? shortName : name, !wallet.ready && " (unsupported)")), wallet.recent && /* @__PURE__ */ React152.createElement(Text, {
     color: "accentColor",
     size: "12",
     weight: "medium"
@@ -16246,7 +16562,7 @@ function MobileOptions({ onClose }) {
   let walletContent = null;
   let headerBackgroundContrast = false;
   let headerBackButtonLink = null;
-  const [walletStep, setWalletStep] = useState46(
+  const [walletStep, setWalletStep] = useState48(
     "CONNECT" /* Connect */
   );
   const { i18n: i18n2 } = useContext31(I18nContext);
@@ -16255,71 +16571,71 @@ function MobileOptions({ onClose }) {
     case "CONNECT" /* Connect */: {
       headerLabel = i18n2.t("connect.title");
       headerBackgroundContrast = true;
-      walletContent = /* @__PURE__ */ React150.createElement(Box, null, /* @__PURE__ */ React150.createElement(Box, {
+      walletContent = /* @__PURE__ */ React152.createElement(Box, null, /* @__PURE__ */ React152.createElement(Box, {
         background: "profileForeground",
         className: scroll2,
         display: "flex",
         paddingBottom: "20",
         paddingTop: "6"
-      }, /* @__PURE__ */ React150.createElement(Box, {
+      }, /* @__PURE__ */ React152.createElement(Box, {
         display: "flex",
         style: { margin: "0 auto" }
       }, wallets.filter((wallet) => wallet.ready).map((wallet) => {
-        return /* @__PURE__ */ React150.createElement(Box, {
+        return /* @__PURE__ */ React152.createElement(Box, {
           key: wallet.id,
           paddingX: "20"
-        }, /* @__PURE__ */ React150.createElement(Box, {
+        }, /* @__PURE__ */ React152.createElement(Box, {
           width: "60"
-        }, /* @__PURE__ */ React150.createElement(WalletButton2, {
+        }, /* @__PURE__ */ React152.createElement(WalletButton2, {
           onClose,
           wallet
         })));
-      }))), /* @__PURE__ */ React150.createElement(Box, {
+      }))), /* @__PURE__ */ React152.createElement(Box, {
         background: "generalBorder",
         height: "1",
         marginBottom: "32",
         marginTop: "-1"
-      }), /* @__PURE__ */ React150.createElement(Box, {
+      }), /* @__PURE__ */ React152.createElement(Box, {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
         gap: "32",
         paddingX: "32",
         style: { textAlign: "center" }
-      }, /* @__PURE__ */ React150.createElement(Box, {
+      }, /* @__PURE__ */ React152.createElement(Box, {
         display: "flex",
         flexDirection: "column",
         gap: "8",
         textAlign: "center"
-      }, /* @__PURE__ */ React150.createElement(Text, {
+      }, /* @__PURE__ */ React152.createElement(Text, {
         color: "modalText",
         size: "16",
         weight: "bold"
-      }, i18n2.t("intro.title")), /* @__PURE__ */ React150.createElement(Text, {
+      }, i18n2.t("intro.title")), /* @__PURE__ */ React152.createElement(Text, {
         color: "modalTextSecondary",
         size: "16"
-      }, i18n2.t("intro.description")))), /* @__PURE__ */ React150.createElement(Box, {
+      }, i18n2.t("intro.description")))), /* @__PURE__ */ React152.createElement(Box, {
         paddingTop: "32",
         paddingX: "20"
-      }, /* @__PURE__ */ React150.createElement(Box, {
+      }, /* @__PURE__ */ React152.createElement(Box, {
         display: "flex",
         gap: "14",
         justifyContent: "center"
-      }, /* @__PURE__ */ React150.createElement(ActionButton, {
+      }, /* @__PURE__ */ React152.createElement(ActionButton, {
         label: i18n2.t("intro.get.label"),
         onClick: () => setWalletStep("GET" /* Get */),
         size: "large",
         type: "secondary"
-      }), /* @__PURE__ */ React150.createElement(ActionButton, {
+      }), /* @__PURE__ */ React152.createElement(ActionButton, {
         href: learnMoreUrl,
         label: i18n2.t("intro.learn_more.label"),
         size: "large",
         type: "secondary"
-      }))), Disclaimer && /* @__PURE__ */ React150.createElement(Box, {
+      }))), Disclaimer && /* @__PURE__ */ React152.createElement(Box, {
         marginTop: "28",
         marginX: "32",
         textAlign: "center"
-      }, /* @__PURE__ */ React150.createElement(Disclaimer, {
+      }, /* @__PURE__ */ React152.createElement(Disclaimer, {
         Link: DisclaimerLink,
         Text: DisclaimerText
       })));
@@ -16334,7 +16650,7 @@ function MobileOptions({ onClose }) {
           return ((_a2 = wallet.downloadUrls) == null ? void 0 : _a2.ios) || ((_b = wallet.downloadUrls) == null ? void 0 : _b.android) || ((_c = wallet.downloadUrls) == null ? void 0 : _c.mobile);
         }
       )) == null ? void 0 : _a.splice(0, 3);
-      walletContent = /* @__PURE__ */ React150.createElement(Box, null, /* @__PURE__ */ React150.createElement(Box, {
+      walletContent = /* @__PURE__ */ React152.createElement(Box, null, /* @__PURE__ */ React152.createElement(Box, {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
@@ -16348,88 +16664,88 @@ function MobileOptions({ onClose }) {
         if (!(downloadUrls == null ? void 0 : downloadUrls.ios) && !(downloadUrls == null ? void 0 : downloadUrls.android) && !(downloadUrls == null ? void 0 : downloadUrls.mobile)) {
           return null;
         }
-        return /* @__PURE__ */ React150.createElement(Box, {
+        return /* @__PURE__ */ React152.createElement(Box, {
           display: "flex",
           gap: "16",
           key: wallet.id,
           paddingX: "20",
           width: "full"
-        }, /* @__PURE__ */ React150.createElement(Box, {
+        }, /* @__PURE__ */ React152.createElement(Box, {
           style: { minHeight: 48, minWidth: 48 }
-        }, /* @__PURE__ */ React150.createElement(AsyncImage, {
+        }, /* @__PURE__ */ React152.createElement(AsyncImage, {
           background: iconBackground,
           borderColor: "generalBorder",
           borderRadius: "10",
           height: "48",
           src: iconUrl,
           width: "48"
-        })), /* @__PURE__ */ React150.createElement(Box, {
+        })), /* @__PURE__ */ React152.createElement(Box, {
           display: "flex",
           flexDirection: "column",
           width: "full"
-        }, /* @__PURE__ */ React150.createElement(Box, {
+        }, /* @__PURE__ */ React152.createElement(Box, {
           alignItems: "center",
           display: "flex",
           height: "48"
-        }, /* @__PURE__ */ React150.createElement(Box, {
+        }, /* @__PURE__ */ React152.createElement(Box, {
           width: "full"
-        }, /* @__PURE__ */ React150.createElement(Text, {
+        }, /* @__PURE__ */ React152.createElement(Text, {
           color: "modalText",
           size: "18",
           weight: "bold"
-        }, name)), /* @__PURE__ */ React150.createElement(ActionButton, {
+        }, name)), /* @__PURE__ */ React152.createElement(ActionButton, {
           href: (ios ? downloadUrls == null ? void 0 : downloadUrls.ios : downloadUrls == null ? void 0 : downloadUrls.android) || (downloadUrls == null ? void 0 : downloadUrls.mobile),
           label: i18n2.t("get.action.label"),
           size: "small",
           type: "secondary"
-        })), index < mobileWallets.length - 1 && /* @__PURE__ */ React150.createElement(Box, {
+        })), index < mobileWallets.length - 1 && /* @__PURE__ */ React152.createElement(Box, {
           background: "generalBorderDim",
           height: "1",
           marginY: "10",
           width: "full"
         })));
-      })), /* @__PURE__ */ React150.createElement(Box, {
+      })), /* @__PURE__ */ React152.createElement(Box, {
         style: { marginBottom: "42px" }
-      }), /* @__PURE__ */ React150.createElement(Box, {
+      }), /* @__PURE__ */ React152.createElement(Box, {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
         gap: "36",
         paddingX: "36",
         style: { textAlign: "center" }
-      }, /* @__PURE__ */ React150.createElement(Box, {
+      }, /* @__PURE__ */ React152.createElement(Box, {
         display: "flex",
         flexDirection: "column",
         gap: "12",
         textAlign: "center"
-      }, /* @__PURE__ */ React150.createElement(Text, {
+      }, /* @__PURE__ */ React152.createElement(Text, {
         color: "modalText",
         size: "16",
         weight: "bold"
-      }, i18n2.t("get.looking_for.title")), /* @__PURE__ */ React150.createElement(Text, {
+      }, i18n2.t("get.looking_for.title")), /* @__PURE__ */ React152.createElement(Text, {
         color: "modalTextSecondary",
         size: "16"
       }, i18n2.t("get.looking_for.mobile.description")))));
       break;
     }
   }
-  return /* @__PURE__ */ React150.createElement(Box, {
+  return /* @__PURE__ */ React152.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     paddingBottom: "36"
-  }, /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(Box, {
     background: headerBackgroundContrast ? "profileForeground" : "modalBackground",
     display: "flex",
     flexDirection: "column",
     paddingBottom: "4",
     paddingTop: "14"
-  }, /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     paddingBottom: "6",
     paddingX: "20",
     position: "relative"
-  }, headerBackButtonLink && /* @__PURE__ */ React150.createElement(Box, {
+  }, headerBackButtonLink && /* @__PURE__ */ React152.createElement(Box, {
     display: "flex",
     position: "absolute",
     style: {
@@ -16437,7 +16753,7 @@ function MobileOptions({ onClose }) {
       marginBottom: -20,
       marginTop: -20
     }
-  }, /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(Box, {
     alignItems: "center",
     as: "button",
     className: touchableStyles({
@@ -16453,28 +16769,28 @@ function MobileOptions({ onClose }) {
     style: { height: 17, willChange: "transform" },
     transition: "default",
     type: "button"
-  }, /* @__PURE__ */ React150.createElement(BackIcon, null))), /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(BackIcon, null))), /* @__PURE__ */ React152.createElement(Box, {
     marginTop: "4",
     textAlign: "center",
     width: "full"
-  }, /* @__PURE__ */ React150.createElement(Text, {
+  }, /* @__PURE__ */ React152.createElement(Text, {
     as: "h1",
     color: "modalText",
     id: titleId,
     size: "20",
     weight: "bold"
-  }, headerLabel)), /* @__PURE__ */ React150.createElement(Box, {
+  }, headerLabel)), /* @__PURE__ */ React152.createElement(Box, {
     alignItems: "center",
     display: "flex",
     height: "32",
     paddingRight: "14",
     position: "absolute",
     right: "0"
-  }, /* @__PURE__ */ React150.createElement(Box, {
+  }, /* @__PURE__ */ React152.createElement(Box, {
     style: { marginBottom: -20, marginTop: -20 }
-  }, /* @__PURE__ */ React150.createElement(CloseButton, {
+  }, /* @__PURE__ */ React152.createElement(CloseButton, {
     onClose
-  }))))), /* @__PURE__ */ React150.createElement(Box, {
+  }))))), /* @__PURE__ */ React152.createElement(Box, {
     display: "flex",
     flexDirection: "column"
   }, walletContent));