solanapolis 1.0.0

package/src/components/CitizenCard.tsx

@@ -0,0 +1,442 @@
+import { forwardRef } from "react";
+import { WalletBuilding } from "@/types/wallet";
+import {
+  floors,
+  getBuildingDimensions,
+  getBuildingColor,
+} from "@/lib/building-math";
+
+interface CitizenCardProps {
+  wallet: WalletBuilding;
+  identityName?: string | null;
+}
+
+function formatAge(days: number): string {
+  if (days < 30) return `${days}d`;
+  if (days < 365) return `${Math.floor(days / 30)}mo`;
+  return `${(days / 365).toFixed(1)}yr`;
+}
+
+function formatDate(days: number): string {
+  const d = new Date(Date.now() - days * 86400 * 1000);
+  return `${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}/${d.getFullYear()}`;
+}
+
+function formatLastActive(blocktime: number | undefined): string {
+  if (!blocktime) return "N/A";
+  const d = new Date(blocktime * 1000);
+  return `${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}/${d.getFullYear()}`;
+}
+
+/** Deterministic class from wallet address */
+function getCitizenClass(address: string): string {
+  let hash = 0;
+  for (let i = 0; i < address.length; i++) {
+    hash = (hash * 31 + address.charCodeAt(i)) | 0;
+  }
+  const classes = ["PIONEER", "TRADER", "BUILDER", "WHALE", "DEGEN", "HODLER", "FOUNDER", "EXPLORER"];
+  return classes[Math.abs(hash) % classes.length];
+}
+
+/** Deterministic license number from address */
+function getLicenseNo(address: string): string {
+  const chars = address.replace(/[^A-Za-z0-9]/g, "").toUpperCase();
+  return `SOL-${chars.slice(0, 3)}-${chars.slice(-4)}`;
+}
+
+const CitizenCard = forwardRef<HTMLDivElement, CitizenCardProps>(
+  function CitizenCard({ wallet, identityName }, ref) {
+    const dims = getBuildingDimensions(wallet);
+    const floorCount = floors(wallet.txnCount);
+    const color = getBuildingColor(dims.height);
+    const citizenClass = getCitizenClass(wallet.address);
+    const licenseNo = getLicenseNo(wallet.address);
+
+    const truncAddr = `${wallet.address.slice(0, 6)}...${wallet.address.slice(-4)}`;
+
+    // Building silhouette dimensions (proportional to actual building)
+    const silHeight = Math.min(90, Math.max(35, floorCount * 0.7));
+    const silWidth = Math.min(50, Math.max(22, dims.width * 18));
+
+    // Car color matches building
+    const carColor = "#E35930";
+
+    return (
+      <div
+        ref={ref}
+        style={{
+          width: 600,
+          height: 360,
+          background: "linear-gradient(145deg, #0d0d1a 0%, #121225 40%, #0a0a18 100%)",
+          fontFamily: "'Geist Sans', ui-sans-serif, system-ui, sans-serif",
+          color: "#ffffff",
+          position: "relative",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          borderRadius: 16,
+        }}
+      >
+        {/* Top stripe — gradient like a real DL */}
+        <div
+          style={{
+            height: 5,
+            background: "linear-gradient(90deg, #E35930 0%, #c94420 40%, #8b5cf6 100%)",
+            width: "100%",
+            flexShrink: 0,
+          }}
+        />
+
+        {/* Header bar */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "10px 24px 6px",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <HeliusIcon />
+            <div>
+              <div
+                style={{
+                  fontSize: 13,
+                  fontWeight: 800,
+                  letterSpacing: "0.08em",
+                  color: "#E35930",
+                  lineHeight: 1,
+                }}
+              >
+                SOLANAPOLIS
+              </div>
+              <div
+                style={{
+                  fontSize: 8,
+                  fontWeight: 600,
+                  letterSpacing: "0.2em",
+                  color: "rgba(255,255,255,0.25)",
+                  textTransform: "uppercase" as const,
+                  marginTop: 1,
+                }}
+              >
+                Citizen Identification Card
+              </div>
+            </div>
+          </div>
+          <div
+            style={{
+              fontSize: 9,
+              fontWeight: 700,
+              letterSpacing: "0.15em",
+              color: "#8b5cf6",
+              textTransform: "uppercase" as const,
+              background: "rgba(139,92,246,0.1)",
+              border: "1px solid rgba(139,92,246,0.2)",
+              borderRadius: 6,
+              padding: "3px 8px",
+            }}
+          >
+            CLASS: {citizenClass}
+          </div>
+        </div>
+
+        {/* Main content */}
+        <div
+          style={{
+            flex: 1,
+            padding: "8px 24px 12px",
+            display: "flex",
+            gap: 20,
+          }}
+        >
+          {/* Left: Photo area — building silhouette + car */}
+          <div
+            style={{
+              width: 120,
+              height: 140,
+              background: "rgba(255,255,255,0.03)",
+              border: "1px solid rgba(255,255,255,0.06)",
+              borderRadius: 10,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              flexShrink: 0,
+              position: "relative",
+              overflow: "hidden",
+            }}
+          >
+            {/* Subtle grid lines like a hologram */}
+            <div style={{
+              position: "absolute",
+              inset: 0,
+              backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(139,92,246,0.04) 11px, rgba(139,92,246,0.04) 12px), repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(139,92,246,0.04) 11px, rgba(139,92,246,0.04) 12px)",
+            }} />
+
+            {/* Building silhouette */}
+            <svg
+              width={silWidth}
+              height={silHeight}
+              viewBox={`0 0 ${silWidth} ${silHeight}`}
+              style={{ marginBottom: 4, position: "relative" }}
+            >
+              <rect
+                x={0}
+                y={0}
+                width={silWidth}
+                height={silHeight}
+                fill={color}
+                rx={1}
+              />
+              {/* Window dots */}
+              {Array.from({ length: Math.min(6, Math.floor(silHeight / 10)) }).map(
+                (_, row) =>
+                  Array.from({ length: Math.min(4, Math.floor(silWidth / 11)) }).map(
+                    (_, col) => (
+                      <rect
+                        key={`${row}-${col}`}
+                        x={5 + col * Math.floor((silWidth - 10) / 4)}
+                        y={5 + row * Math.floor((silHeight - 8) / 6)}
+                        width={3}
+                        height={4}
+                        fill="rgba(255,200,100,0.6)"
+                        rx={0.5}
+                      />
+                    ),
+                  ),
+              )}
+              {/* Antenna */}
+              <rect x={silWidth / 2 - 0.5} y={-6} width={1} height={6} fill={color} />
+              <circle cx={silWidth / 2} cy={-7} r={1.5} fill="#E35930" />
+            </svg>
+
+            {/* Car parked at base */}
+            <svg width="48" height="18" viewBox="0 0 48 18" style={{ marginBottom: 8 }}>
+              {/* Body */}
+              <rect x="4" y="6" width="40" height="8" rx="2" fill={carColor} />
+              {/* Cabin */}
+              <rect x="14" y="2" width="20" height="6" rx="2" fill="#c94420" />
+              {/* Windshield */}
+              <rect x="15" y="3" width="8" height="4" rx="1" fill="rgba(139,92,246,0.3)" />
+              <rect x="25" y="3" width="8" height="4" rx="1" fill="rgba(139,92,246,0.2)" />
+              {/* Wheels */}
+              <circle cx="12" cy="14" r="3" fill="#222" />
+              <circle cx="12" cy="14" r="1.5" fill="#444" />
+              <circle cx="36" cy="14" r="3" fill="#222" />
+              <circle cx="36" cy="14" r="1.5" fill="#444" />
+              {/* Headlights */}
+              <rect x="42" y="8" width="3" height="2" rx="1" fill="rgba(255,200,100,0.8)" />
+              <rect x="3" y="8" width="3" height="2" rx="1" fill="rgba(255,80,80,0.6)" />
+            </svg>
+          </div>
+
+          {/* Right: DL-style info fields */}
+          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 0 }}>
+            {/* Name / Identity */}
+            <div style={{ marginBottom: 8 }}>
+              <DLField label="DLN" value={licenseNo} mono />
+              {identityName && (
+                <div style={{ marginTop: 4 }}>
+                  <DLField label="NAME" value={identityName} />
+                </div>
+              )}
+            </div>
+
+            {/* Address */}
+            <DLField label="WALLET" value={truncAddr} mono />
+
+            {/* Two-column stats like a real DL */}
+            <div style={{ display: "flex", gap: 16, marginTop: 10 }}>
+              <div style={{ flex: 1 }}>
+                <DLField label="ISS" value={formatDate(wallet.walletAgeDays)} />
+                <div style={{ marginTop: 6 }}>
+                  <DLField label="EXP" value="NEVER" accent />
+                </div>
+              </div>
+              <div style={{ flex: 1 }}>
+                <DLField label="HT" value={`${floorCount} floors`} />
+                <div style={{ marginTop: 6 }}>
+                  <DLField label="WT" value={`${dims.width.toFixed(1)} units`} />
+                </div>
+              </div>
+            </div>
+
+            {/* Bottom stats row */}
+            <div
+              style={{
+                display: "flex",
+                gap: 12,
+                marginTop: 10,
+                padding: "8px 10px",
+                background: "rgba(255,255,255,0.02)",
+                border: "1px solid rgba(255,255,255,0.04)",
+                borderRadius: 8,
+              }}
+            >
+              <MiniStat label="TXN" value={wallet.txnCount.toLocaleString()} />
+              <MiniStat label="VOL" value={`${wallet.volumeTraded.toLocaleString()} SOL`} />
+              <MiniStat label="TOKENS" value={String(wallet.uniqueTokensSwapped ?? 0)} />
+              <MiniStat label="AGE" value={formatAge(wallet.walletAgeDays)} />
+            </div>
+          </div>
+        </div>
+
+        {/* Footer — barcode style */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+            padding: "0 24px 12px",
+          }}
+        >
+          {/* Barcode */}
+          <svg width="140" height="24" viewBox="0 0 140 24">
+            {Array.from({ length: 35 }).map((_, i) => {
+              const charCode = wallet.address.charCodeAt(i % wallet.address.length);
+              const w = (charCode % 3) + 1;
+              return (
+                <rect
+                  key={i}
+                  x={i * 4}
+                  y={0}
+                  width={w}
+                  height={24}
+                  fill="rgba(255,255,255,0.15)"
+                />
+              );
+            })}
+          </svg>
+
+          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+            <span
+              style={{
+                fontSize: 9,
+                color: "rgba(255,255,255,0.2)",
+              }}
+            >
+              Last active: {formatLastActive(wallet.latestBlocktime)}
+            </span>
+            <span style={{ fontSize: 9, color: "rgba(255,255,255,0.12)" }}>|</span>
+            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              <span style={{ fontSize: 9, color: "rgba(255,255,255,0.2)" }}>Powered by</span>
+              <HeliusLogo />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+function DLField({ label, value, mono, accent }: { label: string; value: string; mono?: boolean; accent?: boolean }) {
+  return (
+    <div>
+      <div
+        style={{
+          fontSize: 8,
+          fontWeight: 700,
+          letterSpacing: "0.15em",
+          color: "rgba(255,255,255,0.25)",
+          lineHeight: 1,
+          marginBottom: 2,
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          fontFamily: mono
+            ? "'Geist Mono', ui-monospace, 'Cascadia Code', monospace"
+            : "'Geist Sans', ui-sans-serif, system-ui, sans-serif",
+          fontSize: 13,
+          fontWeight: 600,
+          color: accent ? "#E35930" : "rgba(255,255,255,0.75)",
+          lineHeight: 1.2,
+        }}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function MiniStat({ label, value }: { label: string; value: string }) {
+  return (
+    <div style={{ flex: 1 }}>
+      <div
+        style={{
+          fontSize: 7,
+          fontWeight: 700,
+          letterSpacing: "0.12em",
+          color: "rgba(255,255,255,0.2)",
+          marginBottom: 2,
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          fontFamily: "'Geist Mono', ui-monospace, 'Cascadia Code', monospace",
+          fontSize: 11,
+          color: "rgba(255,255,255,0.6)",
+          fontWeight: 500,
+        }}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
+/** Helius sun icon (small) */
+function HeliusIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M74.6 24.7C70 22.8 64.9 21.7 59.5 21.7C54.2 21.7 49.1 22.8 44.4 24.7L58.3 0.7C58.8-0.2 60.2-0.2 60.7 0.7L74.6 24.7Z" fill="#E35930"/>
+      <path d="M40.7 26.5C31.6 31.6 24.7 40.2 22 50.5L11.7 24.3C11.3 23.3 12.2 22.2 13.2 22.4L40.7 26.5Z" fill="#E35930"/>
+      <path d="M29 84.4L1 75.8C-0 75.5-0.3 74.1 0.4 73.4L21.2 54.1C20.9 56.2 20.7 58.3 20.7 60.5C20.7 69.5 23.8 77.8 29 84.4Z" fill="#E35930"/>
+      <path d="M59 99.3L34.4 116C33.5 116.6 32.3 116 32.2 114.9L30 85.6C37 93.8 47.4 99.1 59 99.3Z" fill="#E35930"/>
+      <path d="M89 85.8L86.8 114.9C86.7 116 85.5 116.6 84.6 116L60.1 99.3C71.6 99.1 82 93.9 89 85.8Z" fill="#E35930"/>
+      <path d="M118 75.7L90.2 84.3C95.3 77.7 98.3 69.4 98.3 60.5C98.3 58.3 98.1 56.1 97.8 54L118.6 73.3C119.4 74 119.1 75.4 118 75.7Z" fill="#E35930"/>
+      <path d="M107.4 24.3L97.1 50.6C94.3 40.3 87.5 31.6 78.4 26.6L105.8 22.4C106.9 22.3 107.8 23.3 107.4 24.3Z" fill="#E35930"/>
+    </svg>
+  );
+}
+
+/** Inline Helius logo SVG (icon + wordmark) matching /helius-logo.svg for html-to-image compatibility */
+function HeliusLogo() {
+  return (
+    <svg
+      width="56"
+      height="12"
+      viewBox="0 0 562 118"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M74.6261 24.7253C69.9876 22.7665 64.8892 21.6871 59.531 21.6871C54.1727 21.6871 49.0743 22.7665 44.4358 24.7253L58.3013 0.709587C58.8412 -0.229856 60.2007 -0.229856 60.7406 0.709587L74.6161 24.7253H74.6261Z" fill="#E84125"/>
+      <path d="M40.7468 26.5242C31.6098 31.5812 24.742 40.2161 22.0128 50.54L11.7061 24.2856C11.3063 23.2762 12.156 22.2168 13.2257 22.3767L40.7468 26.5242Z" fill="#E84125"/>
+      <path d="M28.9906 84.4099L0.999611 75.7751C-0.0400563 75.4552 -0.33996 74.126 0.449787 73.3965L21.2431 54.1079C20.9032 56.1767 20.7233 58.3054 20.7233 60.4741C20.7233 69.5088 23.8123 77.8238 28.9906 84.4099Z" fill="#E84125"/>
+      <path d="M58.951 99.2611L34.4089 115.981C33.5091 116.591 32.2895 116.011 32.2096 114.922L30.0203 85.6492C37.018 93.8443 47.3747 99.0812 58.951 99.2511V99.2611Z" fill="#E84125"/>
+      <path d="M88.9513 85.7692L86.772 114.892C86.692 115.971 85.4724 116.561 84.5727 115.951L60.0806 99.2612C71.6269 99.1013 81.9536 93.9043 88.9513 85.7692Z" fill="#E84125"/>
+      <path d="M118.042 75.6851L90.1711 84.28C95.2895 77.7139 98.3385 69.4488 98.3385 60.4741C98.3385 58.2754 98.1486 56.1167 97.7987 54.0179L118.582 73.2965C119.382 74.0361 119.072 75.3653 118.042 75.6751V75.6851Z" fill="#E84125"/>
+      <path d="M107.355 24.3356L97.0588 50.5801C94.3396 40.2662 87.4918 31.6413 78.3848 26.5643L105.836 22.4268C106.906 22.2668 107.755 23.3262 107.355 24.3356Z" fill="#E84125"/>
+      <path d="M59.5307 107.636C53.8026 107.636 49.1641 112.273 49.1641 118H69.9074C69.9074 112.273 65.2689 107.636 59.5407 107.636H59.5307Z" fill="#E84125"/>
+      <path d="M97.4388 90.6563C93.8699 95.1336 94.5997 101.66 99.0782 105.228L112.004 89.0172C107.526 85.4494 100.998 86.1789 97.4288 90.6563H97.4388Z" fill="#E84125"/>
+      <path d="M105.936 50.57C107.206 56.1567 112.774 59.6446 118.352 58.3653L113.733 38.1473C108.145 39.4166 104.656 44.9833 105.936 50.56V50.57Z" fill="#E84125"/>
+      <path d="M80.4942 18.8588C85.6525 21.3473 91.8505 19.1786 94.3397 14.0116L75.6557 5.01697C73.1665 10.1739 75.3358 16.3702 80.5042 18.8588H80.4942Z" fill="#E84125"/>
+      <path d="M38.0978 18.8588C43.2561 16.3702 45.4254 10.1739 42.9362 5.01697L24.2522 14.0116C26.7414 19.1686 32.9394 21.3373 38.0978 18.8488V18.8588Z" fill="#E84125"/>
+      <path d="M13.3958 50.57C14.6654 44.9833 11.1765 39.4266 5.58826 38.1573L0.979736 58.3754C6.56795 59.6446 12.1262 56.1567 13.3958 50.57Z" fill="#E84125"/>
+      <path d="M8.49731 89.0172L21.4332 105.228C25.9117 101.66 26.6415 95.1336 23.0726 90.6563C19.5038 86.1789 12.9759 85.4494 8.49731 89.0172Z" fill="#E84125"/>
+      <path d="M177.773 30.1321V59.8145H212.612V31.8511H228.487V98.4116H212.612V73.9661H177.773V98.4116H161.898V34.4195L177.773 30.1321Z" fill="#E84125"/>
+      <path d="M257.227 84.25H305.792L301.503 98.4016H241.363V31.8411H305.802L301.513 45.9927H257.237V58.0855H298.504V72.2371H257.237V84.25H257.227Z" fill="#E84125"/>
+      <path d="M331.274 31.8411V84.25H378.119L373.83 98.4016H315.399V31.8411H331.274Z" fill="#E84125"/>
+      <path d="M400.861 31.8411V98.4016H384.987V31.8411H400.861Z" fill="#E84125"/>
+      <path d="M467.44 31.8411H483.315V71.9872C483.315 91.3757 467.44 99.8607 446.937 99.8607C426.433 99.8607 411.668 90.7661 411.668 71.9872V34.4195L427.543 30.1321V71.9872C427.543 81.7614 434.061 85.4593 447.706 85.4593C461.352 85.4593 467.44 81.5116 467.44 71.9872V31.8411Z" fill="#E84125"/>
+      <path d="M491.382 52.0891C491.382 41.8851 499.45 31.8411 515.235 31.8411H560.54L556.252 45.9927H515.405C510.516 45.9927 508.107 49.0808 508.107 52.0791C508.107 55.0773 510.596 58.0855 515.405 58.0855H538.397C553.922 58.0855 561.99 68.1195 561.99 78.3335C561.99 88.5474 554.352 98.4016 538.397 98.4016H491.382L495.671 84.25H538.227C543.036 84.25 545.525 81.4217 545.525 78.3335C545.525 75.2453 543.126 72.1571 538.227 72.1571H515.235C499.19 72.1571 491.382 62.1231 491.382 52.0891Z" fill="#E84125"/>
+    </svg>
+  );
+}
+
+export default CitizenCard;

package/src/components/CitizenCardModal.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { WalletBuilding } from "@/types/wallet";
+import CitizenCard from "./CitizenCard";
+import {
+  exportCardAsPng,
+  downloadBlob,
+  copyBlobToClipboard,
+} from "@/lib/export-card";
+
+interface CitizenCardModalProps {
+  wallet: WalletBuilding;
+  identityName?: string | null;
+  onClose: () => void;
+}
+
+export default function CitizenCardModal({
+  wallet,
+  identityName,
+  onClose,
+}: CitizenCardModalProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [xHint, setXHint] = useState(false);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  async function handleDownload() {
+    if (!cardRef.current) return;
+    setLoading(true);
+    try {
+      const blob = await exportCardAsPng(cardRef.current);
+      downloadBlob(blob, `solanapolis-${wallet.address.slice(0, 8)}.png`);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleCopy() {
+    if (!cardRef.current) return;
+    setLoading(true);
+    try {
+      const blob = await exportCardAsPng(cardRef.current);
+      await copyBlobToClipboard(blob);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handlePostOnX() {
+    if (!cardRef.current) return;
+    setLoading(true);
+    try {
+      const blob = await exportCardAsPng(cardRef.current);
+      await copyBlobToClipboard(blob);
+      setXHint(true);
+      setTimeout(() => setXHint(false), 5000);
+      const text = encodeURIComponent(
+        "I'm now a citizen of Solanapolis!\n\n[paste your ID card image here]\n\nhttps://solanapolis.com/"
+      );
+      window.open(
+        `https://x.com/intent/post?text=${text}`,
+        "_blank",
+        "noopener,noreferrer"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative mx-4 flex flex-col items-center gap-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 z-10 w-7 h-7 flex items-center justify-center rounded-full bg-white/10 text-white/50 hover:text-white hover:bg-white/20 transition-colors cursor-pointer"
+        >
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path d="M1 1l8 8M9 1l-8 8" />
+          </svg>
+        </button>
+
+        {/* Card preview */}
+        <div className="rounded-xl overflow-hidden shadow-2xl border border-white/[0.08]">
+          <CitizenCard
+            ref={cardRef}
+            wallet={wallet}
+            identityName={identityName}
+          />
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-3">
+          <button
+            onClick={handleDownload}
+            disabled={loading}
+            className="px-4 py-2 bg-[#E35930]/15 hover:bg-[#E35930]/25 border border-[#E35930]/20 rounded-xl text-sm text-[#E35930] transition-colors disabled:opacity-50 cursor-pointer"
+          >
+            {loading ? "Exporting..." : "Download PNG"}
+          </button>
+          <button
+            onClick={handleCopy}
+            disabled={loading}
+            className="px-4 py-2 bg-white/[0.06] hover:bg-white/[0.1] border border-white/[0.08] rounded-xl text-sm text-white/60 transition-colors disabled:opacity-50 cursor-pointer"
+          >
+            {copied ? "Copied!" : "Copy to Clipboard"}
+          </button>
+          <button
+            onClick={handlePostOnX}
+            disabled={loading}
+            className="px-4 py-2 bg-white/[0.06] hover:bg-white/[0.1] border border-white/[0.08] rounded-xl text-sm text-white/60 transition-colors disabled:opacity-50 cursor-pointer flex items-center gap-1.5"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+            </svg>
+            Post on X
+          </button>
+        </div>
+        {xHint && (
+          <p className="text-xs text-white/40 text-center">
+            Image copied to clipboard — paste it into your tweet
+          </p>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}