review fixes

2020-07-31 15:21:17 -03:00 · 2020-07-31 15:21:17 -03:00 · df8e3f49df
parent 7896825161
commit df8e3f49df
6 changed files with 49 additions and 41 deletions
--- a/package.json
+++ b/package.json
@ -160,7 +160,7 @@
  },
  "dependencies": {
    "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#2b4635b",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#e163ab6",
    "@gnosis.pm/util-contracts": "2.0.6",
    "@ledgerhq/hw-transport-node-hid": "5.19.1",
    "@material-ui/core": "4.11.0",
--- a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
+++ b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
@ -1,7 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import * as React from 'react'
-import { AddressInfo, Identicon, Text } from '@gnosis.pm/safe-react-components'
-import styled from 'styled-components'
+import { AddressInfo, Text } from '@gnosis.pm/safe-react-components'

 import NetworkLabel from '../NetworkLabel'
 import CircleDot from 'src/components/Header/components/CircleDot'
@ -10,16 +9,6 @@ import Paragraph from 'src/components/layout/Paragraph'
 import WalletIcon from '../WalletIcon'
 import { connected as connectedBg, screenSm, sm } from 'src/theme/variables'

-const AddressWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  > div {
-    margin-left: 5px;
-    margin-top: 2px;
-  }
-`
-
 const useStyles = makeStyles({
  network: {
    fontFamily: 'Averta, sans-serif',
@ -97,16 +86,15 @@ const ProviderInfo = ({ connected, provider, userAddress, network }: ProviderInf
        </Paragraph>
        <div className={classes.providerContainer}>
          {connected ? (
-            <AddressWrapper>
-              <Identicon address={userAddress || 'random'} size="xs" />
            <AddressInfo
              address={userAddress}
              shortenAddress={4}
+              showIdenticon
+              identiconSize="xs"
              textColor={addressColor}
              textSize="sm"
              network={network}
            />
-            </AddressWrapper>
          ) : (
            <Text size="md" color={addressColor}>
              Connection Error
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CreationTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CreationTx/index.tsx
@ -1,10 +1,11 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
+import { AddressInfo } from '@gnosis.pm/safe-react-components'
+import { getNetwork } from 'src/config'

 import { formatDate } from 'src/routes/safe/components/Transactions/TxsTable/columns'
 import Bold from 'src/components/layout/Bold'
 import Paragraph from 'src/components/layout/Paragraph'
-import EtherscanLink from 'src/components/EtherscanLink'
 import Block from 'src/components/layout/Block'
 import { TransactionTypes } from 'src/routes/safe/store/models/types/transaction'

@ -39,15 +40,33 @@ export const CreationTx = ({ tx }) => {
      </Paragraph>
      <Block align="left" className={classes.txData}>
        <Bold className={classes.txHash}>Creator:</Bold>
-        {tx.creator ? <EtherscanLink cut={8} type="address" value={tx.creator} /> : 'n/a'}
+        {tx.creator ? (
+          <AddressInfo address={tx.creator} shortenAddress={4} showCopyBtn showEtherscanBtn network={getNetwork()} />
+        ) : (
+          'n/a'
+        )}
      </Block>
      <Block align="left" className={classes.txData}>
        <Bold className={classes.txHash}>Factory:</Bold>
-        {tx.factoryAddress ? <EtherscanLink cut={8} type="address" value={tx.factoryAddress} /> : 'n/a'}
+        {tx.factoryAddress ? (
+          <AddressInfo
+            address={tx.factoryAddress}
+            shortenAddress={4}
+            showCopyBtn
+            showEtherscanBtn
+            network={getNetwork()}
+          />
+        ) : (
+          'n/a'
+        )}
      </Block>
      <Block align="left" className={classes.txData}>
        <Bold className={classes.txHash}>Mastercopy:</Bold>
-        {tx.masterCopy ? <EtherscanLink cut={8} type="address" value={tx.masterCopy} /> : 'n/a'}
+        {tx.masterCopy ? (
+          <AddressInfo address={tx.masterCopy} shortenAddress={4} showCopyBtn showEtherscanBtn network={getNetwork()} />
+        ) : (
+          'n/a'
+        )}
      </Block>
    </>
  ) : null
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.tsx
@ -2,6 +2,8 @@ import { withStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { AddressInfo } from '@gnosis.pm/safe-react-components'
+import { getNetwork } from 'src/config'

 import CancelSmallFilledCircle from './assets/cancel-small-filled.svg'
 import ConfirmSmallFilledCircle from './assets/confirm-small-filled.svg'
@ -11,12 +13,9 @@ import ConfirmSmallRedCircle from './assets/confirm-small-red.svg'
 import PendingSmallYellowCircle from './assets/confirm-small-yellow.svg'
 import { styles } from './style'

-import EtherscanLink from 'src/components/EtherscanLink'
-import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Img from 'src/components/layout/Img'
-import Paragraph from 'src/components/layout/Paragraph'
 import { getNameFromAddressBook } from 'src/logic/addressBook/store/selectors'

 export const CONFIRM_TX_BTN_TEST_ID = 'confirm-btn'
@ -153,13 +152,15 @@ const OwnerComponent = ({
      <div className={classes.circleState}>
        <Img alt="" src={imgCircle} />
      </div>
-      <Identicon address={owner} className={classes.icon} diameter={32} />
-      <Block>
-        <Paragraph className={classes.name} noMargin>
-          {nameInAdbk}
-        </Paragraph>
-        <EtherscanLink className={classes.address} cut={4} type="address" value={owner} />
-      </Block>
+      <AddressInfo
+        address={owner}
+        name={nameInAdbk}
+        shortenAddress={4}
+        showIdenticon
+        showCopyBtn
+        showEtherscanBtn
+        network={getNetwork()}
+      />
      <Block className={classes.spacer} />
      {owner === userAddress && <Block>{isCancelTx ? rejectButton() : confirmButton()}</Block>}
      {owner === executor && <Block className={classes.executor}>Executor</Block>}
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
@ -58,7 +58,7 @@ const ExpandedTx = ({ cancelTx, tx }) => {
        <Row>
          <Col layout="column" xs={6}>
            <Block className={cn(classes.txDataContainer, (isIncomingTx || isCreationTx) && classes.incomingTxBlock)}>
-              <Block align="left" className={classes.txData}>
+              <div style={{ display: 'flex' }}>
                <Bold className={classes.txHash}>Hash:</Bold>
                {tx.executionTxHash ? (
                  <AddressInfo
@ -71,7 +71,7 @@ const ExpandedTx = ({ cancelTx, tx }) => {
                ) : (
                  'n/a'
                )}
-              </Block>
+              </div>
              {!isIncomingTx && !isCreationTx && (
                <Paragraph noMargin>
                  <Bold>Nonce: </Bold>
--- a/yarn.lock
+++ b/yarn.lock
@ -1337,9 +1337,9 @@
    solc "0.5.14"
    truffle "^5.1.21"

-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#2b4635b":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#e163ab6":
  version "0.2.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#2b4635b22bebfca0260486f1ae7a9a35b02d71c2"
+  resolved "https://github.com/gnosis/safe-react-components.git#e163ab6375ad384a39411104b6486c18a4238f27"
  dependencies:
    classnames "^2.2.6"
    polished "3.6.5"