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;