@mantle-rwa/react 0.1.1 → 0.1.3

package/dist/types/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EACH,iBAAiB,EACjB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,aAAa,GACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM5G;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;GAEG;AACH,MAAM,WAAW,YAAY;IACzB,wDAAwD;IACxD,OAAO,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;IACtC,uCAAuC;IACvC,SAAS,CAAC,EAAE,iBAAiB,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IACzB,uDAAuD;IACvD,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,8BAA8B;IAC9B,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAMD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,YAAY;IACzB,oCAAoC;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gDAAgD;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtD,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,uBAAuB,EAAE,MAAM,CAAC;IAChC,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;GAEG;AACH,MAAM,WAAW,YAAY;IACzB,8BAA8B;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IAClD,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,uBAAuB;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantle-rwa/react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "React components for RWA tokenization on Mantle Network",
   "license": "MIT",
   "type": "module",
@@ -20,7 +20,7 @@
     "src"
   ],
   "dependencies": {
-    "@mantle-rwa/sdk": "^0.1.0"
+    "@mantle-rwa/sdk": "^0.1.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.2.0",
@@ -35,6 +35,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "ethers": "^6.11.0",
     "fast-check": "^3.15.0",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.33",
@@ -46,7 +47,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "wagmi": "^2.0.0",
-    "viem": "^2.0.0"
+    "viem": "^2.0.0",
+    "ethers": "^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

package/src/components/ConnectWalletPrompt.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+/**
+ * ConnectWalletPrompt - Prompt for wallet connection
+ */
+
+interface ConnectWalletPromptProps {
+    /** Message to display */
+    message?: string;
+    /** Custom CSS class */
+    className?: string;
+}
+
+/**
+ * ConnectWalletPrompt component
+ */
+export function ConnectWalletPrompt({
+    message = 'Please connect your wallet to continue.',
+    className = '',
+}: ConnectWalletPromptProps): JSX.Element {
+    return (
+        <div className={`rwa-connect-wallet-prompt ${className}`}>
+            <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+                <div className="flex items-center">
+                    <svg
+                        className="w-5 h-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                        />
+                    </svg>
+                    <p className="ml-3 text-sm text-yellow-700 dark:text-yellow-300">
+                        {message}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ConnectWalletPrompt;

package/src/components/ErrorDisplay.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+/**
+ * ErrorDisplay - Shared error display component
+ * 
+ * Provides consistent error UI across all components with retry functionality.
+ */
+
+import type { ErrorDisplayProps } from '../types';
+
+/**
+ * Format error message for display
+ */
+export function formatErrorMessage(error: Error): string {
+    const message = error.message;
+
+    // Handle common contract errors
+    if (message.includes('user rejected')) {
+        return 'Transaction was rejected by the user.';
+    }
+    if (message.includes('insufficient funds')) {
+        return 'Insufficient funds for this transaction.';
+    }
+    if (message.includes('nonce')) {
+        return 'Transaction nonce error. Please try again.';
+    }
+    if (message.includes('gas')) {
+        return 'Gas estimation failed. The transaction may fail.';
+    }
+    if (message.includes('network')) {
+        return 'Network error. Please check your connection.';
+    }
+    if (message.includes('timeout')) {
+        return 'Request timed out. Please try again.';
+    }
+
+    // Return original message if no special handling
+    return message;
+}
+
+/**
+ * ErrorDisplay component for consistent error UI
+ */
+export function ErrorDisplay({
+    error,
+    onRetry,
+    className = '',
+}: ErrorDisplayProps): JSX.Element {
+    const formattedMessage = formatErrorMessage(error);
+
+    return (
+        <div className={`rwa-error-display ${className}`}>
+            <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
+                <div className="flex items-start">
+                    <svg
+                        className="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                    </svg>
+                    <div className="ml-3 flex-1">
+                        <h3 className="text-sm font-medium text-red-800 dark:text-red-200">
+                            Error
+                        </h3>
+                        <p className="mt-1 text-sm text-red-700 dark:text-red-300">
+                            {formattedMessage}
+                        </p>
+                        {onRetry && (
+                            <button
+                                onClick={onRetry}
+                                className="mt-3 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300 underline"
+                            >
+                                Try again
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ErrorDisplay;

package/src/components/InvestorDashboard.tsx

@@ -0,0 +1,315 @@
+'use client';
+
+/**
+ * InvestorDashboard - Dashboard displaying investor portfolio information
+ * 
+ * Shows token balance, KYC status, accreditation tier, and pending yield claims.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAccount } from 'wagmi';
+import { formatUnits } from 'viem';
+import { useRWA } from '../hooks/useRWA';
+import type { InvestorDashboardProps } from '../types';
+import { AccreditationTier, type TokenInfo, type InvestorData, type PendingClaim } from '@mantle-rwa/sdk';
+
+/**
+ * Get display name for accreditation tier
+ */
+function getTierName(tier: AccreditationTier): string {
+    switch (tier) {
+        case AccreditationTier.None:
+            return 'None';
+        case AccreditationTier.Retail:
+            return 'Retail';
+        case AccreditationTier.Accredited:
+            return 'Accredited';
+        case AccreditationTier.Institutional:
+            return 'Institutional';
+        default:
+            return 'Unknown';
+    }
+}
+
+/**
+ * Format token amount for display
+ */
+function formatTokenAmount(amount: bigint, decimals: number, symbol: string): string {
+    const formatted = formatUnits(amount, decimals);
+    const num = parseFloat(formatted);
+    return `${num.toLocaleString(undefined, { maximumFractionDigits: 4 })} ${symbol}`;
+}
+
+/**
+ * InvestorDashboard component
+ */
+export function InvestorDashboard({
+    tokenAddress,
+    kycRegistryAddress,
+    yieldDistributorAddress,
+    investorAddress,
+    onClaimSuccess,
+    onError,
+    className = '',
+}: InvestorDashboardProps): JSX.Element {
+    const { client, isInitialized, hasSigner } = useRWA();
+    const { address: connectedAddress } = useAccount();
+
+    const targetAddress = investorAddress || connectedAddress;
+
+    const [tokenInfo, setTokenInfo] = useState<TokenInfo | null>(null);
+    const [balance, setBalance] = useState<bigint | null>(null);
+    const [kycInfo, setKycInfo] = useState<InvestorData | null>(null);
+    const [pendingClaims, setPendingClaims] = useState<PendingClaim[]>([]);
+    const [totalClaimable, setTotalClaimable] = useState<bigint>(0n);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+    const [isClaiming, setIsClaiming] = useState(false);
+
+    // Fetch all dashboard data
+    const fetchData = useCallback(async () => {
+        if (!client || !isInitialized || !targetAddress) {
+            setIsLoading(false);
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            // Fetch token info and balance
+            const token = client.token.connect(tokenAddress);
+            const [info, userBalance] = await Promise.all([
+                token.getInfo(),
+                token.balanceOf(targetAddress),
+            ]);
+            setTokenInfo(info);
+            setBalance(userBalance);
+
+            // Fetch KYC info
+            const registry = client.kyc.connect(kycRegistryAddress);
+            const investorData = await registry.getInvestorInfo(targetAddress);
+            setKycInfo(investorData);
+
+            // Fetch pending claims
+            const distributor = client.yield.connect(yieldDistributorAddress);
+            const claims = await distributor.getPendingClaims(targetAddress);
+            setPendingClaims(claims);
+
+            // Calculate total claimable
+            const total = claims.reduce((sum, claim) => sum + claim.amount, 0n);
+            setTotalClaimable(total);
+        } catch (err) {
+            const errorObj = err instanceof Error ? err : new Error('Failed to fetch dashboard data');
+            setError(errorObj);
+            onError?.(errorObj);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client, isInitialized, targetAddress, tokenAddress, kycRegistryAddress, yieldDistributorAddress, onError]);
+
+    // Fetch data on mount and when dependencies change
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+
+    // Handle claim single distribution
+    const handleClaim = useCallback(async (distributionId: number) => {
+        if (!client || !hasSigner) return;
+
+        setIsClaiming(true);
+        setError(null);
+
+        try {
+            const distributor = client.yield.connect(yieldDistributorAddress);
+            const result = await distributor.claim(distributionId);
+            onClaimSuccess?.(result);
+            await fetchData(); // Refresh data
+        } catch (err) {
+            const errorObj = err instanceof Error ? err : new Error('Failed to claim yield');
+            setError(errorObj);
+            onError?.(errorObj);
+        } finally {
+            setIsClaiming(false);
+        }
+    }, [client, hasSigner, yieldDistributorAddress, onClaimSuccess, onError, fetchData]);
+
+    // Handle claim all
+    const handleClaimAll = useCallback(async () => {
+        if (!client || !hasSigner || pendingClaims.length === 0) return;
+
+        setIsClaiming(true);
+        setError(null);
+
+        try {
+            const distributor = client.yield.connect(yieldDistributorAddress);
+            const distributionIds = pendingClaims.map(c => c.distributionId);
+            const result = await distributor.claimMultiple(distributionIds);
+            onClaimSuccess?.(result);
+            await fetchData(); // Refresh data
+        } catch (err) {
+            const errorObj = err instanceof Error ? err : new Error('Failed to claim yields');
+            setError(errorObj);
+            onError?.(errorObj);
+        } finally {
+            setIsClaiming(false);
+        }
+    }, [client, hasSigner, pendingClaims, yieldDistributorAddress, onClaimSuccess, onError, fetchData]);
+
+    // Render loading state
+    if (isLoading) {
+        return (
+            <div className={`rwa-investor-dashboard rwa-investor-dashboard--loading ${className}`}>
+                <div className="flex items-center justify-center p-8">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+                    <span className="ml-3 text-gray-600 dark:text-gray-300">Loading dashboard...</span>
+                </div>
+            </div>
+        );
+    }
+
+    // Render no wallet state
+    if (!targetAddress) {
+        return (
+            <div className={`rwa-investor-dashboard rwa-investor-dashboard--no-wallet ${className}`}>
+                <div className="p-6 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+                    <p className="text-yellow-700 dark:text-yellow-300">
+                        Please connect your wallet to view your dashboard.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    // Render error state
+    if (error && !tokenInfo) {
+        return (
+            <div className={`rwa-investor-dashboard rwa-investor-dashboard--error ${className}`}>
+                <div className="p-6 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
+                    <h3 className="text-lg font-semibold text-red-800 dark:text-red-200">Error</h3>
+                    <p className="mt-2 text-red-700 dark:text-red-300">{error.message}</p>
+                    <button
+                        onClick={fetchData}
+                        className="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
+                    >
+                        Retry
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`rwa-investor-dashboard ${className}`}>
+            <div className="space-y-6">
+                {/* Token Balance Card */}
+                <div className="p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+                    <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Token Balance</h3>
+                    {tokenInfo && balance !== null && (
+                        <div className="mt-4">
+                            <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                                {formatTokenAmount(balance, Number(tokenInfo.decimals), tokenInfo.symbol)}
+                            </p>
+                            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                                {tokenInfo.name}
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* KYC Status Card */}
+                <div className="p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+                    <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">KYC Status</h3>
+                    {kycInfo && (
+                        <div className="mt-4 space-y-3">
+                            <div className="flex items-center">
+                                <span className="text-gray-600 dark:text-gray-400 w-32">Status:</span>
+                                <span className={`font-medium ${kycInfo.verified ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}`}>
+                                    {kycInfo.verified ? 'Verified' : 'Not Verified'}
+                                </span>
+                            </div>
+                            <div className="flex items-center">
+                                <span className="text-gray-600 dark:text-gray-400 w-32">Tier:</span>
+                                <span className="font-medium text-gray-900 dark:text-white">
+                                    {getTierName(kycInfo.tier)}
+                                </span>
+                            </div>
+                            {kycInfo.expiry && kycInfo.verified && (
+                                <div className="flex items-center">
+                                    <span className="text-gray-600 dark:text-gray-400 w-32">Valid Until:</span>
+                                    <span className="font-medium text-gray-900 dark:text-white">
+                                        {kycInfo.expiry.toLocaleDateString()}
+                                    </span>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                {/* Pending Claims Card */}
+                <div className="p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+                    <div className="flex items-center justify-between">
+                        <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Pending Yields</h3>
+                        {pendingClaims.length > 0 && hasSigner && (
+                            <button
+                                onClick={handleClaimAll}
+                                disabled={isClaiming}
+                                className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded-md transition-colors text-sm"
+                            >
+                                {isClaiming ? 'Claiming...' : 'Claim All'}
+                            </button>
+                        )}
+                    </div>
+
+                    {pendingClaims.length === 0 ? (
+                        <p className="mt-4 text-gray-500 dark:text-gray-400">No pending yields to claim.</p>
+                    ) : (
+                        <div className="mt-4 space-y-3">
+                            <p className="text-sm text-gray-600 dark:text-gray-400">
+                                Total Claimable: <span className="font-semibold">{formatUnits(totalClaimable, 18)} tokens</span>
+                            </p>
+                            <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                                {pendingClaims.map((claim) => (
+                                    <div key={claim.distributionId} className="py-3 flex items-center justify-between">
+                                        <div>
+                                            <p className="font-medium text-gray-900 dark:text-white">
+                                                Distribution #{claim.distributionId}
+                                            </p>
+                                            <p className="text-sm text-gray-500 dark:text-gray-400">
+                                                Amount: {formatUnits(claim.amount, 18)} • Deadline: {claim.deadline.toLocaleDateString()}
+                                            </p>
+                                        </div>
+                                        {hasSigner && (
+                                            <button
+                                                onClick={() => handleClaim(claim.distributionId)}
+                                                disabled={isClaiming}
+                                                className="px-3 py-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white rounded text-sm transition-colors"
+                                            >
+                                                Claim
+                                            </button>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {!hasSigner && pendingClaims.length > 0 && (
+                        <p className="mt-4 text-sm text-yellow-600 dark:text-yellow-400">
+                            Connect your wallet to claim yields.
+                        </p>
+                    )}
+                </div>
+
+                {/* Error display */}
+                {error && (
+                    <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
+                        <p className="text-red-700 dark:text-red-300">{error.message}</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default InvestorDashboard;