Merge pull request #82 from BuidlGuidl/feat/order-previous-searches

Feat/order previous searches

Author: ZakGriffith

packages/nextjs/.env.example

@@ -6,5 +6,6 @@
 # To access the values stored in this env file you can use: process.env.VARIABLENAME
 # You'll need to prefix the variables names with NEXT_PUBLIC_ if you want to access them on the client side.
 # More info: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
-NEXT_PUBLIC_COVALENT_API_KEY=
 NEXT_PUBLIC_OPENSEA_API_KEY=
+NEXT_PUBLIC_ALCHEMY_API_KEY=
+NEXT_PUBLIC_MORALIS_API_KEY=

packages/nextjs/components/address-vision/Navbar.tsx

@@ -10,6 +10,11 @@ import { QrCodeIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useAddressStore, useNetworkBalancesStore } from "~~/services/store/store";
 import { notification } from "~~/utils/scaffold-eth";
 
+interface AddressEntry {
+  address: Address;
+  timestamp: number;
+}
+
 export const Navbar = () => {
   const [inputValue, setInputValue] = useState("");
   const [isScannerVisible, setIsScannerVisible] = useState(false);
@@ -23,13 +28,19 @@ export const Navbar = () => {
   const { resetBalances } = useNetworkBalancesStore();
 
   useEffect(() => {
-    if (resolvedAddress && !inputChanged) {
+    if (resolvedAddress) {
       const savedAddresses = localStorage.getItem("searchedAddresses");
-      const addresses = savedAddresses ? JSON.parse(savedAddresses) : [];
-      if (!addresses.includes(resolvedAddress)) {
-        addresses.unshift(resolvedAddress);
-        localStorage.setItem("searchedAddresses", JSON.stringify(addresses));
-      }
+      const addresses: AddressEntry[] = savedAddresses ? JSON.parse(savedAddresses) : [];
+
+      const filteredAddresses = addresses.filter(entry => entry.address !== resolvedAddress);
+
+      const newEntry = {
+        address: resolvedAddress,
+        timestamp: Date.now(),
+      };
+
+      const updatedAddresses = [newEntry, ...filteredAddresses];
+      localStorage.setItem("searchedAddresses", JSON.stringify(updatedAddresses));
     }
   }, [resolvedAddress]);
 

packages/nextjs/package.json

@@ -14,7 +14,6 @@
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
   },
   "dependencies": {
-    "@covalenthq/client-sdk": "^0.4.2",
     "@ethersproject/providers": "^5.7.2",
     "@heroicons/react": "^2.0.11",
     "@tanstack/react-query": "^5.49.0",

packages/nextjs/pages/index.tsx

@@ -7,17 +7,49 @@ import { Navbar } from "~~/components/address-vision/";
 import { SmallAddressComp } from "~~/components/scaffold-eth";
 
 const Home: NextPage = () => {
-  const [previousAddresses, setPreviousAddresses] = useState<Address[]>([]);
+  interface AddressEntry {
+    address: Address;
+    timestamp: number;
+  }
+
+  const [previousAddresses, setPreviousAddresses] = useState<AddressEntry[]>([]);
 
   useEffect(() => {
     const savedAddresses = localStorage.getItem("searchedAddresses");
     if (savedAddresses) {
-      setPreviousAddresses(JSON.parse(savedAddresses));
+      try {
+        const parsed = JSON.parse(savedAddresses);
+
+        // Handle both old format (array of strings) and new format (array of AddressEntry)
+        const addresses: AddressEntry[] = Array.isArray(parsed)
+          ? parsed.map(item => {
+              if (typeof item === "string") {
+                // Convert old format to new format
+                return {
+                  address: item as Address,
+                  timestamp: Date.now(),
+                };
+              }
+              return item;
+            })
+          : [];
+
+        const sortedAddresses = addresses.sort((a, b) => b.timestamp - a.timestamp);
+        setPreviousAddresses(sortedAddresses);
+
+        // Save in new format
+        localStorage.setItem("searchedAddresses", JSON.stringify(sortedAddresses));
+      } catch (error) {
+        console.error("Error parsing saved addresses:", error);
+        localStorage.removeItem("searchedAddresses"); // Clear invalid data
+      }
     }
   }, []);
 
   const removeAddress = (addressToRemove: string) => {
-    const updatedAddresses = previousAddresses.filter(address => address !== addressToRemove);
+    const updatedAddresses = previousAddresses.filter(
+      entry => entry.address.toLowerCase() !== addressToRemove.toLowerCase(),
+    );
     setPreviousAddresses(updatedAddresses);
     localStorage.setItem("searchedAddresses", JSON.stringify(updatedAddresses));
   };
@@ -27,11 +59,15 @@ const Home: NextPage = () => {
       <MetaHeader />
       <Navbar />
       {previousAddresses.length > 0 && (
-        <div className="w-full flex flex-grow flex-col items-center md:mt-10 h-52 md:h-8">
+        <div className="w-full flex flex-grow flex-col items-center md:mt-10 h-52">
           <h2 className="text-2xl mb-4">Previous Searches</h2>
           <div className="w-full md:w-1/2 flex flex-wrap justify-center items-center gap-4 overflow-y-auto">
-            {previousAddresses.map(address => (
-              <SmallAddressComp key={address} address={address} removeAddress={() => removeAddress(address)} />
+            {previousAddresses.map(entry => (
+              <SmallAddressComp
+                key={entry.address}
+                address={entry.address as Address}
+                removeAddress={() => removeAddress(entry.address)}
+              />
             ))}
           </div>
         </div>