Change view for bytes parameters (#2028)

* Remove unused components

* replace shortVersionOf by textShortener

src/routes/safe/components/Transactions/TxList/HexEncodedData.tsx

@@ -4,7 +4,7 @@ import React, { ReactElement, useState } from 'react'
 
 import Paragraph from 'src/components/layout/Paragraph'
 import LinkWithRef from 'src/components/layout/Link'
-import { shortVersionOf } from 'src/logic/wallets/ethAddresses'
+import { textShortener } from 'src/utils/strings'
 
 export const styles = createStyles({
   txDataParagraph: {
@@ -18,16 +18,27 @@ export const styles = createStyles({
 
 const useStyles = makeStyles(styles)
 
-export const HexEncodedData = ({ hexData }: { hexData: string }): ReactElement => {
+export const HexEncodedData = ({
+  hexData,
+  title,
+  limit = 20,
+}: {
+  hexData: string
+  title?: string
+  limit?: number
+}): ReactElement => {
   const classes = useStyles()
   const [showTxData, setShowTxData] = useState(false)
-  const showExpandBtn = hexData.length > 20
+  const showExpandBtn = hexData.length > limit
+  const shortener = textShortener({ charsStart: 40, charsEnd: 0 })
 
   return (
     <div className="tx-hexData">
-      <Text size="xl" strong>
+      {title && (
-        Data (hex encoded):
+        <Text size="xl" strong>
-      </Text>
+          {title}:
+        </Text>
+      )}
       <Paragraph className={classes.txDataParagraph} noMargin size="md">
         {showExpandBtn ? (
           <>
@@ -46,7 +57,7 @@ export const HexEncodedData = ({ hexData }: { hexData: string }): ReactElement =
               </>
             ) : (
               <>
-                {shortVersionOf(hexData, 20)}{' '}
+                {shortener(hexData)}{' '}
                 <LinkWithRef
                   aria-label="Show details of the transaction"
                   className={classes.linkTxData}

src/routes/safe/components/Transactions/TxList/MethodValue.tsx

@@ -6,16 +6,13 @@ import {
   isAddress,
   isArrayParameter,
 } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
+import { HexEncodedData } from './HexEncodedData'
 import { getExplorerInfo } from 'src/config'
 
 const NestedWrapper = styled.div`
   padding-left: 4px;
 `
 
-const StyledText = styled(Text)`
-  white-space: normal;
-`
-
 interface RenderValueProps {
   method: string
   type: string
@@ -23,7 +20,7 @@ interface RenderValueProps {
 }
 
 const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactElement => {
-  const getTextValue = (value: string) => <StyledText size="lg">{value}</StyledText>
+  const getTextValue = (value: string) => <HexEncodedData limit={60} hexData={value} />
 
   const getArrayValue = (parentId: string, value: string[] | string) => (
     <div>
@@ -31,10 +28,12 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
       <NestedWrapper>
         {(value as string[]).map((currentValue, index) => {
           const key = `${parentId}-value-${index}`
-          return (
+          return Array.isArray(currentValue) ? (
             <Text key={key} size="xl">
-              {Array.isArray(currentValue) ? getArrayValue(key, currentValue) : getTextValue(currentValue)}
+              {getArrayValue(key, currentValue)}
             </Text>
+          ) : (
+            getTextValue(currentValue)
           )
         })}
       </NestedWrapper>

src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx

@@ -43,7 +43,7 @@ export const MultiSendDetails = ({ txData }: { txData: TransactionData }): React
   if (!txData.dataDecoded?.parameters) {
     // we render the hex encoded data
     if (txData.hexData) {
-      return <HexEncodedData hexData={txData.hexData} />
+      return <HexEncodedData title="Data (hex encoded)" hexData={txData.hexData} />
     }
 
     return null
@@ -64,7 +64,7 @@ export const MultiSendDetails = ({ txData }: { txData: TransactionData }): React
           details = <MethodDetails data={dataDecoded} />
         } else {
           // We couldn't decode it but we have data
-          details = data && <HexEncodedData hexData={data} />
+          details = data && <HexEncodedData title="Data (hex encoded)" hexData={data} />
         }
 
         return (

src/routes/safe/components/Transactions/TxList/TxData.tsx

@@ -52,7 +52,7 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
     // we render the hex encoded data
     return (
       <DetailsWithTxInfo txData={txData}>
-        <HexEncodedData hexData={txData.hexData} />
+        <HexEncodedData title="Data (hex encoded)" hexData={txData.hexData} />
       </DetailsWithTxInfo>
     )
   }

yarn.lock

@@ -3756,18 +3756,6 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@4.16.1":
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.16.1.tgz#da7a396dc7d0e01922acf102b76efff17320b328"
-  integrity sha512-0Hm3LSlMYFK17jO4iY3un1Ve9x1zLNn4EM50Lia+0EV99NdbK+cn0er7HC7IvBA23mBg3P+8dUkMXy4leL33UQ==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.16.1"
-    "@typescript-eslint/types" "4.16.1"
-    "@typescript-eslint/typescript-estree" "4.16.1"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
-
 "@typescript-eslint/experimental-utils@4.17.0", "@typescript-eslint/experimental-utils@^4.0.1":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.17.0.tgz#762c44aaa1a6a3c05b6d63a8648fb89b89f84c80"
@@ -3801,14 +3789,6 @@
     "@typescript-eslint/typescript-estree" "4.17.0"
     debug "^4.1.1"
 
-"@typescript-eslint/scope-manager@4.16.1":
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.16.1.tgz#244e2006bc60cfe46987e9987f4ff49c9e3f00d5"
-  integrity sha512-6IlZv9JaurqV0jkEg923cV49aAn8V6+1H1DRfhRcvZUrptQ+UtSKHb5kwTayzOYTJJ/RsYZdcvhOEKiBLyc0Cw==
-  dependencies:
-    "@typescript-eslint/types" "4.16.1"
-    "@typescript-eslint/visitor-keys" "4.16.1"
-
 "@typescript-eslint/scope-manager@4.17.0":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.17.0.tgz#f4edf94eff3b52a863180f7f89581bf963e3d37d"
@@ -3822,11 +3802,6 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
   integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
 
-"@typescript-eslint/types@4.16.1":
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.16.1.tgz#5ba2d3e38b1a67420d2487519e193163054d9c15"
-  integrity sha512-nnKqBwMgRlhzmJQF8tnFDZWfunXmJyuXj55xc8Kbfup4PbkzdoDXZvzN8//EiKR27J6vUSU8j4t37yUuYPiLqA==
-
 "@typescript-eslint/types@4.17.0":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.17.0.tgz#f57d8fc7f31b348db946498a43050083d25f40ad"
@@ -3846,19 +3821,6 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/typescript-estree@4.16.1":
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.16.1.tgz#c2fc46b05a48fbf8bbe8b66a63f0a9ba04b356f1"
-  integrity sha512-m8I/DKHa8YbeHt31T+UGd/l8Kwr0XCTCZL3H4HMvvLCT7HU9V7yYdinTOv1gf/zfqNeDcCgaFH2BMsS8x6NvJg==
-  dependencies:
-    "@typescript-eslint/types" "4.16.1"
-    "@typescript-eslint/visitor-keys" "4.16.1"
-    debug "^4.1.1"
-    globby "^11.0.1"
-    is-glob "^4.0.1"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
 "@typescript-eslint/typescript-estree@4.17.0":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.17.0.tgz#b835d152804f0972b80dbda92477f9070a72ded1"
@@ -3879,14 +3841,6 @@
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/visitor-keys@4.16.1":
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.16.1.tgz#d7571fb580749fae621520deeb134370bbfc7293"
-  integrity sha512-s/aIP1XcMkEqCNcPQtl60ogUYjSM8FU2mq1O7y5cFf3Xcob1z1iXWNB6cC43Op+NGRTFgGolri6s8z/efA9i1w==
-  dependencies:
-    "@typescript-eslint/types" "4.16.1"
-    eslint-visitor-keys "^2.0.0"
-
 "@typescript-eslint/visitor-keys@4.17.0":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.17.0.tgz#9c304cfd20287c14a31d573195a709111849b14d"