Merge branch 'main' into feature/walletconnect-v2

Author: Alimzy

.gitignore

@@ -36,3 +36,7 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 tsconfig.tsbuildinfo
+# playwright
+/playwright-report/
+/test-results/
+

app/activity/page.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAccount } from 'wagmi';
+import Link from 'next/link';
+import { DashboardLayout } from '@/components/layouts/DashboardLayout';
+import { TransactionHistorySection } from '@/components/TransactionHistorySection';
+import { EmptyState } from '@/components/EmptyState';
+import { SkeletonRow } from '@/components/SkeletonRow';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+
+export default function ActivityPage() {
+  const { t } = useTranslation();
+  const { address, isConnecting } = useAccount();
+  const [loading, setLoading] = useState(true);
+
+  React.useEffect(() => {
+    if (!isConnecting) {
+      const timer = setTimeout(() => setLoading(false), 600);
+      return () => clearTimeout(timer);
+    }
+  }, [isConnecting]);
+
+  if (isConnecting || loading) {
+    return (
+      <DashboardLayout>
+        <section id="activity" className="card lg:col-span-2">
+          <h2 className="text-sm font-semibold text-gray-900">{t('history.title')}</h2>
+          <div className="mt-3 space-y-1">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <SkeletonRow key={i} columns={3} />
+            ))}
+          </div>
+        </section>
+      </DashboardLayout>
+    );
+  }
+
+  if (!address) {
+    return (
+      <DashboardLayout>
+        <EmptyState
+          headline={t('activity.empty.connectHeadline')}
+          description={t('activity.empty.connectDescription')}
+          primaryLabel={t('common.connectWallet')}
+          primaryHref="/"
+        />
+      </DashboardLayout>
+    );
+  }
+
+  return (
+    <DashboardLayout>
+      <section id="activity" className="card lg:col-span-2">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-gray-900">{t('history.title')}</h2>
+          <Link href="/dashboard" className="text-xs text-blue-600 hover:underline">
+            {t('nav.home')}
+          </Link>
+        </div>
+        <ErrorBoundary>
+          <TransactionHistorySection />
+        </ErrorBoundary>
+      </section>
+    </DashboardLayout>
+  );
+}

app/dashboard/page.tsx

@@ -1,44 +1,94 @@
 'use client';
 
 import { Suspense, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { DashboardLayout } from '@/components/layouts/DashboardLayout';
 import { TransactionHistorySection } from '@/components/TransactionHistorySection';
 import { TransactionSimulator } from '@/components/TransactionSimulator';
 import { CachedActivity } from '@/components/CachedActivity';
 import { SendModal } from '@/components/SendModal';
 import { PortfolioAssets } from '@/components/PortfolioAssets';
+import { VaultTable } from '@/components/vaults/VaultTable';
+import { PluginGrid } from '@/components/dashboard/PluginGrid';
+
+import { SwapCard } from '@/components/swap/SwapCard';
+
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { ProtocolStatsBar } from '@/components/dashboard/ProtocolStatsBar';
+import { RecentSwaps } from '@/components/dashboard/RecentSwaps';
 
 export default function DashboardPage() {
+  const { t } = useTranslation();
   const [sendOpen, setSendOpen] = useState(false);
 
   return (
     <DashboardLayout>
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <section id="swap" className="lg:col-span-2">
+          <ErrorBoundary>
+            <SwapCard />
+          </ErrorBoundary>
+        </section>
+
+        <section id="protocol-stats" className="lg:col-span-2">
+          <ErrorBoundary>
+            <ProtocolStatsBar />
+          </ErrorBoundary>
+        </section>
+
         <section id="staking" className="card">
           <h2 className="text-sm font-semibold text-gray-900">Staking</h2>
-          <p className="mt-2 text-sm text-gray-600">No active stakes yet.</p>
+          <ErrorBoundary>
+            <p className="mt-2 text-sm text-gray-600">No active stakes yet.</p>
+          <h2 className="text-sm font-semibold text-gray-900">{t('dashboard.staking')}</h2>
+          <ErrorBoundary>
+            <p className="mt-2 text-sm text-gray-600">{t('dashboard.noStakes')}</p>
+          </ErrorBoundary>
         </section>
 
         <section id="governance" className="card">
-          <h2 className="text-sm font-semibold text-gray-900">Governance</h2>
-          <p className="mt-2 text-sm text-gray-600">No open proposals.</p>
+          <h2 className="text-sm font-semibold text-gray-900">{t('dashboard.governance')}</h2>
+          <p className="mt-2 text-sm text-gray-600">{t('dashboard.noProposals')}</p>
+        </section>
+
+        <section id="recent-swaps" className="lg:col-span-2">
+          <ErrorBoundary>
+            <RecentSwaps />
+          </ErrorBoundary>
         </section>
 
         <section id="portfolio" className="card lg:col-span-2">
-          <PortfolioAssets />
+          <ErrorBoundary>
+            <PortfolioAssets />
+          </ErrorBoundary>
           <button type="button" className="btn mt-3" onClick={() => setSendOpen(true)}>
-            Send asset
+            {t('dashboard.sendAsset')}
           </button>
         </section>
 
-        <TransactionSimulator />
+        <ErrorBoundary>
+          <TransactionSimulator />
+        </ErrorBoundary>
 
-        <CachedActivity />
+        <ErrorBoundary>
+          <CachedActivity />
+        </ErrorBoundary>
 
         {/* useSearchParams (page state, #15) requires a Suspense boundary. */}
         <Suspense fallback={null}>
-          <TransactionHistorySection />
+          <ErrorBoundary>
+            <TransactionHistorySection />
+          </ErrorBoundary>
         </Suspense>
+
+        {/*
+         * Community plugin widgets — renders nothing when no plugins are
+         * registered, so existing layout is unaffected by default.
+         * Plugins register themselves via usePluginSDK().registerPlugin().
+         */}
+        <ErrorBoundary>
+          <PluginGrid />
+        </ErrorBoundary>
       </div>
 
       <SendModal isOpen={sendOpen} onClose={() => setSendOpen(false)} />

app/globals.css

@@ -21,3 +21,50 @@ html, body, :root {
 .btn-outline {
   @apply inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800;
 }
+
+/* ─── RTL (Right-to-Left) support ────────────────────────────────────── */
+
+/*
+ * When the I18nProvider sets `dir="rtl"` on <html> (e.g. for Arabic),
+ * these rules ensure the layout mirrors correctly.
+ */
+
+[dir='rtl'] {
+  text-align: right;
+}
+
+[dir='rtl'] .container {
+  direction: rtl;
+}
+
+/*
+ * Flip flex-row ordering for RTL so navbar items render in the expected
+ * mirrored order.  Tailwind's logical utilities (e.g. `ms-`, `me-`,
+ * `ps-`, `pe-`, `start-`, `end-`) are already direction-aware, so we
+ * only need to handle the overall row direction here.
+ */
+[dir='rtl'] .flex-row,
+[dir='rtl'] .md\:flex {
+  flex-direction: row-reverse;
+}
+
+/* Dropdown menus should open from the opposite side in RTL. */
+[dir='rtl'] .origin-top-right {
+  transform-origin: top left;
+}
+
+/* Subtle micro-animation for dropdown menus (shared LTR + RTL). */
+@keyframes fade-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-in {
+  animation: fade-slide-in 150ms ease-out;
+}

app/page.tsx

@@ -1,9 +1,14 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
 export default function HomePage() {
+  const { t } = useTranslation();
   return (
     <div className="card">
-      <h1 className="text-xl font-semibold text-gray-900">Welcome to WhiteChain</h1>
+      <h1 className="text-xl font-semibold text-gray-900">{t('home.welcome')}</h1>
       <p className="mt-2 text-sm text-gray-600">
-        Connect your wallet from the navbar to get started.
+        {t('home.connectPrompt')}
       </p>
     </div>
   );

app/providers.tsx

@@ -2,10 +2,13 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
+import { Toaster } from 'sonner';
 import { useState } from 'react';
 import { wagmiConfig } from '@/lib/wagmi';
 import { MempoolProvider } from '@/lib/mempool/MempoolProvider';
 import { useBlockchainDataSync } from '@/lib/hooks/useBlockchainData';
+import { PluginSDKProvider } from '@/lib/core/PluginSDKProvider';
+import { I18nProvider } from '@/components/I18nProvider';
 
 // Renders nothing; just mounts the block listener from issue #29 so
 // balance queries invalidate smartly app-wide, not per-component.
@@ -21,8 +24,15 @@ export function Providers({ children }: { children: React.ReactNode }) {
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <BlockchainDataSync />
-        <MempoolProvider>{children}</MempoolProvider>
+        <MempoolProvider>
+          {/* PluginSDKProvider must be inside WagmiProvider + QueryClientProvider
+              so wallet hooks are available to the plugin bridge. */}
+          <PluginSDKProvider>
+            <I18nProvider>{children}</I18nProvider>
+          </PluginSDKProvider>
+        </MempoolProvider>
       </QueryClientProvider>
+      <Toaster richColors position="bottom-right" closeButton />
     </WagmiProvider>
   );
 }

components/AssetTable.tsx

@@ -7,6 +7,8 @@ export interface AssetRow {
   symbol: string;
   amount: string;
   valueUsd?: string;
+  /** When true, the balance is optimistically updated and pending confirmation. */
+  isPending?: boolean;
 }
 
 interface AssetTableProps {
@@ -47,7 +49,18 @@ export function AssetTable({ isLoading, rows, skeletonCount = 5 }: AssetTablePro
       {rows.map((row, i) => (
         <div key={`${row.symbol}-${i}`} className="flex items-center justify-between px-3 py-3">
           <span className="text-sm font-medium text-gray-900">{row.symbol}</span>
-          <span className="text-sm text-gray-700">{row.amount}</span>
+          <span className="flex items-center gap-2 text-sm text-gray-700">
+            {row.amount}
+            {row.isPending && (
+              <span
+                className="inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700"
+                title="Pending confirmation"
+              >
+                <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500" />
+                Pending
+              </span>
+            )}
+          </span>
           {row.valueUsd && <span className="text-sm text-gray-500">{row.valueUsd}</span>}
         </div>
       ))}

components/Avatar.test.tsx

@@ -43,11 +43,18 @@ describe('Avatar', () => {
 
   it('renders the resolved ENS avatar as an image', () => {
     hoisted.ensName = 'vitalik.eth';
-    hoisted.avatarUrl = 'https://example.com/avatar.png';
+    hoisted.avatarUrl = 'https://metadata.ens.domains/mainnet/avatar/vitalik.eth';
     render(<Avatar address={ADDRESS} />);
     const img = screen.getByRole('img', { name: 'vitalik.eth avatar' }) as HTMLImageElement;
     expect(img.tagName).toBe('IMG');
-    expect(img.src).toBe('https://example.com/avatar.png');
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.width).toBe(32);
+    expect(img.height).toBe(32);
+    const optimizedUrl = new URL(img.src);
+    expect(optimizedUrl.pathname).toBe('/_next/image');
+    expect(optimizedUrl.searchParams.get('url')).toBe(
+      'https://metadata.ens.domains/mainnet/avatar/vitalik.eth'
+    );
   });
 
   it('falls back to the blocky circle if the image fails to load', () => {

components/Avatar.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { useEnsAvatar, useEnsName } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
+import { ImageWithFallback } from '@/components/ImageWithFallback';
 
 export interface AvatarProps {
   address?: `0x${string}`;
@@ -48,8 +49,6 @@ function BlockyFallback({ address, size }: { address?: string; size: number }) {
  * avatar record, or the image fails to load.
  */
 export function Avatar({ address, size = 32, className }: AvatarProps) {
-  const [imgErrored, setImgErrored] = useState(false);
-
   const { data: ensName } = useEnsName({
     address,
     chainId: mainnet.id,
@@ -70,24 +69,25 @@ export function Avatar({ address, size = 32, className }: AvatarProps) {
     }
   });
 
-  if (!avatarUrl || imgErrored) {
+  const fallback = <BlockyFallback address={address} size={size} />;
+
+  if (!avatarUrl) {
     return (
       <span className={className}>
-        <BlockyFallback address={address} size={size} />
+        {fallback}
       </span>
     );
   }
 
   return (
     <span className={className}>
-      {/* eslint-disable-next-line @next/next/no-img-element -- external, arbitrary ENS-hosted URL */}
-      <img
+      <ImageWithFallback
         src={avatarUrl}
         alt={ensName ? `${ensName} avatar` : 'ENS avatar'}
         width={size}
         height={size}
         className="inline-block shrink-0 rounded-full object-cover"
-        onError={() => setImgErrored(true)}
+        fallback={fallback}
       />
     </span>
   );