contract verification alert

lib/link/routes.ts

@@ -104,6 +104,10 @@ export const ROUTES = {
     pattern: `${ BASE_PATH }/address/[id]`,
     crossNetworkNavigation: true,
   },
+  address_contract_verification: {
+    pattern: `${ BASE_PATH }/address/[id]/contract_verifications/new`,
+    crossNetworkNavigation: true,
+  },
 
   // APPS
   apps: {

ui/tx/logs/TxLogItem.tsx

-import { Text, Grid, GridItem, Tooltip, Button, useColorModeValue } from '@chakra-ui/react';
+import { Text, Grid, GridItem, Tooltip, Button, useColorModeValue, Alert, Link } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Log } from 'types/api/log';
 
 // import searchIcon from 'icons/search.svg';
+import { space } from 'lib/html-entities';
+import useLink from 'lib/link/useLink';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -22,6 +24,7 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
 
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const link = useLink();
 
   return (
     <Grid
@@ -36,9 +39,17 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
         pt: 0,
       }}
     >
+      { !decoded && (
+        <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 }
+            <Link href={ link('address_contract_verification', { id: address.hash }) }>Verify the contract here</Link>
+          </Alert>
+        </GridItem>
+      ) }
       <RowHeader>Address</RowHeader>
       <GridItem display="flex" alignItems="center">
-        <Address>
+        <Address mr={{ base: 9, lg: 0 }}>
           <AddressIcon hash={ address.hash }/>
           <AddressLink hash={ address.hash } alias={ address.name } ml={ 2 }/>
         </Address>