status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change view for bytes parameters (#2028) 

* Remove unused components

* replace shortVersionOf by textShortener
This commit is contained in:
Mati Dastugue 2021-03-16 06:55:25 -03:00 committed by GitHub
parent 8f16c4f18d
commit 34a8bcc259
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/routes/safe/components/Transactions/TxList/HexEncodedData.tsx
View File

@ -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>
Data (hex encoded):
</Text>
{title && (
<Text size="xl" strong>
{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}

13
src/routes/safe/components/Transactions/TxList/MethodValue.tsx
View File

@ -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>

4
src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx
View File

@ -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 (

2
src/routes/safe/components/Transactions/TxList/TxData.tsx
View File

@ -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>
)
}

46
yarn.lock
View File

@ -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"