1  import { AssetSymbolEnum } from "../const";
  2  import { getAddress, shortAddress } from "../utils";
  3  import { AccountHook } from "@pages/hooks/accountHook";
  4  import { useAppSelector } from "@redux/Store";
  5  import { Transaction } from "@redux/models/AccountModels";
  6  import { clsx } from "clsx";
  7  import { Fragment } from "react";
  8  import { useTranslation } from "react-i18next";
  9  
 10  interface CodeElementProps {
 11    tx: Transaction;
 12  }
 13  
 14  const CodeElement = ({ tx }: CodeElementProps) => {
 15    const { t } = useTranslation();
 16  
 17    const accId = clsx("text-SelectRowColor opacity-60");
 18    const { authClient } = AccountHook();
 19  
 20    const { selectedAccount, ICPSubaccounts, assets } = useAppSelector(
 21      (state) => state.asset,
 22    );
 23    const { contacts } = useAppSelector((state) => state.contacts);
 24  
 25    const isTo = getAddress(
 26      tx.type,
 27      tx.from || "",
 28      tx.fromSub || "",
 29      selectedAccount?.address || "",
 30      selectedAccount?.sub_account_id || "",
 31    );
 32    const hasSub =
 33      tx?.symbol !== AssetSymbolEnum.Enum.ICP ||
 34      ICPSubaccounts.find((sub) => sub.legacy === (isTo ? tx.to : tx.from));
 35    const isICPWithSub =
 36      tx?.symbol === AssetSymbolEnum.Enum.ICP &&
 37      ICPSubaccounts.find((sub) => sub.legacy === (isTo ? tx.to : tx.from));
 38  
 39    let iAm = false;
 40    let hasSubName = false;
 41    let subName = "";
 42    if (tx?.symbol !== AssetSymbolEnum.Enum.ICP) {
 43      iAm = authClient === (isTo ? tx.to || "" : tx.from || "");
 44      if (iAm) {
 45        const symbolAsst = assets.find((asst) => asst.tokenSymbol === tx?.symbol)
 46          ?.subAccounts;
 47        if (symbolAsst && symbolAsst?.length > 0) {
 48          const subAcc = isTo ? tx.toSub || "0" : tx.fromSub || "0";
 49          const subNameAux = symbolAsst.find((sa) => sa.sub_account_id === subAcc)
 50            ?.name;
 51          if (subNameAux && subNameAux != "-") {
 52            hasSubName = true;
 53            subName = subNameAux;
 54          }
 55        }
 56      }
 57    } else {
 58      iAm = isICPWithSub ? true : false;
 59      if (iAm) {
 60        const symbolAsst = assets.find((asst) => asst.tokenSymbol === tx?.symbol)
 61          ?.subAccounts;
 62        if (symbolAsst && symbolAsst?.length > 0) {
 63          const subAcc = ICPSubaccounts.find(
 64            (sub) => sub.legacy === (isTo ? tx.to : tx.from),
 65          );
 66          if (subAcc) {
 67            const subNameAux = symbolAsst.find(
 68              (sa) => sa.sub_account_id === subAcc.sub_account_id,
 69            )?.name;
 70            if (subNameAux && subNameAux != "-") {
 71              hasSubName = true;
 72              subName = subNameAux;
 73            }
 74          }
 75        }
 76      }
 77    }
 78  
 79    let hasContactName = false;
 80    let contactName = "";
 81    if (!iAm) {
 82      if (tx?.symbol !== AssetSymbolEnum.Enum.ICP) {
 83        const contact = contacts.find(
 84          (cntc) => cntc.principal === (isTo ? tx.to || "" : tx.from || ""),
 85        );
 86        if (contact) {
 87          hasContactName = true;
 88          contactName = contact.name;
 89          const symbolAsst = contact.assets.find(
 90            (asst) => asst.tokenSymbol === tx?.symbol,
 91          )?.subaccounts;
 92          if (symbolAsst && symbolAsst?.length > 0) {
 93            const subAcc = isTo ? tx.toSub || "0" : tx.fromSub || "0";
 94            const subNameAux = symbolAsst.find(
 95              (sa) => sa.subaccount_index === subAcc,
 96            )?.name;
 97            if (subNameAux) {
 98              hasSubName = true;
 99              subName = subNameAux;
100            }
101          }
102        }
103      } else {
104        const contact = contacts.find(
105          (cntc) => cntc.accountIdentier === (isTo ? tx.to || "" : tx.from || ""),
106        );
107        if (contact) {
108          hasContactName = true;
109          contactName = contact.name;
110        }
111      }
112    }
113  
114    // tailwind CSS
115    const contcNameStyle = clsx("text-left break-words w-full max-w-[30vw]");
116  
117    return (
118      <Fragment>
119        <div className="flex flex-col items-start justify-center w-full my-2 min-h-12">
120          {hasContactName ? (
121            <p className={contcNameStyle}>{`${
122              isTo ? t("to") : t("from")
123            }: ${contactName}`}</p>
124          ) : (
125            <p className={contcNameStyle}>
126              {`${isTo ? t("to") : t("from")}: ${shortAddress(
127                isICPWithSub ? authClient : isTo ? tx.to || "" : tx.from || "",
128                12,
129                12,
130              )}`}
131            </p>
132          )}
133          {hasContactName && (
134            <p className="opacity-75 text-left break-words max-w-[20.5rem]">
135              {`${shortAddress(
136                isICPWithSub ? authClient : isTo ? tx.to || "" : tx.from || "",
137                12,
138                12,
139              )}`}
140            </p>
141          )}
142          {hasSub && (
143            <p className={`${accId} text-left break-words max-w-[20.5rem]`}>
144              {`${hasSubName ? subName + " -" : ""} ${
145                isICPWithSub
146                  ? ICPSubaccounts.find(
147                      (sub) => sub.legacy === (isTo ? tx.to : tx.from),
148                    )?.sub_account_id || "0x0"
149                  : isTo
150                    ? tx.toSub || "0"
151                    : tx.fromSub || "0"
152              } `}
153            </p>
154          )}
155        </div>
156      </Fragment>
157    );
158  };
159  
160  export default CodeElement;