Ponder updated

components/01-atoms/StatusOffers.tsx

@@ -1,8 +1,12 @@
-import { useState } from "react";
+import { useState, useContext, useEffect } from "react";
 import cc from "classcat";
+import { getGraphQuery } from "@/lib/client/hooks/ponderQueries";
+import { SwapContext } from ".";
 
 export const StatusOffers = () => {
+  const { inputAddress } = useContext(SwapContext);
   const [offerIsActive, setOfferIsActive] = useState<number>(0);
+  const [allSwaps, setAllSwaps] = useState<Swap[]>([]);
 
   enum FilterOptions {
     ALL_OFFERS = "All Offers",
@@ -18,6 +22,19 @@
     name: FilterOptions;
   }
 
+  interface Swap {
+    swapId: string;
+    status: string;
+    owner: string;
+    allowed: string | null;
+    expiry: bigint;
+    bid: string;
+    ask: string;
+    swapAccepted: string | null;
+    swapCanceled: string | null;
+    swapCreated: string | null;
+  }
+
   const OffersFilter: Record<FilterOptions, IFilterOffers> = {
     [FilterOptions.ALL_OFFERS]: {
       id: 1,
@@ -45,6 +62,56 @@
     },
   };
 
+  useEffect(() => {
+    const fetchAllSwaps = async () => {
+      try {
+        const results = await getGraphQuery(inputAddress);
+        setAllSwaps(results);
+      } catch (error) {
+        console.error("Failed to fetch swaps:", error);
+      }
+    };
+
+    fetchAllSwaps();
+  }, [inputAddress]);
+
+  const handleFilterClick = (filterOption: FilterOptions, index: number) => {
+    setOfferIsActive(index);
+    console.log("All Swaps:", allSwaps);
+
+    let filtered: any[] = [];
+    switch (filterOption) {
+      case FilterOptions.CREATED:
+        filtered = allSwaps.filter((swap) => swap.status === "created");
+        break;
+
+      case FilterOptions.RECEIVED:
+        filtered = allSwaps.filter((swap) => {
+          swap.allowed === inputAddress && !swap.swapAccepted;
+        });
+        break;
+
+      case FilterOptions.ACCEPTED:
+        filtered = allSwaps.filter(
+          (swap) => swap.swapAccepted === inputAddress,
+        );
+        break;
+
+      case FilterOptions.CANCELED:
+        filtered = allSwaps.filter((swap) => swap.status === "canceled");
+        break;
+      default:
+        filtered = allSwaps;
+    }
+
+    console.log(
+      "swapOwner",
+      allSwaps[0].owner && allSwaps[0].owner.toUpperCase(),
+    );
+    console.log("InputAddress:", inputAddress.toUpperCase());
+    console.log("filtered", filtered);
+  };
+
   return (
     <>
       {Object.keys(OffersFilter).map((key, index) => {
@@ -60,7 +127,7 @@
                 : "dark:hover:bg-[#282B29]",
             ])}
             key={index}
-            onClick={() => setOfferIsActive(index)}
+            onClick={() => handleFilterClick(filterOption, index)}
           >
             <div
               className={cc([

lib/client/hooks/ponderQueries.ts

@@ -0,0 +1,57 @@
+import axios from "axios";
+
+export const getGraphQuery = async (inputAddress: string) => {
+  const endpoint = "https://rascar-swaplace-ponder-production.up.railway.app/";
+  const headers = {
+    "content-type": "application/json",
+  };
+
+  const formattedInputAddress = inputAddress.startsWith("0x")
+    ? inputAddress
+    : `0x${inputAddress}`;
+
+  const graphqlQuery = {
+    operationName: "databases",
+    query: `query databases($orderBy: String!, $orderDirection: String!, $inputAddress: String!, $after: String!) {
+      databases(orderBy: $orderBy, orderDirection: $orderDirection, where: { owner: $inputAddress }, after: $after)  {
+         items {
+           swapId
+           status
+           owner
+           allowed
+           expiry
+           bid
+           ask
+           blockTimestamp
+           transactionHash
+         }
+      }
+     }`,
+    variables: {
+      orderBy: "blockTimestamp",
+      orderDirection: "desc",
+      inputAddress: formattedInputAddress,
+      after: "W1siYmxvY2tUaW1lc3RhbXAiLHsiX190eXBlIjoiYmlnaW50IiwidmFsdWUiOiIxNzEwMjc0ODEyIn1dLFsiaWQiLCIweDE3Il1d"
+    },
+  };
+
+  const config = {
+    url: endpoint,
+    method: "post",
+    headers: headers,
+    data: graphqlQuery,
+  };
+
+  try {
+    const response = await axios(config);
+    console.log(response.data.errors);
+
+    const results = response.data.data.databases.items;
+    console.log(results);
+
+    return results;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};