redesigned

packages/nextjs/components/DeFiSecurityBasics/TransactionReplayAttacks.tsx

@@ -1,37 +1,164 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { ArrowRight, Copy, AlertTriangle, Shield, RefreshCw } from 'lucide-react';
+
+const Timeline = ({ steps, activeStep }: { 
+  steps: Array<{title: string, description: string}>;
+  activeStep: number;
+}) => (
+  <div className="relative">
+    {steps.map((step, index) => (
+      <div key={index} className="flex mb-8">
+        <div className="flex flex-col items-center mr-4">
+          <div className={`rounded-full h-8 w-8 flex items-center justify-center ${
+            index <= activeStep ? 'bg-blue-500 text-white' : 'bg-gray-200'
+          }`}>
+            {index + 1}
+          </div>
+          {index < steps.length - 1 && (
+            <div className="h-full w-0.5 bg-gray-200 my-2" />
+          )}
+        </div>
+        <div className={`transition-opacity duration-300 ${
+          index === activeStep ? 'opacity-100' : 'opacity-50'
+        }`}>
+          <h3 className="font-semibold">{step.title}</h3>
+          <p className="text-gray-600 text-sm">{step.description}</p>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+const MetricCard = ({ title, value, trend }: { 
+  title: string;
+  value: string;
+  trend: 'up' | 'down';
+}) => (
+  <div className="bg-white p-4 rounded-lg shadow-sm">
+    <h3 className="text-gray-600 text-sm mb-1">{title}</h3>
+    <div className="flex items-center gap-2">
+      <span className="text-xl font-bold">{value}</span>
+      <span className={trend === 'up' ? 'text-red-500' : 'text-green-500'}>
+        {trend === 'up' ? '↑' : '↓'}
+      </span>
+    </div>
+  </div>
+);
+
+const TransactionReplayAttacks = () => {
+  const [activeStep, setActiveStep] = useState(0);
+
+  const attackSteps = [
+    {
+      title: "Original Transaction Observed",
+      description: "Attacker monitors the mempool for profitable transactions"
+    },
+    {
+      title: "Transaction Copied",
+      description: "Transaction data is duplicated and modified"
+    },
+    {
+      title: "Signature Manipulation",
+      description: "Transaction signatures are adjusted for the target chain"
+    },
+    {
+      title: "Replay Execution",
+      description: "Modified transaction is broadcast to exploit cross-chain vulnerabilities"
+    }
+  ];
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setActiveStep((prev) => (prev + 1) % attackSteps.length);
+    }, 3000);
+    return () => clearInterval(timer);
+  }, []);
 
-const TransactionReplayAttacks: React.FC = () => {
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-4">Transaction Replay Attacks</h1>
-      <p>
-        Transaction replay attacks involve duplicating a transaction from one chain or layer to another, causing unintended
-        consequences or losses for users.
-      </p>
-
-      <h2 className="text-xl font-semibold mt-4">How It Works</h2>
-      <ul className="list-disc pl-6 space-y-2">
-        <li>
-          A transaction on one blockchain or layer is observed and copied, with modifications to data or signatures, and
-          replayed on another blockchain or layer.
-        </li>
-        <li>This can lead to duplicate transactions or exploit vulnerabilities in cross-chain protocols.</li>
-      </ul>
-
-      <h2 className="text-xl font-semibold mt-4">Impact</h2>
-      <ul className="list-disc pl-6 space-y-2">
-        <li>Financial losses for users.</li>
-        <li>Breaks the trust in multi-chain systems.</li>
-        <li>Creates inefficiencies in the blockchain ecosystem.</li>
-      </ul>
-
-      <h2 className="text-xl font-semibold mt-4">Mitigation</h2>
-      <ul className="list-disc pl-6 space-y-2">
-        <li>Use unique transaction identifiers to prevent replay across chains.</li>
-        <li>Implement chain-specific signatures for transactions.</li>
-      </ul>
+    <div className="max-w-6xl mx-auto p-6 space-y-8">
+      <div className="bg-gradient-to-r from-red-600 to-red-800 p-8 rounded-xl text-white">
+        <div className="flex items-center gap-3 mb-4">
+          <RefreshCw className="h-8 w-8" />
+          <h1 className="text-3xl font-bold">Transaction Replay Attacks</h1>
+        </div>
+        <p className="text-lg opacity-90">
+          Cross-chain exploitation through transaction duplication
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-4">
+        <MetricCard
+          title="Profitable Transactions"
+          value="188,365"
+          trend="up"
+        />
+        <MetricCard
+          title="Success Rate"
+          value="0.02%"
+          trend="down"
+        />
+        <MetricCard
+          title="Average Profit"
+          value="35M USD"
+          trend="up"
+        />
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-8">
+        <div className="bg-white p-6 rounded-xl shadow-sm">
+          <h2 className="text-xl font-bold mb-6 flex items-center gap-2">
+            <Copy className="text-red-500" />
+            Attack Flow
+          </h2>
+          <Timeline steps={attackSteps} activeStep={activeStep} />
+        </div>
+
+        <div className="space-y-6">
+          <div className="bg-yellow-50 p-6 rounded-xl">
+            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
+              <AlertTriangle className="text-yellow-500" />
+              Security Implications
+            </h2>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 bg-yellow-500 rounded-full" />
+                <span>Real-time detection algorithm (0.18s ± 0.29)</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 bg-yellow-500 rounded-full" />
+                <span>Cross-chain vulnerability exposure</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 bg-yellow-500 rounded-full" />
+                <span>Network-wide transaction monitoring required</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-green-50 p-6 rounded-xl">
+            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
+              <Shield className="text-green-500" />
+              Mitigation Strategies
+            </h2>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 bg-green-500 rounded-full" />
+                <span>Chain-specific transaction nonces</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 bg-green-500 rounded-full" />
+                <span>Replay protection via unique identifiers</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 bg-green-500 rounded-full" />
+                <span>Cross-chain signature verification</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
 
-export default TransactionReplayAttacks;
+export default TransactionReplayAttacks;

packages/nextjs/components/Dexes/Arbitrage.tsx

@@ -1,41 +1,164 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { ArrowRight, DollarSign, RefreshCcw, TrendingUp } from 'lucide-react';
+import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+
+const ArbitrageOpportunity = ({ market1Price, market2Price, asset }:any) => (
+  <div className="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg shadow-sm">
+    <div className="flex items-center justify-between">
+      <div className="text-center p-4">
+        <h3 className="font-semibold text-gray-700">Market 1</h3>
+        <p className="text-2xl font-bold text-blue-600">${market1Price}</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <ArrowRight className="text-gray-400 mb-2" />
+        <p className="text-sm text-gray-500">Profit Opportunity:</p>
+        <p className="font-bold text-green-500">
+          ${(market2Price - market1Price).toFixed(2)}
+        </p>
+      </div>
+      <div className="text-center p-4">
+        <h3 className="font-semibold text-gray-700">Market 2</h3>
+        <p className="text-2xl font-bold text-purple-600">${market2Price}</p>
+      </div>
+    </div>
+    <p className="text-center mt-2 text-sm text-gray-600">Asset: {asset}</p>
+  </div>
+);
+
+const arbitrageData = [
+  { time: '0s', market1: 100, market2: 102 },
+  { time: '10s', market1: 101, market2: 103 },
+  { time: '20s', market1: 102, market2: 101 },
+  { time: '30s', market1: 103, market2: 100 },
+  { time: '40s', market1: 102, market2: 101 },
+  { time: '50s', market1: 101, market2: 102 },
+];
+
+const ArbitrageComponent = () => {
+  const [showFlashLoan, setShowFlashLoan] = useState(false);
+
+  const flashLoanSteps = [
+    "1. Borrow assets through flash loan",
+    "2. Buy at lower price market",
+    "3. Sell at higher price market",
+    "4. Repay flash loan + fee",
+    "5. Keep the profit"
+  ];
 
-const Arbitrage: React.FC = () => {
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-4">Arbitrage</h1>
-      <p>
-        Arbitrage involves exploiting price differences for the same asset across multiple markets to generate profits. 
-        It plays a critical role in synchronizing prices and enhancing market efficiency.
-      </p>
-
-      <h2 className="text-xl font-semibold mt-4">How Arbitrage Works</h2>
-      <ul className="list-disc pl-6 space-y-2">
-        <li>Traders identify assets with different prices across exchanges or liquidity pools.</li>
-        <li>Buy the asset at a lower price on one platform and sell it at a higher price on another.</li>
-        <li>Arbitrage opportunities arise due to inefficiencies or delays in price updates.</li>
-      </ul>
-
-      <h2 className="text-xl font-semibold mt-4">Advanced Techniques</h2>
-      <ul className="list-disc pl-6 space-y-2">
-        <li>
-          <strong>Flash Loans:</strong> Enable arbitrage without requiring upfront capital by borrowing funds for the
-          duration of the transaction.
-        </li>
-        <li>
-          <strong>Algorithmic Approaches:</strong> Techniques like the Bellman-Ford algorithm are used to detect negative
-          price cycles across multiple markets.
-        </li>
-      </ul>
-
-      <h2 className="text-xl font-semibold mt-4">Impact of Arbitrage</h2>
-      <ul className="list-disc pl-6 space-y-2">
-        <li>Balances prices across decentralized and centralized exchanges.</li>
-        <li>Enhances liquidity and trading volume.</li>
-        <li>Provides profits to traders while maintaining market efficiency.</li>
-      </ul>
+    <div className="max-w-4xl mx-auto p-6 space-y-8">
+      <div className="text-center mb-8">
+        <h1 className="text-4xl font-bold text-gray-800 mb-4">
+          Understanding DeFi Arbitrage
+        </h1>
+        <p className="text-gray-600 max-w-2xl mx-auto">
+          Arbitrage in DeFi involves exploiting price differences across multiple markets
+          to generate profits while helping maintain market efficiency.
+        </p>
+      </div>
+
+      <section className="mb-8">
+        <h2 className="text-2xl font-semibold mb-4 flex items-center">
+          <TrendingUp className="mr-2 text-blue-500" />
+          Live Arbitrage Opportunity
+        </h2>
+        <ArbitrageOpportunity
+          market1Price={100.00}
+          market2Price={102.50}
+          asset="ETH/USDT"
+        />
+      </section>
+
+      <section className="mb-8">
+        <h2 className="text-2xl font-semibold mb-4">Price Differences Over Time</h2>
+        <div className="h-64 w-full">
+          <ResponsiveContainer>
+            <LineChart data={arbitrageData}>
+              <XAxis dataKey="time" />
+              <YAxis domain={['dataMin - 1', 'dataMax + 1']} />
+              <Tooltip />
+              <Line 
+                type="monotone" 
+                dataKey="market1" 
+                stroke="#3B82F6" 
+                name="Market 1"
+              />
+              <Line 
+                type="monotone" 
+                dataKey="market2" 
+                stroke="#8B5CF6" 
+                name="Market 2"
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </section>
+
+      <section className="grid md:grid-cols-2 gap-6">
+        <div className="bg-white p-6 rounded-lg shadow-sm">
+          <h2 className="text-xl font-semibold mb-4 flex items-center">
+            <DollarSign className="mr-2 text-green-500" />
+            Traditional Arbitrage
+          </h2>
+          <ul className="space-y-2">
+            <li className="flex items-start">
+              <span className="text-blue-500 mr-2">•</span>
+              Identify price differences across markets
+            </li>
+            <li className="flex items-start">
+              <span className="text-blue-500 mr-2">•</span>
+              Buy at lower price market
+            </li>
+            <li className="flex items-start">
+              <span className="text-blue-500 mr-2">•</span>
+              Sell at higher price market
+            </li>
+          </ul>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow-sm">
+          <h2 
+            className="text-xl font-semibold mb-4 flex items-center cursor-pointer"
+            onClick={() => setShowFlashLoan(!showFlashLoan)}
+          >
+            <RefreshCcw className="mr-2 text-purple-500" />
+            Flash Loan Arbitrage
+            <span className="text-sm text-gray-500 ml-2">(Click to expand)</span>
+          </h2>
+          {showFlashLoan && (
+            <ul className="space-y-2">
+              {flashLoanSteps.map((step, index) => (
+                <li key={index} className="flex items-start">
+                  <span className="text-purple-500 mr-2">•</span>
+                  {step}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      <section className="mt-8 bg-gray-50 p-6 rounded-lg">
+        <h2 className="text-2xl font-semibold mb-4">Detection Methods</h2>
+        <div className="space-y-4">
+          <div className="border-l-4 border-blue-500 pl-4">
+            <h3 className="font-semibold text-lg">Bellman-Ford Algorithm</h3>
+            <p className="text-gray-600">
+              Detects negative cycles in price graphs to identify arbitrage opportunities
+              across multiple markets. Complexity: O(|N²| × |E|)
+            </p>
+          </div>
+          <div className="border-l-4 border-purple-500 pl-4">
+            <h3 className="font-semibold text-lg">DeFiPoser-SMT</h3>
+            <p className="text-gray-600">
+              Uses theorem solvers and path pruning to identify optimal arbitrage
+              opportunities while reducing the search space.
+            </p>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };
 
-export default Arbitrage;
+export default ArbitrageComponent;