export const defaultResponse = `{ "data": { "top10HoldersPercent": 10.888517711564196 } }`; export const EmbedFramePanel = ({query, defaultResponse}) => { const encodedQuery = typeof window === "undefined" ? "" : query; const storedManualKey = typeof window === "undefined" ? null : localStorage.getItem("d-explorer-key"); const [apiKey, setApiKey] = useState(storedManualKey ?? ""); const [apiKeys, setApiKeys] = useState([]); const [manualEntry, setManualEntry] = useState(storedManualKey !== null); const [currentQuery, setCurrentQuery] = useState(query); const [queryResponse, setQueryResponse] = useState(null); const [isLoading, setIsLoading] = useState(false); const [isLoadingApiKeys, setIsLoadingApiKeys] = useState(false); const [bannerDismissed, setBannerDismissed] = useState(false); useEffect(() => { if (typeof window !== "undefined") { const CACHE_KEY = 'codex-api-keys-cache'; const CACHE_TTL = 60 * 1000; const fetchApiKeys = async () => { if (manualEntry) { return; } try { const cached = sessionStorage.getItem(CACHE_KEY); if (cached) { const {data, timestamp} = JSON.parse(cached); if (Date.now() - timestamp < CACHE_TTL && Array.isArray(data) && data.length > 0) { setApiKeys(data); if (data[0].key) { setApiKey(data[0].key); } return; } } } catch (e) {} setIsLoadingApiKeys(true); try { const response = await fetch('https://dashboard.codex.io/api/api-keys/shared', { method: 'GET', credentials: 'include' }); if (response.ok) { const result = await response.json(); if (result.success && result.data && Array.isArray(result.data) && result.data.length > 0) { setApiKeys(result.data); if (result.data[0].key) { setApiKey(result.data[0].key); } try { sessionStorage.setItem(CACHE_KEY, JSON.stringify({ data: result.data, timestamp: Date.now() })); } catch (e) {} return; } } } catch (error) {} finally { setIsLoadingApiKeys(false); } }; fetchApiKeys(); } }, [manualEntry]); useEffect(() => { if (typeof window === "undefined") return; try { if (sessionStorage.getItem("codex-banner-dismissed") === "true") { setBannerDismissed(true); } } catch (e) {} const observer = new MutationObserver(() => { const banner = document.getElementById("codex-auth-banner"); if (banner && banner.style.display === "none") { setBannerDismissed(true); } }); const banner = document.getElementById("codex-auth-banner"); if (banner) { observer.observe(banner, { attributes: true, attributeFilter: ["style"] }); } return () => observer.disconnect(); }, []); useEffect(() => { const handleMessage = event => { if (event.data && event.data.type === 'query-update') { setCurrentQuery(event.data.query); } }; window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, []); const handleApiKeyChange = e => { const selectedKey = e.target.value; if (selectedKey === "__manual__") { setManualEntry(true); setApiKey(""); localStorage.setItem("d-explorer-key", ""); return; } setApiKey(selectedKey); if ((apiKeys.length === 0 || manualEntry) && typeof window !== "undefined") { if (selectedKey) { localStorage.setItem("d-explorer-key", selectedKey); window.dispatchEvent(new CustomEvent("codex-api-key-entered")); } else { localStorage.removeItem("d-explorer-key"); } } }; const handleRunQuery = async () => { if (!apiKey) { alert("Please select your API key"); return; } if (!currentQuery || !currentQuery.trim()) { alert("Please enter a query"); return; } setIsLoading(true); setQueryResponse(null); try { const response = await fetch("https://graph.codex.io/graphql", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `${apiKey}` }, body: JSON.stringify({ query: currentQuery }) }); const data = await response.json(); setQueryResponse(data); } catch (error) { setQueryResponse({ error: error.message }); } finally { setIsLoading(false); } }; const currentRes = queryResponse ? JSON.stringify(queryResponse, null, 2) : defaultResponse; const responseLineCount = (currentRes.match(/\n/g) ?? []).length; let isResponseExpandable = "true"; if (!queryResponse) { isResponseExpandable = "false"; } else if (responseLineCount < 50) { isResponseExpandable = "false"; } const queryLineCount = (query.match(/\n/g) ?? []).length; const height = (queryLineCount + 1) * 18; const iframeUrl = new URL("https://explorer.codex.io/sidebar-embed.html"); iframeUrl.searchParams.set("query", encodedQuery); return

API Key: {isLoadingApiKeys ?

Loading API keys...

: apiKeys.length > 0 && !manualEntry ? : <> {manualEntry && } }

{!!apiKey ? Edit the query and run it to see live data : apiKeys.length > 0 ? Select your API key to execute the query below. : Enter your API key to execute the query below.{bannerDismissed && <> Don't have one? Create a free API key.} }

Query:

API Documentation

Queries

Mutations

Subscriptions

Types

​Returns

​Arguments

Returns

Arguments