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

global.d.ts

+import type { MetaMaskInpageProvider } from '@metamask/providers';
+
+declare global {
+  interface Window {
+    ethereum: MetaMaskInpageProvider;
+  }
+}

lib/hooks/useQueryWithPages.ts

@@ -3,9 +3,9 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { pick, omit } from 'lodash';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
-import { animateScroll } from 'react-scroll';
+import { animateScroll, scroller } from 'react-scroll';
 
-import { PAGINATION_FIELDS } from 'types/api/pagination';
+import { PAGINATION_FIELDS, PAGINATION_FILTERS_FIELDS } from 'types/api/pagination';
 import type { PaginationParams, PaginatedResponse, PaginatedQueryKeys, PaginationFilters } from 'types/api/pagination';
 
 import useFetch from 'lib/hooks/useFetch';
@@ -16,9 +16,17 @@ interface Params<QueryName extends PaginatedQueryKeys> {
   queryIds?: Array<string>;
   filters?: PaginationFilters<QueryName>;
   options?: Omit<UseQueryOptions<unknown, unknown, PaginatedResponse<QueryName>>, 'queryKey' | 'queryFn'>;
+  scroll?: { elem: string; offset: number };
 }
 
-export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>({ queryName, filters, options, apiPath, queryIds }: Params<QueryName>) {
+export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>({
+  queryName,
+  filters,
+  options,
+  apiPath,
+  queryIds,
+  scroll,
+}: Params<QueryName>) {
   const paginationFields = PAGINATION_FIELDS[queryName];
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -31,6 +39,10 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
 
   const queryKey = [ queryName, ...(queryIds || []), { page, filters } ];
 
+  const scrollToTop = useCallback(() => {
+    scroll ? scroller.scrollTo(scroll.elem, { offset: scroll.offset }) : animateScroll.scrollToTop({ duration: 0 });
+  }, [ scroll ]);
+
   const queryResult = useQuery<unknown, unknown, PaginatedResponse<QueryName>>(
     queryKey,
     async() => {
@@ -65,10 +77,10 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
 
     router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true })
       .then(() => {
-        animateScroll.scrollToTop({ duration: 0 });
+        scrollToTop();
         setPage(prev => prev + 1);
       });
-  }, [ data?.next_page_params, page, pageParams.length, router ]);
+  }, [ data?.next_page_params, page, pageParams.length, router, scrollToTop ]);
 
   const onPrevPageClick = useCallback(() => {
     // returning to the first page
@@ -85,17 +97,18 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     router.query = nextPageQuery;
     router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true })
       .then(() => {
-        animateScroll.scrollToTop({ duration: 0 });
+        scrollToTop();
         setPage(prev => prev - 1);
         page === 2 && queryClient.removeQueries({ queryKey: [ queryName ] });
       });
-  }, [ router, page, paginationFields, pageParams, queryClient, queryName ]);
+  }, [ router, page, paginationFields, pageParams, queryClient, scrollToTop, queryName ]);
 
   const resetPage = useCallback(() => {
     queryClient.removeQueries({ queryKey: [ queryName ] });
 
     router.push({ pathname: router.pathname, query: omit(router.query, paginationFields, 'page') }, undefined, { shallow: true }).then(() => {
-      animateScroll.scrollToTop({ duration: 0 });
+      queryClient.removeQueries({ queryKey: [ queryName ] });
+      scrollToTop();
       setPage(1);
       setPageParams([ ]);
       canGoBackwards.current = true;
@@ -105,7 +118,30 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
         queryClient.removeQueries({ queryKey: [ queryName ], type: 'inactive' });
       }, 100);
     });
-  }, [ queryClient, queryName, router, paginationFields ]);
+  }, [ queryClient, queryName, router, paginationFields, scrollToTop ]);
+
+  const onFilterChange = useCallback((newFilters: PaginationFilters<QueryName> | undefined) => {
+    const newQuery = omit(router.query, PAGINATION_FIELDS[queryName], 'page', PAGINATION_FILTERS_FIELDS[queryName]);
+    if (newFilters) {
+      Object.entries(newFilters).forEach(([ key, value ]) => {
+        if (value) {
+          newQuery[key] = Array.isArray(value) ? value.join(',') : (value || '');
+        }
+      });
+    }
+    router.push(
+      {
+        pathname: router.pathname,
+        query: newQuery,
+      },
+      undefined,
+      { shallow: true },
+    ).then(() => {
+      setPage(1);
+      setPageParams([ ]);
+      scrollToTop();
+    });
+  }, [ queryName, router, scrollToTop, setPageParams, setPage ]);
 
   const hasPaginationParams = Object.keys(currPageParams).length > 0;
   const nextPageParams = data?.next_page_params;
@@ -135,5 +171,5 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     }, 0);
   }, []);
 
-  return { ...queryResult, pagination };
+  return { ...queryResult, pagination, onFilterChange };
 }

package.json

@@ -31,6 +31,7 @@
     "@chakra-ui/theme-tools": "^2.0.14",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@metamask/providers": "^10.2.1",
     "@sentry/nextjs": "^7.12.1",
     "@sentry/react": "^7.24.0",
     "@sentry/tracing": "^7.24.0",

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

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

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

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

tsconfig.json

@@ -16,6 +16,6 @@
     "incremental": true,
     "baseUrl": ".",
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", "decs.d.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "decs.d.ts", "global.d.ts"],
   "exclude": ["node_modules", "node_modules_linux"],
 }

types/api/address.ts

+import type { Transaction } from 'types/api/transaction';
+
 import type { AddressTag, WatchlistName } from './addressParams';
 import type { Block } from './block';
-import type { TokenInfo } from './tokenInfo';
+import type { TokenInfo, TokenType } from './tokenInfo';
+import type { TokenTransfer, TokenTransferPagination } from './tokenTransfer';
 
 export interface Address {
   block_number_balance_updated_at: number | null;
@@ -33,6 +36,31 @@ export interface AddressTokenBalance {
   value: string;
 }
 
+export interface AddressTransactionsResponse {
+  items: Array<Transaction>;
+  next_page_params: {
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+}
+
+type AddressFromToFilter = 'from' | 'to' | undefined;
+
+export type AddressTxsFilters = {
+  filter: AddressFromToFilter;
+}
+
+export interface AddressTokenTransferResponse {
+  items: Array<TokenTransfer>;
+  next_page_params: TokenTransferPagination | null;
+}
+
+export type AddressTokenTransferFilters = {
+  filter: AddressFromToFilter;
+  type: TokenType;
+}
+
 export interface AddressCoinBalanceHistoryItem {
   block_number: number;
   block_timestamp: string;

types/api/pagination.ts

-import type { AddressCoinBalanceHistoryResponse, AddressBlocksValidatedResponse } from 'types/api/address';
+import type {
+  AddressTransactionsResponse,
+  AddressTokenTransferResponse,
+  AddressTxsFilters,
+  AddressTokenTransferFilters,
+  AddressCoinBalanceHistoryResponse,
+  AddressBlocksValidatedResponse,
+} from 'types/api/address';
 import type { BlocksResponse, BlockTransactionsResponse, BlockFilters } from 'types/api/block';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponse } from 'types/api/log';
@@ -9,6 +16,8 @@ import { QueryKeys } from 'types/client/queries';
 import type { KeysOfObjectOrNull } from 'types/utils/KeysOfObjectOrNull';
 
 export type PaginatedQueryKeys =
+  QueryKeys.addressTxs |
+  QueryKeys.addressTokenTransfers |
   QueryKeys.blocks |
   QueryKeys.blocksReorgs |
   QueryKeys.blocksUncles |
@@ -22,23 +31,27 @@ export type PaginatedQueryKeys =
   QueryKeys.addressBlocksValidated;
 
 export type PaginatedResponse<Q extends PaginatedQueryKeys> =
-  Q extends (QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles) ? BlocksResponse :
-    Q extends QueryKeys.blockTxs ? BlockTransactionsResponse :
-      Q extends QueryKeys.txsValidate ? TransactionsResponseValidated :
-        Q extends QueryKeys.txsPending ? TransactionsResponsePending :
-          Q extends QueryKeys.txInternals ? InternalTransactionsResponse :
-            Q extends QueryKeys.txLogs ? LogsResponse :
-              Q extends QueryKeys.txTokenTransfers ? TokenTransferResponse :
-                Q extends QueryKeys.addressCoinBalanceHistory ? AddressCoinBalanceHistoryResponse :
-                  Q extends QueryKeys.addressBlocksValidated ? AddressBlocksValidatedResponse :
-                    never
+  Q extends QueryKeys.addressTxs ? AddressTransactionsResponse :
+    Q extends QueryKeys.addressTokenTransfers ? AddressTokenTransferResponse :
+      Q extends (QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles) ? BlocksResponse :
+        Q extends QueryKeys.blockTxs ? BlockTransactionsResponse :
+          Q extends QueryKeys.txsValidate ? TransactionsResponseValidated :
+            Q extends QueryKeys.txsPending ? TransactionsResponsePending :
+              Q extends QueryKeys.txInternals ? InternalTransactionsResponse :
+                Q extends QueryKeys.txLogs ? LogsResponse :
+                  Q extends QueryKeys.txTokenTransfers ? TokenTransferResponse :
+                    Q extends QueryKeys.addressCoinBalanceHistory ? AddressCoinBalanceHistoryResponse :
+                      Q extends QueryKeys.addressBlocksValidated ? AddressBlocksValidatedResponse :
+                        never
 
 export type PaginationFilters<Q extends PaginatedQueryKeys> =
-  Q extends QueryKeys.blocks ? BlockFilters :
-    Q extends QueryKeys.txsValidate ? TTxsFilters :
-      Q extends QueryKeys.txsPending ? TTxsFilters :
-        Q extends QueryKeys.txTokenTransfers ? TokenTransferFilters :
-          never
+  Q extends QueryKeys.addressTxs ? AddressTxsFilters :
+    Q extends QueryKeys.addressTokenTransfers ? AddressTokenTransferFilters :
+      Q extends QueryKeys.blocks ? BlockFilters :
+        Q extends QueryKeys.txsValidate ? TTxsFilters :
+          Q extends QueryKeys.txsPending ? TTxsFilters :
+            Q extends QueryKeys.txTokenTransfers ? TokenTransferFilters :
+              never
 
 export type PaginationParams<Q extends PaginatedQueryKeys> = PaginatedResponse<Q>['next_page_params'];
 
@@ -47,6 +60,8 @@ type PaginationFields = {
 }
 
 export const PAGINATION_FIELDS: PaginationFields = {
+  [QueryKeys.addressTxs]: [ 'block_number', 'items_count', 'index' ],
+  [QueryKeys.addressTokenTransfers]: [ 'block_number', 'items_count', 'index', 'transaction_hash' ],
   [QueryKeys.blocks]: [ 'block_number', 'items_count' ],
   [QueryKeys.blocksReorgs]: [ 'block_number', 'items_count' ],
   [QueryKeys.blocksUncles]: [ 'block_number', 'items_count' ],
@@ -59,3 +74,23 @@ export const PAGINATION_FIELDS: PaginationFields = {
   [QueryKeys.addressCoinBalanceHistory]: [ 'items_count', 'block_number' ],
   [QueryKeys.addressBlocksValidated]: [ 'items_count', 'block_number' ],
 };
+
+type PaginationFiltersFields = {
+  [K in PaginatedQueryKeys]: Array<KeysOfObjectOrNull<PaginationFilters<K>>>
+}
+
+export const PAGINATION_FILTERS_FIELDS: PaginationFiltersFields = {
+  [QueryKeys.addressTxs]: [ 'filter' ],
+  [QueryKeys.addressTokenTransfers]: [ 'filter', 'type' ],
+  [QueryKeys.addressCoinBalanceHistory]: [],
+  [QueryKeys.addressBlocksValidated]: [],
+  [QueryKeys.blocks]: [ 'type' ],
+  [QueryKeys.txsValidate]: [ 'filter', 'type', 'method' ],
+  [QueryKeys.txsPending]: [ 'filter', 'type', 'method' ],
+  [QueryKeys.txTokenTransfers]: [ 'type' ],
+  [QueryKeys.blocksReorgs]: [],
+  [QueryKeys.blocksUncles]: [],
+  [QueryKeys.blockTxs]: [],
+  [QueryKeys.txInternals]: [],
+  [QueryKeys.txLogs]: [],
+};

types/api/tokenTransfer.ts

@@ -38,14 +38,16 @@ interface TokenTransferBase {
   to: AddressParam;
 }
 
+export type TokenTransferPagination = {
+  block_number: number;
+  index: number;
+  items_count: number;
+  transaction_hash: string;
+}
+
 export interface TokenTransferResponse {
   items: Array<TokenTransfer>;
-  next_page_params: {
-    block_number: number;
-    index: number;
-    items_count: number;
-    transaction_hash: string;
-  } | null;
+  next_page_params: TokenTransferPagination | null;
 }
 
 export interface TokenTransferFilters {

types/api/transactionReward.ts

+import type { AddressParam } from './addressParams';
+
+export type TransactionReward = {
+  types: Array<string>;
+  emission_reward: string;
+  block_hash: string;
+  from: AddressParam;
+  to: AddressParam;
+}

types/client/queries.ts

@@ -26,5 +26,7 @@ export enum QueryKeys {
   addressTokenBalances='address-token-balances',
   addressCoinBalanceHistory='address-coin-balance-history',
   addressCoinBalanceHistoryByDay='address-coin-balance-history-by-day',
+  addressTxs='addressTxs',
+  addressTokenTransfers='addressTokenTransfers',
   addressBlocksValidated='address-blocks-validated',
 }

ui/address/AddressDetails.tsx

@@ -10,7 +10,6 @@ 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 useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
@@ -22,6 +21,7 @@ import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import ExternalLink from 'ui/shared/ExternalLink';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 
+import AddressAddToMetaMask from './details/AddressAddToMetaMask';
 import AddressBalance from './details/AddressBalance';
 import AddressDetailsSkeleton from './details/AddressDetailsSkeleton';
 import AddressFavoriteButton from './details/AddressFavoriteButton';
@@ -73,7 +73,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
           { isMobile ? <HashStringShorten hash={ addressQuery.data.hash }/> : addressQuery.data.hash }
         </Text>
         <CopyToClipboard text={ addressQuery.data.hash }/>
-        <Icon as={ metamaskIcon } boxSize={ 6 } ml={ 2 }/>
+        { addressQuery.data.is_contract && addressQuery.data.token && <AddressAddToMetaMask ml={ 2 } token={ addressQuery.data.token }/> }
         <AddressFavoriteButton hash={ addressQuery.data.hash } isAdded={ Boolean(addressQuery.data.watchlist_names?.length) } ml={ 3 }/>
         <AddressQrCode hash={ addressQuery.data.hash } ml={ 2 }/>
       </Flex>
@@ -89,7 +89,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
       <Grid
         mt={ 8 }
         columnGap={ 8 }
-        rowGap={{ base: 3, lg: 3 }}
+        rowGap={{ base: 1, lg: 3 }}
         templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
         <AddressNameInfo data={ addressQuery.data }/>
@@ -108,7 +108,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
           title="Tokens"
           hint="All tokens in the account and total value."
           alignSelf="center"
-          py="2px"
+          py={ 0 }
         >
           <TokenSelect/>
         </DetailsInfoItem>
@@ -143,7 +143,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
             title="Last balance update"
             hint="Block number in which the address was updated."
             alignSelf="center"
-            py={{ base: 0, lg: 1 }}
+            py={{ base: '2px', lg: 1 }}
           >
             <Link
               href={ link('block', { id: String(addressQuery.data.block_number_balance_updated_at) }) }

ui/address/AddressTxs.pw.tsx

+import { Box } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { base as txMock } from 'mocks/txs/tx';
+import TestApp from 'playwright/TestApp';
+
+import AddressTxs from './AddressTxs';
+
+const API_URL = '/node-api/addresses/0xd789a607CEac2f0E14867de4EB15b15C9FFB5859/transactions';
+
+const hooksConfig = {
+  router: {
+    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' },
+  },
+};
+
+test('address txs +@mobile +@desktop-xl', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({ items: [ txMock, txMock ], next_page_params: { block: 1 } }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Box h={{ base: '134px', lg: 6 }}/>
+      <AddressTxs/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.waitForResponse(API_URL),
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/AddressTxs.tsx

+import { useRouter } from 'next/router';
+import React from 'react';
+import { Element } from 'react-scroll';
+
+import { QueryKeys } from 'types/client/queries';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import ActionBar from 'ui/shared/ActionBar';
+import Pagination from 'ui/shared/Pagination';
+import TxsContent from 'ui/txs/TxsContent';
+
+import AddressTxsFilter from './AddressTxsFilter';
+
+const FILTER_VALUES = [ 'from', 'to' ] as const;
+
+type FilterType = typeof FILTER_VALUES[number];
+
+const getFilterValue = (val: string | Array<string> | undefined): FilterType | undefined => {
+  if (typeof val === 'string' && FILTER_VALUES.includes(val as FilterType)) {
+    return val as FilterType;
+  }
+};
+
+const SCROLL_ELEM = 'address-txs';
+const SCROLL_OFFSET = -100;
+
+const AddressTxs = () => {
+  const router = useRouter();
+
+  const isMobile = useIsMobile();
+
+  const [ filterValue, setFilterValue ] = React.useState<'from' | 'to' | undefined>(getFilterValue(router.query.filter));
+
+  const addressTxsQuery = useQueryWithPages({
+    apiPath: `/node-api/addresses/${ router.query.id }/transactions`,
+    queryName: QueryKeys.addressTxs,
+    filters: { filter: filterValue },
+    scroll: { elem: SCROLL_ELEM, offset: SCROLL_OFFSET },
+  });
+
+  const handleFilterChange = React.useCallback((val: string | Array<string>) => {
+
+    const newVal = getFilterValue(val);
+    setFilterValue(newVal);
+    addressTxsQuery.onFilterChange({ filter: newVal });
+  }, [ addressTxsQuery ]);
+
+  const isPaginatorHidden =
+      !addressTxsQuery.isLoading &&
+      !addressTxsQuery.isError &&
+      addressTxsQuery.pagination.page === 1 &&
+      !addressTxsQuery.pagination.hasNextPage;
+
+  const filter = (
+    <AddressTxsFilter
+      defaultFilter={ filterValue }
+      onFilterChange={ handleFilterChange }
+      isActive={ Boolean(filterValue) }
+    />
+  );
+
+  return (
+    <Element name={ SCROLL_ELEM }>
+      { !isMobile && (
+        <ActionBar mt={ -6 }>
+          { filter }
+          { !isPaginatorHidden && <Pagination { ...addressTxsQuery.pagination }/> }
+        </ActionBar>
+      ) }
+      <TxsContent
+        filter={ filter }
+        query={ addressTxsQuery }
+        showSocketInfo={ false }
+        currentAddress={ typeof router.query.id === 'string' ? router.query.id : undefined }
+      />
+    </Element>
+  );
+};
+
+export default AddressTxs;

ui/address/AddressTxsFilter.tsx

+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuOptionGroup,
+  MenuItemOption,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import FilterButton from 'ui/shared/FilterButton';
+
+interface Props {
+  isActive: boolean;
+  defaultFilter: 'from' | 'to' | undefined;
+  onFilterChange: (nextValue: string | Array<string>) => void;
+}
+
+const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive }: Props) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <Menu>
+      <MenuButton>
+        <FilterButton
+          isActive={ isOpen || isActive }
+          onClick={ onToggle }
+        />
+      </MenuButton>
+      <MenuList zIndex={ 2 }>
+        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
+          <MenuItemOption value="all">All</MenuItemOption>
+          <MenuItemOption value="from">From</MenuItemOption>
+          <MenuItemOption value="to">To</MenuItemOption>
+        </MenuOptionGroup>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default React.memo(AddressTxsFilter);

ui/address/details/AddressAddToMetaMask.tsx

+import { Box, chakra, Icon, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/tokenInfo';
+
+import metamaskIcon from 'icons/metamask.svg';
+import useToast from 'lib/hooks/useToast';
+
+interface Props {
+  className?: string;
+  token: TokenInfo;
+}
+
+const AddressAddToMetaMask = ({ className, token }: Props) => {
+  const toast = useToast();
+
+  const handleClick = React.useCallback(async() => {
+    try {
+      const wasAdded = await window.ethereum.request({
+        method: 'wallet_watchAsset',
+        params: {
+          type: 'ERC20', // Initially only supports ERC20, but eventually more!
+          options: {
+            address: token.address,
+            symbol: token.symbol,
+            decimals: Number(token.decimals) || 18,
+          },
+        },
+      });
+
+      if (wasAdded) {
+        toast({
+          position: 'top-right',
+          title: 'Success',
+          description: 'Successfully added token to MetaMask',
+          status: 'success',
+          variant: 'subtle',
+          isClosable: true,
+        });
+      }
+    } catch (error) {
+      toast({
+        position: 'top-right',
+        title: 'Error',
+        description: (error as Error)?.message || 'Something went wrong',
+        status: 'error',
+        variant: 'subtle',
+        isClosable: true,
+      });
+    }
+  }, [ toast, token ]);
+
+  if (token.type !== 'ERC-20' || !('ethereum' in window)) {
+    return null;
+  }
+
+  return (
+    <Tooltip label="Add token to MetaMask">
+      <Box className={ className } display="inline-flex" cursor="pointer" onClick={ handleClick }>
+        <Icon as={ metamaskIcon } boxSize={ 6 }/>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default React.memo(chakra(AddressAddToMetaMask));

ui/address/details/AddressDetailsSkeleton.tsx

@@ -8,7 +8,7 @@ const AddressDetailsSkeleton = () => {
     <Box>
       <Flex align="center">
         <SkeletonCircle boxSize={ 6 } flexShrink={ 0 }/>
-        <Skeleton h={ 6 } w="420px" ml={ 2 }/>
+        <Skeleton h={ 6 } w={{ base: '100px', lg: '420px' }} ml={ 2 }/>
         <Skeleton h={ 6 } w="24px" ml={ 2 } flexShrink={ 0 }/>
         <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>
         <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>

ui/address/tokenSelect/TokenSelect.tsx

-import { Box, Icon, IconButton, Skeleton, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, 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';
@@ -71,7 +71,7 @@ const TokenSelect = () => {
   }
 
   return (
-    <>
+    <Flex columnGap={ 3 } mt={{ base: '6px', lg: 0 }}>
       { isMobile ?
         <TokenSelectMobile data={ data } isLoading={ balancesIsFetching === 1 }/> :
         <TokenSelectDesktop data={ data } isLoading={ balancesIsFetching === 1 }/>
@@ -83,11 +83,10 @@ const TokenSelect = () => {
           size="sm"
           pl="6px"
           pr="6px"
-          ml={ 3 }
           icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
         />
       </Tooltip>
-    </>
+    </Flex>
   );
 };
 

ui/blocks/BlocksContent.tsx

@@ -82,10 +82,10 @@ const BlocksContent = ({ type, query }: Props) => {
     if (query.isLoading) {
       return (
         <>
-          <Show below="lg" key="skeleton-mobile">
+          <Show below="lg" key="skeleton-mobile" ssr={ false }>
             <BlocksSkeletonMobile/>
           </Show>
-          <Hide below="lg" key="skeleton-desktop">
+          <Hide below="lg" key="skeleton-desktop" ssr={ false }>
             <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
           </Hide>
         </>
@@ -103,8 +103,8 @@ const BlocksContent = ({ type, query }: Props) => {
     return (
       <>
         { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
-        <Show below="lg" key="content-mobile"><BlocksList data={ query.data.items }/></Show>
-        <Hide below="lg" key="content-desktop"><BlocksTable data={ query.data.items } top={ 80 } page={ 1 }/></Hide>
+        <Show below="lg" key="content-mobile" ssr={ false }><BlocksList data={ query.data.items }/></Show>
+        <Hide below="lg" key="content-desktop" ssr={ false }><BlocksTable data={ query.data.items } top={ 80 } page={ 1 }/></Hide>
       </>
     );
 
@@ -115,7 +115,7 @@ const BlocksContent = ({ type, query }: Props) => {
   return (
     <>
       { isMobile && !isPaginatorHidden && (
-        <ActionBar>
+        <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>
       ) }

ui/pages/Address.tsx

@@ -11,6 +11,7 @@ import useFetch from 'lib/hooks/useFetch';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
 import AddressCoinBalance from 'ui/address/AddressCoinBalance';
 import AddressDetails from 'ui/address/AddressDetails';
+import AddressTxs from 'ui/address/AddressTxs';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
@@ -34,7 +35,7 @@ const AddressPageContent = () => {
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
   const tabs: Array<RoutedTab> = [
-    { id: 'txs', title: 'Transactions', component: null },
+    { id: 'txs', title: 'Transactions', component: <AddressTxs/> },
     { id: 'token_transfers', title: 'Token transfers', component: null },
     { id: 'tokens', title: 'Tokens', component: null },
     { id: 'internal_txn', title: 'Internal txn', component: null },

ui/shared/InOutTag.tsx

@@ -2,16 +2,28 @@ import { Tag, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
-  baseAddress: string;
-  addressFrom: string;
+  isIn: boolean;
+  isOut: boolean;
   className?: string;
 }
 
-const InOutTag = ({ baseAddress, addressFrom, className }: Props) => {
-  const isOut = addressFrom === baseAddress;
+const InOutTag = ({ isIn, isOut, className }: Props) => {
+  if (!isIn && !isOut) {
+    return null;
+  }
+
   const colorScheme = isOut ? 'orange' : 'green';
 
-  return <Tag className={ className } colorScheme={ colorScheme }>{ isOut ? 'OUT' : 'IN' }</Tag>;
+  return (
+    <Tag
+      className={ className }
+      colorScheme={ colorScheme }
+      display="flex"
+      justifyContent="center"
+    >
+      { isOut ? 'OUT' : 'IN' }
+    </Tag>
+  );
 };
 
 export default React.memo(chakra(InOutTag));

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -53,7 +53,7 @@ const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAd
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
         </Address>
         { baseAddress ?
-          <InOutTag baseAddress={ baseAddress } addressFrom={ from.hash } w="50px" textAlign="center"/> :
+          <InOutTag isIn={ baseAddress === to.hash } isOut={ baseAddress === from.hash } w="50px" textAlign="center"/> :
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         }
         <Address width={ addressWidth }>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -59,7 +59,7 @@ const TokenTransferTableItem = ({ token, total, tx_hash: txHash, from, to, baseA
       </Td>
       { baseAddress && (
         <Td px={ 0 }>
-          <InOutTag baseAddress={ baseAddress } addressFrom={ from.hash } w="50px" textAlign="center" mt="3px"/>
+          <InOutTag isIn={ baseAddress === to.hash } isOut={ baseAddress === from.hash } w="50px" textAlign="center" mt="3px"/>
         </Td>
       ) }
       <Td>

ui/shared/chart/ChartSelectionX.tsx

@@ -18,10 +18,9 @@ const ChartSelectionX = ({ anchorEl, height, scale, data, onSelect }: Props) =>
   const borderColor = useToken('colors', 'blue.200');
 
   const ref = React.useRef(null);
-  const isPressed = React.useRef(false);
+  const isActive = React.useRef(false);
   const startX = React.useRef<number>();
   const endX = React.useRef<number>();
-  const startIndex = React.useRef<number>(0);
 
   const getIndexByX = React.useCallback((x: number) => {
     const xDate = scale.invert(x);
@@ -51,20 +50,33 @@ const ChartSelectionX = ({ anchorEl, height, scale, data, onSelect }: Props) =>
       .attr('width', Math.abs(diffX));
   }, []);
 
-  const handelMouseUp = React.useCallback(() => {
-    isPressed.current = false;
+  const handleSelect = React.useCallback((x0: number, x1: number) => {
+    const index0 = getIndexByX(x0);
+    const index1 = getIndexByX(x1);
+
+    if (Math.abs(index0 - index1) > SELECTION_THRESHOLD) {
+      onSelect([ Math.min(index0, index1), Math.max(index0, index1) ]);
+    }
+  }, [ getIndexByX, onSelect ]);
+
+  const cleanUp = React.useCallback(() => {
+    isActive.current = false;
     startX.current = undefined;
+    endX.current = undefined;
     d3.select(ref.current).attr('opacity', 0);
+  }, [ ]);
 
-    if (!endX.current) {
+  const handelMouseUp = React.useCallback(() => {
+    if (!isActive.current) {
       return;
     }
 
-    const index = getIndexByX(endX.current);
-    if (Math.abs(index - startIndex.current) > SELECTION_THRESHOLD) {
-      onSelect([ Math.min(index, startIndex.current), Math.max(index, startIndex.current) ]);
+    if (startX.current && endX.current) {
+      handleSelect(startX.current, endX.current);
     }
-  }, [ getIndexByX, onSelect ]);
+
+    cleanUp();
+  }, [ cleanUp, handleSelect ]);
 
   React.useEffect(() => {
     if (!anchorEl) {
@@ -76,20 +88,34 @@ const ChartSelectionX = ({ anchorEl, height, scale, data, onSelect }: Props) =>
     anchorD3
       .on('mousedown.selectionX', (event: MouseEvent) => {
         const [ x ] = d3.pointer(event, anchorEl);
-        isPressed.current = true;
+        isActive.current = true;
         startX.current = x;
-
-        const index = getIndexByX(x);
-        startIndex.current = index;
       })
-      .on('mouseup.selectionX', handelMouseUp)
       .on('mousemove.selectionX', (event: MouseEvent) => {
-        if (isPressed.current) {
+        if (isActive.current) {
           const [ x ] = d3.pointer(event, anchorEl);
           startX.current && drawSelection(startX.current, x);
           endX.current = x;
         }
-      });
+      })
+      .on('mouseup.selectionX', handelMouseUp)
+      .on('touchstart.selectionX', (event: TouchEvent) => {
+        const pointers = d3.pointers(event, anchorEl);
+        isActive.current = pointers.length === 2;
+      })
+      .on('touchmove.selectionX', (event: TouchEvent) => {
+        if (isActive.current) {
+          const pointers = d3.pointers(event, anchorEl);
+
+          if (pointers.length === 2 && Math.abs(pointers[0][0] - pointers[1][0]) > 5) {
+            drawSelection(pointers[0][0], pointers[1][0]);
+
+            startX.current = pointers[0][0];
+            endX.current = pointers[1][0];
+          }
+        }
+      })
+      .on('touchend.selectionX', handelMouseUp);
 
     d3.select('body').on('mouseup.selectionX', function(event) {
       const isOutside = startX.current !== undefined && event.target !== anchorD3.node();
@@ -99,10 +125,10 @@ const ChartSelectionX = ({ anchorEl, height, scale, data, onSelect }: Props) =>
     });
 
     return () => {
-      anchorD3.on('mousedown.selectionX mouseup.selectionX mousemove.selectionX', null);
-      d3.select('body').on('mouseup.selectionX', null);
+      anchorD3.on('.selectionX', null);
+      d3.select('body').on('.selectionX', null);
     };
-  }, [ anchorEl, drawSelection, getIndexByX, handelMouseUp ]);
+  }, [ anchorEl, cleanUp, drawSelection, getIndexByX, handelMouseUp, handleSelect ]);
 
   return (
     <g className="ChartSelectionX" ref={ ref } opacity={ 0 }>

ui/shared/chart/ChartTooltip.tsx

@@ -32,6 +32,8 @@ const ChartTooltip = ({ chartId, xScale, yScale, width, height, data, anchorEl,
   const bgColor = useToken('colors', 'blackAlpha.900');
 
   const ref = React.useRef(null);
+  const trackerId = React.useRef<number>();
+  const isVisible = React.useRef(false);
 
   const drawLine = React.useCallback(
     (x: number) => {
@@ -129,67 +131,78 @@ const ChartTooltip = ({ chartId, xScale, yScale, width, height, data, anchorEl,
   }, [ drawPoints, drawLine, drawContent ]);
 
   const showContent = React.useCallback(() => {
-    d3.select(ref.current).attr('opacity', 1);
-    d3.select(ref.current)
-      .selectAll('.ChartTooltip__point')
-      .attr('opacity', 1);
+    if (!isVisible.current) {
+      d3.select(ref.current).attr('opacity', 1);
+      d3.select(ref.current)
+        .selectAll('.ChartTooltip__point')
+        .attr('opacity', 1);
+      isVisible.current = true;
+    }
   }, []);
 
   const hideContent = React.useCallback(() => {
     d3.select(ref.current).attr('opacity', 0);
+    isVisible.current = false;
   }, []);
 
   const createPointerTracker = React.useCallback((event: PointerEvent, isSubsequentCall?: boolean) => {
-    let isShown = false;
     let isPressed = event.pointerType === 'mouse' && event.type === 'pointerdown' && !isSubsequentCall;
 
     if (isPressed) {
       hideContent();
     }
 
-    trackPointer(event, {
+    return trackPointer(event, {
       move: (pointer) => {
         if (!pointer.point || isPressed) {
           return;
         }
-
         draw(pointer);
-        if (!isShown) {
-          showContent();
-          isShown = true;
-        }
+        showContent();
       },
       out: () => {
         hideContent();
-        isShown = false;
+        trackerId.current = undefined;
       },
-      end: (tracker) => {
+      end: () => {
         hideContent();
-        const isOutside = tracker.sourceEvent?.offsetX && width && (tracker.sourceEvent.offsetX > width || tracker.sourceEvent.offsetX < 0);
-
-        if (!isOutside && isPressed) {
-          window.setTimeout(() => {
-            createPointerTracker(event, true);
-          }, 0);
-        }
-
-        isShown = false;
+        trackerId.current = undefined;
         isPressed = false;
       },
     });
-  }, [ draw, hideContent, showContent, width ]);
+  }, [ draw, hideContent, showContent ]);
 
   React.useEffect(() => {
     const anchorD3 = d3.select(anchorEl);
+    let isMultiTouch = false; // disabling creation of new tracker in multi touch mode
 
     anchorD3
-      .on('touchmove.tooltip', (event: PointerEvent) => event.preventDefault()) // prevent scrolling
+      .on('touchmove.tooltip', (event: TouchEvent) => event.preventDefault()) // prevent scrolling
+      .on(`touchstart.tooltip`, (event: TouchEvent) => {
+        isMultiTouch = event.touches.length > 1;
+      })
+      .on(`touchend.tooltip`, (event: TouchEvent) => {
+        if (isMultiTouch && event.touches.length === 0) {
+          isMultiTouch = false;
+        }
+      })
       .on('pointerenter.tooltip pointerdown.tooltip', (event: PointerEvent) => {
-        createPointerTracker(event);
+        if (!isMultiTouch) {
+          trackerId.current = createPointerTracker(event);
+        }
+      })
+      .on('pointermove.tooltip', (event: PointerEvent) => {
+        if (event.pointerType === 'mouse' && !isMultiTouch && trackerId.current === undefined) {
+          trackerId.current = createPointerTracker(event);
+        }
       });
 
     return () => {
       anchorD3.on('touchmove.tooltip pointerenter.tooltip pointerdown.tooltip', null);
+      trackerId.current && anchorD3.on(
+        [ 'pointerup', 'pointercancel', 'lostpointercapture', 'pointermove', 'pointerout' ].map((event) => `${ event }.${ trackerId.current }`).join(' '),
+        null,
+      );
     };
   }, [ anchorEl, createPointerTracker, draw, hideContent, showContent ]);
 

ui/shared/chart/utils/pointerTracker.tsx

@@ -14,7 +14,7 @@ export interface PointerOptions {
   end?: (tracker: Pointer) => void;
 }
 
-export function trackPointer(event: PointerEvent, { start, move, out, end }: PointerOptions) {
+export function trackPointer(event: PointerEvent, { start, move, out, end }: PointerOptions): number {
   const tracker: Pointer = {
     id: event.pointerId,
     point: null,
@@ -26,16 +26,27 @@ export function trackPointer(event: PointerEvent, { start, move, out, end }: Poi
   tracker.point = d3.pointer(event, target);
   target.setPointerCapture(id);
 
+  const untrack = (sourceEvent: PointerEvent) => {
+    tracker.sourceEvent = sourceEvent;
+    d3.select(target).on(`.${ id }`, null);
+    target.releasePointerCapture(id);
+    end?.(tracker);
+  };
+
   d3.select(target)
+    .on(`touchstart.${ id }`, (sourceEvent: PointerEvent) => {
+      const target = sourceEvent.target as Element;
+      const touches = d3.pointers(sourceEvent, target);
+
+      // disable current tracker when entering multi touch mode
+      touches.length > 1 && untrack(sourceEvent);
+    })
     .on(`pointerup.${ id } pointercancel.${ id } lostpointercapture.${ id }`, (sourceEvent: PointerEvent) => {
       if (sourceEvent.pointerId !== id) {
         return;
       }
 
-      tracker.sourceEvent = sourceEvent;
-      d3.select(target).on(`.${ id }`, null);
-      target.releasePointerCapture(id);
-      end?.(tracker);
+      untrack(sourceEvent);
     })
     .on(`pointermove.${ id }`, (sourceEvent) => {
       if (sourceEvent.pointerId !== id) {
@@ -57,5 +68,5 @@ export function trackPointer(event: PointerEvent, { start, move, out, end }: Poi
 
   start?.(tracker);
 
-  return [ 'pointerup', 'pointercancel', 'lostpointercapture', 'pointermove', 'pointerout' ].map((event) => `${ event }.${ id }`);
+  return id;
 }

ui/txs/TxsContent.tsx

@@ -24,9 +24,11 @@ type Props = {
   query: QueryResult;
   showBlockInfo?: boolean;
   showSocketInfo?: boolean;
+  currentAddress?: string;
+  filter?: React.ReactNode;
 }
 
-const TxsContent = ({ query, showBlockInfo = true, showSocketInfo = true }: Props) => {
+const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true, currentAddress }: Props) => {
   const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
   const isPaginatorHidden = !isLoading && !isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
   const isMobile = useIsMobile();
@@ -60,7 +62,7 @@ const TxsContent = ({ query, showBlockInfo = true, showSocketInfo = true }: Prop
                 { ({ content }) => <Box>{ content }</Box> }
               </TxsNewItemNotice>
             ) }
-            { txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash } showBlockInfo={ showBlockInfo }/>) }
+            { txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash } showBlockInfo={ showBlockInfo } currentAddress={ currentAddress }/>) }
           </Box>
         </Show>
         <Hide below="lg" ssr={ false }>
@@ -71,6 +73,7 @@ const TxsContent = ({ query, showBlockInfo = true, showSocketInfo = true }: Prop
             showBlockInfo={ showBlockInfo }
             showSocketInfo={ showSocketInfo }
             top={ isPaginatorHidden ? 0 : 80 }
+            currentAddress={ currentAddress }
           />
         </Hide>
       </>
@@ -86,6 +89,7 @@ const TxsContent = ({ query, showBlockInfo = true, showSocketInfo = true }: Prop
           setSorting={ setSortByValue }
           paginationProps={ query.pagination }
           showPagination={ !isPaginatorHidden }
+          filterComponent={ filter }
         />
       ) }
       { content }

ui/txs/TxsHeaderMobile.tsx

@@ -17,18 +17,14 @@ type Props = {
   paginationProps: PaginationProps;
   className?: string;
   showPagination?: boolean;
+  filterComponent?: React.ReactNode;
 }
 
-const TxsHeaderMobile = ({ sorting, setSorting, paginationProps, className, showPagination = true }: Props) => {
+const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps, className, showPagination = true }: Props) => {
   return (
     <ActionBar className={ className }>
       <HStack>
-        { /* api is not implemented */ }
-        { /* <TxsFilters
-          filters={ filters }
-          onFiltersChange={ setFilters }
-          appliedFiltersNum={ 0 }
-        /> */ }
+        { filterComponent }
         <TxsSorting
           isActive={ Boolean(sorting) }
           setSorting={ setSorting }

ui/txs/TxsListItem.tsx

@@ -24,17 +24,30 @@ import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import InOutTag from 'ui/shared/InOutTag';
 import TxStatus from 'ui/shared/TxStatus';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
 
-const TxsListItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: boolean}) => {
+type Props = {
+  tx: Transaction;
+  showBlockInfo: boolean;
+  currentAddress?: string;
+}
+
+const TAG_WIDTH = 48;
+const ARROW_WIDTH = 24;
+
+const TxsListItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
+  const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
+  const isIn = Boolean(currentAddress && currentAddress === tx.to?.hash);
+
   return (
     <>
       <Box width="100%" borderBottom="1px solid" borderColor={ borderColor } _first={{ borderTop: '1px solid', borderColor }}>
@@ -83,7 +96,7 @@ const TxsListItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: boo
           </Box>
         ) }
         <Flex alignItems="center" height={ 6 } mt={ 6 }>
-          <Address width="calc((100%-40px)/2)">
+          <Address width={ `calc((100%-${ currentAddress ? TAG_WIDTH : ARROW_WIDTH + 8 }px)/2)` }>
             <AddressIcon hash={ tx.from.hash }/>
             <AddressLink
               hash={ tx.from.hash }
@@ -92,12 +105,15 @@ const TxsListItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: boo
               ml={ 2 }
             />
           </Address>
-          <Icon
-            as={ rightArrowIcon }
-            boxSize={ 6 }
-            mx={ 2 }
-            color="gray.500"
-          />
+          { (isIn || isOut) ?
+            <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 }/> : (
+              <Icon
+                as={ rightArrowIcon }
+                boxSize={ 6 }
+                mx={ 2 }
+                color="gray.500"
+              />
+            ) }
           <Address width="calc((100%-40px)/2)">
             <AddressIcon hash={ dataTo.hash }/>
             <AddressLink

ui/txs/TxsTable.tsx

@@ -18,9 +18,10 @@ type Props = {
   top: number;
   showBlockInfo: boolean;
   showSocketInfo: boolean;
+  currentAddress?: string;
 }
 
-const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo }: Props) => {
+const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, currentAddress }: Props) => {
   return (
     <Table variant="simple" minWidth="950px" size="xs">
       <TheadSticky top={ top }>
@@ -31,7 +32,7 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo }: Pr
           <Th width="15%">Method</Th>
           { showBlockInfo && <Th width="11%">Block</Th> }
           <Th width={{ xl: '128px', base: '66px' }}>From</Th>
-          <Th width={{ xl: '36px', base: '0' }}></Th>
+          <Th width={{ xl: currentAddress ? '48px' : '36px', base: '0' }}></Th>
           <Th width={{ xl: '128px', base: '66px' }}>To</Th>
           <Th width="18%" isNumeric>
             <Link onClick={ sort('val') } display="flex" justifyContent="end">
@@ -60,6 +61,7 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo }: Pr
             key={ item.hash }
             tx={ item }
             showBlockInfo={ showBlockInfo }
+            currentAddress={ currentAddress }
           />
         )) }
       </Tbody>

ui/txs/TxsTableItem.tsx

@@ -28,13 +28,23 @@ import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CurrencyValue from 'ui/shared/CurrencyValue';
+import InOutTag from 'ui/shared/InOutTag';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 import TxStatus from 'ui/shared/TxStatus';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
 import TxType from './TxType';
 
-const TxsTableItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: boolean }) => {
+type Props = {
+  tx: Transaction;
+  showBlockInfo: boolean;
+  currentAddress?: string;
+}
+
+const TxsTableItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
+  const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
+  const isIn = Boolean(currentAddress && currentAddress === tx.to?.hash);
+
   const addressFrom = (
     <Address>
       <Tooltip label={ tx.from.implementation_name }>
@@ -110,8 +120,11 @@ const TxsTableItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: bo
         <Td>
           { addressFrom }
         </Td>
-        <Td>
-          <Icon as={ rightArrowIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+        <Td px={ 0 }>
+          { (isIn || isOut) ?
+            <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 }/> :
+            <Icon as={ rightArrowIcon } boxSize={ 6 } mx="6px" color="gray.500"/>
+          }
         </Td>
         <Td>
           { addressTo }
@@ -121,14 +134,17 @@ const TxsTableItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: bo
         <Td colSpan={ 3 }>
           <Box>
             { addressFrom }
-            <Icon
-              as={ rightArrowIcon }
-              boxSize={ 6 }
-              mt={ 2 }
-              mb={ 1 }
-              color="gray.500"
-              transform="rotate(90deg)"
-            />
+            { (isIn || isOut) ?
+              <InOutTag isIn={ isIn } isOut={ isOut } width="48px" my={ 2 }/> : (
+                <Icon
+                  as={ rightArrowIcon }
+                  boxSize={ 6 }
+                  mt={ 2 }
+                  mb={ 1 }
+                  color="gray.500"
+                  transform="rotate(90deg)"
+                />
+              ) }
             { addressTo }
           </Box>
         </Td>

yarn.lock

@@ -2604,6 +2604,38 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@metamask/object-multiplex@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@metamask/object-multiplex/-/object-multiplex-1.2.0.tgz#38fc15c142f61939391e1b9a8eed679696c7e4f4"
+  integrity sha512-hksV602d3NWE2Q30Mf2Np1WfVKaGqfJRy9vpHAmelbaD0OkDt06/0KQkRR6UVYdMbTbkuEu8xN5JDUU80inGwQ==
+  dependencies:
+    end-of-stream "^1.4.4"
+    once "^1.4.0"
+    readable-stream "^2.3.3"
+
+"@metamask/providers@^10.2.1":
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-10.2.1.tgz#61304940adeccc7421dcda30ffd1d834273cc77b"
+  integrity sha512-p2TXw2a1Nb8czntDGfeIYQnk4LLVbd5vlcb3GY//lylYlKdSqp+uUTegCvxiFblRDOT68jsY8Ib1VEEzVUOolA==
+  dependencies:
+    "@metamask/object-multiplex" "^1.1.0"
+    "@metamask/safe-event-emitter" "^2.0.0"
+    "@types/chrome" "^0.0.136"
+    detect-browser "^5.2.0"
+    eth-rpc-errors "^4.0.2"
+    extension-port-stream "^2.0.1"
+    fast-deep-equal "^2.0.1"
+    is-stream "^2.0.0"
+    json-rpc-engine "^6.1.0"
+    json-rpc-middleware-stream "^4.2.1"
+    pump "^3.0.0"
+    webextension-polyfill-ts "^0.25.0"
+
+"@metamask/safe-event-emitter@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"
+  integrity sha512-/kSXhY692qiV1MXu6EeOZvg5nECLclxNXcKCxJ3cXQgYuRymRHpdx/t7JXfsK+JLjwA1e1c1/SBrlQYpusC29Q==
+
 "@motionone/animation@^10.12.0":
   version "10.14.0"
   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.14.0.tgz#2f2a3517183bb58d82e389aac777fe0850079de6"
@@ -3226,6 +3258,14 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/chrome@^0.0.136":
+  version "0.0.136"
+  resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.136.tgz#7c011b9f997b0156f25a140188a0c5689d3f368f"
+  integrity sha512-XDEiRhLkMd+SB7Iw3ZUIj/fov3wLd4HyTdLltVszkgl1dBfc3Rb7oPMVZ2Mz2TLqnF7Ow+StbR8E7r9lqpb4DA==
+  dependencies:
+    "@types/filesystem" "*"
+    "@types/har-format" "*"
+
 "@types/d3-array@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.3.tgz#87d990bf504d14ad6b16766979d04e943c046dac"
@@ -3441,6 +3481,18 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
   integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
+"@types/filesystem@*":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.32.tgz#307df7cc084a2293c3c1a31151b178063e0a8edf"
+  integrity sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==
+  dependencies:
+    "@types/filewriter" "*"
+
+"@types/filewriter@*":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.29.tgz#a48795ecadf957f6c0d10e0c34af86c098fa5bee"
+  integrity sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==
+
 "@types/geojson@*":
   version "7946.0.10"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
@@ -3453,6 +3505,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/har-format@*":
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/@types/har-format/-/har-format-1.2.10.tgz#7b4e1e0ada4d17684ac3b05d601a4871cfab11fc"
+  integrity sha512-o0J30wqycjF5miWDKYKKzzOU1ZTLuA42HZ4HE7/zqTOc/jTLdQ5NhYWvsRQo45Nfi1KHoRdNhteSI4BAxTF1Pg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -4923,6 +4980,11 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
 
+detect-browser@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
+  integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -5074,7 +5136,7 @@ encode-utf8@^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:
+end-of-stream@^1.1.0, end-of-stream@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
@@ -5584,6 +5646,13 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eth-rpc-errors@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/eth-rpc-errors/-/eth-rpc-errors-4.0.3.tgz#6ddb6190a4bf360afda82790bb7d9d5e724f423a"
+  integrity sha512-Z3ymjopaoft7JDoxZcEb3pwdGh7yiYMhOwm2doUt6ASXlMavpNlK6Cre0+IMl2VSGyEU9rkiperQhp5iRxn5Pg==
+  dependencies:
+    fast-safe-stringify "^2.0.6"
+
 ethers@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.1.tgz#48c83a44900b5f006eb2f65d3ba6277047fd4f33"
@@ -5676,11 +5745,23 @@ expect@^29.0.0, expect@^29.3.1:
     jest-message-util "^29.3.1"
     jest-util "^29.3.1"
 
+extension-port-stream@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extension-port-stream/-/extension-port-stream-2.0.1.tgz#d374820c581418c2275d3c4439ade0b82c4cfac6"
+  integrity sha512-ltrv4Dh/979I04+D4Te6TFygfRSOc5EBzzlHRldWMS8v73V80qWluxH88hqF0qyUsBXTb8NmzlmSipcre6a+rg==
+  dependencies:
+    webextension-polyfill-ts "^0.22.0"
+
 fast-copy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/fast-copy/-/fast-copy-3.0.0.tgz#875ebf33b13948ae012b6e51d33da5e6e7571ab8"
   integrity sha512-4HzS+9pQ5Yxtv13Lhs1Z1unMXamBdn5nA4bEi1abYpDNSpSp7ODYQ1KPMF6nTatfEzgH6/zPvXKU1zvHiUjWlA==
 
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  integrity sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -5712,7 +5793,7 @@ fast-redact@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.1.2.tgz#d58e69e9084ce9fa4c1a6fa98a3e1ecf5d7839aa"
   integrity sha512-+0em+Iya9fKGfEQGcd62Yv6onjBmmhV1uh86XVfOU8VwAe6kaFdQCWI9s0/Nnugx5Vd9tdbZ7e6gE2tR9dzXdw==
 
-fast-safe-stringify@^2.1.1:
+fast-safe-stringify@^2.0.6, fast-safe-stringify@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
   integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
@@ -6976,6 +7057,22 @@ json-parse-even-better-errors@^2.3.0:
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
+json-rpc-engine@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-6.1.0.tgz#bf5ff7d029e1c1bf20cb6c0e9f348dcd8be5a393"
+  integrity sha512-NEdLrtrq1jUZyfjkr9OCz9EzCNhnRyWtt1PAnvnhwy6e8XETS0Dtc+ZNCO2gvuAoKsIn2+vCSowXTYE4CkgnAQ==
+  dependencies:
+    "@metamask/safe-event-emitter" "^2.0.0"
+    eth-rpc-errors "^4.0.2"
+
+json-rpc-middleware-stream@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/json-rpc-middleware-stream/-/json-rpc-middleware-stream-4.2.1.tgz#e5cb8795ebfd7503c6ceaa43daaf065687cc2f22"
+  integrity sha512-6QKayke/8lg0nTjOpRCq4JCgRx7bVybldmloIfY21HSDV0GUevcV9i8DJNvuKTJx4KR9EDIf6HTStAnEovGUvA==
+  dependencies:
+    "@metamask/safe-event-emitter" "^2.0.0"
+    readable-stream "^2.3.3"
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -8021,7 +8118,7 @@ react@18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-readable-stream@^2.0.6:
+readable-stream@^2.0.6, readable-stream@^2.3.3:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -9069,6 +9166,25 @@ web-streams-polyfill@^3.0.3:
   resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
   integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
 
+webextension-polyfill-ts@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.22.0.tgz#86cfd7bab4d9d779d98c8340983f4b691b2343f3"
+  integrity sha512-3P33ClMwZ/qiAT7UH1ROrkRC1KM78umlnPpRhdC/292UyoTTW9NcjJEqDsv83HbibcTB6qCtpVeuB2q2/oniHQ==
+  dependencies:
+    webextension-polyfill "^0.7.0"
+
+webextension-polyfill-ts@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.25.0.tgz#fff041626365dbd0e29c40b197e989a55ec221ca"
+  integrity sha512-ikQhwwHYkpBu00pFaUzIKY26I6L87DeRI+Q6jBT1daZUNuu8dSrg5U9l/ZbqdaQ1M/TTSPKeAa3kolP5liuedw==
+  dependencies:
+    webextension-polyfill "^0.7.0"
+
+webextension-polyfill@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.7.0.tgz#0df1120ff0266056319ce1a622b09ad8d4a56505"
+  integrity sha512-su48BkMLxqzTTvPSE1eWxKToPS2Tv5DLGxKexLEVpwFd6Po6N8hhSLIvG6acPAg7qERoEaDL+Y5HQJeJeml5Aw==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"