dex search

app/callout.tsx

@@ -1,14 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
 import { motion } from 'framer-motion';
+import debounce from 'lodash/debounce';
 
 const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
   const [tokenId, setTokenId] = useState('');
+  const [tokenName, setTokenName] = useState('');
+  const [tokenContract, setTokenContract] = useState('');
+  const [tokenInput, setTokenInput] = useState('');
   const [searchResults, setSearchResults] = useState([]);
   const [showDropdown, setShowDropdown] = useState(false);
+  const [shouldSearch, setShouldSearch] = useState(true);
 
   useEffect(() => {
-    if (tokenId) {
+    if (tokenId && shouldSearch) {
       const fetchData = async () => {
         try {
           const response = await axios.get(`https://api.dexscreener.io/latest/dex/search/?q=${tokenId}`);
@@ -20,22 +25,34 @@ const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
         }
       };
       fetchData();
-    } else {
-      setShowDropdown(false);
     }
-  }, [tokenId]);
+  }, [tokenId, shouldSearch]);
+
+  const debouncedSearch = useCallback(debounce((value) => {
+    setShouldSearch(true);
+    setTokenId(value);
+  }, 500), []);
 
   const handleTokenChange = (e) => {
-    setTokenId(e.target.value);
+    setTokenInput(e.target.value);
+
+    setTokenContract("");
+    
+    setShouldSearch(false);
+    debouncedSearch(e.target.value);
   };
 
-  const handleSelectToken = (token) => {
+  const handleSelectToken = (token, name, ca) => {
+    setTokenInput(token);
     setTokenId(token);
+    setTokenName(name);
+    setTokenContract(ca);
     setShowDropdown(false);
+    setShouldSearch(false);
   };
 
   const handleSubmit = () => {
-    onSubmit(tokenId);
+    onSubmit(tokenId,tokenContract,tokenName);
     onClose();
   };
 
@@ -57,11 +74,11 @@ const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
           </button>
         </div>
 
-        <p className="text-lg mb-4">Type in a tokens short code, that you will think boom anytime soon</p>
+        <p className="text-lg mb-4">Type in a token's short code that you think will boom anytime soon</p>
         <div className="relative">
           <input
             type="text"
-            value={tokenId}
+            value={tokenInput}
             onChange={handleTokenChange}
             className="w-full p-2 mb-4 border rounded glassmorphism"
             placeholder="Enter token short code"
@@ -71,7 +88,7 @@ const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
               {searchResults.map((result) => (
                 <li
                   key={result.pairId}
-                  onClick={() => handleSelectToken(result.baseToken.symbol)}
+                  onClick={() => handleSelectToken(result.baseToken.symbol,result.baseToken.name, result.baseToken.address)}
                   className="p-2 hover:bg-gray-400 cursor-pointer flex justify-between items-center glassmorphism-scroller"
                 >
                   <div className="flex flex-col w-3/4">
@@ -91,12 +108,16 @@ const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
               ))}
             </ul>
           )}
+        <p className="text-sm">{tokenContract.length > 0 ? "name: " +tokenName : ""}</p>
+
+        <p className="text-sm mb-5">{tokenContract.length > 0 ? "ca: " +tokenContract : ""}</p>
+          
         </div>
         <button
           onClick={handleSubmit}
           className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full glassmorphism"
         >
-          Submit
+          Callout!
         </button>
       </div>
     </motion.div>

app/page.tsx

@@ -59,8 +59,11 @@ function Home() {
     setNewCallModalOpen(false);
   };
 
-  const handleNewCallSubmit = (tokenId) => {
-    const twitterIntentURL = `https://x.com/intent/tweet?text=%24${tokenId}%20is%20Booming%20rn%21%20See%20ya%20on%20the%20moon%21%0A%0A%23CallFi%20%23CallingIt`;
+  const handleNewCallSubmit = (tokenId, tokenContract, tokenName) => {
+    let twitterIntentURL = `https://x.com/intent/tweet?text=%24${tokenId}%20is%20Booming%20rn%21%20See%20ya%20on%20the%20moon%21%0A%0A%23CallFi%20%23CallingIt`;
+    if(tokenContract.length >0){
+      twitterIntentURL = `https://x.com/intent/tweet?text=%24${tokenId}%20%23${tokenName}%20is%20Going%20to%20the%20moon%21%0ACA%20%3A${tokenContract}%0A%0A%23CallFi%20%23CallingIt`;
+    }
     window.open(twitterIntentURL, '_blank');
   };
 

package-lock.json

@@ -15,6 +15,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "framer-motion": "^11.2.12",
+        "lodash": "^4.17.21",
         "next": "14.2.4",
         "react": "^18",
         "react-dom": "^18",

package.json

@@ -16,6 +16,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.12",
+    "lodash": "^4.17.21",
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",