fix: bytes params are truncated

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

@@ -30,7 +30,7 @@ export const HexEncodedData = ({
   const classes = useStyles()
   const [showTxData, setShowTxData] = useState(false)
   const showExpandBtn = hexData.length > limit
-  const shortener = textShortener({ charsStart: 40, charsEnd: 0 })
+  const shortener = textShortener({ charsStart: 25, charsEnd: 0 })
 
   return (
     <div className="tx-hexData">

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

@@ -7,6 +7,7 @@ import { camelCaseToSpaces } from 'src/utils/camelCaseToSpaces'
 import {
   isAddress,
   isArrayParameter,
+  isByte,
 } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
 
 const TxInfo = styled.div`
@@ -24,7 +25,7 @@ export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactEleme
 
       {data.parameters?.map((param, index) => {
         const isArrayValueParam = isArrayParameter(param.type) || Array.isArray(param.value)
-        const inlineType = !isArrayValueParam && isAddress(param.type) ? 'address' : undefined
+        const inlineType = isAddress(param.type) ? 'address' : isByte(param.type) ? 'bytes' : undefined
         return (
           <TxDataRow
             key={`${data.method}_param-${index}`}

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

@@ -31,6 +31,11 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
           const key = `${parentId}-value-${index}`
           return Array.isArray(currentValue) ? (
             <Text key={key} size="xl" as="span">
+              {index > 0 && (
+                <>
+                  ,<br />
+                </>
+              )}
               {getArrayValue(key, currentValue)}
             </Text>
           ) : (

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

@@ -6,6 +6,7 @@ import { InlineEthHashInfo, InlinePrefixedEthHashInfo, StyledGridRow } from './s
 import { getExplorerInfo } from 'src/config'
 import { getByteLength } from 'src/utils/getByteLength'
 import Value from 'src/routes/safe/components/Transactions/TxList/MethodValue'
+import { HexEncodedData } from 'src/routes/safe/components/Transactions/TxList/HexEncodedData'
 
 const FlexWrapper = styled.div<{ margin: number }>`
   display: flex;
@@ -23,7 +24,7 @@ const ValueWrapper = styled.div`
 
 type TxDataRowType = {
   children?: ReactNode
-  inlineType?: 'hash' | 'rawData' | 'address'
+  inlineType?: 'hash' | 'rawData' | 'address' | 'bytes'
   hasExplorer?: boolean
   title: string
   value?: string | null
@@ -46,7 +47,7 @@ const generateInlineTypeValue = (
           hash={value}
           shortenHash={8}
           showCopyBtn
-          explorerUrl={hasExplorer ? getExplorerInfo(value) : undefined}
+          explorerUrl={getExplorerInfo(value)}
         />
       )
     case 'hash':
@@ -66,6 +67,8 @@ const generateInlineTypeValue = (
           <CopyToClipboardBtn textToCopy={value} />
         </FlexWrapper>
       )
+    case 'bytes':
+      return <HexEncodedData limit={60} hexData={value} />
   }
   return null
 }
@@ -91,8 +94,8 @@ export const TxDataRow = ({
           <Value method={method} type={paramType} value={value} />
         </ValueWrapper>
       )}
-      {generateInlineTypeValue(inlineType, value, hasExplorer)}
-      {!inlineType && !isArray && value && (
+      {!isArray && generateInlineTypeValue(inlineType, value, hasExplorer)}
+      {!isArray && !inlineType && value && (
         <Text size="xl" as="span">
           {value}
         </Text>

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

@@ -520,7 +520,7 @@ export const StyledGridRow = styled.div`
   grid-template-columns: 1fr 2.5fr;
   gap: ${md};
   justify-content: flex-start;
-  max-width: 800px;
+  max-width: 900px;
 
   & > * {
     flex-shrink: 0;