CalloutModal

app/callout.tsx

@@ -1,13 +1,39 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import { motion } from 'framer-motion';
 
 const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
   const [tokenId, setTokenId] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    if (tokenId) {
+      const fetchData = async () => {
+        try {
+          const response = await axios.get(`https://api.dexscreener.io/latest/dex/search/?q=${tokenId}`);
+          setSearchResults(response.data.pairs || []);
+          setShowDropdown(true);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+          setShowDropdown(false);
+        }
+      };
+      fetchData();
+    } else {
+      setShowDropdown(false);
+    }
+  }, [tokenId]);
 
   const handleTokenChange = (e) => {
     setTokenId(e.target.value);
   };
 
+  const handleSelectToken = (token) => {
+    setTokenId(token);
+    setShowDropdown(false);
+  };
+
   const handleSubmit = () => {
     onSubmit(tokenId);
     onClose();
@@ -20,27 +46,52 @@ const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
       exit={{ opacity: 0 }}
       className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-bg"
     >
-      <div className="bg-white p-4 rounded shadow-lg w-11/12 max-w-md modal">
-      
+      <div className={`bg-white p-4 rounded shadow-lg w-11/12 max-w-md modal ${showDropdown ? 'h-1/2' : 'h-auto'}`}>
         <div className="flex items-start">
-            <h2 className="text-xl font-bold mb-2">Make a new call!</h2>
-            <button
-              className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
-              onClick={onClose}
-            > 
-              <span className="bg-transparent text-white h-10 w-6 text-2xl block outline-none focus:outline-none">x</span>
-            </button>
-
+          <h2 className="text-xl font-bold mb-2">Make a new call!</h2>
+          <button
+            className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+            onClick={onClose}
+          >
+            <span className="bg-transparent text-black h-10 w-6 text-2xl block outline-none focus:outline-none">x</span>
+          </button>
         </div>
-        
+
         <p className="text-lg mb-4">Type in a tokens short code, that you will think boom anytime soon</p>
-        <input
-          type="text"
-          value={tokenId}
-          onChange={handleTokenChange}
-          className="w-full p-2 mb-4 border rounded glassmorphism"
-          placeholder="Enter token short code"
-        />
+        <div className="relative">
+          <input
+            type="text"
+            value={tokenId}
+            onChange={handleTokenChange}
+            className="w-full p-2 mb-4 border rounded glassmorphism"
+            placeholder="Enter token short code"
+          />
+          {showDropdown && (
+            <ul className="absolute z-10 w-full bg-black border rounded shadow-lg max-h-60 overflow-y-auto">
+              {searchResults.map((result) => (
+                <li
+                  key={result.pairId}
+                  onClick={() => handleSelectToken(result.baseToken.symbol)}
+                  className="p-2 hover:bg-gray-400 cursor-pointer flex justify-between items-center glassmorphism-scroller"
+                >
+                  <div className="flex flex-col w-3/4">
+                    <div className="flex justify-between">
+                      <span>{result.baseToken.symbol} - {result.baseToken.name}</span>
+                      <span>{result.chain}</span>
+                    </div>
+                    <div className="flex justify-between text-sm">
+                      <span>24H Vol: ${result.volume.h24.toLocaleString()}</span>
+                      <span>0x...{result.baseToken.address.slice(-4)}</span>
+                    </div>
+                  </div>
+                  <div className="w-1/2 text-right">
+                    <span className="text-lg font-bold ml-2">${result.priceUsd}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
         <button
           onClick={handleSubmit}
           className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full glassmorphism"