TW-1587: [research] Activity History on OKLink

src/app/templates/activity/ActivityItem/ActivityOperationBase/index.tsx

@@ -25,6 +25,7 @@ interface Props {
   transferType?: ActivityOperTransferType;
   hash: string;
   asset?: ActivityItemBaseAssetProp;
+  atomic: boolean;
   blockExplorerUrl?: string;
   status?: ActivityStatus;
   withoutAssetIcon?: boolean;
@@ -44,7 +45,19 @@ export interface ActivityItemBaseAssetProp {
 }
 
 export const ActivityOperationBaseComponent = memo<Props>(
-  ({ kind, transferType, hash, chain, asset, blockExplorerUrl, status, withoutAssetIcon, onClick, addressChip }) => {
+  ({
+    kind,
+    transferType,
+    hash,
+    chain,
+    asset,
+    atomic,
+    blockExplorerUrl,
+    status,
+    withoutAssetIcon,
+    onClick,
+    addressChip
+  }) => {
     const isForEvm = chain.kind === TempleChainKind.EVM;
 
     const assetSlug = asset
@@ -69,28 +82,34 @@ export const ActivityOperationBaseComponent = memo<Props>(
         >
           {kind === ActivityOperKindEnum.approve ? null : asset.amountSigned ? (
             <Money smallFractionFont={false} withSign>
-              {atomsToTokens(asset.amountSigned, asset.decimals)}
+              {atomic ? atomsToTokens(asset.amountSigned, asset.decimals) : asset.amountSigned}
             </Money>
           ) : null}
 
           {symbolStr ? <span className="whitespace-pre"> {symbolStr}</span> : null}
         </div>
       );
-    }, [asset, kind, onClick]);
+    }, [asset, kind, onClick, atomic]);
 
     const fiatJsx = useMemo<ReactNode>(() => {
       if (!asset) return null;
 
       if (!asset.amountSigned) return asset.amountSigned === null ? 'Unlimited' : null;
 
       if (kind === ActivityOperKindEnum.approve)
-        return <Money smallFractionFont={false}>{atomsToTokens(asset.amountSigned, asset.decimals)}</Money>;
+        return (
+          <Money smallFractionFont={false}>
+            {atomic ? atomsToTokens(asset.amountSigned, asset.decimals) : asset.amountSigned}
+          </Money>
+        );
 
       if (!assetSlug) return null;
 
       const amountForFiat =
         kind === 'bundle' || isTransferActivityOperKind(kind)
-          ? atomsToTokens(asset.amountSigned, asset.decimals)
+          ? atomic
+            ? atomsToTokens(asset.amountSigned, asset.decimals)
+            : asset.amountSigned
           : null;
 
       if (!amountForFiat) return null;

src/app/templates/activity/ActivityItem/EvmActivity.tsx

@@ -70,7 +70,9 @@ const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chain, assetSlug
 
         const decimals = getMetadata(slug)?.decimals ?? asset.decimals;
 
-        if (decimals != null) return slug;
+        // if (decimals != null) return slug;
+
+        return slug;
       }
     }
 
@@ -98,7 +100,7 @@ const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chain, assetSlug
 
     const decimals = assetMetadata?.decimals ?? faceAssetBase?.decimals;
 
-    if (decimals == null) return;
+    // if (decimals == null) return;
 
     const symbol = assetMetadata?.symbol || faceAssetBase?.symbol;
 
@@ -109,7 +111,7 @@ const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chain, assetSlug
       contract,
       tokenId,
       amountSigned: faceAmount.toFixed(),
-      decimals,
+      decimals: 0,
       symbol
     };
   }, [getMetadata, operations, faceSlug]);
@@ -121,6 +123,7 @@ const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chain, assetSlug
         hash={hash}
         chain={chain}
         asset={batchAsset}
+        atomic={false}
         blockExplorerUrl={blockExplorerUrl}
         status={status}
         withoutAssetIcon={Boolean(assetSlug)}

src/app/templates/activity/ActivityItem/EvmActivityOperation.tsx

@@ -32,13 +32,13 @@ export const EvmActivityOperationComponent = memo<Props>(
 
       const decimals = assetBase.amountSigned === null ? NaN : assetMetadata?.decimals ?? assetBase.decimals;
 
-      if (decimals == null) return;
+      // if (decimals == null) return;
 
       const symbol = assetMetadata?.symbol || assetBase.symbol;
 
       const asset: ActivityItemBaseAssetProp = {
         ...assetBase,
-        decimals,
+        decimals: -1,
         symbol
       };
 
@@ -57,6 +57,7 @@ export const EvmActivityOperationComponent = memo<Props>(
         hash={hash}
         chain={chain}
         asset={asset}
+        atomic={false}
         blockExplorerUrl={blockExplorerUrl}
         status={status}
         withoutAssetIcon={withoutAssetIcon}

src/app/templates/activity/EvmActivityList.tsx

@@ -1,12 +1,9 @@
 import React, { FC, useMemo } from 'react';
 
-import { AxiosError } from 'axios';
-
 import { DeadEndBoundaryError } from 'app/ErrorBoundary';
 import { useLoadPartnersPromo } from 'app/hooks/use-load-partners-promo';
 import { EvmActivity } from 'lib/activity';
-import { getEvmAssetTransactions } from 'lib/activity/evm';
-import { useSafeState } from 'lib/ui/hooks';
+import { getEvmActivities } from 'lib/activity/evm/fetch';
 import { useAccountAddressForEvm } from 'temple/front';
 import { useEvmChainByChainId } from 'temple/front/chains';
 
@@ -30,43 +27,33 @@ export const EvmActivityList: FC<Props> = ({ chainId, assetSlug, filterKind }) =
 
   useLoadPartnersPromo();
 
-  const [nextPage, setNextPage] = useSafeState<number | nullish>(undefined);
-
   const { activities, isLoading, reachedTheEnd, setActivities, setIsLoading, setReachedTheEnd, loadNext } =
     useActivitiesLoadingLogic<EvmActivity>(
       async (initial, signal) => {
-        const page = initial ? undefined : nextPage;
-        if (page === null) return;
+        if (reachedTheEnd) return;
 
         setIsLoading(true);
 
         const currActivities = initial ? [] : activities;
 
         try {
-          const { activities: newActivities, nextPage: newNextPage } = await getEvmAssetTransactions(
-            accountAddress,
-            chainId,
-            assetSlug,
-            page,
-            signal
-          );
+          const olderThanBlockHeight = activities.at(activities.length - 1)?.blockHeight;
+
+          const newActivities = await getEvmActivities(accountAddress, chainId, olderThanBlockHeight);
 
           if (signal.aborted) return;
 
           setActivities(currActivities.concat(newActivities));
-          setNextPage(newNextPage);
-          if (newNextPage === null || newActivities.length === 0) setReachedTheEnd(true);
+          if (newActivities.length === 0) setReachedTheEnd(true);
         } catch (error) {
           if (signal.aborted) return;
 
           console.error(error);
-          if (error instanceof AxiosError && error.status === 501) setReachedTheEnd(true);
         }
 
         setIsLoading(false);
       },
-      [chainId, accountAddress, assetSlug],
-      () => setNextPage(undefined)
+      [chainId, accountAddress, assetSlug]
     );
 
   const displayActivities = useMemo(
@@ -76,6 +63,8 @@ export const EvmActivityList: FC<Props> = ({ chainId, assetSlug, filterKind }) =
 
   const groupedActivities = useGroupingByDate(displayActivities);
 
+  console.log('AAA:', activities);
+
   const contentJsx = useMemo(
     () =>
       groupedActivities.map(([dateStr, activities]) => (

src/app/templates/activity/loading-logic.ts

@@ -4,6 +4,7 @@ import { useWillUnmount } from 'lib/ui/hooks/useWillUnmount';
 export function useActivitiesLoadingLogic<A>(
   loadActivities: (initial: boolean, signal: AbortSignal) => Promise<void>,
   resetDeps: unknown[],
+  /** @deprecated - Not used ? */
   onReset?: EmptyFn,
   initialIsLoading = true
 ) {

src/lib/activity/evm/fetch.ts

@@ -1,10 +1,14 @@
+import { groupBy } from 'lodash';
+
+import { fetchOklinkTransactions } from 'lib/apis/oklink';
 import { getEvmERC20Transfers, getEvmTransactions } from 'lib/apis/temple/endpoints/evm';
 import { fromAssetSlug } from 'lib/assets';
 import { EVM_TOKEN_SLUG } from 'lib/assets/defaults';
 
 import { EvmActivity } from '../types';
 
 import { parseGoldRushTransaction, parseGoldRushERC20Transfer } from './parse';
+import { parseOklinkTransactionsGroup } from './parse/oklink';
 
 export async function getEvmAssetTransactions(
   walletAddress: string,
@@ -57,3 +61,19 @@ export async function getEvmAssetTransactions(
     nextPage
   };
 }
+
+export async function getEvmActivities(
+  walletAddress: string,
+  chainId: number,
+  // assetSlug?: string,
+  olderThanBlockHeight?: `${number}`,
+  signal?: AbortSignal
+) {
+  const allItems = await fetchOklinkTransactions(walletAddress, chainId, olderThanBlockHeight, signal);
+
+  const groups = Object.entries(groupBy(allItems, 'txId'));
+
+  const walletAddressLowerCased = walletAddress.toLowerCase();
+
+  return groups.map(([hash, items]) => parseOklinkTransactionsGroup(items, chainId, walletAddressLowerCased, hash));
+}