Crypn - Cryptocurrency Analytics Platform

Crypn is a powerful cryptocurrency analytics platform that provides real-time market data, advanced charting tools, and comprehensive trading insights for the Hyperliquid DEX. Whether you're a seasoned trader or just getting started, Crypn offers the tools you need to make informed decisions in the crypto market.

App Preview

Features

• Real-time Data: Connect to Hyperliquid's WebSocket API for live market data
• Multiple Timeframe Analysis: View charts ranging from 1-minute to monthly timeframes
• Advanced Technical Indicators: Over 30 technical indicators including:
  • MACD, RSI, Bollinger Bands, Stochastic, DMI/ADX
  • Ichimoku Cloud, TD Sequential, Fibonacci levels
  • Advanced pattern recognition (Head & Shoulders, Harmonic Patterns)
  • Liquidity Swings analysis
  • Support & Resistance detection
• Market Overview: View all Hyperliquid assets with current prices, volumes, and funding rates
• Position Tracking: Track your open positions and trade history
• Cross-Vault Analysis: Track and compare multiple vault positions simultaneously
• Consensus signals: Identify potential trading opportunities using multi-indicator analysis

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)

Installation

1. Clone the repository:

git clone https://github.com/heyimsteve/crypn.git
cd crypn

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. The application will open in your browser at http://localhost:3000

Project Structure

crypn/
├── public/              # Static files
├── src/
│   ├── components/      # Reusable UI components
│   ├── pages/           # Page components
│   ├── utils/           # Helper functions
│   ├── App.js           # Main application component
│   ├── index.js         # Application entry point
│   └── TabContext.js    # Context for tab management
├── package.json         # Project dependencies
└── README.md            # Project documentation

Key Components

Data Fetching

The application connects to Hyperliquid's API endpoints to fetch market data:

• fetchChartData.js: Fetches candle data, order book, and recent trades
• indicators.js: Calculates technical indicators from raw price data
• WebSocket connections: Maintains real-time data feeds

Charts and Indicators

All chart components are built using the Lightweight Charts library:

• PriceChart.js: Main price chart with candlesticks
• VolumeChart.js: Volume histogram chart
• MacdChart.js, RsiChart.js, etc.: Individual indicator charts
• ConsensusChart.js: Multi-indicator analysis chart

Dashboard and Trading Views

• Dashboard.js: User or vault position dashboard
• PerpsData.js: Overview of all perpetual contracts
• OpenOrders.js: Track open orders
• TradeHistory.js: View trade history
• Market.js: Live market overview

API Integration

The application integrates with the Hyperliquid API:

REST Endpoints

• https://api.hyperliquid.xyz/info - Used for most data queries
• https://api.hyperliquid.xyz/exchange - Used for trading operations (not implemented in this version)

WebSocket Connections

• wss://api.hyperliquid.xyz/ws - Used for real-time data streaming

Core Utilities

Indicator Calculations

The indicators.js file contains implementations of all technical indicators:

• calculateRSI(): Relative Strength Index calculation
• calculateMACD(): Moving Average Convergence Divergence
• calculateBollingerBands(): Bollinger Bands calculation
• calculateTDSequential(): TD Sequential indicator
• detectHeadAndShoulders(): Pattern recognition algorithms
• calculateConsensusSignals(): Multi-indicator signal generator

Dashboard Analytics

• calculateROE(): Return on Equity calculations
• formatNumber(): Consistent number formatting with appropriate decimals
• getMarketTrend(): Market trend analysis

Multi-Vault Analysis

The application supports tracking multiple vaults simultaneously:

• Compare positions across different vaults
• Consensus view combining all vault positions
• Analyze performance across different strategies

Configuration

The application reads wallet addresses from:

1. URL parameters (e.g., ?wallet=0x123...)
2. User input in the WalletInput component
3. Predefined vault addresses for the vault dashboard

Adding New Indicators

To add a new indicator:

1. Implement the indicator calculation in indicators.js
2. Create a new chart component in the components directory
3. Add the component to the appropriate page (typically CoinDetails.js)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Hyperliquid API for providing the market data
• Lightweight Charts library for chart rendering
• TradingView for chart styling inspiration
• React and Tailwind CSS for the UI framework

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

Contact

Project Link: https://github.com/heyimsteve/crypn