(Bugfix) - #1233 Fix method values length in TXs (#1314)

* Fix method values length in TXs

* arrays Improvment

* Make use of EthHashInfo

* review change

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx

@@ -1,4 +1,4 @@
-import { IconText, Text } from '@gnosis.pm/safe-react-components'
+import { IconText, Text, EthHashInfo } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
 import styled from 'styled-components'
@@ -12,8 +12,6 @@ import {
   MultiSendDetails,
 } from 'src/routes/safe/store/actions/transactions/utils/multiSendDecodedDetails'
 import Bold from 'src/components/layout/Bold'
-import OwnerAddressTableCell from 'src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell'
-import EtherscanLink from 'src/components/EtherscanLink'
 import { humanReadableValue } from 'src/logic/tokens/utils/humanReadableValue'
 import Collapse from 'src/components/Collapse'
 import { useSelector } from 'react-redux'
@@ -24,6 +22,8 @@ import { shortVersionOf } from 'src/logic/wallets/ethAddresses'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
 import { DataDecoded } from 'src/routes/safe/store/models/types/transactions.d'
 import DividerLine from 'src/components/DividerLine'
+import { isArrayParameter } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
+import { getNetwork } from 'src/config'
 
 export const TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID = 'tx-description-custom-value'
 export const TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID = 'tx-description-custom-data'
@@ -34,9 +34,14 @@ const useStyles = makeStyles(styles)
 const TxDetailsMethodName = styled(Text)`
   text-indent: 4px;
 `
-const TxDetailsMethodParam = styled.div`
-  text-indent: 8px;
-  display: flex;
+const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
+  padding-left: 8px;
+  display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')};
+  align-items: center;
+
+  p:first-of-type {
+    margin-right: ${({ isArrayParameter }) => (isArrayParameter ? '0' : '4px')};
+  }
 `
 const TxDetailsContent = styled.div`
   padding: 8px 8px 8px 16px;
@@ -46,6 +51,10 @@ const TxInfo = styled.div`
   padding: 8px 8px 8px 16px;
 `
 
+const StyledMethodName = styled(Text)`
+  white-space: nowrap;
+`
+
 const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => (
   <TxInfo>
     <TxDetailsMethodName size="lg" strong>
@@ -53,10 +62,10 @@ const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => (
     </TxDetailsMethodName>
 
     {data.parameters.map((param, index) => (
-      <TxDetailsMethodParam key={`${data.method}_param-${index}`}>
-        <Text size="lg" strong>
+      <TxDetailsMethodParam key={`${data.method}_param-${index}`} isArrayParameter={isArrayParameter(param.type)}>
+        <StyledMethodName size="lg" strong>
           {param.name}({param.type}):
-        </Text>
+        </StyledMethodName>
         <Value method={data.method} type={param.type} value={param.value} />
       </TxDetailsMethodParam>
     ))}
@@ -76,7 +85,7 @@ const MultiSendCustomDataAction = ({ tx, order }: { tx: MultiSendDetails; order:
       <TxDetailsContent>
         <TxInfo>
           <Bold>Send {humanReadableValue(tx.value)} ETH to:</Bold>
-          <OwnerAddressTableCell address={tx.to} showLinks />
+          <EthHashInfo hash={tx.to} showIdenticon showCopyBtn showEtherscanBtn network={getNetwork()} />
         </TxInfo>
 
         {!!tx.data && <TxInfoDetails data={tx.data} />}
@@ -173,11 +182,15 @@ const GenericCustomData = ({ amount = '0', data, recipient, storedTx }: GenericC
     <Block>
       <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
         <Bold>Send {amount} to:</Bold>
-        {recipientName ? (
-          <OwnerAddressTableCell address={recipient} knownAddress showLinks userName={recipientName} />
-        ) : (
-          <EtherscanLink knownAddress={false} type="address" value={recipient} />
-        )}
+
+        <EthHashInfo
+          hash={recipient}
+          name={recipientName === 'UNKNOWN' ? undefined : recipientName}
+          showIdenticon
+          showCopyBtn
+          showEtherscanBtn
+          network={getNetwork()}
+        />
       </Block>
 
       {!!storedTx?.dataDecoded && <TxActionData dataDecoded={storedTx.dataDecoded} />}

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx

@@ -1,21 +1,15 @@
-import { Text } from '@gnosis.pm/safe-react-components'
-import { makeStyles } from '@material-ui/core/styles'
+import { Text, EthHashInfo } from '@gnosis.pm/safe-react-components'
 import React from 'react'
 import styled from 'styled-components'
 
-import { styles } from './styles'
-
+import { getNetwork } from 'src/config'
 import {
   isAddress,
   isArrayParameter,
 } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
-import { useWindowDimensions } from 'src/logic/hooks/useWindowDimensions'
-import SafeEtherscanLink from 'src/components/EtherscanLink'
-
-const useStyles = makeStyles(styles)
 
 const NestedWrapper = styled.div`
-  text-indent: 24px;
+  padding-left: 4px;
 `
 
 const StyledText = styled(Text)`
@@ -28,53 +22,38 @@ interface RenderValueProps {
   value: string | string[]
 }
 
-const EtherscanLink = ({ method, type, value }: RenderValueProps): React.ReactElement => {
-  const classes = useStyles()
-  const [cut, setCut] = React.useState(0)
-  const { width } = useWindowDimensions()
-
-  React.useEffect(() => {
-    if (width <= 900) {
-      setCut(4)
-    } else if (width <= 1024) {
-      setCut(8)
-    } else {
-      setCut(12)
-    }
-  }, [width])
-
-  if (isArrayParameter(type)) {
-    return (
-      <NestedWrapper>
-        {(value as string[]).map((value, index) => (
-          <SafeEtherscanLink type="address" key={`${method}-value-${index}`} cut={cut} value={value} />
-        ))}
-      </NestedWrapper>
-    )
-  }
-
-  return <SafeEtherscanLink type="address" className={classes.address} cut={cut} value={value as string} />
-}
-
 const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactElement => {
-  if (isArrayParameter(type)) {
-    return (
+  const getTextValue = (value: string) => <StyledText size="lg">{value}</StyledText>
+
+  const getArrayValue = (parentId: string, value: string[] | string) => (
+    <div>
+      [
       <NestedWrapper>
-        {(value as string[]).map((value, index) => (
-          <StyledText key={`${method}-value-${index}`} size="lg">
-            {value}
-          </StyledText>
-        ))}
-      </NestedWrapper>
+        {(value as string[]).map((currentValue, index) => {
+          const key = `${parentId}-value-${index}`
+          return (
+            <div key={key}>
+              {Array.isArray(currentValue) ? getArrayValue(key, currentValue) : getTextValue(currentValue)}
+            </div>
           )
+        })}
+      </NestedWrapper>
+      ]
+    </div>
+  )
+
+  if (isArrayParameter(type) || Array.isArray(value)) {
+    return getArrayValue(method, value)
   }
 
-  return <StyledText size="lg">{value as string}</StyledText>
+  return getTextValue(value as string)
 }
 
 const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
   if (isAddress(type)) {
-    return <EtherscanLink type={type} {...props} />
+    return (
+      <EthHashInfo hash={props.value as string} showCopyBtn showEtherscanBtn shortenHash={4} network={getNetwork()} />
+    )
   }
 
   return <GenericValue type={type} {...props} />

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx

@@ -63,7 +63,7 @@ const ExpandedTx = ({ cancelTx, tx }: ExpandedTxProps): React.ReactElement => {
     <>
       <Block className={classes.expandedTxBlock}>
         <Row>
-          <Col layout="column" xs={6}>
+          <Col layout="column" xs={6} className={classes.col}>
             <Block className={cn(classes.txDataContainer, (isIncomingTx || isCreationTx) && classes.incomingTxBlock)}>
               <div style={{ display: 'flex' }}>
                 <Bold className={classes.txHash}>Hash:</Bold>

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts

@@ -1,6 +1,10 @@
 import { border, lg, md } from 'src/theme/variables'
 
 const cssStyles = {
+  col: {
+    wordBreak: 'break-word',
+    whiteSpace: 'normal',
+  },
   expandedTxBlock: {
     borderBottom: `2px solid ${border}`,
   },