From 82105b29f46171e8e0207231708bed0fb393778c Mon Sep 17 00:00:00 2001
From: Karan Pargal <83785975+karanpargal@users.noreply.github.com>
Date: Tue, 28 May 2024 03:25:04 +0530
Subject: [PATCH] fix: Remove unwanted sorting from Token/NFT approvals (#181)

---
 .../NFT/NFTApprovalList/NFTApprovalList.tsx   | 35 ++++---------------
 .../TokenApprovalList/TokenApprovalList.tsx   | 25 +++----------
 2 files changed, 10 insertions(+), 50 deletions(-)

diff --git a/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx b/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx
index d10fbd64..4ee1621c 100644
--- a/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx
+++ b/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx
@@ -9,6 +9,7 @@ import { TableHeaderSorting, TableList } from "@/components/Shared";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Address } from "@/components/Atoms";
 import { Button } from "@/components/ui/button";
+import { TableHeader } from "@/components/ui/table";
 
 export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
     chain_name,
@@ -49,13 +50,7 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
         {
             id: "token_details",
             accessorKey: "token_details",
-            header: ({ column }) => (
-                <TableHeaderSorting<NftApprovalsItem>
-                    align="left"
-                    header={"Token"}
-                    column={column}
-                />
-            ),
+            header: () => <TableHeader>Token</TableHeader>,
             cell: ({ row }) => {
                 return (
                     <div className="flex flex-col">
@@ -74,7 +69,7 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
         },
         {
             id: "token_balance",
-            accessorKey: "token_balance",
+            accessorKey: "token_balances",
             header: ({ column }) => (
                 <TableHeaderSorting<NftApprovalsItem>
                     align="left"
@@ -87,13 +82,7 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
         {
             id: "token_id",
             accessorKey: "token_id",
-            header: ({ column }) => (
-                <TableHeaderSorting<NftApprovalsItem>
-                    align="left"
-                    header={"Token ID"}
-                    column={column}
-                />
-            ),
+            header: () => <TableHeader>Token ID</TableHeader>,
             cell: ({ row }) => {
                 const token_ids = row.original.token_balances.map(
                     (balance) => balance.token_id
@@ -106,13 +95,7 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
         {
             id: "spender_address_label",
             accessorKey: "spender_address_label",
-            header: ({ column }) => (
-                <TableHeaderSorting<NftApprovalsItem>
-                    align="left"
-                    header={"Spender(s)"}
-                    column={column}
-                />
-            ),
+            header: () => <TableHeader>Spender Address Label</TableHeader>,
             cell: ({ row }) => {
                 return (
                     <p className="flex flex-col">
@@ -131,13 +114,7 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
         {
             id: "risk_factor",
             accessorKey: "risk_factor",
-            header: ({ column }) => (
-                <TableHeaderSorting<NftApprovalsItem>
-                    align="left"
-                    header={"Risk Factor"}
-                    column={column}
-                />
-            ),
+            header: () => <TableHeader>Risk Factor</TableHeader>,
             cell: ({ row }) => {
                 return (
                     <span
diff --git a/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx b/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx
index 873b449e..2ef4261e 100644
--- a/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx
+++ b/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx
@@ -12,6 +12,7 @@ import { CardDetail, TableHeaderSorting, TableList } from "@/components/Shared";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Address, TokenAvatar } from "@/components/Atoms";
 import { Button } from "@/components/ui/button";
+import { TableHeader } from "@/components/ui/table";
 
 export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
     chain_name,
@@ -52,13 +53,7 @@ export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
         {
             id: "token_details",
             accessorKey: "token_details",
-            header: ({ column }) => (
-                <TableHeaderSorting<TokensApprovalItem>
-                    align="left"
-                    header={"Token"}
-                    column={column}
-                />
-            ),
+            header: () => <TableHeader>Token</TableHeader>,
             cell: ({ row }) => {
                 return (
                     <div className="flex flex-col">
@@ -135,13 +130,7 @@ export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
         {
             id: "spender_address_label",
             accessorKey: "spender_address_label",
-            header: ({ column }) => (
-                <TableHeaderSorting<TokensApprovalItem>
-                    align="left"
-                    header={"Spender(s)"}
-                    column={column}
-                />
-            ),
+            header: () => <TableHeader>Spender(s)</TableHeader>,
             cell: ({ row }) => {
                 return (
                     <p className="flex flex-col">
@@ -160,13 +149,7 @@ export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
         {
             id: "risk_factor",
             accessorKey: "risk_factor",
-            header: ({ column }) => (
-                <TableHeaderSorting<TokensApprovalItem>
-                    align="left"
-                    header={"Risk Factor"}
-                    column={column}
-                />
-            ),
+            header: () => <TableHeader>Risk Factor</TableHeader>,
             cell: ({ row }) => {
                 return (
                     <span