diff --git a/app/callout.tsx b/app/callout.tsx index 330d3ce..b16fbd2 100644 --- a/app/callout.tsx +++ b/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 }) => { -
Type in a tokens short code, that you will think boom anytime soon
+Type in a token's short code that you think will boom anytime soon
{tokenContract.length > 0 ? "name: " +tokenName : ""}
+ +{tokenContract.length > 0 ? "ca: " +tokenContract : ""}
+