fix minor issues with loading svgs

Author: Nolking

README.md

@@ -1,12 +1,3 @@
-<div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
-</div>
-
-# Run and deploy your AI Studio app
-
-This contains everything you need to run your app locally.
-
-View your app in AI Studio: https://ai.studio/apps/drive/1gQhirq9MyOQQJ-cb6hdhHH8dYafKFjSF
 
 ## Run Locally
 
@@ -15,6 +6,5 @@ View your app in AI Studio: https://ai.studio/apps/drive/1gQhirq9MyOQQJ-cb6hdhHH
 
 1. Install dependencies:
    `npm install`
-2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
-3. Run the app:
+2. Run the app:
    `npm run dev`

components/SwapCard.tsx

@@ -259,7 +259,7 @@ const SwapCard: React.FC<SwapCardProps> = ({
             <input
               type="text"
               placeholder="0"
-              className="bg-transparent text-3xl text-gray-900 dark:text-white font-semibold focus:outline-none w-full placeholder-gray-400 dark:placeholder-gray-600"
+              className="bg-transparent text-lg lg:text-3xl text-gray-900 dark:text-white font-semibold focus:outline-none w-full placeholder-gray-400 dark:placeholder-gray-600"
               value={fromAmount}
               onChange={handleFromAmountChange}
             />
@@ -323,7 +323,7 @@ const SwapCard: React.FC<SwapCardProps> = ({
             <input
               type="text"
               placeholder="0"
-              className="bg-transparent text-3xl text-gray-900 dark:text-white font-semibold focus:outline-none w-full placeholder-gray-400 dark:placeholder-gray-600"
+              className="bg-transparent text-xl lg:text-3xl text-gray-900 dark:text-white font-semibold focus:outline-none w-full placeholder-gray-400 dark:placeholder-gray-600"
               value={toAmount}
               onChange={handleToAmountChange}
             />

components/TokenIcon.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Coins } from 'lucide-react';
 
 interface TokenIconProps {
@@ -8,8 +8,10 @@ interface TokenIconProps {
 
 const TokenIcon: React.FC<TokenIconProps> = ({ symbol, className = "w-6 h-6" }) => {
   const [error, setError] = useState(false);
-  
-  // Construct the URL for the token icon based on common Switcheo repo structure
+  useEffect(() => {
+    setError(false);
+  }, [symbol]);
+
   const iconUrl = `https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens/${symbol}.svg`;
 
   if (error) {
@@ -22,6 +24,7 @@ const TokenIcon: React.FC<TokenIconProps> = ({ symbol, className = "w-6 h-6" })
 
   return (
     <img
+      key={symbol}   
       src={iconUrl}
       alt={symbol}
       className={`${className} rounded-full`}

components/TokenModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { X, Search } from 'lucide-react';
 import { Token } from '../types';
 import TokenIcon from './TokenIcon';
@@ -18,12 +18,22 @@ const TokenModal: React.FC<TokenModalProps> = ({ isOpen, onClose, tokens, onSele
     const lowerSearch = search.toLowerCase();
     return tokens.filter(t => t.symbol.toLowerCase().includes(lowerSearch));
   }, [tokens, search]);
+  useEffect(() => {
+    if (!isOpen) {
+      setSearch('');
+      document.body.style.overflow;
+    } else {
+      document.body.style.overflow = 'hidden';
+    }
+  }, [isOpen]);
 
-  if (!isOpen) return null;
+  if (!isOpen) {
+    return null;
+  }
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
-      <div className="bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-700 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh] transition-colors duration-300">
+      <div className="bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-700 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden flex flex-col h-[80vh] transition-colors duration-300">
 
         <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Select Token</h3>
@@ -65,7 +75,7 @@ const TokenModal: React.FC<TokenModalProps> = ({ isOpen, onClose, tokens, onSele
                     <span className="font-medium text-gray-900 dark:text-white group-hover:text-primary transition-colors">{token.symbol}</span>
                     <span className="text-xs text-gray-500 dark:text-gray-400">Price: ${token.price.toFixed(4)}</span>
                   </div>
-                  <div className="ml-auto text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <div className="ml-auto text-gray-400 dark:text-primary opacity-0 group-hover:opacity-100 transition-opacity">
                     Select
                   </div>
                 </button>