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

Strip network prefix from the Address when calling EthHashInfo #3037

Merged
merged 2 commits into from
Nov 23, 2021
Merged

Strip network prefix from the Address when calling EthHashInfo #3037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c0964f
Strip network prefix from the Address when calling EthHashInfo
Nov 22, 2021
3c27177
Do not use chain prefix for TxHash and SafeTxHash in the Tx List
Nov 22, 2021
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
3 changes: 2 additions & 1 deletion src/components/PrefixedEthHashInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ReactElement } from 'react'
import { useSelector } from 'react-redux'
import { copyShortNameSelector, showShortNameSelector } from 'src/logic/appearance/selectors'
import { extractShortChainName } from 'src/routes/routes'
import getAddressWithoutNetworkPrefix from 'src/utils/getAddressWithoutNetworkPrefix'

type Props = Omit<Parameters<typeof EthHashInfo>[0], 'shouldShowShortName' | 'shouldCopyShortName'>

Expand All @@ -12,7 +13,7 @@ const PrefixedEthHashInfo = ({ hash, ...rest }: Props): ReactElement => {

return (
<EthHashInfo
hash={hash}
hash={getAddressWithoutNetworkPrefix(hash)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you extracting it here and not sending them via their respective props?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opted to implement it in the wrapper as a input sanitization. I don't think it invalidates the correct use of the hash prop.

Doing this in the wrapper is also a way to address it in one single place and to not repeat it every time we call the <PrefixedEthHashInfo /> component.

Let me know if it makes sense. It is a simple tweak otherwise.

Copy link
Member

@iamacook iamacook Nov 23, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes the most sense to do this within the component. If you are intent on doing it in the wrapper, I think it's cleaner and more understandable to parse the hash directly and output the props accordingly, i.e.

  const getPrefixedHashInfoProps = (hash: string, shouldShowShortName: boolean ): { shortName: string | undefined, hash: string }

  <EthHashInfo
    {...getPrefixedHashInfoProps(hash, shouldShowShortName)}
    shouldShowShortName={showChainPrefix}
    shouldCopyShortName={copyChainPrefix}
  />

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure how this improves the solution. My view is that shortName should be calculated independently of the hash and vice versa.

The way to go would be maybe update the <EthHashInfo /> to have the input sanitization as the component responsability.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamacook created a issue to tackle it 5afe/safe-react-components#171

shortName={extractShortChainName()}
shouldShowShortName={showChainPrefix}
shouldCopyShortName={copyChainPrefix}
Expand Down
4 changes: 2 additions & 2 deletions src/routes/safe/components/Transactions/TxList/TxInfoCreation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { getExplorerInfo } from 'src/config'
import { formatDateTime } from 'src/utils/date'
import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
import { NOT_AVAILABLE } from './utils'
import { PrefixedInlineEthHashInfo, TxDetailsContainer } from './styled'
import { InlineEthHashInfo, TxDetailsContainer } from './styled'
import { Creation } from '@gnosis.pm/safe-react-gateway-sdk'
import { useKnownAddress } from './hooks/useKnownAddress'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
Expand Down Expand Up @@ -34,7 +34,7 @@ export const TxInfoCreation = ({ transaction }: { transaction: Transaction }): R
<Text size="xl" strong as="span">
Transaction hash:{' '}
</Text>
<PrefixedInlineEthHashInfo
<InlineEthHashInfo
textSize="xl"
hash={txInfo.transactionHash}
shortenHash={8}
Expand Down
12 changes: 3 additions & 9 deletions src/routes/safe/components/Transactions/TxList/TxSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ReactElement } from 'react'
import { getExplorerInfo } from 'src/config'
import { formatDateTime } from 'src/utils/date'
import { ExpandedTxDetails, isMultiSigExecutionDetails } from 'src/logic/safe/store/models/types/gateway.d'
import { PrefixedInlineEthHashInfo } from './styled'
import { InlineEthHashInfo } from './styled'
import { NOT_AVAILABLE } from './utils'

export const TxSummary = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElement => {
Expand All @@ -22,13 +22,7 @@ export const TxSummary = ({ txDetails }: { txDetails: ExpandedTxDetails }): Reac
Transaction hash:{' '}
</Text>
{txHash ? (
<PrefixedInlineEthHashInfo
textSize="xl"
hash={txHash}
shortenHash={8}
showCopyBtn
explorerUrl={explorerUrl}
/>
<InlineEthHashInfo textSize="xl" hash={txHash} shortenHash={8} showCopyBtn explorerUrl={explorerUrl} />
) : (
<Text size="xl" as="span">
{NOT_AVAILABLE}
Expand All @@ -40,7 +34,7 @@ export const TxSummary = ({ txDetails }: { txDetails: ExpandedTxDetails }): Reac
<Text size="xl" strong as="span">
SafeTxHash:{' '}
</Text>
<PrefixedInlineEthHashInfo textSize="xl" hash={safeTxHash} shortenHash={8} showCopyBtn />
<InlineEthHashInfo textSize="xl" hash={safeTxHash} shortenHash={8} showCopyBtn />
</div>
)}
{nonce !== undefined && (
Expand Down
5 changes: 2 additions & 3 deletions src/routes/safe/components/Transactions/TxList/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Text, Accordion, AccordionDetails, AccordionSummary } from '@gnosis.pm/safe-react-components'
import { Text, Accordion, AccordionDetails, AccordionSummary, EthHashInfo } from '@gnosis.pm/safe-react-components'
import styled, { css } from 'styled-components'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'

export const Wrapper = styled.div`
display: flex;
Expand Down Expand Up @@ -467,7 +466,7 @@ export const OwnerListItem = styled.li`
}
`

export const PrefixedInlineEthHashInfo = styled(PrefixedEthHashInfo)`
export const InlineEthHashInfo = styled(EthHashInfo)`
display: inline-flex;

span {
Expand Down