xnohub.com v1.0.0

components/confirmation-history-table.tsx

@@ -84,7 +84,7 @@ export const ConfirmationHistoryTable: React.FC<
           )}
         </Button>
       </div>
-      <div className="overflow-hidden max-h-[75vh] md:max-w-[600px] md:ml-auto justify-end flex">
+      <div className="overflow-hidden max-h-[75vh] md:max-w-[700px] lg:max-w-[800px] md:ml-auto justify-end flex">
         <table className="w-fit bg-transparent border border-transparent text-[14px]">
           <thead className="bg-transparent select-none text-gray-300">
             <tr>

components/donation-image-popover.tsx

@@ -14,8 +14,7 @@ export const DonationImagePopover = () => {
           variant="outline"
           className="bg-transparent w-full md:w-auto max-w-full select-none text-[#209ce9] border-[#209ce9] text-sm md:text-base hover:bg-transparent hover:text-green-400 hover:border-green-400 px-2 py-1 md:px-4 md:py-2 h-auto min-h-[2.5rem] whitespace-normal text-center"
         >
-          Make a small donation
-          <br className="md:hidden" /> and see what happens! 😛 🌎 🚀
+          ☄️➕🦖
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[90vw] md:w-auto bg-transparent p-0 mb-2">
@@ -28,8 +27,9 @@ export const DonationImagePopover = () => {
           <p className="text-center text-[14px] my-3 text-wrap break-words w-3/4">
             nano_1osom16ctb773i6zi5fnepfro7bcmr5yqxb4qnmtzxkmdg88o4x6obmchzna
           </p>
-          <p className="text-center text-sm text-[18px] select-none">
-            Thank you! 🚀 🌔
+          <p className="text-center text-base md:text-[18px] text-green-600 select-none">
+            Summon meteors ☄️, confuse dinos 🦕!<br></br> Rockets? What rockets?
+            🚀
           </p>
           <p className="text-center text-[12px] text-gray-400 mb-1">
             If you sending by mistake, please let me know at &nbsp;

components/falcon9-animation.tsx

@@ -151,15 +151,18 @@ export const Falcon9Animation: React.FC<Falcon9AnimationProps> = ({
         if (distanceFromCenter < maxDistance) {
           let currentSpeed;
           if (distanceFromCenter <= 35) {
+            // Stage 1
             currentSpeed =
               initialSpeed +
-              getRandomizedAcceleration() * (elapsedTime - launchDelay); // No power of two
-          } else if (distanceFromCenter > 35 && distanceFromCenter <= 200) {
+              getRandomizedAcceleration() * (elapsedTime - launchDelay) * 1.5;
+          } else if (distanceFromCenter > 35 && distanceFromCenter <= 75) {
+            // Stage 2
             currentSpeed =
               initialSpeed +
               getRandomizedAcceleration() *
                 Math.pow(elapsedTime - launchDelay, 1.5); // Use power of two for distance > 200
           } else {
+            // Stage 3
             currentSpeed =
               initialSpeed +
               getRandomizedAcceleration() *

components/rocket-animation-manager.tsx

@@ -21,7 +21,8 @@ interface RocketAnimationManagerProps {
   onRocketCountChange: (count: number) => void;
   isRocketView: boolean;
   activeRocketIndex: number | null;
-  setDistanceFromEarth: (distance: number) => void; // Add this prop
+  setActiveRocketIndex: (index: number | null) => void;
+  setDistanceFromEarth: (distance: number) => void;
 }
 
 export interface RocketAnimationManagerRef {
@@ -39,7 +40,8 @@ const RocketAnimationManager = forwardRef<
       onRocketCountChange,
       isRocketView,
       activeRocketIndex,
-      setDistanceFromEarth // Destructure the prop
+      setActiveRocketIndex,
+      setDistanceFromEarth
     },
     ref
   ) => {
@@ -57,12 +59,32 @@ const RocketAnimationManager = forwardRef<
 
     const removeRocket = useCallback(
       (id: string) => {
-        setRockets((prevRockets) =>
-          prevRockets.filter((rocket) => rocket.id !== id)
-        );
+        setRockets((prevRockets) => {
+          const index = prevRockets.findIndex((rocket) => rocket.id === id);
+          if (index === -1) return prevRockets;
+
+          const newRockets = prevRockets.filter((_, i) => i !== index);
+
+          // Update activeRocketIndex if necessary
+          if (activeRocketIndex !== null) {
+            if (index === activeRocketIndex) {
+              // If the removed rocket was the active one, move to the last rocket in the array
+              if (newRockets.length > 0) {
+                setActiveRocketIndex(newRockets.length - 1);
+              } else {
+                setActiveRocketIndex(null);
+              }
+            } else if (index < activeRocketIndex) {
+              // If a rocket before the active one was removed, decrement the index
+              setActiveRocketIndex(activeRocketIndex - 1);
+            }
+          }
+
+          return newRockets;
+        });
         onRocketComplete(id);
       },
-      [onRocketComplete]
+      [activeRocketIndex, setActiveRocketIndex, onRocketComplete]
     );
 
     useEffect(() => {
@@ -82,7 +104,7 @@ const RocketAnimationManager = forwardRef<
             onComplete={() => removeRocket(rocket.id)}
             isRocketView={isRocketView && index === activeRocketIndex}
             cameraRef={cameraRef}
-            setDistanceFromEarth={setDistanceFromEarth} // Pass the setter function
+            setDistanceFromEarth={setDistanceFromEarth}
           />
         ))}
       </>

components/three-scene-client-wrapper.tsx

@@ -2,28 +2,28 @@
 
 import React, { useState, useEffect } from 'react';
 import ThreeSceneClient from './three-scene-client';
-import { IRepData } from '@/types/index';
+// import { IRepData } from '@/types/index';
 import { RepsData } from '@/data/defualtMergedRepsData';
 
 const ThreeSceneClientWrapper: React.FC = () => {
-  const [repsInfo, setRepsInfo] = useState<IRepData[]>(RepsData);
+  // const [repsInfo, setRepsInfo] = useState<IRepData[]>(RepsData);
   const [serverDateTime, setServerDateTime] = useState<Date | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  // const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setServerDateTime(new Date());
   }, []);
 
-  if (error) {
-    return <div>Error: {error}</div>;
-  }
+  // if (error) {
+  //   return <div>Error: {error}</div>;
+  // }
 
   if (RepsData.length === 0) {
     return <div className="font-[40px]">Loading data... Ӿ Ӿ Ӿ ...</div>;
   }
 
   return (
-    <ThreeSceneClient repsGeoInfo={repsInfo} serverDateTime={serverDateTime} />
+    <ThreeSceneClient repsGeoInfo={RepsData} serverDateTime={serverDateTime} />
   );
 };
 

components/three-scene-client.tsx

@@ -2,12 +2,7 @@
 
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Canvas } from '@react-three/fiber';
-import {
-  OrbitControls,
-  Stars,
-  PerspectiveCamera,
-  Html
-} from '@react-three/drei';
+import { OrbitControls, Stars, PerspectiveCamera } from '@react-three/drei';
 import * as THREE from 'three';
 import { IRepData } from '@/types/index';
 import ThreeMesh from '@/components/three-mesh';
@@ -18,7 +13,6 @@ import { useConfirmations } from '@/providers/confirmation-provider';
 import { DonationAnimation } from '@/components/donation-animation';
 import { NANO_LIVE_ENV } from '@/constants/nano-live-env';
 import { parseNanoAmount } from '@/lib/parse-nano-amount';
-import { Falcon9Animation } from '@/components/falcon9-animation';
 import { Vector3 } from 'three';
 import { scaleRocketCount } from '@/lib/scale-rocket-count';
 import { Button } from '@/components/ui/button';
@@ -104,7 +98,11 @@ const ThreeSceneClient: React.FC<ThreeSceneClientProps> = ({
       }
 
       if (isSend) {
-        const newRocketCount = scaleRocketCount(amount);
+        const newRocketCount = Math.max(
+          scaleRocketCount(amount),
+          rocketCount === 0 ? 1 : 0
+        );
+
         for (let i = 0; i < newRocketCount; i++) {
           const randomPosition = getRandomPositionOnGlobe();
           rocketManagerRef.current?.addRocket(randomPosition);
@@ -131,6 +129,18 @@ const ThreeSceneClient: React.FC<ThreeSceneClientProps> = ({
     }
   }, [launchQueue, activeRocketIndex]); // Add activeRocketIndex to dependencies
 
+  // New function to reset to Earth view
+  const resetToEarthView = () => {
+    setIsRocketView(false);
+
+    setTimeout(() => {
+      if (cameraRef.current) {
+        cameraRef.current.position.set(0, 0, 5);
+        cameraRef.current.lookAt(new THREE.Vector3(0, 0, 0)); // Look at the center of the Earth
+      }
+    }, 100);
+  };
+
   if (!serverDateTime) {
     return null;
   }
@@ -146,6 +156,17 @@ const ThreeSceneClient: React.FC<ThreeSceneClientProps> = ({
 
       <div className="absolute top-4 right-4 z-10 flex flex-col gap-2">
         <div className="flex flex-row gap-2">
+          {/* New button to reset to Earth view */}
+          {distanceFromEarth > 10 && (
+            <Button
+              onClick={resetToEarthView}
+              variant="outline"
+              size="sm"
+              className="flex select-none items-center gap-2 bg-transparent hover:bg-transparent hover:text-[#209ce9]"
+            >
+              Back to Earth
+            </Button>
+          )}
           <Button
             onClick={toggleRocketView}
             variant="outline"
@@ -224,7 +245,8 @@ const ThreeSceneClient: React.FC<ThreeSceneClientProps> = ({
           onRocketCountChange={handleRocketCountChange}
           isRocketView={isRocketView}
           activeRocketIndex={activeRocketIndex}
-          setDistanceFromEarth={setDistanceFromEarth} // Pass the setter function
+          setActiveRocketIndex={setActiveRocketIndex}
+          setDistanceFromEarth={setDistanceFromEarth}
         />
       </Canvas>
 
@@ -248,10 +270,10 @@ const ThreeSceneClient: React.FC<ThreeSceneClientProps> = ({
       </div>
 
       {isRocketView && (
-        <div className="absolute bottom-4 left-4 right-4 md:right-auto z-10 bg-black md:bg-opacity-80 p-2 md:p-3 rounded-lg font-mono text-sm md:text-base text-center shadow-lg border-2 border-[#4A90E2] max-w-full md:max-w-[500px]">
+        <div className="absolute bottom-4 left-4 right-4 md:right-auto z-10 bg-black md:bg-opacity-80 p-2 md:p-3 rounded-lg font-mono text-sm md:text-base text-center shadow-lg border-2 border-[#4A90E2] max-w-full md:max-w-[550px]">
           <div className="flex items-center justify-center mb-1 md:mb-2">
             <span
-              className="text-xl md:text-2xl mr-1 md:mr-2"
+              className="text-lg md:text-xl mr-1 md:mr-2"
               role="img"
               aria-label="Earth"
             >
@@ -263,58 +285,68 @@ const ThreeSceneClient: React.FC<ThreeSceneClientProps> = ({
             </span>
           </div>
 
-          <div className="text-xs md:text-base my-1 md:my-2">
+          <div className="text-sm md:text-base my-1 md:my-2">
             {distanceFromEarth <= 2 && (
               <span className="text-yellow-300">
-                "Fast, feeless, and ready for liftoff! 🚀"
+                &quot;Fast, feeless, green, and ready for liftoff! 🚀&quot;
               </span>
             )}
 
             {distanceFromEarth > 2 && distanceFromEarth <= 5 && (
               <span className="text-green-400">
-                "1 ӾNO = 1 ӾNO, even in space! 💎🙌"
+                &quot;1 ӾNO = 1 ӾNO, even in space! 👩‍🚀 🛸&quot;
               </span>
             )}
 
-            {distanceFromEarth > 5 && distanceFromEarth <= 15 && (
+            {distanceFromEarth > 5 && distanceFromEarth <= 10 && (
               <span className="text-blue-300">
-                "BROCCOLISH 🥦 All the way to the Mars!"
+                &quot;BROCCOLISH 🥦 All the way to the Mars!&quot;
               </span>
             )}
 
-            {distanceFromEarth > 15 && distanceFromEarth <= 25 && (
+            {distanceFromEarth > 10 && distanceFromEarth <= 20 && (
               <span className="text-purple-400">
-                "Nano: Proof-of-work? We left that back on Earth. 🌍✨"
+                &quot;Nano: Proof-of-work? We left that back on Earth 🌍&quot;
               </span>
             )}
 
-            {distanceFromEarth > 25 && distanceFromEarth <= 35 && (
+            {distanceFromEarth > 20 && distanceFromEarth <= 30 && (
               <span className="text-pink-400">
-                "The further we go, the smaller our fees get. Oh wait... 😎"
+                &quot;The further we go, the smaller our fees get. Oh wait...
+                Nano is feeless 😎&quot;
               </span>
             )}
 
-            {distanceFromEarth > 35 && distanceFromEarth <= 200 && (
+            {distanceFromEarth > 30 && distanceFromEarth <= 100 && (
               <span className="text-orange-400">
-                "Warp speed initiated. Nano's block lattice is unstoppable! 🌀"
+                &quot;🚨 Nano speed initiated 🚨. Nano&apos;s block lattice is
+                unstoppable! 🌀&quot;
               </span>
             )}
 
             {distanceFromEarth > 200 && distanceFromEarth <= 350 && (
               <span className="text-pink-400">
-                "Not even cosmic inflation can inflate Nano's supply! 💥"
+                &quot;Not even cosmic inflation can inflate Nano&apos;s supply!
+                💥&quot;
               </span>
             )}
 
             {distanceFromEarth > 350 && distanceFromEarth <= 500 && (
               <span className="text-[#4A90E2] font-bold">
-                "Zero fees across the universe, Nano is boundless. 💫🌌"
+                &quot;Zero fees across the universe, Nano is boundless. 💫
+                🌌&quot;
+              </span>
+            )}
+
+            {distanceFromEarth > 500 && distanceFromEarth <= 600 && (
+              <span className="text-green-400 font-bold animate-pulse">
+                &quot;Nano IS Nano 🗿&quot;
               </span>
             )}
 
-            {distanceFromEarth > 500 && (
-              <span className="text-red-500 font-bold text-base md:text-lg animate-pulse">
-                "Nano IS Nano 🗿"
+            {distanceFromEarth > 600 && (
+              <span className="text-red-500 font-bold animate-pulse">
+                &quot;USER-35077: What if ... falls to 2k 💀&quot;
               </span>
             )}
           </div>

constants/nano-live-env.ts

@@ -5,8 +5,8 @@ export const NANO_LIVE_ENV = {
   // wsUrl: 'wss://node.somenano.com/websocket',
   // wsUrl: 'wss://rainstorm.city/websocket',
   // wsUrl: 'wss://bitrequest.app:8010/websocket',
-  // wsUrl: 'wss://nanoslo.0x.no/websocket',
-  wsUrl: 'ws://localhost:8080/websocket',
+  wsUrl: 'wss://nanoslo.0x.no/websocket',
+  // wsUrl: 'ws://localhost:8080/websocket',
 
   // wsUrl: 'wss://node.somenano.com/repeater',
   rpcUrl: 'https://nanoproxy.numsu.dev/proxy',

lib/scale-rocket-count.ts

@@ -8,8 +8,10 @@ export function scaleRocketCount(amount: number): number {
   } else if (amount >= 10000) {
     return 6;
   } else if (amount >= 1000) {
+    return 4;
+  } else if (amount >= 100) {
     return 2;
-  } else if (amount >= 0) {
+  } else if (amount >= 10) {
     return 1;
   } else {
     return 0;