Merge branch '124-web3connect-new' of github.com:gnosis/safe-react into 124-web3connect-new

src/components/ConnectButton/index.jsx

@@ -1,15 +1,15 @@
 // @flow
-import React, { useEffect } from 'react'
-import { withSnackbar } from 'notistack'
+import React from 'react'
 import { connect } from 'react-redux'
 import Web3Connect from 'web3connect'
-import Torus from '@toruslabs/torus-embed'
+// import Torus from '@toruslabs/torus-embed'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import Portis from '@portis/web3'
 import Squarelink from 'squarelink'
 import Button from '~/components/layout/Button'
 import { fetchProvider } from '~/logic/wallets/store/actions'
 import { getNetwork } from '~/config'
+import { store } from '~/store'
 
 const PORTIS_DAPP_ID = process.env.REACT_APP_NETWORK === 'mainnet' ? process.env.REACT_APP_PORTIS_ID : '852b763d-f28b-4463-80cb-846d7ec5806b'
 const SQUARELINK_CLIENT_ID = process.env.REACT_APP_NETWORK === 'mainnet' ? process.env.REACT_APP_SQUARELINK_ID : '46ce08fe50913cfa1b78'
@@ -35,56 +35,48 @@ export const web3Connect = new Web3Connect.Core({
         id: SQUARELINK_CLIENT_ID,
       },
     },
-    torus: {
-      package: Torus,
-      options: {
-        enableLogging: false,
-        buttonPosition: 'bottom-left',
-        buildEnv: process.env.NODE_ENV,
-        showTorusButton: true,
-      },
-    },
+    // torus: {
+    //   package: Torus,
+    //   options: {
+    //     enableLogging: false,
+    //     buttonPosition: 'bottom-left',
+    //     buildEnv: process.env.NODE_ENV,
+    //     showTorusButton: true,
+    //   },
+    // },
   },
 })
 
+web3Connect.on('connect', (provider: any) => {
+  if (provider) {
+    store.dispatch(fetchProvider(provider))
+  }
+})
+
 type Props = {
   registerProvider: Function,
   enqueueSnackbar: Function,
   closeSnackbar: Function,
 }
 
-let web3connectEventListenerAdded = false
-
 const ConnectButton = ({
-  registerProvider, enqueueSnackbar, closeSnackbar, ...props
-}: Props) => {
-  useEffect(() => {
-    if (!web3connectEventListenerAdded) {
-      web3Connect.on('connect', (provider: any) => {
-        if (provider) {
-          registerProvider(provider, enqueueSnackbar, closeSnackbar)
-        }
-      })
-      web3connectEventListenerAdded = true
-    }
-  }, [])
+  registerProvider, ...props
+}: Props) => (
 
-  return (
-    <Button
-      color="primary"
-      variant="contained"
-      minWidth={140}
-      onClick={() => {
-        web3Connect.toggleModal()
-      }}
-      {...props}
-    >
-      Connect
-    </Button>
-  )
-}
+  <Button
+    color="primary"
+    variant="contained"
+    minWidth={140}
+    onClick={() => {
+      web3Connect.toggleModal()
+    }}
+    {...props}
+  >
+    Connect
+  </Button>
+)
 
 export default connect(
   null,
   { registerProvider: fetchProvider },
-)(withSnackbar(ConnectButton))
+)(ConnectButton)

src/components/Notifier/actions.js

@@ -1,16 +1,10 @@
 // @flow
-import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
-import closeSnackbar from '~/logic/notifications/store/actions/closeSnackbar'
 import removeSnackbar from '~/logic/notifications/store/actions/removeSnackbar'
 
 export type Actions = {
-  enqueueSnackbar: typeof enqueueSnackbar,
-  closeSnackbar: typeof closeSnackbar,
   removeSnackbar: typeof removeSnackbar,
 }
 
 export default {
-  enqueueSnackbar,
-  closeSnackbar,
   removeSnackbar,
 }

src/components/Notifier/index.js

@@ -9,6 +9,8 @@ import selector from './selector'
 
 type Props = Actions & {
   notifications: List<Notification>,
+  closeSnackbar: Function,
+  enqueueSnackbar: Function,
 }
 
 class Notifier extends Component<Props> {
@@ -46,8 +48,10 @@ class Notifier extends Component<Props> {
       if (this.displayed.includes(notification.key)) {
         return
       }
+
       // Display snackbar using notistack
       enqueueSnackbar(notification.message, {
+        key: notification.key,
         ...notification.options,
         onClose: (event, reason, key) => {
           if (notification.options.onClose) {

src/logic/notifications/notificationBuilder.js

@@ -3,6 +3,8 @@ import * as React from 'react'
 import { IconButton } from '@material-ui/core'
 import { Close as IconClose } from '@material-ui/icons'
 import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
+import { store } from '~/store'
+import closeSnackbarAction from '~/logic/notifications/store/actions/closeSnackbar'
 import { type Notification, NOTIFICATIONS } from './notificationTypes'
 
 export type NotificationsQueue = {
@@ -145,11 +147,19 @@ export const getNotificationsFromTxType = (txType: string) => {
   return notificationsQueue
 }
 
-export const showSnackbar = (
-  notification: Notification,
-  enqueueSnackbar: Function,
-  closeSnackbar: Function,
-) => enqueueSnackbar(notification.message, {
+export const enhanceSnackbarForAction = (notification: Notification) => ({
+  ...notification,
+  options: {
+    ...notification.options,
+    action: (key) => (
+      <IconButton onClick={() => store.dispatch(closeSnackbarAction(key))}>
+        <IconClose />
+      </IconButton>
+    ),
+  },
+})
+
+export const showSnackbar = (notification: Notification, enqueueSnackbar: Function, closeSnackbar: Function) => enqueueSnackbar(notification.message, {
   ...notification.options,
   action: (key) => (
     <IconButton onClick={() => closeSnackbar(key)}>

src/logic/notifications/store/actions/enqueueSnackbar.js

@@ -15,6 +15,7 @@ const enqueueSnackbar = (notification: NotificationProps) => (
     ...notification,
     key: new Date().getTime(),
   }
+
   dispatch(addSnackbar(newNotification))
 }
 

src/logic/notifications/store/models/notification.js

@@ -6,7 +6,7 @@ export type NotificationProps = {
   key?: number,
   message: string,
   options: Object,
-  dismissed: boolean,
+  dismissed?: boolean,
 }
 
 export const makeNotification: RecordFactory<NotificationProps> = Record({

src/logic/notifications/store/reducer/notifications.js

@@ -18,10 +18,9 @@ export default handleActions<NotificationReducerState, *>(
       return state.set(notification.key, makeNotification(notification))
     },
     [CLOSE_SNACKBAR]: (state: NotificationReducerState, action: ActionType<Function>): NotificationReducerState => {
-      const { notification }: { notification: NotificationProps } = action.payload
-      notification.dismissed = true
+      const key = action.payload
 
-      return state.update(notification.key, (prev) => prev.merge(notification))
+      return state.update(key, (prev) => prev.set('dismissed', true))
     },
     [REMOVE_SNACKBAR]: (state: NotificationReducerState, action: ActionType<Function>): NotificationReducerState => {
       const key = action.payload

src/logic/wallets/ethTransactions.js

@@ -1,7 +1,7 @@
 // @flow
 import { BigNumber } from 'bignumber.js'
 import axios from 'axios'
-import { getWeb3, web3RO } from '~/logic/wallets/getWeb3'
+import { getWeb3, web3ReadOnly } from '~/logic/wallets/getWeb3'
 
 // const MAINNET_NETWORK = 1
 export const EMPTY_DATA = '0x'
@@ -11,7 +11,7 @@ export const checkReceiptStatus = async (hash: string) => {
     return Promise.reject(new Error('No valid Tx hash to get receipt from'))
   }
 
-  const txReceipt = await web3RO.eth.getTransactionReceipt(hash)
+  const txReceipt = await web3ReadOnly.eth.getTransactionReceipt(hash)
 
   const { status } = txReceipt
   if (!status) {

src/logic/wallets/getWeb3.js

@@ -64,15 +64,15 @@ const getInfuraUrl = () => {
 
 // With some wallets from web3connect you have to use their provider instance only for signing
 // And our own one to fetch data
-export const web3RO = process.env.NODE_ENV !== 'test'
+export const web3ReadOnly = process.env.NODE_ENV !== 'test'
   ? new Web3(new Web3.providers.HttpProvider(getInfuraUrl()))
   : new Web3(window.web3.currentProvider)
 
-let web3 = web3RO
+let web3 = web3ReadOnly
 export const getWeb3 = () => web3
 
 export const resetWeb3 = () => {
-  web3 = web3RO
+  web3 = web3ReadOnly
 }
 
 const getProviderName: Function = (web3Provider): string => {

src/logic/wallets/store/actions/fetchProvider.js

@@ -4,7 +4,10 @@ import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK, getProviderInfo } from '~/logic
 import { getNetwork } from '~/config'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
 import { makeProvider } from '~/logic/wallets/store/model/provider'
-import { NOTIFICATIONS, showSnackbar } from '~/logic/notifications'
+import { NOTIFICATIONS, showSnackbar, enhanceSnackbarForAction } from '~/logic/notifications'
+import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
+import closeSnackbar from '~/logic/notifications/store/actions/closeSnackbar'
+
 import addProvider from './addProvider'
 
 export const processProviderResponse = (dispatch: ReduxDispatch<*>, provider: ProviderProps) => {
@@ -23,24 +26,20 @@ export const processProviderResponse = (dispatch: ReduxDispatch<*>, provider: Pr
   dispatch(addProvider(walletRecord))
 }
 
-const handleProviderNotification = (
-  provider: ProviderProps,
-  enqueueSnackbar: Function,
-  closeSnackbar: Function,
-) => {
+const handleProviderNotification = (provider: ProviderProps, dispatch: Function) => {
   const { loaded, network, available } = provider
 
   if (!loaded) {
-    showSnackbar(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG, enqueueSnackbar, closeSnackbar)
+    dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG)))
     return
   }
 
   if (ETHEREUM_NETWORK_IDS[network] !== getNetwork()) {
-    showSnackbar(NOTIFICATIONS.WRONG_NETWORK_MSG, enqueueSnackbar, closeSnackbar)
+    dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.WRONG_NETWORK_MSG)))
     return
   }
   if (ETHEREUM_NETWORK.RINKEBY === getNetwork()) {
-    showSnackbar(NOTIFICATIONS.RINKEBY_VERSION_MSG, enqueueSnackbar, closeSnackbar)
+    dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.RINKEBY_VERSION_MSG)))
   }
 
   if (available) {
@@ -49,16 +48,14 @@ const handleProviderNotification = (
     // you SHOULD pass your own `key` in the options. `key` can be any sequence
     // of number or characters, but it has to be unique to a given snackbar.
 
-    showSnackbar(NOTIFICATIONS.WALLET_CONNECTED_MSG, enqueueSnackbar, closeSnackbar)
+    dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.WALLET_CONNECTED_MSG)))
   } else {
-    showSnackbar(NOTIFICATIONS.UNLOCK_WALLET_MSG, enqueueSnackbar, closeSnackbar)
+    dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.UNLOCK_WALLET_MSG)))
   }
 }
 
-export default (provider: Object, enqueueSnackbar: Function, closeSnackbar: Function) => async (
-  dispatch: ReduxDispatch<*>,
-) => {
+export default (provider: Object) => async (dispatch: ReduxDispatch<*>) => {
   const providerInfo: ProviderProps = await getProviderInfo(provider)
-  await handleProviderNotification(providerInfo, enqueueSnackbar, closeSnackbar)
+  await handleProviderNotification(providerInfo, dispatch)
   processProviderResponse(dispatch, providerInfo)
 }

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

@@ -14,7 +14,6 @@ import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { addTransactions } from './addTransactions'
 import { getHumanFriendlyToken } from '~/logic/tokens/store/actions/fetchTokens'
 import { isTokenTransfer } from '~/logic/tokens/utils/tokenHelpers'
-import { TX_TYPE_EXECUTION } from '~/logic/safe/transactions'
 import { decodeParamsFromSafeMethod } from '~/logic/contracts/methodIds'
 import { ALTERNATIVE_TOKEN_ABI } from '~/logic/tokens/utils/alternativeAbi'
 
@@ -38,6 +37,7 @@ type TxServiceModel = {
   executionDate: string,
   confirmations: ConfirmationServiceModel[],
   isExecuted: boolean,
+  transactionHash: string,
 }
 
 export const buildTransactionFrom = async (
@@ -63,13 +63,6 @@ export const buildTransactionFrom = async (
   const isSendTokenTx = await isTokenTransfer(tx.data, tx.value)
   const customTx = tx.to !== safeAddress && !!tx.data && !isSendTokenTx
 
-  let executionTxHash
-  const executionTx = confirmations.find((conf) => conf.type === TX_TYPE_EXECUTION)
-
-  if (executionTx) {
-    executionTxHash = executionTx.hash
-  }
-
   let symbol = 'ETH'
   let decimals = 18
   let decodedParams
@@ -112,7 +105,7 @@ export const buildTransactionFrom = async (
     isExecuted: tx.isExecuted,
     submissionDate: tx.submissionDate,
     executionDate: tx.executionDate,
-    executionTxHash,
+    executionTxHash: tx.transactionHash,
     safeTxHash: tx.safeTxHash,
     isTokenTransfer: isSendTokenTx,
     decodedParams,