From 6081953ed50d9e8d5ff52fd4d9843f85b5b4981f Mon Sep 17 00:00:00 2001 From: "sewmina7@gmail.com" Date: Wed, 26 Jun 2024 23:12:31 +0530 Subject: [PATCH] CalloutModal --- app/callout.tsx | 89 +++++++++++++++++++++++++++-------- app/globals.css | 8 ++++ package-lock.json | 116 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + 4 files changed, 196 insertions(+), 19 deletions(-) diff --git a/app/callout.tsx b/app/callout.tsx index 28dc924..330d3ce 100644 --- a/app/callout.tsx +++ b/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" > -
- +
-

Make a new call!

- - +

Make a new call!

+
- +

Type in a tokens short code, that you will think boom anytime soon

- +
+ + {showDropdown && ( +
    + {searchResults.map((result) => ( +
  • handleSelectToken(result.baseToken.symbol)} + className="p-2 hover:bg-gray-400 cursor-pointer flex justify-between items-center glassmorphism-scroller" + > +
    +
    + {result.baseToken.symbol} - {result.baseToken.name} + {result.chain} +
    +
    + 24H Vol: ${result.volume.h24.toLocaleString()} + 0x...{result.baseToken.address.slice(-4)} +
    +
    +
    + ${result.priceUsd} +
    +
    • + ))} +
+ )} +