@mantle-rwa/react 0.1.0 → 0.1.2

package/src/styles/index.css

@@ -1,197 +1,82 @@
+/**
+ * @mantle-rwa/react - Default Styles
+ * 
+ * Tailwind CSS styles for RWA React components.
+ * Import this file in your application to use default styling.
+ */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Custom component styles */
-.rwa-card {
-    @apply rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800;
-}
-
-.rwa-button {
-    @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
-}
-
-.rwa-button-primary {
-    @apply rwa-button bg-mantle-600 text-white hover:bg-mantle-700 focus:ring-mantle-500;
-}
-
-.rwa-button-secondary {
-    @apply rwa-button border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-mantle-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
-}
-
-.rwa-input {
-    @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:border-mantle-500 focus:outline-none focus:ring-1 focus:ring-mantle-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500;
-}
-
-.rwa-label {
-    @apply block text-sm font-medium text-gray-700 dark:text-gray-200;
-}
-
-/* KYCFlow Component Styles */
-.rwa-kyc-flow {
-    @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm;
-}
-
-.rwa-kyc-flow.dark {
-    @apply border-gray-700 bg-gray-800;
-}
-
-.rwa-kyc-header {
-    @apply text-lg font-semibold text-gray-900 mb-4;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-header {
-    @apply text-white;
-}
-
-.rwa-kyc-error {
-    @apply flex items-center gap-2 mb-4 p-3 bg-red-50 text-red-700 rounded-md border border-red-200;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-error {
-    @apply bg-red-900/20 text-red-300 border-red-800;
-}
-
-.rwa-kyc-error-icon {
-    @apply flex-shrink-0;
-}
-
-.rwa-kyc-provider {
-    @apply flex items-center gap-3 mb-6 p-3 bg-gray-50 rounded-md;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-provider {
-    @apply bg-gray-700/50;
-}
-
-.rwa-kyc-provider-logo {
-    @apply text-2xl;
-}
-
-.rwa-kyc-provider-details {
-    @apply flex flex-col;
-}
-
-.rwa-kyc-provider-name {
-    @apply font-medium text-gray-900;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-provider-name {
-    @apply text-white;
-}
-
-.rwa-kyc-provider-description {
-    @apply text-sm text-gray-500;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-provider-description {
-    @apply text-gray-400;
-}
-
-.rwa-kyc-steps {
-    @apply space-y-3 mb-6;
-}
-
-.rwa-kyc-step {
-    @apply flex items-start gap-3 p-3 rounded-md transition-colors;
-}
-
-.rwa-kyc-step.pending {
-    @apply bg-gray-50;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-step.pending {
-    @apply bg-gray-700/30;
-}
+/* Base component styles */
+@layer components {
 
-.rwa-kyc-step.in_progress {
-    @apply bg-blue-50 border border-blue-200;
-}
+    /* KYC Flow */
+    .rwa-kyc-flow {
+        @apply w-full;
+    }
 
-.rwa-kyc-flow.dark .rwa-kyc-step.in_progress {
-    @apply bg-blue-900/20 border-blue-800;
-}
-
-.rwa-kyc-step.completed {
-    @apply bg-green-50;
-}
+    /* Investor Dashboard */
+    .rwa-investor-dashboard {
+        @apply w-full;
+    }
 
-.rwa-kyc-flow.dark .rwa-kyc-step.completed {
-    @apply bg-green-900/20;
-}
+    /* Token Mint Form */
+    .rwa-token-mint-form {
+        @apply w-full max-w-md;
+    }
 
-.rwa-kyc-step.failed {
-    @apply bg-red-50;
-}
+    /* Yield Calculator */
+    .rwa-yield-calculator {
+        @apply w-full;
+    }
 
-.rwa-kyc-flow.dark .rwa-kyc-step.failed {
-    @apply bg-red-900/20;
-}
+    /* Error Display */
+    .rwa-error-display {
+        @apply w-full;
+    }
 
-.rwa-kyc-step-indicator {
-    @apply flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium;
-}
+    /* Loading Spinner */
+    .rwa-loading-spinner {
+        @apply inline-flex items-center justify-center;
+    }
 
-.rwa-kyc-step.pending .rwa-kyc-step-indicator {
-    @apply bg-gray-200 text-gray-600;
+    /* Connect Wallet Prompt */
+    .rwa-connect-wallet-prompt {
+        @apply w-full;
+    }
 }
 
-.rwa-kyc-flow.dark .rwa-kyc-step.pending .rwa-kyc-step-indicator {
-    @apply bg-gray-600 text-gray-300;
-}
+/* Dark mode support */
+@layer utilities {
 
-.rwa-kyc-step.in_progress .rwa-kyc-step-indicator {
-    @apply bg-blue-500 text-white;
+    .dark .rwa-kyc-flow,
+    .dark .rwa-investor-dashboard,
+    .dark .rwa-token-mint-form,
+    .dark .rwa-yield-calculator {
+        @apply text-gray-100;
+    }
 }
 
-.rwa-kyc-step.completed .rwa-kyc-step-indicator {
-    @apply bg-green-500 text-white;
+/* Custom animations */
+@keyframes rwa-spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.rwa-kyc-step.failed .rwa-kyc-step-indicator {
-    @apply bg-red-500 text-white;
+.rwa-animate-spin {
+    animation: rwa-spin 1s linear infinite;
 }
 
-.rwa-kyc-step-content {
-    @apply flex flex-col;
-}
-
-.rwa-kyc-step-label {
-    @apply font-medium text-gray-900;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-step-label {
-    @apply text-white;
-}
-
-.rwa-kyc-step-description {
-    @apply text-sm text-gray-500 mt-0.5;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-step-description {
-    @apply text-gray-400;
-}
-
-.rwa-kyc-actions {
-    @apply mt-6;
-}
-
-.rwa-kyc-actions button {
-    @apply w-full;
-}
-
-.rwa-kyc-success {
-    @apply flex items-center justify-center gap-2 p-3 bg-green-50 text-green-700 rounded-md font-medium;
-}
-
-.rwa-kyc-flow.dark .rwa-kyc-success {
-    @apply bg-green-900/20 text-green-300;
-}
-
-.rwa-kyc-success-icon {
-    @apply text-lg;
-}
+/* Focus styles for accessibility */
+@layer utilities {
+    .rwa-focus-ring {
+        @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+    }
 
-.rwa-kyc-session {
-    @apply mt-4 text-center;
+    .dark .rwa-focus-ring {
+        @apply focus:ring-offset-gray-900;
+    }
 }

package/src/types/index.ts

@@ -1,193 +1,200 @@
 /**
- * Type definitions for @mantle-rwa/react components
- */
+ * Type definitions for @mantle-rwa/react
+ */
+
+// Re-export relevant types from SDK
+export {
+    AccreditationTier,
+    type TokenInfo,
+    type InvestorData,
+    type TransactionResult,
+    type Distribution,
+    type DistributionPreview,
+    type HolderDistribution,
+    type PendingClaim,
+    type VerificationSession,
+    type NetworkConfig,
+} from '@mantle-rwa/sdk';
+
+import type { RWAClient, TransactionResult, AccreditationTier, DistributionPreview } from '@mantle-rwa/sdk';
+
+/*//////////////////////////////////////////////////////////////
+                        CONTRACT ADDRESSES
+//////////////////////////////////////////////////////////////*/
+
+/**
+ * Contract addresses configuration
+ */
+export interface ContractAddresses {
+    /** RWA token contract address */
+    token?: string;
+    /** KYC registry contract address */
+    kycRegistry?: string;
+    /** Yield distributor contract address */
+    yieldDistributor?: string;
+    /** Asset vault contract address */
+    assetVault?: string;
+    /** RWA factory contract address */
+    factory?: string;
+}
 
-// Re-export SDK types that are commonly used
-export { AccreditationTier } from '@mantle-rwa/sdk';
+/*//////////////////////////////////////////////////////////////
+                        HOOK TYPES
+//////////////////////////////////////////////////////////////*/
 
 /**
- * Theme options for components
+ * Configuration for useRWA hook
  */
-export type Theme = 'light' | 'dark';
+export interface UseRWAConfig {
+    /** Network to connect to (default: 'mantle-sepolia') */
+    network?: 'mantle' | 'mantle-sepolia';
+    /** Contract addresses configuration */
+    contracts?: ContractAddresses;
+}
 
 /**
- * KYC Provider options
+ * Return type for useRWA hook
  */
-export type KYCProviderType = 'persona' | 'synaps' | 'jumio';
+export interface UseRWAReturn {
+    /** The RWAClient instance (null if not initialized) */
+    client: RWAClient | null;
+    /** Whether the client is initialized and ready */
+    isInitialized: boolean;
+    /** Whether the client is currently initializing */
+    isLoading: boolean;
+    /** Error that occurred during initialization */
+    error: Error | null;
+    /** Whether a signer is available (wallet connected) */
+    hasSigner: boolean;
+    /** Contract addresses */
+    contracts: ContractAddresses;
+    /** Reinitialize the client */
+    reinitialize: () => Promise<void>;
+}
 
-/**
- * Required fields for KYC verification
- */
-export type KYCRequiredField = 'identity' | 'accreditation' | 'address' | 'tax';
+/*//////////////////////////////////////////////////////////////
+                        COMPONENT PROPS
+//////////////////////////////////////////////////////////////*/
 
 /**
- * KYC verification result
+ * Verification status for KYC flow
  */
-export interface KYCResult {
-    verified: boolean;
-    tier: number;
-    identityHash: string;
-    sessionId: string;
-}
+export type VerificationStatus = 'idle' | 'pending' | 'in_progress' | 'completed' | 'failed';
 
 /**
- * KYCFlow component props
- * @see Requirements 10.1, 10.2, 10.3, 10.4, 10.5
+ * Props for KYCFlow component
  */
 export interface KYCFlowProps {
-    /** KYC provider to use */
-    provider: KYCProviderType;
-    /** Callback when KYC verification completes */
-    onComplete: (kycData: KYCResult) => void;
+    /** KYC registry contract address */
+    registryAddress: string;
+    /** Investor address to verify (defaults to connected wallet) */
+    investorAddress?: string;
+    /** Callback when verification status changes */
+    onStatusChange?: (status: VerificationStatus) => void;
+    /** Callback when verification completes successfully */
+    onComplete?: (tier: AccreditationTier) => void;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
-    /** Required verification fields */
-    requiredFields: KYCRequiredField[];
-    /** Theme mode */
-    theme?: Theme;
-    /** Custom styles override */
-    customStyles?: Partial<KYCFlowStyles>;
-    /** KYC Registry contract address for auto-update */
-    registryAddress?: string;
-    /** Whether to automatically update the on-chain registry */
-    autoUpdateRegistry?: boolean;
-}
-
-/**
- * Custom styles for KYCFlow component
- */
-export interface KYCFlowStyles {
-    container?: string;
-    header?: string;
-    content?: string;
-    button?: string;
-    input?: string;
-    error?: string;
+    /** Custom CSS class */
+    className?: string;
 }
 
 /**
- * InvestorDashboard component props
- * @see Requirements 11.1, 11.2, 11.3, 11.4, 11.5
+ * Props for InvestorDashboard component
  */
 export interface InvestorDashboardProps {
-    /** RWA Token contract address */
+    /** RWA token contract address */
     tokenAddress: string;
-    /** Yield Distributor contract address */
-    yieldDistributorAddress: string;
-    /** KYC Registry contract address */
+    /** KYC registry contract address */
     kycRegistryAddress: string;
-    /** Theme mode */
-    theme?: Theme;
-    /** Callback when yield is claimed */
-    onClaimYield?: (distributionId: number) => void;
-    /** Whether to show portfolio value */
-    showPortfolioValue?: boolean;
-    /** Price oracle address for portfolio value calculation */
-    priceOracle?: string;
-}
-
-/**
- * Yield history entry
- */
-export interface YieldHistoryEntry {
-    distributionId: number;
-    amount: bigint;
-    paymentToken: string;
-    claimedAt: Date;
+    /** Yield distributor contract address */
+    yieldDistributorAddress: string;
+    /** Investor address (defaults to connected wallet) */
+    investorAddress?: string;
+    /** Callback when yield claim succeeds */
+    onClaimSuccess?: (result: TransactionResult) => void;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Custom CSS class */
+    className?: string;
 }
 
 /**
- * TokenMintForm component props
- * @see Requirements 12.1, 12.2, 12.3, 12.4
+ * Props for TokenMintForm component
  */
 export interface TokenMintFormProps {
-    /** RWA Token contract address */
+    /** RWA token contract address */
     tokenAddress: string;
-    /** KYC Registry contract address */
+    /** KYC registry contract address */
     kycRegistryAddress: string;
-    /** Callback when minting completes */
-    onMintComplete?: (txHash: string, recipient: string, amount: string) => void;
+    /** Callback when mint succeeds */
+    onSuccess?: (result: TransactionResult) => void;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
-    /** Whether to allow batch minting via CSV */
-    allowBatchMint?: boolean;
-    /** Maximum batch size for CSV uploads */
-    maxBatchSize?: number;
-    /** Theme mode */
-    theme?: Theme;
-}
-
-/**
- * Batch mint entry from CSV
- */
-export interface BatchMintEntry {
-    recipient: string;
-    amount: string;
+    /** Custom CSS class */
+    className?: string;
 }
 
 /**
- * YieldCalculator component props
- * @see Requirements 13.1, 13.2, 13.3, 13.4
+ * Props for YieldCalculator component
  */
 export interface YieldCalculatorProps {
-    /** RWA Token contract address */
+    /** RWA token contract address */
     tokenAddress: string;
-    /** Yield Distributor contract address */
+    /** Yield distributor contract address */
     yieldDistributorAddress: string;
-    /** Supported payment tokens */
-    supportedPaymentTokens: PaymentToken[];
-    /** Callback when distribution is initiated */
-    onDistribute?: (config: DistributionConfig) => void;
-    /** Whether to show distribution chart */
-    showChart?: boolean;
-    /** Whether to allow export functionality */
-    allowExport?: boolean;
-    /** Theme mode */
-    theme?: Theme;
+    /** Optional list of holder addresses to include in preview */
+    holderAddresses?: string[];
+    /** Callback when calculation completes */
+    onCalculate?: (preview: DistributionPreview) => void;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Custom CSS class */
+    className?: string;
 }
 
+/*//////////////////////////////////////////////////////////////
+                        UTILITY TYPES
+//////////////////////////////////////////////////////////////*/
+
 /**
- * Payment token configuration
+ * Common loading state interface
  */
-export interface PaymentToken {
-    address: string;
-    symbol: string;
-    decimals: number;
+export interface LoadingState {
+    /** Whether data is loading */
+    isLoading: boolean;
+    /** Error that occurred */
+    error: Error | null;
 }
 
 /**
- * Distribution configuration
+ * Transaction state interface
  */
-export interface DistributionConfig {
-    tokenAddress: string;
-    paymentToken: string;
-    totalAmount: string;
-    snapshotDate?: Date;
-    claimWindowDays?: number;
+export interface TransactionState extends LoadingState {
+    /** Whether a transaction is pending */
+    isPending: boolean;
+    /** Transaction hash if available */
+    txHash: string | null;
 }
 
 /**
- * Distribution preview entry
+ * Props for ErrorDisplay component
  */
-export interface DistributionPreviewEntry {
-    address: string;
-    balance: bigint;
-    yieldAmount: bigint;
-    percentage: number;
+export interface ErrorDisplayProps {
+    /** Error to display */
+    error: Error;
+    /** Callback for retry action */
+    onRetry?: () => void;
+    /** Custom CSS class */
+    className?: string;
 }
 
 /**
- * useRWA hook return type
+ * Props for LoadingSpinner component
  */
-export interface UseRWAReturn {
-    /** Whether the SDK client is initialized */
-    isInitialized: boolean;
-    /** Current network chain ID */
-    chainId: number | undefined;
-    /** Connected wallet address */
-    address: string | undefined;
-    /** Whether wallet is connected */
-    isConnected: boolean;
-    /** Error if initialization failed */
-    error: Error | null;
+export interface LoadingSpinnerProps {
+    /** Size of the spinner */
+    size?: 'sm' | 'md' | 'lg';
+    /** Custom CSS class */
+    className?: string;
 }