[{"_1":2,"_193":-5,"_194":-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,"_191":-5,"_107":-5,"_192":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":17,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":59,"_65":59,"_66":59,"_67":59,"_68":59,"_69":28,"_70":17,"_71":19,"_72":73,"_74":75,"_76":77,"_78":79,"_98":99,"_151":17,"_152":153,"_107":32,"_109":184,"_185":17,"_186":187},"id","2b758f94da248b063e4d","isMyApp",false,"projectId","9NSVH7Kr5ihGC7RWKjUZmSgkAHKpP1KbzzgzxT8xpump","name","cryptofix","description","Rescue your cryptocanvas experience with our magical wallet connection debugger! This tool maintains all the million-pixel blockchain glory you love while surgically repairing only the wallet connection issues that were keeping you from digital immortality.","brief","Unstick your wallet connection to cryptocanvas without changing a single unnecessary pixel!","isLive","isPublic",true,"tags",[],"cover","https://cdn.dev.fun/snapshot/2b758f94da248b063e4d/54826_1767d619.webp","cdnUrl","https://cdn.dev.fun/app/2b758f94da248b063e4d/54826","createdAt",["D",1744852639069],"updatedAt",["D",1744855722559],"lastCommitId",["B","54826"],"tier",1,"credits",-1,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"f1593394-0e0c-46fc-98c2-0cdcde2d5625","uniqueId","GkY89KuFpt5e8iqHTSD9Z4L8Efh5JLGG4ij8BvN9Q5J3","username","solanaWallet","displayName","GkY...5J3","bio","avatar","/avatar.svg","commitCount",6,"forkCount",0,"likeCount","runsCount",4,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef, useMemo } from 'react';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { useWallet, useConnection } from \"@solana/wallet-adapter-react\";\nimport { DevfunWalletAdapter } from \"@devfunlabs/wallet-adapter-devfun\";\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport { PublicKey, Transaction, TransactionInstruction } from \"@solana/web3.js\";\nimport { TOKEN_PROGRAM_ID, getAssociatedTokenAddress, createTransferInstruction, createAssociatedTokenAccountInstruction } from \"@solana/spl-token\";\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nimport { StateClient } from '@devfunlabs/state-client';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { io } from 'socket.io-client';\nconst socket = io('wss://ws.dev.fun/app-2b758f94da248b063e4d');\nconst client = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '2b758f94da248b063e4d'\n});\nconst JPEG_TOKEN_ADDRESS = \"9NSVH7Kr5ihGC7RWKjUZmSgkAHKpP1KbzzgzxT8xpump\";\nconst PIXEL_COST = 100000;\nconst TREASURY_WALLET = 'GkY89KuFpt5e8iqHTSD9Z4L8Efh5JLGG4ij8BvN9Q5J3';\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/2b758f94da248b063e4d';\n const wallets = useMemo(() => [new DevfunWalletAdapter(), new PhantomWalletAdapter(), new SolflareWalletAdapter()], []);\n return \n \n \n \n \n \n ;\n};\nfunction useCanvas() {\n const [pixels, setPixels] = useState({});\n const [totalPixelsSold, setTotalPixelsSold] = useState(0);\n const [selectedPixel, setSelectedPixel] = useState(null);\n const [loading, setLoading] = useState(true);\n const [hoveredPixel, setHoveredPixel] = useState(null);\n const [zoomedIn, setZoomedIn] = useState(false);\n const [zoomPosition, setZoomPosition] = useState({\n x: 0,\n y: 0\n });\n const [recentTransactions, setRecentTransactions] = useState([]);\n const updatePixelOnGrid = (x, y, color, link, message, owner) => {\n const pixelKey = `${x},${y}`;\n const newPixel = {\n id: Date.now().toString(),\n x,\n y,\n color,\n link,\n message,\n owner,\n timestamp: Date.now(),\n available: false\n };\n const updatedPixels = {\n ...pixels,\n [pixelKey]: newPixel\n };\n setPixels(updatedPixels);\n setTotalPixelsSold(totalPixelsSold + 1);\n const newTransaction = {\n id: newPixel.id,\n owner: owner.substring(0, 6) + '...' + owner.substring(owner.length - 4),\n timestamp: Date.now(),\n x,\n y,\n color\n };\n setRecentTransactions(prev => [newTransaction, ...prev].slice(0, 10));\n socket.emit('pixel_purchased', newPixel);\n return newPixel;\n };\n const loadPixels = async () => {\n try {\n setLoading(true);\n const pixelData = await client.getEntities('pixels');\n const pixelMap = {};\n let count = 0;\n if (pixelData && pixelData.length) {\n pixelData.forEach(pixel => {\n const key = `${pixel.x},${pixel.y}`;\n pixelMap[key] = pixel;\n count++;\n });\n }\n setPixels(pixelMap);\n setTotalPixelsSold(count);\n setLoading(false);\n } catch (error) {\n console.error(\"Error loading pixels:\", error);\n setLoading(false);\n }\n };\n const buyPixel = async (x, y, color, link, message, owner) => {\n try {\n setLoading(true);\n const pixelId = Date.now().toString();\n const newPixel = {\n id: pixelId,\n x,\n y,\n color,\n link,\n message,\n owner,\n timestamp: Date.now(),\n available: false\n };\n const pixelKey = `${x},${y}`;\n const updatedPixels = {\n ...pixels,\n [pixelKey]: newPixel\n };\n setPixels(updatedPixels);\n await client.createEntity('pixels', newPixel);\n setTotalPixelsSold(totalPixelsSold + 1);\n const newTransaction = {\n id: pixelId,\n owner: owner.substring(0, 6) + '...' + owner.substring(owner.length - 4),\n timestamp: Date.now(),\n x,\n y,\n color\n };\n setRecentTransactions(prev => [newTransaction, ...prev].slice(0, 10));\n socket.emit('pixel_purchased', newPixel);\n setLoading(false);\n return true;\n } catch (error) {\n console.error(\"Error buying pixel:\", error);\n setLoading(false);\n return false;\n }\n };\n useEffect(() => {\n loadPixels();\n socket.on('pixel_purchased', newPixel => {\n const pixelKey = `${newPixel.x},${newPixel.y}`;\n setPixels(prev => ({\n ...prev,\n [pixelKey]: newPixel\n }));\n setTotalPixelsSold(prev => prev + 1);\n const newTransaction = {\n id: newPixel.id,\n owner: newPixel.owner.substring(0, 6) + '...' + newPixel.owner.substring(newPixel.owner.length - 4),\n timestamp: Date.now(),\n x: newPixel.x,\n y: newPixel.y,\n color: newPixel.color\n };\n setRecentTransactions(prev => [newTransaction, ...prev].slice(0, 10));\n });\n return () => {\n socket.off('pixel_purchased');\n };\n }, []);\n return {\n pixels,\n totalPixelsSold,\n selectedPixel,\n setSelectedPixel,\n buyPixel,\n updatePixelOnGrid,\n loading,\n setLoading,\n hoveredPixel,\n setHoveredPixel,\n zoomedIn,\n setZoomedIn,\n zoomPosition,\n setZoomPosition,\n recentTransactions\n };\n}\nconst Canvas = ({\n canvasRef,\n pixelData,\n onPixelSelect,\n hoveredPixel,\n setHoveredPixel,\n zoomPosition,\n zoomedIn\n}) => {\n const canvasSize = 1000;\n const visibleSize = 500;\n const pixelSize = zoomedIn ? 10 : 5;\n const offsetX = zoomedIn ? Math.max(0, Math.min(zoomPosition.x - visibleSize / 2, canvasSize - visibleSize)) : 0;\n const offsetY = zoomedIn ? Math.max(0, Math.min(zoomPosition.y - visibleSize / 2, canvasSize - visibleSize)) : 0;\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = '#111';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.strokeStyle = '#222';\n ctx.lineWidth = 0.5;\n const drawablePixels = visibleSize / pixelSize;\n for (let i = 0; i <= drawablePixels; i++) {\n ctx.beginPath();\n ctx.moveTo(i * pixelSize, 0);\n ctx.lineTo(i * pixelSize, canvas.height);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(0, i * pixelSize);\n ctx.lineTo(canvas.width, i * pixelSize);\n ctx.stroke();\n }\n Object.values(pixelData).forEach(pixel => {\n const pixelX = pixel.x * pixelSize - offsetX;\n const pixelY = pixel.y * pixelSize - offsetY;\n if (pixelX >= -pixelSize && pixelX <= canvas.width && pixelY >= -pixelSize && pixelY <= canvas.height) {\n if (pixel.available !== true) {\n ctx.fillStyle = pixel.color || '#FF00FF';\n ctx.fillRect((pixel.x - offsetX / pixelSize) * pixelSize, (pixel.y - offsetY / pixelSize) * pixelSize, pixelSize, pixelSize);\n }\n }\n });\n if (hoveredPixel) {\n const {\n x,\n y\n } = hoveredPixel;\n const canvasX = (x - offsetX / pixelSize) * pixelSize;\n const canvasY = (y - offsetY / pixelSize) * pixelSize;\n ctx.shadowColor = '#00FFFF';\n ctx.shadowBlur = 10;\n ctx.strokeStyle = '#00FFFF';\n ctx.lineWidth = 2;\n ctx.strokeRect(canvasX, canvasY, pixelSize, pixelSize);\n ctx.shadowColor = 'transparent';\n ctx.shadowBlur = 0;\n }\n }, [pixelData, hoveredPixel, pixelSize, offsetX, offsetY, canvasRef, zoomPosition, zoomedIn]);\n const handleCanvasClick = e => {\n const canvas = canvasRef.current;\n const rect = canvas.getBoundingClientRect();\n const x = Math.floor((e.clientX - rect.left) / pixelSize) + Math.floor(offsetX / pixelSize);\n const y = Math.floor((e.clientY - rect.top) / pixelSize) + Math.floor(offsetY / pixelSize);\n if (x >= 0 && x < canvasSize / pixelSize && y >= 0 && y < canvasSize / pixelSize) {\n onPixelSelect({\n x,\n y\n });\n }\n };\n const handleMouseMove = e => {\n const canvas = canvasRef.current;\n const rect = canvas.getBoundingClientRect();\n const x = Math.floor((e.clientX - rect.left) / pixelSize) + Math.floor(offsetX / pixelSize);\n const y = Math.floor((e.clientY - rect.top) / pixelSize) + Math.floor(offsetY / pixelSize);\n if (x >= 0 && x < canvasSize / pixelSize && y >= 0 && y < canvasSize / pixelSize) {\n setHoveredPixel({\n x,\n y\n });\n } else {\n setHoveredPixel(null);\n }\n };\n return

Welcome to CryptoCanvas

🚀 About $JPEG Tokens

Connect Your Wallet

Select Your Pixel

Customize & Purchase

Pixel Details

Recent Purchases

Value Projection

Purchase Pixel

Welcome to CryptoCanvas

🚀 About $JPEG Tokens

Connect Your Wallet

Select Your Pixel

Customize & Purchase

Pixel Details

Recent Purchases

Value Projection

Purchase Pixel