Crypto Trading Widget

A beautiful and modern React widget for cryptocurrency trading with fiat on/off ramp functionality.

Features

• User onboarding with email and KYC verification
• Buy/Sell cryptocurrency with fiat (EUR)
• SEPA Instant payment integration
• Real-time exchange rates and fee calculation
• Modern and responsive UI using Chakra UI
• Self-contained widget that manages its own state and API calls

Installation

npm install @your-org/crypto-trading-sdk

Requirements

This widget requires the following peer dependencies:

{
  "@chakra-ui/react": "^2.8.2",
  "@emotion/react": "^11.11.3",
  "@emotion/styled": "^11.11.0",
  "framer-motion": "^10.18.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Usage

import { TradingWidget } from '@your-org/crypto-trading-sdk'
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      <TradingWidget
        clientId="your-client-id"
        apiKey="your-api-key"
        apiUrl="https://api.cryptotrading.com" // Optional, defaults to this URL
      />
    </ChakraProvider>
  )
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | clientId | string | Yes | Your client ID for authentication | | apiKey | string | Yes | Your API key for authentication | | apiUrl | string | No | Custom API URL (defaults to https://api.cryptotrading.com) |

API Endpoints

The widget expects the following API endpoints to be available:

User Management

GET /users/{clientId}
Response: UserData & { kycVerified: boolean }

POST /users
Body: { clientId: string, email: string }
Response: UserData

POST /users/{clientId}/kyc
Body: UserData
Response: { success: boolean }

GET /users/{clientId}/balance
Response: { amount: number }

GET /users/{clientId}/bank-accounts
Response: BankAccount[]

Crypto

GET /crypto/list
Response: CryptoCurrency[]

POST /trades
Body: {
  clientId: string
  type: 'buy' | 'sell'
  cryptoId: string
  amount: number
  paymentMethod: string
  bankAccountId: string
}
Response: Transaction

Types

interface CryptoCurrency {
  id: string
  name: string
  symbol: string
  currentPrice: number
  change24h: number
}

interface BankAccount {
  id: string
  accountNumber: string
  bankName: string
  accountHolderName: string
  ifscCode: string
}

interface UserData {
  email: string
  fullName: string
  dateOfBirth: string
  address: string
  idType: string
  idNumber: string
}

interface Transaction {
  id: string
  type: 'buy' | 'sell'
  cryptoId: string
  amount: number
  price: number
  timestamp: Date
  paymentMethod?: string
  bankAccount?: BankAccount
}

License

MIT