[{"_1":2,"_133":-5,"_134":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_132":-5,"_129":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_55":56,"_57":58,"_59":41,"_60":61,"_62":58,"_63":41,"_64":41,"_65":58,"_66":58,"_67":17,"_68":25,"_69":70,"_71":72,"_73":74,"_75":76,"_91":-5,"_92":17,"_93":94,"_129":31,"_130":131},"id","6c5efdb2989c08814b28","isMyApp",false,"name","PNL-Flex","description","Transform your crypto gains into stunning glassmorphic PNL cards that'll make your followers drool! With perfect Photon-style visuals featuring those signature blurred orbs and that sweet teal text, pnlflex lets you flex your trading wins in style.","brief","Turn your crypto gains into jaw-dropping Photon-style PNL cards with dreamy glassmorphic vibes!","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/6c5efdb2989c08814b28/71407_45d7603f.webp","cdnUrl","https://cdn.dev.fun/app/6c5efdb2989c08814b28/71407","createdAt",["D",1748460998410],"updatedAt",["D",1748464481409],"lastCommitId",["B","71407"],"tier",1,"credits",48,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":-5,"_53":54},"1e131629-ad4a-43fd-b9ac-dd4b5b7fe484","uniqueId","B8TWUdSKNg2WQdSqTddtpeBsNMxLyHgh73Vj8M4343YJ","username","solanaWallet","displayName","B8T...3YJ","bio","avatar","/avatar.svg","commitCount",16,"forkCount",0,"likeCount","runsCount",20,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","4dRNjTieW9McFJ9Zqwb2jDbvaZhUD8jqPiA5pkPhpump","code","import { useState, useRef, useEffect } from 'react';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { ConnectionProvider, WalletProvider, useWallet, useConnection } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport { PublicKey, Transaction, SystemProgram, LAMPORTS_PER_SOL } from '@solana/web3.js';\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nimport { motion } from 'framer-motion';\nimport { AlertCircle, Download } from 'lucide-react';\nconst PNL_CARD_WIDTH = 800;\nconst PNL_CARD_HEIGHT = 1000;\nfunction PNLCardGenerator() {\n const [tokenName, setTokenName] = useState(\"$FLEXPNL\");\n const [initialInvestment, setInitialInvestment] = useState(\"3.0\");\n const [initialCurrency, setInitialCurrency] = useState(\"SOL\");\n const [initialInvestmentUSD, setInitialInvestmentUSD] = useState(\"430.0964\");\n const [currentProfit, setCurrentProfit] = useState(\"79.6577\");\n const [currentCurrency, setCurrentCurrency] = useState(\"SOL\");\n const [currentProfitUSD, setCurrentProfitUSD] = useState(\"11420.1699\");\n const [imageUrl, setImageUrl] = useState(\"\");\n const [isProcessing, setIsProcessing] = useState(false);\n const [error, setError] = useState(\"\");\n const [showPopup, setShowPopup] = useState(false);\n const cardRef = useRef(null);\n const {\n publicKey,\n sendTransaction\n } = useWallet();\n const {\n connection\n } = useConnection();\n const logoRef = useRef(null);\n useEffect(() => {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = \"https://cdn.dev.fun/asset/6c5efdb2989c08814b28/Ontwerp zonder titel (72)_c51a7503.png\";\n img.onload = () => {\n console.log(\"Logo loaded successfully\");\n logoRef.current = img;\n generateImage();\n };\n img.onerror = e => {\n console.error(\"Failed to load logo image:\", e);\n logoRef.current = null;\n generateImage();\n };\n }, []);\n const generateImage = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = PNL_CARD_WIDTH;\n canvas.height = PNL_CARD_HEIGHT;\n const ctx = canvas.getContext(\"2d\");\n const gradient = ctx.createLinearGradient(0, 0, PNL_CARD_WIDTH, PNL_CARD_HEIGHT);\n gradient.addColorStop(0, \"rgba(20, 10, 30, 0.9)\");\n gradient.addColorStop(1, \"rgba(10, 15, 25, 0.9)\");\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, PNL_CARD_WIDTH, PNL_CARD_HEIGHT);\n drawOrb(ctx, 100, 150, 400, \"rgba(220, 50, 230, 0.3)\");\n drawOrb(ctx, PNL_CARD_WIDTH - 200, PNL_CARD_HEIGHT - 200, 450, \"rgba(0, 200, 255, 0.25)\");\n drawOrb(ctx, PNL_CARD_WIDTH - 100, PNL_CARD_HEIGHT / 2, 300, \"rgba(255, 220, 0, 0.2)\");\n ctx.fillStyle = \"rgba(30, 30, 40, 0.25)\";\n ctx.filter = \"blur(1px)\";\n roundedRect(ctx, 40, 40, PNL_CARD_WIDTH - 80, PNL_CARD_HEIGHT - 80, 30);\n ctx.fill();\n ctx.filter = \"none\";\n ctx.strokeStyle = \"rgba(120, 120, 255, 0.2)\";\n ctx.lineWidth = 2;\n roundedRect(ctx, 40, 40, PNL_CARD_WIDTH - 80, PNL_CARD_HEIGHT - 80, 30);\n ctx.stroke();\n ctx.font = \"bold 24px Arial, sans-serif\";\n ctx.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n ctx.textAlign = \"center\";\n ctx.font = \"bold 28px Arial, sans-serif\";\n ctx.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n ctx.fillText(\"GAINS WITH PHOTON\", PNL_CARD_WIDTH / 2, 120);\n ctx.font = \"bold 84px Arial, sans-serif\";\n ctx.fillStyle = \"white\";\n ctx.fillText(tokenName, PNL_CARD_WIDTH / 2, 220);\n ctx.font = \"bold 22px Arial, sans-serif\";\n ctx.fillStyle = \"rgba(220, 220, 220, 0.9)\";\n ctx.textAlign = \"left\";\n ctx.fillText(\"INVESTED\", 150, 350);\n ctx.font = \"bold 48px Arial, sans-serif\";\n ctx.fillStyle = \"#00F0B8\";\n drawCurrencyIcon(ctx, initialCurrency, 150, 410);\n ctx.fillText(initialInvestment, 200, 410);\n ctx.font = \"22px Arial, sans-serif\";\n ctx.fillStyle = \"rgba(180, 180, 180, 0.9)\";\n ctx.fillText(`${initialInvestmentUSD} USD`, 150, 450);\n ctx.font = \"bold 22px Arial, sans-serif\";\n ctx.fillStyle = \"rgba(220, 220, 220, 0.9)\";\n ctx.textAlign = \"left\";\n ctx.fillText(\"CURRENT PROFIT\", 500, 350);\n ctx.font = \"bold 48px Arial, sans-serif\";\n ctx.fillStyle = \"#00F0B8\";\n drawCurrencyIcon(ctx, currentCurrency, 500, 410);\n ctx.fillText(currentProfit, 550, 410);\n ctx.font = \"22px Arial, sans-serif\";\n ctx.fillStyle = \"rgba(180, 180, 180, 0.9)\";\n ctx.fillText(`${currentProfitUSD} USD`, 500, 450);\n const initialUSD = parseFloat(initialInvestmentUSD);\n const currentUSD = parseFloat(currentProfitUSD);\n const pnlPercentage = (currentUSD - initialUSD) / initialUSD * 100;\n const formattedPNL = `${pnlPercentage >= 0 ? '+' : ''}${pnlPercentage.toFixed(2)}%`;\n ctx.font = \"bold 96px Arial, sans-serif\";\n ctx.textAlign = \"center\";\n ctx.fillStyle = pnlPercentage >= 0 ? \"#00C481\" : \"#FF4D4D\";\n ctx.fillText(formattedPNL, PNL_CARD_WIDTH / 2, 650);\n drawPhotonLogo(ctx, 120, PNL_CARD_HEIGHT - 90, 30);\n ctx.font = \"bold 24px Arial, sans-serif\";\n ctx.fillStyle = \"white\";\n ctx.textAlign = \"left\";\n ctx.fillText(\"PHOTON HYPERSPEED\", 190, PNL_CARD_HEIGHT - 80);\n const dataUrl = canvas.toDataURL(\"image/png\");\n setImageUrl(dataUrl);\n };\n const roundedRect = (ctx, x, y, width, height, radius) => {\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n ctx.lineTo(x + width - radius, y);\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n ctx.lineTo(x + width, y + height - radius);\n ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n ctx.lineTo(x + radius, y + height);\n ctx.quadraticCurveTo(x, y + height, x, y + height - radius);\n ctx.lineTo(x, y + radius);\n ctx.quadraticCurveTo(x, y, x + radius, y);\n ctx.closePath();\n };\n const drawCurrencyIcon = (ctx, currency, x, y) => {\n ctx.font = \"bold 36px Arial, sans-serif\";\n ctx.fillStyle = \"#00F0B8\";\n ctx.textAlign = \"left\";\n ctx.fillText(currency === \"SOL\" ? \"◎\" : \"$\", x, y);\n };\n const drawOrb = (ctx, x, y, radius, color) => {\n const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);\n gradient.addColorStop(0, color);\n gradient.addColorStop(1, \"rgba(0, 0, 0, 0)\");\n ctx.filter = \"blur(80px)\";\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.arc(x, y, radius, 0, Math.PI * 2);\n ctx.fill();\n ctx.filter = \"none\";\n };\n const drawPhotonLogo = (ctx, x, y, size) => {\n if (logoRef.current) {\n ctx.drawImage(logoRef.current, x, y - size, size * 2, size * 1.5);\n } else {\n ctx.fillStyle = \"white\";\n ctx.beginPath();\n ctx.moveTo(x, y);\n ctx.lineTo(x + size, y);\n ctx.lineTo(x + size / 2, y - size);\n ctx.closePath();\n ctx.fill();\n }\n };\n const startDownloadProcess = async () => {\n if (!imageUrl) {\n setError(\"No image generated yet. Please wait for preview to load.\");\n return;\n }\n if (!publicKey) {\n setError(\"Please connect your wallet to download the image.\");\n return;\n }\n try {\n setIsProcessing(true);\n setError(\"\");\n const treasuryWallet = new PublicKey(\"B8TWUdSKNg2WQdSqTddtpeBsNMxLyHgh73Vj8M4343YJ\");\n const transaction = new Transaction().add(SystemProgram.transfer({\n fromPubkey: publicKey,\n toPubkey: treasuryWallet,\n lamports: 0.015 * LAMPORTS_PER_SOL\n }));\n setError(\"Please sign the transaction...\");\n try {\n const signature = await sendTransaction(transaction, connection, {\n skipPreflight: true\n });\n setShowPopup(true);\n setError(\"\");\n setIsProcessing(false);\n setTimeout(() => {\n connection.confirmTransaction(signature, 'processed').then(() => console.log(\"Transaction confirmed successfully!\")).catch(error => console.log(\"Transaction confirmation in background:\", error));\n }, 500);\n } catch (sendError) {\n console.error(\"Transaction signing error:\", sendError);\n setIsProcessing(false);\n throw new Error(`Transaction signing failed: ${sendError.message}`);\n }\n } catch (error) {\n console.error(\"Payment error:\", error);\n setError(`Payment issue: ${error.message}. If you've been charged, please check back in a minute.`);\n } finally {\n setIsProcessing(false);\n }\n };\n const downloadImage = () => {\n const link = document.createElement('a');\n link.download = `${tokenName.toLowerCase()}_pnl_flex.png`;\n link.href = imageUrl;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n setError(\"Download started! Check your downloads folder.\");\n };\n useEffect(() => {\n if (cardRef.current) {\n generateImage();\n }\n }, [tokenName, initialInvestment, initialCurrency, initialInvestmentUSD, currentProfit, currentCurrency, currentProfitUSD]);\n return

PNL Flex Card Settings

\n \n

\n Token Name\n setTokenName(e.target.value)} className=\"w-full px-4 py-2 bg-gray-800/50 rounded-lg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500\" placeholder=\"e.g. RAMZAN\" />\n

\n \n

\n Initial Investment\n

\n setInitialInvestment(e.target.value)} className=\"w-full px-4 py-2 bg-gray-800/50 rounded-l-lg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500\" placeholder=\"e.g. 3.0\" />\n \n

\n \n

\n Initial Investment (USD)\n setInitialInvestmentUSD(e.target.value)} className=\"w-full px-4 py-2 bg-gray-800/50 rounded-lg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500\" placeholder=\"e.g. 430.0964\" />\n

\n \n

\n Current Profit\n

\n setCurrentProfit(e.target.value)} className=\"w-full px-4 py-2 bg-gray-800/50 rounded-l-lg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500\" placeholder=\"e.g. 79.6577\" />\n \n

\n \n

\n Current Profit (USD)\n setCurrentProfitUSD(e.target.value)} className=\"w-full px-4 py-2 bg-gray-800/50 rounded-lg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500\" placeholder=\"e.g. 11420.1699\" />\n

\n \n {error &&

\n \n

{error}

}\n \n

\n \n \n {imageUrl && \n {isProcessing ? <>\n

\n Processing...\n : <>\n \n Download (0.015 SOL)\n }\n }\n

\n \n

Live Preview

\n {imageUrl && $\"PNL$ }\n

\n\n {showPopup &&

\n \n

Your PNL Flex Card

\n \n

\n $\"PNL$ \n

\n \n

Share your PNL Flex with friends to show off your gains!

\n \n

}\n

;\n}\nconst AppWithWallet = () => {\n const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];\n const endpoint = 'https://rpc.dev.fun/6c5efdb2989c08814b28';\n return \n \n \n

\n PNL Flex Factory\n

\n Create stunning glassmorphic PNL cards to flex your crypto gains\n

\n \n

\n \n \n

\n \n \n ;\n};\nexport default AppWithWallet;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"react-dom\":\"18.2.0\"}}","token",{"_18":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":-5,"_89":41,"_90":41,"_69":70},"PNL FLEX ","symbol","PNL","price",0.00000495,"marketcap",4530.24843233,"image","https://pump.mypinata.cloud/ipfs/bafybeig4f7lgnupmoejizmeqppy3cxh52opy7itz6jojywwwuhpnexusxm?img-width=256&img-dpr=2","website","https://dev.fun/p/6c5efdb2989c08814b28","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[95,99,101,103,105,107,109,111,113,115,117,119,121,123,125,127],{"_96":97,"_98":58},"day","2025-05-17","runCount",{"_96":100,"_98":58},"2025-05-18",{"_96":102,"_98":58},"2025-05-19",{"_96":104,"_98":58},"2025-05-20",{"_96":106,"_98":58},"2025-05-21",{"_96":108,"_98":58},"2025-05-22",{"_96":110,"_98":58},"2025-05-23",{"_96":112,"_98":58},"2025-05-24",{"_96":114,"_98":58},"2025-05-25",{"_96":116,"_98":58},"2025-05-26",{"_96":118,"_98":58},"2025-05-27",{"_96":120,"_98":58},"2025-05-28",{"_96":122,"_98":58},"2025-05-29",{"_96":124,"_98":58},"2025-05-30",{"_96":120,"_98":126},15,{"_96":122,"_98":128},5,"snapshot","ogImage","https://cdn.dev.fun/og/image/6c5efdb2989c08814b28/a7eb3c16.webp","commitDetail","actionData","errors"]