wip

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/BidUSDS.tsx

@@ -53,6 +53,13 @@ export const BidUSDS = ({ onBidSubmitted }: BidUSDSProps) => {
     setInputValue(value);
   };
 
+  const calculateTGLDAmount = (usdsAmount: string): string => {
+    if (!usdsAmount || !daiGoldAuctionInfo?.data?.priceRatio) return '0';
+    const numericAmount = parseFloat(usdsAmount);
+    if (isNaN(numericAmount)) return '0';
+    return (numericAmount * daiGoldAuctionInfo.data.priceRatio).toFixed(2);
+  };
+
   return (
     <ContentContainer>
       <TitleContainer>
@@ -93,19 +100,20 @@ export const BidUSDS = ({ onBidSubmitted }: BidUSDSProps) => {
           </BidContent>
         </BidContainer>
         <ReceiveAmountContainer>
-          {/* // TODO: How do we get this value? */}
           <ReceiveTextTop>You will receive</ReceiveTextTop>
           <ReceiveContainer>
             <TempleGoldIcon />
-            <ReceiveAmount>1 TGLD</ReceiveAmount>
+            <ReceiveAmount>
+              {calculateTGLDAmount(inputValue)} TGLD
+            </ReceiveAmount>
           </ReceiveContainer>
           <ReceiveTextBottom>
             at the current TGLD price of {!isPhoneOrAbove && <br />}
             {!daiGoldAuctionInfo?.data?.priceRatio
               ? '...'
-              : daiGoldAuctionInfo?.data?.priceRatio < 0.01
-              ? '<0.01'
-              : daiGoldAuctionInfo?.data?.priceRatio.toFixed(2)}{' '}
+              : daiGoldAuctionInfo?.data?.priceRatio < 0.001
+              ? '<0.001'
+              : daiGoldAuctionInfo?.data?.priceRatio.toFixed(4)}{' '}
             USDS per TGLD
           </ReceiveTextBottom>
         </ReceiveAmountContainer>

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/Chart/Chart.tsx

@@ -1,41 +1,24 @@
-import { useEffect, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { format, subDays } from 'date-fns';
+import { format } from 'date-fns';
 import LineChart from './LineChart';
 import Loader from 'components/Loader/Loader';
 import { formatNumberAbbreviated } from 'utils/formatter';
 import { useMediaQuery } from 'react-responsive';
 import { queryPhone } from 'styles/breakpoints';
+import { useAuctionsPriceHistory } from '../hooks/use-auctions-priceHistory';
 
 type XAxisTickFormatter = (timestamp: number) => string;
 
 const tickFormatter: XAxisTickFormatter = (timestamp) =>
   format(new Date(timestamp), 'MMM dd');
 
-type Metric = { timestamp: number; price: number };
-
-const pricesLast7Days = [
-  { timestamp: subDays(new Date(), 6).getTime(), price: 5.32 },
-  { timestamp: subDays(new Date(), 5).getTime(), price: 5.3 },
-  { timestamp: subDays(new Date(), 4).getTime(), price: 5.3 },
-  { timestamp: subDays(new Date(), 3).getTime(), price: 5.36 },
-  { timestamp: subDays(new Date(), 2).getTime(), price: 5.36 },
-  { timestamp: subDays(new Date(), 1).getTime(), price: 5.34 },
-  { timestamp: new Date().getTime(), price: 5.45 },
-];
-
 export const Chart = () => {
   const isPhoneOrAbove = useMediaQuery({
     query: queryPhone,
   });
-  const [metrics, setMetrics] = useState<Metric[]>([]);
   const theme = useTheme();
 
-  useEffect(() => {
-    isPhoneOrAbove
-      ? setMetrics(pricesLast7Days)
-      : setMetrics(pricesLast7Days.filter((_, index) => index % 2 === 0));
-  }, []);
+  const metrics = useAuctionsPriceHistory(isPhoneOrAbove);
 
   if (!metrics.length) return <Loader />;
 

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/Chart/LineChart.tsx

@@ -232,7 +232,7 @@ export default function LineChart<T>(
           }}
           offset={10}
           domain={yDomain}
-          ticks={[5.3, 5.35, 5.4, 5.45]}
+          // ticks={[5.30, 5.35, 5.40, 5.45]}
           tickMargin={isPhoneOrAbove ? 20 : 40}
         />
         <Tooltip

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/Table/DataTable.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Transaction } from './Table';
+import { Transaction } from '../hooks/use-auctions-history';
 import { PaginationControl } from 'components/Pages/Core/DappPages/SpiceBazaar/components/PaginationControl';
 import * as breakpoints from 'styles/breakpoints';
+import active from 'assets/icons/active.svg?react';
+import scheduled from 'assets/icons/scheduled_auc.svg?react';
+import closed from 'assets/icons/closed.svg?react';
 
 enum TableHeaders {
   Epoch = 'EPOCH',
@@ -46,7 +49,7 @@ export const DataTable: React.FC<TableProps> = ({
 
   useEffect(() => {
     const newFilteredTransactions = transactions.filter((transaction) => {
-      const auctionEndDate = new Date(transaction.auctionStartDate);
+      const auctionEndDate = new Date(transaction.endTime);
       const today = new Date();
       const thirtyDaysAgo = new Date();
       thirtyDaysAgo.setDate(today.getDate() - 30);
@@ -113,23 +116,39 @@ export const DataTable: React.FC<TableProps> = ({
               currentTransactions.map((transaction) => (
                 <DataRow key={transaction.epoch}>
                   <DataCell>{transaction.epoch}</DataCell>
-                  <DataCell>{transaction.status}</DataCell>
+                  {(() => {
+                    if (transaction.status === 'Closed') {
+                      return (
+                        <DataCell>
+                          <Status>
+                            <Closed /> {transaction.status}
+                          </Status>
+                        </DataCell>
+                      );
+                    } else if (transaction.status === 'Upcoming') {
+                      return (
+                        <DataCell>
+                          <Status>
+                            <Scheduled /> {transaction.status}
+                          </Status>
+                        </DataCell>
+                      );
+                    } else if (transaction.status === 'Active') {
+                      return (
+                        <DataCell>
+                          <Status>
+                            <Active /> {transaction.status}
+                          </Status>
+                        </DataCell>
+                      );
+                    }
+                  })()}
+                  <DataCell>{transaction.startTime}</DataCell>
+                  <DataCell>{transaction.endTime}</DataCell>
                   <DataCell>
-                    {transaction.auctionStartDate !== '-'
-                      ? transaction.auctionStartDate
-                      : '-'}
-                  </DataCell>
-                  <DataCell>
-                    {transaction.status === 'Closed'
-                      ? transaction.auctionEndDate
-                      : '-'}
-                  </DataCell>
-                  <DataCell>{transaction.amountTGLD}</DataCell>
-                  <DataCell>
-                    {transaction.status === 'Closed'
-                      ? transaction.priceRatio
-                      : '-'}
+                    {transaction.totalAuctionTokenAmount} TGLD
                   </DataCell>
+                  <DataCell>{transaction.priceRatio} USDS</DataCell>
                 </DataRow>
               ))
             )}
@@ -254,3 +273,14 @@ const DataCell = styled.td`
     padding-left: 16px;
   }
 `;
+
+const Status = styled.td`
+  display: flex; /* Enables flexbox */
+  align-items: center; /* Centers content vertically */
+`;
+
+const Active = styled(active)``;
+
+const Scheduled = styled(scheduled)``;
+
+const Closed = styled(closed)``;

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/Table/Table.tsx

@@ -1,86 +1,17 @@
 import styled from 'styled-components';
 import { DataTable } from './DataTable';
-
-export type Transaction = {
-  epoch: number;
-  status: 'Closed' | 'Active' | 'Upcoming';
-  auctionStartDate: string;
-  auctionEndDate: string;
-  amountTGLD: string;
-  priceRatio: string;
-};
-
-const data: Transaction[] = [
-  {
-    epoch: 1,
-    status: 'Closed',
-    auctionStartDate: '2024-10-13 23:22:59 CST',
-    auctionEndDate: '2024-10-13 23:22:59 CST',
-    amountTGLD: '20,832.81 TGLD',
-    priceRatio: '5.42 DAI',
-  },
-  {
-    epoch: 2,
-    status: 'Closed',
-    auctionStartDate: '2024-10-13 23:22:59 CST',
-    auctionEndDate: '2024-10-13 23:22:59 CST',
-    amountTGLD: '20,832.81 TGLD',
-    priceRatio: '5.42 DAI',
-  },
-  {
-    epoch: 3,
-    status: 'Active',
-    auctionStartDate: '2024-10-18 23:22:59 CST',
-    auctionEndDate: '-',
-    amountTGLD: '18,000.00 TGLD',
-    priceRatio: '-',
-  },
-  {
-    epoch: 4,
-    status: 'Active',
-    auctionStartDate: '2024-10-14 23:22:59 CST',
-    auctionEndDate: '-',
-    amountTGLD: '18,000.00 TGLD',
-    priceRatio: '-',
-  },
-  {
-    epoch: 5,
-    status: 'Upcoming',
-    auctionStartDate: '15.10.24 00:00 CST',
-    auctionEndDate: '-',
-    amountTGLD: '22,500.00 TGLD',
-    priceRatio: '-',
-  },
-  {
-    epoch: 6,
-    status: 'Upcoming',
-    auctionStartDate: '-',
-    auctionEndDate: '-',
-    amountTGLD: '22,500.00 TGLD',
-    priceRatio: '-',
-  },
-  {
-    epoch: 7,
-    status: 'Upcoming',
-    auctionStartDate: '-',
-    auctionEndDate: '-',
-    amountTGLD: '-',
-    priceRatio: '-',
-  },
-  {
-    epoch: 8,
-    status: 'Upcoming',
-    auctionStartDate: '-',
-    auctionEndDate: '-',
-    amountTGLD: '-',
-    priceRatio: '-',
-  },
-];
+import { useAuctionsHistory } from '../hooks/use-auctions-history';
 
 export const AuctionsHistory = () => {
+  const { data, loading, error, refetch } = useAuctionsHistory();
+
   return (
     <AuctionsHistoryContainer>
-      <DataTable transactions={data} loading={false} />
+      <DataTable
+        transactions={data || []}
+        loading={loading}
+        refetch={refetch}
+      />
     </AuctionsHistoryContainer>
   );
 };

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/hooks/use-auctions-history.ts

@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+import { stableGoldAuctionInstances, subgraphQuery } from 'utils/subgraph';
+
+export type Transaction = {
+  epoch: string;
+  status: 'Upcoming' | 'Active' | 'Closed';
+  startTime: string;
+  endTime: string;
+  totalAuctionTokenAmount: string;
+  priceRatio: string;
+};
+
+type UseAuctionsHistoryReturn = {
+  data: Transaction[] | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+};
+
+export const useAuctionsHistory = (): UseAuctionsHistoryReturn => {
+  const [data, setData] = useState<Transaction[] | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  function getAuctionStatus(
+    startTime: string,
+    endTime: string
+  ): 'Upcoming' | 'Active' | 'Closed' {
+    const now = new Date();
+
+    const startDate = new Date(startTime);
+    const endDate = new Date(endTime);
+
+    if (startDate > now) {
+      return 'Upcoming';
+    } else if (endDate > now) {
+      return 'Active';
+    } else {
+      return 'Closed';
+    }
+  }
+
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await subgraphQuery(
+        'https://subgraph.satsuma-prod.com/a912521dd162/templedao/spice-bazaar-sepolia/api',
+        stableGoldAuctionInstances()
+      );
+
+      setData(
+        response.stableGoldAuctionInstances.map((r) => ({
+          epoch: r.epoch,
+          startTime: new Date((r.startTime as any) * 1000).toLocaleDateString(),
+          endTime: new Date((r.endTime as any) * 1000).toLocaleDateString(),
+          totalAuctionTokenAmount: parseFloat(
+            r.totalAuctionTokenAmount
+          ).toFixed(2),
+          priceRatio: parseFloat(r.priceRatio).toFixed(5),
+          status: getAuctionStatus(r.startTime, r.endTime),
+        }))
+      );
+      setLoading(false);
+    } catch (err) {
+      console.error('Error fetching data:', err);
+      setError('Failed to fetch auction history.');
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return {
+    data,
+    loading,
+    error,
+    refetch: fetchData,
+  };
+};

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/hooks/use-auctions-priceHistory.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { subDays } from 'date-fns';
+
+type Metric = { timestamp: number; price: number };
+
+const pricesLast7Days: Metric[] = [
+  { timestamp: subDays(new Date(), 6).getTime(), price: 5.32 },
+  { timestamp: subDays(new Date(), 5).getTime(), price: 5.3 },
+  { timestamp: subDays(new Date(), 4).getTime(), price: 5.3 },
+  { timestamp: subDays(new Date(), 3).getTime(), price: 5.36 },
+  { timestamp: subDays(new Date(), 2).getTime(), price: 5.36 },
+  { timestamp: subDays(new Date(), 1).getTime(), price: 5.34 },
+  { timestamp: new Date().getTime(), price: 5.45 },
+];
+
+export const useAuctionsPriceHistory = (isPhoneOrAbove: boolean) => {
+  const [metrics, setMetrics] = useState<Metric[]>([]);
+
+  useEffect(() => {
+    if (isPhoneOrAbove) {
+      setMetrics(pricesLast7Days);
+    } else {
+      setMetrics(pricesLast7Days.filter((_, index) => index % 2 === 0));
+    }
+  }, [isPhoneOrAbove]);
+
+  return metrics;
+};