@mantle-rwa/react 0.1.1 → 0.1.3

package/src/components/KYCFlow.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+/**
+ * KYCFlow - Multi-step KYC verification flow component
+ * 
+ * Guides users through the KYC verification process and displays
+ * their current verification status and accreditation tier.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAccount } from 'wagmi';
+import { useRWA } from '../hooks/useRWA';
+import type { KYCFlowProps, VerificationStatus } from '../types';
+import { AccreditationTier, type InvestorData } 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 date for display
+ */
+function formatDate(date: Date): string {
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    });
+}
+
+/**
+ * KYCFlow component for guiding users through KYC verification
+ */
+export function KYCFlow({
+    registryAddress,
+    investorAddress,
+    onStatusChange,
+    onComplete,
+    onError,
+    className = '',
+}: KYCFlowProps): JSX.Element {
+    const { client, isInitialized, hasSigner } = useRWA();
+    const { address: connectedAddress } = useAccount();
+
+    const targetAddress = investorAddress || connectedAddress;
+
+    const [status, setStatus] = useState<VerificationStatus>('idle');
+    const [investorInfo, setInvestorInfo] = useState<InvestorData | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    // Update status and notify callback
+    const updateStatus = useCallback((newStatus: VerificationStatus) => {
+        setStatus(newStatus);
+        onStatusChange?.(newStatus);
+    }, [onStatusChange]);
+
+    // Fetch investor KYC data
+    const fetchKYCData = useCallback(async () => {
+        if (!client || !isInitialized || !registryAddress || !targetAddress) {
+            setIsLoading(false);
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            const registry = client.kyc.connect(registryAddress);
+            const info = await registry.getInvestorInfo(targetAddress);
+            setInvestorInfo(info);
+
+            // Determine status based on investor info
+            if (info.verified) {
+                updateStatus('completed');
+                onComplete?.(info.tier);
+            } else if (info.tier !== AccreditationTier.None) {
+                updateStatus('in_progress');
+            } else {
+                updateStatus('pending');
+            }
+        } catch (err) {
+            const errorObj = err instanceof Error ? err : new Error('Failed to fetch KYC data');
+            setError(errorObj);
+            updateStatus('failed');
+            onError?.(errorObj);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client, isInitialized, registryAddress, targetAddress, updateStatus, onComplete, onError]);
+
+    // Fetch data on mount and when dependencies change
+    useEffect(() => {
+        fetchKYCData();
+    }, [fetchKYCData]);
+
+    // Handle start verification
+    const handleStartVerification = useCallback(async () => {
+        if (!client || !targetAddress) return;
+
+        updateStatus('in_progress');
+
+        try {
+            // Initiate verification through the KYC provider
+            const session = await client.kyc.verifyInvestor(targetAddress);
+
+            // If there's a redirect URL, open it
+            if (session.redirectUrl) {
+                window.open(session.redirectUrl, '_blank');
+            }
+        } catch (err) {
+            const errorObj = err instanceof Error ? err : new Error('Failed to start verification');
+            setError(errorObj);
+            updateStatus('failed');
+            onError?.(errorObj);
+        }
+    }, [client, targetAddress, updateStatus, onError]);
+
+    // Handle retry
+    const handleRetry = useCallback(() => {
+        setError(null);
+        fetchKYCData();
+    }, [fetchKYCData]);
+
+    // Render loading state
+    if (isLoading) {
+        return (
+            <div className={`rwa-kyc-flow rwa-kyc-flow--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 KYC status...</span>
+                </div>
+            </div>
+        );
+    }
+
+    // Render no wallet connected state
+    if (!targetAddress) {
+        return (
+            <div className={`rwa-kyc-flow rwa-kyc-flow--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">
+                    <h3 className="text-lg font-semibold text-yellow-800 dark:text-yellow-200">
+                        Wallet Not Connected
+                    </h3>
+                    <p className="mt-2 text-yellow-700 dark:text-yellow-300">
+                        Please connect your wallet to view your KYC status.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    // Render error state
+    if (status === 'failed' && error) {
+        return (
+            <div className={`rwa-kyc-flow rwa-kyc-flow--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">
+                        Verification Failed
+                    </h3>
+                    <p className="mt-2 text-red-700 dark:text-red-300">{error.message}</p>
+                    <button
+                        onClick={handleRetry}
+                        className="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
+                    >
+                        Retry
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    // Render completed state
+    if (status === 'completed' && investorInfo) {
+        return (
+            <div className={`rwa-kyc-flow rwa-kyc-flow--completed ${className}`}>
+                <div className="p-6 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+                    <div className="flex items-center">
+                        <svg className="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <h3 className="ml-3 text-lg font-semibold text-green-800 dark:text-green-200">
+                            Verification Complete
+                        </h3>
+                    </div>
+                    <div className="mt-4 space-y-2">
+                        <p className="text-green-700 dark:text-green-300">
+                            <span className="font-medium">Accreditation Tier:</span> {getTierName(investorInfo.tier)}
+                        </p>
+                        {investorInfo.expiry && (
+                            <p className="text-green-700 dark:text-green-300">
+                                <span className="font-medium">Valid Until:</span> {formatDate(investorInfo.expiry)}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    // Render in progress state
+    if (status === 'in_progress') {
+        return (
+            <div className={`rwa-kyc-flow rwa-kyc-flow--in-progress ${className}`}>
+                <div className="p-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+                    <div className="flex items-center">
+                        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600" />
+                        <h3 className="ml-3 text-lg font-semibold text-blue-800 dark:text-blue-200">
+                            Verification In Progress
+                        </h3>
+                    </div>
+                    <p className="mt-4 text-blue-700 dark:text-blue-300">
+                        Your identity verification is being processed. This may take a few minutes.
+                    </p>
+                    <button
+                        onClick={fetchKYCData}
+                        className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
+                    >
+                        Check Status
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    // Render pending state (default)
+    return (
+        <div className={`rwa-kyc-flow rwa-kyc-flow--pending ${className}`}>
+            <div className="p-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
+                    KYC Verification Required
+                </h3>
+                <p className="mt-2 text-gray-600 dark:text-gray-400">
+                    Complete identity verification to participate in RWA token offerings.
+                </p>
+                {!hasSigner ? (
+                    <p className="mt-4 text-yellow-600 dark:text-yellow-400 text-sm">
+                        Connect your wallet to start verification.
+                    </p>
+                ) : (
+                    <button
+                        onClick={handleStartVerification}
+                        className="mt-4 px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
+                    >
+                        Start Verification
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default KYCFlow;

package/src/components/LoadingSpinner.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+/**
+ * LoadingSpinner - Shared loading indicator component
+ */
+
+import type { LoadingSpinnerProps } from '../types';
+
+const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
+};
+
+/**
+ * LoadingSpinner component
+ */
+export function LoadingSpinner({
+    size = 'md',
+    className = '',
+}: LoadingSpinnerProps): JSX.Element {
+    return (
+        <div className={`rwa-loading-spinner ${className}`}>
+            <div
+                className={`animate-spin rounded-full border-b-2 border-blue-600 dark:border-blue-400 ${sizeClasses[size]}`}
+                role="status"
+                aria-label="Loading"
+            />
+        </div>
+    );
+}
+
+export default LoadingSpinner;

package/src/components/TokenMintForm.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+/**
+ * TokenMintForm - Form for minting RWA tokens to verified investors
+ * 
+ * Validates recipient address and KYC status before allowing mint.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { useRWA } from '../hooks/useRWA';
+import type { TokenMintFormProps } from '../types';
+import { AccreditationTier, type TransactionResult } from '@mantle-rwa/sdk';
+
+/**
+ * Validate Ethereum address format
+ */
+export function isValidAddress(address: string): boolean {
+    return /^0x[a-fA-F0-9]{40}$/.test(address);
+}
+
+/**
+ * Validate amount is positive
+ */
+export function isValidAmount(amount: string): boolean {
+    const num = parseFloat(amount);
+    return !isNaN(num) && num > 0 && isFinite(num);
+}
+
+/**
+ * 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';
+    }
+}
+
+interface FormState {
+    recipient: string;
+    amount: string;
+}
+
+interface ValidationState {
+    recipientError: string | null;
+    amountError: string | null;
+}
+
+interface KYCCheckState {
+    isChecking: boolean;
+    isVerified: boolean | null;
+    tier: AccreditationTier | null;
+}
+
+/**
+ * TokenMintForm component
+ */
+export function TokenMintForm({
+    tokenAddress,
+    kycRegistryAddress,
+    onSuccess,
+    onError,
+    className = '',
+}: TokenMintFormProps): JSX.Element {
+    const { client, isInitialized, hasSigner } = useRWA();
+
+    const [form, setForm] = useState<FormState>({ recipient: '', amount: '' });
+    const [validation, setValidation] = useState<ValidationState>({ recipientError: null, amountError: null });
+    const [kycCheck, setKycCheck] = useState<KYCCheckState>({ isChecking: false, isVerified: null, tier: null });
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState<Error | null>(null);
+    const [txResult, setTxResult] = useState<TransactionResult | null>(null);
+
+    // Validate recipient address
+    const validateRecipient = useCallback((address: string): string | null => {
+        if (!address) return 'Recipient address is required';
+        if (!isValidAddress(address)) return 'Invalid Ethereum address format';
+        return null;
+    }, []);
+
+    // Validate amount
+    const validateAmount = useCallback((amount: string): string | null => {
+        if (!amount) return 'Amount is required';
+        if (!isValidAmount(amount)) return 'Amount must be a positive number';
+        return null;
+    }, []);
+
+    // Handle recipient change
+    const handleRecipientChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setForm(prev => ({ ...prev, recipient: value }));
+        setValidation(prev => ({ ...prev, recipientError: validateRecipient(value) }));
+        setKycCheck({ isChecking: false, isVerified: null, tier: null });
+        setTxResult(null);
+    }, [validateRecipient]);
+
+    // Handle amount change
+    const handleAmountChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setForm(prev => ({ ...prev, amount: value }));
+        setValidation(prev => ({ ...prev, amountError: validateAmount(value) }));
+        setTxResult(null);
+    }, [validateAmount]);
+
+    // Check KYC status
+    const checkKYC = useCallback(async () => {
+        if (!client || !isInitialized || !form.recipient || !isValidAddress(form.recipient)) {
+            return;
+        }
+
+        setKycCheck({ isChecking: true, isVerified: null, tier: null });
+
+        try {
+            const registry = client.kyc.connect(kycRegistryAddress);
+            const info = await registry.getInvestorInfo(form.recipient);
+            setKycCheck({
+                isChecking: false,
+                isVerified: info.verified,
+                tier: info.tier,
+            });
+        } catch (err) {
+            setKycCheck({ isChecking: false, isVerified: false, tier: null });
+        }
+    }, [client, isInitialized, form.recipient, kycRegistryAddress]);
+
+    // Handle form submission
+    const handleSubmit = useCallback(async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        // Validate all fields
+        const recipientError = validateRecipient(form.recipient);
+        const amountError = validateAmount(form.amount);
+
+        setValidation({ recipientError, amountError });
+
+        if (recipientError || amountError) {
+            return;
+        }
+
+        // Check KYC if not already checked
+        if (kycCheck.isVerified === null) {
+            await checkKYC();
+            return; // User needs to submit again after KYC check
+        }
+
+        // Block if not verified
+        if (!kycCheck.isVerified) {
+            setError(new Error('Recipient is not KYC verified. Cannot mint tokens to unverified addresses.'));
+            return;
+        }
+
+        if (!client || !hasSigner) {
+            setError(new Error('Wallet not connected'));
+            return;
+        }
+
+        setIsPending(true);
+        setError(null);
+        setTxResult(null);
+
+        try {
+            const token = client.token.connect(tokenAddress);
+            const result = await token.mint(form.recipient, form.amount);
+            setTxResult(result);
+            onSuccess?.(result);
+            // Clear form on success
+            setForm({ recipient: '', amount: '' });
+            setKycCheck({ isChecking: false, isVerified: null, tier: null });
+        } catch (err) {
+            const errorObj = err instanceof Error ? err : new Error('Mint failed');
+            setError(errorObj);
+            onError?.(errorObj);
+        } finally {
+            setIsPending(false);
+        }
+    }, [form, validation, kycCheck, client, hasSigner, tokenAddress, validateRecipient, validateAmount, checkKYC, onSuccess, onError]);
+
+    const isFormValid = !validation.recipientError && !validation.amountError && form.recipient && form.amount;
+    const canSubmit = isFormValid && hasSigner && !isPending && (kycCheck.isVerified === null || kycCheck.isVerified);
+
+    return (
+        <div className={`rwa-token-mint-form ${className}`}>
+            <form onSubmit={handleSubmit} className="space-y-6">
+                {/* Recipient Address Field */}
+                <div>
+                    <label htmlFor="recipient" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Recipient Address
+                    </label>
+                    <input
+                        type="text"
+                        id="recipient"
+                        value={form.recipient}
+                        onChange={handleRecipientChange}
+                        onBlur={checkKYC}
+                        placeholder="0x..."
+                        className={`mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white ${validation.recipientError
+                                ? 'border-red-500 focus:border-red-500'
+                                : 'border-gray-300 dark:border-gray-600 focus:border-blue-500'
+                            }`}
+                    />
+                    {validation.recipientError && (
+                        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{validation.recipientError}</p>
+                    )}
+
+                    {/* KYC Status Display */}
+                    {kycCheck.isChecking && (
+                        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Checking KYC status...</p>
+                    )}
+                    {kycCheck.isVerified === true && (
+                        <p className="mt-2 text-sm text-green-600 dark:text-green-400">
+                            ✓ Verified ({getTierName(kycCheck.tier!)})
+                        </p>
+                    )}
+                    {kycCheck.isVerified === false && (
+                        <p className="mt-2 text-sm text-red-600 dark:text-red-400">
+                            ✗ Not KYC verified - cannot mint to this address
+                        </p>
+                    )}
+                </div>
+
+                {/* Amount Field */}
+                <div>
+                    <label htmlFor="amount" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Amount
+                    </label>
+                    <input
+                        type="text"
+                        id="amount"
+                        value={form.amount}
+                        onChange={handleAmountChange}
+                        placeholder="0.00"
+                        className={`mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white ${validation.amountError
+                                ? 'border-red-500 focus:border-red-500'
+                                : 'border-gray-300 dark:border-gray-600 focus:border-blue-500'
+                            }`}
+                    />
+                    {validation.amountError && (
+                        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{validation.amountError}</p>
+                    )}
+                </div>
+
+                {/* Wallet Connection Warning */}
+                {!hasSigner && (
+                    <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-md border border-yellow-200 dark:border-yellow-800">
+                        <p className="text-sm text-yellow-700 dark:text-yellow-300">
+                            Connect your wallet to mint tokens.
+                        </p>
+                    </div>
+                )}
+
+                {/* Error Display */}
+                {error && (
+                    <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-md border border-red-200 dark:border-red-800">
+                        <p className="text-sm text-red-700 dark:text-red-300">{error.message}</p>
+                    </div>
+                )}
+
+                {/* Success Display */}
+                {txResult && (
+                    <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-md border border-green-200 dark:border-green-800">
+                        <p className="text-sm text-green-700 dark:text-green-300">
+                            ✓ Mint successful! Transaction: {txResult.hash.slice(0, 10)}...
+                        </p>
+                    </div>
+                )}
+
+                {/* Submit Button */}
+                <button
+                    type="submit"
+                    disabled={!canSubmit}
+                    className={`w-full py-2 px-4 rounded-md font-medium transition-colors ${canSubmit
+                            ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                            : 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed'
+                        }`}
+                >
+                    {isPending ? 'Minting...' : kycCheck.isVerified === null && form.recipient ? 'Check KYC & Mint' : 'Mint Tokens'}
+                </button>
+            </form>
+        </div>
+    );
+}
+
+export default TokenMintForm;