Merge pull request #805 from blockscout/copy-icon

copy addresses

ui/address/internals/AddressIntTxsListItem.tsx

@@ -11,6 +11,7 @@ import dayjs from 'lib/date/dayjs';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -56,6 +57,7 @@ const TxInternalsListItem = ({
         <Address width="calc((100% - 48px) / 2)">
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isDisabled={ isOut }/>
+          { isIn && <CopyToClipboard text={ from.hash }/> }
         </Address>
         { (isIn || isOut) ?
           <InOutTag isIn={ isIn } isOut={ isOut }/> :
@@ -65,6 +67,7 @@ const TxInternalsListItem = ({
           <Address width="calc((100% - 48px) / 2)">
             <AddressIcon address={ toData }/>
             <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ toData.hash } isDisabled={ isIn }/>
+            { isOut && <CopyToClipboard text={ toData.hash }/> }
           </Address>
         ) }
       </Box>

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -11,6 +11,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
 import TxStatus from 'ui/shared/TxStatus';
@@ -64,6 +65,7 @@ const AddressIntTxsTableItem = ({
         <Address display="inline-flex" maxW="100%">
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 } isDisabled={ isOut }/>
+          { isIn && <CopyToClipboard text={ from.hash }/> }
         </Address>
       </Td>
       <Td px={ 0 } verticalAlign="middle">
@@ -77,6 +79,7 @@ const AddressIntTxsTableItem = ({
           <Address display="inline-flex" maxW="100%">
             <AddressIcon address={ toData }/>
             <AddressLink type="address" hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 } isDisabled={ isIn }/>
+            { isOut && <CopyToClipboard text={ toData.hash }/> }
           </Address>
         ) }
       </Td>

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -17,6 +17,8 @@ import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
+import CopyToClipboard from '../CopyToClipboard';
+
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
@@ -84,6 +86,7 @@ const TokenTransferListItem = ({
         <Address width={ addressWidth }>
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isDisabled={ baseAddress === from.hash }/>
+          { baseAddress !== from.hash && <CopyToClipboard text={ from.hash }/> }
         </Address>
         { baseAddress ?
           <InOutTag isIn={ baseAddress === to.hash } isOut={ baseAddress === from.hash } w="50px" textAlign="center"/> :
@@ -92,6 +95,7 @@ const TokenTransferListItem = ({
         <Address width={ addressWidth }>
           <AddressIcon address={ to }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ to.hash } isDisabled={ baseAddress === to.hash }/>
+          { baseAddress !== to.hash && <CopyToClipboard text={ to.hash }/> }
         </Address>
       </Flex>
       { value && (

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -14,6 +14,8 @@ import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
+import CopyToClipboard from '../CopyToClipboard';
+
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
@@ -63,6 +65,7 @@ const TokenTransferTableItem = ({
         <Address display="inline-flex" maxW="100%" lineHeight="30px">
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 } isDisabled={ baseAddress === from.hash }/>
+          { baseAddress !== from.hash && <CopyToClipboard text={ from.hash }/> }
         </Address>
       </Td>
       { baseAddress && (
@@ -74,6 +77,7 @@ const TokenTransferTableItem = ({
         <Address display="inline-flex" maxW="100%" lineHeight="30px">
           <AddressIcon address={ to }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ to.hash } alias={ to.name } flexGrow={ 1 } isDisabled={ baseAddress === to.hash }/>
+          { baseAddress !== to.hash && <CopyToClipboard text={ to.hash }/> }
         </Address>
       </Td>
       <Td isNumeric verticalAlign="top" lineHeight="30px">

ui/token/TokenHolders/TokenHoldersListItem.tsx

@@ -7,6 +7,7 @@ import type { TokenHolder, TokenInfo } from 'types/api/token';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
@@ -23,6 +24,7 @@ const TokenHoldersListItem = ({ holder, token }: Props) => {
       <Address display="inline-flex" maxW="100%" lineHeight="30px">
         <AddressIcon address={ holder.address }/>
         <AddressLink type="address" ml={ 2 } fontWeight="700" hash={ holder.address.hash } alias={ holder.address.name } flexGrow={ 1 }/>
+        <CopyToClipboard text={ holder.address.hash }/>
       </Address>
       <Flex justifyContent="space-between" alignItems="center" width="100%">
         { quantity }

ui/token/TokenHolders/TokenHoldersTableItem.tsx

@@ -7,6 +7,7 @@ import type { TokenHolder, TokenInfo } from 'types/api/token';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 type Props = {
@@ -23,6 +24,7 @@ const TokenTransferTableItem = ({ holder, token }: Props) => {
         <Address display="inline-flex" maxW="100%" lineHeight="30px">
           <AddressIcon address={ holder.address }/>
           <AddressLink type="address" ml={ 2 } fontWeight="700" hash={ holder.address.hash } alias={ holder.address.name } flexGrow={ 1 }/>
+          <CopyToClipboard text={ holder.address.hash }/>
         </Address>
       </Td>
       <Td isNumeric>

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -11,6 +11,7 @@ import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
@@ -64,11 +65,13 @@ const TokenTransferListItem = ({
         <Address width="50%">
           <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } type="address_token" tokenHash={ token.address }/>
+          <CopyToClipboard text={ from.hash }/>
         </Address>
         <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         <Address width="50%">
           <AddressIcon address={ to }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } type="address_token" tokenHash={ token.address }/>
+          <CopyToClipboard text={ to.hash }/>
         </Address>
       </Flex>
       { value && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -9,6 +9,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
 type Props = TokenTransfer & { tokenId?: string }
@@ -51,6 +52,7 @@ const TokenTransferTableItem = ({
             tokenHash={ token.address }
             truncation="constant"
           />
+          <CopyToClipboard text={ from.hash }/>
         </Address>
       </Td>
       <Td px={ 0 }>
@@ -69,6 +71,7 @@ const TokenTransferTableItem = ({
             tokenHash={ token.address }
             truncation="constant"
           />
+          <CopyToClipboard text={ to.hash }/>
         </Address>
       </Td>
       { (token.type === 'ERC-721' || token.type === 'ERC-1155') && (

ui/tx/internals/TxInternalsListItem.tsx

@@ -9,6 +9,7 @@ import eastArrowIcon from 'icons/arrows/east.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
@@ -29,12 +30,14 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
         <Address width="calc((100% - 48px) / 2)">
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash }/>
+          <CopyToClipboard text={ from.hash }/>
         </Address>
         <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         { toData && (
           <Address width="calc((100% - 48px) / 2)">
             <AddressIcon address={ toData }/>
             <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ toData.hash }/>
+            <CopyToClipboard text={ toData.hash }/>
           </Address>
         ) }
       </Box>

ui/tx/internals/TxInternalsTableItem.tsx

@@ -9,6 +9,7 @@ import rightArrowIcon from 'icons/arrows/east.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -34,6 +35,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
         <Address display="inline-flex" maxW="100%">
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
+          <CopyToClipboard text={ from.hash }/>
         </Address>
       </Td>
       <Td px={ 0 } verticalAlign="middle">
@@ -44,6 +46,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
           <Address display="inline-flex" maxW="100%">
             <AddressIcon address={ toData }/>
             <AddressLink type="address" hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 }/>
+            <CopyToClipboard text={ toData.hash }/>
           </Address>
         ) }
       </Td>

ui/txs/TxsListItem.tsx

@@ -18,6 +18,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -102,6 +103,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
             ml={ 2 }
             isDisabled={ isOut }
           />
+          { !isOut && <CopyToClipboard text={ tx.from.hash }/> }
         </Address>
         { (isIn || isOut) ?
           <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 }/> : (
@@ -123,6 +125,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
               ml={ 2 }
               isDisabled={ isIn }
             />
+            { !isIn && <CopyToClipboard text={ dataTo.hash }/> }
           </Address>
         ) : '-' }
       </Flex>

ui/txs/TxsTable.tsx

@@ -46,9 +46,9 @@ const TxsTable = ({
           <Th width="160px">Type</Th>
           <Th width="20%">Method</Th>
           { showBlockInfo && <Th width="18%">Block</Th> }
-          <Th width={{ xl: '132px', base: '66px' }}>From</Th>
+          <Th width={{ xl: '152px', base: '86px' }}>From</Th>
           <Th width={{ xl: currentAddress ? '48px' : '36px', base: currentAddress ? '52px' : '28px' }}></Th>
-          <Th width={{ xl: '132px', base: '66px' }}>To</Th>
+          <Th width={{ xl: '152px', base: '86px' }}>To</Th>
           <Th width="20%" isNumeric>
             <Link onClick={ sort('val') } display="flex" justifyContent="end">
               { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }

ui/txs/TxsTableItem.tsx

@@ -20,6 +20,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -47,6 +48,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
     <Address w="100%">
       <AddressIcon address={ tx.from }/>
       <AddressLink type="address" hash={ tx.from.hash } alias={ tx.from.name } fontWeight="500" ml={ 2 } truncation="constant" isDisabled={ isOut }/>
+      { !isOut && <CopyToClipboard text={ tx.from.hash }/> }
     </Address>
   );
 
@@ -54,6 +56,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
     <Address w="100%">
       <AddressIcon address={ dataTo }/>
       <AddressLink type="address" hash={ dataTo.hash } alias={ dataTo.name } fontWeight="500" ml={ 2 } truncation="constant" isDisabled={ isIn }/>
+      { !isIn && <CopyToClipboard text={ dataTo.hash }/> }
     </Address>
   ) : '-';