1  import { ReactComponent as SortIcon } from "@assets/svg/files/sort.svg";
  2  import UpAmountIcon from "@assets/svg/files/up-amount-icon.svg";
  3  import DownAmountIcon from "@assets/svg/files/down-amount-icon.svg";
  4  import { SortingState, createColumnHelper } from "@tanstack/react-table";
  5  import { Transaction } from "@redux/models/AccountModels";
  6  import moment from "moment";
  7  import { getAddress, toFullDecimal } from "../../utils";
  8  import { useTranslation } from "react-i18next";
  9  import { TransactionTypeEnum } from "../../const";
 10  import { Fragment, useState } from "react";
 11  import { useAppSelector } from "@redux/Store";
 12  import CodeElement from "@components/TableCodeElement";
 13  
 14  export const TableHook = () => {
 15    const { t } = useTranslation();
 16  
 17    const [sorting, setSorting] = useState<SortingState>([]);
 18    const { selectedAccount, selectedTransaction } = useAppSelector(
 19      (state) => state.asset,
 20    );
 21    const columnHelper = createColumnHelper<Transaction>();
 22    const columns = [
 23      columnHelper.accessor((row) => row, {
 24        id: "type",
 25        cell: (info) => (
 26          <Fragment>
 27            {((selectedTransaction?.hash &&
 28              selectedTransaction?.hash === info.getValue().hash) ||
 29              (selectedTransaction?.idx &&
 30                selectedTransaction?.idx === info.getValue().idx)) && (
 31              <div className="absolute w-2 h-[4.05rem] left-0 bg-SelectRowColor"></div>
 32            )}
 33            <div className="flex w-full justify-center my-2 h-12">
 34              <div className="flex justify-center items-center p-2 rounded-md border border-BorderColorTwoLight dark:border-BorderColorTwo">
 35                <img
 36                  src={
 37                    getAddress(
 38                      info.getValue().type,
 39                      info.getValue().from || "",
 40                      info.getValue().fromSub || "",
 41                      selectedAccount?.address || "",
 42                      selectedAccount?.sub_account_id || "",
 43                    )
 44                      ? UpAmountIcon
 45                      : DownAmountIcon
 46                  }
 47                  alt=""
 48                />
 49              </div>
 50            </div>
 51          </Fragment>
 52        ),
 53        header: () => (
 54          <p className="flex w-full justify-center opacity-60 font-normal my-2">
 55            {t("type")}
 56          </p>
 57        ),
 58      }),
 59      columnHelper.accessor((row) => row, {
 60        id: "idx",
 61        cell: (info) => {
 62          return <CodeElement tx={info.getValue()} />;
 63        },
 64        header: () => (
 65          <p className="flex w-full justify-start opacity-60 font-normal my-2">
 66            {t("transactionID")}
 67          </p>
 68        ),
 69      }),
 70      columnHelper.accessor((row) => row.timestamp, {
 71        id: "timestamp",
 72        cell: (info) => (
 73          <div className="flex flex-col justify-center items-center my-2 w-full">
 74            <p>{moment(info.getValue()).format("M/DD/YYYY")}</p>
 75          </div>
 76        ),
 77        header: () => (
 78          <div className="flex flex-row opacity-60 justify-center items-center w-full gap-1 cursor-pointer">
 79            <p className="flex justify-center font-normal my-2">{t("date")}</p>
 80            <SortIcon className=" fill-PrimaryTextColorLight dark:fill-PrimaryTextColor" />
 81          </div>
 82        ),
 83      }),
 84      columnHelper.accessor((row) => row, {
 85        id: "amount",
 86        cell: (info) => {
 87          let isTo = getAddress(
 88            info.getValue().type,
 89            info.getValue().from || "",
 90            info.getValue().fromSub || "",
 91            selectedAccount?.address || "",
 92            selectedAccount?.sub_account_id || "",
 93          );
 94  
 95          return (
 96            <div className="flex flex-col justify-center items-end my-2 w-full pr-5">
 97              <p
 98                className={`text-right whitespace-nowrap ${
 99                  isTo ? "text-TextSendColor" : "text-TextReceiveColor"
100                }`}
101              >{`${isTo ? "-" : ""}${
102                info.getValue()?.type === TransactionTypeEnum.Enum.SEND
103                  ? toFullDecimal(
104                      Number(info.getValue()?.amount) /
105                        Math.pow(10, selectedAccount?.decimal || 8) +
106                        Number(selectedAccount?.transaction_fee),
107                      selectedAccount?.decimal || 8,
108                    )
109                  : toFullDecimal(
110                      Number(info.getValue()?.amount) /
111                        Math.pow(10, selectedAccount?.decimal || 8),
112                      selectedAccount?.decimal || 8,
113                    )
114              } ${info.getValue()?.symbol}`}</p>
115            </div>
116          );
117        },
118        header: () => (
119          <p className="flex w-full justify-end opacity-60 font-normal my-2 pr-5">
120            {t("amount")}
121          </p>
122        ),
123      }),
124    ];
125  
126    return { columns, sorting, setSorting };
127  };