@naviprotocol/uikit

ack# @naviprotocol/uikit

NAVI Protocol UI component library for Sui blockchain applications.

Features

• 🔗 Wallet Connection: Connect to various Sui wallets
• 📋 Transaction Preview: Preview and validate transactions before execution
• 🎨 Modern UI: Beautiful, responsive components
• 📱 Mobile Ready: Optimized for mobile and desktop
• 🌐 TypeScript: Full TypeScript support

Installation

pnpm add @naviprotocol/uikit

Usage

Wallet Connect

import { ConnectWalletProvider, ConnectModal } from 'sui-wallets-connect';
import {
  createNetworkConfig,
  SuiClientProvider,
  WalletProvider,
} from "@mysten/dapp-kit";

<ConnectWalletProvider>
  <SuiClientProvider>
    <WalletProvider>
       <ConnectModal trigger={null} open={true} onOpenChange={(isOpen) => {}} />
    </WalletProvider>
  </SuiClientProvider>
</ConnectWalletProvider>

Change theme

:root {
  --navi-connect-modal-background: #191919; // background color
  --navi-connect-modal-text: #0d0d0d; // text color
  --navi-connect-modal-primary-color: #FF782F; // primary color
  --navi-connect-modal-btn-text-color: #000000; // button text color
  --navi-connect-modal-dot-color: #0DC3A4; // dot color
}

Transaction Preview

import { transactionPreviewService } from '@naviprotocol/uikit';

useEffect(() => {
    transactionPreviewService.showTransactionPreview({
      transactionBlock: sampleTransaction.transaction,
      sender: sampleTransaction.sender,

      onConfirm: () => {
        console.log('✅ Transaction confirmed by user')
      },
      onCancel: () => {
        console.log('❌ Transaction cancelled by user')
      }
    })
  }, [])

Main Components

Wallet Connect

• ConnectModal - Wallet connection modal
• ConnectWalletProvider - Context provider
• useConnectWallets - Wallet management hook

Transaction Preview

• TransactionPreview - Transaction preview component
• TransactionPreviewModal - Transaction preview modal
• useTransactionPreview - Transaction preview hook
• transactionPreviewService - Transaction preview service

Development

# Install dependencies
pnpm install

# Start development server
pnpm run start

# Build package
pnpm run build


# Start Storybook
pnpm run storybook

License

MIT