To Look For Crypto Assets and Market Data

Implemente as mudanças neste codigo apenas o que solicitei! não altera o que esta funcionando no campode de pesquisa eu quero que efetue as sequintes pesquisas , search coin, pair,NFT,contract address,exchange,or post e troca o nome Crypto Asset Alerts and Search por to look for ....... tudo integrado com a api da coingeco import { useState, useEffect } from "react"; import { Card } from "../ui/card"; import { Bell } from "lucide react"; export function NewListingsAlert() { const [query, setQuery] = useState(""); // User input const [response, setResponse] = useState<any>(null); // Detailed result const [loading, setLoading] = useState(false); // Loading indicator const [error, setError] = useState<string | null>(null); // Error handling const [alerts, setAlerts] = useState<any[]>([]); // Alerts const [suggestions, setSuggestions] = useState<any[]>([]); // Buy suggestions const [fixedData, setFixedData] = useState<any[]>([]); // Fixed chart data // Load fixed data for BTC, ETH, SOL, and XRP const fetchFixedData = async () => { try { const res = await fetch( "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana,ripple&vs_currencies=usd" ); if (!res.ok) { throw new Error("Error fetching fixed data."); } const data = await res.json(); setFixedData([ { name: "Bitcoin", symbol: "BTC", price: data.bitcoin.usd }, { name: "Ethereum", symbol: "ETH", price: data.ethereum.usd }, { name: "Solana", symbol: "SOL", price: data.solana.usd }, { name: "XRP", symbol: "XRP", price: data.ripple.usd }, ]); } catch (err) { console.error(err.message); } }; useEffect(() => { fetchFixedData(); }, []); // Search for assets by symbol or contract const handleSearch = async () => { if (!query.trim()) { setError("Please enter a valid symbol or address."); return; } setLoading(true); setError(null); setResponse(null); try { let url = ""; if (/^0x[a fA F0 9]{40}$/.test(query)) { // Contract address const network = "ethereum"; // Replace with the appropriate blockchain url = `https://api.coingecko.com/api/v3/coins/${network}/contract/${query}`; } else { // Coin symbol url = `https://api.coingecko.com/api/v3/coins/${query.toLowerCase()}`; } const res = await fetch(url); if (!res.ok) { throw new Error(`Asset "${query}" not found.`); } const data = await res.json(); setResponse({ name: data.name, symbol: data.symbol.toUpperCase(), price: data.market_data?.current_price?.usd || "N/A", logo: data.image?.thumb || "", homepage: data.links?.homepage?.[0] || "", }); } catch (err: any) { setError(err.message); } finally { setLoading(false); } }; // Update alerts every 5 minutes const updateAlerts = async () => { try { const res = await fetch( "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=500&page=1" ); if (!res.ok) { throw new Error("Error updating alerts."); } const data = await res.json(); const filteredAlerts = data .filter( (coin: any) => coin.market_cap_change_percentage_24h > 5 && coin.current_price > coin.low_24h && coin.market_cap_rank <= 500 ) .slice(0, 20) .map((coin: any) => ({ name: coin.name, symbol: coin.symbol.toUpperCase(), logo: coin.image, price: coin.current_price, })); setAlerts(filteredAlerts); } catch (err) { console.error("Error updating alerts:", err.message); } }; useEffect(() => { updateAlerts(); const interval = setInterval(updateAlerts, 300000); return () => clearInterval(interval); }, []); // Generate buy suggestions based on rules const suggestPurchase = async () => { setLoading(true); try { const res = await fetch( "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1", { method: "GET" } ); if (!res.ok) { throw new Error("Error fetching market data."); } const data = await res.json(); const filteredSuggestions = data .filter( (coin: any) => coin.market_cap_change_percentage_24h > 5 && coin.current_price < coin.high_24h && coin.market_cap_rank <= 100 ) .slice(0, 10) .map((coin: any) => ({ name: coin.name, symbol: coin.symbol.toUpperCase(), logo: coin.image, price: coin.current_price, reason: `High potential: MC up ${coin.market_cap_change_percentage_24h.toFixed( 2 )}%. Price at $${coin.current_price.toFixed(2)} is favorable.`, })); setSuggestions(filteredSuggestions); } catch (err) { setError("Error generating suggestions."); } finally { setLoading(false); } }; return ( <Card className="p 6"> {/* Fixed charts */} <div className="mb 6 grid grid cols 2 md:grid cols 4 gap 4"> {fixedData.map((coin, index) => ( <div key={index} className="bg purple 500/5 p 4 rounded lg text center"> <h3 className="text lg font bold">{coin.name}</h3> <p className="text sm text gray 400">{coin.symbol}</p> <p className="text md text purple 500">${coin.price.toFixed(2)}</p> </div> ))} </div> <div className="flex items center justify between mb 6"> <h2 className="text xl font bold">Crypto Asset Alerts and Search</h2> <Bell className="w 6 h 6 text purple 500" /> </div> <div className="mb 4"> <input type="text" placeholder="Enter symbol or contract (e.g., btc, 0x...)" className="w full p 2 border rounded md text gray 800" value={query} onChange={(e) => setQuery(e.target.value)} /> <button onClick={handleSearch} className="mt 2 px 4 py 2 bg purple 500 text white rounded md hover:bg purple 600 transition" > Search </button> </div> {loading && <p className="text gray 500">Loading...</p>} {error && <p className="text red 500">{error}</p>} {response && ( <div className="mt 4 p 4 rounded lg bg purple 500/5"> <h3 className="text lg font medium mb 2">Result:</h3> <div className="flex items center"> <img src={response.logo} alt={response.name} className="w 10 h 10 mr 4" /> <div> <p className="font bold">{response.name} ({response.symbol})</p> <p className="text sm text gray 500">Price: ${response.price}</p> {response.homepage && ( <a href={response.homepage} target="_blank" rel="noopener noreferrer" className="text blue 500" > Official Website </a> )} </div> </div> </div> )} {alerts.length > 0 && ( <div className="mt 4 p 4 rounded lg bg yellow 500/10"> <h3 className="text lg font medium mb 2">Alerts:</h3> <ul className="grid grid cols 1 md:grid cols 2 gap 4"> {alerts.map((alert, index) => ( <li key={index} className="flex items center bg white shadow md p 4 rounded lg"> <img src={alert.logo} alt={alert.name} className="w 10 h 10 mr 4" /> <div> <p className="font bold">{alert.name} ({alert.symbol})</p> <p className="text sm text gray 500">Price: ${alert.price}</p> </div> </li> ))} </ul> </div> )} <div className="mt 6"> <button onClick={suggestPurchase} className="px 4 py 2 bg green 500 text white rounded md hover:bg green 600 transition" > Buy Suggestions </button> </div> {suggestions.length > 0 && ( <div className="mt 4 p 4 rounded lg bg green 500/10"> <h3 className="text lg font medium mb 2">Buy Suggestions:</h3> <ul className="grid grid cols 1 md:grid cols 2 gap 4"> {suggestions.map((suggestion, index) => ( <li key={index} className="flex items center bg white shadow md p 4 rounded lg"> <img src={suggestion.logo} alt={suggestion.name} className="w 10 h 10 mr 4" /> <div> <p className="font bold">{suggestion.name} ({suggestion.symbol})</p> <p className="text sm text gray 500">Price: ${suggestion.price}</p> <p className="text xs text gray 600">{suggestion.reason}</p> </div> </li> ))} </ul> </div> )} </Card> ); }