/** @jsxImportSource https://esm.sh/react */ import * as d3 from "https://esm.sh/d3@7"; import { AnimatePresence, motion } from "https://esm.sh/framer-motion@10.12.16"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Fetch all data from DeFi Llama API async function fetchData() { const response = await fetch("https://yields.llama.fi/pools"); const data = await response.json(); return data.data; } // Process and filter data based on criteria function processData(data, filter, minTVL, minAPY, riskFilter) { let filteredData = data.filter(d => d.tvlUsd >= minTVL && d.apy >= Math.max(minAPY, 2) && (riskFilter === "All" || (riskFilter === "Risky" ? d.ilRisk !== "no" : d.ilRisk === "no")) ); if (filter !== "All") { filteredData = filteredData.filter(d => d.chain === filter); } // Sort by APY in descending order and take top 500 return filteredData.sort((a, b) => b.apy - a.apy).slice(0, 500); } const colorScheme = { Ethereum: "#627EEA", // Bright Blue Bitcoin: "#F7931A", // Orange Solana: "#00FFA3", // Neon Green Polygon: "#8247E5", // Purple Avalanche: "#E84142", // Red Binance: "#F3BA2F", // Yellow Cardano: "#0033AD", // Deep Blue Polkadot: "#E6007A", // Magenta Tron: "#FF0013", // Bright Red Cosmos: "#2E3148", // Dark Navy Arbitrum: "#28A0F0", // Sky Blue Optimism: "#FF3366", // Pinkish Red Fantom: "#2A8CFF", // Royal Blue Cronos: "#005BBB", // Classic Blue Aptos: "#5A5A5A", // Charcoal Gray Near: "#117733", // Forest Green Algorand: "#AA3377", // Plum Gnosis: "#2B8C84", // Teal Green Klaytn: "#FF5722", // Vermilion Harmony: "#00C4CC", // Aqua Moonriver: "#FFC857", // Amber Celo: "#8CC84B", // Lime Green Moonbeam: "#88D9E6", // Powder Blue Metis: "#66CCCC", // Soft Cyan Aurora: "#8ACE3B", // Spring Green Oasis: "#0093F6", // Electric Blue Boba: "#FFEB00", // Bright Yellow Elrond: "#4B4B4B", // Graphite Heco: "#2EB67D", // Emerald Green Ontology: "#34568B", // Steel Blue Fuse: "#55EBAA", // Mint Green Theta: "#33C4FF", // Cerulean Kava: "#FF645F", // Coral Red Iotex: "#00E0E1", // Turquoise Okex: "#757575", // Ash Gray Nervos: "#999999", // Medium Gray Evmos: "#ED6046", // Terracotta Syscoin: "#7E7E7E", // Slate Gray Meter: "#AAAAAA", // Light Gray Conflux: "#BBBBBB", // Silver Telos: "#CCCCCC", // Platinum Waves: "#447BFF", // Cobalt Blue Thundercore: "#DDDDDD", // Light Platinum Echelon: "#EE7D00", // Pumpkin Orange Velas: "#3366CC", // Indigo Blue Karura: "#FF5858", // Salmon Red Crab: "#EEE8AA", // Pale Goldenrod Bifrost: "#8A2BE2", // Blue Violet Ubiq: "#00EE88", // Bright Mint Mixin: "#999966", // Olive Gray Everscale: "#008800", // True Green Nahmii: "#880088", // Deep Purple Rei: "#888888", // Cool Gray Zeniq: "#AA22AA", // Orchid Defichain: "#55AAFF", // Light Azure Elastos: "#FFAAAA", // Pastel Pink Shiden: "#CC4499", // Mulberry Callisto: "#AA7733", // Golden Brown Doge: "#FFD700", // Gold Litecoin: "#345D9D", // Denim Blue Filecoin: "#0090FF", // Ultramarine Sui: "#6FBCF0", // Cornflower Blue Base: "#0052FF", // True Blue Scroll: "#FFA3A0", // Soft Peach Mode: "#AA5577", // Dusky Rose Linea: "#2255AA", // Steel Navy Starknet: "#AA2255", // Wine Red Ton: "#00C2FF", // Neon Cyan MultiversX: "#7F00FF", // Vivid Violet Venom: "#FF007F", // Hot Pink Stacks: "#5546FF", // Bright Indigo Flare: "#FF8800", // Bright Orange Hedera: "#444444", // Dark Gray Bitcoincash: "#8DC351", // Apple Green Neutron: "#005555", // Teal Fraxtal: "#BB3355", // Cranberry Manta: "#668888", // Soft Teal Tezos: "#2C7DF7", // Sapphire Blue Blast: "#BB22AA", // Magenta Neo: "#00FF99", // Neon Mint Op_bnb: "#E4D00A", // Canary Yellow Mantle: "#AA99CC", // Lavender Gray Kusama: "#BB4444", // Brick Red Osmosis: "#750CCB", // Amethyst Rootstock: "#44CC44", // Bright Green Acala: "#FD3B4C", // Ruby Red Cronos_zkevm: "#225588", // Prussian Blue Polynomial: "#BB7766", // Soft Terracotta Iotaevm: "#66BB99", // Jade Green "zkSync Era": "#8C8DFC", // Periwinkle Astar: "#1B6DC1", // Cerulean Blue Shibarium: "#BB5544", // Rust Canto: "#00FF77", // Lime Cyan "Polygon zkEVM": "#7747E5", // Royal Purple "Re.al": "#BB99CC", // Light Mauve Chiliz: "#CD0124", // Crimson ICP: "#F15A24", // Flame Orange Kujira: "#1188AA", // Ocean Blue Persistence: "#AA77BB", // Grape Purple Zksync: "#6C7DFC", // Indigo Blue Xlayer: "#8877AA", // Heather Purple Hydra: "#CCAA99", // Sand Beige Neon: "#00E9A3", // Aqua Mint Nolus: "#AA4466", // Rosewood Bsquared: "#AAEEDD", // Soft Mint Boba_Bnb: "#CCFF33", // Bright Lime Carbon: "#00FFDD", // Cyan Taiko: "#EEDD77", // Mustard Obyte: "#667788", // Steel Gray Vechain: "#00CFFF", // Sky Cyan Xdc: "#778899", // Slate Blue Rollux: "#BBBB55", // Straw Yellow Bitlayer: "#AA99EE", // Lilac Libre: "#FFFF88", // Lemon Yellow Other: "#9B30FF", // Electric Purple }; function BubbleChart({ currentFilter, minTVL, minAPY, riskFilter }) { const svgRef = useRef(null); const [selectedNode, setSelectedNode] = useState(null); const [zoomState, setZoomState] = useState({ k: 1, x: 0, y: 0 }); const [data, setData] = useState([]); const [draggedNode, setDraggedNode] = useState(null); const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight }); useEffect(() => { fetchData().then(setData); }, []); useEffect(() => { function handleResize() { setDimensions({ width: window.innerWidth, height: window.innerHeight, }); } window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const filteredData = useMemo(() => processData(data, currentFilter, minTVL, minAPY, riskFilter), [ data, currentFilter, minTVL, minAPY, riskFilter, ]); const simulation = useRef(null); const updateSimulation = useCallback(() => { if (simulation.current) { simulation.current.alpha(-0.001).restart(); } requestAnimationFrame(updateSimulation); }, []); useEffect(() => { if (!svgRef.current || filteredData.length === 0) return; const width = dimensions.width; const height = dimensions.height - 100; const svg = d3.select(svgRef.current) .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); svg.selectAll("*").remove(); // Clear previous render const g = svg.append("g"); const zoom = d3.zoom() .scaleExtent([0.5, 5]) .on("zoom", (event) => { g.attr("transform", event.transform); setZoomState(event.transform); }); svg.call(zoom); // Adjust pack layout to better fill the screen const pack = d3.pack() .size([width * 0.95, height * 0.95]) .padding(3); const root = d3.hierarchy({ children: filteredData }) .sum(d => d.apy) .sort((a, b) => b.value - a.value); const nodes = pack(root).descendants().slice(1); // Adjust circle sizes const minRadius = Math.min(10, width / 30); const maxRadius = Math.min(50, width / 10); const radiusScale = d3.scaleLinear() .domain([d3.min(nodes, d => d.r), d3.max(nodes, d => d.r)]) .range([minRadius, maxRadius]); nodes.forEach(node => { node.r = radiusScale(node.r); }); // Custom attraction force const customAttraction = (alpha) => { const strength = 0.1; // Reduced strength for more spread const center = [width / 2, height / 2]; return (d) => { d.vx += (center[0] - d.x) * strength * alpha; d.vy += (center[1] - d.y) * strength * alpha; }; }; simulation.current = d3.forceSimulation(nodes) .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody().strength(d => -2 * d.r)) // Increased repulsion .force("collide", d3.forceCollide().radius(d => d.r * 1.05).strength(0.8)) .force("attraction", customAttraction); // Define gradients const defs = svg.append("defs"); const gradients = new Map(); nodes.forEach((node) => { const color = colorScheme[node.data.chain] || colorScheme.Other; if (!gradients.has(color)) { const gradientId = `gradient-${color.slice(1)}`; const gradient = defs.append("radialGradient") .attr("id", gradientId) .attr("cx", "30%") .attr("cy", "30%") .attr("r", "70%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", color) .attr("stop-opacity", 0.3); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", color) .attr("stop-opacity", 0.1); gradients.set(color, gradientId); } }); const drag = d3.drag() .on("start", (event, d) => { if (!event.active) simulation.current.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; setDraggedNode(d); }) .on("drag", (event, d) => { d.fx = event.x; d.fy = event.y; }) .on("end", (event, d) => { if (!event.active) simulation.current.alphaTarget(0); d.fx = null; d.fy = null; setDraggedNode(null); }); const node = g.selectAll(".node") .data(nodes) .join("g") .attr("class", "node") .call(drag) .on("click", (event, d) => { setSelectedNode(d.data); event.stopPropagation(); }); node.append("circle") .attr("r", d => d.r) .attr("fill", d => `url(#${gradients.get(colorScheme[d.data.chain] || colorScheme.Other)})`) .attr("stroke", d => colorScheme[d.data.chain] || colorScheme.Other) .attr("stroke-width", 2); node.append("text") .attr("dy", "-0.5em") .style("text-anchor", "middle") .style("font-size", d => Math.min(d.r / 3, 10)) .style("fill", "#FFF") .style("pointer-events", "none") .text(d => d.data.symbol); node.append("text") .attr("dy", "0.5em") .style("text-anchor", "middle") .style("font-size", d => Math.min(d.r / 4, 8)) .style("fill", "#FFF") .style("pointer-events", "none") .text(d => d.data.project); node.append("text") .attr("dy", "1.5em") .style("text-anchor", "middle") .style("font-size", d => Math.min(d.r / 5, 6)) .style("fill", "#FFF") .style("pointer-events", "none") .text(d => `${d.data.chain} - ${d.data.apy.toFixed(2)}%`); simulation.current.on("tick", () => { node.attr("transform", d => `translate(${d.x},${d.y})`); // Apply boundary force nodes.forEach(node => { node.x = Math.max(node.r, Math.min(width - node.r, node.x)); node.y = Math.max(node.r, Math.min(height - node.r, node.y)); }); }); svg.on("click", () => setSelectedNode(null)); updateSimulation(); return () => { simulation.current.stop(); }; }, [filteredData, updateSimulation, dimensions]); return (

{selectedNode && (

{selectedNode.symbol}

Project: {selectedNode.project}

Chain: {selectedNode.chain}

APY: {selectedNode.apy.toFixed(2)}%

TVL: ${d3.format(",.0f")(selectedNode.tvlUsd)}

7D APY Change: {selectedNode.apyPct7D ? selectedNode.apyPct7D.toFixed(2) + "%" : "N/A"}

Risk: {selectedNode.ilRisk}

Prediction: {selectedNode.predictions?.predictedClass || "N/A"}

)}

Zoom: {zoomState.k.toFixed(2)}x

{draggedNode && (

Dragging: {draggedNode.data.symbol}

)}

); } const FloatingMenu = React.memo(({ setFilter, setMinTVL, setMinAPY, setRiskFilter, isOpen, toggleMenu }) => { const [showAllChains, setShowAllChains] = useState(false); const topChains = [ "All", "Ethereum", "Bitcoin", "Solana", "Polygon", "Avalanche", "Binance", "Cardano", "Polkadot", "Tron", "Cosmos", ]; const allChains = [ ...topChains, "Arbitrum", "Optimism", "Fantom", "Cronos", "Aptos", "Near", "Algorand", "Gnosis", "Klaytn", "Harmony", "Moonriver", "Celo", "Moonbeam", "Metis", "Aurora", "Oasis", "Boba", "Elrond", "Heco", "Ontology", "Fuse", "Theta", "Kava", "Iotex", "Okex", "Nervos", "Evmos", "Syscoin", "Meter", "Conflux", "Telos", "Waves", "Thundercore", "Echelon", "Velas", "Karura", "Crab", "Bifrost", "Ubiq", "Mixin", "Everscale", "Nahmii", "Rei", "Zeniq", "Defichain", "Elastos", "Shiden", "Callisto", "Doge", "Litecoin", "Filecoin", "Sui", "Base", "Scroll", "Mode", "Linea", "Starknet", "Ton", "MultiversX", "Venom", "Stacks", "Flare", "Hedera", "Bitcoincash", "Neutron", "Fraxtal", "Manta", "Tezos", "Blast", "Neo", "Op_bnb", "Mantle", "Kusama", "Osmosis", "Rootstock", "Acala", "Cronos_zkevm", "Polynomial", "Iotaevm", "zkSync Era", "Astar", "Shibarium", "Canto", "Polygon zkEVM", "Re.al", "Chiliz", "ICP", "Kujira", "Karura", "Persistence", "Zksync", "Xlayer", "Hydra", "Neon", "Nolus", "Bsquared", "Boba_Bnb", "Carbon", "Taiko", "Obyte", "Vechain", "Xdc", "Rollux", "Bitlayer", "Libre", "Harmony", ]; const displayedChains = showAllChains ? allChains : topChains; useEffect(() => { if (!isOpen) { setShowAllChains(false); } }, [isOpen]); const toggleShowAllChains = () => { setShowAllChains(!showAllChains); }; return ( {isOpen && (

Filters

Chains

setFilter(chain)}> {chain}

Min TVL ($)

setMinTVL(Number(e.target.value))} placeholder="Enter min TVL" />

Min APY (%)

setMinAPY(Number(e.target.value))} placeholder="Enter min APY (min 2%)" min="2" />

Risk Level

setRiskFilter("All")}>All
setRiskFilter("Safe")}>Safe
setRiskFilter("Risky")}>Risky

)} ); }); function App() { const [filter, setFilter] = useState("All"); const [minTVL, setMinTVL] = useState(0); const [minAPY, setMinAPY] = useState(2); const [riskFilter, setRiskFilter] = useState("All"); const [isMenuOpen, setIsMenuOpen] = useState(false); const toggleMenu = () => setIsMenuOpen(!isMenuOpen); return (

DeFi Yield Explorer

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` DeFi Yield Explorer

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` :root { --bg-space: #0a0a1f; --text-light: #e0e0e0; --accent-blue: #4A90E2; --accent-green: #50E3C2; --accent-purple: #BB8FCE; --neon-green: #39FF14; } body { margin: 0; font-family: 'Roboto', sans-serif; background-color: var(--bg-space); color: var(--text-light); overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .dashboard { display: flex; height: 100vh; width: 100vw; overflow: hidden; } .floating-menu { position: fixed; top: 0; left: 0; background: rgba(10, 10, 31, 0.95); backdrop-filter: blur(10px); overflow: hidden; z-index: 1000; transition: all 0.3s ease-in-out; display: flex; flex-direction: column; } .floating-menu.open { border-radius: 0; } .menu-toggle { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; background: var(--accent-blue); color: white; border: none; border-radius: 50%; font-size: 1.5em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; z-index: 1001; } .menu-toggle:hover { background-color: var(--accent-purple); } .menu-content { padding: 60px 20px 20px; overflow-y: auto; height: 100%; width: 100%; box-sizing: border-box; } .menu-content h2 { font-family: 'Orbitron', sans-serif; color: var(--accent-green); margin: 0 0 20px; font-size: 1.5em; text-align: center; } .filter-group { margin-bottom: 20px; } .filter-group h3 { font-family: 'Orbitron', sans-serif; color: var(--accent-blue); margin: 0 0 10px; font-size: 1.1em; } .filter-group ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; } .filter-group li { padding: 8px 15px; margin: 5px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9em; background: rgba(255, 255, 255, 0.1); border-radius: 20px; } .filter-group li:hover { background: var(--accent-blue); color: white; } .filter-group input { width: 100%; padding: 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-light); border-radius: 4px; font-size: 0.9em; box-sizing: border-box; } .show-more { display: block; margin: 10px auto; padding: 8px 15px; background: var(--accent-purple); color: white; border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease; } .show-more:hover { background-color: var(--accent-blue); } .main-content { flex-grow: 1; display: flex; flex-direction: column; padding: 20px; width: 100%; height: 100%; overflow: hidden; } h1 { font-family: 'Orbitron', sans-serif; font-size: 2em; text-align: center; margin: 0 0 20px 0; color: var(--accent-blue); text-shadow: 0 0 10px var(--accent-blue); } .chart-container { flex-grow: 1; position: relative; overflow: hidden; width: 100%; height: calc(100% - 60px); } .bubble-chart-container { width: 100%; height: 100%; position: relative; } .node-info { background: rgba(10, 10, 31, 0.8); padding: 15px; border-radius: 10px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-light); font-size: 0.8em; max-width: 80%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; max-height: 80%; overflow-y: auto; } .node-info h3 { margin: 0 0 10px 0; color: var(--accent-green); font-family: 'Orbitron', sans-serif; } .node-info p { margin: 5px 0; } .zoom-info { position: absolute; bottom: 10px; left: 10px; background: rgba(255, 255, 255, 0.1); padding: 5px 10px; border-radius: 15px; font-size: 0.7em; backdrop-filter: blur(5px); } .drag-info { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.1); padding: 5px 10px; border-radius: 15px; font-size: 0.7em; backdrop-filter: blur(5px); } @media (max-width: 768px) { .floating-menu { width: 100%; height: 100%; } .floating-menu:not(.open) { width: 60px; height: 60px; border-radius: 50%; } .menu-content { padding: 80px 20px 20px; } h1 { font-size: 1.5em; } .chart-container { height: calc(100% - 40px); } .node-info { font-size: 0.7em; padding: 10px; } .zoom-info, .drag-info { font-size: 0.6em; } } @media (min-width: 769px) { .floating-menu { max-width: 350px; border-radius: 0 30px 30px 0; } .floating-menu:not(.open) { width: 60px; height: 60px; border-radius: 50%; } } `;

blockchainEcosystemBubbleMap

Version 23