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,28 +100,59 @@ const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: Descrip
 
 const CustomDescription = ({
   data, value = 0, recipient, classes,
-}: CustomDescProps) => (
+}: CustomDescProps) => {
-  <>
+  const [showTxData, setShowTxData] = useState(false)
-    <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
+  return (
-      <Bold>
+    <>
-        Send
+      <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
-        {' '}
+        <Bold>
-        {value}
+          Send
-        {' '}
+          {' '}
-        ETH
+          {value}
-        {' '}
+          {' '}
-        to:
+          ETH
-      </Bold>
+          {' '}
-      <EtherscanLink type="address" value={recipient} />
+          to:
-    </Block>
+        </Bold>
-    <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
+        <EtherscanLink type="address" value={recipient} />
-      <Bold>Data (hex encoded):</Bold>
+      </Block>
-      <Paragraph size="md" noMargin>
+      <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
-        {data}
+        <Bold>Data (hex encoded):</Bold>
-      </Paragraph>
+        <Paragraph size="md" noMargin className={classes.txDataParagraph}>
-    </Block>
+          {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 {