From 0f4ebc2fb986410bf77503bccd0ea95c57e73342 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 2 Sep 2020 12:59:09 -0300
Subject: [PATCH 1/4] Fix method values length in TXs

---
 .../Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
index fed5bafe3f..73bb924b82 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
@@ -15,7 +15,7 @@ import SafeEtherscanLink from 'src/components/EtherscanLink'
 const useStyles = makeStyles(styles)
 
 const NestedWrapper = styled.div`
-  text-indent: 24px;
+  word-break: break-word;
 `
 
 const StyledText = styled(Text)`

From 3d2982af4055bdfadd3b5e1bea474e91baed8222 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 3 Sep 2020 14:12:15 -0300
Subject: [PATCH 2/4] arrays Improvment

---
 .../TxDescription/CustomDescription.tsx       | 19 +++++++----
 .../ExpandedTx/TxDescription/Value.tsx        | 33 ++++++++++++-------
 .../TxsTable/ExpandedTx/index.tsx             |  2 +-
 .../Transactions/TxsTable/ExpandedTx/style.ts |  4 +++
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
index a4a8199c16..686b1ce381 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
@@ -24,6 +24,7 @@ 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'
 
 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 +35,9 @@ 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')};
 `
 const TxDetailsContent = styled.div`
   padding: 8px 8px 8px 16px;
@@ -46,6 +47,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,11 +58,11 @@ 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>
-        <Value method={data.method} type={param.type} value={param.value} />
+        </StyledMethodName>
+        <Value method={data.method} type={param.type} value={param.type} />
       </TxDetailsMethodParam>
     ))}
   </TxInfo>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
index 73bb924b82..7c95b2d545 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
@@ -15,7 +15,7 @@ import SafeEtherscanLink from 'src/components/EtherscanLink'
 const useStyles = makeStyles(styles)
 
 const NestedWrapper = styled.div`
-  word-break: break-word;
+  padding-left: 4px;
 `
 
 const StyledText = styled(Text)`
@@ -25,7 +25,7 @@ const StyledText = styled(Text)`
 interface RenderValueProps {
   method: string
   type: string
-  value: string | string[]
+  value: string | unknown[]
 }
 
 const EtherscanLink = ({ method, type, value }: RenderValueProps): React.ReactElement => {
@@ -57,19 +57,30 @@ const EtherscanLink = ({ method, type, value }: RenderValueProps): React.ReactEl
 }
 
 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: unknown[] | string) => (
+    <div>
+      [
       <NestedWrapper>
-        {(value as string[]).map((value, index) => (
-          <StyledText key={`${method}-value-${index}`} size="lg">
-            {value}
-          </StyledText>
-        ))}
+        {(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 => {
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
index 8298fb3c02..689cb8c02f 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
@@ -60,7 +60,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>
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts
index f149263b7d..d76074bef5 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts
+++ b/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}`,
   },

From e4852092a249cdcf45a0038dca12aff929085d7b Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 3 Sep 2020 15:02:41 -0300
Subject: [PATCH 3/4] Make use of EthHashInfo

---
 .../TxDescription/CustomDescription.tsx       | 28 ++++++++-----
 .../ExpandedTx/TxDescription/Value.tsx        | 42 +++----------------
 2 files changed, 23 insertions(+), 47 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
index 686b1ce381..ce61968f8c 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
+++ b/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'
@@ -25,6 +23,7 @@ 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'
@@ -38,6 +37,11 @@ const TxDetailsMethodName = styled(Text)`
 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;
@@ -62,7 +66,7 @@ const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => (
         <StyledMethodName size="lg" strong>
           {param.name}({param.type}):
         </StyledMethodName>
-        <Value method={data.method} type={param.type} value={param.type} />
+        <Value method={data.method} type={param.type} value={param.value} />
       </TxDetailsMethodParam>
     ))}
   </TxInfo>
@@ -81,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} />}
@@ -178,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 || recipientName === 'UNKNOWN' ? null : recipientName}
+          showIdenticon
+          showCopyBtn
+          showEtherscanBtn
+          network={getNetwork()}
+        />
       </Block>
 
       {!!storedTx?.dataDecoded && <TxActionData dataDecoded={storedTx.dataDecoded} />}
diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
index 7c95b2d545..1fd7ad2316 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
@@ -1,18 +1,12 @@
-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`
   padding-left: 4px;
@@ -28,34 +22,6 @@ interface RenderValueProps {
   value: string | unknown[]
 }
 
-const EtherscanLink = ({ method, type, value }: RenderValueProps): React.ReactElement => {
-  const classes = useStyles()
-  const [cut, setCut] = React.useState(undefined)
-  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 => {
   const getTextValue = (value: string) => <StyledText size="lg">{value}</StyledText>
 
@@ -85,7 +51,9 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
 
 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} />

From 8a2ae1b6aeed0fc91771900bdf1eb5d84b93d851 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 21 Sep 2020 13:43:34 -0300
Subject: [PATCH 4/4] review change

---
 .../Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
index 1fd7ad2316..7a0108e2c4 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx
@@ -19,13 +19,13 @@ const StyledText = styled(Text)`
 interface RenderValueProps {
   method: string
   type: string
-  value: string | unknown[]
+  value: string | string[]
 }
 
 const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactElement => {
   const getTextValue = (value: string) => <StyledText size="lg">{value}</StyledText>
 
-  const getArrayValue = (parentId: string, value: unknown[] | string) => (
+  const getArrayValue = (parentId: string, value: string[] | string) => (
     <div>
       [
       <NestedWrapper>