From 9dd26bbac90d6c6428aba21d1ea7c641e59b07fa Mon Sep 17 00:00:00 2001
From: fernandomg <fernando.greco@gmail.com>
Date: Wed, 10 Feb 2021 16:18:35 -0300
Subject: [PATCH 01/23] triggering hooks


From 4b089f349053bd7ed9b964494318c81cb42b2952 Mon Sep 17 00:00:00 2001
From: nicolas <nicosampler@users.noreply.github.com>
Date: Wed, 10 Feb 2021 16:39:18 -0300
Subject: [PATCH 02/23] Add relative time in queue lists (#1878)

* Add relative time in queue lists

* Add all date-fns functions to src/utils/date

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
---
 .../GatewayTransactions/HistoryTxList.tsx            |  4 ++--
 .../Transactions/GatewayTransactions/TxCollapsed.tsx |  9 ++++++---
 .../GatewayTransactions/TxInfoCreation.tsx           |  3 ++-
 .../Transactions/GatewayTransactions/TxSummary.tsx   |  3 ++-
 .../Transactions/GatewayTransactions/styled.tsx      |  2 +-
 .../Transactions/GatewayTransactions/utils.ts        |  5 -----
 src/utils/date.ts                                    | 12 +++++++++++-
 7 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx
index 6151f96c..4b2ee88c 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx
@@ -1,5 +1,4 @@
 import { Loader } from '@gnosis.pm/safe-react-components'
-import { format } from 'date-fns'
 import React, { ReactElement } from 'react'
 
 import { InfiniteScroll, SCROLLABLE_TARGET_ID } from 'src/components/InfiniteScroll'
@@ -13,6 +12,7 @@ import {
 } from './styled'
 import { TxHistoryRow } from './TxHistoryRow'
 import { TxLocationContext } from './TxLocationProvider'
+import { formatWithSchema } from 'src/utils/date'
 
 export const HistoryTxList = (): ReactElement => {
   const { count, hasMore, next, transactions } = usePagedHistoryTransactions()
@@ -31,7 +31,7 @@ export const HistoryTxList = (): ReactElement => {
         <InfiniteScroll dataLength={transactions.length} next={next} hasMore={hasMore}>
           {transactions?.map(([timestamp, txs]) => (
             <StyledTransactionsGroup key={timestamp}>
-              <SubTitle size="lg">{format(Number(timestamp), 'MMM d, yyyy')}</SubTitle>
+              <SubTitle size="lg">{formatWithSchema(Number(timestamp), 'MMM d, yyyy')}</SubTitle>
               <StyledTransactions>
                 {txs.map((transaction) => (
                   <TxHistoryRow key={transaction.id} transaction={transaction} />
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
index c9ce1b0c..6f8ea2ca 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
@@ -3,7 +3,7 @@ import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
 import { Tooltip } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
-import React, { ReactElement, useRef } from 'react'
+import React, { ReactElement, useContext, useRef } from 'react'
 
 import CustomIconText from 'src/components/CustomIconText'
 import {
@@ -13,7 +13,7 @@ import {
   Transaction,
 } from 'src/logic/safe/store/models/types/gateway.d'
 import { TxCollapsedActions } from 'src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions'
-import { formatDateTime, formatTime } from 'src/routes/safe/components/Transactions/GatewayTransactions/utils'
+import { formatDateTime, formatTime, formatTimeInWords } from 'src/utils/date'
 import { KNOWN_MODULES } from 'src/utils/constants'
 import styled from 'styled-components'
 import { AssetInfo, isTokenTransferAsset } from './hooks/useAssetInfo'
@@ -22,6 +22,7 @@ import { TransactionStatusProps } from './hooks/useTransactionStatus'
 import { TxTypeProps } from './hooks/useTransactionType'
 import { StyledGroupedTransactions, StyledTransaction } from './styled'
 import { TokenTransferAmount } from './TokenTransferAmount'
+import { TxLocationContext } from './TxLocationProvider'
 import { CalculatedVotes } from './TxQueueCollapsed'
 
 const TxInfo = ({ info }: { info: AssetInfo }) => {
@@ -126,6 +127,8 @@ export const TxCollapsed = ({
   actions,
   status,
 }: TxCollapsedProps): ReactElement => {
+  const { txLocation } = useContext(TxLocationContext)
+
   const willBeReplaced = transaction?.txStatus === 'WILL_BE_REPLACED' ? ' will-be-replaced' : ''
 
   const txCollapsedNonce = (
@@ -149,7 +152,7 @@ export const TxCollapsed = ({
     <div className={'tx-time' + willBeReplaced}>
       <Tooltip classes={tooltipStyles} title={formatDateTime(time)} arrow>
         <TooltipContent ref={timestamp}>
-          <Text size="xl">{formatTime(time)}</Text>
+          <Text size="xl">{txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)}</Text>
         </TooltipContent>
       </Tooltip>
     </div>
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx
index 68f4b0fd..85c066a9 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx
@@ -2,8 +2,9 @@ import { Text } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement } from 'react'
 
 import { getExplorerInfo } from 'src/config'
+import { formatDateTime } from 'src/utils/date'
 import { Creation, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
-import { formatDateTime, NOT_AVAILABLE } from './utils'
+import { NOT_AVAILABLE } from './utils'
 import { InlineEthHashInfo, TxDetailsContainer } from './styled'
 
 export const TxInfoCreation = ({ transaction }: { transaction: Transaction }): ReactElement | null => {
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx
index b0d81c82..84fb6cc7 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx
@@ -2,9 +2,10 @@ import { Text } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement } from 'react'
 
 import { getExplorerInfo } from 'src/config'
+import { formatDateTime } from 'src/utils/date'
 import { ExpandedTxDetails, isMultiSigExecutionDetails, Operation } from 'src/logic/safe/store/models/types/gateway.d'
 import { InlineEthHashInfo } from './styled'
-import { formatDateTime, NOT_AVAILABLE } from './utils'
+import { NOT_AVAILABLE } from './utils'
 
 export const TxSummary = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElement => {
   const { txHash, detailedExecutionInfo, executedAt, txData } = txDetails
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
index 15767db3..a6ca9337 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
@@ -142,7 +142,7 @@ const gridColumns = {
   nonce: '0.75fr',
   type: '3fr',
   info: '3fr',
-  time: '1.5fr',
+  time: '2fr',
   votes: '1.5fr',
   actions: '1fr',
   status: '3fr',
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/utils.ts b/src/routes/safe/components/Transactions/GatewayTransactions/utils.ts
index ac3f4b2c..7bd9a5d9 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/utils.ts
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/utils.ts
@@ -1,5 +1,4 @@
 import { BigNumber } from 'bignumber.js'
-import format from 'date-fns/format'
 
 import { getNetworkInfo } from 'src/config'
 import {
@@ -25,10 +24,6 @@ export const TX_TABLE_RAW_TX_ID = 'tx'
 export const TX_TABLE_RAW_CANCEL_TX_ID = 'cancelTx'
 export const TX_TABLE_EXPAND_ICON = 'expand'
 
-export const formatTime = (timestamp: number): string => format(timestamp, 'h:mm a')
-
-export const formatDateTime = (timestamp: number): string => format(timestamp, 'MMM d, yyyy - h:mm:ss a')
-
 export const NOT_AVAILABLE = 'n/a'
 
 interface AmountData {
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 4e531138..087b8752 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,4 +1,6 @@
-import { formatRelative } from 'date-fns'
+import format from 'date-fns/format'
+import formatRelative from 'date-fns/formatRelative'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 
 export const relativeTime = (baseTimeMin: string, resetTimeMin: string): string => {
   if (resetTimeMin === '0') {
@@ -17,3 +19,11 @@ export const getUTCStartOfDate = (timestamp: number): number => {
 
   return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 0, 0, 0, 0)
 }
+
+export const formatWithSchema = (timestamp: number, schema: string): string => format(timestamp, schema)
+
+export const formatTime = (timestamp: number): string => formatWithSchema(timestamp, 'h:mm a')
+
+export const formatDateTime = (timestamp: number): string => formatWithSchema(timestamp, 'MMM d, yyyy - h:mm:ss a')
+
+export const formatTimeInWords = (timestamp: number): string => formatDistanceToNow(timestamp, { addSuffix: true })

From 47762701e1603a230383005ba0cd46a0895d24d2 Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Wed, 10 Feb 2021 16:47:02 -0300
Subject: [PATCH 03/23] Fix dark block for tx details with empty 2nd row
 (#1880)

---
 .../safe/components/Transactions/GatewayTransactions/styled.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
index a6ca9337..ba824e75 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
@@ -305,7 +305,7 @@ export const TxDetailsContainer = styled(WillBeReplaced)`
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: minmax(min-content, max-content);
-  grid-template-rows: [tx-summary] minmax(min-content, max-content) [tx-details] minmax(100px, 1fr);
+  grid-template-rows: [tx-summary] minmax(min-content, max-content) [tx-details] minmax(min-content, 1fr);
   row-gap: 2px;
   width: 100%;
 

From 43287dd01835992a21d4f9deb0c2962d7e9e9926 Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 05:13:57 -0300
Subject: [PATCH 04/23] [Transaction List v2] - "Send to" action missing 
 (#1879)

* show missing `Send to`s sentences

* remove "Send To", from 'spending limit' transactions details
---
 .../GatewayTransactions/MethodDetails.tsx     | 26 ++--------
 .../GatewayTransactions/TxData.tsx            | 52 +++++++++++++++++--
 2 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/MethodDetails.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/MethodDetails.tsx
index 1552857c..d849aa8a 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/MethodDetails.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/MethodDetails.tsx
@@ -4,18 +4,8 @@ import styled from 'styled-components'
 
 import { DataDecoded } from 'src/logic/safe/store/models/types/gateway.d'
 import { isArrayParameter } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
-import {
-  DeleteSpendingLimitDetails,
-  isDeleteAllowance,
-  isSetAllowance,
-  ModifySpendingLimitDetails,
-} from 'src/routes/safe/components/Transactions/GatewayTransactions/SpendingLimitDetails'
 import Value from 'src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value'
 
-const TxDetailsMethodName = styled(Text)`
-  text-indent: 4px;
-`
-
 const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
   padding-left: 24px;
   display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')};
@@ -27,7 +17,7 @@ const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
 `
 
 const TxInfo = styled.div`
-  padding: 8px 8px 8px 16px;
+  padding: 8px 0;
 `
 
 const StyledMethodName = styled(Text)`
@@ -35,21 +25,11 @@ const StyledMethodName = styled(Text)`
 `
 
 export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactElement => {
-  // FixMe: this way won't scale well
-  if (isSetAllowance(data.method)) {
-    return <ModifySpendingLimitDetails data={data} />
-  }
-
-  // FixMe: this way won't scale well
-  if (isDeleteAllowance(data.method)) {
-    return <DeleteSpendingLimitDetails data={data} />
-  }
-
   return (
     <TxInfo>
-      <TxDetailsMethodName size="xl" strong>
+      <Text size="xl" strong>
         {data.method}
-      </TxDetailsMethodName>
+      </Text>
 
       {data.parameters?.map((param, index) => (
         <TxDetailsMethodParam key={`${data.method}_param-${index}`} isArrayParameter={isArrayParameter(param.type)}>
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxData.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxData.tsx
index bf777dcf..060cb6a9 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxData.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxData.tsx
@@ -1,11 +1,37 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 
-import { ExpandedTxDetails } from 'src/logic/safe/store/models/types/gateway.d'
+import { getNetworkInfo } from 'src/config'
+import { ExpandedTxDetails, TransactionData } from 'src/logic/safe/store/models/types/gateway.d'
+import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import {
+  DeleteSpendingLimitDetails,
+  isDeleteAllowance,
+  isSetAllowance,
+  ModifySpendingLimitDetails,
+} from './SpendingLimitDetails'
+import { TxInfoDetails } from './TxInfoDetails'
 import { sameString } from 'src/utils/strings'
 import { HexEncodedData } from './HexEncodedData'
 import { MethodDetails } from './MethodDetails'
 import { MultiSendDetails } from './MultiSendDetails'
 
+const { nativeCoin } = getNetworkInfo()
+
+type DetailsWithTxInfoProps = {
+  children: ReactNode
+  txData: TransactionData
+}
+
+const DetailsWithTxInfo = ({ children, txData }: DetailsWithTxInfoProps): ReactElement => (
+  <>
+    <TxInfoDetails
+      address={txData.to}
+      title={`Send ${txData.value ? fromTokenUnit(txData.value, nativeCoin.decimals) : 'n/a'} ${nativeCoin.symbol} to:`}
+    />
+    {children}
+  </>
+)
+
 type TxDataProps = {
   txData: ExpandedTxDetails['txData']
 }
@@ -24,7 +50,11 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
     }
 
     // we render the hex encoded data
-    return <HexEncodedData hexData={txData.hexData} />
+    return (
+      <DetailsWithTxInfo txData={txData}>
+        <HexEncodedData hexData={txData.hexData} />
+      </DetailsWithTxInfo>
+    )
   }
 
   // known data and particularly `multiSend` data type
@@ -32,6 +62,20 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
     return <MultiSendDetails txData={txData} />
   }
 
+  // FixMe: this way won't scale well
+  if (isSetAllowance(txData.dataDecoded.method)) {
+    return <ModifySpendingLimitDetails data={txData.dataDecoded} />
+  }
+
+  // FixMe: this way won't scale well
+  if (isDeleteAllowance(txData.dataDecoded.method)) {
+    return <DeleteSpendingLimitDetails data={txData.dataDecoded} />
+  }
+
   // we render the decoded data
-  return <MethodDetails data={txData.dataDecoded} />
+  return (
+    <DetailsWithTxInfo txData={txData}>
+      <MethodDetails data={txData.dataDecoded} />
+    </DetailsWithTxInfo>
+  )
 }

From e9bc89488f64386840e52dd56206710af7a15270 Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 05:17:56 -0300
Subject: [PATCH 05/23] Group transactions by locale TZ (#1883)

---
 src/logic/safe/store/reducer/gatewayTransactions.ts | 4 ++--
 src/utils/date.ts                                   | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/logic/safe/store/reducer/gatewayTransactions.ts b/src/logic/safe/store/reducer/gatewayTransactions.ts
index 8037fa90..df347f4c 100644
--- a/src/logic/safe/store/reducer/gatewayTransactions.ts
+++ b/src/logic/safe/store/reducer/gatewayTransactions.ts
@@ -22,7 +22,7 @@ import {
 import { UPDATE_TRANSACTION_DETAILS } from 'src/logic/safe/store/actions/fetchTransactionDetails'
 
 import { AppReduxState } from 'src/store'
-import { getUTCStartOfDate } from 'src/utils/date'
+import { getLocalStartOfDate } from 'src/utils/date'
 import { sameString } from 'src/utils/strings'
 import { sortObject } from 'src/utils/objects'
 
@@ -78,7 +78,7 @@ export const gatewayTransactions = handleActions<AppReduxState['gatewayTransacti
         }
 
         if (isTransactionSummary(value)) {
-          const startOfDate = getUTCStartOfDate(value.transaction.timestamp)
+          const startOfDate = getLocalStartOfDate(value.transaction.timestamp)
 
           if (typeof history[startOfDate] === 'undefined') {
             history[startOfDate] = []
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 087b8752..bcd839d2 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -20,6 +20,12 @@ export const getUTCStartOfDate = (timestamp: number): number => {
   return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 0, 0, 0, 0)
 }
 
+export const getLocalStartOfDate = (timestamp: number): number => {
+  const date = new Date(timestamp)
+
+  return date.setHours(0, 0, 0, 0)
+}
+
 export const formatWithSchema = (timestamp: number, schema: string): string => format(timestamp, schema)
 
 export const formatTime = (timestamp: number): string => formatWithSchema(timestamp, 'h:mm a')

From fa2262f8b0ec3efb5631bcd0e392aba3c979325f Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 05:21:37 -0300
Subject: [PATCH 06/23] [Transaction List v2] Action buttons tooltip (#1884)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix tooltip for action buttons

* add margin  botton to the tooltip

Co-authored-by: Agustín Longoni <agustin.longoni@altoros.com>
---
 .../TxCollapsedActions.tsx                    | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
index 270878bf..19805222 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
@@ -1,11 +1,26 @@
-import { Icon } from '@gnosis.pm/safe-react-components'
+import { Icon, theme } from '@gnosis.pm/safe-react-components'
+import { Tooltip as TooltipMui } from '@material-ui/core'
 import { default as MuiIconButton } from '@material-ui/core/IconButton'
+import { withStyles } from '@material-ui/core/styles'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 
 import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
 import { useActionButtonsHandlers } from './hooks/useActionButtonsHandlers'
 
+const Tooltip = withStyles(() => ({
+  popper: {
+    zIndex: 2001,
+  },
+  tooltip: {
+    marginBottom: '4px',
+    backgroundColor: theme.colors.overlay.color,
+    border: `1px solid ${theme.colors.icon}`,
+    boxShadow: `1px 2px 4px ${theme.colors.shadow.color}14`,
+    color: theme.colors.text,
+  },
+}))(TooltipMui)
+
 const IconButton = styled(MuiIconButton)`
   padding: 8px !important;
 
@@ -32,26 +47,25 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
   return (
     <>
       {
-        <IconButton
-          size="small"
-          type="button"
-          onClick={handleConfirmButtonClick}
-          disabled={disabledActions}
-          onMouseEnter={handleOnMouseEnter}
-          onMouseLeave={handleOnMouseLeave}
-        >
-          <Icon
-            type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'}
-            color="primary"
-            size="sm"
-            tooltip={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'}
-          />
-        </IconButton>
+        <Tooltip title={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'} placement="top">
+          <IconButton
+            size="small"
+            type="button"
+            onClick={handleConfirmButtonClick}
+            disabled={disabledActions}
+            onMouseEnter={handleOnMouseEnter}
+            onMouseLeave={handleOnMouseLeave}
+          >
+            <Icon type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'} color="primary" size="sm" />
+          </IconButton>
+        </Tooltip>
       }
       {canCancel && (
-        <IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>
-          <Icon type="circleCross" color="error" size="sm" tooltip="Cancel" />
-        </IconButton>
+        <Tooltip title="Cancel" placement="top">
+          <IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>
+            <Icon type="circleCross" color="error" size="sm" />
+          </IconButton>
+        </Tooltip>
       )}
     </>
   )

From 1994f6282705aaf0e5b5ba36baa5ee45f8377e3b Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 05:22:27 -0300
Subject: [PATCH 07/23] Avoid displaying `UNKNOWN` in owner's list (#1881)

---
 .../components/Transactions/GatewayTransactions/OwnerRow.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/OwnerRow.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/OwnerRow.tsx
index 471a81c3..ebfca691 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/OwnerRow.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/OwnerRow.tsx
@@ -11,7 +11,7 @@ export const OwnerRow = ({ ownerAddress }: { ownerAddress: string }): ReactEleme
   return (
     <EthHashInfo
       hash={ownerAddress}
-      name={ownerName}
+      name={ownerName === 'UNKNOWN' ? '' : ownerName}
       showIdenticon
       showCopyBtn
       explorerUrl={getExplorerInfo(ownerAddress)}

From d3538d2d83dc991732a710875fb957483f70f3e2 Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 05:31:08 -0300
Subject: [PATCH 08/23] Remove curried function from within `useCallback` hook
 (#1882)

---
 .../GatewayTransactions/hooks/useActionButtonsHandlers.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/hooks/useActionButtonsHandlers.ts b/src/routes/safe/components/Transactions/GatewayTransactions/hooks/useActionButtonsHandlers.ts
index db5399cf..3921d215 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/hooks/useActionButtonsHandlers.ts
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/hooks/useActionButtonsHandlers.ts
@@ -62,7 +62,7 @@ export const useActionButtonsHandlers = (transaction: Transaction): ActionButton
 
   const isPending = useMemo(() => !!transaction.txStatus.match(/^PENDING.*/), [transaction.txStatus])
 
-  const signaturePending = useCallback(addressInList(transaction.executionInfo?.missingSigners), [])
+  const signaturePending = addressInList(transaction.executionInfo?.missingSigners)
 
   const disabledActions = useMemo(
     () =>

From 64defa776acfe0424c7560819ed04c12fca57743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 11 Feb 2021 15:07:49 -0300
Subject: [PATCH 09/23] fix tree align and paddings

---
 .../Transactions/GatewayTransactions/styled.tsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
index ba824e75..755d7dd7 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
@@ -139,7 +139,7 @@ export const GroupedTransactionsCard = styled(StyledTransactions)`
   }
 `
 const gridColumns = {
-  nonce: '0.75fr',
+  nonce: '0.5fr',
   type: '3fr',
   info: '3fr',
   time: '2fr',
@@ -208,7 +208,7 @@ export const GroupedTransactions = styled(StyledTransaction)`
   // builds the tree-view layout
   .tree-lines {
     height: 100%;
-    margin-left: 50%;
+    margin-left: 30px;
     position: relative;
     width: 30%;
 
@@ -286,8 +286,8 @@ export const DisclaimerContainer = styled(StyledTransaction)`
   background-color: ${({ theme }) => theme.colors.inputField} !important;
   border-radius: 4px;
   margin: 12px 8px 0 12px;
-  padding: 8px;
-  width: calc(100% - 40px);
+  padding: 8px 12px;
+  width: calc(100% - 48px);
 
   .nonce {
     grid-column-start: 1;

From 7a550e3ed3e13e3e3c8fb883c6e08c9438b3dd00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 11 Feb 2021 15:08:32 -0300
Subject: [PATCH 10/23] fix Advanced option style on reject modal

---
 .../GatewayTransactions/modals/RejectTxModal.tsx       | 10 ++++++----
 .../Transactions/GatewayTransactions/modals/style.ts   |  6 +++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/modals/RejectTxModal.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/modals/RejectTxModal.tsx
index 571c0678..97637461 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/modals/RejectTxModal.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/modals/RejectTxModal.tsx
@@ -117,12 +117,14 @@ export const RejectTxModal = ({ isOpen, onClose, gwTransaction }: Props): React.
                 <TxParametersDetail
                   txParameters={txParameters}
                   onEdit={toggleEditMode}
-                  compact={false}
                   parametersStatus={getParametersStatus()}
                   isTransactionCreation={isCreation}
                   isTransactionExecution={isExecution}
                 />
-                <Row>
+              </Block>
+
+              {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
+                <Block className={classes.gasCostsContainer}>
                   <TransactionFees
                     gasCostFormatted={gasCostFormatted}
                     isExecution={isExecution}
@@ -130,8 +132,8 @@ export const RejectTxModal = ({ isOpen, onClose, gwTransaction }: Props): React.
                     isOffChainSignature={isOffChainSignature}
                     txEstimationExecutionStatus={txEstimationExecutionStatus}
                   />
-                </Row>
-              </Block>
+                </Block>
+              )}
               <Row align="center" className={classes.buttonRow}>
                 <Button minHeight={42} minWidth={140} onClick={onClose}>
                   Exit
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/modals/style.ts b/src/routes/safe/components/Transactions/GatewayTransactions/modals/style.ts
index a4440670..19a99e1e 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/modals/style.ts
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/modals/style.ts
@@ -1,5 +1,5 @@
 import { createStyles } from '@material-ui/core'
-import { border, lg, md, sm } from 'src/theme/variables'
+import { background, border, lg, md, sm } from 'src/theme/variables'
 
 export const styles = createStyles({
   heading: {
@@ -30,4 +30,8 @@ export const styles = createStyles({
     marginTop: sm,
     fontSize: md,
   },
+  gasCostsContainer: {
+    backgroundColor: background,
+    padding: `0 ${lg}`,
+  },
 })

From dbf34c759a46246fbbc1be2accc616452910a6a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 11 Feb 2021 15:57:34 -0300
Subject: [PATCH 11/23] fix Advanced option style on Execute modal

---
 .../modals/ApproveTxModal.tsx                 | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/modals/ApproveTxModal.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/modals/ApproveTxModal.tsx
index 60c18317..d6b1694a 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/modals/ApproveTxModal.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/modals/ApproveTxModal.tsx
@@ -380,16 +380,20 @@ export const ApproveTxModal = ({
                     />
                   )}
                 </Row>
-
-                <TransactionFees
-                  gasCostFormatted={gasCostFormatted}
-                  isExecution={isExecution}
-                  isCreation={isCreation}
-                  isOffChainSignature={isOffChainSignature}
-                  txEstimationExecutionStatus={txEstimationExecutionStatus}
-                />
               </Block>
 
+              {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
+                <Block className={classes.gasCostsContainer}>
+                  <TransactionFees
+                    gasCostFormatted={gasCostFormatted}
+                    isExecution={isExecution}
+                    isCreation={isCreation}
+                    isOffChainSignature={isOffChainSignature}
+                    txEstimationExecutionStatus={txEstimationExecutionStatus}
+                  />
+                </Block>
+              )}
+
               {/* Footer */}
               <Row align="center" className={classes.buttonRow}>
                 <Button minHeight={42} minWidth={140} onClick={onClose}>

From ded5e1425722ba3ba93e0262933abea17a55c41e Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 18:24:05 -0300
Subject: [PATCH 12/23] [Transaction List v2] Prevent "Send Again" for ERC721
 transfers (#1889)

---
 .../Transactions/GatewayTransactions/TxInfoDetails.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoDetails.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoDetails.tsx
index 4557f2ea..2ef7d24a 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoDetails.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoDetails.tsx
@@ -30,7 +30,15 @@ export const TxInfoDetails = ({ title, address, isTransferType, txInfo }: TxInfo
   const knownAddress = recipientName !== 'UNKNOWN'
 
   const { txLocation } = useContext<TxLocationProps>(TxLocationContext)
-  const canRepeatTransaction = isTransferType && txLocation === 'history' && txInfo?.direction === 'OUTGOING'
+  const canRepeatTransaction =
+    // is transfer type by context
+    isTransferType &&
+    // not a Collectible
+    txInfo?.transferInfo.type !== 'ERC721' &&
+    // in history list
+    txLocation === 'history' &&
+    // it's outgoing
+    txInfo?.direction === 'OUTGOING'
 
   const [sendModalOpen, setSendModalOpen] = useState(false)
   const sendModalOpenHandler = () => {

From 0e23b8f6d39ba868292011093936b32854e50338 Mon Sep 17 00:00:00 2001
From: fernandomg <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 19:16:06 -0300
Subject: [PATCH 13/23] fix columns alignment

---
 .../Transactions/GatewayTransactions/styled.tsx           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
index 755d7dd7..b468e855 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
@@ -142,10 +142,10 @@ const gridColumns = {
   nonce: '0.5fr',
   type: '3fr',
   info: '3fr',
-  time: '2fr',
+  time: '2.5fr',
   votes: '1.5fr',
   actions: '1fr',
-  status: '3fr',
+  status: '2.5fr',
 }
 
 export const WillBeReplaced = styled.div`
@@ -165,6 +165,10 @@ export const StyledTransaction = styled(WillBeReplaced)`
     align-self: center;
   }
 
+  .tx-votes {
+    justify-self: center;
+  }
+
   .tx-actions {
     visibility: hidden;
     justify-self: end;

From 1e0f8b9b7ed63fde1dc576af5b29b80db78b94d8 Mon Sep 17 00:00:00 2001
From: fernandomg <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 19:18:24 -0300
Subject: [PATCH 14/23] fix `[warning] react-hooks/exhaustive-deps`

---
 src/components/CookiesBanner/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/CookiesBanner/index.tsx b/src/components/CookiesBanner/index.tsx
index 5386a556..06fc2bc9 100644
--- a/src/components/CookiesBanner/index.tsx
+++ b/src/components/CookiesBanner/index.tsx
@@ -1,7 +1,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import { makeStyles } from '@material-ui/core/styles'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import Button from 'src/components/layout/Button'
 import Link from 'src/components/layout/Link'
@@ -96,7 +96,7 @@ interface CookiesBannerFormProps {
 
 const CookiesBanner = (): ReactElement => {
   const classes = useStyles()
-  const dispatch = useDispatch()
+  const dispatch = useRef(useDispatch())
 
   const [showAnalytics, setShowAnalytics] = useState(false)
   const [showIntercom, setShowIntercom] = useState(false)
@@ -110,7 +110,7 @@ const CookiesBanner = (): ReactElement => {
     async function fetchCookiesFromStorage() {
       const cookiesState = await loadFromCookie(COOKIES_KEY)
       if (!cookiesState) {
-        dispatch(openCookieBanner({ cookieBannerOpen: true }))
+        dispatch.current(openCookieBanner({ cookieBannerOpen: true }))
       } else {
         const { acceptedIntercom, acceptedAnalytics, acceptedNecessary } = cookiesState
         if (acceptedIntercom === undefined) {
@@ -143,7 +143,7 @@ const CookiesBanner = (): ReactElement => {
     await saveCookie(COOKIES_KEY, newState, 365)
     setShowAnalytics(!isDesktop)
     setShowIntercom(true)
-    dispatch(openCookieBanner({ cookieBannerOpen: false }))
+    dispatch.current(openCookieBanner({ cookieBannerOpen: false }))
   }
 
   const closeCookiesBannerHandler = async () => {
@@ -159,7 +159,7 @@ const CookiesBanner = (): ReactElement => {
     if (!localIntercom && isIntercomLoaded()) {
       closeIntercom()
     }
-    dispatch(openCookieBanner({ cookieBannerOpen: false }))
+    dispatch.current(openCookieBanner({ cookieBannerOpen: false }))
   }
 
   if (showAnalytics && !isDesktop) {
@@ -254,7 +254,7 @@ const CookiesBanner = (): ReactElement => {
         <img
           className={classes.intercomImage}
           src={IntercomIcon}
-          onClick={() => dispatch(openCookieBanner({ cookieBannerOpen: true, intercomAlertDisplayed: true }))}
+          onClick={() => dispatch.current(openCookieBanner({ cookieBannerOpen: true, intercomAlertDisplayed: true }))}
         />
       )}
       {!isDesktop && showBanner?.cookieBannerOpen && (

From 906e90c1d05f5194d28d4b9a9d0d74c735d605aa Mon Sep 17 00:00:00 2001
From: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Date: Fri, 12 Feb 2021 16:37:30 +0100
Subject: [PATCH 15/23] Parse number|string|undefined for Safe App tx value
 (#1891)

---
 .../Apps/components/ConfirmTransactionModal.tsx        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
index 5d28bfd0..784c9e33 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
@@ -20,6 +20,7 @@ import { createTransaction } from 'src/logic/safe/store/actions/createTransactio
 import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts'
 import { DELEGATE_CALL, TX_NOTIFICATION_TYPES, CALL } from 'src/logic/safe/transactions'
 import { encodeMultiSendCall } from 'src/logic/safe/transactions/multisend'
+import { web3ReadOnly } from 'src/logic/wallets/getWeb3'
 
 import GasEstimationInfo from './GasEstimationInfo'
 import { getNetworkInfo } from 'src/config'
@@ -105,6 +106,10 @@ type OwnProps = {
 
 const { nativeCoin } = getNetworkInfo()
 
+const parseTxValue = (value: string | number): string => {
+  return web3ReadOnly.utils.toBN(value).toString()
+}
+
 export const ConfirmTransactionModal = ({
   isOpen,
   app,
@@ -122,7 +127,10 @@ export const ConfirmTransactionModal = ({
 
   const txRecipient: string | undefined = useMemo(() => (txs.length > 1 ? MULTI_SEND_ADDRESS : txs[0]?.to), [txs])
   const txData: string | undefined = useMemo(() => (txs.length > 1 ? encodeMultiSendCall(txs) : txs[0]?.data), [txs])
-  const txValue: string | undefined = useMemo(() => (txs.length > 1 ? '0' : txs[0]?.value), [txs])
+  const txValue: string | undefined = useMemo(
+    () => (txs.length > 1 ? '0' : txs[0]?.value && parseTxValue(txs[0]?.value)),
+    [txs],
+  )
   const operation = useMemo(() => (txs.length > 1 ? DELEGATE_CALL : CALL), [txs])
   const [manualSafeTxGas, setManualSafeTxGas] = useState(0)
   const [manualGasPrice, setManualGasPrice] = useState<string | undefined>()

From b6a167563b520ca3f95f1f329ee1ea055d122c63 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 12 Feb 2021 12:38:41 -0300
Subject: [PATCH 16/23] Fix createTransaction nonce usage on
 removeSelectedModule (#1892)

---
 .../safe/components/Settings/Advanced/RemoveModuleModal.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx b/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx
index 5421b50a..ad66f1b1 100644
--- a/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx
+++ b/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx
@@ -86,13 +86,13 @@ export const RemoveModuleModal = ({ onClose, selectedModulePair }: RemoveModuleM
 
   const removeSelectedModule = async (txParameters: TxParameters): Promise<void> => {
     try {
-      dispatch(
+      await dispatch(
         createTransaction({
           safeAddress,
           to: safeAddress,
           valueInWei: '0',
           txData,
-          txNonce: txParameters.ethNonce,
+          txNonce: txParameters.safeNonce,
           safeTxGas: txParameters.safeTxGas ? Number(txParameters.safeTxGas) : undefined,
           ethParameters: txParameters,
           notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,

From 0821ff4a04074fb807eddc5ca030f6f6079c706b Mon Sep 17 00:00:00 2001
From: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Date: Fri, 12 Feb 2021 16:53:05 +0100
Subject: [PATCH 17/23] Set v2.20.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cfc2c775..dc8389b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {

From 9800ce78eff0bbb8df291244fee5873f2de0d7ed Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Mon, 15 Feb 2021 05:54:28 -0300
Subject: [PATCH 18/23] add styles for failed-transaction (#1897)

---
 .../GatewayTransactions/TxCollapsed.tsx       |  5 +++--
 .../GatewayTransactions/styled.tsx            | 21 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
index 6f8ea2ca..f624ef4c 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
@@ -4,6 +4,7 @@ import { Tooltip } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import React, { ReactElement, useContext, useRef } from 'react'
+import styled from 'styled-components'
 
 import CustomIconText from 'src/components/CustomIconText'
 import {
@@ -15,7 +16,7 @@ import {
 import { TxCollapsedActions } from 'src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions'
 import { formatDateTime, formatTime, formatTimeInWords } from 'src/utils/date'
 import { KNOWN_MODULES } from 'src/utils/constants'
-import styled from 'styled-components'
+import { sameString } from 'src/utils/strings'
 import { AssetInfo, isTokenTransferAsset } from './hooks/useAssetInfo'
 import { TransactionActions } from './hooks/useTransactionActions'
 import { TransactionStatusProps } from './hooks/useTransactionStatus'
@@ -206,7 +207,7 @@ export const TxCollapsed = ({
       {txCollapsedStatus}
     </StyledGroupedTransactions>
   ) : (
-    <StyledTransaction>
+    <StyledTransaction className={sameString(status.text, 'Failed') ? 'failed-transaction' : ''}>
       {txCollapsedNonce}
       {txCollapsedType}
       {txCollapsedInfo}
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
index b468e855..6add4c8d 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
@@ -6,7 +6,7 @@ import {
   EthHashInfo,
   IconText,
 } from '@gnosis.pm/safe-react-components'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const Wrapper = styled.div`
   display: flex;
@@ -148,7 +148,7 @@ const gridColumns = {
   status: '2.5fr',
 }
 
-export const WillBeReplaced = styled.div`
+const willBeReplaced = css`
   .will-be-replaced * {
     color: gray !important;
     text-decoration: line-through !important;
@@ -156,7 +156,18 @@ export const WillBeReplaced = styled.div`
   }
 `
 
-export const StyledTransaction = styled(WillBeReplaced)`
+const failedTransaction = css`
+  &.failed-transaction {
+    div[class^='tx-']:not(.tx-status):not(.tx-nonce) {
+      opacity: 0.5;
+    }
+  }
+`
+
+export const StyledTransaction = styled.div`
+  ${willBeReplaced};
+  ${failedTransaction};
+
   display: grid;
   grid-template-columns: ${Object.values(gridColumns).join(' ')};
   width: 100%;
@@ -303,7 +314,9 @@ export const DisclaimerContainer = styled(StyledTransaction)`
   }
 `
 
-export const TxDetailsContainer = styled(WillBeReplaced)`
+export const TxDetailsContainer = styled.div`
+  ${willBeReplaced};
+
   background-color: ${({ theme }) => theme.colors.separator} !important;
   column-gap: 2px;
   display: grid;

From 49cdd2874eb60bfb9ded71e958913f6eca260d5b Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Mon, 15 Feb 2021 05:56:12 -0300
Subject: [PATCH 19/23] [Transaction List v2] Pending status only if user signs
 the tx (#1890)

* prevent setting a tx to _pending_ if user didn't signed the tx
---
 src/logic/safe/store/reducer/gatewayTransactions.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/logic/safe/store/reducer/gatewayTransactions.ts b/src/logic/safe/store/reducer/gatewayTransactions.ts
index df347f4c..a3eada88 100644
--- a/src/logic/safe/store/reducer/gatewayTransactions.ts
+++ b/src/logic/safe/store/reducer/gatewayTransactions.ts
@@ -326,6 +326,11 @@ export const gatewayTransactions = handleActions<AppReduxState['gatewayTransacti
         }
         case 'queued.next': {
           queued.next[nonce] = queued.next[nonce].map((txToUpdate) => {
+            // prevent setting `PENDING_FAILED` status, if previous status wasn't `PENDING`
+            if (txStatus === 'PENDING_FAILED' && txToUpdate.txStatus !== 'PENDING') {
+              return txToUpdate
+            }
+
             if (typeof id !== 'undefined') {
               if (sameString(txToUpdate.id, id)) {
                 txToUpdate.txStatus = txStatus
@@ -339,6 +344,11 @@ export const gatewayTransactions = handleActions<AppReduxState['gatewayTransacti
         }
         case 'queued.queued': {
           queued.queued[nonce] = queued.queued[nonce].map((txToUpdate) => {
+            // prevent setting `PENDING_FAILED` status, if previous status wasn't `PENDING`
+            if (txStatus === 'PENDING_FAILED' && txToUpdate.txStatus !== 'PENDING') {
+              return txToUpdate
+            }
+
             if (typeof id !== 'undefined') {
               if (sameString(txToUpdate.id, id)) {
                 txToUpdate.txStatus = txStatus

From aaf14e80c7ab15baf07b49d96d59fcb8391312a1 Mon Sep 17 00:00:00 2001
From: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Date: Mon, 15 Feb 2021 15:12:59 +0100
Subject: [PATCH 20/23] Fix use of transaction parameters for threshold change
 transaction (#1903)

---
 .../ChangeThreshold/index.tsx                 | 24 ++++++---
 .../Settings/ThresholdSettings/index.tsx      | 49 +------------------
 2 files changed, 20 insertions(+), 53 deletions(-)

diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 9e0ad780..4397b5ae 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -3,6 +3,7 @@ import MenuItem from '@material-ui/core/MenuItem'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
 import { List } from 'immutable'
 
 import Field from 'src/components/forms/Field'
@@ -20,6 +21,8 @@ import { SafeOwner } from 'src/logic/safe/store/models/safe'
 import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 import { TransactionFees } from 'src/components/TransactionsFees'
 import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
+import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
+import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 
 import { styles } from './style'
 import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
@@ -30,7 +33,6 @@ const THRESHOLD_FIELD_NAME = 'threshold'
 const useStyles = makeStyles(styles)
 
 type ChangeThresholdModalProps = {
-  onChangeThreshold: (newThreshold: number) => void
   onClose: () => void
   owners?: List<SafeOwner>
   safeAddress: string
@@ -38,13 +40,13 @@ type ChangeThresholdModalProps = {
 }
 
 export const ChangeThresholdModal = ({
-  onChangeThreshold,
   onClose,
   owners,
   safeAddress,
   threshold = 1,
 }: ChangeThresholdModalProps): React.ReactElement => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const [data, setData] = useState('')
   const [manualSafeTxGas, setManualSafeTxGas] = useState(0)
   const [manualGasPrice, setManualGasPrice] = useState<string | undefined>()
@@ -83,11 +85,21 @@ export const ChangeThresholdModal = ({
 
   const getParametersStatus = () => (threshold > 1 ? 'ETH_DISABLED' : 'ENABLED')
 
-  const handleSubmit = (values) => {
-    const newThreshold = values[THRESHOLD_FIELD_NAME]
+  const handleSubmit = async ({ txParameters }) => {
+    await dispatch(
+      createTransaction({
+        safeAddress,
+        to: safeAddress,
+        valueInWei: '0',
+        txData: data,
+        txNonce: txParameters.safeNonce,
+        safeTxGas: txParameters.safeTxGas ? Number(txParameters.safeTxGas) : undefined,
+        ethParameters: txParameters,
+        notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
+      }),
+    )
 
     onClose()
-    onChangeThreshold(newThreshold)
   }
 
   const closeEditModalCallback = (txParameters: TxParameters) => {
@@ -123,7 +135,7 @@ export const ChangeThresholdModal = ({
             </IconButton>
           </Row>
           <Hairline />
-          <GnoForm initialValues={{ threshold: threshold.toString() }} onSubmit={handleSubmit}>
+          <GnoForm initialValues={{ threshold: threshold.toString(), txParameters }} onSubmit={handleSubmit}>
             {() => (
               <>
                 <Block className={classes.modalContent}>
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
index 39cd0a36..bdac5ec3 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React, { useState, useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 
 import Modal from 'src/components/Modal'
 import Block from 'src/components/layout/Block'
@@ -9,18 +9,13 @@ import Button from 'src/components/layout/Button'
 import Heading from 'src/components/layout/Heading'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
-import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { grantedSelector } from 'src/routes/safe/container/selector'
-import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
 import {
   safeOwnersSelector,
   safeParamAddressFromStateSelector,
   safeThresholdSelector,
 } from 'src/logic/safe/store/selectors'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
-import { useTransactionParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
-import { EditTxParametersForm } from 'src/routes/safe/components/Transactions/helpers/EditTxParametersForm'
 
 import { ChangeThresholdModal } from './ChangeThreshold'
 import { styles } from './style'
@@ -30,46 +25,21 @@ const useStyles = makeStyles(styles)
 const ThresholdSettings = (): React.ReactElement => {
   const classes = useStyles()
   const [isModalOpen, setModalOpen] = useState(false)
-  const dispatch = useDispatch()
   const threshold = useSelector(safeThresholdSelector) || 1
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const owners = useSelector(safeOwnersSelector)
   const granted = useSelector(grantedSelector)
-  const txParameters = useTransactionParameters()
-  const [activeScreen, setActiveScreen] = useState('form')
 
   const toggleModal = () => {
     setModalOpen((prevOpen) => !prevOpen)
   }
 
-  const onChangeThreshold = async (newThreshold: number) => {
-    const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-    const txData = safeInstance.methods.changeThreshold(newThreshold).encodeABI()
-
-    dispatch(
-      createTransaction({
-        safeAddress,
-        to: safeAddress,
-        valueInWei: '0',
-        txData,
-        txNonce: txParameters.safeNonce,
-        safeTxGas: txParameters.safeTxGas ? Number(txParameters.safeTxGas) : undefined,
-        ethParameters: txParameters,
-        notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
-      }),
-    )
-  }
-
   const { trackEvent } = useAnalytics()
 
   useEffect(() => {
     trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Settings', label: 'Owners' })
   }, [trackEvent])
 
-  const closeEditTxParameters = () => setActiveScreen('form')
-
-  const getParametersStatus = () => (threshold > 1 ? 'ETH_DISABLED' : 'ENABLED')
-
   return (
     <>
       <Block className={classes.container}>
@@ -98,22 +68,7 @@ const ThresholdSettings = (): React.ReactElement => {
         open={isModalOpen}
         title="Change Required Confirmations"
       >
-        {activeScreen === 'form' && (
-          <ChangeThresholdModal
-            onChangeThreshold={onChangeThreshold}
-            onClose={toggleModal}
-            owners={owners}
-            safeAddress={safeAddress}
-            threshold={threshold}
-          />
-        )}
-        {activeScreen === 'editTxParameters' && (
-          <EditTxParametersForm
-            txParameters={txParameters}
-            onClose={closeEditTxParameters}
-            parametersStatus={getParametersStatus()}
-          />
-        )}
+        <ChangeThresholdModal onClose={toggleModal} owners={owners} safeAddress={safeAddress} threshold={threshold} />
       </Modal>
     </>
   )

From d115e4f5327f200078d93a796621001ff869086a Mon Sep 17 00:00:00 2001
From: Tobias Schubotz <tobias@gnosis.pm>
Date: Mon, 15 Feb 2021 15:13:43 +0100
Subject: [PATCH 21/23] Fix link in advanced params (#1901)

---
 .../Transactions/helpers/EditTxParametersForm/index.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
index 5ad7425a..436df795 100644
--- a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
+++ b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
@@ -203,7 +203,7 @@ export const EditTxParametersForm = ({
               </EthereumOptions>
 
               <StyledLink
-                href="https://docs.gnosis.io/safe/docs/contracts_tx_execution/#safe-transaction-gas-limit-estimation"
+                href="https://help.gnosis-safe.io/en/articles/4738445-configure-advanced-transaction-parameters-manually"
                 target="_blank"
               >
                 <Text size="xl" color="primary">

From 37f3b30112c4862adebdffb6fa342e58a7ae7d33 Mon Sep 17 00:00:00 2001
From: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Date: Mon, 15 Feb 2021 16:55:33 +0100
Subject: [PATCH 22/23] Show Multisend information even when there is no
 details (#1904)

---
 .../GatewayTransactions/MultiSendDetails.tsx   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/MultiSendDetails.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/MultiSendDetails.tsx
index d1a4ff34..956d3f66 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/MultiSendDetails.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/MultiSendDetails.tsx
@@ -60,21 +60,21 @@ export const MultiSendDetails = ({ txData }: { txData: TransactionData }): React
         const title = `Send ${amount} ${nativeCoin.name} to:`
 
         if (dataDecoded) {
+          // Backend decoded data
           details = <MethodDetails data={dataDecoded} />
         } else {
+          // We couldn't decode it but we have data
           details = data && <HexEncodedData hexData={data} />
         }
 
         return (
-          details && (
-            <MultiSendTxGroup
-              key={`${data ?? to}-${index}`}
-              actionTitle={actionTitle}
-              txDetails={{ title, address: to, dataDecoded }}
-            >
-              {details}
-            </MultiSendTxGroup>
-          )
+          <MultiSendTxGroup
+            key={`${data ?? to}-${index}`}
+            actionTitle={actionTitle}
+            txDetails={{ title, address: to, dataDecoded }}
+          >
+            {details}
+          </MultiSendTxGroup>
         )
       })}
     </>

From 1cb21c671fadda2b8ae5de92673de4b0689063fe Mon Sep 17 00:00:00 2001
From: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Date: Mon, 15 Feb 2021 17:41:20 +0100
Subject: [PATCH 23/23] Set v3.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dc8389b1..bfc701c5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "2.20.0",
+  "version": "3.0.0",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {