5.9.27 • Published 7 months ago

crypsey-shared-ui v5.9.27

Weekly downloads
-
License
-
Repository
-
Last release
7 months ago

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

  1. Fork the repository
  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

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.

5.9.20

7 months ago

5.9.21

7 months ago

5.9.22

7 months ago

5.9.23

7 months ago

5.9.24

7 months ago

5.9.25

7 months ago

5.9.26

7 months ago

5.9.27

7 months ago

5.9.18

7 months ago

5.9.19

7 months ago

5.9.17

9 months ago

5.9.12

9 months ago

5.9.13

9 months ago

5.9.14

9 months ago

5.9.15

9 months ago

5.9.16

9 months ago

5.9.10

9 months ago

5.9.11

9 months ago

5.9.9

9 months ago

5.9.8

9 months ago

5.9.7

9 months ago

5.9.6

9 months ago

5.9.5

10 months ago

5.9.4

10 months ago

5.9.3

10 months ago

5.9.2

10 months ago

5.9.1

10 months ago

5.8.10

10 months ago

5.8.11

10 months ago

5.8.12

10 months ago

5.8.9

10 months ago

5.8.8

10 months ago

5.8.7

10 months ago

5.8.6

10 months ago

5.8.5

10 months ago

5.8.4

10 months ago

5.8.3

10 months ago

5.8.2

10 months ago

5.9.0

10 months ago

5.8.1

10 months ago

5.8.0

10 months ago

5.7.0

10 months ago

5.6.0

10 months ago

5.5.0

10 months ago

5.4.0

10 months ago

5.3.0

10 months ago

5.2.0

10 months ago

5.1.0

10 months ago

5.0.0

10 months ago

3.1.3

10 months ago

3.1.2

10 months ago

3.1.1

10 months ago

3.1.0

10 months ago

3.1.6

10 months ago

3.1.5

10 months ago

3.1.4

10 months ago

4.0.0

10 months ago

5.6.5

10 months ago

5.6.4

10 months ago

5.6.3

10 months ago

5.6.2

10 months ago

5.6.1

10 months ago

3.0.0

10 months ago

2.0.1

10 months ago

2.0.0

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago