Skip to content

F
frontend
Commit 45591ba9 authored by tom's avatar tom
Browse files
Options

Merge branch 'main' of github.com:blockscout/frontend into search-bar

parents 9e9955b1 bf706c90
Show whitespace changes
Inline Side-by-side
Showing with 418 additions and 205 deletions
icons/token-placeholder.svg 0 → 100644
View file @ 45591ba9
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.224 8.076V6.048h9.557v2.028H13.22v9.608h-2.432V8.076H7.224Z" fill="currentColor"/>
</svg>
lib/api/resources.ts
View file @ 45591ba9
......@@ -17,7 +17,7 @@ import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/ch
import type { IndexingStatus } from 'types/api/indexingStatus';
import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
import type { JsonRpcUrlResponse } from 'types/api/jsonRpcUrl';
import type { LogsResponse } from 'types/api/log';
import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
import type { RawTracesResponse } from 'types/api/rawTrace';
import type { SearchResult, SearchResultFilters } from 'types/api/search';
import type { Stats, Charts, HomeStats } from 'types/api/stats';
......@@ -157,6 +157,11 @@ export const RESOURCES = {
address_coin_balance_chart: {
path: '/api/v2/addresses/:id/coin-balance-history-by-day',
},
address_logs: {
path: '/api/v2/addresses/:id/logs',
paginationFields: [ 'items_count' as const, 'transaction_index' as const, 'index' as const, 'block_number' as const ],
filterFields: [ ],
},
// HOMEPAGE
homepage_stats: {
......@@ -230,6 +235,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
'txs_validated' | 'txs_pending' |
'tx_internal_txs' | 'tx_logs' | 'tx_token_transfers' |
'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
'address_logs' |
'search';
export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
......@@ -258,7 +264,7 @@ Q extends 'txs_validated' ? TransactionsResponseValidated :
Q extends 'txs_pending' ? TransactionsResponsePending :
Q extends 'tx' ? Transaction :
Q extends 'tx_internal_txs' ? InternalTransactionsResponse :
Q extends 'tx_logs' ? LogsResponse :
Q extends 'tx_logs' ? LogsResponseTx :
Q extends 'tx_token_transfers' ? TokenTransferResponse :
Q extends 'tx_raw_trace' ? RawTracesResponse :
Q extends 'address' ? Address :
......@@ -270,6 +276,7 @@ Q extends 'address_token_transfers' ? AddressTokenTransferResponse :
Q extends 'address_blocks_validated' ? AddressBlocksValidatedResponse :
Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
Q extends 'address_logs' ? LogsResponseAddress :
Q extends 'config_json_rpc' ? JsonRpcUrlResponse :
Q extends 'search' ? SearchResult :
never;
......
lib/date/dayjs.ts
View file @ 45591ba9
......@@ -17,7 +17,7 @@ const relativeTimeConfig = {
{ l: 'dd', r: 29, d: 'day' },
{ l: 'M', r: 1 },
{ l: 'MM', r: 11, d: 'month' },
{ l: 'y' },
{ l: 'y', r: 17 },
{ l: 'yy', d: 'year' },
],
};
......
lib/formatNumberToMetricPrefix.ts 0 → 100644
View file @ 45591ba9
export default function formatNumberToMetricPrefix(number: number) {
return Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 3,
}).format(number);
}
pages/stats.tsx
View file @ 45591ba9
......@@ -9,7 +9,7 @@ import Stats from '../ui/pages/Stats';
const StatsPage: NextPage = () => {
return (
<>
<Head><title>{ appConfig.network.name } Stats</title></Head>
<Head><title>{ appConfig.network.name } stats</title></Head>
<Stats/>
</>
);
......
types/api/log.ts
View file @ 45591ba9
......@@ -9,7 +9,7 @@ export interface Log {
decoded: DecodedInput | null;
}
export interface LogsResponse {
export interface LogsResponseTx {
items: Array<Log>;
next_page_params: {
index: number;
......@@ -17,3 +17,13 @@ export interface LogsResponse {
transaction_hash: string;
};
}
export interface LogsResponseAddress {
items: Array<Log>;
next_page_params: {
index: number;
items_count: number;
transaction_index: number;
block_number: number;
};
}
types/client/stats.ts
View file @ 45591ba9
......@@ -4,6 +4,7 @@ export enum StatsSectionId {
'all',
'accounts',
'blocks',
'tokens',
'transactions',
'gas',
}
......@@ -19,7 +20,7 @@ export enum StatsIntervalId {
}
export type StatsChart = {
id: string;
apiId: string;
title: string;
description: string;
}
ui/address/AddressBlocksValidated.tsx
View file @ 45591ba9
import { Box, Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import type { UseQueryResult } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import React from 'react';
import type { SocketMessage } from 'lib/socket/types';
import type { Address, AddressBlocksValidatedResponse } from 'types/api/address';
import type { AddressBlocksValidatedResponse } from 'types/api/address';
import appConfig from 'configs/app/config';
import { getResourceKey } from 'lib/api/useApiQuery';
......@@ -22,20 +22,15 @@ import { default as Thead } from 'ui/shared/TheadSticky';
import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
interface Props {
addressQuery: UseQueryResult<Address>;
}
const AddressBlocksValidated = ({ addressQuery }: Props) => {
const AddressBlocksValidated = () => {
const [ socketAlert, setSocketAlert ] = React.useState(false);
const queryClient = useQueryClient();
const router = useRouter();
const addressHash = String(router.query?.id);
const query = useQueryWithPages({
resourceName: 'address_blocks_validated',
pathParams: { id: addressQuery.data?.hash },
options: {
enabled: Boolean(addressQuery.data),
},
pathParams: { id: addressHash },
});
const handleSocketError = React.useCallback(() => {
......@@ -46,7 +41,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
setSocketAlert(false);
queryClient.setQueryData(
getResourceKey('address_blocks_validated', { pathParams: { id: addressQuery.data?.hash } }),
getResourceKey('address_blocks_validated', { pathParams: { id: addressHash } }),
(prevData: AddressBlocksValidatedResponse | undefined) => {
if (!prevData) {
return;
......@@ -57,13 +52,13 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
items: [ payload.block, ...prevData.items ],
};
});
}, [ addressQuery.data?.hash, queryClient ]);
}, [ addressHash, queryClient ]);
const channel = useSocketChannel({
topic: `blocks:${ addressQuery.data?.hash.toLowerCase() }`,
topic: `blocks:${ addressHash.toLowerCase() }`,
onSocketClose: handleSocketError,
onSocketError: handleSocketError,
isDisabled: addressQuery.isLoading || addressQuery.isError || !addressQuery.data.hash || query.pagination.page !== 1,
isDisabled: !addressHash || query.pagination.page !== 1,
});
useSocketMessage({
channel,
......
ui/address/AddressCoinBalance.tsx
View file @ 45591ba9
import { useQueryClient } from '@tanstack/react-query';
import type { UseQueryResult } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import React from 'react';
import type { SocketMessage } from 'lib/socket/types';
import type { Address, AddressCoinBalanceHistoryResponse } from 'types/api/address';
import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
import { getResourceKey } from 'lib/api/useApiQuery';
import useQueryWithPages from 'lib/hooks/useQueryWithPages';
......@@ -14,20 +14,15 @@ import SocketAlert from 'ui/shared/SocketAlert';
import AddressCoinBalanceChart from './coinBalance/AddressCoinBalanceChart';
import AddressCoinBalanceHistory from './coinBalance/AddressCoinBalanceHistory';
interface Props {
addressQuery: UseQueryResult<Address>;
}
const AddressCoinBalance = ({ addressQuery }: Props) => {
const AddressCoinBalance = () => {
const [ socketAlert, setSocketAlert ] = React.useState(false);
const queryClient = useQueryClient();
const router = useRouter();
const addressHash = String(router.query?.id);
const coinBalanceQuery = useQueryWithPages({
resourceName: 'address_coin_balance',
pathParams: { id: addressQuery.data?.hash },
options: {
enabled: Boolean(addressQuery.data),
},
pathParams: { id: addressHash },
});
const handleSocketError = React.useCallback(() => {
......@@ -38,7 +33,7 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
setSocketAlert(false);
queryClient.setQueryData(
getResourceKey('address_coin_balance', { pathParams: { id: addressQuery.data?.hash } }),
getResourceKey('address_coin_balance', { pathParams: { id: addressHash } }),
(prevData: AddressCoinBalanceHistoryResponse | undefined) => {
if (!prevData) {
return;
......@@ -52,13 +47,13 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
],
};
});
}, [ addressQuery.data?.hash, queryClient ]);
}, [ addressHash, queryClient ]);
const channel = useSocketChannel({
topic: `addresses:${ addressQuery.data?.hash.toLowerCase() }`,
topic: `addresses:${ addressHash.toLowerCase() }`,
onSocketClose: handleSocketError,
onSocketError: handleSocketError,
isDisabled: addressQuery.isLoading || addressQuery.isError || !addressQuery.data.hash || coinBalanceQuery.pagination.page !== 1,
isDisabled: !addressHash || coinBalanceQuery.pagination.page !== 1,
});
useSocketMessage({
channel,
......@@ -69,7 +64,7 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
return (
<>
{ socketAlert && <SocketAlert mb={ 6 }/> }
<AddressCoinBalanceChart addressQuery={ addressQuery }/>
<AddressCoinBalanceChart addressHash={ addressHash }/>
<AddressCoinBalanceHistory query={ coinBalanceQuery }/>
</>
);
......
ui/address/AddressDetails.tsx
View file @ 45591ba9
......@@ -98,7 +98,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
>
<AddressLink hash={ addressQuery.data.creator_address_hash } truncation="constant"/>
<Text whiteSpace="pre"> at </Text>
<AddressLink hash={ addressQuery.data.creation_tx_hash } truncation="constant"/>
<AddressLink hash={ addressQuery.data.creation_tx_hash } type="transaction" truncation="constant"/>
</DetailsInfoItem>
) }
<AddressBalance data={ addressQuery.data }/>
......
ui/address/coinBalance/AddressCoinBalanceChart.tsx
View file @ 45591ba9
import type { UseQueryResult } from '@tanstack/react-query';
import BigNumber from 'bignumber.js';
import React from 'react';
import type { Address } from 'types/api/address';
import appConfig from 'configs/app/config';
import useApiQuery from 'lib/api/useApiQuery';
import ChartWidget from 'ui/shared/chart/ChartWidget';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
interface Props {
addressQuery: UseQueryResult<Address>;
addressHash: string;
}
const AddressCoinBalanceChart = ({ addressQuery }: Props) => {
const AddressCoinBalanceChart = ({ addressHash }: Props) => {
const { data, isLoading, isError } = useApiQuery('address_coin_balance_chart', {
pathParams: { id: addressQuery.data?.hash },
queryOptions: { enabled: Boolean(addressQuery.data?.hash) },
pathParams: { id: addressHash },
});
const items = React.useMemo(() => data?.map(({ date, value }) => ({
......@@ -23,12 +20,16 @@ const AddressCoinBalanceChart = ({ addressQuery }: Props) => {
value: BigNumber(value).div(10 ** appConfig.network.currency.decimals).toNumber(),
})), [ data ]);
if (isError) {
return <DataFetchAlert/>;
}
return (
<ChartWidget
chartHeight="200px"
title="Balances"
items={ items }
isLoading={ isLoading || isError }
isLoading={ isLoading }
/>
);
};
......
ui/address/logs/AddressLogs.tsx 0 → 100644
View file @ 45591ba9
import { Box } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { Element } from 'react-scroll';
import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import LogItem from 'ui/shared/logs/LogItem';
import LogSkeleton from 'ui/shared/logs/LogSkeleton';
import Pagination from 'ui/shared/Pagination';
const SCROLL_PARAMS = {
elem: 'address-logs',
offset: -100,
};
const AddressLogs = () => {
const router = useRouter();
const addressHash = String(router.query?.id);
const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
resourceName: 'address_logs',
pathParams: { id: addressHash },
scroll: SCROLL_PARAMS,
});
if (isError) {
return <DataFetchAlert/>;
}
const bar = isPaginationVisible ? (
<ActionBar mt={ -6 }>
<Pagination ml="auto" { ...pagination }/>
</ActionBar>
) : null;
if (isLoading) {
return (
<Box>
{ bar }
<LogSkeleton/>
<LogSkeleton/>
</Box>
);
}
if (data.items.length === 0) {
return <span>There are no logs for this address.</span>;
}
return (
<Element name={ SCROLL_PARAMS.elem }>
{ bar }
{ data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) }
</Element>
);
};
export default AddressLogs;
ui/home/indicators/ChainIndicators.pw.tsx
View file @ 45591ba9
......@@ -26,7 +26,6 @@ test('daily txs chart +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, p
<ChainIndicators/>
</TestApp>,
);
await page.waitForResponse(STATS_API_URL),
await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
await expect(component).toHaveScreenshot();
......
ui/pages/Address.tsx
View file @ 45591ba9
import { Flex, Tag } from '@chakra-ui/react';
import { Flex, Skeleton, Tag } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
import useApiQuery from 'lib/api/useApiQuery';
import notEmpty from 'lib/notEmpty';
import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
import AddressCoinBalance from 'ui/address/AddressCoinBalance';
import AddressDetails from 'ui/address/AddressDetails';
import AddressInternalTxs from 'ui/address/AddressInternalTxs';
import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
import AddressTxs from 'ui/address/AddressTxs';
import AddressLogs from 'ui/address/logs/AddressLogs';
import TextAd from 'ui/shared/ad/TextAd';
import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle';
import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
const AddressPageContent = () => {
const router = useRouter();
......@@ -30,28 +33,37 @@ const AddressPageContent = () => {
...(addressQuery.data?.watchlist_names || []),
].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
const tabs: Array<RoutedTab> = [
const isContract = addressQuery.data?.is_contract;
const tabs: Array<RoutedTab> = React.useMemo(() => {
return [
{ id: 'txs', title: 'Transactions', component: <AddressTxs/> },
{ id: 'token_transfers', title: 'Token transfers', component: <AddressTokenTransfers/> },
{ id: 'tokens', title: 'Tokens', component: null },
{ id: 'internal_txns', title: 'Internal txns', component: <AddressInternalTxs/> },
{ id: 'coin_balance_history', title: 'Coin balance history', component: <AddressCoinBalance addressQuery={ addressQuery }/> },
{ id: 'coin_balance_history', title: 'Coin balance history', component: <AddressCoinBalance/> },
// temporary show this tab in all address
// later api will return info about available tabs
{ id: 'blocks_validated', title: 'Blocks validated', component: <AddressBlocksValidated addressQuery={ addressQuery }/> },
];
{ id: 'blocks_validated', title: 'Blocks validated', component: <AddressBlocksValidated/> },
isContract ? { id: 'logs', title: 'Logs', component: <AddressLogs/> } : undefined,
].filter(notEmpty);
}, [ isContract ]);
const tagsNode = tags.length > 0 ? <Flex columnGap={ 2 }>{ tags }</Flex> : null;
return (
<Page>
<TextAd mb={ 6 }/>
{ addressQuery.isLoading ? (
<Skeleton h={ 10 } w="260px" mb={ 6 }/>
) : (
<PageTitle
text={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
additionals={ tagsNode }
/>
) }
<AddressDetails addressQuery={ addressQuery }/>
<RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>
{ addressQuery.isLoading ? <SkeletonTabs/> : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/> }
</Page>
);
};
......
ui/pages/Blocks.pw.tsx
View file @ 45591ba9
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as textAdMock from 'mocks/ad/textAd';
import * as blockMock from 'mocks/blocks/block';
import * as statsMock from 'mocks/stats/index';
import * as socketServer from 'playwright/fixtures/socketServer';
......@@ -26,6 +27,19 @@ const test = base.extend<socketServer.SocketServerFixture>({
// test cases which use socket cannot run in parallel since the socket server always run on the same port
test.describe.configure({ mode: 'serial' });
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/image_s.jpg',
});
});
});
test('base view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(BLOCKS_API_URL, (route) => route.fulfill({
status: 200,
......
ui/pages/Stats.tsx
View file @ 45591ba9
......@@ -22,7 +22,7 @@ const Stats = () => {
return (
<Page>
<PageTitle text={ `${ appConfig.network.name } Stats` }/>
<PageTitle text={ `${ appConfig.network.name } stats` }/>
<Box mb={{ base: 6, sm: 8 }}>
<NumberWidgetsList/>
......
ui/shared/FilterInput.tsx
View file @ 45591ba9
import { chakra, Icon, IconButton, Input, InputGroup, InputLeftElement, InputRightElement, useColorModeValue } from '@chakra-ui/react';
import { chakra, Icon, Input, InputGroup, InputLeftElement, InputRightElement, useColorModeValue } from '@chakra-ui/react';
import type { ChangeEvent } from 'react';
import React, { useCallback, useState } from 'react';
import crossIcon from 'icons/cross.svg';
import searchIcon from 'icons/search.svg';
import InputClearButton from 'ui/shared/InputClearButton';
type Props = {
onChange: (searchTerm: string) => void;
......@@ -54,16 +54,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
{ filterQuery ? (
<InputRightElement>
<IconButton
colorScheme="gray"
aria-label="Clear the filter input"
title="Clear the filter input"
w={ 6 }
h={ 6 }
icon={ <Icon as={ crossIcon } w={ 4 } h={ 4 } color={ iconColor }/> }
size="sm"
onClick={ handleFilterQueryClear }
/>
<InputClearButton onClick={ handleFilterQueryClear }/>
</InputRightElement>
) : null }
</InputGroup>
......
ui/shared/InputClearButton.tsx 0 → 100644
View file @ 45591ba9
import { chakra, Icon, IconButton, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import crossIcon from 'icons/cross.svg';
interface Props {
onClick: () => void;
}
const InputClearButton = ({ onClick }: Props) => {
const iconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
return (
<IconButton
colorScheme="gray"
aria-label="Clear input"
title="Clear input"
boxSize={ 6 }
icon={ <Icon as={ crossIcon } boxSize={ 4 } color={ iconColor }/> }
size="sm"
onClick={ onClick }
/>
);
};
export default chakra(InputClearButton);
ui/shared/Page/Page.pw.tsx
View file @ 45591ba9
......@@ -30,7 +30,5 @@ test('with indexing alert +@mobile', async({ mount, page }) => {
</TestApp>,
);
await page.waitForResponse(API_URL),
await expect(component).toHaveScreenshot();
});
ui/shared/TokenLogo.tsx
View file @ 45591ba9
import { Image, Center, chakra, useColorModeValue } from '@chakra-ui/react';
import { Image, chakra, useColorModeValue, Icon } from '@chakra-ui/react';
import React from 'react';
import appConfig from 'configs/app/config';
import tokenPlaceholderIcon from 'icons/token-placeholder.svg';
const EmptyElement = ({ className, letter }: { className?: string; letter: string }) => {
const EmptyElement = ({ className }: { className?: string }) => {
const bgColor = useColorModeValue('gray.200', 'gray.600');
const color = useColorModeValue('gray.400', 'gray.200');
return (
<Center
<Icon
className={ className }
fontWeight={ 600 }
bgColor={ bgColor }
color={ color }
borderRadius="base"
>
{ letter.toUpperCase() }
</Center>
as={ tokenPlaceholderIcon }
/>
);
};
......@@ -41,7 +41,7 @@ const TokenLogo = ({ hash, name, className }: Props) => {
className={ className }
src={ logoSrc }
alt={ `${ name || 'token' } logo` }
fallback={ <EmptyElement className={ className } letter={ name?.slice(0, 1) || 'U' }/> }
fallback={ <EmptyElement className={ className }/> }
/>
);
};
......
ui/shared/TokenSnippet/TokenSnippet.tsx
View file @ 45591ba9
......@@ -9,12 +9,13 @@ interface Props {
hash: string;
name?: string | null;
className?: string;
logoSize?: number;
}
const TokenSnippet = ({ symbol, hash, name, className }: Props) => {
const TokenSnippet = ({ symbol, hash, name, className, logoSize = 6 }: Props) => {
return (
<Flex className={ className } alignItems="center" columnGap={ 1 } w="100%">
<TokenLogo boxSize={ 5 } hash={ hash } name={ name }/>
<Flex className={ className } alignItems="center" columnGap={ 2 } w="100%">
<TokenLogo boxSize={ logoSize } hash={ hash } name={ name }/>
<AddressLink hash={ hash } alias={ name } type="token"/>
{ symbol && <Text variant="secondary">({ symbol })</Text> }
</Flex>
......
ui/shared/chart/ChartWidget.tsx
View file @ 45591ba9
......@@ -51,6 +51,8 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight }: Prop
}, []);
const handleFileSaveClick = useCallback(() => {
// wait for context menu to close
setTimeout(() => {
if (ref.current) {
domToImage.toPng(ref.current,
{
......@@ -73,6 +75,7 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight }: Prop
link.remove();
});
}
}, 100);
}, [ pngBackgroundColor, title ]);
const handleSVGSavingClick = useCallback(() => {
......
ui/shared/chart/ChartWidgetGraph.tsx
View file @ 45591ba9
......@@ -29,9 +29,9 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
const ref = React.useRef<SVGSVGElement>(null);
const color = useToken('colors', 'blue.200');
const overlayRef = React.useRef<SVGRectElement>(null);
const chartId = useMemo(() => `chart-${ title.split(' ').join('') }`, [ title ]);
const [ range, setRange ] = React.useState<[ number, number ]>([ 0, Infinity ]);
const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
const chartId = `chart-${ title.split(' ').join('') }-${ isEnlarged ? 'fullscreen' : 'small' }`;
const displayedData = useMemo(() => items.slice(range[0], range[1]), [ items, range ]);
const chartData = [ { items: items, name: 'Value', color } ];
......
ui/shared/chart/useTimeChartController.tsx
View file @ 45591ba9
......@@ -3,6 +3,8 @@ import { useMemo } from 'react';
import type { TimeChartData } from 'ui/shared/chart/types';
import formatNumberToMetricPrefix from 'lib/formatNumberToMetricPrefix';
interface Props {
data: TimeChartData;
width: number;
......@@ -50,7 +52,7 @@ export default function useTimeChartController({ data, width, height }: Props) {
);
const xTickFormat = (d: d3.AxisDomain) => d.toLocaleString();
const yTickFormat = (d: d3.AxisDomain) => d.toLocaleString();
const yTickFormat = (d: d3.AxisDomain) => formatNumberToMetricPrefix(Number(d));
return {
xTickFormat,
......
ui/tx/TxDecodedInputData/TxDecodedInputData.pw.tsx → ui/shared/logs/LogDecodedInputData.pw.tsx
View file @ 45591ba9
......@@ -4,12 +4,12 @@ import React from 'react';
import * as mocks from 'mocks/txs/decodedInputData';
import TestApp from 'playwright/TestApp';
import TxDecodedInputData from './TxDecodedInputData';
import LogDecodedInputData from './LogDecodedInputData';
test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<TxDecodedInputData data={ mocks.withIndexedFields }/>
<LogDecodedInputData data={ mocks.withIndexedFields }/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
......@@ -18,7 +18,7 @@ test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
test('without indexed fields +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<TxDecodedInputData data={ mocks.withoutIndexedFields }/>
<LogDecodedInputData data={ mocks.withoutIndexedFields }/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
......
ui/tx/TxDecodedInputData/TxDecodedInputData.tsx → ui/shared/logs/LogDecodedInputData.tsx
View file @ 45591ba9
......@@ -68,7 +68,7 @@ interface Props {
data: DecodedInput;
}
const TxDecodedInputData = ({ data }: Props) => {
const LogDecodedInputData = ({ data }: Props) => {
const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
const hasIndexed = data.parameters.some(({ indexed }) => indexed !== undefined);
......@@ -175,4 +175,4 @@ const TxDecodedInputData = ({ data }: Props) => {
);
};
export default TxDecodedInputData;
export default LogDecodedInputData;
ui/tx/logs/TxLogItem.pw.tsx → ui/shared/logs/LogItem.pw.tsx
View file @ 45591ba9
......@@ -5,7 +5,7 @@ import * as addressMocks from 'mocks/address/address';
import * as inputDataMocks from 'mocks/txs/decodedInputData';
import TestApp from 'playwright/TestApp';
import TxLogItem from './TxLogItem';
import LogItem from './LogItem';
const TOPICS = [
'0x3a4ec416703c36a61a4b1f690847f1963a6829eac0b52debd40a23b66c142a56',
......@@ -18,12 +18,13 @@ const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee
test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<TxLogItem
<LogItem
index={ 42 }
decoded={ inputDataMocks.withIndexedFields }
address={ addressMocks.withName }
topics={ TOPICS }
data={ DATA }
type="tx"
/>
</TestApp>,
);
......@@ -33,12 +34,13 @@ test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
test('without decoded input data +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<TxLogItem
<LogItem
index={ 42 }
decoded={ null }
address={ addressMocks.withoutName }
topics={ TOPICS }
data={ DATA }
type="tx"
/>
</TestApp>,
);
......
ui/tx/logs/TxLogItem.tsx → ui/shared/logs/LogItem.tsx
View file @ 45591ba9
......@@ -10,10 +10,12 @@ import notEmpty from 'lib/notEmpty';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import TxLogTopic from 'ui/tx/logs/TxLogTopic';
import DecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
import LogTopic from 'ui/shared/logs/LogTopic';
type Props = Log;
type Props = Log & {
type: 'address' | 'tx';
};
const RowHeader = ({ children }: { children: React.ReactNode }) => (
<GridItem _notFirst={{ my: { base: 4, lg: 0 } }}>
......@@ -21,7 +23,7 @@ const RowHeader = ({ children }: { children: React.ReactNode }) => (
</GridItem>
);
const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
const TxLogItem = ({ address, index, topics, data, decoded, type }: Props) => {
const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
......@@ -39,7 +41,7 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
pt: 0,
}}
>
{ !decoded && (
{ !decoded && type === 'tx' && (
<GridItem colSpan={{ base: 1, lg: 2 }}>
<Alert status="warning" display="inline-table" whiteSpace="normal">
To see accurate decoded input data, the contract must be verified.{ space }
......@@ -69,14 +71,14 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
<>
<RowHeader>Decode input data</RowHeader>
<GridItem>
<DecodedInputData data={ decoded }/>
<LogDecodedInputData data={ decoded }/>
</GridItem>
</>
) }
<RowHeader>Topics</RowHeader>
<GridItem>
{ topics.filter(notEmpty).map((item, index) => (
<TxLogTopic
<LogTopic
key={ index }
hex={ item }
index={ index }
......
ui/tx/logs/TxLogSkeleton.tsx → ui/shared/logs/LogSkeleton.tsx
View file @ 45591ba9
......@@ -15,7 +15,7 @@ const TopicRow = () => (
</Flex>
);
const TxLogSkeleton = () => {
const LogSkeleton = () => {
const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
return (
......@@ -55,4 +55,4 @@ const TxLogSkeleton = () => {
);
};
export default TxLogSkeleton;
export default LogSkeleton;
ui/tx/logs/TxLogTopic.pw.tsx → ui/shared/logs/LogTopic.pw.tsx
View file @ 45591ba9
......@@ -3,12 +3,12 @@ import React from 'react';
import TestApp from 'playwright/TestApp';
import TxLogTopic from './TxLogTopic';
import LogTopic from './LogTopic';
test('address view +@mobile -@default', async({ mount }) => {
const component = await mount(
<TestApp>
<TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
</TestApp>,
);
await component.locator('select[aria-label="Data type"]').selectOption('address');
......@@ -19,7 +19,7 @@ test('address view +@mobile -@default', async({ mount }) => {
test('hex view +@mobile -@default', async({ mount }) => {
const component = await mount(
<TestApp>
<TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
</TestApp>,
);
await component.locator('select[aria-label="Data type"]').selectOption('hex');
......
ui/tx/logs/TxLogTopic.tsx → ui/shared/logs/LogTopic.tsx
View file @ 45591ba9
......@@ -24,7 +24,7 @@ const VALUE_CONVERTERS: Record<DataType, (hex: string) => string> = {
};
const OPTIONS: Array<DataType> = [ 'hex', 'address', 'text', 'number' ];
const TxLogTopic = ({ hex, index }: Props) => {
const LogTopic = ({ hex, index }: Props) => {
const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('hex');
const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
......@@ -84,4 +84,4 @@ const TxLogTopic = ({ hex, index }: Props) => {
);
};
export default React.memo(TxLogTopic);
export default React.memo(LogTopic);
ui/shared/skeletons/SkeletonTabs.tsx 0 → 100644
View file @ 45591ba9
import { Flex, Skeleton, chakra } from '@chakra-ui/react';
import React from 'react';
interface Props {
className?: string;
}
const SkeletonTabs = ({ className }: Props) => {
return (
<Flex my={ 8 } className={ className }>
<Skeleton h={ 6 } my={ 2 } mx={ 4 } w="100px"/>
<Skeleton h={ 6 } my={ 2 } mx={ 4 } w="120px"/>
<Skeleton h={ 6 } my={ 2 } mx={ 4 } w="80px" display={{ base: 'none', lg: 'block' }}/>
<Skeleton h={ 6 } my={ 2 } mx={ 4 } w="100px" display={{ base: 'none', lg: 'block' }}/>
<Skeleton h={ 6 } my={ 2 } mx={ 4 } w="140px" display={{ base: 'none', lg: 'block' }}/>
</Flex>
);
};
export default chakra(SkeletonTabs);
ui/stats/ChartsWidgetsList.tsx
View file @ 45591ba9
......@@ -44,10 +44,10 @@ const ChartsWidgetsList = ({ charts, interval }: Props) => {
>
{ section.charts.map((chart) => (
<GridItem
key={ chart.id }
key={ chart.apiId }
>
<ChartWidgetContainer
id={ chart.id }
id={ chart.apiId }
title={ chart.title }
description={ chart.description }
interval={ interval }
......
ui/stats/NumberWidgetsList.tsx
View file @ 45591ba9
......@@ -2,6 +2,7 @@ import { Grid } from '@chakra-ui/react';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
import formatNumberToMetricPrefix from 'lib/formatNumberToMetricPrefix';
import { numberWidgetsScheme } from './constants/number-widgets-scheme';
import NumberWidget from './NumberWidget';
......@@ -12,15 +13,32 @@ const skeletonsCount = 8;
const NumberWidgetsList = () => {
const { data, isLoading } = useApiQuery('stats_counters');
const skeletonElement = [ ...Array(skeletonsCount) ]
.map((e, i) => <NumberWidgetSkeleton key={ i }/>);
return (
<Grid
gridTemplateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
gridGap={ 4 }
>
{ isLoading ? [ ...Array(skeletonsCount) ]
.map((e, i) => <NumberWidgetSkeleton key={ i }/>) :
numberWidgetsScheme.map(({ id, title }) =>
data?.counters[id] ? <NumberWidget key={ id } label={ title } value={ Number(data.counters[id]).toLocaleString() }/> : null) }
{ isLoading ? skeletonElement :
numberWidgetsScheme.map(({ id, title, formatFn }) => {
if (!data?.counters[id]) {
return null;
}
const value = formatNumberToMetricPrefix(Number(data.counters[id]));
return (
<NumberWidget
key={ id }
label={ title }
value={ formatFn ?
formatFn(value) :
value }
/>
);
}) }
</Grid>
);
};
......
ui/stats/constants/charts-scheme.ts
View file @ 45591ba9
import type { StatsSection } from 'types/client/stats';
export const statsChartsScheme: Array<StatsSection> = [
{
id: 'accounts',
title: 'Accounts',
charts: [
{
apiId: 'activeAccounts',
title: 'Active accounts',
description: 'Active accounts number per period',
},
{
apiId: 'accountsGrowth',
title: 'Accounts growth',
description: 'Cumulative accounts number per period',
},
],
},
{
id: 'transactions',
title: 'Transactions',
charts: [
{
apiId: 'averageTxnFee',
title: 'Average transaction fee',
description: 'The average amount in USD spent per transaction',
},
{
apiId: 'txnsFee',
title: 'Transactions fees',
description: 'Amount of tokens paid as fees',
},
{
apiId: 'newTxns',
title: 'New transactions',
description: 'New transactions number',
},
{
apiId: 'txnsGrowth',
title: 'Transactions growth',
description: 'Cumulative transactions number',
},
],
},
{
id: 'blocks',
title: 'Blocks',
charts: [
{
id: 'newBlocksPerDay',
apiId: 'newBlocksPerDay',
title: 'New blocks',
description: 'New blocks number per day',
description: 'New blocks number',
},
{
apiId: 'averageBlockSize',
title: 'Average block size',
description: 'Average size of blocks in bytes',
},
],
},
{
id: 'tokens',
title: 'Tokens',
charts: [
{
apiId: 'nativeCoinHoldersGrowth',
title: 'Native coin holders growth',
description: 'Cumulative token holders number for the period',
},
{
apiId: 'newNativeCoinTransfers',
title: 'New native coins transfers',
description: 'New token transfers number for the period',
},
{
apiId: 'nativeCoinSupply',
title: 'Native coin circulating supply',
description: 'Amount of token circulating supply for the period',
},
],
},
{
id: 'gas',
title: 'Gas',
charts: [
{
apiId: 'averageGasLimit',
title: 'Average gas limit',
description: 'Average gas limit per block for the period',
},
{
apiId: 'gasUsedGrowth',
title: 'Gas used growth',
description: 'Cumulative gas used for the period',
},
{
apiId: 'averageGasPrice',
title: 'Average gas price',
description: 'Average gas price for the period',
},
// {
// id: 'average-block-size',
// title: 'Average block size',
// description: 'Average size of blocks in bytes',
// },
],
},
// {
// id: 'transactions',
// title: 'Transactions',
// charts: [
// {
// id: 'average-transaction-fee',
// title: 'Average transaction fee',
// description: 'The average amount in USD spent per transaction',
// },
// {
// id: 'transactions-fees',
// title: 'Transactions fees',
// description: 'Amount of tokens paid as fees',
// },
// {
// id: 'new-transactions',
// title: 'Transactions fees',
// description: 'New transactions number per period',
// },
// {
// id: 'transactions-growth',
// title: 'Transactions growth',
// description: 'Cumulative transactions number per period',
// },
// ],
// },
// {
// id: 'accounts',
// title: 'Accounts',
// charts: [
// {
// id: 'active-accounts',
// title: 'Active accounts',
// description: 'Active accounts number per period',
// },
// {
// id: 'accounts-growth',
// title: 'Accounts growth',
// description: 'Cumulative accounts number per period',
// },
// ],
// },
];
ui/stats/constants/number-widgets-scheme.ts
View file @ 45591ba9
......@@ -2,7 +2,7 @@ import type { Stats } from 'types/api/stats';
type Key = keyof Stats['counters'];
export const numberWidgetsScheme: Array<{id: Key; title: string}> = [
export const numberWidgetsScheme: Array<{id: Key; title: string; formatFn?: (n: string) => string}> = [
{
id: 'totalBlocks',
title: 'Total blocks',
......@@ -10,6 +10,7 @@ export const numberWidgetsScheme: Array<{id: Key; title: string}> = [
{
id: 'averageBlockTime',
title: 'Average block time',
formatFn: (n) => `${ n } s`,
},
{
id: 'totalTransactions',
......@@ -35,8 +36,4 @@ export const numberWidgetsScheme: Array<{id: Key; title: string}> = [
id: 'totalNativeCoinTransfers',
title: 'Total native coin transfers',
},
{
id: 'totalAccounts',
title: 'Total accounts',
},
];
ui/tx/NftTokenTransferSnippet.tsx
View file @ 45591ba9
......@@ -26,7 +26,7 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props)
<Link href={ url } fontWeight={ 600 }>{ tokenId }</Link>
</Box>
{ name ? (
<TokenSnippet symbol={ symbol } hash={ hash } name={ name } w="auto"/>
<TokenSnippet symbol={ symbol } hash={ hash } name={ name } w="auto" logoSize={ 5 } columnGap={ 1 }/>
) : (
<AddressLink hash={ hash } truncation="constant" type="token"/>
) }
......
ui/tx/TxDetails.tsx
View file @ 45591ba9
......@@ -35,6 +35,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
// import PrevNext from 'ui/shared/PrevNext';
import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
import RawInputData from 'ui/shared/RawInputData';
import TextSeparator from 'ui/shared/TextSeparator';
import TxStatus from 'ui/shared/TxStatus';
......@@ -42,7 +43,6 @@ import Utilization from 'ui/shared/Utilization/Utilization';
import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
import TxRevertReason from 'ui/tx/details/TxRevertReason';
import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
import TxSocketAlert from 'ui/tx/TxSocketAlert';
import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
......@@ -383,7 +383,7 @@ const TxDetails = () => {
title="Decoded input data"
hint="Decoded input data"
>
<TxDecodedInputData data={ data.decoded_input }/>
<LogDecodedInputData data={ data.decoded_input }/>
</DetailsInfoItem>
) }
</>
......
ui/tx/TxLogs.tsx
View file @ 45591ba9
......@@ -5,9 +5,9 @@ import { SECOND } from 'lib/consts';
import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import ActionBar from 'ui/shared/ActionBar';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import LogItem from 'ui/shared/logs/LogItem';
import LogSkeleton from 'ui/shared/logs/LogSkeleton';
import Pagination from 'ui/shared/Pagination';
import TxLogItem from 'ui/tx/logs/TxLogItem';
import TxLogSkeleton from 'ui/tx/logs/TxLogSkeleton';
import TxPendingAlert from 'ui/tx/TxPendingAlert';
import TxSocketAlert from 'ui/tx/TxSocketAlert';
import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
......@@ -33,8 +33,8 @@ const TxLogs = () => {
if (isLoading || txInfo.isLoading) {
return (
<Box>
<TxLogSkeleton/>
<TxLogSkeleton/>
<LogSkeleton/>
<LogSkeleton/>
</Box>
);
}
......@@ -50,7 +50,7 @@ const TxLogs = () => {
<Pagination ml="auto" { ...pagination }/>
</ActionBar>
) }
{ data.items.map((item, index) => <TxLogItem key={ index } { ...item }/>) }
{ data.items.map((item, index) => <LogItem key={ index } { ...item } type="tx"/>) }
</Box>
);
};
......
ui/tx/details/TxDetailsTokenTransfer.tsx
View file @ 45591ba9
......@@ -25,7 +25,15 @@ const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
<Text fontWeight={ 500 } as="span">For:{ space }
<CurrencyValue value={ payload.value } exchangeRate={ token.exchange_rate } fontWeight={ 600 }/>
</Text>
<TokenSnippet symbol={ token.symbol } hash={ token.address } name={ token.name } w="auto" flexGrow="1"/>
<TokenSnippet
symbol={ token.symbol }
hash={ token.address }
name={ token.name }
w="auto"
flexGrow="1"
columnGap={ 1 }
logoSize={ 5 }
/>
</Flex>
);
}
......
ui/tx/details/TxRevertReason.tsx
View file @ 45591ba9
......@@ -4,7 +4,7 @@ import React from 'react';
import type { TransactionRevertReason } from 'types/api/transaction';
import hexToUtf8 from 'lib/hexToUtf8';
import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
type Props = TransactionRevertReason;
......@@ -31,7 +31,7 @@ const TxRevertReason = (props: Props) => {
);
}
return <TxDecodedInputData data={ props }/>;
return <LogDecodedInputData data={ props }/>;
};
export default React.memo(TxRevertReason);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment