Bug #313: Payload breaks ui (#371)

* Makes minMaxLength 2 to AddCustomToken

* Fix styling

* Fix typo

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react'
+import React, { useState } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
 import Bold from '~/components/layout/Bold'
@@ -8,6 +8,8 @@ import Paragraph from '~/components/layout/Paragraph'
 import Block from '~/components/layout/Block'
 import { md, lg } from '~/theme/variables'
 import { getTxData } from './utils'
+import { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import LinkWithRef from '~/components/layout/Link'
 
 export const TRANSACTIONS_DESC_ADD_OWNER_TEST_ID = 'tx-description-add-owner'
 export const TRANSACTIONS_DESC_REMOVE_OWNER_TEST_ID = 'tx-description-remove-owner'
@@ -23,6 +25,13 @@ export const styles = () => ({
   txData: {
     wordBreak: 'break-all',
   },
+  txDataParagraph: {
+    whiteSpace: 'normal',
+  },
+  linkTxData: {
+    textDecoration: 'underline',
+    cursor: 'pointer',
+  },
 })
 
 type Props = {
@@ -91,7 +100,9 @@ const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: Descrip
 
 const CustomDescription = ({
   data, value = 0, recipient, classes,
-}: CustomDescProps) => (
+}: CustomDescProps) => {
+  const [showTxData, setShowTxData] = useState(false)
+  return (
     <>
       <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
         <Bold>
@@ -107,12 +118,41 @@ const CustomDescription = ({
       </Block>
       <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
         <Bold>Data (hex encoded):</Bold>
-      <Paragraph size="md" noMargin>
+        <Paragraph size="md" noMargin className={classes.txDataParagraph}>
+          {showTxData ? (
+            <>
               {data}
+              {' '}
+              <LinkWithRef
+                aria-label="Hide details of the transaction"
+                onClick={() => setShowTxData(false)}
+                rel="noopener noreferrer"
+                target="_blank"
+                className={classes.linkTxData}
+              >
+                Show Less
+              </LinkWithRef>
+            </>
+          ) : (
+            <>
+              {shortVersionOf(data, 20)}
+              {' '}
+              <LinkWithRef
+                aria-label="Show details of the transaction"
+                onClick={() => setShowTxData(true)}
+                rel="noopener noreferrer"
+                target="_blank"
+                className={classes.linkTxData}
+              >
+                Show More
+              </LinkWithRef>
+            </>
+          )}
         </Paragraph>
       </Block>
     </>
   )
+}
 
 const TxDescription = ({ tx, classes }: Props) => {
   const {