@funkit/connect 5.0.8 → 5.0.9

package/dist/index.js

@@ -105,10 +105,10 @@ var __private__ = {
 };
 
 // src/components/Avatar/Avatar.tsx
-import React7, { useContext as useContext2 } from "react";
+import React7, { useContext } from "react";
 
 // src/providers/AvatarContext.ts
-import { createContext as createContext2 } from "react";
+import { createContext } from "react";
 
 // src/components/Avatar/EmojiAvatar.tsx
 import React5, { useEffect, useState } from "react";
@@ -116,165 +116,41 @@ import React5, { useEffect, useState } from "react";
 // src/components/Icons/SpinnerIcon.tsx
 import React3 from "react";
 
-// src/consts/customers.ts
-import {
-  DYDX_API_KEY,
-  POLYMARKET_API_KEY,
-  VERTEX_API_KEY
-} from "@funkit/api-base";
-function isDydxCustomer(apiKey) {
-  return apiKey === DYDX_API_KEY;
-}
-function isPolymarketCustomer(apiKey) {
-  return apiKey === POLYMARKET_API_KEY;
-}
-function isVertexCustomer(apiKey) {
-  return apiKey === VERTEX_API_KEY;
-}
-
-// src/providers/FunkitConfigContext.tsx
-import { createContext, useContext, useMemo } from "react";
-
-// src/consts/funkit.ts
-import { CheckoutState } from "@funkit/api-base";
-import { FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS } from "@funkit/chains";
-var NATIVE_TOKEN = FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS;
-var FUNKIT_CONNECT_WALLET_ID = "funkitConnectWallet";
-var RESERVED_GROUP_NAME = "funkit-web2";
-var DEFAULT_FUNWALLET_INDEX = 0;
-var FUN_WORKER_EOA_ADDR = "0x1881ad6e231a14A8Be0f9AE6f9EFd8f3CFb09919";
-var FUN_ORG_NAME = "Fun.xyz";
-var FROM_PROGRESS_CHECKOUT_STATES = [
-  CheckoutState.FROM_UNFUNDED,
-  CheckoutState.FROM_FUNDED,
-  CheckoutState.FROM_POOLED
-];
-var TO_PROGRESS_CHECKOUT_STATES = [
-  CheckoutState.TO_UNFUNDED,
-  CheckoutState.TO_FUNDED,
-  CheckoutState.TO_POOLED,
-  CheckoutState.TO_READY,
-  CheckoutState.PENDING_RECEIVAL
-];
-var IN_PROGRESS_CHECKOUT_STATES = [
-  ...TO_PROGRESS_CHECKOUT_STATES,
-  ...FROM_PROGRESS_CHECKOUT_STATES
-];
-var TERMINAL_CHECKOUT_STATES = [
-  CheckoutState.EXPIRED,
-  CheckoutState.CHECKOUT_ERROR,
-  CheckoutState.COMPLETED,
-  CheckoutState.CANCELLED
-];
-var FunkitSocialLoginMethod = /* @__PURE__ */ ((FunkitSocialLoginMethod2) => {
-  FunkitSocialLoginMethod2["GOOGLE"] = "google_oauth" /* google_oauth */;
-  FunkitSocialLoginMethod2["TWITTER"] = "twitter_oauth" /* twitter_oauth */;
-  FunkitSocialLoginMethod2["APPLE"] = "apple_oauth" /* apple_oauth */;
-  FunkitSocialLoginMethod2["FARCASTER"] = "farcaster" /* farcaster */;
-  return FunkitSocialLoginMethod2;
-})(FunkitSocialLoginMethod || {});
-var PLACEHOLDER_FUNKIT_USER_INFO = {
-  id: "0x",
-  address: "0x",
-  name: "Guest",
-  nameTruncated: "Guest",
-  type: "unknown",
-  typeLabel: "",
-  iconSrc: ""
-};
-
-// src/providers/FunkitConfigContext.tsx
-var DEFAULT_TEXT_CUSTOMIZATIONS = {
-  brokerageOrExchange: "Connect Exchange",
-  debitOrCredit: "Use card",
-  accountBalance: "Wallet",
-  selectAccount: "Select an exchange",
-  sourceMethodTitle: "Your source",
-  transferTokens: "Transfer Crypto",
-  confirmationScreen: {
-    payAmountLabel: "You send",
-    receiveAmountLabel: "You receive"
-  }
-};
-var DEFAULT_FUNKIT_CONFIG = {
-  apiKey: "",
-  appName: "",
-  allowBackgroundScroll: false,
-  textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
-  loginConfig: {
-    web2: false,
-    web3: false,
-    prioritizedLogin: "none",
-    web2SocialLogins: {
-      ["google_oauth" /* GOOGLE */]: false,
-      ["twitter_oauth" /* TWITTER */]: false,
-      ["apple_oauth" /* APPLE */]: false
-    }
-  }
-};
-var FunkitConfigContext = createContext(
-  DEFAULT_FUNKIT_CONFIG
-);
-function useFunkitConfig() {
-  const originalFunkitConfig = useContext(FunkitConfigContext);
-  const finalFunkitConfig = useMemo(() => {
-    return {
-      ...DEFAULT_FUNKIT_CONFIG,
-      ...originalFunkitConfig,
-      loginConfig: {
-        ...DEFAULT_FUNKIT_CONFIG.loginConfig,
-        ...originalFunkitConfig.loginConfig,
-        web2SocialLogins: {
-          ...DEFAULT_FUNKIT_CONFIG.loginConfig.web2SocialLogins,
-          ...originalFunkitConfig.loginConfig.web2SocialLogins
-        }
-      },
-      textCustomizations: {
-        ...DEFAULT_FUNKIT_CONFIG.textCustomizations,
-        ...originalFunkitConfig.textCustomizations
-      }
-    };
-  }, [originalFunkitConfig]);
-  return finalFunkitConfig;
-}
-
 // src/components/Icons/Icons.css.ts
 var SpinnerIconClassName = "qe221a2";
 
 // src/components/Icons/SpinnerIcon.tsx
 var SpinnerIcon = ({ size = 21 }) => {
-  const { apiKey } = useFunkitConfig();
-  const isVertex = isVertexCustomer(apiKey);
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(Box, { color: "strokeColor" }, /* @__PURE__ */ React3.createElement(
     "svg",
     {
-      className: SpinnerIconClassName,
-      xmlns: "http://www.w3.org/2000/svg",
-      height: size,
       width: size,
+      height: size,
+      className: SpinnerIconClassName,
       viewBox: "0 0 14 14",
-      fill: "none"
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
     },
     /* @__PURE__ */ React3.createElement(
       "path",
       {
         opacity: "0.3",
-        d: "M13.3438 7C13.3438 8.66748 12.7013 10.1834 11.6491 11.3162C11.091 11.917 10.4183 12.4092 9.66627 12.7581C8.85649 13.1337 7.95367 13.3438 7 13.3438C3.49644 13.3438 0.65625 10.5036 0.65625 7C0.65625 3.49644 3.49644 0.65625 7 0.65625C10.5036 0.65625 13.3438 3.49644 13.3438 7Z",
+        d: "M13.25 7C13.25 8.64289 12.6171 10.1363 11.5804 11.2524C11.0305 11.8444 10.3677 12.3293 9.62682 12.673C8.82915 13.0431 7.93977 13.25 7 13.25C3.54822 13.25 0.75 10.4518 0.75 7C0.75 3.54822 3.54822 0.75 7 0.75C10.4518 0.75 13.25 3.54822 13.25 7Z",
         stroke: "white",
         strokeOpacity: "0.5",
-        strokeWidth: "1.3125"
+        strokeWidth: "1.5"
       }
     ),
     /* @__PURE__ */ React3.createElement(
       "path",
       {
-        d: "M6.91235 13.2504C10.3968 13.2504 13.2214 10.4257 13.2214 6.94133C13.2214 5.63413 12.8239 4.41978 12.1431 3.4126",
-        stroke: isVertex ? "#fff8" : "#333333",
-        strokeLinecap: "round",
-        strokeWidth: "1.3125"
+        d: "M6.91211 13.2504C10.3965 13.2504 13.2212 10.4257 13.2212 6.94133C13.2212 5.63413 12.8236 4.41978 12.1428 3.4126",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
       }
     )
-  );
+  ));
 };
 
 // src/components/Avatar/MarbleAvatar.tsx
@@ -395,7 +271,6 @@ var FunCustomAvatar = ({
         alignItems: "center",
         backgroundSize: "cover",
         borderRadius: "full",
-        color: "primaryText",
         display: "flex",
         justifyContent: "center",
         position: "absolute",
@@ -448,7 +323,6 @@ var EmojiAvatar = ({
       alignItems: "center",
       backgroundSize: "cover",
       borderRadius: "full",
-      color: "primaryText",
       display: "flex",
       justifyContent: "center",
       position: "absolute",
@@ -476,11 +350,11 @@ var EmojiAvatar = ({
 
 // src/providers/AvatarContext.ts
 var defaultAvatar = EmojiAvatar;
-var AvatarContext = createContext2(defaultAvatar);
+var AvatarContext = createContext(defaultAvatar);
 
 // src/components/Avatar/Avatar.tsx
 function Avatar({ address, imageUrl, loading, size }) {
-  const AvatarComponent = useContext2(AvatarContext);
+  const AvatarComponent = useContext(AvatarContext);
   return /* @__PURE__ */ React7.createElement(
     Box,
     {
@@ -516,22 +390,12 @@ function Avatar({ address, imageUrl, loading, size }) {
       },
       /* @__PURE__ */ React7.createElement(AvatarComponent, { address, ensImage: imageUrl, size })
     ),
-    loading && /* @__PURE__ */ React7.createElement(
-      Box,
-      {
-        color: "accentColor",
-        display: "flex",
-        height: "full",
-        position: "absolute",
-        width: "full"
-      },
-      /* @__PURE__ */ React7.createElement(SpinnerIcon, { size: "100%" })
-    )
+    loading && /* @__PURE__ */ React7.createElement(Box, { display: "flex", height: "full", position: "absolute", width: "full" }, /* @__PURE__ */ React7.createElement(SpinnerIcon, { size: "100%" }))
   );
 }
 
 // src/components/ConnectButton/ConnectButton.tsx
-import React219, { useEffect as useEffect46, useState as useState67 } from "react";
+import React219, { useEffect as useEffect46, useState as useState66 } from "react";
 
 // src/css/touchableStyles.css.ts
 var active = { shrink: "_7rkubb8", shrinkSm: "_7rkubb9" };
@@ -559,18 +423,18 @@ import { useAccount as useAccount11 } from "wagmi";
 
 // src/providers/AuthenticationContext.tsx
 import React8, {
-  createContext as createContext3,
+  createContext as createContext2,
   useCallback,
-  useContext as useContext3,
+  useContext as useContext2,
   useEffect as useEffect2,
-  useMemo as useMemo2,
+  useMemo,
   useState as useState2
 } from "react";
 import { useAccount, useAccountEffect } from "wagmi";
 function createAuthenticationAdapter(adapter) {
   return adapter;
 }
-var AuthenticationContext = createContext3(
+var AuthenticationContext = createContext2(
   null
 );
 function FunkitConnectAuthenticationProvider({
@@ -616,7 +480,7 @@ function FunkitConnectAuthenticationProvider({
   return /* @__PURE__ */ React8.createElement(
     AuthenticationContext.Provider,
     {
-      value: useMemo2(
+      value: useMemo(
         () => enabled ? { adapter, status } : null,
         [enabled, adapter, status]
       )
@@ -625,7 +489,7 @@ function FunkitConnectAuthenticationProvider({
   );
 }
 function useAuthenticationStatus() {
-  const contextValue = useContext3(AuthenticationContext);
+  const contextValue = useContext2(AuthenticationContext);
   return contextValue?.status ?? null;
 }
 
@@ -641,7 +505,7 @@ import React216, {
   useContext as useContext18,
   useEffect as useEffect44,
   useMemo as useMemo39,
-  useState as useState64
+  useState as useState63
 } from "react";
 import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect2 } from "wagmi";
 
@@ -661,6 +525,54 @@ function formatAccountName(accountName, isEmail) {
   return `${prefixName.substring(0, leadingChars - 3)}...`;
 }
 
+// src/consts/funkit.ts
+import { CheckoutState } from "@funkit/api-base";
+import { FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS } from "@funkit/chains";
+var NATIVE_TOKEN = FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS;
+var FUNKIT_CONNECT_WALLET_ID = "funkitConnectWallet";
+var RESERVED_GROUP_NAME = "funkit-web2";
+var DEFAULT_FUNWALLET_INDEX = 0;
+var FUN_WORKER_EOA_ADDR = "0x1881ad6e231a14A8Be0f9AE6f9EFd8f3CFb09919";
+var FUN_ORG_NAME = "Fun.xyz";
+var FROM_PROGRESS_CHECKOUT_STATES = [
+  CheckoutState.FROM_UNFUNDED,
+  CheckoutState.FROM_FUNDED,
+  CheckoutState.FROM_POOLED
+];
+var TO_PROGRESS_CHECKOUT_STATES = [
+  CheckoutState.TO_UNFUNDED,
+  CheckoutState.TO_FUNDED,
+  CheckoutState.TO_POOLED,
+  CheckoutState.TO_READY,
+  CheckoutState.PENDING_RECEIVAL
+];
+var IN_PROGRESS_CHECKOUT_STATES = [
+  ...TO_PROGRESS_CHECKOUT_STATES,
+  ...FROM_PROGRESS_CHECKOUT_STATES
+];
+var TERMINAL_CHECKOUT_STATES = [
+  CheckoutState.EXPIRED,
+  CheckoutState.CHECKOUT_ERROR,
+  CheckoutState.COMPLETED,
+  CheckoutState.CANCELLED
+];
+var FunkitSocialLoginMethod = /* @__PURE__ */ ((FunkitSocialLoginMethod2) => {
+  FunkitSocialLoginMethod2["GOOGLE"] = "google_oauth" /* google_oauth */;
+  FunkitSocialLoginMethod2["TWITTER"] = "twitter_oauth" /* twitter_oauth */;
+  FunkitSocialLoginMethod2["APPLE"] = "apple_oauth" /* apple_oauth */;
+  FunkitSocialLoginMethod2["FARCASTER"] = "farcaster" /* farcaster */;
+  return FunkitSocialLoginMethod2;
+})(FunkitSocialLoginMethod || {});
+var PLACEHOLDER_FUNKIT_USER_INFO = {
+  id: "0x",
+  address: "0x",
+  name: "Guest",
+  nameTruncated: "Guest",
+  type: "unknown",
+  typeLabel: "",
+  iconSrc: ""
+};
+
 // src/utils/funLogger.ts
 import { datadogLogs } from "@datadog/browser-logs";
 import { DEV_API_KEY } from "@funkit/api-base";
@@ -839,6 +751,62 @@ import React9, {
 } from "react";
 import { useConfig } from "wagmi";
 
+// src/providers/FunkitConfigContext.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2 } from "react";
+var DEFAULT_TEXT_CUSTOMIZATIONS = {
+  brokerageOrExchange: "Connect Exchange",
+  debitOrCredit: "Use card",
+  accountBalance: "Wallet",
+  selectAccount: "Select an exchange",
+  sourceMethodTitle: "Your source",
+  transferTokens: "Transfer Crypto",
+  confirmationScreen: {
+    payAmountLabel: "You send",
+    receiveAmountLabel: "You receive"
+  }
+};
+var DEFAULT_FUNKIT_CONFIG = {
+  apiKey: "",
+  appName: "",
+  allowBackgroundScroll: false,
+  textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
+  loginConfig: {
+    web2: false,
+    web3: false,
+    prioritizedLogin: "none",
+    web2SocialLogins: {
+      ["google_oauth" /* GOOGLE */]: false,
+      ["twitter_oauth" /* TWITTER */]: false,
+      ["apple_oauth" /* APPLE */]: false
+    }
+  }
+};
+var FunkitConfigContext = createContext3(
+  DEFAULT_FUNKIT_CONFIG
+);
+function useFunkitConfig() {
+  const originalFunkitConfig = useContext3(FunkitConfigContext);
+  const finalFunkitConfig = useMemo2(() => {
+    return {
+      ...DEFAULT_FUNKIT_CONFIG,
+      ...originalFunkitConfig,
+      loginConfig: {
+        ...DEFAULT_FUNKIT_CONFIG.loginConfig,
+        ...originalFunkitConfig.loginConfig,
+        web2SocialLogins: {
+          ...DEFAULT_FUNKIT_CONFIG.loginConfig.web2SocialLogins,
+          ...originalFunkitConfig.loginConfig.web2SocialLogins
+        }
+      },
+      textCustomizations: {
+        ...DEFAULT_FUNKIT_CONFIG.textCustomizations,
+        ...originalFunkitConfig.textCustomizations
+      }
+    };
+  }, [originalFunkitConfig]);
+  return finalFunkitConfig;
+}
+
 // src/providers/provideFunkitConnectChains.ts
 import { DYDX_MAINNET_CHAIN_ID } from "@funkit/chains";
 import { isNotNullish } from "@funkit/utils";
@@ -1059,7 +1027,7 @@ import React215, {
   useContext as useContext17,
   useEffect as useEffect43,
   useMemo as useMemo38,
-  useState as useState63
+  useState as useState62
 } from "react";
 import { useAccount as useAccount10, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
 
@@ -1090,6 +1058,22 @@ import React56, {
 import { createPortal } from "react-dom";
 import { RemoveScroll } from "react-remove-scroll";
 
+// src/consts/customers.ts
+import {
+  DYDX_API_KEY,
+  POLYMARKET_API_KEY,
+  VERTEX_API_KEY
+} from "@funkit/api-base";
+function isDydxCustomer(apiKey) {
+  return apiKey === DYDX_API_KEY;
+}
+function isPolymarketCustomer(apiKey) {
+  return apiKey === POLYMARKET_API_KEY;
+}
+function isVertexCustomer(apiKey) {
+  return apiKey === VERTEX_API_KEY;
+}
+
 // src/hooks/useAnimatedNavigation.ts
 import { useCallback as useCallback2, useState as useState3 } from "react";
 
@@ -5391,7 +5375,7 @@ var useActivityTraversal = () => {
 };
 
 // src/modals/ProfileDetails/ProfileDetails.tsx
-import React122, { useCallback as useCallback22, useState as useState31 } from "react";
+import React122, { useCallback as useCallback22, useState as useState30 } from "react";
 
 // src/components/FunCheckoutHistory/FunCheckoutHistoryContent.tsx
 import React109 from "react";
@@ -5607,6 +5591,9 @@ var useFunkitPostCheckoutInternal = (depositAddress) => {
   }
   useEffect11(() => {
     const setupCheckoutHistory = async () => {
+      if (depositAddress === "0x") {
+        return;
+      }
       try {
         setIsLoading(true);
         let checkoutHistory;
@@ -7247,10 +7234,11 @@ var SearchIcon = () => {
 };
 
 // src/components/FunInput/FunInput.css.ts
-var inputClass = "zue0i62 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1c3";
-var inputClassDisabled = "zue0i64 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1dl";
-var inputClassError = "zue0i66 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f18f";
-var numberInputResetStyle = "zue0i60";
+var baseWrapperStyles = "zue0i60";
+var inputClass = "zue0i63 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1c3";
+var inputClassDisabled = "zue0i65 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1dl";
+var inputClassError = "zue0i67 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f18f";
+var numberInputResetStyle = "zue0i61";
 
 // src/components/FunInput/FunInput.tsx
 var DEFAULT_ICON_FONT_SIZE = "57px";
@@ -7316,7 +7304,8 @@ var FunInput = forwardRef2(
           borderStyle: "solid",
           fontWeight: "medium",
           fontSize: "13",
-          background: overrideBackground || "inputBackground"
+          background: overrideBackground || "inputBackground",
+          className: baseWrapperStyles
         },
         prefix && /* @__PURE__ */ React70.createElement(Box, { paddingLeft: "12", height: "max" }, prefix),
         prefixIcon === "SearchIcon" && /* @__PURE__ */ React70.createElement(
@@ -9771,6 +9760,11 @@ import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/FunInput/FunTextAreaInput.tsx
 import React102 from "react";
+
+// src/components/FunInput/FunTextAreaInput.css.ts
+var baseStyles = "_1q9ws650";
+
+// src/components/FunInput/FunTextAreaInput.tsx
 function FunTextAreaInput({
   placeholder,
   value,
@@ -9814,7 +9808,8 @@ function FunTextAreaInput({
       borderWidth: overrideBorderWidth ?? "1",
       borderStyle: "solid",
       padding: "4",
-      background: overrideBackground || "inputBackground"
+      background: overrideBackground || "inputBackground",
+      className: baseStyles
     },
     /* @__PURE__ */ React102.createElement(
       "textarea",
@@ -10451,7 +10446,7 @@ function useCheckoutModalTitle(depositAddress, defaultTitle) {
 // src/modals/ProfileDetails/FunProfileViews/Home/index.tsx
 import { formatTimestampToDate, fullMonthNames } from "@funkit/utils";
 import clsx11 from "clsx";
-import React120, { useEffect as useEffect24, useMemo as useMemo16, useRef as useRef11, useState as useState30 } from "react";
+import React120, { useEffect as useEffect24, useMemo as useMemo16, useRef as useRef11, useState as useState29 } from "react";
 import { Virtuoso } from "react-virtuoso";
 import { useAccount as useAccount6 } from "wagmi";
 
@@ -10625,6 +10620,7 @@ var RedRoundErrorCross = ({ size = 15 }) => {
 };
 
 // src/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.css.ts
+var baseStyles2 = "ukct4t4";
 var homeCheckoutDisplayRowStyle = { defaultBorder: "ukct4t1 _1rsrm2f10f _1rsrm2fx7", defaultBackground: "_1rsrm2fnf _1rsrm2fjt", hoverBackground: "_1rsrm2fjg" };
 
 // src/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.tsx
@@ -10644,7 +10640,7 @@ var HomeCheckoutDisplayRow = ({
   checkoutHistoryItem,
   onSelect
 }) => {
-  const { isProcessing, isCompleted, isError, isExpired, isFailed } = getCheckoutStateBooleans(checkoutHistoryItem.state);
+  const { isProcessing, isCompleted, isError, isExpired, isFailed } = getCheckoutStateBooleans(checkoutHistoryItem.state ?? {});
   const checkoutClientMetadata = checkoutHistoryItem.clientMetadata;
   const getStatusElement = () => {
     if (isCompleted) {
@@ -10699,6 +10695,7 @@ var HomeCheckoutDisplayRow = ({
     Box,
     {
       className: clsx10(
+        baseStyles2,
         homeCheckoutDisplayRowStyle.defaultBorder,
         homeCheckoutDisplayRowStyle.defaultBackground,
         !isMobile5() && homeCheckoutDisplayRowStyle.hoverBackground
@@ -10814,7 +10811,7 @@ import {
   formatCurrencyAndStringify as formatCurrencyAndStringify3,
   isMobile as isMobile6
 } from "@funkit/utils";
-import React116, { useState as useState28 } from "react";
+import React116 from "react";
 var TEXT_SIZE = "13";
 var TEXT_SKELETON_MARGIN_TOP2 = "2";
 var TEXT_SKELETON_MARGIN_BOTTOM2 = "3";
@@ -10829,18 +10826,19 @@ var HomeTokenBalanceDisplayRow = ({
     asset.tokenBalance,
     asset.decimals
   );
-  const [hasHover, setHasHover] = useState28(false);
   return /* @__PURE__ */ React116.createElement(
     Box,
     {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      onMouseEnter: () => setHasHover(true),
-      onMouseLeave: () => setHasHover(false),
       paddingX: PROFILE_SIDE_PADDING,
-      background: hasHover && !isMobile6() ? "offBackground" : void 0,
-      paddingY: ROW_PADDING_Y2
+      background: {
+        base: void 0,
+        hover: !isMobile6() ? "offBackground" : void 0
+      },
+      paddingY: ROW_PADDING_Y2,
+      className: baseStyles2
     },
     /* @__PURE__ */ React116.createElement(
       Box,
@@ -10918,7 +10916,7 @@ var HomeTokenBalanceDisplayRowSkeleton = () => {
 
 // src/modals/ProfileDetails/FunProfileViews/Home/ProfileTitleSection.tsx
 import React119 from "react";
-import { useCallback as useCallback21, useState as useState29 } from "react";
+import { useCallback as useCallback21, useState as useState28 } from "react";
 
 // src/components/Icons/LogoutIcon.tsx
 import React117 from "react";
@@ -10985,7 +10983,7 @@ var ProfileTitleSection = ({
   onClose
 }) => {
   const { apiKey } = useFunkitConfig();
-  const [isDisconnectExpanded, setIsDisconnectExpanded] = useState29(false);
+  const [isDisconnectExpanded, setIsDisconnectExpanded] = useState28(false);
   const collapseDisconnect = useCallback21(
     () => setIsDisconnectExpanded(false),
     []
@@ -11079,7 +11077,7 @@ function Home({
   defaultHomeTab = "assets" /* ASSETS */,
   animation
 }) {
-  const [selectedView, setSelectedView] = useState30(defaultHomeTab);
+  const [selectedView, setSelectedView] = useState29(defaultHomeTab);
   const checkoutsListRef = useRef11(null);
   const virtuosoParentRef = useRef11(null);
   const account = useAccount6();
@@ -11324,8 +11322,8 @@ var PADDING_TOP = 12;
 var PROFILE_DETAILS_DIALOG_CONTENT_ID = "profile-details-dialog-content";
 var HISTORY_BOTTOM_BAR_ID = "history-bottom-section";
 function ProfileDetails({ onClose, defaultTab }) {
-  const [view, setView] = useState31(0 /* HOME */);
-  const [selectedHomeTab, setSelectedHomeTab] = useState31(
+  const [view, setView] = useState30(0 /* HOME */);
+  const [selectedHomeTab, setSelectedHomeTab] = useState30(
     defaultTab ?? "assets" /* ASSETS */
   );
   const {
@@ -11339,7 +11337,7 @@ function ProfileDetails({ onClose, defaultTab }) {
     selectedPurchaseId || "0x",
     DEFAULT_CHECKOUT_HISTORY_DETAIL_TITLE
   );
-  const [singleActivityPage, setSingleActivityPage] = useState31(
+  const [singleActivityPage, setSingleActivityPage] = useState30(
     selectedPurchaseInitView ?? "detail" /* DETAIL */
   );
   const resetView = useCallback22(() => {
@@ -11930,7 +11928,7 @@ import React132, {
   useContext as useContext14,
   useEffect as useEffect25,
   useMemo as useMemo17,
-  useState as useState32
+  useState as useState31
 } from "react";
 import { FlagKey as FlagKey8 } from "@funkit/utils";
 
@@ -11941,7 +11939,7 @@ var useIsFunkitSandboxMode = () => useContext13(FunkitSandboxContext);
 
 // src/providers/FunkitMoonpayProvider.tsx
 var LazyMoonPayProvider = (props) => {
-  const [MoonPayProvider, setMoonPayProvider] = useState32(null);
+  const [MoonPayProvider, setMoonPayProvider] = useState31(null);
   useEffect25(() => {
     const loadMoonPayProvider = async () => {
       const module = await import("@moonpay/moonpay-react");
@@ -12026,7 +12024,7 @@ function useFunkitUserIp() {
 
 // src/modals/CheckoutModal/TransferToken/CheckoutNotifications.tsx
 import clsx15 from "clsx";
-import React139, { useEffect as useEffect27, useMemo as useMemo18, useState as useState34 } from "react";
+import React139, { useEffect as useEffect27, useMemo as useMemo18, useState as useState33 } from "react";
 
 // src/components/FunNotificationBanner/FunNotificationShowMoreButton.tsx
 import React134 from "react";
@@ -12179,7 +12177,7 @@ import React138 from "react";
 
 // src/components/FunNotificationBanner/FunNotificationBanner.tsx
 import { AnimatePresence, motion as motion2 } from "motion/react";
-import React136, { useState as useState33 } from "react";
+import React136, { useState as useState32 } from "react";
 import clsx14 from "clsx";
 
 // src/components/FunNotificationBanner/FunNotificationBanner.css.ts
@@ -12727,8 +12725,8 @@ var FunNotificationBanner = ({
   children,
   onClosed
 }) => {
-  const [showMore, setShowMore] = useState33(false);
-  const [isOpen, setIsOpen] = useState33(true);
+  const [showMore, setShowMore] = useState32(false);
+  const [isOpen, setIsOpen] = useState32(true);
   const closeNotification = () => {
     setIsOpen(false);
     onClosed?.();
@@ -12985,9 +12983,9 @@ var CheckoutNotifications = ({
   onHelp,
   isVisible
 }) => {
-  const [isExpanded, setIsExpanded] = useState34(false);
-  const [initialCheckouts, setInitialCheckouts] = useState34();
-  const [closedNotifications, setClosedNotifications] = useState34([]);
+  const [isExpanded, setIsExpanded] = useState33(false);
+  const [initialCheckouts, setInitialCheckouts] = useState33();
+  const [closedNotifications, setClosedNotifications] = useState33([]);
   const { data: checkouts } = useRecentCheckouts({ isVisible });
   useEffect27(() => {
     if (initialCheckouts || !checkouts) return;
@@ -13043,7 +13041,7 @@ var getUpdatedCheckouts = (checkouts, initialCheckouts) => {
 import {
   useCallback as useCallback40,
   useRef as useRef20,
-  useState as useState62
+  useState as useState61
 } from "react";
 
 // src/hooks/useCheckoutQuoteNotification.ts
@@ -13056,7 +13054,7 @@ import React140, {
   useCallback as useCallback25,
   useContext as useContext15,
   useEffect as useEffect28,
-  useState as useState35
+  useState as useState34
 } from "react";
 import { useConfig as useConfig3 } from "wagmi";
 
@@ -13461,10 +13459,10 @@ function FunkitQuoteProvider({ children }) {
   const wagmiConfig = useConfig3();
   const { walletAddress, logoutSymbol, loginType, userInfo } = useGeneralWallet();
   const enableFrogProxyServer = useFlag(FlagKey10.EnableFrogProxyServer);
-  const [latestQuote, setLatestQuote] = useState35(null);
-  const [isQuoting, setIsQuoting] = useState35(false);
-  const [quoteStepMessage, setQuoteStepMessage] = useState35("");
-  const [quoteErrorMessage, setQuoteErrorMessage] = useState35("");
+  const [latestQuote, setLatestQuote] = useState34(null);
+  const [isQuoting, setIsQuoting] = useState34(false);
+  const [quoteStepMessage, setQuoteStepMessage] = useState34("");
+  const [quoteErrorMessage, setQuoteErrorMessage] = useState34("");
   useEffect28(() => {
     if (isNotNullish8(logoutSymbol)) {
       setLatestQuote(null);
@@ -13761,7 +13759,7 @@ function CheckoutHelp({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/ConfirmationStep.tsx
-import React157, { useEffect as useEffect34, useMemo as useMemo26, useState as useState47 } from "react";
+import React157, { useEffect as useEffect34, useMemo as useMemo26, useState as useState46 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/providers/UserPresenceContext.tsx
@@ -13769,14 +13767,14 @@ import React143, { useEffect as useEffect29 } from "react";
 import {
   createContext as createContext16,
   useContext as useContext16,
-  useState as useState36
+  useState as useState35
 } from "react";
 var DELAY = 5 * 60 * 1e3;
 var UserPresenceContext = createContext16({
   isAway: false
 });
 var UserPresenceProvider = ({ children }) => {
-  const [isAway, setIsAway] = useState36(false);
+  const [isAway, setIsAway] = useState35(false);
   useEffect29(() => {
     let timeoutId;
     const handleVisibilityChange = () => {
@@ -13805,7 +13803,7 @@ import React146 from "react";
 import { FlagKey as FlagKey11, safeParseJson as safeParseJson2 } from "@funkit/utils";
 
 // src/components/FunInfoBanner/EphemeralInfoBanner.tsx
-import React145, { useState as useState37 } from "react";
+import React145, { useState as useState36 } from "react";
 
 // src/components/FunInfoBanner/InfoBanner.tsx
 import React144 from "react";
@@ -13994,7 +13992,7 @@ var EphemeralInfoBanner = ({
   expireAtMs,
   ...props
 }) => {
-  const [isHidden, setIsHidden] = useState37(Date.now() > expireAtMs);
+  const [isHidden, setIsHidden] = useState36(Date.now() > expireAtMs);
   useInterval(() => setIsHidden(Date.now() > expireAtMs), CHECKING_INTERVAL);
   if (isHidden) return null;
   return /* @__PURE__ */ React145.createElement(InfoBanner, { ...props });
@@ -14019,7 +14017,7 @@ import {
   formatDynamicFeeUsd,
   noop as noop5
 } from "@funkit/utils";
-import React149, { useMemo as useMemo20, useState as useState39 } from "react";
+import React149, { useMemo as useMemo20, useState as useState38 } from "react";
 import clsx17 from "clsx";
 import { motion as motion4, useAnimationControls } from "motion/react";
 
@@ -14028,7 +14026,7 @@ import React147, {
   useCallback as useCallback27,
   useEffect as useEffect30,
   useRef as useRef13,
-  useState as useState38
+  useState as useState37
 } from "react";
 import clsx16 from "clsx";
 import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
@@ -14050,9 +14048,9 @@ var FunTooltip = ({
   enableDynamicPositioning = false,
   maxWidth = 180
 }) => {
-  const [isDisplayed, setIsDisplayed] = useState38(false);
-  const [isSafeToRenderInCenter, setIsSafeToRenderInCenter] = useState38(false);
-  const [isSafeToRenderInRight, setIsSafeToRenderInRight] = useState38(false);
+  const [isDisplayed, setIsDisplayed] = useState37(false);
+  const [isSafeToRenderInCenter, setIsSafeToRenderInCenter] = useState37(false);
+  const [isSafeToRenderInRight, setIsSafeToRenderInRight] = useState37(false);
   const delayRef = useRef13();
   const tooltipRef = useRef13(null);
   const show = useCallback27(() => {
@@ -14150,7 +14148,7 @@ var GasIcon = ({ size = 12 }) => /* @__PURE__ */ React148.createElement(
 );
 
 // src/components/FunTransactionSummary/PaymentFeesSummary.css.ts
-var baseStyles = "_1rsrm2f1cf";
+var baseStyles3 = "_1rsrm2f1cf";
 var expandableStyles = "vkwve32";
 var feeLineHideStyles = "vkwve34";
 var feeLineShowStyles = "vkwve33";
@@ -14245,7 +14243,7 @@ function PaymentFeesSummary({
 }) {
   const { apiKey } = useFunkitConfig();
   const controls = useAnimationControls();
-  const [isExpanded, setIsExpanded] = useState39(false);
+  const [isExpanded, setIsExpanded] = useState38(false);
   const toggleIsExpanded = async () => {
     if (isExpanded) {
       controls.set("hiddenOverflow");
@@ -14277,7 +14275,7 @@ function PaymentFeesSummary({
         }
       },
       style: { cursor: isLoading ? "default" : "pointer" },
-      className: clsx17(baseStyles, isExpandable && expandableStyles)
+      className: clsx17(baseStyles3, isExpandable && expandableStyles)
     },
     /* @__PURE__ */ React149.createElement(
       FeeLineItem,
@@ -14379,7 +14377,7 @@ import NumberFlow from "@number-flow/react";
 import { motion as motion5 } from "motion/react";
 import React150, { useMemo as useMemo21 } from "react";
 
-// src/consts/animations.ts
+// src/consts/design.ts
 var mapFontLineHeightToNumberFlowHeight = {
   "14px": "18px",
   "20px": "21px",
@@ -14731,12 +14729,12 @@ function useVertextDisclaimer(checkoutItem, isCardPayment) {
 
 // src/modals/CheckoutModal/ConfirmationStep/useCheckoutConfirmation.ts
 import { ClientError as ClientError2 } from "@funkit/utils";
-import { useState as useState41 } from "react";
+import { useState as useState40 } from "react";
 
 // src/hooks/useAutoClearState.ts
-import { useCallback as useCallback28, useEffect as useEffect31, useRef as useRef14, useState as useState40 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect31, useRef as useRef14, useState as useState39 } from "react";
 function useAutoClearState(initialValue = null) {
-  const [state, setState] = useState40(initialValue);
+  const [state, setState] = useState39(initialValue);
   const timeoutRef = useRef14();
   useEffect31(() => {
     return () => {
@@ -14825,8 +14823,8 @@ function useCheckoutConfirmation({
   const { loginType, funWallet, walletAddress } = useGeneralWallet();
   const { isCustomRecipientBlacklisted, isWalletBlacklisted } = useIsBlacklisted(walletAddress, customRecipient);
   const [error, setError] = useAutoClearState();
-  const [isLoading, setIsLoading] = useState41(false);
-  const [step, setStep] = useState41(null);
+  const [isLoading, setIsLoading] = useState40(false);
+  const [step, setStep] = useState40(null);
   const handleCheckoutConfirmation = async () => {
     try {
       if (!checkoutItem?.selectedPaymentMethodInfo || !latestQuote) {
@@ -14884,10 +14882,10 @@ function useCheckoutConfirmation({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/useCheckoutQuote.ts
-import { useState as useState43 } from "react";
+import { useState as useState42 } from "react";
 
 // src/modals/CheckoutModal/useSourceAssetConfirm.tsx
-import { useEffect as useEffect32, useState as useState42 } from "react";
+import { useEffect as useEffect32, useState as useState41 } from "react";
 
 // src/hooks/useCheckoutAccountBalanceTransfer.ts
 import { useCallback as useCallback29 } from "react";
@@ -15158,7 +15156,7 @@ function useSourceAssetConfirm(setPreloadedQuoteData) {
     selectedPaymentMethodInfo?.paymentMethod === "brokerage" /* BROKERAGE */ ? selectedPaymentMethodInfo.meta.brokerType : void 0
   );
   const { loginType } = useGeneralWallet();
-  const [isSourceAssetConfirming, setIsSourceAssetConfirming] = useState42(false);
+  const [isSourceAssetConfirming, setIsSourceAssetConfirming] = useState41(false);
   const onSourceAssetConfirmed = useEffectEvent(
     async (preloadQuoteData) => {
       try {
@@ -15208,7 +15206,7 @@ function useSourceAssetConfirm(setPreloadedQuoteData) {
   };
 }
 function useHackyTriggerWorkaroundReactDevBrainExplode() {
-  const [trigger, setTriggerImpl] = useState42(0);
+  const [trigger, setTriggerImpl] = useState41(0);
   const setTrigger = useEffectEvent(() => setTriggerImpl((i) => i % 100 + 1));
   return [trigger, setTrigger];
 }
@@ -15239,7 +15237,7 @@ function useCheckoutQuote({
   const { quoteNotification } = useCheckoutQuoteNotification();
   const { messageType, quoteMessage } = quoteNotification;
   const minTargetAssetAmount = checkoutItem?.initSettings.config.targetAssetMinAmount ?? 0;
-  const [retriesLeft, setRetriesLeft] = useState43(null);
+  const [retriesLeft, setRetriesLeft] = useState42(null);
   const {
     // TODO: awkward code/naming about 'confirming assets'
     isSourceAssetConfirming: isQuoting,
@@ -15274,7 +15272,7 @@ function useCheckoutQuote({
 // src/modals/CheckoutModal/ConfirmationStep/usePostCheckout.ts
 import { meshPreviewTransfer as meshPreviewTransfer2, meshPreviewTransferProxy as meshPreviewTransferProxy2 } from "@funkit/api-base";
 import { ClientError as ClientError3, FlagKey as FlagKey14, roundUpToXDecimalPlaces as roundUpToXDecimalPlaces3 } from "@funkit/utils";
-import { useState as useState44 } from "react";
+import { useState as useState43 } from "react";
 
 // src/modals/CheckoutModal/ConfirmationStep/useAccountBalanceTransfer.ts
 import { getPaymasterDataForCheckoutSponsoredTransfer } from "@funkit/api-base";
@@ -15510,8 +15508,8 @@ function usePostCheckout({
   const { checkoutItem, updateSelectedPaymentMethodInfo } = useCheckoutContext();
   const { latestQuote } = useQuoteContext();
   const [error, setError] = useAutoClearState();
-  const [isLoading, setIsLoading] = useState44(false);
-  const [step, setStep] = useState44(null);
+  const [isLoading, setIsLoading] = useState43(false);
+  const [step, setStep] = useState43(null);
   const enableFrogProxyServer = useFlag(FlagKey14.EnableFrogProxyServer);
   const handleMeshPostCheckout = async (depositAddress) => {
     const paymentMethodInfo = checkoutItem?.selectedPaymentMethodInfo;
@@ -15614,17 +15612,17 @@ function usePostCheckout({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/useQuoteRefresh.ts
-import { useCallback as useCallback32, useEffect as useEffect33, useMemo as useMemo25, useRef as useRef15, useState as useState46 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect33, useMemo as useMemo25, useRef as useRef15, useState as useState45 } from "react";
 
 // src/hooks/useCountdown.tsx
 import React156 from "react";
-import { useCallback as useCallback31, useState as useState45 } from "react";
+import { useCallback as useCallback31, useState as useState44 } from "react";
 function useCountdown({
   onCountdownEnded,
   ...props
 }) {
-  const [countdownKey, setCountdownKey] = useState45(0);
-  const [isLastSecond, setIsLastSecond] = useState45(false);
+  const [countdownKey, setCountdownKey] = useState44(0);
+  const [isLastSecond, setIsLastSecond] = useState44(false);
   const restartCountdown = useCallback31(() => {
     setIsLastSecond(false);
     setCountdownKey((key) => key + 1);
@@ -15660,7 +15658,7 @@ function useQuoteRefresh({
   const { setCheckoutQuote, isQuoting, quoteErrorMessage, quoteStepMessage } = useQuoteContext();
   const preloadedQuoteRef = useRef15();
   const quoteCallbackRef = useRef15();
-  const [isPendingRefresh, setIsPendingRefresh] = useState46(false);
+  const [isPendingRefresh, setIsPendingRefresh] = useState45(false);
   const {
     isSourceAssetConfirming,
     onSourceAssetConfirmed,
@@ -15829,8 +15827,8 @@ function ConfirmationStep({
     onSuccess: handlePostCheckout
   });
   const { unlinkBrokerage } = useFunkitMesh();
-  const [suggestedAssetAmount, setSuggestedAssetAmount] = useState47();
-  const [suggestionTried, setSuggestionTried] = useState47(false);
+  const [suggestedAssetAmount, setSuggestedAssetAmount] = useState46();
+  const [suggestionTried, setSuggestionTried] = useState46(false);
   const {
     triggerNewQuote,
     isQuoting: isInitialQuoting,
@@ -16017,7 +16015,7 @@ function ConfirmationStep({
 }
 
 // src/modals/CheckoutModal/ConnectExchange.tsx
-import React163, { useCallback as useCallback33, useState as useState48 } from "react";
+import React163, { useCallback as useCallback33, useState as useState47 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/components/FunGuarantees/FunGuarantees.tsx
@@ -16161,8 +16159,8 @@ function ConnectExchange({
   const { brokerType } = modalState;
   const { appName } = useFunkitConfig();
   const { updateSelectedPaymentMethodInfo } = useCheckoutContext();
-  const [meshPreError, setMeshPreError] = useState48("");
-  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState48(false);
+  const [meshPreError, setMeshPreError] = useState47("");
+  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState47(false);
   const icon = getExchangeIcon(brokerType, 48);
   const exchangeName = getExchangeName(brokerType);
   const connectToBrokerage = useMeshConnect({
@@ -16393,11 +16391,11 @@ var SwitchIcon = () => {
 };
 
 // src/hooks/useDynamicFont.ts
-import { useCallback as useCallback34, useEffect as useEffect35, useRef as useRef16, useState as useState49 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect35, useRef as useRef16, useState as useState48 } from "react";
 var SIZE_STEP = 1;
 var ALLOWANCE = 20;
 var useDynamicFont = (inputValue, max, min = 16) => {
-  const [fontSize, setFontSize] = useState49(max);
+  const [fontSize, setFontSize] = useState48(max);
   const inputRef = useRef16(null);
   const canvasRef = useRef16(document.createElement("canvas"));
   useEffect35(() => {
@@ -17689,7 +17687,7 @@ import {
   meshExecuteTransferProxy
 } from "@funkit/api-base";
 import { ClientError as ClientError4, FlagKey as FlagKey18, formatAddress as formatAddress6 } from "@funkit/utils";
-import React184, { useMemo as useMemo31, useState as useState50 } from "react";
+import React184, { useMemo as useMemo31, useState as useState49 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/components/CopyAddress/CopyAddressButton.tsx
@@ -17903,12 +17901,12 @@ function MeshVerification({
   const transferToAddress = previewResult?.toAddress;
   const { apiKey } = useFunkitConfig();
   const { unlinkBrokerage } = useFunkitMesh();
-  const [twoFactorCode, setTwoFactorCode] = useState50("");
-  const [isSecond2fa, setIsSecond2fa] = useState50(false);
-  const [screen, setScreen] = useState50(0 /* INITIAL */);
-  const [isExecuting, setIsExecuting] = useState50(false);
-  const [executionError, setExecutionError] = useState50("");
-  const [executionContent, setExecutionContent] = useState50(null);
+  const [twoFactorCode, setTwoFactorCode] = useState49("");
+  const [isSecond2fa, setIsSecond2fa] = useState49(false);
+  const [screen, setScreen] = useState49(0 /* INITIAL */);
+  const [isExecuting, setIsExecuting] = useState49(false);
+  const [executionError, setExecutionError] = useState49("");
+  const [executionContent, setExecutionContent] = useState49(null);
   const executionStatus = executionContent?.status;
   const { checkoutItem } = useCheckoutContext();
   const bottomSectionRef = useBottomSectionRef();
@@ -18055,7 +18053,6 @@ function MeshVerification({
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        color: "primaryText",
         gap: "10"
       },
       /* @__PURE__ */ React184.createElement(Text, { size: "14", color: "secondaryText" }, "Executing brokerage transfer"),
@@ -18168,7 +18165,7 @@ var VerificationPopup = ({
 };
 
 // src/modals/CheckoutModal/MoonpaySetup.tsx
-import React186, { useCallback as useCallback36, useMemo as useMemo33, useState as useState52 } from "react";
+import React186, { useCallback as useCallback36, useMemo as useMemo33, useState as useState51 } from "react";
 
 // src/components/FunPayments/FunPaymentMoonpayType.css.ts
 var mpClass = "_1kmpeyf0";
@@ -18177,9 +18174,9 @@ var stretchStyle = "_1kmpeyf1";
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 import { getMoonpayUrlSignature } from "@funkit/api-base";
 import { colorToHex } from "@funkit/utils";
-import React185, { Fragment as Fragment3, useEffect as useEffect39, useMemo as useMemo32, useState as useState51 } from "react";
+import React185, { Fragment as Fragment3, useEffect as useEffect39, useMemo as useMemo32, useState as useState50 } from "react";
 var LazyMoonPayBuyWidget = (props) => {
-  const [MoonPayBuyWidget, setMoonPayBuyWidget] = useState51(null);
+  const [MoonPayBuyWidget, setMoonPayBuyWidget] = useState50(null);
   useEffect39(() => {
     const loadMoonPayBuyWidget = async () => {
       const module = await import("@moonpay/moonpay-react");
@@ -18279,8 +18276,8 @@ function MoonpaySetup({
   onNext
 }) {
   const { paymentAddress, token, tokenChainId, depositAmount } = modalState;
-  const [isSupportedRegion, setIsSupportedRegion] = useState52(true);
-  const [isContinueEnabled, setIsContinueEnabled] = useState52(false);
+  const [isSupportedRegion, setIsSupportedRegion] = useState51(true);
+  const [isContinueEnabled, setIsContinueEnabled] = useState51(false);
   const handleOnCompleted = useCallback36(() => {
     onNext({
       depositAddress: paymentAddress
@@ -18317,7 +18314,7 @@ function MoonpaySetup({
 // src/modals/CheckoutModal/SelectAsset.tsx
 import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST } from "@funkit/chains";
 import { formatCurrencyAndStringify as formatCurrencyAndStringify9 } from "@funkit/utils";
-import React197, { useEffect as useEffect40, useMemo as useMemo36, useState as useState55 } from "react";
+import React197, { useEffect as useEffect40, useMemo as useMemo36, useState as useState54 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Dropdown/ChainDropdown.tsx
@@ -18326,7 +18323,7 @@ import React192 from "react";
 // src/components/Dropdown/BaseDropdown.tsx
 import { isMobile as isMobile13, noop as noop6 } from "@funkit/utils";
 import { AnimatePresence as AnimatePresence3, motion as motion6 } from "motion/react";
-import React190, { useCallback as useCallback37, useMemo as useMemo34, useState as useState53 } from "react";
+import React190, { useCallback as useCallback37, useMemo as useMemo34, useState as useState52 } from "react";
 
 // src/components/FunNoResults/FunNoResults.tsx
 import React188 from "react";
@@ -18403,6 +18400,9 @@ var FunNoResults = ({ children }) => {
 // src/components/Dropdown/BaseActiveDropdownItem.tsx
 import React189 from "react";
 
+// src/components/Dropdown/BaseActiveDropdownItem.css.ts
+var baseStyles4 = "_1dewiqw0";
+
 // src/components/Dropdown/BaseDropdown.css.ts
 var BORDER_RADIUS = "connectButton";
 var baseDropdownItemWrapperStyles = "_1nns6ys1 _1rsrm2fj";
@@ -18437,7 +18437,8 @@ function BaseActiveDropdownItem({
       borderRadius: BORDER_RADIUS,
       borderStyle: "solid",
       paddingY: size === "compact" ? "2" : "8",
-      paddingX: size === "compact" ? "4" : HORIZONTAL_OUTER_PADDING_X
+      paddingX: size === "compact" ? "4" : HORIZONTAL_OUTER_PADDING_X,
+      className: baseStyles4
     },
     /* @__PURE__ */ React189.createElement(
       Box,
@@ -18503,8 +18504,8 @@ function BaseDropdown({
   size = "regular"
 }) {
   const isMobileDevice = isMobile13();
-  const [isOpened, setIsOpened] = useState53();
-  const [searchInput, setSearchInput] = useState53("");
+  const [isOpened, setIsOpened] = useState52();
+  const [searchInput, setSearchInput] = useState52("");
   const selectedOption = options.find((option) => option.value === value);
   const handleSearch = (event) => {
     setSearchInput(event.target.value);
@@ -18809,7 +18810,7 @@ var ChainDropdown = ({
 };
 
 // src/components/Dropdown/ReceiveTokenDropdown.tsx
-import React193, { useState as useState54 } from "react";
+import React193, { useState as useState53 } from "react";
 var TOKEN_ICON_SIZE = 16;
 var getTokenIconUrl = (symbol) => {
   return ASSET_LOGO_SRCS[symbol.toUpperCase()];
@@ -18831,7 +18832,7 @@ var ReceiveTokenDropdown = ({
 }) => {
   const allTokens = Array.from(new Set(Object.values(tokens).flat()));
   const initialSelectedToken = () => tokens.find((token) => token.tokenSymbol === defaultSelectedToken)?.tokenSymbol ?? tokens[0].tokenSymbol;
-  const [selectedSymbol, setSelectedSymbol] = useState54(initialSelectedToken);
+  const [selectedSymbol, setSelectedSymbol] = useState53(initialSelectedToken);
   const activeTokenIconUrl = getTokenIconUrl(selectedSymbol);
   const tokenBadgeText = tokens.find(
     (token) => token.tokenSymbol === selectedSymbol
@@ -19547,7 +19548,7 @@ var SourcePaymentMethodItem = ({
     animate(
       ".framer-spmi-animated-logos-wrapper",
       {
-        background: "transparent"
+        background: "rgba(0, 0, 0, 0)"
       },
       {
         duration: 0.2
@@ -19838,12 +19839,12 @@ function MeshOrAccountSelectAsset({
   accountHoldings,
   fetchHoldingsError
 }) {
-  const [selectedChainId, setSelectedChainId] = useState55();
+  const [selectedChainId, setSelectedChainId] = useState54();
   const { apiKey } = useFunkitConfig();
   const { checkoutItem, updateSourceAsset, updateTargetAsset } = useCheckoutContext();
-  const [explicitlySelectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState55("");
+  const [explicitlySelectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState54("");
   const candidates = checkoutItem?.initSettings.config.dynamicTargetAssetCandidates;
-  const [userSelectedTargetAssetVertex, setUserSelectedTargetAssetVertex] = useState55(isVertexCustomer(apiKey) && candidates ? candidates[0] : null);
+  const [userSelectedTargetAssetVertex, setUserSelectedTargetAssetVertex] = useState54(isVertexCustomer(apiKey) && candidates ? candidates[0] : null);
   const defaultTokenSymbols = useMemo36(() => {
     if (!checkoutItem) {
       return [];
@@ -20187,7 +20188,7 @@ function SelectAsset({
 }
 
 // src/modals/CheckoutModal/SelectBrokerage.tsx
-import React199, { useState as useState56 } from "react";
+import React199, { useState as useState55 } from "react";
 
 // src/components/FunSelectBrokerage/FunSelectBrokerage.tsx
 import clsx21 from "clsx";
@@ -20256,8 +20257,8 @@ function SelectBrokerage({
   const { updateSelectedPaymentMethodInfo } = useCheckoutContext();
   const { getActiveConnection } = useFunkitMesh();
   const { options } = useMeshExchanges({ iconSize: 20 });
-  const [filteredOptions, setFilteredOptions] = useState56(options);
-  const [selectedExchange, setSelectedExchange] = useState56();
+  const [filteredOptions, setFilteredOptions] = useState55(options);
+  const [selectedExchange, setSelectedExchange] = useState55();
   const handleSearch = (event) => {
     setSelectedExchange(void 0);
     const query = event.target.value;
@@ -20306,7 +20307,7 @@ function SelectBrokerage({
 }
 
 // src/modals/CheckoutModal/SourceChange/SourceChange.tsx
-import React201, { useEffect as useEffect42, useState as useState58 } from "react";
+import React201, { useEffect as useEffect42, useState as useState57 } from "react";
 
 // src/components/FunPayments/FunPaymentMethods.tsx
 import {
@@ -21431,7 +21432,7 @@ var usePaymentSources = (paymentMethodInfo, targetChainId) => {
 // src/modals/CheckoutModal/SourceChange/useUpdateSourceAssetForCard.ts
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO11, dydxChain as dydxChain3 } from "@funkit/chains";
 import { getTokenAddressBySymbolAndChainId as getTokenAddressBySymbolAndChainId2 } from "@funkit/core";
-import { useCallback as useCallback39, useState as useState57 } from "react";
+import { useCallback as useCallback39, useState as useState56 } from "react";
 import { mainnet as mainnet7, mantle as mantle2, zkSync as zkSync3 } from "viem/chains";
 var pickSourceAssetForCard = async (checkoutItem, userIpInfo) => {
   if (!checkoutItem?.initSettings.config.targetChain) {
@@ -21486,7 +21487,7 @@ var pickSourceAssetForCard = async (checkoutItem, userIpInfo) => {
 function useUpdateCardSourceAsset() {
   const { checkoutItem, updateSourceAsset } = useCheckoutContext();
   const { userIpInfo } = useFunkitUserIp();
-  const [isUpdating, setIsUpdating] = useState57(false);
+  const [isUpdating, setIsUpdating] = useState56(false);
   const onSelectCard = useCallback39(async () => {
     setIsUpdating(true);
     try {
@@ -21588,8 +21589,8 @@ function SourceChange({
 }) {
   const { paymentMethodInfo, targetChainId } = modalState;
   const { updateSelectedPaymentMethodInfo, checkoutItem } = useCheckoutContext();
-  const [connectedSource, setConnectedSource] = useState58(paymentMethodInfo);
-  const [newSource, setNewSource] = useState58();
+  const [connectedSource, setConnectedSource] = useState57(paymentMethodInfo);
+  const [newSource, setNewSource] = useState57();
   useEffect42(() => {
     if (!paymentMethodInfo) return;
     updateSelectedPaymentMethodInfo(paymentMethodInfo);
@@ -21688,7 +21689,7 @@ function SourceChange({
 // src/modals/CheckoutModal/TransferToken/TransferToken.tsx
 import { FlagKey as FlagKey22 } from "@funkit/utils";
 import { motion as motion8, useAnimationControls as useAnimationControls3 } from "motion/react";
-import React212, { useRef as useRef19, useState as useState61 } from "react";
+import React212, { useRef as useRef19, useState as useState60 } from "react";
 import { polygon as polygon6 } from "viem/chains";
 
 // src/components/CopyAddress/CopyInputDisplayedAddress.tsx
@@ -21747,7 +21748,7 @@ function CopyInputDisplayedAddress({
 }
 
 // src/components/Dropdown/TokenDropdown.tsx
-import React204, { useState as useState59 } from "react";
+import React204, { useState as useState58 } from "react";
 var TOKEN_ICON_SIZE2 = 16;
 var getTokenIconUrl2 = (symbol) => {
   return ASSET_LOGO_SRCS[symbol.toUpperCase()];
@@ -21760,7 +21761,7 @@ var TokenDropdown = ({
 }) => {
   const enabledTokens = assets[selectedChainId];
   const allTokens = Array.from(new Set(Object.values(assets).flat()));
-  const [selectedSymbol, setSelectedSymbol] = useState59(
+  const [selectedSymbol, setSelectedSymbol] = useState58(
     defaultSelectedToken ?? enabledTokens[0]
   );
   const activeTokenIconUrl = getTokenIconUrl2(selectedSymbol);
@@ -21929,7 +21930,7 @@ import {
 } from "@funkit/utils";
 import { motion as motion7, useAnimationControls as useAnimationControls2 } from "motion/react";
 import React211 from "react";
-import { useState as useState60 } from "react";
+import { useState as useState59 } from "react";
 
 // src/components/Icons/New/DollarIcon.tsx
 import React207 from "react";
@@ -22036,8 +22037,8 @@ var TransferTokenDetails = ({
   disabled,
   priceImpact
 }) => {
-  const [isExpanded, setIsExpanded] = useState60(false);
-  const [isDisplayed, setIsDisplayed] = useState60();
+  const [isExpanded, setIsExpanded] = useState59(false);
+  const [isDisplayed, setIsDisplayed] = useState59();
   const timeEstimation = useCheckoutTimeEstimate(
     // not provided on purpose for <1min default visuals
     void 0,
@@ -22283,16 +22284,16 @@ function TransferToken({
   onNext
 }) {
   const controls = useAnimationControls3();
-  const [qrCodeHover, setQrCodeHover] = useState61(false);
+  const [qrCodeHover, setQrCodeHover] = useState60(false);
   const filteredAssets = useEnabledTokenTransferChainTokens();
   const { textCustomizations } = useFunkitConfig();
   const { checkoutItem } = useCheckoutContext();
   const defaultChainId = useFlag(FlagKey22.TokenTransferDefaultChainId);
   const validDefaultChainId = filteredAssets[Number(defaultChainId)] !== void 0 ? Number(defaultChainId) : polygon6.id;
-  const [selectedChainId, setSelectedChainId] = useState61(validDefaultChainId);
+  const [selectedChainId, setSelectedChainId] = useState60(validDefaultChainId);
   const disclaimerTextWrapperRef = useRef19(null);
   const defaultSelectedToken = filteredAssets?.[selectedChainId]?.[0] || "";
-  const [selectedToken, setSelectedToken] = useState61(defaultSelectedToken);
+  const [selectedToken, setSelectedToken] = useState60(defaultSelectedToken);
   const { depositAddress, minTransferUsd, priceImpact } = useTokenTransfer(
     selectedChainId,
     selectedToken
@@ -22484,7 +22485,7 @@ function initialState(checkoutItem) {
   };
 }
 function useCheckoutModalTransition(checkoutItem, onClose) {
-  const [modalState, setModalState] = useState62(() => initialState(checkoutItem));
+  const [modalState, setModalState] = useState61(() => initialState(checkoutItem));
   const { clearCheckoutQuoteMessages } = useCheckoutQuoteNotification();
   const onCloseWrapper = useCallback40(() => {
     checkoutItem.initSettings.onClose?.();
@@ -22496,7 +22497,7 @@ function useCheckoutModalTransition(checkoutItem, onClose) {
     onClose();
   }, [checkoutItem, modalState.step, onClose]);
   const { animation, animate } = useAnimatedNavigation(void 0);
-  const [stateHistory, setHistory] = useState62([]);
+  const [stateHistory, setHistory] = useState61([]);
   const prevStep = useRef20(null);
   const onNext = useCallback40(
     (payload) => {
@@ -22735,7 +22736,7 @@ function ConnectModal({
 
 // src/providers/ModalContext.tsx
 function useModalStateValue() {
-  const [isModalOpen, setModalOpen] = useState63(false);
+  const [isModalOpen, setModalOpen] = useState62(false);
   return {
     closeModal: useCallback41(() => setModalOpen(false), []),
     isModalOpen,
@@ -22743,8 +22744,8 @@ function useModalStateValue() {
   };
 }
 function useModalStateValueWithProp() {
-  const [isModalOpen, setModalOpen] = useState63(false);
-  const [prop, setProp] = useState63(null);
+  const [isModalOpen, setModalOpen] = useState62(false);
+  const [prop, setProp] = useState62(null);
   return {
     closeModal: useCallback41(() => {
       setTimeout(() => {
@@ -22786,7 +22787,7 @@ function ModalProvider({ children }) {
     isModalOpen: chainModalOpen,
     openModal: openChainModal
   } = useModalStateValue();
-  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState63(false);
+  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState62(false);
   const {
     closeModal: closeFunCheckoutModal,
     isModalOpen: funCheckoutModalOpen,
@@ -23189,15 +23190,15 @@ var FunkitWeb2Provider = ({
   const { connectAsync } = useConnect2();
   const { chains } = useConfig5();
   const { connectors, disconnectAsync } = useDisconnect2();
-  const [privy, setPrivy] = useState64(null);
-  const [privyIframeUrl, setPrivyIframeUrl] = useState64();
-  const [loginMethod, setLoginMethod] = useState64(
+  const [privy, setPrivy] = useState63(null);
+  const [privyIframeUrl, setPrivyIframeUrl] = useState63();
+  const [loginMethod, setLoginMethod] = useState63(
     getLoginMethodFromCache() || null
   );
   const wallets = useWalletConnectors();
-  const [isLoggingIn, setIsLoggingIn] = useState64(false);
-  const [loginErrorMessage, setLoginErrorMessage] = useState64("");
-  const [loggedInUser, setLoggedInUser] = useState64(null);
+  const [isLoggingIn, setIsLoggingIn] = useState63(false);
+  const [loginErrorMessage, setLoginErrorMessage] = useState63("");
+  const [loggedInUser, setLoggedInUser] = useState63(null);
   const setLoginMethodAndCache = useCallback42(
     (method) => {
       try {
@@ -23464,7 +23465,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState64(false);
+  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState63(false);
   const handleSendOtpEmail = useCallback42(
     async (emailAddress) => {
       try {
@@ -23490,7 +23491,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const [isGeneratingFcUri, setIsGeneratingFcUri] = useState64(false);
+  const [isGeneratingFcUri, setIsGeneratingFcUri] = useState63(false);
   const handleGenerateFcUri = useCallback42(async () => {
     try {
       if (!privy) throw new Error(ERROR_MESSAGES.PRIVY_NOT_INITIALIZED);
@@ -23638,14 +23639,14 @@ function useConnectionStatus() {
 import React217, {
   createContext as createContext19,
   useContext as useContext19,
-  useState as useState65
+  useState as useState64
 } from "react";
 var ShowBalanceContext = createContext19({
   showBalance: void 0,
   setShowBalance: () => void 0
 });
 function ShowBalanceProvider({ children }) {
-  const [showBalance, setShowBalance] = useState65();
+  const [showBalance, setShowBalance] = useState64();
   return /* @__PURE__ */ React217.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
 }
 var useShowBalance = () => useContext19(ShowBalanceContext);
@@ -23656,9 +23657,9 @@ import React218 from "react";
 import { useAccount as useAccount12, useBalance, useConfig as useConfig6 } from "wagmi";
 
 // src/hooks/useIsMounted.ts
-import { useCallback as useCallback43, useEffect as useEffect45, useState as useState66 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect45, useState as useState65 } from "react";
 function useIsMounted() {
-  const [isMounted, setIsMounted] = useState66(false);
+  const [isMounted, setIsMounted] = useState65(false);
   useEffect45(() => {
     setIsMounted(true);
     return () => {
@@ -23941,7 +23942,7 @@ function ConnectButton({
   const chains = useFunkitConnectChains();
   const connectionStatus = useConnectionStatus();
   const { setShowBalance } = useShowBalance();
-  const [ready, setReady] = useState67(false);
+  const [ready, setReady] = useState66(false);
   useEffect46(() => {
     setShowBalance(showBalance);
     if (!ready) setReady(true);
@@ -24550,7 +24551,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "5.0.8";
+  return "5.0.9";
 }
 function useFingerprint() {
   const fingerprint = useCallback44(() => {