npm - solanapolis - Versions diffs - 1.0.0 - Mend

solanapolis 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/README.md +518 -0
package/bin/solanapolis.js +197 -0
package/convex/_generated/api.d.ts +175 -0
package/convex/_generated/api.js +23 -0
package/convex/_generated/dataModel.d.ts +60 -0
package/convex/_generated/server.d.ts +143 -0
package/convex/_generated/server.js +93 -0
package/convex/agent/conversation.ts +352 -0
package/convex/agent/embeddingsCache.ts +110 -0
package/convex/agent/memory.ts +450 -0
package/convex/agent/schema.ts +53 -0
package/convex/aiChat.ts +54 -0
package/convex/aiTown/agent.ts +382 -0
package/convex/aiTown/agentDescription.ts +27 -0
package/convex/aiTown/agentInputs.ts +155 -0
package/convex/aiTown/agentOperations.ts +178 -0
package/convex/aiTown/conversation.ts +395 -0
package/convex/aiTown/conversationMembership.ts +38 -0
package/convex/aiTown/game.ts +371 -0
package/convex/aiTown/ids.ts +32 -0
package/convex/aiTown/inputHandler.ts +9 -0
package/convex/aiTown/inputs.ts +25 -0
package/convex/aiTown/insertInput.ts +20 -0
package/convex/aiTown/location.ts +32 -0
package/convex/aiTown/main.ts +154 -0
package/convex/aiTown/movement.ts +189 -0
package/convex/aiTown/player.ts +310 -0
package/convex/aiTown/playerDescription.ts +35 -0
package/convex/aiTown/schema.ts +79 -0
package/convex/aiTown/world.ts +65 -0
package/convex/aiTown/worldMap.ts +74 -0
package/convex/chat.ts +79 -0
package/convex/constants.ts +78 -0
package/convex/convex.config.ts +6 -0
package/convex/crons.ts +89 -0
package/convex/engine/abstractGame.ts +199 -0
package/convex/engine/historicalObject.ts +355 -0
package/convex/engine/schema.ts +56 -0
package/convex/http.ts +36 -0
package/convex/init.ts +110 -0
package/convex/messages.ts +53 -0
package/convex/npcCarAgents.ts +415 -0
package/convex/schema.ts +61 -0
package/convex/streaming.ts +23 -0
package/convex/testing.ts +202 -0
package/convex/tsconfig.json +18 -0
package/convex/util/FastIntegerCompression.ts +221 -0
package/convex/util/assertNever.ts +4 -0
package/convex/util/asyncMap.ts +20 -0
package/convex/util/compression.ts +71 -0
package/convex/util/geometry.ts +132 -0
package/convex/util/isSimpleObject.ts +11 -0
package/convex/util/llm.ts +724 -0
package/convex/util/minheap.ts +38 -0
package/convex/util/object.ts +22 -0
package/convex/util/sleep.ts +3 -0
package/convex/util/types.ts +33 -0
package/convex/util/xxhash.ts +228 -0
package/convex/world.ts +257 -0
package/data/animations/campfire.json +45 -0
package/data/animations/gentlesparkle.json +37 -0
package/data/animations/gentlesplash.json +61 -0
package/data/animations/gentlewaterfall.json +61 -0
package/data/animations/windmill.json +78 -0
package/data/characters.ts +121 -0
package/data/convertMap.js +74 -0
package/data/gentle.js +330 -0
package/data/spritesheets/f1.ts +75 -0
package/data/spritesheets/f2.ts +75 -0
package/data/spritesheets/f3.ts +75 -0
package/data/spritesheets/f4.ts +75 -0
package/data/spritesheets/f5.ts +75 -0
package/data/spritesheets/f6.ts +75 -0
package/data/spritesheets/f7.ts +75 -0
package/data/spritesheets/f8.ts +75 -0
package/data/spritesheets/p1.ts +59 -0
package/data/spritesheets/p2.ts +59 -0
package/data/spritesheets/p3.ts +59 -0
package/data/spritesheets/player.ts +59 -0
package/data/spritesheets/types.ts +26 -0
package/eslint.config.mjs +37 -0
package/next.config.ts +7 -0
package/package.json +85 -0
package/postcss.config.mjs +7 -0
package/public/file.svg +1 -0
package/public/globe.svg +1 -0
package/public/helius-icon.svg +84 -0
package/public/helius-logo.svg +85 -0
package/public/next.svg +1 -0
package/public/plane.glb +0 -0
package/public/vercel.svg +1 -0
package/public/window.svg +1 -0
package/scripts/clear-city.ts +74 -0
package/scripts/seed-wallets.ts +185 -0
package/scripts/setup-webhook.ts +73 -0
package/src/app/api/auth/callback/route.ts +6 -0
package/src/app/api/auth/link-wallet/route.ts +6 -0
package/src/app/api/auth/phantom/route.ts +6 -0
package/src/app/api/broadcast-position/route.ts +59 -0
package/src/app/api/leaderboard/route.ts +85 -0
package/src/app/api/network-stats/route.ts +86 -0
package/src/app/api/parcel-reward/route.ts +181 -0
package/src/app/api/queue-status/route.ts +30 -0
package/src/app/api/snapshots/route.ts +37 -0
package/src/app/api/transactions/enhanced/route.ts +57 -0
package/src/app/api/treasury/route.ts +83 -0
package/src/app/api/wallet/[address]/balances/route.ts +124 -0
package/src/app/api/wallet/[address]/identity/route.ts +32 -0
package/src/app/api/wallet/[address]/route.ts +216 -0
package/src/app/api/wallet/[address]/traded-tokens/route.ts +41 -0
package/src/app/api/wallets/route.ts +68 -0
package/src/app/api/webhooks/helius/route.ts +76 -0
package/src/app/auth/callback/page.tsx +29 -0
package/src/app/favicon.ico +0 -0
package/src/app/globals.css +39 -0
package/src/app/layout.tsx +43 -0
package/src/app/page.tsx +16 -0
package/src/components/AITownNPCs.tsx +206 -0
package/src/components/ActivityFeed.tsx +189 -0
package/src/components/AuthPanel.tsx +163 -0
package/src/components/BeachScene.tsx +280 -0
package/src/components/Building.tsx +138 -0
package/src/components/CesiumFlight.tsx +1768 -0
package/src/components/CesiumGlobe.tsx +616 -0
package/src/components/CitizenCard.tsx +442 -0
package/src/components/CitizenCardModal.tsx +153 -0
package/src/components/CityGrid.tsx +313 -0
package/src/components/CityLandmarks.tsx +427 -0
package/src/components/CityScene.tsx +1289 -0
package/src/components/CitySlotsBadge.tsx +68 -0
package/src/components/CockpitHUD.tsx +460 -0
package/src/components/ConvexWrapper.tsx +19 -0
package/src/components/DubaiDistrict.tsx +630 -0
package/src/components/FlightMiniMap.tsx +133 -0
package/src/components/GameChat.tsx +383 -0
package/src/components/GameHUD.tsx +393 -0
package/src/components/Ground.tsx +14 -0
package/src/components/HowItWorksModal.tsx +251 -0
package/src/components/IngestionBanner.tsx +123 -0
package/src/components/InstancedBuildings.tsx +316 -0
package/src/components/InstancedCars.tsx +504 -0
package/src/components/InstancedCityPlanes.tsx +259 -0
package/src/components/InstancedHouses.tsx +246 -0
package/src/components/InstancedLampPosts.tsx +201 -0
package/src/components/InstancedResidentCars.tsx +357 -0
package/src/components/InstancedRoadDashes.tsx +42 -0
package/src/components/InstancedSkyscrapers.tsx +434 -0
package/src/components/InstancedTrees.tsx +67 -0
package/src/components/LeaderboardPanel.tsx +136 -0
package/src/components/MultiplayerPlanes.tsx +128 -0
package/src/components/NetworkStats.tsx +83 -0
package/src/components/NewBuildingSpotlight.tsx +93 -0
package/src/components/ParcelChallengeBanner.tsx +242 -0
package/src/components/ParcelReward.tsx +191 -0
package/src/components/Park.tsx +42 -0
package/src/components/PhantomWrapper.tsx +22 -0
package/src/components/PixelStreamViewer.tsx +335 -0
package/src/components/PlaneMode.tsx +190 -0
package/src/components/PlayerCar.tsx +211 -0
package/src/components/PlayerPlane.tsx +255 -0
package/src/components/ProjectileRenderer.tsx +249 -0
package/src/components/QueueStatusBanner.tsx +86 -0
package/src/components/RealPlayerTags.tsx +82 -0
package/src/components/SceneLighting.tsx +382 -0
package/src/components/SelectionBeam.tsx +59 -0
package/src/components/SwapPanel.tsx +104 -0
package/src/components/SwapParticles.tsx +237 -0
package/src/components/TreasureGate.tsx +505 -0
package/src/components/WalletPanel.tsx +421 -0
package/src/components/WalletSearch.tsx +244 -0
package/src/components/WelcomeOverlay.tsx +135 -0
package/src/components/WindowTooltip.tsx +498 -0
package/src/context/AuthContext.tsx +230 -0
package/src/lib/bot-detection.ts +125 -0
package/src/lib/building-math.ts +136 -0
package/src/lib/building-shader.ts +253 -0
package/src/lib/car-paths.ts +244 -0
package/src/lib/car-system.ts +182 -0
package/src/lib/city-constants.ts +29 -0
package/src/lib/city-slots.ts +35 -0
package/src/lib/city-zoning.ts +64 -0
package/src/lib/collision-map.ts +147 -0
package/src/lib/day-night.ts +252 -0
package/src/lib/export-card.ts +28 -0
package/src/lib/helius-webhook.ts +90 -0
package/src/lib/helius.ts +74 -0
package/src/lib/house-shader.ts +119 -0
package/src/lib/mock-data.ts +56 -0
package/src/lib/multiplayer-manager.ts +329 -0
package/src/lib/plane-physics.ts +66 -0
package/src/lib/player-car.ts +147 -0
package/src/lib/player-plane.ts +200 -0
package/src/lib/projectile-system.ts +272 -0
package/src/lib/skyscraper-types.ts +52 -0
package/src/lib/sound-engine.ts +464 -0
package/src/lib/supabase-admin.ts +9 -0
package/src/lib/supabase.ts +8 -0
package/src/lib/swap-events.ts +70 -0
package/src/middleware.ts +37 -0
package/src/types/phantom.d.ts +16 -0
package/src/types/wallet.ts +20 -0
package/tsconfig.json +34 -0

package/src/app/globals.css ADDED Viewed

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+@keyframes activitySlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 20px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+@keyframes scanLine {
+  0% { top: 0%; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { top: 100%; opacity: 0; }
+}
+@keyframes claimShimmer {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}

package/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Analytics } from "@vercel/analytics/next";
+import { AuthProvider } from "@/context/AuthContext";
+import PhantomWrapper from "@/components/PhantomWrapper";
+import ConvexWrapper from "@/components/ConvexWrapper";
+import "./globals.css";
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+export const metadata: Metadata = {
+  title: "Solanapolis — The Solana City",
+  description: "Solanapolis — A real-time 3D city built on Solana wallets. Drive, fly, battle, and explore with multiplayer combat, beaches, and boats. Powered by Helius.",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="w-full h-full overflow-hidden">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased w-full h-full overflow-hidden bg-[#0a0a12]`}
+      >
+        <PhantomWrapper>
+          <ConvexWrapper>
+            <AuthProvider>{children}</AuthProvider>
+          </ConvexWrapper>
+        </PhantomWrapper>
+        <Analytics />
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+"use client";
+import dynamic from "next/dynamic";
+const CityScene = dynamic(() => import("@/components/CityScene"), {
+  ssr: false,
+  loading: () => (
+    <div className="flex items-center justify-center h-screen bg-[#0a0a12] text-white/40 text-sm">
+      Loading city...
+    </div>
+  ),
+});
+export default function Home() {
+  return <CityScene />;
+}

package/src/components/AITownNPCs.tsx ADDED Viewed

@@ -0,0 +1,206 @@
+"use client";
+import { useRef, useMemo, useEffect } from "react";
+import { useQuery, useMutation } from "convex/react";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+import { api } from "../../convex/_generated/api";
+import { GRID_WORLD } from "../lib/city-constants";
+/**
+ * AITownNPCs — renders AI Town agents as small walking figures in the 3D city.
+ *
+ * AI Town uses a tile-based map (gentle.js: 48×32 tiles).
+ * The 3D city spans GRID_WORLD (572) units centered at origin.
+ * We map tile coordinates → 3D world coordinates so NPCs walk the streets.
+ */
+// AI Town map dimensions (from data/gentle.js)
+const TILE_MAP_W = 48;
+const TILE_MAP_H = 32;
+// Map AI Town tile (x, y) → 3D world (X, Z)
+// Tiles go 0..W-1, 0..H-1. We map to [-GRID_WORLD/2, +GRID_WORLD/2]
+function tileToWorld(tileX: number, tileY: number): [number, number, number] {
+  const x = (tileX / TILE_MAP_W - 0.5) * GRID_WORLD;
+  const z = (tileY / TILE_MAP_H - 0.5) * GRID_WORLD;
+  return [x, 0.6, z]; // Y=0.6 — slightly above street level
+}
+// Deterministic color from name
+function nameColor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = ((h << 5) - h + name.charCodeAt(i)) | 0;
+  return `hsl(${Math.abs(h) % 360}, 70%, 60%)`;
+}
+interface NPCData {
+  id: string;
+  name: string;
+  x: number;
+  y: number;
+  targetX: number;
+  targetY: number;
+  activity?: string;
+  speaking: boolean;
+  color: string;
+}
+export default function AITownNPCs() {
+  // Bail out if Convex isn't configured
+  if (!process.env.NEXT_PUBLIC_CONVEX_URL) return null;
+  return <AITownNPCsInner />;
+}
+function AITownNPCsInner() {
+  const worldStatus = useQuery(api.world.defaultWorldStatus);
+  const worldId = worldStatus?.worldId;
+  const worldState = useQuery(
+    api.world.worldState,
+    worldId ? { worldId } : "skip",
+  );
+  const descriptions = useQuery(
+    api.world.gameDescriptions,
+    worldId ? { worldId } : "skip",
+  );
+  // Send heartbeat to keep world alive
+  const heartbeatMutation = useMutation(api.world.heartbeatWorld);
+  useEffect(() => {
+    if (!worldId) return;
+    heartbeatMutation({ worldId });
+    const interval = setInterval(() => heartbeatMutation({ worldId }), 30_000);
+    return () => clearInterval(interval);
+  }, [worldId, heartbeatMutation]);
+  // Extract NPC data from world state
+  const npcs = useMemo<NPCData[]>(() => {
+    if (!worldState?.world || !descriptions) return [];
+    const world = worldState.world;
+    const descMap = new Map<string, { name: string; character: string }>();
+    for (const pd of descriptions.playerDescriptions) {
+      descMap.set(pd.playerId, { name: pd.name, character: pd.character });
+    }
+    // Find which players are in conversations (speaking)
+    const speakingPlayers = new Set<string>();
+    for (const conv of world.conversations ?? []) {
+      if (conv.isTyping?.playerId) {
+        speakingPlayers.add(conv.isTyping.playerId);
+      }
+      for (const p of conv.participants ?? []) {
+        if (p.status?.kind === "participating") {
+          speakingPlayers.add(p.playerId);
+        }
+      }
+    }
+    return (world.players ?? []).map((p: any) => {
+      const desc = descMap.get(p.id);
+      const name = desc?.name ?? `NPC-${p.id}`;
+      return {
+        id: p.id,
+        name,
+        x: p.position?.x ?? 0,
+        y: p.position?.y ?? 0,
+        targetX: p.pathfinding?.destination?.x ?? p.position?.x ?? 0,
+        targetY: p.pathfinding?.destination?.y ?? p.position?.y ?? 0,
+        activity: p.activity?.description,
+        speaking: speakingPlayers.has(p.id),
+        color: nameColor(name),
+      };
+    });
+  }, [worldState, descriptions]);
+  if (npcs.length === 0) return null;
+  return (
+    <group>
+      {npcs.map((npc) => (
+        <NPCFigure key={npc.id} npc={npc} />
+      ))}
+    </group>
+  );
+}
+/** Smooth-interpolated NPC figure with head + body + name label */
+function NPCFigure({ npc }: { npc: NPCData }) {
+  const groupRef = useRef<THREE.Group>(null);
+  const currentPos = useRef<THREE.Vector3>(
+    new THREE.Vector3(...tileToWorld(npc.x, npc.y)),
+  );
+  const bobPhase = useRef(Math.random() * Math.PI * 2);
+  // Smoothly interpolate position each frame
+  useFrame((_, delta) => {
+    if (!groupRef.current) return;
+    const [tx, ty, tz] = tileToWorld(npc.x, npc.y);
+    const target = new THREE.Vector3(tx, ty, tz);
+    currentPos.current.lerp(target, Math.min(1, delta * 3));
+    groupRef.current.position.copy(currentPos.current);
+    // Walking bob
+    bobPhase.current += delta * 6;
+    const bob = Math.abs(Math.sin(bobPhase.current)) * 0.15;
+    groupRef.current.position.y = currentPos.current.y + bob;
+    // Face movement direction
+    const dx = target.x - groupRef.current.position.x;
+    const dz = target.z - groupRef.current.position.z;
+    if (Math.abs(dx) > 0.01 || Math.abs(dz) > 0.01) {
+      groupRef.current.rotation.y = Math.atan2(dx, dz);
+    }
+  });
+  const bodyColor = useMemo(() => new THREE.Color(npc.color), [npc.color]);
+  return (
+    <group ref={groupRef}>
+      {/* Body — capsule shape */}
+      <mesh position={[0, 0.6, 0]} castShadow>
+        <capsuleGeometry args={[0.3, 0.6, 4, 8]} />
+        <meshStandardMaterial color={bodyColor} roughness={0.6} metalness={0.2} />
+      </mesh>
+      {/* Head */}
+      <mesh position={[0, 1.3, 0]} castShadow>
+        <sphereGeometry args={[0.25, 8, 8]} />
+        <meshStandardMaterial color={bodyColor} roughness={0.5} metalness={0.1} />
+      </mesh>
+      {/* Speaking indicator — glowing ring */}
+      {npc.speaking && (
+        <mesh position={[0, 1.7, 0]} rotation={[Math.PI / 2, 0, 0]}>
+          <torusGeometry args={[0.2, 0.04, 8, 16]} />
+          <meshBasicMaterial color="#fbbf24" transparent opacity={0.8} />
+        </mesh>
+      )}
+      {/* Activity emoji */}
+      {npc.activity && (
+        <Html center position={[0, 2.0, 0]} distanceFactor={18} style={{ pointerEvents: "none" }}>
+          <div className="text-sm select-none">{npc.activity}</div>
+        </Html>
+      )}
+      {/* Name tag */}
+      <Html center position={[0, 1.8, 0]} distanceFactor={16} style={{ pointerEvents: "none" }}>
+        <div className="px-1.5 py-0.5 rounded bg-black/70 border border-white/10 whitespace-nowrap backdrop-blur-sm">
+          <span
+            className="text-[8px] font-bold"
+            style={{ color: npc.color }}
+          >
+            {npc.name}
+          </span>
+          {npc.speaking && (
+            <span className="text-[7px] text-amber-300 ml-1 animate-pulse">💬</span>
+          )}
+        </div>
+      </Html>
+    </group>
+  );
+}

package/src/components/ActivityFeed.tsx ADDED Viewed

@@ -0,0 +1,189 @@
+"use client";
+import { useEffect, useState, useRef } from "react";
+import { PlacedWallet } from "@/types/wallet";
+interface ActivityEvent {
+  id: string;
+  walletAddress: string;
+  signature: string;
+  tokenIn: string | null;
+  tokenOut: string | null;
+  amountSol: number | null;
+  createdAt: string;
+  age: number; // seconds ago
+}
+const MAX_EVENTS = 8;
+const POLL_INTERVAL = 5000;
+// Known token symbols
+const TOKEN_SYMBOLS: Record<string, string> = {
+  So11111111111111111111111111111111: "SOL",
+  EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v: "USDC",
+  Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB: "USDT",
+  DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263: "BONK",
+  JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN: "JUP",
+  mSoLzYCxHdYgdzU16g5QSh3i5K3z3KZK7ytfqcJm7So: "mSOL",
+  DUSTawucrTsGU8hcqRdHDCbuYhCPADMLM2VcCb8VnFnQ: "DUST",
+  "7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs": "ETH",
+};
+function shortenAddress(addr: string): string {
+  return `${addr.slice(0, 4)}…${addr.slice(-4)}`;
+}
+function tokenLabel(mint: string | null): string {
+  if (!mint) return "???";
+  return TOKEN_SYMBOLS[mint] ?? shortenAddress(mint);
+}
+function formatAge(seconds: number): string {
+  if (seconds < 60) return `${seconds}s ago`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  return `${Math.floor(seconds / 3600)}h ago`;
+}
+interface ActivityFeedProps {
+  wallets: PlacedWallet[];
+  onClickAddress?: (address: string) => void;
+}
+export default function ActivityFeed({ wallets, onClickAddress }: ActivityFeedProps) {
+  const [events, setEvents] = useState<ActivityEvent[]>([]);
+  const [visible, setVisible] = useState(true);
+  const tickRef = useRef(0);
+  useEffect(() => {
+    if (wallets.length === 0) return;
+    let cancelled = false;
+    async function fetchLatest() {
+      try {
+        const { createClient } = await import("@/lib/supabase");
+        const supabase = createClient();
+        const { data } = await supabase
+          .from("swap_events")
+          .select("*")
+          .order("created_at", { ascending: false })
+          .limit(MAX_EVENTS);
+        if (cancelled || !data) return;
+        const now = Date.now();
+        const mapped: ActivityEvent[] = data.map((row: Record<string, unknown>) => ({
+          id: `${row.signature}-${row.created_at}`,
+          walletAddress: row.wallet_address as string,
+          signature: row.signature as string,
+          tokenIn: (row.token_in as string) ?? null,
+          tokenOut: (row.token_out as string) ?? null,
+          amountSol: row.amount_sol != null ? Number(row.amount_sol) : null,
+          createdAt: row.created_at as string,
+          age: Math.floor((now - new Date(row.created_at as string).getTime()) / 1000),
+        }));
+        setEvents(mapped);
+      } catch {
+        // silently fail
+      }
+    }
+    fetchLatest();
+    const interval = setInterval(() => {
+      fetchLatest();
+      tickRef.current++;
+    }, POLL_INTERVAL);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [wallets]);
+  // Update ages every second
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setEvents((prev) =>
+        prev.map((e) => ({
+          ...e,
+          age: Math.floor((Date.now() - new Date(e.createdAt).getTime()) / 1000),
+        }))
+      );
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+  if (events.length === 0) return null;
+  return (
+    <div className="absolute top-[8.5rem] sm:top-20 left-3 sm:left-5 z-10 w-72">
+      <button
+        onClick={() => setVisible(!visible)}
+        className="flex items-center gap-2 mb-1.5 px-2.5 py-1 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-full text-xs text-white/50 hover:text-white/70 transition-colors cursor-pointer"
+      >
+        <span
+          className="w-1.5 h-1.5 rounded-full animate-pulse"
+          style={{ backgroundColor: "#22c55e" }}
+        />
+        Live Activity
+        <svg
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          className={`transition-transform ${visible ? "rotate-180" : ""}`}
+        >
+          <path d="M1 3l3 3 3-3" />
+        </svg>
+      </button>
+      {visible && (
+        <div className="bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl overflow-hidden">
+          {events.map((evt, i) => (
+            <button
+              key={evt.id}
+              onClick={() => onClickAddress?.(evt.walletAddress)}
+              className={`w-full text-left px-3 py-2 hover:bg-white/[0.04] transition-colors cursor-pointer ${
+                i < events.length - 1 ? "border-b border-white/[0.04]" : ""
+              }`}
+              style={{
+                animation: `activitySlideIn 0.3s ease-out ${i * 0.05}s both`,
+              }}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-1.5 min-w-0">
+                  <span className="text-xs font-mono text-purple-300/70 shrink-0">
+                    {shortenAddress(evt.walletAddress)}
+                  </span>
+                  <span className="text-[10px] text-white/25">swapped</span>
+                </div>
+                <span className="text-[10px] text-white/20 shrink-0">
+                  {formatAge(evt.age)}
+                </span>
+              </div>
+              <div className="flex items-center gap-1 mt-0.5">
+                <span className="text-[11px] text-red-300/60">{tokenLabel(evt.tokenIn)}</span>
+                <svg width="8" height="6" viewBox="0 0 8 6" fill="none" className="shrink-0 text-white/20">
+                  <path d="M1 3h6M5 1l2 2-2 2" stroke="currentColor" strokeWidth="1" />
+                </svg>
+                <span className="text-[11px] text-green-300/60">{tokenLabel(evt.tokenOut)}</span>
+                {evt.amountSol != null && (
+                  <span className="text-[10px] text-white/20 ml-auto">
+                    {evt.amountSol < 0.01
+                      ? "<0.01"
+                      : evt.amountSol.toFixed(2)}{" "}
+                    SOL
+                  </span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/AuthPanel.tsx ADDED Viewed

@@ -0,0 +1,163 @@
+"use client";
+import { useState } from "react";
+import { useAuth } from "@/context/AuthContext";
+interface AuthPanelProps {
+  onClickAddress?: (address: string) => void;
+}
+export default function AuthPanel({ onClickAddress }: AuthPanelProps) {
+  const { user, profile, loading, connectPhantom, connectX, linkWallet, signOut, phantomAddress, phantomConnected, openPhantomModal } =
+    useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const [connecting, setConnecting] = useState(false);
+  if (loading) return null;
+  const phantomSection = (
+    <div className="flex items-center gap-2">
+      {phantomConnected && phantomAddress ? (
+        <>
+          <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+          <span className="font-mono text-xs text-purple-300/80">
+            {phantomAddress.slice(0, 4)}...{phantomAddress.slice(-4)}
+          </span>
+          <span className="text-white/30 text-xs">✈ Ready to fly</span>
+        </>
+      ) : (
+        <button
+          onClick={openPhantomModal}
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-purple-500/15 hover:bg-purple-500/25 border border-purple-400/20 rounded-xl text-sm text-purple-200 transition-colors cursor-pointer"
+        >
+          <PhantomIcon />
+          <span className="hidden sm:inline">Connect &amp; Fly</span>
+        </button>
+      )}
+    </div>
+  );
+  async function handlePhantom() {
+    setError(null);
+    setConnecting(true);
+    try {
+      await connectPhantom();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to connect");
+    } finally {
+      setConnecting(false);
+    }
+  }
+  async function handleX() {
+    setError(null);
+    try {
+      await connectX();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to connect X");
+    }
+  }
+  async function handleLinkWallet() {
+    setError(null);
+    setConnecting(true);
+    try {
+      await linkWallet();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to link wallet");
+    } finally {
+      setConnecting(false);
+    }
+  }
+  // When not signed in, just show the phantom connect section
+  if (!user) {
+    return (
+      <div className="flex flex-wrap items-center gap-3 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-4 py-2.5">
+        {phantomSection}
+        {error && <p className="text-red-400 text-sm ml-2">{error}</p>}
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-3 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-4 py-2.5">
+      {phantomSection}
+      {profile?.wallet_address && (
+        <div className="flex items-center gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+          <button
+            onClick={() => onClickAddress?.(profile.wallet_address!)}
+            className="hidden sm:inline font-mono text-sm text-purple-300/80 hover:text-purple-200 transition-colors cursor-pointer"
+          >
+            {profile.wallet_address.slice(0, 4)}...
+            {profile.wallet_address.slice(-4)}
+          </button>
+        </div>
+      )}
+      {profile?.x_username && (
+        <div className="flex items-center gap-2">
+          {profile.x_avatar_url && (
+            <img
+              src={profile.x_avatar_url}
+              alt=""
+              className="w-5 h-5 rounded-full"
+            />
+          )}
+          <span className="hidden sm:inline text-sm text-blue-300">@{profile.x_username}</span>
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        {!profile?.wallet_address && (
+          <button
+            onClick={handleLinkWallet}
+            disabled={connecting}
+            className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 bg-purple-500/15 hover:bg-purple-500/25 border border-purple-400/20 rounded-xl text-sm text-purple-200 transition-colors disabled:opacity-50 cursor-pointer"
+          >
+            <PhantomIcon />
+            <span className="hidden sm:inline">{connecting ? "..." : "Link Wallet"}</span>
+          </button>
+        )}
+        {!profile?.x_username && (
+          <button
+            onClick={handleX}
+            className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] rounded-xl text-sm text-white/60 transition-colors cursor-pointer"
+          >
+            <XIcon />
+            <span className="hidden sm:inline">Link X</span>
+          </button>
+        )}
+        <button
+          onClick={signOut}
+          className="px-2 py-1 text-sm text-white/25 hover:text-white/50 transition-colors cursor-pointer"
+        >
+          <span className="hidden sm:inline">Disconnect</span>
+          <span className="sm:hidden">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+          </span>
+        </button>
+      </div>
+      {error && <p className="text-red-400 text-sm ml-2">{error}</p>}
+    </div>
+  );
+}
+function PhantomIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="128" height="128" rx="26" fill="#AB9FF2" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M55.6416 82.1477C50.8744 89.4525 42.8862 98.6966 32.2568 98.6966C27.232 98.6966 22.4004 96.628 22.4004 87.6424C22.4004 64.7584 53.6445 29.3335 82.6339 29.3335C99.1257 29.3335 105.697 40.7755 105.697 53.7689C105.697 70.4471 94.8739 89.5171 84.1156 89.5171C80.7013 89.5171 79.0264 87.6424 79.0264 84.6688C79.0264 83.8931 79.1552 83.0527 79.4129 82.1477C75.7409 88.4182 68.6546 94.2361 62.0192 94.2361C57.1877 94.2361 54.7397 91.1979 54.7397 86.9314C54.7397 85.3799 55.0618 83.7638 55.6416 82.1477ZM80.6133 53.3182C80.6133 57.1044 78.3795 58.9975 75.8806 58.9975C73.3438 58.9975 71.1479 57.1044 71.1479 53.3182C71.1479 49.532 73.3438 47.6389 75.8806 47.6389C78.3795 47.6389 80.6133 49.532 80.6133 53.3182ZM94.8102 53.3184C94.8102 57.1046 92.5763 58.9977 90.0775 58.9977C87.5407 58.9977 85.3447 57.1046 85.3447 53.3184C85.3447 49.5323 87.5407 47.6392 90.0775 47.6392C92.5763 47.6392 94.8102 49.5323 94.8102 53.3184Z" fill="#FFFDF8" />
+    </svg>
+  );
+}
+function XIcon() {
+  return (
+    <svg width="14" height="14" 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>
+  );
+}