@funkit/connect 5.3.4 → 5.3.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @funkit/connect
 
+## 5.3.6
+
+### Patch Changes
+
+- cf2ab03: feat(connect): handle Relay not finding route
+- c6ca047: feat(connect): refactor checkout listener hooks, including direct executions
+- 6cb808b: chore(connect): upgrade fun-relay
+- 1846641: feat(connect): adjust selection of tokens and chains for Transfer crypto
+- Updated dependencies [6cb808b]
+  - @funkit/fun-relay@0.1.2
+
+## 5.3.5
+
+### Patch Changes
+
+- Updated dependencies [bff34b2]
+  - @funkit/fun-relay@0.1.1
+
 ## 5.3.4
 
 ### Patch Changes

package/dist/components/Dropdown/ChainDropdown.d.ts

@@ -6,8 +6,11 @@ interface ChainDropdownProps {
     assets: TokenTransferSourceChainsAndAssets;
     chainIds?: number[];
     selectedChainId?: number;
-    selectedToken?: string;
-    onChainSelected: (chainId: number | undefined) => void;
+    onChainSelected: (chainId: number | undefined, 
+    /**
+     * If true, it will trigger automatic updates for the matching token in the parent component.
+     */
+    autoUpdate?: boolean) => void;
     /** Provides option to allow going back to unselected state and displays that state as a selectable option */
     allowUnselect?: boolean;
     activeItemProps?: BaseDropdownProps['activeItemProps'];
@@ -15,5 +18,5 @@ interface ChainDropdownProps {
     size?: BaseActiveDropdownItemProps['size'];
     isLoading?: BaseDropdownProps['isLoading'];
 }
-export declare const ChainDropdown: ({ assets, chainIds: chains, selectedChainId, selectedToken, allowUnselect, onChainSelected, activeItemProps, size, openDropdownBackgroundColor, isLoading, }: ChainDropdownProps) => React.JSX.Element;
+export declare const ChainDropdown: ({ assets, chainIds: chains, selectedChainId: propSelectedChainId, allowUnselect, onChainSelected, activeItemProps, size, openDropdownBackgroundColor, isLoading, }: ChainDropdownProps) => React.JSX.Element;
 export {};

package/dist/components/Dropdown/TokenDropdown.d.ts

@@ -4,9 +4,13 @@ import { type BaseDropdownProps } from './BaseDropdown';
 interface TokenDropdownProps {
     selectedChainId: number;
     assets: TokenTransferSourceChainsAndAssets;
-    onTokenSelected: (token: string, chainId?: number) => void;
-    defaultSelectedToken?: string;
+    onTokenSelected: (token: string, chainId?: number, 
+    /**
+     * If true, it will trigger automatic updates for the matching chain in the parent component.
+     */
+    autoUpdate?: boolean) => void;
+    selectedToken?: string;
     isLoading?: BaseDropdownProps['isLoading'];
 }
-export declare const TokenDropdown: ({ assets, selectedChainId, defaultSelectedToken, onTokenSelected, isLoading, }: TokenDropdownProps) => React.JSX.Element;
+export declare const TokenDropdown: ({ assets, selectedChainId, selectedToken, onTokenSelected, isLoading, }: TokenDropdownProps) => React.JSX.Element;
 export {};

package/dist/components/FunFeatureList/FunFeatureList.d.ts

@@ -7,7 +7,9 @@ interface FunFeatureListProps {
     isExpandable?: boolean;
     disabled?: boolean;
     withBackgroundContainer?: boolean;
+    /** Whether background should be applied only to individual items. Defaults to false since background is applied to the container by default */
+    withBackgroundItem?: boolean;
     gapBetweenItems?: Extract<BoxProps['gap'], string>;
 }
-export declare const FunFeatureList: ({ items, isExpandable, disabled, withBackgroundContainer, gapBetweenItems, }: FunFeatureListProps) => React.JSX.Element;
+export declare const FunFeatureList: ({ items, isExpandable, disabled, withBackgroundContainer, withBackgroundItem, gapBetweenItems, }: FunFeatureListProps) => React.JSX.Element;
 export {};

package/dist/hooks/useCheckoutDirectExecutionHistory.d.ts

@@ -2,8 +2,8 @@ import { CheckoutState, type DirectExecution } from '@funkit/api-base';
 export declare function useCheckoutDirectExecutionHistory({ directExecution, }: {
     directExecution: DirectExecution | undefined;
 }): {
-    state: CheckoutState | import("@funkit/fun-relay/dist/src/types").CheckoutState;
-    refundState: import("@funkit/fun-relay/dist/src/types").CheckoutRefundState | undefined;
+    state: import("@funkit/fun-relay/src/types").CheckoutState | CheckoutState;
+    refundState: import("@funkit/fun-relay/src/types").CheckoutRefundState | undefined;
     isRefunded: boolean;
     isCompleted: boolean;
     isFailed: boolean;

package/dist/index.js

@@ -3012,7 +3012,7 @@ function createPaymentMethodInfo(params) {
     case "virtual_bank" /* VIRTUAL_BANK */:
       return {
         paymentMethod: "virtual_bank" /* VIRTUAL_BANK */,
-        title: "Virtual Fiat Account",
+        title: "Fiat Account",
         description: "",
         matchingFiatAccount: params.matchingFiatAccount,
         bridgeCustomer: params.bridgeCustomer
@@ -3846,6 +3846,7 @@ function useCheckoutDirectExecution() {
       fromTokenAddress,
       recipientAddress
     }) => {
+      const multiplier = 10 ** toTokenDecimals;
       return await getRelayQuote({
         actionParams,
         fromChainId,
@@ -3854,8 +3855,8 @@ function useCheckoutDirectExecution() {
         recipientAddress,
         toChainId,
         toTokenAddress,
-        toTokenAmount,
-        toTokenDecimals,
+        toTokenAmountBaseUnit: BigInt(Math.floor(toTokenAmount * multiplier)),
+        tradeType: "EXACT_OUTPUT",
         userAddress: address
       });
     },
@@ -3915,9 +3916,11 @@ function useCheckoutDirectExecution() {
               logger.error("executeRelayQuote:error", error);
               reject(error);
             },
+            onProgress: (step) => {
+              stepMessageSetter(step?.action ?? "");
+            },
             logger,
             relayQuote,
-            stepMessageSetter,
             walletClient
           });
         });
@@ -6314,17 +6317,39 @@ import React61, {
   useRef as useRef5,
   useState as useState12
 } from "react";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/utils/purifyCheckoutHistoryItem.ts
+import {
+  CheckoutState as CheckoutState2
+} from "@funkit/api-base";
 var purifyCheckoutHistoryItem = (item) => {
+  if ("depositAddr" in item) {
+    return {
+      depositAddr: item.depositAddr,
+      directExecution: false,
+      id: item.depositAddr,
+      fromAmountBaseUnit: item.fromAmountBaseUnit,
+      fromChainId: item.fromChainId,
+      fromTokenAddress: item.fromTokenAddress,
+      state: item.state,
+      toChainId: item.toChainId,
+      toTokenAddress: item.toTokenAddress,
+      toAmountBaseUnit: item.toAmountBaseUnit
+    };
+  }
   return {
-    depositAddr: item.depositAddr,
-    state: item.state,
+    directExecution: true,
+    id: item.txHash,
+    fromAmountBaseUnit: item.fromAmountBaseUnit,
     fromChainId: item.fromChainId,
     fromTokenAddress: item.fromTokenAddress,
+    state: CheckoutState2.COMPLETED,
+    // TODO: Read status from BE!!!
     toChainId: item.toChainId,
     toTokenAddress: item.toTokenAddress,
-    toAmountBaseUnit: item.toAmountBaseUnit
+    toAmountBaseUnit: item.toAmountBaseUnit,
+    txHash: item.txHash
   };
 };
 
@@ -6455,48 +6480,50 @@ function useCheckoutHistoryContext() {
 }
 function useCheckoutsListenerByUserId(userId) {
   const { apiKey } = useFunkitConfig();
-  const [data, setData] = useState12([]);
-  const fetchData = useCallback11(async () => {
-    if (!userId) return;
-    const checkoutHistoryList = await getCheckoutsByUserId({
-      userId,
-      apiKey,
-      logger
-    });
-    const purifiedData = checkoutHistoryList.map(purifyCheckoutHistoryItem);
-    setData(purifiedData);
-  }, [apiKey, userId]);
-  useEffect12(() => {
-    const interval = setInterval(() => {
-      fetchData();
-    }, CHECKOUT_HISTORY_REFETCH_INTERVAL_MS);
-    return () => clearInterval(interval);
-  }, [fetchData]);
-  return data;
+  const { data, isLoading } = useQuery2({
+    enabled: !!userId,
+    queryKey: ["getPurifiedCheckoutsByUserId", userId],
+    queryFn: async () => {
+      if (!userId) return void 0;
+      const results = await Promise.all([
+        getCheckoutsByUserId({
+          apiKey,
+          logger,
+          userId
+        }),
+        getDirectExecutionsByUserId({
+          apiKey,
+          logger,
+          userId
+        })
+      ]);
+      return results.flat().map(purifyCheckoutHistoryItem);
+    },
+    refetchInterval: CHECKOUT_HISTORY_REFETCH_INTERVAL_MS
+  });
+  return { data, isLoading };
 }
 function useCheckoutListenerByCheckoutId(checkoutId) {
   const { apiKey } = useFunkitConfig();
-  const [data, setData] = useState12(
-    void 0
-  );
-  const fetchData = useCallback11(async () => {
-    if (!checkoutId) return;
-    const checkoutData = await getCheckoutByDepositAddress({
-      depositAddress: checkoutId,
-      apiKey,
-      logger
-    });
-    if (!checkoutData) return;
-    const purifiedData = purifyCheckoutHistoryItem(checkoutData);
-    setData(purifiedData);
-  }, [apiKey, checkoutId]);
-  useEffect12(() => {
-    const interval = setInterval(() => {
-      fetchData();
-    }, CHECKOUT_HISTORY_REFETCH_INTERVAL_MS);
-    return () => clearInterval(interval);
-  }, [fetchData]);
-  return data;
+  const { data, isLoading } = useQuery2({
+    enabled: !!checkoutId,
+    queryKey: ["getPurifiedCheckoutById", checkoutId],
+    queryFn: async () => {
+      if (!checkoutId) return void 0;
+      const result = isCheckoutHistoryDirectExecution(checkoutId) ? await getDirectExecutionByTxHash({
+        apiKey,
+        logger,
+        txHash: checkoutId
+      }) : await getCheckoutByDepositAddress({
+        apiKey,
+        depositAddress: checkoutId,
+        logger
+      });
+      return result && purifyCheckoutHistoryItem(result);
+    },
+    refetchInterval: CHECKOUT_HISTORY_REFETCH_INTERVAL_MS
+  });
+  return { data, isLoading };
 }
 var useFunkitPostCheckoutInternal = (checkoutId) => {
   const funkitConfig = useFunkitConfig();
@@ -6708,7 +6735,7 @@ import {
   TERMINAL_CHECKOUT_STATES,
   getRiskAssessmentForAddress
 } from "@funkit/api-base";
-import { CheckoutRefundState, CheckoutState as CheckoutState2 } from "@funkit/api-base";
+import { CheckoutRefundState, CheckoutState as CheckoutState3 } from "@funkit/api-base";
 var BLOCKED_RISK_LEVELS = ["Severe", "High"];
 var hasRisk = async (apiKey, walletAddress, customRecipient) => {
   const getUserWalletRisk = walletAddress ? getRiskAssessmentForAddress({
@@ -6738,9 +6765,9 @@ var hasRisk = async (apiKey, walletAddress, customRecipient) => {
 };
 function getCheckoutStateBooleans(checkoutState, refundState) {
   const isProcessing = IN_PROGRESS_CHECKOUT_STATES.includes(checkoutState);
-  const isCompleted = checkoutState === CheckoutState2.COMPLETED;
-  const isError = checkoutState === CheckoutState2.CHECKOUT_ERROR;
-  const isExpired = checkoutState === CheckoutState2.EXPIRED;
+  const isCompleted = checkoutState === CheckoutState3.COMPLETED;
+  const isError = checkoutState === CheckoutState3.CHECKOUT_ERROR;
+  const isExpired = checkoutState === CheckoutState3.EXPIRED;
   const isFailed = isError || isExpired;
   const isTerminal = TERMINAL_CHECKOUT_STATES.includes(checkoutState);
   const isRefundProceeded = refundState === CheckoutRefundState.PROCEEDED || refundState === CheckoutRefundState.FULFILLED;
@@ -7338,7 +7365,7 @@ function useSIWFarcasterListener(channelToken) {
 import {
   getAllWalletTokens
 } from "@funkit/api-base";
-import { keepPreviousData, useQuery as useQuery2 } from "@tanstack/react-query";
+import { keepPreviousData, useQuery as useQuery3 } from "@tanstack/react-query";
 import { arbitrum as arbitrum2, polygon as polygon3 } from "viem/chains";
 import { useAccount as useAccount3 } from "wagmi";
 
@@ -7440,7 +7467,7 @@ var useWalletAssets = ({
 } = {}) => {
   const { address, isConnected } = useAccount3();
   const { apiKey } = useFunkitConfig();
-  const { data, isLoading, isFetching } = useQuery2({
+  const { data, isLoading, isFetching } = useQuery3({
     queryKey: ["getWalletAssets", address, apiKey],
     queryFn: ({ queryKey: [_, addr, key] }) => fetchAssets(addr, key),
     placeholderData: keepPreviousData,
@@ -7972,7 +7999,7 @@ var getFiatAccountLabel = (defaultLabel, account) => {
   const instruction = account.source_deposit_instructions;
   const accountNumber = instruction.iban || instruction.bank_account_number || "";
   const accountEnd = accountNumber.slice(-4);
-  const acountNumberPeek = `\u2022\u2022\u2022\u2022 ${accountEnd}`;
+  const acountNumberPeek = `\u2022\u2022\u2022\u2022${accountEnd}`;
   return `${isSepa ? "SEPA " : ""}${defaultLabel} ${acountNumberPeek}`;
 };
 function isKycUninitialized(customerStatus) {
@@ -8014,7 +8041,7 @@ import { FlagKey as FlagKey8 } from "@funkit/utils";
 import { base as base5 } from "viem/chains";
 
 // src/providers/FunkitMoonpayProvider.tsx
-import { useQuery as useQuery3 } from "@tanstack/react-query";
+import { useQuery as useQuery4 } from "@tanstack/react-query";
 import React72, {
   createContext as createContext14,
   useContext as useContext14,
@@ -8076,7 +8103,7 @@ var isCountryBlocked = (blockedList, userIpInfo) => {
 function useFunkitUserIp() {
   const { moonpayApiKey } = useContext14(FunkitMoonpayContext);
   const { getFlag, isLoading: isLoadingFlags } = useFlags();
-  const { data: userIpInfo, isLoading: isLoadingGeoCheck } = useQuery3({
+  const { data: userIpInfo, isLoading: isLoadingGeoCheck } = useQuery4({
     queryKey: ["getUserIpInfo"],
     queryFn: async () => {
       try {
@@ -8154,7 +8181,7 @@ import {
 } from "@funkit/api-base";
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO9 } from "@funkit/chains";
 import { FlagKey as FlagKey10 } from "@funkit/utils";
-import { useQuery as useQuery5, useQueryClient } from "@tanstack/react-query";
+import { useQuery as useQuery6, useQueryClient } from "@tanstack/react-query";
 import { useCallback as useCallback14 } from "react";
 
 // src/hooks/useCheckoutTransferInit.ts
@@ -8162,7 +8189,7 @@ import {
   initializeCheckoutTokenTransferAddress
 } from "@funkit/api-base";
 import { FlagKey as FlagKey9 } from "@funkit/utils";
-import { useQuery as useQuery4 } from "@tanstack/react-query";
+import { useQuery as useQuery5 } from "@tanstack/react-query";
 var useCheckoutTransferInit = (checkoutConfig) => {
   const { walletAddress, userInfo } = useGeneralWallet();
   const { apiKey } = useFunkitConfig();
@@ -8180,7 +8207,7 @@ var useCheckoutTransferInit = (checkoutConfig) => {
     logger,
     clientMetadata: generateClientMetadataForTokenTransfer()
   };
-  const { data, isFetching } = useQuery4({
+  const { data, isFetching } = useQuery5({
     queryKey: ["initializeCheckoutTokenTransferAddress", queryKey],
     queryFn: ({ queryKey: [_, params] }) => initializeCheckoutTokenTransferAddress(params),
     refetchOnWindowFocus: false,
@@ -8278,7 +8305,7 @@ function useFiatEnabled() {
 function useFrogAccounts() {
   const { apiKey } = useFunkitConfig();
   const { walletAddress } = useGeneralWallet();
-  const query = useQuery5({
+  const query = useQuery6({
     queryKey: ["frogSubAccounts", walletAddress],
     queryFn: () => fetchFrogAccounts(walletAddress, { apiKey, logger }),
     enabled: !!walletAddress,
@@ -8314,7 +8341,7 @@ function useVirtualFiatAccounts() {
   const bridgeSubAccount = frogSubAccounts?.find(
     (subAccount) => subAccount.subAccountType === "bridge"
   );
-  const query = useQuery5({
+  const query = useQuery6({
     queryKey: ["useVirtualFiatAccounts", bridgeSubAccount?.guid],
     queryFn: () => fetchAllFiatAccounts(bridgeSubAccount, { apiKey, logger }),
     enabled: !!bridgeSubAccount,
@@ -8342,7 +8369,7 @@ function useMatchingVirtualFiatAccount(accounts) {
 }
 function useLoadKycLink(linkLoad) {
   const { apiKey } = useFunkitConfig();
-  const query = useQuery5({
+  const query = useQuery6({
     queryKey: ["kycLink", linkLoad.guid],
     queryFn: async () => {
       if (linkLoad.kycLink) {
@@ -9167,7 +9194,7 @@ var getDefaultTransports = () => {
 };
 
 // src/hooks/useMesh.tsx
-import { useQuery as useQuery6 } from "@tanstack/react-query";
+import { useQuery as useQuery7 } from "@tanstack/react-query";
 import React75, { useMemo as useMemo10 } from "react";
 import { FlagKey as FlagKey11 } from "@funkit/utils";
 
@@ -9295,7 +9322,7 @@ var useMeshActiveNetworkInfo = (chainId, brokerType) => {
 };
 function useMeshIntegrations() {
   const { apiKey } = useFunkitConfig();
-  const { data, isLoading } = useQuery6({
+  const { data, isLoading } = useQuery7({
     queryKey: ["funkit-mesh-integrations", apiKey],
     queryFn: async () => {
       return await fetchMeshTransferIntegrations(apiKey);
@@ -9337,7 +9364,7 @@ function useMeshAccountHoldings(targetChain, connection) {
   const { integrations } = useMeshIntegrations();
   const meshDeviceId = getMeshDeviceIdFromLocalStorage();
   const enableFrogProxyServer = useFlag(FlagKey11.EnableFrogProxyServer);
-  const query = useQuery6({
+  const query = useQuery7({
     queryKey: [
       {
         apiKey,
@@ -9361,12 +9388,12 @@ import { useMemo as useMemo12 } from "react";
 
 // src/hooks/useAllowedAssets.ts
 import { getAllowedAssets } from "@funkit/api-base";
-import { useQuery as useQuery7 } from "@tanstack/react-query";
+import { useQuery as useQuery8 } from "@tanstack/react-query";
 import { useCallback as useCallback15, useMemo as useMemo11 } from "react";
 function useAllowedAssets() {
   const { apiKey } = useFunkitConfig();
   const isRelayEnabled = useSourceTokenRelayEnabled();
-  const { data: allowedAssets, isLoading } = useQuery7({
+  const { data: allowedAssets, isLoading } = useQuery8({
     queryKey: ["getAllowedAssets", apiKey],
     queryFn: () => getAllowedAssets({ apiKey, logger }),
     refetchOnMount: false,
@@ -10929,6 +10956,10 @@ var QUOTE_API_ERROR_STRING_INFO = {
     check: "Error estimating checkout cost and time",
     display: DEFAULT_QUOTE_ERROR
   },
+  [6 /* NO_ROUTE_FOUND_RELAY */]: {
+    check: "No routes found",
+    display: "No routes found."
+  },
   [2 /* INSUFFICIENT_AMOUNT_GENERAL_1 */]: {
     check: "try to increase the amount",
     display: "Checkout amount is too low. Please retry."
@@ -16656,13 +16687,13 @@ function InputAmountLoading({
 
 // src/modals/CheckoutModal/InputAmount/useAssetPrice.ts
 import { getAssetPriceInfo as getAssetPriceInfo3 } from "@funkit/api-base";
-import { skipToken, useQuery as useQuery8 } from "@tanstack/react-query";
+import { skipToken, useQuery as useQuery9 } from "@tanstack/react-query";
 function useAssetPrice({
   chainId,
   assetTokenAddress
 }) {
   const { apiKey } = useFunkitConfig();
-  const { data, error, isLoading } = useQuery8({
+  const { data, error, isLoading } = useQuery9({
     queryKey: ["getAssetPriceInfo", chainId, assetTokenAddress],
     queryFn: chainId && assetTokenAddress ? async () => {
       try {
@@ -18480,8 +18511,7 @@ var DEFAULT_VALUE = "";
 var ChainDropdown = ({
   assets,
   chainIds: chains,
-  selectedChainId,
-  selectedToken,
+  selectedChainId: propSelectedChainId,
   allowUnselect,
   onChainSelected,
   activeItemProps,
@@ -18490,15 +18520,26 @@ var ChainDropdown = ({
   isLoading
 }) => {
   const chainIds = chains ?? Object.keys(assets).map(Number);
-  const enabledChainIds = selectedToken ? chainIds.filter((chainId) => assets[chainId].includes(selectedToken)) : chainIds;
   const options = allowUnselect ? [DEFAULT_VALUE, ...chainIds] : chainIds;
-  const handleOptionSelect = (value) => {
+  const [selectedChainId, setSelectedChainId] = React171.useState(propSelectedChainId);
+  useIsomorphicLayoutEffect(() => {
+    if (propSelectedChainId === void 0) {
+      setSelectedChainId(void 0);
+      return;
+    }
+    if (propSelectedChainId && propSelectedChainId !== selectedChainId) {
+      handleOptionSelect(propSelectedChainId.toString(), false);
+    }
+  }, [propSelectedChainId, selectedChainId]);
+  const handleOptionSelect = (value, autoUpdate = true) => {
     if (!value) return onChainSelected(void 0);
     const chainId = Number(value);
     if (allowUnselect && chainId === selectedChainId) {
-      onChainSelected(void 0);
+      setSelectedChainId(void 0);
+      onChainSelected(void 0, autoUpdate);
     } else {
-      onChainSelected(chainId);
+      setSelectedChainId(chainId);
+      onChainSelected(chainId, autoUpdate);
     }
   };
   return /* @__PURE__ */ React171.createElement(
@@ -18531,7 +18572,6 @@ var ChainDropdown = ({
       })),
       renderDropdownOption: (option, isSelected) => {
         const metadata = chainMetadataById[option.value];
-        const isDisabled = option.value !== DEFAULT_VALUE && !enabledChainIds.includes(Number(option.value));
         const dropdownItem = /* @__PURE__ */ React171.createElement(
           BaseDropdownItem_default,
           {
@@ -18549,19 +18589,10 @@ var ChainDropdown = ({
             id: option.value,
             onClick: handleOptionSelect,
             label: option.label,
-            isSelected,
-            isDisabled
+            isSelected
           }
         );
-        return isDisabled ? /* @__PURE__ */ React171.createElement(
-          FunTooltip,
-          {
-            tooltipPosition: "left",
-            maxWidth: 132,
-            content: "Chain isn't available for the selected token"
-          },
-          dropdownItem
-        ) : dropdownItem;
+        return dropdownItem;
       },
       preloadIconUrls: chainIds.map((id) => chainMetadataById[id].iconUrl)
     }
@@ -20471,7 +20502,7 @@ var useNewTokens = () => {
 var TokenDropdown = ({
   assets,
   selectedChainId,
-  defaultSelectedToken,
+  selectedToken,
   onTokenSelected,
   isLoading
 }) => {
@@ -20479,26 +20510,26 @@ var TokenDropdown = ({
   const allTokens = Array.from(
     new Set(Object.values(assets).flat())
   );
-  const defaultToken = defaultSelectedToken ?? enabledTokens[0];
+  const defaultToken = selectedToken ?? enabledTokens[0];
   const [isTouched, setIsTouched] = useState46(false);
   const [selectedSymbol, setSelectedSymbol] = useState46(defaultToken);
   const { newTokens, newSymbol } = useNewTokens();
-  const handleChangeSymbol = (symbol) => {
+  useIsomorphicLayoutEffect(() => {
+    if (selectedToken && selectedToken !== selectedSymbol && allTokens.includes(selectedToken)) {
+      handleChangeSymbol(selectedToken, false);
+    }
+  }, [selectedToken, allTokens, selectedSymbol, enabledTokens]);
+  const handleChangeSymbol = (symbol, autoUpdate = true) => {
     setSelectedSymbol(symbol);
     if (!enabledTokens.includes(symbol)) {
       const matchingChainIdForToken = Object.entries(assets).find(
         ([, tokens]) => tokens.includes(symbol)
       )?.[0];
-      onTokenSelected(symbol, Number(matchingChainIdForToken));
+      onTokenSelected(symbol, Number(matchingChainIdForToken), autoUpdate);
     } else {
-      onTokenSelected(symbol);
+      onTokenSelected(symbol, void 0, autoUpdate);
     }
   };
-  useIsomorphicLayoutEffect(() => {
-    if (!enabledTokens.includes(selectedSymbol)) {
-      handleChangeSymbol(enabledTokens[0]);
-    }
-  }, [selectedSymbol, enabledTokens]);
   return /* @__PURE__ */ React182.createElement(
     BaseDropdown_default,
     {
@@ -20909,8 +20940,11 @@ var FunFeatureListItem = ({
           gap: "6"
         }
       },
-      isMultiline ? /* @__PURE__ */ React189.createElement(Box, { display: "flex" }, /* @__PURE__ */ React189.createElement(Text, { size: "12", weight: "medium" }, text), tooltip && TooltipWrapperElement) : /* @__PURE__ */ React189.createElement(Text, { size: "12", weight: "regular" }, text, /* @__PURE__ */ React189.createElement(React189.Fragment, null, "\xA0")),
-      isMultiline ? /* @__PURE__ */ React189.createElement(Box, { display: "flex", flexDirection: "column", gap: "6" }, value.map((v, index) => /* @__PURE__ */ React189.createElement(Text, { size: "12", weight: "regular", display: "inline", key: index }, v))) : /* @__PURE__ */ React189.createElement(Text, { size: "12", weight: "medium", display: "inline" }, valueLabel),
+      isMultiline ? /* @__PURE__ */ React189.createElement(Box, { display: "flex" }, /* @__PURE__ */ React189.createElement(Text, { size: "12", weight: "medium" }, text), tooltip && TooltipWrapperElement) : /* @__PURE__ */ React189.createElement(Text, { size: "12" }, text, /* @__PURE__ */ React189.createElement(React189.Fragment, null, "\xA0")),
+      isMultiline ? /* @__PURE__ */ React189.createElement(Box, { display: "flex", flexDirection: "column", gap: "6" }, value.map((v, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: this is completely fine
+        /* @__PURE__ */ React189.createElement(Text, { size: "12", display: "inline", key: index }, v)
+      ))) : /* @__PURE__ */ React189.createElement(Text, { size: "12", weight: "medium", display: "inline" }, valueLabel),
       !isMultiline && tooltip && TooltipWrapperElement
     )
   );
@@ -20922,6 +20956,7 @@ var FunFeatureList = ({
   isExpandable = false,
   disabled = false,
   withBackgroundContainer = true,
+  withBackgroundItem = false,
   gapBetweenItems = "6"
 }) => {
   const [isExpanded, setIsExpanded] = useState47(false);
@@ -21009,7 +21044,19 @@ var FunFeatureList = ({
           paddingY: "8"
         }
       },
-      items.map((item, index) => /* @__PURE__ */ React190.createElement(FunFeatureListItem, { key: index, ...item }))
+      items.map((item, index) => /* @__PURE__ */ React190.createElement(
+        Box,
+        {
+          key: index,
+          ...withBackgroundItem && {
+            paddingX: "12",
+            paddingY: "8",
+            borderRadius: "connectButton",
+            background: "offBackground"
+          }
+        },
+        /* @__PURE__ */ React190.createElement(FunFeatureListItem, { ...item })
+      ))
     )
   );
 };
@@ -21282,10 +21329,10 @@ function TransferToken({
         TokenDropdown,
         {
           isLoading: isLoadingDepositAddress,
-          defaultSelectedToken,
+          selectedToken,
           selectedChainId,
           assets: filteredAssets,
-          onTokenSelected: (token, chainId) => {
+          onTokenSelected: (token, chainId, autoUpdate) => {
             logger.log(`${TRANSFER_TOKEN_LOG_PREFIX}_changeToken`, {
               previousToken: selectedToken,
               newToken: token,
@@ -21301,16 +21348,30 @@ function TransferToken({
             if (chainId !== void 0 && chainId !== selectedChainId) {
               setSelectedChainId(chainId);
             }
+            if (autoUpdate) {
+              const isSupportedOnDefaultChain = filteredAssets[defaultChainId]?.includes(token);
+              if (isSupportedOnDefaultChain) {
+                setSelectedChainId(defaultChainId);
+              } else {
+                const matchingDefaultChainId = Object.keys(
+                  filteredAssets
+                ).find(
+                  (chainId2) => filteredAssets[Number(chainId2)]?.includes(token)
+                );
+                if (matchingDefaultChainId) {
+                  setSelectedChainId(Number(matchingDefaultChainId));
+                }
+              }
+            }
           }
         }
       )), /* @__PURE__ */ React193.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React193.createElement(Text, { size: "12", weight: "medium" }, "Supported chain"), /* @__PURE__ */ React193.createElement(
         ChainDropdown,
         {
           isLoading: isLoadingDepositAddress,
-          selectedToken,
           selectedChainId,
           assets: filteredAssets,
-          onChainSelected: (chainId) => {
+          onChainSelected: (chainId, autoUpdate) => {
             if (chainId === void 0) return;
             logger.log(`${TRANSFER_TOKEN_LOG_PREFIX}_changeChain`, {
               previousChainId: selectedChainId,
@@ -21319,6 +21380,12 @@ function TransferToken({
               depositAddress
             });
             setSelectedChainId(chainId);
+            if (autoUpdate) {
+              const matchingDefaultToken = filteredAssets[chainId][0];
+              if (matchingDefaultToken && matchingDefaultToken !== selectedToken) {
+                setSelectedToken(matchingDefaultToken);
+              }
+            }
           }
         }
       ))),
@@ -21527,7 +21594,7 @@ var AccountDetailsScreen = ({
     setDetailsExpanded((prev) => !prev);
   };
   const { source_deposit_instructions: sourceDeposit } = matchingFiatAccount;
-  return /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "16" }, /* @__PURE__ */ React196.createElement(
     SourcePaymentMethodItem,
     {
       onClick: () => onNext({}),
@@ -21535,14 +21602,14 @@ var AccountDetailsScreen = ({
       keyText: label.text,
       keyIcon: label.icon
     }
-  ), /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "18" }, /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React196.createElement(Text, null, "Your virtual fiat account details"), /* @__PURE__ */ React196.createElement(Text, { size: "12" }, "Use these details to transfer EUR. Funds arrive in 1\u20132 days to your", " ", appName, " account.")), /* @__PURE__ */ React196.createElement(
+  ), /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React196.createElement(Text, null, "Your virtual fiat account details"), /* @__PURE__ */ React196.createElement(Text, { size: "12" }, "Use these details to transfer EUR. Funds arrive in 1\u20132 days to your ", appName, " account.")), /* @__PURE__ */ React196.createElement(
     Tabs,
     {
       tabs,
       activeTab,
       onTabChange: (tab) => setActiveTab(tab)
     }
-  ), activeTab === "details" ? /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, sourceDeposit.bank_account_number ? /* @__PURE__ */ React196.createElement(
+  )), activeTab === "details" ? /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, sourceDeposit.bank_account_number ? /* @__PURE__ */ React196.createElement(
     FunInputButton,
     {
       label: "Account number",
@@ -21632,8 +21699,9 @@ var AccountDetailsScreen = ({
   )) : /* @__PURE__ */ React196.createElement(
     FunFeatureList,
     {
+      gapBetweenItems: "8",
       withBackgroundContainer: false,
-      gapBetweenItems: "20",
+      withBackgroundItem: true,
       items: [
         {
           text: "Fees",
@@ -21647,9 +21715,8 @@ var AccountDetailsScreen = ({
         {
           text: "Limits",
           value: [
-            //TODO: Change displayed minimum for australia/canada (?)
-            "Minimum amount: 25 USD",
-            "Maximum amount: 20,000,000 USD"
+            "Minimum amount: 25 EUR",
+            "Maximum amount: 20,000,000 EUR"
           ],
           icon: /* @__PURE__ */ React196.createElement(DollarIcon, null)
         },
@@ -21972,7 +22039,8 @@ function useTitleConfig(checkoutItem, state) {
 // src/components/FunCheckoutModalHeightAnimationWrapper/FunCheckoutModalHeightAnimationWrapper.tsx
 var DEFAULT_HEIGHT = 525;
 var mapHeightToCheckoutStep = {
-  ["transfer_token" /* TRANSFER_TOKEN */]: 825
+  ["transfer_token" /* TRANSFER_TOKEN */]: 825,
+  ["fiat_account_detail" /* FIAT_ACCOUNT_DETAIL */]: 825
 };
 function FunCheckoutModalHeightAnimationWrapper({
   children,
@@ -23750,7 +23818,7 @@ import { createPortal as createPortal13 } from "react-dom";
 // src/hooks/useCheckoutDirectExecutionHistory.ts
 import {
   CheckoutRefundState as CheckoutRefundState2,
-  CheckoutState as CheckoutState3,
+  CheckoutState as CheckoutState4,
   DirectExecutionType as DirectExecutionType4
 } from "@funkit/api-base";
 import {
@@ -23763,13 +23831,13 @@ import {
   getRelayExecutionInfo,
   isRelayExecutionTerminalStatus
 } from "@funkit/fun-relay";
-import { useQuery as useQuery9 } from "@tanstack/react-query";
+import { useQuery as useQuery10 } from "@tanstack/react-query";
 var RELAY_FETCH_INTERVAL = 2e3;
 var logPrefix = "useRelayExecutionInfo";
 function useRelayExecutionInfo({
   relayRequestId
 }) {
-  const { data: relayExecutionInfo, isLoading: isLoadingRelayExecutionInfo } = useQuery9({
+  const { data: relayExecutionInfo, isLoading: isLoadingRelayExecutionInfo } = useQuery10({
     queryKey: [logPrefix, relayRequestId],
     queryFn: async () => {
       try {
@@ -23808,7 +23876,7 @@ function useCheckoutDirectExecutionHistory({
     getRelayExecutionState(relayExecutionInfo)
   ) : (
     // For all other cases, direct execution is considered completed
-    CheckoutState3.COMPLETED
+    CheckoutState4.COMPLETED
   );
   const refundState = relayExecutionInfo && type === DirectExecutionType4.RELAY ? getRelayExecutionRefundState(relayExecutionInfo) : void 0;
   const isDelayed2 = type === DirectExecutionType4.RELAY && relayExecutionInfo?.status === "delayed";
@@ -23816,8 +23884,8 @@ function useCheckoutDirectExecutionHistory({
     state,
     refundState,
     isRefunded: refundState === CheckoutRefundState2.REFUNDED,
-    isCompleted: state === CheckoutState3.COMPLETED,
-    isFailed: state === CheckoutState3.CHECKOUT_ERROR,
+    isCompleted: state === CheckoutState4.COMPLETED,
+    isFailed: state === CheckoutState4.CHECKOUT_ERROR,
     isDelayed: isDelayed2
   };
 }
@@ -25484,7 +25552,7 @@ import {
   getCheckoutsByUserId as getCheckoutsByUserId2
 } from "@funkit/api-base";
 import { FlagKey as FlagKey27 } from "@funkit/utils";
-import { useQuery as useQuery10 } from "@tanstack/react-query";
+import { useQuery as useQuery11 } from "@tanstack/react-query";
 var hasCorrectPaymentMethod = (checkout, paymentMethod) => !paymentMethod || checkout.clientMetadata.selectedPaymentMethodInfo?.paymentMethod === paymentMethod;
 var isRecent = (checkout, timestampCutoff) => checkout.createdTimeMs > timestampCutoff;
 var DEFAULT_CUTOFF = 7 * 24 * 60 * 60 * 1e3;
@@ -25502,7 +25570,7 @@ var useRecentCheckouts = ({
   const { listRefresh } = useCheckoutRefreshInterval();
   const defaultTimestampCutoff = Date.now() - DEFAULT_CUTOFF;
   const timestampCutoff = newerThanMs ?? defaultTimestampCutoff;
-  const query = useQuery10({
+  const query = useQuery11({
     queryKey: ["checkouts", userInfo.id],
     queryFn: async () => {
       const checkouts = await getCheckoutsByUserId2({
@@ -26215,11 +26283,11 @@ var FunNotificationBanner = ({
 import {
   getCheckoutByDepositAddress as getCheckoutByDepositAddress2
 } from "@funkit/api-base";
-import { useQuery as useQuery11 } from "@tanstack/react-query";
+import { useQuery as useQuery12 } from "@tanstack/react-query";
 var useCheckout = (depositAddress, initial) => {
   const { apiKey } = useFunkitConfig();
   const { itemRefresh } = useCheckoutRefreshInterval();
-  const query = useQuery11({
+  const query = useQuery12({
     queryKey: ["checkouts", "checkout", depositAddress],
     queryFn: () => (
       // biome-ignore lint/style/noNonNullAssertion: already checked for null
@@ -28371,7 +28439,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "5.3.4";
+  return "5.3.6";
 }
 function useFingerprint() {
   const fingerprint = useCallback49(() => {

package/dist/providers/FunkitHistoryContext.d.ts

@@ -19,18 +19,22 @@ export declare function FunkitCheckoutHistoryProvider({ children, }: {
 export declare function useCheckoutHistoryContext(): FunkitCheckoutHistoryContextInterface;
 /**
  * External hook to listen for checkout history every 5000ms
- *
  * @param userId ID of the user (wallet address)
  * @returns PurifiedCheckoutHistoryItem[]
  */
-export declare function useCheckoutsListenerByUserId(userId: string): PurifiedCheckoutHistoryItem[];
+export declare function useCheckoutsListenerByUserId(userId: string | undefined): {
+    data?: PurifiedCheckoutHistoryItem[];
+    isLoading: boolean;
+};
 /**
  * External hook to listen for checkout history every 5000ms
- *
  * @param checkoutId ID of the checkout
- * @returns PurifiedCheckoutHistoryItem | undefined
+ * @returns PurifiedCheckoutHistoryItem | null
  */
-export declare function useCheckoutListenerByCheckoutId(checkoutId: string): PurifiedCheckoutHistoryItem | undefined;
+export declare function useCheckoutListenerByCheckoutId(checkoutId: Hex | undefined): {
+    data?: PurifiedCheckoutHistoryItem | null;
+    isLoading: boolean;
+};
 /**
  * Internal hook to handle post-checkout, PER-BACKEND-CHECKOUT ITEM.
  */

package/dist/utils/purifyCheckoutHistoryItem.d.ts

@@ -1,3 +1,24 @@
-import type { CheckoutHistoryItem } from '@funkit/api-base';
-export type PurifiedCheckoutHistoryItem = Pick<CheckoutHistoryItem, 'depositAddr' | 'state' | 'fromChainId' | 'fromTokenAddress' | 'toChainId' | 'toTokenAddress' | 'toAmountBaseUnit'>;
-export declare const purifyCheckoutHistoryItem: (item: CheckoutHistoryItem) => PurifiedCheckoutHistoryItem;
+import { type CheckoutHistoryItem, CheckoutState, type DirectExecution } from '@funkit/api-base';
+import type { Address, Hex } from 'viem';
+export type PurifiedCheckoutHistoryItem = {
+    depositAddr?: Address;
+    directExecution: boolean;
+    id: Hex;
+    fromAmountBaseUnit: string;
+    fromChainId: string;
+    fromTokenAddress: Address;
+    state: CheckoutState;
+    toAmountBaseUnit: string;
+    toChainId: string;
+    toTokenAddress: Address;
+    txHash?: Hex;
+} & ({
+    depositAddr: Address;
+    directExecution: false;
+    txHash?: never;
+} | {
+    depositAddr?: never;
+    directExecution: true;
+    txHash: Hex;
+});
+export declare const purifyCheckoutHistoryItem: (item: CheckoutHistoryItem | DirectExecution) => PurifiedCheckoutHistoryItem;

package/dist/wallets/walletConnectors/index.js

@@ -1,13 +1,13 @@
 "use client";
-import {
-  zerionWallet
-} from "./chunk-AXWP3GD4.js";
 import {
   walletConnectWallet
 } from "./chunk-NP5QGWNL.js";
 import {
-  zealWallet
-} from "./chunk-JROWU5BP.js";
+  zerionWallet
+} from "./chunk-AXWP3GD4.js";
+import {
+  xdefiWallet
+} from "./chunk-NO7XMBB5.js";
 import {
   subWallet
 } from "./chunk-AD2KIJB6.js";
@@ -18,23 +18,20 @@ import {
   talismanWallet
 } from "./chunk-ABFSXBE6.js";
 import {
-  tokenPocketWallet
-} from "./chunk-IDKVN5CF.js";
+  tokenaryWallet
+} from "./chunk-SLOIIJGP.js";
 import {
-  xdefiWallet
-} from "./chunk-NO7XMBB5.js";
+  uniswapWallet
+} from "./chunk-LH7BMNFZ.js";
 import {
   trustWallet
 } from "./chunk-ISIBREBO.js";
 import {
-  uniswapWallet
-} from "./chunk-LH7BMNFZ.js";
-import {
-  tokenaryWallet
-} from "./chunk-SLOIIJGP.js";
+  tokenPocketWallet
+} from "./chunk-IDKVN5CF.js";
 import {
-  phantomWallet
-} from "./chunk-ZSVTX6EK.js";
+  zealWallet
+} from "./chunk-JROWU5BP.js";
 import {
   oneKeyWallet
 } from "./chunk-4AD7VI2P.js";
@@ -50,39 +47,39 @@ import {
 import {
   safeheronWallet
 } from "./chunk-R6RWZRFF.js";
+import {
+  safepalWallet
+} from "./chunk-MSFKSQBY.js";
+import {
+  oneInchWallet
+} from "./chunk-OESTDX6I.js";
 import {
   safeWallet
 } from "./chunk-BQQQL6UD.js";
 import {
-  safepalWallet
-} from "./chunk-MSFKSQBY.js";
+  ledgerWallet
+} from "./chunk-BRBKM4PW.js";
 import {
   metaMaskWallet
 } from "./chunk-G73C6P5P.js";
-import {
-  mewWallet
-} from "./chunk-V57WLZEE.js";
 import {
   oktoWallet
 } from "./chunk-ADIXAKUL.js";
-import {
-  ledgerWallet
-} from "./chunk-BRBKM4PW.js";
-import {
-  oneInchWallet
-} from "./chunk-OESTDX6I.js";
 import {
   okxWallet
 } from "./chunk-4WEHDI4Y.js";
+import {
+  mewWallet
+} from "./chunk-V57WLZEE.js";
 import {
   omniWallet
 } from "./chunk-7CUY5G6R.js";
+import {
+  phantomWallet
+} from "./chunk-ZSVTX6EK.js";
 import {
   rabbyWallet
 } from "./chunk-BVX4XGNP.js";
-import {
-  frameWallet
-} from "./chunk-ZMYVTWDF.js";
 import {
   foxWallet
 } from "./chunk-LMZMXEXL.js";
@@ -90,35 +87,38 @@ import {
   frontierWallet
 } from "./chunk-3S2U24BJ.js";
 import {
-  injectedWallet
-} from "./chunk-VCVVV2K7.js";
+  frameWallet
+} from "./chunk-ZMYVTWDF.js";
 import {
   gateWallet
 } from "./chunk-GSOYKKIS.js";
 import {
   imTokenWallet
 } from "./chunk-COZ7MIQS.js";
+import {
+  injectedWallet
+} from "./chunk-VCVVV2K7.js";
 import {
   kresusWallet
 } from "./chunk-MJXPRJZT.js";
-import {
-  coin98Wallet
-} from "./chunk-DTRYS3MO.js";
 import {
   clvWallet
 } from "./chunk-KR6JBW5E.js";
 import {
-  bybitWallet
-} from "./chunk-6ONTSPEY.js";
+  coin98Wallet
+} from "./chunk-DTRYS3MO.js";
 import {
   coinbaseWallet
 } from "./chunk-H4IRCEZN.js";
+import {
+  coreWallet
+} from "./chunk-HBA36GW3.js";
 import {
   dawnWallet
 } from "./chunk-LN7OD5EC.js";
 import {
-  coreWallet
-} from "./chunk-HBA36GW3.js";
+  bloomWallet
+} from "./chunk-S27IADFU.js";
 import {
   desigWallet
 } from "./chunk-CTU6JCOK.js";
@@ -131,22 +131,22 @@ import {
 import {
   bifrostWallet
 } from "./chunk-W6N74MS3.js";
-import {
-  bitskiWallet
-} from "./chunk-P74YPRF6.js";
 import {
   bitgetWallet
 } from "./chunk-A5APNTGL.js";
 import {
-  bloomWallet
-} from "./chunk-S27IADFU.js";
+  bitskiWallet
+} from "./chunk-P74YPRF6.js";
 import {
   bitverseWallet
 } from "./chunk-3HZRRP4Y.js";
-import "./chunk-23WIEY36.js";
 import {
   braveWallet
 } from "./chunk-PB254NQ4.js";
+import {
+  bybitWallet
+} from "./chunk-6ONTSPEY.js";
+import "./chunk-23WIEY36.js";
 import "./chunk-WRA2DVJ7.js";
 export {
   argentWallet,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funkit/connect",
-  "version": "5.3.4",
+  "version": "5.3.6",
   "description": "Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.",
   "files": [
     "dist",
@@ -91,11 +91,11 @@
     "react-virtuoso": "4.10.1",
     "ua-parser-js": "^1.0.37",
     "uuid": "^9.0.1",
-    "@funkit/api-base": "1.8.2",
+    "@funkit/core": "2.3.19",
+    "@funkit/fun-relay": "0.1.2",
     "@funkit/chains": "0.2.3",
+    "@funkit/api-base": "1.8.2",
     "@funkit/utils": "1.0.13",
-    "@funkit/core": "2.3.19",
-    "@funkit/fun-relay": "0.1.0",
     "@funkit/wagmi-tools": "3.0.41"
   },
   "repository": {