Implement token activities sync status

src/app/components/blocks/overview/TokenActivity.tsx

@@ -1,4 +1,4 @@
-import { FC, forwardRef, useCallback, useRef } from "react";
+import { FC, memo, forwardRef, useCallback, useRef } from "react";
 import { useAtomValue } from "jotai";
 import BigNumber from "bignumber.js";
 import classNames from "clsx";
@@ -14,9 +14,11 @@ import { LOAD_MORE_ON_ACTIVITY_FROM_END } from "app/defaults";
 import { currentAccountAtom, tokenSlugAtom } from "app/atoms";
 import {
   useAccountToken,
+  useChainId,
   useExplorerLink,
   useLazyNetwork,
   useTokenActivity,
+  useIsTokenActivitySyncing,
 } from "app/hooks";
 import { LARGE_AMOUNT } from "app/utils/largeAmount";
 import PrettyAmount from "app/components/elements/PrettyAmount";
@@ -31,14 +33,21 @@ import { ReactComponent as ActivityApproveIcon } from "app/icons/activity-approv
 import { ReactComponent as ActivityReceiveIcon } from "app/icons/activity-receive.svg";
 import { ReactComponent as ActivitySendIcon } from "app/icons/activity-send.svg";
 
-const TokenActivity: FC = () => {
+const TokenActivity = memo(() => {
+  const chainId = useChainId();
   const tokenSlug = useAtomValue(tokenSlugAtom)!;
   const currentAccount = useAtomValue(currentAccountAtom);
   const { activity, loadMore, hasMore } = useTokenActivity(
     currentAccount.address,
     tokenSlug
   );
 
+  const isSyncing = useIsTokenActivitySyncing(
+    chainId,
+    currentAccount.address,
+    tokenSlug
+  );
+
   const observer = useRef<IntersectionObserver>();
   const loadMoreTriggerAssetRef = useCallback(
     (node) => {
@@ -60,10 +69,17 @@ const TokenActivity: FC = () => {
     [activity, hasMore, loadMore]
   );
 
-  if (activity.length === 0) return null;
+  if (activity.length === 0 && !isSyncing) return null;
 
   return (
-    <div className="flex flex-col mt-5 pt-1 border-t border-brand-main/[.07]">
+    <div
+      className={classNames(
+        "relative mt-5 pt-1",
+        "border-t border-brand-main/[.07]",
+        isSyncing && "!border-transparent",
+        "flex flex-col"
+      )}
+    >
       {activity.map((activ, i) => (
         <TokenActivityCard
           ref={
@@ -75,9 +91,19 @@ const TokenActivity: FC = () => {
           activity={activ}
         />
       ))}
+
+      {isSyncing && (
+        <div
+          className={classNames(
+            "absolute top-[-1px] left-0 right-0",
+            "h-px bg-brand-main/[.07]",
+            "animate-ping"
+          )}
+        />
+      )}
     </div>
   );
-};
+});
 
 export default TokenActivity;
 

src/app/hooks/chainId.tsx

@@ -1,12 +1,13 @@
-import { FC, createContext, useContext, useEffect } from "react";
+import { FC, createContext, useContext, useEffect, useMemo } from "react";
 import { useAtomValue } from "jotai";
 import { useLazyAtomValue } from "lib/atom-utils";
 import { useDocumentVisibility } from "lib/react-hooks/useDocumentVisibility";
 
+import { TokenType } from "core/types";
 import { sync, syncTokenActivities } from "core/client";
+import { createAccountTokenKey } from "core/common/tokens";
 
 import { chainIdAtom, syncStatusAtom } from "app/atoms";
-import { TokenType } from "core/types";
 
 const ScopedChainIdContext = createContext<number | null>(null);
 
@@ -28,11 +29,27 @@ export const ChainIdProvider: FC<{ chainId: number }> = ({
 
 export function useIsSyncing() {
   const chainId = useChainId();
-  const status = useLazyAtomValue(syncStatusAtom) ?? [];
+  const status = useSyncStatus();
 
   return status.includes(chainId);
 }
 
+export function useIsTokenActivitySyncing(
+  chainId: number,
+  accountAddress: string,
+  tokenSlug?: string
+) {
+  const status = useSyncStatus();
+  const syncKey = useMemo(
+    () =>
+      tokenSlug &&
+      createAccountTokenKey({ chainId, accountAddress, tokenSlug }),
+    [chainId, accountAddress, tokenSlug]
+  );
+
+  return syncKey ? status.includes(syncKey) : false;
+}
+
 export function useSync(
   chainId: number,
   accountAddress: string,
@@ -80,3 +97,7 @@ export function useTokenActivitiesSync(
     return () => clearTimeout(t);
   }, [chainId, accountAddress, tokenSlug, isHidden]);
 }
+
+function useSyncStatus() {
+  return useLazyAtomValue(syncStatusAtom) ?? [];
+}

src/core/back/state/events.ts

@@ -26,6 +26,6 @@ export const approvalResolved = createEvent<string>();
 
 export const approvalsRejected = createEvent<string[] | null>();
 
-export const syncStarted = createEvent<number>();
+export const syncStarted = createEvent<number | string>();
 
-export const synced = createEvent<number>();
+export const synced = createEvent<number | string>();

src/core/back/state/stores.ts

@@ -55,7 +55,7 @@ export const $vault = createStore<Vault | null>(null)
     return null;
   });
 
-export const $syncPool = createStore<number[]>([])
+export const $syncPool = createStore<(number | string)[]>([])
   .on(syncStarted, (pool, chainId) => [...pool, chainId])
   .on(synced, (pool, chainId) => {
     const i = pool.indexOf(chainId);