From 5cd35cc8345b3abbe766e2e96240ab1bbbf03942 Mon Sep 17 00:00:00 2001 From: Your GitHub Username Date: Mon, 23 Feb 2026 03:03:44 +0100 Subject: [PATCH 1/4] create wallet button --- src/app/page.tsx | 10 +++- src/components/WalletModal.tsx | 96 ++++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 src/components/WalletModal.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index d6c97f2..4bac511 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,6 +5,11 @@ 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"; +>>>>>>> Stashed changes import useTransactionToast from "../lib/useTransactionToast"; import { formatCurrency, formatDate } from "../lib/format"; @@ -13,6 +18,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 +67,7 @@ export default function Page() { TradeFlow RWA + + +
+ + + + + +
+ +
+

+ By connecting a wallet, you agree to the Terms of Service and Privacy Policy +

+
+ + + ); +} From 49ff28af5f81280f1f6a3aa6f71cff949bb0f9a6 Mon Sep 17 00:00:00 2001 From: Your GitHub Username Date: Mon, 23 Feb 2026 03:04:52 +0100 Subject: [PATCH 2/4] create wallet button --- src/app/page.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/page.tsx b/src/app/page.tsx index 4bac511..d02184f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -9,6 +9,9 @@ import SkeletonRow from "../components/SkeletonRow"; ======= 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"; @@ -164,6 +167,8 @@ export default function Page() { setIsModalOpen(false)} /> + setIsModalOpen(false)} /> + + + + {/* Additional Help */} +
+

Looking for something specific?

+
    +
  • • Check the URL for typos
    • +
  • • Browse our active trading pools
    • +
  • • Visit the documentation for guidance
    • +
  • • Contact support if the problem persists
    • +
+
+ + {/* Decorative Elements */} +
+
+
+ + + ); +} From b9fa35c03b46964fa420205c01435d8750c88b67 Mon Sep 17 00:00:00 2001 From: Your GitHub Username Date: Mon, 23 Feb 2026 08:01:48 +0100 Subject: [PATCH 4/4] feat: Build UI dropdown to select tokens (Static Data) - Create TokenDropdown component with hardcoded tokens: ['XLM', 'USDC', 'yXLM'] - Use React state to track selectedToken with default 'XLM' - Implement custom dropdown menu with open/close functionality - Add click outside handler to close dropdown when clicking elsewhere - Include visual feedback for selected token with blue accent - Add smooth transitions and hover effects - Support optional onTokenChange callback prop - Consistent dark theme styling matching TradeFlow design Addresses issue #29 --- src/components/TokenDropdown.tsx | 74 ++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/components/TokenDropdown.tsx diff --git a/src/components/TokenDropdown.tsx b/src/components/TokenDropdown.tsx new file mode 100644 index 0000000..299427c --- /dev/null +++ b/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(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 ( +
+ {/* Selected Token Button */} + + + {/* Dropdown Menu */} + {isOpen && ( +
+ {tokens.map((token) => ( + + ))} +
+ )} +
+ ); +}