1.0.5 • Published 5 months ago

@mcp3/transaction-ui v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

Transaction UI

A React component library for Sui transaction signing and submission.

Features

  • React components for displaying and signing Sui transactions
  • Integration with @mysten/dapp-kit for wallet connections
  • Direct transaction submission to the Sui blockchain
  • Styled with Tailwind CSS and shadcn/ui components
  • TypeScript support

Installation

npm install @mcp3/transaction-ui

Usage

Basic Usage

import { TransactionPage, Providers } from '@mcp3/transaction-ui';
import '@mcp3/transaction-ui/styles.css';

function App() {
  return (
    <Providers>
      <TransactionPage txId="your-transaction-id" />
    </Providers>
  );
}

With React Router

import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';
import { TransactionPage, Providers } from '@mcp3/transaction-ui';
import '@mcp3/transaction-ui/styles.css';

function App() {
  return (
    <Providers>
      <BrowserRouter>
        <Routes>
          <Route path="/sui/tx/:txId" element={<TransactionRoute />} />
        </Routes>
      </BrowserRouter>
    </Providers>
  );
}

function TransactionRoute() {
  const { txId } = useParams<{ txId: string }>();
  return <TransactionPage txId={txId} />;
}

Components

TransactionPage

The main component for displaying and signing transactions.

<TransactionPage txId="your-transaction-id" />

Providers

Provides the necessary context for the transaction components.

<Providers>
  {/* Your components */}
</Providers>

Development

# Install dependencies
npm install

# Start the development server
npm run dev

# Build the library
npm run build:lib

License

MIT