Merge pull request #1735 from blockscout/fe-1725

Add support of ERC-404 type

lib/socket/types.ts

@@ -22,6 +22,7 @@ SocketMessage.AddressTokenBalance |
 SocketMessage.AddressTokenBalancesErc20 |
 SocketMessage.AddressTokenBalancesErc721 |
 SocketMessage.AddressTokenBalancesErc1155 |
+SocketMessage.AddressTokenBalancesErc404 |
 SocketMessage.AddressCoinBalance |
 SocketMessage.AddressTxs |
 SocketMessage.AddressTxsPending |
@@ -57,6 +58,7 @@ export namespace SocketMessage {
   export type AddressTokenBalancesErc20 = SocketMessageParamsGeneric<'updated_token_balances_erc_20', AddressTokensBalancesSocketMessage>;
   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 AddressCoinBalance = SocketMessageParamsGeneric<'coin_balance', { coin_balance: AddressCoinBalanceHistoryItem }>;
   export type AddressTxs = SocketMessageParamsGeneric<'transaction', { transactions: Array<Transaction> }>;
   export type AddressTxsPending = SocketMessageParamsGeneric<'pending_transaction', { transactions: Array<Transaction> }>;

lib/token/tokenTypes.ts

@@ -3,6 +3,7 @@ import type { NFTTokenType, TokenType } from 'types/api/token';
 export const NFT_TOKEN_TYPES: Array<{ title: string; id: NFTTokenType }> = [
   { title: 'ERC-721', id: 'ERC-721' },
   { title: 'ERC-1155', id: 'ERC-1155' },
+  { title: 'ERC-404', id: 'ERC-404' },
 ];
 
 export const TOKEN_TYPES: Array<{ title: string; id: TokenType }> = [

mocks/address/tokens.ts

@@ -105,6 +105,20 @@ export const erc1155LongId: AddressTokenBalance = {
   value: '42',
 };
 
+export const erc404a: AddressTokenBalance = {
+  token: tokens.tokenInfoERC404,
+  token_id: '42',
+  token_instance: tokenInstance.base,
+  value: '240000000000000',
+};
+
+export const erc404b: AddressTokenBalance = {
+  token: tokens.tokenInfoERC404,
+  token_instance: null,
+  value: '11',
+  token_id: null,
+};
+
 export const erc20List = {
   items: [
     erc20a,
@@ -129,6 +143,13 @@ export const erc1155List = {
   ],
 };
 
+export const erc404List = {
+  items: [
+    erc404a,
+    erc404b,
+  ],
+};
+
 export const nfts: AddressNFTsResponse = {
   items: [
     {
@@ -143,6 +164,12 @@ export const nfts: AddressNFTsResponse = {
       token_type: 'ERC-721',
       value: '1',
     },
+    {
+      ...tokenInstance.unique,
+      token: tokens.tokenInfoERC404,
+      token_type: 'ERC-404',
+      value: '11000',
+    },
   ],
   next_page_params: null,
 };

mocks/tokens/tokenInfo.ts

@@ -28,7 +28,7 @@ export const tokenInfoERC20a: TokenInfo<'ERC-20'> = {
   symbol: 'HyFi',
   total_supply: '369000000000000000000000000',
   type: 'ERC-20',
-  icon_url: 'https://example.com/token-icon.png',
+  icon_url: 'http://localhost:3000/token-icon.png',
 };
 
 export const tokenInfoERC20b: TokenInfo<'ERC-20'> = {
@@ -174,6 +174,19 @@ export const tokenInfoERC1155WithoutName: TokenInfo<'ERC-1155'> = {
   icon_url: null,
 };
 
+export const tokenInfoERC404: TokenInfo<'ERC-404'> = {
+  address: '0xB5C457dDB4cE3312a6C5a2b056a1652bd542a208',
+  circulating_market_cap: '0.0',
+  decimals: '18',
+  exchange_rate: '1484.13',
+  holders: '81',
+  icon_url: null,
+  name: 'OMNI404',
+  symbol: 'O404',
+  total_supply: '6482275000000000000',
+  type: 'ERC-404',
+};
+
 export const bridgedTokenA: TokenInfo<'ERC-20'> = {
   ...tokenInfoERC20a,
   is_bridged: true,

mocks/tokens/tokenTransfer.ts

@@ -170,6 +170,63 @@ export const erc1155D: TokenTransfer = {
   total: { token_id: '456', value: '42', decimals: null },
 };
 
+export const erc404A: TokenTransfer = {
+  from: {
+    hash: '0x0000000000000000000000000000000000000000',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+    ens_domain_name: null,
+  },
+  to: {
+    hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+    ens_domain_name: 'kitty.kitty.cat.eth',
+  },
+  token: {
+    address: '0xF56b7693E4212C584de4a83117f805B8E89224CB',
+    circulating_market_cap: null,
+    decimals: null,
+    exchange_rate: null,
+    holders: '1',
+    name: null,
+    symbol: 'MY_SYMBOL_IS_VERY_LONG',
+    type: 'ERC-404',
+    total_supply: '0',
+    icon_url: null,
+  },
+  total: {
+    value: '42000000000000000000000000',
+    decimals: '18',
+  },
+  tx_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
+  type: 'token_transfer',
+  method: 'swap',
+  timestamp: '2022-10-10T14:34:30.000000Z',
+  block_hash: '1',
+  log_index: '1',
+};
+
+export const erc404B: TokenTransfer = {
+  ...erc404A,
+  token: {
+    ...erc404A.token,
+    name: 'SastanaNFT',
+    symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
+  },
+  total: { token_id: '4625304364899952' },
+};
+
 export const mixTokens: TokenTransferResponse = {
   items: [
     erc20,
@@ -178,6 +235,8 @@ export const mixTokens: TokenTransferResponse = {
     erc1155B,
     erc1155C,
     erc1155D,
+    erc404A,
+    erc404B,
   ],
   next_page_params: null,
 };

mocks/txs/tx.ts

@@ -127,6 +127,8 @@ export const withTokenTransfer: Transaction = {
     tokenTransferMock.erc1155B,
     tokenTransferMock.erc1155C,
     tokenTransferMock.erc1155D,
+    tokenTransferMock.erc404A,
+    tokenTransferMock.erc404B,
   ],
   token_transfers_overflow: true,
   tx_types: [

playwright/fixtures/socketServer.ts

@@ -62,6 +62,7 @@ export function sendMessage(socket: WebSocket, channel: Channel, msg: 'token_bal
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_20', payload: AddressTokensBalancesSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_721', payload: AddressTokensBalancesSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_1155', payload: AddressTokensBalancesSocketMessage): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_404', payload: AddressTokensBalancesSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'transaction', payload: { transaction: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'transaction', payload: { transactions: Array<Transaction> }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'pending_transaction', payload: { pending_transaction: number }): void;

stubs/address.ts

@@ -10,7 +10,7 @@ import type {
 import type { AddressesItem } from 'types/api/addresses';
 
 import { ADDRESS_HASH } from './addressParams';
-import { TOKEN_INFO_ERC_1155, TOKEN_INFO_ERC_20, TOKEN_INFO_ERC_721, TOKEN_INSTANCE } from './token';
+import { TOKEN_INFO_ERC_1155, TOKEN_INFO_ERC_20, TOKEN_INFO_ERC_721, TOKEN_INFO_ERC_404, TOKEN_INSTANCE } from './token';
 import { TX_HASH } from './tx';
 
 export const ADDRESS_INFO: Address = {
@@ -104,6 +104,13 @@ export const ADDRESS_NFT_1155: AddressNFT = {
   ...TOKEN_INSTANCE,
 };
 
+export const ADDRESS_NFT_404: AddressNFT = {
+  token_type: 'ERC-404',
+  token: TOKEN_INFO_ERC_404,
+  value: '10',
+  ...TOKEN_INSTANCE,
+};
+
 export const ADDRESS_COLLECTION: AddressCollection = {
   token: TOKEN_INFO_ERC_1155,
   amount: '4',

stubs/token.ts

@@ -1,4 +1,13 @@
-import type { TokenCounters, TokenHolder, TokenInfo, TokenInstance, TokenType } from 'types/api/token';
+import type {
+  TokenCounters,
+  TokenHolder,
+  TokenHolders,
+  TokenHoldersPagination,
+  TokenInfo,
+  TokenInstance,
+  TokenType,
+} from 'types/api/token';
+import type { TokenInstanceTransferPagination, TokenInstanceTransferResponse } from 'types/api/tokens';
 import type { TokenTransfer, TokenTransferPagination, TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
@@ -31,6 +40,12 @@ export const TOKEN_INFO_ERC_1155: TokenInfo<'ERC-1155'> = {
   type: 'ERC-1155',
 };
 
+export const TOKEN_INFO_ERC_404: TokenInfo<'ERC-404'> = {
+  ...TOKEN_INFO_ERC_20,
+  circulating_market_cap: null,
+  type: 'ERC-404',
+};
+
 export const TOKEN_COUNTERS: TokenCounters = {
   token_holders_count: '123456',
   transfers_count: '123456',
@@ -47,6 +62,32 @@ export const TOKEN_HOLDER_ERC_1155: TokenHolder = {
   value: '1021378038331138520',
 };
 
+export const getTokenHoldersStub = (type?: TokenType, pagination: TokenHoldersPagination | null = null): TokenHolders => {
+  switch (type) {
+    case 'ERC-721':
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_20, 50, { next_page_params: pagination });
+    case 'ERC-1155':
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_1155, 50, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_1155, 50, { next_page_params: pagination });
+    default:
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_20, 50, { next_page_params: pagination });
+  }
+};
+
+export const getTokenInstanceHoldersStub = (type?: TokenType, pagination: TokenHoldersPagination | null = null): TokenHolders => {
+  switch (type) {
+    case 'ERC-721':
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_20, 10, { next_page_params: pagination });
+    case 'ERC-1155':
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_1155, 10, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_1155, 10, { next_page_params: pagination });
+    default:
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_20, 10, { next_page_params: pagination });
+  }
+};
+
 export const TOKEN_TRANSFER_ERC_20: TokenTransfer = {
   block_hash: BLOCK_HASH,
   from: ADDRESS_PARAMS,
@@ -81,17 +122,42 @@ export const TOKEN_TRANSFER_ERC_1155: TokenTransfer = {
   token: TOKEN_INFO_ERC_1155,
 };
 
+export const TOKEN_TRANSFER_ERC_404: TokenTransfer = {
+  ...TOKEN_TRANSFER_ERC_20,
+  total: {
+    token_id: '35870',
+    value: '123',
+    decimals: '18',
+  },
+  token: TOKEN_INFO_ERC_404,
+};
+
 export const getTokenTransfersStub = (type?: TokenType, pagination: TokenTransferPagination | null = null): TokenTransferResponse => {
   switch (type) {
     case 'ERC-721':
       return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_721, 50, { next_page_params: pagination });
     case 'ERC-1155':
       return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_1155, 50, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_404, 50, { next_page_params: pagination });
     default:
       return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_20, 50, { next_page_params: pagination });
   }
 };
 
+export const getTokenInstanceTransfersStub = (type?: TokenType, pagination: TokenInstanceTransferPagination | null = null): TokenInstanceTransferResponse => {
+  switch (type) {
+    case 'ERC-721':
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_721, 10, { next_page_params: pagination });
+    case 'ERC-1155':
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_1155, 10, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_404, 10, { next_page_params: pagination });
+    default:
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_20, 10, { next_page_params: pagination });
+  }
+};
+
 export const TOKEN_INSTANCE: TokenInstance = {
   animation_url: null,
   external_app_url: 'https://vipsland.com/nft/collections/genesis/188882',

types/api/token.ts

@@ -1,7 +1,7 @@
 import type { TokenInfoApplication } from './account';
 import type { AddressParam } from './addressParams';
 
-export type NFTTokenType = 'ERC-721' | 'ERC-1155';
+export type NFTTokenType = 'ERC-721' | 'ERC-1155' | 'ERC-404';
 export type TokenType = 'ERC-20' | NFTTokenType;
 
 export interface TokenInfo<T extends TokenType = TokenType> {

types/api/tokenTransfer.ts

@@ -16,6 +16,13 @@ export type Erc1155TotalPayload = {
   token_id: string | null;
 }
 
+export type Erc404TotalPayload = {
+  decimals: string | null;
+  value: string | null;
+} | {
+  token_id: string | null;
+};
+
 export type TokenTransfer = (
   {
     token: TokenInfo<'ERC-20'>;
@@ -28,6 +35,10 @@ export type TokenTransfer = (
   {
     token: TokenInfo<'ERC-1155'>;
     total: Erc1155TotalPayload;
+  } |
+  {
+    token: TokenInfo<'ERC-404'>;
+    total: Erc404TotalPayload;
   }
 ) & TokenTransferBase
 

types/api/txStateChanges.ts

@@ -41,6 +41,13 @@ export interface TxStateChangeTokenErc1155 {
   token_id: string;
 }
 
+export interface TxStateChangeTokenErc404 {
+  type: 'token';
+  token: TokenInfo<'ERC-404'>;
+  change: string;
+  token_id: string;
+}
+
 export type TxStateChanges = {
   items: Array<TxStateChange>;
   next_page_params: {

ui/address/AddressDetails.pw.tsx

@@ -20,6 +20,7 @@ const API_URL_COUNTERS = buildApiUrl('address_counters', { hash: ADDRESS_HASH })
 const API_URL_TOKENS_ERC20 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-20';
 const API_URL_TOKENS_ERC721 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-721';
 const API_URL_TOKENS_ER1155 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-1155';
+const API_URL_TOKENS_ERC404 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-404';
 const hooksConfig = {
   router: {
     query: { hash: ADDRESS_HASH },
@@ -70,6 +71,10 @@ test('token', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(tokensMock.erc1155List),
   }), { times: 1 });
+  await page.route(API_URL_TOKENS_ERC404, async(route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(tokensMock.erc404List),
+  }), { times: 1 });
 
   await page.evaluate(() => {
     window.ethereum = {