Add Banano Network Support 🍌

[dalindev]

Add Banano Network Support 🍌

Overview

This PR adds support for visualizing the Banano cryptocurrency network alongside the existing Nano network visualization. Users can now access the Banano visualization at the /banano route.

Key Changes

• Added a new /banano route with dedicated visualization for the Banano network
• Implemented Banano-specific websocket client and data handling
• Created Banano-themed components and styling
• Added support for Banano donations with custom animation
• Extended environment variable configuration to support both networks

New Files

• banano/hooks/use-banano-websocket.tsx: Custom websocket hook for Banano network
• banano/components/donation-animation.tsx: Banano-specific donation animation
• banano/components/three-scene-client.tsx: Customized 3D scene for Banano
• banano/lib/get-style-by-banano-amount.ts: Styling utilities for Banano amounts
• Added Banano-specific 3D models and assets in public/banano/

Environment Variables

Added new environment variables for Banano support:

# Banano
NEXT_PUBLIC_BANANO_WS_URL=[Banano Websocket URL]
NEXT_PUBLIC_BANANO_DONATION_ACCOUNT=[Banano Donation Account]

How to Test

1. Set up the environment variables in .env.local
2. Run the development server: pnpm dev
3. Visit / for Nano visualization
4. Visit /banano for Banano visualization
5. Test websocket connections for both networks
6. Verify donation functionality for both cryptocurrencies

Notes

• The Banano visualization maintains the same core functionality as Nano but with Banano-specific theming and data handling
• Both networks can run simultaneously without interference
• Sample data mode works for both networks when NEXT_PUBLIC_USE_SAMPLE_DATA=true

DEMO

Screen.Recording.2024-10-28.at.1.53.27.AM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
xnohub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 28, 2024 6:21am