Fix #596: Notification when safe is already updated (#599)

* Fix notification of update if the safe is already updated

* Makes the notification clickable
Displays the notification for owners only

* Identify upgrade tx

* Add red badge to Settings tab

* Fixs Padding
Removes the red dot if the user is not an owner

Co-authored-by: Fernando <fernando.greco@gmail.com>

src/logic/notifications/notificationTypes.js

@@ -238,7 +238,7 @@ export const NOTIFICATIONS: Notifications = {
 
   // Safe Version
   SAFE_NEW_VERSION_AVAILABLE: {
-    message: 'There is a new version available for this Safe',
+    message: 'There is a new version available for this Safe. Update now!',
     options: { variant: WARNING, persist: false, preventDuplicate: true },
   },
 }

src/logic/tokens/utils/tokenHelpers.js

@@ -53,3 +53,11 @@ export const isAddressAToken = async (tokenAddress: string) => {
 
 export const isTokenTransfer = (data: string, value: number): boolean =>
   !!data && data.substring(0, 10) === '0xa9059cbb' && value === 0
+
+export const isMultisendTransaction = (data: string, value: number): boolean =>
+  !!data && data.substring(0, 10) === '0x8d80ff0a' && value === 0
+
+// f08a0323 - setFallbackHandler (308, 8)
+// 7de7edef - changeMasterCopy (550, 8)
+export const isUpgradeTransaction = (data: string) =>
+  !!data && data.substr(308, 8) === 'f08a0323' && data.substr(550, 8) === '7de7edef'

src/routes/safe/components/Layout.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames/bind'
 import { Switch, Redirect, Route, withRouter } from 'react-router-dom'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
+import Badge from '@material-ui/core/Badge'
 import CallMade from '@material-ui/icons/CallMade'
 import CallReceived from '@material-ui/icons/CallReceived'
 import { withStyles } from '@material-ui/core/styles'
@@ -35,6 +36,7 @@ import { AddressBookIcon } from './assets/AddressBookIcon'
 import { TransactionsIcon } from './assets/TransactionsIcon'
 import { BalancesIcon } from './assets/BalancesIcon'
 import { AppsIcon } from './assets/AppsIcon'
+import { getSafeVersion } from '~/logic/safe/utils/safeVersion'
 
 export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
 export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
@@ -102,6 +104,23 @@ const Layout = (props: Props) => {
     onClose: null,
   })
 
+  const [needUpdate, setNeedUpdate] = useState(false)
+
+  React.useEffect(() => {
+    const checkUpdateRequirement = async () => {
+      let safeVersion = {}
+
+      try {
+        safeVersion = await getSafeVersion(safe.address)
+      } catch (e) {
+        console.error('failed to check version', e)
+      }
+      setNeedUpdate(safeVersion.needUpdate)
+    }
+
+    checkUpdateRequirement()
+  }, [safe && safe.address])
+
   const handleCallToRouter = (_, value) => {
     const { history } = props
 
@@ -147,11 +166,19 @@ const Layout = (props: Props) => {
       Apps
     </>
   )
-
+  
   const labelSettings = (
     <>
       <SettingsIcon />
-      Settings
+      <Badge
+        badgeContent=""
+        variant="dot"
+        invisible={!needUpdate || !granted}
+        color="error"
+        style={{ paddingRight: '10px' }}
+      >
+        Settings
+      </Badge>
     </>
   )
   const labelBalances = (

src/routes/safe/components/Settings/index.jsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import cn from 'classnames'
 import { List } from 'immutable'
 import { connect } from 'react-redux'
+import Badge from '@material-ui/core/Badge'
 import { withStyles } from '@material-ui/core/styles'
 import Paragraph from '~/components/layout/Paragraph'
 import { OwnersIcon } from './assets/icons/OwnersIcon'
@@ -25,12 +26,14 @@ import { styles } from './style'
 import RemoveSafeIcon from './assets/icons/bin.svg'
 import type { Safe } from '~/routes/safe/store/models/safe'
 import type { AddressBook } from '~/logic/addressBook/model/addressBook'
+import { getSafeVersion } from '~/logic/safe/utils/safeVersion'
 
 export const OWNERS_SETTINGS_TAB_TEST_ID = 'owner-settings-tab'
 
 type State = {
   showRemoveSafe: boolean,
   menuOptionIndex: number,
+  needUpdate: boolean,
 }
 
 type Props = Actions & {
@@ -63,9 +66,25 @@ class Settings extends React.Component<Props, State> {
     this.state = {
       showRemoveSafe: false,
       menuOptionIndex: 1,
+      needUpdate: false,
     }
   }
 
+  componentDidMount(): void {
+    const checkUpdateRequirement = async () => {
+      let safeVersion = {}
+
+      try {
+        safeVersion = await getSafeVersion(this.props.safe.address)
+      } catch (e) {
+        console.error('failed to check version', e)
+      }
+      this.setState({ needUpdate: safeVersion.needUpdate })
+    }
+
+    checkUpdateRequirement()
+  }
+
   handleChange = menuOptionIndex => () => {
     this.setState({ menuOptionIndex })
   }
@@ -124,7 +143,9 @@ class Settings extends React.Component<Props, State> {
                 onClick={this.handleChange(1)}
               >
                 <SafeDetailsIcon />
-                Safe details
+                <Badge badgeContent=" " variant="dot" invisible={!this.state.needUpdate || !granted} color="error" style={{paddingRight: '10px'}}>
+                  Safe details
+                </Badge>
               </Row>
               <Hairline className={classes.hairline} />
               <Row

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx

@@ -171,6 +171,7 @@ const TxDescription = ({ tx, classes }: Props) => {
     cancellationTx,
     customTx,
     creationTx,
+    upgradeTx,
     data,
   } = getTxData(tx)
   const amount = getTxAmount(tx)
@@ -179,8 +180,11 @@ const TxDescription = ({ tx, classes }: Props) => {
       {modifySettingsTx && (
         <SettingsDescription removedOwner={removedOwner} newThreshold={newThreshold} addedOwner={addedOwner} />
       )}
-      {customTx && <CustomDescription data={data} amount={amount} recipient={recipient} classes={classes} />}
-      {!cancellationTx && !modifySettingsTx && !customTx && !creationTx && (
+      {!upgradeTx && customTx && (
+        <CustomDescription data={data} amount={amount} recipient={recipient} classes={classes} />
+      )}
+      {upgradeTx && <div>{data}</div>}
+      {!cancellationTx && !modifySettingsTx && !customTx && !creationTx && !upgradeTx && (
         <TransferDescription amount={amount} recipient={recipient} />
       )}
     </Block>

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.js

@@ -15,6 +15,16 @@ type DecodedTxData = {
   data: string,
 }
 
+const getSafeVersion = (data: string) => {
+  const contractAddress = data.substr(582, 40).toLowerCase()
+
+  return (
+    {
+      '34cfac646f301356faa8b21e94227e3583fe3f5f': '1.1.1',
+    }[contractAddress] || 'X.x.x'
+  )
+}
+
 export const getTxData = (tx: Transaction): DecodedTxData => {
   const web3 = getWeb3()
   const { toBN, fromWei } = web3.utils
@@ -57,6 +67,9 @@ export const getTxData = (tx: Transaction): DecodedTxData => {
     txData.cancellationTx = true
   } else if (tx.creationTx) {
     txData.creationTx = true
+  } else if (tx.upgradeTx) {
+    txData.upgradeTx = true
+    txData.data = `The contract of this Safe is upgraded to Version ${getSafeVersion(tx.data)}`
   } else {
     txData.recipient = tx.recipient
     txData.value = 0

src/routes/safe/components/Transactions/TxsTable/TxType/index.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph/'
 import Img from '~/components/layout/Img'
@@ -12,7 +12,6 @@ import SettingsTxIcon from './assets/settings.svg'
 import { styles } from './style'
 
 type Props = {
-  classes: Object,
   txType: TransactionType,
 }
 
@@ -23,6 +22,7 @@ const typeToIcon = {
   settings: SettingsTxIcon,
   creation: SettingsTxIcon,
   cancellation: SettingsTxIcon,
+  upgrade: SettingsTxIcon,
 }
 
 const typeToLabel = {
@@ -32,15 +32,22 @@ const typeToLabel = {
   settings: 'Modify settings',
   creation: 'Safe created',
   cancellation: 'Cancellation transaction',
+  upgrade: 'Contract Upgrade',
 }
 
-const TxType = ({ classes, txType }: Props) => (
-  <Block className={classes.container}>
-    <Img src={typeToIcon[txType]} alt={typeToLabel[txType]} className={classes.img} />
-    <Paragraph className={classes.type} noMargin>
-      {typeToLabel[txType]}
-    </Paragraph>
-  </Block>
-)
+const useStyles = makeStyles(styles)
 
-export default withStyles(styles)(TxType)
+const TxType = ({ txType }: Props) => {
+  const classes = useStyles()
+
+  return (
+    <Block className={classes.container}>
+      <Img src={typeToIcon[txType]} alt={typeToLabel[txType]} className={classes.img} />
+      <Paragraph className={classes.type} noMargin>
+        {typeToLabel[txType]}
+      </Paragraph>
+    </Block>
+  )
+}
+
+export default TxType

src/routes/safe/components/Transactions/TxsTable/columns.js

@@ -76,6 +76,8 @@ const getTransactionTableData = (tx: Transaction, cancelTx: ?Transaction): Trans
     txType = 'custom'
   } else if (tx.creationTx) {
     txType = 'creation'
+  } else if (tx.upgradeTx) {
+    txType = 'upgrade'
   }
 
   return {

src/routes/safe/store/actions/fetchTransactions.js

@@ -17,7 +17,7 @@ import { getLocalSafe } from '~/logic/safe/utils'
 import { addTransactions } from './addTransactions'
 import { addIncomingTransactions } from './addIncomingTransactions'
 import { getHumanFriendlyToken } from '~/logic/tokens/store/actions/fetchTokens'
-import { isTokenTransfer } from '~/logic/tokens/utils/tokenHelpers'
+import { isMultisendTransaction, isTokenTransfer, isUpgradeTransaction } from '~/logic/tokens/utils/tokenHelpers'
 import { decodeParamsFromSafeMethod } from '~/logic/contracts/methodIds'
 import { ALTERNATIVE_TOKEN_ABI } from '~/logic/tokens/utils/alternativeAbi'
 import type { TransactionProps } from '~/routes/safe/store/models/transaction'
@@ -89,7 +89,9 @@ export const buildTransactionFrom = async (safeAddress: string, tx: TxServiceMod
   const modifySettingsTx = sameAddress(tx.to, safeAddress) && Number(tx.value) === 0 && !!tx.data
   const cancellationTx = sameAddress(tx.to, safeAddress) && Number(tx.value) === 0 && !tx.data
   const isSendTokenTx = isTokenTransfer(tx.data, Number(tx.value))
-  const customTx = !sameAddress(tx.to, safeAddress) && !!tx.data && !isSendTokenTx
+  const isMultiSendTx = isMultisendTransaction(tx.data, Number(tx.value))
+  const customTx = !sameAddress(tx.to, safeAddress) && !!tx.data && !isSendTokenTx && !isMultiSendTx
+  const isUpgradeTx = isMultiSendTx && isUpgradeTransaction(tx.data)
 
   let refundParams = null
   if (tx.gasPrice > 0) {
@@ -165,6 +167,8 @@ export const buildTransactionFrom = async (safeAddress: string, tx: TxServiceMod
     executionTxHash: tx.transactionHash,
     safeTxHash: tx.safeTxHash,
     isTokenTransfer: isSendTokenTx,
+    multiSendTx: isMultiSendTx,
+    upgradeTx: isUpgradeTx,
     decodedParams,
     modifySettingsTx,
     customTx,

src/routes/safe/store/middleware/notificationsMiddleware.js

@@ -12,10 +12,11 @@ import { enhanceSnackbarForAction, NOTIFICATIONS } from '~/logic/notifications'
 import closeSnackbarAction from '~/logic/notifications/store/actions/closeSnackbar'
 import { getIncomingTxAmount } from '~/routes/safe/components/Transactions/TxsTable/columns'
 import updateSafe from '~/routes/safe/store/actions/updateSafe'
-import { safesMapSelector } from '~/routes/safe/store/selectors'
+import { safeParamAddressFromStateSelector, safesMapSelector } from '~/routes/safe/store/selectors'
 import { isUserOwner } from '~/logic/wallets/ethAddresses'
 import { ADD_SAFE } from '~/routes/safe/store/actions/addSafe'
 import { getSafeVersion } from '~/logic/safe/utils/safeVersion'
+import { grantedSelector } from '~/routes/safe/container/selector'
 
 const watchedActions = [ADD_TRANSACTIONS, ADD_INCOMING_TRANSACTIONS, ADD_SAFE]
 
@@ -106,12 +107,27 @@ const notificationsMiddleware = (store: Store<GlobalState>) => (next: Function)
         break
       }
       case ADD_SAFE: {
-        const { safe } = action.payload
-        const { needUpdate } = await getSafeVersion(safe.address)
+        const state: GlobalState = store.getState()
+        const currentSafeAddress = safeParamAddressFromStateSelector(state)
+        const isUserOwner = grantedSelector(state)
+        const { needUpdate } = await getSafeVersion(currentSafeAddress)
 
-        const notificationKey = `${safe.address}`
-        if (needUpdate) {
-          dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.SAFE_NEW_VERSION_AVAILABLE, notificationKey)))
+        const notificationKey = `${currentSafeAddress}`
+        const onNotificationClicked = () => {
+          dispatch(closeSnackbarAction({ key: notificationKey }))
+          dispatch(push(`/safes/${currentSafeAddress}/settings`))
+        }
+
+        if (needUpdate && isUserOwner) {
+          dispatch(
+            enqueueSnackbar(
+              enhanceSnackbarForAction(
+                NOTIFICATIONS.SAFE_NEW_VERSION_AVAILABLE,
+                notificationKey,
+                onNotificationClicked,
+              ),
+            ),
+          )
         }
         break
       }

src/routes/safe/store/models/transaction.js

@@ -37,6 +37,8 @@ export type TransactionProps = {
   cancellationTx: boolean,
   customTx: boolean,
   creationTx: boolean,
+  multiSendTx: boolean,
+  upgradeTx: boolean,
   safeTxHash: string,
   executor: string,
   executionTxHash?: ?string,
@@ -74,6 +76,8 @@ export const makeTransaction: RecordFactory<TransactionProps> = Record({
   cancellationTx: false,
   customTx: false,
   creationTx: false,
+  multiSendTx: false,
+  upgradeTx: false,
   status: 'awaiting',
   decimals: 18,
   isTokenTransfer: false,