[Feat] Handling FA2 and FA1.2 in history

components/FA2Transfer.tsx

@@ -109,25 +109,25 @@ const FA2Transfer = ({
     onTokenChange?.(newToken);
     setCurrentToken(newToken);
 
-    if (autoSetField) {
-      const previousValue = getFieldProps(
-        `transfers.${proposalIndex}.values.${localIndex}`
-      ).value;
-
-      if (
-        Array.isArray(previousValue) ||
-        (!!previousValue && "balance" in previousValue)
-      ) {
-        throw new Error("Expect previous value to be formValue");
-      }
-
-      setFieldValue(`transfers.${proposalIndex}.values.${localIndex}`, {
-        ...(previousValue ?? {}),
-        token: newToken ?? "",
-        tokenId: newToken?.token.tokenId ?? "",
-        fa2Address: newToken?.token.contract.address ?? "",
-      });
+    if (!autoSetField) return;
+
+    const previousValue = getFieldProps(
+      `transfers.${proposalIndex}.values.${localIndex}`
+    ).value;
+
+    if (
+      Array.isArray(previousValue) ||
+      (!!previousValue && "balance" in previousValue)
+    ) {
+      throw new Error("Expect previous value to be formValue");
     }
+
+    setFieldValue(`transfers.${proposalIndex}.values.${localIndex}`, {
+      ...(previousValue ?? {}),
+      token: newToken ?? "",
+      tokenId: newToken?.token.tokenId ?? "",
+      fa2Address: newToken?.token.contract.address ?? "",
+    });
   };
 
   const fetchTokens = useCallback(
@@ -345,7 +345,19 @@ const FA2TransferGroup = ({ proposalIndex, remove }: props) => {
         remove={remove}
         autoSetField={false}
         onTokenChange={token => {
+          const previousValue = getFieldProps(
+            `transfers.${proposalIndex}.values.0`
+          ).value;
+
+          if (
+            Array.isArray(previousValue) ||
+            (!!previousValue && "balance" in previousValue)
+          ) {
+            throw new Error("Expect previous value to be formValue");
+          }
+
           const data = {
+            ...previousValue,
             token,
             fa2Address: token.token.contract.address,
             tokenId: token.token.tokenId,

components/HistoryFaToken.tsx

@@ -0,0 +1,97 @@
+import { TriangleDownIcon } from "@radix-ui/react-icons";
+import BigNumber from "bignumber.js";
+import { useMemo, useState } from "react";
+import { TransferType } from "../types/display";
+import Alias from "./Alias";
+import { fa1_2Token } from "./FA1_2";
+import { fa2Token } from "./FA2Transfer";
+
+type props = {
+  transferType: TransferType;
+  token: {
+    timestamp: string;
+    from: {
+      address: string;
+    };
+    amount: string;
+    token: fa1_2Token["token"] | fa2Token["token"];
+  };
+};
+
+const HistoryFaToken = ({ transferType, token }: props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { tzDate, tzHours, tzMinutes } = useMemo(
+    () => ({
+      tzDate: new Date(token.timestamp).toLocaleDateString(),
+      tzHours: new Date(token.timestamp).getHours().toString().padStart(2, "0"),
+      tzMinutes: new Date(token.timestamp)
+        .getMinutes()
+        .toString()
+        .padStart(2, "0"),
+    }),
+    [token.timestamp]
+  );
+
+  return (
+    <div
+      key={token.timestamp}
+      className={`${
+        isOpen ? "h-full" : "h-16"
+      } w-full overflow-hidden rounded bg-zinc-800 text-white`}
+    >
+      <button
+        className="grid h-16 w-full grid-cols-4 items-center gap-8 border-b border-zinc-900 px-6 py-4 lg:grid-cols-5"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span className="justify-self-start font-bold md:ml-11">
+          <span className="hidden md:block">
+            Received {transferType === TransferType.FA2 ? "FA2" : "FA1.2"}
+          </span>
+          <span className="md:hidden">Received</span>
+        </span>
+        <span className="text-center font-light text-zinc-300 md:min-w-[7rem] md:text-left">
+          <span className="hidden md:inline">From:</span>{" "}
+          {!!token.from ? (
+            <Alias address={token.from.address} />
+          ) : (
+            <span className="text-zinc-400">-</span>
+          )}
+        </span>
+        <span className="truncate font-light text-zinc-300 md:min-w-[7rem]">
+          <span className="hidden md:inline">Amount:</span>{" "}
+          {BigNumber(token.amount)
+            .div(BigNumber(10).pow(token.token.metadata.decimals))
+            .toNumber()}{" "}
+          {token.token.metadata.symbol}
+        </span>
+        <span className="hidden justify-self-end lg:block">
+          {tzDate} - {`${tzHours}:${tzMinutes}`}
+        </span>
+        <div className="justify-self-end">
+          <TriangleDownIcon
+            className={`${isOpen ? "rotate-180" : ""} h-8 w-8`}
+          />
+        </div>
+      </button>
+      <div className="px-4 py-4 md:pl-16">
+        <ul className="font-light">
+          <li>
+            <span className="text-zinc-400">Full name:</span>{" "}
+            {token.token.metadata.name}
+          </li>
+          <li>
+            <span className="text-zinc-400">Token ID:</span>{" "}
+            {token.token.tokenId}
+          </li>
+          <li>
+            <span className="text-zinc-400">Contract address:</span>{" "}
+            <Alias address={token.token.contract.address} />
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default HistoryFaToken;

context/proposals.ts

@@ -1,4 +1,4 @@
-import { mutezTransfer } from "../types/display";
+import { mutezTransfer, tokenTransfer } from "../types/display";
 import { API_URL } from "./config";
 
 async function getProposals(bigmap: string) {
@@ -7,14 +7,27 @@ async function getProposals(bigmap: string) {
   return json;
 }
 async function getTransfers(address: string): Promise<mutezTransfer[]> {
-  try {
-    let res = await fetch(
-      `${API_URL}/v1/operations/transactions?target=${address}&status=applied&amount.gt=0`
-    );
-    return await res.json();
-  } catch (e) {
-    console.log(e);
-    return [];
-  }
+  return fetch(
+    `${API_URL}/v1/operations/transactions?target=${address}&status=applied&amount.gt=0`
+  )
+    .then(res => res.json())
+    .catch(e => {
+      console.log(e);
+
+      return Promise.resolve([]);
+    });
 }
-export { getProposals, getTransfers };
+
+function getTokenTransfers(address: string): Promise<tokenTransfer[]> {
+  return fetch(
+    `${API_URL}/v1/tokens/transfers?anyof.to_.to=${address}&sort.desc=id`
+  )
+    .then(res => res.json())
+    .catch(e => {
+      console.log(e);
+
+      return Promise.resolve([]);
+    });
+}
+
+export { getProposals, getTransfers, getTokenTransfers };