Fix sending funds with Gnosis Safe extension

src/components/Header/component/CircleDot.jsx

@@ -61,7 +61,15 @@ const buildDotStyleFrom = (size: number, top: number, right: number, mode: Mode)
 })
 
 const KeyRing = ({
-  classes, circleSize, keySize, dotSize, dotTop, dotRight, mode, center = false, hideDot = false,
+  classes,
+  circleSize,
+  keySize,
+  dotSize,
+  dotTop,
+  dotRight,
+  mode,
+  center = false,
+  hideDot = false,
 }: Props) => {
   const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
   const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight, mode)
@@ -80,7 +88,7 @@ const KeyRing = ({
             className={isWarning ? classes.warning : undefined}
           />
         </Block>
-        { !hideDot && <Dot className={classes.dot} style={dotStyle} /> }
+        {!hideDot && <Dot className={classes.dot} style={dotStyle} />}
       </Block>
     </React.Fragment>
   )

src/components/Header/component/ProviderInfo/ProviderAccesible.jsx

@@ -54,18 +54,20 @@ const ProviderInfo = ({
 
   return (
     <React.Fragment>
-      { connected &&
+      {connected && (
         <React.Fragment>
           <Identicon address={identiconAddress} diameter={30} />
           <Dot className={classes.logo} />
         </React.Fragment>
-      }
-      { !connected &&
-        <CircleDot keySize={14} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />
-      }
+      )}
+      {!connected && <CircleDot keySize={14} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />}
       <Col start="sm" layout="column" className={classes.account}>
-        <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bolder">{providerText}</Paragraph>
-        <Paragraph size="sm" className={classes.address} noMargin color={color}>{cutAddress}</Paragraph>
+        <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bolder">
+          {providerText}
+        </Paragraph>
+        <Paragraph size="sm" className={classes.address} noMargin color={color}>
+          {cutAddress}
+        </Paragraph>
       </Col>
     </React.Fragment>
   )

src/components/Header/component/ProviderInfo/ProviderDisconnected.jsx

@@ -33,8 +33,12 @@ const ProviderDesconnected = ({ classes }: Props) => (
   <React.Fragment>
     <CircleDot keySize={17} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="error" />
     <Col end="sm" middle="xs" layout="column" className={classes.account}>
-      <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">Not Connected</Paragraph>
-      <Paragraph size="sm" color="fancy" className={classes.connect} noMargin>Connect Wallet</Paragraph>
+      <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">
+        Not Connected
+      </Paragraph>
+      <Paragraph size="sm" color="fancy" className={classes.connect} noMargin>
+        Connect Wallet
+      </Paragraph>
     </Col>
   </React.Fragment>
 )

src/components/Header/index.jsx

@@ -27,22 +27,19 @@ class HeaderComponent extends React.PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    this.props.fetchProvider(this.props.openSnackbar)
-  }
-
-  componentDidCatch(error: Error, info: Info) {
-    this.setState({ hasError: true })
-    this.props.openSnackbar(WALLET_ERROR_MSG, 'error')
-
-    logComponentStack(error, info)
+    this.onConnect()
   }
 
   onDisconnect = () => {
-    this.props.removeProvider(this.props.openSnackbar)
+    const { removeProvider, openSnackbar } = this.props
+
+    removeProvider(openSnackbar)
   }
 
   onConnect = () => {
-    this.props.fetchProvider(this.props.openSnackbar)
+    const { fetchProvider, openSnackbar } = this.props
+
+    fetchProvider(openSnackbar)
   }
 
   getProviderInfoBased = () => {
@@ -79,6 +76,14 @@ class HeaderComponent extends React.PureComponent<Props, State> {
     )
   }
 
+  componentDidCatch(error: Error, info: Info) {
+    const { openSnackbar } = this.props
+    this.setState({ hasError: true })
+    openSnackbar(WALLET_ERROR_MSG, 'error')
+
+    logComponentStack(error, info)
+  }
+
   render() {
     const info = this.getProviderInfoBased()
     const details = this.getProviderDetailsBased()

src/components/Header/selector.js

@@ -16,7 +16,7 @@ export type SelectorProps = {
   available: boolean,
 }
 
-export default createStructuredSelector({
+export default createStructuredSelector<Object, *>({
   provider: providerNameSelector,
   userAddress: userAccountSelector,
   network: networkSelector,

src/logic/safe/transactions/gas.js

@@ -2,7 +2,7 @@
 import { BigNumber } from 'bignumber.js'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
-import { getSafeEthereumInstance } from '../safeFrontendOperations'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 
 const estimateDataGasCosts = (data) => {
   const reducer = (accumulator, currentValue) => {
@@ -68,7 +68,7 @@ export const generateTxGasEstimateFrom = async (
   try {
     let safeInstance = safe
     if (!safeInstance) {
-      safeInstance = await getSafeEthereumInstance(safeAddress)
+      safeInstance = await getGnosisSafeInstanceAt(safeAddress)
     }
 
     const estimateData = safeInstance.contract.methods.requiredTxGas(to, valueInWei, data, operation).encodeABI()
@@ -100,7 +100,7 @@ export const calculateTxFee = async (
   try {
     let safeInstance = safe
     if (!safeInstance) {
-      safeInstance = await getSafeEthereumInstance(safeAddress)
+      safeInstance = await getGnosisSafeInstanceAt(safeAddress)
     }
 
     // https://gnosis-safe.readthedocs.io/en/latest/contracts/signatures.html#pre-validated-signatures

src/logic/safe/transactions/send.js

@@ -4,7 +4,7 @@ import { getStandardTokenContract } from '~/logic/tokens/store/actions/fetchToke
 import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { isEther } from '~/logic/tokens/utils/tokenHelpers'
 import { type Token } from '~/logic/tokens/store/model/token'
-import { getSafeEthereumInstance } from '../safeFrontendOperations'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 
 export const CALL = 0
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
@@ -42,13 +42,13 @@ export const executeTransaction = async (
     return tx
   } catch (error) {
     // eslint-disable-next-line
-    console.log('Error calculating tx gas estimation ' + error)
+    console.log('Error executing the TX: ' + error)
     return 0
   }
 }
 
 export const createTransaction = async (safeAddress: string, to: string, valueInEth: string, token: Token) => {
-  const safeInstance = await getSafeEthereumInstance(safeAddress)
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const web3 = getWeb3()
   const from = web3.currentProvider.selectedAddress
   const threshold = await safeInstance.getThreshold()

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

@@ -1,12 +1,13 @@
 // @flow
-import type { Dispatch as ReduxDispatch } from 'redux'
+import type { Dispatch as ReduxDispatch, GetState } from 'redux'
 import { createAction } from 'redux-actions'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { type Token } from '~/logic/tokens/store/model/token'
+import { userAccountSelector } from '~/logic/wallets/store/selectors'
 import { type GlobalState } from '~/store'
 import { isEther } from '~/logic/tokens/utils/tokenHelpers'
-import { getSafeEthereumInstance } from '~/logic/safe/safeFrontendOperations'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import { executeTransaction, CALL } from '~/logic/safe/transactions'
 import { getStandardTokenContract } from '~/logic/tokens/store/actions/fetchTokens'
 
@@ -19,12 +20,13 @@ const createTransaction = (
   valueInEth: string,
   token: Token,
   openSnackbar: Function,
-) => async (dispatch: ReduxDispatch<GlobalState>) => {
+) => async (dispatch: ReduxDispatch<GlobalState>, getState: GetState<GlobalState>) => {
   const isSendingETH = isEther(token.symbol)
+  const state: GlobalState = getState()
 
-  const safeInstance = await getSafeEthereumInstance(safeAddress)
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const web3 = getWeb3()
-  const from = web3.currentProvider.selectedAddress
+  const from = userAccountSelector(state)
   const threshold = await safeInstance.getThreshold()
   const nonce = await safeInstance.nonce()
   const txRecipient = isSendingETH ? to : token.address