Merge branch 'development' of github.com:gnosis/safe-react into development

package.json

@@ -55,7 +55,7 @@
     "qrcode.react": "1.0.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
-    "react-final-form": "6.3.2",
+    "react-final-form": "6.3.3",
     "react-final-form-listeners": "^1.0.2",
     "react-hot-loader": "4.12.18",
     "react-qr-reader": "^2.2.1",

src/components/Modal/index.jsx

@@ -20,6 +20,7 @@ const styles = () => ({
     alignItems: 'center',
     justifyContent: 'center',
     display: 'flex',
+    overflowY: 'scroll',
   },
   paper: {
     position: 'absolute',

src/components/Table/TableHead.jsx

@@ -24,7 +24,7 @@ export const cellWidth = (width: number | typeof undefined) => {
   }
 
   return {
-    width: `${width}px`,
+    maxWidth: `${width}px`,
   }
 }
 

src/logic/safe/transactions/send.js

@@ -15,6 +15,11 @@ export const getApprovalTransaction = async (
   data: string,
   operation: Operation,
   nonce: number,
+  safeTxGas: number,
+  baseGas: number,
+  gasPrice: number,
+  gasToken: string,
+  refundReceiver: string,
   sender: string,
 ) => {
   const txHash = await safeInstance.getTransactionHash(
@@ -22,11 +27,11 @@ export const getApprovalTransaction = async (
     valueInWei,
     data,
     operation,
-    0,
-    0,
-    0,
-    ZERO_ADDRESS,
-    ZERO_ADDRESS,
+    safeTxGas,
+    baseGas,
+    gasPrice,
+    gasToken,
+    refundReceiver,
     nonce,
     {
       from: sender,
@@ -40,7 +45,6 @@ export const getApprovalTransaction = async (
     return contract.methods.approveHash(txHash)
   } catch (err) {
     console.error(`Error while approving transaction: ${err}`)
-
     throw err
   }
 }
@@ -52,6 +56,11 @@ export const getExecutionTransaction = async (
   data: string,
   operation: Operation,
   nonce: string | number,
+  safeTxGas: string | number,
+  baseGas: string | number,
+  gasPrice: string | number,
+  gasToken: string,
+  refundReceiver: string,
   sender: string,
   sigs: string,
 ) => {
@@ -59,7 +68,7 @@ export const getExecutionTransaction = async (
     const web3 = getWeb3()
     const contract = new web3.eth.Contract(GnosisSafeSol.abi, safeInstance.address)
 
-    return contract.methods.execTransaction(to, valueInWei, data, operation, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, sigs)
+    return contract.methods.execTransaction(to, valueInWei, data, operation, safeTxGas, baseGas, gasPrice, gasToken, refundReceiver, sigs)
   } catch (err) {
     console.error(`Error while creating transaction: ${err}`)
 

src/logic/safe/transactions/txHistory.js

@@ -2,7 +2,6 @@
 import axios from 'axios'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import { getTxServiceUriFrom, getTxServiceHost } from '~/config'
-import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
 
 export type TxServiceType = 'confirmation' | 'execution' | 'initialised'
 export type Operation = 0 | 1 | 2
@@ -14,6 +13,11 @@ const calculateBodyFrom = async (
   data: string,
   operation: Operation,
   nonce: string | number,
+  safeTxGas: string | number,
+  baseGas: string | number,
+  gasPrice: string | number,
+  gasToken: string,
+  refundReceiver: string,
   transactionHash: string,
   sender: string,
   confirmationType: TxServiceType,
@@ -23,11 +27,11 @@ const calculateBodyFrom = async (
     valueInWei,
     data,
     operation,
-    0,
-    0,
-    0,
-    ZERO_ADDRESS,
-    ZERO_ADDRESS,
+    safeTxGas,
+    baseGas,
+    gasPrice,
+    gasToken,
+    refundReceiver,
     nonce,
   )
 
@@ -37,11 +41,11 @@ const calculateBodyFrom = async (
     data,
     operation,
     nonce,
-    safeTxGas: 0,
-    baseGas: 0,
-    gasPrice: 0,
-    gasToken: ZERO_ADDRESS,
-    refundReceiver: ZERO_ADDRESS,
+    safeTxGas,
+    baseGas,
+    gasPrice,
+    gasToken,
+    refundReceiver,
     contractTransactionHash,
     transactionHash,
     sender: getWeb3().utils.toChecksumAddress(sender),
@@ -63,12 +67,32 @@ export const saveTxToHistory = async (
   data: string,
   operation: Operation,
   nonce: number | string,
+  safeTxGas: string | number,
+  baseGas: string | number,
+  gasPrice: string | number,
+  gasToken: string,
+  refundReceiver: string,
   txHash: string,
   sender: string,
   type: TxServiceType,
 ) => {
   const url = buildTxServiceUrl(safeInstance.address)
-  const body = await calculateBodyFrom(safeInstance, to, valueInWei, data, operation, nonce, txHash, sender, type)
+  const body = await calculateBodyFrom(
+    safeInstance,
+    to,
+    valueInWei,
+    data,
+    operation,
+    nonce,
+    safeTxGas,
+    baseGas,
+    gasPrice,
+    gasToken,
+    refundReceiver,
+    txHash,
+    sender,
+    type,
+  )
   const response = await axios.post(url, body)
 
   if (response.status !== 202) {

src/logic/wallets/ethAddresses.js

@@ -16,5 +16,7 @@ export const sameAddress = (firstAddress: string, secondAddress: string): boolea
 export const shortVersionOf = (address: string, cut: number) => {
   const final = 42 - cut
 
+  if (!address) return 'Unknown address'
+  if (address.length < final) return address
   return `${address.substring(0, cut)}...${address.substring(final)}`
 }

src/routes/safe/components/Layout.jsx

@@ -196,6 +196,7 @@ const Layout = (props: Props) => {
               network={network}
               userAddress={userAddress}
               createTransaction={createTransaction}
+              safe={safe}
             />
           )}
         />

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

@@ -10,6 +10,7 @@ import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
 import CheckOwner from './screens/CheckOwner'
 import ThresholdForm from './screens/ThresholdForm'
 import ReviewRemoveOwner from './screens/Review'
+import type { Safe } from '~/routes/safe/store/models/safe'
 
 const styles = () => ({
   biggerModalWindow: {
@@ -34,6 +35,7 @@ type Props = {
   removeSafeOwner: Function,
   enqueueSnackbar: Function,
   closeSnackbar: Function,
+  safe: Safe
 }
 
 type ActiveScreen = 'checkOwner' | 'selectThreshold' | 'reviewRemoveOwner'
@@ -48,6 +50,7 @@ export const sendRemoveOwner = async (
   closeSnackbar: Function,
   createTransaction: Function,
   removeSafeOwner: Function,
+  safe: Safe,
 ) => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.getOwners()
@@ -69,7 +72,7 @@ export const sendRemoveOwner = async (
     closeSnackbar,
   )
 
-  if (txHash) {
+  if (txHash && safe.threshold === 1) {
     removeSafeOwner({ safeAddress, ownerAddress: ownerAddressToRemove })
   }
 }
@@ -88,6 +91,7 @@ const RemoveOwner = ({
   removeSafeOwner,
   enqueueSnackbar,
   closeSnackbar,
+  safe,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
   const [values, setValues] = useState<Object>({})
@@ -130,6 +134,7 @@ const RemoveOwner = ({
       closeSnackbar,
       createTransaction,
       removeSafeOwner,
+      safe,
     )
   }
 

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

@@ -9,6 +9,7 @@ import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
 import { getGnosisSafeInstanceAt, SENTINEL_ADDRESS } from '~/logic/contracts/safeContracts'
 import OwnerForm from './screens/OwnerForm'
 import ReviewReplaceOwner from './screens/Review'
+import type { Safe } from '~/routes/safe/store/models/safe'
 
 const styles = () => ({
   biggerModalWindow: {
@@ -33,6 +34,7 @@ type Props = {
   replaceSafeOwner: Function,
   enqueueSnackbar: Function,
   closeSnackbar: Function,
+  safe: Safe,
 }
 type ActiveScreen = 'checkOwner' | 'reviewReplaceOwner'
 
@@ -44,6 +46,7 @@ export const sendReplaceOwner = async (
   closeSnackbar: Function,
   createTransaction: Function,
   replaceSafeOwner: Function,
+  safe: Safe,
 ) => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.getOwners()
@@ -65,7 +68,7 @@ export const sendReplaceOwner = async (
     closeSnackbar,
   )
 
-  if (txHash) {
+  if (txHash && safe.threshold === 1) {
     replaceSafeOwner({
       safeAddress,
       oldOwnerAddress: ownerAddressToRemove,
@@ -89,6 +92,7 @@ const ReplaceOwner = ({
   replaceSafeOwner,
   enqueueSnackbar,
   closeSnackbar,
+  safe,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
   const [values, setValues] = useState<Object>({})
@@ -121,6 +125,7 @@ const ReplaceOwner = ({
         closeSnackbar,
         createTransaction,
         replaceSafeOwner,
+        safe,
       )
     } catch (error) {
       console.error('Error while removing an owner', error)

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

@@ -32,6 +32,7 @@ import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
 import RenameOwnerIcon from './assets/icons/rename-owner.svg'
 import RemoveOwnerIcon from '../assets/icons/bin.svg'
 import Paragraph from '~/components/layout/Paragraph/index'
+import type { Safe } from '~/routes/safe/store/models/safe'
 
 export const RENAME_OWNER_BTN_TEST_ID = 'rename-owner-btn'
 export const REMOVE_OWNER_BTN_TEST_ID = 'remove-owner-btn'
@@ -53,6 +54,7 @@ type Props = {
   replaceSafeOwner: Function,
   editSafeOwner: Function,
   granted: boolean,
+  safe: Safe
 }
 
 type State = {
@@ -111,6 +113,7 @@ class ManageOwners extends React.Component<Props, State> {
       replaceSafeOwner,
       editSafeOwner,
       granted,
+      safe,
     } = this.props
     const {
       showAddOwner,
@@ -237,6 +240,7 @@ class ManageOwners extends React.Component<Props, State> {
           userAddress={userAddress}
           createTransaction={createTransaction}
           removeSafeOwner={removeSafeOwner}
+          safe={safe}
         />
         <ReplaceOwnerModal
           onClose={this.onHide('ReplaceOwner')}
@@ -251,6 +255,7 @@ class ManageOwners extends React.Component<Props, State> {
           userAddress={userAddress}
           createTransaction={createTransaction}
           replaceSafeOwner={replaceSafeOwner}
+          safe={safe}
         />
         <EditOwnerModal
           onClose={this.onHide('EditOwner')}

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

@@ -19,6 +19,7 @@ import ManageOwners from './ManageOwners'
 import actions, { type Actions } from './actions'
 import { styles } from './style'
 import RemoveSafeIcon from './assets/icons/bin.svg'
+import type { Safe } from '~/routes/safe/store/models/safe'
 
 export const OWNERS_SETTINGS_TAB_TEST_ID = 'owner-settings-tab'
 
@@ -43,6 +44,7 @@ type Props = Actions & {
   replaceSafeOwner: Function,
   editSafeOwner: Function,
   userAddress: string,
+  safe: Safe
 }
 
 type Action = 'RemoveSafe'
@@ -87,6 +89,7 @@ class Settings extends React.Component<Props, State> {
       removeSafeOwner,
       replaceSafeOwner,
       editSafeOwner,
+      safe,
     } = this.props
 
     return (
@@ -152,6 +155,7 @@ class Settings extends React.Component<Props, State> {
                   replaceSafeOwner={replaceSafeOwner}
                   editSafeOwner={editSafeOwner}
                   granted={granted}
+                  safe={safe}
                 />
               )}
               {menuOptionIndex === 3 && (

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

@@ -54,6 +54,9 @@ export const getTxData = (tx: Transaction): DecodedTxData => {
     }
   } else if (tx.cancellationTx) {
     txData.cancellationTx = true
+  } else {
+    txData.recipient = tx.recipient
+    txData.value = 0
   }
 
   return txData

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

@@ -98,6 +98,26 @@ const ExpandedTx = ({
                   {formatDate(tx.executionDate)}
                 </Paragraph>
               )}
+              {tx.refundParams && (
+                <Paragraph noMargin>
+                  <Bold>TX refund: </Bold>
+                  max.
+                  {' '}
+                  {tx.refundParams.fee}
+                  {' '}
+                  {tx.refundParams.symbol}
+                </Paragraph>
+              )}
+              {tx.operation === 1 && (
+                <Paragraph noMargin>
+                  <Bold>Delegate Call</Bold>
+                </Paragraph>
+              )}
+              {tx.operation === 2 && (
+                <Paragraph noMargin>
+                  <Bold>Contract Creation</Bold>
+                </Paragraph>
+              )}
             </Block>
             <Hairline />
             <TxDescription tx={tx} />

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

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import CircularProgress from '@material-ui/core/CircularProgress'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph/'
 import Img from '~/components/layout/Img'
@@ -20,6 +21,7 @@ const statusToIcon = {
   cancelled: ErrorIcon,
   awaiting_confirmations: AwaitingIcon,
   awaiting_execution: AwaitingIcon,
+  pending: <CircularProgress size={14} />,
 }
 
 const statusToLabel = {
@@ -27,6 +29,7 @@ const statusToLabel = {
   cancelled: 'Cancelled',
   awaiting_confirmations: 'Awaiting',
   awaiting_execution: 'Awaiting',
+  pending: 'Pending',
 }
 
 const statusIconStyle = {
@@ -34,11 +37,21 @@ const statusIconStyle = {
   width: '14px',
 }
 
-const Status = ({ classes, status }: Props) => (
-  <Block className={`${classes.container} ${classes[status]}`}>
-    <Img src={statusToIcon[status]} alt="OK Icon" style={statusIconStyle} />
-    <Paragraph noMargin className={classes.statusText}>{statusToLabel[status]}</Paragraph>
-  </Block>
-)
+const Status = ({ classes, status }: Props) => {
+  const Icon = statusToIcon[status]
+
+  return (
+    <Block className={`${classes.container} ${classes[status]}`}>
+      {typeof Icon === 'object' ? (
+        Icon
+      ) : (
+        <Img src={Icon} alt="OK Icon" style={statusIconStyle} />
+      )}
+      <Paragraph noMargin className={classes.statusText}>
+        {statusToLabel[status]}
+      </Paragraph>
+    </Block>
+  )
+}
 
 export default withStyles(styles)(Status)

src/routes/safe/components/Transactions/TxsTable/Status/style.js

@@ -29,6 +29,10 @@ export const styles = () => ({
     backgroundColor: '#dfebff',
     color: disabled,
   },
+  pending: {
+    backgroundColor: '#fff3e2',
+    color: '#e8673c',
+  },
   statusText: {
     marginLeft: 'auto',
     textTransform: 'uppercase',

src/routes/safe/container/actions.js

@@ -1,5 +1,5 @@
 // @flow
-import fetchSafe from '~/routes/safe/store/actions/fetchSafe'
+import fetchSafe, { checkAndUpdateSafeOwners } from '~/routes/safe/store/actions/fetchSafe'
 import fetchTokenBalances from '~/routes/safe/store/actions/fetchTokenBalances'
 import fetchEtherBalance from '~/routes/safe/store/actions/fetchEtherBalance'
 import createTransaction from '~/routes/safe/store/actions/createTransaction'
@@ -28,4 +28,5 @@ export default {
   fetchTransactions,
   updateSafe,
   fetchEtherBalance,
+  checkAndUpdateSafeOwners,
 }

src/routes/safe/container/index.jsx

@@ -89,9 +89,9 @@ class SafeView extends React.Component<Props, State> {
 
   checkForUpdates() {
     const {
-      safeUrl, activeTokens, fetchTokenBalances, fetchEtherBalance,
+      safeUrl, activeTokens, fetchTokenBalances, fetchEtherBalance, checkAndUpdateSafeOwners,
     } = this.props
-
+    checkAndUpdateSafeOwners(safeUrl)
     fetchTokenBalances(safeUrl, activeTokens)
     fetchEtherBalance(safeUrl)
   }

src/routes/safe/container/selector.js

@@ -1,7 +1,6 @@
 // @flow
 import { List, Map } from 'immutable'
 import { createSelector, createStructuredSelector, type Selector } from 'reselect'
-import { isAfter, parseISO } from 'date-fns'
 import {
   safeSelector,
   safeActiveTokensSelector,
@@ -41,6 +40,8 @@ const getTxStatus = (tx: Transaction, safe: Safe): TransactionStatus => {
     txStatus = 'cancelled'
   } else if (tx.confirmations.size === safe.threshold) {
     txStatus = 'awaiting_execution'
+  } else if (!tx.confirmations.size) {
+    txStatus = 'pending'
   }
 
   return txStatus
@@ -115,9 +116,7 @@ const extendedTransactionsSelector: Selector<GlobalState, RouterProps, List<Tran
       let replacementTransaction
       if (!tx.isExecuted) {
         replacementTransaction = transactions.findLast(
-          (transaction) => (transaction.nonce === tx.nonce
-              && isAfter(parseISO(transaction.submissionDate), parseISO(tx.submissionDate)))
-            || transaction.nonce > tx.nonce,
+          (transaction) => transaction.isExecuted && transaction.nonce >= tx.nonce,
         )
         if (replacementTransaction) {
           extendedTx = tx.set('cancelled', true)

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

@@ -54,9 +54,15 @@ const createTransaction = (
   let tx
   try {
     if (isExecution) {
-      tx = await getExecutionTransaction(safeInstance, to, valueInWei, txData, CALL, nonce, from, sigs)
+      tx = await getExecutionTransaction(
+        safeInstance, to, valueInWei, txData, CALL, nonce, 
+        0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, from, sigs
+      )
     } else {
-      tx = await getApprovalTransaction(safeInstance, to, valueInWei, txData, CALL, nonce, from)
+      tx = await getApprovalTransaction(
+        safeInstance, to, valueInWei, txData, CALL, nonce, 
+        0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, from, sigs
+      )
     }
 
     const sendParams = { from, value: 0 }
@@ -81,10 +87,16 @@ const createTransaction = (
             txData,
             CALL,
             nonce,
+            0,
+            0,
+            0,
+            ZERO_ADDRESS,
+            ZERO_ADDRESS,
             txHash,
             from,
             isExecution ? TX_TYPE_EXECUTION : TX_TYPE_CONFIRMATION,
           )
+          dispatch(fetchTransactions(safeAddress))
         } catch (err) {
           console.error(err)
         }
@@ -94,7 +106,6 @@ const createTransaction = (
       })
       .then((receipt) => {
         closeSnackbar(pendingExecutionKey)
-
         showSnackbar(
           isExecution
             ? notificationsQueue.afterExecution.noMoreConfirmationsNeeded

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

@@ -5,9 +5,12 @@ import { type GlobalState } from '~/store/index'
 import { makeOwner } from '~/routes/safe/store/models/owner'
 import type { SafeProps } from '~/routes/safe/store/models/safe'
 import addSafe from '~/routes/safe/store/actions/addSafe'
-import { getOwners, getSafeName } from '~/logic/safe/utils'
+import { getOwners, getSafeName, SAFES_KEY } from '~/logic/safe/utils'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import { getBalanceInEtherOf } from '~/logic/wallets/getWeb3'
+import { loadFromStorage } from '~/utils/storage'
+import removeSafeOwner from '~/routes/safe/store/actions/removeSafeOwner'
+import addSafeOwner from '~/routes/safe/store/actions/addSafeOwner'
 
 const buildOwnersFrom = (
   safeOwners: string[],
@@ -35,6 +38,36 @@ export const buildSafe = async (safeAddress: string, safeName: string) => {
   return safe
 }
 
+const getLocalSafe = async (safeAddress: string) => {
+  const storedSafes = (await loadFromStorage(SAFES_KEY)) || {}
+  return storedSafes[safeAddress]
+}
+
+export const checkAndUpdateSafeOwners = (safeAddress: string) => async (
+  dispatch: ReduxDispatch<GlobalState>,
+) => {
+  // Check if the owner's safe did change and update them
+  const [gnosisSafe, localSafe] = await Promise.all([getGnosisSafeInstanceAt(safeAddress), getLocalSafe(safeAddress)])
+  const remoteOwners = await gnosisSafe.getOwners()
+  // Converts from [ { address, ownerName} ] to address array
+  const localOwners = localSafe.owners.map((localOwner) => localOwner.address)
+
+  // If the remote owners does not contain a local address, we remove that local owner
+  localOwners.forEach((localAddress) => {
+    if (!remoteOwners.includes(localAddress)) {
+      dispatch(removeSafeOwner({ safeAddress, ownerAddress: localAddress }))
+    }
+  })
+
+  // If the remote has an owner that we don't have locally, we add it
+  remoteOwners.forEach((remoteAddress) => {
+    if (!localOwners.includes(remoteAddress)) {
+      dispatch(addSafeOwner({ safeAddress, ownerAddress: remoteAddress, ownerName: 'UNKNOWN' }))
+    }
+  })
+}
+
+// eslint-disable-next-line consistent-return
 export default (safeAddress: string) => async (dispatch: ReduxDispatch<GlobalState>) => {
   try {
     const safeName = (await getSafeName(safeAddress)) || 'LOADED SAFE'

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

@@ -16,6 +16,7 @@ import { getHumanFriendlyToken } from '~/logic/tokens/store/actions/fetchTokens'
 import { isTokenTransfer } from '~/logic/tokens/utils/tokenHelpers'
 import { decodeParamsFromSafeMethod } from '~/logic/contracts/methodIds'
 import { ALTERNATIVE_TOKEN_ABI } from '~/logic/tokens/utils/alternativeAbi'
+import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
 
 let web3
 
@@ -32,6 +33,11 @@ type TxServiceModel = {
   data: string,
   operation: number,
   nonce: number,
+  safeTxGas: number,
+  baseGas: number,
+  gasPrice: number,
+  gasToken: string,
+  refundReceiver: string,
   safeTxHash: string,
   submissionDate: string,
   executionDate: string,
@@ -55,6 +61,7 @@ export const buildTransactionFrom = async (
         owner: makeOwner({ address: conf.owner, name: ownerName }),
         type: ((conf.confirmationType.toLowerCase(): any): TxServiceType),
         hash: conf.transactionHash,
+        signature: conf.signature,
       })
     }),
   )
@@ -63,6 +70,27 @@ export const buildTransactionFrom = async (
   const isSendTokenTx = await isTokenTransfer(tx.data, tx.value)
   const customTx = tx.to !== safeAddress && !!tx.data && !isSendTokenTx
 
+  let refundParams = null
+  if (tx.gasPrice > 0) {
+    let refundSymbol = 'ETH'
+    let decimals = 18
+    if (tx.gasToken !== ZERO_ADDRESS) {
+      const gasToken = await (await getHumanFriendlyToken()).at(tx.gasToken)
+      refundSymbol = await gasToken.symbol()
+      decimals = await gasToken.decimals()
+    }
+
+    const feeString = (tx.gasPrice * (tx.baseGas + tx.safeTxGas)).toString().padStart(decimals, 0)
+    const whole = feeString.slice(0, feeString.length - decimals) || '0'
+    const fraction = feeString.slice(feeString.length - decimals)
+
+    const formattedFee = `${whole}.${fraction}`
+    refundParams = {
+      fee: formattedFee,
+      symbol: refundSymbol,
+    }
+  }
+
   let symbol = 'ETH'
   let decimals = 18
   let decodedParams
@@ -102,6 +130,13 @@ export const buildTransactionFrom = async (
     decimals,
     recipient: tx.to,
     data: tx.data ? tx.data : EMPTY_DATA,
+    operation: tx.operation,
+    safeTxGas: tx.safeTxGas,
+    baseGas: tx.baseGas,
+    gasPrice: tx.gasPrice,
+    gasToken: tx.gasToken,
+    refundReceiver: tx.refundReceiver,
+    refundParams,
     isExecuted: tx.isExecuted,
     submissionDate: tx.submissionDate,
     executionDate: tx.executionDate,

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

@@ -11,7 +11,6 @@ import {
   type NotifiedTransaction,
   getApprovalTransaction,
   getExecutionTransaction,
-  CALL,
   saveTxToHistory,
   TX_TYPE_EXECUTION,
   TX_TYPE_CONFIRMATION,
@@ -31,18 +30,27 @@ export const generateSignaturesFromTxConfirmations = (
 ) => {
   // The constant parts need to be sorted so that the recovered signers are sorted ascending
   // (natural order) by address (not checksummed).
-  let confirmedAdresses = confirmations.map((conf) => conf.owner.address)
+  const confirmationsMap = confirmations.reduce((map, obj) => {
+    map[obj.owner.address] = obj // eslint-disable-line no-param-reassign
+    return map
+  }, {})
 
   if (preApprovingOwner) {
-    confirmedAdresses = confirmedAdresses.push(preApprovingOwner)
+    confirmationsMap[preApprovingOwner] = { owner: preApprovingOwner }
   }
 
   let sigs = '0x'
-  confirmedAdresses.sort().forEach((addr) => {
-    sigs += `000000000000000000000000${addr.replace(
-      '0x',
-      '',
-    )}000000000000000000000000000000000000000000000000000000000000000001`
+  Object.keys(confirmationsMap).sort().forEach((addr) => {
+    const conf = confirmationsMap[addr]
+    if (conf.signature) {
+      sigs += conf.signature.slice(2)
+    } else {
+      // https://gnosis-safe.readthedocs.io/en/latest/contracts/signatures.html#pre-validated-signatures
+      sigs += `000000000000000000000000${addr.replace(
+        '0x',
+        '',
+      )}000000000000000000000000000000000000000000000000000000000000000001`
+    }
   })
   return sigs
 }
@@ -60,7 +68,6 @@ const processTransaction = (
 
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const from = userAccountSelector(state)
-  const nonce = (await safeInstance.nonce()).toString()
   const threshold = (await safeInstance.getThreshold()).toNumber()
   const shouldExecute = threshold === tx.confirmations.size || approveAndExecute
 
@@ -86,13 +93,31 @@ const processTransaction = (
         tx.recipient,
         tx.value,
         tx.data,
-        CALL,
-        nonce,
+        tx.operation,
+        tx.nonce,
+        tx.safeTxGas,
+        tx.baseGas,
+        tx.gasPrice,
+        tx.gasToken,
+        tx.refundReceiver,
         from,
         sigs,
       )
     } else {
-      transaction = await getApprovalTransaction(safeInstance, tx.recipient, tx.value, tx.data, CALL, nonce, from)
+      transaction = await getApprovalTransaction(
+        safeInstance,
+        tx.recipient,
+        tx.value,
+        tx.data,
+        tx.operation,
+        tx.nonce,
+        tx.safeTxGas,
+        tx.baseGas,
+        tx.gasPrice,
+        tx.gasToken,
+        tx.refundReceiver,
+        from,
+      )
     }
 
     const sendParams = { from, value: 0 }
@@ -115,12 +140,18 @@ const processTransaction = (
             tx.recipient,
             tx.value,
             tx.data,
-            CALL,
-            nonce,
+            tx.operation,
+            tx.nonce,
+            tx.safeTxGas,
+            tx.baseGas,
+            tx.gasPrice,
+            tx.gasToken,
+            tx.refundReceiver,
             txHash,
             from,
             shouldExecute ? TX_TYPE_EXECUTION : TX_TYPE_CONFIRMATION,
           )
+          dispatch(fetchTransactions(safeAddress))
         } catch (err) {
           console.error(err)
         }

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

@@ -8,12 +8,14 @@ export type ConfirmationProps = {
   owner: Owner,
   type: TxServiceType,
   hash: string,
+  signature?: string,
 }
 
 export const makeConfirmation: RecordFactory<ConfirmationProps> = Record({
   owner: makeOwner(),
   type: 'initialised',
   hash: '',
+  signature: null,
 })
 
 export type Confirmation = RecordOf<ConfirmationProps>

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

@@ -2,16 +2,22 @@
 import { List, Record } from 'immutable'
 import type { RecordFactory, RecordOf } from 'immutable'
 import { type Confirmation } from '~/routes/safe/store/models/confirmation'
+import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
 
-export type TransactionStatus = 'awaiting_confirmations' | 'success' | 'cancelled' | 'awaiting_execution'
+export type TransactionStatus = 'awaiting_confirmations' | 'success' | 'cancelled' | 'awaiting_execution' | 'pending'
 
 export type TransactionProps = {
-  name: string,
   nonce: number,
   value: string,
   confirmations: List<Confirmation>,
   recipient: string,
-  data: string,
+  data?: string,
+  operation: number,
+  safeTxGas: number,
+  baseGas: number,
+  gasPrice: number,
+  gasToken: string,
+  refundReceiver: string,
   isExecuted: boolean,
   submissionDate: string,
   executionDate: string,
@@ -26,15 +32,21 @@ export type TransactionProps = {
   status?: TransactionStatus,
   isTokenTransfer: boolean,
   decodedParams?: Object,
+  refundParams?: Object,
 }
 
 export const makeTransaction: RecordFactory<TransactionProps> = Record({
-  name: '',
   nonce: 0,
   value: 0,
   confirmations: List([]),
   recipient: '',
-  data: '',
+  data: null,
+  operation: 0,
+  safeTxGas: 0,
+  baseGas: 0,
+  gasPrice: 0,
+  gasToken: ZERO_ADDRESS,
+  refundReceiver: ZERO_ADDRESS,
   isExecuted: false,
   submissionDate: '',
   executionDate: '',
@@ -49,6 +61,7 @@ export const makeTransaction: RecordFactory<TransactionProps> = Record({
   decimals: 18,
   isTokenTransfer: false,
   decodedParams: {},
+  refundParams: null,
 })
 
 export type Transaction = RecordOf<TransactionProps>

src/theme/mui.js

@@ -285,6 +285,9 @@ export default createMuiTheme({
         fontWeight: 'normal',
         paddingTop: xs,
         paddingBottom: xs,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
       },
     },
     MuiBackdrop: {

yarn.lock

@@ -14901,10 +14901,10 @@ react-final-form-listeners@^1.0.2:
   dependencies:
     "@babel/runtime" "^7.1.5"
 
-react-final-form@6.3.2:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.3.2.tgz#2c331540c8f5cbf6fbe75ecd98849a03b34dba6e"
-  integrity sha512-3eXCd9ScouKbf7GJubhUP0s8+aYCsltjjWZtvOKV+E0AeRjXmzQZfUAsKM+395+v1dLIyenB3x22ZQms2tWFRQ==
+react-final-form@6.3.3:
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.3.3.tgz#8856a92278de2733f83e88c75d9ef347294a66a0"
+  integrity sha512-hFLwLpLasywky46SovNEGlym7+N+3RKge1/cg+/fVec/YY0l4g0ihgjRof6PbkiYe4qGjKbwbrvlgfZ9/Uf8vw==
   dependencies:
     "@babel/runtime" "^7.4.5"
     ts-essentials "^3.0.2"