Replace AddressInfo by EthHashInfo (#2103)

src/components/AddressInfo/index.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
-import CopyBtn from 'src/components/CopyBtn'
-import Identicon from 'src/components/Identicon'
-import Block from 'src/components/layout/Block'
-import Bold from 'src/components/layout/Bold'
-import Paragraph from 'src/components/layout/Paragraph'
-import { border, xs } from 'src/theme/variables'
-import styled from 'styled-components'
-import { ExplorerButton } from '@gnosis.pm/safe-react-components'
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  .icon-section {
-    margin-right: 10px;
-  }
-
-  .data-section {
-    display: flex;
-    flex-direction: column;
-
-    .address {
-      display: flex;
-    }
-  }
-`
-const StyledBlock = styled(Block)`
-  font-size: 12px;
-  line-height: 1.08;
-  letter-spacing: -0.5;
-  background-color: ${border};
-  width: fit-content;
-  padding: 5px 10px;
-  margin-top: ${xs};
-  border-radius: 3px;
-`
-interface Props {
-  safeName?: string
-  safeAddress: string
-  ethBalance?: string
-}
-
-const { nativeCoin } = getNetworkInfo()
-
-const AddressInfo = ({ ethBalance, safeAddress, safeName }: Props): React.ReactElement => {
-  return (
-    <Wrapper>
-      <div className="icon-section">
-        <Identicon address={safeAddress} diameter={32} />
-      </div>
-      <div className="data-section">
-        {safeName && (
-          <Paragraph noMargin weight="bolder">
-            {safeName}
-          </Paragraph>
-        )}
-        <div className="address">
-          <Paragraph noMargin weight="bolder">
-            {safeAddress}
-          </Paragraph>
-          <CopyBtn content={safeAddress} />
-          <ExplorerButton explorerUrl={getExplorerInfo(safeAddress)} />
-        </div>
-        {ethBalance && (
-          <StyledBlock>
-            <Paragraph noMargin>
-              Balance: <Bold data-testid="current-eth-balance">{`${ethBalance} ${nativeCoin.symbol}`}</Bold>
-            </Paragraph>
-          </StyledBlock>
-        )}
-      </div>
-    </Wrapper>
-  )
-}
-
-export default AddressInfo

src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { ModalFooterConfirmation } from '@gnosis.pm/safe-react-components'
+import { Text, EthHashInfo, ModalFooterConfirmation } from '@gnosis.pm/safe-react-components'
 import styled from 'styled-components'
 import { useDispatch } from 'react-redux'
 
@@ -20,11 +20,12 @@ import { EditableTxParameters } from 'src/routes/safe/components/Transactions/he
 import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
 import { md, lg, sm } from 'src/theme/variables'
 import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
-import AddressInfo from 'src/components/AddressInfo'
 import { DecodeTxs, BasicTxInfo } from 'src/components/DecodeTxs'
 import { fetchTxDecoder } from 'src/utils/decodeTx'
 import { DecodedData } from 'src/types/transactions/decode.d'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { getExplorerInfo } from 'src/config'
+import Block from 'src/components/layout/Block'
 
 import GasEstimationInfo from '../GasEstimationInfo'
 import { ConfirmTxModalProps, DecodedTxDetail } from '.'
@@ -53,6 +54,19 @@ const DecodeTxsWrapper = styled.div`
   margin: 24px -24px;
 `
 
+const StyledBlock = styled(Block)`
+  background-color: ${({ theme }) => theme.colors.separator};
+  width: fit-content;
+  padding: 5px 10px;
+  border-radius: 3px;
+  margin: 4px 0 0 40px;
+
+  display: flex;
+  > :nth-child(1) {
+    margin-right: 5px;
+  }
+`
+
 type Props = ConfirmTxModalProps & {
   areTxsMalformed: boolean
   showDecodedTxData: (decodedTxDetails: DecodedTxDetail) => void
@@ -81,6 +95,7 @@ export const ReviewConfirm = ({
   const isMultiSend = txs.length > 1
   const [decodedData, setDecodedData] = useState<DecodedData | null>(null)
   const dispatch = useDispatch()
+  const explorerUrl = getExplorerInfo(safeAddress)
 
   const txRecipient: string | undefined = useMemo(() => (isMultiSend ? MULTI_SEND_ADDRESS : txs[0]?.to), [
     txs,
@@ -198,7 +213,11 @@ export const ReviewConfirm = ({
 
           <Container>
             {/* Safe */}
-            <AddressInfo ethBalance={ethBalance} safeAddress={safeAddress} safeName={safeName} />
+            <EthHashInfo name={safeName} hash={safeAddress} showIdenticon showCopyBtn explorerUrl={explorerUrl} />
+            <StyledBlock>
+              <Text size="md">Balance:</Text>
+              <Text size="md" strong>{`${ethBalance} ${nativeCoin.symbol}`}</Text>
+            </StyledBlock>
 
             <DividerLine withArrow />
 
@@ -212,9 +231,7 @@ export const ReviewConfirm = ({
             <DecodeTxsWrapper>
               <DecodeTxs txs={txs} decodedData={decodedData} onTxItemClick={showDecodedTxData} />
             </DecodeTxsWrapper>
-
             {!isMultiSend && <DividerLine withArrow={false} />}
-
             {/* Warning gas estimation */}
             {params?.safeTxGas && (
               <div className="section">
@@ -227,7 +244,6 @@ export const ReviewConfirm = ({
                 />
               </div>
             )}
-
             {/* Tx Parameters */}
             <TxParametersDetail
               txParameters={txParameters}

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx

@@ -2,9 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { getNetworkInfo } from 'src/config'
+import { getNetworkInfo, getExplorerInfo } from 'src/config'
 import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import AddressInfo from 'src/components/AddressInfo'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Col from 'src/components/layout/Col'
@@ -30,6 +29,7 @@ import {
 import { useEstimateTransactionGas, EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
 import { TransactionFees } from 'src/components/TransactionsFees'
 import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
+import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 
 const useStyles = makeStyles(styles)
 
@@ -52,6 +52,7 @@ type Props = {
 const { nativeCoin } = getNetworkInfo()
 
 const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
+  const explorerUrl = getExplorerInfo(tx.contractAddress as string)
   const classes = useStyles()
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
@@ -144,7 +145,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
               </Paragraph>
             </Row>
             <Row align="center" margin="md">
-              <AddressInfo safeAddress={tx.contractAddress as string} />
+              <EthHashInfo hash={tx.contractAddress as string} showIdenticon showCopyBtn explorerUrl={explorerUrl} />
             </Row>
             <Row margin="xs">
               <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>