Merge pull request #620 from blockscout/contract-write-custom

contract tab fixes

ui/address/AddressDetails.tsx

@@ -106,7 +106,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         { data.is_contract && data.creation_tx_hash && data.creator_address_hash && (
           <DetailsInfoItem
             title="Creator"
-            hint="Transaction and address of creation."
+            hint="Transaction and address of creation"
           >
             <AddressLink type="address" hash={ data.creator_address_hash } truncation="constant"/>
             <Text whiteSpace="pre"> at txn </Text>
@@ -116,7 +116,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         { data.is_contract && data.implementation_address && (
           <DetailsInfoItem
             title="Implementation"
-            hint="Implementation address of the proxy contract."
+            hint="Implementation address of the proxy contract"
             columnGap={ 1 }
           >
             <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: data.implementation_address } }) } overflow="hidden">
@@ -133,7 +133,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         { data.has_tokens && (
           <DetailsInfoItem
             title="Tokens"
-            hint="All tokens in the account and total value."
+            hint="All tokens in the account and total value"
             alignSelf="center"
             py={ 0 }
           >
@@ -142,7 +142,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         ) }
         <DetailsInfoItem
           title="Transactions"
-          hint="Number of transactions related to this address."
+          hint="Number of transactions related to this address"
         >
           { addressQuery.data ?
             <AddressCounterItem prop="transactions_count" query={ countersQuery } address={ data.hash } onClick={ handleCounterItemClick }/> :
@@ -151,7 +151,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         { data.has_token_transfers && (
           <DetailsInfoItem
             title="Transfers"
-            hint="Number of transfers to/from this address."
+            hint="Number of transfers to/from this address"
           >
             { addressQuery.data ?
               <AddressCounterItem prop="token_transfers_count" query={ countersQuery } address={ data.hash } onClick={ handleCounterItemClick }/> :
@@ -160,7 +160,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         ) }
         <DetailsInfoItem
           title="Gas used"
-          hint="Gas used by the address."
+          hint="Gas used by the address"
         >
           { addressQuery.data ?
             <AddressCounterItem prop="gas_usage_count" query={ countersQuery } address={ data.hash } onClick={ handleCounterItemClick }/> :
@@ -169,7 +169,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         { data.has_validated_blocks && (
           <DetailsInfoItem
             title="Blocks validated"
-            hint="Number of blocks validated by this validator."
+            hint="Number of blocks validated by this validator"
           >
             { addressQuery.data ?
               <AddressCounterItem prop="validations_count" query={ countersQuery } address={ data.hash } onClick={ handleCounterItemClick }/> :
@@ -179,7 +179,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         { data.block_number_balance_updated_at && (
           <DetailsInfoItem
             title="Last balance update"
-            hint="Block number in which the address was updated."
+            hint="Block number in which the address was updated"
             alignSelf="center"
             py={{ base: '2px', lg: 1 }}
           >

ui/address/contract/ContractCode.tsx

@@ -4,6 +4,7 @@ import { route } from 'nextjs-routes';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -15,12 +16,12 @@ import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
 import ContractSourceCode from './ContractSourceCode';
 
-const InfoItem = ({ label, value }: { label: string; value: string }) => (
-  <GridItem display="flex" columnGap={ 6 }>
+const InfoItem = chakra(({ label, value, className }: { label: string; value: string; className?: string }) => (
+  <GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className }>
     <Text w="170px" flexShrink={ 0 } fontWeight={ 500 }>{ label }</Text>
-    <Text wordBreak="break-all">{ value }</Text>
+    <Text>{ value }</Text>
   </GridItem>
-);
+));
 
 const ContractCode = () => {
   const router = useRouter();
@@ -153,10 +154,10 @@ const ContractCode = () => {
         <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 6 } mb={ 8 }>
           { data.name && <InfoItem label="Contract name" value={ data.name }/> }
           { data.compiler_version && <InfoItem label="Compiler version" value={ data.compiler_version }/> }
-          { data.evm_version && <InfoItem label="EVM version" value={ data.evm_version }/> }
+          { data.evm_version && <InfoItem label="EVM version" value={ data.evm_version } textTransform="capitalize"/> }
           { typeof data.optimization_enabled === 'boolean' && <InfoItem label="Optimization enabled" value={ data.optimization_enabled ? 'true' : 'false' }/> }
           { data.optimization_runs && <InfoItem label="Optimization runs" value={ String(data.optimization_runs) }/> }
-          { data.verified_at && <InfoItem label="Verified at" value={ data.verified_at }/> }
+          { data.verified_at && <InfoItem label="Verified at" value={ dayjs(data.verified_at).format('LLLL') } wordBreak="break-word"/> }
         </Grid>
       ) }
       <Flex flexDir="column" rowGap={ 6 }>

ui/address/contract/ContractRead.pw.tsx

@@ -9,7 +9,7 @@ import ContractRead from './ContractRead';
 
 const addressHash = 'hash';
 const CONTRACT_READ_METHODS_API_URL = buildApiUrl('contract_methods_read', { hash: addressHash }) + '?is_custom_abi=false';
-const CONTRACT_QUERY_METHOD_API_URL = buildApiUrl('contract_method_query', { hash: addressHash });
+const CONTRACT_QUERY_METHOD_API_URL = buildApiUrl('contract_method_query', { hash: addressHash }) + '?is_custom_abi=false';
 const hooksConfig = {
   router: {
     query: { hash: addressHash },

ui/address/contract/ContractRead.tsx

@@ -35,6 +35,7 @@ const ContractRead = ({ isProxy, isCustomAbi }: Props) => {
     pathParams: { hash: addressHash },
     queryParams: {
       is_custom_abi: isCustomAbi ? 'true' : 'false',
+      from: userAddress,
     },
     queryOptions: {
       enabled: Boolean(addressHash),
@@ -44,6 +45,9 @@ const ContractRead = ({ isProxy, isCustomAbi }: Props) => {
   const handleMethodFormSubmit = React.useCallback(async(item: SmartContractReadMethod, args: Array<string | Array<string>>) => {
     return apiFetch<'contract_method_query', SmartContractQueryMethodRead>('contract_method_query', {
       pathParams: { hash: addressHash },
+      queryParams: {
+        is_custom_abi: isCustomAbi ? 'true' : 'false',
+      },
       fetchParams: {
         method: 'POST',
         body: {
@@ -54,11 +58,11 @@ const ContractRead = ({ isProxy, isCustomAbi }: Props) => {
         },
       },
     });
-  }, [ addressHash, apiFetch, isProxy, userAddress ]);
+  }, [ addressHash, apiFetch, isCustomAbi, isProxy, userAddress ]);
 
   const renderContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
     if (item.error) {
-      return <Alert status="error" fontSize="sm">{ item.error }</Alert>;
+      return <Alert status="error" fontSize="sm" wordBreak="break-word">{ item.error }</Alert>;
     }
 
     if (item.outputs.some(({ value }) => value)) {

ui/address/contract/ContractReadResult.tsx

@@ -18,12 +18,12 @@ const ContractReadResult = ({ item, result, onSettle }: Props) => {
   }, [ onSettle ]);
 
   if ('status' in result) {
-    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ result.statusText }</Alert>;
+    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-word">{ result.statusText }</Alert>;
   }
 
   if (result.is_error) {
     const message = 'error' in result.result ? result.result.error : result.result.message;
-    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ message }</Alert>;
+    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-word">{ message }</Alert>;
   }
 
   return (

ui/address/contract/ContractWrite.tsx

@@ -42,8 +42,18 @@ const ContractWrite = ({ isProxy, isCustomAbi }: Props) => {
     },
   });
 
-  const { contract, proxy } = useContractContext();
-  const _contract = isProxy ? proxy : contract;
+  const { contract, proxy, custom } = useContractContext();
+  const _contract = (() => {
+    if (isProxy) {
+      return proxy;
+    }
+
+    if (isCustomAbi) {
+      return custom;
+    }
+
+    return contract;
+  })();
 
   const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<string>>) => {
     if (!isConnected) {
@@ -52,7 +62,7 @@ const ContractWrite = ({ isProxy, isCustomAbi }: Props) => {
 
     try {
       if (!_contract) {
-        return;
+        throw new Error('Something went wrong. Try again later.');
       }
 
       if (item.type === 'receive') {

ui/address/contract/context.tsx

@@ -15,11 +15,13 @@ type ProviderProps = {
 type TContractContext = {
   contract: Contract | null;
   proxy: Contract | null;
+  custom: Contract | null;
 };
 
 const ContractContext = React.createContext<TContractContext>({
   contract: null,
   proxy: null,
+  custom: null,
 });
 
 export function ContractContextProvider({ children }: ProviderProps) {
@@ -49,21 +51,36 @@ export function ContractContextProvider({ children }: ProviderProps) {
     },
   });
 
+  const { data: customInfo } = useApiQuery('contract_methods_write', {
+    pathParams: { hash: addressHash },
+    queryParams: { is_custom_abi: 'true' },
+    queryOptions: {
+      enabled: Boolean(addressInfo?.has_custom_methods_write),
+      refetchOnMount: false,
+    },
+  });
+
   const contract = useContract({
     address: addressHash,
-    abi: contractInfo?.abi || undefined,
-    signerOrProvider: signer || provider,
+    abi: contractInfo?.abi ?? undefined,
+    signerOrProvider: signer ?? provider,
   });
   const proxy = useContract({
     address: addressInfo?.implementation_address ?? undefined,
     abi: proxyInfo?.abi ?? undefined,
     signerOrProvider: signer ?? provider,
   });
+  const custom = useContract({
+    address: addressHash,
+    abi: customInfo ?? undefined,
+    signerOrProvider: signer ?? provider,
+  });
 
   const value = React.useMemo(() => ({
     contract,
     proxy,
-  }), [ contract, proxy ]);
+    custom,
+  }), [ contract, proxy, custom ]);
 
   return (
     <ContractContext.Provider value={ value }>

ui/address/details/AddressBalance.tsx

@@ -66,7 +66,7 @@ const AddressBalance = ({ data }: Props) => {
   return (
     <DetailsInfoItem
       title="Balance"
-      hint={ `Address balance in ${ appConfig.network.currency.symbol }. Doesn't include ERC20, ERC721 and ERC1155 tokens.` }
+      hint={ `Address balance in ${ appConfig.network.currency.symbol }. Doesn't include ERC20, ERC721 and ERC1155 tokens` }
       flexWrap="nowrap"
       alignItems="flex-start"
     >

ui/block/BlockDetails.tsx

@@ -86,7 +86,7 @@ const BlockDetails = () => {
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden">
       <DetailsInfoItem
         title="Block height"
-        hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain."
+        hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
       >
         { data.height }
         { data.height === 0 && <Text whiteSpace="pre"> - Genesis Block</Text> }
@@ -100,7 +100,7 @@ const BlockDetails = () => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Size"
-        hint="Size of the block in bytes."
+        hint="Size of the block in bytes"
       >
         { data.size.toLocaleString('en') }
       </DetailsInfoItem>
@@ -115,7 +115,7 @@ const BlockDetails = () => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transactions"
-        hint="The number of transactions in the block."
+        hint="The number of transactions in the block"
       >
         <LinkInternal href={ route({ pathname: '/block/[height]', query: { height, tab: 'txs' } }) }>
           { data.tx_count } transactions
@@ -123,7 +123,7 @@ const BlockDetails = () => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title={ appConfig.network.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
-        hint="A block producer who successfully included the block onto the blockchain."
+        hint="A block producer who successfully included the block onto the blockchain"
         columnGap={ 1 }
       >
         <AddressLink type="address" hash={ data.miner.hash }/>
@@ -136,7 +136,7 @@ const BlockDetails = () => {
           title="Block reward"
           hint={
             `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ appConfig.network.currency.symbol || 'native token' } 
-          on top of the fees paid for all transactions in the block.`
+          on top of the fees paid for all transactions in the block`
           }
           columnGap={ 1 }
         >
@@ -173,7 +173,7 @@ const BlockDetails = () => {
             key={ type }
             title={ type }
             // is this text correct for validators?
-            hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees.` }
+            hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` }
           >
             { BigNumber(reward).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
           </DetailsInfoItem>
@@ -184,7 +184,7 @@ const BlockDetails = () => {
 
       <DetailsInfoItem
         title="Gas used"
-        hint="The total gas amount used in the block and its percentage of gas filled in the block."
+        hint="The total gas amount used in the block and its percentage of gas filled in the block"
       >
         <Text>{ BigNumber(data.gas_used || 0).toFormat() }</Text>
         <Utilization
@@ -197,14 +197,14 @@ const BlockDetails = () => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas limit"
-        hint="Total gas limit provided by all transactions in the block."
+        hint="Total gas limit provided by all transactions in the block"
       >
         <Text>{ BigNumber(data.gas_limit).toFormat() }</Text>
       </DetailsInfoItem>
       { data.base_fee_per_gas && (
         <DetailsInfoItem
           title="Base fee per gas"
-          hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion."
+          hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion"
         >
           <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol } </Text>
           <Text variant="secondary" whiteSpace="pre">
@@ -217,7 +217,7 @@ const BlockDetails = () => {
         hint={
           `Amount of ${ appConfig.network.currency.symbol || 'native token' } burned from transactions included in the block.
 
-          Equals Block Base Fee per Gas * Gas Used.`
+          Equals Block Base Fee per Gas * Gas Used`
         }
       >
         <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
@@ -236,7 +236,7 @@ const BlockDetails = () => {
       { data.priority_fee !== null && BigNumber(data.priority_fee).gt(ZERO) && (
         <DetailsInfoItem
           title="Priority fee / Tip"
-          hint="User-defined tips sent to validator for transaction priority/inclusion."
+          hint="User-defined tips sent to validator for transaction priority/inclusion"
         >
           { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
         </DetailsInfoItem>
@@ -244,7 +244,7 @@ const BlockDetails = () => {
       { /* api doesn't support extra data yet */ }
       { /* <DetailsInfoItem
         title="Extra data"
-        hint={ `Any data that can be included by the ${ validatorTitle } in the block.` }
+        hint={ `Any data that can be included by the ${ validatorTitle } in the block` }
       >
         <Text whiteSpace="pre">{ data.extra_data } </Text>
         <Text variant="secondary">(Hex: { data.extra_data })</Text>
@@ -273,7 +273,7 @@ const BlockDetails = () => {
 
           <DetailsInfoItem
             title="Difficulty"
-            hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time.` }
+            hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` }
             whiteSpace="normal"
             wordBreak="break-all"
           >
@@ -281,7 +281,7 @@ const BlockDetails = () => {
           </DetailsInfoItem>
           <DetailsInfoItem
             title="Total difficulty"
-            hint="Total difficulty of the chain until this block."
+            hint="Total difficulty of the chain until this block"
             whiteSpace="normal"
             wordBreak="break-all"
           >
@@ -292,7 +292,7 @@ const BlockDetails = () => {
 
           <DetailsInfoItem
             title="Hash"
-            hint="The SHA256 hash of the block."
+            hint="The SHA256 hash of the block"
             flexWrap="nowrap"
           >
             <Box overflow="hidden">
@@ -303,7 +303,7 @@ const BlockDetails = () => {
           { data.height > 0 && (
             <DetailsInfoItem
               title="Parent hash"
-              hint="The hash of the block from which this block was generated."
+              hint="The hash of the block from which this block was generated"
               flexWrap="nowrap"
             >
               <AddressLink hash={ data.parent_hash } type="block" id={ String(data.height - 1) }/>
@@ -313,13 +313,13 @@ const BlockDetails = () => {
           { /* api doesn't support state root yet */ }
           { /* <DetailsInfoItem
             title="State root"
-            hint="The root of the state trie."
+            hint="The root of the state trie"
           >
             <Text wordBreak="break-all" whiteSpace="break-spaces">{ data.state_root }</Text>
           </DetailsInfoItem> */ }
           <DetailsInfoItem
             title="Nonce"
-            hint="Block nonce is a value used during mining to demonstrate proof of work for a block."
+            hint="Block nonce is a value used during mining to demonstrate proof of work for a block"
           >
             { data.nonce }
           </DetailsInfoItem>

ui/token/TokenDetails.tsx

@@ -86,7 +86,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       { exchangeRate && (
         <DetailsInfoItem
           title="Price"
-          hint="Price per token on the exchanges."
+          hint="Price per token on the exchanges"
           alignSelf="center"
         >
           { `$${ exchangeRate }` }
@@ -95,7 +95,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       { totalValue?.usd && (
         <DetailsInfoItem
           title="Fully diluted market cap"
-          hint="Total supply * Price."
+          hint="Total supply * Price"
           alignSelf="center"
         >
           { `$${ totalValue?.usd }` }
@@ -103,7 +103,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       ) }
       <DetailsInfoItem
         title="Max total supply"
-        hint="The total amount of tokens issued."
+        hint="The total amount of tokens issued"
         alignSelf="center"
         wordBreak="break-word"
         whiteSpace="pre-wrap"
@@ -112,7 +112,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Holders"
-        hint="Number of accounts holding the token."
+        hint="Number of accounts holding the token"
         alignSelf="center"
       >
         { tokenCountersQuery.isLoading && <Skeleton w={ 20 } h={ 4 }/> }
@@ -120,7 +120,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transfers"
-        hint="Number of transfer for the token."
+        hint="Number of transfer for the token"
         alignSelf="center"
       >
         { tokenCountersQuery.isLoading && <Skeleton w={ 20 } h={ 4 }/> }
@@ -129,7 +129,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       { decimals && (
         <DetailsInfoItem
           title="Decimals"
-          hint="Number of digits that come after the decimal place when displaying token value."
+          hint="Number of digits that come after the decimal place when displaying token value"
           alignSelf="center"
         >
           { decimals }

ui/tokenInstance/TokenInstanceDetails.tsx

@@ -38,13 +38,13 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
       >
         <DetailsInfoItem
           title="Token"
-          hint="Token name."
+          hint="Token name"
         >
           <TokenSnippet hash={ data.token.address } name={ data.token.name }/>
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Owner"
-          hint="Current owner of this token instance."
+          hint="Current owner of this token instance"
         >
           <Address>
             <AddressIcon address={ data.owner }/>
@@ -55,7 +55,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
         <TokenInstanceCreatorAddress hash={ data.token.address }/>
         <DetailsInfoItem
           title="Token ID"
-          hint="This token instance unique token ID."
+          hint="This token instance unique token ID"
         >
           <Flex alignItems="center" overflow="hidden">
             <Box overflow="hidden" display="inline-block" w="100%">

ui/tokenInstance/details/TokenInstanceTransfersCount.tsx

@@ -36,7 +36,7 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => {
   return (
     <DetailsInfoItem
       title="Transfers"
-      hint="Number of transfer for the token instance."
+      hint="Number of transfer for the token instance"
     >
       <LinkInternal
         href={ url }

ui/tx/TxDetails.tsx

@@ -126,7 +126,7 @@ const TxDetails = () => {
       ) }
       <DetailsInfoItem
         title="Transaction hash"
-        hint="Unique character string (TxID) assigned to every verified transaction."
+        hint="Unique character string (TxID) assigned to every verified transaction"
         flexWrap="nowrap"
       >
         { data.status === null && <Spinner mr={ 2 } size="sm" flexShrink={ 0 }/> }
@@ -146,14 +146,14 @@ const TxDetails = () => {
       { data.revert_reason && (
         <DetailsInfoItem
           title="Revert reason"
-          hint="The revert reason of the transaction."
+          hint="The revert reason of the transaction"
         >
           <TxRevertReason { ...data.revert_reason }/>
         </DetailsInfoItem>
       ) }
       <DetailsInfoItem
         title="Block"
-        hint="Block number containing the transaction."
+        hint="Block number containing the transaction"
       >
         <Text>{ data.block === null ? 'Pending' : data.block }</Text>
         { Boolean(data.confirmations) && (
@@ -168,7 +168,7 @@ const TxDetails = () => {
       { data.timestamp && (
         <DetailsInfoItem
           title="Timestamp"
-          hint="Date & time of transaction inclusion, including length of time for confirmation."
+          hint="Date & time of transaction inclusion, including length of time for confirmation"
         >
           <Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
           <Text ml={ 1 }>{ dayjs(data.timestamp).fromNow() }</Text>
@@ -205,7 +205,7 @@ const TxDetails = () => {
 
       <DetailsInfoItem
         title="From"
-        hint="Address (external or contract) sending the transaction."
+        hint="Address (external or contract) sending the transaction"
         columnGap={ 3 }
       >
         <Address>
@@ -222,7 +222,7 @@ const TxDetails = () => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title={ data.to?.is_contract ? 'Interacted with contract' : 'To' }
-        hint="Address (external or contract) receiving the transaction."
+        hint="Address (external or contract) receiving the transaction"
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
         columnGap={ 3 }
       >
@@ -257,13 +257,13 @@ const TxDetails = () => {
 
       <DetailsInfoItem
         title="Value"
-        hint="Value sent in the native token (and USD) if applicable."
+        hint="Value sent in the native token (and USD) if applicable"
       >
         <CurrencyValue value={ data.value } currency={ appConfig.network.currency.symbol } exchangeRate={ data.exchange_rate }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transaction fee"
-        hint="Total transaction fee."
+        hint="Total transaction fee"
       >
         <CurrencyValue
           value={ data.fee.value }
@@ -274,14 +274,14 @@ const TxDetails = () => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas price"
-        hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage."
+        hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage"
       >
         <Text mr={ 1 }>{ BigNumber(data.gas_price).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">({ BigNumber(data.gas_price).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)</Text>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas limit & usage by txn"
-        hint="Actual gas amount used by the transaction."
+        hint="Actual gas amount used by the transaction"
       >
         <Text>{ BigNumber(data.gas_used || 0).toFormat() }</Text>
         <TextSeparator/>
@@ -292,7 +292,7 @@ const TxDetails = () => {
         <DetailsInfoItem
           title="Gas fees (Gwei)"
           // eslint-disable-next-line max-len
-          hint="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
+          hint="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively"
         >
           { data.base_fee_per_gas && (
             <Box>
@@ -319,7 +319,7 @@ const TxDetails = () => {
       { data.tx_burnt_fee && (
         <DetailsInfoItem
           title="Burnt fees"
-          hint={ `Amount of ${ appConfig.network.currency.symbol } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
+          hint={ `Amount of ${ appConfig.network.currency.symbol } burned for this transaction. Equals Block Base Fee per Gas * Gas Used` }
         >
           <Icon as={ flameIcon } mr={ 1 } boxSize={ 5 } color="gray.500"/>
           <CurrencyValue
@@ -349,7 +349,7 @@ const TxDetails = () => {
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
           <DetailsInfoItem
             title="Other"
-            hint="Other data related to this transaction."
+            hint="Other data related to this transaction"
           >
             {
               [
@@ -382,7 +382,7 @@ const TxDetails = () => {
           </DetailsInfoItem>
           <DetailsInfoItem
             title="Raw input"
-            hint="Binary data included with the transaction. See logs tab for additional info."
+            hint="Binary data included with the transaction. See logs tab for additional info"
           >
             <RawInputData hex={ data.raw_input }/>
           </DetailsInfoItem>

ui/tx/details/TxDetailsTokenTransfers.tsx

@@ -17,10 +17,10 @@ interface Props {
 }
 
 const TOKEN_TRANSFERS_TYPES = [
-  { title: 'Tokens transferred', hint: 'List of tokens transferred in the transaction.', type: 'token_transfer' },
-  { title: 'Tokens minted', hint: 'List of tokens minted in the transaction.', type: 'token_minting' },
-  { title: 'Tokens burnt', hint: 'List of tokens burnt in the transaction.', type: 'token_burning' },
-  { title: 'Tokens created', hint: 'List of tokens created in the transaction.', type: 'token_spawning' },
+  { title: 'Tokens transferred', hint: 'List of tokens transferred in the transaction', type: 'token_transfer' },
+  { title: 'Tokens minted', hint: 'List of tokens minted in the transaction', type: 'token_minting' },
+  { title: 'Tokens burnt', hint: 'List of tokens burnt in the transaction', type: 'token_burning' },
+  { title: 'Tokens created', hint: 'List of tokens created in the transaction', type: 'token_spawning' },
 ];
 const VISIBLE_ITEMS_NUM = 3;