v1.8.2 (#682)

* (Fix) Wrong value for ERC-20 tokens transfers (#679) The fix attempts to properly differentiate an ERC-721 from an ERC-20 token transaction by identifying if it's a `transfer` transaction looking for a `decimals` method in its code. It the later is not found, then it's considered an ERC-721. fixes #678 * (Fix) send tx from address book (#677) * fix: Send funds not working when selecting receipt from addressBook Also, this commit includes an intent to unify/simplify SendModal component fixes #632 * Set default value to txData for custom txs fixes #632 * bump version in package.json (#683) Co-authored-by: Fernando <[email protected]>
5afe · Mar 23, 2020 · 39bcf37 · 39bcf37
1 parent 7fae339
commit 39bcf37
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 226 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Allowing crypto users manage funds in a safer way",
   "homepage": "https://github.com/gnosis/safe-react#readme",
   "bugs": {

diff --git a/src/logic/tokens/utils/tokenHelpers.js b/src/logic/tokens/utils/tokenHelpers.js
@@ -6,6 +6,9 @@ import { type Token, makeToken } from '~/logic/tokens/store/model/token'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 
 export const ETH_ADDRESS = '0x000'
+export const SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH = '0x42842e0e'
+export const DECIMALS_METHOD_HASH = '313ce567'
+
 export const isEther = (symbol: string) => symbol === 'ETH'
 
 export const getEthAsToken = (balance: string) => {

diff --git a/src/routes/safe/components/AddressBook/index.jsx b/src/routes/safe/components/AddressBook/index.jsx
@@ -42,8 +42,7 @@ import RenameOwnerIcon from '~/routes/safe/components/Settings/ManageOwners/asse
 import type { OwnerRow } from '~/routes/safe/components/Settings/ManageOwners/dataFetcher'
 import RemoveOwnerIcon from '~/routes/safe/components/Settings/assets/icons/bin.svg'
 import RemoveOwnerIconDisabled from '~/routes/safe/components/Settings/assets/icons/disabled-bin.svg'
-import { extendedSafeTokensSelector } from '~/routes/safe/container/selector'
-import { addressBookQueryParamsSelector, safeSelector, safesListSelector } from '~/routes/safe/store/selectors'
+import { addressBookQueryParamsSelector, safesListSelector } from '~/routes/safe/store/selectors'
 
 type Props = {
   classes: Object,
@@ -86,10 +85,7 @@ const AddressBookTable = ({ classes }: Props) => {
     }
   }, [addressBook])
 
-  const safe = useSelector(safeSelector)
   const safesList = useSelector(safesListSelector)
-  const activeTokens = useSelector(extendedSafeTokensSelector)
-  const { address, ethBalance, name } = safe
 
   const newEntryModalHandler = (entry: AddressBookEntry) => {
     setEditCreateEntryModalOpen(false)
@@ -223,13 +219,9 @@ const AddressBookTable = ({ classes }: Props) => {
       />
       <SendModal
         activeScreenType="chooseTxType"
-        ethBalance={ethBalance}
         isOpen={sendFundsModalOpen}
         onClose={() => setSendFundsModalOpen(false)}
         recipientAddress={selectedEntry && selectedEntry.entry ? selectedEntry.entry.address : undefined}
-        safeAddress={address}
-        safeName={name}
-        tokens={activeTokens}
       />
     </>
   )

diff --git a/src/routes/safe/components/Balances/Collectibles/index.jsx b/src/routes/safe/components/Balances/Collectibles/index.jsx
@@ -10,7 +10,6 @@ import Paragraph from '~/components/layout/Paragraph'
 import type { NFTAssetsState, NFTTokensState } from '~/logic/collectibles/store/reducer/collectibles'
 import { nftAssetsSelector, nftTokensSelector } from '~/logic/collectibles/store/selectors'
 import SendModal from '~/routes/safe/components/Balances/SendModal'
-import { safeSelector } from '~/routes/safe/store/selectors'
 import { fontColor, lg, screenSm, screenXs } from '~/theme/variables'
 
 const useStyles = makeStyles({
@@ -80,7 +79,6 @@ const Collectibles = () => {
   const classes = useStyles()
   const [selectedToken, setSelectedToken] = React.useState({})
   const [sendNFTsModalOpen, setSendNFTsModalOpen] = React.useState(false)
-  const { address, ethBalance, name } = useSelector(safeSelector)
   const nftAssets: NFTAssetsState = useSelector(nftAssetsSelector)
   const nftTokens: NFTTokensState = useSelector(nftTokensSelector)
   const nftAssetsKeys = Object.keys(nftAssets)
@@ -124,11 +122,8 @@ const Collectibles = () => {
       </div>
       <SendModal
         activeScreenType="sendCollectible"
-        ethBalance={ethBalance}
         isOpen={sendNFTsModalOpen}
         onClose={() => setSendNFTsModalOpen(false)}
-        safeAddress={address}
-        safeName={name}
         selectedToken={selectedToken}
       />
     </Card>

diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx
@@ -2,7 +2,6 @@
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { makeStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
-import { List } from 'immutable'
 import React, { Suspense, useEffect, useState } from 'react'
 
 import Modal from '~/components/Modal'
@@ -33,16 +32,11 @@ type ActiveScreen =
   | 'reviewCollectible'
 
 type Props = {
-  onClose: () => void,
-  isOpen: boolean,
-  safeAddress: string,
-  safeName: string,
-  ethBalance: string,
-  tokens: List<Token>,
-  selectedToken?: string | NFTToken | {},
-  createTransaction?: Function,
   activeScreenType: ActiveScreen,
+  isOpen: boolean,
+  onClose: () => void,
   recipientAddress?: string,
+  selectedToken?: string | NFTToken | {},
 }
 
 type TxStateType =
@@ -71,18 +65,7 @@ const useStyles = makeStyles({
   },
 })
 
-const SendModal = ({
-  activeScreenType,
-  createTransaction,
-  ethBalance,
-  isOpen,
-  onClose,
-  recipientAddress,
-  safeAddress,
-  safeName,
-  selectedToken,
-  tokens,
-}: Props) => {
+const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, selectedToken }: Props) => {
   const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>(activeScreenType || 'chooseTxType')
   const [tx, setTx] = useState<TxStateType>({})
@@ -129,50 +112,26 @@ const SendModal = ({
         )}
         {activeScreen === 'sendFunds' && (
           <SendFunds
-            ethBalance={ethBalance}
             initialValues={tx}
             onClose={onClose}
-            onSubmit={handleTxCreation}
+            onNext={handleTxCreation}
             recipientAddress={recipientAddress}
-            safeAddress={safeAddress}
-            safeName={safeName}
             selectedToken={selectedToken}
-            tokens={tokens}
           />
         )}
         {activeScreen === 'reviewTx' && (
-          <ReviewTx
-            createTransaction={createTransaction}
-            ethBalance={ethBalance}
-            onClose={onClose}
-            safeAddress={safeAddress}
-            safeName={safeName}
-            setActiveScreen={setActiveScreen}
-            tokens={tokens}
-            tx={tx}
-          />
+          <ReviewTx onClose={onClose} onPrev={() => setActiveScreen('sendFunds')} tx={tx} />
         )}
         {activeScreen === 'sendCustomTx' && (
           <SendCustomTx
-            ethBalance={ethBalance}
             initialValues={tx}
             onClose={onClose}
-            onSubmit={handleCustomTxCreation}
+            onNext={handleCustomTxCreation}
             recipientAddress={recipientAddress}
-            safeAddress={safeAddress}
-            safeName={safeName}
           />
         )}
         {activeScreen === 'reviewCustomTx' && (
-          <ReviewCustomTx
-            createTransaction={createTransaction}
-            ethBalance={ethBalance}
-            onClose={onClose}
-            safeAddress={safeAddress}
-            safeName={safeName}
-            setActiveScreen={setActiveScreen}
-            tx={tx}
-          />
+          <ReviewCustomTx onClose={onClose} onPrev={() => setActiveScreen('sendCustomTx')} tx={tx} />
         )}
         {activeScreen === 'sendCollectible' && (
           <SendCollectible

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.jsx
@@ -2,7 +2,6 @@
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import { List } from 'immutable'
 import { withSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -30,8 +29,8 @@ import {
   getERC721TokenContract,
   getHumanFriendlyToken,
 } from '~/logic/tokens/store/actions/fetchTokens'
-import { type Token } from '~/logic/tokens/store/model/token'
 import { formatAmount } from '~/logic/tokens/utils/formatAmount'
+import { SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH } from '~/logic/tokens/utils/tokenHelpers'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
@@ -42,17 +41,12 @@ import { textShortener } from '~/utils/strings'
 
 const useStyles = makeStyles(styles)
 
-const SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH = '0x42842e0e'
-
 type Props = {
+  closeSnackbar: Function,
+  enqueueSnackbar: Function,
   onClose: () => void,
   onPrev: () => void,
-  classes: Object,
   tx: Object,
-  tokens: List<Token>,
-  createTransaction: Function,
-  enqueueSnackbar: Function,
-  closeSnackbar: Function,
 }
 
 const ReviewCollectible = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }: Props) => {

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
@@ -1,9 +1,10 @@
 // @flow
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import { withSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
 import ArrowDown from '../assets/arrow-down.svg'
 
@@ -26,44 +27,37 @@ import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
+import createTransaction from '~/routes/safe/store/actions/createTransaction'
+import { safeSelector } from '~/routes/safe/store/selectors'
 import { sm } from '~/theme/variables'
 
 type Props = {
+  closeSnackbar: () => void,
+  enqueueSnackbar: () => void,
   onClose: () => void,
-  setActiveScreen: Function,
-  classes: Object,
-  safeAddress: string,
-  safeName: string,
-  ethBalance: string,
+  onPrev: () => void,
   tx: Object,
-  createTransaction: Function,
-  enqueueSnackbar: Function,
-  closeSnackbar: Function,
 }
 
-const ReviewCustomTx = ({
-  classes,
-  closeSnackbar,
-  createTransaction,
-  enqueueSnackbar,
-  ethBalance,
-  onClose,
-  safeAddress,
-  safeName,
-  setActiveScreen,
-  tx,
-}: Props) => {
+const useStyles = makeStyles(styles)
+
+const ReviewCustomTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }: Props) => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const { address: safeAddress, ethBalance, name: safeName } = useSelector(safeSelector)
   const [gasCosts, setGasCosts] = useState<string>('< 0.001')
 
   useEffect(() => {
     let isCurrent = true
+
     const estimateGas = async () => {
-      const web3 = getWeb3()
-      const { fromWei, toBN } = web3.utils
+      const { fromWei, toBN } = getWeb3().utils
+      const txData = tx.data ? tx.data.trim() : ''
 
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.recipientAddress, tx.data.trim())
+      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.recipientAddress, txData)
       const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
       const formattedGasCosts = formatAmount(gasCostsAsEth)
+
       if (isCurrent) {
         setGasCosts(formattedGasCosts)
       }
@@ -79,18 +73,21 @@ const ReviewCustomTx = ({
   const submitTx = async () => {
     const web3 = getWeb3()
     const txRecipient = tx.recipientAddress
-    const txData = tx.data.trim()
-    const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0
-
-    createTransaction({
-      safeAddress,
-      to: txRecipient,
-      valueInWei: txValue,
-      txData,
-      notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-      enqueueSnackbar,
-      closeSnackbar,
-    })
+    const txData = tx.data ? tx.data.trim() : ''
+    const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : '0'
+
+    dispatch(
+      createTransaction({
+        safeAddress,
+        to: txRecipient,
+        valueInWei: txValue,
+        txData,
+        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        enqueueSnackbar,
+        closeSnackbar,
+      }),
+    )
+
     onClose()
   }
 
@@ -167,7 +164,7 @@ const ReviewCustomTx = ({
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
-        <Button minWidth={140} onClick={() => setActiveScreen('sendCustomTx')}>
+        <Button minWidth={140} onClick={onPrev}>
           Back
         </Button>
         <Button
@@ -186,4 +183,4 @@ const ReviewCustomTx = ({
   )
 }
 
-export default withStyles(styles)(withSnackbar(ReviewCustomTx))
+export default withSnackbar(ReviewCustomTx)