From 1e829b089351a1daee789eaf88f7b44a134c9924 Mon Sep 17 00:00:00 2001
From: nguyenlejoe <joe_le.1@hotmail.com>
Date: Fri, 12 Jan 2024 15:26:15 -0800
Subject: [PATCH] Price change 24hr

---
 .../XYK/XYKTokenListView/XYKTokenListView.tsx | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx b/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
index 83256b07..88bc53a2 100644
--- a/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
+++ b/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
@@ -33,6 +33,7 @@ import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { useCovalent } from "@/utils/store/Covalent";
 import { type XYKTokenListViewProps } from "@/utils/types/organisms.types";
+import { BalancePriceDelta } from "@/components/Atoms/BalancePriceDelta/BalancePriceDelta";
 
 export const XYKTokenListView: React.FC<XYKTokenListViewProps> = ({
     chain_name,
@@ -218,6 +219,27 @@ export const XYKTokenListView: React.FC<XYKTokenListViewProps> = ({
                 );
             },
         },
+        {
+            id: "quote_rate_24h",
+            accessorKey: "quote_rate_24h",
+            header: ({ column }) => (
+                <TableHeaderSorting
+                    align="right"
+                    header_name={"Price Change (24hrs)"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <div className="text-right">
+                        <BalancePriceDelta
+                            numerator={row.original.quote_rate_24h}
+                            denominator={row.original.quote_rate}
+                        />{" "}
+                    </div>
+                );
+            },
+        },
         {
             id: "actions",
             cell: ({ row }) => {