Merge pull request #855 from blockscout/tx-upd

tx: testnet warning and method badge

ui/tx/TxDetails.pw.tsx

@@ -167,3 +167,28 @@ l2Test('l2', async({ mount, page }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+const mainnetTest = test.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_IS_TESTNET', value: 'false' },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
+});
+
+mainnetTest('without testnet warning', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.l2tx),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await insertAdPlaceholder(page);
+
+  await expect(component).toHaveScreenshot();
+});

ui/tx/TxDetails.tsx

@@ -6,12 +6,12 @@ import {
   Icon as ChakraIcon,
   Link,
   Spinner,
-  Tag,
   Flex,
   Tooltip,
   chakra,
   useColorModeValue,
   Skeleton,
+  Alert,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import { route } from 'nextjs-routes';
@@ -30,6 +30,7 @@ import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
+import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -120,6 +121,8 @@ const TxDetails = () => {
   );
 
   return (
+    <>
+      { appConfig.network.isTestnet && <Alert status="warning" mb={ 6 }>This is a { appConfig.network.name } testnet transaction only</Alert> }
       <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
         { socketStatus && (
           <GridItem colSpan={{ base: undefined, lg: 2 }} mb={ 2 }>
@@ -141,11 +144,16 @@ const TxDetails = () => {
           { /* <PrevNext ml={ 7 }/> */ }
         </DetailsInfoItem>
         <DetailsInfoItem
-        title="Status"
+          title="Status and method"
           hint="Current transaction state: Success, Failed (Error), or Pending (In Process)"
           isLoading={ isPlaceholderData }
         >
           <TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined } isLoading={ isPlaceholderData }/>
+          { data.method && (
+            <Tag colorScheme={ data.method === 'Multicall' ? 'teal' : 'gray' } isLoading={ isPlaceholderData } isTruncated ml={ 3 }>
+              { data.method }
+            </Tag>
+          ) }
         </DetailsInfoItem>
         { data.revert_reason && (
           <DetailsInfoItem
@@ -269,7 +277,12 @@ const TxDetails = () => {
           hint="Value sent in the native token (and USD) if applicable"
           isLoading={ isPlaceholderData }
         >
-        <CurrencyValue value={ data.value } currency={ appConfig.network.currency.symbol } exchangeRate={ data.exchange_rate } isLoading={ isPlaceholderData }/>
+          <CurrencyValue
+            value={ data.value }
+            currency={ appConfig.network.currency.symbol }
+            exchangeRate={ data.exchange_rate }
+            isLoading={ isPlaceholderData }
+          />
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Transaction fee"
@@ -464,6 +477,7 @@ const TxDetails = () => {
           </>
         ) }
       </Grid>
+    </>
   );
 };