Bug #313: Payload breaks ui

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,63 @@ const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: Descrip
 
 const CustomDescription = ({
   data, value = 0, recipient, classes,
-}: CustomDescProps) => (
-  <>
-    <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
-      <Bold>
-        Send
-        {' '}
-        {value}
-        {' '}
-        ETH
-        {' '}
-        to:
-      </Bold>
-      <EtherscanLink type="address" value={recipient} />
-    </Block>
-    <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
-      <Bold>Data (hex encoded):</Bold>
-      <Paragraph size="md" noMargin>
-        {data}
-      </Paragraph>
-    </Block>
-  </>
-)
+}: CustomDescProps) => {
+  const [showTxData, setShowTxData] = useState(false)
+  return (
+    <>
+      <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
+        <Bold>
+          Send
+          {' '}
+          {value}
+          {' '}
+          ETH
+          {' '}
+          to:
+        </Bold>
+        <EtherscanLink type="address" value={recipient} />
+      </Block>
+      <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
+        <Bold>Data (hex encoded):</Bold>
+        <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 transactions"
+                  onClick={() => setShowTxData(true)}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className={classes.linkTxData}
+                >
+                  Show More
+                </LinkWithRef>
+              </>
+            )
+
+          }
+        </Paragraph>
+      </Block>
+    </>
+  )
+}
 
 const TxDescription = ({ tx, classes }: Props) => {
   const {