Merge branch 'main' of github.com:blockscout/frontend into 422-errors

configs/app/config.ts

@@ -90,12 +90,14 @@ const config = Object.freeze({
     adButlerOn: getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_ON) === 'true',
   },
   api: {
+    host: apiHost,
     endpoint: apiHost ? `https://${ apiHost }` : 'https://blockscout.com',
     socket: apiHost ? `wss://${ apiHost }` : 'wss://blockscout.com',
     basePath: stripTrailingSlash(getEnvValue(process.env.NEXT_PUBLIC_API_BASE_PATH) || ''),
   },
   statsApi: {
     endpoint: getEnvValue(process.env.NEXT_PUBLIC_STATS_API_HOST),
+    basePath: '',
   },
   homepage: {
     charts: parseEnvJson<Array<ChainIndicatorId>>(getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_CHARTS)) || [],

configs/envs/.env.goerli

@@ -16,6 +16,7 @@ NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
 NEXT_PUBLIC_MARKETPLACE_APP_LIST=[{'author': 'Blockscout','id':'token-approval-tracker','title':'Token Approval Tracker','logo':'https://approval-tracker.vercel.app/icon-192.png','categories':['security','tools'],'shortDescription':'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.','site':'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker','description':'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.','url':'https://approval-tracker.vercel.app/'},{'author': 'Revoke','id':'revoke.cash','title':'Revoke.cash','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FVBMGyUFnd6CScjfK7CYQ%252Frevoke_sing.png%3Falt%3Dmedia%26token%3D9ab94986-7ab1-41c8-bf7e-d9ce11d23182','categories':['security','tools'],'shortDescription': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','site': 'https://revoke.cash/about','description': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','url':'https://revoke.cash/'},{'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrZkUTIUCG7Zx8BW6Em34%252FAave.png%3Falt%3Dmedia%26token%3D249797a4-4c1e-4372-9cd2-3e48e05e5f30','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'},{'author':'LooksRare','id':'looksrare','external':true,'title':'LooksRare','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FeAI4gy3qPMt68mZOZHAx%252FLooksRare.png%3Falt%3Dmedia%26token%3D44c01439-ae09-40aa-b904-3a9ce5b2e002','categories':['tools'],'shortDescription': 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','site':'https://docs.looksrare.org/about/welcome-to-looksrare','description':'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','url': 'https://goerli.looksrare.org/'},{'author':'zkSync Bridge','id':'zksync-bridge','external':true,'title':'zkSync Bridge','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrtQsaAz9BjGBc35tVAnq%252FzkSync.png%3Falt%3Dmedia%26token%3D5c18171c-8ccf-4a88-8f44-680cbf238115','categories':['security','tools'],'shortDescription':'zkSync 2.0 Goerli Bridge','site':'https://v2-docs.zksync.io/dev/','description':'zkSync 2.0 Goerli Bridge','url':'https://portal.zksync.io/bridge'},{'author':'dYdX','id':'dydx','external':true,'title':'dYdX','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FCrOglR72wpi0UhEscwe4%252Fdxdy.png%3Falt%3Dmedia%26token%3D8811909e-93e3-487c-9614-dffce37223e9','categories': ['security','tools'],'shortDescription':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','site':'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview','description':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','url':'https://trade.stage.dydx.exchange/portfolio/overview'},{'author':'MetalSwap','id':'metalswap','title':'MetalSwap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252F8xqldTvxb6avrwVVc3rS%252FMetalSwap.png%3Falt%3Dmedia%26token%3D92d2db99-853a-487d-8d8c-8cdeaeaaf014','categories':['security','tools'],'shortDescription':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','site':'https://docs.metalswap.finance/','description':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','url':'https://demo.metalswap.finance/'},{'author':'FaucetDao','id':'faucetdao','title':'FaucetDao','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252Ffnnt3ZNZhzRwqMM5YYjD%252FPlaceholder.png%3Falt%3Dmedia%26token%3D507571bb-d76f-4d96-a35e-2b278608f7ca','categories':['tools'],'shortDescription':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','site':'https://linktr.ee/faucet_dao','description':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','url':'https://www.faucetdao.shop/swap?chain=goerli'},{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FJc0QAyeaBmFIL97tSmGv%252FUniswap.png%3Falt%3Dmedia%26token%3D5d25d796-c273-4e22-92fa-ff85206bec76','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}]
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 
 # api config
 NEXT_PUBLIC_API_HOST=blockscout-main.test.aws-k8s.blockscout.com

configs/nextjs/rewrites.js

 async function rewrites() {
   return [
+    { source: '/node-api/proxy/:slug*', destination: '/api/proxy' },
     { source: '/node-api/:slug*', destination: '/api/:slug*' },
   ].filter(Boolean);
 }

deploy/values/review/values.yaml

@@ -307,6 +307,7 @@ frontend:
         - "/"
       prefix:
       # - "/(apps|auth/profile|account)"
+        - "/account"
         - "/apps"
         - "/_next"
         - "/node-api"

icons/svg_file.svg

+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 3c0-.184.15-.333.333-.333h4.334v2c0 .368.298.666.666.666h2v1.334h1.334v-.92c0-.441-.176-.865-.489-1.178L9.431 1.822a1.667 1.667 0 0 0-1.179-.489H4.333c-.92 0-1.666.747-1.666 1.667v3.667H4V3Zm0 10v-1H2.667v1c0 .92.746 1.667 1.666 1.667H11c.92 0 1.667-.746 1.667-1.667v-1h-1.334v1a.333.333 0 0 1-.333.333H4.333A.333.333 0 0 1 4 13Zm1.167-5.833H4.75c-.575 0-1.042.466-1.042 1.041v2.084c0 .575.466 1.041 1.042 1.041h.417a1.04 1.04 0 0 0 1.041-1.041v-.209a.418.418 0 0 0-.416-.416.418.418 0 0 0-.417.416v.209a.209.209 0 0 1-.208.208H4.75a.209.209 0 0 1-.208-.208V8.208c0-.114.093-.208.208-.208h.417a.21.21 0 0 1 .208.208v.209a.417.417 0 0 0 .833 0v-.209a1.04 1.04 0 0 0-1.041-1.041Zm2.666 0a1.21 1.21 0 0 0-.599 2.258l.662.377a.375.375 0 0 1-.188.7h-.666a.418.418 0 0 0-.417.417c0 .23.188.417.417.417h.666a1.21 1.21 0 0 0 .6-2.258l-.662-.377a.375.375 0 0 1 .188-.7h.458a.418.418 0 0 0 0-.833h-.459Zm2.125.416v.823c0 .6.144 1.188.417 1.719a3.737 3.737 0 0 0 .417-1.719v-.823a.417.417 0 0 1 .833 0v.823a4.58 4.58 0 0 1-.77 2.542l-.134.2a.415.415 0 0 1-.692 0l-.133-.2a4.58 4.58 0 0 1-.771-2.542v-.823a.417.417 0 0 1 .833 0Z" fill="currentColor"/>
+</svg>

lib/api/buildUrl.ts

+import { compile } from 'path-to-regexp';
+
+import appConfig from 'configs/app/config';
+
+import type { ApiResource } from './resources';
+
+export default function buildUrl(
+  resource: ApiResource,
+  pathParams?: Record<string, string | undefined>,
+  queryParams?: Record<string, string | number | undefined>,
+) {
+  // FIXME
+  // 1. I was not able to figure out how to send CORS with credentials from localhost
+  //    unsuccessfully tried different ways, even custom local dev domain
+  //    so for local development we have to use next.js api as proxy server
+  // 2. and there is an issue with API and csrf token
+  //    for some reason API will reply with error "Bad request" to any PUT / POST CORS request
+  //    even though valid csrf-token is passed in header
+  //    we also can pass token in request body but in this case API will replay with "Forbidden" error
+  //    @nikitosing said it will take a lot of time to debug this problem on back-end side, maybe he'll change his mind in future :)
+  // To sum up, we are using next.js proxy for all instances where app host is not the same as API host (incl. localhost)
+  // will need to change the condition if there are more micro services that need authentication and DB state changes
+  const needProxy = appConfig.host !== appConfig.api.host;
+
+  const baseUrl = needProxy ? appConfig.baseUrl : (resource.endpoint || appConfig.api.endpoint);
+  const basePath = resource.basePath !== undefined ? resource.basePath : appConfig.api.basePath;
+  const path = needProxy ? '/node-api/proxy' + basePath + resource.path : basePath + resource.path;
+  const url = new URL(compile(path)(pathParams), baseUrl);
+
+  queryParams && Object.entries(queryParams).forEach(([ key, value ]) => {
+    value && url.searchParams.append(key, String(value));
+  });
+
+  return url.toString();
+}

lib/api/fetch.ts

@@ -13,10 +13,12 @@ export default function fetchFactory(
   apiEndpoint: string = appConfig.api.endpoint,
 ) {
   return function fetch(path: string, init?: RequestInit): Promise<Response> {
+    const csrfToken = _req.headers['x-csrf-token']?.toString();
     const headers = {
       accept: 'application/json',
       'content-type': 'application/json',
       cookie: `${ cookies.NAMES.API_TOKEN }=${ _req.cookies[cookies.NAMES.API_TOKEN] }`,
+      ...(csrfToken ? { 'x-csrf-token': csrfToken } : {}),
     };
     const url = new URL(path, apiEndpoint);
 

lib/api/resources.ts

+import type { UserInfo, CustomAbis, PublicTags, AddressTags, TransactionTags, ApiKeys, WatchlistAddress } from 'types/api/account';
+import type {
+  Address,
+  AddressCounters,
+  AddressTokenBalance,
+  AddressTransactionsResponse,
+  AddressTokenTransferResponse,
+  AddressCoinBalanceHistoryResponse,
+  AddressCoinBalanceHistoryChart,
+  AddressBlocksValidatedResponse,
+  AddressInternalTxsResponse,
+  AddressTxsFilters,
+  AddressTokenTransferFilters,
+} from 'types/api/address';
+import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters } from 'types/api/block';
+import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
+import type { IndexingStatus } from 'types/api/indexingStatus';
+import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
+import type { JsonRpcUrlResponse } from 'types/api/jsonRpcUrl';
+import type { LogsResponse } from 'types/api/log';
+import type { RawTracesResponse } from 'types/api/rawTrace';
+import type { Stats, Charts, HomeStats } from 'types/api/stats';
+import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
+import type { TransactionsResponseValidated, TransactionsResponsePending, Transaction } from 'types/api/transaction';
+import type { TTxsFilters } from 'types/api/txsFilters';
+import type ArrayElement from 'types/utils/ArrayElement';
+
+import appConfig from 'configs/app/config';
+
+export interface ApiResource {
+  path: string;
+  endpoint?: string;
+  basePath?: string;
+}
+
+export const RESOURCES = {
+  // ACCOUNT
+  user_info: {
+    path: '/api/account/v1/user/info',
+  },
+  custom_abi: {
+    path: '/api/account/v1/user/custom_abis/:id?',
+  },
+  watchlist: {
+    path: '/api/account/v1/user/watchlist/:id?',
+  },
+  public_tags: {
+    path: '/api/account/v1/user/public_tags/:id?',
+  },
+  private_tags_address: {
+    path: '/api/account/v1/user/tags/address/:id?',
+  },
+  private_tags_tx: {
+    path: '/api/account/v1/user/tags/transaction/:id?',
+  },
+  api_keys: {
+    path: '/api/account/v1/user/api_keys/:id?',
+  },
+
+  // STATS
+  stats_counters: {
+    path: '/api/v1/counters',
+    endpoint: appConfig.statsApi.endpoint,
+    basePath: appConfig.statsApi.basePath,
+  },
+  stats_charts: {
+    path: '/api/v1/charts/line',
+    endpoint: appConfig.statsApi.endpoint,
+    basePath: appConfig.statsApi.basePath,
+  },
+
+  // BLOCKS, TXS
+  blocks: {
+    path: '/api/v2/blocks',
+    paginationFields: [ 'block_number' as const, 'items_count' as const ],
+    filterFields: [ 'type' as const ],
+  },
+  block: {
+    path: '/api/v2/blocks/:id',
+  },
+  block_txs: {
+    path: '/api/v2/blocks/:id/transactions',
+    paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const ],
+    filterFields: [],
+  },
+  txs_validated: {
+    path: '/api/v2/transactions',
+    paginationFields: [ 'block_number' as const, 'items_count' as const, 'filter' as const, 'index' as const ],
+    filterFields: [ 'filter' as const, 'type' as const, 'method' as const ],
+  },
+  txs_pending: {
+    path: '/api/v2/transactions',
+    paginationFields: [ 'filter' as const, 'hash' as const, 'inserted_at' as const ],
+    filterFields: [ 'filter' as const, 'type' as const, 'method' as const ],
+  },
+  tx: {
+    path: '/api/v2/transactions/:id',
+  },
+  tx_internal_txs: {
+    path: '/api/v2/transactions/:id/internal-transactions',
+    paginationFields: [ 'block_number' as const, 'items_count' as const, 'transaction_hash' as const, 'index' as const, 'transaction_index' as const ],
+    filterFields: [ ],
+  },
+  tx_logs: {
+    path: '/api/v2/transactions/:id/logs',
+    paginationFields: [ 'items_count' as const, 'transaction_hash' as const, 'index' as const ],
+    filterFields: [ ],
+  },
+  tx_token_transfers: {
+    path: '/api/v2/transactions/:id/token-transfers',
+    paginationFields: [ 'block_number' as const, 'items_count' as const, 'transaction_hash' as const, 'index' as const ],
+    filterFields: [ 'type' as const ],
+  },
+  tx_raw_trace: {
+    path: '/api/v2/transactions/:id/raw-trace',
+  },
+
+  // ADDRESS
+  address: {
+    path: '/api/v2/addresses/:id',
+  },
+  address_counters: {
+    path: '/api/v2/addresses/:id/counters',
+  },
+  address_token_balances: {
+    path: '/api/v2/addresses/:id/token-balances',
+  },
+  address_txs: {
+    path: '/api/v2/addresses/:id/transactions',
+    paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const ],
+    filterFields: [ 'filter' as const ],
+  },
+  address_internal_txs: {
+    path: '/api/v2/addresses/:id/internal-transactions',
+    paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const, 'transaction_index' as const ],
+    filterFields: [ 'filter' as const ],
+  },
+  address_token_transfers: {
+    path: '/api/v2/addresses/:id/token-transfers',
+    paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const, 'transaction_index' as const ],
+    filterFields: [ 'filter' as const, 'type' as const ],
+  },
+  address_blocks_validated: {
+    path: '/api/v2/addresses/:id/blocks-validated',
+    paginationFields: [ 'items_count' as const, 'block_number' as const ],
+    filterFields: [ ],
+  },
+  address_coin_balance: {
+    path: '/api/v2/addresses/:id/coin-balance-history',
+    paginationFields: [ 'items_count' as const, 'block_number' as const ],
+    filterFields: [ ],
+  },
+  address_coin_balance_chart: {
+    path: '/api/v2/addresses/:id/coin-balance-history-by-day',
+  },
+
+  // HOMEPAGE
+  homepage_stats: {
+    path: '/api/v2/stats',
+  },
+  homepage_chart_txs: {
+    path: '/api/v2/stats/charts/transactions',
+  },
+  homepage_chart_market: {
+    path: '/api/v2/stats/charts/market',
+  },
+  homepage_blocks: {
+    path: '/api/v2/main-page/blocks',
+  },
+  homepage_txs: {
+    path: '/api/v2/main-page/transactions',
+  },
+  homepage_indexing_status: {
+    path: '/api/v2/main-page/indexing-status',
+  },
+
+  // CONFIG
+  config_json_rpc: {
+    path: '/api/v2/config/json-rpc-url',
+  },
+
+  // DEPRECATED
+  old_api: {
+    path: '/api',
+  },
+};
+
+export type ResourceName = keyof typeof RESOURCES;
+
+export type ResourceFiltersKey<R extends ResourceName> = typeof RESOURCES[R] extends {filterFields: Array<unknown>} ?
+  ArrayElement<typeof RESOURCES[R]['filterFields']> :
+  never;
+
+export type ResourcePaginationKey<R extends ResourceName> = typeof RESOURCES[R] extends {paginationFields: Array<unknown>} ?
+  ArrayElement<typeof RESOURCES[R]['paginationFields']> :
+  never;
+
+export const resourceKey = (x: keyof typeof RESOURCES) => x;
+
+export interface ResourceError<T = unknown> {
+  error?: T;
+  payload?: T;
+  status: Response['status'];
+  statusText: Response['statusText'];
+}
+
+export type ResourceErrorAccount<T> = ResourceError<{ errors: T }>
+
+export type PaginatedResources = 'blocks' | 'block_txs' |
+'txs_validated' | 'txs_pending' |
+'tx_internal_txs' | 'tx_logs' | 'tx_token_transfers' |
+'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance';
+
+export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
+
+/* eslint-disable @typescript-eslint/indent */
+export type ResourcePayload<Q extends ResourceName> =
+Q extends 'user_info' ? UserInfo :
+Q extends 'custom_abi' ? CustomAbis :
+Q extends 'public_tags' ? PublicTags :
+Q extends 'private_tags_address' ? AddressTags :
+Q extends 'private_tags_tx' ? TransactionTags :
+Q extends 'api_keys' ? ApiKeys :
+Q extends 'watchlist' ? Array<WatchlistAddress> :
+Q extends 'homepage_stats' ? HomeStats :
+Q extends 'homepage_chart_txs' ? ChartTransactionResponse :
+Q extends 'homepage_chart_market' ? ChartMarketResponse :
+Q extends 'homepage_blocks' ? Array<Block> :
+Q extends 'homepage_txs' ? Array<Transaction> :
+Q extends 'homepage_indexing_status' ? IndexingStatus :
+Q extends 'stats_counters' ? Stats :
+Q extends 'stats_charts' ? Charts :
+Q extends 'blocks' ? BlocksResponse :
+Q extends 'block' ? Block :
+Q extends 'block_txs' ? BlockTransactionsResponse :
+Q extends 'txs_validated' ? TransactionsResponseValidated :
+Q extends 'txs_pending' ? TransactionsResponsePending :
+Q extends 'tx' ? Transaction :
+Q extends 'tx_internal_txs' ? InternalTransactionsResponse :
+Q extends 'tx_logs' ? LogsResponse :
+Q extends 'tx_token_transfers' ? TokenTransferResponse :
+Q extends 'tx_raw_trace' ? RawTracesResponse :
+Q extends 'address' ? Address :
+Q extends 'address_counters' ? AddressCounters :
+Q extends 'address_token_balances' ? Array<AddressTokenBalance> :
+Q extends 'address_txs' ? AddressTransactionsResponse :
+Q extends 'address_internal_txs' ? AddressInternalTxsResponse :
+Q extends 'address_token_transfers' ? AddressTokenTransferResponse :
+Q extends 'address_blocks_validated' ? AddressBlocksValidatedResponse :
+Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
+Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
+Q extends 'config_json_rpc' ? JsonRpcUrlResponse :
+never;
+/* eslint-enable @typescript-eslint/indent */
+
+/* eslint-disable @typescript-eslint/indent */
+export type PaginationFilters<Q extends PaginatedResources> =
+Q extends 'blocks' ? BlockFilters :
+Q extends 'txs_validated' | 'txs_pending' ? TTxsFilters :
+Q extends 'tx_token_transfers' ? TokenTransferFilters :
+Q extends 'address_txs' | 'address_internal_txs' ? AddressTxsFilters :
+Q extends 'address_token_transfers' ? AddressTokenTransferFilters :
+never;
+/* eslint-enable @typescript-eslint/indent */

lib/api/useApiFetch.tsx

+import React from 'react';
+
+import appConfig from 'configs/app/config';
+import type { Params as FetchParams } from 'lib/hooks/useFetch';
+import useFetch from 'lib/hooks/useFetch';
+
+import buildUrl from './buildUrl';
+import { RESOURCES } from './resources';
+import type { ResourceError, ApiResource } from './resources';
+
+export interface Params {
+  pathParams?: Record<string, string | undefined>;
+  queryParams?: Record<string, string | number | undefined>;
+  fetchParams?: Pick<FetchParams, 'body' | 'method'>;
+}
+
+export default function useApiFetch() {
+  const fetch = useFetch();
+
+  return React.useCallback(<R extends keyof typeof RESOURCES, SuccessType = unknown, ErrorType = ResourceError>(
+    resourceName: R,
+    { pathParams, queryParams, fetchParams }: Params = {},
+  ) => {
+    const resource: ApiResource = RESOURCES[resourceName];
+    const url = buildUrl(resource, pathParams, queryParams);
+    return fetch<SuccessType, ErrorType>(url, {
+      credentials: 'include',
+      ...(resource.endpoint && appConfig.host === 'localhost' ? {
+        headers: {
+          'x-endpoint': resource.endpoint,
+        },
+      } : {}),
+      ...fetchParams,
+    });
+  }, [ fetch ]);
+}

lib/api/useApiQuery.tsx

+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import type { ResourceError, ResourceName, ResourcePayload } from './resources';
+import type { Params as ApiFetchParams } from './useApiFetch';
+import useApiFetch from './useApiFetch';
+
+export interface Params<R extends ResourceName, E = unknown> extends ApiFetchParams {
+  queryOptions?: Omit<UseQueryOptions<unknown, ResourceError<E>, ResourcePayload<R>>, 'queryKey' | 'queryFn'>;
+}
+
+export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams }: Params<R> = {}) {
+  if (pathParams || queryParams) {
+    return [ resource, { ...pathParams, ...queryParams } ];
+  }
+
+  return [ resource ];
+}
+
+export default function useApiQuery<R extends ResourceName, E = unknown>(
+  resource: R,
+  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E> = {},
+) {
+  const apiFetch = useApiFetch();
+
+  return useQuery<unknown, ResourceError<E>, ResourcePayload<R>>(
+    getResourceKey(resource, { pathParams, queryParams }),
+    async() => {
+      return apiFetch<R, ResourcePayload<R>, ResourceError>(resource, { pathParams, queryParams, fetchParams });
+    }, queryOptions);
+}

lib/csp/getCspPolicy.ts

@@ -55,6 +55,7 @@ function makePolicyMap() {
 
     'connect-src': [
       KEY_WORDS.SELF,
+      ...MAIN_DOMAINS,
 
       // webpack hmr in safari doesn't recognize localhost as 'self' for some reason
       appConfig.isDev ? 'ws://localhost:3000/_next/webpack-hmr' : '',
@@ -62,7 +63,10 @@ function makePolicyMap() {
       // client error monitoring
       'sentry.io', '*.sentry.io',
 
+      // API
+      appConfig.api.endpoint,
       appConfig.api.socket,
+      appConfig.statsApi.endpoint,
 
       // ad
       'request-global.czilladx.com',

lib/getFilterValuesFromQuery.ts

 export default function getFilterValue<FilterType>(filterValues: ReadonlyArray<FilterType>, val: string | Array<string> | undefined) {
+  if (val === undefined) {
+    return;
+  }
+
   const valArray = [];
   if (typeof val === 'string') {
     valArray.push(...val.split(','));

lib/hooks/useFetch.tsx

@@ -4,27 +4,32 @@ import React from 'react';
 
 import type { CsrfData } from 'types/client/account';
 
-export interface ErrorType<T> {
-  error?: T;
-  status: Response['status'];
-  statusText: Response['statusText'];
-}
+import type { ResourceError } from 'lib/api/resources';
 
-interface Params {
+export interface Params {
   method?: RequestInit['method'];
+  headers?: RequestInit['headers'];
   body?: Record<string, unknown>;
+  credentials?: RequestCredentials;
 }
 
 export default function useFetch() {
   const queryClient = useQueryClient();
   const { token } = queryClient.getQueryData<CsrfData>([ 'csrf' ]) || {};
 
-  return React.useCallback(<Success, Error>(path: string, params?: Params): Promise<Success | ErrorType<Error>> => {
+  return React.useCallback(<Success, Error>(path: string, params?: Params): Promise<Success | ResourceError<Error>> => {
     const reqParams = {
       ...params,
-      body: params?.method && ![ 'GET', 'HEAD' ].includes(params.method) ?
-        JSON.stringify({ ...params?.body, _csrf_token: token }) :
+      body: params?.method && params?.body && ![ 'GET', 'HEAD' ].includes(params.method) ?
+        JSON.stringify({
+          ...params.body,
+          _csrf_token: token,
+        }) :
         undefined,
+      headers: {
+        ...params?.headers,
+        // ...(token ? { 'x-csrf-token': token } : {}),
+      },
     };
 
     return fetch(path, reqParams).then(response => {
@@ -37,7 +42,9 @@ export default function useFetch() {
 
         return response.json().then(
           (jsonError) => Promise.reject({
+            // DEPRECATED
             error: jsonError as Error,
+            payload: jsonError as Error,
             status: response.status,
             statusText: response.statusText,
           }),

lib/hooks/useFetchProfileInfo.tsx

-import { useQuery } from '@tanstack/react-query';
-
-import type { UserInfo } from 'types/api/account';
-import { QueryKeys } from 'types/client/queries';
-
+import useApiQuery from 'lib/api/useApiQuery';
 import * as cookies from 'lib/cookies';
-import useFetch from 'lib/hooks/useFetch';
-
-interface Error {
-  error?: {
-    status?: number;
-    statusText?: string;
-  };
-}
 
 export default function useFetchProfileInfo() {
-  const fetch = useFetch();
-
-  return useQuery<unknown, Error, UserInfo>([ QueryKeys.profile ], async() => {
-    return fetch('/node-api/account/profile');
-  }, {
-    refetchOnMount: false,
-    enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
+  return useApiQuery('user_info', {
+    queryOptions: {
+      refetchOnMount: false,
+      enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
+    },
   });
 }

lib/hooks/useQueryWithPages.ts

-import type { UseQueryOptions } from '@tanstack/react-query';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { pick, omit } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
+import mapValues from 'lodash/mapValues';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
 import { animateScroll, scroller } from 'react-scroll';
 
-import { PAGINATION_FIELDS, PAGINATION_FILTERS_FIELDS } from 'types/api/pagination';
-import type { PaginationParams, PaginatedResponse, PaginatedQueryKeys, PaginationFilters } from 'types/api/pagination';
+import type { PaginatedResources, PaginatedResponse, PaginationFilters } from 'lib/api/resources';
+import { RESOURCES } from 'lib/api/resources';
+import type { Params as UseApiQueryParams } from 'lib/api/useApiQuery';
+import useApiQuery from 'lib/api/useApiQuery';
 
-import useFetch from 'lib/hooks/useFetch';
-
-interface Params<QueryName extends PaginatedQueryKeys> {
-  apiPath: string;
-  queryName: QueryName;
-  queryIds?: Array<string>;
-  filters?: PaginationFilters<QueryName>;
-  options?: Omit<UseQueryOptions<unknown, unknown, PaginatedResponse<QueryName>>, 'queryKey' | 'queryFn'>;
+interface Params<Resource extends PaginatedResources> {
+  resourceName: Resource;
+  options?: UseApiQueryParams<Resource>['queryOptions'];
+  pathParams?: UseApiQueryParams<Resource>['pathParams'];
+  filters?: PaginationFilters<Resource>;
   scroll?: { elem: string; offset: number };
 }
 
-export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>({
-  queryName,
+export default function useQueryWithPages<Resource extends PaginatedResources>({
+  resourceName,
   filters,
   options,
-  apiPath,
-  queryIds,
+  pathParams,
   scroll,
-}: Params<QueryName>) {
-  const paginationFields = PAGINATION_FIELDS[queryName];
+}: Params<Resource>) {
+  const resource = RESOURCES[resourceName];
   const queryClient = useQueryClient();
   const router = useRouter();
+
+  type NextPageParams = {
+    [K in keyof PaginatedResponse<Resource>['next_page_params']]: string;
+  }
+  const currPageParams = mapValues(pick(router.query, resource.paginationFields), (value) => value?.toString()) as NextPageParams;
+
   const [ page, setPage ] = React.useState<number>(router.query.page && !Array.isArray(router.query.page) ? Number(router.query.page) : 1);
-  const currPageParams = pick(router.query, paginationFields);
-  const [ pageParams, setPageParams ] = React.useState<Array<PaginationParams<QueryName>>>([ ]);
-  const fetch = useFetch();
-  const isMounted = React.useRef(false);
-  const canGoBackwards = React.useRef(!router.query.page);
+  const [ pageParams, setPageParams ] = React.useState<Record<number, NextPageParams>>({
+    [page]: currPageParams,
+  });
   const [ hasPagination, setHasPagination ] = React.useState(page > 1);
 
-  const queryKey = [ queryName, ...(queryIds || []), { page, filters } ];
+  const isMounted = React.useRef(false);
+  const canGoBackwards = React.useRef(!router.query.page);
+  const queryParams = { ...filters, ...pageParams[page] };
 
   const scrollToTop = useCallback(() => {
     scroll ? scroller.scrollTo(scroll.elem, { offset: scroll.offset }) : animateScroll.scrollToTop({ duration: 0 });
   }, [ scroll ]);
 
-  const queryResult = useQuery<unknown, unknown, PaginatedResponse<QueryName>>(
-    queryKey,
-    async() => {
-      const params: Array<string> = [];
-
-      Object.entries({ ...filters, ...currPageParams }).forEach(([ key, val ]) => {
-        if (Array.isArray(val)) {
-          val.length && params.push(`${ key }=${ val.join(',') }`);
-        } else if (val) {
-          params.push(`${ key }=${ val }`);
-        }
-      });
-
-      return fetch(`${ apiPath }${ params.length ? '?' + params.join('&') : '' }`);
+  const queryResult = useApiQuery(resourceName, {
+    pathParams,
+    queryParams,
+    queryOptions: {
+      staleTime: page === 1 ? 0 : Infinity,
+      ...options,
     },
-    { staleTime: page === 1 ? 0 : Infinity, ...options },
-  );
+  });
   const { data } = queryResult;
 
   const onNextPageClick = useCallback(() => {
@@ -69,9 +65,13 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
       return;
     }
     const nextPageParams = data.next_page_params;
-    if (page >= pageParams.length && data?.next_page_params) {
-      setPageParams(prev => [ ...prev, nextPageParams ]);
-    }
+
+    setPageParams((prev) => ({
+      ...prev,
+      [page + 1]: mapValues(nextPageParams, (value) => String(value)) as NextPageParams,
+    }));
+    setPage(prev => prev + 1);
+
     const nextPageQuery = { ...router.query };
     Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
     nextPageQuery.page = String(page + 1);
@@ -80,53 +80,52 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true })
       .then(() => {
         scrollToTop();
-        setPage(prev => prev + 1);
       });
-  }, [ data?.next_page_params, page, pageParams.length, router, scrollToTop ]);
+  }, [ data?.next_page_params, page, router, scrollToTop ]);
 
   const onPrevPageClick = useCallback(() => {
     // returning to the first page
     // we dont have pagination params for the first page
     let nextPageQuery: typeof router.query = { ...router.query };
     if (page === 2) {
-      nextPageQuery = omit(router.query, paginationFields, 'page');
+      nextPageQuery = omit(router.query, resource.paginationFields, 'page');
       canGoBackwards.current = true;
     } else {
-      const nextPageParams = { ...pageParams[page - 2] };
-      nextPageParams && Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
+      const nextPageParams = pageParams[page - 1];
+      nextPageParams && Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = String(val));
       nextPageQuery.page = String(page - 1);
     }
-    router.query = nextPageQuery;
+
     router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true })
       .then(() => {
         scrollToTop();
         setPage(prev => prev - 1);
-        page === 2 && queryClient.removeQueries({ queryKey: [ queryName ] });
+        page === 2 && queryClient.removeQueries({ queryKey: [ resourceName ] });
       });
     setHasPagination(true);
-  }, [ router, page, paginationFields, pageParams, queryClient, scrollToTop, queryName ]);
+  }, [ router, page, resource.paginationFields, pageParams, scrollToTop, queryClient, resourceName ]);
 
   const resetPage = useCallback(() => {
-    queryClient.removeQueries({ queryKey: [ queryName ] });
+    queryClient.removeQueries({ queryKey: [ resourceName ] });
 
-    router.push({ pathname: router.pathname, query: omit(router.query, paginationFields, 'page') }, undefined, { shallow: true }).then(() => {
-      queryClient.removeQueries({ queryKey: [ queryName ] });
+    router.push({ pathname: router.pathname, query: omit(router.query, resource.paginationFields, 'page') }, undefined, { shallow: true }).then(() => {
+      queryClient.removeQueries({ queryKey: [ resourceName ] });
       scrollToTop();
       setPage(1);
-      setPageParams([ ]);
+      setPageParams({});
       canGoBackwards.current = true;
       window.setTimeout(() => {
         // FIXME after router is updated we still have inactive queries for previously visited page (e.g third), where we came from
         // so have to remove it but with some delay :)
-        queryClient.removeQueries({ queryKey: [ queryName ], type: 'inactive' });
+        queryClient.removeQueries({ queryKey: [ resourceName ], type: 'inactive' });
       }, 100);
     });
 
     setHasPagination(true);
-  }, [ queryClient, queryName, router, paginationFields, scrollToTop ]);
+  }, [ queryClient, resourceName, router, resource.paginationFields, scrollToTop ]);
 
-  const onFilterChange = useCallback((newFilters: PaginationFilters<QueryName> | undefined) => {
-    const newQuery = omit(router.query, PAGINATION_FIELDS[queryName], 'page', PAGINATION_FILTERS_FIELDS[queryName]);
+  const onFilterChange = useCallback((newFilters: PaginationFilters<Resource> | undefined) => {
+    const newQuery = omit(router.query, resource.paginationFields, 'page', resource.filterFields);
     if (newFilters) {
       Object.entries(newFilters).forEach(([ key, value ]) => {
         if (value && value.length) {
@@ -143,12 +142,12 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
       { shallow: true },
     ).then(() => {
       setPage(1);
-      setPageParams([ ]);
+      setPageParams({});
       scrollToTop();
     });
-  }, [ queryName, router, scrollToTop, setPageParams, setPage ]);
+  }, [ router, resource.paginationFields, resource.filterFields, scrollToTop ]);
 
-  const hasPaginationParams = Object.keys(currPageParams).length > 0;
+  const hasPaginationParams = Object.keys(currPageParams || {}).length > 0;
   const nextPageParams = data?.next_page_params;
 
   const pagination = {
@@ -165,12 +164,12 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
 
   React.useEffect(() => {
     if (page !== 1 && isMounted.current) {
-      queryClient.cancelQueries({ queryKey });
+      queryClient.cancelQueries({ queryKey: [ resourceName ] });
       setPage(1);
     }
   // hook should run only when queryName has changed
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ queryName ]);
+  }, [ resourceName ]);
 
   React.useEffect(() => {
     window.setTimeout(() => {

lib/hooks/useRedirectForInvalidAuthToken.tsx

@@ -2,8 +2,7 @@ import * as Sentry from '@sentry/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/accountQueries';
-
+import { resourceKey } from 'lib/api/resources';
 import * as cookies from 'lib/cookies';
 import useLoginUrl from 'lib/hooks/useLoginUrl';
 
@@ -17,7 +16,7 @@ export interface ErrorType {
 export default function useRedirectForInvalidAuthToken() {
   const queryClient = useQueryClient();
 
-  const state = queryClient.getQueryState<unknown, ErrorType>([ QueryKeys.profile ]);
+  const state = queryClient.getQueryState<unknown, ErrorType>([ resourceKey('user_info') ]);
   const errorStatus = state?.error?.error?.status;
   const loginUrl = useLoginUrl();
 

lib/saveAsCSV.ts

+import { unparse } from 'papaparse';
+
+export default function saveAsCSV(headerRows: Array<string>, dataRows: Array<Array<string>>, filename: string) {
+  const csv = unparse([
+    headerRows,
+    ...dataRows,
+  ]);
+
+  const blob = new Blob([ csv ], { type: 'text/csv;charset=utf-8;' });
+
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  link.click();
+
+  link.remove();
+  URL.revokeObjectURL(url);
+}

package.json

@@ -37,6 +37,7 @@
     "@sentry/tracing": "^7.24.0",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
+    "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
     "bignumber.js": "^9.1.0",
     "d3": "^7.6.1",
@@ -48,6 +49,8 @@
     "lodash": "^4.0.0",
     "next": "12.2.5",
     "node-fetch": "^3.2.9",
+    "papaparse": "^5.3.2",
+    "path-to-regexp": "^6.2.1",
     "phoenix": "^1.6.15",
     "pino-http": "^8.2.1",
     "pino-pretty": "^9.1.1",

pages/_app.tsx

@@ -5,11 +5,11 @@ import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
 
 import appConfig from 'configs/app/config';
+import type { ResourceError } from 'lib/api/resources';
 import { AppContextProvider } from 'lib/appContext';
 import { Chakra } from 'lib/Chakra';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
-import type { ErrorType } from 'lib/hooks/useFetch';
 import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
 import AppError from 'ui/shared/AppError/AppError';
@@ -22,8 +22,8 @@ function MyApp({ Component, pageProps }: AppProps) {
       queries: {
         refetchOnWindowFocus: false,
         retry: (failureCount, _error) => {
-          const error = _error as ErrorType<{ status: number }>;
-          const status = error?.error?.status;
+          const error = _error as ResourceError<{ status: number }>;
+          const status = error?.status || error?.error?.status;
           if (status && status >= 400 && status < 500) {
             // don't do retry for client error responses
             return false;

pages/api/account/api-keys/[id].ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/account/v1/user/api_keys/${ req.query.id }`;
-};
-
-const apiKeysHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
-
-export default apiKeysHandler;

pages/api/account/api-keys/index.ts

-import handler from 'lib/api/handler';
-
-const apiKeysHandler = handler(() => '/account/v1/user/api_keys', [ 'GET', 'POST' ]);
-
-export default apiKeysHandler;

pages/api/account/custom-abis/[id].ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/account/v1/user/custom_abis/${ req.query.id }`;
-};
-
-const customAbiHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
-
-export default customAbiHandler;

pages/api/account/custom-abis/index.ts

-import handler from 'lib/api/handler';
-
-const customAbiHandler = handler(() => '/account/v1/user/custom_abis', [ 'GET', 'POST' ]);
-
-export default customAbiHandler;

pages/api/account/private-tags/address/[id].ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/account/v1/user/tags/address/${ req.query.id }`;
-};
-
-const addressEditHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
-
-export default addressEditHandler;

pages/api/account/private-tags/address/index.ts

-import handler from 'lib/api/handler';
-
-const addressHandler = handler(() => '/account/v1/user/tags/address', [ 'GET', 'POST' ]);
-
-export default addressHandler;

pages/api/account/private-tags/transaction/[id].ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/account/v1/user/tags/transaction/${ req.query.id }`;
-};
-
-const transactionEditHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
-
-export default transactionEditHandler;

pages/api/account/private-tags/transaction/index.ts

-import handler from 'lib/api/handler';
-
-const transactionHandler = handler(() => '/account/v1/user/tags/transaction', [ 'GET', 'POST' ]);
-
-export default transactionHandler;

pages/api/account/profile/index.ts

-import handler from 'lib/api/handler';
-
-const profileHandler = handler(() => '/account/v1/user/info', [ 'GET' ]);
-
-export default profileHandler;

pages/api/account/public-tags/[id].ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/account/v1/user/public_tags/${ req.query.id }`;
-};
-
-const publicTagsHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
-
-export default publicTagsHandler;

pages/api/account/public-tags/index.ts

-import handler from 'lib/api/handler';
-
-const publicKeysHandler = handler(() => '/account/v1/user/public_tags', [ 'GET', 'POST' ]);
-
-export default publicKeysHandler;

pages/api/account/watchlist/[id].ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/account/v1/user/watchlist/${ req.query.id }`;
-};
-
-const addressEditHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
-
-export default addressEditHandler;

pages/api/account/watchlist/get-with-tokens.ts

-import type { NextApiRequest, NextApiResponse } from 'next';
-
-import type { WatchlistAddresses } from 'types/api/account';
-import type { Tokenlist } from 'types/api/tokenlist';
-import type { TWatchlistItem } from 'types/client/account';
-
-import fetchFactory from 'lib/api/fetch';
-import getUrlWithNetwork from 'lib/api/getUrlWithNetwork';
-import { httpLogger } from 'lib/api/logger';
-
-const watchlistWithTokensHandler = async(_req: NextApiRequest, res: NextApiResponse<Array<TWatchlistItem>>) => {
-  httpLogger(_req, res);
-
-  const fetch = fetchFactory(_req);
-  const url = getUrlWithNetwork(_req, '/api/account/v1/user/watchlist');
-  const watchlistResponse = await fetch(url, { method: 'GET' });
-
-  const watchlistData = await watchlistResponse.json() as WatchlistAddresses;
-
-  if (watchlistResponse.status !== 200) {
-    httpLogger.logger.error({ err: { statusText: 'Watchlist token error', status: 500 }, url: _req.url });
-    res.status(500).end(watchlistData || 'Unknown error');
-    return;
-  }
-
-  const data = await Promise.all(watchlistData.map(async item => {
-    const tokens = await fetch(`/api/?module=account&action=tokenlist&address=${ item.address_hash }`);
-
-    const tokensData = await tokens.json() as Tokenlist;
-    return ({ ...item, tokens_count: Array.isArray(tokensData.result) ? tokensData.result.length : 0 });
-  }));
-
-  res.status(200).json(data);
-};
-
-export default watchlistWithTokensHandler;

pages/api/account/watchlist/index.ts

-import handler from 'lib/api/handler';
-
-const watchlistHandler = handler(() => '/account/v1/user/watchlist', [ 'GET', 'POST' ]);
-
-export default watchlistHandler;

pages/api/addresses/[id]/blocks-validated.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/addresses/${ req.query.id }/blocks-validated${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/coin-balance-history-by-day.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/addresses/${ req.query.id }/coin-balance-history-by-day`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/coin-balance-history.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/addresses/${ req.query.id }/coin-balance-history${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/counters.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/addresses/${ req.query.id }/counters`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/index.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/addresses/${ req.query.id }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/internal-transactions.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/addresses/${ req.query.id }/internal-transactions${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/token-balances.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/addresses/${ req.query.id }/token-balances`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/token-transfers.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/addresses/${ req.query.id }/token-transfers${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/addresses/[id]/transactions.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/addresses/${ req.query.id }/transactions${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/blocks/[id]/index.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/blocks/${ req.query.id }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/blocks/[id]/transactions.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/blocks/${ req.query.id }/transactions${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/blocks/index.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/blocks${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/config/json-rpc-url.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => {
-  return `/v2/config/json-rpc-url`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/home-stats/charts/market.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v2/stats/charts/market';
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/home-stats/charts/transactions.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v2/stats/charts/transactions';
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/home-stats/index.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v2/stats';
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/index/blocks.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v2/main-page/blocks';
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/index/indexing-status.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v2/main-page/indexing-status';
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/index/txs.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v2/main-page/transactions';
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/proxy.ts

+import _pick from 'lodash/pick';
+import _pickBy from 'lodash/pickBy';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import fetchFactory from 'lib/api/fetch';
+
+const handler = async(_req: NextApiRequest, res: NextApiResponse) => {
+  if (!_req.url) {
+    res.status(500).json({ error: 'no url provided' });
+    return;
+  }
+
+  const response = await fetchFactory(_req, _req.headers['x-endpoint']?.toString())(
+    _req.url.replace(/^\/node-api\/proxy/, ''),
+    _pickBy(_pick(_req, [ 'body', 'method' ]), Boolean),
+  );
+
+  res.status(response.status).send(response.body);
+};
+
+export default handler;

pages/api/stats/charts.ts

-import type { NextApiRequest } from 'next';
-
-import appConfig from 'configs/app/config';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const { name, from, to } = req.query;
-  return `/v1/charts/line?name=${ name }${ from ? `&from=${ from }&to=${ to }` : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ], appConfig.statsApi.endpoint);
-
-export default requestHandler;

pages/api/stats/counters.ts

-import appConfig from 'configs/app/config';
-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v1/counters';
-
-const requestHandler = handler(getUrl, [ 'GET' ], appConfig.statsApi.endpoint);
-
-export default requestHandler;

pages/api/transactions/[id]/index.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/transactions/${ req.query.id }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/transactions/[id]/internal-transactions.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/transactions/${ req.query.id }/internal-transactions`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/transactions/[id]/logs.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/transactions/${ req.query.id }/logs`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/transactions/[id]/raw-trace.ts

-import type { NextApiRequest } from 'next';
-
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  return `/v2/transactions/${ req.query.id }/raw-trace`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/transactions/[id]/token-transfers.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/transactions/${ req.query.id }/token-transfers${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/transactions/index.ts

-import type { NextApiRequest } from 'next';
-
-import getSearchParams from 'lib/api/getSearchParams';
-import handler from 'lib/api/handler';
-
-const getUrl = (req: NextApiRequest) => {
-  const searchParamsStr = getSearchParams(req);
-  return `/v2/transactions/${ searchParamsStr ? '?' + searchParamsStr : '' }`;
-};
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

playwright/utils/buildApiUrl.ts

+import { compile } from 'path-to-regexp';
+
+import type { ResourceName } from 'lib/api/resources';
+import { RESOURCES } from 'lib/api/resources';
+
+export default function buildApiUrl(resourceName: ResourceName, pathParams?: Record<string, string>) {
+  const resource = RESOURCES[resourceName];
+  return compile('/node-api/proxy/poa/core' + resource.path)(pathParams);
+}

theme/components/Popover.ts

@@ -19,7 +19,7 @@ const baseStylePopper = defineStyle({
 
 const baseStyleContent = defineStyle((props) => {
   const bg = mode('white', 'gray.900')(props);
-  const shadowColor = mode('gray.200', 'whiteAlpha.300')(props);
+  const shadowColor = mode('blackAlpha.200', 'whiteAlpha.300')(props);
 
   return {
     [$popperBg.variable]: `colors.${ bg }`,

theme/components/Table.ts

@@ -15,7 +15,7 @@ const variantSimple = definePartsStyle((props) => {
   return {
     th: {
       border: 0,
-      color: mode('gray.600', 'whiteAlpha.700')(props),
+      color: mode('blackAlpha.700', 'whiteAlpha.700')(props),
       backgroundColor: mode('blackAlpha.100', 'whiteAlpha.200')(props),
       ...transitionProps,
     },

theme/utils/getOutlinedFieldStyles.ts

@@ -24,7 +24,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     },
     _disabled: {
       opacity: 1,
-      backgroundColor: mode('gray.200', 'whiteAlpha.200')(props),
+      backgroundColor: mode('blackAlpha.200', 'whiteAlpha.200')(props),
       borderColor: 'transparent',
       cursor: 'not-allowed',
       _hover: {

types/api/account.ts

 import type { AddressParam } from './addressParams';
 export interface AddressTag {
   address_hash: string;
+  address: AddressParam;
   name: string;
   id: string;
 }
@@ -64,7 +65,13 @@ export interface WatchlistAddress {
   notification_settings: NotificationSettings;
   notification_methods: NotificationMethods;
   id: string;
-  address?: AddressParam;
+  address: AddressParam;
+}
+
+export interface WatchlistTokensResponse {
+  message: string;
+  result?: Array<unknown>;
+  status: string;
 }
 
 export interface WatchlistAddressNew {
@@ -83,10 +90,11 @@ export interface PublicTag {
   email: string;
   company: string;
   addresses: Array<string>;
+  addresses_with_info: Array<AddressParam>;
   additional_comment: string;
 }
 
-export type PublicTagNew = Omit<PublicTag, 'id'>
+export type PublicTagNew = Omit<PublicTag, 'id' | 'addresses_with_info'>
 
 export type PublicTags = Array<PublicTag>;
 
@@ -96,6 +104,7 @@ export interface CustomAbi {
   name: string;
   id: number;
   contract_address_hash: string;
+  contract_address: AddressParam;
   abi: Array<AbiItem>;
 }
 

types/api/address.ts

@@ -80,6 +80,11 @@ export interface AddressCoinBalanceHistoryResponse {
   };
 }
 
+export type AddressCoinBalanceHistoryChart = Array<{
+  date: string;
+  value: string;
+}>
+
 export interface AddressBlocksValidatedResponse {
   items: Array<Block>;
   next_page_params: {

types/api/pagination.ts

-import type {
-  AddressTransactionsResponse,
-  AddressTokenTransferResponse,
-  AddressTxsFilters,
-  AddressTokenTransferFilters,
-  AddressCoinBalanceHistoryResponse,
-  AddressBlocksValidatedResponse,
-  AddressInternalTxsResponse,
-} from 'types/api/address';
-import type { BlocksResponse, BlockTransactionsResponse, BlockFilters } from 'types/api/block';
-import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
-import type { LogsResponse } from 'types/api/log';
-import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
-import type { TransactionsResponseValidated, TransactionsResponsePending } from 'types/api/transaction';
-import type { TTxsFilters } from 'types/api/txsFilters';
-import { QueryKeys } from 'types/client/queries';
-import type { KeysOfObjectOrNull } from 'types/utils/KeysOfObjectOrNull';
-
-export type PaginatedQueryKeys =
-  QueryKeys.addressTxs |
-  QueryKeys.addressTokenTransfers |
-  QueryKeys.addressInternalTxs |
-  QueryKeys.blocks |
-  QueryKeys.blocksReorgs |
-  QueryKeys.blocksUncles |
-  QueryKeys.blockTxs |
-  QueryKeys.txsValidate |
-  QueryKeys.txsPending |
-  QueryKeys.txInternals |
-  QueryKeys.txLogs |
-  QueryKeys.txTokenTransfers |
-  QueryKeys.addressCoinBalanceHistory |
-  QueryKeys.addressBlocksValidated;
-
-export type PaginatedResponse<Q extends PaginatedQueryKeys> =
-Q extends QueryKeys.addressInternalTxs ? AddressInternalTxsResponse :
-  Q extends QueryKeys.addressTxs ? AddressTransactionsResponse :
-    Q extends QueryKeys.addressTokenTransfers ? AddressTokenTransferResponse :
-      Q extends (QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles) ? BlocksResponse :
-        Q extends QueryKeys.blockTxs ? BlockTransactionsResponse :
-          Q extends QueryKeys.txsValidate ? TransactionsResponseValidated :
-            Q extends QueryKeys.txsPending ? TransactionsResponsePending :
-              Q extends QueryKeys.txInternals ? InternalTransactionsResponse :
-                Q extends QueryKeys.txLogs ? LogsResponse :
-                  Q extends QueryKeys.txTokenTransfers ? TokenTransferResponse :
-                    Q extends QueryKeys.addressCoinBalanceHistory ? AddressCoinBalanceHistoryResponse :
-                      Q extends QueryKeys.addressBlocksValidated ? AddressBlocksValidatedResponse :
-                        never
-
-export type PaginationFilters<Q extends PaginatedQueryKeys> =
-  Q extends (QueryKeys.addressTxs | QueryKeys.addressInternalTxs) ? AddressTxsFilters :
-    Q extends QueryKeys.addressTokenTransfers ? AddressTokenTransferFilters :
-      Q extends QueryKeys.blocks ? BlockFilters :
-        Q extends QueryKeys.txsValidate ? TTxsFilters :
-          Q extends QueryKeys.txsPending ? TTxsFilters :
-            Q extends QueryKeys.txTokenTransfers ? TokenTransferFilters :
-              never
-
-export type PaginationParams<Q extends PaginatedQueryKeys> = PaginatedResponse<Q>['next_page_params'];
-
-type PaginationFields = {
-  [K in PaginatedQueryKeys]: Array<KeysOfObjectOrNull<PaginatedResponse<K>['next_page_params']>>
-}
-
-export const PAGINATION_FIELDS: PaginationFields = {
-  [QueryKeys.addressTxs]: [ 'block_number', 'items_count', 'index' ],
-  [QueryKeys.addressInternalTxs]: [ 'block_number', 'items_count', 'index', 'transaction_index' ],
-  [QueryKeys.addressTokenTransfers]: [ 'block_number', 'items_count', 'index', 'transaction_hash' ],
-  [QueryKeys.blocks]: [ 'block_number', 'items_count' ],
-  [QueryKeys.blocksReorgs]: [ 'block_number', 'items_count' ],
-  [QueryKeys.blocksUncles]: [ 'block_number', 'items_count' ],
-  [QueryKeys.blockTxs]: [ 'block_number', 'items_count', 'index' ],
-  [QueryKeys.txsValidate]: [ 'block_number', 'items_count', 'filter', 'index' ],
-  [QueryKeys.txsPending]: [ 'filter', 'hash', 'inserted_at' ],
-  [QueryKeys.txInternals]: [ 'block_number', 'items_count', 'transaction_hash', 'index', 'transaction_index' ],
-  [QueryKeys.txTokenTransfers]: [ 'block_number', 'items_count', 'transaction_hash', 'index' ],
-  [QueryKeys.txLogs]: [ 'items_count', 'transaction_hash', 'index' ],
-  [QueryKeys.addressCoinBalanceHistory]: [ 'items_count', 'block_number' ],
-  [QueryKeys.addressBlocksValidated]: [ 'items_count', 'block_number' ],
-};
-
-type PaginationFiltersFields = {
-  [K in PaginatedQueryKeys]: Array<KeysOfObjectOrNull<PaginationFilters<K>>>
-}
-
-export const PAGINATION_FILTERS_FIELDS: PaginationFiltersFields = {
-  [QueryKeys.addressTxs]: [ 'filter' ],
-  [QueryKeys.addressInternalTxs]: [ 'filter' ],
-  [QueryKeys.addressTokenTransfers]: [ 'filter', 'type' ],
-  [QueryKeys.addressCoinBalanceHistory]: [],
-  [QueryKeys.addressBlocksValidated]: [],
-  [QueryKeys.blocks]: [ 'type' ],
-  [QueryKeys.txsValidate]: [ 'filter', 'type', 'method' ],
-  [QueryKeys.txsPending]: [ 'filter', 'type', 'method' ],
-  [QueryKeys.txTokenTransfers]: [ 'type' ],
-  [QueryKeys.blocksReorgs]: [],
-  [QueryKeys.blocksUncles]: [],
-  [QueryKeys.blockTxs]: [],
-  [QueryKeys.txInternals]: [],
-  [QueryKeys.txLogs]: [],
-};

types/api/stats.ts

@@ -21,11 +21,18 @@ export type GasPrices = {
 
 export type Stats = {
   counters: {
+    totalBlocks: string;
     averageBlockTime: string;
+
+    totalTransactions: string;
     completedTransactions: string;
+
     totalAccounts: string;
-    totalBlocksAllTime: string;
-    totalTransactions: string;
+
+    totalTokens: string;
+
+    totalNativeCoinHolders: string;
+    totalNativeCoinTransfers: string;
   };
 }
 

types/client/accountQueries.ts

-export enum QueryKeys {
-  addressTags = 'address-tags',
-  apiKeys = 'api-keys',
-  customAbis = 'custom-abis',
-  profile = 'profile',
-  publicTags = 'public-tags',
-  transactionTags = 'transaction-tags',
-  watchlist = 'watchlist',
-}

types/client/queries.ts

-export enum QueryKeys {
-  csrf = 'csrf',
-  profile = 'profile',
-  txsValidate = 'txs-validated',
-  txsPending = 'txs-pending',
-  homeStats='homeStats',
-  indexingStatus='indexingStatus',
-  stats='stats',
-  charts='stats',
-  tx = 'tx',
-  txInternals = 'tx-internals',
-  txLogs = 'tx-logs',
-  txRawTrace = 'tx-raw-trace',
-  txTokenTransfers = 'tx-token-transfers',
-  blockTxs = 'block-transactions',
-  block = 'block',
-  blocks = 'blocks',
-  blocksReorgs = 'blocks-reorgs',
-  blocksUncles = 'blocks-uncles',
-  chartsTxs = 'charts-txs',
-  chartsMarket = 'charts-market',
-  indexBlocks='indexBlocks',
-  indexTxs='indexTxs',
-  jsonRpcUrl='json-rpc-url',
-  address='address',
-  addressCounters='address-counters',
-  addressTokenBalances='address-token-balances',
-  addressCoinBalanceHistory='address-coin-balance-history',
-  addressCoinBalanceHistoryByDay='address-coin-balance-history-by-day',
-  addressTxs='addressTxs',
-  addressTokenTransfers='addressTokenTransfers',
-  addressBlocksValidated='address-blocks-validated',
-  addressInternalTxs='address-internal-txs',
-}

ui/address/AddressBlocksValidated.tsx

@@ -5,21 +5,21 @@ import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Address, AddressBlocksValidatedResponse } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
+import { getResourceKey } from 'lib/api/useApiQuery';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import SocketAlert from 'ui/shared/SocketAlert';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
-import AddressBlocksValidatedSkeletonMobile from './blocksValidated/AddressBlocksValidatedSkeletonMobile';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
 interface Props {
@@ -31,8 +31,8 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
   const queryClient = useQueryClient();
 
   const query = useQueryWithPages({
-    apiPath: `/node-api/addresses/${ addressQuery.data?.hash }/blocks-validated`,
-    queryName: QueryKeys.addressBlocksValidated,
+    resourceName: 'address_blocks_validated',
+    pathParams: { id: addressQuery.data?.hash },
     options: {
       enabled: Boolean(addressQuery.data),
     },
@@ -46,7 +46,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
     setSocketAlert(false);
 
     queryClient.setQueryData(
-      [ QueryKeys.addressBlocksValidated, { page: query.pagination.page } ],
+      getResourceKey('address_blocks_validated', { pathParams: { id: addressQuery.data?.hash } }),
       (prevData: AddressBlocksValidatedResponse | undefined) => {
         if (!prevData) {
           return;
@@ -57,7 +57,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
           items: [ payload.block, ...prevData.items ],
         };
       });
-  }, [ query.pagination.page, queryClient ]);
+  }, [ addressQuery.data?.hash, queryClient ]);
 
   const channel = useSocketChannel({
     topic: `blocks:${ addressQuery.data?.hash.toLowerCase() }`,
@@ -79,7 +79,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
             <SkeletonTable columns={ [ '17%', '17%', '16%', '25%', '25%' ] }/>
           </Hide>
           <Show below="lg">
-            <AddressBlocksValidatedSkeletonMobile/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/address/AddressCoinBalance.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Address, AddressCoinBalanceHistoryResponse } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
 
+import { getResourceKey } from 'lib/api/useApiQuery';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -23,8 +23,8 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
   const queryClient = useQueryClient();
 
   const coinBalanceQuery = useQueryWithPages({
-    apiPath: `/node-api/addresses/${ addressQuery.data?.hash }/coin-balance-history`,
-    queryName: QueryKeys.addressCoinBalanceHistory,
+    resourceName: 'address_coin_balance',
+    pathParams: { id: addressQuery.data?.hash },
     options: {
       enabled: Boolean(addressQuery.data),
     },
@@ -38,7 +38,7 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
     setSocketAlert(false);
 
     queryClient.setQueryData(
-      [ QueryKeys.addressCoinBalanceHistory, { page: coinBalanceQuery.pagination.page } ],
+      getResourceKey('address_coin_balance', { pathParams: { id: addressQuery.data?.hash } }),
       (prevData: AddressCoinBalanceHistoryResponse | undefined) => {
         if (!prevData) {
           return;
@@ -52,7 +52,7 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
           ],
         };
       });
-  }, [ coinBalanceQuery.pagination.page, queryClient ]);
+  }, [ addressQuery.data?.hash, queryClient ]);
 
   const channel = useSocketChannel({
     topic: `addresses:${ addressQuery.data?.hash.toLowerCase() }`,
@@ -69,7 +69,7 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
   return (
     <>
       { socketAlert && <SocketAlert mb={ 6 }/> }
-      <AddressCoinBalanceChart/>
+      <AddressCoinBalanceChart addressQuery={ addressQuery }/>
       <AddressCoinBalanceHistory query={ coinBalanceQuery }/>
     </>
   );

ui/address/AddressDetails.tsx

 import { Box, Flex, Text, Icon, Grid, Link } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { Address as TAddress, AddressCounters, AddressTokenBalance } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
+import type { Address as TAddress } from 'types/api/address';
 
 import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -35,24 +33,20 @@ interface Props {
 
 const AddressDetails = ({ addressQuery }: Props) => {
   const router = useRouter();
-  const fetch = useFetch();
   const isMobile = useIsMobile();
 
-  const countersQuery = useQuery<unknown, unknown, AddressCounters>(
-    [ QueryKeys.addressCounters, router.query.id ],
-    async() => await fetch(`/node-api/addresses/${ router.query.id }/counters`),
-    {
+  const countersQuery = useApiQuery('address_counters', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: {
       enabled: Boolean(router.query.id) && Boolean(addressQuery.data),
     },
-  );
-
-  const tokenBalancesQuery = useQuery<unknown, unknown, Array<AddressTokenBalance>>(
-    [ QueryKeys.addressTokenBalances, router.query.id ],
-    async() => await fetch(`/node-api/addresses/${ router.query.id }/token-balances`),
-    {
+  });
+  const tokenBalancesQuery = useApiQuery('address_token_balances', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: {
       enabled: Boolean(router.query.id) && Boolean(addressQuery.data),
     },
-  );
+  });
 
   if (addressQuery.isError) {
     throw Error('Address fetch error', { cause: addressQuery.error as unknown as Error });
@@ -72,7 +66,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
   return (
     <Box>
       <Flex alignItems="center">
-        <AddressIcon hash={ addressQuery.data.hash }/>
+        <AddressIcon address={ addressQuery.data }/>
         <Text ml={ 2 } fontFamily="heading" fontWeight={ 500 }>
           { isMobile ? <HashStringShorten hash={ addressQuery.data.hash }/> : addressQuery.data.hash }
         </Text>

ui/address/AddressInternalTxs.pw.tsx

@@ -4,11 +4,12 @@ import React from 'react';
 
 import * as internalTxsMock from 'mocks/txs/internalTxs';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import AddressInternalTxs from './AddressInternalTxs';
 
 const ADDRESS_HASH = internalTxsMock.base.from.hash;
-const API_URL_TX_INTERNALS = `/node-api/addresses/${ ADDRESS_HASH }/internal-transactions`;
+const API_URL_TX_INTERNALS = buildApiUrl('address_internal_txs', { id: ADDRESS_HASH });
 const hooksConfig = {
   router: {
     query: { id: ADDRESS_HASH },
@@ -29,7 +30,5 @@ test('base view +@mobile', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await page.waitForResponse(API_URL_TX_INTERNALS),
-
   await expect(component).toHaveScreenshot();
 });

ui/address/AddressInternalTxs.tsx

@@ -6,7 +6,6 @@ import { Element } from 'react-scroll';
 
 import type { AddressFromToFilter } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
 
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
@@ -36,9 +35,8 @@ const AddressInternalTxs = () => {
   const queryIdStr = queryIdArray[0];
 
   const { data, isLoading, isError, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
-    apiPath: `/node-api/addresses/${ queryId }/internal-transactions`,
-    queryName: QueryKeys.addressInternalTxs,
-    queryIds: queryIdArray,
+    resourceName: 'address_internal_txs',
+    pathParams: { id: queryIdStr },
     filters: { filter: filterValue },
     scroll: { elem: SCROLL_ELEM, offset: SCROLL_OFFSET },
   });

ui/address/AddressTokenTransfers.tsx

-import castArray from 'lodash/castArray';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
-
 import TokenTransfer from 'ui/shared/TokenTransfer/TokenTransfer';
 
 const AddressTokenTransfers = () => {
@@ -12,9 +9,8 @@ const AddressTokenTransfers = () => {
   const hash = router.query.id;
   return (
     <TokenTransfer
-      path={ `/node-api/addresses/${ hash }/token-transfers` }
-      queryName={ QueryKeys.addressTokenTransfers }
-      queryIds={ castArray(router.query.id) }
+      resourceName="address_token_transfers"
+      pathParams={{ id: hash?.toString() }}
       baseAddress={ typeof hash === 'string' ? hash : undefined }
       enableTimeIncrement
     />

ui/address/AddressTxs.pw.tsx

@@ -4,10 +4,11 @@ import React from 'react';
 
 import { base as txMock } from 'mocks/txs/tx';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import AddressTxs from './AddressTxs';
 
-const API_URL = '/node-api/addresses/0xd789a607CEac2f0E14867de4EB15b15C9FFB5859/transactions';
+const API_URL = buildApiUrl('address_txs', { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' });
 
 const hooksConfig = {
   router: {
@@ -29,7 +30,5 @@ test('address txs +@mobile +@desktop-xl', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await page.waitForResponse(API_URL),
-
   await expect(component).toHaveScreenshot();
 });

ui/address/AddressTxs.tsx

@@ -5,7 +5,6 @@ import { Element } from 'react-scroll';
 
 import type { AddressFromToFilter } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
 
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -29,9 +28,8 @@ const AddressTxs = () => {
   const [ filterValue, setFilterValue ] = React.useState<AddressFromToFilter>(getFilterValue(router.query.filter));
 
   const addressTxsQuery = useQueryWithPages({
-    apiPath: `/node-api/addresses/${ router.query.id }/transactions`,
-    queryName: QueryKeys.addressTxs,
-    queryIds: castArray(router.query.id),
+    resourceName: 'address_txs',
+    pathParams: { id: castArray(router.query.id)[0] },
     filters: { filter: filterValue },
     scroll: { elem: SCROLL_ELEM, offset: SCROLL_OFFSET },
   });

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -8,7 +8,7 @@ import appConfig from 'configs/app/config';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 type Props = Block & {
@@ -21,7 +21,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
   const totalReward = getBlockTotalReward(props);
 
   return (
-    <AccountListItemMobile rowGap={ 2 }>
+    <ListItemMobile rowGap={ 2 } isAnimated>
       <Flex justifyContent="space-between" w="100%">
         <Link href={ blockUrl } fontWeight="700">{ props.height }</Link>
         <Text variant="secondary">{ timeAgo }</Text>
@@ -39,7 +39,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
         <Text fontWeight={ 500 } flexShrink={ 0 }>Reward { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">{ totalReward.toFixed() }</Text>
       </Flex>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/address/blocksValidated/AddressBlocksValidatedSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const AddressBlocksValidatedSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex justifyContent="space-between" w="100%" h={ 6 }>
-            <Skeleton w="100px"/>
-            <Skeleton w="100px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="40px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="70px"/>
-            <Skeleton w="70px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="100px"/>
-            <Skeleton w="120px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default AddressBlocksValidatedSkeletonMobile;

ui/address/coinBalance/AddressCoinBalanceChart.tsx

-import { Box } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
-const AddressCoinBalanceChart = () => {
-  // chart will be added after stats feature is finalized
-  return <Box p={ 4 } borderColor="gray.200" borderRadius="md" borderWidth="1px">Here will be coin balance chart</Box>;
+import type { Address } from 'types/api/address';
+
+import appConfig from 'configs/app/config';
+import useApiQuery from 'lib/api/useApiQuery';
+import ChartWidget from 'ui/shared/chart/ChartWidget';
+
+interface Props {
+  addressQuery: UseQueryResult<Address>;
+}
+
+const AddressCoinBalanceChart = ({ addressQuery }: Props) => {
+  const { data, isLoading, isError } = useApiQuery('address_coin_balance_chart', {
+    pathParams: { id: addressQuery.data?.hash },
+    queryOptions: { enabled: Boolean(addressQuery.data?.hash) },
+  });
+
+  const items = React.useMemo(() => data?.map(({ date, value }) => ({
+    date: new Date(date),
+    value: BigNumber(value).div(10 ** appConfig.network.currency.decimals).toNumber(),
+  })), [ data ]);
+
+  return (
+    <ChartWidget
+      chartHeight="200px"
+      title="Balances"
+      items={ items }
+      isLoading={ isLoading || isError }
+    />
+  );
 };
 
-export default AddressCoinBalanceChart;
+export default React.memo(AddressCoinBalanceChart);

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -9,11 +9,11 @@ import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
-import AddressCoinBalanceSkeletonMobile from './AddressCoinBalanceSkeletonMobile';
 import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 
 interface Props {
@@ -33,7 +33,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
             <SkeletonTable columns={ [ '25%', '25%', '25%', '25%', '120px' ] }/>
           </Hide>
           <Show below="lg">
-            <AddressCoinBalanceSkeletonMobile/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -8,9 +8,9 @@ import appConfig from 'configs/app/config';
 import { WEI, ZERO } from 'lib/consts';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressLink from 'ui/shared/address/AddressLink';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -23,7 +23,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
   const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
-    <AccountListItemMobile rowGap={ 2 }>
+    <ListItemMobile rowGap={ 2 } isAnimated>
       <Flex justifyContent="space-between" w="100%">
         <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).toFixed(8) } { appConfig.network.currency.symbol }</Text>
         <Stat flexGrow="0">
@@ -51,7 +51,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
         <Text fontWeight={ 500 } flexShrink={ 0 }>Age</Text>
         <Text variant="secondary">{ timeAgo }</Text>
       </Flex>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/address/coinBalance/AddressCoinBalanceSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const AddressCoinBalanceSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex justifyContent="space-between" w="100%" h={ 6 }>
-            <Skeleton w="170px"/>
-            <Skeleton w="120px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="80px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="150px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="30px"/>
-            <Skeleton w="60px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default AddressCoinBalanceSkeletonMobile;

ui/address/details/AddressBalance.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Address } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
+import { getResourceKey } from 'lib/api/useApiQuery';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import CurrencyValue from 'ui/shared/CurrencyValue';
@@ -26,7 +26,8 @@ const AddressBalance = ({ data }: Props) => {
     }
 
     setLastBlockNumber(blockNumber);
-    queryClient.setQueryData([ QueryKeys.address, data.hash ], (prevData: Address | undefined) => {
+    const queryKey = getResourceKey('address', { pathParams: { id: data.hash } });
+    queryClient.setQueryData(queryKey, (prevData: Address | undefined) => {
       if (!prevData) {
         return;
       }

ui/address/details/AddressDetailsSkeleton.tsx

@@ -8,14 +8,13 @@ const AddressDetailsSkeleton = () => {
     <Box>
       <Flex align="center">
         <SkeletonCircle boxSize={ 6 } flexShrink={ 0 }/>
-        <Skeleton h={ 6 } w={{ base: '100px', lg: '420px' }} ml={ 2 }/>
-        <Skeleton h={ 6 } w="24px" ml={ 2 } flexShrink={ 0 }/>
-        <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>
-        <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>
+        <Skeleton h={ 6 } w={{ base: '100px', lg: '420px' }} ml={ 2 } borderRadius="full"/>
+        <Skeleton h={ 8 } w="36px" ml={ 3 } flexShrink={ 0 }/>
+        <Skeleton h={ 8 } w="36px" ml={ 3 } flexShrink={ 0 }/>
       </Flex>
       <Flex align="center" columnGap={ 4 } mt={ 8 }>
-        <Skeleton h={ 6 } w="200px"/>
-        <Skeleton h={ 6 } w="80px"/>
+        <Skeleton h={ 6 } w="200px" borderRadius="full"/>
+        <Skeleton h={ 6 } w="80px" borderRadius="full"/>
       </Flex>
       <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '150px 1fr' }} maxW="1000px" mt={ 8 }>
         <DetailsSkeletonRow w="30%"/>

ui/address/details/AddressFavoriteButton.tsx

 import { Icon, chakra, Tooltip, IconButton, useDisclosure } from '@chakra-ui/react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { UserInfo } from 'types/api/account';
-import type { TWatchlist } from 'types/client/account';
-import { QueryKeys as AccountQueryKeys } from 'types/client/accountQueries';
-import { QueryKeys } from 'types/client/queries';
 
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
-import useFetch from 'lib/hooks/useFetch';
+import { resourceKey } from 'lib/api/resources';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useLoginUrl from 'lib/hooks/useLoginUrl';
 import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
 import WatchlistAddModal from 'ui/watchlist/AddressModal/AddressModal';
@@ -27,19 +25,12 @@ const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
   const deleteModalProps = useDisclosure();
   const queryClient = useQueryClient();
   const router = useRouter();
-  const fetch = useFetch();
 
-  const profileData = queryClient.getQueryData<UserInfo>([ AccountQueryKeys.profile ]);
+  const profileData = queryClient.getQueryData<UserInfo>([ resourceKey('user_info') ]);
   const isAuth = Boolean(profileData);
   const loginUrl = useLoginUrl();
 
-  const watchListQuery = useQuery<unknown, unknown, TWatchlist>(
-    [ AccountQueryKeys.watchlist ],
-    async() => fetch('/node-api/account/watchlist'),
-    {
-      enabled: isAdded,
-    },
-  );
+  const watchListQuery = useApiQuery('watchlist', { queryOptions: { enabled: isAdded } });
 
   const handleClick = React.useCallback(() => {
     if (!isAuth) {
@@ -50,7 +41,8 @@ const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
   }, [ addModalProps, deleteModalProps, isAdded, isAuth, loginUrl ]);
 
   const handleAddOrDeleteSuccess = React.useCallback(async() => {
-    await queryClient.refetchQueries({ queryKey: [ QueryKeys.address, router.query.id ] });
+    const queryKey = getResourceKey('address', { pathParams: { id: router.query.id?.toString() } });
+    await queryClient.refetchQueries({ queryKey });
     addModalProps.onClose();
   }, [ addModalProps, queryClient, router.query.id ]);
 

ui/address/internals/AddressIntTxsListItem.tsx

@@ -8,11 +8,11 @@ import appConfig from 'configs/app/config';
 import eastArrowIcon from 'icons/arrows/east.svg';
 import dayjs from 'lib/date/dayjs';
 import link from 'lib/link/link';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -38,7 +38,7 @@ const TxInternalsListItem = ({
   const isIn = Boolean(currentAddress && currentAddress === to?.hash);
 
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <ListItemMobile rowGap={ 3 }>
       <Flex>
         { typeTitle && <Tag colorScheme="cyan" mr={ 2 }>{ typeTitle }</Tag> }
         <TxStatus status={ success ? 'ok' : 'error' } errorText={ error }/>
@@ -53,7 +53,7 @@ const TxInternalsListItem = ({
       </HStack>
       <Box w="100%" display="flex" columnGap={ 3 }>
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
         </Address>
         { (isIn || isOut) ?
@@ -61,7 +61,7 @@ const TxInternalsListItem = ({
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         }
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ toData.hash }/>
         </Address>
       </Box>
@@ -71,7 +71,7 @@ const TxInternalsListItem = ({
           { BigNumber(value).div(BigNumber(10 ** appConfig.network.currency.decimals)).toFormat() }
         </Text>
       </HStack>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/address/internals/AddressIntTxsSkeletonDesktop.tsx

 import React from 'react';
 
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 const TxInternalsSkeletonDesktop = () => {
   return (

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -61,7 +61,7 @@ const AddressIntTxsTableItem = ({
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
@@ -73,7 +73,7 @@ const AddressIntTxsTableItem = ({
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 }/>
         </Address>
       </Td>

ui/address/testUtils/MockAddressPage.tsx

-import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
-
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 
 const MockAddressPage = ({ children }: { children: JSX.Element }): JSX.Element => {
   const router = useRouter();
-  const fetch = useFetch();
 
-  const { data } = useQuery(
-    [ QueryKeys.address, router.query.id ],
-    async() => await fetch(`/node-api/addresses/${ router.query.id }`),
-    {
-      enabled: Boolean(router.query.id),
-    },
-  );
+  const { data } = useApiQuery('address', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: { enabled: Boolean(router.query.id) },
+  });
 
   if (!data) {
     return <div/>;

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -6,13 +6,14 @@ import * as coinBalanceMock from 'mocks/address/coinBalanceHistory';
 import * as tokenBalanceMock from 'mocks/address/tokenBalance';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
 
 import TokenSelect from './TokenSelect';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/poa/assets/0xb2a90505dc6680a7a695f7975d0d32EeF610f456/logo.png';
-const TOKENS_API_URL = '/node-api/addresses/1/token-balances';
-const ADDRESS_API_URL = '/node-api/addresses/1';
+const TOKENS_API_URL = buildApiUrl('address_token_balances', { id: '1' });
+const ADDRESS_API_URL = buildApiUrl('address', { id: '1' });
 const hooksConfig = {
   router: {
     query: { id: '1' },

ui/address/tokenSelect/TokenSelect.tsx

 import { Box, Flex, Icon, IconButton, Skeleton, Tooltip } from '@chakra-ui/react';
-import { useQuery, useQueryClient, useIsFetching } from '@tanstack/react-query';
+import { useQueryClient, useIsFetching } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
-import type { Address, AddressTokenBalance } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
+import type { Address } from 'types/api/address';
 
 import walletIcon from 'icons/wallet.svg';
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -18,21 +17,20 @@ import TokenSelectMobile from './TokenSelectMobile';
 
 const TokenSelect = () => {
   const router = useRouter();
-  const fetch = useFetch();
   const isMobile = useIsMobile();
   const queryClient = useQueryClient();
   const [ blockNumber, setBlockNumber ] = React.useState<number>();
 
-  const addressQueryData = queryClient.getQueryData<Address>([ QueryKeys.address, router.query.id ]);
+  const addressResourceKey = getResourceKey('address', { pathParams: { id: router.query.id?.toString() } });
 
-  const { data, isError, isLoading, refetch } = useQuery<unknown, unknown, Array<AddressTokenBalance>>(
-    [ QueryKeys.addressTokenBalances, addressQueryData?.hash ],
-    async() => await fetch(`/node-api/addresses/${ addressQueryData?.hash }/token-balances`),
-    {
-      enabled: Boolean(addressQueryData),
-    },
-  );
-  const balancesIsFetching = useIsFetching({ queryKey: [ QueryKeys.addressTokenBalances, addressQueryData?.hash ] });
+  const addressQueryData = queryClient.getQueryData<Address>(addressResourceKey);
+
+  const { data, isError, isLoading, refetch } = useApiQuery('address_token_balances', {
+    pathParams: { id: addressQueryData?.hash },
+    queryOptions: { enabled: Boolean(addressQueryData) },
+  });
+  const balancesResourceKey = getResourceKey('address_token_balances', { pathParams: { id: addressQueryData?.hash } });
+  const balancesIsFetching = useIsFetching({ queryKey: balancesResourceKey });
 
   const handleTokenBalanceMessage: SocketMessage.AddressTokenBalance['handler'] = React.useCallback((payload) => {
     if (payload.block_number !== blockNumber) {

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -12,11 +12,11 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { ApiKey, ApiKeys, ApiKeyErrors } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+import type { ResourceErrorAccount } from 'lib/api/resources';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 type Props = {
@@ -40,7 +40,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       name: data?.name || '',
     },
   });
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
   const queryClient = useQueryClient();
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
@@ -48,17 +48,20 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     const body = { name: data.name };
 
     if (!data.token) {
-      return fetch('/node-api/account/api-keys', { method: 'POST', body });
+      return apiFetch('api_keys', { fetchParams: { method: 'POST', body } });
     }
 
-    return fetch(`/node-api/account/api-keys/${ data.token }`, { method: 'PUT', body });
+    return apiFetch('api_keys', {
+      pathParams: { id: data.token },
+      fetchParams: { method: 'PUT', body },
+    });
   };
 
   const mutation = useMutation(updateApiKey, {
     onSuccess: async(data) => {
       const response = data as unknown as ApiKey;
 
-      queryClient.setQueryData([ QueryKeys.apiKeys ], (prevData: ApiKeys | undefined) => {
+      queryClient.setQueryData([ resourceKey('api_keys') ], (prevData: ApiKeys | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.api_key === response.api_key);
 
         if (isExisting) {
@@ -76,11 +79,12 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
       onClose();
     },
-    onError: (e: ErrorType<ApiKeyErrors>) => {
-      if (e?.error?.name) {
-        setError('name', { type: 'custom', message: getErrorMessage(e.error, 'name') });
-      } else if (e?.error?.identity_id) {
-        setError('name', { type: 'custom', message: getErrorMessage(e.error, 'identity_id') });
+    onError: (error: ResourceErrorAccount<ApiKeyErrors>) => {
+      const errorMap = error.payload?.errors;
+      if (errorMap?.name) {
+        setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+      } else if (errorMap?.identity_id) {
+        setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }

ui/apiKey/ApiKeyTable/ApiKeyListItem.tsx

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 
 import type { ApiKey } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import ApiKeySnippet from 'ui/shared/ApiKeySnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -23,10 +23,10 @@ const ApiKeyListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <ApiKeySnippet apiKey={ item.api_key } name={ item.name }/>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/apiKey/DeleteApiKeyModal.tsx

@@ -3,9 +3,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { ApiKey, ApiKeys } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
-import useFetch from 'lib/hooks/useFetch';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
@@ -16,14 +16,17 @@ type Props = {
 
 const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const mutationFn = useCallback(() => {
-    return fetch(`/node-api/account/api-keys/${ data.api_key }`, { method: 'DELETE' });
-  }, [ data.api_key, fetch ]);
+    return apiFetch('api_keys', {
+      pathParams: { id: data.api_key },
+      fetchParams: { method: 'DELETE' },
+    });
+  }, [ data.api_key, apiFetch ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ QueryKeys.apiKeys ], (prevData: ApiKeys | undefined) => {
+    queryClient.setQueryData([ resourceKey('api_keys') ], (prevData: ApiKeys | undefined) => {
       return prevData?.filter((item) => item.api_key !== data.api_key);
     });
   }, [ data, queryClient ]);

ui/block/BlockDetails.pw.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import BlockDetails from './BlockDetails';
 
-const API_URL = '/node-api/blocks/1';
+const API_URL = buildApiUrl('block', { id: '1' });
 const hooksConfig = {
   router: {
-    query: { id: 1 },
+    query: { id: '1' },
   },
 };
 

ui/block/BlockDetails.tsx

 import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import NextLink from 'next/link';
@@ -7,17 +6,13 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
-import type { Block } from 'types/api/block';
-import { QueryKeys } from 'types/client/queries';
-
 import appConfig from 'configs/app/config';
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
+import useApiQuery from 'lib/api/useApiQuery';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { space } from 'lib/html-entities';
 import link from 'lib/link/link';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
@@ -35,15 +30,11 @@ import Utilization from 'ui/shared/Utilization/Utilization';
 const BlockDetails = () => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);
   const router = useRouter();
-  const fetch = useFetch();
 
-  const { data, isLoading, isError, error } = useQuery<unknown, ErrorType<{ status: number }>, Block>(
-    [ QueryKeys.block, router.query.id ],
-    async() => await fetch(`/node-api/blocks/${ router.query.id }`),
-    {
-      enabled: Boolean(router.query.id),
-    },
-  );
+  const { data, isLoading, isError, error } = useApiQuery<'block', { status: number }>('block', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: { enabled: Boolean(router.query.id) },
+  });
 
   const handleCutClick = React.useCallback(() => {
     setIsExpanded((flag) => !flag);

ui/blocks/BlocksContent.tsx

@@ -5,22 +5,23 @@ import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { BlockType, BlocksResponse } from 'types/api/block';
-import { QueryKeys } from 'types/client/queries';
 
+import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import BlocksList from 'ui/blocks/BlocksList';
-import BlocksSkeletonMobile from 'ui/blocks/BlocksSkeletonMobile';
 import BlocksTable from 'ui/blocks/BlocksTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 type QueryResult = UseQueryResult<BlocksResponse> & {
   pagination: PaginationProps;
+  isPaginationVisible: boolean;
 };
 
 interface Props {
@@ -34,18 +35,9 @@ const BlocksContent = ({ type, query }: Props) => {
   const [ socketAlert, setSocketAlert ] = React.useState('');
 
   const handleNewBlockMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    const queryKey = (() => {
-      switch (type) {
-        case 'uncle':
-          return QueryKeys.blocksUncles;
-        case 'reorg':
-          return QueryKeys.blocksReorgs;
-        default:
-          return QueryKeys.blocks;
-      }
-    })();
+    const queryKey = getResourceKey('blocks', { queryParams: { type } });
 
-    queryClient.setQueryData([ queryKey, { page: query.pagination.page, filters: { type } } ], (prevData: BlocksResponse | undefined) => {
+    queryClient.setQueryData(queryKey, (prevData: BlocksResponse | undefined) => {
       const shouldAddToList = !type || type === payload.block.type;
 
       if (!prevData) {
@@ -56,7 +48,7 @@ const BlocksContent = ({ type, query }: Props) => {
       }
       return shouldAddToList ? { ...prevData, items: [ payload.block, ...prevData.items ] } : prevData;
     });
-  }, [ query.pagination.page, queryClient, type ]);
+  }, [ queryClient, type ]);
 
   const handleSocketClose = React.useCallback(() => {
     setSocketAlert('Connection is lost. Please click here to load new blocks.');
@@ -83,7 +75,7 @@ const BlocksContent = ({ type, query }: Props) => {
       return (
         <>
           <Show below="lg" key="skeleton-mobile" ssr={ false }>
-            <BlocksSkeletonMobile/>
+            <SkeletonList/>
           </Show>
           <Hide below="lg" key="skeleton-desktop" ssr={ false }>
             <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
@@ -110,11 +102,9 @@ const BlocksContent = ({ type, query }: Props) => {
 
   })();
 
-  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
-
   return (
     <>
-      { isMobile && !isPaginatorHidden && (
+      { isMobile && query.isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>

ui/blocks/BlocksListItem.tsx

@@ -12,9 +12,9 @@ import { WEI } from 'lib/consts';
 import link from 'lib/link/link';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -29,7 +29,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const txFees = BigNumber(data.tx_fees || 0);
 
   return (
-    <AccountListItemMobile rowGap={ 3 } key={ String(data.height) }>
+    <ListItemMobile rowGap={ 3 } key={ String(data.height) } isAnimated>
       <Flex justifyContent="space-between" w="100%">
         <Flex columnGap={ 2 } alignItems="center">
           { isPending && <Spinner size="sm"/> }
@@ -76,7 +76,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           <Utilization ml={ 4 } value={ burntFees.div(txFees).toNumber() }/>
         </Flex>
       </Box>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/blocks/BlocksSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const BlocksSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 } justifyContent="space-between">
-            <Skeleton w="75px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-          <Skeleton h={ 6 } w="130px"/>
-          <Skeleton h={ 6 } w="180px"/>
-          <Skeleton h={ 6 } w="60px"/>
-          <Skeleton h={ 6 } w="100%"/>
-          <Skeleton h={ 6 } w="170px"/>
-          <Skeleton h={ 6 } w="100%"/>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default BlocksSkeletonMobile;

ui/blocks/BlocksTabSlot.tsx

 import { Flex, Box, Text, Skeleton } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { HomeStats } from 'types/api/stats';
-import { QueryKeys } from 'types/client/queries';
-
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
@@ -18,12 +14,7 @@ interface Props {
 
 const BlocksTabSlot = ({ pagination, isPaginationVisible }: Props) => {
   const isMobile = useIsMobile();
-  const fetch = useFetch();
-
-  const statsQuery = useQuery<unknown, unknown, HomeStats>(
-    [ QueryKeys.homeStats ],
-    () => fetch('/node-api/home-stats'),
-  );
+  const statsQuery = useApiQuery('homepage_stats');
 
   if (isMobile) {
     return null;

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -12,11 +12,11 @@ import type { ControllerRenderProps, SubmitHandler } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { CustomAbi, CustomAbis, CustomAbiErrors } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+import type { ResourceErrorAccount } from 'lib/api/resources';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
 import AddressInput from 'ui/shared/AddressInput';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
@@ -46,16 +46,19 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   });
 
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const customAbiKey = (data: Inputs & { id?: number }) => {
     const body = { name: data.name, contract_address_hash: data.contract_address_hash, abi: data.abi };
 
     if (!data.id) {
-      return fetch<CustomAbi, CustomAbiErrors>('/node-api/account/custom-abis', { method: 'POST', body });
+      return apiFetch('custom_abi', { fetchParams: { method: 'POST', body } });
     }
 
-    return fetch<CustomAbi, CustomAbiErrors>(`/node-api/account/custom-abis/${ data.id }`, { method: 'PUT', body });
+    return apiFetch('custom_abi', {
+      pathParams: { id: String(data.id) },
+      fetchParams: { method: 'PUT', body },
+    });
   };
 
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
@@ -63,7 +66,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   const mutation = useMutation(customAbiKey, {
     onSuccess: (data) => {
       const response = data as unknown as CustomAbi;
-      queryClient.setQueryData([ QueryKeys.customAbis ], (prevData: CustomAbis | undefined) => {
+      queryClient.setQueryData([ resourceKey('custom_abi') ], (prevData: CustomAbis | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.id === response.id);
 
         if (isExisting) {
@@ -81,13 +84,14 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
       onClose();
     },
-    onError: (e: ErrorType<CustomAbiErrors>) => {
-      if (e?.error?.address_hash || e?.error?.name || e?.error?.abi) {
-        e?.error?.address_hash && setError('contract_address_hash', { type: 'custom', message: getErrorMessage(e.error, 'address_hash') });
-        e?.error?.name && setError('name', { type: 'custom', message: getErrorMessage(e.error, 'name') });
-        e?.error?.abi && setError('abi', { type: 'custom', message: getErrorMessage(e.error, 'abi') });
-      } else if (e?.error?.identity_id) {
-        setError('contract_address_hash', { type: 'custom', message: getErrorMessage(e.error, 'identity_id') });
+    onError: (error: ResourceErrorAccount<CustomAbiErrors>) => {
+      const errorMap = error.payload?.errors;
+      if (errorMap?.address_hash || errorMap?.name || errorMap?.abi) {
+        errorMap?.address_hash && setError('contract_address_hash', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
+        errorMap?.name && setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+        errorMap?.abi && setError('abi', { type: 'custom', message: getErrorMessage(errorMap, 'abi') });
+      } else if (errorMap?.identity_id) {
+        setError('contract_address_hash', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }

ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 
 import type { CustomAbi } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -23,10 +23,10 @@ const CustomAbiListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
-      <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name } isContract/>
+    <ListItemMobile>
+      <AddressSnippet address={ item.contract_address } subtitle={ item.name }/>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx

@@ -28,7 +28,7 @@ const CustomAbiTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name } isContract/>
+        <AddressSnippet address={ item.contract_address } subtitle={ item.name }/>
       </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>

ui/customAbi/DeleteCustomAbiModal.tsx

@@ -3,8 +3,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { CustomAbi, CustomAbis } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
@@ -16,13 +17,17 @@ type Props = {
 const DeleteCustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
 
   const queryClient = useQueryClient();
+  const apiFetch = useApiFetch();
 
   const mutationFn = useCallback(() => {
-    return fetch(`/node-api/account/custom-abis/${ data.id }`, { method: 'DELETE' });
-  }, [ data ]);
+    return apiFetch('custom_abi', {
+      pathParams: { id: String(data.id) },
+      fetchParams: { method: 'DELETE' },
+    });
+  }, [ apiFetch, data.id ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ QueryKeys.customAbis ], (prevData: CustomAbis | undefined) => {
+    queryClient.setQueryData([ resourceKey('custom_abi') ], (prevData: CustomAbis | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ data, queryClient ]);

ui/home/IndexingAlert.tsx

 import { Alert, AlertIcon, AlertTitle, chakra } from '@chakra-ui/react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { IndexingStatus } from 'types/api/indexingStatus';
-import { QueryKeys } from 'types/client/queries';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp, ndash } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
 const IndexingAlert = ({ className }: { className?: string }) => {
-  const fetch = useFetch();
   const isMobile = useIsMobile();
 
-  const { data } = useQuery<unknown, unknown, IndexingStatus>(
-    [ QueryKeys.indexingStatus ],
-    async() => await fetch(`/node-api/index/indexing-status`),
-  );
+  const { data } = useApiQuery('homepage_indexing_status');
 
   const queryClient = useQueryClient();
 
   const handleBlocksIndexStatus: SocketMessage.BlocksIndexStatus['handler'] = React.useCallback((payload) => {
-    queryClient.setQueryData([ QueryKeys.indexingStatus ], (prevData: IndexingStatus | undefined) => {
+    queryClient.setQueryData(getResourceKey('homepage_indexing_status'), (prevData: IndexingStatus | undefined) => {
 
       const newData = prevData ? { ...prevData } : {} as IndexingStatus;
       newData.finished_indexing_blocks = payload.finished;
@@ -46,7 +41,7 @@ const IndexingAlert = ({ className }: { className?: string }) => {
   });
 
   const handleIntermalTxsIndexStatus: SocketMessage.InternalTxsIndexStatus['handler'] = React.useCallback((payload) => {
-    queryClient.setQueryData([ QueryKeys.indexingStatus ], (prevData: IndexingStatus | undefined) => {
+    queryClient.setQueryData(getResourceKey('homepage_indexing_status'), (prevData: IndexingStatus | undefined) => {
 
       const newData = prevData ? { ...prevData } : {} as IndexingStatus;
       newData.finished_indexing = payload.finished;

ui/home/LatestBlocks.pw.tsx

@@ -5,11 +5,12 @@ import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import LatestBlocks from './LatestBlocks';
 
-const STATS_API_URL = '/node-api/home-stats';
-const BLOCKS_API_URL = '/node-api/index/blocks';
+const STATS_API_URL = buildApiUrl('homepage_stats');
+const BLOCKS_API_URL = buildApiUrl('homepage_blocks');
 
 export const test = base.extend<socketServer.SocketServerFixture>({
   createSocket: socketServer.createSocket,

ui/home/LatestBlocks.tsx

 import { Box, Heading, Flex, Link, Text, VStack, Skeleton } from '@chakra-ui/react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Block } from 'types/api/block';
-import type { HomeStats } from 'types/api/stats';
-import { QueryKeys } from 'types/client/queries';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import link from 'lib/link/link';
@@ -24,20 +22,13 @@ const BLOCK_MARGIN = 12;
 const LatestBlocks = () => {
   const isMobile = useIsMobile();
   const blocksMaxCount = isMobile ? 2 : 3;
-  const fetch = useFetch();
-  const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Block>>(
-    [ QueryKeys.indexBlocks ],
-    async() => await fetch(`/node-api/index/blocks`),
-  );
+  const { data, isLoading, isError } = useApiQuery('homepage_blocks');
 
   const queryClient = useQueryClient();
-  const statsQueryResult = useQuery<unknown, unknown, HomeStats>(
-    [ QueryKeys.homeStats ],
-    () => fetch('/node-api/home-stats'),
-  );
+  const statsQueryResult = useApiQuery('homepage_stats');
 
   const handleNewBlockMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    queryClient.setQueryData([ QueryKeys.indexBlocks ], (prevData: Array<Block> | undefined) => {
+    queryClient.setQueryData(getResourceKey('homepage_blocks'), (prevData: Array<Block> | undefined) => {
 
       const newData = prevData ? [ ...prevData ] : [];
 

ui/home/LatestBlocksItem.tsx

@@ -36,7 +36,7 @@ const LatestBlocksItem = ({ block, h }: Props) => {
       transitionTimingFunction="linear"
       borderRadius="12px"
       border="1px solid"
-      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       p={ 6 }
       h={ `${ h }px` }
       minWidth={{ base: '100%', lg: '280px' }}

ui/home/LatestBlocksItemSkeleton.tsx

@@ -15,7 +15,7 @@ const LatestBlocksItemSkeleton = () => {
       minWidth={{ base: '100%', lg: '280px' }}
       borderRadius="12px"
       border="1px solid"
-      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       p={ 6 }
     >
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>

ui/home/LatestTxs.pw.tsx

@@ -6,6 +6,7 @@ import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import LatestTxs from './LatestTxs';
 
@@ -14,11 +15,11 @@ export const test = base.extend<socketServer.SocketServerFixture>({
 });
 
 test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route('/node-api/home-stats', (route) => route.fulfill({
+  await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(statsMock.base),
   }));
-  await page.route('/node-api/index/txs', (route) => route.fulfill({
+  await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
     status: 200,
     body: JSON.stringify([
       txMock.base,
@@ -47,11 +48,11 @@ test.describe('socket', () => {
   };
 
   test('new item', async({ mount, page, createSocket }) => {
-    await page.route('/node-api/home-stats', (route) => route.fulfill({
+    await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
       status: 200,
       body: JSON.stringify(statsMock.base),
     }));
-    await page.route('/node-api/index/txs', (route) => route.fulfill({
+    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
       status: 200,
       body: JSON.stringify([
         txMock.base,

ui/home/LatestTxs.tsx

 import { Box, Heading, Flex, Link, Text, Skeleton } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { Transaction } from 'types/api/transaction';
-import { QueryKeys } from 'types/client/queries';
-
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
 import TxsNewItemNotice from 'ui/txs/TxsNewItemNotice';
@@ -16,11 +12,7 @@ import LatestTxsItemSkeleton from './LatestTxsItemSkeleton';
 const LatestTransactions = () => {
   const isMobile = useIsMobile();
   const txsCount = isMobile ? 2 : 6;
-  const fetch = useFetch();
-  const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Transaction>>(
-    [ QueryKeys.indexTxs ],
-    async() => await fetch(`/node-api/index/txs`),
-  );
+  const { data, isLoading, isError } = useApiQuery('homepage_txs');
 
   let content;
 

ui/home/LatestTxsItem.tsx

@@ -37,7 +37,7 @@ type Props = {
 }
 
 const LatestBlocksItem = ({ tx }: Props) => {
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const iconColor = useColorModeValue('blue.600', 'blue.300');
 
   const dataTo = tx.to ? tx.to : tx.created_contract;
@@ -109,7 +109,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
         <Box width={{ base: '100%', lg: '50%' }}>
           <Flex alignItems="center" mb={ 3 } justifyContent={{ base: 'start', lg: 'end' }}>
             <Address>
-              <AddressIcon hash={ tx.from.hash }/>
+              <AddressIcon address={ tx.from }/>
               <AddressLink
                 hash={ tx.from.hash }
                 alias={ tx.from.name }
@@ -126,7 +126,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
               color="gray.500"
             />
             <Address>
-              <AddressIcon hash={ dataTo.hash }/>
+              <AddressIcon address={ dataTo }/>
               <AddressLink
                 hash={ dataTo.hash }
                 alias={ dataTo.name }

ui/home/LatestTxsItemSkeleton.tsx

@@ -9,7 +9,7 @@ import {
 import React from 'react';
 
 const LatestTxsItemSkeleton = () => {
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
     <Box

ui/home/Stats.pw.tsx

@@ -4,10 +4,11 @@ import React from 'react';
 import * as statsMock from 'mocks/stats/index';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import Stats from './Stats';
 
-const API_URL = '/node-api/home-stats';
+const API_URL = buildApiUrl('homepage_stats');
 
 test('all items +@mobile +@dark-mode +@desktop-xl', async({ mount, page }) => {
   await page.route(API_URL, (route) => route.fulfill({

ui/home/Stats.tsx

 import { Grid } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { HomeStats } from 'types/api/stats';
-import { QueryKeys } from 'types/client/queries';
-
 import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
 import clockIcon from 'icons/clock-light.svg';
 import gasIcon from 'icons/gas.svg';
 import txIcon from 'icons/transactions.svg';
 import walletIcon from 'icons/wallet.svg';
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import link from 'lib/link/link';
 
 import StatsGasPrices from './StatsGasPrices';
@@ -26,12 +22,7 @@ let itemsCount = 5;
 !hasAvgBlockTime && itemsCount--;
 
 const Stats = () => {
-  const fetch = useFetch();
-
-  const { data, isLoading, isError } = useQuery<unknown, unknown, HomeStats>(
-    [ QueryKeys.homeStats ],
-    async() => await fetch(`/node-api/home-stats`),
-  );
+  const { data, isLoading, isError } = useApiQuery('homepage_stats');
 
   if (isError) {
     return null;

ui/home/indicators/ChainIndicators.pw.tsx

@@ -4,11 +4,12 @@ import React from 'react';
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import ChainIndicators from './ChainIndicators';
 
-const STATS_API_URL = '/node-api/home-stats';
-const TX_CHART_API_URL = '/node-api/home-stats/charts/transactions';
+const STATS_API_URL = buildApiUrl('homepage_stats');
+const TX_CHART_API_URL = buildApiUrl('homepage_chart_txs');
 
 test('daily txs chart +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) => {
   await page.route(STATS_API_URL, (route) => route.fulfill({

ui/home/indicators/ChainIndicators.tsx

 import { Box, Flex, Icon, Skeleton, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { HomeStats } from 'types/api/stats';
-import { QueryKeys } from 'types/client/queries';
-
 import appConfig from 'configs/app/config';
 import infoIcon from 'icons/info.svg';
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 
 import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
 import ChainIndicatorItem from './ChainIndicatorItem';
@@ -33,12 +29,7 @@ const ChainIndicators = () => {
   const indicator = indicators.find(({ id }) => id === selectedIndicator);
 
   const queryResult = useFetchChartData(indicator);
-
-  const fetch = useFetch();
-  const statsQueryResult = useQuery<unknown, unknown, HomeStats>(
-    [ QueryKeys.homeStats ],
-    () => fetch('/node-api/home-stats'),
-  );
+  const statsQueryResult = useApiQuery('homepage_stats');
 
   const bgColorDesktop = useColorModeValue('white', 'gray.900');
   const bgColorMobile = useColorModeValue('white', 'black');

ui/home/indicators/types.ts

-import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
 import type { HomeStats } from 'types/api/stats';
-import type { QueryKeys } from 'types/client/queries';
 import type { TimeChartData } from 'ui/shared/chart/types';
 
-export type ChartsQueryKeys = QueryKeys.chartsTxs | QueryKeys.chartsMarket;
+import type { ResourcePayload } from 'lib/api/resources';
+
+export type ChartsResources = 'homepage_chart_txs' | 'homepage_chart_market';
 
 export type ChainIndicatorId = 'daily_txs' | 'coin_price' | 'market_cup';
 
-export interface TChainIndicator<Q extends ChartsQueryKeys> {
+export interface TChainIndicator<R extends ChartsResources> {
   id: ChainIndicatorId;
   title: string;
   value: (stats: HomeStats) => string;
   icon: React.ReactNode;
   hint?: string;
   api: {
-    queryName: Q;
-    path: string;
-    dataFn: (response: ChartsResponse<Q>) => TimeChartData;
+    resourceName: R;
+    dataFn: (response: ResourcePayload<R>) => TimeChartData;
   };
 }
-
-export type ChartsResponse<Q extends ChartsQueryKeys> =
-    Q extends QueryKeys.chartsTxs ? ChartTransactionResponse :
-      Q extends QueryKeys.chartsMarket ? ChartMarketResponse :
-        never;

ui/home/indicators/useFetchChartData.tsx

 import type { UseQueryResult } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { TChainIndicator, ChartsResponse, ChartsQueryKeys } from './types';
+import type { TChainIndicator, ChartsResources } from './types';
 import type { TimeChartData } from 'ui/shared/chart/types';
 
-import useFetch from 'lib/hooks/useFetch';
+import type { ResourcePayload } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
 
-type NotUndefined<T> = T extends undefined ? never : T;
-
-export default function useFetchChartData<Q extends ChartsQueryKeys>(indicator: TChainIndicator<Q> | undefined): UseQueryResult<TimeChartData> {
-  const fetch = useFetch();
-
-  type ResponseType = ChartsResponse<NotUndefined<typeof indicator>['api']['queryName']>;
-
-  const queryResult = useQuery<unknown, unknown, ResponseType>(
-    [ indicator?.api.queryName ],
-    () => fetch(indicator?.api.path || ''),
-    { enabled: Boolean(indicator) },
-  );
+export default function useFetchChartData<R extends ChartsResources>(indicator: TChainIndicator<R> | undefined): UseQueryResult<TimeChartData> {
+  const queryResult = useApiQuery(indicator?.api.resourceName || 'homepage_chart_txs', {
+    queryOptions: { enabled: Boolean(indicator) },
+  });
 
   return React.useMemo(() => {
     return {
       ...queryResult,
-      data: queryResult.data && indicator ? indicator.api.dataFn(queryResult.data) : queryResult.data,
+      data: queryResult.data && indicator ? indicator.api.dataFn(queryResult.data as ResourcePayload<R>) : queryResult.data,
     } as UseQueryResult<TimeChartData>;
   }, [ indicator, queryResult ]);
 }

ui/home/indicators/utils/indicators.tsx

@@ -2,7 +2,6 @@ import { Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TChainIndicator } from '../types';
-import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
 import globeIcon from 'icons/globe.svg';
@@ -11,15 +10,14 @@ import { shortenNumberWithLetter } from 'lib/formatters';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
 import TokenLogo from 'ui/shared/TokenLogo';
 
-const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
+const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
   id: 'daily_txs',
   title: 'Daily transactions',
   value: (stats) => shortenNumberWithLetter(Number(stats.transactions_today), undefined, { maximumFractionDigits: 2 }),
   icon: <Icon as={ txIcon } boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
   hint: `The total daily number of transactions on the blockchain for the last month.`,
   api: {
-    queryName: QueryKeys.chartsTxs,
-    path: '/node-api/home-stats/charts/transactions',
+    resourceName: 'homepage_chart_txs',
     dataFn: (response) => ([ {
       items: response.chart_data
         .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
@@ -30,15 +28,14 @@ const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
   },
 };
 
-const coinPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
+const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
   id: 'coin_price',
   title: `${ appConfig.network.currency.symbol } price`,
   value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
   icon: <TokenLogo hash={ appConfig.network.currency.address || '' } name={ appConfig.network.currency.name } boxSize={ 6 }/>,
   hint: `${ appConfig.network.currency.symbol } token daily price in USD.`,
   api: {
-    queryName: QueryKeys.chartsMarket,
-    path: '/node-api/home-stats/charts/market',
+    resourceName: 'homepage_chart_market',
     dataFn: (response) => ([ {
       items: response.chart_data
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) }))
@@ -49,7 +46,7 @@ const coinPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
   },
 };
 
-const marketPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
+const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
   id: 'market_cup',
   title: 'Market cap',
   value: (stats) => '$' + shortenNumberWithLetter(Number(stats.market_cap), undefined, { maximumFractionDigits: 0 }),
@@ -57,8 +54,7 @@ const marketPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
   // eslint-disable-next-line max-len
   hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
   api: {
-    queryName: QueryKeys.chartsMarket,
-    path: '/node-api/home-stats/charts/market',
+    resourceName: 'homepage_chart_market',
     dataFn: (response) => ([ {
       items: response.chart_data
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))

ui/pages/Address.tsx

 import { Flex, Tag } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { Address } from 'types/api/address';
-import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
 import AddressCoinBalance from 'ui/address/AddressCoinBalance';
 import AddressDetails from 'ui/address/AddressDetails';
@@ -20,15 +17,11 @@ import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 const AddressPageContent = () => {
   const router = useRouter();
-  const fetch = useFetch();
 
-  const addressQuery = useQuery<unknown, unknown, Address>(
-    [ QueryKeys.address, router.query.id ],
-    async() => await fetch(`/node-api/addresses/${ router.query.id }`),
-    {
-      enabled: Boolean(router.query.id),
-    },
-  );
+  const addressQuery = useApiQuery('address', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: { enabled: Boolean(router.query.id) },
+  });
 
   const tags = [
     ...(addressQuery.data?.private_tags || []),

ui/pages/ApiKeys.tsx

 import { Box, Button, Stack, Link, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { ApiKey, ApiKeys } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { ApiKey } from 'types/api/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { space } from 'lib/html-entities';
@@ -17,8 +15,8 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 const DATA_LIMIT = 3;
 
@@ -26,13 +24,12 @@ const ApiKeysPage: React.FC = () => {
   const apiKeyModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
   useRedirectForInvalidAuthToken();
 
   const [ apiKeyModalData, setApiKeyModalData ] = useState<ApiKey>();
   const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ QueryKeys.apiKeys ], async() => await fetch('/node-api/account/api-keys'));
+  const { data, isLoading, isError } = useApiQuery('api_keys');
 
   const onEditClick = useCallback((data: ApiKey) => {
     setApiKeyModalData(data);
@@ -63,7 +60,7 @@ const ApiKeysPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <SkeletonAccountMobile/> : (
+      const loader = isMobile ? <SkeletonListAccount/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="48px" width="156px" marginTop={ 8 }/>

ui/pages/Apps.tsx

 import { Box, Icon, Link } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { JsonRpcUrlResponse } from 'types/api/jsonRpcUrl';
-
 import config from 'configs/app/config';
 import PlusIcon from 'icons/plus.svg';
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import AppList from 'ui/apps/AppList';
 import AppListSkeleton from 'ui/apps/AppListSkeleton';
 import CategoriesMenu from 'ui/apps/CategoriesMenu';
@@ -15,8 +12,6 @@ import FilterInput from 'ui/shared/FilterInput';
 import useMarketplaceApps from '../apps/useMarketplaceApps';
 
 const Apps = () => {
-  const fetch = useFetch();
-
   const {
     isLoading,
     category,
@@ -30,10 +25,7 @@ const Apps = () => {
     handleFavoriteClick,
   } = useMarketplaceApps();
 
-  useQuery<unknown, unknown, JsonRpcUrlResponse>(
-    [ 'json-rpc-url' ],
-    async() => await fetch(`/node-api/config/json-rpc-url`),
-  );
+  useApiQuery('config_json_rpc');
 
   return (
     <>

ui/pages/Block.tsx

@@ -2,7 +2,6 @@ import { Flex, Icon, Link, Tooltip } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
@@ -30,8 +29,8 @@ const BlockPageContent = () => {
   const appProps = useAppContext();
 
   const blockTxsQuery = useQueryWithPages({
-    apiPath: `/node-api/blocks/${ router.query.id }/transactions`,
-    queryName: QueryKeys.blockTxs,
+    resourceName: 'block_txs',
+    pathParams: { id: router.query.id?.toString() },
     options: {
       enabled: Boolean(router.query.id && router.query.tab === 'txs'),
     },

ui/pages/Blocks.pw.tsx

@@ -5,11 +5,12 @@ import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import Blocks from './Blocks';
 
-const BLOCKS_API_URL = '/node-api/blocks?type=block';
-const STATS_API_URL = '/node-api/home-stats';
+const BLOCKS_API_URL = buildApiUrl('blocks') + '?type=block';
+const STATS_API_URL = buildApiUrl('homepage_stats');
 const hooksConfig = {
   router: {
     query: { tab: 'blocks' },

ui/pages/Blocks.tsx

@@ -2,7 +2,6 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { BlockType } from 'types/api/block';
-import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -19,12 +18,6 @@ const TAB_TO_TYPE: Record<string, BlockType> = {
   uncles: 'uncle',
 };
 
-const TAB_TO_QUERY: Record<string, QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles> = {
-  blocks: QueryKeys.blocks,
-  reorgs: QueryKeys.blocksReorgs,
-  uncles: QueryKeys.blocksUncles,
-};
-
 const TAB_LIST_PROPS = {
   marginBottom: 0,
   py: 5,
@@ -35,11 +28,9 @@ const BlocksPageContent = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
   const type = router.query.tab && !Array.isArray(router.query.tab) ? TAB_TO_TYPE[router.query.tab] : 'block';
-  const queryName = router.query.tab && !Array.isArray(router.query.tab) ? TAB_TO_QUERY[router.query.tab] : QueryKeys.blocks;
 
   const blocksQuery = useQueryWithPages({
-    apiPath: '/node-api/blocks',
-    queryName,
+    resourceName: 'blocks',
     filters: { type },
   });
 

ui/pages/CustomAbi.tsx

 import { Box, Button, HStack, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { CustomAbi, CustomAbis } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { CustomAbi } from 'types/api/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal';
@@ -16,21 +14,19 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 const CustomAbiPage: React.FC = () => {
   const customAbiModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
   useRedirectForInvalidAuthToken();
 
   const [ customAbiModalData, setCustomAbiModalData ] = useState<CustomAbi>();
   const [ deleteModalData, setDeleteModalData ] = useState<CustomAbi>();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, CustomAbis>([ QueryKeys.customAbis ], async() =>
-    await fetch('/node-api/account/custom-abis'));
+  const { data, isLoading, isError } = useApiQuery('custom_abi');
 
   const onEditClick = useCallback((data: CustomAbi) => {
     setCustomAbiModalData(data);
@@ -60,7 +56,7 @@ const CustomAbiPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <SkeletonAccountMobile/> : (
+      const loader = isMobile ? <SkeletonListAccount/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/pages/Home.pw.tsx

@@ -7,22 +7,23 @@ import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
 import insertAdText from 'playwright/scripts/insertAdText';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import Home from './Home';
 
 test('default view -@default +@desktop-xl +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route('/node-api/home-stats', (route) => route.fulfill({
+  await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(statsMock.base),
   }));
-  await page.route('/node-api/index/blocks', (route) => route.fulfill({
+  await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
     status: 200,
     body: JSON.stringify([
       blockMock.base,
       blockMock.base2,
     ]),
   }));
-  await page.route('/node-api/index/txs', (route) => route.fulfill({
+  await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
     status: 200,
     body: JSON.stringify([
       txMock.base,
@@ -30,7 +31,7 @@ test('default view -@default +@desktop-xl +@mobile +@dark-mode', async({ mount,
       txMock.withTokenTransfer,
     ]),
   }));
-  await page.route('/node-api/home-stats/charts/transactions', (route) => route.fulfill({
+  await page.route(buildApiUrl('homepage_chart_txs'), (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(dailyTxsMock.base),
   }));

ui/pages/Login.tsx

-import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Link, Code, Flex, Box } from '@chakra-ui/react';
+import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Code, Flex, Box } from '@chakra-ui/react';
 import * as Sentry from '@sentry/react';
 import type { ChangeEvent } from 'react';
 import React from 'react';
@@ -47,8 +47,6 @@ const Login = () => {
     });
   }, [ toast, token ]);
 
-  const prodUrl = 'https://blockscout.com/poa/core';
-
   const handleNumIncrement = React.useCallback(() => {
     for (let index = 0; index < 5; index++) {
       setNum(5);
@@ -58,19 +56,15 @@ const Login = () => {
   return (
     <Page>
       <VStack gap={ 4 } alignItems="flex-start" maxW="1000px">
-        <PageTitle text="Vercel page"/>
-        <Flex columnGap={ 2 } alignItems="center">
-          <Box w="50px" textAlign="center">{ num }</Box>
-          <Button onClick={ handleNumIncrement } size="sm">add</Button>
-        </Flex>
+        <PageTitle text="Login page 😂"/>
         { isFormVisible && (
           <>
             <Alert status="error" flexDirection="column" alignItems="flex-start">
               <AlertTitle fontSize="md">
-                !!! Temporary solution for authentication !!!
+                !!! Temporary solution for authentication on localhost !!!
               </AlertTitle>
               <AlertDescription mt={ 3 }>
-                    To Sign in go to <Link href={ prodUrl } target="_blank">{ prodUrl }</Link> first, sign in there, copy obtained API token from cookie
+                    To Sign in go to production instance first, sign in there, copy obtained API token from cookie
                 <Code ml={ 1 }>{ cookies.NAMES.API_TOKEN }</Code> and paste it in the form below. After submitting the form you should be successfully
                     authenticated in current environment
               </AlertDescription>
@@ -80,6 +74,10 @@ const Login = () => {
           </>
         ) }
         <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
+        <Flex columnGap={ 2 } alignItems="center">
+          <Box w="50px" textAlign="center">{ num }</Box>
+          <Button onClick={ handleNumIncrement } size="sm">add</Button>
+        </Flex>
       </VStack>
     </Page>
   );

ui/pages/MarketplaceApp.tsx

 import { Box, Center, useColorMode } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import type { JsonRpcUrlResponse } from 'types/api/jsonRpcUrl';
 import type { AppItemOverview } from 'types/client/apps';
-import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import link from 'lib/link/link';
 import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
@@ -20,18 +17,15 @@ type Props = {
 const MarketplaceApp = ({ app, isLoading }: Props) => {
   const [ isFrameLoading, setIsFrameLoading ] = useState(isLoading);
   const { colorMode } = useColorMode();
-  const fetch = useFetch();
   const ref = useRef<HTMLIFrameElement>(null);
 
   const handleIframeLoad = useCallback(() => {
     setIsFrameLoading(false);
   }, []);
 
-  const { data: jsonRpcUrlResponse } = useQuery<unknown, unknown, JsonRpcUrlResponse>(
-    [ QueryKeys.jsonRpcUrl ],
-    async() => await fetch(`/node-api/config/json-rpc-url`),
-    { refetchOnMount: false },
-  );
+  const { data: jsonRpcUrlResponse } = useApiQuery('config_json_rpc', {
+    queryOptions: { refetchOnMount: false },
+  });
 
   useEffect(() => {
     if (app && !isFrameLoading) {

ui/pages/Transaction.tsx

 import { Flex, Link, Icon, Tag, Tooltip } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { Transaction } from 'types/api/transaction';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
+import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
-import useFetch from 'lib/hooks/useFetch';
 import isBrowser from 'lib/isBrowser';
 import networkExplorers from 'lib/networks/networkExplorers';
 import AdBanner from 'ui/shared/ad/AdBanner';
@@ -35,7 +33,6 @@ const TABS: Array<RoutedTab> = [
 
 const TransactionPageContent = () => {
   const router = useRouter();
-  const fetch = useFetch();
   const appProps = useAppContext();
   const isInBrowser = isBrowser();
 
@@ -43,13 +40,10 @@ const TransactionPageContent = () => {
 
   const hasGoBackLink = referrer && referrer.includes('/txs');
 
-  const { data } = useQuery<unknown, unknown, Transaction>(
-    [ 'tx', router.query.id ],
-    async() => await fetch(`/node-api/transactions/${ router.query.id }`),
-    {
-      enabled: Boolean(router.query.id),
-    },
-  );
+  const { data } = useApiQuery('tx', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: { enabled: Boolean(router.query.id) },
+  });
 
   const explorersLinks = networkExplorers
     .filter((explorer) => explorer.paths.tx)

ui/pages/Transactions.tsx

@@ -2,7 +2,6 @@ import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import appConfig from 'configs/app/config';
@@ -26,8 +25,7 @@ const Transactions = () => {
   const isMobile = useIsMobile();
   const filter = router.query.tab === 'pending' ? 'pending' : 'validated';
   const txsQuery = useQueryWithPages({
-    apiPath: '/node-api/transactions',
-    queryName: filter === 'validated' ? QueryKeys.txsValidate : QueryKeys.txsPending,
+    resourceName: filter === 'validated' ? 'txs_validated' : 'txs_pending',
     filters: { filter },
   });
 

ui/pages/Watchlist.tsx

@@ -2,32 +2,57 @@ import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
+import type { WatchlistAddress, WatchlistTokensResponse } from 'types/api/account';
 import type { TWatchlist, TWatchlistItem } from 'types/client/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
-import useFetch from 'lib/hooks/useFetch';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 import WatchListItem from 'ui/watchlist/WatchlistTable/WatchListItem';
 import WatchlistTable from 'ui/watchlist/WatchlistTable/WatchlistTable';
 
 const WatchList: React.FC = () => {
-  const { data, isLoading, isError } =
-    useQuery<unknown, unknown, TWatchlist>([ QueryKeys.watchlist ], async() => fetch('/node-api/account/watchlist/get-with-tokens'));
+  const apiFetch = useApiFetch();
+  const { data, isLoading, isError } = useQuery<unknown, unknown, TWatchlist>([ resourceKey('watchlist') ], async() => {
+    try {
+      const watchlistAddresses = await apiFetch<'watchlist', Array<WatchlistAddress>>('watchlist');
+
+      if (!Array.isArray(watchlistAddresses)) {
+        throw Error();
+      }
+
+      const watchlistTokens = await Promise.all(watchlistAddresses.map(({ address }) => {
+        if (!address?.hash) {
+          return Promise.resolve(0);
+        }
+        return apiFetch<'old_api', WatchlistTokensResponse>('old_api', { queryParams: { address: address.hash, module: 'account', action: 'tokenlist' } })
+          .then((response) => {
+            if ('result' in response && Array.isArray(response.result)) {
+              return response.result.length;
+            }
+            return 0;
+          });
+      }));
+
+      return watchlistAddresses.map((item, index) => ({ ...item, tokens_count: watchlistTokens[index] }));
+    } catch (error) {
+      return error;
+    }
+  });
   const queryClient = useQueryClient();
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
   useRedirectForInvalidAuthToken();
 
   const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
@@ -44,7 +69,7 @@ const WatchList: React.FC = () => {
   }, [ addressModalProps ]);
 
   const onAddOrEditSuccess = useCallback(async() => {
-    await queryClient.refetchQueries([ QueryKeys.watchlist ]);
+    await queryClient.refetchQueries([ resourceKey('watchlist') ]);
     setAddressModalData(undefined);
     addressModalProps.onClose();
   }, [ addressModalProps, queryClient ]);
@@ -60,7 +85,7 @@ const WatchList: React.FC = () => {
   }, [ deleteModalProps ]);
 
   const onDeleteSuccess = useCallback(async() => {
-    queryClient.setQueryData([ QueryKeys.watchlist ], (prevData: TWatchlist | undefined) => {
+    queryClient.setQueryData([ resourceKey('watchlist') ], (prevData: TWatchlist | undefined) => {
       return prevData?.filter((item) => item.id !== deleteModalData?.id);
     });
   }, [ deleteModalData?.id, queryClient ]);
@@ -73,7 +98,7 @@ const WatchList: React.FC = () => {
 
   let content;
   if (isLoading && !data) {
-    const loader = isMobile ? <SkeletonAccountMobile showFooterSlot/> : (
+    const loader = isMobile ? <SkeletonListAccount showFooterSlot/> : (
       <>
         <SkeletonTable columns={ [ '70%', '30%', '160px', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/AddressModal/AddressForm.tsx

@@ -9,11 +9,11 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { AddressTag, AddressTagErrors } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+import type { ResourceErrorAccount } from 'lib/api/resources';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
 import AddressInput from 'ui/shared/AddressInput';
 import TagInput from 'ui/shared/TagInput';
@@ -32,7 +32,7 @@ type Inputs = {
 }
 
 const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
   const [ pending, setPending ] = useState(false);
   const { control, handleSubmit, formState: { errors, isValid, isDirty }, setError } = useForm<Inputs>({
     mode: 'onTouched',
@@ -54,24 +54,28 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
     const isEdit = data?.id;
     if (isEdit) {
-      return fetch(`/node-api/account/private-tags/address/${ data.id }`, { method: 'PUT', body });
+      return apiFetch('private_tags_address', {
+        pathParams: { id: data.id },
+        fetchParams: { method: 'PUT', body },
+      });
     }
 
-    return fetch('/node-api/account/private-tags/address', { method: 'POST', body });
+    return apiFetch('private_tags_address', { fetchParams: { method: 'POST', body } });
   }, {
-    onError: (e: ErrorType<AddressTagErrors>) => {
+    onError: (error: ResourceErrorAccount<AddressTagErrors>) => {
       setPending(false);
-      if (e?.error?.address_hash || e?.error?.name) {
-        e?.error?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(e.error, 'address_hash') });
-        e?.error?.name && setError('tag', { type: 'custom', message: getErrorMessage(e.error, 'name') });
-      } else if (e?.error?.identity_id) {
-        setError('address', { type: 'custom', message: getErrorMessage(e.error, 'identity_id') });
+      const errorMap = error.payload?.errors;
+      if (errorMap?.address_hash || errorMap?.name) {
+        errorMap?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
+        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+      } else if (errorMap?.identity_id) {
+        setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ QueryKeys.addressTags ]).then(() => {
+      queryClient.refetchQueries([ resourceKey('private_tags_address') ]).then(() => {
         onClose();
         setPending(false);
       });

ui/privateTags/AddressTagTable/AddressTagListItem.tsx

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 
 import type { AddressTag } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -23,9 +23,9 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
-        <AddressSnippet address={ item.address_hash }/>
+        <AddressSnippet address={ item.address }/>
         <HStack spacing={ 3 } mt={ 4 }>
           <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
           <Tag>
@@ -34,7 +34,7 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </Flex>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -29,7 +29,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <AddressSnippet address={ item.address_hash }/>
+        <AddressSnippet address={ item.address }/>
       </Td>
       <Td whiteSpace="nowrap">
         <TruncatedTextTooltip label={ item.name }>

ui/privateTags/DeletePrivateTagModal.tsx

@@ -3,9 +3,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { AddressTag, TransactionTag, AddressTags, TransactionTags } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
-import useFetch from 'lib/hooks/useFetch';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
@@ -20,19 +20,23 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
   const id = data.id;
 
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const mutationFn = useCallback(() => {
-    return fetch(`/node-api/account/private-tags/${ type }/${ id }`, { method: 'DELETE' });
-  }, [ fetch, type, id ]);
+    const resourceName = type === 'address' ? 'private_tags_address' : 'private_tags_tx';
+    return apiFetch(resourceName, {
+      pathParams: { id: data.id },
+      fetchParams: { method: 'DELETE' },
+    });
+  }, [ type, apiFetch, data.id ]);
 
   const onSuccess = useCallback(async() => {
     if (type === 'address') {
-      queryClient.setQueryData([ QueryKeys.addressTags ], (prevData: AddressTags | undefined) => {
+      queryClient.setQueryData([ resourceKey('private_tags_address') ], (prevData: AddressTags | undefined) => {
         return prevData?.filter((item: AddressTag) => item.id !== id);
       });
     } else {
-      queryClient.setQueryData([ QueryKeys.transactionTags ], (prevData: TransactionTags | undefined) => {
+      queryClient.setQueryData([ resourceKey('private_tags_tx') ], (prevData: TransactionTags | undefined) => {
         return prevData?.filter((item: TransactionTag) => item.id !== id);
       });
     }

ui/privateTags/PrivateAddressTags.tsx

 import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { AddressTags, AddressTag } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { AddressTag } from 'types/api/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import AddressModal from './AddressModal/AddressModal';
 import AddressTagListItem from './AddressTagTable/AddressTagListItem';
@@ -18,13 +16,11 @@ import AddressTagTable from './AddressTagTable/AddressTagTable';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags = () => {
-  const { data: addressTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, AddressTags>([ QueryKeys.addressTags ], async() => fetch('/node-api/account/private-tags/address'), { refetchOnMount: false });
+  const { data: addressTagsData, isLoading, isError } = useApiQuery('private_tags_address', { queryOptions: { refetchOnMount: false } });
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
 
   const [ addressModalData, setAddressModalData ] = useState<AddressTag>();
   const [ deleteModalData, setDeleteModalData ] = useState<AddressTag>();
@@ -57,7 +53,7 @@ const PrivateAddressTags = () => {
   );
 
   if (isLoading && !addressTagsData) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/PrivateTransactionTags.tsx

 import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { TransactionTags, TransactionTag } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { TransactionTag } from 'types/api/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 import TransactionModal from './TransactionModal/TransactionModal';
@@ -18,16 +16,11 @@ import TransactionTagListItem from './TransactionTagTable/TransactionTagListItem
 import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 
 const PrivateTransactionTags = () => {
-  const { data: transactionTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, TransactionTags>(
-      [ QueryKeys.transactionTags ],
-      async() => fetch('/node-api/account/private-tags/transaction'), { refetchOnMount: false },
-    );
+  const { data: transactionTagsData, isLoading, isError } = useApiQuery('private_tags_tx', { queryOptions: { refetchOnMount: false } });
 
   const transactionModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
 
   const [ transactionModalData, setTransactionModalData ] = useState<TransactionTag>();
   const [ deleteModalData, setDeleteModalData ] = useState<TransactionTag>();
@@ -60,7 +53,7 @@ const PrivateTransactionTags = () => {
   );
 
   if (isLoading && !transactionTagsData) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '75%', '25%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -9,11 +9,11 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { TransactionTag, TransactionTagErrors } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+import type { ResourceErrorAccount } from 'lib/api/resources';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { TRANSACTION_HASH_REGEXP } from 'lib/validations/transaction';
 import TagInput from 'ui/shared/TagInput';
 import TransactionInput from 'ui/shared/TransactionInput';
@@ -44,7 +44,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
   });
 
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const { mutate } = useMutation((formData: Inputs) => {
     const body = {
@@ -54,24 +54,28 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
     const isEdit = data?.id;
 
     if (isEdit) {
-      return fetch(`/node-api/account/private-tags/transaction/${ data.id }`, { method: 'PUT', body });
+      return apiFetch('private_tags_tx', {
+        pathParams: { id: data.id },
+        fetchParams: { method: 'PUT', body },
+      });
     }
 
-    return fetch('/node-api/account/private-tags/transaction', { method: 'POST', body });
+    return apiFetch('private_tags_tx', { fetchParams: { method: 'POST', body } });
   }, {
-    onError: (e: ErrorType<TransactionTagErrors>) => {
+    onError: (error: ResourceErrorAccount<TransactionTagErrors>) => {
       setPending(false);
-      if (e?.error?.tx_hash || e?.error?.name) {
-        e?.error?.tx_hash && setError('transaction', { type: 'custom', message: getErrorMessage(e.error, 'tx_hash') });
-        e?.error?.name && setError('tag', { type: 'custom', message: getErrorMessage(e.error, 'name') });
-      } else if (e?.error?.identity_id) {
-        setError('transaction', { type: 'custom', message: getErrorMessage(e.error, 'identity_id') });
+      const errorMap = error.payload?.errors;
+      if (errorMap?.tx_hash || errorMap?.name) {
+        errorMap?.tx_hash && setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'tx_hash') });
+        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+      } else if (errorMap?.identity_id) {
+        setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ QueryKeys.transactionTags ]).then(() => {
+      queryClient.refetchQueries([ resourceKey('private_tags_tx') ]).then(() => {
         onClose();
         setPending(false);
       });

ui/privateTags/TransactionTagTable/TransactionTagListItem.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 
 import type { TransactionTag } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TransactionSnippet from 'ui/shared/TransactionSnippet';
 
@@ -23,7 +23,7 @@ const TransactionTagListItem = ({ item, onEditClick, onDeleteClick }: Props) =>
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
         <TransactionSnippet hash={ item.transaction_hash }/>
         <HStack spacing={ 3 } mt={ 4 }>
@@ -34,7 +34,7 @@ const TransactionTagListItem = ({ item, onEditClick, onDeleteClick }: Props) =>
         </HStack>
       </Flex>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/publicTags/DeletePublicTagModal.tsx

@@ -4,9 +4,9 @@ import React, { useCallback, useState } from 'react';
 import type { ChangeEvent } from 'react';
 
 import type { PublicTags, PublicTag } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
-import useFetch from 'lib/hooks/useFetch';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
@@ -23,17 +23,20 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDelete
   const tags = data.tags.split(';');
 
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   const deleteApiKey = useCallback(() => {
     const body = { remove_reason: reason };
-    return fetch(`/node-api/account/public-tags/${ data.id }`, { method: 'DELETE', body });
-  }, [ data.id, fetch, reason ]);
+    return apiFetch('public_tags', {
+      pathParams: { id: String(data.id) },
+      fetchParams: { method: 'DELETE', body },
+    });
+  }, [ data.id, apiFetch, reason ]);
 
   const onSuccess = useCallback(async() => {
     onDeleteSuccess();
-    queryClient.setQueryData([ QueryKeys.publicTags ], (prevData: PublicTags | undefined) => {
+    queryClient.setQueryData([ resourceKey('public_tags') ], (prevData: PublicTags | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ queryClient, data, onDeleteSuccess ]);

ui/publicTags/PublicTagTable/PublicTagListItem.tsx

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 
 import type { PublicTag } from 'types/api/account';
 
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
@@ -24,10 +24,10 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
         <VStack spacing={ 4 } alignItems="unset" maxW="100%">
-          { item.addresses.map((address) => <AddressSnippet key={ address } address={ address }/>) }
+          { item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address }/>) }
         </VStack>
         <HStack spacing={ 3 }>
           <Text fontSize="sm" fontWeight={ 500 }>Public tags</Text>
@@ -49,7 +49,7 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </VStack>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/publicTags/PublicTagTable/PublicTagTableItem.tsx

@@ -32,7 +32,7 @@ const PublicTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <Tr alignItems="top" key={ item.id }>
       <Td>
         <VStack spacing={ 4 } alignItems="unset">
-          { item.addresses.map((address) => <AddressSnippet key={ address } address={ address }/>) }
+          { item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address }/>) }
         </VStack>
       </Td>
       <Td>

ui/publicTags/PublicTagsData.tsx

 import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { PublicTags, PublicTag } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { PublicTag } from 'types/api/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import PublicTagListItem from 'ui/publicTags/PublicTagTable/PublicTagListItem';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import DeletePublicTagModal from './DeletePublicTagModal';
 import PublicTagTable from './PublicTagTable/PublicTagTable';
@@ -25,10 +23,8 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   const deleteModalProps = useDisclosure();
   const [ deleteModalData, setDeleteModalData ] = useState<PublicTag>();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, PublicTags>([ QueryKeys.publicTags ], async() =>
-    await fetch('/node-api/account/public-tags'));
+  const { data, isLoading, isError } = useApiQuery('public_tags');
 
   const onDeleteModalClose = useCallback(() => {
     setDeleteModalData(undefined);
@@ -58,7 +54,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   );
 
   if (isLoading) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '50%', '25%', '25%', '108px' ] }/>
         <Skeleton height="48px" width="270px" marginTop={ 8 }/>

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -13,11 +13,11 @@ import type { FieldError, Path, SubmitHandler } from 'react-hook-form';
 import { useForm, useFieldArray } from 'react-hook-form';
 
 import type { PublicTags, PublicTag, PublicTagNew, PublicTagErrors } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+import type { ResourceErrorAccount } from 'lib/api/resources';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { EMAIL_REGEXP } from 'lib/validations/email';
 import FormSubmitAlert from 'ui/shared/FormSubmitAlert';
 
@@ -58,7 +58,7 @@ const ADDRESS_INPUT_BUTTONS_WIDTH = 100;
 
 const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
   const inputSize = { base: 'md', lg: 'lg' };
 
   const { control, handleSubmit, formState: { errors, isValid, isDirty }, setError } = useForm<Inputs>({
@@ -100,17 +100,20 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
     };
 
     if (!data?.id) {
-      return fetch<PublicTag, PublicTagErrors>('/node-api/account/public-tags', { method: 'POST', body });
+      return apiFetch('public_tags', { fetchParams: { method: 'POST', body } });
     }
 
-    return fetch<PublicTag, PublicTagErrors>(`/node-api/account/public-tags/${ data.id }`, { method: 'PUT', body });
+    return apiFetch('public_tags', {
+      pathParams: { id: String(data.id) },
+      fetchParams: { method: 'PUT', body },
+    });
   };
 
   const mutation = useMutation(updatePublicTag, {
     onSuccess: async(data) => {
       const response = data as unknown as PublicTag;
 
-      queryClient.setQueryData([ QueryKeys.publicTags ], (prevData: PublicTags | undefined) => {
+      queryClient.setQueryData([ resourceKey('public_tags') ], (prevData: PublicTags | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.id === response.id);
 
         if (isExisting) {
@@ -128,13 +131,14 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
 
       changeToDataScreen(true);
     },
-    onError: (e: ErrorType<PublicTagErrors>) => {
-      if (e.error?.full_name || e.error?.email || e.error?.tags || e.error?.addresses || e.error?.additional_comment) {
-        e.error?.full_name && setError('fullName', { type: 'custom', message: getErrorMessage(e.error, 'full_name') });
-        e.error?.email && setError('email', { type: 'custom', message: getErrorMessage(e.error, 'email') });
-        e.error?.tags && setError('tags', { type: 'custom', message: getErrorMessage(e.error, 'tags') });
-        e.error?.addresses && setError('addresses.0.address', { type: 'custom', message: getErrorMessage(e.error, 'addresses') });
-        e.error?.additional_comment && setError('comment', { type: 'custom', message: getErrorMessage(e.error, 'additional_comment') });
+    onError: (error: ResourceErrorAccount<PublicTagErrors>) => {
+      const errorMap = error.payload?.errors;
+      if (errorMap?.full_name || errorMap?.email || errorMap?.tags || errorMap?.addresses || errorMap?.additional_comment) {
+        errorMap?.full_name && setError('fullName', { type: 'custom', message: getErrorMessage(errorMap, 'full_name') });
+        errorMap?.email && setError('email', { type: 'custom', message: getErrorMessage(errorMap, 'email') });
+        errorMap?.tags && setError('tags', { type: 'custom', message: getErrorMessage(errorMap, 'tags') });
+        errorMap?.addresses && setError('addresses.0.address', { type: 'custom', message: getErrorMessage(errorMap, 'addresses') });
+        errorMap?.additional_comment && setError('comment', { type: 'custom', message: getErrorMessage(errorMap, 'additional_comment') });
       } else {
         setAlertVisible(true);
       }

ui/shared/AddressSnippet.tsx

 import { Text, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressParam } from 'types/api/addressParams';
+
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
-import AddressContractIcon from './address/AddressContractIcon';
-
 interface Props {
-  address: string;
+  address: AddressParam;
   subtitle?: string;
-  // temporary solution for custom abis while we don't have address info on account pages
-  isContract?: boolean;
 }
 
-const AddressSnippet = ({ address, isContract, subtitle }: Props) => {
+const AddressSnippet = ({ address, subtitle }: Props) => {
   return (
     <Box maxW="100%">
       <Address>
-        { isContract ? <AddressContractIcon/> : <AddressIcon hash={ address }/> }
-        <AddressLink hash={ address } fontWeight="600" ml={ 2 }/>
-        <CopyToClipboard text={ address } ml={ 1 }/>
+        <AddressIcon address={ address }/>
+        <AddressLink hash={ address.hash } fontWeight="600" ml={ 2 }/>
+        <CopyToClipboard text={ address.hash } ml={ 1 }/>
       </Address>
       { subtitle && <Text fontSize="sm" variant="secondary" mt={ 0.5 } ml={ 8 }>{ subtitle }</Text> }
     </Box>

ui/shared/AccountListItemMobile.tsx → ui/shared/ListItemMobile.tsx

@@ -5,18 +5,17 @@ import React from 'react';
 interface Props {
   children: React.ReactNode;
   className?: string;
-  key?: string;
+  isAnimated?: boolean;
 }
 
-const AccountListItemMobile = ({ children, className, key }: Props) => {
+const ListItemMobile = ({ children, className, isAnimated }: Props) => {
   return (
     <Flex
       as={ motion.div }
-      initial={{ opacity: 0, scale: 0.97 }}
+      initial={ isAnimated ? { opacity: 0, scale: 0.97 } : { opacity: 1, scale: 1 } }
       animate={{ opacity: 1, scale: 1 }}
       transitionDuration="normal"
       transitionTimingFunction="linear"
-      key={ key }
       rowGap={ 6 }
       alignItems="flex-start"
       flexDirection="column"
@@ -33,4 +32,4 @@ const AccountListItemMobile = ({ children, className, key }: Props) => {
   );
 };
 
-export default chakra(AccountListItemMobile);
+export default chakra(ListItemMobile);

ui/shared/Page/Page.pw.tsx

@@ -2,10 +2,11 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import Page from './Page';
 
-const API_URL = '/node-api/index/indexing-status';
+const API_URL = buildApiUrl('homepage_indexing_status');
 
 test('without indexing alert +@mobile', async({ mount }) => {
   const component = await mount(

ui/shared/Page/Page.tsx

@@ -2,10 +2,8 @@ import { Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
-
 import * as cookies from 'lib/cookies';
-import useFetch from 'lib/hooks/useFetch';
+// import useFetch from 'lib/hooks/useFetch';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import ErrorInvalidTxHash from 'ui/shared/ErrorInvalidTxHash';
@@ -26,9 +24,23 @@ const Page = ({
   hideMobileHeaderOnScrollDown,
   isHomePage,
 }: Props) => {
-  const fetch = useFetch();
+  // const customFetch = useFetch();
+
+  useQuery([ 'csrf' ], async() => {
+    // const nodeApiResponse = await customFetch('/node-api/csrf');
+    const apiResponse = await fetch('https://blockscout-main.test.aws-k8s.blockscout.com/api/account/v1/get_csrf', { credentials: 'include' });
+
+    const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf');
+    // eslint-disable-next-line no-console
+    console.log('>>> RESPONSE HEADERS <<<');
+    // eslint-disable-next-line no-console
+    console.table([ {
+      'content-length': apiResponse.headers.get('content-length'),
+      'x-bs-account-csrf': csrfFromHeader,
+    } ]);
 
-  useQuery<unknown, unknown, unknown>([ QueryKeys.csrf ], async() => await fetch('/node-api/account/csrf'), {
+    return csrfFromHeader ? { token: csrfFromHeader } : undefined;
+  }, {
     enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
   });
 

ui/shared/TokenTransfer/TokenTransfer.pw.tsx

@@ -2,14 +2,13 @@ import { Box } from '@chakra-ui/react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
-
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import TokenTransfer from './TokenTransfer';
 
-const API_URL = '/node-api/transactions/1/token-transfers';
+const API_URL = buildApiUrl('tx_token_transfers', { id: '1' });
 
 test('without tx info +@mobile', async({ mount, page }) => {
   await page.route(API_URL, (route) => route.fulfill({
@@ -21,15 +20,13 @@ test('without tx info +@mobile', async({ mount, page }) => {
     <TestApp>
       <Box h={{ base: '134px', lg: 6 }}/>
       <TokenTransfer
-        path={ API_URL }
-        queryName={ QueryKeys.txTokenTransfers }
+        resourceName="tx_token_transfers"
+        pathParams={{ id: '1' }}
         showTxInfo={ false }
       />
     </TestApp>,
   );
 
-  await page.waitForResponse(API_URL),
-
   await expect(component).toHaveScreenshot();
 });
 
@@ -43,14 +40,12 @@ test('with tx info +@mobile', async({ mount, page }) => {
     <TestApp>
       <Box h={{ base: '134px', lg: 6 }}/>
       <TokenTransfer
-        path={ API_URL }
-        queryName={ QueryKeys.txTokenTransfers }
+        resourceName="tx_token_transfers"
+        pathParams={{ id: '1' }}
         showTxInfo={ true }
       />
     </TestApp>,
   );
 
-  await page.waitForResponse(API_URL),
-
   await expect(component).toHaveScreenshot();
 });

ui/shared/TokenTransfer/TokenTransfer.tsx

@@ -3,12 +3,12 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { Element } from 'react-scroll';
 
-import type { AddressTokenTransferFilters, AddressFromToFilter } from 'types/api/address';
+import type { AddressFromToFilter } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
 import type { TokenType } from 'types/api/tokenInfo';
-import type { TokenTransferFilters } from 'types/api/tokenTransfer';
-import type { QueryKeys } from 'types/client/queries';
 
+import type { PaginationFilters } from 'lib/api/resources';
+import type { Params as UseApiQueryParams } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
@@ -17,11 +17,11 @@ import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTable from 'ui/shared/SkeletonTable';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
-import TokenTransferSkeletonMobile from 'ui/shared/TokenTransfer/TokenTransferSkeletonMobile';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
 
 import { TOKEN_TYPE } from './helpers';
@@ -34,54 +34,56 @@ const SCROLL_OFFSET = -100;
 const getTokenFilterValue = (getFilterValuesFromQuery<TokenType>).bind(null, TOKEN_TYPES);
 const getAddressFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null, AddressFromToFilterValues);
 
-interface Props {
+interface Props<Resource extends 'tx_token_transfers' | 'address_token_transfers'> {
   isLoading?: boolean;
   isDisabled?: boolean;
-  path: string;
-  queryName: QueryKeys.txTokenTransfers | QueryKeys.addressTokenTransfers;
-  queryIds?: Array<string>;
+  resourceName: Resource;
   baseAddress?: string;
   showTxInfo?: boolean;
   txHash?: string;
   enableTimeIncrement?: boolean;
+  pathParams?: UseApiQueryParams<Resource>['pathParams'];
 }
 
-const TokenTransfer = ({
+type State = {
+  type: Array<TokenType> | undefined;
+  filter: AddressFromToFilter;
+}
+
+const TokenTransfer = <Resource extends 'tx_token_transfers' | 'address_token_transfers'>({
   isLoading: isLoadingProp,
   isDisabled,
-  queryName,
-  queryIds,
-  path,
+  resourceName,
   baseAddress,
   showTxInfo = true,
   enableTimeIncrement,
-}: Props) => {
+  pathParams,
+}: Props<Resource>) => {
   const router = useRouter();
-  const [ filters, setFilters ] = React.useState<AddressTokenTransferFilters & TokenTransferFilters>(
+  const [ filters, setFilters ] = React.useState<State>(
     { type: getTokenFilterValue(router.query.type), filter: getAddressFilterValue(router.query.filter) },
   );
 
   const { isError, isLoading, data, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
-    apiPath: path,
-    queryName,
-    queryIds,
+    resourceName,
+    pathParams,
     options: { enabled: !isDisabled },
-    filters: filters,
+    filters: filters as PaginationFilters<Resource>,
     scroll: { elem: SCROLL_ELEM, offset: SCROLL_OFFSET },
   });
 
   const handleTypeFilterChange = React.useCallback((nextValue: Array<TokenType>) => {
-    onFilterChange({ ...filters, type: nextValue });
+    onFilterChange({ ...filters, type: nextValue } as PaginationFilters<Resource>);
     setFilters((prevState) => ({ ...prevState, type: nextValue }));
   }, [ filters, onFilterChange ]);
 
   const handleAddressFilterChange = React.useCallback((nextValue: string) => {
     const filterVal = getAddressFilterValue(nextValue);
-    onFilterChange({ ...filters, filter: filterVal });
+    onFilterChange({ ...filters, filter: filterVal } as PaginationFilters<Resource>);
     setFilters((prevState) => ({ ...prevState, filter: filterVal }));
   }, [ filters, onFilterChange ]);
 
-  const numActiveFilters = filters.type.length + (filters.filter ? 1 : 0);
+  const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0);
   const isActionBarHidden = !numActiveFilters && !data?.items.length;
 
   const content = (() => {
@@ -95,7 +97,7 @@ const TokenTransfer = ({
             />
           </Hide>
           <Show below="lg">
-            <TokenTransferSkeletonMobile showTxInfo={ showTxInfo }/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/shared/TokenTransfer/TokenTransferFilter.tsx

@@ -23,7 +23,7 @@ import { TOKEN_TYPE } from './helpers';
 
 interface Props {
   appliedFiltersNum?: number;
-  defaultTypeFilters: Array<TokenType>;
+  defaultTypeFilters: Array<TokenType> | undefined;
   onTypeFilterChange: (nextValue: Array<TokenType>) => void;
   withAddressFilter?: boolean;
   onAddressFilterChange?: (nextValue: string) => void;

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -7,12 +7,12 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 import eastArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
@@ -49,7 +49,7 @@ const TokenTransferListItem = ({
 
   const addressWidth = `calc((100% - ${ baseAddress ? '50px' : '0px' }) / 2)`;
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <ListItemMobile rowGap={ 3 } isAnimated>
       <Flex w="100%" flexWrap="wrap" rowGap={ 1 } position="relative">
         <TokenSnippet hash={ token.address } w="auto" maxW="calc(100% - 140px)" name={ token.name || 'Unnamed token' }/>
         <Tag flexShrink={ 0 } ml={ 2 } mr={ 2 }>{ token.type }</Tag>
@@ -80,7 +80,7 @@ const TokenTransferListItem = ({
       ) }
       <Flex w="100%" columnGap={ 3 }>
         <Address width={ addressWidth }>
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
         </Address>
         { baseAddress ?
@@ -88,7 +88,7 @@ const TokenTransferListItem = ({
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         }
         <Address width={ addressWidth }>
-          <AddressIcon hash={ to.hash }/>
+          <AddressIcon address={ to }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash }/>
         </Address>
       </Flex>
@@ -98,7 +98,7 @@ const TokenTransferListItem = ({
           <Text variant="secondary">{ value }</Text>
         </Flex>
       ) }
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/shared/TokenTransfer/TokenTransferSkeletonMobile.tsx

-import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const TokenTransferSkeletonMobile = ({ showTxInfo }: { showTxInfo?: boolean }) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="50px"/>
-            { showTxInfo && <Skeleton w="24px" ml="auto"/> }
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="70px"/>
-            <Skeleton w="24px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-          { showTxInfo && (
-            <Flex h={ 6 } columnGap={ 2 }>
-              <Skeleton w="70px" flexShrink={ 0 }/>
-              <Skeleton w="100%"/>
-            </Flex>
-          ) }
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            <Skeleton w="50px" mr={ 3 }/>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="45px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default TokenTransferSkeletonMobile;

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -69,7 +69,7 @@ const TokenTransferTableItem = ({
       ) }
       <Td>
         <Address display="inline-flex" maxW="100%" lineHeight="30px">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
@@ -80,7 +80,7 @@ const TokenTransferTableItem = ({
       ) }
       <Td>
         <Address display="inline-flex" maxW="100%" lineHeight="30px">
-          <AddressIcon hash={ to.hash }/>
+          <AddressIcon address={ to }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } alias={ to.name } flexGrow={ 1 }/>
         </Address>
       </Td>

ui/shared/address/AddressContractIcon.tsx

-import { Box, chakra, Tooltip } from '@chakra-ui/react';
+import { Box, chakra, Tooltip, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
@@ -6,6 +6,9 @@ type Props = {
 }
 
 const AddressContractIcon = ({ className }: Props) => {
+  const bgColor = useColorModeValue('gray.200', 'gray.600');
+  const color = useColorModeValue('gray.400', 'gray.200');
+
   return (
     <Tooltip label="Contract">
       <Box
@@ -13,8 +16,8 @@ const AddressContractIcon = ({ className }: Props) => {
         width="24px"
         height="24px"
         borderRadius="12px"
-        backgroundColor="gray.200"
-        color="gray.400"
+        backgroundColor={ bgColor }
+        color={ color }
         display="inline-flex"
         alignItems="center"
         justifyContent="center"

ui/shared/address/AddressIcon.tsx

@@ -2,10 +2,25 @@ import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 
-const AddressIcon = ({ hash, className }: {hash: string; className?: string}) => {
+import type { AddressParam } from 'types/api/addressParams';
+
+import AddressContractIcon from 'ui/shared/address/AddressContractIcon';
+
+type Props = {
+  address: AddressParam;
+  className?: string;
+}
+
+const AddressIcon = ({ address, className }: Props) => {
+  if (address.is_contract) {
+    return (
+      <AddressContractIcon/>
+    );
+  }
+
   return (
     <Box className={ className } width="24px" display="inline-flex">
-      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(hash) }/>
+      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(address.hash) }/>
     </Box>
   );
 };

ui/shared/chart/ChartWidget.tsx

@@ -5,9 +5,12 @@ import React, { useRef, useCallback, useState } from 'react';
 import type { TimeChartItem } from './types';
 
 import imageIcon from 'icons/image.svg';
-import repeatArrow from 'icons/repeat_arrow.svg';
+import repeatArrowIcon from 'icons/repeat_arrow.svg';
 import scopeIcon from 'icons/scope.svg';
+import svgFileIcon from 'icons/svg_file.svg';
 import dotsIcon from 'icons/vertical_dots.svg';
+import dayjs from 'lib/date/dayjs';
+import saveAsCSV from 'lib/saveAsCSV';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
 import ChartWidgetSkeleton from './ChartWidgetSkeleton';
@@ -16,17 +19,19 @@ import FullscreenChartModal from './FullscreenChartModal';
 type Props = {
   items?: Array<TimeChartItem>;
   title: string;
-  description: string;
+  description?: string;
   isLoading: boolean;
+  chartHeight?: string;
 }
 
 const DOWNLOAD_IMAGE_SCALE = 5;
 
-const ChartWidget = ({ items, title, description, isLoading }: Props) => {
+const ChartWidget = ({ items, title, description, isLoading, chartHeight }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
 
+  const pngBackgroundColor = useColorModeValue('white', 'black');
   const borderColor = useColorModeValue('gray.200', 'gray.600');
 
   const handleZoom = useCallback(() => {
@@ -39,18 +44,10 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
 
   const showChartFullscreen = useCallback(() => {
     setIsFullscreen(true);
-
-    if (!document.fullscreenElement && document.documentElement.requestFullscreen) {
-      document.documentElement.requestFullscreen();
-    }
   }, []);
 
   const clearFullscreenChart = useCallback(() => {
     setIsFullscreen(false);
-
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-    }
   }, []);
 
   const handleFileSaveClick = useCallback(() => {
@@ -58,11 +55,12 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
       domToImage.toPng(ref.current,
         {
           quality: 100,
-          bgcolor: 'white',
+          bgcolor: pngBackgroundColor,
           width: ref.current.offsetWidth * DOWNLOAD_IMAGE_SCALE,
           height: ref.current.offsetHeight * DOWNLOAD_IMAGE_SCALE,
           filter: (node) => node.nodeName !== 'BUTTON',
           style: {
+            borderColor: 'transparent',
             transform: `scale(${ DOWNLOAD_IMAGE_SCALE })`,
             'transform-origin': 'top left',
           },
@@ -75,10 +73,23 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
           link.remove();
         });
     }
-  }, [ title ]);
+  }, [ pngBackgroundColor, title ]);
+
+  const handleSVGSavingClick = useCallback(() => {
+    if (items) {
+      const headerRows = [
+        'Date', 'Value',
+      ];
+      const dataRows = items.map((item) => [
+        dayjs(item.date).format('YYYY-MM-DD'), String(item.value),
+      ]);
+
+      saveAsCSV(headerRows, dataRows, `${ title } (Blockscout stats)`);
+    }
+  }, [ items, title ]);
 
   if (isLoading) {
-    return <ChartWidgetSkeleton/>;
+    return <ChartWidgetSkeleton hasDescription={ Boolean(description) } chartHeight={ chartHeight }/>;
   }
 
   if (items) {
@@ -105,15 +116,17 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
               { title }
             </Text>
 
-            <Text
-              mb={ 1 }
-              gridColumn={ 1 }
-              as="p"
-              variant="secondary"
-              fontSize="xs"
-            >
-              { description }
-            </Text>
+            { description && (
+              <Text
+                mb={ 1 }
+                gridColumn={ 1 }
+                as="p"
+                variant="secondary"
+                fontSize="xs"
+              >
+                { description }
+              </Text>
+            ) }
 
             <Tooltip label="Reset zoom">
               <IconButton
@@ -129,7 +142,7 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
                 size="sm"
                 variant="outline"
                 onClick={ handleZoomResetClick }
-                icon={ <Icon as={ repeatArrow } w={ 4 } h={ 4 }/> }
+                icon={ <Icon as={ repeatArrowIcon } w={ 4 } h={ 4 }/> }
               />
             </Tooltip>
 
@@ -158,6 +171,7 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
                   <Icon as={ scopeIcon } boxSize={ 4 } mr={ 3 }/>
                   View fullscreen
                 </MenuItem>
+
                 <MenuItem
                   display="flex"
                   alignItems="center"
@@ -166,16 +180,27 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
                   <Icon as={ imageIcon } boxSize={ 4 } mr={ 3 }/>
                   Save as PNG
                 </MenuItem>
+
+                <MenuItem
+                  display="flex"
+                  alignItems="center"
+                  onClick={ handleSVGSavingClick }
+                >
+                  <Icon as={ svgFileIcon } boxSize={ 4 } mr={ 3 }/>
+                  Save as CSV
+                </MenuItem>
               </MenuList>
             </Menu>
           </Grid>
 
-          <ChartWidgetGraph
-            items={ items }
-            onZoom={ handleZoom }
-            isZoomResetInitial={ isZoomResetInitial }
-            title={ title }
-          />
+          <Box h={ chartHeight || 'auto' }>
+            <ChartWidgetGraph
+              items={ items }
+              onZoom={ handleZoom }
+              isZoomResetInitial={ isZoomResetInitial }
+              title={ title }
+            />
+          </Box>
         </Box>
 
         <FullscreenChartModal
@@ -192,4 +217,4 @@ const ChartWidget = ({ items, title, description, isLoading }: Props) => {
   return null;
 };
 
-export default ChartWidget;
+export default React.memo(ChartWidget);

ui/shared/chart/ChartWidgetGraph.tsx

@@ -22,7 +22,7 @@ interface Props {
   isZoomResetInitial: boolean;
 }
 
-const CHART_MARGIN = { bottom: 20, left: 30, right: 20, top: 10 };
+const CHART_MARGIN = { bottom: 20, left: 40, right: 20, top: 10 };
 
 const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title }: Props) => {
   const isMobile = useIsMobile();
@@ -31,10 +31,9 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
   const overlayRef = React.useRef<SVGRectElement>(null);
   const chartId = useMemo(() => `chart-${ title.split(' ').join('') }`, [ title ]);
   const [ range, setRange ] = React.useState<[ number, number ]>([ 0, Infinity ]);
-  const { innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
+  const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
 
-  const displayedData = useMemo(() => items.slice(range[0], range[1]).map((d) =>
-    ({ ...d, date: new Date(d.date) })), [ items, range ]);
+  const displayedData = useMemo(() => items.slice(range[0], range[1]), [ items, range ]);
   const chartData = [ { items: items, name: 'Value', color } ];
 
   const { yTickFormat, xScale, yScale } = useTimeChartController({
@@ -55,9 +54,9 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
   }, [ isZoomResetInitial ]);
 
   return (
-    <svg width="100%" height="100%" ref={ ref } cursor="pointer" id={ chartId }>
+    <svg width={ width || '100%' } height={ height || 'auto' } ref={ ref } cursor="pointer" id={ chartId } opacity={ width ? 1 : 0 }>
 
-      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ innerWidth ? 1 : 0 }>
+      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` }>
         <ChartGridLine
           type="horizontal"
           scale={ yScale }

ui/shared/chart/ChartWidgetSkeleton.tsx

 import { Box, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-const ChartWidgetSkeleton = () => {
+interface Props {
+  hasDescription: boolean;
+  chartHeight?: string;
+}
+
+const ChartWidgetSkeleton = ({ hasDescription, chartHeight }: Props) => {
   return (
     <Box
       height="235px"
       paddingY={{ base: 3, lg: 4 }}
     >
-      <Skeleton w="75%" h="24px" mb={ 1 }/>
-      <Skeleton w="50%" h="18px" mb={ 5 }/>
+      <Skeleton w="75%" h="24px"/>
+      { hasDescription && <Skeleton w="50%" h="18px" mt={ 1 }/> }
 
-      <Skeleton w="100%" h="150px"/>
+      <Skeleton w="100%" h={ chartHeight || '150px' } mt={ 5 }/>
     </Box>
   );
 };

ui/shared/chart/FullscreenChartModal.tsx

@@ -10,7 +10,7 @@ import ChartWidgetGraph from './ChartWidgetGraph';
 type Props = {
   isOpen: boolean;
   title: string;
-  description: string;
+  description?: string;
   items: Array<TimeChartItem>;
   onClose: () => void;
 }
@@ -56,14 +56,16 @@ const FullscreenChartModal = ({
               { title }
             </Heading>
 
-            <Text
-              gridColumn={ 1 }
-              as="p"
-              variant="secondary"
-              fontSize="xs"
-            >
-              { description }
-            </Text>
+            { description && (
+              <Text
+                gridColumn={ 1 }
+                as="p"
+                variant="secondary"
+                fontSize="xs"
+              >
+                { description }
+              </Text>
+            ) }
 
             { !isZoomResetInitial && (
               <Button

ui/tx/internals/TxInternalsSkeletonMobile.tsx → ui/shared/skeletons/SkeletonList.tsx

-import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const TxInternalsSkeletonMobile = () => {
+const SkeletonList = () => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -9,38 +9,32 @@ const TxInternalsSkeletonMobile = () => {
       { Array.from(Array(2)).map((item, index) => (
         <Flex
           key={ index }
-          rowGap={ 3 }
+          rowGap={ 4 }
           flexDirection="column"
           paddingY={ 6 }
           borderTopWidth="1px"
           borderColor={ borderColor }
           _last={{
-            borderBottomWidth: '1px',
+            borderBottomWidth: '0px',
           }}
         >
-          <Flex h={ 6 }>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="90px"/>
+          <Flex h={ 4 }>
+            <Skeleton w="30%" mr={ 2 } borderRadius="full"/>
+            <Skeleton w="15%" borderRadius="full"/>
           </Flex>
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            <Skeleton w={ 6 } mr={ 3 }/>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="70px" mr={ 2 }/>
-            <Skeleton w="30px"/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="70px" mr={ 2 }/>
-            <Skeleton w="60px"/>
+          <Flex h={ 4 }>
+            <SkeletonCircle boxSize={ 4 } mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 } borderRadius="full"/>
+            <Skeleton w={ 6 } mr={ 3 } borderRadius="full"/>
+            <SkeletonCircle boxSize={ 4 } mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 } borderRadius="full"/>
           </Flex>
+          <Skeleton w="75%" h={ 4 } borderRadius="full"/>
+          <Skeleton w="60%" h={ 4 } borderRadius="full"/>
         </Flex>
       )) }
     </Box>
   );
 };
 
-export default TxInternalsSkeletonMobile;
+export default SkeletonList;

ui/shared/SkeletonAccountMobile.tsx → ui/shared/skeletons/SkeletonListAccount.tsx

@@ -5,7 +5,7 @@ interface Props {
   showFooterSlot?: boolean;
 }
 
-const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
+const SkeletonListAccount = ({ showFooterSlot }: Props) => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -18,9 +18,8 @@ const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
           paddingY={ 6 }
           borderTopWidth="1px"
           borderColor={ borderColor }
-          _first={{
-            borderTopWidth: '0',
-            pt: '0',
+          _last={{
+            borderBottomWidth: '0px',
           }}
         >
           <Flex columnGap={ 2 } w="100%" alignItems="center">
@@ -45,4 +44,4 @@ const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
   );
 };
 
-export default SkeletonAccountMobile;
+export default SkeletonListAccount;

ui/snippets/navigation/useColors.ts

@@ -12,7 +12,7 @@ export default function useColors() {
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': useColorModeValue('gray.200', 'whiteAlpha.200'),
+      'default': useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

ui/snippets/networkMenu/useColors.ts

@@ -7,7 +7,7 @@ export default function useColors({ hasIcon }: {hasIcon: boolean}) {
   return {
     text: {
       'default': useColorModeValue('gray.600', 'gray.400'),
-      active: useColorModeValue('gray.700', 'whiteAlpha.900'),
+      active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
       hover: useColorModeValue('blue.600', 'blue.400'),
     },
     icon: {
@@ -19,7 +19,7 @@ export default function useColors({ hasIcon }: {hasIcon: boolean}) {
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': useColorModeValue('gray.200', 'whiteAlpha.200'),
+      'default': useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

ui/snippets/profileMenu/ProfileMenuContent.tsx

@@ -12,8 +12,8 @@ type Props = UserInfo;
 
 const ProfileMenuContent = ({ name, nickname, email }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
-  const primaryTextColor = useColorModeValue('gray.600', 'whiteAlpha.800');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
   return (
     <Box>

ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import * as profileMock from 'mocks/user/profile';
 import authFixture from 'playwright/fixtures/auth';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import ProfileMenuDesktop from './ProfileMenuDesktop';
 
@@ -33,7 +34,7 @@ test.describe('auth', () => {
   });
 
   extendedTest('+@dark-mode', async({ mount, page }) => {
-    await page.route('/node-api/account/profile', (route) => route.fulfill({
+    await page.route(buildApiUrl('user_info'), (route) => route.fulfill({
       status: 200,
       body: JSON.stringify(profileMock.base),
     }));

ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import * as profileMock from 'mocks/user/profile';
 import authFixture from 'playwright/fixtures/auth';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import ProfileMenuMobile from './ProfileMenuMobile';
 
@@ -29,7 +30,7 @@ test.describe('auth', () => {
   });
 
   extendedTest('base view', async({ mount, page }) => {
-    await page.route('/node-api/account/profile', (route) => route.fulfill({
+    await page.route(buildApiUrl('user_info'), (route) => route.fulfill({
       status: 200,
       body: JSON.stringify(profileMock.base),
     }));

ui/stats/ChartWidgetContainer.tsx

-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { Charts } from 'types/api/stats';
-import { QueryKeys } from 'types/client/queries';
 import type { StatsIntervalIds } from 'types/client/stats';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 
 import ChartWidget from '../shared/chart/ChartWidget';
 import { STATS_INTERVALS } from './constants';
@@ -22,19 +19,18 @@ function formatDate(date: Date) {
 }
 
 const ChartWidgetContainer = ({ id, title, description, interval }: Props) => {
-  const fetch = useFetch();
-
   const selectedInterval = STATS_INTERVALS[interval];
 
   const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
   const startDate = selectedInterval.start ? formatDate(selectedInterval.start) : undefined;
 
-  const url = `/node-api/stats/charts?name=${ id }${ startDate ? `&from=${ startDate }&to=${ endDate }` : '' }`;
-
-  const { data, isLoading } = useQuery<unknown, unknown, Charts>(
-    [ QueryKeys.charts, id, startDate ],
-    async() => await fetch(url),
-  );
+  const { data, isLoading } = useApiQuery('stats_charts', {
+    queryParams: {
+      name: id,
+      from: startDate,
+      to: endDate,
+    },
+  });
 
   const items = data?.chart
     .map((item) => {

ui/stats/NumberWidgetsList.tsx

 import { Grid } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { Stats } from 'types/api/stats';
-import { QueryKeys } from 'types/client/queries';
-
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 
+import { numberWidgetsScheme } from './constants/number-widgets-scheme';
 import NumberWidget from './NumberWidget';
 import NumberWidgetSkeleton from './NumberWidgetSkeleton';
 
 const skeletonsCount = 8;
 
 const NumberWidgetsList = () => {
-  const fetch = useFetch();
-
-  const { data, isLoading } = useQuery<unknown, unknown, Stats>(
-    [ QueryKeys.stats ],
-    async() => await fetch(`/node-api/stats/counters`),
-  );
+  const { data, isLoading } = useApiQuery('stats_counters');
 
   return (
     <Grid
@@ -27,30 +19,8 @@ const NumberWidgetsList = () => {
     >
       { isLoading ? [ ...Array(skeletonsCount) ]
         .map((e, i) => <NumberWidgetSkeleton key={ i }/>) :
-        (
-          <>
-            <NumberWidget
-              label="Total blocks"
-              value={ Number(data?.counters.totalBlocksAllTime).toLocaleString() }
-            />
-            <NumberWidget
-              label="Average block time"
-              value={ Number(data?.counters.averageBlockTime).toLocaleString() }
-            />
-            <NumberWidget
-              label="Completed transactions"
-              value={ Number(data?.counters.completedTransactions).toLocaleString() }
-            />
-            <NumberWidget
-              label="Total transactions"
-              value={ Number(data?.counters.totalTransactions).toLocaleString() }
-            />
-            <NumberWidget
-              label="Total accounts"
-              value={ Number(data?.counters.totalAccounts).toLocaleString() }
-            />
-          </>
-        ) }
+        numberWidgetsScheme.map(({ id, title }) =>
+          data?.counters[id] ? <NumberWidget key={ id } label={ title } value={ Number(data.counters[id]).toLocaleString() }/> : null) }
     </Grid>
   );
 };

ui/stats/StatsFilters.tsx

@@ -46,19 +46,10 @@ const StatsFilters = ({
       templateAreas={{
         base: `"input input"
                 "section interval"`,
-        lg: `"input section interval"`,
+        lg: `"section interval input"`,
       }}
-      gridTemplateColumns={{ base: 'repeat(2, minmax(0, 1fr))', lg: '1fr auto auto' }}
+      gridTemplateColumns={{ base: 'repeat(2, minmax(0, 1fr))', lg: 'auto auto 1fr' }}
     >
-      <GridItem
-        w="100%"
-        area="input"
-      >
-        <FilterInput
-          onChange={ onFilterInputChange }
-          placeholder="Find chart, metric..."/>
-      </GridItem>
-
       <GridItem
         w={{ base: '100%', lg: 'auto' }}
         area="section"
@@ -80,6 +71,15 @@ const StatsFilters = ({
           onSelect={ onIntervalChange }
         />
       </GridItem>
+
+      <GridItem
+        w="100%"
+        area="input"
+      >
+        <FilterInput
+          onChange={ onFilterInputChange }
+          placeholder="Find chart, metric..."/>
+      </GridItem>
     </Grid>
   );
 };

ui/stats/constants/charts-scheme.ts

@@ -6,57 +6,57 @@ export const statsChartsScheme: Array<StatsSection> = [
     title: 'Blocks',
     charts: [
       {
-        id: 'new-blocks',
+        id: 'newBlocksPerDay',
         title: 'New blocks',
         description: 'New blocks number per day',
       },
-      {
-        id: 'average-block-size',
-        title: 'Average block size',
-        description: 'Average size of blocks in bytes',
-      },
-    ],
-  },
-  {
-    id: 'transactions',
-    title: 'Transactions',
-    charts: [
-      {
-        id: 'average-transaction-fee',
-        title: 'Average transaction fee',
-        description: 'The average amount in USD spent per transaction',
-      },
-      {
-        id: 'transactions-fees',
-        title: 'Transactions fees',
-        description: 'Amount of tokens paid as fees',
-      },
-      {
-        id: 'new-transactions',
-        title: 'Transactions fees',
-        description: 'New transactions number per period',
-      },
-      {
-        id: 'transactions-growth',
-        title: 'Transactions growth',
-        description: 'Cumulative transactions number per period',
-      },
-    ],
-  },
-  {
-    id: 'accounts',
-    title: 'Accounts',
-    charts: [
-      {
-        id: 'active-accounts',
-        title: 'Active accounts',
-        description: 'Active accounts number per period',
-      },
-      {
-        id: 'accounts-growth',
-        title: 'Accounts growth',
-        description: 'Cumulative accounts number per period',
-      },
+      // {
+      //   id: 'average-block-size',
+      //   title: 'Average block size',
+      //   description: 'Average size of blocks in bytes',
+      // },
     ],
   },
+  // {
+  //   id: 'transactions',
+  //   title: 'Transactions',
+  //   charts: [
+  //     {
+  //       id: 'average-transaction-fee',
+  //       title: 'Average transaction fee',
+  //       description: 'The average amount in USD spent per transaction',
+  //     },
+  //     {
+  //       id: 'transactions-fees',
+  //       title: 'Transactions fees',
+  //       description: 'Amount of tokens paid as fees',
+  //     },
+  //     {
+  //       id: 'new-transactions',
+  //       title: 'Transactions fees',
+  //       description: 'New transactions number per period',
+  //     },
+  //     {
+  //       id: 'transactions-growth',
+  //       title: 'Transactions growth',
+  //       description: 'Cumulative transactions number per period',
+  //     },
+  //   ],
+  // },
+  // {
+  //   id: 'accounts',
+  //   title: 'Accounts',
+  //   charts: [
+  //     {
+  //       id: 'active-accounts',
+  //       title: 'Active accounts',
+  //       description: 'Active accounts number per period',
+  //     },
+  //     {
+  //       id: 'accounts-growth',
+  //       title: 'Accounts growth',
+  //       description: 'Cumulative accounts number per period',
+  //     },
+  //   ],
+  // },
 ];

ui/stats/constants/number-widgets-scheme.ts

+import type { Stats } from 'types/api/stats';
+
+type Key = keyof Stats['counters'];
+
+export const numberWidgetsScheme: Array<{id: Key; title: string}> = [
+  {
+    id: 'totalBlocks',
+    title: 'Total blocks',
+  },
+  {
+    id: 'averageBlockTime',
+    title: 'Average block time',
+  },
+  {
+    id: 'totalTransactions',
+    title: 'Total transactions',
+  },
+  {
+    id: 'completedTransactions',
+    title: 'Completed transactions',
+  },
+  {
+    id: 'totalAccounts',
+    title: 'Total accounts',
+  },
+  {
+    id: 'totalTokens',
+    title: 'Total tokens',
+  },
+  {
+    id: 'totalNativeCoinHolders',
+    title: 'Total native coin holders',
+  },
+  {
+    id: 'totalNativeCoinTransfers',
+    title: 'Total native coin transfers',
+  },
+  {
+    id: 'totalAccounts',
+    title: 'Total accounts',
+  },
+];

ui/tx/TxDetails.pw.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import TxDetails from './TxDetails';
 
-const API_URL = '/node-api/transactions/1';
+const API_URL = buildApiUrl('tx', { id: '1' });
 const hooksConfig = {
   router: {
     query: { id: 1 },
@@ -26,7 +27,6 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await page.waitForResponse(API_URL);
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
@@ -44,7 +44,6 @@ test('creating contact', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -61,7 +60,6 @@ test('with token transfer +@mobile', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -78,7 +76,6 @@ test('with decoded revert reason', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -95,7 +92,6 @@ test('with decoded raw reason', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -112,7 +108,7 @@ test('pending', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
+
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();

ui/tx/TxDetails.tsx

@@ -49,11 +49,11 @@ const TxDetails = () => {
   }
 
   if (isError) {
-    if (error?.error?.status === 422) {
+    if (error?.payload?.status === 422) {
       throw Error('Invalid tx hash', { cause: error as unknown as Error });
     }
 
-    if (error?.error?.status === 404) {
+    if (error?.payload?.status === 404) {
       throw Error('Tx fetch failed', { cause: error as unknown as Error });
     }
 
@@ -155,7 +155,7 @@ const TxDetails = () => {
         columnGap={ 3 }
       >
         <Address>
-          <AddressIcon hash={ data.from.hash }/>
+          <AddressIcon address={ data.from }/>
           <AddressLink ml={ 2 } hash={ data.from.hash }/>
           <CopyToClipboard text={ data.from.hash }/>
         </Address>
@@ -174,7 +174,7 @@ const TxDetails = () => {
       >
         { data.to && data.to.hash ? (
           <Address alignItems="center">
-            <AddressIcon hash={ toAddress.hash }/>
+            <AddressIcon address={ toAddress }/>
             <AddressLink ml={ 2 } hash={ toAddress.hash }/>
             { executionSuccessBadge }
             { executionFailedBadge }

ui/tx/TxInternals.pw.tsx

@@ -4,12 +4,13 @@ import React from 'react';
 import * as internalTxsMock from 'mocks/txs/internalTxs';
 import * as txMock from 'mocks/txs/tx';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import TxInternals from './TxInternals';
 
 const TX_HASH = txMock.base.hash;
-const API_URL_TX = `/node-api/transactions/${ TX_HASH }`;
-const API_URL_TX_INTERNALS = `/node-api/transactions/${ TX_HASH }/internal-transactions`;
+const API_URL_TX = buildApiUrl('tx', { id: TX_HASH });
+const API_URL_TX_INTERNALS = buildApiUrl('tx_internal_txs', { id: TX_HASH });
 const hooksConfig = {
   router: {
     query: { id: TX_HASH },

ui/tx/TxInternals.tsx

@@ -2,7 +2,6 @@ import { Box, Text, Show, Hide } from '@chakra-ui/react';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
-import { QueryKeys } from 'types/client/queries';
 
 import { SECOND } from 'lib/consts';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -14,9 +13,9 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 // import FilterInput from 'ui/shared/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 import Pagination from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import TxInternalsList from 'ui/tx/internals/TxInternalsList';
-import TxInternalsSkeletonDesktop from 'ui/tx/internals/TxInternalsSkeletonDesktop';
-import TxInternalsSkeletonMobile from 'ui/tx/internals/TxInternalsSkeletonMobile';
 import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
@@ -76,9 +75,8 @@ const TxInternals = () => {
   const [ sort, setSort ] = React.useState<Sort>();
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
   const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
-    apiPath: `/node-api/transactions/${ txInfo.data?.hash }/internal-transactions`,
-    queryName: QueryKeys.txInternals,
-    queryIds: txInfo.data?.hash ? [ txInfo.data.hash ] : undefined,
+    resourceName: 'tx_internal_txs',
+    pathParams: { id: txInfo.data?.hash },
     options: {
       enabled: Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
     },
@@ -103,8 +101,8 @@ const TxInternals = () => {
   if (isLoading || txInfo.isLoading) {
     return (
       <>
-        <Show below="lg"><TxInternalsSkeletonMobile/></Show>
-        <Hide below="lg"><TxInternalsSkeletonDesktop/></Hide>
+        <Show below="lg"><SkeletonList/></Show>
+        <Hide below="lg"><SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/></Hide>
       </>
     );
   }

ui/tx/TxLogs.tsx

 import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
-
 import { SECOND } from 'lib/consts';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import ActionBar from 'ui/shared/ActionBar';
@@ -17,9 +15,8 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 const TxLogs = () => {
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
   const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
-    apiPath: `/node-api/transactions/${ txInfo.data?.hash }/logs`,
-    queryName: QueryKeys.txLogs,
-    queryIds: txInfo.data?.hash ? [ txInfo.data.hash ] : undefined,
+    resourceName: 'tx_logs',
+    pathParams: { id: txInfo.data?.hash },
     options: {
       enabled: Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
     },

ui/tx/TxRawTrace.tsx

 import { Flex, Textarea, Skeleton } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { RawTracesResponse } from 'types/api/rawTrace';
-import { QueryKeys } from 'types/client/queries';
-
+import useApiQuery from 'lib/api/useApiQuery';
 import { SECOND } from 'lib/consts';
-import useFetch from 'lib/hooks/useFetch';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
@@ -16,16 +12,14 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
 const TxRawTrace = () => {
   const router = useRouter();
-  const fetch = useFetch();
 
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isLoading, isError } = useQuery<unknown, unknown, RawTracesResponse>(
-    [ QueryKeys.txRawTrace, router.query.id ],
-    async() => await fetch(`/node-api/transactions/${ router.query.id }/raw-trace`),
-    {
+  const { data, isLoading, isError } = useApiQuery('tx_raw_trace', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: {
       enabled: Boolean(router.query.id) && Boolean(txInfo.data?.status),
     },
-  );
+  });
 
   if (!txInfo.isLoading && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;

ui/tx/TxTokenTransfer.tsx

 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
-
 import { SECOND } from 'lib/consts';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TokenTransfer from 'ui/shared/TokenTransfer/TokenTransfer';
@@ -20,15 +18,12 @@ const TxTokenTransfer = () => {
     return <DataFetchAlert/>;
   }
 
-  const path = `/node-api/transactions/${ data?.hash }/token-transfers`;
-
   return (
     <TokenTransfer
       isLoading={ isLoading }
       isDisabled={ !data?.status || !data?.hash }
-      path={ path }
-      queryName={ QueryKeys.txTokenTransfers }
-      queryIds={ data?.hash ? [ data.hash ] : undefined }
+      resourceName="tx_token_transfers"
+      pathParams={{ id: data?.hash.toString() }}
       showTxInfo={ false }
       txHash={ data?.hash || '' }
     />

ui/tx/internals/TxInternalsListItem.tsx

@@ -6,10 +6,10 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import appConfig from 'configs/app/config';
 import eastArrowIcon from 'icons/arrows/east.svg';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -20,19 +20,19 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
   const toData = to ? to : createdContract;
 
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <ListItemMobile rowGap={ 3 }>
       <Flex>
         { typeTitle && <Tag colorScheme="cyan" mr={ 2 }>{ typeTitle }</Tag> }
         <TxStatus status={ success ? 'ok' : 'error' } errorText={ error }/>
       </Flex>
       <Box w="100%" display="flex" columnGap={ 3 }>
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
         </Address>
         <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ toData.hash }/>
         </Address>
       </Box>
@@ -46,7 +46,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
         <Text fontSize="sm" fontWeight={ 500 }>Gas limit</Text>
         <Text fontSize="sm" variant="secondary">{ BigNumber(gasLimit).toFormat() }</Text>
       </HStack>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/tx/internals/TxInternalsSkeletonDesktop.tsx

-import React from 'react';
-
-import SkeletonTable from 'ui/shared/SkeletonTable';
-
-const TxInternalsSkeletonDesktop = () => {
-  return (
-    <SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/>
-  );
-};
-
-export default TxInternalsSkeletonDesktop;

ui/tx/internals/TxInternalsTableItem.tsx

@@ -32,7 +32,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
@@ -41,7 +41,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 }/>
         </Address>
       </Td>

ui/tx/logs/TxLogItem.tsx

@@ -50,7 +50,7 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
       <RowHeader>Address</RowHeader>
       <GridItem display="flex" alignItems="center">
         <Address mr={{ base: 9, lg: 0 }}>
-          <AddressIcon hash={ address.hash }/>
+          <AddressIcon address={ address }/>
           <AddressLink hash={ address.hash } alias={ address.name } ml={ 2 }/>
         </Address>
         { /* api doesn't have find topic feature yet */ }

ui/tx/state/TxStateListItem.tsx

@@ -8,10 +8,10 @@ import appConfig from 'configs/app/config';
 import type { data } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
+// import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 
 import TxStateStorageItem from './TxStateStorageItem';
 
@@ -22,7 +22,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
   const hasStorageData = Boolean(storage?.length);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <AccordionItem isDisabled={ !hasStorageData } border={ 0 } w="100%" display="flex" flexDirection="column">
         { ({ isExpanded }) => (
           <>
@@ -51,7 +51,8 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                 <AccordionIcon color="blue.600" width="30px"/>
               </AccordionButton>
               <Address flexGrow={ 1 }>
-                <AddressIcon hash={ address }/>
+                { /* ??? */ }
+                { /* <AddressIcon hash={ address }/> */ }
                 <AddressLink hash={ address } ml={ 2 }/>
               </Address>
             </Flex>
@@ -94,7 +95,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
           </>
         ) }
       </AccordionItem>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/tx/state/TxStateTableItem.tsx

@@ -18,7 +18,7 @@ import React, { useRef } from 'react';
 import type { TTxStateItem } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
 import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
+// import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 
 import TxStateStorageItem from './TxStateStorageItem';
@@ -58,7 +58,8 @@ const TxStateTableItem = ({ txStateItem }: { txStateItem: TTxStateItem }) => {
             </Td>
             <Td border={ 0 }>
               <Address height="30px">
-                <AddressIcon hash={ txStateItem.address }/>
+                { /* ??? */ }
+                { /* <AddressIcon hash={ txStateItem.address }/> */ }
                 <AddressLink hash={ txStateItem.address } fontWeight="500" truncation="constant" ml={ 2 }/>
               </Address>
             </Td>

ui/tx/useFetchTxInfo.tsx

 import type { UseQueryResult } from '@tanstack/react-query';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Transaction } from 'types/api/transaction';
-import { QueryKeys } from 'types/client/queries';
 
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import delay from 'lib/delay';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
@@ -18,29 +17,29 @@ interface Params {
   updateDelay?: number;
 }
 
-type ReturnType = UseQueryResult<Transaction, ErrorType<{ status: number }>> & {
+type ReturnType = UseQueryResult<Transaction, ResourceError<{ status: number }>> & {
   socketStatus: 'close' | 'error' | undefined;
 }
 
 export default function useFetchTxInfo({ onTxStatusUpdate, updateDelay }: Params | undefined = {}): ReturnType {
   const router = useRouter();
-  const fetch = useFetch();
   const queryClient = useQueryClient();
   const [ socketStatus, setSocketStatus ] = React.useState<'close' | 'error'>();
 
-  const queryResult = useQuery<unknown, ErrorType<{ status: number }>, Transaction>(
-    [ QueryKeys.tx, router.query.id ],
-    async() => await fetch(`/node-api/transactions/${ router.query.id }`),
-    {
+  const queryResult = useApiQuery<'tx', { status: number }>('tx', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: {
       enabled: Boolean(router.query.id),
       refetchOnMount: false,
     },
-  );
+  });
   const { data, isError, isLoading } = queryResult;
 
   const handleStatusUpdateMessage: SocketMessage.TxStatusUpdate['handler'] = React.useCallback(async() => {
     updateDelay && await delay(updateDelay);
-    queryClient.invalidateQueries({ queryKey: [ QueryKeys.tx, router.query.id ] });
+    queryClient.invalidateQueries({
+      queryKey: getResourceKey('tx', { pathParams: { id: router.query.id?.toString() } }),
+    });
     onTxStatusUpdate?.();
   }, [ onTxStatusUpdate, queryClient, router.query.id, updateDelay ]);
 

ui/txs/TxAdditionalInfo.tsx

@@ -12,7 +12,7 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
-  const sectionBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const sectionBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const sectionProps = {
     borderBottom: '1px solid',
     borderColor: sectionBorderColor,

ui/txs/TxsContent.tsx

@@ -7,17 +7,18 @@ import type { TxsResponse } from 'types/api/transaction';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 
 import TxsHeaderMobile from './TxsHeaderMobile';
 import TxsListItem from './TxsListItem';
 import TxsNewItemNotice from './TxsNewItemNotice';
-import TxsSkeletonDesktop from './TxsSkeletonDesktop';
-import TxsSkeletonMobile from './TxsSkeletonMobile';
 import TxsTable from './TxsTable';
 import useTxsSort from './useTxsSort';
 
 type QueryResult = UseQueryResult<TxsResponse> & {
   pagination: PaginationProps;
+  isPaginationVisible: boolean;
 };
 
 type Props = {
@@ -31,7 +32,6 @@ type Props = {
 
 const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true, currentAddress, enableTimeIncrement }: Props) => {
   const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
-  const isPaginatorHidden = !isLoading && !isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
   const isMobile = useIsMobile();
 
   const content = (() => {
@@ -42,8 +42,13 @@ const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true
     if (isLoading) {
       return (
         <>
-          <Show below="lg" ssr={ false }><TxsSkeletonMobile showBlockInfo={ showBlockInfo }/></Show>
-          <Hide below="lg" ssr={ false }><TxsSkeletonDesktop showBlockInfo={ showBlockInfo }/></Hide>
+          <Show below="lg" ssr={ false }><SkeletonList/></Show>
+          <Hide below="lg" ssr={ false }>
+            <SkeletonTable columns={ showBlockInfo ?
+              [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
+              [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
+            }/>
+          </Hide>
         </>
       );
     }
@@ -81,7 +86,7 @@ const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true
             sorting={ sorting }
             showBlockInfo={ showBlockInfo }
             showSocketInfo={ showSocketInfo }
-            top={ isPaginatorHidden ? 0 : 80 }
+            top={ query.isPaginationVisible ? 80 : 0 }
             currentAddress={ currentAddress }
             enableTimeIncrement={ enableTimeIncrement }
           />
@@ -98,7 +103,7 @@ const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true
           sorting={ sorting }
           setSorting={ setSortByValue }
           paginationProps={ query.pagination }
-          showPagination={ !isPaginatorHidden }
+          showPagination={ query.isPaginationVisible }
           filterComponent={ filter }
         />
       ) }

ui/txs/TxsFilters.tsx

@@ -72,7 +72,7 @@ const TxsFilters = ({ onFiltersChange, filters, appliedFiltersNum }: Props) => {
     onClose();
   }, [ onClose, onFiltersChange, typeFilter, methodFilter ]);
 
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>

ui/txs/TxsListItem.tsx

@@ -102,7 +102,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
         ) }
         <Flex alignItems="center" height={ 6 } mt={ 6 }>
           <Address width={ `calc((100%-${ currentAddress ? TAG_WIDTH : ARROW_WIDTH + 8 }px)/2)` }>
-            <AddressIcon hash={ tx.from.hash }/>
+            <AddressIcon address={ tx.from }/>
             <AddressLink
               hash={ tx.from.hash }
               alias={ tx.from.name }
@@ -120,7 +120,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
               />
             ) }
           <Address width="calc((100%-40px)/2)">
-            <AddressIcon hash={ dataTo.hash }/>
+            <AddressIcon address={ dataTo }/>
             <AddressLink
               hash={ dataTo.hash }
               alias={ dataTo.name }

ui/txs/TxsSkeletonDesktop.tsx

-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import SkeletonTable from 'ui/shared/SkeletonTable';
-
-interface Props {
-  showBlockInfo: boolean;
-}
-
-const TxsInternalsSkeletonDesktop = ({ showBlockInfo }: Props) => {
-  return (
-    <Box mb={ 8 }>
-      <SkeletonTable columns={ showBlockInfo ?
-        [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
-        [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
-      }/>
-    </Box>
-  );
-};
-
-export default TxsInternalsSkeletonDesktop;

ui/txs/TxsSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  showBlockInfo: boolean;
-}
-
-const TxInternalsSkeletonMobile = ({ showBlockInfo }: Props) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          flexDirection="column"
-          paddingBottom={ 3 }
-          paddingTop={ 4 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <Skeleton w="100px" mr={ 2 } h={ 6 }/>
-            <Skeleton w="100px" h={ 6 }/>
-          </Flex>
-          <Skeleton w="100%" h="30px" mt={ 3 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 3 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-          { showBlockInfo && <Skeleton w="100%" h={ 6 } mt={ 6 }/> }
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default TxInternalsSkeletonMobile;

ui/txs/TxsTableItem.tsx

@@ -51,7 +51,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
   const addressFrom = (
     <Address>
       <Tooltip label={ tx.from.implementation_name }>
-        <Box display="flex"><AddressIcon hash={ tx.from.hash }/></Box>
+        <Box display="flex"><AddressIcon address={ tx.from }/></Box>
       </Tooltip>
       <AddressLink hash={ tx.from.hash } alias={ tx.from.name } fontWeight="500" ml={ 2 } truncation="constant"/>
     </Address>
@@ -62,13 +62,13 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
   const addressTo = (
     <Address>
       <Tooltip label={ dataTo.implementation_name }>
-        <Box display="flex"><AddressIcon hash={ dataTo.hash }/></Box>
+        <Box display="flex"><AddressIcon address={ dataTo }/></Box>
       </Tooltip>
       <AddressLink hash={ dataTo.hash } alias={ dataTo.name } fontWeight="500" ml={ 2 } truncation="constant"/>
     </Address>
   );
 
-  const infoBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const infoBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   return (
     <Tr>
       <Td pl={ 4 }>

ui/watchlist/AddressModal/AddressForm.tsx

@@ -12,9 +12,9 @@ import { useForm, Controller } from 'react-hook-form';
 import type { WatchlistErrors } from 'types/api/account';
 import type { TWatchlistItem } from 'types/client/account';
 
+import type { ResourceErrorAccount } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
 import AddressInput from 'ui/shared/AddressInput';
 import CheckboxInput from 'ui/shared/CheckboxInput';
@@ -83,7 +83,7 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     mode: 'onTouched',
   });
 
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   function updateWatchlist(formData: Inputs) {
     const body = {
@@ -96,11 +96,14 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     };
     if (!isAdd && data) {
       // edit address
-      return fetch<TWatchlistItem, WatchlistErrors>(`/node-api/account/watchlist/${ data.id }`, { method: 'PUT', body });
+      return apiFetch('watchlist', {
+        pathParams: { id: data?.id || '' },
+        fetchParams: { method: 'PUT', body },
+      });
 
     } else {
       // add address
-      return fetch<TWatchlistItem, WatchlistErrors>('/node-api/account/watchlist', { method: 'POST', body });
+      return apiFetch('watchlist', { fetchParams: { method: 'POST', body } });
     }
   }
 
@@ -109,13 +112,14 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
       await onSuccess();
       setPending(false);
     },
-    onError: (e: ErrorType<WatchlistErrors>) => {
+    onError: (error: ResourceErrorAccount<WatchlistErrors>) => {
       setPending(false);
-      if (e?.error?.address_hash || e?.error?.name) {
-        e?.error?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(e.error, 'address_hash') });
-        e?.error?.name && setError('tag', { type: 'custom', message: getErrorMessage(e.error, 'name') });
-      } else if (e?.error?.watchlist_id) {
-        setError('address', { type: 'custom', message: getErrorMessage(e.error, 'watchlist_id') });
+      const errorMap = error.payload?.errors;
+      if (errorMap?.address_hash || errorMap?.name) {
+        errorMap?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
+        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+      } else if (errorMap?.watchlist_id) {
+        setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'watchlist_id') });
       } else {
         setAlertVisible(true);
       }

ui/watchlist/DeleteAddressModal.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 
 import type { TWatchlistItem } from 'types/client/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiFetch from 'lib/api/useApiFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import DeleteModal from 'ui/shared/DeleteModal';
 
@@ -16,11 +16,14 @@ type Props = {
 
 const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data }) => {
   const isMobile = useIsMobile();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const mutationFn = useCallback(() => {
-    return fetch(`/node-api/account/watchlist/${ data?.id }`, { method: 'DELETE' });
-  }, [ data?.id, fetch ]);
+    return apiFetch('custom_abi', {
+      pathParams: { id: data.id },
+      fetchParams: { method: 'DELETE' },
+    });
+  }, [ data?.id, apiFetch ]);
 
   const address = data?.address_hash;
 

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -16,7 +16,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
 
   return (
     <VStack spacing={ 2 } align="stretch" fontWeight={ 500 }>
-      <AddressSnippet address={ item.address_hash }/>
+      <AddressSnippet address={ item.address }/>
       <Flex fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
         { appConfig.network.currency.address && (
           <TokenLogo

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -4,9 +4,9 @@ import React, { useCallback, useState } from 'react';
 
 import type { TWatchlistItem } from 'types/client/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiFetch from 'lib/api/useApiFetch';
 import useToast from 'lib/hooks/useToast';
-import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 import WatchListAddressItem from './WatchListAddressItem';
@@ -29,7 +29,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   const errorToast = useToast();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const showErrorToast = useCallback(() => {
     errorToast({
@@ -61,7 +61,10 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     setSwitchDisabled(true);
     const body = { ...item, notification_methods: { email: !notificationEnabled } };
     setNotificationEnabled(prevState => !prevState);
-    return fetch(`/node-api/account/watchlist/${ item.id }`, { method: 'PUT', body });
+    return apiFetch('watchlist', {
+      pathParams: { id: item.id },
+      fetchParams: { method: 'PUT', body },
+    });
   }, {
     onError: () => {
       showErrorToast();
@@ -79,7 +82,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ mutate ]);
 
   return (
-    <AccountListItemMobile>
+    <ListItemMobile>
       <Box maxW="100%">
         <WatchListAddressItem item={ item }/>
         <HStack spacing={ 3 } mt={ 6 }>
@@ -103,7 +106,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Flex>
-    </AccountListItemMobile>
+    </ListItemMobile>
   );
 };
 

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useState } from 'react';
 
 import type { TWatchlistItem } from 'types/client/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiFetch from 'lib/api/useApiFetch';
 import useToast from 'lib/hooks/useToast';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
@@ -34,7 +34,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   const errorToast = useToast();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const showErrorToast = useCallback(() => {
     errorToast({
@@ -66,7 +66,10 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     setSwitchDisabled(true);
     const body = { ...item, notification_methods: { email: !notificationEnabled } };
     setNotificationEnabled(prevState => !prevState);
-    return fetch(`/node-api/account/watchlist/${ item.id }`, { method: 'PUT', body });
+    return apiFetch('watchlist', {
+      pathParams: { id: item.id },
+      fetchParams: { method: 'PUT', body },
+    });
   }, {
     onError: () => {
       showErrorToast();

yarn.lock

@@ -3588,6 +3588,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.36.tgz#c0d5f2fe76b47b63e0e0efc3d2049a9970d68794"
   integrity sha512-V3orv+ggDsWVHP99K3JlwtH20R7J4IhI1Kksgc+64q5VxgfRkQG8Ws3MFm/FZOKDYGy9feGFlZ70/HpCNe9QaA==
 
+"@types/papaparse@^5.3.5":
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/@types/papaparse/-/papaparse-5.3.5.tgz#e5ad94b1fe98e2a8ea0b03284b83d2cb252bbf39"
+  integrity sha512-R1icl/hrJPFRpuYj9PVG03WBAlghJj4JW9Py5QdR8FFSxaLmZRyu7xYDCCBZIJNfUv3MYaeBbhBoX958mUTAaw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -7708,6 +7715,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+papaparse@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.3.2.tgz#d1abed498a0ee299f103130a6109720404fbd467"
+  integrity sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -7757,6 +7769,11 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-to-regexp@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
+  integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"