From 9fbd2afb57105fffbbcfaf7550a87d910d0dcc4f Mon Sep 17 00:00:00 2001
From: drstrox <aayush95828@gmail.com>
Date: Sun, 2 Feb 2025 17:10:22 +0530
Subject: [PATCH 1/3] added quant trading

---
 frontend/src/components/Footer.jsx   | 40 ++++++++++---
 frontend/src/components/Homepage.jsx | 88 ++++++++++++++++++++--------
 2 files changed, 97 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 6a850b8..fa56697 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -2,22 +2,48 @@ import React from 'react';
 
 function Footer() {
   return (
-    <footer className="bg-gray-800 text-gray-300 py-6 text-center mt-10">
-      <p>&copy; {new Date().getFullYear()} Your Website. All rights reserved.</p>
-      <ul className="flex justify-center space-x-6 mt-4">
+    <footer className="bg-gray-800 text-gray-300 py-8 text-center mt-12">
+      <p className="text-sm">
+        &copy; {new Date().getFullYear()} Your Website. All rights reserved.
+      </p>
+      
+      {/* Links Section */}
+      <ul className="flex justify-center space-x-8 mt-6 text-lg">
         <li>
-          <a href="/privacy-policy" className="hover:text-white transition duration-300">Privacy Policy</a>
+          <a href="/privacy-policy" className="hover:text-white transition duration-300 hover:underline">Privacy Policy</a>
         </li>
         <li>
-          <a href="/documentation" className="hover:text-white transition duration-300">Documentation</a>
+          <a href="/documentation" className="hover:text-white transition duration-300 hover:underline">Documentation</a>
         </li>
         <li>
-          <a href="/governance" className="hover:text-white transition duration-300">Governance</a>
+          <a href="/governance" className="hover:text-white transition duration-300 hover:underline">Governance</a>
         </li>
         <li>
-          <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-white transition duration-300">GitHub</a>
+          <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-white transition duration-300 hover:underline">
+            GitHub
+          </a>
         </li>
       </ul>
+
+      {/* Social Media Links Section */}
+      {/* <div className="flex justify-center space-x-6 mt-6">
+        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-white transition duration-300">
+          Twitter
+        </a>
+        <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-blue-700 hover:text-white transition duration-300">
+          LinkedIn
+        </a>
+        <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition duration-300">
+          GitHub
+        </a>
+      </div> */}
+
+      {/* Additional Info */}
+      <div className="mt-6">
+        <p className="text-xs text-gray-400">
+          Crafted with ❤️ by our Team. Proudly built with Vite.
+        </p>
+      </div>
     </footer>
   );
 }
diff --git a/frontend/src/components/Homepage.jsx b/frontend/src/components/Homepage.jsx
index 1c3be0b..49c2657 100644
--- a/frontend/src/components/Homepage.jsx
+++ b/frontend/src/components/Homepage.jsx
@@ -1,7 +1,14 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Sparkles, Brain, Zap, MessageSquare, TrendingUp, ArrowRight } from 'lucide-react';
-import Footer from './Footer.jsx'; // Ensure correct path and default import
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Sparkles,
+  Brain,
+  Zap,
+  MessageSquare,
+  TrendingUp,
+  ArrowRight,
+} from "lucide-react";
+import Footer from "./Footer.jsx"; // Ensure correct path and default import
 
 function Homepage() {
   const navigate = useNavigate();
@@ -40,42 +47,74 @@ function Homepage() {
             IntentAI
           </h1>
           <p className="text-xl md:text-2xl mb-12 max-w-2xl text-gray-300">
-            Unleash the power of intelligent conversations with our next-generation AI assistant
+            Unleash the power of intelligent conversations with our
+            next-generation AI assistant
           </p>
 
           {/* Feature cards */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto mb-12">
+            {/* General Assistant Card */}
             <div
-              onClick={() => navigate('/general')}
-              className="group p-6 bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-2xl border border-gray-700 hover:border-blue-500 cursor-pointer transform hover:scale-105 transition-all duration-300"
+              onClick={() => navigate("/general")}
+              className="group p-8 bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl border border-gray-700 hover:border-blue-500 cursor-pointer transform hover:scale-105 transition-all duration-300"
             >
               <div className="flex items-center mb-4">
-                <MessageSquare className="text-blue-500 mr-3" size={24} />
-                <h3 className="text-xl font-semibold">General Assistant</h3>
+                <MessageSquare className="text-blue-500 mr-3" size={28} />
+                <h3 className="text-xl font-semibold text-white">
+                  General Assistant
+                </h3>
               </div>
-              <p className="text-gray-400 mb-4">
-                Your all-purpose AI companion for any task or conversation
+              <p className="text-gray-300 mb-4">
+                Your all-purpose AI companion for any task or conversation.
               </p>
-              <div className="flex items-center text-blue-500 group-hover:translate-x-2 transition-transform">
-                Try Now <ArrowRight className="ml-2" size={20} />
+              <div className="flex items-center justify-center text-blue-500 group-hover:translate-x-2 transition-transform">
+                <span>Try Now</span>
+                <ArrowRight className="ml-2" size={22} />
               </div>
             </div>
 
+            {/* Trade using AI Card */}
             <div
-              onClick={() => navigate('/trading')}
-              className="group p-6 bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-2xl border border-gray-700 hover:border-green-500 cursor-pointer transform hover:scale-105 transition-all duration-300"
+              onClick={() => navigate("/trading")}
+              className="group p-8 bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl border border-gray-700 hover:border-green-500 cursor-pointer transform hover:scale-105 transition-all duration-300"
             >
               <div className="flex items-center mb-4">
-                <TrendingUp className="text-green-500 mr-3" size={24} />
-                <h3 className="text-xl font-semibold">Trading Assistant</h3>
+                <TrendingUp className="text-green-500 mr-3" size={28} />
+                <h3 className="text-xl font-semibold text-white">
+                  Quant Trading
+                </h3>
               </div>
-              <p className="text-gray-400 mb-4">
-                Expert analysis and insights for your trading decisions
+              <p className="text-gray-300 mb-4">
+                Get trading insights powered by Quantitative trading models.
               </p>
-              <div className="flex items-center text-green-500 group-hover:translate-x-2 transition-transform">
-                Start Trading <ArrowRight className="ml-2" size={20} />
+              <div className="flex items-center justify-center text-green-500 group-hover:translate-x-2 transition-transform">
+                <span>Explore Strategies</span>
+                <ArrowRight className="ml-2" size={22} />
               </div>
             </div>
+
+            {/* Quant Trading Card (Updated Hover Color) */}
+            <div
+              onClick={() => navigate("/trading")}
+              className="group p-8 bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl border border-gray-700 hover:border-red-500 cursor-pointer transform hover:scale-105 transition-all duration-300"
+            >
+              <div className="flex items-center mb-4">
+                <TrendingUp className="text-red-500 mr-3" size={28} />
+                <h3 className="text-xl font-semibold text-white">
+                  Trade using AI
+                </h3>
+              </div>
+              <p className="text-gray-300 mb-4">
+              Get insights on advanced trading strategies to level up your
+              game. 
+              </p>
+              <div className="flex items-center justify-center text-red-500 group-hover:translate-x-2 transition-transform">
+                <span>Start Trading</span>
+                <ArrowRight className="ml-2" size={22} />
+              </div>
+            </div>
+
+
           </div>
 
           {/* Floating features */}
@@ -95,11 +134,12 @@ function Homepage() {
           </div>
         </div>
       </div>
+      
       <div>
-       <Footer />
+      <Footer />
       </div>
     </div>
   );
 }
 
-export default Homepage;
\ No newline at end of file
+export default Homepage;

From 5951157585d05961784675e35c5d83fb05bd31a0 Mon Sep 17 00:00:00 2001
From: drstrox <aayush95828@gmail.com>
Date: Sun, 2 Feb 2025 20:16:07 +0530
Subject: [PATCH 2/3] documentation

---
 frontend/src/components/Documentation.jsx | 234 +++++++++++++++++
 frontend/src/components/Footer.jsx        |  52 ++--
 frontend/src/components/GeneralChat.jsx   | 294 +++++++++++++---------
 package-lock.json                         |   6 +
 4 files changed, 444 insertions(+), 142 deletions(-)
 create mode 100644 frontend/src/components/Documentation.jsx
 create mode 100644 package-lock.json

diff --git a/frontend/src/components/Documentation.jsx b/frontend/src/components/Documentation.jsx
new file mode 100644
index 0000000..ac4fe77
--- /dev/null
+++ b/frontend/src/components/Documentation.jsx
@@ -0,0 +1,234 @@
+import React, { useState } from 'react';
+import { BookOpen, Code, Coins, MessagesSquare, Wallet, ArrowRight, Github, Terminal, Globe } from 'lucide-react';
+
+const DocumentationPage = () => {
+  const [activeSection, setActiveSection] = useState('overview');
+
+  const sections = {
+    overview: {
+      title: 'Project Overview',
+      content: (
+        <div className="space-y-4">
+          <p>IntentAI is a decentralized application that combines natural language processing with blockchain technology to enable users to interact with DeFi protocols through simple text commands. The project consists of three main components:</p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+            <div className="p-4 bg-black/20 rounded-xl border border-white/10 backdrop-blur-sm">
+              <div className="flex items-center space-x-2 mb-2">
+                <MessagesSquare className="w-5 h-5 text-purple-400" />
+                <h3 className="font-semibold">Chat Interface</h3>
+              </div>
+              <p className="text-sm text-white/70">Natural language processing interface for user interactions</p>
+            </div>
+            
+            <div className="p-4 bg-black/20 rounded-xl border border-white/10 backdrop-blur-sm">
+              <div className="flex items-center space-x-2 mb-2">
+                <Coins className="w-5 h-5 text-purple-400" />
+                <h3 className="font-semibold">Smart Contracts</h3>
+              </div>
+              <p className="text-sm text-white/70">Solidity contracts for DeFi protocol interactions</p>
+            </div>
+            
+            <div className="p-4 bg-black/20 rounded-xl border border-white/10 backdrop-blur-sm">
+              <div className="flex items-center space-x-2 mb-2">
+                <Terminal className="w-5 h-5 text-purple-400" />
+                <h3 className="font-semibold">Backend API</h3>
+              </div>
+              <p className="text-sm text-white/70">Processing and routing of user intents</p>
+            </div>
+          </div>
+        </div>
+      )
+    },
+    
+    architecture: {
+      title: 'System Architecture',
+      content: (
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold mb-4">Component Structure</h3>
+          
+          <div className="space-y-6">
+            <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+              <h4 className="font-medium mb-2">Frontend Components</h4>
+              <ul className="list-disc list-inside space-y-2 text-white/70">
+                <li>Trading Chat Interface (tradingchat.jsx)</li>
+                <li>Compound Integration (generalchat.jsx)</li>
+                <li>Documentation Page (docs.jsx)</li>
+                <li>Shared UI Components</li>
+              </ul>
+            </div>
+            
+            <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+              <h4 className="font-medium mb-2">Smart Contracts</h4>
+              <ul className="list-disc list-inside space-y-2 text-white/70">
+                <li>CompoundIntents.sol - Main contract for Compound interactions</li>
+                <li>CompoundETHManager.sol - ETH management logic</li>
+                <li>Trading contract integrations</li>
+              </ul>
+            </div>
+            
+            <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+              <h4 className="font-medium mb-2">Backend Services</h4>
+              <ul className="list-disc list-inside space-y-2 text-white/70">
+                <li>Intent Processing API</li>
+                <li>Web3 Integration Services</li>
+                <li>Natural Language Processing Engine</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      )
+    },
+    
+    smartContracts: {
+      title: 'Smart Contracts',
+      content: (
+        <div className="space-y-6">
+          <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+            <h3 className="font-medium mb-4">CompoundIntents Contract</h3>
+            <p className="mb-4 text-white/70">Main contract for processing user intents and interacting with Compound protocol.</p>
+            
+            <h4 className="font-medium mb-2">Key Functions:</h4>
+            <ul className="list-disc list-inside space-y-2 text-white/70">
+              <li>command(string calldata intent) - Process user commands</li>
+              <li>_deposit(uint256 amount) - Handle ETH deposits</li>
+              <li>_withdraw(uint256 amount) - Process withdrawals</li>
+            </ul>
+          </div>
+          
+          <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+            <h3 className="font-medium mb-4">Contract Addresses</h3>
+            <div className="space-y-2 text-white/70">
+              <p>cETH Address (Mainnet): 0x4Ddc2D193948926D02f9B1fE9e1daa0718270ED5</p>
+              <p>cETH Address (Goerli): 0x64078a6189Bf45f80091c6Ff2fCEe1B15Ac8dbde</p>
+            </div>
+          </div>
+        </div>
+      )
+    },
+    
+    usage: {
+      title: 'Usage Guide',
+      content: (
+        <div className="space-y-6">
+          <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+            <h3 className="font-medium mb-4">Compound Interactions</h3>
+            <p className="mb-4 text-white/70">Example commands for Compound protocol interactions:</p>
+            
+            <div className="space-y-2">
+              <div className="p-2 bg-black/30 rounded-lg">
+                <code>deposit 0.1 ETH</code> - Deposit ETH into Compound
+              </div>
+              <div className="p-2 bg-black/30 rounded-lg">
+                <code>withdraw 0.05 ETH</code> - Withdraw ETH from Compound
+              </div>
+            </div>
+          </div>
+          
+          <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+            <h3 className="font-medium mb-4">Trading Commands</h3>
+            <p className="mb-4 text-white/70">Example commands for trading:</p>
+            
+            <div className="space-y-2">
+              <div className="p-2 bg-black/30 rounded-lg">
+                <code>swap 0.1 WETH to DAI</code>
+              </div>
+              <div className="p-2 bg-black/30 rounded-lg">
+                <code>trade ETH for DAI</code>
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    },
+    
+    setup: {
+      title: 'Setup Guide',
+      content: (
+        <div className="space-y-6">
+          <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+            <h3 className="font-medium mb-4">Prerequisites</h3>
+            <ul className="list-disc list-inside space-y-2 text-white/70">
+              <li>Node.js v16 or higher</li>
+              <li>MetaMask or compatible Web3 wallet</li>
+              <li>Access to Ethereum network (Mainnet or Testnet)</li>
+            </ul>
+          </div>
+          
+          <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+            <h3 className="font-medium mb-4">Installation Steps</h3>
+            <div className="space-y-2">
+              <div className="p-2 bg-black/30 rounded-lg">
+                <code>git clone [repository-url]</code>
+              </div>
+              <div className="p-2 bg-black/30 rounded-lg">
+                <code>npm install</code>
+              </div>
+              <div className="p-2 bg-black/30 rounded-lg">
+                <code>npm run dev</code>
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0a0014] text-white">
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#2a1f3f2e_1px,transparent_1px),linear-gradient(to_bottom,#2a1f3f2e_1px,transparent_1px)] bg-[size:14px_24px] pointer-events-none"></div>
+      
+      <div className="max-w-7xl mx-auto px-4 py-12">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold mb-4">
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-500">
+              IntentAI Documentation
+            </span>
+          </h1>
+          <p className="text-white/70 max-w-2xl mx-auto">
+            Complete documentation for the IntentAI project, including architecture, smart contracts, and usage guides.
+          </p>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex flex-wrap gap-2 mb-8 justify-center">
+          {Object.entries(sections).map(([key, section]) => (
+            <button
+              key={key}
+              onClick={() => setActiveSection(key)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
+                activeSection === key
+                  ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white'
+                  : 'bg-white/5 hover:bg-white/10 text-white/70'
+              }`}
+            >
+              {section.title}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="bg-black/20 backdrop-blur-xl rounded-2xl border border-white/10 p-6 animate-fade-in">
+          <h2 className="text-2xl font-bold mb-6">{sections[activeSection].title}</h2>
+          {sections[activeSection].content}
+        </div>
+
+        {/* Footer */}
+        <div className="mt-12 text-center text-white/50 text-sm">
+          <div className="flex items-center justify-center space-x-4">
+            <a href="#" className="hover:text-white transition-colors duration-200 flex items-center space-x-2">
+              <Github className="w-4 h-4" />
+              <span>GitHub</span>
+            </a>
+            <a href="#" className="hover:text-white transition-colors duration-200 flex items-center space-x-2">
+              <Globe className="w-4 h-4" />
+              <span>Website</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DocumentationPage;
\ No newline at end of file
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index fa56697..a3b3b9d 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -1,43 +1,57 @@
-import React from 'react';
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import Documentation from './Documentation';
 
 function Footer() {
+  const navigate = useNavigate(); 
+
   return (
     <footer className="bg-gray-800 text-gray-300 py-8 text-center mt-12">
       <p className="text-sm">
         &copy; {new Date().getFullYear()} Your Website. All rights reserved.
       </p>
-      
+
       {/* Links Section */}
       <ul className="flex justify-center space-x-8 mt-6 text-lg">
         <li>
-          <a href="/privacy-policy" className="hover:text-white transition duration-300 hover:underline">Privacy Policy</a>
+          <Link
+            to="/privacy-policy"
+            className="hover:text-white transition duration-300 hover:underline"
+          >
+            Privacy Policy
+          </Link>
         </li>
+
+        {/* Use button for navigate */}
         <li>
-          <a href="/documentation" className="hover:text-white transition duration-300 hover:underline">Documentation</a>
+          <button
+            onClick={() => navigate("/documentation.jsx")}
+            className="hover:text-white transition duration-300 hover:underline"
+          >
+            Documentation
+          </button>
         </li>
+
         <li>
-          <a href="/governance" className="hover:text-white transition duration-300 hover:underline">Governance</a>
+          <Link
+            to="/governance"
+            className="hover:text-white transition duration-300 hover:underline"
+          >
+            Governance
+          </Link>
         </li>
         <li>
-          <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-white transition duration-300 hover:underline">
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-white transition duration-300 hover:underline"
+          >
             GitHub
           </a>
         </li>
       </ul>
 
-      {/* Social Media Links Section */}
-      {/* <div className="flex justify-center space-x-6 mt-6">
-        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-white transition duration-300">
-          Twitter
-        </a>
-        <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-blue-700 hover:text-white transition duration-300">
-          LinkedIn
-        </a>
-        <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition duration-300">
-          GitHub
-        </a>
-      </div> */}
-
       {/* Additional Info */}
       <div className="mt-6">
         <p className="text-xs text-gray-400">
diff --git a/frontend/src/components/GeneralChat.jsx b/frontend/src/components/GeneralChat.jsx
index 839ec06..194af5b 100644
--- a/frontend/src/components/GeneralChat.jsx
+++ b/frontend/src/components/GeneralChat.jsx
@@ -1,57 +1,118 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Send, Image as ImageIcon, X, Camera, Loader, Sparkles, Command, MessageSquare, Zap, Hash, Globe, Bot, LineChart } from 'lucide-react';
+import { Send, Loader } from 'lucide-react';
 import Spline from '@splinetool/react-spline';
-import { TradeABI } from '../constants/abi';
+import { ethers } from 'ethers';
 
-const IntentAI = () => {
-  const fileInputRef = useRef(null);
+const CompoundChat = () => {
   const chatContainerRef = useRef(null);
   const [isLoading, setIsLoading] = useState(false);
-  const [activeTab, setActiveTab] = useState('general'); 
   const [messages, setMessages] = useState([
     {
       type: 'bot',
-      content: "👋 Hi there! I'm your AI assistant. How can I help you today?"
+      content: "📈 Welcome to Compound Assistant! I can help you deposit and withdraw ETH using Compound. Try commands like 'deposit 0.1 ETH' or 'withdraw 0.05 ETH'."
     }
   ]);
   const [input, setInput] = useState('');
-  const [inputPrompt, setInputPrompt] = useState("");
-  const [outputPrompt, setOutputPrompt] = useState(""); //4 words
-  const [contractAddress, setContractAddress] = useState('');
-  const [contractABI, setContractABI] = useState('');
+  const [account, setAccount] = useState('');
+  const [provider, setProvider] = useState(null);
+  const [signer, setSigner] = useState(null);
 
+  // Add your contract addresses here
+  const COMPOUND_MANAGER_ADDRESS = "YOUR_COMPOUND_MANAGER_ADDRESS";
+  const CETH_ADDRESS = "YOUR_CETH_ADDRESS";
+  
   useEffect(() => {
     if (chatContainerRef.current) {
       chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
     }
   }, [messages]);
 
-  const simulateTyping = async (message) => {
-    setIsLoading(true);
-    await new Promise(resolve => setTimeout(resolve, 500 + Math.random() * 500));
-    setIsLoading(false);
-    setMessages(prev => [...prev, { type: 'bot', ...message }]);
+  const connectWallet = async () => {
+    if (window.ethereum) {
+      try {
+        const provider = new ethers.BrowserProvider(window.ethereum);
+        setProvider(provider);
+        const accounts = await provider.send("eth_requestAccounts", []);
+        setAccount(accounts[0]);
+        const signer = await provider.getSigner();
+        setSigner(signer);
+        
+        setMessages(prev => [...prev, {
+          type: 'bot',
+          content: `Wallet connected! Address: ${accounts[0].slice(0, 6)}...${accounts[0].slice(-4)}`
+        }]);
+      } catch (error) {
+        console.error("Error connecting wallet:", error);
+        setMessages(prev => [...prev, {
+          type: 'bot',
+          content: "Error connecting wallet. Please try again."
+        }]);
+      }
+    } else {
+      setMessages(prev => [...prev, {
+        type: 'bot',
+        content: "MetaMask is not installed! Please install it to use this feature."
+      }]);
+    }
   };
 
-  const handleTabChange = (tab) => {
-    setActiveTab(tab);
-    setMessages([
-      {
+  const executeCompoundCommand = async (command) => {
+    if (!signer) {
+      setMessages(prev => [...prev, {
         type: 'bot',
-        content: tab === 'general'
-          ? "👋 Hi there! I'm your AI assistant. How can I help you today?"
-          : "👋 Hi there! I'm your AI assistant. How can I help you today?"
+        content: "Please connect your wallet first!"
+      }]);
+      return;
+    }
+
+    try {
+      const CompoundIntents = new ethers.Contract(
+        COMPOUND_MANAGER_ADDRESS,
+        ["function command(string calldata intent) external payable"],
+        signer
+      );
+
+      let tx;
+      const parts = command.toLowerCase().split(' ');
+      if (parts[0] === 'deposit') {
+        const amount = ethers.parseEther(parts[1]);
+        tx = await CompoundIntents.command(command, { value: amount });
+      } else if (parts[0] === 'withdraw') {
+        tx = await CompoundIntents.command(command);
       }
-    ]);
+
+      await tx.wait();
+      setMessages(prev => [...prev, {
+        type: 'bot',
+        content: `Transaction successful! Hash: ${tx.hash}`
+      }]);
+    } catch (error) {
+      console.error("Transaction failed:", error);
+      setMessages(prev => [...prev, {
+        type: 'bot',
+        content: `Transaction failed: ${error.message}`
+      }]);
+    }
   };
 
   const handleSend = async () => {
     if (!input.trim()) return;
+
     setMessages(prev => [...prev, { type: 'user', content: input }]);
+    setIsLoading(true);
+
+    const command = input.toLowerCase();
+    if (command.startsWith('deposit') || command.startsWith('withdraw')) {
+      await executeCompoundCommand(command);
+    } else {
+      setMessages(prev => [...prev, {
+        type: 'bot',
+        content: "Please use commands like 'deposit 0.1 ETH' or 'withdraw 0.05 ETH'"
+      }]);
+    }
+
     setInput('');
-    await simulateTyping({
-      content: `Here's a sample response for your message in ${activeTab} mode.`
-    });
+    setIsLoading(false);
   };
 
   const handleKeyPress = (e) => {
@@ -63,147 +124,134 @@ const IntentAI = () => {
 
   return (
     <div className="flex min-h-screen bg-[#0a0014] relative overflow-hidden">
-      {/* Background gradients */}
       <div className="absolute inset-0 bg-gradient-to-b from-[#0a0014] via-[#0f0022] to-[#0a0014]"></div>
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#2a1f3f2e_1px,transparent_1px),linear-gradient(to_bottom,#2a1f3f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div>
       
-      {/* Glowing orbs */}
       <div className="absolute top-0 left-0 w-[500px] h-[500px] bg-gradient-to-r from-purple-900/30 to-indigo-900/30 rounded-full filter blur-[120px] animate-pulse"></div>
       <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-full filter blur-[120px] animate-pulse delay-700"></div>
-      
-      {/* Left Side - Updated Spline Section */}
+
       <div className="w-1/2 p-8 flex flex-col items-center justify-center relative">
         <div className="text-center space-y-8 relative z-10 max-w-3xl">
-          {/* Header Badge */}
           <div className="flex items-center justify-center">
             <div className="px-4 py-2 rounded-full border border-white/10 bg-black/30 backdrop-blur-xl">
               <div className="flex items-center space-x-2">
                 <span className="w-2 h-2 bg-purple-400 rounded-full animate-pulse"></span>
-                <p className="text-sm text-white/70">AI-Powered • Real-Time • Intelligent</p>
+                <p className="text-sm text-white/70">Compound • ETH • DeFi</p>
               </div>
             </div>
           </div>
 
-          {/* Title Section */}
           <div className="space-y-4">
             <h1 className="text-7xl font-bold tracking-tight">
               <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-indigo-500 to-blue-500 animate-gradient-x">
-                Intent
+                Compound
               </span>
               <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-indigo-300">
                 AI
               </span>
             </h1>
             <p className="text-lg text-white/80 leading-relaxed max-w-xl mx-auto font-light">
-            Experience seamless crypto solutions with Intent AI Chatbot – your ultimate cryptocurrency companion today!
+              Interact with Compound protocol using natural language commands
             </p>
           </div>
 
-          {/* Updated Spline Container */}
           <div className="relative w-full h-[500px]">
-            <Spline scene="https://prod.spline.design/31iD8MVkM1IpbbeX/scene.splinecode" />
+            <Spline scene="https://prod.spline.design/6cBpFzCL5rJzFnLv/scene.splinecode" />
           </div>
         </div>
       </div>
 
-      {/* Right Side - Chat Interface - Same as before */}
       <div className="w-1/2 p-6 flex items-center justify-center">
-  <div className="w-full max-w-md">
-    <div className="relative group">
-      <div className="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-3xl blur opacity-30 group-hover:opacity-50 transition duration-1000"></div>
-      
-      <div className="relative bg-black/40 backdrop-blur-2xl rounded-3xl border border-white/10">
-        {/* Chat header and tabs */}
-        <div className="p-4 border-b border-white/10">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center space-x-4">
-              <div className="relative">
-                <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl blur-sm"></div>
-                <div className="relative w-12 h-12 bg-black/50 backdrop-blur-xl rounded-2xl flex items-center justify-center border border-white/20">
-                  <span className="text-2xl">🤖</span>
+        <div className="w-full max-w-md">
+          <div className="relative group">
+            <div className="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-3xl blur opacity-30 group-hover:opacity-50 transition duration-1000"></div>
+            
+            <div className="relative bg-black/40 backdrop-blur-2xl rounded-3xl border border-white/10">
+              <div className="p-4 border-b border-white/10">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center space-x-4">
+                    <div className="relative">
+                      <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl blur-sm"></div>
+                      <div className="relative w-12 h-12 bg-black/50 backdrop-blur-xl rounded-2xl flex items-center justify-center border border-white/20">
+                        <span className="text-2xl">🏦</span>
+                      </div>
+                    </div>
+                    <div>
+                      <h2 className="font-bold text-white text-lg">Compound Assistant</h2>
+                      <div className="flex items-center space-x-2">
+                        <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+                        <p className="text-white/60 text-sm">Ready for Commands</p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h2 className="font-bold text-white text-lg">AI Assistant</h2>
-                <div className="flex items-center space-x-2">
-                  <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
-                  <p className="text-white/60 text-sm">Online & Ready</p>
-                </div>
-              </div>
-            </div>
-          </div>
 
-        </div>
+                {!account && (
+                  <button
+                    onClick={connectWallet}
+                    className="w-full p-2 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-xl text-white font-medium hover:opacity-90 transition-opacity"
+                  >
+                    Connect Wallet
+                  </button>
+                )}
+              </div>
 
-        {/* Chat messages */}
-        <div 
-          ref={chatContainerRef}
-          className="h-[400px] overflow-y-auto p-4 space-y-4 scroll-smooth scrollbar-thin scrollbar-thumb-purple-500/20 scrollbar-track-transparent"
-        >
-          {messages.map((message, index) => (
-            <div
-              key={index}
-              className={`flex ${
-                message.type === 'user' ? 'justify-end' : 'justify-start'
-              } animate-fade-in-up`}
-            >
-              <div
-                className={`max-w-[85%] p-3 rounded-2xl backdrop-blur-sm ${
-                  message.type === 'user'
-                    ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-br-none'
-                    : 'bg-white/5 text-white rounded-bl-none border border-white/10'
-                }`}
-              >
-                <p className="leading-relaxed">{message.content}</p>
+              <div ref={chatContainerRef} className="h-[400px] overflow-y-auto p-4 space-y-4 scroll-smooth scrollbar-thin scrollbar-thumb-purple-500/20 scrollbar-track-transparent">
+                {messages.map((message, index) => (
+                  <div key={index} className={`flex ${message.type === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in-up`}>
+                    <div className={`max-w-[85%] p-3 rounded-2xl backdrop-blur-sm ${
+                      message.type === 'user'
+                        ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-br-none'
+                        : 'bg-white/5 text-white rounded-bl-none border border-white/10'
+                    }`}>
+                      <p className="leading-relaxed">{message.content}</p>
+                    </div>
+                  </div>
+                ))}
+                {isLoading && (
+                  <div className="flex items-center space-x-2 text-white/60">
+                    <Loader className="w-4 h-4 animate-spin" />
+                    <span className="text-sm">Processing transaction...</span>
+                  </div>
+                )}
               </div>
-            </div>
-          ))}
-          {isLoading && (
-            <div className="flex items-center space-x-2 text-white/60">
-              <Loader className="w-4 h-4 animate-spin" />
-              <span className="text-sm">AI is thinking...</span>
-            </div>
-          )}
-        </div>
 
-        {/* Input area */}
-        <div className="p-4 border-t border-white/10">
-          <div className="relative group/input">
-            <div className="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl blur opacity-30 group-hover/input:opacity-50 transition duration-500"></div>
-            <div className="relative flex space-x-3">
-              <textarea
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                onKeyPress={handleKeyPress}
-                placeholder={activeTab === 'general' ? "Ask me anything..." : "Ask about trading..."}
-                rows="1"
-                className="flex-1 p-3 bg-black/50 backdrop-blur-xl text-white placeholder-white/40 border border-white/10 rounded-2xl focus:outline-none focus:border-white/20 resize-none transition-all duration-300"
-                style={{
-                  height: '48px',
-                  minHeight: '48px',
-                  maxHeight: '120px'
-                }}
-              />
-              <button
-                onClick={handleSend}
-                disabled={isLoading}
-                className="relative group/button"
-              >
-                <div className="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-xl blur opacity-75 group-hover/button:opacity-100 transition duration-500"></div>
-                <div className="relative px-4 py-3 bg-black/50 backdrop-blur-xl rounded-xl border border-white/10 group-hover/button:border-white/20 transition-all duration-300">
-                  <Send className="w-5 h-5 text-white" />
+              <div className="p-4 border-t border-white/10">
+                <div className="relative group/input">
+                  <div className="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl blur opacity-30 group-hover/input:opacity-50 transition duration-500"></div>
+                  <div className="relative flex space-x-3">
+                    <textarea
+                      value={input}
+                      onChange={(e) => setInput(e.target.value)}
+                      onKeyPress={handleKeyPress}
+                      placeholder="Type 'deposit 0.1 ETH' or 'withdraw 0.05 ETH'..."
+                      rows="1"
+                      className="flex-1 p-3 bg-black/50 backdrop-blur-xl text-white placeholder-white/40 border border-white/10 rounded-2xl focus:outline-none focus:border-white/20 resize-none transition-all duration-300"
+                      style={{
+                        height: '48px',
+                        minHeight: '48px',
+                        maxHeight: '120px'
+                      }}
+                    />
+                    <button
+                      onClick={handleSend}
+                      disabled={isLoading}
+                      className="relative group/button"
+                    >
+                      <div className="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-xl blur opacity-75 group-hover/button:opacity-100 transition duration-500"></div>
+                      <div className="relative px-4 py-3 bg-black/50 backdrop-blur-xl rounded-xl border border-white/10 group-hover/button:border-white/20 transition-all duration-300">
+                        <Send className="w-5 h-5 text-white" />
+                      </div>
+                    </button>
+                  </div>
                 </div>
-              </button>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-
-    </div>
   );
 };
 
-export default IntentAI;
\ No newline at end of file
+export default CompoundChat;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..a22646f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "AI-Quant-Trader",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From 61d66bfd4b97b825b8c90a4582ddf6b4ffbc84b7 Mon Sep 17 00:00:00 2001
From: drstrox <aayush95828@gmail.com>
Date: Sun, 2 Feb 2025 23:01:56 +0530
Subject: [PATCH 3/3] documentation

---
 frontend/src/components/Documentation.jsx | 193 +++++++++++++++-------
 1 file changed, 134 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/Documentation.jsx b/frontend/src/components/Documentation.jsx
index ac4fe77..73cd56f 100644
--- a/frontend/src/components/Documentation.jsx
+++ b/frontend/src/components/Documentation.jsx
@@ -1,92 +1,120 @@
-import React, { useState } from 'react';
-import { BookOpen, Code, Coins, MessagesSquare, Wallet, ArrowRight, Github, Terminal, Globe } from 'lucide-react';
+import React, { useState } from "react";
+import {
+  BookOpen,
+  Code,
+  Coins,
+  MessagesSquare,
+  Wallet,
+  ArrowRight,
+  Github,
+  Terminal,
+  Globe,
+} from "lucide-react";
 
-const DocumentationPage = () => {
-  const [activeSection, setActiveSection] = useState('overview');
+const Documentation = () => {
+  const [activeSection, setActiveSection] = useState("overview");
 
   const sections = {
     overview: {
-      title: 'Project Overview',
+      title: "Project Overview",
       content: (
         <div className="space-y-4">
-          <p>IntentAI is a decentralized application that combines natural language processing with blockchain technology to enable users to interact with DeFi protocols through simple text commands. The project consists of three main components:</p>
-          
+          <p>
+            IntentAI is a decentralised chatbot application that offers a
+            next-generation AI assistant that combines advanced conversational
+            abilities with powerful tools for quant trading, providing users
+            with intelligent, real-time responses, personalized insights, and
+            strategies, available 24/7 to enhance productivity, trading, and
+            decision-making.
+          </p>
+          <br></br>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
             <div className="p-4 bg-black/20 rounded-xl border border-white/10 backdrop-blur-sm">
               <div className="flex items-center space-x-2 mb-2">
                 <MessagesSquare className="w-5 h-5 text-purple-400" />
-                <h3 className="font-semibold">Chat Interface</h3>
+                <h3 className="font-semibold">Chatbot Interface</h3>
               </div>
-              <p className="text-sm text-white/70">Natural language processing interface for user interactions</p>
+              <p className="text-sm text-white/70">
+                Natural language processing interface for user interactions
+              </p>
             </div>
-            
+
             <div className="p-4 bg-black/20 rounded-xl border border-white/10 backdrop-blur-sm">
               <div className="flex items-center space-x-2 mb-2">
                 <Coins className="w-5 h-5 text-purple-400" />
                 <h3 className="font-semibold">Smart Contracts</h3>
               </div>
-              <p className="text-sm text-white/70">Solidity contracts for DeFi protocol interactions</p>
+              <p className="text-sm text-white/70">
+                Solidity contracts for DeFi protocol interactions.
+              </p>
             </div>
-            
+
             <div className="p-4 bg-black/20 rounded-xl border border-white/10 backdrop-blur-sm">
               <div className="flex items-center space-x-2 mb-2">
                 <Terminal className="w-5 h-5 text-purple-400" />
-                <h3 className="font-semibold">Backend API</h3>
+                <h3 className="font-semibold">Quant Trading</h3>
               </div>
-              <p className="text-sm text-white/70">Processing and routing of user intents</p>
+              <p className="text-sm text-white/70">
+                Trading using advance Quantitative algorithms.
+              </p>
             </div>
           </div>
         </div>
-      )
+      ),
     },
-    
+
     architecture: {
-      title: 'System Architecture',
+      title: "System Architecture",
       content: (
         <div className="space-y-4">
           <h3 className="text-lg font-semibold mb-4">Component Structure</h3>
-          
+
           <div className="space-y-6">
             <div className="p-4 bg-black/20 rounded-xl border border-white/10">
               <h4 className="font-medium mb-2">Frontend Components</h4>
               <ul className="list-disc list-inside space-y-2 text-white/70">
                 <li>Trading Chat Interface (tradingchat.jsx)</li>
                 <li>Compound Integration (generalchat.jsx)</li>
-                <li>Documentation Page (docs.jsx)</li>
-                <li>Shared UI Components</li>
+                <li>Documentation Page (documentation.jsx)</li>
+                <li>Shared UI Components (Spline components)</li>
               </ul>
             </div>
-            
+
             <div className="p-4 bg-black/20 rounded-xl border border-white/10">
               <h4 className="font-medium mb-2">Smart Contracts</h4>
               <ul className="list-disc list-inside space-y-2 text-white/70">
-                <li>CompoundIntents.sol - Main contract for Compound interactions</li>
-                <li>CompoundETHManager.sol - ETH management logic</li>
+                <li>
+                  CompoundIntents.sol - Main contract for Compound interactions
+                </li>
+                <li>CompoundETHManager2.sol - ETH management logic</li>
                 <li>Trading contract integrations</li>
               </ul>
             </div>
-            
+
             <div className="p-4 bg-black/20 rounded-xl border border-white/10">
               <h4 className="font-medium mb-2">Backend Services</h4>
               <ul className="list-disc list-inside space-y-2 text-white/70">
                 <li>Intent Processing API</li>
                 <li>Web3 Integration Services</li>
-                <li>Natural Language Processing Engine</li>
+                <li>Natural Language Processing Pipeline</li>
               </ul>
             </div>
           </div>
         </div>
-      )
+      ),
     },
-    
+
     smartContracts: {
-      title: 'Smart Contracts',
+      title: "Smart Contracts",
       content: (
         <div className="space-y-6">
           <div className="p-4 bg-black/20 rounded-xl border border-white/10">
             <h3 className="font-medium mb-4">CompoundIntents Contract</h3>
-            <p className="mb-4 text-white/70">Main contract for processing user intents and interacting with Compound protocol.</p>
-            
+            <p className="mb-4 text-white/70">
+              Main contract for processing user intents and interacting with
+              Compound protocol.
+            </p>
+
             <h4 className="font-medium mb-2">Key Functions:</h4>
             <ul className="list-disc list-inside space-y-2 text-white/70">
               <li>command(string calldata intent) - Process user commands</li>
@@ -94,26 +122,34 @@ const DocumentationPage = () => {
               <li>_withdraw(uint256 amount) - Process withdrawals</li>
             </ul>
           </div>
-          
+
           <div className="p-4 bg-black/20 rounded-xl border border-white/10">
             <h3 className="font-medium mb-4">Contract Addresses</h3>
             <div className="space-y-2 text-white/70">
-              <p>cETH Address (Mainnet): 0x4Ddc2D193948926D02f9B1fE9e1daa0718270ED5</p>
-              <p>cETH Address (Goerli): 0x64078a6189Bf45f80091c6Ff2fCEe1B15Ac8dbde</p>
+              <p>
+                cETH Address (Mainnet):
+                0x4Ddc2D193948926D02f9B1fE9e1daa0718270ED5
+              </p>
+              <p>
+                cETH Address (Goerli):
+                0x64078a6189Bf45f80091c6Ff2fCEe1B15Ac8dbde
+              </p>
             </div>
           </div>
         </div>
-      )
+      ),
     },
-    
+
     usage: {
-      title: 'Usage Guide',
+      title: "Usage Guide",
       content: (
         <div className="space-y-6">
           <div className="p-4 bg-black/20 rounded-xl border border-white/10">
             <h3 className="font-medium mb-4">Compound Interactions</h3>
-            <p className="mb-4 text-white/70">Example commands for Compound protocol interactions:</p>
-            
+            <p className="mb-4 text-white/70">
+              Example commands for Compound protocol interactions:
+            </p>
+
             <div className="space-y-2">
               <div className="p-2 bg-black/30 rounded-lg">
                 <code>deposit 0.1 ETH</code> - Deposit ETH into Compound
@@ -123,11 +159,11 @@ const DocumentationPage = () => {
               </div>
             </div>
           </div>
-          
+
           <div className="p-4 bg-black/20 rounded-xl border border-white/10">
             <h3 className="font-medium mb-4">Trading Commands</h3>
             <p className="mb-4 text-white/70">Example commands for trading:</p>
-            
+
             <div className="space-y-2">
               <div className="p-2 bg-black/30 rounded-lg">
                 <code>swap 0.1 WETH to DAI</code>
@@ -138,45 +174,75 @@ const DocumentationPage = () => {
             </div>
           </div>
         </div>
-      )
+      ),
     },
-    
+
     setup: {
-      title: 'Setup Guide',
+      title: "Setup Guide",
       content: (
         <div className="space-y-6">
           <div className="p-4 bg-black/20 rounded-xl border border-white/10">
             <h3 className="font-medium mb-4">Prerequisites</h3>
             <ul className="list-disc list-inside space-y-2 text-white/70">
               <li>Node.js v16 or higher</li>
+              <li>Foundry Setup</li>
               <li>MetaMask or compatible Web3 wallet</li>
               <li>Access to Ethereum network (Mainnet or Testnet)</li>
             </ul>
           </div>
-          
+
           <div className="p-4 bg-black/20 rounded-xl border border-white/10">
             <h3 className="font-medium mb-4">Installation Steps</h3>
             <div className="space-y-2">
               <div className="p-2 bg-black/30 rounded-lg">
-                <code>git clone [repository-url]</code>
+                <code>
+                  git clone https://github.com/foundryUp/AI-Quant-Trader
+                </code>
               </div>
-              <div className="p-2 bg-black/30 rounded-lg">
-                <code>npm install</code>
+              <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+                <h3 className="font-medium mb-4">Frontend setup</h3>
+                <div className="space-y-2">
+                  <div className="p-2 bg-black/30 rounded-lg">
+                    <code>cd ./frontend/</code>
+                  </div>
+                  <div className="p-2 bg-black/30 rounded-lg">
+                    <code>npm i</code>
+                  </div>
+                  <div className="p-2 bg-black/30 rounded-lg">
+                    <code>npm run dev</code>
+                  </div>
+                </div>
               </div>
-              <div className="p-2 bg-black/30 rounded-lg">
-                <code>npm run dev</code>
+
+              <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+                <h3 className="font-medium mb-4">Fork the anvil chain locally using the RPC URL</h3>
+                <div className="space-y-2">
+                  <div className="p-2 bg-black/30 rounded-lg">
+                    <code>anvil --fork-url https://eth-mainnet.g.alchemy.com/v2/KywLaq2zlVzePOhip0BY3U8ztfHkYDmo</code>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-4 bg-black/20 rounded-xl border border-white/10">
+                <h3 className="font-medium mb-4">Deploy smart contracts IntentEngineTrade.sol</h3>
+                <div className="space-y-2">
+                  <div className="p-2 bg-black/30 rounded-lg">
+                    <code>forge script script/DeployTradeIntent.sol:DeployTradeIntent --rpc-url http://127.0.0.1:8545 --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80 --broadcast
+                    </code>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      )
-    }
+      ),
+    },
   };
 
   return (
     <div className="min-h-screen bg-[#0a0014] text-white">
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#2a1f3f2e_1px,transparent_1px),linear-gradient(to_bottom,#2a1f3f2e_1px,transparent_1px)] bg-[size:14px_24px] pointer-events-none"></div>
-      
+
       <div className="max-w-7xl mx-auto px-4 py-12">
         {/* Header */}
         <div className="text-center mb-12">
@@ -186,7 +252,8 @@ const DocumentationPage = () => {
             </span>
           </h1>
           <p className="text-white/70 max-w-2xl mx-auto">
-            Complete documentation for the IntentAI project, including architecture, smart contracts, and usage guides.
+            Complete documentation for the IntentAI project, including
+            architecture, smart contracts, and usage guides.
           </p>
         </div>
 
@@ -198,8 +265,8 @@ const DocumentationPage = () => {
               onClick={() => setActiveSection(key)}
               className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                 activeSection === key
-                  ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white'
-                  : 'bg-white/5 hover:bg-white/10 text-white/70'
+                  ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white"
+                  : "bg-white/5 hover:bg-white/10 text-white/70"
               }`}
             >
               {section.title}
@@ -209,18 +276,26 @@ const DocumentationPage = () => {
 
         {/* Content */}
         <div className="bg-black/20 backdrop-blur-xl rounded-2xl border border-white/10 p-6 animate-fade-in">
-          <h2 className="text-2xl font-bold mb-6">{sections[activeSection].title}</h2>
+          <h2 className="text-2xl font-bold mb-6">
+            {sections[activeSection].title}
+          </h2>
           {sections[activeSection].content}
         </div>
 
         {/* Footer */}
         <div className="mt-12 text-center text-white/50 text-sm">
           <div className="flex items-center justify-center space-x-4">
-            <a href="#" className="hover:text-white transition-colors duration-200 flex items-center space-x-2">
+            <a
+              href="#"
+              className="hover:text-white transition-colors duration-200 flex items-center space-x-2"
+            >
               <Github className="w-4 h-4" />
               <span>GitHub</span>
             </a>
-            <a href="#" className="hover:text-white transition-colors duration-200 flex items-center space-x-2">
+            <a
+              href="#"
+              className="hover:text-white transition-colors duration-200 flex items-center space-x-2"
+            >
               <Globe className="w-4 h-4" />
               <span>Website</span>
             </a>
@@ -231,4 +306,4 @@ const DocumentationPage = () => {
   );
 };
 
-export default DocumentationPage;
\ No newline at end of file
+export default Documentation;