Skip to content
This repository has been archived by the owner on Nov 10, 2023. It is now read-only.

Display MethodDetails content on smaller screens #3309

Merged
merged 5 commits into from
Jan 18, 2022
Merged

Display MethodDetails content on smaller screens #3309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
83f290e
fix: Make tx data horizontally scrollable
usame-algan Jan 16, 2022
9f0ea63
build: Automatically line break tx data if there is not enough space
usame-algan Jan 17, 2022
2c28a9c
refactor: Use ValueWrapper in parent component
usame-algan Jan 17, 2022
d96db3e
refactor: Move ValueWrapper to parent component
usame-algan Jan 17, 2022
052f012
fix: Remove white-space nowrap from MethodDetails labels
usame-algan Jan 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/routes/safe/components/Transactions/TxList/MethodDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
padding-left: 24px;
display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')};
align-items: center;
flex-wrap: wrap;

p:first-of-type {
margin-right: ${({ isArrayParameter }) => (isArrayParameter ? '0' : '4px')};
Expand All @@ -18,10 +19,12 @@ const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`

const TxInfo = styled.div`
padding: 8px 0;
overflow-x: auto;
`

const StyledMethodName = styled(Text)`
white-space: nowrap;
const ValueWrapper = styled.div`
min-width: 50%;
flex-shrink: 0;
`

export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactElement => {
Expand All @@ -33,10 +36,12 @@ export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactEleme

{data.parameters?.map((param, index) => (
<TxDetailsMethodParam key={`${data.method}_param-${index}`} isArrayParameter={isArrayParameter(param.type)}>
<StyledMethodName size="xl" strong>
<Text size="xl" strong>
{param.name}({param.type}):
</StyledMethodName>
<Value method={data.method} type={param.type} value={param.value as string} />
</Text>
<ValueWrapper>
<Value method={data.method} type={param.type} value={param.value as string} />
</ValueWrapper>
</TxDetailsMethodParam>
))}
</TxInfo>
Expand Down
8 changes: 4 additions & 4 deletions src/routes/safe/components/Transactions/TxList/MethodValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
const getTextValue = (value: string) => <HexEncodedData limit={60} hexData={value} />

const getArrayValue = (parentId: string, value: string[] | string) => (
<div>
<>
[
<NestedWrapper>
{(value as string[]).map((currentValue, index) => {
Expand All @@ -38,7 +38,7 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
})}
</NestedWrapper>
]
</div>
</>
)

if (isArrayParameter(type) || Array.isArray(value)) {
Expand All @@ -51,7 +51,7 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
if (isArrayParameter(type) && isAddress(type)) {
return (
<div>
<>
[
<NestedWrapper>
{(props.value as string[]).map((address) => {
Expand All @@ -62,7 +62,7 @@ const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
})}
</NestedWrapper>
]
</div>
</>
)
}

Expand Down