Issue 26 faq page

src/app/faq/page.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import Link from "next/link";
+import { Home } from "lucide-react";
+
+export default function FAQ() {
+  return (
+    <div className="min-h-screen bg-slate-900 text-white p-8 font-sans">
+      {/* Navigation */}
+      <div className="max-w-4xl mx-auto mb-12">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors mb-8"
+        >
+          <Home size={20} />
+          Back to Dashboard
+        </Link>
+
+        <h1 className="text-4xl font-bold tracking-tight mb-4">
+          Frequently Asked Questions
+        </h1>
+        <p className="text-slate-400 text-lg">
+          Learn more about TradeFlow and how our RWA protocol works.
+        </p>
+      </div>
+
+      {/* FAQ Content */}
+      <div className="max-w-4xl mx-auto space-y-8">
+        {/* FAQ Item 1 */}
+        <div className="bg-slate-800 rounded-2xl border border-slate-700 p-6">
+          <h3 className="text-xl font-semibold text-blue-400 mb-4">
+            What is TradeFlow?
+          </h3>
+          <p className="text-slate-300 leading-relaxed">
+            TradeFlow is a Real World Asset (RWA) protocol built on the Stellar blockchain that enables 
+            tokenization and trading of invoice-based assets. Our platform allows businesses to convert 
+            their invoices into digital tokens, creating liquidity and enabling new financing opportunities 
+            in the DeFi ecosystem.
+          </p>
+        </div>
+
+        {/* FAQ Item 2 */}
+        <div className="bg-slate-800 rounded-2xl border border-slate-700 p-6">
+          <h3 className="text-xl font-semibold text-blue-400 mb-4">
+            How does invoice tokenization work?
+          </h3>
+          <p className="text-slate-300 leading-relaxed">
+            When a business submits an invoice to TradeFlow, our risk engine analyzes the invoice 
+            quality, debtor creditworthiness, and payment history. Approved invoices are minted as 
+            NFT tokens on the Stellar blockchain, representing ownership of the future cash flow. 
+            These tokens can then be traded on our secondary market or used as collateral for loans.
+          </p>
+        </div>
+
+        {/* FAQ Item 3 */}
+        <div className="bg-slate-800 rounded-2xl border border-slate-700 p-6">
+          <h3 className="text-xl font-semibold text-blue-400 mb-4">
+            What are the fees for using TradeFlow?
+          </h3>
+          <p className="text-slate-300 leading-relaxed">
+            TradeFlow charges a 1% fee on invoice tokenization and a 0.5% fee on secondary market 
+            trades. There are no upfront costs for submitting invoices for evaluation. Borrowers 
+            pay interest rates ranging from 5-12% APR depending on the invoice quality and risk score, 
+            significantly lower than traditional factoring rates.
+          </p>
+        </div>
+
+        {/* FAQ Item 4 */}
+        <div className="bg-slate-800 rounded-2xl border border-slate-700 p-6">
+          <h3 className="text-xl font-semibold text-blue-400 mb-4">
+            What wallets are supported?
+          </h3>
+          <p className="text-slate-300 leading-relaxed">
+            Currently, TradeFlow supports Freighter wallet, the most popular wallet in the Stellar 
+            ecosystem. We're working on adding support for additional wallets including MetaMask and 
+            WalletConnect in future updates. All wallet connections are secured by Stellar's built-in 
+            encryption and multi-signature support.
+          </p>
+        </div>
+
+        {/* FAQ Item 5 */}
+        <div className="bg-slate-800 rounded-2xl border border-slate-700 p-6">
+          <h3 className="text-xl font-semibold text-blue-400 mb-4">
+            How is risk assessed for invoices?
+          </h3>
+          <p className="text-slate-300 leading-relaxed">
+            Our proprietary risk engine analyzes multiple factors including debtor credit history, 
+            payment patterns, invoice age, industry risk, and macroeconomic conditions. Each invoice 
+            receives a risk score from 0-100, which determines eligibility and pricing. Higher risk 
+            scores result in better rates and higher tokenization limits.
+          </p>
+        </div>
+
+        {/* FAQ Item 6 */}
+        <div className="bg-slate-800 rounded-2xl border border-slate-700 p-6">
+          <h3 className="text-xl font-semibold text-blue-400 mb-4">
+            Can I trade tokens before the invoice is paid?
+          </h3>
+          <p className="text-slate-300 leading-relaxed">
+            Yes, invoice tokens can be traded on our secondary market at any time before maturity. 
+            The token price reflects the remaining time to payment and perceived risk. This provides 
+            liquidity to invoice holders and investment opportunities for traders seeking yield from 
+            short-term credit instruments.
+          </p>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="max-w-4xl mx-auto mt-16 pt-8 border-t border-slate-700">
+        <p className="text-slate-400 text-center">
+          Still have questions? Contact our support team or check our documentation.
+        </p>
+      </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/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>
+  );
+}