@mantle-rwa/react 0.1.0

package/src/styles/index.css

@@ -0,0 +1,197 @@
+@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;
+}
+
+.rwa-kyc-step.in_progress {
+    @apply bg-blue-50 border border-blue-200;
+}
+
+.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;
+}
+
+.rwa-kyc-flow.dark .rwa-kyc-step.completed {
+    @apply bg-green-900/20;
+}
+
+.rwa-kyc-step.failed {
+    @apply bg-red-50;
+}
+
+.rwa-kyc-flow.dark .rwa-kyc-step.failed {
+    @apply bg-red-900/20;
+}
+
+.rwa-kyc-step-indicator {
+    @apply flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium;
+}
+
+.rwa-kyc-step.pending .rwa-kyc-step-indicator {
+    @apply bg-gray-200 text-gray-600;
+}
+
+.rwa-kyc-flow.dark .rwa-kyc-step.pending .rwa-kyc-step-indicator {
+    @apply bg-gray-600 text-gray-300;
+}
+
+.rwa-kyc-step.in_progress .rwa-kyc-step-indicator {
+    @apply bg-blue-500 text-white;
+}
+
+.rwa-kyc-step.completed .rwa-kyc-step-indicator {
+    @apply bg-green-500 text-white;
+}
+
+.rwa-kyc-step.failed .rwa-kyc-step-indicator {
+    @apply bg-red-500 text-white;
+}
+
+.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;
+}
+
+.rwa-kyc-session {
+    @apply mt-4 text-center;
+}

package/src/types/index.ts

@@ -0,0 +1,193 @@
+/**
+ * Type definitions for @mantle-rwa/react components
+ */
+
+// Re-export SDK types that are commonly used
+export { AccreditationTier } from '@mantle-rwa/sdk';
+
+/**
+ * Theme options for components
+ */
+export type Theme = 'light' | 'dark';
+
+/**
+ * KYC Provider options
+ */
+export type KYCProviderType = 'persona' | 'synaps' | 'jumio';
+
+/**
+ * Required fields for KYC verification
+ */
+export type KYCRequiredField = 'identity' | 'accreditation' | 'address' | 'tax';
+
+/**
+ * KYC verification result
+ */
+export interface KYCResult {
+    verified: boolean;
+    tier: number;
+    identityHash: string;
+    sessionId: string;
+}
+
+/**
+ * KYCFlow component props
+ * @see Requirements 10.1, 10.2, 10.3, 10.4, 10.5
+ */
+export interface KYCFlowProps {
+    /** KYC provider to use */
+    provider: KYCProviderType;
+    /** Callback when KYC verification completes */
+    onComplete: (kycData: KYCResult) => 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;
+}
+
+/**
+ * InvestorDashboard component props
+ * @see Requirements 11.1, 11.2, 11.3, 11.4, 11.5
+ */
+export interface InvestorDashboardProps {
+    /** RWA Token contract address */
+    tokenAddress: string;
+    /** Yield Distributor contract address */
+    yieldDistributorAddress: string;
+    /** 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;
+}
+
+/**
+ * TokenMintForm component props
+ * @see Requirements 12.1, 12.2, 12.3, 12.4
+ */
+export interface TokenMintFormProps {
+    /** RWA Token contract address */
+    tokenAddress: string;
+    /** KYC Registry contract address */
+    kycRegistryAddress: string;
+    /** Callback when minting completes */
+    onMintComplete?: (txHash: string, recipient: string, amount: string) => 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;
+}
+
+/**
+ * YieldCalculator component props
+ * @see Requirements 13.1, 13.2, 13.3, 13.4
+ */
+export interface YieldCalculatorProps {
+    /** RWA Token contract address */
+    tokenAddress: string;
+    /** 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;
+}
+
+/**
+ * Payment token configuration
+ */
+export interface PaymentToken {
+    address: string;
+    symbol: string;
+    decimals: number;
+}
+
+/**
+ * Distribution configuration
+ */
+export interface DistributionConfig {
+    tokenAddress: string;
+    paymentToken: string;
+    totalAmount: string;
+    snapshotDate?: Date;
+    claimWindowDays?: number;
+}
+
+/**
+ * Distribution preview entry
+ */
+export interface DistributionPreviewEntry {
+    address: string;
+    balance: bigint;
+    yieldAmount: bigint;
+    percentage: number;
+}
+
+/**
+ * useRWA hook return type
+ */
+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;
+}