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

{ {searchResults.map((result) => (
  • 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" >
    @@ -91,12 +108,16 @@ const CalloutModal = ({ isOpen, onClose, onSubmit }) => { ))} )} +

    {tokenContract.length > 0 ? "name: " +tokenName : ""}

    + +

    {tokenContract.length > 0 ? "ca: " +tokenContract : ""}

    +
  • diff --git a/app/page.tsx b/app/page.tsx index da245e2..32bd60c 100644 --- a/app/page.tsx +++ b/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'); }; diff --git a/package-lock.json b/package-lock.json index e72b3cd..42815bc 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 08baa85..c9dfe77 100644 --- a/package.json +++ b/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",