add activity of tokens

package.json

@@ -16,6 +16,7 @@
     "buffer": "^6.0.3",
     "camelcase-keys": "^9.1.3",
     "clipboard-copy": "^4.0.1",
+    "date-fns": "^4.1.0",
     "ethers": "^6.13.0",
     "focus-trap-react": "^10.2.3",
     "react": "^18.2.0",

src/components/Modal.jsx

@@ -51,6 +51,9 @@ const Modal = ({
     } else {
       document.querySelector("body")?.classList.remove("scroll-lock");
     }
+
+    return () =>
+      document.querySelector("body")?.classList.remove("scroll-lock");
   }, [show]);
 
   if (!show) {

src/contexts/Store.jsx

@@ -1,4 +1,4 @@
-import { createContext, useState, useEffect } from "react";
+import { createContext, useState, useEffect, useMemo } from "react";
 import EvmAccount from "@mybucks/lib/account";
 import {
   DEFAULT_CHAIN_ID,
@@ -11,9 +11,8 @@ import { ethers } from "ethers";
 import { CovalentClient } from "@covalenthq/client-sdk";
 import camelcaseKeys from "camelcase-keys";
 
-const client = new CovalentClient(import.meta.env.VITE_COVALENT_API_KEY);
-
 export const StoreContext = createContext({
+  client: null,
   connectivity: true,
   password: "",
   passcode: "",
@@ -47,6 +46,10 @@ export const StoreContext = createContext({
 });
 
 const StoreProvider = ({ children }) => {
+  const client = useMemo(
+    () => new CovalentClient(import.meta.env.VITE_COVALENT_API_KEY),
+    []
+  );
   const [connectivity, setConnectivity] = useState(true);
   // key parts
   const [password, setPassword] = useState("");
@@ -75,6 +78,7 @@ const StoreProvider = ({ children }) => {
   // unique counter that increments regularly
   const [tick, setTick] = useState(0);
 
+  // active token
   const [selectedTokenAddress, selectToken] = useState("");
 
   useEffect(() => {
@@ -188,6 +192,7 @@ const StoreProvider = ({ children }) => {
   return (
     <StoreContext.Provider
       value={{
+        client,
         connectivity,
         password,
         passcode,

src/pages/Home/TokenRow.jsx

@@ -87,7 +87,7 @@ const TokenRow = ({ token, balance, quote, onClick, balanceVisible }) => (
       <Balance>{balanceVisible ? Number(balance).toFixed(4) : "*****"}</Balance>
       <Value>
         {!!quote && balanceVisible
-          ? `\$${Number(quote).toFixed(2)}`
+          ? `$${Number(quote).toFixed(2)}`
           : !balanceVisible
           ? "*****"
           : ""}

src/pages/Token/index.jsx

@@ -4,22 +4,32 @@ import ConfirmTransaction from "@mybucks/pages/ConfirmTransaction";
 import MinedTransaction from "@mybucks/pages/MinedTransaction";
 import { ethers } from "ethers";
 import styled from "styled-components";
-import { explorerLinkOfContract } from "@mybucks/lib/utils";
-import Avatar from "@mybucks/components/Avatar";
+import camelcaseKeys from "camelcase-keys";
+import { format } from "date-fns";
+import toFlexible from "toflexible";
 
+import {
+  truncate,
+  explorerLinkOfTransaction,
+  explorerLinkOfAddress,
+} from "@mybucks/lib/utils";
 import BackIcon from "@mybucks/assets/icons/back.svg";
 import RefreshIcon from "@mybucks/assets/icons/refresh.svg";
 import ArrowUpRightIcon from "@mybucks/assets/icons/arrow-up-right.svg";
 import InfoRedIcon from "@mybucks/assets/icons/info-red.svg";
 import InfoGreenIcon from "@mybucks/assets/icons/info-green.svg";
 
+import { explorerLinkOfContract } from "@mybucks/lib/utils";
+import Avatar from "@mybucks/components/Avatar";
+
 import {
   Container as BaseContainer,
   Box as BaseBox,
 } from "@mybucks/components/Containers";
 import Button from "@mybucks/components/Button";
 import Input from "@mybucks/components/Input";
 import { Label } from "@mybucks/components/Label";
+import Link from "@mybucks/components/Link";
 import { H3 } from "@mybucks/components/Texts";
 import media from "@mybucks/styles/media";
 
@@ -126,6 +136,40 @@ const Submit = styled(Button)`
   `}
 `;
 
+const HistoryTable = styled.table`
+  width: 100%;
+
+  td {
+    padding-bottom: 4px;
+  }
+`;
+
+const AmountTd = styled.td`
+  color: ${({ theme, $in }) =>
+    $in ? theme.colors.success : theme.colors.error};
+`;
+
+const AddressTd = styled.td`
+  ${media.sm`
+    display: none;
+  `}
+`;
+
+const AddressLinkLg = styled(Link)`
+  text-decoration: none;
+  ${media.md`
+    display: none;
+  `}
+`;
+
+const AddressLink = styled(Link)`
+  text-decoration: none;
+  display: none;
+  ${media.md`
+    display: inherit;
+  `}
+`;
+
 const Token = () => {
   const [hasErrorInput, setHasErrorInput] = useState(false);
   const [confirming, setConfirming] = useState(false);
@@ -136,8 +180,10 @@ const Token = () => {
   const [amount, setAmount] = useState(0);
   const [gasEstimation, setGasEstimation] = useState(0);
   const [gasEstimationValue, setGasEstimationValue] = useState(0);
+  const [history, setHistory] = useState([]);
 
   const {
+    client,
     account,
     chainId,
     selectedTokenAddress,
@@ -157,6 +203,49 @@ const Token = () => {
     [token]
   );
 
+  useEffect(() => {
+    const fetchHistory = async () => {
+      try {
+        const { data, error } =
+          await client.BalanceService.getErc20TransfersForWalletAddressByPage(
+            chainId,
+            account.address,
+            {
+              contractAddress: selectedTokenAddress.trim(),
+              pageNumber: 0,
+              pageSize: 5,
+            }
+          );
+        if (error) {
+          throw new Error("invalid history");
+        }
+
+        const items = camelcaseKeys(data.items, { deep: true });
+        setHistory(
+          items
+            .map(({ transfers }) =>
+              transfers.map((item) => ({
+                txHash: item.txHash,
+                transferType: item.transferType,
+                fromAddress: item.fromAddress,
+                toAddress: item.toAddress,
+                amount: item.delta,
+                decimals: item.contractDecimals,
+                time: item.blockSignedAt,
+              }))
+            )
+            .flat()
+        );
+      } catch (e) {
+        console.error("failed to fetch transfer history ...", e);
+      }
+    };
+
+    if (!token.nativeToken) {
+      fetchHistory();
+    }
+  }, []);
+
   useEffect(() => {
     const estimateGas = async () => {
       if (!recipient || !amount) {
@@ -337,9 +426,69 @@ const Token = () => {
         </Submit>
       </Box>
 
-      <Box>
-        <H3>History</H3>
-      </Box>
+      {history.length > 0 && (
+        <Box>
+          <H3>Activity</H3>
+
+          <HistoryTable>
+            <tbody>
+              {history.map((item) => (
+                <tr key={item.txHash}>
+                  <td>{format(item.time, "MM/dd")}</td>
+                  <AddressTd>
+                    <AddressLinkLg
+                      href={explorerLinkOfAddress(
+                        chainId,
+                        item.transferType === "IN"
+                          ? item.fromAddress
+                          : item.toAddress
+                      )}
+                      target="_blank"
+                    >
+                      {item.transferType === "IN"
+                        ? item.fromAddress
+                        : item.toAddress}
+                    </AddressLinkLg>
+
+                    <AddressLink
+                      href={explorerLinkOfAddress(
+                        chainId,
+                        item.transferType === "IN"
+                          ? item.fromAddress
+                          : item.toAddress
+                      )}
+                      target="_blank"
+                    >
+                      {truncate(
+                        item.transferType === "IN"
+                          ? item.fromAddress
+                          : item.toAddress
+                      )}
+                    </AddressLink>
+                  </AddressTd>
+                  <AmountTd $in={item.transferType === "IN"}>
+                    {item.transferType === "IN" ? "+" : "-"}&nbsp;
+                    {toFlexible(
+                      parseFloat(
+                        ethers.formatUnits(item.amount, item.decimals)
+                      ),
+                      2
+                    )}
+                  </AmountTd>
+                  <td>
+                    <Link
+                      href={explorerLinkOfTransaction(chainId, item.txHash)}
+                      target="_blank"
+                    >
+                      details
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </HistoryTable>
+        </Box>
+      )}
     </Container>
   );
 };

yarn.lock

@@ -1065,6 +1065,11 @@ date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+date-fns@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14"
+  integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==
+
 debug@^4.1.0, debug@^4.3.1, debug@^4.3.2:
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"