PumpPortal Data Monitor

{title}

\n {messages.length === 0 ? (\n

No messages

\n ) : (\n messages.map((msg, index) => (\n

\n {renderFormattedJSON(msg)}\n

\n ))\n )}\n

\n );\n\n return (\n

PumpPortal Data Monitor

\n \n {status}\n \n

\n {error && (\n

\n \n \n \n \n \n

{error}

\n )}\n

Subscriptions

\n toggleSubscription(\"newToken\")}\n className={`px-3 py-1 rounded ${subscriptions.newToken ? \"bg-blue-500 text-white\" : \"bg-gray-200\"}`}\n >\n New Token Events\n \n toggleSubscription(\"raydiumLiquidity\")}\n className={`px-3 py-1 rounded ${\n subscriptions.raydiumLiquidity ? \"bg-blue-500 text-white\" : \"bg-gray-200\"\n }`}\n >\n Raydium Liquidity\n \n

\n setInputToken(e.target.value)}\n placeholder=\"Enter token address\"\n className=\"border rounded px-2 py-1 mr-2\"\n />\n {\n if (inputToken) {\n addSubscription(\"tokenTrade\", inputToken);\n setInputToken(\"\");\n }\n }}\n className=\"px-3 py-1 rounded bg-green-500 text-white\"\n >\n Add Token Trade\n \n

\n setInputAccount(e.target.value)}\n placeholder=\"Enter account address\"\n className=\"border rounded px-2 py-1 mr-2\"\n />\n {\n if (inputAccount) {\n addSubscription(\"accountTrade\", inputAccount);\n setInputAccount(\"\");\n }\n }}\n className=\"px-3 py-1 rounded bg-green-500 text-white\"\n >\n Add Account Trade\n \n

Active Token Trades:

\n {subscriptions.tokenTrade.map(token => (\n

\n {token}\n removeSubscription(\"tokenTrade\", token)}\n className=\"ml-2 text-red-500\"\n >\n Remove\n \n

\n ))}\n

Active Account Trades:

\n {subscriptions.accountTrade.map(account => (\n

\n {account}\n removeSubscription(\"accountTrade\", account)}\n className=\"ml-2 text-red-500\"\n >\n Remove\n \n

\n ))}\n

\n \n {/* Three-column message display */}\n

\n {renderMessageColumn(\n \"New Token Launches\", \n messages.newToken, \n \"green\"\n )}\n {renderMessageColumn(\n \"Raydium Liquidity\", \n messages.raydiumLiquidity, \n \"blue\"\n )}\n {renderMessageColumn(\n \"Token & Account Trades\", \n messages.trades, \n \"purple\"\n )}\n

\n );\n};\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n PumpPortal Data Monitor\n \n \n \n \n

\n \n \n View Source\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f0f0f0;\n}\n`;","createdAt",["D",1737695837158],"version",17,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","gigmx","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybnBtekRodDdiRDdIQmJqQXNJY0hiQmhyNEoifQ","forkedVal","interval","slug","gigmx/boldEmeraldWildebeest","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[140,143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,202,206],{"_117":118,"_141":-5,"_115":142,"_112":110},"prId",["D",1737695837158],{"_117":144,"_141":-5,"_115":145,"_112":146},16,["D",1737687326617],"a9d9576a-d9fe-11ef-90b0-e6cdfca9ef9f",{"_117":148,"_141":-5,"_115":149,"_112":150},15,["D",1737687282483],"8f8aefea-d9fe-11ef-aac0-e6cdfca9ef9f",{"_117":152,"_141":-5,"_115":153,"_112":154},14,["D",1737687273642],"8a49b17e-d9fe-11ef-aadf-e6cdfca9ef9f",{"_117":156,"_141":-5,"_115":157,"_112":158},13,["D",1737679498421],"6fe2d53e-d9ec-11ef-88ae-e6cdfca9ef9f",{"_117":160,"_141":-5,"_115":161,"_112":162},12,["D",1737115142827],"71bd3574-d4ca-11ef-81ad-e6cdfca9ef9f",{"_117":164,"_141":-5,"_115":165,"_112":166},11,["D",1737115090544],"5293e2ce-d4ca-11ef-9a77-e6cdfca9ef9f",{"_117":168,"_141":-5,"_115":169,"_112":170},10,["D",1737084813541],"d411ffc6-d483-11ef-bd71-e6cdfca9ef9f",{"_117":172,"_141":-5,"_115":173,"_112":174},9,["D",1737080660932],"28ebf6b4-d47a-11ef-ada7-e6cdfca9ef9f",{"_117":176,"_141":-5,"_115":177,"_112":178},8,["D",1737055134527],"ba01e3fc-d43e-11ef-9368-e6cdfca9ef9f",{"_117":180,"_141":-5,"_115":181,"_112":182},7,["D",1737055027777],"7a6043ec-d43e-11ef-90bb-e6cdfca9ef9f",{"_117":184,"_141":-5,"_115":185,"_112":186},6,["D",1737054998414],"68df1a12-d43e-11ef-8dc5-e6cdfca9ef9f",{"_117":188,"_141":-5,"_115":189,"_112":190},5,["D",1737054974255],"5a78d486-d43e-11ef-82e1-e6cdfca9ef9f",{"_117":192,"_141":-5,"_115":193,"_112":194},4,["D",1737054968961],"575133de-d43e-11ef-aa7d-e6cdfca9ef9f",{"_117":196,"_141":-5,"_115":197,"_112":198},3,["D",1737054925832],"3d9b771a-d43e-11ef-be9c-e6cdfca9ef9f",{"_117":90,"_141":-5,"_115":200,"_112":201},["D",1737054921583],"3b131fac-d43e-11ef-82e1-e6cdfca9ef9f",{"_117":203,"_141":-5,"_115":204,"_112":205},1,["D",1737054861738],"1767c396-d43e-11ef-854f-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":207,"_112":208},["D",1737054854249],"12f336ba-d43e-11ef-b035-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":216,"_217":218,"_94":219},"single","redirect","/v/gigmx/boldEmeraldWildebeest/versions",{"_112":158,"_113":220,"_117":156,"_115":221,"_222":99,"_100":101,"_107":108,"_128":129,"_11":96,"_223":-5,"_224":-5,"_225":-5,"_213":26,"_134":135},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nconst WebSocketMonitor = () => {\n const [messages, setMessages] = useState({\n newToken: [],\n raydiumLiquidity: [],\n trades: []\n });\n const [status, setStatus] = useState(\"disconnected\");\n const [error, setError] = useState(null);\n const [subscriptions, setSubscriptions] = useState({\n newToken: false,\n raydiumLiquidity: false,\n tokenTrade: [],\n accountTrade: [],\n });\n const [inputToken, setInputToken] = useState(\"\");\n const [inputAccount, setInputAccount] = useState(\"\");\n\n const ws = React.useRef(null);\n\n const sendSubscription = (type, keys = []) => {\n if (ws.current && ws.current.readyState === WebSocket.OPEN) {\n let method;\n switch (type) {\n case \"newToken\":\n method = \"subscribeNewToken\";\n break;\n case \"raydiumLiquidity\":\n method = \"subscribeRaydiumLiquidity\";\n break;\n case \"tokenTrade\":\n method = \"subscribeTokenTrade\";\n break;\n case \"accountTrade\":\n method = \"subscribeAccountTrade\";\n break;\n default:\n displayError(`Invalid subscription type: ${type}`);\n return;\n }\n\n const payload = { method };\n if (keys && keys.length > 0) {\n payload.keys = Array.isArray(keys) ? keys : [keys];\n }\n ws.current.send(JSON.stringify(payload));\n }\n };\n\n const sendUnsubscription = (type, keys = []) => {\n if (ws.current && ws.current.readyState === WebSocket.OPEN) {\n let method;\n switch (type) {\n case \"newToken\":\n method = \"unsubscribeNewToken\";\n break;\n case \"raydiumLiquidity\":\n method = \"unsubscribeRaydiumLiquidity\";\n break;\n case \"tokenTrade\":\n method = \"unsubscribeTokenTrade\";\n break;\n case \"accountTrade\":\n method = \"unsubscribeAccountTrade\";\n break;\n default:\n displayError(`Invalid unsubscription type: ${type}`);\n return;\n }\n\n const payload = { method };\n if (keys && keys.length > 0) {\n payload.keys = Array.isArray(keys) ? keys : [keys];\n }\n ws.current.send(JSON.stringify(payload));\n }\n };\n\n const connectWebSocket = useCallback(() => {\n try {\n ws.current = new WebSocket(\"wss://pumpportal.fun/api/data\");\n\n ws.current.onopen = () => {\n setStatus(\"connected\");\n setError(null);\n\n // Resubscribe to active subscriptions\n if (subscriptions.newToken) {\n sendSubscription(\"newToken\");\n }\n if (subscriptions.raydiumLiquidity) {\n sendSubscription(\"raydiumLiquidity\");\n }\n if (subscriptions.tokenTrade.length > 0) {\n sendSubscription(\"tokenTrade\", subscriptions.tokenTrade);\n }\n if (subscriptions.accountTrade.length > 0) {\n sendSubscription(\"accountTrade\", subscriptions.accountTrade);\n }\n };\n\n ws.current.onmessage = (event) => {\n try {\n const data = JSON.parse(event.data);\n if (data.errors) {\n displayError(Array.isArray(data.errors) ? data.errors.join(\", \") : data.errors);\n } else {\n // Categorize incoming messages\n setMessages(prev => {\n let category = 'trades';\n if (data.type === 'newToken') {\n category = 'newToken';\n } else if (data.type === 'raydiumLiquidity') {\n category = 'raydiumLiquidity';\n }\n\n // Keep only the last 50 messages per category\n return {\n ...prev,\n [category]: [data, ...prev[category]].slice(0, 50)\n };\n });\n }\n } catch (err) {\n displayError(\"Failed to parse message\");\n }\n };\n\n ws.current.onerror = (error) => {\n setError(\"WebSocket error occurred\");\n setStatus(\"error\");\n };\n\n ws.current.onclose = () => {\n setStatus(\"disconnected\");\n setTimeout(connectWebSocket, 5000);\n };\n } catch (err) {\n setError(\"Failed to connect to WebSocket\");\n setStatus(\"error\");\n }\n }, [subscriptions]);\n\n useEffect(() => {\n connectWebSocket();\n return () => {\n if (ws.current) {\n ws.current.close();\n }\n };\n }, [connectWebSocket]);\n\n const displayError = (errorMessage) => {\n setError(errorMessage);\n setTimeout(() => setError(null), 5000);\n };\n\n const toggleSubscription = (type) => {\n setSubscriptions(prev => {\n const newSubscriptions = { ...prev, [type]: !prev[type] };\n if (newSubscriptions[type]) {\n sendSubscription(type);\n } else {\n sendUnsubscription(type);\n }\n return newSubscriptions;\n });\n };\n\n const addSubscription = (type, key) => {\n if (!key.trim()) {\n displayError(`Please enter a valid ${type === \"tokenTrade\" ? \"token\" : \"account\"} address`);\n return;\n }\n\n setSubscriptions(prev => {\n if (prev[type].includes(key)) {\n displayError(`This ${type === \"tokenTrade\" ? \"token\" : \"account\"} is already being monitored`);\n return prev;\n }\n const newKeys = [...prev[type], key];\n sendSubscription(type, [key]);\n return { ...prev, [type]: newKeys };\n });\n };\n\n const removeSubscription = (type, key) => {\n setSubscriptions(prev => {\n const newKeys = prev[type].filter(k => k !== key);\n sendUnsubscription(type, [key]);\n return { ...prev, [type]: newKeys };\n });\n };\n\n const getStatusColor = (status) => {\n switch (status) {\n case \"connected\":\n return \"bg-green-500 text-white\";\n case \"disconnected\":\n return \"bg-red-500 text-white\";\n case \"error\":\n return \"bg-yellow-500 text-white\";\n default:\n return \"bg-gray-500 text-white\";\n }\n };\n\n // Render a nicely formatted JSON with syntax highlighting\n const renderFormattedJSON = (data) => {\n return (\n

\n        {JSON.stringify(data, null, 2)}\n

\n );\n };\n\n // Render column of messages\n const renderMessageColumn = (title, messages, color) => (\n

{title}

\n {messages.length === 0 ? (\n

No messages

\n ) : (\n messages.map((msg, index) => (\n

\n {renderFormattedJSON(msg)}\n

\n ))\n )}\n

\n );\n\n return (\n

PumpPortal Data Monitor

\n \n {status}\n \n

\n {error && (\n

\n \n \n \n \n \n

{error}

\n )}\n

Subscriptions

Active Token Trades:

\n {subscriptions.tokenTrade.map(token => (\n

\n {token}\n removeSubscription(\"tokenTrade\", token)}\n className=\"ml-2 text-red-500\"\n >\n Remove\n \n

\n ))}\n

Active Account Trades:

\n {subscriptions.accountTrade.map(account => (\n

\n {account}\n removeSubscription(\"accountTrade\", account)}\n className=\"ml-2 text-red-500\"\n >\n Remove\n \n

\n ))}\n

\n {renderMessageColumn(\"New Token Events\", messages.newToken, \"blue\")}\n {renderMessageColumn(\"Raydium Liquidity\", messages.raydiumLiquidity, \"green\")}\n {renderMessageColumn(\"Trades\", messages.trades, \"purple\")}\n

\n \n \n View Source\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f0f0f0;\n}\n`;",["D",1737679498421],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

boldEmeraldWildebeest

Version 13