crypsey-shared-ui v5.9.27
Crypsey Shared UI Components
A modern React component library providing reusable UI components for web applications, with a focus on cryptocurrency payment and transaction management interfaces.
Installation
npm install crypsey-shared-ui-lib
Quick Start
import { Header, CryptoPayment } from "crypsey-shared-ui-lib";
function App() {
return (
<>
<Header title="My Crypto App" />
<CryptoPayment onPaymentComplete={(details) => console.log(details)} />
</>
);
}
Available Components
Header
A responsive header component for consistent navigation across your application.
import { Header } from "crypsey-shared-ui-lib";
<Header
title="Dashboard"
showNavigation={true}
userProfile={{
name: "John Doe",
avatar: "path/to/avatar.jpg",
}}
/>;
CryptoPayment
A comprehensive payment component that handles cryptocurrency transactions.
import { CryptoPayment } from "crypsey-shared-ui-lib";
<CryptoPayment
amount={100}
currency="USD"
onPaymentComplete={(transaction) => {
console.log("Payment completed:", transaction);
}}
/>;
EmptyState
A component for displaying placeholder content when no data is available.
import { EmptyState } from "crypsey-shared-ui-lib";
<EmptyState
title="No Transactions"
description="You haven't made any transactions yet."
icon="wallet"
/>;
HeroContent
A hero section component for featuring important content or calls-to-action.
import { HeroContent } from "crypsey-shared-ui-lib";
<HeroContent
title="Welcome to Crypto Payments"
subtitle="Fast, secure, and seamless cryptocurrency transactions"
ctaText="Get Started"
onCtaClick={() => {}}
/>;
RecentActivity
Displays a list of recent cryptocurrency transactions or activities.
import { RecentActivity } from "crypsey-shared-ui-lib";
<RecentActivity
transactions={transactions}
onTransactionClick={(tx) => {
console.log("Transaction clicked:", tx);
}}
/>;
UserTransactions
A detailed view of user transaction history with filtering and sorting capabilities.
import { UserTransactions } from "crypsey-shared-ui-lib";
<UserTransactions
userId="user123"
filters={{
dateRange: "last30Days",
status: "completed",
}}
/>;
CryptoPaymentSelector
A component for selecting cryptocurrency payment methods and amounts.
import { CryptoPaymentSelector } from "crypsey-shared-ui-lib";
<CryptoPaymentSelector
availableCurrencies={["BTC", "ETH", "USDC"]}
onCurrencySelect={(currency) => {
console.log("Selected currency:", currency);
}}
/>;
ConfirmTransaction
A modal component for confirming transaction details before proceeding.
import { ConfirmTransaction } from "crypsey-shared-ui-lib";
<ConfirmTransaction
transaction={{
amount: 1.5,
currency: "ETH",
recipient: "0x...",
}}
onConfirm={() => {}}
onCancel={() => {}}
/>;
TransactionModal Component
A React modal component for displaying cryptocurrency transaction details, built with Material-UI and Lucide React icons.
import React, { useState } from "react";
import { TransactionModal } from "./components/TransactionModal";
const MyComponent = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const transactionDetails = {
recipient: "john.doe@example.com",
amountCAD: 100.5,
amountCrypto: 0.0034,
cryptoSymbol: "BTC",
status: "pending",
currency: "CAD",
};
const handleContinue = () => {
// Handle continue to payment logic
console.log("Continuing to payment...");
};
return (
<TransactionModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
transaction={transactionDetails}
onContinue={handleContinue}
/>
);
};
Development
Setup
# Clone the repository
git clone https://github.com/your-username/crypsey-shared-ui-lib.git
# Install dependencies
cd crypsey-shared-ui-lib
npm install
# Run Storybook
npm run storybook
Building
npm run build
Testing
npm test
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Support
For support, please open an issue in the GitHub repository.
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago