@mantle-rwa/react 0.1.0

package/package.json

@@ -0,0 +1,66 @@
+{
+    "name": "@mantle-rwa/react",
+    "version": "0.1.0",
+    "description": "React components for RWA tokenization on Mantle Network",
+    "license": "MIT",
+    "type": "module",
+    "main": "./dist/cjs/index.js",
+    "module": "./dist/esm/index.js",
+    "types": "./dist/types/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/esm/index.js",
+            "require": "./dist/cjs/index.js",
+            "types": "./dist/types/index.d.ts"
+        },
+        "./styles.css": "./dist/styles.css"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "build": "npm run build:esm && npm run build:cjs && npm run build:types && npm run build:css",
+        "build:esm": "tsc -p tsconfig.esm.json",
+        "build:cjs": "tsc -p tsconfig.cjs.json",
+        "build:types": "tsc -p tsconfig.types.json",
+        "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "lint": "eslint src --ext .ts,.tsx",
+        "clean": "rm -rf dist coverage",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@mantle-rwa/sdk": "^0.1.0"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^6.2.0",
+        "@testing-library/react": "^14.1.2",
+        "@types/react": "^18.2.48",
+        "@types/react-dom": "^18.2.18",
+        "@typescript-eslint/eslint-plugin": "^6.19.0",
+        "@typescript-eslint/parser": "^6.19.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "@vitest/coverage-v8": "^1.2.0",
+        "autoprefixer": "^10.4.17",
+        "eslint": "^8.56.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "fast-check": "^3.15.0",
+        "jsdom": "^24.0.0",
+        "postcss": "^8.4.33",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5.3.3",
+        "vitest": "^1.2.0"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "wagmi": "^2.0.0",
+        "viem": "^2.0.0"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    }
+}

package/src/components/InvestorDashboard/index.tsx

@@ -0,0 +1,359 @@
+/**
+ * InvestorDashboard Component
+ * Displays investor portfolio, yield history, and compliance status
+ *
+ * @see Requirements 11.1, 11.2, 11.3, 11.4, 11.5
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import type { InvestorDashboardProps, YieldHistoryEntry } from '../../types';
+import { useRWA } from '../../hooks/useRWA';
+
+/**
+ * Accreditation tier labels
+ */
+const TIER_LABELS: Record<number, string> = {
+    0: 'None',
+    1: 'Retail',
+    2: 'Accredited',
+    3: 'Institutional',
+};
+
+/**
+ * Format a bigint balance to a human-readable string
+ */
+function formatBalance(value: bigint, decimals: number = 18): string {
+    const divisor = BigInt(10 ** decimals);
+    const integerPart = value / divisor;
+    const fractionalPart = value % divisor;
+    const fractionalStr = fractionalPart.toString().padStart(decimals, '0').slice(0, 2);
+    return `${integerPart.toLocaleString()}.${fractionalStr}`;
+}
+
+/**
+ * Format a date to a localized string
+ */
+function formatDate(date: Date): string {
+    return date.toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    });
+}
+
+/**
+ * InvestorDashboard component for displaying investor portfolio
+ * Shows token balance, yield history, and compliance status
+ *
+ * @example
+ * ```tsx
+ * <InvestorDashboard
+ *   tokenAddress="0x..."
+ *   yieldDistributorAddress="0x..."
+ *   kycRegistryAddress="0x..."
+ *   onClaimYield={(id) => console.log('Claiming:', id)}
+ * />
+ * ```
+ */
+export function InvestorDashboard({
+    tokenAddress,
+    yieldDistributorAddress,
+    kycRegistryAddress,
+    theme = 'light',
+    onClaimYield,
+    showPortfolioValue = true,
+    priceOracle: _priceOracle, // Reserved for future price oracle integration
+}: InvestorDashboardProps): React.ReactElement {
+    const { address, isConnected } = useRWA();
+    const [balance, setBalance] = useState<bigint>(BigInt(0));
+    const [yieldHistory, setYieldHistory] = useState<YieldHistoryEntry[]>([]);
+    const [pendingYield, setPendingYield] = useState<bigint>(BigInt(0));
+    const [pendingDistributionId, setPendingDistributionId] = useState<number | null>(null);
+    const [isKYCVerified, setIsKYCVerified] = useState(false);
+    const [accreditationTier, setAccreditationTier] = useState<number>(0);
+    const [kycExpiry, setKycExpiry] = useState<Date | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isClaiming, setIsClaiming] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [portfolioValue, setPortfolioValue] = useState<bigint>(BigInt(0));
+
+    const isDark = theme === 'dark';
+
+    // Fetch dashboard data
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!isConnected || !address) {
+                setIsLoading(false);
+                return;
+            }
+
+            setError(null);
+
+            try {
+                // In production, these would be actual contract calls via SDK
+                // For now, simulating data fetch with realistic mock data
+                await new Promise((resolve) => setTimeout(resolve, 500));
+
+                // Simulate token balance (1000 tokens with 18 decimals)
+                const mockBalance = BigInt(1000) * BigInt(10 ** 18);
+                setBalance(mockBalance);
+
+                // Simulate yield history
+                const mockYieldHistory: YieldHistoryEntry[] = [
+                    {
+                        distributionId: 1,
+                        amount: BigInt(50) * BigInt(10 ** 6), // 50 USDC
+                        paymentToken: 'USDC',
+                        claimedAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+                    },
+                    {
+                        distributionId: 2,
+                        amount: BigInt(75) * BigInt(10 ** 6), // 75 USDC
+                        paymentToken: 'USDC',
+                        claimedAt: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000),
+                    },
+                ];
+                setYieldHistory(mockYieldHistory);
+
+                // Simulate pending yield (25 USDC)
+                setPendingYield(BigInt(25) * BigInt(10 ** 6));
+                setPendingDistributionId(3);
+
+                // Simulate KYC status
+                setIsKYCVerified(true);
+                setAccreditationTier(2); // Accredited
+                setKycExpiry(new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)); // 1 year from now
+
+                // Simulate portfolio value (assuming $1 per token)
+                setPortfolioValue(mockBalance);
+            } catch (err) {
+                console.error('Failed to fetch dashboard data:', err);
+                setError('Failed to load dashboard data. Please try again.');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [address, isConnected, tokenAddress, yieldDistributorAddress, kycRegistryAddress]);
+
+    // Handle claim yield
+    const handleClaimYield = useCallback(async (distributionId: number) => {
+        if (isClaiming) return;
+
+        setIsClaiming(true);
+        setError(null);
+
+        try {
+            // Call the onClaimYield callback
+            onClaimYield?.(distributionId);
+
+            // In production, this would wait for transaction confirmation
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+
+            // Update state after successful claim
+            setPendingYield(BigInt(0));
+            setPendingDistributionId(null);
+        } catch (err) {
+            console.error('Failed to claim yield:', err);
+            setError('Failed to claim yield. Please try again.');
+        } finally {
+            setIsClaiming(false);
+        }
+    }, [isClaiming, onClaimYield]);
+
+    // Render wallet not connected state
+    if (!isConnected) {
+        return (
+            <div
+                className={`rwa-card ${isDark ? 'dark' : ''}`}
+                data-testid="investor-dashboard"
+                data-theme={theme}
+            >
+                <p className="text-center text-gray-600 dark:text-gray-400">
+                    Please connect your wallet to view your dashboard.
+                </p>
+            </div>
+        );
+    }
+
+    // Render loading state
+    if (isLoading) {
+        return (
+            <div
+                className={`rwa-card ${isDark ? 'dark' : ''}`}
+                data-testid="investor-dashboard"
+                data-theme={theme}
+                aria-busy="true"
+            >
+                <div className="flex items-center justify-center py-8">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-mantle-600" />
+                    <span className="ml-3 text-gray-600 dark:text-gray-400">
+                        Loading dashboard...
+                    </span>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={`rwa-card ${isDark ? 'dark' : ''}`}
+            data-testid="investor-dashboard"
+            data-theme={theme}
+        >
+            <h2 className="text-lg font-semibold mb-6 text-gray-900 dark:text-white">
+                Investor Dashboard
+            </h2>
+
+            {/* Error Alert */}
+            {error && (
+                <div
+                    className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded-md border border-red-200 dark:border-red-800"
+                    role="alert"
+                    data-testid="dashboard-error"
+                >
+                    {error}
+                </div>
+            )}
+
+            {/* Portfolio Overview - Requirements 11.1, 11.5 */}
+            {showPortfolioValue && (
+                <section className="mb-6" aria-labelledby="portfolio-heading" data-testid="portfolio-section">
+                    <h3
+                        id="portfolio-heading"
+                        className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2"
+                    >
+                        Portfolio Overview
+                    </h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                        <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                            <p className="text-sm text-gray-500 dark:text-gray-400">Token Balance</p>
+                            <p
+                                className="text-2xl font-bold text-gray-900 dark:text-white"
+                                data-testid="token-balance"
+                            >
+                                {formatBalance(balance)}
+                            </p>
+                        </div>
+                        <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                            <p className="text-sm text-gray-500 dark:text-gray-400">Portfolio Value</p>
+                            <p
+                                className="text-2xl font-bold text-gray-900 dark:text-white"
+                                data-testid="portfolio-value"
+                            >
+                                ${formatBalance(portfolioValue)}
+                            </p>
+                        </div>
+                        <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                            <p className="text-sm text-gray-500 dark:text-gray-400">Pending Yield</p>
+                            <p
+                                className="text-2xl font-bold text-mantle-600"
+                                data-testid="pending-yield"
+                            >
+                                ${formatBalance(pendingYield, 6)}
+                            </p>
+                        </div>
+                    </div>
+                </section>
+            )}
+
+            {/* Compliance Status - Requirement 11.3 */}
+            <section className="mb-6" aria-labelledby="compliance-heading" data-testid="compliance-section">
+                <h3
+                    id="compliance-heading"
+                    className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2"
+                >
+                    Compliance Status
+                </h3>
+                <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                    <div className="flex flex-wrap items-center gap-4">
+                        <div className="flex items-center">
+                            <span
+                                className={`w-3 h-3 rounded-full mr-2 ${isKYCVerified ? 'bg-green-500' : 'bg-red-500'}`}
+                                aria-hidden="true"
+                            />
+                            <span className="text-sm text-gray-700 dark:text-gray-300" data-testid="kyc-status">
+                                KYC: {isKYCVerified ? 'Verified' : 'Not Verified'}
+                            </span>
+                        </div>
+                        <div className="text-sm text-gray-700 dark:text-gray-300">
+                            Tier:{' '}
+                            <span className="font-medium" data-testid="accreditation-tier">
+                                {TIER_LABELS[accreditationTier] || 'Unknown'}
+                            </span>
+                        </div>
+                        {kycExpiry && (
+                            <div className="text-sm text-gray-500 dark:text-gray-400" data-testid="kyc-expiry">
+                                Expires: {formatDate(kycExpiry)}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </section>
+
+            {/* Yield History - Requirement 11.2 */}
+            <section className="mb-6" aria-labelledby="yield-history-heading" data-testid="yield-history-section">
+                <h3
+                    id="yield-history-heading"
+                    className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2"
+                >
+                    Yield History
+                </h3>
+                {yieldHistory.length > 0 ? (
+                    <ul className="space-y-2" data-testid="yield-history-list">
+                        {yieldHistory.map((entry) => (
+                            <li
+                                key={entry.distributionId}
+                                className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
+                                data-testid={`yield-entry-${entry.distributionId}`}
+                            >
+                                <div>
+                                    <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                        Distribution #{entry.distributionId}
+                                    </p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                                        {formatDate(entry.claimedAt)}
+                                    </p>
+                                </div>
+                                <p className="font-medium text-gray-900 dark:text-white">
+                                    {formatBalance(entry.amount, 6)} {entry.paymentToken}
+                                </p>
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p
+                        className="text-sm text-gray-500 dark:text-gray-400 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
+                        data-testid="no-yield-history"
+                    >
+                        No yield history yet.
+                    </p>
+                )}
+            </section>
+
+            {/* Claim Button - Requirement 11.4 */}
+            {pendingYield > BigInt(0) && pendingDistributionId !== null && (
+                <button
+                    type="button"
+                    className="rwa-button-primary w-full"
+                    onClick={() => handleClaimYield(pendingDistributionId)}
+                    disabled={isClaiming}
+                    aria-busy={isClaiming}
+                    data-testid="claim-yield-btn"
+                >
+                    {isClaiming ? (
+                        <>
+                            <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2" />
+                            Claiming...
+                        </>
+                    ) : (
+                        `Claim Pending Yield ($${formatBalance(pendingYield, 6)})`
+                    )}
+                </button>
+            )}
+        </div>
+    );
+}
+
+export default InvestorDashboard;