🚀 Generate HMAC-SHA256 signatures for Unlimit API endpoints with interactive step-by-step visualization! 🚀
🎮 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature
🖼️ Screenshot placeholder: Main application interface showing the signature generator form
🎬 GIF placeholder: Animated demonstration of the signature generation flow
📱 Screenshots placeholder: Mobile and tablet views
- 🎭 Brutalist Design - Bold, functional aesthetic that makes crypto feel approachable
- 🌈 Colorful Step Indicators - Each step has its own vibrant color theme
- 📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile
- ⚡ Real-time Updates - See your signature generation process in real-time
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 🔑 INPUT │───▶│ 🔧 PATH │───▶│ ➕ CONCAT │───▶│ 🔐 HMAC │───▶│ ✅ RESULT │
│ Collection │ │ Construction│ │ Data │ │ SHA-256 │ │ Signature │
└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
- Step 1: 🔑 Input Collection - Gather method, path, and secret key
- Step 2: 🔧 Path Construction - Substitute parameters in API paths
- Step 3: ➕ Data Concatenation - Combine HTTP method + final path
- Step 4: 🔐 HMAC-SHA256 - Generate cryptographic hash
- Step 5: ✅ Result - Display final hex-encoded signature
- 🔒 Secret Key Protection - Masked input with validation
- ✅ Input Validation - Real-time validation with helpful error messages
- 🛡️ Error Boundaries - Graceful error handling and recovery
- 🔍 Parameter Validation - Ensure all required path parameters are provided
- 📋 One-Click Copy - Copy signatures to clipboard instantly
- 🎯 API Endpoint Support - Pre-configured for Unlimit API endpoints
- 🔄 Live Updates - Watch the signature generation process happen
- 📚 Educational - Learn how HMAC-SHA256 signatures work
- ⚡ Performance Optimized - React.memo, useCallback, useMemo optimizations
- 🔧 Modular Architecture - Clean, maintainable component structure
- 📱 Modern Stack - React 18, TypeScript, Vite, TailwindCSS
- 🎨 Accessible Design - WCAG compliant interface
Make sure you have these installed:
- 📦 Node.js
>=18.0.0 - 📦 npm
>=8.0.0
# 📥 Clone the repository
git clone https://github.com/india3Eth/UnlimitCryptoSignatureGenerator.git
# 📁 Navigate to project directory
cd UnlimitCryptoSignatureGenerator
# 📦 Install dependencies
npm install
# 🚀 Start development server
npm run dev
# 🎉 Open http://localhost:5173 in your browser!# 🔨 Create production build
npm run build
# 👀 Preview production build
npm run preview
# 🧹 Lint code
npm run lintsrc/
├── 🎨 components/
│ ├── 🔐 signature/ # Signature generation components
│ │ ├── Header.tsx # App header with branding
│ │ ├── SecretInput.tsx # Secure secret key input
│ │ ├── ApiTypeSelector.tsx# API type selection
│ │ ├── EndpointSelector.tsx# Endpoint dropdown
│ │ ├── EndpointDetails.tsx# Selected endpoint info
│ │ ├── PathParameterInputs.tsx# Dynamic parameter inputs
│ │ ├── GenerateButton.tsx # Signature generation trigger
│ │ ├── SignatureDisplay.tsx# Result display with copy
│ │ ├── SignatureFlowGraph.tsx# Visual flow diagram
│ │ ├── FlowStep.tsx # Individual flow step
│ │ └── FlowConnector.tsx # Arrow connectors
│ ├── 🛡️ common/ # Shared components
│ │ └── ErrorBoundary.tsx # Error handling
│ └── 🎛️ ui/ # Base UI components
├── 🔧 hooks/ # Custom React hooks
│ └── useSignatureGenerator.ts# Main signature logic
├── 📊 data/ # Static data
│ └── apiEndpoints.ts # API endpoint definitions
├── 🔐 services/ # Business logic
│ └── signatureService.ts # HMAC-SHA256 generation
├── 📝 types/ # TypeScript definitions
│ └── api.ts # API-related types
└── 🛠️ utils/ # Utility functions
└── validation.ts # Input validation
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ User │───▶│ React │───▶│ Crypto-JS │───▶│ Display │
│ Input │ │ Hooks │ │ HMAC │ │ Result │
└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
▲ │ │ │
│ ▼ ▼ ▼
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
└────────────│ Validation │ │ Signature │ │ Clipboard │
│ Service │ │ Service │ │ Copy │
└─────────────┘ └─────────────┘ └─────────────┘
| Technology | Purpose | Version |
|---|---|---|
| ⚛️ React | UI Framework | ^18.3.1 |
| 📘 TypeScript | Type Safety | ~5.6.2 |
| ⚡ Vite | Build Tool | ^6.0.5 |
| 🎨 TailwindCSS | Styling | ^3.4.1 |
| 🔐 Crypto-JS | HMAC Generation | ^4.2.0 |
| 🎛️ Radix UI | Accessible Components | ^2.0.0 |
| 🎭 Lucide React | Icons | ^0.474.0 |
-
🔑 Enter Your Secret Key
Enter your API secret key in the password field ⚠️ Keep this secure! It's used for cryptographic signing -
📡 Select API Type
- 🟢 Normal API - Standard Unlimit API endpoints
- 🟣 White Label API - White label specific endpoints
-
🎯 Choose API Endpoint
Select from pre-configured endpoints like: • Onramp - Config • Onramp - Orders • White Label - Create KYC customer • And many more... -
⚙️ Fill Path Parameters (if required)
Some endpoints need parameters like: • orderId: "12345" • customerId: "cust_abc123" • transactionId: "txn_xyz789" -
🚀 Generate Signature
Click the "GENERATE SIGNATURE" button and watch the step-by-step visualization show how your signature is created! -
📋 Copy & Use
Copy the generated signature to your clipboard and use it in your API requests
Once you have your signature, use it in your API requests:
const signature = "a1b2c3d4e5f6..."; // Generated signature
const response = await fetch('https://api.unlimit.com/onramp/v1/orders', {
method: 'GET',
headers: {
'X-Signature': signature,
'Content-Type': 'application/json'
}
});Edit src/data/apiEndpoints.ts to add new endpoints:
export const apiEndpoints: ApiEndpoint[] = [
// ... existing endpoints
{
name: "Custom - My Endpoint",
path: "/api/v1/custom/{id}",
method: "POST",
pathParams: ["id"],
type: "normal",
}
];Modify colors in the flow steps by editing SignatureFlowGraph.tsx:
const steps = [
{
title: "My Step",
bgColor: "#YOUR_COLOR", // Custom hex color
// ... other properties
}
];| Command | Description |
|---|---|
npm run dev |
🚀 Start development server |
npm run build |
🏗️ Build for production |
npm run preview |
👀 Preview production build |
npm run lint |
🧹 Lint code with ESLint |
Test with these example values:
🔑 Secret: "test_secret_key_123"
📡 API Type: "Normal API"
🎯 Endpoint: "Onramp - Order Status by ID"
📝 orderId: "order_12345"
Expected Method + Path: "GET/onramp/v1/orders/order_12345"
-
Flow Not Updating?
- Check browser console for errors
- Verify all required parameters are filled
- Ensure secret key meets validation requirements
-
Signature Generation Fails?
- Verify internet connection
- Check that all path parameters are provided
- Ensure secret key is not empty
-
Build Issues?
- Run
npm run lintto check for code issues - Verify all TypeScript types are correct
- Check for missing dependencies
- Run
We love contributions! 🎉 Here's how to get started:
-
🍴 Fork the Repository
# Click the "Fork" button on GitHub -
📥 Clone Your Fork
git clone https://github.com/YOUR_USERNAME/UnlimitCryptoSignatureGenerator.git cd UnlimitCryptoSignatureGenerator -
🌿 Create Feature Branch
git checkout -b feature/amazing-new-feature
-
💻 Make Your Changes
# Write awesome code # Add tests if applicable # Update documentation
-
✅ Test Your Changes
npm run build # Ensure it builds npm run lint # Check code style
-
📤 Commit & Push
git add . git commit -m "feat: Add amazing new feature" git push origin feature/amazing-new-feature
-
🔄 Create Pull Request
Open a PR on GitHub with: • Clear description of changes • Screenshots if UI changes • Test instructions
type(scope): description
feat: Add new feature
fix: Fix bug in component
docs: Update README
style: Format code
refactor: Improve code structure
test: Add tests
chore: Update dependencies
- 🔧 New API Endpoints - Add more Unlimit API endpoints
- 🎨 UI Improvements - Enhance the visual design
- 📱 Mobile Experience - Improve mobile responsiveness
- 🧪 Testing - Add unit and integration tests
- 📚 Documentation - Improve guides and examples
- 🌐 Internationalization - Add multi-language support
- ⚡ Performance - Optimize load times and animations
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License - Feel free to use, modify, and distribute! 🎉
- 🎨 Design Inspiration - Brutalist web design movement
- 🔐 Crypto-JS - For reliable HMAC-SHA256 implementation
- ⚛️ React Team - For the amazing framework
- 🎛️ Radix UI - For accessible component primitives
- 🌟 Unlimit - For the comprehensive API ecosystem
- 📖 Documentation - Check this README first
- 🐛 Bug Reports - Open an issue
- 💡 Feature Requests - Request a feature
- 💬 Discussions - Join the conversation
- 📧 Email: rutvijpatel414@gmail.com
- 🐙 GitHub: @india3Eth
