-
- ${totalCostUsd || '0.00'}
+
+ โ ${totalCostUsd || "0.00"}
+
+
+
+ Approximate USD value
+
+
+
+ {totalCostEth
+ ? parseFloat(totalCostEth).toFixed(6)
+ : "0"} ETH
{totalCostEth ? parseFloat(totalCostEth).toFixed(6) : '0'} ETH
@@ -136,6 +185,23 @@ export const GasEstimator: React.FC = ({
Gas Limit
+
+
+ Confidence
+
+
+
+ {confidence.label} ({confidence.variance})
+
+
{estimatedGas?.toString() || '0'}
diff --git a/src/components/GasPriceBanner.tsx b/src/components/GasPriceBanner.tsx
new file mode 100644
index 00000000..d7fefbdf
--- /dev/null
+++ b/src/components/GasPriceBanner.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { useGasPriceStore } from "@/store/gasPriceStore";
+
+export const GasPriceBanner: React.FC = () => {
+ const { gasPrice, gasPriceThreshold } = useGasPriceStore();
+
+ if (gasPrice === null || gasPrice <= gasPriceThreshold) {
+ return null;
+ }
+
+ return (
+
+ High gas price warning: The current gas price is {gasPrice} Gwei, which is
+ above your threshold of {gasPriceThreshold} Gwei.
+
+ );
+};
diff --git a/src/components/HydrationProvider.tsx b/src/components/HydrationProvider.tsx
new file mode 100644
index 00000000..84e4d0b8
--- /dev/null
+++ b/src/components/HydrationProvider.tsx
@@ -0,0 +1,13 @@
+import useWalletHydration from "../hooks/useWalletHydration";
+
+type HydrationProviderProps = {
+ children: React.ReactNode;
+};
+
+const HydrationProvider = ({ children }: HydrationProviderProps) => {
+ const isHydrated = useWalletHydration();
+
+ return isHydrated ? <>{children} : null;
+};
+
+export default HydrationProvider;
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
index efd0e3d5..f2d31e55 100644
--- a/src/components/LanguageSwitcher.tsx
+++ b/src/components/LanguageSwitcher.tsx
@@ -9,7 +9,7 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Globe } from 'lucide-react';
-import { structuredLogger } from '@/utils/structuredLogger';
+import { logger } from '@/utils/logger';
const languages = [
{ code: 'en', name: 'English', flag: '๐บ๐ธ' },
@@ -40,7 +40,9 @@ export function LanguageSwitcher() {
html.dir = 'ltr';
}
- structuredLogger.component('LanguageSwitcher', 'changeLanguage', {
+ logger.info('Component: LanguageSwitcher - changeLanguage', {
+ component: 'LanguageSwitcher',
+ action: 'changeLanguage',
metadata: { languageCode, rtl: ['ar', 'he'].includes(languageCode) },
});
};
diff --git a/src/components/LazyChart.tsx b/src/components/LazyChart.tsx
new file mode 100644
index 00000000..cc6417a7
--- /dev/null
+++ b/src/components/LazyChart.tsx
@@ -0,0 +1,41 @@
+import dynamic from 'next/dynamic';
+import React, { ComponentType, useEffect, useRef, useState } from 'react';
+
+export function withLazyChart
(
+ importFunc: () => Promise<{ default: ComponentType }>,
+ LoadingShell: React.FC = () =>
+) {
+ const DynamicComponent = dynamic(importFunc, {
+ ssr: false,
+ loading: LoadingShell,
+ });
+
+ return function LazyWrapper(props: T) {
+ const [isVisible, setIsVisible] = useState(false);
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ observer.disconnect();
+ }
+ },
+ { rootMargin: '300px' }
+ );
+
+ if (ref.current) {
+ observer.observe(ref.current);
+ }
+
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ {isVisible ?
+ );
+ };
+}
diff --git a/src/components/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
index 2d0d862d..70bf9de1 100644
--- a/src/components/LoadingSpinner.tsx
+++ b/src/components/LoadingSpinner.tsx
@@ -1,6 +1,7 @@
'use client';
import React from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
interface LoadingSpinnerProps {
size?: 'sm' | 'md' | 'lg';
@@ -33,7 +34,6 @@ export const LoadingSpinner: React.FC = ({
${className}
`}
>
- {/* Visually hidden text for screen readers that don't support aria-label on div */}
{label}
);
@@ -94,11 +94,12 @@ interface SkeletonProps {
}
export const Skeleton: React.FC
= ({ className = '', lines = 1 }) => {
+ const id = React.useId();
return (
{Array.from({ length: lines }).map((_, index) => (
= ({ className = '', lines = 1 })
);
};
+
+/** @deprecated Use SkeletonBlock or the shadcn Skeleton component instead */
+export const Skeleton = SkeletonBlock;
diff --git a/src/components/MobileBottomNavigation.tsx b/src/components/MobileBottomNavigation.tsx
index 9cebdc72..0155b845 100644
--- a/src/components/MobileBottomNavigation.tsx
+++ b/src/components/MobileBottomNavigation.tsx
@@ -8,7 +8,7 @@ import {
Building2,
Briefcase,
Heart,
- User
+ History,
} from 'lucide-react';
import { cn } from '@/lib/utils';
@@ -45,29 +45,23 @@ const navItems: NavItem[] = [
icon: Heart,
},
{
- id: 'profile',
- name: 'Profile',
- href: '/dashboard',
- icon: User,
+ id: 'transactions',
+ name: 'History',
+ href: '/transactions',
+ icon: History,
},
];
export const MobileBottomNavigation: React.FC = () => {
const pathname = usePathname();
- // Only show on mobile screens
- if (typeof window !== 'undefined' && window.innerWidth >= 768) {
- return null;
- }
-
return (
{navItems.map((item) => {
const isActive = pathname === item.href ||
- (item.id === 'portfolio' && pathname.startsWith('/dashboard')) ||
- (item.id === 'profile' && pathname.startsWith('/dashboard'));
+ (item.id === 'portfolio' && pathname.startsWith('/dashboard'));
return (
= ({
propertyPrice = 1000,
defaultYield = 8
}) => {
+ const { t, i18n } = useTranslation('common');
+ const { formatCurrency, formatNumber } = useI18nFormatting();
+ const isRtl = i18n.dir() === 'rtl';
+
const [investment, setInvestment] = useState(propertyPrice);
const [yieldRate, setYieldRate] = useState(defaultYield);
- const [holdingPeriod, setHoldingPeriod] = useState(5); // years
- const [appreciation, setAppreciation] = useState(3); // % per year
+ const [holdingPeriod, setHoldingPeriod] = useState(5);
+ const [appreciation, setAppreciation] = useState(3);
const [results, setResults] = useState({
totalReturn: 0,
annualReturn: 0,
@@ -40,30 +49,17 @@ export const MortgageCalculator: React.FC<{ propertyPrice?: number, defaultYield
irr: 0
});
- useEffect(() => {
- calculate();
- }, [investment, yieldRate, holdingPeriod, appreciation]);
-
- const calculate = () => {
- // Basic calculation for tokenized real estate economics
+ const calculate = useCallback(() => {
const annualRentalIncome = investment * (yieldRate / 100);
const totalRentalIncome = annualRentalIncome * holdingPeriod;
-
- // Compounded appreciation
const finalValue = investment * Math.pow(1 + appreciation / 100, holdingPeriod);
const capitalGains = finalValue - investment;
-
const totalReturn = totalRentalIncome + capitalGains;
const roi = (totalReturn / investment) * 100;
const annualReturn = totalReturn / holdingPeriod;
-
- // Simplified break-even (months)
const breakEvenMonths = annualRentalIncome > 0
? Math.ceil((investment / annualRentalIncome) * 12)
: 0;
-
- // Simplified IRR (Internal Rate of Return)
- // Formula: (Total Return / Investment)^(1/years) - 1
const irr = (Math.pow((investment + totalReturn) / investment, 1 / holdingPeriod) - 1) * 100;
setResults({
@@ -73,47 +69,64 @@ export const MortgageCalculator: React.FC<{ propertyPrice?: number, defaultYield
breakEvenMonths,
irr
});
- };
+ }, [investment, yieldRate, holdingPeriod, appreciation]);
+
+ useEffect(() => {
+ calculate();
+ }, [calculate]);
const handleShare = () => {
- const text = `Check out my projected returns on PropChain: $${results.totalReturn.toFixed(2)} total return over ${holdingPeriod} years!`;
+ const yearsLabel = t('mortgageCalculator.yearsDuration', { count: holdingPeriod });
+ const text = t('mortgageCalculator.shareText', {
+ amount: formatCurrency(results.totalReturn),
+ years: yearsLabel,
+ });
+
+ let currentUrl = '';
+ try {
+ if (typeof window !== 'undefined') {
+ currentUrl = new URL(window.location.href).href;
+ }
+ } catch {
+ currentUrl = '';
+ }
+
if (navigator.share) {
navigator.share({
- title: 'PropChain Investment Projection',
+ title: t('mortgageCalculator.shareTitle'),
text,
- url: window.location.href,
+ url: currentUrl,
}).catch((err) => logger.error('Mortgage calculation error:', err));
} else {
navigator.clipboard.writeText(text);
- alert('Result copied to clipboard!');
+ alert(t('mortgageCalculator.copiedToClipboard'));
}
};
return (
-
+
-
+
-
+
- Estimate your potential returns from tokenized real estate
+ {t('mortgageCalculator.description')}
-
+
- {/* Inputs */}
-
-
Investment Amount ($)
-
${investment.toLocaleString()}
+
+ {t('mortgageCalculator.investmentAmount')}
+ {formatCurrency(investment)}
-
-
Expected Annual Yield (%)
-
{yieldRate}%
+
+ {t('mortgageCalculator.expectedAnnualYield')}
+ {formatNumber(yieldRate)}%
-
-
Holding Period (Years)
-
{holdingPeriod} Years
+
+ {t('mortgageCalculator.holdingPeriod')}
+
+ {t('mortgageCalculator.holdingPeriodValue', { count: holdingPeriod })}
+
-
-
Annual Appreciation (%)
-
{appreciation}%
+
+ {t('mortgageCalculator.annualAppreciation')}
+ {formatNumber(appreciation)}%
- {/* Outputs */}
-
Projected ROI
-
+{results.roi.toFixed(1)}%
+
{t('mortgageCalculator.projectedRoi')}
+
+{formatNumber(results.roi, { maximumFractionDigits: 1 })}%
-
Annual Return
-
${results.annualReturn.toFixed(0)}
+
{t('mortgageCalculator.annualReturn')}
+
{formatCurrency(results.annualReturn)}
-
IRR (Est.)
-
{results.irr.toFixed(1)}%
+
{t('mortgageCalculator.irrEstimate')}
+
{formatNumber(results.irr, { maximumFractionDigits: 1 })}%
-
Break-even
-
{results.breakEvenMonths} mo
+
{t('mortgageCalculator.breakEven')}
+
+ {t('mortgageCalculator.breakEvenMonths', { count: results.breakEvenMonths })}
+
-
-
Total Projected Value
-
${(investment + results.totalReturn).toLocaleString(undefined, { maximumFractionDigits: 0 })}
+
+ {t('mortgageCalculator.totalProjectedValue')}
+
+ {formatCurrency(investment + results.totalReturn)}
+
-
-
+
+
-
Principal
+
{t('mortgageCalculator.principal')}
-
+
-
Yield + Appreciation
+
{t('mortgageCalculator.yieldAndAppreciation')}
-
+
-
This is a simplified projection. Actual returns may vary based on market conditions, property occupancy, and platform fees.
+
{t('mortgageCalculator.disclaimer')}
- {/* Comparison Section */}
-
+
-
Liquidity
-
PropChain tokens can be sold 24/7 on the secondary market. Traditional real estate takes months to sell.
+
{t('mortgageCalculator.liquidity')}
+
{t('mortgageCalculator.liquidityDescription')}
-
Minimum Investment
-
Start with as little as $50. Traditional real estate requires large down payments ($20k+).
+
{t('mortgageCalculator.minimumInvestment')}
+
{t('mortgageCalculator.minimumInvestmentDescription')}
-
Management
-
PropChain handles all property management. Traditional requires being a landlord or hiring expensive managers.
+
{t('mortgageCalculator.management')}
+
{t('mortgageCalculator.managementDescription')}
diff --git a/src/components/MultiChainPortfolio.tsx b/src/components/MultiChainPortfolio.tsx
index 9c0acbd8..54604839 100644
--- a/src/components/MultiChainPortfolio.tsx
+++ b/src/components/MultiChainPortfolio.tsx
@@ -1,6 +1,7 @@
'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { RefreshCw, TrendingUp, AlertTriangle, ExternalLink, Filter, Wallet, Briefcase } from 'lucide-react';
import { usePortfolioStore } from '@/store/portfolioStore';
import { useWalletStore } from '@/store/walletStore';
@@ -9,7 +10,8 @@ import { formatPrice } from '@/utils/searchUtils';
import type { ChainPortfolio, BridgeSuggestion } from '@/types/portfolio';
import { EmptyState } from '@/components/ui/EmptyState';
-export const MultiChainPortfolio: React.FC = () => {
+const MultiChainPortfolioInner: React.FC = () => {
+ const { t, i18n } = useTranslation();
const {
portfolio,
selectedChain,
@@ -40,21 +42,20 @@ export const MultiChainPortfolio: React.FC = () => {
return portfolio.chains.filter(chain => chain.chainId === selectedChain);
}, [portfolio, selectedChain]);
- const handleRefresh = () => {
+ const handleRefresh = useCallback(() => {
refreshPortfolio();
- };
+ }, [refreshPortfolio]);
if (!isConnected) {
return (
{
// This would typically trigger the wallet connection modal
- // but for now we just show the requirement
}
}}
className="bg-white dark:bg-gray-800 rounded-xl shadow-lg"
@@ -66,7 +67,7 @@ export const MultiChainPortfolio: React.FC = () => {
return (
-
Loading portfolio...
+
{t('multiChainPortfolio.loadingPortfolio')}
);
}
@@ -74,11 +75,11 @@ export const MultiChainPortfolio: React.FC = () => {
if (error || !portfolio) {
return (
{
if (totalHoldings === 0) {
return (
{
}
return (
-
+
{/* Portfolio Summary */}
- Portfolio Overview
+ {t('multiChainPortfolio.portfolioOverview')}
{
- Total Value (USD)
+ {t('multiChainPortfolio.totalValueUSD')}
{formatPrice(portfolio.totalValueUSD)}
@@ -131,7 +132,7 @@ export const MultiChainPortfolio: React.FC = () => {
- Total Properties
+ {t('multiChainPortfolio.totalProperties')}
{portfolio.chains.reduce((sum, chain) => sum + chain.holdings.length, 0)}
@@ -139,7 +140,7 @@ export const MultiChainPortfolio: React.FC = () => {
- Chains Used
+ {t('multiChainPortfolio.chainsUsed')}
{portfolio.chains.length}
@@ -153,7 +154,7 @@ export const MultiChainPortfolio: React.FC = () => {
- Filter by Chain
+ {t('multiChainPortfolio.filterByChain')}
@@ -166,7 +167,7 @@ export const MultiChainPortfolio: React.FC = () => {
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
}`}
>
- All Chains ({portfolio.chains.length})
+ {t('multiChainPortfolio.allChainsWithCount', { count: portfolio.chains.length })}
{portfolio.chains.map((chain) => (
@@ -183,7 +184,7 @@ export const MultiChainPortfolio: React.FC = () => {
className="w-3 h-3 rounded-full"
style={{ backgroundColor: chain.chainColor }}
/>
- {chain.chainName} ({chain.holdings.length})
+ {chain.chainName} ({t('multiChainPortfolio.properties', { count: chain.holdings.length })})
))}
@@ -203,21 +204,21 @@ export const MultiChainPortfolio: React.FC = () => {
- Bridge Suggestions
+ {t('multiChainPortfolio.bridgeSuggestions')}
setShowBridgeSuggestions(!showBridgeSuggestions)}
className="text-blue-600 hover:text-blue-700 font-medium"
>
- {showBridgeSuggestions ? 'Hide' : 'Show'}
+ {showBridgeSuggestions ? t('multiChainPortfolio.hide') : t('multiChainPortfolio.show')}
{showBridgeSuggestions && (
- {bridgeSuggestions.map((suggestion, index) => (
-
)}
@@ -227,6 +228,8 @@ export const MultiChainPortfolio: React.FC = () => {
);
};
+export const MultiChainPortfolio = React.memo(MultiChainPortfolioInner);
+
interface ChainPortfolioCardProps {
chain: ChainPortfolio;
}
@@ -245,13 +248,13 @@ const ChainPortfolioCard: React.FC = ({ chain }) => {
{chain.chainName}
- {chain.holdings.length} properties
+ {t('multiChainPortfolio.properties', { count: chain.holdings.length })}
- Total Value
+ {t('multiChainPortfolio.totalValue')}
{formatPrice(chain.totalValueUSD)}
@@ -264,7 +267,7 @@ const ChainPortfolioCard: React.FC = ({ chain }) => {
- Gas Balance
+ {t('multiChainPortfolio.gasBalance')}
{chain.gasBalance} {chain.chainSymbol}
@@ -272,7 +275,7 @@ const ChainPortfolioCard: React.FC = ({ chain }) => {
- Value in USD
+ {t('multiChainPortfolio.valueInUSD')}
{formatPrice(chain.gasBalanceUSD)}
@@ -296,7 +299,7 @@ const ChainPortfolioCard: React.FC = ({ chain }) => {
{holding.propertyName}
- {holding.quantity} tokens
+ {t('multiChainPortfolio.tokens', { count: holding.quantity })}
@@ -335,18 +338,18 @@ const BridgeSuggestionCard: React.FC = ({ suggestion
- From: {CHAIN_CONFIG[suggestion.fromChain].name}
+ {t('multiChainPortfolio.fromLabel', { chain: CHAIN_CONFIG[suggestion.fromChain].name })}
- To: {CHAIN_CONFIG[suggestion.toChain].name}
+ {t('multiChainPortfolio.toLabel', { chain: CHAIN_CONFIG[suggestion.toChain].name })}
- Save: {formatPrice(suggestion.potentialSavings)}
+ {t('multiChainPortfolio.saveAmount', { amount: formatPrice(suggestion.potentialSavings) })}
- Bridge
+ {t('multiChainPortfolio.bridgeAction')}
{
- Select Network
+ {t('networkSwitcher.selectNetwork')}
{SUPPORTED_CHAINS.map((chain) => (
{
const { transactions } = useTransactionStore();
@@ -81,7 +82,7 @@ export const NotificationSystem: React.FC = () => {
// For now, we'll show notifications for all transactions with final states
if (transaction.status === 'confirmed' || transaction.status === 'failed' || transaction.status === 'cancelled') {
// Check if we haven't notified about this transaction yet
- const notifiedKey = `notified_${transaction.id}`;
+ const notifiedKey = notifiedTxKey(transaction.id);
if (!localStorage.getItem(notifiedKey)) {
handleTransactionUpdate(transaction);
localStorage.setItem(notifiedKey, 'true');
diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
index 6fe34763..807117ab 100644
--- a/src/components/OnboardingTour.tsx
+++ b/src/components/OnboardingTour.tsx
@@ -7,12 +7,21 @@ import { Button } from '@/components/ui/button';
import { X, ChevronRight, ChevronLeft, Building2, Wallet, Search, BarChart3, Info } from 'lucide-react';
import { cn } from '@/lib/utils';
+type StepId = 'welcome' | 'wallet' | 'browse' | 'purchase' | 'portfolio';
+
interface Step {
- id: string;
+ id: StepId;
title: string;
description: string;
- target?: string;
- icon: React.ReactNode;
+ /** CSS selector for the element to highlight. Omit for full-screen steps. */
+ target?: `[data-tour="${string}"]`;
+ icon: React.ReactElement;
+}
+
+interface TourCardPosition {
+ top: number | 'auto';
+ bottom: number | 'auto';
+ left: number;
}
const steps: Step[] = [
@@ -52,18 +61,32 @@ const steps: Step[] = [
},
];
+/**
+ * Returns the focusable elements inside a container, in tab order.
+ * Excludes elements with `tabindex="-1"` or `disabled`, and hidden inputs.
+ */
+function getFocusableElements(container: HTMLElement | null): HTMLElement[] {
+ if (!container) return [];
+ const selector =
+ 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+ return Array.from(container.querySelectorAll(selector)).filter(
+ (el) => !el.hasAttribute('inert') && el.tabIndex !== -1
+ );
+}
+
export const OnboardingTour: React.FC = () => {
- const {
- isActive,
- currentStep,
- nextStep,
- prevStep,
- stopOnboarding,
- completeOnboarding
+ const {
+ isActive,
+ currentStep,
+ nextStep,
+ prevStep,
+ stopOnboarding,
+ completeOnboarding,
} = useOnboardingStore();
const [targetRect, setTargetRect] = useState(null);
- const portalRef = useRef(null);
+ const cardRef = useRef(null);
+ const previousFocusRef = useRef(null);
const step = steps[currentStep];
@@ -93,6 +116,88 @@ export const OnboardingTour: React.FC = () => {
};
}, [isActive, step]);
+ // Focus management: move focus into the tour card when it opens,
+ // and restore focus to the element that was active before it opened.
+ useEffect(() => {
+ if (!isActive) return;
+
+ previousFocusRef.current = (document.activeElement as HTMLElement) ?? null;
+
+ // Wait a frame so the card has rendered its focusable children.
+ const focusTimer = window.setTimeout(() => {
+ const focusables = getFocusableElements(cardRef.current);
+ if (focusables.length > 0) {
+ focusables[0].focus();
+ } else if (cardRef.current) {
+ cardRef.current.focus();
+ }
+ }, 0);
+
+ return () => {
+ window.clearTimeout(focusTimer);
+ const previous = previousFocusRef.current;
+ if (previous && typeof previous.focus === 'function') {
+ previous.focus();
+ }
+ previousFocusRef.current = null;
+ };
+ }, [isActive]);
+
+ // Keyboard handling: Escape closes the tour; Tab/Shift+Tab cycle within it.
+ useEffect(() => {
+ if (!isActive) return;
+
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ event.stopPropagation();
+ stopOnboarding();
+ return;
+ }
+
+ if (event.key !== 'Tab') return;
+
+ const focusables = getFocusableElements(cardRef.current);
+ if (focusables.length === 0) {
+ // Nothing focusable inside โ swallow Tab so focus stays put.
+ event.preventDefault();
+ return;
+ }
+
+ const first = focusables[0];
+ const last = focusables[focusables.length - 1];
+ const active = document.activeElement as HTMLElement | null;
+ const insideCard =
+ active && cardRef.current ? cardRef.current.contains(active) : false;
+
+ if (event.shiftKey) {
+ if (!insideCard) {
+ // Focus is outside the dialog โ pull it back to the last item.
+ event.preventDefault();
+ last.focus();
+ } else if (active === first) {
+ // At the first focusable โ wrap to the last.
+ event.preventDefault();
+ last.focus();
+ }
+ // Middle items: let the browser advance focus naturally (still inside the card).
+ } else {
+ if (!insideCard) {
+ // Focus is outside the dialog โ pull it back to the first item.
+ event.preventDefault();
+ first.focus();
+ } else if (active === last) {
+ // At the last focusable โ wrap to the first.
+ event.preventDefault();
+ first.focus();
+ }
+ // Middle items: let the browser advance focus naturally (still inside the card).
+ }
+ };
+
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [isActive, stopOnboarding]);
+
if (!isActive) return null;
const isLastStep = currentStep === steps.length - 1;
@@ -120,6 +225,11 @@ export const OnboardingTour: React.FC = () => {
{/* Tour Card */}
{
"pointer-events-auto w-full max-w-sm bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-800 p-6 m-4",
targetRect ? "absolute" : "relative"
)}
- style={targetRect ? {
- top: targetRect.bottom + 20 > window.innerHeight - 200 ? 'auto' : targetRect.bottom + 20,
- bottom: targetRect.bottom + 20 > window.innerHeight - 200 ? window.innerHeight - targetRect.top + 20 : 'auto',
- left: Math.max(20, Math.min(window.innerWidth - 380, targetRect.left + (targetRect.width / 2) - 192)),
- } : {}}
+ style={targetRect ? (() => {
+ const pos: TourCardPosition = {
+ top: targetRect.bottom + 20 > window.innerHeight - 200 ? 'auto' : targetRect.bottom + 20,
+ bottom: targetRect.bottom + 20 > window.innerHeight - 200 ? window.innerHeight - targetRect.top + 20 : 'auto',
+ left: Math.max(20, Math.min(window.innerWidth - 380, targetRect.left + (targetRect.width / 2) - 192)),
+ };
+ return pos;
+ })() : {}}
>
= ({
+const WALLET_OPTIONS = [
+ { id: 'metamask', name: 'MetaMask', installUrl: 'https://metamask.io/download/' },
+ { id: 'walletconnect', name: 'WalletConnect', description: 'Scan a QR code with any mobile wallet' },
+ { id: 'coinbase', name: 'Coinbase Wallet', installUrl: 'https://www.coinbase.com/wallet' },
+] as const;
+
+const PropertyCardInner: React.FC = ({
property,
viewMode = 'grid'
}) => {
@@ -36,42 +42,36 @@ export const PropertyCard: React.FC = ({
const { addFavorite, removeFavorite, isFavorite } = useFavoritesStore();
const handleAddToCart = (e: React.MouseEvent) => {
- e.preventDefault();
e.stopPropagation();
addItem(property, 1);
- };
+ }, [addItem, property]);
const handleComparisonToggle = (e: React.MouseEvent) => {
- e.preventDefault();
e.stopPropagation();
toggleProperty(property);
- };
+ }, [toggleProperty, property]);
const handleCompareToggle = (e: React.MouseEvent) => {
- e.preventDefault();
e.stopPropagation();
if (!compareLimitReached) {
togglePropertyId(property.id);
}
- };
+ }, [compareLimitReached, togglePropertyId, property.id]);
const handleToggleFavorite = (e: React.MouseEvent) => {
- e.preventDefault();
e.stopPropagation();
if (isFavorite(property.id)) {
removeFavorite(property.id);
} else {
addFavorite(property);
}
- };
+ }, [isFavorite, removeFavorite, addFavorite, property]);
return (
-
@@ -83,14 +83,24 @@ export const PropertyCard: React.FC
= ({
/>
{/* Badge Container */}
+ {/*
+ * Badge palette tuned for WCAG AA contrast (>=4.5:1) on both light
+ * and dark surfaces. Light mode: white text on saturated dark colour.
+ * Dark mode: white text on slightly lighter hue, still well above 4.5:1
+ * against the gray-800 card surface.
+ * Featured: bg-yellow-700/800 (>=4.7:1 vs white)
+ * Verified: bg-emerald-700/800 (>=4.7:1 vs white)
+ * ROI: bg-blue-700/800 (>=6:1 vs white)
+ */}
{property.featured && (
-
- โญ Featured
+
+
)}
{property.verified && (
-
+
@@ -100,16 +110,15 @@ export const PropertyCard: React.FC = ({
-
+
+
{formatROI(property.metrics.roi)} ROI
- {/* Comparison Toggle */}
= ({
)}
- {/* Favorite Button */}
@@ -138,10 +146,10 @@ export const PropertyCard: React.FC = ({
/>
- {/* Blockchain Badge */}
- {/* Compare Toggle */}
- {/* Content */}
- {/* Property Type */}
- {getPropertyTypeIcon(property.propertyType)}
{PROPERTY_TYPE_LABELS[property.propertyType]}
- {/* Title */}
-
+
+
- {/* Location */}
= ({
- {/* Description */}
{isListView && (
{property.description}
)}
- {/* Details */}
{property.details.bedrooms && (
{property.details.bedrooms && (
@@ -233,12 +236,11 @@ export const PropertyCard: React.FC
= ({
- {formatNumber(property.details.squareFeet)} sqft
+ {formatNumber(property.details.squareFeet)} sqft
)}
- {/* Token Info */}
Available Tokens
@@ -254,7 +256,6 @@ export const PropertyCard: React.FC
= ({
- {/* Price and CTA */}
Total Value
@@ -271,7 +272,7 @@ export const PropertyCard: React.FC
= ({
/>
= ({
Add to Cart
-
+
+
= ({ propertyId }) =>
{property.featured && (
- โญ Featured
+
)}
{property.verified && (
- โ Verified
+
)}
@@ -158,7 +161,6 @@ export const PropertyDetail: React.FC = ({ propertyId }) =>
{/* Title and Location */}
-
{getPropertyTypeIcon(property.propertyType)}
{PROPERTY_TYPE_LABELS[property.propertyType]}
diff --git a/src/components/PropertyDetailServer.tsx b/src/components/PropertyDetailServer.tsx
index f3fa19ad..f34fd567 100644
--- a/src/components/PropertyDetailServer.tsx
+++ b/src/components/PropertyDetailServer.tsx
@@ -4,24 +4,35 @@ import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { formatPrice, formatROI, getBlockchainColor, getPropertyTypeIcon } from '@/utils/searchUtils';
import { BLOCKCHAIN_LABELS, PROPERTY_TYPE_LABELS } from '@/types/property';
-import type { Property } from '@/types/property';
-import { ImageGallery } from './ImageGallery';
-import { CurrencyToggle } from './CurrencyToggle';
-import { MortgageCalculator } from './MortgageCalculator';
+import type { PropertyDetailServerProps } from '@/types/propertyDetail';
+import {
+ formatPropertyLocation,
+ formatTokenAvailability,
+ getCalculatorDefaults,
+ getPropertyMetricsSummary,
+ getPropertyPriceValues,
+ hasBathrooms,
+ hasBedrooms,
+} from '@/types/propertyDetail';
+import { ImageGallery } from './property/ImageGallery';
+import { CurrencyToggle } from './property/CurrencyToggle';
+import { withLazyChart } from './LazyChart';
+const MortgageCalculator = withLazyChart(() => import('./MortgageCalculator').then(m => ({ default: m.MortgageCalculator })));
-interface PropertyDetailServerProps {
- property: Property;
-}
+export type { PropertyDetailServerProps } from '@/types/propertyDetail';
export const PropertyDetailServer: React.FC
= ({ property }) => {
+ const locationDisplay = formatPropertyLocation(property.location);
+ const tokenAvailability = formatTokenAvailability(property.tokenInfo);
+ const priceValues = getPropertyPriceValues(property.price);
+ const metricsSummary = getPropertyMetricsSummary(property.metrics);
+ const calculatorDefaults = getCalculatorDefaults(property);
+
return (
- {/* Property Header */}
- {/* Main Image and Gallery */}
- {/* Badges */}
{property.featured && (
@@ -35,10 +46,9 @@ export const PropertyDetailServer: React.FC = ({ prop
)}
- {/* ROI Badge */}
- {formatROI(property.metrics.roi)} ROI
+ {formatROI(metricsSummary.roi)} ROI
@@ -49,9 +59,7 @@ export const PropertyDetailServer: React.FC
= ({ prop
- {/* Property Info Sidebar */}
- {/* Title and Location */}
{getPropertyTypeIcon(property.propertyType)}
@@ -68,12 +76,11 @@ export const PropertyDetailServer: React.FC
= ({ prop
- {property.location.address}, {property.location.city}, {property.location.state}
+ {locationDisplay.fullAddress}
- {/* Price Information */}
Investment Details
@@ -81,28 +88,27 @@ export const PropertyDetailServer: React.FC = ({ prop
Total Value
-
Per Token
-
Available Tokens
- {property.tokenInfo.available.toLocaleString()} / {property.tokenInfo.totalSupply.toLocaleString()}
+ {tokenAvailability.formattedAvailability}
Expected ROI
- {formatROI(property.metrics.roi)}
+ {formatROI(metricsSummary.roi)}
- {/* Blockchain Information */}
Blockchain
@@ -125,9 +131,7 @@ export const PropertyDetailServer: React.FC = ({ prop
- {/* Property Details */}
- {/* Description */}
@@ -140,14 +144,13 @@ export const PropertyDetailServer: React.FC = ({ prop
- {/* Property Features */}
Property Features
- {property.details.bedrooms && (
+ {hasBedrooms(property.details) && (
@@ -159,7 +162,7 @@ export const PropertyDetailServer: React.FC = ({ prop
)}
- {property.details.bathrooms && (
+ {hasBathrooms(property.details) && (
@@ -187,7 +190,7 @@ export const PropertyDetailServer: React.FC = ({ prop
-
{formatROI(property.metrics.roi)}
+
{formatROI(metricsSummary.roi)}
ROI
@@ -195,9 +198,7 @@ export const PropertyDetailServer: React.FC
= ({ prop
- {/* Investment Summary */}
Investment Summary
@@ -206,13 +207,13 @@ export const PropertyDetailServer: React.FC = ({ prop
Annual Yield
- {formatROI(property.metrics.roi)}
+ {formatROI(metricsSummary.roi)}
Transaction Volume
- {property.metrics.transactionVolume.toLocaleString()}
+ {metricsSummary.transactionVolume.toLocaleString()}
@@ -224,7 +225,6 @@ export const PropertyDetailServer: React.FC
= ({ prop
- {/* External Links */}
External Links
@@ -247,11 +247,10 @@ export const PropertyDetailServer: React.FC = ({ prop
diff --git a/src/components/PropertySearch.tsx b/src/components/PropertySearch.tsx
index 01483d6c..d0636906 100644
--- a/src/components/PropertySearch.tsx
+++ b/src/components/PropertySearch.tsx
@@ -1,6 +1,6 @@
'use client';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useId } from 'react';
import { useDebounce } from '@/hooks/useDebounce';
import { usePropertyAutocompleteQuery } from '@/hooks/usePropertySearchQuery';
import { useSearchHistory } from '@/hooks/useSearchHistory';
@@ -24,6 +24,7 @@ export const PropertySearch = ({
const [showHistory, setShowHistory] = useState(false);
const inputRef = useRef
(null);
const dropdownRef = useRef(null);
+ const listboxId = useId();
const { saveToHistory } = useSearchHistory();
@@ -112,6 +113,8 @@ export const PropertySearch = ({
};
const showDropdown = isFocused && (suggestions.length > 0 || isLoading || showHistory);
+ const activeOptionId = selectedIndex >= 0 ? `${listboxId}-option-${selectedIndex}` : undefined;
+ // Keep the input and suggestion list in sync for assistive technologies.
return (
@@ -141,6 +144,12 @@ export const PropertySearch = ({
onFocus={handleFocus}
onKeyDown={handleKeyDown}
placeholder={placeholder}
+ role="combobox"
+ aria-autocomplete="list"
+ aria-controls={showDropdown ? listboxId : undefined}
+ aria-expanded={showDropdown}
+ aria-activedescendant={activeOptionId}
+ aria-haspopup="listbox"
data-tour="browse-properties"
className="w-full pl-12 pr-12 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
/>
@@ -166,6 +175,8 @@ export const PropertySearch = ({
{showDropdown && (
{showHistory && !isLoading && suggestions.length === 0 ? (
@@ -185,6 +196,9 @@ export const PropertySearch = ({
{suggestions.map((suggestion, index) => (
handleSuggestionClick(suggestion)}
className={`w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
index === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : ''
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
index 5f25c2da..f52603ae 100644
--- a/src/components/QRCode.tsx
+++ b/src/components/QRCode.tsx
@@ -1,29 +1,71 @@
'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getDisplaySafeUrl, validateQRCodeUrl } from '@/utils/security/qrCodeSecurity';
interface QRCodeProps {
url: string;
size?: number;
className?: string;
+ allowedHosts?: readonly string[];
}
-export const QRCode: React.FC = ({ url, size = 150, className = '' }) => {
- // Simple QR code placeholder - in a real implementation, you'd use a QR code library
- // For now, we'll create a simple placeholder that shows the URL
+export const QRCode: React.FC = ({
+ url,
+ size = 150,
+ className = '',
+ allowedHosts,
+}) => {
+ const { t } = useTranslation('common');
+
+ const validation = useMemo(
+ () => validateQRCodeUrl(url, allowedHosts),
+ [url, allowedHosts],
+ );
+
+ const displayUrl = useMemo(
+ () => (validation.isValid && validation.sanitizedUrl ? getDisplaySafeUrl(validation.sanitizedUrl) : ''),
+ [validation],
+ );
+
+ if (!validation.isValid) {
+ return (
+
+
+
+ {t('qrCode.invalidUrl')}
+
+
+
-
- {url}
-
+
{displayUrl}
- [QR Code Placeholder]
+ {t('qrCode.placeholder')}
+ {validation.warnings.length > 0 && (
+
+ {t('qrCode.securityWarning')}
+
+ )}
);
diff --git a/src/components/RouteTransition.tsx b/src/components/RouteTransition.tsx
new file mode 100644
index 00000000..1e644a5a
--- /dev/null
+++ b/src/components/RouteTransition.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { usePathname } from "next/navigation";
+import { motion, AnimatePresence, type Variants, type Transition } from "framer-motion";
+
+interface RouteTransitionProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+const routeVariants: Variants = {
+ initial: {
+ opacity: 0,
+ y: 8,
+ },
+ enter: {
+ opacity: 1,
+ y: 0,
+ },
+ exit: {
+ opacity: 0,
+ y: -8,
+ },
+};
+
+const routeTransition: Transition = {
+ type: "tween",
+ ease: "easeInOut",
+ duration: 0.2,
+};
+
+const reducedMotionVariants: Variants = {
+ initial: {
+ opacity: 0,
+ },
+ enter: {
+ opacity: 1,
+ },
+ exit: {
+ opacity: 0,
+ },
+};
+
+const reducedMotionTransition: Transition = {
+ duration: 0.1,
+};
+
+function usePrefersReducedMotion(): boolean {
+ const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+ setPrefersReducedMotion(mediaQuery.matches);
+
+ const handler = (event: MediaQueryListEvent) => {
+ setPrefersReducedMotion(event.matches);
+ };
+
+ mediaQuery.addEventListener("change", handler);
+ return () => mediaQuery.removeEventListener("change", handler);
+ }, []);
+
+ return prefersReducedMotion;
+}
+
+export function RouteTransition({ children, className }: RouteTransitionProps) {
+ const pathname = usePathname();
+ const prefersReducedMotion = usePrefersReducedMotion();
+
+ const variants = prefersReducedMotion ? reducedMotionVariants : routeVariants;
+ const transition = prefersReducedMotion ? reducedMotionTransition : routeTransition;
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+interface AnimatedLinkProps {
+ href: string;
+ children: React.ReactNode;
+ className?: string;
+ activeClassName?: string;
+}
+
+export function useAnimatedNavigation() {
+ const pathname = usePathname();
+ const [isTransitioning, setIsTransitioning] = useState(false);
+
+ const startTransition = useCallback(() => {
+ setIsTransitioning(true);
+ }, []);
+
+ const endTransition = useCallback(() => {
+ setIsTransitioning(false);
+ }, []);
+
+ return {
+ pathname,
+ isTransitioning,
+ startTransition,
+ endTransition,
+ };
+}
diff --git a/src/components/SearchResults.tsx b/src/components/SearchResults.tsx
index aded03c7..7ebbab59 100644
--- a/src/components/SearchResults.tsx
+++ b/src/components/SearchResults.tsx
@@ -3,6 +3,7 @@
import React, { useRef, useEffect } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { PropertyCard } from './PropertyCard';
+import { VirtualizedPropertyGrid } from './VirtualizedPropertyGrid';
import { SaveSearchButton } from './SaveSearchButton';
import { PropertyPagination } from './PropertyPagination';
import type { Property, ViewMode, SortOption, SearchFilters } from '@/types/property';
@@ -32,7 +33,7 @@ interface SearchResultsProps {
buildPageHref?: (page: number) => string;
}
-export const SearchResults: React.FC = ({
+const SearchResultsInner: React.FC = ({
properties,
totalResults,
isLoading,
@@ -69,15 +70,6 @@ export const SearchResults: React.FC = ({
return () => window.removeEventListener('resize', updateColumns);
}, [viewMode]);
- const rowCount = Math.ceil(properties.length / columns);
-
- const rowVirtualizer = useVirtualizer({
- count: rowCount,
- getScrollElement: () => parentRef.current,
- estimateSize: () => (viewMode === 'grid' ? 450 : 200),
- overscan: 5,
- });
-
if (error) {
return (
@@ -191,17 +183,7 @@ export const SearchResults: React.FC
= ({
{/* Results Grid/List */}
{!isLoading && properties.length > 0 && (
<>
-
- {properties.map((property) => (
-
- ))}
-
= ({
);
};
+export const SearchResults = React.memo(SearchResultsInner);
+
function cn(...classes: any[]) {
return classes.filter(Boolean).join(' ');
}
\ No newline at end of file
diff --git a/src/components/SecureTransactionConfirmation.tsx b/src/components/SecureTransactionConfirmation.tsx
index 90f6f5e5..75df20c2 100644
--- a/src/components/SecureTransactionConfirmation.tsx
+++ b/src/components/SecureTransactionConfirmation.tsx
@@ -236,7 +236,7 @@ export const SecureTransactionConfirmation: React.FC
{validation.warnings.map((warning: string, index: number) => (
-
+
โข {warning}
))}
@@ -254,7 +254,7 @@ export const SecureTransactionConfirmation: React.FC
{validation.risks.map((risk: string, index: number) => (
-
+
โข {risk}
))}
diff --git a/src/components/ServiceWorkerRegistration.tsx b/src/components/ServiceWorkerRegistration.tsx
index ddc17afb..db4b1a18 100644
--- a/src/components/ServiceWorkerRegistration.tsx
+++ b/src/components/ServiceWorkerRegistration.tsx
@@ -4,9 +4,26 @@ import { useEffect } from "react";
import { logger } from "@/utils/logger";
import { startQueueAutoFlush } from "@/lib/offlineTransactionQueue";
+/**
+ * Schedules a callback during browser idle time, falling back to setTimeout.
+ */
+function scheduleWhenIdle(callback: () => void): () => void {
+ if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+ const handle = window.requestIdleCallback(callback, { timeout: 5000 });
+ return () => window.cancelIdleCallback(handle);
+ }
+
+ const timeout = window.setTimeout(callback, 2000);
+ return () => window.clearTimeout(timeout);
+}
+
/**
* Registers the service worker, wires update notifications, and starts the
* offline transaction-queue auto-flush listener.
+ *
+ * Registration is deferred via requestIdleCallback (with a 5 s timeout)
+ * to avoid blocking the initial paint and keep Time to Interactive low.
+ * The auto-flush listener is still started eagerly since it is cheap.
*/
export function ServiceWorkerRegistration(): null {
useEffect(() => {
@@ -45,16 +62,13 @@ export function ServiceWorkerRegistration(): null {
}
};
- if (document.readyState === "complete") {
- register();
- } else {
- window.addEventListener("load", register, { once: true });
- }
+ const cancelIdle = scheduleWhenIdle(register);
const stopAutoFlush = startQueueAutoFlush();
return () => {
cancelled = true;
+ cancelIdle();
stopAutoFlush();
};
}, []);
diff --git a/src/components/SlippageControl.tsx b/src/components/SlippageControl.tsx
new file mode 100644
index 00000000..98343704
--- /dev/null
+++ b/src/components/SlippageControl.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import React, { useState } from "react";
+import { useCartStore } from "@/store/cartStore";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+const SLIPPAGE_PRESETS = [0.001, 0.005, 0.01]; // 0.1%, 0.5%, 1%
+
+export const SlippageControl: React.FC = () => {
+ const { slippageTolerance, setSlippageTolerance } = useCartStore();
+ const [customSlippage, setCustomSlippage] = useState(
+ (slippageTolerance * 100).toString(),
+ );
+
+ const handlePresetClick = (preset: number) => {
+ setSlippageTolerance(preset);
+ setCustomSlippage((preset * 100).toString());
+ };
+
+ const handleCustomSlippageChange = (
+ e: React.ChangeEvent,
+ ) => {
+ const value = e.target.value;
+ setCustomSlippage(value);
+ const numericValue = parseFloat(value);
+ if (!isNaN(numericValue) && numericValue > 0) {
+ setSlippageTolerance(numericValue / 100);
+ }
+ };
+
+ return (
+
+
Slippage Tolerance
+
+ {SLIPPAGE_PRESETS.map((preset) => (
+ handlePresetClick(preset)}
+ >
+ {preset * 100}%
+
+ ))}
+
+
= {};
+ for (const tx of transactions) {
+ counts[tx.status] = (counts[tx.status] ?? 0) + 1;
+ }
+ return Object.entries(counts).map(([name, value]) => ({ name, value }));
+};
+
+/** Counts transactions by `type`. */
+export const computeTypeChartData = (transactions: Transaction[]): ChartDatum[] => {
+ const counts: Record = {};
+ for (const tx of transactions) {
+ counts[tx.type] = (counts[tx.type] ?? 0) + 1;
+ }
+ return Object.entries(counts).map(([name, value]) => ({ name, value }));
+};
+
+export type VolumeDatum = { date: string; value: number };
+
+/**
+ * Daily sum of `value` per timestamp, sorted ascending by `yyyy-MM-dd`
+ * date string, capped at the 30 most recent buckets. Missing or empty
+ * `value` short-circuits to 0 via `parseFloat(tx.value || '0')`.
+ */
+export const computeVolumeChartData = (
+ transactions: Transaction[]
+): VolumeDatum[] => {
+ const dailyVolume: Record = {};
+ for (const tx of transactions) {
+ const date = format(new Date(tx.timestamp), 'yyyy-MM-dd');
+ dailyVolume[date] = (dailyVolume[date] ?? 0) + parseFloat(tx.value || '0');
+ }
+ return Object.entries(dailyVolume)
+ .map(([date, value]) => ({ date, value }))
+ .sort((a, b) => a.date.localeCompare(b.date))
+ .slice(-30);
+};
+
+export const TransactionAnalytics: React.FC = ({
+ transactions,
+ isLoading,
+}) => {
+ // #506: each chart slice delegates to a pure derivation above. Wrapping
+ // each in its own `useMemo` (with `transactions` as the dep) means the
+ // slices are independently testable and individually swappable, even
+ // though their shared dep means they invalidate together.
+ const statusChartData = useMemo(
+ () => computeStatusChartData(transactions),
+ [transactions]
+ );
+
+ const typeChartData = useMemo(
+ () => computeTypeChartData(transactions),
+ [transactions]
+ );
+
+ const volumeChartData = useMemo(
+ () => computeVolumeChartData(transactions),
+ [transactions]
+ );
+
+ if (isLoading) {
+ return null;
+ }
+
+ if (transactions.length === 0) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ `${name} ${(percent * 100).toFixed(0)}%`
+ }
+ outerRadius={80}
+ fill="#8884d8"
+ dataKey="value"
+ >
+ {statusChartData.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
= ({
: 0;
const handleViewOnExplorer = () => {
+ // Security: validate hash format before constructing URL to prevent open-redirect
+ if (!/^0x[0-9a-fA-F]{64}$/.test(transaction.hash)) {
+ return;
+ }
+ // Security: only open URLs from known block explorers (no user-controlled input in origin)
const explorerUrl = `${chainConfig.blockExplorer}/tx/${transaction.hash}`;
- window.open(explorerUrl, '_blank');
+ try {
+ const url = new URL(explorerUrl);
+ if (url.protocol !== 'https:') return;
+ window.open(explorerUrl, '_blank', 'noopener,noreferrer');
+ } catch {
+ // Invalid URL โ do nothing
+ }
};
return (
diff --git a/src/components/TransactionConfirmation.tsx b/src/components/TransactionConfirmation.tsx
index 383fa14a..2532d84a 100644
--- a/src/components/TransactionConfirmation.tsx
+++ b/src/components/TransactionConfirmation.tsx
@@ -1,15 +1,9 @@
-'use client';
-import { logger } from '@/utils/logger';
-
-import React, { useState } from 'react';
-import Link from 'next/link';
-import { useSecurity } from '@/hooks/useSecurity';
-import { AlertTriangle, Shield, CheckCircle, X, Eye, EyeOff, Info } from 'lucide-react';
-import { useWalletStore } from '@/store/walletStore';
-import { useKycStore } from '@/store/kycStore';
-import { formatEthAmount, shouldRequireKyc, weiToEth } from '@/lib/kyc';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useSecurity } from '@/hooks/useSecurity';
+"use client";
+import { logger } from "@/utils/logger";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import Link from "next/link";
+import { useSecurity } from "@/hooks/useSecurity";
import {
AlertTriangle,
Shield,
@@ -22,22 +16,33 @@ import {
Wallet,
ShieldCheck,
Lock,
-} from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
-import { Switch } from '@/components/ui/switch';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useTransactionSecurityStore } from '@/store/transactionSecurityStore';
+} from "lucide-react";
+import { useWalletStore } from "@/store/walletStore";
+import { useKycStore } from "@/store/kycStore";
+import { formatEthAmount, shouldRequireKyc, weiToEth } from "@/lib/kyc";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useTransactionSecurityStore } from "@/store/transactionSecurityStore";
import {
decideStepUpSecurity,
formatEth,
getSecurityDeviceId,
getSecurityDeviceLabel,
weiToEth,
-} from '@/utils/security/transactionSecurity';
-import { normalizeTotpCode } from '@/utils/security/totp';
-import { toast } from 'sonner';
+} from "@/utils/security/transactionSecurity";
+import { normalizeTotpCode } from "@/utils/security/totp";
+import { toast } from "sonner";
+import {
+ simulateTransaction,
+ SimulationResult,
+} from "@/utils/tenderlySimulation";
interface TransactionConfirmationProps {
isOpen: boolean;
@@ -47,19 +52,16 @@ interface TransactionConfirmationProps {
data?: string;
gasLimit?: string;
gasPrice?: string;
+ from: string;
};
- onConfirm: () => void;
+ onConfirm: (error?: string) => void;
onCancel: () => void;
loading?: boolean;
}
-export const TransactionConfirmation: React.FC = ({
- isOpen,
- transaction,
- onConfirm,
- onCancel,
- loading = false,
-}) => {
+export const TransactionConfirmation: React.FC<
+ TransactionConfirmationProps
+> = ({ isOpen, transaction, onConfirm, onCancel, loading = false }) => {
const { validateTransaction } = useSecurity();
const walletAddress = useWalletStore((state) => state.address);
const { profile, logTransactionScreening } = useKycStore();
@@ -77,26 +79,51 @@ export const TransactionConfirmation: React.FC = (
const [showRawData, setShowRawData] = useState(false);
const [transactionEth, setTransactionEth] = useState(0);
const [kycRequired, setKycRequired] = useState(false);
- const [verificationTab, setVerificationTab] = useState<'totp' | 'hardware'>('totp');
- const [totpCode, setTotpCode] = useState('');
+ const [verificationTab, setVerificationTab] = useState<"totp" | "hardware">(
+ "totp",
+ );
+ const [totpCode, setTotpCode] = useState("");
const [trustThisDevice, setTrustThisDevice] = useState(false);
- const [isConfirming, setIsConfirming] = useState(false);
+ const [transactionError, setTransactionError] = useState(null);
const hardwareTimerRef = useRef(null);
+ const [simulation, setSimulation] = useState(null);
+ const [simulating, setSimulating] = useState(false);
+ const [skipSimulation, setSkipSimulation] = useState(false);
+ const [showSimulation, setShowSimulation] = useState(false);
const currentDeviceId = useMemo(() => getSecurityDeviceId(), []);
const currentDeviceLabel = useMemo(() => getSecurityDeviceLabel(), []);
- useEffect(() => {
- if (isOpen && transaction) {
- validateTransactionData();
- const valueEth = weiToEth(transaction.value);
- const requiresKyc = shouldRequireKyc(transaction.value, profile.thresholdEth);
- setTransactionEth(valueEth);
- setKycRequired(requiresKyc);
- logTransactionScreening(valueEth, requiresKyc, profile.status === 'verified' || !requiresKyc);
+ if (isOpen && transaction) {
+ validateTransactionData();
+ const valueEth = weiToEth(transaction.value);
+ const requiresKyc = shouldRequireKyc(
+ transaction.value,
+ profile.thresholdEth,
+ );
+ setTransactionEth(valueEth);
+ setKycRequired(requiresKyc);
+ logTransactionScreening(
+ valueEth,
+ requiresKyc,
+ profile.status === "verified" || !requiresKyc,
+ );
+
+ if (!skipSimulation) {
+ runSimulation();
+ } else {
+ setSimulation(null);
+ }
}
- }, [isOpen, transaction, profile.status, profile.thresholdEth, logTransactionScreening]);
- }, [isOpen, transaction.to, transaction.value, transaction.data]);
+}, [
+ isOpen,
+ transaction,
+ profile.status,
+ profile.thresholdEth,
+ logTransactionScreening,
+ skipSimulation,
+ runSimulation,
+]);
useEffect(() => {
if (!isOpen) {
@@ -108,10 +135,14 @@ export const TransactionConfirmation: React.FC = (
setValidating(false);
setShowDetails(false);
setShowRawData(false);
- setVerificationTab('totp');
- setTotpCode('');
+ setVerificationTab("totp");
+ setTotpCode("");
setTrustThisDevice(false);
setIsConfirming(false);
+ setTransactionError(null);
+ setSimulation(null);
+ setSimulating(false);
+ setShowSimulation(false);
}
}, [isOpen]);
@@ -119,11 +150,11 @@ export const TransactionConfirmation: React.FC = (
if (!isOpen) return;
if (!settings.totpEnabled && settings.hardwareWalletEnabled) {
- setVerificationTab('hardware');
+ setVerificationTab("hardware");
}
if (settings.totpEnabled && !settings.hardwareWalletEnabled) {
- setVerificationTab('totp');
+ setVerificationTab("totp");
}
}, [isOpen, settings.totpEnabled, settings.hardwareWalletEnabled]);
@@ -135,22 +166,43 @@ export const TransactionConfirmation: React.FC = (
};
}, []);
+ const runSimulation = async () => {
+ setSimulating(true);
+ setSimulation(null);
+ try {
+ const result = await simulateTransaction({
+ ...transaction,
+ from: walletAddress || transaction.from,
+ });
+ setSimulation(result);
+ } catch (error) {
+ logger.error("Simulation failed in component:", error);
+ setSimulation({
+ gasEstimate: BigInt(0),
+ tenderlyResponse: null,
+ error: "Simulation failed to run.",
+ });
+ } finally {
+ setSimulating(false);
+ }
+ };
+
const validateTransactionData = async () => {
setValidating(true);
try {
const result = await validateTransaction(
transaction.to,
transaction.value,
- transaction.data || '0x'
+ transaction.data || "0x",
);
setValidation(result);
} catch (error) {
- logger.error('Transaction validation failed:', error);
+ logger.error("Transaction validation failed:", error);
setValidation({
isValid: false,
riskScore: 100,
- warnings: ['Validation failed'],
- blocks: ['Unable to validate transaction'],
+ warnings: ["Validation failed"],
+ blocks: ["Unable to validate transaction"],
requiresConfirmation: true,
});
} finally {
@@ -176,10 +228,11 @@ export const TransactionConfirmation: React.FC = (
]);
const trustedDevice = getActiveTrustedDevice(currentDeviceId);
- const transactionEth = weiToEth(transaction.value);
+ const transactionEthValue = weiToEth(transaction.value);
const gasPriceEth = weiToEth(transaction.gasPrice);
const stepUpRequired = stepUpDecision.requiresStepUp;
- const noVerificationMethodEnabled = stepUpRequired && !settings.totpEnabled && !settings.hardwareWalletEnabled;
+ const noVerificationMethodEnabled =
+ stepUpRequired && !settings.totpEnabled && !settings.hardwareWalletEnabled;
const formatAddress = (address: string) => {
return `${address.slice(0, 6)}...${address.slice(-4)}`;
@@ -187,9 +240,9 @@ export const TransactionConfirmation: React.FC = (
const handleHardwareWalletConfirm = () => {
setIsConfirming(true);
- toast.info('Waiting for hardware wallet confirmation...');
+ toast.info("Waiting for hardware wallet confirmation...");
hardwareTimerRef.current = window.setTimeout(() => {
- setLastVerification('hardware-wallet');
+ setLastVerification("hardware-wallet");
if (trustThisDevice && settings.trustedDeviceBypass) {
trustDevice(currentDeviceId, currentDeviceLabel);
}
@@ -209,15 +262,15 @@ export const TransactionConfirmation: React.FC = (
}
if (trustedDevice) {
- setLastVerification('trusted-device');
+ setLastVerification("trusted-device");
onConfirm();
setIsConfirming(false);
return;
}
- if (verificationTab === 'hardware') {
+ if (verificationTab === "hardware") {
if (!settings.hardwareWalletEnabled) {
- toast.error('Hardware wallet confirmation is disabled in settings');
+ toast.error("Hardware wallet confirmation is disabled in settings");
setIsConfirming(false);
return;
}
@@ -227,52 +280,111 @@ export const TransactionConfirmation: React.FC = (
}
if (!settings.totpEnabled || !settings.totpSecret) {
- toast.error('Set up your authenticator in Security settings first');
+ toast.error("Set up your authenticator in Security settings first");
setIsConfirming(false);
return;
}
const isValid = await verifyTotpCode(normalizeTotpCode(totpCode));
if (!isValid) {
- toast.error('Authenticator code is not valid');
+ toast.error("Authenticator code is not valid");
setIsConfirming(false);
return;
}
- setLastVerification('totp');
+ setLastVerification("totp");
if (trustThisDevice && settings.trustedDeviceBypass) {
trustDevice(currentDeviceId, currentDeviceLabel);
}
- onConfirm();
+ if (transactionError) {
+ onConfirm(transactionError);
+ } else {
+ onConfirm();
+ }
setIsConfirming(false);
};
const getRiskLevelColor = (riskScore: number) => {
- if (riskScore >= 75) return 'text-red-600 dark:text-red-400';
- if (riskScore >= 50) return 'text-yellow-600 dark:text-yellow-400';
- if (riskScore >= 25) return 'text-orange-600 dark:text-orange-400';
- return 'text-green-600 dark:text-green-400';
+ if (riskScore >= 75) return "text-red-600 dark:text-red-400";
+ if (riskScore >= 50) return "text-yellow-600 dark:text-yellow-400";
+ if (riskScore >= 25) return "text-orange-600 dark:text-orange-400";
+ return "text-green-600 dark:text-green-400";
};
const getRiskLevelBg = (riskScore: number) => {
- if (riskScore >= 75) return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
- if (riskScore >= 50) return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800';
- if (riskScore >= 25) return 'bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800';
- return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
+ if (riskScore >= 75)
+ return "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800";
+ if (riskScore >= 50)
+ return "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800";
+ if (riskScore >= 25)
+ return "bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800";
+ return "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800";
};
const getRiskLevelText = (riskScore: number) => {
- if (riskScore >= 75) return 'Critical Risk';
- if (riskScore >= 50) return 'High Risk';
- if (riskScore >= 25) return 'Medium Risk';
- return 'Low Risk';
+ if (riskScore >= 75) return "Critical Risk";
+ if (riskScore >= 50) return "High Risk";
+ if (riskScore >= 25) return "Medium Risk";
+ return "Low Risk";
+ };
+
+ const renderStateChanges = () => {
+ if (!simulation || !simulation.tenderlyResponse) return null;
+
+ const { transaction } = simulation.tenderlyResponse;
+ if (
+ !transaction ||
+ !transaction.transaction_info ||
+ !transaction.transaction_info.state_diff
+ ) {
+ return (
+
+ No state changes detected.
+
+ );
+ }
+
+ const stateChanges = transaction.transaction_info.state_diff.slice(0, 3);
+
+ return (
+
+ {stateChanges.map((change: any, index: number) => (
+
+
+ Address: {change.address}
+
+
+ Key: {change.key}
+
+
+
+ Original: {" "}
+ {change.original}
+
+
+ Dirty: {change.dirty}
+
+
+
+ ))}
+
-
+
+
= (
>
-
+
Confirm Transaction
- Review the transfer and complete any step-up verification that your security policy requires.
+ Review the transfer and complete any step-up verification that
+ your security policy requires.
= (
Additional verification required
- {formatEth(transactionEth, 2)} ETH
+
+ {formatEth(transactionEth, 2)} ETH
+
{stepUpDecision.reason}
- This protects high-value transfers by asking for a second proof before the transaction is allowed through.
+ This protects high-value transfers by asking for a
+ second proof before the transaction is allowed through.
+
- {validation.riskScore >= 50 ? (
-
+ {!validation.riskVerified ? (
+
+ ) : validation.riskScore >= 50 ? (
+
) : (
-
+
)}
-
+
Security Assessment
-
- {getRiskLevelText(validation.riskScore)}
+
+ {validation.riskVerified
+ ? getRiskLevelText(validation.riskScore)
+ : "Not verified"}
- Risk Score: {validation.riskScore}/100
+ {validation.riskVerified
+ ? `Risk Score: ${validation.riskScore}/100`
+ : "Address risk screening is unavailable, so no risk score is available. Verify the recipient address manually."}
@@ -369,17 +504,89 @@ export const TransactionConfirmation: React.FC
= (
Security Warnings
- {validation.warnings.map((warning: string, index: number) => (
-
- โข {warning}
-
- ))}
+ {validation.warnings.map(
+ (warning: string, index: number) => (
+
+ โข {warning}
+
+ ),
+ )}
+
+
+ Simulated Result
+
+ setShowSimulation(!showSimulation)}
+ className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+ >
+ {showSimulation ? "Hide" : "Show"}
+
+
+ {showSimulation && (
+
+ {transactionError && (
+
+ Error: {transactionError}
+
+ )}
+ {simulating ? (
+
+ ) : simulation ? (
+ <>
+ {simulation.error ? (
+
+ Error: {simulation.error}
+
+ ) : (
+ <>
+
+
+ Estimated Gas:
+
+
+ {simulation.gasEstimate.toString()}
+
+
+
+ State Changes:
+
+ {renderStateChanges()}
+
+ )}
+
+ ) : null}
+
+ )}
+
+
+ Skip simulation for low-value tx
+
+
+
@@ -389,11 +596,16 @@ export const TransactionConfirmation: React.FC
= (
Transaction Blocked
- {validation.blocks.map((block: string, index: number) => (
-
- โข {block}
-
- ))}
+ {validation.blocks.map(
+ (block: string, index: number) => (
+
+ โข {block}
+
+ ),
+ )}
@@ -409,28 +621,36 @@ export const TransactionConfirmation: React.FC = (
onClick={() => setShowDetails(!showDetails)}
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
>
- {showDetails ? 'Hide' : 'Show'} Details
+ {showDetails ? "Hide" : "Show"} Details
-
+
- To:
+
+ To:
+
{formatAddress(transaction.to)}
- Value:
+
+ Value:
+
- {formatEth(transactionEth, 6)} ETH
+ {formatEth(transactionEthValue, 6)} ETH
{transaction.gasLimit && (
-
Gas Limit:
+
+ Gas Limit:
+
{transaction.gasLimit}
@@ -439,22 +659,30 @@ export const TransactionConfirmation: React.FC
= (
{transaction.gasPrice && (
- Gas Price:
+
+ Gas Price:
+
{formatEth(gasPriceEth, 6)} ETH
)}
- {transaction.data && transaction.data !== '0x' && (
+ {transaction.data && transaction.data !== "0x" && (
- Data:
+
+ Data:
+
setShowRawData(!showRawData)}
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
>
- {showRawData ?
{showRawData ? (
@@ -463,7 +691,8 @@ export const TransactionConfirmation: React.FC
= (
) : (
- Contract interaction data ({transaction.data.length} bytes)
+ Contract interaction data ({transaction.data.length}{" "}
+ bytes)
)}
@@ -471,6 +700,63 @@ export const TransactionConfirmation: React.FC
= (
+
+
+
+ Simulated Result
+
+ setShowSimulation(!showSimulation)}
+ className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+ >
+ {showSimulation ? "Hide" : "Show"}
+
+
+ {showSimulation && (
+
+ {simulating ? (
+
+
+
+ Running simulation...
+
+
+ ) : simulation ? (
+
+ {simulation.error && (
+
+ {simulation.error}
+
+ )}
+ {simulation.tenderlyResponse && (
+
+
+ Simulation successful. Gas estimate:{" "}
+ {simulation.gasEstimate.toString()}
+
+ {renderStateChanges()}
+
+ )}
+
+ ) : null}
+
+ )}
+
+ 0.1}
+ />
+
+ Skip simulation for low-value transaction
+
+
+
+
{stepUpRequired ? (
@@ -478,31 +764,41 @@ export const TransactionConfirmation: React.FC
= (
-
Verification method
+
+ Verification method
+
Choose the path that matches your setup.
- {settings.totpEnabled ? 'Authenticator ready' : 'Authenticator off'}
+ {settings.totpEnabled
+ ? "Authenticator ready"
+ : "Authenticator off"}
{trustedDevice && settings.trustedDeviceBypass && (
- Trusted device bypass is active for {trustedDevice.label}. You can confirm immediately, or verify again for a fresh approval.
+ Trusted device bypass is active for{" "}
+ {trustedDevice.label}. You can confirm immediately, or
+ verify again for a fresh approval.
)}
{noVerificationMethodEnabled && (
- Step-up is required for this transaction, but both TOTP and hardware-wallet confirmation are disabled in settings.
+ Step-up is required for this transaction, but both TOTP
+ and hardware-wallet confirmation are disabled in
+ settings.
)}
setVerificationTab(value as 'totp' | 'hardware')}
+ onValueChange={(value) =>
+ setVerificationTab(value as "totp" | "hardware")
+ }
className="mt-4"
>
@@ -527,7 +823,8 @@ export const TransactionConfirmation: React.FC = (
- Enter the 6-digit code from Google Authenticator or another TOTP app.
+ Enter the 6-digit code from Google Authenticator or
+ another TOTP app.
= (
>
{Array.from({ length: 6 }, (_, index) => (
-
@@ -545,7 +845,10 @@ export const TransactionConfirmation: React.FC
= (
{settings.trustedDeviceBypass && (
-
)}
@@ -560,7 +863,8 @@ export const TransactionConfirmation: React.FC = (
Confirm with your hardware wallet
- Approve the signature on your connected hardware wallet to complete this transaction.
+ Approve the signature on your connected hardware
+ wallet to complete this transaction.
@@ -568,7 +872,10 @@ export const TransactionConfirmation: React.FC = (
{settings.trustedDeviceBypass && (
-
)}
@@ -587,14 +894,17 @@ export const TransactionConfirmation: React.FC = (
Cancel
- {validation.isValid && (!kycRequired || profile.status === 'verified') ? (
+ {validation.isValid &&
+ (!kycRequired || profile.status === "verified") ? (
@@ -603,7 +913,7 @@ export const TransactionConfirmation: React.FC = (
Confirming...
- ) : stepUpRequired && verificationTab === 'hardware' ? (
+ ) : stepUpRequired && verificationTab === "hardware" ? (
<>
= (
className="flex flex-1 cursor-not-allowed items-center justify-center gap-2 rounded-lg bg-gray-400 px-4 py-3 font-medium text-white"
>
)}
@@ -638,7 +948,9 @@ export const TransactionConfirmation: React.FC
= (
- You can trust this browser after a successful step-up. The trusted-device bypass is stored locally and can be revoked from Security settings.
+ You can trust this browser after a successful step-up. The
+ trusted-device bypass is stored locally and can be revoked
+ from Security settings.
= (
- This transaction requires additional confirmation due to security considerations.
- Please review all details carefully before proceeding.
+ This transaction requires additional confirmation due to
+ security considerations. Please review all details
+ carefully before proceeding.
)}
- {kycRequired && profile.status !== 'verified' && (
+ {kycRequired && profile.status !== "verified" && (
@@ -665,11 +978,17 @@ export const TransactionConfirmation: React.FC
= (
KYC required before approval
- Transactions at or above {formatEthAmount(profile.thresholdEth)} ETH require a verified identity.
+ Transactions at or above{" "}
+ {formatEthAmount(profile.thresholdEth)} ETH require a
+ verified identity.
- This transfer is approximately {formatEthAmount(transactionEth)} ETH for wallet{' '}
- {walletAddress ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : 'unknown'}.
+ This transfer is approximately{" "}
+ {formatEthAmount(transactionEth)} ETH for wallet{" "}
+ {walletAddress
+ ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}`
+ : "unknown"}
+ .
);
-};
+};
\ No newline at end of file
diff --git a/src/components/TransactionDetailsModal.tsx b/src/components/TransactionDetailsModal.tsx
new file mode 100644
index 00000000..42c3be1c
--- /dev/null
+++ b/src/components/TransactionDetailsModal.tsx
@@ -0,0 +1,298 @@
+'use client';
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Transaction } from '@/store/transactionStore';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { Copy, ExternalLink, Download, X } from 'lucide-react';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { format } from 'date-fns';
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
+import { toast } from 'sonner';
+import { logger } from '@/utils/logger';
+
+interface TransactionDetailsModalProps {
+ transaction: Transaction | null;
+ open: boolean;
+ onClose: () => void;
+}
+
+export const TransactionDetailsModal: React.FC
= ({
+ transaction,
+ open,
+ onClose,
+}) => {
+ const { t } = useTranslation('common');
+
+ if (!transaction) return null;
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'confirmed':
+ return 'bg-green-500/10 text-green-500 border-green-500/20';
+ case 'pending':
+ return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20';
+ case 'processing':
+ return 'bg-blue-500/10 text-blue-500 border-blue-500/20';
+ case 'failed':
+ return 'bg-red-500/10 text-red-500 border-red-500/20';
+ case 'cancelled':
+ return 'bg-gray-500/10 text-gray-500 border-gray-500/20';
+ default:
+ return 'bg-gray-500/10 text-gray-500 border-gray-500/20';
+ }
+ };
+
+ const getTypeColor = (type: string) => {
+ switch (type) {
+ case 'purchase':
+ return 'bg-blue-500/10 text-blue-500 border-blue-500/20';
+ case 'transfer':
+ return 'bg-purple-500/10 text-purple-500 border-purple-500/20';
+ case 'management':
+ return 'bg-orange-500/10 text-orange-500 border-orange-500/20';
+ default:
+ return 'bg-gray-500/10 text-gray-500 border-gray-500/20';
+ }
+ };
+
+ const downloadPDF = () => {
+ try {
+ const doc = new jsPDF();
+
+ // Title
+ doc.setFontSize(20);
+ doc.text('Transaction Receipt', 14, 20);
+
+ // Transaction details
+ doc.setFontSize(12);
+ const details = [
+ ['Transaction Hash', transaction.hash],
+ ['Type', transaction.type],
+ ['Status', transaction.status],
+ ['Date', format(new Date(transaction.timestamp), 'yyyy-MM-dd HH:mm:ss')],
+ ['From', transaction.from],
+ ['To', transaction.to || 'N/A'],
+ ['Value', transaction.value || '0'],
+ ['Gas Used', transaction.gasUsed || '0'],
+ ['Gas Price', transaction.gasPrice || '0'],
+ ['Chain ID', transaction.chainId.toString()],
+ ['Confirmations', `${transaction.confirmations}/${transaction.requiredConfirmations}`],
+ ['Property ID', transaction.propertyId || 'N/A'],
+ ['Description', transaction.description || 'N/A'],
+ ];
+
+ if (transaction.error) {
+ details.push(['Error', transaction.error]);
+ }
+
+ autoTable(doc, {
+ startY: 30,
+ head: [['Field', 'Value']],
+ body: details,
+ theme: 'striped',
+ headStyles: { fillColor: [59, 130, 246] },
+ });
+
+ doc.save(`transaction-receipt-${transaction.hash.slice(0, 8)}.pdf`);
+ toast.success('Transaction receipt downloaded successfully');
+ } catch (error) {
+ logger.error('Error downloading PDF', error);
+ toast.error('Failed to download transaction receipt');
+ }
+ };
+
+ const openExplorer = () => {
+ const explorerUrl = `https://etherscan.io/tx/${transaction.hash}`;
+ window.open(explorerUrl, '_blank');
+ };
+
+ return (
+
+
+
+
+
+ {t('transactions.transactionDetails')}
+
+
+
+
+
+
+
+ {/* Status and Type Badges */}
+
+
+ {t(`transactions.${transaction.status}`)}
+
+
+ {t(`transactions.${transaction.type}`)}
+
+
+ Chain ID: {transaction.chainId}
+
+
+
+ {/* Transaction Hash */}
+
+
+ {t('transactions.hash')}
+
+
+
+ {transaction.hash}
+
+
+
+
+
+
+
+
+ {/* Transaction Details */}
+
+
+
+
+ {t('transactions.from')}
+
+
+
+ {transaction.from}
+
+
+
+
+
+
+ {t('transactions.to')}
+
+
+
+ {transaction.to || 'N/A'}
+
+ {transaction.to &&
+
+
+
+
+
+
+ {t('transactions.value')}
+
+
+ {transaction.value || '0'}
+
+
+
+
+
+ {t('transactions.timestamp')}
+
+
+ {format(new Date(transaction.timestamp), 'yyyy-MM-dd HH:mm:ss')}
+
+
+
+
+
+
+
+ {t('transactions.gasUsed')}
+
+
+ {transaction.gasUsed || '0'}
+
+
+
+
+
+ {t('transactions.gasPrice')}
+
+
+ {transaction.gasPrice || '0'}
+
+
+
+
+
+
+ {t('transactions.confirmations')}
+
+
+ {transaction.confirmations} / {transaction.requiredConfirmations}
+
+
+
+ {transaction.propertyId && (
+
+
+ {t('transactions.propertyId')}
+
+
+ {transaction.propertyId}
+
+
+ )}
+
+ {transaction.description && (
+
+
+ {t('transactions.description')}
+
+
+ {transaction.description}
+
+
+ )}
+
+ {transaction.error && (
+
+
+ {t('transactions.error')}
+
+
+ {transaction.error}
+
+
+ )}
+
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/TransactionHistory.stories.ts b/src/components/TransactionHistory.stories.ts
new file mode 100644
index 00000000..a5c0bbdc
--- /dev/null
+++ b/src/components/TransactionHistory.stories.ts
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { TransactionHistory } from './TransactionHistory';
+
+/**
+ * TransactionHistory displays a filterable, searchable, and exportable table
+ * of on-chain transactions. It reads from the global `useTransactionStore`
+ * and supports CSV/Excel export.
+ *
+ * **Props:** none โ data comes from Zustand store.
+ *
+ * **Accessibility:**
+ * - The search input has a visible placeholder and is keyboard-navigable.
+ * - Filter selects are labelled via ``.
+ * - Export buttons are keyboard-accessible.
+ * - The table uses semantic `` / ` ` and truncated hashes
+ * retain full values in the data layer for screen readers.
+ */
+const meta = {
+ title: 'Components/TransactionHistory',
+ component: TransactionHistory,
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Empty state โ no transactions in the store.
+ * Shows the EmptyState placeholder with a descriptive message.
+ */
+export const Empty: Story = {};
+
+/**
+ * Loading state โ store is fetching transactions.
+ * Renders the TableSkeleton in place of the real rows.
+ */
+export const Loading: Story = {};
+
+/**
+ * Default story renders the component as-is, wired to the real Zustand store.
+ * In a real Storybook setup you would use a decorator to seed the store with
+ * mock transactions. The stories below document the intended visual states.
+ */
+export const Default: Story = {};
diff --git a/src/components/TransactionHistory.tsx b/src/components/TransactionHistory.tsx
index 10cba465..6c94f8a3 100644
--- a/src/components/TransactionHistory.tsx
+++ b/src/components/TransactionHistory.tsx
@@ -1,8 +1,10 @@
'use client';
import { logger } from '@/utils/logger';
-import React, { useState, useMemo } from 'react';
-import { useTransactionStore } from '@/store/transactionStore';
+import React, { useState, useMemo, useRef, memo } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useTranslation } from 'react-i18next';
+import { useTransactionHistory } from '@/hooks/useTransactionQuery';
import type { Transaction, TransactionType, TransactionStatus } from '@/store/transactionStore';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
@@ -11,15 +13,34 @@ import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Search, Download, CalendarIcon, FileSpreadsheet, FileText } from 'lucide-react';
+import { Slider } from '@/components/ui/slider';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Search, CalendarIcon, FileSpreadsheet, FileText, AlertCircle, ArrowUpDown, Eye } from 'lucide-react';
import { toast } from 'sonner';
import { format } from 'date-fns';
-import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
+import { withLazyChart } from '@/components/LazyChart';
+
+// #505 + #506: recharts is heavy and only needed for the analytics tab.
+// Code-split the analytics view via next/dynamic, and lazy-load `xlsx` on
+// first export to keep the main bundle small.
+const TransactionAnalytics = withLazyChart(
+ () => import('@/components/TransactionAnalytics')
+);
import { Skeleton } from '@/components/ui/skeleton';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { EmptyState } from '@/components/ui/EmptyState';
import { History } from 'lucide-react';
+import { TransactionDetailsModal } from '@/components/TransactionDetailsModal';
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from '@/components/ui/pagination';
import { TableSkeleton } from '@/components/ui/LoadingSkeletons';
const TRANSACTION_TYPES: TransactionType[] = ['purchase', 'transfer', 'management', 'other'];
@@ -31,17 +52,78 @@ const isTransactionType = (value: string): value is TransactionType =>
const isTransactionStatus = (value: string): value is TransactionStatus =>
TRANSACTION_STATUSES.includes(value as TransactionStatus);
+const TransactionRow = memo(function TransactionRow({
+ tx,
+ t,
+ onViewDetails,
+}: {
+ tx: Transaction;
+ t: ReturnType>['t'];
+ onViewDetails: (tx: Transaction) => void;
+}) {
+ return (
+
+
+ {format(new Date(tx.timestamp), 'MMM dd, HH:mm')}
+
+
+ {tx.hash.slice(0, 8)}โฆ{tx.hash.slice(-6)}
+
+ {tx.type}
+
+
+ {tx.status}
+
+
+
+ {tx.value || '0'}
+
+
+ {tx.from.slice(0, 8)}โฆ{tx.from.slice(-6)}
+
+
+ {tx.to ? `${tx.to.slice(0, 8)}โฆ${tx.to.slice(-6)}` : '-'}
+
+
+ {tx.gasUsed || '0'}
+
+
+ onViewDetails(tx)}
+ className="h-8 w-8 p-0"
+ >
+
+
+
+ );
+});
+
export const TransactionHistory: React.FC = () => {
- const { transactions, getTransactionsByType, isLoading } = useTransactionStore();
+ const { t } = useTranslation('common');
+ const { transactions, getTransactionsByType, isLoading, error, refetch } = useTransactionHistory();
const [searchTerm, setSearchTerm] = useState('');
const [typeFilter, setTypeFilter] = useState('all');
const [statusFilter, setStatusFilter] = useState('all');
+ const [propertyFilter, setPropertyFilter] = useState('');
+ const [amountRange, setAmountRange] = useState<[number, number]>([0, 1000000]);
+ const [gasPriceRange, setGasPriceRange] = useState<[number, number]>([0, 100]);
const [dateRange, setDateRange] = useState<{ from: Date | undefined; to: Date | undefined }>({
from: undefined,
to: undefined,
});
const [showDateRange, setShowDateRange] = useState(false);
+ const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
+ const [sortBy, setSortBy] = useState<'timestamp' | 'value' | 'gasUsed'>('timestamp');
+ const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+ const [currentPage, setCurrentPage] = useState(1);
+ const [itemsPerPage] = useState(10);
+ const [selectedTransaction, setSelectedTransaction] = useState(null);
+ const [showDetailsModal, setShowDetailsModal] = useState(false);
+ const [activeTab, setActiveTab] = useState<'list' | 'analytics'>('list');
const filteredTransactions = useMemo(() => {
let filtered = transactions;
@@ -54,6 +136,24 @@ export const TransactionHistory: React.FC = () => {
filtered = filtered.filter(tx => tx.status === statusFilter);
}
+ if (propertyFilter) {
+ filtered = filtered.filter(tx => tx.propertyId?.toLowerCase().includes(propertyFilter.toLowerCase()));
+ }
+
+ if (amountRange[0] > 0 || amountRange[1] < 1000000) {
+ filtered = filtered.filter(tx => {
+ const value = parseFloat(tx.value || '0');
+ return value >= amountRange[0] && value <= amountRange[1];
+ });
+ }
+
+ if (gasPriceRange[0] > 0 || gasPriceRange[1] < 100) {
+ filtered = filtered.filter(tx => {
+ const gasPrice = parseFloat(tx.gasPrice || '0');
+ return gasPrice >= gasPriceRange[0] && gasPrice <= gasPriceRange[1];
+ });
+ }
+
if (dateRange.from) {
filtered = filtered.filter(tx => tx.timestamp >= dateRange.from!.getTime());
}
@@ -71,8 +171,45 @@ export const TransactionHistory: React.FC = () => {
);
}
- return filtered.sort((a, b) => b.timestamp - a.timestamp);
- }, [transactions, typeFilter, statusFilter, searchTerm, dateRange, getTransactionsByType]);
+ return filtered.sort((a, b) => {
+ let comparison = 0;
+ if (sortBy === 'timestamp') {
+ comparison = a.timestamp - b.timestamp;
+ } else if (sortBy === 'value') {
+ comparison = parseFloat(a.value || '0') - parseFloat(b.value || '0');
+ } else if (sortBy === 'gasUsed') {
+ comparison = parseFloat(a.gasUsed || '0') - parseFloat(b.gasUsed || '0');
+ }
+ return sortOrder === 'asc' ? comparison : -comparison;
+ });
+ }, [transactions, typeFilter, statusFilter, searchTerm, dateRange, getTransactionsByType, propertyFilter, amountRange, gasPriceRange, sortBy, sortOrder]);
+
+ const paginatedTransactions = useMemo(() => {
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ return filteredTransactions.slice(startIndex, startIndex + itemsPerPage);
+ }, [filteredTransactions, currentPage, itemsPerPage]);
+
+ const totalPages = Math.ceil(filteredTransactions.length / itemsPerPage);
+
+ // Expose the current sort state to assistive tech through aria-sort.
+ const getSortAria = (field: 'timestamp' | 'value' | 'gasUsed') => {
+ if (sortBy !== field) return 'none';
+ return sortOrder === 'asc' ? 'ascending' : 'descending';
+ };
+
+ const handleSort = (field: 'timestamp' | 'value' | 'gasUsed') => {
+ if (sortBy === field) {
+ setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+ } else {
+ setSortBy(field);
+ setSortOrder('desc');
+ }
+ };
+
+ const handleViewDetails = (transaction: Transaction) => {
+ setSelectedTransaction(transaction);
+ setShowDetailsModal(true);
+ };
const calculateRealizedGainsLosses = (transaction: Transaction): number => {
if (transaction.type === 'transfer' && transaction.value) {
@@ -122,8 +259,13 @@ export const TransactionHistory: React.FC = () => {
}
};
- const exportToExcel = () => {
+ const exportToExcel = async () => {
try {
+ // #505: dynamic-import xlsx (and its workbook helpers) only when the
+ // user actually requests an Excel export. Keeps the main bundle
+ // free of SheetJS (~250-500kB).
+ const XLSX = await import('xlsx');
+
const data = prepareExportData();
const ws = XLSX.utils.json_to_sheet(data);
const wb = XLSX.utils.book_new();
@@ -145,7 +287,7 @@ export const TransactionHistory: React.FC = () => {
}
};
- const handleExport = (fmt: 'csv' | 'excel') => {
+ const handleExport = async (fmt: 'csv' | 'excel') => {
if (filteredTransactions.length === 0) {
toast.warning('No transactions to export');
return;
@@ -153,210 +295,418 @@ export const TransactionHistory: React.FC = () => {
if (fmt === 'csv') {
exportToCSV();
} else {
- exportToExcel();
+ await exportToExcel();
}
};
- const handleRetry = async (_transaction: Transaction) => {
- toast.info('Retry functionality not yet implemented');
- };
+ const rowsToRender = isLoading ? [] : paginatedTransactions;
- const rowsToRender = isLoading ? [] : filteredTransactions;
+ // Virtualizer for large paginated lists
+ const tableContainerRef = useRef(null);
+ const rowVirtualizer = useVirtualizer({
+ count: rowsToRender.length,
+ getScrollElement: () => tableContainerRef.current,
+ estimateSize: () => 48,
+ overscan: 5,
+ });
return (
-
+
-
+
- Transaction History
+ {t('transactions.transactionHistory')}
{isLoading ? 'โฆ' : filteredTransactions.length}
-
+
+ setActiveTab(v as 'list' | 'analytics')} className="w-auto">
+
+ List
+ Analytics
+
+
setShowDateRange(!showDateRange)}>
+ setShowAdvancedFilters(!showAdvancedFilters)}>
+
handleExport('csv')}>
- handleExport('excel')}>
+ { void handleExport('excel'); }}>
-
-
-
-
setSearchTerm(e.target.value)}
- className="pl-10"
- />
+ {error && (
+
+
+
+
{error || t('transactions.loadError')}
+
+
refetch()}>
+ {t('transactions.retry')}
+
+ )}
-
{
- if (value === 'all' || isTransactionType(value)) {
- setTypeFilter(value);
- }
- }}
- >
-
-
-
- All Types
- Purchase
- Transfer
- Management
- Other
-
-
-
-
{
- if (value === 'all' || isTransactionStatus(value)) {
- setStatusFilter(value);
- }
- }}
- >
-
-
-
- All Status
- Pending
- Processing
- Confirmed
- Failed
- Cancelled
-
-
-
+
setActiveTab(v as 'list' | 'analytics')} className="w-full">
+
+
+
+
+
+
{
+ if (value === 'all' || isTransactionType(value)) {
+ setTypeFilter(value);
+ }
+ }}
+ >
+
+
+
+ {t('transactions.allTypes')}
+ {t('transactions.purchase')}
+ {t('transactions.transfer')}
+ {t('transactions.management')}
+ {t('transactions.other')}
+
+
+
+
{
+ if (value === 'all' || isTransactionStatus(value)) {
+ setStatusFilter(value);
+ }
+ }}
+ >
+
+
+
+ {t('transactions.allStatus')}
+ {t('transactions.pending')}
+ {t('transactions.processing')}
+ {t('transactions.confirmed')}
+ {t('transactions.failed')}
+ {t('transactions.cancelled')}
+
+
- {/* Date Range Filter */}
- {showDateRange && (
-
-
- Date Range:
+
setSortBy(v as 'timestamp' | 'value' | 'gasUsed')}>
+
+
+
+ Time
+ Value
+ Gas Used
+
+
+
+
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
+ className="w-full sm:w-auto"
+ >
+
-
-
-
-
+
+ Property ID
+
+
+ Amount Range: {amountRange[0]} - {amountRange[1]}
+ setAmountRange(v as [number, number])}
+ max={1000000}
+ step={1000}
+ className="w-full"
+ />
+
+
+ Gas Price Range (Gwei): {gasPriceRange[0]} - {gasPriceRange[1]}
+ setGasPriceRange(v as [number, number])}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+
{
+ setPropertyFilter('');
+ setAmountRange([0, 1000000]);
+ setGasPriceRange([0, 100]);
+ }}
+ >
+ Clear Advanced Filters
-
-
- setDateRange(prev => ({ ...prev, from: date }))}
- initialFocus
- />
-
-
-
-
-
-
+
+ {t('transactions.dateRange')}:
+
+
+
+
+
+
+
+ setDateRange(prev => ({ ...prev, from: date }))}
+ initialFocus
+ />
+
+
+
+
+
+
+
+
+ setDateRange(prev => ({ ...prev, to: date }))}
+ initialFocus
+ />
+
+
+
setDateRange({ from: undefined, to: undefined })}
+ >
+ {t('transactions.clear')}
-
-
- setDateRange(prev => ({ ...prev, to: date }))}
- initialFocus
- />
-
-
-
setDateRange({ from: undefined, to: undefined })}
- >
- Clear
-
-
+ )}
+ {/* Transaction Table */}
+
+
+
+
+
+ handleSort('timestamp')}>
+
+ {t('transactions.time')}
+ {sortBy === 'timestamp' &&
}
+
+ {t('transactions.hash')}
+ {t('transactions.type')}
+ {t('transactions.status')}
+ handleSort('value')}>
+
+ {t('transactions.value')}
+ {sortBy === 'value' &&
}
+
+ {t('transactions.from')}
+ {t('transactions.to')}
+ handleSort('gasUsed')}>
+
+ Gas
+ {sortBy === 'gasUsed' &&
}
+
+ Actions
+
+
+
+ {isLoading ? (
+ Array.from({ length: 8 }).map((_, i) => (
+
+
+ ))
+ ) : rowsToRender.length === 0 ? (
+
+
+
+
+ ) : (
+ <>
+ {rowVirtualizer.getTotalSize() > 0 && (
+
+
+
+
- {/* Transaction Table */}
- {isLoading ? (
-
- ) : (
-
-
-
-
- Hash
- Type
- Status
- From
- To
- Time
-
-
-
- {rowsToRender.length === 0 ? (
-
-
- 0 && totalPages > 1 && (
+
+
+
+
+ setCurrentPage(p => Math.max(1, p - 1))}
+ className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
/>
-
-
- ) : (
- rowsToRender.map((tx) => (
-
-
- {tx.hash.slice(0, 10)}โฆ{tx.hash.slice(-8)}
-
- {tx.type}
- {tx.status}
-
- {tx.from.slice(0, 10)}โฆ{tx.from.slice(-8)}
-
-
- {tx.to ? `${tx.to.slice(0, 10)}โฆ${tx.to.slice(-8)}` : '-'}
-
-
- {new Date(tx.timestamp).toLocaleString()}
-
-
- ))
- )}
-
-
-
- )}
+
+ {Array.from({ length: Math.min(5, totalPages) }).map((_, i) => {
+ const pageNum = i + 1;
+ const showEllipsisBefore = i > 0 && pageNum > 2;
+ const showEllipsisAfter = i < 4 && pageNum < totalPages - 1;
+
+ if (showEllipsisBefore) {
+ return (
+
+
+ );
+ }
+
+ if (showEllipsisAfter && i === 3) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ setCurrentPage(pageNum)}
+ isActive={currentPage === pageNum}
+ className="cursor-pointer"
+ >
+ {pageNum}
+
+
+ );
+ })}
+
+ setCurrentPage(p => Math.min(totalPages, p + 1))}
+ className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+ />
+
+
+
+
-
- Total Transactions: {filteredTransactions.length}
-
- Confirmed: {filteredTransactions.filter(tx => tx.status === 'confirmed').length} |
- Failed: {filteredTransactions.filter(tx => tx.status === 'failed').length}
-
-
-
+
+ {t('transactions.totalTransactions')}: {filteredTransactions.length}
+
+ {t('transactions.confirmed')}: {filteredTransactions.filter(tx => tx.status === 'confirmed').length} |
+ {t('transactions.failed')}: {filteredTransactions.filter(tx => tx.status === 'failed').length}
+
+
+
+
+
+
+
+
+
{
+ setShowDetailsModal(false);
+ setSelectedTransaction(null);
+ }}
+ />
);
diff --git a/src/components/TransactionHistory/TransactionHistory.constants.ts b/src/components/TransactionHistory/TransactionHistory.constants.ts
new file mode 100644
index 00000000..64f79c8f
--- /dev/null
+++ b/src/components/TransactionHistory/TransactionHistory.constants.ts
@@ -0,0 +1,29 @@
+import type {
+ TransactionStatus,
+ TransactionType,
+} from "@/store/transactionStore";
+
+export const TRANSACTION_TYPES: TransactionType[] = [
+ "purchase",
+ "transfer",
+ "management",
+ "other",
+];
+
+export const TRANSACTION_STATUSES: TransactionStatus[] = [
+ "pending",
+ "processing",
+ "confirmed",
+ "failed",
+ "cancelled",
+];
+
+export const isTransactionType = (
+ value: string
+): value is TransactionType =>
+ TRANSACTION_TYPES.includes(value as TransactionType);
+
+export const isTransactionStatus = (
+ value: string
+): value is TransactionStatus =>
+ TRANSACTION_STATUSES.includes(value as TransactionStatus);
\ No newline at end of file
diff --git a/src/components/TransactionHistory/TransactionHistory.types.ts b/src/components/TransactionHistory/TransactionHistory.types.ts
new file mode 100644
index 00000000..7278e800
--- /dev/null
+++ b/src/components/TransactionHistory/TransactionHistory.types.ts
@@ -0,0 +1,30 @@
+import type {
+ Transaction,
+ TransactionStatus,
+ TransactionType,
+} from "@/store/transactionStore";
+
+export type SortBy = "timestamp" | "value" | "gasUsed";
+
+export type SortOrder = "asc" | "desc";
+
+export interface DateRange {
+ from?: Date;
+ to?: Date;
+}
+
+export interface FilterTransactionsParams {
+ transactions: Transaction[];
+ typeFilter: TransactionType | "all";
+ statusFilter: TransactionStatus | "all";
+ propertyFilter: string;
+ searchTerm: string;
+ amountRange: [number, number];
+ gasPriceRange: [number, number];
+ dateRange: DateRange;
+ sortBy: SortBy;
+ sortOrder: SortOrder;
+ getTransactionsByType: (
+ type: TransactionType
+ ) => Transaction[];
+}
\ No newline at end of file
diff --git a/src/components/TransactionMonitor.tsx b/src/components/TransactionMonitor.tsx
index 5b33d35f..bf62d3cd 100644
--- a/src/components/TransactionMonitor.tsx
+++ b/src/components/TransactionMonitor.tsx
@@ -3,16 +3,18 @@
import React from 'react';
import { useTransactionStore } from '@/store/transactionStore';
import type { Transaction } from '@/store/transactionStore';
+import { useSafeTimeout } from '@/hooks/useSafeTimeout';
const TransactionWatcher = ({ transaction }: { transaction: Transaction }) => {
const { updateTransaction } = useTransactionStore();
+ const { setTimeoutSafe, clearTimeoutSafe } = useSafeTimeout();
// For demo purposes, we'll simulate transaction monitoring
// In a real app, you'd use wagmi's useWaitForTransactionReceipt here
React.useEffect(() => {
if (transaction.status === 'pending') {
// Simulate confirmation after 5 seconds for demo
- const timer = setTimeout(() => {
+ const timer = setTimeoutSafe(() => {
updateTransaction(transaction.id, {
status: 'confirmed',
gasUsed: '21000',
@@ -20,7 +22,7 @@ const TransactionWatcher = ({ transaction }: { transaction: Transaction }) => {
});
}, 5000);
- return () => clearTimeout(timer);
+ return () => clearTimeoutSafe(timer);
}
return undefined;
diff --git a/src/components/TransactionProgress.tsx b/src/components/TransactionProgress.tsx
index c7bfc53e..0339355a 100644
--- a/src/components/TransactionProgress.tsx
+++ b/src/components/TransactionProgress.tsx
@@ -1,13 +1,19 @@
'use client';
import { logger } from '@/utils/logger';
-import React, { useState, useEffect, useCallback, memo } from 'react';
+import React, { useState, useEffect, useCallback, memo, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
-import { CheckCircle2, Circle, Loader2, AlertCircle, XCircle, Wallet, Broadcast, Clock, Shield } from 'lucide-react';
+import { CheckCircle2, Circle, Loader2, AlertCircle, XCircle, Wallet, Broadcast, Clock, Shield, X } from 'lucide-react';
import { Progress } from '@/components/ui/progress';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Web3Tooltip } from '@/components/ui/Web3Tooltip';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
interface TransactionStep {
id: string;
@@ -33,34 +39,37 @@ export const TransactionProgress: React.FC = memo(({
onComplete,
onError,
}) => {
+ const modalRef = useRef(null);
+ const closeButtonRef = useRef(null);
+
const [steps, setSteps] = useState([
{
id: 'sign',
label: 'Signing Transaction',
description: 'Please sign the transaction in your wallet',
status: 'pending',
- icon: = memo(({
const [requiredConfirmations] = useState(12);
const [currentStep, setCurrentStep] = useState(0);
+ // Handle Escape key to close modal
+ useEffect(() => {
+ if (!isOpen) return;
+
+ const handleEscape = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ onClose();
+ }
+ };
+
+ document.addEventListener('keydown', handleEscape);
+ return () => document.removeEventListener('keydown', handleEscape);
+ }, [isOpen, onClose]);
+
+ // Focus trap and initial focus
+ useEffect(() => {
+ if (!isOpen) return;
+
+ // Focus close button when modal opens
+ if (closeButtonRef.current) {
+ closeButtonRef.current.focus();
+ }
+
+ // Trap focus within modal
+ const focusableElements = modalRef.current?.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ ) || [];
+
+ const firstElement = focusableElements[0] as HTMLElement;
+ const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+ const handleTab = (event: KeyboardEvent) => {
+ if (event.key !== 'Tab') return;
+
+ if (event.shiftKey) {
+ if (document.activeElement === firstElement) {
+ event.preventDefault();
+ lastElement?.focus();
+ }
+ } else {
+ if (document.activeElement === lastElement) {
+ event.preventDefault();
+ firstElement?.focus();
+ }
+ }
+ };
+
+ document.addEventListener('keydown', handleTab);
+ return () => document.removeEventListener('keydown', handleTab);
+ }, [isOpen]);
+
useEffect(() => {
if (!isOpen) return;
@@ -126,13 +186,13 @@ export const TransactionProgress: React.FC = memo(({
const getStepIcon = (step: TransactionStep) => {
switch (step.status) {
case 'completed':
- return = memo(({
if (!isOpen) return null;
return (
-
-
- e.stopPropagation()}
- >
-
-
- {/* Header */}
-
-
-
- Transaction in Progress
-
- {transactionHash && (
-
- {transactionHash.slice(0, 10)}...{transactionHash.slice(-8)}
-
- )}
-
-
- ร
-
-
{ if (!open) onClose(); }}>
+
+
+
+ Transaction in Progress
+
+ ร
+
+
+ {transactionHash && (
+
+ {transactionHash.slice(0, 10)}...{transactionHash.slice(-8)}
+
+ )}
+
- {/* Overall Progress */}
+
+
+ {/* Overall Progress */}
Overall Progress
-
+
{Math.round(getProgressPercentage())}%
-
+
{/* Steps */}
-
+
{steps.map((step, index) => (
= memo(({
? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800'
: 'bg-gray-50 dark:bg-gray-800'
}`}
+ role="listitem"
+ aria-current={step.status === 'in-progress' ? 'step' : undefined}
>
{getStepIcon(step)}
@@ -224,6 +285,13 @@ export const TransactionProgress: React.FC
= memo(({
{step.description}
+
+ Status: {step.status.replace('-', ' ')}
+
{/* Confirmation Progress */}
{step.id === 'confirm' && step.status === 'in-progress' && (
@@ -232,16 +300,30 @@ export const TransactionProgress: React.FC = memo(({
Block Confirmations
-
- {confirmations}/{requiredConfirmations}
+
+ {confirmations} of {requiredConfirmations} confirmations
)}
{step.error && (
-
+
{step.error}
)}
@@ -253,7 +335,7 @@ export const TransactionProgress: React.FC
= memo(({
{/* Footer */}
- Secured by blockchain
= memo(({
size="sm"
onClick={onClose}
disabled={steps[steps.length - 1].status !== 'completed'}
+ aria-label={steps[steps.length - 1].status === 'completed' ? 'Close transaction progress' : 'Transaction in progress, please wait'}
>
{steps[steps.length - 1].status === 'completed' ? 'Close' : 'Processing...'}
-
-
-
-
-
+
+
+
+
);
-};
+});
// Hook to use transaction progress
export const useTransactionProgress = () => {
diff --git a/src/components/ViewToggle.tsx b/src/components/ViewToggle.tsx
index b2a4bf86..2a14a9c9 100644
--- a/src/components/ViewToggle.tsx
+++ b/src/components/ViewToggle.tsx
@@ -1,20 +1,61 @@
import { useState, useEffect } from "react";
+import { logger } from '@/utils/logger';
+import { STORAGE_KEYS } from '@/lib/storageKeys';
+/**
+ * UI-only view mode for listing screens.
+ *
+ * Security notes / audit:
+ * - This module is UI-only and MUST NOT perform any signing or network-selection
+ * side-effects. It only persists a user-preference for view mode. Any wallet
+ * interactions should happen elsewhere.
+ * - Access to `localStorage` is wrapped in try/catch to avoid exceptions in
+ * environments where storage is unavailable (e.g., private mode or SSR).
+ * - Stored values are validated before use to avoid malicious or corrupted data.
+ */
export type ViewMode = "grid" | "list";
-const STORAGE_KEY = "propchain:listing-view";
+const STORAGE_KEY = STORAGE_KEYS.VIEW_MODE.key;
+export const isValidViewMode = (v: unknown): v is ViewMode => v === "grid" || v === "list";
+
+/**
+ * Hook to read and persist the user's preferred view mode.
+ * - Safely handles SSR and localStorage errors.
+ * - Ensures only `grid` | `list` values are used and persisted.
+ */
export function useViewMode() {
- const [mode, setMode] = useState(() => {
+ const [mode, setModeRaw] = useState(() => {
if (typeof window === "undefined") return "grid";
- return (localStorage.getItem(STORAGE_KEY) as ViewMode) ?? "grid";
+
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (isValidViewMode(stored)) return stored;
+ } catch (err) {
+ logger.warn("useViewMode: localStorage unavailable, falling back to default view mode", err);
+ }
+
+ return "grid";
});
+ // Wrap setter to validate input before persisting
+ const setMode = (v: ViewMode) => {
+ if (!isValidViewMode(v)) {
+ logger.warn("useViewMode.setMode called with invalid mode:", v);
+ return;
+ }
+ setModeRaw(v);
+ };
+
useEffect(() => {
- localStorage.setItem(STORAGE_KEY, mode);
+ try {
+ localStorage.setItem(STORAGE_KEY, mode);
+ } catch (err) {
+ logger.warn("useViewMode: failed to persist mode to localStorage", err);
+ }
}, [mode]);
- return { mode, setMode };
+ return { mode, setMode } as const;
}
interface ViewToggleProps {
@@ -22,22 +63,45 @@ interface ViewToggleProps {
onChange: (mode: ViewMode) => void;
}
+/**
+ * `ViewToggle` โ simple UI control to switch between `grid` and `list` modes.
+ *
+ * Safety and validation:
+ * - Buttons use `type="button"` to avoid accidentally submitting enclosing forms.
+ * - `onChange` is guarded at runtime to avoid exceptions if a consumer passes
+ * a non-function value.
+ * - The component does not read from or write to any wallet or network state.
+ */
export function ViewToggle({ mode, onChange }: ViewToggleProps) {
+ const safeChange = (v: ViewMode) => {
+ if (!isValidViewMode(v)) return;
+ try {
+ if (typeof onChange === "function") onChange(v);
+ else logger.warn("ViewToggle: onChange is not a function", onChange);
+ } catch (err) {
+ logger.error("ViewToggle: onChange handler threw an error", err);
+ }
+ };
+
return (
onChange("grid")}
+ type="button"
+ onClick={() => safeChange("grid")}
className={`px-3 py-1.5 flex items-center gap-1 ${mode === "grid" ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-100"}`}
aria-pressed={mode === "grid"}
+ aria-label="Grid view"
>
- Grid
onChange("list")}
+ type="button"
+ onClick={() => safeChange("list")}
className={`px-3 py-1.5 flex items-center gap-1 ${mode === "list" ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-100"}`}
aria-pressed={mode === "list"}
+ aria-label="List view"
>
- List
);
@@ -45,7 +109,7 @@ export function ViewToggle({ mode, onChange }: ViewToggleProps) {
function GridIcon() {
return (
-
+
+
= ({
+ properties,
+ viewMode = 'grid',
+ className = ''
+}) => {
+ const parentRef = useRef(null);
+ const [columns, setColumns] = useState(1);
+
+ useEffect(() => {
+ const updateColumns = () => {
+ if (viewMode === 'list') {
+ setColumns(1);
+ return;
+ }
+ if (window.innerWidth >= 1024) setColumns(3);
+ else if (window.innerWidth >= 768) setColumns(2);
+ else setColumns(1);
+ };
+
+ updateColumns();
+ window.addEventListener('resize', updateColumns);
+ return () => window.removeEventListener('resize', updateColumns);
+ }, [viewMode]);
+
+ const rowCount = Math.ceil(properties.length / columns);
+
+ const rowVirtualizer = useVirtualizer({
+ count: rowCount,
+ getScrollElement: () => parentRef.current,
+ estimateSize: () => (viewMode === 'grid' ? 450 : 200),
+ overscan: 5,
+ });
+
+ return (
+
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const startIndex = virtualRow.index * columns;
+ const itemsInRow = properties.slice(startIndex, startIndex + columns);
+
+ return (
+
+ {itemsInRow.map((property, idx) => {
+ const absoluteIndex = startIndex + idx;
+ return (
+
+ );
+ })}
+
+ );
+ })}
+
+
+
= ({ address }) => {
const { setDisconnected, clearError, balance, error } = useWalletStore();
const { chainConfig } = useChain();
const { profile } = useKycStore();
@@ -113,4 +113,6 @@ export function WalletConnectedView({ address }: WalletConnectedViewProps) {
)}
);
-}
+};
+
+export const WalletConnectedView = React.memo(WalletConnectedViewInner);
diff --git a/src/components/WalletModal.tsx b/src/components/WalletModal.tsx
index bbe9f1df..7fe3ad7f 100644
--- a/src/components/WalletModal.tsx
+++ b/src/components/WalletModal.tsx
@@ -1,14 +1,18 @@
'use client';
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
import { useWalletStore } from '@/store/walletStore';
import { getWalletErrorMessage } from '@/utils/errorHandling';
import { toChainId } from '@/config/chains';
import { useSecurity } from '@/hooks/useSecurity';
import { useWalletConnector } from '@/hooks/useWalletConnector';
-import { AlertTriangle, Shield, X, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { ModalTransition } from './PageTransition';
+import { AlertTriangle, Shield, X, CheckCircle, CheckCircle2, AlertCircle, Loader2, Wallet, Link2, QrCode } from 'lucide-react';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
interface WalletModalProps {
isOpen: boolean;
@@ -83,7 +87,7 @@ export const WalletModal: React.FC
= ({ isOpen, onClose }) =>
{blocks.map((block, index) => (
-
+
โข {block}
))}
@@ -105,7 +109,7 @@ export const WalletModal: React.FC
= ({ isOpen, onClose }) =>
{warnings.map((warning, index) => (
-
+
โข {warning}
))}
@@ -173,8 +177,8 @@ export const WalletModal: React.FC
= ({ isOpen, onClose }) =>
return null;
};
- // Detect installed wallets
- const detectInstalledWallets = () => {
+ // Memoize wallet detection so it doesn't re-run on every render
+ const installedWallets = useMemo(() => {
const installed = new Set();
// Detect MetaMask
@@ -189,17 +193,16 @@ export const WalletModal: React.FC = ({ isOpen, onClose }) =>
// WalletConnect is typically available through deep links or QR codes
// We'll consider it "available" but not "installed" in the traditional sense
+ installed.add('walletconnect');
return installed;
- };
-
- const installedWallets = detectInstalledWallets();
+ }, []);
const wallets: Array<{
id: SupportedWalletId;
name: string;
description: string;
- icon: string;
+ icon: React.ReactNode;
color: string;
installUrl?: string;
}> = [
@@ -207,7 +210,7 @@ export const WalletModal: React.FC = ({ isOpen, onClose }) =>
id: 'metamask',
name: 'MetaMask',
description: 'Connect to your MetaMask wallet',
- icon: '๐ฆ',
+ icon: = ({ isOpen, onClose }) =>
id: 'coinbase',
name: 'Coinbase Wallet',
description: 'Connect to your Coinbase wallet',
- icon: '๏ฟฝ',
+ icon: = ({ isOpen, onClose }) =>
id: 'walletconnect',
name: 'WalletConnect',
description: 'Connect with WalletConnect',
- icon: '๏ฟฝ',
+ icon: = ({ isOpen, onClose }) =>
return 0;
});
- if (!isOpen) return null;
-
return (
-
- {isOpen && (
-
-
-
-
-
-
- Connect Wallet
-
-
-
-
+ { if (!open) onClose(); }}>
+
+
+ Connect Wallet
+
-
+
{renderLoadingStep()}
{renderSecurityStatus()}
@@ -303,7 +285,7 @@ export const WalletModal: React.FC
= ({ isOpen, onClose }) =>
disabled={isConnecting || isLoadingConnector}
className="w-full flex items-center gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
-
+
{wallet.icon}
@@ -312,7 +294,8 @@ export const WalletModal: React.FC = ({ isOpen, onClose }) =>
{wallet.name}
- โ Installed
+
@@ -330,7 +313,7 @@ export const WalletModal: React.FC
= ({ isOpen, onClose }) =>
key={wallet.id}
className="w-full flex items-center gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg"
>
-
+
{wallet.icon}
@@ -368,9 +351,8 @@ export const WalletModal: React.FC = ({ isOpen, onClose }) =>
-
-
+
+
);
};
diff --git a/src/components/__tests__/ARPropertyPreview.test.tsx b/src/components/__tests__/ARPropertyPreview.test.tsx
new file mode 100644
index 00000000..1ed6b558
--- /dev/null
+++ b/src/components/__tests__/ARPropertyPreview.test.tsx
@@ -0,0 +1,179 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { ARPropertyPreview } from "../mobile/ARPropertyPreview";
+import type { MobileProperty } from "@/types/mobileProperty";
+
+const mockProperty: MobileProperty = {
+ id: "1",
+ name: "Test Property",
+ location: "New York, NY",
+ type: "Residential",
+ value: 500000,
+ tokens: 1000,
+ roi: 10,
+ monthlyIncome: 2000,
+ images: ["https://example.com/image.jpg"],
+ description: "A test property",
+ bedrooms: 3,
+ bathrooms: 2,
+ sqft: 1500,
+};
+
+const mockStream = {
+ getTracks: () => [{ stop: jest.fn() }],
+} as unknown as MediaStream;
+
+beforeEach(() => {
+ Object.defineProperty(navigator, "xr", {
+ value: {
+ isSessionSupported: jest.fn().mockResolvedValue(false),
+ requestSession: jest.fn(),
+ },
+ writable: true,
+ configurable: true,
+ });
+
+ Object.defineProperty(navigator, "mediaDevices", {
+ value: {
+ getUserMedia: jest.fn().mockResolvedValue(mockStream),
+ },
+ writable: true,
+ configurable: true,
+ });
+
+ HTMLVideoElement.prototype.play = jest.fn().mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+ jest.clearAllMocks();
+});
+
+describe("ARPropertyPreview", () => {
+ it("renders nothing when isOpen is false", () => {
+ const { container } = render(
+ {collectProps} );
+ rerender({collectProps} );
+
+ expect(received).toHaveLength(2);
+ expect(received[0]).toBe(received[1]);
+ });
+
+ it('returns a fresh props reference when chain or wallet fields change', () => {
+ const received: unknown[] = [];
+ const collectProps = (props: unknown) => {
+ received.push(props);
+ return null;
+ };
+
+ const { rerender } = render({collectProps} );
+
+ mockUseChain.mockReturnValue({
+ currentChain: 137,
+ chainConfig: { name: 'Polygon', symbol: 'MATIC', color: '#8247e5' },
+ });
+ rerender({collectProps} );
+
+ expect(received).toHaveLength(2);
+ expect(received[0]).not.toBe(received[1]);
+ expect((received[1] as { chainId: number }).chainId).toBe(137);
+ expect((received[1] as { chainName: string }).chainName).toBe('Polygon');
+ });
+
+ it('renders the fallback when not connected and no props are evaluated', () => {
+ mockUseWalletStore.mockReturnValue({
+ isConnected: false,
+ address: null,
+ balance: null,
+ });
+
+ const collectProps = jest.fn(() => null);
+ const { container } = render(
+ fb}>
+ {collectProps}
+
+ );
+
+ expect(container.querySelector('[data-testid="fb"]')).not.toBeNull();
+ // The children render-prop should not be invoked on the fallback branch.
+ expect(collectProps).not.toHaveBeenCalled();
+ });
+});
diff --git a/src/components/__tests__/DomainWarningBanner.test.tsx b/src/components/__tests__/DomainWarningBanner.test.tsx
new file mode 100644
index 00000000..ce364df0
--- /dev/null
+++ b/src/components/__tests__/DomainWarningBanner.test.tsx
@@ -0,0 +1,355 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
+
+import { DomainWarningBanner } from '@/components/DomainWarningBanner';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const setLocation = (hrefValue: string, hostnameValue?: string) => {
+ // jsdom defines `window.location` as a configurable getter that returns
+ // a Location proxy. Overriding with a plain `value:` does work in most
+ // cases, but in some jsdom builds the underlying accessor refuses to be
+ // replaced (e.g. when the descriptor is shared with the original
+ // Location instance). Using a `get:` getter that returns a fresh object
+ // each access sidesteps that conflict entirely and is the pattern used
+ // by neighbouring component tests in the repo.
+ const hostname =
+ hostnameValue ?? new URL(hrefValue, 'http://localhost').hostname;
+ Object.defineProperty(window, 'location', {
+ configurable: true,
+ get: () => ({
+ href: hrefValue,
+ hostname,
+ origin: hrefValue,
+ protocol: 'https:',
+ host: hostname,
+ pathname: '/',
+ search: '',
+ hash: '',
+ port: '',
+ assign: jest.fn(),
+ replace: jest.fn(),
+ reload: jest.fn(),
+ }),
+ });
+};
+
+const buildDetectResult = (
+ isPhishing: boolean,
+ riskScore: number,
+ warnings: string[] = [],
+ threats: string[] = [],
+) => ({
+ isPhishing,
+ riskScore,
+ threats,
+ warnings,
+});
+
+const mockDetectSpy = jest.fn();
+const mockReportSpy = jest.fn();
+
+jest.mock('@/utils/security/phishingProtection', () => ({
+ PhishingProtection: {
+ detectPhishing: (...args: unknown[]) => mockDetectSpy(...args),
+ reportSuspiciousDomain: (...args: unknown[]) => mockReportSpy(...args),
+ clearMemoizedResults: jest.fn(),
+ },
+}));
+
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+
+beforeEach(() => {
+ jest.clearAllMocks();
+ // Default location to a domain that Phishing returns no warnings for.
+ setLocation('https://example.com/');
+});
+
+// DetectPhishing is the entry point used by the component's useEffect.
+// When `mockDetectSpy` returns a synchronous object the banner mounts
+// the appropriate UI immediately; `mockReportSpy` records audit calls for
+// phishing / unofficial domains but is silent on verified hosts.
+
+describe('
+
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/src/components/__tests__/FilterSidebar.test.tsx b/src/components/__tests__/FilterSidebar.test.tsx
new file mode 100644
index 00000000..96647109
--- /dev/null
+++ b/src/components/__tests__/FilterSidebar.test.tsx
@@ -0,0 +1,318 @@
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FilterSidebar } from '../FilterSidebar';
+import { DEFAULT_FILTERS } from '@/types/property';
+import type { SearchFilters } from '@/types/property';
+
+const activeFilters: SearchFilters = {
+ ...DEFAULT_FILTERS,
+ priceRange: [100000, 500000],
+ propertyTypes: ['residential'],
+ blockchains: ['ethereum'],
+ roiMin: 5,
+ bedrooms: [2],
+};
+
+describe('FilterSidebar visual snapshots', () => {
+ it('matches snapshot with default filters', () => {
+ const { container } = render(
+ & { fill?: boolean; sizes?: string }) => {
+ // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+ return
: null,
+}));
+
+const baseProperty: MobileProperty = {
+ id: "prop-1",
+ name: "Test Property",
+ location: "New York, NY",
+ type: "Residential",
+ value: 500000,
+ tokens: 1000,
+ roi: 8.5,
+ monthlyIncome: 2500,
+ images: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"],
+ description: "A lovely test property",
+};
+
+describe("MobilePropertyCard", () => {
+ describe("rendering", () => {
+ it("renders the property name and location", () => {
+ render() => {
+ if (!options) return key;
+ // Replace {{placeholder}} with the corresponding option value
+ return key.replace(/\{\{(\w+)\}\}/g, (_: string, k: string) =>
+ String(options[k] ?? `{{${k}}}`),
+ );
+ },
+ }),
+}));
+
+jest.mock("next/image", () => ({
+ __esModule: true,
+ default: (props: React.ImgHTMLAttributes & { fill?: boolean; sizes?: string }) => {
+ // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+ return
+ ,
+ );
+
+describe('MortgageCalculator i18n', () => {
+ beforeEach(async () => {
+ await i18n.changeLanguage('en');
+ });
+
+ it('renders translated labels in English', () => {
+ renderCalculator();
+
+ expect(screen.getByText('Investment Calculator')).toBeInTheDocument();
+ expect(screen.getByText('Estimate your potential returns from tokenized real estate')).toBeInTheDocument();
+ expect(screen.getByText('Share')).toBeInTheDocument();
+ expect(screen.getByText('PropChain vs. Traditional Real Estate')).toBeInTheDocument();
+ });
+
+ it('renders translated labels in Spanish', async () => {
+ await i18n.changeLanguage('es');
+ renderCalculator();
+
+ expect(screen.getByText('Calculadora de Inversiรณn')).toBeInTheDocument();
+ expect(screen.getByText('Compartir')).toBeInTheDocument();
+ });
+
+ it('uses pluralization for holding period', () => {
+ renderCalculator();
+
+ expect(screen.getByText('5 Years')).toBeInTheDocument();
+ });
+
+ it('applies RTL direction for Arabic', async () => {
+ await i18n.changeLanguage('ar');
+ const { container } = renderCalculator();
+
+ const card = container.querySelector('[dir="rtl"]');
+ expect(card).toBeInTheDocument();
+ expect(screen.getByText('ุญุงุณุจุฉ ุงูุงุณุชุซู
ุงุฑ')).toBeInTheDocument();
+ });
+
+ it('uses locale-aware currency formatting', () => {
+ renderCalculator();
+
+ expect(screen.getAllByText(/\$1,000/).length).toBeGreaterThan(0);
+ });
+});
diff --git a/src/components/__tests__/NFTCertificate.test.tsx b/src/components/__tests__/NFTCertificate.test.tsx
index d3a57914..80c8d4cd 100644
--- a/src/components/__tests__/NFTCertificate.test.tsx
+++ b/src/components/__tests__/NFTCertificate.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { NFTCertificateCard } from '@/components/NFTCertificate';
import type { NFTCertificate } from '@/types/certificate';
@@ -8,6 +8,28 @@ jest.mock('next/image', () => ({
default: (props: React.ImgHTMLAttributes) => ;
+const mockDownloadPdf = downloadCertificatePdf as jest.MockedFunction;
+const mockShareUrl = getCertificateShareUrl as jest.MockedFunction;
+
function truncateMiddle(value: string, startChars: number, endChars: number): string {
const minLength = startChars + endChars + 3;
if (value.length <= minLength) return value;
@@ -79,4 +101,143 @@ describe('NFTCertificateCard', () => {
expect(link).toHaveAttribute('target', '_blank');
expect(link).toHaveAttribute('rel', 'noopener noreferrer');
});
+
+ it('renders the property image when provided', () => {
+ render(
+ ((resolve) => { resolveDownload = resolve; })
+ );
+ render(((resolve) => { resolveDownload = resolve; })
+ );
+ render( = {
+ 'networkSwitcher.selectNetwork': 'Select Network',
+ 'networkSwitcher.switchingNetwork': 'Switching network...',
+ };
+ return map[key] ?? key;
+ },
+ }),
+}));
+
+jest.mock('@/store/walletStore', () => ({
+ useWalletStore: () => ({ isSwitchingNetwork: false }),
+}));
+
+jest.mock('@/providers/ChainAwareProvider', () => ({
+ useChain: () => ({
+ currentChain: 1,
+ chainConfig: { name: 'Ethereum', color: '#627EEA' },
+ switchChain: jest.fn(),
+ getChainName: (id: number) => (id === 1 ? 'Ethereum' : 'Unknown'),
+ getChainColor: () => '#627EEA',
+ }),
+}));
+
+jest.mock('@/config/chains', () => ({
+ SUPPORTED_CHAINS: [
+ { id: 1, name: 'Ethereum', nativeCurrency: { symbol: 'ETH' } },
+ { id: 137, name: 'Polygon', nativeCurrency: { symbol: 'MATIC' } },
+ ],
+ toChainId: (id: number) => id,
+}));
+
+describe('NetworkSwitcher i18n', () => {
+ it('renders the current chain name', () => {
+ render(;
+
+const buildTransaction = (overrides: Partial = {}): Transaction => ({
+ id: 'tx-1',
+ hash: '0xabcdef1234567890',
+ type: 'purchase',
+ status: 'pending',
+ chainId: 1,
+ from: '0xabc',
+ confirmations: 0,
+ requiredConfirmations: 12,
+ timestamp: Date.now(),
+ ...overrides,
+});
+
+describe('NotificationSystem', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ localStorage.clear();
+ mockUseTransactionStore.mockReturnValue({ transactions: [] } as ReturnType);
+ });
+
+ it('renders nothing (null) to the DOM', () => {
+ const { container } = render();
+ const { container } = render();
+ const { container } = render();
+ const { container } = render();
+ const { container } = render();
+ render();
+ render();
+ render();
+ render( & { layout?: boolean }>
+ >((props, ref) => {
+ const { children, style, className, onClick, layout, ...rest } = props;
+ return (
+
+ {children}
+
+ );
+ });
+ MotionDiv.displayName = 'MotionDiv';
+ return {
+ motion: { div: MotionDiv },
+ AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children},
+ };
+});
+jest.mock('@/components/ui/button', () => ({
+ Button: ({ children, onClick }: React.PropsWithChildren<{ onClick?: () => void }>) => (
+ {children}
+ ),
+}));
+jest.mock('lucide-react', () => ({
+ X: () => ;
+
+const makeStore = (overrides = {}) => ({
+ isActive: true,
+ currentStep: 0,
+ nextStep: jest.fn(),
+ prevStep: jest.fn(),
+ stopOnboarding: jest.fn(),
+ completeOnboarding: jest.fn(),
+ ...overrides,
+});
+
+describe('OnboardingTour', () => {
+ it('renders nothing when isActive is false', () => {
+ mockUseOnboardingStore.mockReturnValue(makeStore({ isActive: false }) as ReturnType);
+ const { container } = render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ render();
+ const { rerender } = render();
+ rerender();
+ rerender();
+ render(('button, [href], [tabindex]:not([tabindex="-1"])')
+ );
+ expect(focusables.length).toBeGreaterThanOrEqual(2);
+
+ const first = focusables[0];
+ const last = focusables[focusables.length - 1];
+ last.focus();
+ fireEvent.keyDown(last, { key: 'Tab' });
+ expect(document.activeElement).toBe(first);
+ });
+
+ it('wraps Shift+Tab from the first focusable back to the last', () => {
+ const store = makeStore();
+ mockUseOnboardingStore.mockReturnValue(store as ReturnType);
+ render(('button, [href], [tabindex]:not([tabindex="-1"])')
+ );
+ expect(focusables.length).toBeGreaterThanOrEqual(2);
+
+ const first = focusables[0];
+ const last = focusables[focusables.length - 1];
+ first.focus();
+ fireEvent.keyDown(first, { key: 'Tab', shiftKey: true });
+ expect(document.activeElement).toBe(last);
+ });
+
+ it('does not pull focus out of the card when Tab moves between middle focusables', () => {
+ const store = makeStore();
+ mockUseOnboardingStore.mockReturnValue(store as ReturnType);
+ render(('button, [href], [tabindex]:not([tabindex="-1"])')
+ );
+ const middle = focusables[Math.floor(focusables.length / 2)];
+ middle.focus();
+ fireEvent.keyDown(middle, { key: 'Tab' });
+ // After Tab, focus must remain inside the tour card (not leak to the document).
+ const active = document.activeElement as HTMLElement | null;
+ if (active) {
+ expect(dialog.contains(active)).toBe(true);
+ }
+ });
+
+ it('restores focus to the element that was active before opening', () => {
+ // Plant a focusable external trigger outside the React tree.
+ const trigger = document.createElement('button');
+ trigger.textContent = 'External Trigger';
+ trigger.setAttribute('data-testid', 'external-trigger');
+ document.body.appendChild(trigger);
+ trigger.focus();
+ expect(document.activeElement).toBe(trigger);
+
+ mockUseOnboardingStore.mockReturnValue(makeStore() as ReturnType);
+ const { rerender } = render(
+ );
+ rerender() => {propertyName}
+ ),
+}));
+
+jest.mock('../property/CurrencyToggle', () => ({
+ CurrencyToggle: ({ ethAmount }: { ethAmount: number }) => (
+ {ethAmount}
+ ),
+}));
+
+jest.mock('../MortgageCalculator', () => ({
+ MortgageCalculator: ({
+ propertyPrice,
+ defaultYield,
+ }: {
+ propertyPrice?: number;
+ defaultYield?: number;
+ }) => (
+
+ {propertyPrice}-{defaultYield}
+
+ ),
+}));
+
+describe('PropertyDetailServer', () => {
+ it('renders property name and location', () => {
+ render(