SS-5657: Bring back asset icons in swaps and limits

apps/agentic-chat/src/components/tools/GetLimitOrdersUI.tsx

@@ -6,6 +6,7 @@ import { stopPropagationHandler } from '@/lib/eventHandlers'
 import { cn } from '@/lib/utils'
 
 import { Amount } from '../ui/Amount'
+import { AssetIcon } from '../ui/AssetIcon'
 import { ToolCard } from '../ui/ToolCard'
 
 import { useToolStateRender } from './toolUIHelpers'
@@ -41,6 +42,8 @@ interface OrderListItemProps {
   network: string
   sellTokenSymbol: string
   buyTokenSymbol: string
+  sellTokenIcon?: string
+  buyTokenIcon?: string
   sellAmount: string
   buyAmount: string
   filledPercent: number
@@ -53,6 +56,8 @@ function OrderListItem({
   network,
   sellTokenSymbol,
   buyTokenSymbol,
+  sellTokenIcon,
+  buyTokenIcon,
   sellAmount,
   buyAmount,
   filledPercent,
@@ -77,11 +82,13 @@ function OrderListItem({
     <div className="flex items-center justify-between py-3 px-1 gap-4">
       <div className="flex flex-col gap-1 min-w-0 flex-1">
         <div className="flex items-center gap-2 text-sm">
-          <span>
+          <span className="flex items-center gap-1.5">
+            <AssetIcon icon={sellTokenIcon} symbol={sellTokenSymbol} className="w-4 h-4" />
             Sell <Amount.Crypto value={sellAmount} symbol={sellTokenSymbol} className="font-medium" />
           </span>
           <span className="text-muted-foreground">|</span>
-          <span>
+          <span className="flex items-center gap-1.5">
+            <AssetIcon icon={buyTokenIcon} symbol={buyTokenSymbol} className="w-4 h-4" />
             Buy <Amount.Crypto value={buyAmount} symbol={buyTokenSymbol} className="font-medium" />
           </span>
           <span className="text-muted-foreground">|</span>
@@ -179,6 +186,8 @@ export function GetLimitOrdersUI({ toolPart }: ToolUIComponentProps<'getLimitOrd
                 network={order.network}
                 sellTokenSymbol={order.sellTokenSymbol}
                 buyTokenSymbol={order.buyTokenSymbol}
+                sellTokenIcon={order.sellTokenIcon}
+                buyTokenIcon={order.buyTokenIcon}
                 sellAmount={order.sellAmount}
                 buyAmount={order.buyAmount}
                 filledPercent={order.filledPercent}

apps/agentic-chat/src/components/tools/GetTransactionHistoryUI.tsx

@@ -110,6 +110,8 @@ function TransactionCard({
                   <TxStepCard.SwapPair
                     fromSymbol={swapTokens.tokenOut.symbol}
                     toSymbol={swapTokens.tokenIn.symbol}
+                    fromIcon={swapTokens.tokenOut.icon}
+                    toIcon={swapTokens.tokenIn.icon}
                     className="-ml-0.5"
                   />
                 )}

apps/agentic-chat/src/components/tools/InitiateSwapUI.tsx

@@ -53,6 +53,8 @@ export function InitiateSwapUI({ toolPart }: ToolUIComponentProps<'initiateSwapT
               <TxStepCard.SwapPair
                 fromSymbol={swap?.sellAsset.symbol.toUpperCase()}
                 toSymbol={swap?.buyAsset.symbol.toUpperCase()}
+                fromIcon={swap?.sellAsset.icon}
+                toIcon={swap?.buyAsset.icon}
                 isLoading={isLoading}
               />
               <TxStepCard.Amount

apps/agentic-chat/src/components/tools/LimitOrderUI.tsx

@@ -41,6 +41,8 @@ export function LimitOrderUI({ toolPart }: ToolUIComponentProps<'createLimitOrde
               <TxStepCard.SwapPair
                 fromSymbol={summary?.sellAsset.symbol.toUpperCase()}
                 toSymbol={summary?.buyAsset.symbol.toUpperCase()}
+                fromIcon={summary?.sellAsset.icon}
+                toIcon={summary?.buyAsset.icon}
                 isLoading={isLoading}
               />
               <TxStepCard.Amount

apps/agentic-chat/src/components/ui/TxStepCard.tsx

@@ -5,6 +5,7 @@ import { formatCryptoAmount } from '@/lib/number'
 import { StepStatus } from '@/lib/stepUtils'
 import { cn } from '@/lib/utils'
 
+import { AssetIcon } from './AssetIcon'
 import { Skeleton } from './Skeleton'
 import { ToolCard } from './ToolCard'
 
@@ -135,11 +136,15 @@ const TxStepCardStep = ({
 const TxStepCardSwapPair = ({
   fromSymbol,
   toSymbol,
+  fromIcon,
+  toIcon,
   isLoading,
   className,
 }: {
   fromSymbol?: string
   toSymbol?: string
+  fromIcon?: string
+  toIcon?: string
   isLoading?: boolean
   className?: string
 }) => {
@@ -148,11 +153,11 @@ const TxStepCardSwapPair = ({
 
   return (
     <div className={cn('flex items-center gap-3', className)}>
-      <span className="text-xl font-bold">{fromSymbol}</span>
+      <AssetIcon icon={fromIcon} symbol={fromSymbol} className="w-6 h-6" />
       <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
         <ChevronRight className="w-4 h-4 text-muted-foreground" />
       </div>
-      <span className="text-xl font-bold">{toSymbol}</span>
+      <AssetIcon icon={toIcon} symbol={toSymbol} className="w-6 h-6" />
     </div>
   )
 }

apps/agentic-server/src/tools/limitOrder/createLimitOrder.ts

@@ -44,10 +44,12 @@ export interface LimitOrderSummary {
   sellAsset: {
     symbol: string
     amount: string
+    icon?: string
   }
   buyAsset: {
     symbol: string
     estimatedAmount: string
+    icon?: string
   }
   network: string
   limitPrice: string
@@ -154,10 +156,12 @@ export async function executeCreateLimitOrder(
     sellAsset: {
       symbol: sellAsset.symbol,
       amount: input.sellAmount,
+      icon: sellAsset.icon,
     },
     buyAsset: {
       symbol: buyAsset.symbol,
       estimatedAmount: estimatedBuyAmount,
+      icon: buyAsset.icon,
     },
     network: input.network,
     limitPrice: input.limitPrice,

apps/agentic-server/src/tools/limitOrder/getLimitOrders.ts

@@ -31,6 +31,8 @@ interface OrderInfo {
   buyToken: string
   sellTokenSymbol: string
   buyTokenSymbol: string
+  sellTokenIcon?: string
+  buyTokenIcon?: string
   sellAmount: string
   buyAmount: string
   executedSellAmount: string
@@ -44,12 +46,15 @@ interface OrderInfo {
 
 const DEFAULT_DECIMALS = 18
 
-function resolveTokenMetadata(tokenAddress: string, chainId: number): { symbol: string; precision: number } | null {
+function resolveTokenMetadata(
+  tokenAddress: string,
+  chainId: number
+): { symbol: string; precision: number; icon?: string } | null {
   const network = CHAIN_ID_TO_NETWORK[chainId] as Network | undefined
   if (!network) return null
   const asset = AssetService.getInstance().searchByContract(tokenAddress, network)[0]
   if (!asset) return null
-  return { symbol: asset.symbol, precision: asset.precision }
+  return { symbol: asset.symbol, precision: asset.precision, icon: asset.icon }
 }
 
 export interface GetLimitOrdersOutput {
@@ -118,6 +123,8 @@ export async function executeGetLimitOrders(
           buyToken: order.buyToken,
           sellTokenSymbol: sellTokenMeta?.symbol ?? order.sellToken.slice(0, 10),
           buyTokenSymbol: buyTokenMeta?.symbol ?? order.buyToken.slice(0, 10),
+          sellTokenIcon: sellTokenMeta?.icon,
+          buyTokenIcon: buyTokenMeta?.icon,
           sellAmount: fromBaseUnit(order.sellAmount, sellPrecision),
           buyAmount: fromBaseUnit(order.buyAmount, buyPrecision),
           executedSellAmount: fromBaseUnit(order.executedSellAmount || '0', sellPrecision),