Issue 29 token dropdown

src/app/not-found.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import Link from "next/link";
+import { Home, Search } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-slate-900 text-white flex flex-col items-center justify-center p-8 font-sans">
+      <div className="max-w-2xl w-full text-center">
+        {/* 404 Error Code */}
+        <div className="mb-8">
+          <h1 className="text-8xl font-bold text-blue-400 mb-2">404</h1>
+          <div className="h-1 w-24 bg-blue-500 mx-auto rounded-full"></div>
+        </div>
+
+        {/* Error Message */}
+        <div className="mb-12">
+          <h2 className="text-3xl font-semibold mb-4">This pool doesn't exist</h2>
+          <p className="text-slate-400 text-lg max-w-md mx-auto">
+            The trading pool or page you're looking for seems to have vanished into the void. 
+            Let's get you back to the dashboard where the action is.
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <Link
+            href="/"
+            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full transition-colors text-white font-medium"
+          >
+            <Home size={20} />
+            Back to Dashboard
+          </Link>
+
+          <button
+            onClick={() => window.history.back()}
+            className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-600 px-6 py-3 rounded-full transition-colors text-white font-medium"
+          >
+            <Search size={20} />
+            Go Back
+          </button>
+        </div>
+
+        {/* Additional Help */}
+        <div className="mt-16 p-6 bg-slate-800/50 rounded-2xl border border-slate-700">
+          <h3 className="text-lg font-medium mb-3 text-blue-400">Looking for something specific?</h3>
+          <ul className="text-slate-400 space-y-2 text-sm">
+            <li>• Check the URL for typos</li>
+            <li>• Browse our active trading pools</li>
+            <li>• Visit the documentation for guidance</li>
+            <li>• Contact support if the problem persists</li>
+          </ul>
+        </div>
+
+        {/* Decorative Elements */}
+        <div className="absolute top-10 left-10 w-20 h-20 bg-blue-500/10 rounded-full blur-xl"></div>
+        <div className="absolute bottom-10 right-10 w-32 h-32 bg-purple-500/10 rounded-full blur-xl"></div>
+        <div className="absolute top-1/2 left-1/4 w-16 h-16 bg-green-500/10 rounded-full blur-xl"></div>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -5,6 +5,14 @@ import { checkConnection, getPublicKey } from "@stellar/freighter-api";
 import { Wallet, PlusCircle, ShieldCheck, Landmark } from "lucide-react";
 import LoanTable from "../components/LoanTable";
 import SkeletonRow from "../components/SkeletonRow";
+<<<<<<< Updated upstream
+=======
+import Footer from "../components/layout/Footer";
+import WalletModal from "../components/WalletModal";
+<<<<<<< Updated upstream
+>>>>>>> Stashed changes
+=======
+>>>>>>> Stashed changes
 import useTransactionToast from "../lib/useTransactionToast";
 import { formatCurrency, formatDate } from "../lib/format";
 
@@ -13,6 +21,7 @@ export default function Page() {
   const [invoices, setInvoices] = useState([]);
   const [loading, setLoading] = useState(false);
   const [showMintForm, setShowMintForm] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   // 1. Connect Stellar Wallet (Freighter)
   const connectWallet = async () => {
@@ -61,7 +70,7 @@ export default function Page() {
           TradeFlow <span className="text-blue-400">RWA</span>
         </h1>
         <button
-          onClick={connectWallet}
+          onClick={() => setIsModalOpen(true)}
           className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full transition"
         >
           <Wallet size={18} />
@@ -156,6 +165,10 @@ export default function Page() {
             </div>
           </div>
 
+      <WalletModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+
+      <WalletModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+
       <button
         onClick={handleTestToast}
         className="fixed bottom-5 right-5 bg-red-500 px-4 py-2 capitalize rounded-md"

src/components/TokenDropdown.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useRef, useEffect } from "react";
+import { ChevronDown } from "lucide-react";
+
+interface TokenDropdownProps {
+  onTokenChange?: (token: string) => void;
+}
+
+export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
+  const [selectedToken, setSelectedToken] = useState("XLM");
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Hardcoded array of tokens as required
+  const tokens = ["XLM", "USDC", "yXLM"];
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleTokenSelect = (token: string) => {
+    setSelectedToken(token);
+    setIsOpen(false);
+    if (onTokenChange) {
+      onTokenChange(token);
+    }
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Selected Token Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 transition-colors min-w-[120px] justify-between"
+      >
+        <span className="font-medium text-white">{selectedToken}</span>
+        <ChevronDown 
+          size={16} 
+          className={`text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}`}
+        />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute top-full left-0 right-0 mt-1 bg-slate-800 border border-slate-600 rounded-lg shadow-lg z-50 overflow-hidden">
+          {tokens.map((token) => (
+            <button
+              key={token}
+              onClick={() => handleTokenSelect(token)}
+              className={`w-full text-left px-4 py-2 transition-colors flex items-center justify-between ${
+                token === selectedToken 
+                  ? "bg-blue-600/20 text-blue-400" 
+                  : "hover:bg-slate-700 text-white"
+              }`}
+            >
+              <span className="font-medium">{token}</span>
+              {token === selectedToken && (
+                <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/WalletModal.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+
+interface WalletModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function WalletModal({ isOpen, onClose }: WalletModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-slate-800 rounded-2xl border border-slate-700 p-6 max-w-md w-full">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-semibold text-white">Connect Wallet</h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-white transition-colors"
+          >
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div className="space-y-3">
+          <button
+            className="w-full bg-slate-700 hover:bg-slate-600 border border-slate-600 rounded-lg p-4 flex items-center gap-3 transition-colors"
+            onClick={() => {
+              console.log("Freighter wallet selected");
+              onClose();
+            }}
+          >
+            <div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
+              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
+              </svg>
+            </div>
+            <div className="text-left">
+              <div className="font-medium text-white">Freighter</div>
+              <div className="text-sm text-slate-400">Stellar ecosystem wallet</div>
+            </div>
+          </button>
+
+          <button
+            className="w-full bg-slate-700 hover:bg-slate-600 border border-slate-600 rounded-lg p-4 flex items-center gap-3 transition-colors opacity-50 cursor-not-allowed"
+            disabled
+          >
+            <div className="w-10 h-10 bg-slate-600 rounded-lg flex items-center justify-center">
+              <svg className="w-6 h-6 text-slate-400" fill="currentColor" viewBox="0 0 24 24">
+                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+                <line x1="8" y1="21" x2="16" y2="21"/>
+                <line x1="12" y1="17" x2="12" y2="21"/>
+              </svg>
+            </div>
+            <div className="text-left">
+              <div className="font-medium text-slate-400">MetaMask</div>
+              <div className="text-sm text-slate-500">Coming soon</div>
+            </div>
+          </button>
+
+          <button
+            className="w-full bg-slate-700 hover:bg-slate-600 border border-slate-600 rounded-lg p-4 flex items-center gap-3 transition-colors opacity-50 cursor-not-allowed"
+            disabled
+          >
+            <div className="w-10 h-10 bg-slate-600 rounded-lg flex items-center justify-center">
+              <svg className="w-6 h-6 text-slate-400" fill="currentColor" viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="10"/>
+              </svg>
+            </div>
+            <div className="text-left">
+              <div className="font-medium text-slate-400">WalletConnect</div>
+              <div className="text-sm text-slate-500">Coming soon</div>
+            </div>
+          </button>
+        </div>
+
+        <div className="mt-6 p-4 bg-slate-900/50 rounded-lg">
+          <p className="text-sm text-slate-400">
+            By connecting a wallet, you agree to the Terms of Service and Privacy Policy
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}