From a79d288b6ac9dabf0b5dd88080c6d2a5002ea269 Mon Sep 17 00:00:00 2001
From: Maksym Zub <kroistsmeh@gmail.com>
Date: Tue, 11 Nov 2025 15:34:10 +0100
Subject: [PATCH 1/2] integrate erc-7984

---
 lib/socket/types.ts                           |  2 +
 lib/token/tokenTypes.ts                       |  3 +-
 types/api/token.ts                            |  2 +-
 types/api/tokenTransfer.ts                    |  4 ++
 ui/address/AddressTokens.tsx                  | 18 ++++-
 ui/address/tokenSelect/TokenSelectItem.tsx    | 10 +++
 ui/address/tokens/ERC7984Tokens.tsx           | 55 +++++++++++++++
 ui/address/tokens/ERC7984TokensListItem.tsx   | 68 ++++++++++++++++++
 ui/address/tokens/ERC7984TokensTable.tsx      | 36 ++++++++++
 ui/address/tokens/ERC7984TokensTableItem.tsx  | 70 +++++++++++++++++++
 ui/address/utils/tokenUtils.ts                |  5 +-
 ui/address/utils/useFetchTokens.ts            | 32 +++++++--
 ui/advancedFilter/ItemByColumn.tsx            |  3 +
 ui/pages/Address.tsx                          |  2 +-
 ui/shared/search/utils.ts                     |  8 ++-
 ui/token/TokenDetails.tsx                     | 48 +++++++------
 .../TokenTransfer/TokenTransferListItem.tsx   | 17 +++++
 ui/token/TokenTransfer/TokenTransferTable.tsx |  4 +-
 .../TokenTransfer/TokenTransferTableItem.tsx  | 24 ++++---
 19 files changed, 369 insertions(+), 42 deletions(-)
 create mode 100644 ui/address/tokens/ERC7984Tokens.tsx
 create mode 100644 ui/address/tokens/ERC7984TokensListItem.tsx
 create mode 100644 ui/address/tokens/ERC7984TokensTable.tsx
 create mode 100644 ui/address/tokens/ERC7984TokensTableItem.tsx

diff --git a/lib/socket/types.ts b/lib/socket/types.ts
index 8dbf55670f..be9d32e71b 100644
--- a/lib/socket/types.ts
+++ b/lib/socket/types.ts
@@ -30,6 +30,7 @@ SocketMessage.AddressTokenBalancesErc20 |
 SocketMessage.AddressTokenBalancesErc721 |
 SocketMessage.AddressTokenBalancesErc1155 |
 SocketMessage.AddressTokenBalancesErc404 |
+SocketMessage.AddressTokenBalancesErc7984 |
 SocketMessage.AddressCoinBalance |
 SocketMessage.AddressTxs |
 SocketMessage.AddressTxsPending |
@@ -74,6 +75,7 @@ export namespace SocketMessage {
   export type AddressTokenBalancesErc721 = SocketMessageParamsGeneric<'updated_token_balances_erc_721', AddressTokensBalancesSocketMessage>;
   export type AddressTokenBalancesErc1155 = SocketMessageParamsGeneric<'updated_token_balances_erc_1155', AddressTokensBalancesSocketMessage>;
   export type AddressTokenBalancesErc404 = SocketMessageParamsGeneric<'updated_token_balances_erc_404', AddressTokensBalancesSocketMessage>;
+  export type AddressTokenBalancesErc7984 = SocketMessageParamsGeneric<'updated_token_balances_erc_7984', AddressTokensBalancesSocketMessage>;
   export type AddressCoinBalance = SocketMessageParamsGeneric<'coin_balance', { coin_balance: AddressCoinBalanceHistoryItem }>;
   export type AddressTxs = SocketMessageParamsGeneric<'transaction', { transactions: Array<Transaction> }>;
   export type AddressTxsPending = SocketMessageParamsGeneric<'pending_transaction', { transactions: Array<Transaction> }>;
diff --git a/lib/token/tokenTypes.ts b/lib/token/tokenTypes.ts
index a382e61340..81c89af7d1 100644
--- a/lib/token/tokenTypes.ts
+++ b/lib/token/tokenTypes.ts
@@ -12,11 +12,12 @@ export const NFT_TOKEN_TYPES: Record<NFTTokenType, string > = {
 
 export const TOKEN_TYPES: Record<TokenType, string > = {
   'ERC-20': `${ tokenStandardName }-20`,
+  'ERC-7984': `${ tokenStandardName }-7984`,
   ...NFT_TOKEN_TYPES,
 };
 
 export const NFT_TOKEN_TYPE_IDS: Array<NFTTokenType> = [ 'ERC-721', 'ERC-1155', 'ERC-404' ];
-export const TOKEN_TYPE_IDS: Array<TokenType> = [ 'ERC-20', ...NFT_TOKEN_TYPE_IDS ];
+export const TOKEN_TYPE_IDS: Array<TokenType> = [ 'ERC-20', 'ERC-7984', ...NFT_TOKEN_TYPE_IDS ];
 
 export function getTokenTypeName(typeId: TokenType) {
   return TOKEN_TYPES[typeId];
diff --git a/types/api/token.ts b/types/api/token.ts
index 511246a844..d45ff7e29a 100644
--- a/types/api/token.ts
+++ b/types/api/token.ts
@@ -2,7 +2,7 @@ import type { TokenInfoApplication } from './account';
 import type { AddressParam } from './addressParams';
 
 export type NFTTokenType = 'ERC-721' | 'ERC-1155' | 'ERC-404';
-export type TokenType = 'ERC-20' | NFTTokenType;
+export type TokenType = 'ERC-20' | NFTTokenType | 'ERC-7984';
 
 export type TokenReputation = 'ok' | 'scam';
 
diff --git a/types/api/tokenTransfer.ts b/types/api/tokenTransfer.ts
index e2d9a81621..8088452c82 100644
--- a/types/api/tokenTransfer.ts
+++ b/types/api/tokenTransfer.ts
@@ -44,6 +44,10 @@ export type TokenTransfer = (
   {
     token: TokenInfo<'ERC-404'> | null;
     total: Erc404TotalPayload | null;
+  } |
+  {
+    token: TokenInfo<'ERC-7984'> | null;
+    total: Erc20TotalPayload | null;
   }
 ) & TokenTransferBase;
 
diff --git a/ui/address/AddressTokens.tsx b/ui/address/AddressTokens.tsx
index a9e224607d..71571f178d 100644
--- a/ui/address/AddressTokens.tsx
+++ b/ui/address/AddressTokens.tsx
@@ -19,6 +19,7 @@ import AddressNftDisplayTypeRadio from './tokens/AddressNftDisplayTypeRadio';
 import AddressNFTs from './tokens/AddressNFTs';
 import AddressNftTypeFilter from './tokens/AddressNftTypeFilter';
 import ERC20Tokens from './tokens/ERC20Tokens';
+import ERC7984Tokens from './tokens/ERC7984Tokens';
 import TokenBalances from './tokens/TokenBalances';
 import useAddressNftQuery from './tokens/useAddressNftQuery';
 
@@ -65,6 +66,18 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
     addressHash: hash,
   });
 
+  const erc7984Query = useQueryWithPages({
+    resourceName: 'general:address_tokens',
+    pathParams: { hash },
+    filters: { type: 'ERC-7984' },
+    scrollRef,
+    options: {
+      enabled: isQueryEnabled && tab === 'tokens_erc7984',
+      refetchOnMount: false,
+      placeholderData: generateListStub<'general:address_tokens'>(ADDRESS_TOKEN_BALANCE_ERC_20, 10, { next_page_params: null }),
+    },
+  });
+
   if (!isMounted || !shouldRender) {
     return null;
   }
@@ -80,12 +93,15 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
         <AddressNFTs tokensQuery={ nftsQuery } tokenTypes={ nftTokenTypes } onTokenTypesChange={ onTokenTypesChange }/> :
         <AddressCollections collectionsQuery={ collectionsQuery } address={ hash } tokenTypes={ nftTokenTypes } onTokenTypesChange={ onTokenTypesChange }/>,
     },
+    { id: 'tokens_erc7984', title: `${ config.chain.tokenStandard }-7984`, component: <ERC7984Tokens tokensQuery={ erc7984Query }/> },
   ];
 
   let pagination: PaginationParams | undefined;
 
   if (tab === 'tokens_nfts') {
     pagination = nftDisplayType === 'list' ? nftsQuery.pagination : collectionsQuery.pagination;
+  } else if (tab === 'tokens_erc7984') {
+    pagination = erc7984Query.pagination;
   } else {
     pagination = erc20Query.pagination;
   }
@@ -94,7 +110,7 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
     (!nftsQuery.isPlaceholderData && nftsQuery.data?.items.length) ||
     (!collectionsQuery.isPlaceholderData && collectionsQuery.data?.items.length);
 
-  const isNftTab = tab !== 'tokens' && tab !== 'tokens_erc20';
+  const isNftTab = tab !== 'tokens' && tab !== 'tokens_erc20' && tab !== 'tokens_erc7984';
 
   const rightSlot = (
     <>
diff --git a/ui/address/tokenSelect/TokenSelectItem.tsx b/ui/address/tokenSelect/TokenSelectItem.tsx
index ef205ef218..d3d643a251 100644
--- a/ui/address/tokenSelect/TokenSelectItem.tsx
+++ b/ui/address/tokenSelect/TokenSelectItem.tsx
@@ -71,6 +71,16 @@ const TokenSelectItem = ({ data }: Props) => {
           </>
         );
       }
+      case 'ERC-7984': {
+        const text = `••••• ${ data.token.symbol || '' }`;
+
+        return (
+          <>
+            <TruncatedValue value={ text }/>
+            { data.token.exchange_rate && <chakra.span ml={ 2 }>@{ Number(data.token.exchange_rate).toLocaleString() }</chakra.span> }
+          </>
+        );
+      }
     }
   })();
 
diff --git a/ui/address/tokens/ERC7984Tokens.tsx b/ui/address/tokens/ERC7984Tokens.tsx
new file mode 100644
index 0000000000..5898aec789
--- /dev/null
+++ b/ui/address/tokens/ERC7984Tokens.tsx
@@ -0,0 +1,55 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+
+import ERC7984TokensListItem from './ERC7984TokensListItem';
+import ERC7984TokensTable from './ERC7984TokensTable';
+
+type Props = {
+  tokensQuery: QueryWithPagesResult<'general:address_tokens'>;
+};
+
+const ERC7984Tokens = ({ tokensQuery }: Props) => {
+  const isMobile = useIsMobile();
+
+  const { isError, isPlaceholderData, data, pagination } = tokensQuery;
+
+  const actionBar = isMobile && pagination.isVisible && (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Box hideBelow="lg"><ERC7984TokensTable data={ data.items } top={ pagination.isVisible ? 72 : 0 } isLoading={ isPlaceholderData }/></Box>
+      <Box hideFrom="lg">{ data.items.map((item, index) => (
+        <ERC7984TokensListItem
+          key={ item.token.address_hash + (isPlaceholderData ? index : '') }
+          { ...item }
+          isLoading={ isPlaceholderData }
+        />
+      )) }
+      </Box>
+    </>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      itemsNum={ data?.items.length }
+      emptyText="There are no tokens of selected type."
+      actionBar={ actionBar }
+    >
+      { content }
+    </DataListDisplay>
+  );
+
+};
+
+export default ERC7984Tokens;
diff --git a/ui/address/tokens/ERC7984TokensListItem.tsx b/ui/address/tokens/ERC7984TokensListItem.tsx
new file mode 100644
index 0000000000..104757d601
--- /dev/null
+++ b/ui/address/tokens/ERC7984TokensListItem.tsx
@@ -0,0 +1,68 @@
+import { Flex, HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import config from 'configs/app';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import NativeTokenTag from 'ui/shared/celo/NativeTokenTag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+
+const celoFeature = config.features.celo;
+
+type Props = AddressTokenBalance & { isLoading: boolean };
+
+const ERC7984TokensListItem = ({ token, isLoading }: Props) => {
+
+  const isNativeToken = celoFeature.isEnabled && token.address_hash.toLowerCase() === celoFeature.nativeTokenAddress?.toLowerCase();
+
+  return (
+    <ListItemMobile rowGap={ 2 }>
+      <Flex alignItems="center" width="100%" columnGap={ 2 }>
+        <TokenEntity
+          token={ token }
+          isLoading={ isLoading }
+          noCopy
+          jointSymbol
+          fontWeight="700"
+          width="auto"
+        />
+        { isNativeToken && <NativeTokenTag/> }
+      </Flex>
+      <Flex alignItems="center" pl={ 8 }>
+        <AddressEntity
+          address={{ hash: token.address_hash }}
+          isLoading={ isLoading }
+          truncation="constant"
+          noIcon
+        />
+        <AddressAddToWallet token={ token } ml={ 2 } isLoading={ isLoading }/>
+      </Flex>
+      { token.exchange_rate !== undefined && token.exchange_rate !== null && (
+        <HStack gap={ 3 }>
+          <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Price</Skeleton>
+          <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">
+            <span>{ `$${ Number(token.exchange_rate).toLocaleString() }` }</span>
+          </Skeleton>
+        </HStack>
+      ) }
+      <HStack gap={ 3 } alignItems="baseline">
+        <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Quantity</Skeleton>
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" whiteSpace="pre-wrap" wordBreak="break-word">
+          <span>•••••</span>
+        </Skeleton>
+      </HStack>
+      <HStack gap={ 3 } alignItems="baseline">
+        <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Value</Skeleton>
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" whiteSpace="pre-wrap" wordBreak="break-word">
+          <span>•••••</span>
+        </Skeleton>
+      </HStack>
+    </ListItemMobile>
+  );
+};
+
+export default ERC7984TokensListItem;
diff --git a/ui/address/tokens/ERC7984TokensTable.tsx b/ui/address/tokens/ERC7984TokensTable.tsx
new file mode 100644
index 0000000000..2e0a69e6b5
--- /dev/null
+++ b/ui/address/tokens/ERC7984TokensTable.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+
+import ERC7984TokensTableItem from './ERC7984TokensTableItem';
+
+interface Props {
+  data: Array<AddressTokenBalance>;
+  top: number;
+  isLoading: boolean;
+}
+
+const ERC7984TokensTable = ({ data, top, isLoading }: Props) => {
+  return (
+    <TableRoot>
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader width="30%">Asset</TableColumnHeader>
+          <TableColumnHeader width="30%">Contract address</TableColumnHeader>
+          <TableColumnHeader width="10%" isNumeric>Price</TableColumnHeader>
+          <TableColumnHeader width="15%" isNumeric>Quantity</TableColumnHeader>
+          <TableColumnHeader width="15%" isNumeric>Value</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
+        { data.map((item, index) => (
+          <ERC7984TokensTableItem key={ item.token.address_hash + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
+        )) }
+      </TableBody>
+    </TableRoot>
+  );
+};
+
+export default ERC7984TokensTable;
diff --git a/ui/address/tokens/ERC7984TokensTableItem.tsx b/ui/address/tokens/ERC7984TokensTableItem.tsx
new file mode 100644
index 0000000000..0b9ddab82a
--- /dev/null
+++ b/ui/address/tokens/ERC7984TokensTableItem.tsx
@@ -0,0 +1,70 @@
+import { Flex, HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import config from 'configs/app';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import NativeTokenTag from 'ui/shared/celo/NativeTokenTag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+type Props = AddressTokenBalance & { isLoading: boolean };
+
+const celoFeature = config.features.celo;
+
+const ERC7984TokensTableItem = ({
+  token,
+  isLoading,
+}: Props) => {
+
+  const isNativeToken = celoFeature.isEnabled && token.address_hash.toLowerCase() === celoFeature.nativeTokenAddress?.toLowerCase();
+
+  return (
+    <TableRow role="group" >
+      <TableCell verticalAlign="middle">
+        <HStack gap={ 2 }>
+          <TokenEntity
+            token={ token }
+            isLoading={ isLoading }
+            noCopy
+            jointSymbol
+            fontWeight="700"
+            width="auto"
+          />
+          { isNativeToken && <NativeTokenTag/> }
+        </HStack>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Flex alignItems="center" width="150px" justifyContent="space-between">
+          <AddressEntity
+            address={{ hash: token.address_hash }}
+            isLoading={ isLoading }
+            truncation="constant"
+            noIcon
+          />
+          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0" _groupHover={{ opacity: 1 }}/>
+        </Flex>
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block" color={ isNativeToken ? 'text.secondary' : undefined }>
+          { token.exchange_rate && `$${ Number(token.exchange_rate).toLocaleString() }` }
+        </Skeleton>
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline" color={ isNativeToken ? 'text.secondary' : undefined }>
+          •••••
+        </Skeleton>
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline" color={ isNativeToken ? 'text.secondary' : undefined }>
+          •••••
+        </Skeleton>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export default React.memo(ERC7984TokensTableItem);
diff --git a/ui/address/utils/tokenUtils.ts b/ui/address/utils/tokenUtils.ts
index ca8c600e1c..b5e9f21af7 100644
--- a/ui/address/utils/tokenUtils.ts
+++ b/ui/address/utils/tokenUtils.ts
@@ -27,7 +27,7 @@ export interface TokenSelectDataItem {
 
 type TokenGroup = [string, TokenSelectDataItem];
 
-const TOKEN_GROUPS_ORDER: Array<TokenType> = [ 'ERC-20', 'ERC-721', 'ERC-1155', 'ERC-404' ];
+const TOKEN_GROUPS_ORDER: Array<TokenType> = [ 'ERC-20', 'ERC-721', 'ERC-1155', 'ERC-404', 'ERC-7984' ];
 
 export const sortTokenGroups = (groupA: TokenGroup, groupB: TokenGroup) => {
   return TOKEN_GROUPS_ORDER.indexOf(groupA[0] as TokenType) > TOKEN_GROUPS_ORDER.indexOf(groupB[0] as TokenType) ? 1 : -1;
@@ -66,11 +66,14 @@ const sortErc20Tokens = (sort: Sort) => (dataA: TokenEnhancedData, dataB: TokenE
 
 const sortErc721Tokens = () => () => 0;
 
+const sortErc7984Tokens = () => () => 0;
+
 export const sortingFns = {
   'ERC-20': sortErc20Tokens,
   'ERC-721': sortErc721Tokens,
   'ERC-1155': sortErc1155or404Tokens,
   'ERC-404': sortErc1155or404Tokens,
+  'ERC-7984': sortErc7984Tokens,
 };
 
 export const filterTokens = (searchTerm: string) => ({ token }: AddressTokenBalance) => {
diff --git a/ui/address/utils/useFetchTokens.ts b/ui/address/utils/useFetchTokens.ts
index 8b12fb76cb..88466cce2b 100644
--- a/ui/address/utils/useFetchTokens.ts
+++ b/ui/address/utils/useFetchTokens.ts
@@ -42,6 +42,11 @@ export default function useFetchTokens({ hash, enabled }: Props) {
     queryParams: { type: 'ERC-404' },
     queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
+  const erc7984query = useApiQuery('general:address_tokens', {
+    pathParams: { hash },
+    queryParams: { type: 'ERC-7984' },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
+  });
 
   const queryClient = useQueryClient();
 
@@ -88,9 +93,19 @@ export default function useFetchTokens({ hash, enabled }: Props) {
     updateTokensData('ERC-404', payload);
   }, [ updateTokensData ]);
 
+  const handleTokenBalancesErc7984Message: SocketMessage.AddressTokenBalancesErc7984['handler'] = React.useCallback((payload) => {
+    updateTokensData('ERC-7984', payload);
+  }, [ updateTokensData ]);
+
   const channel = useSocketChannel({
     topic: `addresses:${ hash?.toLowerCase() }`,
-    isDisabled: Boolean(hash) && (erc20query.isPlaceholderData || erc721query.isPlaceholderData || erc1155query.isPlaceholderData),
+    isDisabled:
+      Boolean(hash) &&
+      (erc20query.isPlaceholderData ||
+        erc721query.isPlaceholderData ||
+        erc1155query.isPlaceholderData ||
+        erc404query.isPlaceholderData ||
+        erc7984query.isPlaceholderData),
   });
 
   useSocketMessage({
@@ -113,6 +128,11 @@ export default function useFetchTokens({ hash, enabled }: Props) {
     event: 'updated_token_balances_erc_404',
     handler: handleTokenBalancesErc404Message,
   });
+  useSocketMessage({
+    channel,
+    event: 'updated_token_balances_erc_7984',
+    handler: handleTokenBalancesErc7984Message,
+  });
 
   const data = React.useMemo(() => {
     return {
@@ -132,12 +152,16 @@ export default function useFetchTokens({ hash, enabled }: Props) {
         items: erc404query.data?.items.map(calculateUsdValue) || [],
         isOverflow: Boolean(erc1155query.data?.next_page_params),
       },
+      'ERC-7984': {
+        items: erc7984query.data?.items.map(calculateUsdValue) || [],
+        isOverflow: Boolean(erc7984query.data?.next_page_params),
+      },
     };
-  }, [ erc1155query.data, erc20query.data, erc721query.data, erc404query.data ]);
+  }, [ erc1155query.data, erc20query.data, erc721query.data, erc404query.data, erc7984query.data ]);
 
   return {
-    isPending: erc20query.isPending || erc721query.isPending || erc1155query.isPending || erc404query.isPending,
-    isError: erc20query.isError || erc721query.isError || erc1155query.isError || erc404query.isError,
+    isPending: erc20query.isPending || erc721query.isPending || erc1155query.isPending || erc404query.isPending || erc7984query.isPending,
+    isError: erc20query.isError || erc721query.isError || erc1155query.isError || erc404query.isError || erc7984query.isError,
     data,
   };
 }
diff --git a/ui/advancedFilter/ItemByColumn.tsx b/ui/advancedFilter/ItemByColumn.tsx
index 2cc040733b..0a0d4b8b15 100644
--- a/ui/advancedFilter/ItemByColumn.tsx
+++ b/ui/advancedFilter/ItemByColumn.tsx
@@ -65,6 +65,9 @@ const ItemByColumn = ({ item, column, isLoading }: Props) => {
       if (item.token?.type === 'ERC-721') {
         return <Skeleton loading={ isLoading }>1</Skeleton>;
       }
+      if (item.token?.type === 'ERC-7984') {
+        return <Skeleton loading={ isLoading }>•••••</Skeleton>;
+      }
       if (item.total) {
         return (
           <Skeleton loading={ isLoading }>
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
index 2b4fb549d0..e15932c20f 100644
--- a/ui/pages/Address.tsx
+++ b/ui/pages/Address.tsx
@@ -62,7 +62,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-const TOKEN_TABS = [ 'tokens_erc20', 'tokens_nfts', 'tokens_nfts_collection', 'tokens_nfts_list' ];
+const TOKEN_TABS = [ 'tokens_erc20', 'tokens_nfts', 'tokens_nfts_collection', 'tokens_nfts_list', 'tokens_erc7984' ];
 const PREDEFINED_TAG_PRIORITY = 100;
 
 const txInterpretation = config.features.txInterpretation;
diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts
index 70f5f90797..388566de1b 100644
--- a/ui/shared/search/utils.ts
+++ b/ui/shared/search/utils.ts
@@ -15,7 +15,8 @@ export type ApiCategory =
   'blob' |
   'domain' |
   'cluster' |
-  'tac_operation';
+  'tac_operation' |
+  'confidential_token';
 export type Category = ApiCategory | 'app' | 'zetaChainCCTX';
 
 export type ItemsCategoriesMap =
@@ -32,6 +33,7 @@ export const searchCategories: Array<{ id: Category; title: string; tabTitle: st
   { id: 'app', title: 'DApps', tabTitle: 'DApps' },
   { id: 'token', title: `Tokens (${ config.chain.tokenStandard }-20)`, tabTitle: 'Tokens' },
   { id: 'nft', title: `NFTs (${ config.chain.tokenStandard }-721 & 1155)`, tabTitle: 'NFTs' },
+  { id: 'confidential_token', title: `Confidential Tokens (${ config.chain.tokenStandard }-7984)`, tabTitle: 'Confidential Tokens' },
   { id: 'address', title: 'Addresses', tabTitle: 'Addresses' },
   { id: 'public_tag', title: 'Public tags', tabTitle: 'Public tags' },
   { id: 'transaction', title: 'Transactions', tabTitle: 'Transactions' },
@@ -62,6 +64,7 @@ export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleSh
   cluster: { itemTitle: 'Cluster', itemTitleShort: 'Cluster' },
   token: { itemTitle: 'Token', itemTitleShort: 'Token' },
   nft: { itemTitle: 'NFT', itemTitleShort: 'NFT' },
+  confidential_token: { itemTitle: 'Confidential Token', itemTitleShort: 'Conf. Token' },
   address: { itemTitle: 'Address', itemTitleShort: 'Address' },
   public_tag: { itemTitle: 'Public tag', itemTitleShort: 'Tag' },
   transaction: { itemTitle: 'Transaction', itemTitleShort: 'Txn' },
@@ -83,6 +86,9 @@ export function getItemCategory(item: SearchResultItem | SearchResultAppItem): C
       if (item.token_type === 'ERC-20') {
         return 'token';
       }
+      if (item.token_type === 'ERC-7984') {
+        return 'confidential_token';
+      }
       return 'nft';
     }
     case 'block': {
diff --git a/ui/token/TokenDetails.tsx b/ui/token/TokenDetails.tsx
index 2822bbf5e7..f0e49e25e6 100644
--- a/ui/token/TokenDetails.tsx
+++ b/ui/token/TokenDetails.tsx
@@ -133,28 +133,32 @@ const TokenDetails = ({ tokenQuery }: Props) => {
         </>
       ) }
 
-      <DetailedInfo.ItemLabel
-        hint="The total amount of tokens issued"
-        isLoading={ tokenQuery.isPlaceholderData }
-      >
-        Max total supply
-      </DetailedInfo.ItemLabel>
-      <DetailedInfo.ItemValue
-        alignSelf="center"
-        wordBreak="break-word"
-        whiteSpace="pre-wrap"
-      >
-        <Skeleton loading={ tokenQuery.isPlaceholderData } w="100%" display="flex">
-          <TruncatedValue
-            value={ totalSupplyValue || '0' }
-            maxW="80%"
-            flexShrink={ 0 }
-            tooltipContent={ totalSupplyValueFull !== totalSupplyValue ? totalSupplyValueFull : undefined }
-          />
-          <Box flexShrink={ 0 }> </Box>
-          <TruncatedValue value={ symbol || '' }/>
-        </Skeleton>
-      </DetailedInfo.ItemValue>
+      { type !== 'ERC-7984' && (
+        <>
+          <DetailedInfo.ItemLabel
+            hint="The total amount of tokens issued"
+            isLoading={ tokenQuery.isPlaceholderData }
+          >
+            Max total supply
+          </DetailedInfo.ItemLabel>
+          <DetailedInfo.ItemValue
+            alignSelf="center"
+            wordBreak="break-word"
+            whiteSpace="pre-wrap"
+          >
+            <Skeleton loading={ tokenQuery.isPlaceholderData } w="100%" display="flex">
+              <TruncatedValue
+                value={ totalSupplyValue || '0' }
+                maxW="80%"
+                flexShrink={ 0 }
+                tooltipContent={ totalSupplyValueFull !== totalSupplyValue ? totalSupplyValueFull : undefined }
+              />
+              <Box flexShrink={ 0 }> </Box>
+              <TruncatedValue value={ symbol || '' }/>
+            </Skeleton>
+          </DetailedInfo.ItemValue>
+        </>
+      ) }
 
       <DetailedInfo.ItemLabel
         hint="Number of accounts holding the token"
diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx
index 273cbf8ca6..17afc825ed 100644
--- a/ui/token/TokenTransfer/TokenTransferListItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx
@@ -93,6 +93,23 @@ const TokenTransferListItem = ({
           ) }
         </Grid>
       ) }
+      { token && token.type === 'ERC-7984' && (
+        <Grid gap={ 2 } templateColumns="1fr auto auto">
+          <Skeleton loading={ isLoading } flexShrink={ 0 } fontWeight={ 500 }>
+            Value
+          </Skeleton>
+          <Skeleton
+            loading={ isLoading }
+            color="text.secondary"
+            wordBreak="break-all"
+            overflow="hidden"
+            flexGrow={ 1 }
+          >
+            <span>•••••</span>
+          </Skeleton>
+          { token.symbol && <TruncatedValue isLoading={ isLoading } value={ token.symbol }/> }
+        </Grid>
+      ) }
       { total && 'token_id' in total && token && (NFT_TOKEN_TYPE_IDS.includes(token.type)) && total.token_id !== null && (
         <NftEntity
           hash={ token.address_hash }
diff --git a/ui/token/TokenTransfer/TokenTransferTable.tsx b/ui/token/TokenTransfer/TokenTransferTable.tsx
index 5de885ea6e..14959e0408 100644
--- a/ui/token/TokenTransfer/TokenTransferTable.tsx
+++ b/ui/token/TokenTransfer/TokenTransferTable.tsx
@@ -41,8 +41,8 @@ const TokenTransferTable = ({ data, top, showSocketInfo, showSocketErrorAlert, s
             { (NFT_TOKEN_TYPE_IDS.includes(tokenType)) &&
               <TableColumnHeader width={ tokenType === 'ERC-1155' || tokenType === 'ERC-404' ? '50%' : '100%' }>Token ID</TableColumnHeader>
             }
-            { (tokenType === 'ERC-20' || tokenType === 'ERC-1155' || tokenType === 'ERC-404') && (
-              <TableColumnHeader width={ tokenType === 'ERC-20' ? '100%' : '50%' } isNumeric>
+            { (tokenType === 'ERC-20' || tokenType === 'ERC-1155' || tokenType === 'ERC-404' || tokenType === 'ERC-7984') && (
+              <TableColumnHeader width={ tokenType === 'ERC-20' || tokenType === 'ERC-7984' ? '100%' : '50%' } isNumeric>
                 <TruncatedValue value={ `Value ${ token?.symbol || '' }` } w="100%" verticalAlign="middle"/>
               </TableColumnHeader>
             ) }
diff --git a/ui/token/TokenTransfer/TokenTransferTableItem.tsx b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
index 018e0e0796..183e09c5de 100644
--- a/ui/token/TokenTransfer/TokenTransferTableItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
@@ -89,17 +89,25 @@ const TokenTransferTableItem = ({
           }
         </TableCell>
       ) }
-      { token && (token.type === 'ERC-20' || token.type === 'ERC-1155' || token.type === 'ERC-404') && (
+      { token && (token.type === 'ERC-20' || token.type === 'ERC-1155' || token.type === 'ERC-404' || token.type === 'ERC-7984') && (
         <TableCell isNumeric verticalAlign="top">
-          { valueStr && (
+          { token.type === 'ERC-7984' ? (
             <Skeleton loading={ isLoading } display="inline-block" mt="7px" wordBreak="break-all">
-              { valueStr }
-            </Skeleton>
-          ) }
-          { usd && (
-            <Skeleton loading={ isLoading } color="text.secondary" mt="10px" wordBreak="break-all">
-              <span>${ usd }</span>
+              •••••
             </Skeleton>
+          ) : (
+            <>
+              { valueStr && (
+                <Skeleton loading={ isLoading } display="inline-block" mt="7px" wordBreak="break-all">
+                  { valueStr }
+                </Skeleton>
+              ) }
+              { usd && (
+                <Skeleton loading={ isLoading } color="text.secondary" mt="10px" wordBreak="break-all">
+                  <span>${ usd }</span>
+                </Skeleton>
+              ) }
+            </>
           ) }
         </TableCell>
       ) }

From 1ae89abf9da74e704aec86dd70a3a471659fb795 Mon Sep 17 00:00:00 2001
From: Maksym Zub <kroistsmeh@gmail.com>
Date: Tue, 11 Nov 2025 23:04:47 +0100
Subject: [PATCH 2/2] minor fix

---
 .../TokenTransferSnippet.tsx                  | 19 ++++++++++++++++++-
 .../TokenHolders/TokenHoldersListItem.tsx     |  2 +-
 .../TokenHolders/TokenHoldersTableItem.tsx    |  2 +-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
index ee6ce1c80f..b93a9af4ea 100644
--- a/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
+++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type {
@@ -11,6 +11,7 @@ import type {
 
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 import TokenTransferSnippetFiat from './TokenTransferSnippetFiat';
 import TokenTransferSnippetNft from './TokenTransferSnippetNft';
@@ -85,6 +86,22 @@ const TokenTransferSnippet = ({ data, isLoading, noAddressIcons = true }: Props)
           return <TokenTransferSnippetFiat token={ data.token } value={ total.value } decimals={ total.decimals }/>;
         }
       }
+
+      case 'ERC-7984': {
+        return (
+          <>
+            <chakra.span color="text.secondary">for</chakra.span>
+            <span>•••••</span>
+            <TokenEntity
+              token={{ ...data.token, name: data.token.symbol || data.token.name }}
+              noCopy
+              noSymbol
+              w="auto"
+            />
+          </>
+        );
+      }
+
       default: {
         return null;
       }
diff --git a/ui/token/TokenHolders/TokenHoldersListItem.tsx b/ui/token/TokenHolders/TokenHoldersListItem.tsx
index bcaac5fe90..b98b3e45fd 100644
--- a/ui/token/TokenHolders/TokenHoldersListItem.tsx
+++ b/ui/token/TokenHolders/TokenHoldersListItem.tsx
@@ -42,7 +42,7 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Quantity</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Skeleton loading={ isLoading } display="inline-block">
-          { quantity }
+          { token.type === 'ERC-7984' ? '•••••' : quantity }
         </Skeleton>
       </ListItemMobileGrid.Value>
 
diff --git a/ui/token/TokenHolders/TokenHoldersTableItem.tsx b/ui/token/TokenHolders/TokenHoldersTableItem.tsx
index bb9a3734d8..6a4872412c 100644
--- a/ui/token/TokenHolders/TokenHoldersTableItem.tsx
+++ b/ui/token/TokenHolders/TokenHoldersTableItem.tsx
@@ -35,7 +35,7 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
       ) }
       <TableCell verticalAlign="middle" isNumeric>
         <Skeleton loading={ isLoading } display="inline-block" wordBreak="break-word">
-          { quantity }
+          { token.type === 'ERC-7984' ? '•••••' : quantity }
         </Skeleton>
       </TableCell>
       { token.total_supply && token.type !== 'ERC-404' && (