diff --git a/apps/demo.lasereyes.build/components/App.tsx b/apps/demo.lasereyes.build/components/App.tsx index b3811fd..ebd0e15 100644 --- a/apps/demo.lasereyes.build/components/App.tsx +++ b/apps/demo.lasereyes.build/components/App.tsx @@ -74,9 +74,6 @@ const App = ({ setNetwork }: { setNetwork: (n: NetworkType) => void }) => { colors[Math.floor(Math.random() * 5)] ) - const pickRandomColor = () => { - setSelectedColor(colors[Math.floor(Math.random() * 5)]) - } const switchN = () => { try { @@ -110,6 +107,13 @@ const App = ({ setNetwork }: { setNetwork: (n: NetworkType) => void }) => { }) }, []) + + // useEffect(() => { + // if (address) { + // getInscriptions(0, 10).then((response) => setInscriptions(response.list)) + // } + // }, [address]) + useEffect(() => { setSignature('') setUnsignedPsbt(undefined) diff --git a/apps/demo.lasereyes.build/components/NFT.tsx b/apps/demo.lasereyes.build/components/NFT.tsx new file mode 100644 index 0000000..b9a13de --- /dev/null +++ b/apps/demo.lasereyes.build/components/NFT.tsx @@ -0,0 +1,300 @@ +/* eslint-disable */ +import React, { ReactNode, useEffect, useRef, useState } from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { usePathname } from "next/navigation"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { ImNewTab } from "react-icons/im"; +import { cn } from "@/lib/utils"; +import { ContentType } from "@omnisat/lasereyes"; + +const Inscription = ({ + contentUrl, + contentType, + size, + className, + children, +}: { + contentUrl: string; + contentType: ContentType; + size: number; + children?: ReactNode; + className?: string; +}) => { + const pathname = usePathname(); + const canvasRef = useRef(null); + const [svgContent, setSvgContent] = useState(null); + + const getMimeType = (contentType: ContentType) => + contentType.split(";")[0].trim().toLowerCase(); + + const isImageContentType = (contentType: ContentType) => + getMimeType(contentType).startsWith("image/") && + getMimeType(contentType) !== "image/gif" && + getMimeType(contentType) !== "image/svg+xml"; + + const isGifContentType = (contentType: ContentType) => + getMimeType(contentType) === "image/gif"; + + const isSvgContentType = (contentType: ContentType) => + getMimeType(contentType) === "image/svg+xml"; + + const isHtmlContentType = (contentType: ContentType) => + getMimeType(contentType) === "text/html"; + + useEffect(() => { + if ( + isSvgContentType(contentType) + ) { + fetch(contentUrl) + .then((response) => response.text()) + .then((svg) => { + setSvgContent(svg); + }) + .catch((error) => { + console.error("Error fetching SVG content:", error); + }); + } + }, [contentUrl]); + + useEffect(() => { + if ( + contentUrl && + contentType && + isImageContentType(contentType) + ) { + const canvas = canvasRef.current; + if (canvas) { + const ctx = canvas.getContext("2d"); + const img = new window.Image(); + img.src = contentUrl; + img.onload = () => { + const maxCanvasSize = size; + const aspectRatio = img.width / img.height; + + let canvasWidth, canvasHeight; + + if (aspectRatio > 1) { + canvasWidth = maxCanvasSize; + canvasHeight = maxCanvasSize / aspectRatio; + } else if (aspectRatio < 1) { + canvasHeight = maxCanvasSize; + canvasWidth = maxCanvasSize * aspectRatio; + } else { + canvasWidth = maxCanvasSize; + canvasHeight = maxCanvasSize; + } + + canvas.width = canvasWidth; + canvas.height = canvasHeight; + + const roundRect = ( + ctx: CanvasRenderingContext2D, + x: number, + y: number, + width: number, + height: number, + radius: number, + ) => { + if (width < 2 * radius) radius = width / 2; + if (height < 2 * radius) radius = height / 2; + ctx.moveTo(x + radius, y); + ctx.arcTo(x + width, y, x + width, y + height, radius); + ctx.arcTo(x + width, y + height, x, y + height, radius); + ctx.arcTo(x, y + height, x, y, radius); + ctx.arcTo(x, y, x + width, y, radius); + }; + if (ctx) { + ctx.imageSmoothingEnabled = false; // Disable image smoothing for pixelated effect + ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas + + // Create a rounded rectangle path + const radius = 0; // Adjust this value to change the corner radius + ctx.beginPath(); + roundRect(ctx, 0, 0, canvas.width, canvas.height, radius); + ctx.closePath(); + ctx.clip(); // Clip to the rounded rectangle + + // Draw the image within the clipped area + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + } + canvas.style.display = "block"; + }; + } + } + }, [contentUrl, size]); + + let content; + + if ( + contentUrl && + contentType && + isHtmlContentType(contentType) + ) { + content = ( +