Add Starlink Satellites

.env.local.example

@@ -2,6 +2,8 @@
 
 # Public variables
 NEXT_PUBLIC_USE_SAMPLE_DATA=true # Set to true to use sample data for development
+NEXT_PUBLIC_SIMULATION_INTERVAL_MS=1000 # Set to the desired interval in milliseconds
+NEXT_PUBLIC_FRAME_RATE_DISPLAY=true # Set to true to display frame rate
 
 
 # Nano

.vscode/settings.json

@@ -12,5 +12,8 @@
   },
   "editor.quickSuggestions": {
     "strings": true
-  }
+  },
+  "cSpell.words": [
+    "BANANO"
+  ]
 }

README.md

@@ -1,49 +1,114 @@
-# Nano Network Globe Visualization
+# 🌍 Nano Network Explorer - Interactive 3D Globe Visualization
+
+<div align="center">
 
 ## Demo Video
 
+<div style="width: 100%">
 
 https://github.com/user-attachments/assets/85398eb2-74d7-41c8-815d-9c462db9a7f2
 
+</div>
 
+<div style="width: 100%">
 
 https://github.com/user-attachments/assets/fdd6f818-8279-4f0f-9d59-22bf28de70d7
 
+</div>
+
+## Sponsors
+
+<img src="https://benture.io/assets/img/logo.svg" alt="Benture" width="200"/>
+
+[Benture.io](https://benture.io) - A remote job board specializing in AI and tech positions.
+
+</div>
+
+---
+
+## 📖 About This Project
+
+This web application visualizes cryptocurrency networks on an interactive 3D globe. Watch real-time transactions fly across the world with SpaceX-inspired animations. Currently supporting both Nano and Banano networks.
+
+### Features
+- **Real-time Network Visualization**
+  - Live transaction tracking across the globe
+  - Real-time node location mapping
+  - Network activity monitoring
+  - Built-in mock data support for instant testing
+- **Advanced 3D Globe Features**
+  - Dynamic day/night cycle simulation
+  - Realistic moving cloud layers
+  - Interactive 3D globe interface
+- **SpaceX-Inspired Animations**
+  - Falcon Heavy rocket launches
+  - Orbiting Starlink satellites
+  - Multiple camera perspectives:
+    - Free-roaming POV
+    - Rocket chase camera
+    - First-person view from rocket looking back at Earth
+- **Multi-Network Support**
+  - Nano network visualization
+  - Banano network visualization
+  - Easy adaptation for other networks
+- **Highly Customizable**
+  - Configurable transaction arcs (height, speed, duration, length)
+  - Adjustable animation parameters
+  - Flexible network integration
 
+### Network Adaptation
+This visualization can be easily adapted to other networks in two steps:
+1. Update WebSocket connections and data interfaces
+2. Configure node lists and related network logic
 
+Mock data is included out of the box, allowing you to run and test the visualization without any external configuration.
 
-## Overview
+---
 
-Nano Network Globe Visualization is a web application that allows you to visualize the Nano network on a globe. It uses a custom websocket client to connect to the Nano network and receive real-time data. The data is then visualized on a globe using a custom 3D globe library.
+## 💫 Supported Networks
 
-The application now also supports Banano network visualization at the `/banano` route!
+### What is Nano?
 
-## Prerequisites
+[Nano](https://nano.org) is a sustainable digital currency and payment protocol designed to be accessible and lightweight, with a focus on removing inefficiencies present in other cryptocurrencies. Also known as "Nano Currency" or "Nano Crypto", Nano started development in 2014 (originally called RaiBlocks/XRB) and is one of the first Directed Acyclic Graph (DAG) based blockchains, utilizing a unique block-lattice architecture. In January 2018, RaiBlocks was rebranded to Nano to make it more user-friendly and better reflect its fast, efficient nature.
 
-Before running the application, make sure you have pnpm installed. If you don't have pnpm, you can install it using npm:
+#### Key Features and Benefits:
+
+- **Fee-less Transactions**: Nano operates with zero fees for all transactions, making it ideal for microtransactions.
+- **Instant Payments**: Transactions are processed in under 1 second (0.35 seconds on average), providing a seamless user experience.
+- **Energy Efficient**: Nano is eco-friendly, using minimal energy compared to traditional crypto networks.
+- **Hardware-Bound Scalability**: Unlike traditional blockchains that face protocol-level bottlenecks, Nano's performance scales directly with:
+  - Hardware I/O capabilities
+  - Network bandwidth improvements
+  - Database technology advancements
+  - CPU/GPU processing power
+- **Advanced Architecture**: The block-lattice design allows for asynchronous updates, where each account has its own blockchain, enabling parallel processing and eliminating traditional blockchain bottlenecks.
+- **Future-Proof Design**: By being bound only by hardware limitations rather than protocol constraints, Nano naturally becomes faster as technology improves, making it a future-proof solution for digital payments.
+- **Fair Distribution**: Nano was distributed freely through a captcha-based faucet system from 2015 to 2017, ensuring fair access to everyone. No ICO, no pre-mine, and no insider advantages.
+
+### What is Banano?
+
+[Banano](https://banano.cc) is a feeless, instant cryptocurrency forked from Nano in 2018. While maintaining all of Nano's technical benefits, Banano adds a fun, meme-driven approach to cryptocurrency. The project is known for being the #1 contributor to [Folding@Home](https://foldingathome.org/), helping medical research with over 2,500 years of computational work.
+
+---
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+Before running the application, make sure you have pnpm installed:
 ```bash
 npm install -g pnpm
 ```
 
-## Setup
+### Setup
 
-Before running the application, you need to set up your environment variables:
-
-1. Copy the `.env.local.example` file and rename it to `.env.local`:
-2. Open the `.env.local` file and update the variables:
-   - `NEXT_PUBLIC_USE_SAMPLE_DATA`: Set to `true` to use sample data for development, or `false` to use live data.
-
-   For Nano:
-   - `NEXT_PUBLIC_WS_URL`: Set this to the Nano Websocket URL you want to connect to.
-   - `NEXT_PUBLIC_NANO_DONATION_ACCOUNT`: Set this to your Nano donation account address.
-
-   For Banano:
-   - `NEXT_PUBLIC_BANANO_WS_URL`: Set this to the Banano Websocket URL.
-   - `NEXT_PUBLIC_BANANO_DONATION_ACCOUNT`: Set this to your Banano donation account address.
+1. Clone the repository
+2. (Optional) Copy `.env.local.example` to `.env.local` if you want to use live data:
+```env
+# Mock data is included by default - no configuration needed for testing!
+# For live data, configure these:
 
-Example `.env.local` file:
-```
-NEXT_PUBLIC_USE_SAMPLE_DATA=false
+NEXT_PUBLIC_USE_SAMPLE_DATA=false  # Set to true to use mock data
 
 # Nano
 NEXT_PUBLIC_WS_URL=wss://example-nano-node.com/ws
@@ -54,18 +119,64 @@ NEXT_PUBLIC_BANANO_WS_URL=wss://example-banano-node.com/ws
 NEXT_PUBLIC_BANANO_DONATION_ACCOUNT=ban_1youraddress...
 ```
 
-## How to run
+### Quick Start (with mock data)
+```bash
+pnpm install
+pnpm dev  # Mock data works out of the box!
+```
+Visit `/` for Nano visualization or `/banano` for Banano visualization
 
-1. Clone the repository
-2. Run `pnpm install`
-3. Run `pnpm dev`
-4. Visit `/` for Nano visualization or `/banano` for Banano visualization
+### Development with Live Data
+After configuring `.env.local`:
+```bash
+pnpm install
+pnpm dev
+```
 
-## Production
+### Production
+```bash
+pnpm build
+pnpm start
+```
 
-1. Run `pnpm build`
-2. Run `pnpm start`
+---
 
-## License
+## 📜 License & Credits
 
+### License
 This project is licensed under the MIT License. See the LICENSE file for more details.
+
+### 3D Model Credits
+- "SpaceX Falcon Heavy" (https://skfb.ly/o6zpZ) by AllThingsSpace is licensed under Creative Commons Attribution
+- "Starlink Spacex Satellite" (https://skfb.ly/ouZrO) by Malacodart is licensed under Creative Commons Attribution
+
+---
+
+## 📫 Contact
+
+X (Twitter): [@dalinhuang](https://x.com/dalinhuang)
+
+## Social Media Images
+
+The following image assets are required for social media sharing:
+
+- `public/og-image.png`: OpenGraph image (1200x630px)
+  - Format: PNG/JPEG
+  - Max size: 8MB
+  - Used by: Facebook, LinkedIn, Discord
+
+- `public/twitter-card.png`: Twitter card image (1200x600px)
+  - Format: PNG
+  - Max size: 5MB
+  - Used by: Twitter/X
+
+- `public/xno-preview.gif`: Animated preview (800x400px)
+  - Format: GIF
+  - Max size: 5MB
+  - Used as alternative preview
+
+Image requirements:
+- Keep file sizes optimized
+- Include logo and relevant visualization
+- Use clear, high-contrast visuals
+- Test with Twitter Card Validator and Facebook Sharing Debugger

app/banano/layout.tsx

@@ -1,6 +1,50 @@
 export const metadata = {
-  title: 'Banano Network Visualizer',
-  description: 'A 3D visualization of the Banano network'
+  title: 'Banano (BAN) Representative Network Visualization',
+  description:
+    'Interactive 3D visualization of the Banano (BAN) representative network. Explore real-time node distribution, voting weight, and network health of the Banano digital currency ecosystem.',
+  keywords: [
+    'Banano',
+    'BAN',
+    'Banano Digital Currency',
+    'Banano Cryptocurrency',
+    'Banano Network',
+    'Banano Representatives',
+    'BAN Network',
+    'Banano Nodes',
+    'Digital Currency',
+    'Digital Money',
+    'Meme Cryptocurrency',
+    'Feeless Transactions',
+    'Instant Payments',
+    'Fun Cryptocurrency',
+    'Potassium-rich Cryptocurrency',
+    'Monkey Money',
+    'Eco-Friendly Cryptocurrency',
+    'Folding@Home Rewards',
+    'Community Cryptocurrency'
+  ],
+  openGraph: {
+    title: 'Banano (BAN) Network Visualization',
+    description:
+      'Explore the Banano (BAN) representative network in an interactive 3D visualization. View real-time node distribution and voting weight.',
+    type: 'website',
+    locale: 'en_US',
+    images: [
+      {
+        url: 'https://media1.tenor.com/m/nF-Dj_7JpX4AAAAd/memes-meme.gif',
+        width: 640,
+        height: 360,
+        alt: 'Banano Network Visualization'
+      }
+    ]
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Banano (BAN) Network Visualization',
+    description:
+      'Interactive 3D visualization of the Banano (BAN) representative network',
+    images: ['https://media1.tenor.com/m/nF-Dj_7JpX4AAAAd/memes-meme.gif']
+  }
 };
 
 export default function BananoLayout({

app/globals.css

@@ -65,5 +65,16 @@
   }
   body {
     @apply bg-background text-foreground;
+    min-height: 100vh; /* Fallback for older browsers */
+    min-height: 100dvh; /* Dynamic viewport height */
+    max-height: 100vh; /* Fallback for older browsers */
+    max-height: 100dvh; /* Dynamic viewport height */
+    overflow: hidden;
   }
-}
+}
+
+.main-wrapper {
+  height: 100vh; /* Fallback */
+  height: 100dvh; /* Dynamic viewport height */
+  overflow: hidden;
+}

app/layout.tsx

@@ -1,11 +1,69 @@
 import { Analytics } from '@vercel/analytics/react';
+import { Metadata } from 'next';
 
 import '@/app/globals.css';
 
-export const metadata = {
-  title: 'Nano Network Visualizer',
+export const metadata: Metadata = {
+  metadataBase: new URL(
+    process.env.NEXT_PUBLIC_BASE_URL || 'https://your-domain.com'
+  ),
+  title: 'NanoCurrency (XNO) Representative Network Visualization',
   description:
-    'NanoHub.com, A 3D visualization of the Nano network, showing the current state of the network and the nodes that are participating in it.'
+    'Interactive 3D visualization of the NanoCurrency (XNO) representative network. Explore real-time node distribution, voting weight, and network health of the Nano digital currency ecosystem.',
+  keywords: [
+    'NanoCurrency',
+    'XNO',
+    'Nano Digital Currency',
+    'Nano Cryptocurrency',
+    'Nano Network',
+    'Nano Representatives',
+    'XNO Network',
+    'SpaceX',
+    'Starlink',
+    'Falcon Heavy',
+    'Starlink Satellite',
+    'Nano Nodes',
+    'Digital Currency',
+    'Digital Cash',
+    'Digital Money',
+    'Cryptocurrency Visualization',
+    'Blockchain Visualization',
+    'Green Cryptocurrency',
+    'Eco-Friendly Cryptocurrency',
+    'Feeless Transactions',
+    'Instant Payments',
+    'Sustainable Cryptocurrency'
+  ],
+  openGraph: {
+    title: 'NanoCurrency (XNO) Network Visualization',
+    description:
+      'Explore the NanoCurrency (XNO) representative network in an interactive 3D visualization',
+    type: 'website',
+    locale: 'en_US',
+    images: [
+      {
+        url: '/open-graph/xnohub.png',
+        width: 1200,
+        height: 630,
+        alt: 'NanoCurrency Network Visualization'
+      }
+    ]
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'NanoCurrency (XNO) Network Visualization',
+    description:
+      'Interactive 3D visualization of the NanoCurrency (XNO) representative network',
+    creator: '@dalinhuang',
+    images: [
+      {
+        url: '/open-graph/xnohub.png',
+        width: 1200,
+        height: 630,
+        alt: 'NanoCurrency Network Visualization'
+      }
+    ]
+  }
 };
 
 export default async function RootLayout({

banano/components/banano-confirmation-history-table.tsx

@@ -11,7 +11,7 @@ import {
   TooltipTrigger
 } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
-import { BANANO_LIVE_ENV } from '@/banano/constants/banano-live-env';
+import { APP_CONFIG } from '@/constants/config';
 import { getBananoRepName } from '@/banano/lib/get-banano-rep-name';
 import { truncateAddress } from '@/lib/truncate-address';
 import { formatRelativeTime } from '@/lib/format-relative-time';
@@ -115,7 +115,7 @@ export const BananoConfirmationHistoryTable: React.FC<
                 const style = getStyleByBananoAmount(amount);
                 const isDonation =
                   confirmation.message.block.link_as_account ===
-                  BANANO_LIVE_ENV.donationAccount;
+                  APP_CONFIG.donations.banano;
                 const repName = getBananoRepName(
                   confirmation.message.block.representative
                 );