diff --git a/src/routes/safe/components/Transactions/TxList/HexEncodedData.tsx b/src/routes/safe/components/Transactions/TxList/HexEncodedData.tsx
index 866b8472a9..debcf5904b 100644
--- a/src/routes/safe/components/Transactions/TxList/HexEncodedData.tsx
+++ b/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 (
diff --git a/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx b/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx
index 542b829ea8..b7dd5c92c8 100644
--- a/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx
+++ b/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 (
+ {index > 0 && (
+ <>
+ ,
+ >
+ )}
{getArrayValue(key, currentValue)}
) : (
diff --git a/src/routes/safe/components/Transactions/TxList/TxDataRow.tsx b/src/routes/safe/components/Transactions/TxList/TxDataRow.tsx
index a09384fa91..1071fc36e4 100644
--- a/src/routes/safe/components/Transactions/TxList/TxDataRow.tsx
+++ b/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 = (
)
+ case 'bytes':
+ return
}
return null
}
@@ -91,8 +94,8 @@ export const TxDataRow = ({
)}
- {generateInlineTypeValue(inlineType, value, hasExplorer)}
- {!inlineType && !isArray && value && (
+ {!isArray && generateInlineTypeValue(inlineType, value, hasExplorer)}
+ {!isArray && !inlineType && value && (
{value}
diff --git a/src/routes/safe/components/Transactions/TxList/styled.tsx b/src/routes/safe/components/Transactions/TxList/styled.tsx
index 1d62d91f6f..f87cc21a23 100644
--- a/src/routes/safe/components/Transactions/TxList/styled.tsx
+++ b/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;