Fix undefined symbol

Author: nerderlyne

src/components/CoinCard.tsx

@@ -134,7 +134,7 @@ export const CoinCard = ({ coin }: CoinCardProps) => {
           <div
             className={`absolute inset-0 flex ${getColorForId(coin.coinId)} text-background justify-center items-center rounded-full`}
           >
-            {displaySymbol.slice(0, 3)}
+            {displaySymbol?.slice(0, 3)}
           </div>
 
           {/* Image (displayed on top if available and loaded successfully) */}

src/components/TokenImage.tsx

@@ -3,12 +3,12 @@ import { memo, useCallback, useEffect, useState } from "react";
 import { EthereumIcon } from "./EthereumIcon";
 
 const getInitials = (symbol: string) => {
-  return symbol.slice(0, 2).toUpperCase();
+  return symbol?.slice(0, 2).toUpperCase() ?? "";
 };
 
 // Color map for token initials - matching your screenshot
 const getColorForSymbol = (symbol: string) => {
-  const symbolKey = symbol.toLowerCase();
+  const symbolKey = symbol?.toLowerCase() ?? "";
   const colorMap: Record<string, { bg: string; text: string }> = {
     eth: { bg: "bg-black", text: "text-white" },
     za: { bg: "bg-red-500", text: "text-white" },
@@ -186,7 +186,9 @@ export const TokenImage = memo(
         if (cached === "true") {
           // We know this token has no URI, use the optimized render path
           return (
-            <div className={`w-8 h-8 flex ${bg} ${text} justify-center items-center rounded-full text-xs font-medium`}>
+            <div
+              className={`w-8 h-8 flex ${bg} ${text} justify-center items-center rounded-full text-xs font-medium`}
+            >
               {getInitials(token.symbol)}
             </div>
           );
@@ -198,7 +200,9 @@ export const TokenImage = memo(
       }
 
       return (
-        <div className={`w-8 h-8 flex ${bg} ${text} justify-center items-center rounded-full text-xs font-medium`}>
+        <div
+          className={`w-8 h-8 flex ${bg} ${text} justify-center items-center rounded-full text-xs font-medium`}
+        >
           {getInitials(token.symbol)}
         </div>
       );
@@ -208,7 +212,9 @@ export const TokenImage = memo(
     if (!actualImageUrl && !imageError) {
       return (
         <div className="relative w-8 h-8 rounded-full overflow-hidden">
-          <div className={`w-8 h-8 flex ${bg} ${text} justify-center items-center rounded-full`}>
+          <div
+            className={`w-8 h-8 flex ${bg} ${text} justify-center items-center rounded-full`}
+          >
             {getInitials(token.symbol)}
           </div>
         </div>
@@ -243,6 +249,9 @@ export const TokenImage = memo(
   },
   (prevProps, nextProps) => {
     // Only re-render if token ID or URI changes
-    return prevProps.token.id === nextProps.token.id && prevProps.token.tokenUri === nextProps.token.tokenUri;
+    return (
+      prevProps.token.id === nextProps.token.id &&
+      prevProps.token.tokenUri === nextProps.token.tokenUri
+    );
   },
 );