Triangles Block Explorer

Modern, fast block explorer for the Triangles (TRI) cryptocurrency blockchain.

Features

• Real-time blockchain data — Latest blocks, transactions, and mempool
• PoS staking info — Network weight, difficulty, expected stake time
• Address lookup — View balances, UTXOs, and transaction history
• Network stats — Peer connections, supply, difficulty
• Dark theme — Black and red color scheme matching Triangles branding
• Server-side rendering — Fast initial page loads with SvelteKit SSR
• Caching & deduplication — Optimized API calls to minimize RPC load

Tech Stack

• Frontend: SvelteKit + TailwindCSS
• API: Express.js REST API (separate repo: triangles-api)
• RPC: Direct connection to trianglesd daemon via JSON-RPC
• Charts: Chart.js for staking statistics

Prerequisites

• Node.js v18+ and npm
• Running trianglesd node with RPC enabled
• trianglesd config requirements:

  server=1
  rpcuser=trianglesrpc
  rpcpassword=<your-secure-password>
  rpcallowip=127.0.0.1
  rpcport=19112
  txindex=1  # Required for full transaction lookup
  

Installation

1. Clone the repository

git clone https://github.com/SamiAhmed7777/triangles-explorer.git
cd triangles-explorer

2. Install dependencies

npm install

3. Configure environment

Create a .env file:

TRIANGLES_API_URL=http://127.0.0.1:3051

This should point to your running triangles-api backend (see triangles-api setup).

4. Build for production

npm run build

5. Run

Development mode:

npm run dev

Production mode:

PORT=3050 node build/index.js

Deployment

Systemd Service

Create /etc/systemd/system/triangles-explorer.service:

[Unit]
Description=Triangles Block Explorer (Frontend)
After=network.target triangles-api.service
Wants=triangles-api.service

[Service]
Type=simple
User=root
WorkingDirectory=/path/to/triangles-explorer
Environment="NODE_ENV=production"
Environment="PORT=3050"
Environment="HOST=0.0.0.0"
Environment="TRIANGLES_API_URL=http://127.0.0.1:3051"
ExecStart=/usr/bin/node build/index.js
Restart=always
RestartSec=5

[Install]
WantedBy=multi-user.target

Enable and start:

sudo systemctl daemon-reload
sudo systemctl enable triangles-explorer.service
sudo systemctl start triangles-explorer.service

Reverse Proxy (Caddy)

Example Caddyfile (/etc/caddy/sites/tri.sami.caddy):

tri.sami {
    tls internal
    reverse_proxy localhost:3050
    log {
        output file /var/log/caddy/tri.sami.log
    }
}

Reload Caddy:

sudo systemctl reload caddy

API Endpoints (via triangles-api)

The frontend fetches data from these REST endpoints:

Endpoint	Description
/rest/chaininfo	Blockchain info (height, supply, difficulty)
/rest/block/:hash	Block by hash
/rest/blockbyheight/:height	Block by height
/rest/tx/:txid	Transaction by ID
/rest/mempool	Unconfirmed transactions
/rest/staking	PoS staking info
/rest/mining	Mining info
/rest/network	Network info (peers, version)
/rest/peers	Connected peers
/rest/address/:addr/*	Address balance, UTXOs, txids

Development

Project Structure

triangles-explorer/
├── src/
│   ├── routes/           # SvelteKit pages
│   │   ├── +layout.svelte      # Header, nav, footer
│   │   ├── +page.svelte        # Homepage (dashboard)
│   │   ├── block/[hash]/       # Block detail page
│   │   ├── tx/[txid]/          # Transaction detail page
│   │   ├── address/[addr]/     # Address page
│   │   ├── blocks/             # Recent blocks
│   │   ├── staking/            # Staking stats
│   │   ├── network/            # Network stats
│   │   └── mempool/            # Mempool viewer
│   ├── lib/
│   │   ├── api.ts              # API client functions
│   │   ├── types.ts            # TypeScript types
│   │   ├── utils.ts            # Formatters (hash, amount, time)
│   │   └── components/         # Reusable components
│   ├── app.css                 # Theme colors
│   └── hooks.server.ts         # Server hooks
├── build/                # Production build (after `npm run build`)
├── package.json
└── svelte.config.js

Theme Colors

Defined in src/app.css:

@theme {
  --color-tri-bg: #000000;          /* Pure black background */
  --color-tri-surface: #1a0000;     /* Dark red surface */
  --color-tri-border: #330000;      /* Darker red borders */
  --color-tri-accent: #dc2626;      /* Red accent (primary) */
  --color-tri-accent-light: #ef4444;/* Lighter red */
  --color-tri-text: #ffffff;        /* White text */
  --color-tri-muted: #999999;       /* Muted gray */
}

Contributing

Contributions welcome! Please:

1. Fork the repo
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see LICENSE file for details.

Links

• 🔗 Live Block Explorer: https://blocks.cryptographic-triangles.org
• Triangles Website: https://cryptographic-triangles.org
• Explorer API: https://github.com/SamiAhmed7777/triangles-api
• Discord: https://discord.gg/triangles
• Internal Access: https://tri.sami (Tailscale)

Acknowledgments

Based on the excellent Mazacoin Explorer codebase.

---

Made with ❤️ for the Triangles community 💎