TW-1479: [EVM] Transactions history. Refactor

src/app/store/assets-filter-options/state.ts

@@ -1,16 +1,6 @@
-import { TempleChainKind } from 'temple/types';
+import { BasicChain } from 'temple/front/chains';
 
-interface EvmChain {
-  kind: TempleChainKind.EVM;
-  chainId: number;
-}
-
-interface TezosChain {
-  kind: TempleChainKind.Tezos;
-  chainId: string;
-}
-
-export type FilterChain = EvmChain | TezosChain | null;
+export type FilterChain = BasicChain | null;
 
 export interface AssetsFilterOptionsStateInterface {
   filterChain: FilterChain;

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

@@ -12,13 +12,15 @@ import { ActivityOperKindEnum, ActivityOperTransferType, ActivityStatus } from '
 import { isTransferActivityOperKind } from 'lib/activity/utils';
 import { toEvmAssetSlug, toTezosAssetSlug } from 'lib/assets/utils';
 import { atomsToTokens } from 'lib/temple/helpers';
+import { BasicChain } from 'temple/front/chains';
+import { TempleChainKind } from 'temple/types';
 
 import { FaceKind } from '../../utils';
 
 import { AssetIconPlaceholder, BundleIconsStack, getIconByKind, getTitleByKind, StatusTag } from './utils';
 
 interface Props {
-  chainId: string | number;
+  chain: BasicChain;
   kind: FaceKind;
   transferType?: ActivityOperTransferType;
   hash: string;
@@ -42,9 +44,11 @@ export interface ActivityItemBaseAssetProp {
 }
 
 export const ActivityOperationBaseComponent = memo<Props>(
-  ({ kind, transferType, hash, chainId, asset, blockExplorerUrl, status, withoutAssetIcon, onClick, addressChip }) => {
+  ({ kind, transferType, hash, chain, asset, blockExplorerUrl, status, withoutAssetIcon, onClick, addressChip }) => {
+    const isForEvm = chain.kind === TempleChainKind.EVM;
+
     const assetSlug = asset
-      ? typeof chainId === 'number'
+      ? isForEvm
         ? toEvmAssetSlug(asset.contract, asset.tokenId)
         : toTezosAssetSlug(asset.contract, asset.tokenId)
       : null;
@@ -93,8 +97,8 @@ export const ActivityOperationBaseComponent = memo<Props>(
 
       return (
         <InFiat
-          evm={typeof chainId === 'number'}
-          chainId={chainId}
+          evm={isForEvm}
+          chainId={chain.chainId}
           assetSlug={assetSlug}
           volume={amountForFiat}
           smallFractionFont={false}
@@ -112,7 +116,7 @@ export const ActivityOperationBaseComponent = memo<Props>(
           }
         </InFiat>
       );
-    }, [asset, kind, assetSlug, chainId]);
+    }, [asset, kind, assetSlug, chain.chainId, isForEvm]);
 
     const chipJsx = useMemo(
       () =>
@@ -146,9 +150,9 @@ export const ActivityOperationBaseComponent = memo<Props>(
 
       const placeholderJsx = <AssetIconPlaceholder isNFT={isNFT} symbol={asset?.symbol} className={className} />;
 
-      return typeof chainId === 'number' ? (
+      return isForEvm ? (
         <EvmAssetImage
-          evmChainId={chainId}
+          evmChainId={chain.chainId}
           assetSlug={assetSlug}
           className={className}
           extraSrc={asset?.iconURL}
@@ -157,15 +161,15 @@ export const ActivityOperationBaseComponent = memo<Props>(
         />
       ) : (
         <TezosAssetImage
-          tezosChainId={chainId}
+          tezosChainId={chain.chainId}
           assetSlug={assetSlug}
           className={className}
           extraSrc={asset?.iconURL}
           loader={placeholderJsx}
           fallback={placeholderJsx}
         />
       );
-    }, [chainId, withoutAssetIcon, kind, transferType, asset?.iconURL, asset?.symbol, isNFT, assetSlug]);
+    }, [chain, isForEvm, withoutAssetIcon, kind, transferType, asset?.iconURL, asset?.symbol, isNFT, assetSlug]);
 
     return (
       <div
@@ -183,10 +187,10 @@ export const ActivityOperationBaseComponent = memo<Props>(
             <div className={clsx('w-9 h-9 overflow-hidden', isNFT ? 'rounded-lg' : 'rounded-full')}>{faceIconJsx}</div>
           )}
 
-          {withoutAssetIcon ? null : typeof chainId === 'number' ? (
-            <EvmNetworkLogo chainId={chainId} size={16} className="absolute bottom-0 right-0" withTooltip />
+          {withoutAssetIcon ? null : isForEvm ? (
+            <EvmNetworkLogo chainId={chain.chainId} size={16} className="absolute bottom-0 right-0" withTooltip />
           ) : (
-            <TezosNetworkLogo chainId={chainId} size={16} className="absolute bottom-0 right-0" withTooltip />
+            <TezosNetworkLogo chainId={chain.chainId} size={16} className="absolute bottom-0 right-0" withTooltip />
           )}
         </div>
 

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

@@ -11,21 +11,23 @@ interface Props {
 
 export const OperAddressChip: FC<Props> = ({ operation }) => {
   const info = useMemo(() => {
-    if (operation.kind === ActivityOperKindEnum.approve) return { title: 'For', address: operation.spenderAddress };
-
-    if (operation.kind === ActivityOperKindEnum.interaction)
-      return operation.withAddress ? { title: 'With', address: operation.withAddress } : undefined;
-
-    if (operation.type === ActivityOperTransferType.sendToAccount) return { title: 'To', address: operation.toAddress };
-
-    if (operation.type === ActivityOperTransferType.receiveFromAccount)
-      return { title: 'From', address: operation.fromAddress };
-
-    if (operation.type === ActivityOperTransferType.send) return { title: 'With', address: operation.toAddress };
-
-    if (operation.type === ActivityOperTransferType.receive) return { title: 'With', address: operation.fromAddress };
-
-    return;
+    switch (operation.kind) {
+      case ActivityOperKindEnum.approve:
+        return { title: 'For', address: operation.spenderAddress };
+      case ActivityOperKindEnum.interaction:
+        return operation.withAddress ? { title: 'With', address: operation.withAddress } : undefined;
+    }
+
+    switch (operation.type) {
+      case ActivityOperTransferType.sendToAccount:
+        return { title: 'To', address: operation.toAddress };
+      case ActivityOperTransferType.receiveFromAccount:
+        return { title: 'From', address: operation.fromAddress };
+      case ActivityOperTransferType.send:
+        return { title: 'With', address: operation.toAddress };
+      case ActivityOperTransferType.receive:
+        return { title: 'With', address: operation.fromAddress };
+    }
   }, [operation]);
 
   if (!info) return null;

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

@@ -7,15 +7,15 @@ import { fromAssetSlug, toEvmAssetSlug } from 'lib/assets/utils';
 import { useGetEvmChainAssetMetadata } from 'lib/metadata';
 import { useBooleanState } from 'lib/ui/hooks';
 import { ZERO } from 'lib/utils/numbers';
-import { EvmChain } from 'temple/front/chains';
+import { BasicEvmChain } from 'temple/front/chains';
 
 import { ActivityItemBaseAssetProp, ActivityOperationBaseComponent } from './ActivityOperationBase';
 import { BundleModalContent } from './BundleModal';
 import { EvmActivityOperationComponent } from './EvmActivityOperation';
 
 interface Props {
   activity: EvmActivity;
-  chain: EvmChain;
+  chain: BasicEvmChain;
   assetSlug?: string;
 }
 
@@ -29,7 +29,7 @@ export const EvmActivityComponent = memo<Props>(({ activity, chain, assetSlug })
       <EvmActivityOperationComponent
         hash={hash}
         operation={operation}
-        chainId={chain.chainId}
+        chain={chain}
         blockExplorerUrl={blockExplorerUrl}
         status={status}
         withoutAssetIcon={Boolean(assetSlug)}
@@ -40,7 +40,7 @@ export const EvmActivityComponent = memo<Props>(({ activity, chain, assetSlug })
   return (
     <EvmActivityBatchComponent
       activity={activity}
-      chainId={chain.chainId}
+      chain={chain}
       assetSlug={assetSlug}
       blockExplorerUrl={blockExplorerUrl}
     />
@@ -49,17 +49,17 @@ export const EvmActivityComponent = memo<Props>(({ activity, chain, assetSlug })
 
 interface BatchProps {
   activity: EvmActivity;
-  chainId: number;
+  chain: BasicEvmChain;
   assetSlug?: string;
   blockExplorerUrl?: string;
 }
 
-const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chainId, assetSlug, blockExplorerUrl }) => {
+const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chain, assetSlug, blockExplorerUrl }) => {
   const [expanded, , , toggleExpanded] = useBooleanState(false);
 
   const { hash, operations, status } = activity;
 
-  const getMetadata = useGetEvmChainAssetMetadata(chainId);
+  const getMetadata = useGetEvmChainAssetMetadata(chain.chainId);
 
   const faceSlug = useMemo(() => {
     if (assetSlug) return assetSlug;
@@ -119,7 +119,7 @@ const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chainId, assetSl
       <ActivityOperationBaseComponent
         kind="bundle"
         hash={hash}
-        chainId={chainId}
+        chain={chain}
         asset={batchAsset}
         blockExplorerUrl={blockExplorerUrl}
         status={status}
@@ -135,7 +135,7 @@ const EvmActivityBatchComponent = memo<BatchProps>(({ activity, chainId, assetSl
                 key={`${hash}-${j}`}
                 hash={hash}
                 operation={operation}
-                chainId={chainId}
+                chain={chain}
                 blockExplorerUrl={blockExplorerUrl}
                 withoutOperHashChip
               />

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

@@ -3,6 +3,7 @@ import React, { memo, useMemo } from 'react';
 import { ActivityOperKindEnum, EvmOperation, ActivityStatus } from 'lib/activity';
 import { toEvmAssetSlug } from 'lib/assets/utils';
 import { useEvmAssetMetadata } from 'lib/metadata';
+import { BasicEvmChain } from 'temple/front/chains';
 
 import { getActivityOperTransferType } from '../utils';
 
@@ -12,19 +13,19 @@ import { OperAddressChip } from './AddressChip';
 interface Props {
   hash: string;
   operation?: EvmOperation;
-  chainId: number;
+  chain: BasicEvmChain;
   blockExplorerUrl?: string;
   status?: ActivityStatus;
   withoutAssetIcon?: boolean;
   withoutOperHashChip?: boolean;
 }
 
 export const EvmActivityOperationComponent = memo<Props>(
-  ({ hash, operation, chainId, blockExplorerUrl, status, withoutAssetIcon, withoutOperHashChip }) => {
+  ({ hash, operation, chain, blockExplorerUrl, status, withoutAssetIcon, withoutOperHashChip }) => {
     const assetBase = operation?.asset;
     const assetSlug = assetBase?.contract ? toEvmAssetSlug(assetBase.contract) : undefined;
 
-    const assetMetadata = useEvmAssetMetadata(assetSlug ?? '', chainId);
+    const assetMetadata = useEvmAssetMetadata(assetSlug ?? '', chain.chainId);
 
     const asset = useMemo(() => {
       if (!assetBase) return;
@@ -54,7 +55,7 @@ export const EvmActivityOperationComponent = memo<Props>(
         kind={operation?.kind ?? ActivityOperKindEnum.interaction}
         transferType={getActivityOperTransferType(operation)}
         hash={hash}
-        chainId={chainId}
+        chain={chain}
         asset={asset}
         blockExplorerUrl={blockExplorerUrl}
         status={status}

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

@@ -7,15 +7,15 @@ import { useGetChainTokenOrGasMetadata } from 'lib/metadata';
 import { useBooleanState } from 'lib/ui/hooks';
 import { ZERO } from 'lib/utils/numbers';
 import { useExplorerHref } from 'temple/front/block-explorers';
-import { TezosChain } from 'temple/front/chains';
+import { BasicTezosChain } from 'temple/front/chains';
 
 import { ActivityOperationBaseComponent } from './ActivityOperationBase';
 import { BundleModalContent } from './BundleModal';
 import { TezosActivityOperationComponent, buildTezosOperationAsset } from './TezosActivityOperation';
 
 interface Props {
   activity: TezosActivity;
-  chain: TezosChain;
+  chain: BasicTezosChain;
   assetSlug?: string;
 }
 
@@ -31,7 +31,7 @@ export const TezosActivityComponent = memo<Props>(({ activity, chain, assetSlug
       <TezosActivityOperationComponent
         hash={hash}
         operation={operation}
-        chainId={chain.chainId}
+        chain={chain}
         blockExplorerUrl={blockExplorerUrl}
         status={status}
         withoutAssetIcon={Boolean(assetSlug)}
@@ -42,7 +42,7 @@ export const TezosActivityComponent = memo<Props>(({ activity, chain, assetSlug
   return (
     <TezosActivityBatchComponent
       activity={activity}
-      chainId={chain.chainId}
+      chain={chain}
       assetSlug={assetSlug}
       blockExplorerUrl={blockExplorerUrl}
     />
@@ -51,17 +51,17 @@ export const TezosActivityComponent = memo<Props>(({ activity, chain, assetSlug
 
 interface BatchProps {
   activity: TezosActivity;
-  chainId: string;
+  chain: BasicTezosChain;
   assetSlug?: string;
   blockExplorerUrl?: string;
 }
 
-const TezosActivityBatchComponent = memo<BatchProps>(({ activity, chainId, assetSlug, blockExplorerUrl }) => {
+const TezosActivityBatchComponent = memo<BatchProps>(({ activity, chain, assetSlug, blockExplorerUrl }) => {
   const [expanded, , , toggleExpanded] = useBooleanState(false);
 
   const { hash, operations, status } = activity;
 
-  const getMetadata = useGetChainTokenOrGasMetadata(chainId);
+  const getMetadata = useGetChainTokenOrGasMetadata(chain.chainId);
 
   const batchAsset = useMemo(() => {
     const faceSlug =
@@ -92,7 +92,7 @@ const TezosActivityBatchComponent = memo<BatchProps>(({ activity, chainId, asset
       <ActivityOperationBaseComponent
         kind="bundle"
         hash={hash}
-        chainId={chainId}
+        chain={chain}
         asset={batchAsset}
         status={status}
         blockExplorerUrl={blockExplorerUrl}
@@ -108,7 +108,7 @@ const TezosActivityBatchComponent = memo<BatchProps>(({ activity, chainId, asset
                 key={`${hash}-${j}`}
                 hash={hash}
                 operation={operation}
-                chainId={chainId}
+                chain={chain}
                 blockExplorerUrl={blockExplorerUrl}
                 withoutOperHashChip
               />

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

@@ -3,6 +3,7 @@ import React, { memo, useMemo } from 'react';
 import { ActivityOperKindEnum, TezosOperation, ActivityStatus } from 'lib/activity';
 import { fromAssetSlug } from 'lib/assets';
 import { AssetMetadataBase, isTezosCollectibleMetadata, useTezosAssetMetadata } from 'lib/metadata';
+import { BasicTezosChain } from 'temple/front/chains';
 
 import { getActivityOperTransferType } from '../utils';
 
@@ -12,17 +13,17 @@ import { OperAddressChip } from './AddressChip';
 interface Props {
   hash: string;
   operation?: TezosOperation;
-  chainId: string;
+  chain: BasicTezosChain;
   status?: ActivityStatus;
   blockExplorerUrl: string | nullish;
   withoutAssetIcon?: boolean;
   withoutOperHashChip?: boolean;
 }
 
 export const TezosActivityOperationComponent = memo<Props>(
-  ({ hash, operation, chainId, blockExplorerUrl, status, withoutAssetIcon, withoutOperHashChip }) => {
+  ({ hash, operation, chain, blockExplorerUrl, status, withoutAssetIcon, withoutOperHashChip }) => {
     const assetSlug = operation?.assetSlug;
-    const assetMetadata = useTezosAssetMetadata(assetSlug ?? '', chainId);
+    const assetMetadata = useTezosAssetMetadata(assetSlug ?? '', chain.chainId);
 
     const asset = useMemo(
       () => (assetSlug ? buildTezosOperationAsset(assetSlug, assetMetadata, operation.amountSigned) : undefined),
@@ -39,7 +40,7 @@ export const TezosActivityOperationComponent = memo<Props>(
         kind={operation?.kind ?? ActivityOperKindEnum.interaction}
         transferType={getActivityOperTransferType(operation)}
         hash={hash}
-        chainId={chainId}
+        chain={chain}
         asset={asset}
         status={status}
         blockExplorerUrl={blockExplorerUrl ?? undefined}