Components support eip3770 prefixes

package.json

@@ -168,7 +168,7 @@
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-core-sdk": "^0.3.1",
     "@gnosis.pm/safe-deployments": "^1.2.0",
-    "@gnosis.pm/safe-react-components": "^0.8.0",
+    "@gnosis.pm/safe-react-components": "^0.8.5",
     "@gnosis.pm/safe-react-gateway-sdk": "^2.4.0",
     "@ledgerhq/hw-transport-node-hid-singleton": "6.3.0",
     "@material-ui/core": "^4.12.3",

src/components/App/ReceiveModal.tsx

@@ -6,20 +6,19 @@ import QRCode from 'qrcode.react'
 import { ChangeEvent, ReactElement, useState } from 'react'
 import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel'
 import Checkbox from '@material-ui/core/Checkbox/Checkbox'
-import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 import { useSelector } from 'react-redux'
 
 import Block from 'src/components/layout/Block'
 import Col from 'src/components/layout/Col'
 import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
+import PrefixedEthHashInfo from '../PrefixedEthHashInfo'
 import { border, fontColor, lg, md, screenSm, secondaryText } from 'src/theme/variables'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import { NetworkSettings } from 'src/config/networks/network'
 import { copyShortNameSelector } from 'src/logic/appearance/selectors'
 import { getPrefixedSafeAddressSlug } from 'src/routes/routes'
-import { IS_PRODUCTION } from 'src/utils/constants'
 
 const useStyles = (networkInfo: NetworkSettings) =>
   makeStyles(
@@ -86,7 +85,7 @@ const ReceiveModal = ({ onClose, safeAddress, safeName }: Props): ReactElement =
   const classes = useStyles(networkInfo)
 
   const copyShortName = useSelector(copyShortNameSelector)
-  const [shouldCopyShortName, setShouldCopyShortName] = useState<boolean>(IS_PRODUCTION ? false : copyShortName)
+  const [shouldCopyShortName, setShouldCopyShortName] = useState<boolean>(copyShortName)
 
   // Does not update store
   const handleCopyChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => setShouldCopyShortName(checked)
@@ -117,14 +116,12 @@ const ReceiveModal = ({ onClose, safeAddress, safeName }: Props): ReactElement =
         <Block className={classes.qrContainer}>
           <QRCode size={135} value={qrCodeString} />
         </Block>
-        {!IS_PRODUCTION && (
-          <FormControlLabel
-            control={<Checkbox checked={shouldCopyShortName} onChange={handleCopyChange} name="shouldCopyShortName" />}
-            label="Copy addresses with chain prefix."
-          />
-        )}
+        <FormControlLabel
+          control={<Checkbox checked={shouldCopyShortName} onChange={handleCopyChange} name="shouldCopyShortName" />}
+          label="Copy addresses with chain prefix."
+        />
         <Block className={classes.addressContainer} justify="center">
-          <EthHashInfo hash={safeAddress} showAvatar showCopyBtn explorerUrl={getExplorerInfo(safeAddress)} />
+          <PrefixedEthHashInfo hash={safeAddress} showAvatar showCopyBtn explorerUrl={getExplorerInfo(safeAddress)} />
         </Block>
       </Col>
       <Hairline />

src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import { makeStyles } from '@material-ui/core/styles'
-import { EthHashInfo, Identicon, Card } from '@gnosis.pm/safe-react-components'
+import { Identicon, Card } from '@gnosis.pm/safe-react-components'
 import { createStyles } from '@material-ui/core'
 
 import Spacer from 'src/components/Spacer'
@@ -11,6 +11,7 @@ import Hairline from 'src/components/layout/Hairline'
 import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import { background, connected as connectedBg, lg, md, sm, warning, xs } from 'src/theme/variables'
 import { getExplorerInfo } from 'src/config'
 import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
@@ -129,7 +130,7 @@ export const UserDetails = ({
         </Row>
         <Block className={classes.user} justify="center">
           {userAddress ? (
-            <EthHashInfo hash={userAddress} showCopyBtn explorerUrl={explorerUrl} shortenHash={4} />
+            <PrefixedEthHashInfo hash={userAddress} showCopyBtn explorerUrl={explorerUrl} shortenHash={4} />
           ) : (
             'Address not available'
           )}

src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx

@@ -1,10 +1,11 @@
 import { makeStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { EthHashInfo, Text } from '@gnosis.pm/safe-react-components'
+import { Text } from '@gnosis.pm/safe-react-components'
 
 import Col from 'src/components/layout/Col'
 import Paragraph from 'src/components/layout/Paragraph'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import WalletIcon from '../WalletIcon'
 import { connected as connectedBg, screenSm, sm } from 'src/theme/variables'
 import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
@@ -91,7 +92,7 @@ const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps):
         </Paragraph>
         <div className={classes.providerContainer}>
           {connected ? (
-            <EthHashInfo
+            <PrefixedEthHashInfo
               hash={userAddress}
               shortenHash={4}
               showAvatar

src/components/AppLayout/Sidebar/SafeHeader/index.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
+import { useSelector } from 'react-redux'
 import {
   Icon,
   FixedIcon,
-  EthHashInfo,
   Text,
   Identicon,
   Button,
@@ -12,9 +12,12 @@ import {
 
 import ButtonHelper from 'src/components/ButtonHelper'
 import FlexSpacer from 'src/components/FlexSpacer'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import { NetworkSettings } from 'src/config/networks/network.d'
 import { border, fontColor } from 'src/theme/variables'
+import { copyShortNameSelector } from 'src/logic/appearance/selectors'
+import { extractShortChainName } from 'src/routes/routes'
 
 export const TOGGLE_SIDEBAR_BTN_TESTID = 'TOGGLE_SIDEBAR_BTN'
 
@@ -77,13 +80,13 @@ const StyledTextLabel = styled(Text)`
   background-color: ${(props: StyledTextLabelProps) => props.networkInfo?.backgroundColor ?? border};
 `
 
-const StyldTextSafeName = styled(Text)`
+const StyledTextSafeName = styled(Text)`
   width: 90%;
   overflow: hidden;
   text-overflow: ellipsis;
 `
 
-const StyledEthHashInfo = styled(EthHashInfo)`
+const StyledPrefixedEthHashInfo = styled(PrefixedEthHashInfo)`
   p {
     color: ${({ theme }) => theme.colors.placeHolder};
     font-size: 14px;
@@ -123,6 +126,9 @@ const SafeHeader = ({
   onReceiveClick,
   onNewTransactionClick,
 }: Props): React.ReactElement => {
+  const copyChainPrefix = useSelector(copyShortNameSelector)
+  const shortName = extractShortChainName()
+
   if (!address) {
     return (
       <Container>
@@ -157,15 +163,15 @@ const SafeHeader = ({
         </IdenticonContainer>
 
         {/* SafeInfo */}
-        <StyldTextSafeName size="lg" center>
+        <StyledTextSafeName size="lg" center>
           {safeName}
-        </StyldTextSafeName>
-        <StyledEthHashInfo hash={address} shortenHash={4} textSize="sm" />
+        </StyledTextSafeName>
+        <StyledPrefixedEthHashInfo hash={address} shortenHash={4} textSize="sm" />
         <IconContainer>
           <ButtonHelper onClick={onReceiveClick}>
             <Icon size="sm" type="qrCode" tooltip="Show QR" />
           </ButtonHelper>
-          <CopyToClipboardBtn textToCopy={address} />
+          <CopyToClipboardBtn textToCopy={copyChainPrefix ? `${shortName}:${address}` : `${address}`} />
           <ExplorerButton explorerUrl={explorerUrl} />
         </IconContainer>
 

src/components/CustomIconText/index.tsx

@@ -1,5 +1,5 @@
-import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 import { ReactElement } from 'react'
+import PrefixedEthHashInfo from '../PrefixedEthHashInfo'
 
 type Props = {
   address: string
@@ -9,7 +9,7 @@ type Props = {
 }
 
 export const CustomIconText = ({ address, iconUrl, text, iconUrlFallback }: Props): ReactElement => (
-  <EthHashInfo
+  <PrefixedEthHashInfo
     hash={address}
     showHash={false}
     avatarSize="sm"

src/components/DecodeTxs/index.tsx

@@ -1,13 +1,14 @@
 import { ReactElement } from 'react'
 import styled from 'styled-components'
 import { Transaction } from '@gnosis.pm/safe-apps-sdk-v1'
-import { Text, EthHashInfo, CopyToClipboardBtn, IconText, FixedIcon } from '@gnosis.pm/safe-react-components'
+import { Text, CopyToClipboardBtn, IconText, FixedIcon } from '@gnosis.pm/safe-react-components'
 import get from 'lodash.get'
 import { hexToBytes } from 'web3-utils'
 
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import { DecodedData, DecodedDataBasicParameter, DecodedDataParameterValue } from 'src/types/transactions/decode.d'
 import { DecodedTxDetail } from 'src/routes/safe/components/Apps/components/ConfirmTxModal'
+import PrefixedEthHashInfo from '../PrefixedEthHashInfo'
 
 const FlexWrapper = styled.div<{ margin: number }>`
   display: flex;
@@ -84,7 +85,7 @@ export const BasicTxInfo = ({
         <Text size="lg" strong>
           {`Send ${txValue} ${nativeCoin.symbol} to:`}
         </Text>
-        <EthHashInfo
+        <PrefixedEthHashInfo
           hash={txRecipient}
           showAvatar
           textSize="lg"
@@ -112,7 +113,7 @@ export const getParameterElement = (parameter: DecodedDataBasicParameter, index:
 
   if (parameter.type === 'address') {
     valueElement = (
-      <EthHashInfo
+      <PrefixedEthHashInfo
         hash={parameter.value}
         showAvatar
         textSize="lg"

src/components/PrefixedEthHashInfo/index.test.tsx

@@ -0,0 +1,39 @@
+import PrefixedEthHashInfo from '.'
+import { render, screen } from 'src/utils/test-utils'
+
+const hash = '0x69904ff6d6100799344E5C9A2806936318F6ba4f'
+jest.mock('src/routes/routes', () => {
+  const original = jest.requireActual('src/routes/routes')
+  return {
+    ...original,
+    extractShortChainName: () => 'arb',
+  }
+})
+
+describe('<PrefixedEthHashInfo>', () => {
+  it('Renders PrefixedEthHashInfo without shortName', () => {
+    const customState = {
+      appearance: {
+        showShortName: false,
+      },
+    }
+
+    render(<PrefixedEthHashInfo hash={hash} />, customState)
+
+    expect(screen.queryByText('arb:')).not.toBeInTheDocument()
+    expect(screen.getByText(hash)).toBeInTheDocument()
+  })
+
+  it('Renders PrefixedEthHashInfo with shortName', () => {
+    const customState = {
+      appearance: {
+        showShortName: true,
+      },
+    }
+
+    render(<PrefixedEthHashInfo hash={hash} />, customState)
+
+    expect(screen.queryByText('arb:')).toBeInTheDocument()
+    expect(screen.getByText(hash)).toBeInTheDocument()
+  })
+})

src/components/PrefixedEthHashInfo/index.tsx

@@ -0,0 +1,24 @@
+import { EthHashInfo } from '@gnosis.pm/safe-react-components'
+import { ReactElement } from 'react'
+import { useSelector } from 'react-redux'
+import { copyShortNameSelector, showShortNameSelector } from 'src/logic/appearance/selectors'
+import { extractShortChainName } from 'src/routes/routes'
+
+type Props = Omit<Parameters<typeof EthHashInfo>[0], 'shouldShowShortName' | 'shouldCopyShortName'>
+
+const PrefixedEthHashInfo = ({ hash, ...rest }: Props): ReactElement => {
+  const showChainPrefix = useSelector(showShortNameSelector)
+  const copyChainPrefix = useSelector(copyShortNameSelector)
+
+  return (
+    <EthHashInfo
+      hash={hash}
+      shortName={extractShortChainName()}
+      shouldShowShortName={showChainPrefix}
+      shouldCopyShortName={copyChainPrefix}
+      {...rest}
+    />
+  )
+}
+
+export default PrefixedEthHashInfo

src/components/SafeListSidebar/SafeList/SafeListItem.tsx

@@ -1,4 +1,4 @@
-import { EthHashInfo, Text, Icon } from '@gnosis.pm/safe-react-components'
+import { Text, Icon } from '@gnosis.pm/safe-react-components'
 import { useEffect, useRef, ReactElement } from 'react'
 import { useHistory } from 'react-router'
 import ListItem from '@material-ui/core/ListItem/ListItem'
@@ -7,6 +7,7 @@ import styled from 'styled-components'
 
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import Link from 'src/components/layout/Link'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { useSelector } from 'react-redux'
 import { addressBookName } from 'src/logic/addressBook/store/selectors'
@@ -26,7 +27,7 @@ const StyledIcon = styled(Icon)<{ checked: boolean }>`
   ${({ checked }) => (checked ? { marginRight: '4px' } : { visibility: 'hidden', width: '28px' })}
 `
 
-const StyledEthHashInfo = styled(EthHashInfo)`
+const StyledPrefixedEthHashInfo = styled(PrefixedEthHashInfo)`
   & > div > p:first-of-type {
     width: 210px;
     white-space: nowrap;
@@ -61,6 +62,7 @@ const SafeListItem = ({
   const safeRef = useRef<HTMLDivElement>(null)
   const nativeCoinSymbol = getNetworkConfigById(networkId)?.network?.nativeCoin?.symbol ?? 'ETH'
   const showAddSafeLink = !isSafeAdded(loadedSafes, address)
+  const shortName = getShortChainNameById(networkId)
 
   useEffect(() => {
     if (isCurrentSafe && shouldScrollToSafe) {
@@ -86,7 +88,7 @@ const SafeListItem = ({
   return (
     <ListItem button onClick={handleOpenSafe} ref={safeRef}>
       <StyledIcon type="check" size="md" color="primary" checked={isCurrentSafe} />
-      <StyledEthHashInfo hash={address} name={safeName} showAvatar shortenHash={4} />
+      <StyledPrefixedEthHashInfo hash={address} name={safeName} shortName={shortName} showAvatar shortenHash={4} />
       <ListItemSecondaryAction>
         {ethBalance ? (
           `${formatAmount(ethBalance)} ${nativeCoinSymbol}`

src/routes/CreateSafePage/steps/ReviewNewSafeStep.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, useEffect } from 'react'
 import { useForm } from 'react-final-form'
 import { useSelector } from 'react-redux'
-import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 import styled from 'styled-components'
 import TableContainer from '@material-ui/core/TableContainer'
 
@@ -22,6 +21,7 @@ import {
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import { useEstimateSafeCreationGas } from 'src/logic/hooks/useEstimateSafeCreationGas'
 import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import { useStepper } from 'src/components/Stepper/stepperContext'
 import { providerNameSelector } from 'src/logic/wallets/store/selectors'
 
@@ -114,7 +114,7 @@ function ReviewNewSafeStep(): ReactElement | null {
               <React.Fragment key={`owner-${addressFieldName}`}>
                 <OwnersAddressesContainer>
                   <Col align="center" xs={12} data-testid={`create-safe-owner-details-${ownerAddress}`}>
-                    <EthHashInfo
+                    <PrefixedEthHashInfo
                       hash={ownerAddress}
                       name={ownerName}
                       showAvatar
@@ -163,7 +163,7 @@ const OwnersAddressesContainer = styled(Row)`
   padding-left: ${lg};
 `
 const DescriptionContainer = styled(Row)`
-  background-colo: ${background};
+  background-color: ${background};
   padding: ${lg};
   text-align: center;
 `

src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx

@@ -2,7 +2,6 @@ import { ReactElement } from 'react'
 import { useForm } from 'react-final-form'
 import styled from 'styled-components'
 import TableContainer from '@material-ui/core/TableContainer'
-import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 
 import Block from 'src/components/layout/Block'
 import Col from 'src/components/layout/Col'
@@ -11,6 +10,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import Field from 'src/components/forms/Field'
 import TextField from 'src/components/forms/TextField'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import { disabled, extraSmallFontSize, lg, md, sm } from 'src/theme/variables'
 import { minMaxLength } from 'src/components/forms/validator'
 import { getExplorerInfo } from 'src/config'
@@ -56,7 +56,7 @@ function LoadSafeOwnersStep(): ReactElement {
                 </Col>
                 <Col xs={8}>
                   <OwnerAddressContainer>
-                    <EthHashInfo hash={address} showAvatar showCopyBtn explorerUrl={getExplorerInfo(address)} />
+                    <PrefixedEthHashInfo hash={address} showAvatar showCopyBtn explorerUrl={getExplorerInfo(address)} />
                   </OwnerAddressContainer>
                 </Col>
               </OwnerContainer>