Merge branch 'main' of github.com:blockscout/frontend into address-coin-balance

configs/envs/.env.poa_core

@@ -5,6 +5,7 @@ NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Gnosis Chain','url':'https://blockscout
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address'}}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cup']
 NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=radial-gradient(at 12% 37%, hsla(324,73%,67%,1) 0px, transparent 50%), radial-gradient(at 62% 14%, hsla(256,87%,73%,1) 0px, transparent 50%), radial-gradient(at 84% 80%, hsla(128,75%,73%,1) 0px, transparent 50%), radial-gradient(at 57% 46%, hsla(285,63%,72%,1) 0px, transparent 50%), radial-gradient(at 37% 30%, hsla(174,70%,61%,1) 0px, transparent 50%), radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%), radial-gradient(at 67% 57%, hsla(14,95%,76%,1) 0px, transparent 50%)
+#NEXT_PUBLIC_NETWORK_LOGO=https://placekitten.com/300/60
 #NEXT_PUBLIC_NETWORK_SMALL_LOGO=https://placekitten.com/300/300
 
 # network config

deploy/values/main/values.yaml

@@ -455,6 +455,7 @@ frontend:
         - "/blocks"
         - "/block"
         - "/address"
+        - "/stats"
   resources:
     limits:
       memory:

deploy/values/review/values.yaml

@@ -318,6 +318,7 @@ frontend:
         - "/block"
         - "/login"
         - "/address"
+        - "/stats"
   resources:
     limits:
       memory:

icons/networks/icons/goerli.svg

 <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.822 15.052h-6.9v2.731h3.19l-.01 3.433c-.123.132-.269.24-.43.319-.21.108-.43.197-.656.267a5.653 5.653 0 0 1-1.656.247 3.012 3.012 0 0 1-2.715-1.424 7.746 7.746 0 0 1-.9-4.064v-2.6a9.44 9.44 0 0 1 .265-2.36 5.76 5.76 0 0 1 .715-1.71c.267-.427.63-.785 1.06-1.047.4-.237.858-.36 1.323-.357a2.922 2.922 0 0 1 2.191.735c.526.615.84 1.383.895 2.191h3.627a8.472 8.472 0 0 0-.615-2.458 5.315 5.315 0 0 0-1.304-1.857 5.626 5.626 0 0 0-2.047-1.164 9.016 9.016 0 0 0-2.84-.4 6.71 6.71 0 0 0-2.774.572A6.354 6.354 0 0 0 2.016 7.77a7.927 7.927 0 0 0-1.483 2.659 10.954 10.954 0 0 0-.532 3.557v2.575a11.475 11.475 0 0 0 .51 3.557c.3.97.793 1.871 1.45 2.646a6.251 6.251 0 0 0 2.264 1.65 7.406 7.406 0 0 0 2.966.573c.765.005 1.529-.07 2.278-.221a10.497 10.497 0 0 0 1.914-.58 7.636 7.636 0 0 0 1.477-.8c.362-.247.691-.54.98-.87l-.018-7.464Zm2.66 2.783c-.01.97.143 1.935.451 2.855.281.837.73 1.61 1.317 2.269a5.985 5.985 0 0 0 2.133 1.5 7.278 7.278 0 0 0 2.88.54 7.194 7.194 0 0 0 2.86-.54 5.935 5.935 0 0 0 2.118-1.5 6.602 6.602 0 0 0 1.311-2.27c.308-.92.46-1.884.45-2.854v-.274a8.673 8.673 0 0 0-.45-2.84 6.532 6.532 0 0 0-1.317-2.27 6.078 6.078 0 0 0-2.125-1.508 7.812 7.812 0 0 0-5.74 0 6.082 6.082 0 0 0-2.12 1.508 6.516 6.516 0 0 0-1.317 2.27 8.647 8.647 0 0 0-.45 2.84v.274Zm3.681-.273a7.394 7.394 0 0 1 .174-1.625c.1-.478.284-.936.541-1.352a2.633 2.633 0 0 1 2.357-1.26c.495-.016.984.1 1.418.337.387.224.712.542.947.923.253.417.435.874.535 1.352a7.4 7.4 0 0 1 .173 1.625v.273a7.613 7.613 0 0 1-.172 1.659c-.1.478-.281.935-.537 1.352a2.622 2.622 0 0 1-2.337 1.255 2.818 2.818 0 0 1-1.424-.338 2.759 2.759 0 0 1-.96-.917 4.143 4.143 0 0 1-.541-1.352 7.6 7.6 0 0 1-.174-1.659v-.274.001Zm-1.747-10.3c.086.196.212.37.37.514.167.147.36.262.57.338.472.164.985.164 1.456 0 .21-.076.404-.19.57-.338.16-.143.285-.318.37-.514a1.594 1.594 0 0 0 0-1.274 1.562 1.562 0 0 0-.37-.52 1.7 1.7 0 0 0-.57-.344 2.206 2.206 0 0 0-1.456 0 1.7 1.7 0 0 0-.57.345 1.562 1.562 0 0 0-.502 1.157c0 .219.045.436.133.637v-.001Zm6.357.013c.086.197.212.374.37.52a1.7 1.7 0 0 0 .57.345c.47.165.984.165 1.456 0a1.7 1.7 0 0 0 .57-.345c.157-.146.283-.323.37-.52.089-.205.134-.427.132-.65a1.561 1.561 0 0 0-.503-1.151 1.761 1.761 0 0 0-.57-.338 2.206 2.206 0 0 0-1.456 0c-.21.075-.403.19-.57.338a1.546 1.546 0 0 0-.503 1.151c-.002.224.043.446.134.65Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.822 15.052h-6.9v2.731h3.19l-.01 3.433c-.123.132-.269.24-.43.319-.21.108-.43.197-.656.267a5.653 5.653 0 0 1-1.656.247 3.012 3.012 0 0 1-2.715-1.424 7.746 7.746 0 0 1-.9-4.064v-2.6a9.44 9.44 0 0 1 .265-2.36 5.76 5.76 0 0 1 .715-1.71c.267-.427.63-.785 1.06-1.047.4-.237.858-.36 1.323-.357a2.922 2.922 0 0 1 2.191.735c.526.615.84 1.383.895 2.191h3.627a8.472 8.472 0 0 0-.615-2.458 5.315 5.315 0 0 0-1.304-1.857 5.626 5.626 0 0 0-2.047-1.164 9.016 9.016 0 0 0-2.84-.4 6.71 6.71 0 0 0-2.774.572A6.354 6.354 0 0 0 2.016 7.77a7.927 7.927 0 0 0-1.483 2.659 10.954 10.954 0 0 0-.532 3.557v2.575a11.475 11.475 0 0 0 .51 3.557c.3.97.793 1.871 1.45 2.646a6.251 6.251 0 0 0 2.264 1.65 7.406 7.406 0 0 0 2.966.573c.765.005 1.529-.07 2.278-.221a10.497 10.497 0 0 0 1.914-.58 7.636 7.636 0 0 0 1.477-.8 5.2 5.2 0 0 0 .98-.87l-.018-7.464Zm2.66 2.783c-.01.97.143 1.935.451 2.855.281.837.73 1.61 1.317 2.269a5.985 5.985 0 0 0 2.133 1.5 7.278 7.278 0 0 0 2.88.54 7.194 7.194 0 0 0 2.86-.54 5.935 5.935 0 0 0 2.118-1.5 6.602 6.602 0 0 0 1.311-2.27c.308-.92.46-1.884.45-2.854v-.274a8.673 8.673 0 0 0-.45-2.84 6.532 6.532 0 0 0-1.317-2.27 6.078 6.078 0 0 0-2.125-1.508 7.812 7.812 0 0 0-5.74 0 6.082 6.082 0 0 0-2.12 1.508 6.516 6.516 0 0 0-1.317 2.27 8.647 8.647 0 0 0-.45 2.84v.274Zm3.681-.273a7.394 7.394 0 0 1 .174-1.625c.1-.478.284-.936.541-1.352a2.633 2.633 0 0 1 2.357-1.26c.495-.016.984.1 1.418.337.387.224.712.542.947.923.253.417.435.874.535 1.352a7.4 7.4 0 0 1 .173 1.625v.273a7.613 7.613 0 0 1-.172 1.659c-.1.478-.281.935-.537 1.352a2.622 2.622 0 0 1-2.337 1.255 2.818 2.818 0 0 1-1.424-.338 2.759 2.759 0 0 1-.96-.917 4.143 4.143 0 0 1-.541-1.352 7.6 7.6 0 0 1-.174-1.659v-.274.001Zm-1.747-10.3c.086.196.212.37.37.514.167.147.36.262.57.338.472.164.985.164 1.456 0 .21-.076.404-.19.57-.338.16-.143.285-.318.37-.514a1.594 1.594 0 0 0 0-1.274 1.562 1.562 0 0 0-.37-.52 1.7 1.7 0 0 0-.57-.344 2.206 2.206 0 0 0-1.456 0 1.7 1.7 0 0 0-.57.345 1.562 1.562 0 0 0-.502 1.157c0 .219.045.436.133.637v-.001Zm6.357.013c.086.197.212.374.37.52a1.7 1.7 0 0 0 .57.345c.47.165.984.165 1.456 0a1.7 1.7 0 0 0 .57-.345c.157-.146.283-.323.37-.52.089-.205.134-.427.132-.65a1.561 1.561 0 0 0-.503-1.151 1.761 1.761 0 0 0-.57-.338 2.206 2.206 0 0 0-1.456 0c-.21.075-.403.19-.57.338a1.546 1.546 0 0 0-.503 1.151c-.002.224.043.446.134.65Z" fill="currentColor"/>
 </svg>

icons/repeat_arrow.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.485 7.012h1.446a.918.918 0 1 1 0 1.84H4.253a.919.919 0 0 1-.92-.92V4.254a.919.919 0 1 1 1.84 0v1.47l.505-.505a6.436 6.436 0 0 1 9.103 0 6.436 6.436 0 0 1 0 9.103 6.436 6.436 0 0 1-9.103 0 .92.92 0 0 1 1.302-1.301 4.597 4.597 0 1 0 0-6.503l-.495.494Z" fill="currentColor"/>
+</svg>

icons/stats.svg

+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.615 5.192c0-.934.758-1.692 1.693-1.692h2.538c.935 0 1.692.758 1.692 1.692v18.616c0 .934-.757 1.692-1.692 1.692h-2.538a1.692 1.692 0 0 1-1.693-1.692V5.192Zm4.231.339a.339.339 0 0 0-.338-.339h-1.862a.339.339 0 0 0-.338.339v17.938c0 .187.151.339.338.339h1.862a.339.339 0 0 0 .338-.339V5.531ZM4 19.577c0-.935.758-1.692 1.692-1.692h2.539c.934 0 1.692.757 1.692 1.692v4.23c0 .935-.758 1.693-1.692 1.693H5.692A1.692 1.692 0 0 1 4 23.808v-4.231Zm4.23.338a.339.339 0 0 0-.338-.338H6.031a.339.339 0 0 0-.339.338v3.554a.34.34 0 0 0 .339.339h1.861a.338.338 0 0 0 .339-.339v-3.554Zm12.693-9.646c-.934 0-1.692.758-1.692 1.693v11.846c0 .934.757 1.692 1.692 1.692h2.539c.934 0 1.692-.758 1.692-1.692V11.962c0-.935-.758-1.693-1.692-1.693h-2.539Zm2.2 1.693c.187 0 .339.151.339.338v11.17a.338.338 0 0 1-.339.338h-1.861a.338.338 0 0 1-.339-.339V12.3c0-.187.152-.338.339-.338h1.861Z" fill="currentColor"/>
+</svg>

lib/getCurrencyValue.ts

+import BigNumber from 'bignumber.js';
+
+interface Params {
+  value: string;
+  exchangeRate?: string | null;
+  accuracy?: number;
+  accuracyUsd?: number;
+  decimals?: string | null;
+}
+
+export default function getCurrencyValue({ value, accuracy, accuracyUsd, decimals, exchangeRate }: Params) {
+  const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || '18')));
+  const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat();
+
+  let usdResult: string | undefined;
+
+  if (exchangeRate) {
+    const exchangeRateBn = new BigNumber(exchangeRate);
+    const usdBn = valueCurr.times(exchangeRateBn);
+    if (accuracyUsd && !usdBn.isEqualTo(0)) {
+      const usdBnDp = usdBn.dp(accuracyUsd);
+      usdResult = usdBnDp.isEqualTo(0) ? usdBn.precision(accuracyUsd).toFormat() : usdBnDp.toFormat();
+    } else {
+      usdResult = usdBn.toFormat();
+    }
+  }
+
+  return { valueStr: valueResult, usd: usdResult };
+}

lib/hooks/useNavItems.tsx

@@ -9,6 +9,7 @@ import blocksIcon from 'icons/block.svg';
 import privateTagIcon from 'icons/privattags.svg';
 import profileIcon from 'icons/profile.svg';
 import publicTagIcon from 'icons/publictags.svg';
+import statsIcon from 'icons/stats.svg';
 import tokensIcon from 'icons/token.svg';
 import transactionsIcon from 'icons/transactions.svg';
 import watchlistIcon from 'icons/watchlist.svg';
@@ -28,6 +29,7 @@ export default function useNavItems() {
       { text: 'Tokens', url: link('tokens'), icon: tokensIcon, isActive: currentRoute === 'tokens', isNewUi: false },
       isMarketplaceFilled ?
         { text: 'Apps', url: link('apps'), icon: appsIcon, isActive: currentRoute === 'apps', isNewUi: true } : null,
+      { text: 'Charts & stats', url: link('stats'), icon: statsIcon, isActive: currentRoute === 'stats', isNewUi: true },
       // there should be custom site sections like Stats, Faucet, More, etc but never an 'other'
       // examples https://explorer-edgenet.polygon.technology/ and https://explorer.celo.org/
       // at this stage custom menu items is under development, we will implement it later

lib/hooks/usePreventFocusAfterModalClosing.tsx

+import React from 'react';
+
+// prevent set focus on button when closing modal
+export default function usePreventFocusAfterModalClosing() {
+  return React.useCallback((e: React.SyntheticEvent) => e.stopPropagation(), []);
+}

lib/socket/types.ts

@@ -7,6 +7,10 @@ SocketMessage.BlocksIndexStatus |
 SocketMessage.TxStatusUpdate |
 SocketMessage.NewTx |
 SocketMessage.NewPendingTx |
+SocketMessage.AddressBalance |
+SocketMessage.AddressCurrentCoinBalance |
+SocketMessage.AddressTokenBalance |
+SocketMessage.AddressCoinBalance |
 SocketMessage.Unknown;
 
 interface SocketMessageParamsGeneric<Event extends string | undefined, Payload extends object | unknown> {
@@ -15,6 +19,16 @@ interface SocketMessageParamsGeneric<Event extends string | undefined, Payload e
   handler: (payload: Payload) => void;
 }
 
+export interface AddressCoinBalancePayload {
+  coin_balance: {
+    block_number: number;
+    block_timestamp?: string;
+    delta?: string;
+    transaction_hash?: string | null;
+    value?: string;
+  };
+}
+
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace SocketMessage {
   export type NewBlock = SocketMessageParamsGeneric<'new_block', NewBlockSocketResponse>;
@@ -22,5 +36,10 @@ export namespace SocketMessage {
   export type TxStatusUpdate = SocketMessageParamsGeneric<'collated', NewBlockSocketResponse>;
   export type NewTx = SocketMessageParamsGeneric<'transaction', { transaction: number }>;
   export type NewPendingTx = SocketMessageParamsGeneric<'pending_transaction', { pending_transaction: number }>;
+  export type AddressBalance = SocketMessageParamsGeneric<'balance', { balance: string; block_number: number; exchange_rate: string }>;
+  export type AddressCurrentCoinBalance =
+  SocketMessageParamsGeneric<'current_coin_balance', { coin_balance: string; block_number: number; exchange_rate: string }>;
+  export type AddressTokenBalance = SocketMessageParamsGeneric<'token_balance', { block_number: number }>;
+  export type AddressCoinBalance = SocketMessageParamsGeneric<'coin_balance', AddressCoinBalancePayload>;
   export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }

mocks/address/tokenBalance.ts

+import type { AddressTokenBalance } from 'types/api/address';
+
+export const erc20a: AddressTokenBalance = {
+  token: {
+    address: '0xb2a90505dc6680a7a695f7975d0d32EeF610f456',
+    decimals: '18',
+    exchange_rate: null,
+    holders: '23',
+    name: 'hyfi.token',
+    symbol: 'HyFi',
+    total_supply: '369000000000000000000000000',
+    type: 'ERC-20',
+  },
+  token_id: null,
+  value: '1169320000000000000000000',
+};
+
+export const erc20b: AddressTokenBalance = {
+  token: {
+    address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+    decimals: '6',
+    exchange_rate: '0.982',
+    holders: '17',
+    name: 'USD Coin',
+    symbol: 'USDC',
+    total_supply: '900000000000000000000000000',
+    type: 'ERC-20',
+  },
+  token_id: null,
+  value: '872500000000',
+};
+
+export const erc20c: AddressTokenBalance = {
+  token: {
+    address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+    decimals: '18',
+    exchange_rate: '1328.89',
+    holders: '17',
+    name: 'Ethereum',
+    symbol: 'ETH',
+    total_supply: '1000000000000000000000000',
+    type: 'ERC-20',
+  },
+  token_id: null,
+  value: '9852000000000000000000',
+};
+
+export const erc20d: AddressTokenBalance = {
+  token: {
+    address: '0xCc7bb2D219A0FC08033E130629C2B854b7bA9195',
+    decimals: '18',
+    exchange_rate: null,
+    holders: '102625',
+    name: 'Zeta',
+    symbol: 'ZETA',
+    total_supply: '2100000000000000000000000000',
+    type: 'ERC-20',
+  },
+  token_id: null,
+  value: '39000000000000000000',
+};
+
+export const erc721a: AddressTokenBalance = {
+  token: {
+    address: '0xDe7cAc71E072FCBd4453E5FB3558C2684d1F88A0',
+    decimals: null,
+    exchange_rate: null,
+    holders: '7',
+    name: 'HyFi Athena',
+    symbol: 'HYFI_ATHENA',
+    total_supply: '105',
+    type: 'ERC-721',
+  },
+  token_id: null,
+  value: '51',
+};
+
+export const erc721b: AddressTokenBalance = {
+  token: {
+    address: '0xA8d5C7beEA8C9bB57f5fBa35fB638BF45550b11F',
+    decimals: null,
+    exchange_rate: null,
+    holders: '2',
+    name: 'World Of Women Galaxy',
+    symbol: 'WOWG',
+    total_supply: null,
+    type: 'ERC-721',
+  },
+  token_id: null,
+  value: '1',
+};
+
+export const erc721c: AddressTokenBalance = {
+  token: {
+    address: '0x47646F1d7dc4Dd2Db5a41D092e2Cf966e27A4992',
+    decimals: null,
+    exchange_rate: null,
+    holders: '12',
+    name: 'Puma',
+    symbol: 'PUMA',
+    total_supply: null,
+    type: 'ERC-721',
+  },
+  token_id: null,
+  value: '5',
+};
+
+export const erc1155a: AddressTokenBalance = {
+  token: {
+    address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+    decimals: null,
+    exchange_rate: null,
+    holders: '22',
+    name: 'HyFi Membership',
+    symbol: 'HYFI_MEMBERSHIP',
+    total_supply: '482',
+    type: 'ERC-1155',
+  },
+  token_id: '42',
+  value: '24',
+};
+
+export const erc1155b: AddressTokenBalance = {
+  token: {
+    address: '0xf4b71b179132ad457f6bcae2a55efa9e4b26eefc',
+    decimals: null,
+    exchange_rate: null,
+    holders: '100',
+    name: 'WinkyVerse Collections',
+    symbol: 'WVC',
+    total_supply: '4943',
+    type: 'ERC-1155',
+  },
+  token_id: '100010000000001',
+  value: '11',
+};
+
+export const erc1155withoutName: AddressTokenBalance = {
+  token: {
+    address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+    decimals: null,
+    exchange_rate: null,
+    holders: '22',
+    name: null,
+    symbol: null,
+    total_supply: '482',
+    type: 'ERC-1155',
+  },
+  token_id: '64532245',
+  value: '42',
+};
+
+export const baseList = [
+  erc20a,
+  erc20b,
+  erc20c,
+  erc721a,
+  erc721b,
+  erc721c,
+  erc1155withoutName,
+  erc1155a,
+  erc1155b,
+];

mocks/tokens/tokenTransfer.ts

@@ -29,6 +29,7 @@ export const erc20: TokenTransfer = {
     name: 'ARIANEE',
     symbol: 'ARIA',
     type: 'ERC-20',
+    total_supply: '0',
   },
   total: {
     decimals: '18',
@@ -67,6 +68,7 @@ export const erc721: TokenTransfer = {
     name: 'Arianee Smart-Asset',
     symbol: 'AriaSA',
     type: 'ERC-721',
+    total_supply: '0',
   },
   total: {
     token_id: '875879856',
@@ -104,6 +106,7 @@ export const erc1155: TokenTransfer = {
     name: null,
     symbol: null,
     type: 'ERC-1155',
+    total_supply: '0',
   },
   total: {
     token_id: '123',

package.json

@@ -48,6 +48,7 @@
     "phoenix": "^1.6.15",
     "pino-http": "^8.2.1",
     "pino-pretty": "^9.1.1",
+    "qrcode": "^1.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.33.1",
@@ -65,6 +66,7 @@
     "@types/jest": "^29.2.0",
     "@types/node": "17.0.36",
     "@types/phoenix": "^1.5.4",
+    "@types/qrcode": "^1.5.0",
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.5",
     "@types/ws": "^8.5.3",

pages/api/stats/charts/blocks/new.ts → pages/api/stats/charts.ts

@@ -4,8 +4,8 @@ import appConfig from 'configs/app/config';
 import handler from 'lib/api/handler';
 
 const getUrl = (req: NextApiRequest) => {
-  const { from, to } = req.query;
-  return `/v1/blocks/new?${ from ? `&from=${ from }&to=${ to }` : '' }`;
+  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);

playwright/fixtures/socketServer.ts

@@ -2,6 +2,7 @@ import type { TestFixture, Page } from '@playwright/test';
 import type { WebSocket } from 'ws';
 import { WebSocketServer } from 'ws';
 
+import type { AddressCoinBalancePayload } from 'lib/socket/types';
 import type { NewBlockSocketResponse } from 'types/api/block';
 
 type ReturnType = () => Promise<WebSocket>;
@@ -53,6 +54,8 @@ export const joinChannel = async(socket: WebSocket, channelName: string) => {
   });
 };
 
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'coin_balance', payload: AddressCoinBalancePayload): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'token_balance', payload: { block_number: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'transaction', payload: { transaction: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'pending_transaction', payload: { pending_transaction: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'new_block', payload: NewBlockSocketResponse): void;

theme/components/Button.ts

@@ -51,15 +51,15 @@ const variantOutline = defineStyle((props) => {
   const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
   const activeColor = (() => {
     if (c === 'gray') {
-      return mode('blue.400', 'gray.50')(props);
+      return mode('blue.600', 'gray.50')(props);
     }
     if (c === 'gray-dark') {
-      return mode('blue.700', 'gray.50')(props);
+      return mode('blue.600', 'gray.50')(props);
     }
     if (c === 'blue') {
-      return mode('blue.400', 'gray.50')(props);
+      return mode('blue.600', 'gray.50')(props);
     }
-    return 'blue.400';
+    return 'blue.600';
   })();
 
   return {
@@ -77,11 +77,17 @@ const variantOutline = defineStyle((props) => {
         bg: props.isActive ? activeBg : 'transparent',
         borderColor: props.isActive ? activeBg : 'blue.400',
         color: props.isActive ? activeColor : 'blue.400',
+        p: {
+          color: 'blue.400',
+        },
       },
       _disabled: {
         color,
         borderColor,
       },
+      p: {
+        color: 'blue.400',
+      },
     },
     _disabled: {
       opacity: 0.2,
@@ -94,6 +100,9 @@ const variantOutline = defineStyle((props) => {
         color,
         borderColor,
       },
+      p: {
+        color: activeColor,
+      },
     },
   };
 });

types/api/account.ts

+import type { AddressParam } from './addressParams';
 export interface AddressTag {
   address_hash: string;
   name: string;
@@ -63,6 +64,7 @@ export interface WatchlistAddress {
   notification_settings: NotificationSettings;
   notification_methods: NotificationMethods;
   id: string;
+  address?: AddressParam;
 }
 
 export interface WatchlistAddressNew {

types/api/address.ts

@@ -15,15 +15,15 @@ export interface Address {
   name: string | null;
   private_tags: Array<AddressTag> | null;
   public_tags: Array<AddressTag> | null;
-  tokenInfo: TokenInfo | null;
+  token: TokenInfo | null;
   watchlist_names: Array<WatchlistName> | null;
 }
 
 export interface AddressCounters {
-  transaction_count: string;
-  token_transfer_count: string;
+  transactions_count: string;
+  token_transfers_count: string;
   gas_usage_count: string;
-  validation_count: string | null;
+  validations_count: string | null;
 }
 
 export interface AddressTokenBalance {

types/api/tokenInfo.ts

@@ -8,6 +8,7 @@ export interface TokenInfo {
   decimals: string | null;
   holders: string | null;
   exchange_rate: string | null;
+  total_supply: string | null;
 }
 
 export type TokenInfoGeneric<Type extends TokenType> = Omit<TokenInfo, 'type'> & { type: Type };

types/client/stats.ts

@@ -23,10 +23,4 @@ export type StatsChart = {
   id: string;
   title: string;
   description: string;
-  apiMethodURL: string;
-}
-
-export interface ModalChart {
-  id: string;
-  title: string;
 }

ui/address/AddressDetails.tsx

-import { Box, Flex, Text, Icon, Button, Grid, Select } from '@chakra-ui/react';
+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';
@@ -9,18 +9,26 @@ import type { Address as TAddress, AddressCounters, AddressTokenBalance } from '
 import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
+import blockIcon from 'icons/block.svg';
 import metamaskIcon from 'icons/metamask.svg';
-import qrCodeIcon from 'icons/qr_code.svg';
-import starOutlineIcon from 'icons/star_outline.svg';
-import walletIcon from 'icons/wallet.svg';
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import link from 'lib/link/link';
 import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import ExternalLink from 'ui/shared/ExternalLink';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 
+import AddressBalance from './details/AddressBalance';
+import AddressDetailsSkeleton from './details/AddressDetailsSkeleton';
+import AddressFavoriteButton from './details/AddressFavoriteButton';
+import AddressNameInfo from './details/AddressNameInfo';
+import AddressQrCode from './details/AddressQrCode';
+import TokenSelect from './tokenSelect/TokenSelect';
+
 interface Props {
   addressQuery: UseQueryResult<TAddress>;
 }
@@ -47,14 +55,15 @@ const AddressDetails = ({ addressQuery }: Props) => {
   );
 
   if (countersQuery.isLoading || addressQuery.isLoading || tokenBalancesQuery.isLoading) {
-    return <Box>loading</Box>;
+    return <AddressDetailsSkeleton/>;
   }
 
   if (countersQuery.isError || addressQuery.isError || tokenBalancesQuery.isError) {
-    return <Box>error</Box>;
+    return <DataFetchAlert/>;
   }
 
   const explorers = appConfig.network.explorers.filter(({ paths }) => paths.address);
+  const validationsCount = Number(countersQuery.data.validations_count);
 
   return (
     <Box>
@@ -65,16 +74,12 @@ const AddressDetails = ({ addressQuery }: Props) => {
         </Text>
         <CopyToClipboard text={ addressQuery.data.hash }/>
         <Icon as={ metamaskIcon } boxSize={ 6 } ml={ 2 }/>
-        <Button variant="outline" size="sm" ml={ 3 }>
-          <Icon as={ starOutlineIcon } boxSize={ 5 }/>
-        </Button>
-        <Button variant="outline" size="sm" ml={ 2 }>
-          <Icon as={ qrCodeIcon } boxSize={ 5 }/>
-        </Button>
+        <AddressFavoriteButton hash={ addressQuery.data.hash } isAdded={ Boolean(addressQuery.data.watchlist_names?.length) } ml={ 3 }/>
+        <AddressQrCode hash={ addressQuery.data.hash } ml={ 2 }/>
       </Flex>
       { explorers.length > 0 && (
         <Flex mt={ 8 } columnGap={ 4 } flexWrap="wrap">
-          <Text>Verify with other explorers</Text>
+          <Text fontSize="sm">Verify with other explorers</Text>
           { explorers.map((explorer) => {
             const url = new URL(explorer.paths.tx + '/' + router.query.id, explorer.baseUrl);
             return <ExternalLink key={ explorer.baseUrl } title={ explorer.title } href={ url.toString() }/>;
@@ -87,43 +92,37 @@ const AddressDetails = ({ addressQuery }: Props) => {
         rowGap={{ base: 3, lg: 3 }}
         templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
+        <AddressNameInfo data={ addressQuery.data }/>
+        { addressQuery.data.is_contract && addressQuery.data.creation_tx_hash && addressQuery.data.creator_address_hash && (
+          <DetailsInfoItem
+            title="Creator"
+            hint="Transaction and address of creation."
+          >
+            <AddressLink hash={ addressQuery.data.creator_address_hash } truncation="constant"/>
+            <Text whiteSpace="pre"> at </Text>
+            <AddressLink hash={ addressQuery.data.creation_tx_hash } truncation="constant"/>
+          </DetailsInfoItem>
+        ) }
+        <AddressBalance data={ addressQuery.data }/>
         <DetailsInfoItem
           title="Tokens"
           hint="All tokens in the account and total value."
           alignSelf="center"
+          py="2px"
         >
-          { tokenBalancesQuery.data.length > 0 ? (
-            <>
-              { /* TODO will be fixed later when we implement select with custom menu */ }
-              <Select
-                size="sm"
-                borderRadius="base"
-                focusBorderColor="none"
-                display="inline-block"
-                w="auto"
-              >
-                { tokenBalancesQuery.data.map((token) =>
-                  <option key={ token.token.address } value={ token.token.address }>{ token.token.symbol }</option>) }
-              </Select>
-              <Button variant="outline" size="sm" ml={ 3 }>
-                <Icon as={ walletIcon } boxSize={ 5 }/>
-              </Button>
-            </>
-          ) : (
-            '-'
-          ) }
+          <TokenSelect/>
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Transactions"
           hint="Number of transactions related to this address."
         >
-          { Number(countersQuery.data.transaction_count).toLocaleString() }
+          { Number(countersQuery.data.transactions_count).toLocaleString() }
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Transfers"
           hint="Number of transfers to/from this address."
         >
-          { Number(countersQuery.data.token_transfer_count).toLocaleString() }
+          { Number(countersQuery.data.token_transfers_count).toLocaleString() }
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Gas used"
@@ -131,12 +130,29 @@ const AddressDetails = ({ addressQuery }: Props) => {
         >
           { BigNumber(countersQuery.data.gas_usage_count).toFormat() }
         </DetailsInfoItem>
-        { countersQuery.data.validation_count && (
+        { !Object.is(validationsCount, NaN) && validationsCount > 0 && (
           <DetailsInfoItem
             title="Blocks validated"
             hint="Number of blocks validated by this validator."
           >
-            { Number(countersQuery.data.validation_count).toLocaleString() }
+            { validationsCount.toLocaleString() }
+          </DetailsInfoItem>
+        ) }
+        { addressQuery.data.block_number_balance_updated_at && (
+          <DetailsInfoItem
+            title="Last balance update"
+            hint="Block number in which the address was updated."
+            alignSelf="center"
+            py={{ base: 0, lg: 1 }}
+          >
+            <Link
+              href={ link('block', { id: String(addressQuery.data.block_number_balance_updated_at) }) }
+              display="flex"
+              alignItems="center"
+            >
+              <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 }/>
+              { addressQuery.data.block_number_balance_updated_at }
+            </Link>
           </DetailsInfoItem>
         ) }
       </Grid>

ui/address/details/AddressBalance.tsx

+import { useQueryClient } from '@tanstack/react-query';
+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 useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+interface Props {
+  data: Address;
+}
+
+const AddressBalance = ({ data }: Props) => {
+  const [ lastBlockNumber, setLastBlockNumber ] = React.useState<number>(data.block_number_balance_updated_at || 0);
+  const queryClient = useQueryClient();
+
+  const updateData = React.useCallback((balance: string, exchangeRate: string, blockNumber: number) => {
+    if (blockNumber < lastBlockNumber) {
+      return;
+    }
+
+    setLastBlockNumber(blockNumber);
+    queryClient.setQueryData([ QueryKeys.address, data.hash ], (prevData: Address | undefined) => {
+      if (!prevData) {
+        return;
+      }
+      return {
+        ...prevData,
+        coin_balance: balance,
+        exchange_rate: exchangeRate,
+        block_number_balance_updated_at: blockNumber,
+      };
+    });
+  }, [ data.hash, lastBlockNumber, queryClient ]);
+
+  const handleNewBalanceMessage: SocketMessage.AddressBalance['handler'] = React.useCallback((payload) => {
+    updateData(payload.balance, payload.exchange_rate, payload.block_number);
+  }, [ updateData ]);
+
+  const handleNewCoinBalanceMessage: SocketMessage.AddressCurrentCoinBalance['handler'] = React.useCallback((payload) => {
+    updateData(payload.coin_balance, payload.exchange_rate, payload.block_number);
+  }, [ updateData ]);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ data.hash.toLowerCase() }`,
+    isDisabled: !data.coin_balance,
+  });
+  useSocketMessage({
+    channel,
+    event: 'balance',
+    handler: handleNewBalanceMessage,
+  });
+  useSocketMessage({
+    channel,
+    event: 'current_coin_balance',
+    handler: handleNewCoinBalanceMessage,
+  });
+
+  if (!data.coin_balance) {
+    return null;
+  }
+
+  return (
+    <DetailsInfoItem
+      title="Balance"
+      hint={ `Address balance in ${ appConfig.network.currency.symbol }. Doesn't include ERC20, ERC721 and ERC1155 tokens.` }
+    >
+      <TokenLogo
+        hash={ appConfig.network.currency.address }
+        name={ appConfig.network.currency.name }
+        boxSize={ 5 }
+        mr={ 2 }
+        fontSize="sm"
+      />
+      <CurrencyValue
+        value={ data.coin_balance }
+        exchangeRate={ data.exchange_rate }
+        decimals={ String(appConfig.network.currency.decimals) }
+        currency={ appConfig.network.currency.symbol }
+        accuracyUsd={ 2 }
+        accuracy={ 8 }
+      />
+    </DetailsInfoItem>
+  );
+};
+
+export default React.memo(AddressBalance);

ui/address/details/AddressDetailsSkeleton.tsx

+import { Box, Flex, Grid, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import React from 'react';
+
+import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
+
+const AddressDetailsSkeleton = () => {
+  return (
+    <Box>
+      <Flex align="center">
+        <SkeletonCircle boxSize={ 6 } flexShrink={ 0 }/>
+        <Skeleton h={ 6 } w="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 }/>
+      </Flex>
+      <Flex align="center" columnGap={ 4 } mt={ 8 }>
+        <Skeleton h={ 6 } w="200px"/>
+        <Skeleton h={ 6 } w="80px"/>
+      </Flex>
+      <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '150px 1fr' }} maxW="1000px" mt={ 8 }>
+        <DetailsSkeletonRow w="30%"/>
+        <DetailsSkeletonRow w="30%"/>
+        <DetailsSkeletonRow w="10%"/>
+        <DetailsSkeletonRow w="10%"/>
+        <DetailsSkeletonRow w="20%"/>
+        <DetailsSkeletonRow w="20%"/>
+      </Grid>
+    </Box>
+  );
+};
+
+export default AddressDetailsSkeleton;

ui/address/details/AddressFavoriteButton.tsx

+import { Icon, chakra, Tooltip, IconButton, useDisclosure } from '@chakra-ui/react';
+import { useQuery, 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 useLoginUrl from 'lib/hooks/useLoginUrl';
+import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
+import WatchlistAddModal from 'ui/watchlist/AddressModal/AddressModal';
+import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
+
+interface Props {
+  className?: string;
+  hash: string;
+  isAdded: boolean;
+}
+
+const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
+  const addModalProps = useDisclosure();
+  const deleteModalProps = useDisclosure();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const fetch = useFetch();
+
+  const profileData = queryClient.getQueryData<UserInfo>([ AccountQueryKeys.profile ]);
+  const isAuth = Boolean(profileData);
+  const loginUrl = useLoginUrl();
+
+  const watchListQuery = useQuery<unknown, unknown, TWatchlist>(
+    [ AccountQueryKeys.watchlist ],
+    async() => fetch('/node-api/account/watchlist'),
+    {
+      enabled: isAdded,
+    },
+  );
+
+  const handleClick = React.useCallback(() => {
+    if (!isAuth) {
+      window.location.assign(loginUrl);
+      return;
+    }
+    isAdded ? deleteModalProps.onOpen() : addModalProps.onOpen();
+  }, [ addModalProps, deleteModalProps, isAdded, isAuth, loginUrl ]);
+
+  const handleAddOrDeleteSuccess = React.useCallback(async() => {
+    await queryClient.refetchQueries({ queryKey: [ QueryKeys.address, router.query.id ] });
+    addModalProps.onClose();
+  }, [ addModalProps, queryClient, router.query.id ]);
+
+  const handleAddModalClose = React.useCallback(() => {
+    addModalProps.onClose();
+  }, [ addModalProps ]);
+
+  const handleDeleteModalClose = React.useCallback(() => {
+    deleteModalProps.onClose();
+  }, [ deleteModalProps ]);
+
+  const formData = React.useMemo(() => {
+    return {
+      address_hash: hash,
+      // FIXME temporary solution
+      // there is no endpoint in api what can return watchlist address info by its hash
+      // so we look up in the whole watchlist and hope we can find a necessary item
+      id: watchListQuery.data?.find((address) => address.address?.hash === hash)?.id || '',
+    };
+  }, [ hash, watchListQuery.data ]);
+
+  return (
+    <>
+      <Tooltip label={ `${ isAdded ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
+        <IconButton
+          isActive={ isAdded }
+          className={ className }
+          aria-label="edit"
+          variant="outline"
+          size="sm"
+          pl="6px"
+          pr="6px"
+          onClick={ handleClick }
+          icon={ <Icon as={ isAdded ? starFilledIcon : starOutlineIcon } boxSize={ 5 }/> }
+          onFocusCapture={ usePreventFocusAfterModalClosing() }
+        />
+      </Tooltip>
+      <WatchlistAddModal
+        { ...addModalProps }
+        isAdd
+        onClose={ handleAddModalClose }
+        onSuccess={ handleAddOrDeleteSuccess }
+        data={ formData }
+      />
+      <DeleteAddressModal
+        { ...deleteModalProps }
+        onClose={ handleDeleteModalClose }
+        data={ formData }
+        onSuccess={ handleAddOrDeleteSuccess }
+      />
+    </>
+  );
+};
+
+export default chakra(AddressFavoriteButton);

ui/address/details/AddressNameInfo.tsx

+import { Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import link from 'lib/link/link';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
+interface Props {
+  data: Address;
+}
+
+const AddressNameInfo = ({ data }: Props) => {
+  if (data.token) {
+    return (
+      <DetailsInfoItem
+        title="Token name"
+        hint="Token name and symbol"
+      >
+        <Link href={ link('token_index', { hash: data.token.address }) }>
+          { data.token.name } ({ data.token.symbol })
+        </Link>
+      </DetailsInfoItem>
+    );
+  }
+
+  if (data.is_contract && data.name) {
+    return (
+      <DetailsInfoItem
+        title="Contract name"
+        hint="The name found in the source code of the Contract"
+      >
+        { data.name }
+      </DetailsInfoItem>
+    );
+  }
+
+  if (data.name) {
+    return (
+      <DetailsInfoItem
+        title="Validator name"
+        hint="The name of the validator"
+      >
+        { data.name }
+      </DetailsInfoItem>
+    );
+  }
+
+  return null;
+};
+
+export default React.memo(AddressNameInfo);

ui/address/details/AddressQrCode.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import AddressQrCode from './AddressQrCode';
+
+test('default view +@mobile +@dark-mode', async({ mount, page }) => {
+  await mount(
+    <TestApp>
+      <AddressQrCode hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29"/>
+    </TestApp>,
+  );
+  await page.getByRole('button', { name: /qr code/i }).click();
+
+  await expect(page).toHaveScreenshot();
+});

ui/address/details/AddressQrCode.tsx

+import { chakra, Alert, Icon, Modal, ModalBody, ModalContent, ModalCloseButton, ModalOverlay, Box, useDisclosure, Tooltip, IconButton } from '@chakra-ui/react';
+import * as Sentry from '@sentry/react';
+import QRCode from 'qrcode';
+import React from 'react';
+
+import qrCodeIcon from 'icons/qr_code.svg';
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+const SVG_OPTIONS = {
+  margin: 0,
+};
+
+interface Props {
+  className?: string;
+  hash: string;
+}
+
+const AddressQrCode = ({ hash, className }: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const isMobile = useIsMobile();
+  const [ qr, setQr ] = React.useState('');
+  const [ error, setError ] = React.useState('');
+
+  React.useEffect(() => {
+    if (isOpen) {
+      QRCode.toString(hash, SVG_OPTIONS, (error: Error | null | undefined, svg: string) => {
+        if (error) {
+          setError('We were unable to generate QR code.');
+          Sentry.captureException(error, { tags: { source: 'QR code' } });
+          return;
+        }
+
+        setError('');
+        setQr(svg);
+      });
+    }
+  }, [ hash, isOpen, onClose ]);
+
+  return (
+    <>
+      <Tooltip label="Click to view QR code">
+        <IconButton
+          className={ className }
+          aria-label="Show QR code"
+          variant="outline"
+          size="sm"
+          pl="6px"
+          pr="6px"
+          onClick={ onOpen }
+          icon={ <Icon as={ qrCodeIcon } boxSize={ 5 }/> }
+        />
+      </Tooltip>
+      <Modal isOpen={ isOpen } onClose={ onClose } size={{ base: 'full', lg: 'sm' }}>
+        <ModalOverlay/>
+        <ModalContent bgColor={ error ? undefined : 'white' }>
+          { isMobile && <ModalCloseButton/> }
+          <ModalBody mb={ 0 }>
+            { error ? <Alert status="warning">{ error }</Alert> : <Box dangerouslySetInnerHTML={{ __html: qr }}/> }
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default React.memo(chakra(AddressQrCode));

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';
+
+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),
+    },
+  );
+
+  if (!data) {
+    return <div/>;
+  }
+
+  return children;
+};
+
+export default MockAddressPage;

ui/address/tokenSelect/TokenSelect.pw.tsx

+import { Flex } from '@chakra-ui/react';
+import { test as base, expect, devices } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as tokenBalanceMock from 'mocks/address/tokenBalance';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import TestApp from 'playwright/TestApp';
+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 hooksConfig = {
+  router: {
+    query: { id: '1' },
+  },
+};
+const CLIPPING_AREA = { x: 0, y: 0, width: 360, height: 500 };
+
+const test = base.extend({
+  page: async({ page }, use) => {
+    await page.route(ASSET_URL, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/image_s.jpg',
+      });
+    });
+    await page.route(ADDRESS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({ hash: '1' }),
+    }), { times: 1 });
+    await page.route(TOKENS_API_URL, async(route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(tokenBalanceMock.baseList),
+    }), { times: 1 });
+
+    use(page);
+  },
+});
+
+test('base view +@dark-mode', async({ mount, page }) => {
+  await mount(
+    <TestApp>
+      <MockAddressPage>
+        <Flex>
+          <TokenSelect/>
+        </Flex>
+      </MockAddressPage>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.getByRole('button', { name: /select/i }).click();
+  await page.getByText('USD Coin').hover();
+
+  await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
+
+  await page.mouse.move(100, 200);
+  await page.mouse.wheel(0, 1000);
+  await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ mount, page }) => {
+    await mount(
+      <TestApp>
+        <MockAddressPage>
+          <Flex>
+            <TokenSelect/>
+          </Flex>
+        </MockAddressPage>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await page.getByRole('button', { name: /select/i }).click();
+    await page.getByText('USD Coin').hover();
+
+    await expect(page).toHaveScreenshot();
+  });
+});
+
+test('sort', async({ mount, page }) => {
+  await mount(
+    <TestApp>
+      <MockAddressPage>
+        <Flex>
+          <TokenSelect/>
+        </Flex>
+      </MockAddressPage>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.getByRole('button', { name: /select/i }).click();
+  await page.locator('a[aria-label="Sort ERC-20 tokens"]').click();
+
+  await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
+
+  await page.mouse.move(100, 200);
+  await page.mouse.wheel(0, 1000);
+  await page.locator('a[aria-label="Sort ERC-1155 tokens"]').click();
+
+  await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
+});
+
+test('filter', async({ mount, page }) => {
+  await mount(
+    <TestApp>
+      <MockAddressPage>
+        <Flex>
+          <TokenSelect/>
+        </Flex>
+      </MockAddressPage>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.getByRole('button', { name: /select/i }).click();
+  await page.getByPlaceholder('Search by token name').type('c');
+
+  await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
+});
+
+test.describe('socket', () => {
+  const testWithSocket = test.extend<socketServer.SocketServerFixture>({
+    createSocket: socketServer.createSocket,
+  });
+  testWithSocket.describe.configure({ mode: 'serial' });
+
+  testWithSocket('new item after token balance update', async({ page, mount, createSocket }) => {
+    await mount(
+      <TestApp withSocket>
+        <MockAddressPage>
+          <Flex>
+            <TokenSelect/>
+          </Flex>
+        </MockAddressPage>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await page.route(TOKENS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        ...tokenBalanceMock.baseList,
+        tokenBalanceMock.erc20d,
+      ]),
+    }));
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, 'addresses:1');
+    socketServer.sendMessage(socket, channel, 'token_balance', {
+      block_number: 1,
+    });
+
+    const button = page.getByRole('button', { name: /select/i });
+    const text = await button.innerText();
+    expect(text).toContain('10');
+  });
+
+  testWithSocket('new item after coin balance update', async({ page, mount, createSocket }) => {
+    await mount(
+      <TestApp withSocket>
+        <MockAddressPage>
+          <Flex>
+            <TokenSelect/>
+          </Flex>
+        </MockAddressPage>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await page.route(TOKENS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        ...tokenBalanceMock.baseList,
+        tokenBalanceMock.erc20d,
+      ]),
+    }));
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, 'addresses:1');
+    socketServer.sendMessage(socket, channel, 'coin_balance', {
+      coin_balance: {
+        block_number: 1,
+      },
+    });
+
+    const button = page.getByRole('button', { name: /select/i });
+    const text = await button.innerText();
+    expect(text).toContain('10');
+  });
+});

ui/address/tokenSelect/TokenSelect.tsx

+import { Box, Icon, IconButton, Skeleton, Tooltip } from '@chakra-ui/react';
+import { useQuery, 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 walletIcon from 'icons/wallet.svg';
+import useFetch from 'lib/hooks/useFetch';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+
+import TokenSelectDesktop from './TokenSelectDesktop';
+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 { 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 handleTokenBalanceMessage: SocketMessage.AddressTokenBalance['handler'] = React.useCallback((payload) => {
+    if (payload.block_number !== blockNumber) {
+      refetch();
+      setBlockNumber(payload.block_number);
+    }
+  }, [ blockNumber, refetch ]);
+  const handleCoinBalanceMessage: SocketMessage.AddressCoinBalance['handler'] = React.useCallback((payload) => {
+    if (payload.coin_balance.block_number !== blockNumber) {
+      refetch();
+      setBlockNumber(payload.coin_balance.block_number);
+    }
+  }, [ blockNumber, refetch ]);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ addressQueryData?.hash.toLowerCase() }`,
+    isDisabled: !addressQueryData,
+  });
+  useSocketMessage({
+    channel,
+    event: 'coin_balance',
+    handler: handleCoinBalanceMessage,
+  });
+  useSocketMessage({
+    channel,
+    event: 'token_balance',
+    handler: handleTokenBalanceMessage,
+  });
+
+  if (isLoading) {
+    return <Skeleton h={ 8 } w="160px"/>;
+  }
+
+  if (isError || data.length === 0) {
+    return <Box py="6px">0</Box>;
+  }
+
+  return (
+    <>
+      { isMobile ?
+        <TokenSelectMobile data={ data } isLoading={ balancesIsFetching === 1 }/> :
+        <TokenSelectDesktop data={ data } isLoading={ balancesIsFetching === 1 }/>
+      }
+      <Tooltip label="Show all tokens">
+        <IconButton
+          aria-label="Show all tokens"
+          variant="outline"
+          size="sm"
+          pl="6px"
+          pr="6px"
+          ml={ 3 }
+          icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
+        />
+      </Tooltip>
+    </>
+  );
+};
+
+export default React.memo(TokenSelect);

ui/address/tokenSelect/TokenSelectButton.tsx

+import { Box, Button, Icon, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import arrowIcon from 'icons/arrows/east-mini.svg';
+import tokensIcon from 'icons/tokens.svg';
+import { ZERO } from 'lib/consts';
+
+import type { EnhancedData } from './utils';
+
+interface Props {
+  isOpen: boolean;
+  isLoading: boolean;
+  onClick: () => void;
+  data: Array<EnhancedData>;
+}
+
+const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  const totalBn = data.reduce((result, item) => !item.usd ? result : result.plus(BigNumber(item.usd)), ZERO);
+  const skeletonBgColor = useColorModeValue('white', 'black');
+
+  const handleClick = React.useCallback(() => {
+    if (isLoading && !isOpen) {
+      return;
+    }
+    onClick();
+  }, [ isLoading, isOpen, onClick ]);
+
+  return (
+    <Box position="relative">
+      <Button
+        ref={ ref }
+        size="sm"
+        variant="outline"
+        colorScheme="gray"
+        onClick={ handleClick }
+        aria-label="Token select"
+      >
+        <Icon as={ tokensIcon } boxSize={ 4 } mr={ 2 }/>
+        <Text fontWeight={ 600 }>{ data.length }</Text>
+        <Text whiteSpace="pre" variant="secondary" fontWeight={ 400 }> (${ totalBn.toFormat(2) })</Text>
+        <Icon as={ arrowIcon } transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 3 }/>
+      </Button>
+      { isLoading && !isOpen && <Skeleton h="100%" w="100%" position="absolute" top={ 0 } left={ 0 } bgColor={ skeletonBgColor }/> }
+    </Box>
+  );
+};
+
+export default React.forwardRef(TokenSelectButton);

ui/address/tokenSelect/TokenSelectDesktop.tsx

+import { useColorModeValue, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import TokenSelectButton from './TokenSelectButton';
+import TokenSelectMenu from './TokenSelectMenu';
+import useTokenSelect from './useTokenSelect';
+
+interface Props {
+  data: Array<AddressTokenBalance>;
+  isLoading: boolean;
+}
+
+const TokenSelectDesktop = ({ data, isLoading }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const bgColor = useColorModeValue('white', 'gray.900');
+
+  const result = useTokenSelect(data);
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.modifiedData } isLoading={ isLoading }/>
+      </PopoverTrigger>
+      <PopoverContent w="355px" maxH="450px" overflowY="scroll">
+        <PopoverBody px={ 4 } py={ 6 } bgColor={ bgColor } boxShadow="2xl" >
+          <TokenSelectMenu { ...result }/>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(TokenSelectDesktop);

ui/address/tokenSelect/TokenSelectItem.tsx

+import { Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import link from 'lib/link/link';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+import type { EnhancedData } from './utils';
+
+interface Props {
+  data: EnhancedData;
+}
+
+const TokenSelectItem = ({ data }: Props) => {
+
+  const secondRow = (() => {
+    switch (data.token.type) {
+      case 'ERC-20': {
+        const tokenDecimals = Number(data.token.decimals) || 18;
+        return (
+          <>
+            <Text >{ BigNumber(data.value).dividedBy(10 ** tokenDecimals).toFormat(2) } { data.token.symbol }</Text>
+            { data.token.exchange_rate && <Text >@{ data.token.exchange_rate }</Text> }
+          </>
+        );
+      }
+      case 'ERC-721': {
+        return <Text >{ BigNumber(data.value).toFormat() } { data.token.symbol }</Text>;
+      }
+      case 'ERC-1155': {
+        return (
+          <>
+            <Text >#{ data.token_id || 0 }</Text>
+            <Text >{ BigNumber(data.value).toFormat() }</Text>
+          </>
+        );
+      }
+    }
+  })();
+
+  // TODO add filter param when token page is ready
+  const url = link('token_index', { hash: data.token.address });
+
+  return (
+    <Flex
+      px={ 1 }
+      py="10px"
+      display="flex"
+      flexDir="column"
+      rowGap={ 2 }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderBottomWidth="1px"
+      _hover={{
+        bgColor: useColorModeValue('blue.50', 'gray.800'),
+      }}
+      fontSize="sm"
+      cursor="pointer"
+      as="a"
+      href={ url }
+    >
+      <Flex alignItems="center" w="100%">
+        <TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
+        <Text fontWeight={ 700 } ml={ 2 }>{ data.token.name || <HashStringShorten hash={ data.token.address }/> }</Text>
+        { data.usd && <Text fontWeight={ 700 } ml="auto">${ data.usd.toFormat(2) }</Text> }
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between" w="100%">
+        { secondRow }
+      </Flex>
+    </Flex>
+  );
+};
+
+export default React.memo(TokenSelectItem);

ui/address/tokenSelect/TokenSelectMenu.tsx

+import { Icon, Text, Box, Input, InputGroup, InputLeftElement, useColorModeValue, Flex, Link } from '@chakra-ui/react';
+import type { Dictionary } from 'lodash';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { TokenType } from 'types/api/tokenInfo';
+
+import arrowIcon from 'icons/arrows/east.svg';
+import searchIcon from 'icons/search.svg';
+
+import TokenSelectItem from './TokenSelectItem';
+import type { Sort, EnhancedData } from './utils';
+import { sortTokenGroups, sortingFns } from './utils';
+
+interface Props {
+  searchTerm: string;
+  erc20sort: Sort;
+  erc1155sort: Sort;
+  modifiedData: Array<EnhancedData>;
+  groupedData: Dictionary<Array<EnhancedData>>;
+  onInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onSortClick: (event: React.SyntheticEvent) => void;
+}
+
+const TokenSelectMenu = ({ erc20sort, erc1155sort, modifiedData, groupedData, onInputChange, onSortClick, searchTerm }: Props) => {
+  const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
+  const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+
+  return (
+    <>
+      <InputGroup size="xs" mb={ 5 }>
+        <InputLeftElement >
+          <Icon as={ searchIcon } boxSize={ 4 } color={ searchIconColor }/>
+        </InputLeftElement>
+        <Input
+          paddingInlineStart="38px"
+          placeholder="Search by token name"
+          ml="1px"
+          onChange={ onInputChange }
+          borderColor={ inputBorderColor }
+        />
+      </InputGroup>
+      <Flex flexDir="column" rowGap={ 6 }>
+        { Object.entries(groupedData).sort(sortTokenGroups).map(([ tokenType, tokenInfo ]) => {
+          const type = tokenType as TokenType;
+          const arrowTransform = (type === 'ERC-1155' && erc1155sort === 'desc') || (type === 'ERC-20' && erc20sort === 'desc') ?
+            'rotate(90deg)' :
+            'rotate(-90deg)';
+          const sortDirection: Sort = (() => {
+            switch (type) {
+              case 'ERC-1155':
+                return erc1155sort;
+              case 'ERC-20':
+                return erc20sort;
+              default:
+                return 'desc';
+            }
+          })();
+          const hasSort = type === 'ERC-1155' || (type === 'ERC-20' && tokenInfo.some(({ usd }) => usd));
+
+          return (
+            <Box key={ type }>
+              <Flex justifyContent="space-between">
+                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">{ type } tokens ({ tokenInfo.length })</Text>
+                { hasSort && (
+                  <Link data-type={ type } onClick={ onSortClick } aria-label={ `Sort ${ type } tokens` }>
+                    <Icon as={ arrowIcon } boxSize={ 5 } transform={ arrowTransform } transitionDuration="faster"/>
+                  </Link>
+                ) }
+              </Flex>
+              { tokenInfo.sort(sortingFns[type](sortDirection)).map((data) => <TokenSelectItem key={ data.token.address + data.token_id } data={ data }/>) }
+            </Box>
+          );
+        }) }
+      </Flex>
+      { modifiedData.length === 0 && searchTerm && <Text fontSize="sm">Could not find any matches.</Text> }
+    </>
+  );
+};
+
+export default React.memo(TokenSelectMenu);

ui/address/tokenSelect/TokenSelectMobile.tsx

+import { useDisclosure, Modal, ModalContent, ModalCloseButton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import TokenSelectButton from './TokenSelectButton';
+import TokenSelectMenu from './TokenSelectMenu';
+import useTokenSelect from './useTokenSelect';
+
+interface Props {
+  data: Array<AddressTokenBalance>;
+  isLoading: boolean;
+}
+
+const TokenSelectMobile = ({ data, isLoading }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  const result = useTokenSelect(data);
+
+  return (
+    <>
+      <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.modifiedData } isLoading={ isLoading }/>
+      <Modal isOpen={ isOpen } onClose={ onClose } size="full">
+        <ModalContent>
+          <ModalCloseButton/>
+          <TokenSelectMenu { ...result }/>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default React.memo(TokenSelectMobile);

ui/address/tokenSelect/useTokenSelect.ts

+import _groupBy from 'lodash/groupBy';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import type { Sort } from './utils';
+import { calculateUsdValue, filterTokens } from './utils';
+
+export default function useData(data: Array<AddressTokenBalance>) {
+  const [ searchTerm, setSearchTerm ] = React.useState('');
+  const [ erc1155sort, setErc1155Sort ] = React.useState<Sort>('desc');
+  const [ erc20sort, setErc20Sort ] = React.useState<Sort>('desc');
+
+  const onInputChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  }, []);
+
+  const onSortClick = React.useCallback((event: React.SyntheticEvent) => {
+    const tokenType = (event.currentTarget as HTMLAnchorElement).getAttribute('data-type');
+    if (tokenType === 'ERC-1155') {
+      setErc1155Sort((prevValue) => prevValue === 'desc' ? 'asc' : 'desc');
+    }
+    if (tokenType === 'ERC-20') {
+      setErc20Sort((prevValue) => prevValue === 'desc' ? 'asc' : 'desc');
+    }
+  }, []);
+
+  const modifiedData = React.useMemo(() => {
+    return data.filter(filterTokens(searchTerm.toLowerCase())).map(calculateUsdValue);
+  }, [ data, searchTerm ]);
+  const groupedData = React.useMemo(() => {
+    return _groupBy(modifiedData, 'token.type');
+  }, [ modifiedData ]);
+
+  return {
+    searchTerm,
+    erc20sort,
+    erc1155sort,
+    onInputChange,
+    onSortClick,
+    modifiedData,
+    groupedData,
+  };
+}

ui/address/tokenSelect/utils.ts

+import BigNumber from 'bignumber.js';
+
+import type { AddressTokenBalance } from 'types/api/address';
+import type { TokenType } from 'types/api/tokenInfo';
+
+export type EnhancedData = AddressTokenBalance & {
+  usd?: BigNumber ;
+}
+
+export type Sort = 'desc' | 'asc';
+const TOKEN_GROUPS_ORDER: Array<TokenType> = [ 'ERC-20', 'ERC-721', 'ERC-1155' ];
+type TokenGroup = [string, Array<AddressTokenBalance>];
+
+export const sortTokenGroups = (groupA: TokenGroup, groupB: TokenGroup) => {
+  return TOKEN_GROUPS_ORDER.indexOf(groupA[0] as TokenType) > TOKEN_GROUPS_ORDER.indexOf(groupB[0] as TokenType) ? 1 : -1;
+};
+
+const sortErc1155Tokens = (sort: Sort) => (dataA: AddressTokenBalance, dataB: AddressTokenBalance) => {
+  if (dataA.value === dataB.value) {
+    return 0;
+  }
+  if (sort === 'desc') {
+    return Number(dataA.value) > Number(dataB.value) ? -1 : 1;
+  }
+
+  return Number(dataA.value) > Number(dataB.value) ? 1 : -1;
+};
+const sortErc20Tokens = (sort: Sort) => (dataA: EnhancedData, dataB: EnhancedData) => {
+  if (!dataA.usd && !dataB.usd) {
+    return 0;
+  }
+
+  // keep tokens without usd value in the end of the group
+  if (!dataB.usd) {
+    return -1;
+  }
+  if (!dataA.usd) {
+    return 0;
+  }
+
+  if (sort === 'desc') {
+    return dataA.usd.gt(dataB.usd) ? -1 : 1;
+  }
+
+  return dataA.usd.gt(dataB.usd) ? 1 : -1;
+};
+
+const sortErc721Tokens = () => () => 0;
+
+export const sortingFns = {
+  'ERC-20': sortErc20Tokens,
+  'ERC-721': sortErc721Tokens,
+  'ERC-1155': sortErc1155Tokens,
+};
+
+export const filterTokens = (searchTerm: string) => ({ token }: AddressTokenBalance) => {
+  if (!token.name) {
+    return !searchTerm ? true : token.address.toLowerCase().includes(searchTerm);
+  }
+
+  return token.name?.toLowerCase().includes(searchTerm);
+};
+
+export const calculateUsdValue = (data: AddressTokenBalance): EnhancedData => {
+  if (data.token.type !== 'ERC-20') {
+    return data;
+  }
+
+  const exchangeRate = data.token.exchange_rate;
+  if (!exchangeRate) {
+    return data;
+  }
+
+  const decimals = Number(data.token.decimals || '18');
+  return {
+    ...data,
+    usd: BigNumber(data.value).div(BigNumber(10 ** decimals)).multipliedBy(BigNumber(exchangeRate)),
+  };
+};

ui/block/details/BlockDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-const SkeletonRow = ({ w = '100%' }: { w?: string }) => (
-  <>
-    <GridItem display="flex" columnGap={ 2 } w={{ base: '50%', lg: 'auto' }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
-      <SkeletonCircle h={ 5 } w={ 5 }/>
-      <Skeleton flexGrow={ 1 } h={ 5 } borderRadius="full"/>
-    </GridItem>
-    <GridItem pl={{ base: 7, lg: 0 }}>
-      <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }}/>
-    </GridItem>
-  </>
-);
+import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
 const BlockDetailsSkeleton = () => {
   const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
 
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
-      <SkeletonRow w="25%"/>
-      <SkeletonRow w="25%"/>
-      <SkeletonRow w="65%"/>
-      <SkeletonRow w="25%"/>
-      <SkeletonRow/>
-      <SkeletonRow/>
+      <DetailsSkeletonRow w="25%"/>
+      <DetailsSkeletonRow w="25%"/>
+      <DetailsSkeletonRow w="65%"/>
+      <DetailsSkeletonRow w="25%"/>
+      <DetailsSkeletonRow/>
+      <DetailsSkeletonRow/>
       { sectionGap }
-      <SkeletonRow w="50%"/>
-      <SkeletonRow w="25%"/>
-      <SkeletonRow w="50%"/>
-      <SkeletonRow w="50%"/>
-      <SkeletonRow w="50%"/>
+      <DetailsSkeletonRow w="50%"/>
+      <DetailsSkeletonRow w="25%"/>
+      <DetailsSkeletonRow w="50%"/>
+      <DetailsSkeletonRow w="50%"/>
+      <DetailsSkeletonRow w="50%"/>
       { sectionGap }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
         <Skeleton h={ 5 } borderRadius="full" w="100px"/>

ui/pages/Blocks.pw.tsx

@@ -17,7 +17,7 @@ const hooksConfig = {
   },
 };
 
-export const test = base.extend<socketServer.SocketServerFixture>({
+const test = base.extend<socketServer.SocketServerFixture>({
   createSocket: socketServer.createSocket,
 });
 

ui/pages/Watchlist.tsx

 import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { TWatchlist, TWatchlistItem } from 'types/client/account';
@@ -22,6 +22,7 @@ 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 queryClient = useQueryClient();
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
@@ -42,6 +43,12 @@ const WatchList: React.FC = () => {
     addressModalProps.onClose();
   }, [ addressModalProps ]);
 
+  const onAddOrEditSuccess = useCallback(async() => {
+    await queryClient.refetchQueries([ QueryKeys.watchlist ]);
+    setAddressModalData(undefined);
+    addressModalProps.onClose();
+  }, [ addressModalProps, queryClient ]);
+
   const onDeleteClick = useCallback((data: TWatchlistItem) => {
     setDeleteModalData(data);
     deleteModalProps.onOpen();
@@ -52,6 +59,12 @@ const WatchList: React.FC = () => {
     deleteModalProps.onClose();
   }, [ deleteModalProps ]);
 
+  const onDeleteSuccess = useCallback(async() => {
+    queryClient.setQueryData([ QueryKeys.watchlist ], (prevData: TWatchlist | undefined) => {
+      return prevData?.filter((item) => item.id !== deleteModalData?.id);
+    });
+  }, [ deleteModalData?.id, queryClient ]);
+
   const description = (
     <AccountPageDescription>
       An email notification can be sent to you when an address on your watch list sends or receives any transactions.
@@ -107,8 +120,21 @@ const WatchList: React.FC = () => {
                 Add address
           </Button>
         </Box>
-        <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
-        { deleteModalData && <DeleteAddressModal { ...deleteModalProps } onClose={ onDeleteModalClose } data={ deleteModalData }/> }
+        <AddressModal
+          { ...addressModalProps }
+          onClose={ onAddressModalClose }
+          onSuccess={ onAddOrEditSuccess }
+          data={ addressModalData }
+          isAdd={ !addressModalData }
+        />
+        { deleteModalData && (
+          <DeleteAddressModal
+            { ...deleteModalProps }
+            onClose={ onDeleteModalClose }
+            onSuccess={ onDeleteSuccess }
+            data={ deleteModalData }
+          />
+        ) }
       </>
     );
   }

ui/shared/CurrencyValue.tsx

 import { Box, Text, chakra } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import getCurrencyValue from 'lib/getCurrencyValue';
+
 interface Props {
   value: string;
   currency?: string;
@@ -20,32 +21,14 @@ const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className
       </Box>
     );
   }
-  const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || '18')));
-  const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat();
-
-  let usdContent;
-  if (exchangeRate !== undefined && exchangeRate !== null) {
-    const exchangeRateBn = new BigNumber(exchangeRate);
-    const usdBn = valueCurr.times(exchangeRateBn);
-    let usdResult: string;
-    if (accuracyUsd && !usdBn.isEqualTo(0)) {
-      const usdBnDp = usdBn.dp(accuracyUsd);
-      usdResult = usdBnDp.isEqualTo(0) ? usdBn.precision(accuracyUsd).toFormat() : usdBnDp.toFormat();
-    } else {
-      usdResult = usdBn.toFormat();
-    }
-
-    usdContent = (
-      <Text as="span" variant="secondary" fontWeight={ 400 }>(${ usdResult })</Text>
-    );
-  }
+  const { valueStr: valueResult, usd: usdResult } = getCurrencyValue({ value, accuracy, accuracyUsd, exchangeRate, decimals });
 
   return (
     <Box as="span" className={ className } display="inline-flex" rowGap={ 3 } columnGap={ 1 }>
       <Text display="inline-block">
         { valueResult }{ currency ? ` ${ currency }` : '' }
       </Text>
-      { usdContent }
+      { usdResult && <Text as="span" variant="secondary" fontWeight={ 400 }>(${ usdResult })</Text> }
     </Box>
   );
 };

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -96,7 +96,8 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
         }}
         bgColor={ listBgColor }
         transitionProperty="top,box-shadow,background-color,color"
-        transitionDuration="slow"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
         {
           ...(stickyEnabled ? {
             position: 'sticky',

ui/shared/TableItemActionButtons.tsx

 import { Tooltip, IconButton, Icon, HStack } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import DeleteIcon from 'icons/delete.svg';
 import EditIcon from 'icons/edit.svg';
+import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
 
 type Props = {
   onEditClick: () => void;
@@ -10,8 +11,7 @@ type Props = {
 }
 
 const TableItemActionButtons = ({ onEditClick, onDeleteClick }: Props) => {
-  // prevent set focus on button when closing modal
-  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), []);
+  const onFocusCapture = usePreventFocusAfterModalClosing();
 
   return (
     <HStack spacing={ 6 } alignSelf="flex-end">

ui/shared/TokenLogo.tsx

@@ -21,13 +21,13 @@ const EmptyElement = ({ className, letter }: { className?: string; letter: strin
 };
 
 interface Props {
-  hash: string;
+  hash?: string;
   name?: string | null;
   className?: string;
 }
 
 const TokenLogo = ({ hash, name, className }: Props) => {
-  const logoSrc = appConfig.network.assetsPathname ? [
+  const logoSrc = appConfig.network.assetsPathname && hash ? [
     'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/',
     appConfig.network.assetsPathname,
     '/assets/',
@@ -37,6 +37,7 @@ const TokenLogo = ({ hash, name, className }: Props) => {
 
   return (
     <Image
+      borderRadius="base"
       className={ className }
       src={ logoSrc }
       alt={ `${ name || 'token' } logo` }

ui/shared/skeletons/DetailsSkeletonRow.tsx

+import { GridItem, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import React from 'react';
+
+const DetailsSkeletonRow = ({ w = '100%' }: { w?: string }) => {
+  return (
+    <>
+      <GridItem display="flex" columnGap={ 2 } w={{ base: '50%', lg: 'auto' }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
+        <SkeletonCircle h={ 5 } w={ 5 }/>
+        <Skeleton flexGrow={ 1 } h={ 5 } borderRadius="full"/>
+      </GridItem>
+      <GridItem pl={{ base: 7, lg: 0 }}>
+        <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }}/>
+      </GridItem>
+    </>
+  );
+};
+
+export default DetailsSkeletonRow;

ui/snippets/navigation/NavigationDesktop.tsx

@@ -69,7 +69,9 @@ const NavigationDesktop = () => {
         w="100%"
         px={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
         h={ 10 }
-        { ...getDefaultTransitionProps({ transitionProperty: 'padding' }) }
+        transitionProperty="padding"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
       >
         <NetworkLogo isCollapsed={ isCollapsed }/>
         <NetworkMenu isCollapsed={ isCollapsed }/>

ui/snippets/networkMenu/NetworkLogo.tsx

-import { Icon, Box, Image, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
+import { Icon, Box, Image, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
@@ -6,7 +6,6 @@ import smallLogoPlaceholder from 'icons/networks/icons/placeholder.svg';
 import logoPlaceholder from 'icons/networks/logos/blockscout.svg';
 import link from 'lib/link/link';
 import ASSETS from 'lib/networks/networkAssets';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 interface Props {
   isCollapsed?: boolean;
@@ -16,59 +15,71 @@ interface Props {
 const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const logoColor = useColorModeValue('blue.600', 'white');
   const href = link('network_index');
+  const [ isLogoError, setLogoError ] = React.useState(false);
+  const [ isSmallLogoError, setSmallLogoError ] = React.useState(false);
 
   const style = useColorModeValue({}, { filter: 'brightness(0) invert(1)' });
-  const isLg = useBreakpointValue({ base: false, lg: true, xl: false }, { ssr: true });
 
-  const logoEl = (() => {
-    const showSmallLogo = isCollapsed || (isCollapsed !== false && isLg);
-    if (showSmallLogo) {
-      if (appConfig.network.smallLogo) {
-        return (
-          <Image
-            w="auto"
-            h="100%"
-            src={ appConfig.network.smallLogo }
-            alt={ `${ appConfig.network.name } network logo` }
-          />
-        );
-      }
+  const handleSmallLogoError = React.useCallback(() => {
+    setSmallLogoError(true);
+  }, []);
 
-      const smallLogo = appConfig.network.type ? ASSETS[appConfig.network.type]?.smallLogo || ASSETS[appConfig.network.type]?.icon : undefined;
-      return (
-        <Icon
-          as={ smallLogo || smallLogoPlaceholder }
-          width="auto"
-          height="100%"
-          color={ smallLogo ? undefined : logoColor }
-          { ...getDefaultTransitionProps() }
-          style={ style }
-        />
-      );
-    }
+  const handleLogoError = React.useCallback(() => {
+    setLogoError(true);
+  }, []);
 
-    if (appConfig.network.logo) {
-      return (
-        <Image
-          w="auto"
-          h="100%"
-          src={ appConfig.network.logo }
-          alt={ `${ appConfig.network.name } network logo` }
-        />
-      );
-    }
+  const logoEl = (() => {
+    const fallbackLogoSrc = appConfig.network.type ? ASSETS[appConfig.network.type]?.logo : undefined;
+    const fallbackSmallLogoSrc = appConfig.network.type ? ASSETS[appConfig.network.type]?.smallLogo || ASSETS[appConfig.network.type]?.icon : undefined;
 
-    const logo = appConfig.network.type ? ASSETS[appConfig.network.type]?.logo : undefined;
-    return (
+    const logo = appConfig.network.logo;
+    const smallLogo = appConfig.network.smallLogo;
+
+    const fallbackLogo = (
       <Icon
-        as={ logo || logoPlaceholder }
+        as={ fallbackLogoSrc || logoPlaceholder }
         width="auto"
         height="100%"
-        color={ logo ? undefined : logoColor }
-        { ...getDefaultTransitionProps() }
+        color={ fallbackLogoSrc ? undefined : logoColor }
+        display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
         style={ style }
       />
     );
+    const fallbackSmallLogo = (
+      <Icon
+        as={ fallbackSmallLogoSrc || smallLogoPlaceholder }
+        width="auto"
+        height="100%"
+        color={ fallbackSmallLogoSrc ? undefined : logoColor }
+        display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
+        style={ style }
+      />
+    );
+
+    return (
+      <>
+        { /* big logo */ }
+        <Image
+          w="auto"
+          h="100%"
+          src={ logo }
+          display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
+          alt={ `${ appConfig.network.name } network logo` }
+          fallback={ isLogoError || !logo ? fallbackSmallLogo : undefined }
+          onError={ handleLogoError }
+        />
+        { /* small logo */ }
+        <Image
+          w="auto"
+          h="100%"
+          src={ smallLogo }
+          display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
+          alt={ `${ appConfig.network.name } network logo` }
+          fallback={ isSmallLogoError || !smallLogo ? fallbackLogo : undefined }
+          onError={ handleSmallLogoError }
+        />
+      </>
+    );
   })();
 
   return (
@@ -82,7 +93,6 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
       overflow="hidden"
       onClick={ onClick }
       flexShrink={ 0 }
-      { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
       aria-label="Link to main page"
     >
       { logoEl }

ui/stats/ChartWidget.tsx

-import { Box, Button, Grid, Heading, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Text, useColorModeValue, VisuallyHidden } from '@chakra-ui/react';
+import { Box, Grid, Heading, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Text, useColorModeValue, VisuallyHidden } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
@@ -6,7 +6,8 @@ import type { Charts } from 'types/api/stats';
 import { QueryKeys } from 'types/client/queries';
 import type { StatsIntervalIds } from 'types/client/stats';
 
-import dotsIcon from 'icons/vertical-dots.svg';
+import repeatArrow from 'icons/repeat_arrow.svg';
+import dotsIcon from 'icons/vertical_dots.svg';
 import useFetch from 'lib/hooks/useFetch';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
@@ -16,7 +17,6 @@ import FullscreenChartModal from './FullscreenChartModal';
 
 type Props = {
   id: string;
-  apiMethodURL: string;
   title: string;
   description: string;
   interval: StatsIntervalIds;
@@ -26,7 +26,7 @@ function formatDate(date: Date) {
   return date.toISOString().substring(0, 10);
 }
 
-const ChartWidget = ({ id, title, description, apiMethodURL, interval }: Props) => {
+const ChartWidget = ({ id, title, description, interval }: Props) => {
   const fetch = useFetch();
 
   const selectedInterval = STATS_INTERVALS[interval];
@@ -40,7 +40,7 @@ const ChartWidget = ({ id, title, description, apiMethodURL, interval }: Props)
   const menuButtonColor = useColorModeValue('black', 'white');
   const borderColor = useColorModeValue('gray.200', 'gray.600');
 
-  const url = `${ apiMethodURL }${ startDate ? `?from=${ startDate }&to=${ endDate }` : '' }`;
+  const url = `/node-api/stats/charts?name=${ id }${ startDate ? `&from=${ startDate }&to=${ endDate }` : '' }`;
 
   const { data, isLoading } = useQuery<unknown, unknown, Charts>(
     [ QueryKeys.charts, id, startDate ],
@@ -58,7 +58,7 @@ const ChartWidget = ({ id, title, description, apiMethodURL, interval }: Props)
   const showChartFullscreen = useCallback(() => {
     setIsFullscreen(true);
 
-    if (!document.fullscreenElement) {
+    if (!document.fullscreenElement && document.documentElement.requestFullscreen) {
       document.documentElement.requestFullscreen();
     }
   }, []);
@@ -91,7 +91,7 @@ const ChartWidget = ({ id, title, description, apiMethodURL, interval }: Props)
         >
           <Grid
             gridTemplateColumns="auto auto 36px"
-            gridColumnGap={ 4 }
+            gridColumnGap={ 2 }
           >
             <Heading
               mb={ 1 }
@@ -110,19 +110,22 @@ const ChartWidget = ({ id, title, description, apiMethodURL, interval }: Props)
               { description }
             </Text>
 
-            { !isZoomResetInitial && (
-              <Button
-                gridColumn={ 2 }
-                justifySelf="end"
-                alignSelf="top"
-                gridRow="1/3"
-                size="sm"
-                variant="outline"
-                onClick={ handleZoomResetClick }
-              >
-              Reset zoom
-              </Button>
-            ) }
+            <IconButton
+              hidden={ isZoomResetInitial }
+              aria-label="Reset zoom"
+              title="Reset zoom"
+              colorScheme="blue"
+              w={ 9 }
+              h={ 8 }
+              gridColumn={ 2 }
+              justifySelf="end"
+              alignSelf="top"
+              gridRow="1/3"
+              size="sm"
+              variant="ghost"
+              onClick={ handleZoomResetClick }
+              icon={ <Icon as={ repeatArrow } w={ 4 } h={ 4 } color="blue.700"/> }
+            />
 
             <Menu>
               <MenuButton
@@ -152,6 +155,7 @@ const ChartWidget = ({ id, title, description, apiMethodURL, interval }: Props)
             title={ title }
           />
         </Box>
+
         <FullscreenChartModal
           isOpen={ isFullscreen }
           items={ items }

ui/stats/ChartWidgetGraph.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useMemo } from 'react';
 
 import type { TimeChartItem } from 'ui/shared/chart/types';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import ChartArea from 'ui/shared/chart/ChartArea';
 import ChartAxis from 'ui/shared/chart/ChartAxis';
 import ChartGridLine from 'ui/shared/chart/ChartGridLine';
@@ -23,12 +24,13 @@ interface Props {
 const CHART_MARGIN = { bottom: 20, left: 52, right: 30, top: 10 };
 
 const ChartWidgetGraph = ({ items, onZoom, isZoomResetInitial, title }: Props) => {
+  const isMobile = useIsMobile();
   const ref = React.useRef<SVGSVGElement>(null);
-  const [ range, setRange ] = React.useState<[ number, number ]>([ 0, Infinity ]);
-  const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
-  const overlayRef = React.useRef<SVGRectElement>(null);
   const color = useToken('colors', 'blue.200');
+  const overlayRef = React.useRef<SVGRectElement>(null);
   const chartId = useMemo(() => `chart-${ crypto.randomUUID() }`, []);
+  const [ range, setRange ] = React.useState<[ number, number ]>([ 0, Infinity ]);
+  const { 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 ]);
@@ -52,9 +54,9 @@ const ChartWidgetGraph = ({ items, onZoom, isZoomResetInitial, title }: Props) =
   }, [ isZoomResetInitial ]);
 
   return (
-    <svg width={ width || '100%' } height={ height || '100%' } ref={ ref } cursor="pointer" id={ chartId }>
+    <svg width="100%" height="100%" ref={ ref } cursor="pointer" id={ chartId }>
 
-      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ width ? 1 : 0 }>
+      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ 1 }>
         <ChartGridLine
           type="horizontal"
           scale={ yScale }
@@ -93,7 +95,7 @@ const ChartWidgetGraph = ({ items, onZoom, isZoomResetInitial, title }: Props) =
             type="bottom"
             scale={ xScale }
             transform={ `translate(0, ${ innerHeight })` }
-            ticks={ 5 }
+            ticks={ isMobile ? 1 : 3 }
             anchorEl={ overlayRef.current }
             disableAnimation
           />

ui/stats/ChartWidgetSkeleton.tsx

@@ -5,7 +5,7 @@ const ChartWidgetSkeleton = () => {
   return (
     <Box
       height="235px"
-      padding={{ base: 3, md: 4 }}
+      paddingY={{ base: 3, md: 4 }}
     >
       <Skeleton w="75%" h="24px" mb={ 1 }/>
       <Skeleton w="50%" h="18px" mb={ 5 }/>

ui/stats/ChartsWidgetsList.tsx

@@ -39,7 +39,7 @@ const ChartsWidgetsList = ({ charts, interval }: Props) => {
 
                 <Grid
                   templateColumns={{
-                    sm: 'repeat(2, 1fr)',
+                    lg: 'repeat(2, 1fr)',
                   }}
                   gap={ 4 }
                 >
@@ -50,7 +50,6 @@ const ChartsWidgetsList = ({ charts, interval }: Props) => {
                     >
                       <ChartWidget
                         id={ chart.id }
-                        apiMethodURL={ chart.apiMethodURL }
                         title={ chart.title }
                         description={ chart.description }
                         interval={ interval }

ui/stats/FullscreenChartModal.tsx

@@ -74,7 +74,7 @@ const FullscreenChartModal = ({
         <ModalCloseButton/>
 
         <ModalBody
-          h="100%"
+          h="75%"
         >
           <ChartWidgetGraph
             items={ items }

ui/stats/NumberWidgetsList.tsx

@@ -17,7 +17,7 @@ const NumberWidgetsList = () => {
 
   const { data, isLoading } = useQuery<unknown, unknown, Stats>(
     [ QueryKeys.stats ],
-    async() => await fetch(`/node-api/stats`),
+    async() => await fetch(`/node-api/stats/counters`),
   );
 
   return (

ui/stats/StatsDropdownMenu.tsx

-import { Box, Button, Icon, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup } from '@chakra-ui/react';
+import { Box, Button, Icon, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, Text } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import eastMiniArrowIcon from 'icons/arrows/east-mini.svg';
@@ -32,8 +32,14 @@ export function StatsDropdownMenu<T extends string>({ items, selectedId, onSelec
           display="flex"
           alignItems="center"
         >
-          { selectedCategory?.title }
-          <Icon transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} as={ eastMiniArrowIcon } w={ 5 } h={ 5 }/>
+          <Text
+            whiteSpace="nowrap"
+            overflow="hidden"
+            textOverflow="ellipsis"
+          >
+            { selectedCategory?.title }
+          </Text>
+          <Icon transform="rotate(-90deg)" ml="auto" as={ eastMiniArrowIcon } w={ 5 } h={ 5 }/>
         </Box>
       </MenuButton>
 

ui/stats/StatsFilters.tsx

@@ -48,7 +48,7 @@ const StatsFilters = ({
                 "section interval"`,
         lg: `"input section interval"`,
       }}
-      gridTemplateColumns={{ lg: '1fr auto auto' }}
+      gridTemplateColumns={{ base: 'repeat(2, minmax(0, 1fr))', lg: '1fr auto auto' }}
     >
       <GridItem
         w="100%"

ui/stats/constants/charts-scheme.ts

@@ -9,7 +9,6 @@ export const statsChartsScheme: Array<StatsSection> = [
         id: 'new-blocks',
         title: 'New blocks',
         description: 'New blocks number per day',
-        apiMethodURL: '/node-api/stats/charts/blocks/new',
         visible: true,
       },
     ],

ui/tx/TxDetails.pw.tsx

@@ -26,7 +26,7 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await page.waitForResponse(API_URL),
+  await page.waitForResponse(API_URL);
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();

ui/tx/details/TxDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-const SkeletonRow = ({ w = '100%' }: { w?: string }) => (
-  <>
-    <GridItem display="flex" columnGap={ 2 } w={{ base: '50%', lg: 'auto' }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
-      <SkeletonCircle h={ 5 } w={ 5 }/>
-      <Skeleton flexGrow={ 1 } h={ 5 } borderRadius="full"/>
-    </GridItem>
-    <GridItem pl={{ base: 7, lg: 0 }}>
-      <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }}/>
-    </GridItem>
-  </>
-);
+import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
 const TxDetailsSkeleton = () => {
   const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
 
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
-      <SkeletonRow/>
-      <SkeletonRow w="20%"/>
-      <SkeletonRow w="50%"/>
-      <SkeletonRow/>
-      <SkeletonRow w="70%"/>
-      <SkeletonRow w="70%"/>
+      <DetailsSkeletonRow/>
+      <DetailsSkeletonRow w="20%"/>
+      <DetailsSkeletonRow w="50%"/>
+      <DetailsSkeletonRow/>
+      <DetailsSkeletonRow w="70%"/>
+      <DetailsSkeletonRow w="70%"/>
       { sectionGap }
-      <SkeletonRow w="40%"/>
-      <SkeletonRow w="40%"/>
-      <SkeletonRow w="40%"/>
-      <SkeletonRow w="40%"/>
-      <SkeletonRow w="40%"/>
+      <DetailsSkeletonRow w="40%"/>
+      <DetailsSkeletonRow w="40%"/>
+      <DetailsSkeletonRow w="40%"/>
+      <DetailsSkeletonRow w="40%"/>
+      <DetailsSkeletonRow w="40%"/>
       { sectionGap }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
         <Skeleton h={ 5 } borderRadius="full" w="100px"/>

ui/watchlist/AddressModal/AddressForm.tsx

@@ -4,14 +4,13 @@ import {
   Text,
   useColorModeValue,
 } from '@chakra-ui/react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { WatchlistErrors } from 'types/api/account';
 import type { TWatchlistItem } from 'types/client/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -29,9 +28,10 @@ const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721' ] as const;
 const TAG_MAX_LENGTH = 35;
 
 type Props = {
-  data?: TWatchlistItem;
-  onClose: () => void;
+  data?: Partial<TWatchlistItem>;
+  onSuccess: () => Promise<void>;
   setAlertVisible: (isAlertVisible: boolean) => void;
+  isAdd: boolean;
 }
 
 type Inputs = {
@@ -62,12 +62,12 @@ type Checkboxes = 'notification' |
 'notification_settings.ERC-721.outcoming' |
 'notification_settings.ERC-721.incoming';
 
-const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
+const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd }) => {
   const [ pending, setPending ] = useState(false);
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   let notificationsDefault = {} as Inputs['notification_settings'];
-  if (!data) {
+  if (!data?.notification_settings) {
     NOTIFICATIONS.forEach(n => notificationsDefault[n] = { incoming: true, outcoming: true });
   } else {
     notificationsDefault = data.notification_settings;
@@ -77,13 +77,12 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     defaultValues: {
       address: data?.address_hash || '',
       tag: data?.name || '',
-      notification: data ? data.notification_methods.email : true,
+      notification: data?.notification_methods ? data.notification_methods.email : true,
       notification_settings: notificationsDefault,
     },
     mode: 'onTouched',
   });
 
-  const queryClient = useQueryClient();
   const fetch = useFetch();
 
   function updateWatchlist(formData: Inputs) {
@@ -95,7 +94,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
         email: formData.notification,
       },
     };
-    if (data) {
+    if (!isAdd && data) {
       // edit address
       return fetch<TWatchlistItem, WatchlistErrors>(`/node-api/account/watchlist/${ data.id }`, { method: 'PUT', body });
 
@@ -106,11 +105,9 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   }
 
   const { mutate } = useMutation(updateWatchlist, {
-    onSuccess: () => {
-      queryClient.refetchQueries([ QueryKeys.watchlist ]).then(() => {
-        onClose();
-        setPending(false);
-      });
+    onSuccess: async() => {
+      await onSuccess();
+      setPending(false);
     },
     onError: (e: ErrorType<WatchlistErrors>) => {
       setPending(false);
@@ -193,7 +190,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           isLoading={ pending }
           disabled={ !isValid || !isDirty }
         >
-          { data ? 'Save changes' : 'Add address' }
+          { !isAdd ? 'Save changes' : 'Add address' }
         </Button>
       </Box>
     </form>

ui/watchlist/AddressModal/AddressModal.tsx

@@ -7,20 +7,22 @@ import FormModal from 'ui/shared/FormModal';
 import AddressForm from './AddressForm';
 
 type Props = {
+  isAdd: boolean;
   isOpen: boolean;
   onClose: () => void;
-  data?: TWatchlistItem;
+  onSuccess: () => Promise<void>;
+  data?: Partial<TWatchlistItem>;
 }
 
-const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
-  const title = data ? 'Edit watch list address' : 'New address to watch list';
-  const text = !data ? 'An email notification can be sent to you when an address on your watch list sends or receives any transactions.' : '';
+const AddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data, isAdd }) => {
+  const title = !isAdd ? 'Edit watch list address' : 'New address to watch list';
+  const text = isAdd ? 'An email notification can be sent to you when an address on your watch list sends or receives any transactions.' : '';
 
   const [ isAlertVisible, setAlertVisible ] = useState(false);
 
   const renderForm = useCallback(() => {
-    return <AddressForm data={ data } onClose={ onClose } setAlertVisible={ setAlertVisible }/>;
-  }, [ data, onClose ]);
+    return <AddressForm data={ data } onSuccess={ onSuccess } setAlertVisible={ setAlertVisible } isAdd={ isAdd }/>;
+  }, [ data, isAdd, onSuccess ]);
 
   return (
     <FormModal<TWatchlistItem>

ui/watchlist/DeleteAddressModal.tsx

 import { Text } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
-import type { TWatchlistItem, TWatchlist } from 'types/client/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { TWatchlistItem } from 'types/client/account';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -12,11 +10,11 @@ import DeleteModal from 'ui/shared/DeleteModal';
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  data: TWatchlistItem;
+  onSuccess: () => Promise<void>;
+  data: Pick<TWatchlistItem, 'address_hash' | 'id'>;
 }
 
-const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
-  const queryClient = useQueryClient();
+const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data }) => {
   const isMobile = useIsMobile();
   const fetch = useFetch();
 
@@ -24,12 +22,6 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
     return fetch(`/node-api/account/watchlist/${ data?.id }`, { method: 'DELETE' });
   }, [ data?.id, fetch ]);
 
-  const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ QueryKeys.watchlist ], (prevData: TWatchlist | undefined) => {
-      return prevData?.filter((item) => item.id !== data.id);
-    });
-  }, [ data, queryClient ]);
-
   const address = data?.address_hash;
 
   const renderModalContent = useCallback(() => {

yarn.lock

@@ -3541,6 +3541,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/qrcode@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@types/qrcode/-/qrcode-1.5.0.tgz#6a98fe9a9a7b2a9a3167b6dde17eff999eabe40b"
+  integrity sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/react-dom@18.0.5":
   version "18.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
@@ -4228,7 +4235,7 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@^5.3.1:
+camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@@ -4311,6 +4318,15 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -4836,6 +4852,11 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
 decimal.js@^10.4.1:
   version "10.4.2"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
@@ -4922,6 +4943,11 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
+dijkstrajs@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
+  integrity sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -5043,6 +5069,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+encode-utf8@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
+  integrity sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
+
 end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -5875,7 +5906,7 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.5:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -7719,6 +7750,11 @@ playwright@^1.28.0:
   dependencies:
     playwright-core "1.28.0"
 
+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 popmotion@11.0.3:
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
@@ -7840,6 +7876,16 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+qrcode@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.1.tgz#0103f97317409f7bc91772ef30793a54cd59f0cb"
+  integrity sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==
+  dependencies:
+    dijkstrajs "^1.0.1"
+    encode-utf8 "^1.0.3"
+    pngjs "^5.0.0"
+    yargs "^15.3.1"
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -8123,6 +8169,11 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
 
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -8305,7 +8356,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-set-blocking@~2.0.0:
+set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
@@ -9077,6 +9128,11 @@ which-collection@^1.0.1:
     is-weakmap "^2.0.1"
     is-weakset "^2.0.1"
 
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
+
 which-typed-array@^1.1.8:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
@@ -9159,6 +9215,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
@@ -9179,11 +9240,36 @@ yaml@^2.1.1:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.1.3.tgz#9b3a4c8aff9821b696275c79a8bee8399d945207"
   integrity sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==
 
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^21.0.1, yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
+yargs@^15.3.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
+
 yargs@^17.3.1:
   version "17.6.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.6.2.tgz#2e23f2944e976339a1ee00f18c77fedee8332541"