[Explorer] Add copy buttons for traded token addresses (#819)

# Summary

Closes #802 

Added copy to clipboard component for copying traded token addreses.

<img width="1194" alt="Screen Shot 2021-11-08 at 00 47 53" src="https://user-images.githubusercontent.com/11525018/140681601-6e4bc5b9-dad4-4b9c-91d2-52a36f968078.png">

# To Test

1. Go to `orders/<order id>` page (i.e: `0xa2e6c6fe3a83080e0c911e3e75ef4fce8bddb2929f25685c9631255f88dcb6a704a66cbba0485d7b21af836f52b711401300fddb615f8e69`)

* You'll see copy to clipboard button next to traded tokens name in `Amount` row

src/components/orders/AmountsDisplay/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import BigNumber from 'bignumber.js'
+import { isNativeToken } from 'utils'
 
 import { TokenErc20 } from '@gnosis.pm/dex-js'
 
@@ -13,6 +14,8 @@ import { formatSmartMaxPrecision } from 'utils'
 
 import { TokenDisplay } from 'components/common/TokenDisplay'
 
+import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
+
 import { RowContents, RowTitle, /*UsdAmount,*/ Wrapper } from './styled'
 
 type RowProps = {
@@ -31,7 +34,7 @@ function Row(props: RowProps): JSX.Element {
 
   // Decimals are optional on ERC20 spec. In that unlikely case, graceful fallback to raw amount
   const formattedAmount = erc20.decimals ? formatSmartMaxPrecision(amount, erc20) : amount.toString(10)
-
+  const tokenDisplay = <TokenDisplay erc20={erc20} network={network} />
   return (
     <>
       <RowTitle>
@@ -40,7 +43,11 @@ function Row(props: RowProps): JSX.Element {
       <RowContents>
         <span>{formattedAmount}</span>
         {/* <UsdAmount>(~${usdAmount})</UsdAmount> */}
-        <TokenDisplay erc20={erc20} network={network} />
+        {isNativeToken(erc20.address) ? (
+          tokenDisplay
+        ) : (
+          <RowWithCopyButton textToCopy={erc20.address} contentsToDisplay={tokenDisplay} />
+        )}
       </RowContents>
     </>
   )