diff --git a/src/app/store/assets-filter-options/state.ts b/src/app/store/assets-filter-options/state.ts index 97118a952d..fae6fa1235 100644 --- a/src/app/store/assets-filter-options/state.ts +++ b/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; diff --git a/src/app/templates/activity/ActivityItem/ActivityOperationBase/index.tsx b/src/app/templates/activity/ActivityItem/ActivityOperationBase/index.tsx index 753c0dbfbb..cc1dd25e1d 100644 --- a/src/app/templates/activity/ActivityItem/ActivityOperationBase/index.tsx +++ b/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( - ({ 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( return ( ( } ); - }, [asset, kind, assetSlug, chainId]); + }, [asset, kind, assetSlug, chain.chainId, isForEvm]); const chipJsx = useMemo( () => @@ -146,9 +150,9 @@ export const ActivityOperationBaseComponent = memo( const placeholderJsx = ; - return typeof chainId === 'number' ? ( + return isForEvm ? ( ( /> ) : ( ( fallback={placeholderJsx} /> ); - }, [chainId, withoutAssetIcon, kind, transferType, asset?.iconURL, asset?.symbol, isNFT, assetSlug]); + }, [chain, isForEvm, withoutAssetIcon, kind, transferType, asset?.iconURL, asset?.symbol, isNFT, assetSlug]); return (
(
{faceIconJsx}
)} - {withoutAssetIcon ? null : typeof chainId === 'number' ? ( - + {withoutAssetIcon ? null : isForEvm ? ( + ) : ( - + )}
diff --git a/src/app/templates/activity/ActivityItem/AddressChip.tsx b/src/app/templates/activity/ActivityItem/AddressChip.tsx index 079a07c611..d6da8ca3ab 100644 --- a/src/app/templates/activity/ActivityItem/AddressChip.tsx +++ b/src/app/templates/activity/ActivityItem/AddressChip.tsx @@ -11,21 +11,23 @@ interface Props { export const OperAddressChip: FC = ({ 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; diff --git a/src/app/templates/activity/ActivityItem/EvmActivity.tsx b/src/app/templates/activity/ActivityItem/EvmActivity.tsx index edfb8373dd..75821b5265 100644 --- a/src/app/templates/activity/ActivityItem/EvmActivity.tsx +++ b/src/app/templates/activity/ActivityItem/EvmActivity.tsx @@ -7,7 +7,7 @@ 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'; @@ -15,7 +15,7 @@ import { EvmActivityOperationComponent } from './EvmActivityOperation'; interface Props { activity: EvmActivity; - chain: EvmChain; + chain: BasicEvmChain; assetSlug?: string; } @@ -29,7 +29,7 @@ export const EvmActivityComponent = memo(({ activity, chain, assetSlug }) (({ activity, chain, assetSlug }) return ( @@ -49,17 +49,17 @@ export const EvmActivityComponent = memo(({ activity, chain, assetSlug }) interface BatchProps { activity: EvmActivity; - chainId: number; + chain: BasicEvmChain; assetSlug?: string; blockExplorerUrl?: string; } -const EvmActivityBatchComponent = memo(({ activity, chainId, assetSlug, blockExplorerUrl }) => { +const EvmActivityBatchComponent = memo(({ 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(({ activity, chainId, assetSl (({ activity, chainId, assetSl key={`${hash}-${j}`} hash={hash} operation={operation} - chainId={chainId} + chain={chain} blockExplorerUrl={blockExplorerUrl} withoutOperHashChip /> diff --git a/src/app/templates/activity/ActivityItem/EvmActivityOperation.tsx b/src/app/templates/activity/ActivityItem/EvmActivityOperation.tsx index c164db9926..3cf9a91543 100644 --- a/src/app/templates/activity/ActivityItem/EvmActivityOperation.tsx +++ b/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,7 +13,7 @@ import { OperAddressChip } from './AddressChip'; interface Props { hash: string; operation?: EvmOperation; - chainId: number; + chain: BasicEvmChain; blockExplorerUrl?: string; status?: ActivityStatus; withoutAssetIcon?: boolean; @@ -20,11 +21,11 @@ interface Props { } export const EvmActivityOperationComponent = memo( - ({ 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( kind={operation?.kind ?? ActivityOperKindEnum.interaction} transferType={getActivityOperTransferType(operation)} hash={hash} - chainId={chainId} + chain={chain} asset={asset} blockExplorerUrl={blockExplorerUrl} status={status} diff --git a/src/app/templates/activity/ActivityItem/TezosActivity.tsx b/src/app/templates/activity/ActivityItem/TezosActivity.tsx index fb89d79e18..43748a9fe7 100644 --- a/src/app/templates/activity/ActivityItem/TezosActivity.tsx +++ b/src/app/templates/activity/ActivityItem/TezosActivity.tsx @@ -7,7 +7,7 @@ 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'; @@ -15,7 +15,7 @@ import { TezosActivityOperationComponent, buildTezosOperationAsset } from './Tez interface Props { activity: TezosActivity; - chain: TezosChain; + chain: BasicTezosChain; assetSlug?: string; } @@ -31,7 +31,7 @@ export const TezosActivityComponent = memo(({ activity, chain, assetSlug (({ activity, chain, assetSlug return ( @@ -51,17 +51,17 @@ export const TezosActivityComponent = memo(({ activity, chain, assetSlug interface BatchProps { activity: TezosActivity; - chainId: string; + chain: BasicTezosChain; assetSlug?: string; blockExplorerUrl?: string; } -const TezosActivityBatchComponent = memo(({ activity, chainId, assetSlug, blockExplorerUrl }) => { +const TezosActivityBatchComponent = memo(({ 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(({ activity, chainId, asset (({ activity, chainId, asset key={`${hash}-${j}`} hash={hash} operation={operation} - chainId={chainId} + chain={chain} blockExplorerUrl={blockExplorerUrl} withoutOperHashChip /> diff --git a/src/app/templates/activity/ActivityItem/TezosActivityOperation.tsx b/src/app/templates/activity/ActivityItem/TezosActivityOperation.tsx index c6c9c0517b..e44550a40f 100644 --- a/src/app/templates/activity/ActivityItem/TezosActivityOperation.tsx +++ b/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,7 +13,7 @@ import { OperAddressChip } from './AddressChip'; interface Props { hash: string; operation?: TezosOperation; - chainId: string; + chain: BasicTezosChain; status?: ActivityStatus; blockExplorerUrl: string | nullish; withoutAssetIcon?: boolean; @@ -20,9 +21,9 @@ interface Props { } export const TezosActivityOperationComponent = memo( - ({ 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( kind={operation?.kind ?? ActivityOperKindEnum.interaction} transferType={getActivityOperTransferType(operation)} hash={hash} - chainId={chainId} + chain={chain} asset={asset} status={status} blockExplorerUrl={blockExplorerUrl ?? undefined} diff --git a/src/app/templates/activity/utils.ts b/src/app/templates/activity/utils.ts index 4f773092c7..d2f40b07f2 100644 --- a/src/app/templates/activity/utils.ts +++ b/src/app/templates/activity/utils.ts @@ -19,18 +19,22 @@ export function getActivityFilterKind(activity: Activity): FilterKind { if (!operation) return null; - const kind = operation.kind; - - if (kind === ActivityOperKindEnum.interaction) return null; - if (kind === ActivityOperKindEnum.approve) return 'approve'; - - const type = operation.type; - - if (type === ActivityOperTransferType.send || type === ActivityOperTransferType.receive) return 'transfer'; - - if (type === ActivityOperTransferType.sendToAccount) return 'send'; - - if (type === ActivityOperTransferType.receiveFromAccount) return 'receive'; + switch (operation.kind) { + case ActivityOperKindEnum.interaction: + return null; + case ActivityOperKindEnum.approve: + return 'approve'; + } + + switch (operation.type) { + case ActivityOperTransferType.send: + case ActivityOperTransferType.receive: + return 'transfer'; + case ActivityOperTransferType.sendToAccount: + return 'send'; + case ActivityOperTransferType.receiveFromAccount: + return 'receive'; + } return null; } diff --git a/src/temple/front/chains.ts b/src/temple/front/chains.ts index 8a736e5d05..da80fe4128 100644 --- a/src/temple/front/chains.ts +++ b/src/temple/front/chains.ts @@ -6,6 +6,18 @@ import type { TempleChainKind } from 'temple/types'; import { useAllTezosChains, useAllEvmChains } from './ready'; +export interface BasicEvmChain { + kind: TempleChainKind.EVM; + chainId: number; +} + +export interface BasicTezosChain { + kind: TempleChainKind.Tezos; + chainId: string; +} + +export type BasicChain = BasicEvmChain | BasicTezosChain; + interface ChainBase { rpcBaseURL: string; name: string; @@ -13,16 +25,12 @@ interface ChainBase { disabled?: boolean; } -export interface TezosChain extends ChainBase { - kind: TempleChainKind.Tezos; - chainId: string; +export interface TezosChain extends BasicTezosChain, ChainBase { rpc: StoredTezosNetwork; allRpcs: StoredTezosNetwork[]; } -export interface EvmChain extends ChainBase { - kind: TempleChainKind.EVM; - chainId: number; +export interface EvmChain extends BasicEvmChain, ChainBase { currency: EvmNativeTokenMetadata; rpc: StoredEvmNetwork; allRpcs: StoredEvmNetwork[];