From 9c550d1dfb4083982a4228ab32476417548e0602 Mon Sep 17 00:00:00 2001
From: Adedeji Mustapha <adedeji.mustapha.2018@gmail.com>
Date: Sat, 28 Mar 2026 09:25:29 +0100
Subject: [PATCH] ui: Implement detailed empty state for token search

---
 src/components/TokenDropdown.tsx | 71 ++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/components/TokenDropdown.tsx b/src/components/TokenDropdown.tsx
index 9da711b..4caacac 100644
--- a/src/components/TokenDropdown.tsx
+++ b/src/components/TokenDropdown.tsx
@@ -1,9 +1,12 @@
+"use client";
+
 import React, { useState, useRef, useEffect, useMemo } from "react";
-import { ChevronDown, Search, X } from "lucide-react";
+import { ChevronDown, Search, X, Copy } from "lucide-react";
 import { useDebounce } from "../hooks/useDebounce";
 import { useRecentTokens } from "../hooks/useRecentTokens";
 import { useWatchlist } from "../hooks/useWatchlist";
 import StarIcon from "./StarIcon";
+import toast from "react-hot-toast";
 
 interface TokenDropdownProps {
   onTokenChange?: (token: string) => void;
@@ -21,9 +24,18 @@ export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
   // Debounce the search input with 300ms delay
   const debouncedSearch = useDebounce(searchInput, 300);
 
-  // Hardcoded array of tokens as required
+  // Hardcoded array of tokens
   const tokens = ["XLM", "USDC", "yXLM"];
 
+  /** * ISSUE #86: Mock addresses for copy functionality. 
+   * In a production environment, these would come from a token list API.
+   */
+  const mockAddresses: Record<string, string> = {
+    "XLM": "native",
+    "USDC": "CBQ6O7Y4O7Z5J2... (Stellar Contract)",
+    "yXLM": "CBP3T2... (Yield Stellar Asset)",
+  };
+
   // Memoize filtered tokens based on debounced search value
   const filteredTokens = useMemo(() => {
     return tokens.filter((token) =>
@@ -61,6 +73,23 @@ export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
     }
   };
 
+  /**
+   * ISSUE #86: Clipboard handler.
+   * Uses stopPropagation to ensure the dropdown doesn't close when copying.
+   */
+  const handleCopyAddress = (e: React.MouseEvent, token: string) => {
+    e.stopPropagation();
+    const address = mockAddresses[token] || "Address not found";
+    
+    navigator.clipboard.writeText(address)
+      .then(() => {
+        toast.success("Token Address Copied!");
+      })
+      .catch(() => {
+        toast.error("Failed to copy address");
+      });
+  };
+
   return (
     <div className="relative" ref={dropdownRef}>
       {/* Selected Token Button */}
@@ -96,7 +125,7 @@ export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
               {searchInput && (
                 <button
                   onClick={() => setSearchInput("")}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-300 transition-colors"
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
                   aria-label="Clear search"
                 >
                   <X size={16} />
@@ -118,10 +147,18 @@ export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
                     <button
                       key={`recent-${token}`}
                       onClick={() => handleTokenSelect(token)}
-                      className="w-full text-left px-4 py-2 transition-colors flex items-center justify-between hover:bg-slate-700 text-white"
+                      className="w-full text-left px-4 py-2 transition-colors flex items-center justify-between hover:bg-slate-700 text-white group"
                     >
                       <div className="flex items-center gap-2">
                         <span className="font-medium">{token}</span>
+                        {/* ISSUE #86: Copy Icon for Recent Tokens */}
+                        <div
+                          onClick={(e) => handleCopyAddress(e, token)}
+                          className="opacity-0 group-hover:opacity-100 text-slate-500 hover:text-blue-400 transition-all p-1"
+                          title="Copy Contract Address"
+                        >
+                          <Copy size={14} />
+                        </div>
                         <StarIcon
                           isStarred={isInWatchlist(token)}
                           onClick={() => toggleWatchlist(token)}
@@ -142,7 +179,7 @@ export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
                 <button
                   key={token}
                   onClick={() => handleTokenSelect(token)}
-                  className={`w-full text-left px-4 py-2 transition-colors flex items-center justify-between ${
+                  className={`w-full text-left px-4 py-2 transition-colors flex items-center justify-between group ${
                     token === selectedToken
                       ? "bg-blue-600/20 text-blue-400"
                       : "hover:bg-slate-700 text-white"
@@ -150,6 +187,14 @@ export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
                 >
                   <div className="flex items-center gap-2">
                     <span className="font-medium">{token}</span>
+                    {/* ISSUE #86: Copy Icon for All Tokens */}
+                    <div
+                      onClick={(e) => handleCopyAddress(e, token)}
+                      className="opacity-0 group-hover:opacity-100 text-slate-500 hover:text-blue-400 transition-all p-1"
+                      title="Copy Contract Address"
+                    >
+                      <Copy size={14} />
+                    </div>
                     <StarIcon
                       isStarred={isInWatchlist(token)}
                       onClick={() => toggleWatchlist(token)}
@@ -163,12 +208,22 @@ export default function TokenDropdown({ onTokenChange }: TokenDropdownProps) {
               ))}
             </div>
           ) : (
-            <div className="px-4 py-6 text-center text-slate-400">
-              <p>No tokens found</p>
+            /**
+             * ISSUE #91: Enhanced "Token Not Found" Empty State.
+             * Includes visual cues and instructional secondary text.
+             */
+            <div className="px-6 py-10 text-center flex flex-col items-center justify-center">
+              <div className="bg-slate-700/50 p-3 rounded-full mb-4">
+                <Search size={24} className="text-slate-500" />
+              </div>
+              <p className="text-white font-medium mb-1">No tokens found</p>
+              <p className="text-xs text-slate-400 leading-relaxed max-w-[180px]">
+                Try searching for a different name or pasting a valid Stellar contract address.
+              </p>
             </div>
           )}
         </div>
       )}
     </div>
   );
-}
+}
\ No newline at end of file