solanapolis 1.0.0

package/src/components/SceneLighting.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import { useRef, useEffect, useState, useMemo } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { Stars, Sky } from "@react-three/drei";
+import * as THREE from "three";
+import { getDayNightState, CYCLE_DURATION } from "@/lib/day-night";
+
+interface SceneLightingProps {
+  timeRef:     React.MutableRefObject<number>;
+  autoModeRef: React.MutableRefObject<boolean>;
+}
+
+// Sub-component: updates Sky props at ~2fps (plenty for slow day/night cycle)
+function SkyController({ timeRef }: { timeRef: React.MutableRefObject<number> }) {
+  const [params, setParams] = useState<{
+    sunPosition: [number, number, number];
+    turbidity:   number;
+    rayleigh:    number;
+    mieCoefficient:  number;
+    mieDirectionalG: number;
+  }>({
+    sunPosition: [200, 60, 30],
+    turbidity:   4,
+    rayleigh:    2,
+    mieCoefficient:  0.005,
+    mieDirectionalG: 0.8,
+  });
+
+  const lastRef = useRef(0);
+
+  useFrame(() => {
+    const now = performance.now();
+    if (now - lastRef.current < 500) return; // 2fps sky updates
+    lastRef.current = now;
+
+    const s = getDayNightState(timeRef.current);
+    setParams({
+      sunPosition:     [s.sunPosition.x, s.sunPosition.y, s.sunPosition.z],
+      turbidity:       s.turbidity,
+      rayleigh:        s.rayleigh,
+      mieCoefficient:  s.mieCoefficient,
+      mieDirectionalG: s.mieDirectionalG,
+    });
+  });
+
+  return (
+    <Sky
+      distance={4500}
+      sunPosition={params.sunPosition}
+      turbidity={params.turbidity}
+      rayleigh={params.rayleigh}
+      mieCoefficient={params.mieCoefficient}
+      mieDirectionalG={params.mieDirectionalG}
+    />
+  );
+}
+
+// ── Shooting Stars — animated meteor streaks at night ──────────────────────────
+const METEOR_COUNT = 3;
+
+function ShootingStars({ timeRef }: { timeRef: React.MutableRefObject<number> }) {
+  const groupRef = useRef<THREE.Group>(null);
+
+  // Pre-create meteor line geometries
+  const meteors = useMemo(() => {
+    return Array.from({ length: METEOR_COUNT }, () => {
+      const geo = new THREE.BufferGeometry();
+      const positions = new Float32Array(6); // 2 points × 3
+      geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+      const mat = new THREE.LineBasicMaterial({
+        color: new THREE.Color("#ffffff"),
+        transparent: true,
+        opacity: 0,
+        linewidth: 1,
+      });
+      return {
+        geo,
+        mat,
+        // Lifecycle
+        startTime: Math.random() * 10,
+        duration: 1.5 + Math.random() * 2,
+        cooldown: 4 + Math.random() * 8,
+        elapsed: 0,
+        active: false,
+        // Trajectory
+        origin: new THREE.Vector3(),
+        direction: new THREE.Vector3(),
+        tailLength: 30 + Math.random() * 50,
+      };
+    });
+  }, []);
+
+  function resetMeteor(m: typeof meteors[0]) {
+    // Random position in upper hemisphere
+    const theta = Math.random() * Math.PI * 2;
+    const phi = Math.random() * 0.5 + 0.2; // above horizon
+    const r = 500 + Math.random() * 200;
+    m.origin.set(
+      Math.cos(theta) * Math.sin(phi) * r,
+      Math.cos(phi) * r,
+      Math.sin(theta) * Math.sin(phi) * r,
+    );
+    // Downward trajectory with random angle
+    m.direction.set(
+      (Math.random() - 0.5) * 0.6,
+      -0.8 - Math.random() * 0.2,
+      (Math.random() - 0.5) * 0.6,
+    ).normalize();
+    m.tailLength = 30 + Math.random() * 60;
+    m.duration = 0.8 + Math.random() * 1.5;
+    m.cooldown = 3 + Math.random() * 12;
+    m.elapsed = 0;
+    m.active = true;
+  }
+
+  useFrame((_, delta) => {
+    const state = getDayNightState(timeRef.current);
+    const nightFactor = state.starsOpacity;
+
+    for (const m of meteors) {
+      if (!m.active) {
+        m.cooldown -= delta;
+        if (m.cooldown <= 0 && nightFactor > 0.3) {
+          resetMeteor(m);
+        }
+        continue;
+      }
+
+      m.elapsed += delta;
+      const t = m.elapsed / m.duration;
+
+      if (t >= 1) {
+        m.active = false;
+        m.mat.opacity = 0;
+        m.cooldown = 3 + Math.random() * 12;
+        continue;
+      }
+
+      // Fade in/out: quick ramp up, slow fade
+      const fade = t < 0.15 ? t / 0.15 : 1 - Math.pow((t - 0.15) / 0.85, 2);
+      m.mat.opacity = fade * nightFactor * 0.85;
+
+      // Head position
+      const speed = 400;
+      const headX = m.origin.x + m.direction.x * speed * m.elapsed;
+      const headY = m.origin.y + m.direction.y * speed * m.elapsed;
+      const headZ = m.origin.z + m.direction.z * speed * m.elapsed;
+
+      // Tail position
+      const tailX = headX - m.direction.x * m.tailLength;
+      const tailY = headY - m.direction.y * m.tailLength;
+      const tailZ = headZ - m.direction.z * m.tailLength;
+
+      const positions = m.geo.attributes.position as THREE.BufferAttribute;
+      positions.setXYZ(0, tailX, tailY, tailZ);
+      positions.setXYZ(1, headX, headY, headZ);
+      positions.needsUpdate = true;
+
+      // Color: white-hot at head, blue-ish at tail based on speed
+      m.mat.color.setHSL(0.15, 0.1, 0.95);
+    }
+  });
+
+  // Imperatively create THREE.Line objects (avoid JSX <line> SVG type clash)
+  useEffect(() => {
+    const group = groupRef.current;
+    if (!group) return;
+    const lines: THREE.Line[] = [];
+    for (const m of meteors) {
+      const ln = new THREE.Line(m.geo, m.mat);
+      ln.frustumCulled = false;
+      group.add(ln);
+      lines.push(ln);
+    }
+    return () => {
+      for (const ln of lines) group.remove(ln);
+    };
+  }, [meteors]);
+
+  return <group ref={groupRef} />;
+}
+
+// ── City Glow — ambient light haze over the city at night ─────────────────────
+function CityGlow({ timeRef }: { timeRef: React.MutableRefObject<number> }) {
+  const lightRef = useRef<THREE.PointLight>(null);
+  const light2Ref = useRef<THREE.PointLight>(null);
+
+  useFrame(() => {
+    const state = getDayNightState(timeRef.current);
+    const nightFactor = state.starsOpacity;
+
+    // Warm city glow from below — visible at night
+    if (lightRef.current) {
+      lightRef.current.intensity = nightFactor * 1.8;
+      const pulse = Math.sin(performance.now() * 0.0008) * 0.1 + 0.9;
+      lightRef.current.intensity *= pulse;
+    }
+
+    // Cool accent overhead — subtle purple city-reflection-on-clouds feel
+    if (light2Ref.current) {
+      light2Ref.current.intensity = nightFactor * 0.4;
+    }
+  });
+
+  return (
+    <>
+      <pointLight
+        ref={lightRef}
+        position={[0, -10, 0]}
+        color="#ff8844"
+        intensity={0}
+        distance={800}
+        decay={1.5}
+      />
+      <pointLight
+        ref={light2Ref}
+        position={[0, 250, 0]}
+        color="#6366f1"
+        intensity={0}
+        distance={1000}
+        decay={1.0}
+      />
+    </>
+  );
+}
+
+export default function SceneLighting({ timeRef, autoModeRef }: SceneLightingProps) {
+  const { scene }  = useThree();
+  const sceneRef   = useRef(scene);
+  const fogRef     = useRef<THREE.Fog | null>(null);
+  const ambientRef = useRef<THREE.AmbientLight>(null);
+  const sunRef     = useRef<THREE.DirectionalLight>(null);
+  const hemiRef    = useRef<THREE.HemisphereLight>(null);
+  const accentRef  = useRef<THREE.PointLight>(null);
+  const moonRef    = useRef<THREE.DirectionalLight>(null);
+  const starsGroupRef = useRef<THREE.Group>(null);
+
+  // Clear flat background — Sky component renders the sky sphere
+  useEffect(() => {
+    const sceneObj = sceneRef.current;
+    sceneObj.background = null;
+
+    const fog = new THREE.Fog("#0a0a14", 500, 1200);
+    sceneObj.fog = fog;
+    fogRef.current = fog;
+
+    return () => {
+      if (sceneObj.fog === fog) sceneObj.fog = null;
+    };
+  }, []);
+
+  useFrame((_, delta) => {
+    if (autoModeRef.current) {
+      timeRef.current = (timeRef.current + delta / CYCLE_DURATION) % 1;
+    }
+
+    const state = getDayNightState(timeRef.current);
+
+    // ── Fog ────────────────────────────────────────────────────────────────────
+    const fog = fogRef.current;
+    if (fog) {
+      fog.color.copy(state.fogColor);
+      fog.near = state.fogNear;
+      fog.far  = state.fogFar;
+    }
+
+    // ── Lights ────────────────────────────────────────────────────────────────
+    if (ambientRef.current) {
+      ambientRef.current.color.copy(state.ambientColor);
+      ambientRef.current.intensity = state.ambientIntensity;
+    }
+
+    if (sunRef.current) {
+      sunRef.current.color.copy(state.sunColor);
+      sunRef.current.intensity = state.sunIntensity;
+      sunRef.current.position.copy(state.sunPosition);
+    }
+
+    if (hemiRef.current) {
+      hemiRef.current.color.copy(state.hemiSkyColor);
+      hemiRef.current.groundColor.copy(state.hemiGroundColor);
+      hemiRef.current.intensity = state.hemiIntensity;
+    }
+
+    if (accentRef.current) {
+      accentRef.current.color.copy(state.accentColor);
+      accentRef.current.intensity = state.accentIntensity;
+    }
+
+    // Moon — subtle cool fill during night, invisible during day
+    if (moonRef.current) {
+      moonRef.current.intensity = state.starsOpacity * 0.35;
+      moonRef.current.position.set(
+        -state.sunPosition.x * 0.8,
+        Math.abs(state.sunPosition.y) * 0.4 + 80,
+        -state.sunPosition.z,
+      );
+    }
+
+    // ── Stars opacity ─────────────────────────────────────────────────────────
+    if (starsGroupRef.current) {
+      starsGroupRef.current.traverse((child) => {
+        if (child instanceof THREE.Points) {
+          const mat = child.material as THREE.PointsMaterial;
+          mat.transparent = true;
+          mat.opacity     = state.starsOpacity;
+        }
+      });
+    }
+  });
+
+  return (
+    <>
+      {/* Physically-based Preetham atmospheric sky — slow-updated for performance */}
+      <SkyController timeRef={timeRef} />
+
+      {/* Primary sun — key light */}
+      <directionalLight
+        ref={sunRef}
+        position={[50, 100, 20]}
+        intensity={1.2}
+        color="#fffae8"
+        castShadow={false}
+      />
+
+      {/* Ambient fill */}
+      <ambientLight ref={ambientRef} intensity={0.5} color="#dde8ff" />
+
+      {/* Hemisphere sky/ground fill */}
+      <hemisphereLight ref={hemiRef} args={["#80c4e8", "#6a4a28", 0.4]} />
+
+      {/* Atmospheric accent — indigo at night, warm at sunset */}
+      <pointLight
+        ref={accentRef}
+        position={[-30, 60, -30]}
+        intensity={0.6}
+        color="#6366f1"
+        distance={600}
+        decay={1.2}
+      />
+
+      {/* Moon fill — cool blue at night */}
+      <directionalLight
+        ref={moonRef}
+        position={[-180, 120, -30]}
+        intensity={0}
+        color="#c8d8ff"
+      />
+
+      {/* Stars — fade in at dusk, out at dawn */}
+      <group ref={starsGroupRef}>
+        {/* Primary star field — bright nearby stars */}
+        <Stars
+          radius={700}
+          depth={300}
+          count={6000}
+          factor={5.5}
+          saturation={0.35}
+          fade
+          speed={0.5}
+        />
+        {/* Deep star backdrop — subtle dense star dust */}
+        <Stars
+          radius={1200}
+          depth={400}
+          count={3000}
+          factor={3}
+          saturation={0.15}
+          fade
+          speed={0.2}
+        />
+      </group>
+
+      {/* Shooting stars — animated meteor streaks at night */}
+      <ShootingStars timeRef={timeRef} />
+
+      {/* City glow — warm haze from below at night */}
+      <CityGlow timeRef={timeRef} />
+    </>
+  );
+}

package/src/components/SelectionBeam.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+interface SelectionBeamProps {
+  position: [number, number, number];
+  buildingHeight: number;
+}
+
+export default function SelectionBeam({ position, buildingHeight }: SelectionBeamProps) {
+  const beamRef = useRef<THREE.Mesh>(null);
+  const glowRef = useRef<THREE.PointLight>(null);
+
+  useFrame(({ clock }) => {
+    const t = clock.getElapsedTime();
+
+    // Pulsing beam opacity
+    if (beamRef.current) {
+      const mat = beamRef.current.material as THREE.MeshBasicMaterial;
+      mat.opacity = 0.25 + Math.sin(t * 2) * 0.1;
+    }
+
+    // Pulsing glow light
+    if (glowRef.current) {
+      glowRef.current.intensity = 8 + Math.sin(t * 2) * 3;
+    }
+  });
+
+  const beamHeight = 80;
+  const beamY = buildingHeight + beamHeight / 2;
+
+  return (
+    <group position={position}>
+      {/* Vertical beam */}
+      <mesh ref={beamRef} position={[0, beamY - position[1], 0]}>
+        <cylinderGeometry args={[0.15, 0.4, beamHeight, 8]} />
+        <meshBasicMaterial
+          color="#8b5cf6"
+          transparent
+          opacity={0.3}
+          side={THREE.DoubleSide}
+          depthWrite={false}
+        />
+      </mesh>
+
+      {/* Point light glow at top of building */}
+      <pointLight
+        ref={glowRef}
+        position={[0, buildingHeight - position[1] + 2, 0]}
+        color="#8b5cf6"
+        intensity={8}
+        distance={30}
+        decay={2}
+      />
+    </group>
+  );
+}

package/src/components/SwapPanel.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+interface SwapInfo {
+  walletAddress: string;
+  signature: string;
+  tokenIn: string | null;
+  tokenOut: string | null;
+  amountSol: number | null;
+}
+
+interface SwapPanelProps {
+  swap: SwapInfo | null;
+  onClose: () => void;
+}
+
+function shortenAddress(addr: string): string {
+  return `${addr.slice(0, 4)}...${addr.slice(-4)}`;
+}
+
+function formatAmount(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(2)}K`;
+  if (n >= 1) return n.toFixed(4);
+  if (n >= 0.0001) return n.toFixed(6);
+  return n.toExponential(2);
+}
+
+export default function SwapPanel({ swap, onClose }: SwapPanelProps) {
+  if (!swap) return null;
+
+  return (
+    <div className="w-full sm:w-80 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-t-2xl sm:rounded-2xl p-5 text-white">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-xs font-semibold text-white/40 uppercase tracking-wider">
+          Swap
+        </h3>
+        <button
+          onClick={onClose}
+          className="w-6 h-6 flex items-center justify-center rounded-lg text-white/30 hover:text-white hover:bg-white/[0.06] 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>
+      </div>
+
+      {/* Wallet address */}
+      <p className="font-mono text-sm text-purple-300/80 break-all mb-5">
+        {swap.walletAddress}
+      </p>
+
+      {/* Swap direction */}
+      <div className="mb-5 pb-4 border-b border-white/[0.06]">
+        <h4 className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">
+          Direction
+        </h4>
+        <div className="flex items-center gap-3">
+          <div className="flex-1 min-w-0">
+            <div className="text-xs text-white/35 mb-1">Sold</div>
+            <div className="font-mono text-sm text-white/70 truncate">
+              {swap.tokenIn ? shortenAddress(swap.tokenIn) : "Unknown"}
+            </div>
+          </div>
+          <div className="text-white/25 text-lg shrink-0">&rarr;</div>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs text-white/35 mb-1">Bought</div>
+            <div className="font-mono text-sm text-white/70 truncate">
+              {swap.tokenOut ? shortenAddress(swap.tokenOut) : "Unknown"}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Details */}
+      <div className="mb-5 pb-4 border-b border-white/[0.06] space-y-2.5 text-sm">
+        {swap.amountSol != null && (
+          <div className="flex justify-between">
+            <span className="text-white/45">Amount</span>
+            <span className="font-mono text-white/80">{formatAmount(swap.amountSol)} SOL</span>
+          </div>
+        )}
+        <div className="flex justify-between">
+          <span className="text-white/45">Signature</span>
+          <span className="font-mono text-white/60 truncate ml-4 max-w-[160px]">
+            {shortenAddress(swap.signature)}
+          </span>
+        </div>
+      </div>
+
+      {/* Links */}
+      <div className="space-y-2">
+        <a
+          href={`https://orbmarkets.io/tx/${swap.signature}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-between w-full px-3 py-2 bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] rounded-xl text-sm text-white/60 hover:text-white/80 transition-colors"
+        >
+          <span>View on Orb</span>
+          <span className="text-white/30">&rarr;</span>
+        </a>
+      </div>
+    </div>
+  );
+}