Merge branch 'main' of github.com:blockscout/frontend into tx-page-fixes

45911808 · tom · 524c68a7 · 296347cf · 45911808 · 45911808
Commit 45911808 authored Sep 28, 2022 by tom
13 changed files
--- a/lib/date/dayjs.ts
+++ b/lib/date/dayjs.ts
 // eslint-disable-next-line no-restricted-imports
 import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';

 dayjs.locale('en');

-dayjs.extend(relativeTime);
+const relativeTimeConfig = {
+  thresholds: [
+    { l: 's', r: 1 },
+    { l: 'ss', r: 59, d: 'second' },
+    { l: 'm', r: 1 },
+    { l: 'mm', r: 59, d: 'minute' },
+    { l: 'h', r: 1 },
+    { l: 'hh', r: 23, d: 'hour' },
+    { l: 'd', r: 1 },
+    { l: 'dd', r: 29, d: 'day' },
+    { l: 'M', r: 1 },
+    { l: 'MM', r: 11, d: 'month' },
+    { l: 'y' },
+    { l: 'yy', d: 'year' },
+  ],
+};
+
+dayjs.extend(relativeTime, relativeTimeConfig);
 dayjs.extend(updateLocale);
 dayjs.extend(localizedFormat);
+dayjs.extend(duration);

 dayjs.updateLocale('en', {
  formats: {
    LLLL: 'MMMM-DD-YYYY HH:mm:ss A Z UTC',
  },
+  relativeTime: {
+    s: 'a sec',
+    ss: '%d secs',
+    future: 'in %s',
+    past: '%s ago',
+    m: 'a min',
+    mm: '%d mins',
+    h: 'an hour',
+    hh: '%d hours',
+    d: 'a day',
+    dd: '%d days',
+    M: 'a month',
+    MM: '%d months',
+    y: 'a year',
+    yy: '%d years',
+  },
 });

 export default dayjs;
--- a/lib/next/account/getStaticPaths.ts
+++ b/lib/next/account/getStaticPaths.ts
 import type { GetStaticPaths } from 'next';

-import getAvailablePaths from 'lib/networks/getAvailablePaths';
-
 export const getStaticPaths: GetStaticPaths = async() => {
-  return { paths: getAvailablePaths(), fallback: false };
+  return { paths: [], fallback: true };
 };
--- a/pages/[network_type]/[network_sub_type]/account/api_key.tsx
+++ b/pages/[network_type]/[network_sub_type]/account/api_key.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const ApiKeysPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head><title>{ title }</title></Head>

--- a/pages/[network_type]/[network_sub_type]/account/custom_abi.tsx
+++ b/pages/[network_type]/[network_sub_type]/account/custom_abi.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const CustomAbiPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head><title>{ title }</title></Head>

--- a/pages/[network_type]/[network_sub_type]/account/public_tags_request.tsx
+++ b/pages/[network_type]/[network_sub_type]/account/public_tags_request.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const PublicTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head><title>{ title }</title></Head>

--- a/pages/[network_type]/[network_sub_type]/account/tag_address.tsx
+++ b/pages/[network_type]/[network_sub_type]/account/tag_address.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head><title>{ title }</title></Head>

--- a/pages/[network_type]/[network_sub_type]/account/tag_transaction.tsx
+++ b/pages/[network_type]/[network_sub_type]/account/tag_transaction.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const TransactionTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head><title>{ title }</title></Head>

--- a/pages/[network_type]/[network_sub_type]/account/watchlist.tsx
+++ b/pages/[network_type]/[network_sub_type]/account/watchlist.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const WatchListPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head>

--- a/pages/[network_type]/[network_sub_type]/pending-transactions.tsx
+++ b/pages/[network_type]/[network_sub_type]/pending-transactions.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head><title>{ title }</title></Head>

--- a/pages/[network_type]/[network_sub_type]/txs.tsx
+++ b/pages/[network_type]/[network_sub_type]/txs.tsx
@@ -15,7 +15,7 @@ type Props = {
 }

 const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams);
+  const title = getNetworkTitle(pageParams || {});
  return (
    <>
      <Head><title>{ title }</title></Head>

--- a/ui/shared/RoutedTabs/RoutedTabs.tsx
+++ b/ui/shared/RoutedTabs/RoutedTabs.tsx
@@ -33,7 +33,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
  const defaultIndex = tabs.findIndex(({ routeName }) => routeName === defaultActiveTab);
  const isMobile = useIsMobile();

-  const [ activeTab, setActiveTab ] = React.useState<number>(defaultIndex);
+  const [ activeTab ] = React.useState<number>(defaultIndex);
  const { tabsCut, tabsList, tabsRefs, listRef } = useAdaptiveTabs(tabs, isMobile);

  const router = useRouter();
@@ -45,8 +45,6 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
      const newUrl = link(nextTab.routeName, router.query);
      router.push(newUrl, undefined, { shallow: true });
    }
-
-    setActiveTab(index);
  }, [ tabs, router ]);

  return (

--- a/ui/shared/Utilization.tsx
+++ b/ui/shared/Utilization.tsx
@@ -4,18 +4,22 @@ import React from 'react';
 interface Props {
  className?: string;
  value: number;
+  colorScheme?: 'green' | 'gray';
 }

 const WIDTH = 50;

-const Utilization = ({ className, value }: Props) => {
+const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
  const valueString = (value * 100).toFixed(2) + '%';
+  const colorGrayScheme = useColorModeValue('gray.500', 'gray.500');
+  const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
+
  return (
    <Flex className={ className } alignItems="center">
      <Box bg={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') } w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
-        <Box bg="green.500" w={ valueString } h="100%"/>
+        <Box bg={ color } w={ valueString } h="100%"/>
      </Box>
-      <Text color="green.500" ml="10px" fontWeight="bold">{ valueString }</Text>
+      <Text color={ color } ml="10px" fontWeight="bold">{ valueString }</Text>
    </Flex>
  );
 };

--- a/ui/shared/address/AddressLink.tsx
+++ b/ui/shared/address/AddressLink.tsx
@@ -6,23 +6,26 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';

 interface Props {
-  type?: 'address' | 'transaction' | 'token';
+  type?: 'address' | 'transaction' | 'token' | 'block';
  alias?: string;
  className?: string;
  hash: string;
  truncation?: 'constant' | 'dynamic'| 'none';
  fontWeight?: string;
+  id?: string;
 }

-const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, fontWeight }: Props) => {
+const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id, fontWeight }: Props) => {
  const link = useLink();
  let url;
  if (type === 'transaction') {
-    url = link('tx_index', { id: hash });
+    url = link('tx_index', { id: id || hash });
  } else if (type === 'token') {
-    url = link('token_index', { id: hash });
+    url = link('token_index', { id: id || hash });
+  } else if (type === 'block') {
+    url = link('block', { id: id || hash });
  } else {
-    url = link('address_index', { id: hash });
+    url = link('address_index', { id: id || hash });
  }

  const content = (() => {