MettaChain · LaGodxy · Jan 24, 2026 · Jan 23, 2026
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@coinbase/wallet-sdk": "^4.3.7",
     "@hookform/resolvers": "^5.2.2",
+    "@metamask/sdk": "^0.33.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -52,11 +53,11 @@
     "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.7",
     "lucide-react": "^0.562.0",
-    "next": "15.3.1",
+    "next": "^16.1.4",
     "next-themes": "^0.4.6",
-    "react": "^19.0.0",
+    "react": "^19.2.3",
     "react-day-picker": "^9.13.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.2.3",
     "react-hook-form": "^7.71.1",
     "react-resizable-panels": "^4.4.1",
     "recharts": "^2.15.4",

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -14,6 +14,9 @@ import { RiskAnalysis } from "@/components/dashboard/RiskAnalysis";
 import { PortfolioReport } from "@/components/dashboard/PortfolioReport";
 import { DataRefreshWrapper } from "@/components/dashboard/DataRefreshWrapper";
 import { WalletConnector } from "@/components/WalletConnector";
+import { TransactionQueue } from "@/components/TransactionQueue";
+import { TransactionHistory } from "@/components/TransactionHistory";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const Index = () => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -91,6 +94,23 @@ const Index = () => {
             {/* Properties */}
             <PropertiesList />
 
+            {/* Transaction Management */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold">Transaction Management</h3>
+              <Tabs defaultValue="queue" className="w-full">
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="queue">Transaction Queue</TabsTrigger>
+                  <TabsTrigger value="history">Transaction History</TabsTrigger>
+                </TabsList>
+                <TabsContent value="queue">
+                  <TransactionQueue />
+                </TabsContent>
+                <TabsContent value="history">
+                  <TransactionHistory />
+                </TabsContent>
+              </Tabs>
+            </div>
+
             {/* Transactions */}
             <RecentTransactions />
           </main>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import "@/utils/earlyErrorSuppression";
-import { ChainAwareProvider } from "@/providers/ChainAwareProvider";
+import { ClientProviders } from "@/components/ClientProviders";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -30,7 +30,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <ChainAwareProvider>{children}</ChainAwareProvider>
+        <ClientProviders>{children}</ClientProviders>
       </body>
     </html>
   );

diff --git a/src/components/ClientProviders.tsx b/src/components/ClientProviders.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { WagmiProvider } from 'wagmi';
+import { config } from '@/config/wagmi';
+import { ChainAwareProvider } from '@/providers/ChainAwareProvider';
+import { TransactionMonitor } from '@/components/TransactionMonitor';
+import { NotificationSystem } from '@/components/NotificationSystem';
+import { Toaster } from '@/components/ui/sonner';
+
+interface ClientProvidersProps {
+  children: React.ReactNode;
+}
+
+export function ClientProviders({ children }: ClientProvidersProps) {
+  return (
+    <WagmiProvider config={config}>
+      <ChainAwareProvider>
+        {children}
+        <TransactionMonitor />
+        <NotificationSystem />
+        <Toaster />
+      </ChainAwareProvider>
+    </WagmiProvider>
+  );
+}
diff --git a/src/components/GasEstimator.tsx b/src/components/GasEstimator.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useEstimateGas, useGasPrice } from 'wagmi';
+import { formatEther } from 'viem';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Loader2 } from 'lucide-react';
+
+interface GasEstimatorProps {
+  to?: string;
+  value?: string;
+  data?: string;
+  enabled?: boolean;
+}
+
+export const GasEstimator: React.FC<GasEstimatorProps> = ({
+  to,
+  value,
+  data,
+  enabled = true,
+}) => {
+  const [estimatedGas, setEstimatedGas] = useState<string | null>(null);
+  const [estimatedCost, setEstimatedCost] = useState<string | null>(null);
+
+  const { data: gasPrice } = useGasPrice();
+  const { data: gasEstimate } = useEstimateGas({
+    to: to as `0x${string}`,
+    value: value ? BigInt(value) : undefined,
+    data: data as `0x${string}`,
+  });
+
+  useEffect(() => {
+    if (gasEstimate && gasPrice) {
+      const gasCost = gasEstimate * gasPrice;
+      setEstimatedGas(gasEstimate.toString());
+      setEstimatedCost(formatEther(gasCost));
+    }
+  }, [gasEstimate, gasPrice]);
+
+  if (!enabled || !to) {
+    return null;
+  }
+
+  const isLoading = !gasEstimate || !gasPrice;
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-medium">Gas Estimation</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {isLoading ? (
+          <div className="flex items-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm text-muted-foreground">Estimating gas...</span>
+          </div>
+        ) : (
+          <>
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-muted-foreground">Gas Limit:</span>
+              <Badge variant="secondary">{estimatedGas || 'N/A'}</Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-muted-foreground">Estimated Cost:</span>
+              <Badge variant="secondary">
+                {estimatedCost ? `${parseFloat(estimatedCost).toFixed(6)} ETH` : 'N/A'}
+              </Badge>
+            </div>
+            {gasPrice && (
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Gas Price:</span>
+                <Badge variant="outline">
+                  {formatEther(gasPrice)} ETH
+                </Badge>
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/components/NotificationSystem.tsx b/src/components/NotificationSystem.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { toast } from 'sonner';
+import { useTransactionStore, Transaction } from '@/store/transactionStore';
+import { CheckCircle, XCircle, AlertCircle, Clock } from 'lucide-react';
+
+export const NotificationSystem: React.FC = () => {
+  const { transactions } = useTransactionStore();
+
+  useEffect(() => {
+    const handleTransactionUpdate = (transaction: Transaction) => {
+      const { status, type, hash, description } = transaction;
+
+      const title = `${type.charAt(0).toUpperCase() + type.slice(1)} Transaction`;
+      const shortHash = `${hash.slice(0, 6)}...${hash.slice(-4)}`;
+
+      switch (status) {
+        case 'confirmed':
+          toast.success(`${title} Confirmed`, {
+            description: `${description || 'Transaction'} ${shortHash} has been confirmed`,
+            icon: <CheckCircle className="h-4 w-4" />,
+            duration: 5000,
+          });
+
+          // Browser notification
+          if ('Notification' in window && Notification.permission === 'granted') {
+            new Notification(`${title} Confirmed`, {
+              body: `${description || 'Transaction'} ${shortHash} has been confirmed`,
+              icon: '/favicon.ico',
+            });
+          }
+          break;
+
+        case 'failed':
+          toast.error(`${title} Failed`, {
+            description: `${description || 'Transaction'} ${shortHash} has failed`,
+            icon: <XCircle className="h-4 w-4" />,
+            duration: 7000,
+          });
+
+          // Browser notification
+          if ('Notification' in window && Notification.permission === 'granted') {
+            new Notification(`${title} Failed`, {
+              body: `${description || 'Transaction'} ${shortHash} has failed`,
+              icon: '/favicon.ico',
+            });
+          }
+          break;
+
+        case 'processing':
+          toast.info(`${title} Processing`, {
+            description: `${description || 'Transaction'} ${shortHash} is being processed`,
+            icon: <AlertCircle className="h-4 w-4" />,
+            duration: 3000,
+          });
+          break;
+
+        case 'cancelled':
+          toast.warning(`${title} Cancelled`, {
+            description: `${description || 'Transaction'} ${shortHash} has been cancelled`,
+            icon: <Clock className="h-4 w-4" />,
+            duration: 5000,
+          });
+          break;
+
+        default:
+          break;
+      }
+    };
+
+    // Request notification permission on mount
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+
+    // Monitor transaction changes
+    transactions.forEach((transaction) => {
+      // This is a simplified approach. In a real app, you'd track previous states
+      // 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}`;
+        if (!localStorage.getItem(notifiedKey)) {
+          handleTransactionUpdate(transaction);
+          localStorage.setItem(notifiedKey, 'true');
+        }
+      }
+    });
+  }, [transactions]);
+
+  return null;
+};