[READY] feat: enhance useTokenIcon to accept token details objects

apps/api/src/api/services/quote/core/squidrouter.ts

@@ -239,8 +239,18 @@ export async function calculateEvmBridgeAndNetworkFee(request: EvmBridgeRequest)
       outputTokenDecimals
     };
   } catch (error) {
-    logger.error(`Error calculating EVM bridge and network fee: ${error instanceof Error ? error.message : String(error)}`);
-    // We assume that the error is due to a low input amount
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    logger.error(`Error calculating EVM bridge and network fee: ${errorMessage}`);
+
+    // Check for specific SquidRouter error types
+    if (errorMessage.toLowerCase().includes("low liquidity") || errorMessage.toLowerCase().includes("reduce swap amount")) {
+      throw new APIError({
+        message: QuoteError.LowLiquidity,
+        status: httpStatus.BAD_REQUEST
+      });
+    }
+
+    // Default to generic error for other cases
     throw new APIError({
       message: QuoteError.InputAmountTooLow,
       status: httpStatus.BAD_REQUEST

apps/frontend/src/components/AssetNumericInput/index.tsx

@@ -1,4 +1,4 @@
-import { EvmToken } from "@vortexfi/shared";
+import { EvmToken, Networks } from "@vortexfi/shared";
 import type { ChangeEvent, FC } from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import { cn } from "../../helpers/cn";
@@ -24,6 +24,7 @@ interface AssetNumericInputProps {
   fallbackLogoURI?: string;
   registerInput: UseFormRegisterReturn<keyof QuoteFormValues>;
   id: string;
+  network?: Networks;
 }
 
 export const AssetNumericInput: FC<AssetNumericInputProps> = ({
@@ -45,6 +46,7 @@ export const AssetNumericInput: FC<AssetNumericInputProps> = ({
         assetIcon={assetIcon}
         fallbackLogoURI={rest.fallbackLogoURI}
         logoURI={rest.logoURI}
+        network={rest.network}
         onClick={onClick}
         tokenSymbol={tokenSymbol}
       />

apps/frontend/src/components/CurrencyExchange/index.tsx

@@ -1,5 +1,7 @@
+import { Networks } from "@vortexfi/shared";
 import Arrow from "../../assets/arrow.svg";
-import { useGetAssetIcon } from "../../hooks/useGetAssetIcon";
+import { useTokenIcon } from "../../hooks/useTokenIcon";
+import { TokenIconWithNetwork } from "../TokenIconWithNetwork";
 
 interface CurrencyExchangeProps {
   inputAmount: string;
@@ -10,6 +12,12 @@ interface CurrencyExchangeProps {
   layout?: "horizontal" | "vertical";
   className?: string;
   showApproximation?: boolean;
+  inputNetwork?: Networks;
+  outputNetwork?: Networks;
+  inputIcon?: string;
+  outputIcon?: string;
+  inputFallbackIcon?: string;
+  outputFallbackIcon?: string;
 }
 
 export const CurrencyExchange = ({
@@ -20,25 +28,53 @@ export const CurrencyExchange = ({
   showIcons = false,
   layout = "horizontal",
   className = "",
-  showApproximation = false
+  showApproximation = false,
+  inputNetwork,
+  outputNetwork,
+  inputIcon: inputIconProp,
+  outputIcon: outputIconProp,
+  inputFallbackIcon,
+  outputFallbackIcon
 }: CurrencyExchangeProps) => {
-  const inputIcon = useGetAssetIcon(inputCurrency.toLowerCase());
-  const outputIcon = useGetAssetIcon(outputCurrency.toLowerCase());
+  // Use useTokenIcon for fallback icons when explicit icon props aren't provided
+  const inputIconFallback = useTokenIcon(inputCurrency, inputNetwork);
+  const outputIconFallback = useTokenIcon(outputCurrency, outputNetwork);
+
+  const inputIcon = inputIconProp ?? inputIconFallback.iconSrc;
+  const outputIcon = outputIconProp ?? outputIconFallback.iconSrc;
 
   if (layout === "vertical") {
     return (
       <div className={`flex flex-col gap-4 ${className}`}>
         <div className="flex flex-col">
           <div className="text-gray-500">You send</div>
           <div className="flex grow items-center font-bold">
-            {showIcons && <img alt={inputCurrency} className="mr-2 h-6 w-6" src={inputIcon} />}
+            {showIcons && (
+              <TokenIconWithNetwork
+                className="mr-2 h-6 w-6"
+                fallbackIconSrc={inputFallbackIcon}
+                iconSrc={inputIcon}
+                network={inputNetwork}
+                showNetworkOverlay={!!inputNetwork}
+                tokenSymbol={inputCurrency}
+              />
+            )}
             {inputAmount} {inputCurrency.toUpperCase()}
           </div>
         </div>
         <div className="flex flex-col">
           <div className="text-gray-500">You get</div>
           <div className="flex grow items-center justify-end font-bold">
-            {showIcons && <img alt={outputCurrency} className="mr-2 h-6 w-6" src={outputIcon} />}
+            {showIcons && (
+              <TokenIconWithNetwork
+                className="mr-2 h-6 w-6"
+                fallbackIconSrc={outputFallbackIcon}
+                iconSrc={outputIcon}
+                network={outputNetwork}
+                showNetworkOverlay={!!outputNetwork}
+                tokenSymbol={outputCurrency}
+              />
+            )}
             {showApproximation && "~ "}
             {outputAmount} {outputCurrency.toUpperCase()}
           </div>

apps/frontend/src/components/FiatIcon/index.tsx

@@ -1,13 +1,13 @@
 import { FiatTokenDetails } from "@vortexfi/shared";
 import { FC, HTMLAttributes } from "react";
-import { useGetAssetIcon } from "../../hooks/useGetAssetIcon";
+import { useTokenIcon } from "../../hooks/useTokenIcon";
 
 interface Props extends HTMLAttributes<HTMLImageElement> {
   fiat: FiatTokenDetails;
 }
 
 export const FiatIcon: FC<Props> = ({ fiat, ...props }) => {
-  const iconSrc = useGetAssetIcon(fiat.assetSymbol.toLowerCase());
+  const { iconSrc } = useTokenIcon(fiat);
 
   if (iconSrc) return <img alt={fiat.fiat.name} src={iconSrc} {...props} />;
 

apps/frontend/src/components/ListItem/index.tsx

@@ -3,7 +3,7 @@ import { FiatToken, isFiatToken, OnChainToken, OnChainTokenDetails } from "@vort
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { getTokenDisabledReason, isFiatTokenDisabled } from "../../config/tokenAvailability";
-import { useGetAssetIcon } from "../../hooks/useGetAssetIcon";
+import { useTokenIcon } from "../../hooks/useTokenIcon";
 import { TokenIconWithNetwork } from "../TokenIconWithNetwork";
 import { ExtendedTokenDefinition } from "../TokenSelection/TokenSelectionList/hooks/useTokenSelection";
 import { UserBalance } from "../UserBalance";
@@ -16,9 +16,10 @@ interface ListItemProps {
 
 export const ListItem = memo(function ListItem({ token, isSelected, onSelect }: ListItemProps) {
   const { t } = useTranslation();
-  const fiatIcon = useGetAssetIcon(token.assetIcon);
-  const tokenIcon = token.logoURI ?? fiatIcon;
   const isFiat = isFiatToken(token.type);
+  // Use assetIcon for fiat lookup, with network for on-chain tokens
+  const iconInfo = useTokenIcon(token.assetIcon, isFiat ? undefined : token.network);
+  const tokenIcon = token.logoURI ?? iconInfo.iconSrc;
 
   const isDisabled = isFiat && isFiatTokenDisabled(token.type as FiatToken);
   const disabledReason = isFiat && isDisabled ? t(getTokenDisabledReason(token.type as FiatToken)) : undefined;

apps/frontend/src/components/QuoteSummary/index.tsx

@@ -1,19 +1,36 @@
-import { QuoteResponse } from "@vortexfi/shared";
+import { QuoteResponse, RampDirection } from "@vortexfi/shared";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useGetAssetIcon } from "../../hooks/useGetAssetIcon";
+import { useTokenIcon } from "../../hooks/useTokenIcon";
 import { CollapsibleCard, CollapsibleDetails, CollapsibleSummary, useCollapsibleCard } from "../CollapsibleCard";
 import { CurrencyExchange } from "../CurrencyExchange";
 import { ToggleButton } from "../ToggleButton";
+import { TokenIconWithNetwork } from "../TokenIconWithNetwork";
 import { TransactionId } from "../TransactionId";
 
 interface QuoteSummaryProps {
   quote: QuoteResponse;
 }
 
+/**
+ * Hook to get token icons for both currencies in a quote.
+ * Determines which currency is on-chain based on ramp type.
+ */
+function useQuoteTokenIcons(quote: QuoteResponse) {
+  const isOfframp = quote.rampType === RampDirection.SELL;
+
+  // For offramp: input is on-chain (has network), output is fiat (no network)
+  // For onramp: input is fiat (no network), output is on-chain (has network)
+  const inputIcon = useTokenIcon(quote.inputCurrency, isOfframp ? quote.network : undefined);
+  const outputIcon = useTokenIcon(quote.outputCurrency, !isOfframp ? quote.network : undefined);
+
+  return { inputIcon, outputIcon };
+}
+
 const QuoteSummaryCore = ({ quote }: { quote: QuoteResponse }) => {
   const { t } = useTranslation();
   const { toggle, isExpanded, detailsId } = useCollapsibleCard();
+  const { inputIcon, outputIcon } = useQuoteTokenIcons(quote);
 
   return (
     <>
@@ -24,8 +41,14 @@ const QuoteSummaryCore = ({ quote }: { quote: QuoteResponse }) => {
       <CurrencyExchange
         inputAmount={quote.inputAmount}
         inputCurrency={quote.inputCurrency}
+        inputFallbackIcon={inputIcon.fallbackIconSrc}
+        inputIcon={inputIcon.iconSrc}
+        inputNetwork={inputIcon.network}
         outputAmount={quote.outputAmount}
         outputCurrency={quote.outputCurrency}
+        outputFallbackIcon={outputIcon.fallbackIconSrc}
+        outputIcon={outputIcon.iconSrc}
+        outputNetwork={outputIcon.network}
       />
       <ToggleButton
         ariaControls={detailsId}
@@ -42,8 +65,7 @@ const QuoteSummaryCore = ({ quote }: { quote: QuoteResponse }) => {
 
 const QuoteSummaryDetails = ({ quote }: { quote: QuoteResponse }) => {
   const { t } = useTranslation();
-  const inputIcon = useGetAssetIcon(quote.inputCurrency.toLowerCase());
-  const outputIcon = useGetAssetIcon(quote.outputCurrency.toLowerCase());
+  const { inputIcon, outputIcon } = useQuoteTokenIcons(quote);
 
   return (
     <section className="overflow-hidden">
@@ -53,15 +75,29 @@ const QuoteSummaryDetails = ({ quote }: { quote: QuoteResponse }) => {
           <div className="flex flex-col">
             <div className="text-gray-500 text-sm">{t("components.quoteSummary.youSend")}</div>
             <div className="flex items-center font-bold">
-              <img alt={quote.inputCurrency} className="mr-2 h-5 w-5" src={inputIcon} />
+              <TokenIconWithNetwork
+                className="mr-2 h-5 w-5"
+                fallbackIconSrc={inputIcon.fallbackIconSrc}
+                iconSrc={inputIcon.iconSrc}
+                network={inputIcon.network}
+                showNetworkOverlay={!!inputIcon.network}
+                tokenSymbol={quote.inputCurrency}
+              />
               {quote.inputAmount} {quote.inputCurrency.toUpperCase()}
             </div>
           </div>
           <div className="flex flex-col">
             <div className="text-gray-500 text-sm">{t("components.quoteSummary.youReceive")}</div>
             <div className="flex items-center font-bold">
-              <img alt={quote.outputCurrency} className="mr-2 h-5 w-5" src={outputIcon} />~ {quote.outputAmount}{" "}
-              {quote.outputCurrency.toUpperCase()}
+              <TokenIconWithNetwork
+                className="mr-2 h-5 w-5"
+                fallbackIconSrc={outputIcon.fallbackIconSrc}
+                iconSrc={outputIcon.iconSrc}
+                network={outputIcon.network}
+                showNetworkOverlay={!!outputIcon.network}
+                tokenSymbol={quote.outputCurrency}
+              />
+              ~ {quote.outputAmount} {quote.outputCurrency.toUpperCase()}
             </div>
           </div>
         </div>

apps/frontend/src/components/Ramp/Offramp/index.tsx

@@ -5,11 +5,11 @@ import { FormProvider } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useEventsContext } from "../../../contexts/events";
 import { useNetwork } from "../../../contexts/network";
-import { getTokenLogoURIs } from "../../../helpers/tokenHelpers";
 import { useQuoteForm } from "../../../hooks/quote/useQuoteForm";
 import { useQuoteService } from "../../../hooks/quote/useQuoteService";
 import { useRampSubmission } from "../../../hooks/ramp/useRampSubmission";
 import { useRampValidation } from "../../../hooks/ramp/useRampValidation";
+import { useTokenIcon } from "../../../hooks/useTokenIcon";
 import { useVortexAccount } from "../../../hooks/useVortexAccount";
 import { getEvmTokenConfig } from "../../../services/tokens";
 import { useFeeComparisonStore } from "../../../stores/feeComparison";
@@ -75,16 +75,17 @@ export const Offramp = () => {
 
   const handleBalanceClick = useCallback((amount: string) => form.setValue("inputAmount", amount), [form]);
 
-  const { logoURI, fallbackLogoURI } = getTokenLogoURIs(fromToken);
+  const fromIconInfo = useTokenIcon(fromToken);
 
   const WithdrawNumericInput = useMemo(
     () => (
       <>
         <AssetNumericInput
           assetIcon={fromToken.networkAssetIcon}
-          fallbackLogoURI={fallbackLogoURI}
+          fallbackLogoURI={fromIconInfo.fallbackIconSrc}
           id="inputAmount"
-          logoURI={logoURI}
+          logoURI={fromIconInfo.iconSrc}
+          network={fromIconInfo.network}
           onChange={handleInputChange}
           onClick={() => openTokenSelectModal("from")}
           registerInput={form.register("inputAmount")}
@@ -96,7 +97,7 @@ export const Offramp = () => {
         </div>
       </>
     ),
-    [form, fromToken, openTokenSelectModal, handleInputChange, handleBalanceClick, isDisconnected, logoURI, fallbackLogoURI]
+    [form, fromToken, openTokenSelectModal, handleInputChange, handleBalanceClick, isDisconnected, fromIconInfo]
   );
 
   const ReceiveNumericInput = useMemo(

apps/frontend/src/components/Ramp/Onramp/index.tsx

@@ -5,11 +5,11 @@ import { FormProvider } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useEventsContext } from "../../../contexts/events";
 import { useNetwork } from "../../../contexts/network";
-import { getTokenLogoURIs } from "../../../helpers/tokenHelpers";
 import { useQuoteForm } from "../../../hooks/quote/useQuoteForm";
 import { useQuoteService } from "../../../hooks/quote/useQuoteService";
 import { useRampSubmission } from "../../../hooks/ramp/useRampSubmission";
 import { useRampValidation } from "../../../hooks/ramp/useRampValidation";
+import { useTokenIcon } from "../../../hooks/useTokenIcon";
 import { getEvmTokenConfig } from "../../../services/tokens";
 import { useFeeComparisonStore } from "../../../stores/feeComparison";
 import { useFiatToken, useInputAmount, useOnChainToken } from "../../../stores/quote/useQuoteFormStore";
@@ -84,33 +84,25 @@ export const Onramp = () => {
     [form, fromToken, openTokenSelectModal, handleInputChange]
   );
 
-  const { logoURI, fallbackLogoURI } = getTokenLogoURIs(toToken);
+  const toIconInfo = useTokenIcon(toToken);
 
   const ReceiveNumericInput = useMemo(
     () => (
       <AssetNumericInput
         assetIcon={toToken.networkAssetIcon}
         disabled={!toAmount}
-        fallbackLogoURI={fallbackLogoURI}
+        fallbackLogoURI={toIconInfo.fallbackIconSrc}
         id="outputAmount"
         loading={quoteLoading}
-        logoURI={logoURI}
+        logoURI={toIconInfo.iconSrc}
+        network={toIconInfo.network}
         onClick={() => openTokenSelectModal("to")}
         readOnly={true}
         registerInput={form.register("outputAmount")}
         tokenSymbol={toToken.assetSymbol}
       />
     ),
-    [
-      toToken.networkAssetIcon,
-      toToken.assetSymbol,
-      form,
-      quoteLoading,
-      toAmount,
-      openTokenSelectModal,
-      logoURI,
-      fallbackLogoURI
-    ]
+    [toToken.networkAssetIcon, toToken.assetSymbol, form, quoteLoading, toAmount, openTokenSelectModal, toIconInfo]
   );
 
   const handleConfirm = useCallback(() => {

apps/frontend/src/components/TokenImage/index.tsx → apps/frontend/src/components/TokenIcon/index.tsx

@@ -1,15 +1,15 @@
-import { FC, memo, useEffect, useState } from "react";
+import { FC, memo, useState } from "react";
 import placeholderIcon from "../../assets/coins/placeholder.svg";
 import { cn } from "../../helpers/cn";
 
-interface TokenImageProps {
+interface TokenIconProps {
   src: string;
   fallbackSrc?: string;
   alt: string;
   className?: string;
 }
 
-export const TokenImage: FC<TokenImageProps> = memo(function TokenImage({ src, fallbackSrc, alt, className }) {
+export const TokenIcon: FC<TokenIconProps> = memo(function TokenIcon({ src, fallbackSrc, alt, className }) {
   const [isLoading, setIsLoading] = useState(true);
   const [imgError, setImgError] = useState(false);
   const [fallbackError, setFallbackError] = useState(false);

apps/frontend/src/components/TokenIconWithNetwork/index.tsx

@@ -2,7 +2,7 @@ import { Networks } from "@vortexfi/shared";
 import { FC, memo } from "react";
 import { cn } from "../../helpers/cn";
 import { NETWORK_ICONS } from "../../hooks/useGetNetworkIcon";
-import { TokenImage } from "../TokenImage";
+import { TokenIcon } from "../TokenIcon";
 
 interface TokenIconWithNetworkProps {
   iconSrc: string;
@@ -26,11 +26,11 @@ export const TokenIconWithNetwork: FC<TokenIconWithNetworkProps> = memo(function
 
   return (
     <div className={cn("relative", className)}>
-      <TokenImage alt={tokenSymbol} className="h-full w-full" fallbackSrc={fallbackIconSrc} src={iconSrc} />
+      <TokenIcon alt={tokenSymbol} className="h-full w-full" fallbackSrc={fallbackIconSrc} src={iconSrc} />
       {shouldShowOverlay && (
         <img
           alt={`${network} network`}
-          className="-bottom-0.5 -right-0.5 absolute h-[40%] w-[40%] rounded-full object-contain"
+          className="-bottom-0.5 -right-0.5 absolute h-[50%] w-[50%] rounded-full object-contain"
           decoding="async"
           loading="lazy"
           src={networkIcon}