From 2554545c7e83481fa9be65105f6f1c650e4fbe0e Mon Sep 17 00:00:00 2001
From: Yashvardhan Jagnani <yashjagnani73@gmail.com>
Date: Fri, 10 May 2024 20:04:58 +0530
Subject: [PATCH] feat(tables): ts

---
 src/components/Atoms/Address/Address.tsx      |   7 +-
 .../AddressActivityListView.tsx               |  64 ++--
 .../TokenBalancesListView.tsx                 | 355 +++++-------------
 .../TokenTransfersListView.tsx                | 177 +++++----
 .../XYKOverviewTransactionsListView.tsx       |  73 ++--
 .../XYK/XYKPoolListView/XYKPoolListView.tsx   | 337 +++++------------
 .../XYKPoolTransactionsListView.tsx           |  49 ++-
 .../XYK/XYKTokenListView/XYKTokenListView.tsx | 352 +++++------------
 .../XYKTokenPoolListView.tsx                  | 342 +++++------------
 .../XYKTokenTransactionsListView.tsx          |  49 ++-
 .../XYKWalletPoolListView.tsx                 | 235 +++---------
 .../XYKWalletPositionsListView.tsx            |  39 +-
 .../XYKWalletTransactionsListView.tsx         |  43 +--
 src/components/Shared/IconWrapper.tsx         |   4 +-
 src/components/Shared/TableHeaderSorting.tsx  |  12 +-
 src/components/Shared/TableList.tsx           |  10 +-
 src/components/Shared/Transactions.tsx        |  28 +-
 src/utils/functions/timestamp-parser.ts       |   8 +
 src/utils/types/shared.types.ts               |   8 +-
 19 files changed, 667 insertions(+), 1525 deletions(-)

diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx
index cf3c88e2..a629111f 100644
--- a/src/components/Atoms/Address/Address.tsx
+++ b/src/components/Atoms/Address/Address.tsx
@@ -22,8 +22,9 @@ export const Address: React.FC<AddressProps> = ({
     };
 
     return (
-        <div className="flex items-center gap-x-2">
-            <p>{truncate(address)}</p>
+        <p className="flex items-center gap-x-2">
+            {truncate(address)}
+
             {show_copy_icon ? (
                 <button
                     className="cursor-pointer"
@@ -49,6 +50,6 @@ export const Address: React.FC<AddressProps> = ({
             ) : (
                 <></>
             )}
-        </div>
+        </p>
     );
 };
diff --git a/src/components/Organisms/AddressActivityListView/AddressActivityListView.tsx b/src/components/Organisms/AddressActivityListView/AddressActivityListView.tsx
index ace766c8..500f39cb 100644
--- a/src/components/Organisms/AddressActivityListView/AddressActivityListView.tsx
+++ b/src/components/Organisms/AddressActivityListView/AddressActivityListView.tsx
@@ -46,64 +46,54 @@ export const AddressActivityListView: React.FC<
     const columns: ColumnDef<ChainActivityEvent>[] = [
         {
             accessorKey: "label",
+            id: "label",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ChainActivityEvent>
                     align="left"
-                    header_name={"Name"}
+                    header="Chain Name"
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="flex items-center gap-x-1">
-                        <TokenAvatar
-                            is_chain_logo={true}
-                            token_url={row.original.logo_url}
-                            size={GRK_SIZES.EXTRA_EXTRA_SMALL}
-                        />
-                        {row.getValue("label")}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="flex items-center gap-x-1">
+                    <TokenAvatar
+                        is_chain_logo={true}
+                        token_url={row.original.logo_url}
+                        size={GRK_SIZES.EXTRA_EXTRA_SMALL}
+                    />
+                    {row.getValue("label")}
+                </div>
+            ),
         },
         {
             accessorKey: "last_seen_at",
+            id: "last_seen_at",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ChainActivityEvent>
                     align="left"
-                    header_name={"Last Active"}
+                    header="Last Active"
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const t = (row.getValue("last_seen_at") as string).toString();
-
-                return <div>{timestampParser(t, "relative")}</div>;
-            },
+            cell: ({ row }) =>
+                timestampParser(row.getValue("last_seen_at"), "relative"),
         },
         {
             accessorKey: "is_testnet",
+            id: "is_testnet",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ChainActivityEvent>
                     align="center"
-                    header_name={"Mainnet"}
+                    header="Mainnet"
                     column={column}
                 />
             ),
-
-            cell: ({ row }) => {
-                const t = row.getValue("is_testnet");
-
-                return (
-                    <div className="text-center">
-                        {t ? (
-                            ""
-                        ) : (
-                            <IconWrapper icon_class_name="playlist_add_check" />
-                        )}
-                    </div>
-                );
-            },
+            cell: ({ row }) =>
+                !row.getValue("is_testnet") ? (
+                    <IconWrapper icon_class_name="playlist_add_check" />
+                ) : (
+                    <></>
+                ),
         },
     ];
 
diff --git a/src/components/Organisms/TokenBalancesListView/TokenBalancesListView.tsx b/src/components/Organisms/TokenBalancesListView/TokenBalancesListView.tsx
index 208bf8f9..16b66fd4 100644
--- a/src/components/Organisms/TokenBalancesListView/TokenBalancesListView.tsx
+++ b/src/components/Organisms/TokenBalancesListView/TokenBalancesListView.tsx
@@ -46,18 +46,6 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [filterResult, setFilterResult] =
         useState<Option<CrossChainBalanceItem[]>>(None);
-    const [windowWidth, setWindowWidth] = useState<number>(0);
-
-    useEffect(() => {
-        setWindowWidth(window.innerWidth);
-        const handleResize = () => {
-            setWindowWidth(window.innerWidth);
-        };
-        window.addEventListener("resize", handleResize);
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, []);
 
     useEffect(() => {
         (async () => {
@@ -115,35 +103,28 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
             id: "contract_name",
             accessorKey: "contract_name",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Token"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<CrossChainBalanceItem>
+                    align="left"
+                    header={"Token"}
+                    column={column}
+                />
             ),
             cell: ({ row }) => {
                 const chain: ChainItem | null =
                     chains?.find((o) => o.name === row.original.chain) ?? null;
                 const chainColor = chain?.color_theme.hex;
-                const chain_label = (chain?.label ? chain.label : "").replace(
-                    " Mainnet",
-                    ""
-                );
-                const protocol_url = row.original.logo_urls.protocol_logo_url;
 
                 return (
-                    <div className="ml-4 flex items-center gap-3">
+                    <div className="flex items-center gap-3">
                         <TokenAvatar
                             size={GRK_SIZES.EXTRA_SMALL}
                             chain_color={chainColor}
-                            sub_url={protocol_url}
+                            sub_url={row.original.logo_urls.protocol_logo_url}
                             token_url={row.original.logo_urls.token_logo_url}
                         />
                         <div className="flex flex-col">
                             <div style={{ color: chainColor }}>
-                                {chain_label}
+                                {chain?.label.replace(" Mainnet", "")}
                             </div>
                             <label className="text-base">
                                 {row.original.contract_display_name
@@ -159,33 +140,30 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
             id: "quote_rate",
             accessorKey: "quote_rate",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<CrossChainBalanceItem>
                     align="right"
-                    header_name={"Quote Rate"}
+                    header={"Quote Rate"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        {" "}
-                        {prettifyCurrency(
-                            row.getValue("quote_rate"),
-                            2,
-                            "USD",
-                            true
-                        )}{" "}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(
+                        row.getValue("quote_rate"),
+                        2,
+                        "USD",
+                        true
+                    )}
+                </div>
+            ),
         },
         {
             id: "balance",
             accessorKey: "balance",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<CrossChainBalanceItem>
                     align="right"
-                    header_name={"Balance"}
+                    header={"Balance"}
                     column={column}
                 />
             ),
@@ -197,7 +175,6 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                     true,
                     4
                 );
-
                 return (
                     <div className="text-right">
                         {!mask_balances ? valueFormatted : "*****"}{" "}
@@ -210,252 +187,88 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
             id: "pretty_quote",
             accessorKey: "quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<CrossChainBalanceItem>
                     align="right"
-                    header_name={"Quote"}
+                    header={"Quote"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        {" "}
-                        {row.original.pretty_quote
-                            ? row.original.pretty_quote
-                            : "$0.00"}{" "}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {row.original.pretty_quote
+                        ? row.original.pretty_quote
+                        : "$0.00"}
+                </div>
+            ),
         },
         {
             id: "delta",
             accessorKey: "quote_24h",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<CrossChainBalanceItem>
                     align="right"
-                    header_name={"Delta"}
+                    header={"Delta"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                // * INFO: debugger
-                // const delta =  row.original.quote / (row.original as any).quote_24h
-
-                return (
-                    <div className="text-right">
-                        {" "}
-                        <BalancePriceDelta
-                            numerator={row.original.quote_24h}
-                            denominator={row.original.quote}
-                        />{" "}
-                    </div>
-                );
-            },
-        },
-        {
-            id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_transfer_click) {
-                                            on_transfer_click({
-                                                chain_name: row.original.chain,
-                                                contract_address:
-                                                    row.original
-                                                        .contract_address,
-                                            });
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Transfer History
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuLabel>
-                                    <div className="flex">
-                                        <IconWrapper
-                                            icon_class_name="history"
-                                            class_name="mr-2"
-                                        />
-                                        {row.original.last_transferred_at
-                                            ? `Last transferred ${timestampParser(
-                                                  row.original.last_transferred_at.toDateString(),
-                                                  "relative"
-                                              )} `
-                                            : "FIX ME"}
-                                    </div>{" "}
-                                </DropdownMenuLabel>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
-        },
-    ];
-
-    const mobile_columns: ColumnDef<CrossChainBalanceItem>[] = [
-        {
-            id: "contract_name",
-            accessorKey: "contract_name",
-            // header: <div className="text-left">Token</div>,
-            header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Token"}
-                        column={column}
+            cell: ({ row }) => (
+                <div className="text-right">
+                    <BalancePriceDelta
+                        numerator={row.original.quote_24h}
+                        denominator={row.original.quote}
                     />
                 </div>
             ),
-            cell: ({ row }) => {
-                const original = row.original as BalanceItem;
-                const valueFormatted = calculatePrettyBalance(
-                    original.balance ?? 0,
-                    row.original.contract_decimals,
-                    true,
-                    4
-                );
-                const formattedNumber = parseFloat(
-                    valueFormatted.toString()
-                ).toLocaleString(undefined, {
-                    minimumFractionDigits: 4,
-                    maximumFractionDigits: 4,
-                });
-
-                const chain: ChainItem | null =
-                    chains?.find((o) => o.name === row.original.chain) ?? null;
-                const chainColor = chain?.color_theme.hex;
-                const chain_label = (chain?.label ? chain.label : "").replace(
-                    " Mainnet",
-                    ""
-                );
-                const protocol_url = row.original.logo_urls.protocol_logo_url;
-
-                return (
-                    <div className="ml-4 flex items-center gap-3">
-                        <TokenAvatar
-                            size={GRK_SIZES.EXTRA_SMALL}
-                            chain_color={chainColor}
-                            sub_url={protocol_url}
-                            token_url={row.original.logo_urls.token_logo_url}
-                        />
-                        <div className="flex flex-col gap-1">
-                            <div style={{ color: chainColor }}>
-                                {chain_label}
-                            </div>
-                            <label className="text-base">
-                                {row.getValue("contract_display_name")}
-                            </label>
-                            <div className="text-secondary">
-                                {!mask_balances ? formattedNumber : "*****"}{" "}
-                                {row.original.contract_ticker_symbol}
-                            </div>
-                        </div>
-                    </div>
-                );
-            },
-        },
-        {
-            id: "pretty_quote",
-            accessorKey: "quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Quote"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                return (
-                    <div className="flex flex-col">
-                        <div className="text-right text-base">
-                            {row.original.pretty_quote
-                                ? row.original.pretty_quote
-                                : "$0.00"}
-                        </div>
-                        <div className="text-right ">
-                            <BalancePriceDelta
-                                numerator={row.original.quote_24h}
-                                denominator={row.original.quote}
-                            />
-                        </div>
-                    </div>
-                );
-            },
         },
         {
             id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_transfer_click) {
-                                            on_transfer_click({
-                                                chain_name: row.original.chain,
-                                                contract_address:
-                                                    row.original
-                                                        .contract_address,
-                                            });
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Transfer History
-                                </DropdownMenuItem>
-                                {/* <DropdownMenuItem>
+            cell: ({ row }) => (
+                <div className="text-right">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="ml-auto">
+                                <span className="sr-only">Open menu</span>
+                                <IconWrapper icon_class_name="expand_more" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem
+                                onClick={() => {
+                                    if (on_transfer_click) {
+                                        on_transfer_click({
+                                            chain_name: row.original.chain,
+                                            contract_address:
+                                                row.original.contract_address,
+                                        });
+                                    }
+                                }}
+                            >
+                                <IconWrapper
+                                    icon_class_name="swap_horiz"
+                                    class_name="mr-2"
+                                />{" "}
+                                View Transfer History
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuLabel>
+                                <div className="flex">
                                     <IconWrapper
-                                        icon_class_name="swap_calls"
+                                        icon_class_name="history"
                                         class_name="mr-2"
-                                    />{" "}
-                                    Swap {row.original.contract_ticker_symbol}
-                                </DropdownMenuItem> */}
-                                <DropdownMenuSeparator />
-                                <DropdownMenuLabel>
-                                    <div className="flex">
-                                        <IconWrapper
-                                            icon_class_name="history"
-                                            class_name="mr-2"
-                                        />
-                                        {row.original.last_transferred_at
-                                            ? `Last transferred ${timestampParser(
-                                                  row.original.last_transferred_at.toDateString(),
-                                                  "relative"
-                                              )} `
-                                            : "FIX ME"}
-                                    </div>{" "}
-                                </DropdownMenuLabel>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
+                                    />
+                                    {row.original.last_transferred_at
+                                        ? `Last transferred ${timestampParser(
+                                              row.original.last_transferred_at.toDateString(),
+                                              "relative"
+                                          )} `
+                                        : "FIX ME"}
+                                </div>{" "}
+                            </DropdownMenuLabel>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            ),
         },
     ];
 
@@ -510,7 +323,7 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
             </div>
 
             <TableList<CrossChainBalanceItem>
-                columns={windowWidth < 700 ? mobile_columns : columns}
+                columns={columns}
                 errorMessage={errorMessage}
                 maybeData={maybeResult}
                 sorting_state={[
diff --git a/src/components/Organisms/TokenTransfersListView/TokenTransfersListView.tsx b/src/components/Organisms/TokenTransfersListView/TokenTransfersListView.tsx
index ce3a6562..5e8582fc 100644
--- a/src/components/Organisms/TokenTransfersListView/TokenTransfersListView.tsx
+++ b/src/components/Organisms/TokenTransfersListView/TokenTransfersListView.tsx
@@ -9,18 +9,14 @@ import { type TIME_SERIES_GROUP } from "@/utils/constants/shared.constants";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { type ColumnDef } from "@tanstack/react-table";
 import { TableCell, TableRow } from "@/components/ui/table";
-import { AddressAvatar } from "../../Atoms";
+import { Address, AddressAvatar } from "../../Atoms";
 import {
     timestampParser,
     truncate,
     calculateTimeSeriesGroup,
 } from "@/utils/functions";
 import { Badge } from "@/components/ui/badge";
-import {
-    IconWrapper,
-    TableHeaderSorting,
-    TableList,
-} from "@/components/Shared";
+import { TableHeaderSorting, TableList } from "@/components/Shared";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { type TokenTransfersListViewProps } from "@/utils/types/organisms.types";
 import { useGoldRush } from "@/utils/store";
@@ -80,42 +76,48 @@ export const TokenTransfersListView: React.FC<TokenTransfersListViewProps> = ({
     const columns: ColumnDef<BlockTransactionWithContractTransfers>[] = [
         {
             accessorKey: "block_signed_at",
+            id: "block_signed_at",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Time"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<BlockTransactionWithContractTransfers>
+                    align="left"
+                    header={"Signed at"}
+                    column={column}
+                />
             ),
-            cell: ({ row }) => {
-                const t = row.getValue("block_signed_at") as string;
-
-                return (
-                    <div className="ml-4">{timestampParser(t, "relative")}</div>
-                );
-            },
+            cell: ({ row }) =>
+                timestampParser(row.getValue("block_signed_at"), "relative"),
         },
         {
             accessorKey: "from_address",
-            header: "From",
-            cell: ({ row }) => {
-                return (
-                    <div className="flex items-center gap-x-1">
-                        <AddressAvatar
-                            size={GRK_SIZES.EXTRA_SMALL}
-                            type="fingerprint"
-                            address={row.getValue("from_address")}
-                        />
-                        {truncate(row.getValue("from_address"))}
-                    </div>
-                );
-            },
+            id: "from_address",
+            header: ({ column }) => (
+                <TableHeaderSorting<BlockTransactionWithContractTransfers>
+                    align="left"
+                    header={"From"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <div className="flex items-center gap-x-1">
+                    <AddressAvatar
+                        size={GRK_SIZES.EXTRA_SMALL}
+                        type="fingerprint"
+                        address={row.getValue("from_address")}
+                    />
+                    {truncate(row.getValue("from_address"))}
+                </div>
+            ),
         },
         {
             accessorKey: "to_address",
-            header: "To",
+            id: "to_address",
+            header: ({ column }) => (
+                <TableHeaderSorting<BlockTransactionWithContractTransfers>
+                    align="left"
+                    header={"To"}
+                    column={column}
+                />
+            ),
             cell: ({ row }) => {
                 return (
                     <div className="flex items-center gap-x-1">
@@ -131,90 +133,79 @@ export const TokenTransfersListView: React.FC<TokenTransfersListViewProps> = ({
         },
         {
             accessorKey: "transfer_type",
-            header: "In/Out",
-            cell: ({ row }) => {
-                return <Badge>{row.original.transfers[0].transfer_type}</Badge>;
-            },
+            id: "transfer_type",
+            header: ({ column }) => (
+                <TableHeaderSorting<BlockTransactionWithContractTransfers>
+                    align="left"
+                    header={"In/Out"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <Badge>{row.original.transfers[0].transfer_type}</Badge>
+            ),
         },
         {
-            id: "tokenAmount",
             accessorKey: "delta",
+            id: "delta",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<BlockTransactionWithContractTransfers>
                     align="right"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
             cell: ({ row }) => {
                 const transfer = row.original.transfers[0];
-                if (transfer) {
-                    return (
-                        <div className="text-right">
-                            {calculatePrettyBalance(
-                                transfer?.delta ?? 0,
-                                transfer?.contract_decimals
-                            )}{" "}
-                            {transfer?.contract_ticker_symbol}
-                        </div>
-                    );
-                }
-                return null;
+                return transfer ? (
+                    <div className="text-right">
+                        {calculatePrettyBalance(
+                            transfer?.delta ?? 0,
+                            transfer?.contract_decimals
+                        )}{" "}
+                        {transfer?.contract_ticker_symbol}
+                    </div>
+                ) : (
+                    <></>
+                );
             },
         },
         {
-            id: "value",
             accessorKey: "delta_quote",
+            id: "delta_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<BlockTransactionWithContractTransfers>
                     align="right"
-                    header_name={"Quote"}
+                    header={"Quote"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        {prettifyCurrency(
-                            row.original.transfers[0].delta_quote,
-                            2,
-                            "USD",
-                            true
-                        )}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(
+                        row.original.transfers[0].delta_quote,
+                        2,
+                        "USD",
+                        true
+                    )}
+                </div>
+            ),
         },
         {
             accessorKey: "tx_hash",
+            id: "tx_hash",
             header: ({ column }) => (
-                <div className="mr-4">
-                    <TableHeaderSorting
-                        align="right"
-                        header_name={"Transaction"}
-                        column={column}
-                        icon={false}
-                    />
+                <TableHeaderSorting<BlockTransactionWithContractTransfers>
+                    align="right"
+                    header={"Transaction Hash"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <div className="flex justify-end">
+                    <Address address={row.getValue("tx_hash")} />
                 </div>
             ),
-            cell: ({ row }) => {
-                const txHash: string = row.getValue("tx_hash");
-                return (
-                    <a
-                        className="mr-4 flex items-center justify-end gap-x-2"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href={row.original.transfers[0].explorers[0].url}
-                    >
-                        {truncate(txHash)}
-                        <IconWrapper
-                            icon_class_name="open_in_new"
-                            class_name="h-3 w-3"
-                            icon_size="text-sm text-black dark:text-white"
-                        />
-                    </a>
-                );
-            },
         },
     ];
 
diff --git a/src/components/Organisms/XYK/XYKOverviewTransactionsListView/XYKOverviewTransactionsListView.tsx b/src/components/Organisms/XYK/XYKOverviewTransactionsListView/XYKOverviewTransactionsListView.tsx
index 9079a6a3..0bde630b 100644
--- a/src/components/Organisms/XYK/XYKOverviewTransactionsListView/XYKOverviewTransactionsListView.tsx
+++ b/src/components/Organisms/XYK/XYKOverviewTransactionsListView/XYKOverviewTransactionsListView.tsx
@@ -61,29 +61,24 @@ export const XYKOverviewTransactionsListView: React.FC<
     const columns: ColumnDef<ExchangeTransaction>[] = [
         {
             accessorKey: "block_signed_at",
+            id: "block_signed_at",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Time"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<ExchangeTransaction>
+                    align="left"
+                    header={"Signed at"}
+                    column={column}
+                />
             ),
-            cell: ({ row }) => {
-                const t = row.getValue("block_signed_at") as string;
-
-                return (
-                    <div className="ml-4">{timestampParser(t, "relative")}</div>
-                );
-            },
+            cell: ({ row }) =>
+                timestampParser(row.getValue("block_signed_at"), "relative"),
         },
         {
             accessorKey: "act",
+            id: "act",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Transaction type"}
+                    header={"Transaction type"}
                     column={column}
                 />
             ),
@@ -156,26 +151,24 @@ export const XYKOverviewTransactionsListView: React.FC<
             },
         },
         {
-            id: "total_quote",
             accessorKey: "total_quote",
+            id: "total_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Total value"}
+                    header={"Total value"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return <>{row.original.pretty_total_quote}</>;
-            },
+            cell: ({ row }) => row.original.pretty_total_quote,
         },
         {
-            id: "amount_0",
             accessorKey: "amount_0",
+            id: "amount_0",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
@@ -212,12 +205,12 @@ export const XYKOverviewTransactionsListView: React.FC<
             },
         },
         {
-            id: "amount_1",
             accessorKey: "amount_1",
+            id: "amount_1",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
@@ -309,18 +302,16 @@ export const XYKOverviewTransactionsListView: React.FC<
     ];
 
     return (
-        <div className="space-y-4">
-            <TableList<ExchangeTransaction>
-                columns={columns}
-                errorMessage={errorMessage}
-                maybeData={maybeResult}
-                sorting_state={[
-                    {
-                        id: "block_signed_at",
-                        desc: true,
-                    },
-                ]}
-            />
-        </div>
+        <TableList<ExchangeTransaction>
+            columns={columns}
+            errorMessage={errorMessage}
+            maybeData={maybeResult}
+            sorting_state={[
+                {
+                    id: "block_signed_at",
+                    desc: true,
+                },
+            ]}
+        />
     );
 };
diff --git a/src/components/Organisms/XYK/XYKPoolListView/XYKPoolListView.tsx b/src/components/Organisms/XYK/XYKPoolListView/XYKPoolListView.tsx
index 8e424536..8fa0e7f0 100644
--- a/src/components/Organisms/XYK/XYKPoolListView/XYKPoolListView.tsx
+++ b/src/components/Organisms/XYK/XYKPoolListView/XYKPoolListView.tsx
@@ -34,20 +34,8 @@ export const XYKPoolListView: React.FC<XYKPoolListViewProps> = ({
     const { covalentClient } = useGoldRush();
     const [maybeResult, setResult] = useState<Option<Pool[]>>(None);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
-    const [windowWidth, setWindowWidth] = useState<number>(0);
     const [pagination, setPagination] = useState<Pagination | null>(null);
 
-    useEffect(() => {
-        setWindowWidth(window.innerWidth);
-        const handleResize = () => {
-            setWindowWidth(window.innerWidth);
-        };
-        window.addEventListener("resize", handleResize);
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, []);
-
     useEffect(() => {
         updateResult(null);
     }, [chain_name, dex_name, page_size]);
@@ -85,13 +73,11 @@ export const XYKPoolListView: React.FC<XYKPoolListViewProps> = ({
             id: "contract_name",
             accessorKey: "contract_name",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Pool"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<Pool>
+                    align="left"
+                    header={"Pool"}
+                    column={column}
+                />
             ),
             cell: ({ row }) => {
                 const token_0 = row.original.token_0;
@@ -99,7 +85,7 @@ export const XYKPoolListView: React.FC<XYKPoolListViewProps> = ({
                 const pool = `${token_0.contract_ticker_symbol}-${token_1.contract_ticker_symbol}`;
 
                 return (
-                    <div className="ml-4 flex items-center gap-3">
+                    <div className="flex items-center gap-3">
                         <div className="relative mr-2 flex">
                             <TokenAvatar
                                 size={GRK_SIZES.EXTRA_SMALL}
@@ -141,294 +127,145 @@ export const XYKPoolListView: React.FC<XYKPoolListViewProps> = ({
             id: "total_liquidity_quote",
             accessorKey: "total_liquidity_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Pool>
                     align="right"
-                    header_name={"Liquidity"}
+                    header={"Liquidity"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.total_liquidity_quote)}
+                </div>
+            ),
         },
         {
             id: "volume_24h_quote",
             accessorKey: "volume_24h_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Pool>
                     align="right"
-                    header_name={"Volume (24hrs)"}
+                    header={"Volume (24 hours)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.volume_24h_quote)}
+                </div>
+            ),
         },
         {
             id: "volume_7d_quote",
             accessorKey: "volume_7d_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Pool>
                     align="right"
-                    header_name={"Volume (7d)"}
+                    header={"Volume (7 days)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_7d_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.volume_7d_quote)}
+                </div>
+            ),
         },
         {
             id: "quote_rate",
             accessorKey: "quote_rate",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Pool>
                     align="right"
-                    header_name={"Quote Rate"}
+                    header={"Quote Rate"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        {" "}
-                        {prettifyCurrency(
-                            row.getValue("quote_rate"),
-                            2,
-                            "USD",
-                            true
-                        )}{" "}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(
+                        row.getValue("quote_rate"),
+                        2,
+                        "USD",
+                        true
+                    )}
+                </div>
+            ),
         },
         {
             id: "fee_24h_quote",
             accessorKey: "fee_24h_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Pool>
                     align="right"
-                    header_name={"Fees (24hrs)"}
+                    header={"Fees (24 hours)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.fee_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.fee_24h_quote)}
+                </div>
+            ),
         },
         {
             id: "annualized_fee",
             accessorKey: "annualized_fee",
             header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"1y Fees / Liquidity"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const valueFormatted = calculateFeePercentage(
-                    +row.original.annualized_fee
-                );
-
-                return (
-                    <div
-                        className={`text-right ${
-                            parseFloat(row.original.annualized_fee.toString()) >
-                                0 && "text-green-600"
-                        }`}
-                    >
-                        {valueFormatted}
-                    </div>
-                );
-            },
-        },
-        {
-            id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                    className="cursor-pointer"
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Pool
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
-        },
-    ];
-
-    const mobile_columns: ColumnDef<Pool>[] = [
-        {
-            id: "contract_name",
-            accessorKey: "contract_name",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="left"
-                    header_name={"Token"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const token_0 = row.original.token_0;
-                const token_1 = row.original.token_1;
-                const pool = `${token_0.contract_ticker_symbol}/${token_1.contract_ticker_symbol}`;
-
-                return (
-                    <div className="flex items-center gap-3">
-                        <div className="relative mr-2 flex">
-                            <TokenAvatar
-                                size={GRK_SIZES.EXTRA_SMALL}
-                                token_url={token_0.logo_url}
-                            />
-                            <div className="absolute left-4">
-                                <TokenAvatar
-                                    size={GRK_SIZES.EXTRA_SMALL}
-                                    token_url={token_1.logo_url}
-                                />
-                            </div>
-                        </div>
-
-                        <div className="flex flex-col">
-                            {on_pool_click ? (
-                                <a
-                                    className="cursor-pointer hover:opacity-75"
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {pool ? pool : ""}
-                                </a>
-                            ) : (
-                                <label className="text-base">
-                                    {pool ? pool : ""}
-                                </label>
-                            )}
-                        </div>
-                    </div>
-                );
-            },
-        },
-        {
-            id: "total_liquidity_quote",
-            accessorKey: "total_liquidity_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Pool>
                     align="right"
-                    header_name={"Liquidity"}
+                    header={"1 year Fees / Liquidity"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
-        },
-        {
-            id: "total_volume_24h_quote",
-            accessorKey: "total_volume_24h_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Volume (24hrs)"}
-                    column={column}
-                />
+            cell: ({ row }) => (
+                <div
+                    className={`text-right ${
+                        parseFloat(row.original.annualized_fee.toString()) >
+                            0 && "text-green-600"
+                    }`}
+                >
+                    {calculateFeePercentage(+row.original.annualized_fee)}
+                </div>
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
         },
         {
             id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Pool
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="ml-auto  ">
+                                <span className="sr-only">Open menu</span>
+                                <IconWrapper icon_class_name="expand_more" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem
+                                onClick={() => {
+                                    if (on_pool_click) {
+                                        on_pool_click(row.original.exchange);
+                                    }
+                                }}
+                                className="cursor-pointer"
+                            >
+                                <IconWrapper
+                                    icon_class_name="swap_horiz"
+                                    class_name="mr-2"
+                                />{" "}
+                                View Pool
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            ),
         },
     ];
 
     return (
         <TableList<Pool>
-            columns={windowWidth < 700 ? mobile_columns : columns}
+            columns={columns}
             errorMessage={errorMessage}
             maybeData={maybeResult}
             sorting_state={[
diff --git a/src/components/Organisms/XYK/XYKPoolTransactionsListView/XYKPoolTransactionsListView.tsx b/src/components/Organisms/XYK/XYKPoolTransactionsListView/XYKPoolTransactionsListView.tsx
index d4268778..60da4cb2 100644
--- a/src/components/Organisms/XYK/XYKPoolTransactionsListView/XYKPoolTransactionsListView.tsx
+++ b/src/components/Organisms/XYK/XYKPoolTransactionsListView/XYKPoolTransactionsListView.tsx
@@ -63,29 +63,24 @@ export const XYKPoolTransactionsListView: React.FC<
     const columns: ColumnDef<ExchangeTransaction>[] = [
         {
             accessorKey: "block_signed_at",
+            id: "block_signed_at",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Time"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<ExchangeTransaction>
+                    align="left"
+                    header={"Signed at"}
+                    column={column}
+                />
             ),
-            cell: ({ row }) => {
-                const t = row.getValue("block_signed_at") as string;
-
-                return (
-                    <div className="ml-4">{timestampParser(t, "relative")}</div>
-                );
-            },
+            cell: ({ row }) =>
+                timestampParser(row.getValue("block_signed_at"), "relative"),
         },
         {
             accessorKey: "act",
+            id: "act",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Transaction type"}
+                    header={"Transaction Type"}
                     column={column}
                 />
             ),
@@ -158,26 +153,24 @@ export const XYKPoolTransactionsListView: React.FC<
             },
         },
         {
-            id: "total_quote",
             accessorKey: "total_quote",
+            id: "total_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Total value"}
+                    header={"Total value"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return <>{row.original.pretty_total_quote}</>;
-            },
+            cell: ({ row }) => row.original.pretty_total_quote,
         },
         {
-            id: "amount_0",
             accessorKey: "amount_0",
+            id: "amount_0",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
@@ -214,12 +207,12 @@ export const XYKPoolTransactionsListView: React.FC<
             },
         },
         {
-            id: "amount_1",
             accessorKey: "amount_1",
+            id: "amount_1",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
diff --git a/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx b/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
index 682462e4..f51e3c8f 100644
--- a/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
+++ b/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
@@ -35,18 +35,6 @@ export const XYKTokenListView: React.FC<XYKTokenListViewProps> = ({
     const [maybeResult, setResult] = useState<Option<TokenV2Volume[]>>(None);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [pagination, setPagination] = useState<Pagination | null>(null);
-    const [windowWidth, setWindowWidth] = useState<number>(0);
-
-    useEffect(() => {
-        setWindowWidth(window.innerWidth);
-        const handleResize = () => {
-            setWindowWidth(window.innerWidth);
-        };
-        window.addEventListener("resize", handleResize);
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, []);
 
     useEffect(() => {
         updateResult(null);
@@ -86,56 +74,52 @@ export const XYKTokenListView: React.FC<XYKTokenListViewProps> = ({
             id: "contract_name",
             accessorKey: "contract_name",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Token"}
-                        column={column}
+                <TableHeaderSorting<TokenV2Volume>
+                    align="left"
+                    header={"Token"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <div className="flex items-center gap-3">
+                    <TokenAvatar
+                        size={GRK_SIZES.EXTRA_SMALL}
+                        token_url={row.original.logo_url}
                     />
+                    <div className="flex flex-col">
+                        {on_token_click ? (
+                            <a
+                                className="cursor-pointer hover:opacity-75"
+                                onClick={() => {
+                                    if (on_token_click) {
+                                        on_token_click(
+                                            row.original.contract_address
+                                        );
+                                    }
+                                }}
+                            >
+                                {row.original.contract_name
+                                    ? row.original.contract_name
+                                    : ""}
+                            </a>
+                        ) : (
+                            <label className="text-base">
+                                {row.original.contract_name
+                                    ? row.original.contract_name
+                                    : ""}
+                            </label>
+                        )}
+                    </div>
                 </div>
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="ml-4 flex items-center gap-3">
-                        <TokenAvatar
-                            size={GRK_SIZES.EXTRA_SMALL}
-                            token_url={row.original.logo_url}
-                        />
-                        <div className="flex flex-col">
-                            {on_token_click ? (
-                                <a
-                                    className="cursor-pointer hover:opacity-75"
-                                    onClick={() => {
-                                        if (on_token_click) {
-                                            on_token_click(
-                                                row.original.contract_address
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {row.original.contract_name
-                                        ? row.original.contract_name
-                                        : ""}
-                                </a>
-                            ) : (
-                                <label className="text-base">
-                                    {row.original.contract_name
-                                        ? row.original.contract_name
-                                        : ""}
-                                </label>
-                            )}
-                        </div>
-                    </div>
-                );
-            },
         },
         {
             id: "contract_ticker_symbol",
             accessorKey: "contract_ticker_symbol",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<TokenV2Volume>
                     align="right"
-                    header_name={"Symbol"}
+                    header={"Symbol"}
                     column={column}
                 />
             ),
@@ -151,242 +135,112 @@ export const XYKTokenListView: React.FC<XYKTokenListViewProps> = ({
             id: "total_liquidity_quote",
             accessorKey: "total_liquidity_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<TokenV2Volume>
                     align="right"
-                    header_name={"Liquidity"}
+                    header={"Liquidity"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.total_liquidity_quote)}
+                </div>
+            ),
         },
         {
             id: "total_volume_24h_quote",
             accessorKey: "total_volume_24h_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<TokenV2Volume>
                     align="right"
-                    header_name={"Volume (24hrs)"}
+                    header={"Volume (24hrs)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.total_volume_24h_quote)}
+                </div>
+            ),
         },
         {
             id: "quote_rate",
             accessorKey: "quote_rate",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<TokenV2Volume>
                     align="right"
-                    header_name={"Quote Rate"}
+                    header={"Quote Rate"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        {" "}
-                        {prettifyCurrency(
-                            row.getValue("quote_rate"),
-                            2,
-                            "USD",
-                            true
-                        )}{" "}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(
+                        row.getValue("quote_rate"),
+                        2,
+                        "USD",
+                        true
+                    )}{" "}
+                </div>
+            ),
         },
         {
             id: "quote_rate_24h",
             accessorKey: "quote_rate_24h",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<TokenV2Volume>
                     align="right"
-                    header_name={"Price Change (24hrs)"}
+                    header={"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 }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_token_click) {
-                                            on_token_click(
-                                                row.original.contract_address
-                                            );
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Token
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
-        },
-    ];
-
-    const mobile_columns: ColumnDef<TokenV2Volume>[] = [
-        {
-            id: "contract_name",
-            accessorKey: "contract_name",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="left"
-                    header_name={"Token"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                return (
-                    <div className="flex items-center gap-3">
-                        <TokenAvatar
-                            size={GRK_SIZES.EXTRA_SMALL}
-                            token_url={row.original.logo_url}
-                        />
-                        <div className="flex flex-col">
-                            {on_token_click ? (
-                                <a
-                                    className="cursor-pointer hover:opacity-75"
-                                    onClick={() => {
-                                        if (on_token_click) {
-                                            on_token_click(
-                                                row.original.contract_address
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {row.original.contract_name
-                                        ? row.original.contract_name
-                                        : ""}
-                                </a>
-                            ) : (
-                                <label className="text-base">
-                                    {row.original.contract_name
-                                        ? row.original.contract_name
-                                        : ""}
-                                </label>
-                            )}
-                        </div>
-                    </div>
-                );
-            },
-        },
-        {
-            id: "total_liquidity_quote",
-            accessorKey: "total_liquidity_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Liquidity"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
-        },
-        {
-            id: "total_volume_24h_quote",
-            accessorKey: "total_volume_24h_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Volume (24hrs)"}
-                    column={column}
-                />
+            cell: ({ row }) => (
+                <div className="text-right">
+                    <BalancePriceDelta
+                        numerator={row.original.quote_rate_24h}
+                        denominator={row.original.quote_rate}
+                    />
+                </div>
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
         },
         {
             id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_token_click) {
-                                            on_token_click(
-                                                row.original.contract_address
-                                            );
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Token
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="ml-auto  ">
+                                <span className="sr-only">Open menu</span>
+                                <IconWrapper icon_class_name="expand_more" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem
+                                onClick={() => {
+                                    if (on_token_click) {
+                                        on_token_click(
+                                            row.original.contract_address
+                                        );
+                                    }
+                                }}
+                            >
+                                <IconWrapper
+                                    icon_class_name="swap_horiz"
+                                    class_name="mr-2"
+                                />{" "}
+                                View Token
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            ),
         },
     ];
 
     return (
         <TableList<TokenV2Volume>
-            columns={windowWidth < 700 ? mobile_columns : columns}
+            columns={columns}
             errorMessage={errorMessage}
             maybeData={maybeResult}
             sorting_state={[
diff --git a/src/components/Organisms/XYK/XYKTokenPoolListView/XYKTokenPoolListView.tsx b/src/components/Organisms/XYK/XYKTokenPoolListView/XYKTokenPoolListView.tsx
index 370e98da..f9a13fef 100644
--- a/src/components/Organisms/XYK/XYKTokenPoolListView/XYKTokenPoolListView.tsx
+++ b/src/components/Organisms/XYK/XYKTokenPoolListView/XYKTokenPoolListView.tsx
@@ -76,13 +76,11 @@ export const XYKTokenPoolListView: React.FC<XYKTokenPoolListViewProps> = ({
             id: "contract_name",
             accessorKey: "contract_name",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Pool"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<PoolsDexDataItem>
+                    align="left"
+                    header={"Pool"}
+                    column={column}
+                />
             ),
             cell: ({ row }) => {
                 const token_0 = row.original.token_0;
@@ -90,7 +88,7 @@ export const XYKTokenPoolListView: React.FC<XYKTokenPoolListViewProps> = ({
                 const pool = `${token_0.contract_ticker_symbol}-${token_1.contract_ticker_symbol}`;
 
                 return (
-                    <div className="ml-4 flex items-center gap-3">
+                    <div className="flex items-center gap-3">
                         <div className="relative mr-2 flex">
                             <TokenAvatar
                                 size={GRK_SIZES.EXTRA_SMALL}
@@ -132,303 +130,131 @@ export const XYKTokenPoolListView: React.FC<XYKTokenPoolListViewProps> = ({
             id: "total_liquidity_quote",
             accessorKey: "total_liquidity_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Liquidity"}
+                    header={"Liquidity"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.total_liquidity_quote)}
+                </div>
+            ),
         },
         {
             id: "volume_24h_quote",
             accessorKey: "volume_24h_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Volume (24hrs)"}
+                    header={"Volume (24hrs)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.volume_24h_quote)}
+                </div>
+            ),
         },
         {
             id: "volume_7d_quote",
             accessorKey: "volume_7d_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Volume (7d)"}
+                    header={"Volume (7d)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_7d_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.volume_7d_quote)}
+                </div>
+            ),
         },
         {
             id: "quote_rate",
             accessorKey: "quote_rate",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Quote Rate"}
+                    header={"Quote Rate"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        {" "}
-                        {prettifyCurrency(
-                            row.getValue("quote_rate"),
-                            2,
-                            "USD",
-                            true
-                        )}{" "}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(
+                        row.getValue("quote_rate"),
+                        2,
+                        "USD",
+                        true
+                    )}
+                </div>
+            ),
         },
         {
             id: "fee_24h_quote",
             accessorKey: "fee_24h_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Fees (24hrs)"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.fee_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
-        },
-        // {
-        //     id: "annualized_fee",
-        //     accessorKey: "annualized_fee",
-        //     header: ({ column }) => (
-        //         <TableHeaderSorting
-        //             align="right"
-        //             header_name={"1y Fees / Liquidity"}
-        //             column={column}
-        //         />
-        //     ),
-        //     cell: ({ row }) => {
-        //         const valueFormatted = calculateFeePercentage(
-        //             row.original.annualized_fee
-        //         );
-
-        //         return (
-        //             <div
-        //                 className={`text-right ${
-        //                     parseFloat(row.original.annualized_fee) > 0 &&
-        //                     "text-green-600"
-        //                 }`}
-        //             >
-        //                 {valueFormatted}
-        //             </div>
-        //         );
-        //     },
-        // },
-        {
-            id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Pool
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
-        },
-    ];
-
-    const mobile_columns: ColumnDef<PoolsDexDataItem>[] = [
-        {
-            id: "contract_name",
-            accessorKey: "contract_name",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="left"
-                    header_name={"Token"}
+                    header={"Fees (24hrs)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const token_0 = row.original.token_0;
-                const token_1 = row.original.token_1;
-                const pool = `${token_0.contract_ticker_symbol}/${token_1.contract_ticker_symbol}`;
-
-                return (
-                    <div className="flex items-center gap-3">
-                        <div className="relative mr-2 flex">
-                            <TokenAvatar
-                                size={GRK_SIZES.EXTRA_SMALL}
-                                token_url={token_0.logo_url}
-                            />
-                            <div className="absolute left-4">
-                                <TokenAvatar
-                                    size={GRK_SIZES.EXTRA_SMALL}
-                                    token_url={token_1.logo_url}
-                                />
-                            </div>
-                        </div>
-
-                        <div className="flex flex-col">
-                            {on_pool_click ? (
-                                <a
-                                    className="cursor-pointer hover:opacity-75"
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {pool ? pool : ""}
-                                </a>
-                            ) : (
-                                <label className="text-base">
-                                    {pool ? pool : ""}
-                                </label>
-                            )}
-                        </div>
-                    </div>
-                );
-            },
-        },
-        {
-            id: "total_liquidity_quote",
-            accessorKey: "total_liquidity_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Liquidity"}
-                    column={column}
-                />
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.fee_24h_quote)}
+                </div>
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
-        },
-        {
-            id: "total_volume_24h_quote",
-            accessorKey: "total_volume_24h_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Volume (24hrs)"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
         },
         {
             id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Pool
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="ml-auto  ">
+                                <span className="sr-only">Open menu</span>
+                                <IconWrapper icon_class_name="expand_more" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem
+                                onClick={() => {
+                                    if (on_pool_click) {
+                                        on_pool_click(row.original.exchange);
+                                    }
+                                }}
+                            >
+                                <IconWrapper
+                                    icon_class_name="swap_horiz"
+                                    class_name="mr-2"
+                                />{" "}
+                                View Pool
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            ),
         },
     ];
 
     return (
-        <div className="space-y-4">
-            <TableList<PoolsDexDataItem>
-                columns={windowWidth < 700 ? mobile_columns : columns}
-                errorMessage={errorMessage}
-                maybeData={maybeResult}
-                sorting_state={[
-                    {
-                        id: "total_liquidity_quote",
-                        desc: true,
-                    },
-                ]}
-            />
-        </div>
+        <TableList<PoolsDexDataItem>
+            columns={columns}
+            errorMessage={errorMessage}
+            maybeData={maybeResult}
+            sorting_state={[
+                {
+                    id: "total_liquidity_quote",
+                    desc: true,
+                },
+            ]}
+        />
     );
 };
diff --git a/src/components/Organisms/XYK/XYKTokenTransactionsListView/XYKTokenTransactionsListView.tsx b/src/components/Organisms/XYK/XYKTokenTransactionsListView/XYKTokenTransactionsListView.tsx
index f74325cb..39a807fd 100644
--- a/src/components/Organisms/XYK/XYKTokenTransactionsListView/XYKTokenTransactionsListView.tsx
+++ b/src/components/Organisms/XYK/XYKTokenTransactionsListView/XYKTokenTransactionsListView.tsx
@@ -64,29 +64,24 @@ export const XYKTokenTransactionsListView: React.FC<
     const columns: ColumnDef<ExchangeTransaction>[] = [
         {
             accessorKey: "block_signed_at",
+            id: "block_signed_at",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Time"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<ExchangeTransaction>
+                    align="left"
+                    header={"Signed at"}
+                    column={column}
+                />
             ),
-            cell: ({ row }) => {
-                const t = row.getValue("block_signed_at") as string;
-
-                return (
-                    <div className="ml-4">{timestampParser(t, "relative")}</div>
-                );
-            },
+            cell: ({ row }) =>
+                timestampParser(row.getValue("block_signed_at"), "relative"),
         },
         {
             accessorKey: "act",
+            id: "act",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Transaction type"}
+                    header={"Transaction type"}
                     column={column}
                 />
             ),
@@ -159,26 +154,24 @@ export const XYKTokenTransactionsListView: React.FC<
             },
         },
         {
-            id: "total_quote",
             accessorKey: "total_quote",
+            id: "total_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Total value"}
+                    header={"Total value"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return <>{row.original.pretty_total_quote}</>;
-            },
+            cell: ({ row }) => row.original.pretty_total_quote,
         },
         {
-            id: "amount_0",
             accessorKey: "amount_0",
+            id: "amount_0",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
@@ -215,12 +208,12 @@ export const XYKTokenTransactionsListView: React.FC<
             },
         },
         {
-            id: "amount_1",
             accessorKey: "amount_1",
+            id: "amount_1",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
diff --git a/src/components/Organisms/XYK/XYKWalletPoolListView/XYKWalletPoolListView.tsx b/src/components/Organisms/XYK/XYKWalletPoolListView/XYKWalletPoolListView.tsx
index c0c09e89..d69f4b9a 100644
--- a/src/components/Organisms/XYK/XYKWalletPoolListView/XYKWalletPoolListView.tsx
+++ b/src/components/Organisms/XYK/XYKWalletPoolListView/XYKWalletPoolListView.tsx
@@ -33,7 +33,6 @@ export const XYKWalletPoolListView: React.FC<XYKWalletPoolListViewProps> = ({
     const { covalentClient } = useGoldRush();
     const [maybeResult, setResult] = useState<Option<PoolsDexDataItem[]>>(None);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
-    const [windowWidth, setWindowWidth] = useState<number>(0);
 
     useEffect(() => {
         (async () => {
@@ -60,29 +59,16 @@ export const XYKWalletPoolListView: React.FC<XYKWalletPoolListViewProps> = ({
         })();
     }, [chain_name, dex_name, wallet_address]);
 
-    useEffect(() => {
-        setWindowWidth(window.innerWidth);
-        const handleResize = () => {
-            setWindowWidth(window.innerWidth);
-        };
-        window.addEventListener("resize", handleResize);
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, []);
-
     const columns: ColumnDef<PoolsDexDataItem>[] = [
         {
             id: "contract_name",
             accessorKey: "contract_name",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Pool"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<PoolsDexDataItem>
+                    align="left"
+                    header={"Pool"}
+                    column={column}
+                />
             ),
             cell: ({ row }) => {
                 const token_0 = row.original.token_0;
@@ -90,7 +76,7 @@ export const XYKWalletPoolListView: React.FC<XYKWalletPoolListViewProps> = ({
                 const pool = `${token_0.contract_ticker_symbol}-${token_1.contract_ticker_symbol}`;
 
                 return (
-                    <div className="ml-4 flex items-center gap-3">
+                    <div className="flex items-center gap-3">
                         <div className="relative mr-2 flex">
                             <TokenAvatar
                                 size={GRK_SIZES.EXTRA_SMALL}
@@ -132,87 +118,78 @@ export const XYKWalletPoolListView: React.FC<XYKWalletPoolListViewProps> = ({
             id: "total_liquidity_quote",
             accessorKey: "total_liquidity_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Liquidity"}
+                    header={"Liquidity"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.total_liquidity_quote)}
+                </div>
+            ),
         },
         {
             id: "volume_24h_quote",
             accessorKey: "volume_24h_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Volume (24hrs)"}
+                    header={"Volume (24hrs)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.volume_24h_quote)}
+                </div>
+            ),
         },
         {
             id: "volume_7d_quote",
             accessorKey: "volume_7d_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Volume (7d)"}
+                    header={"Volume (7d)"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_7d_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(row.original.volume_7d_quote)}
+                </div>
+            ),
         },
         {
             id: "quote_rate",
             accessorKey: "quote_rate",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Quote Rate"}
+                    header={"Quote Rate"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        {" "}
-                        {prettifyCurrency(
-                            row.getValue("quote_rate"),
-                            2,
-                            "USD",
-                            true
-                        )}{" "}
-                    </div>
-                );
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(
+                        row.getValue("quote_rate"),
+                        2,
+                        "USD",
+                        true
+                    )}
+                </div>
+            ),
         },
         {
             id: "fee_24h_quote",
             accessorKey: "fee_24h_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<PoolsDexDataItem>
                     align="right"
-                    header_name={"Fees (24hrs)"}
+                    header={"Fees (24hrs)"}
                     column={column}
                 />
             ),
@@ -261,138 +238,10 @@ export const XYKWalletPoolListView: React.FC<XYKWalletPoolListViewProps> = ({
         },
     ];
 
-    const mobile_columns: ColumnDef<PoolsDexDataItem>[] = [
-        {
-            id: "contract_name",
-            accessorKey: "contract_name",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="left"
-                    header_name={"Token"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const token_0 = row.original.token_0;
-                const token_1 = row.original.token_1;
-                const pool = `${token_0.contract_ticker_symbol}/${token_1.contract_ticker_symbol}`;
-
-                return (
-                    <div className="flex items-center gap-3">
-                        <div className="relative mr-2 flex">
-                            <TokenAvatar
-                                size={GRK_SIZES.EXTRA_SMALL}
-                                token_url={token_0.logo_url}
-                            />
-                            <div className="absolute left-4">
-                                <TokenAvatar
-                                    size={GRK_SIZES.EXTRA_SMALL}
-                                    token_url={token_1.logo_url}
-                                />
-                            </div>
-                        </div>
-
-                        <div className="flex flex-col">
-                            {on_pool_click ? (
-                                <a
-                                    className="cursor-pointer hover:opacity-75"
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {pool ? pool : ""}
-                                </a>
-                            ) : (
-                                <label className="text-base">
-                                    {pool ? pool : ""}
-                                </label>
-                            )}
-                        </div>
-                    </div>
-                );
-            },
-        },
-        {
-            id: "total_liquidity_quote",
-            accessorKey: "total_liquidity_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Liquidity"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.total_liquidity_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
-        },
-        {
-            id: "total_volume_24h_quote",
-            accessorKey: "total_volume_24h_quote",
-            header: ({ column }) => (
-                <TableHeaderSorting
-                    align="right"
-                    header_name={"Volume (24hrs)"}
-                    column={column}
-                />
-            ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.volume_24h_quote
-                );
-
-                return <div className="text-right">{valueFormatted}</div>;
-            },
-        },
-        {
-            id: "actions",
-            cell: ({ row }) => {
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        if (on_pool_click) {
-                                            on_pool_click(
-                                                row.original.exchange
-                                            );
-                                        }
-                                    }}
-                                >
-                                    <IconWrapper
-                                        icon_class_name="swap_horiz"
-                                        class_name="mr-2"
-                                    />{" "}
-                                    View Pool
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
-        },
-    ];
-
     return (
         <div className="space-y-4">
             <TableList<PoolsDexDataItem>
-                columns={windowWidth < 700 ? mobile_columns : columns}
+                columns={columns}
                 errorMessage={errorMessage}
                 maybeData={maybeResult}
                 sorting_state={[
diff --git a/src/components/Organisms/XYK/XYKWalletPositionsListView/XYKWalletPositionsListView.tsx b/src/components/Organisms/XYK/XYKWalletPositionsListView/XYKWalletPositionsListView.tsx
index fae77cd6..ae20899d 100644
--- a/src/components/Organisms/XYK/XYKWalletPositionsListView/XYKWalletPositionsListView.tsx
+++ b/src/components/Organisms/XYK/XYKWalletPositionsListView/XYKWalletPositionsListView.tsx
@@ -59,13 +59,11 @@ export const XYKWalletPositionsListView: React.FC<
             id: "contract_name",
             accessorKey: "contract_name",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Pool"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<UniswapLikeBalanceItem>
+                    align="left"
+                    header={"Pool"}
+                    column={column}
+                />
             ),
             cell: ({ row }) => {
                 const token_0 = row.original.token_0;
@@ -73,7 +71,7 @@ export const XYKWalletPositionsListView: React.FC<
                 const pool = `${token_0.contract_ticker_symbol}-${token_1.contract_ticker_symbol}`;
 
                 return (
-                    <div className="ml-4 flex items-center gap-3">
+                    <div className="flex items-center gap-3">
                         <div className="relative mr-2 flex">
                             <TokenAvatar
                                 size={GRK_SIZES.EXTRA_SMALL}
@@ -116,26 +114,27 @@ export const XYKWalletPositionsListView: React.FC<
             id: "total_liquidity_quote",
             accessorKey: "total_liquidity_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<UniswapLikeBalanceItem>
                     align="right"
-                    header_name={"Liquidity"}
+                    header={"Liquidity"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                const valueFormatted = prettifyCurrency(
-                    row.original.token_0.quote + row.original.token_1.quote
-                );
-                return <div className="text-right">{valueFormatted}</div>;
-            },
+            cell: ({ row }) => (
+                <div className="text-right">
+                    {prettifyCurrency(
+                        row.original.token_0.quote + row.original.token_1.quote
+                    )}
+                </div>
+            ),
         },
         {
             id: "token_0",
             accessorKey: "token_0",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<UniswapLikeBalanceItem>
                     align="right"
-                    header_name={"Token amount"}
+                    header={"Token amount"}
                     column={column}
                 />
             ),
@@ -161,9 +160,9 @@ export const XYKWalletPositionsListView: React.FC<
             id: "token_1",
             accessorKey: "token_1",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<UniswapLikeBalanceItem>
                     align="right"
-                    header_name={"Token amount"}
+                    header={"Token amount"}
                     column={column}
                 />
             ),
diff --git a/src/components/Organisms/XYK/XYKWalletTransactionsListView/XYKWalletTransactionsListView.tsx b/src/components/Organisms/XYK/XYKWalletTransactionsListView/XYKWalletTransactionsListView.tsx
index 4c98ba8e..84b9e02c 100644
--- a/src/components/Organisms/XYK/XYKWalletTransactionsListView/XYKWalletTransactionsListView.tsx
+++ b/src/components/Organisms/XYK/XYKWalletTransactionsListView/XYKWalletTransactionsListView.tsx
@@ -62,30 +62,25 @@ export const XYKWalletTransactionsListView: React.FC<
 
     const columns: ColumnDef<ExchangeTransaction>[] = [
         {
+            id: "block_signed_at",
             accessorKey: "block_signed_at",
             header: ({ column }) => (
-                <div className="ml-4">
-                    <TableHeaderSorting
-                        align="left"
-                        header_name={"Time"}
-                        column={column}
-                    />
-                </div>
+                <TableHeaderSorting<ExchangeTransaction>
+                    align="left"
+                    header={"Time"}
+                    column={column}
+                />
             ),
-            cell: ({ row }) => {
-                const t = row.getValue("block_signed_at") as string;
-
-                return (
-                    <div className="ml-4">{timestampParser(t, "relative")}</div>
-                );
-            },
+            cell: ({ row }) =>
+                timestampParser(row.getValue("block_signed_at"), "relative"),
         },
         {
+            id: "act",
             accessorKey: "act",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Transaction type"}
+                    header={"Transaction type"}
                     column={column}
                 />
             ),
@@ -161,23 +156,21 @@ export const XYKWalletTransactionsListView: React.FC<
             id: "total_quote",
             accessorKey: "total_quote",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Total value"}
+                    header={"Total value"}
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return <>{row.original.pretty_total_quote}</>;
-            },
+            cell: ({ row }) => row.original.pretty_total_quote,
         },
         {
             id: "amount_0",
             accessorKey: "amount_0",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
@@ -217,9 +210,9 @@ export const XYKWalletTransactionsListView: React.FC<
             id: "amount_1",
             accessorKey: "amount_1",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<ExchangeTransaction>
                     align="left"
-                    header_name={"Token Amount"}
+                    header={"Token Amount"}
                     column={column}
                 />
             ),
diff --git a/src/components/Shared/IconWrapper.tsx b/src/components/Shared/IconWrapper.tsx
index 9c2f4ac4..b8f69c82 100644
--- a/src/components/Shared/IconWrapper.tsx
+++ b/src/components/Shared/IconWrapper.tsx
@@ -8,7 +8,7 @@ export const IconWrapper: React.FC<IconWrapperProps> = ({
     icon_type,
 }) => {
     return (
-        <div
+        <span
             role={"presentation"}
             className={`flex items-center justify-center ${class_name ?? ""}`}
             onClick={on_click}
@@ -20,6 +20,6 @@ export const IconWrapper: React.FC<IconWrapperProps> = ({
             >
                 {icon_class_name}
             </span>
-        </div>
+        </span>
     );
 };
diff --git a/src/components/Shared/TableHeaderSorting.tsx b/src/components/Shared/TableHeaderSorting.tsx
index 1ac3ba4c..7017cd0d 100644
--- a/src/components/Shared/TableHeaderSorting.tsx
+++ b/src/components/Shared/TableHeaderSorting.tsx
@@ -1,12 +1,9 @@
 import { IconWrapper } from ".";
 import { type TableHeaderSortingProps } from "@/utils/types/shared.types";
 
-export const TableHeaderSorting: React.FC<TableHeaderSortingProps> = ({
-    header_name,
-    column,
-    align,
-    icon = true,
-}) => {
+export const TableHeaderSorting: <T>(
+    props: TableHeaderSortingProps<T>
+) => React.ReactNode = ({ header, column, align, icon = true }) => {
     const sortedIcon =
         column.getIsSorted() === "asc"
             ? "arrow_drop_up"
@@ -22,9 +19,8 @@ export const TableHeaderSorting: React.FC<TableHeaderSortingProps> = ({
                       ? "justify-center"
                       : ""
             }`}
-            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-            {header_name}
+            {header}
             {icon && (
                 <IconWrapper
                     icon_size={sortedIcon === "sort" ? "text-base" : ""}
diff --git a/src/components/Shared/TableList.tsx b/src/components/Shared/TableList.tsx
index 701b44f3..da7d6d6e 100644
--- a/src/components/Shared/TableList.tsx
+++ b/src/components/Shared/TableList.tsx
@@ -75,7 +75,15 @@ export const TableList: <T>(props: TableListProps<T>) => React.ReactNode = ({
                         <TableRow key={headerGroup.id}>
                             {headerGroup.headers.map((header) => {
                                 return (
-                                    <TableHead key={header.id}>
+                                    <TableHead
+                                        key={header.id}
+                                        onClick={() =>
+                                            header.column.toggleSorting(
+                                                header.column.getIsSorted() ===
+                                                    "asc"
+                                            )
+                                        }
+                                    >
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx
index 79b33c1c..6ee8cdad 100644
--- a/src/components/Shared/Transactions.tsx
+++ b/src/components/Shared/Transactions.tsx
@@ -28,9 +28,9 @@ export const Transactions: React.FC<TransactionsProps> = ({
             id: "tx_hash",
             accessorKey: "tx_hash",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Transaction>
                     align="left"
-                    header_name={"Transaction Hash"}
+                    header={"Transaction Hash"}
                     column={column}
                 />
             ),
@@ -65,9 +65,9 @@ export const Transactions: React.FC<TransactionsProps> = ({
             id: "block_height",
             accessorKey: "block_height",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Transaction>
                     align="left"
-                    header_name={"Block Height"}
+                    header={"Block Height"}
                     column={column}
                 />
             ),
@@ -79,9 +79,9 @@ export const Transactions: React.FC<TransactionsProps> = ({
             id: "block_signed_at",
             accessorKey: "block_signed_at",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Transaction>
                     align="left"
-                    header_name={"Age"}
+                    header={"Age"}
                     column={column}
                 />
             ),
@@ -100,9 +100,9 @@ export const Transactions: React.FC<TransactionsProps> = ({
             id: "from_address",
             accessorKey: "from_address",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Transaction>
                     align="left"
-                    header_name={"From"}
+                    header={"From"}
                     column={column}
                 />
             ),
@@ -120,9 +120,9 @@ export const Transactions: React.FC<TransactionsProps> = ({
             id: "to_address",
             accessorKey: "to_address",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Transaction>
                     align="left"
-                    header_name={"To"}
+                    header={"To"}
                     column={column}
                 />
             ),
@@ -140,9 +140,9 @@ export const Transactions: React.FC<TransactionsProps> = ({
             id: "value",
             accessorKey: "value",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Transaction>
                     align="right"
-                    header_name={"Value"}
+                    header={"Value"}
                     column={column}
                 />
             ),
@@ -164,9 +164,9 @@ export const Transactions: React.FC<TransactionsProps> = ({
             id: "fees_paid",
             accessorKey: "fees_paid",
             header: ({ column }) => (
-                <TableHeaderSorting
+                <TableHeaderSorting<Transaction>
                     align="right"
-                    header_name={"Fees Paid"}
+                    header={"Fees Paid"}
                     column={column}
                 />
             ),
diff --git a/src/utils/functions/timestamp-parser.ts b/src/utils/functions/timestamp-parser.ts
index 9f566abb..84b720e0 100644
--- a/src/utils/functions/timestamp-parser.ts
+++ b/src/utils/functions/timestamp-parser.ts
@@ -54,6 +54,10 @@ export const timestampParser = (
             const hoursDifference = currentTime.getHours() - _unix.getHours();
             const minutesDifference =
                 currentTime.getMinutes() - _unix.getMinutes();
+            const secondsDifference =
+                currentTime.getSeconds() - _unix.getSeconds();
+
+            console.log(currentTime, _unix);
 
             if (yearsDifference > 0) {
                 return `${yearsDifference} year${
@@ -73,6 +77,10 @@ export const timestampParser = (
                 return `${minutesDifference} minute${
                     minutesDifference > 1 ? "s" : ""
                 } ago`;
+            } else if (secondsDifference > 0) {
+                return `${secondsDifference} second${
+                    secondsDifference > 1 ? "s" : ""
+                } ago`;
             } else {
                 return `just now`;
             }
diff --git a/src/utils/types/shared.types.ts b/src/utils/types/shared.types.ts
index ef954b9c..c6aacae0 100644
--- a/src/utils/types/shared.types.ts
+++ b/src/utils/types/shared.types.ts
@@ -26,7 +26,7 @@ export interface CopyImageProps {
 export interface IconWrapperProps {
     class_name?: string;
     icon_class_name?: string;
-    on_click?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+    on_click?: (e?: React.MouseEvent) => void;
     icon_size?: string;
     icon_type?: string;
 }
@@ -45,9 +45,9 @@ export interface SkeletonTableProps {
     float?: "right" | "left";
 }
 
-export interface TableHeaderSortingProps {
-    header_name: string;
-    column: Column<any, unknown>;
+export interface TableHeaderSortingProps<T> {
+    header: string;
+    column: Column<T, unknown>;
     align: "left" | "right" | "center";
     icon?: boolean;
 }