From 63cd88d845087995505d6dae7602035281092277 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 5 Feb 2021 14:58:08 -0300 Subject: [PATCH] Gas calculation info UI fixes (#1861) * upgrade SRC * add styles to GasInfo container * reject modal Co-authored-by: Daniel Sanchez --- package.json | 2 +- src/components/TransactionsFees/index.tsx | 16 ++- .../components/ConfirmTransactionModal.tsx | 115 ++++++++++-------- .../ContractInteraction/Review/index.tsx | 21 ++-- .../ReviewCustomTx/index.tsx | 10 +- .../ReviewCustomTx/style.ts | 6 +- .../screens/ContractInteraction/style.ts | 6 +- .../screens/ReviewCollectible/index.tsx | 20 ++- .../screens/ReviewCollectible/style.ts | 6 +- .../screens/ReviewSendFundsTx/index.tsx | 10 +- .../screens/ReviewSendFundsTx/style.ts | 6 +- .../Settings/Advanced/RemoveModuleModal.tsx | 24 ++-- .../components/Settings/Advanced/style.ts | 10 +- .../AddOwnerModal/screens/Review/style.ts | 1 + .../RemoveOwnerModal/screens/Review/index.tsx | 1 - .../RemoveOwnerModal/screens/Review/style.ts | 1 + .../screens/Review/index.tsx | 1 - .../ReplaceOwnerModal/screens/Review/style.ts | 1 + .../SpendingLimit/NewLimitModal/Review.tsx | 26 ++-- .../SpendingLimit/RemoveLimitModal.tsx | 18 +-- .../Settings/SpendingLimit/style.ts | 4 + .../ChangeThreshold/index.tsx | 11 +- .../ChangeThreshold/style.ts | 6 +- .../Settings/UpdateSafeModal/index.tsx | 9 +- .../Settings/UpdateSafeModal/style.ts | 6 +- .../ExpandedTx/ApproveTxModal/index.tsx | 20 +-- .../ExpandedTx/ApproveTxModal/style.ts | 6 +- .../ExpandedTx/RejectTxModal/index.tsx | 9 +- .../ExpandedTx/RejectTxModal/style.ts | 6 +- .../helpers/TxParametersDetail/index.tsx | 2 +- yarn.lock | 4 +- 31 files changed, 221 insertions(+), 163 deletions(-) diff --git a/package.json b/package.json index 74667b3f..4e533a49 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "@gnosis.pm/safe-apps-sdk": "1.0.3", "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2", "@gnosis.pm/safe-contracts": "1.1.1-dev.2", - "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#2e7574f", + "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#420f595", "@gnosis.pm/util-contracts": "2.0.6", "@ledgerhq/hw-transport-node-hid-singleton": "5.41.0", "@material-ui/core": "^4.11.0", diff --git a/src/components/TransactionsFees/index.tsx b/src/components/TransactionsFees/index.tsx index 09187210..b9f2afe7 100644 --- a/src/components/TransactionsFees/index.tsx +++ b/src/components/TransactionsFees/index.tsx @@ -3,6 +3,7 @@ import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas' import Paragraph from 'src/components/layout/Paragraph' import { getNetworkInfo } from 'src/config' import { TransactionFailText } from 'src/components/TransactionFailText' +import { Text } from '@gnosis.pm/safe-react-components' type TransactionFailTextProps = { txEstimationExecutionStatus: EstimationStatus @@ -34,11 +35,18 @@ export const TransactionFees = ({ return ( <> - + You're about to {transactionAction} a transaction and will have to confirm it with your currently connected - wallet. - {!isOffChainSignature && - ` Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`} + wallet.{' '} + {!isOffChainSignature && ( + <> + Make sure you have{' '} + + {gasCostFormatted} + {' '} + (fee price) {nativeCoin.name} in this wallet to fund this confirmation. + + )} diff --git a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx index 057cf611..e20bf62d 100644 --- a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx +++ b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx @@ -32,7 +32,7 @@ import Hairline from 'src/components/layout/Hairline' import { TransactionFees } from 'src/components/TransactionsFees' import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters' import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail' -import { md, lg } from 'src/theme/variables' +import { md, lg, sm } from 'src/theme/variables' const isTxValid = (t: Transaction): boolean => { if (!['string', 'number'].includes(typeof t.value)) { @@ -84,6 +84,10 @@ const ModalFooter = styled(Row)` padding: ${md} ${lg}; justify-content: center; ` +const TransactionFeesWrapper = styled.div` + background-color: ${({ theme }) => theme.colors.background}; + padding: ${sm} ${lg}; +` type OwnProps = { isOpen: boolean @@ -198,61 +202,65 @@ export const ConfirmTransactionModal = ({ ) : (txParameters, toggleEditMode) => { return ( - - - - {txs.map((tx, index) => ( - - } title={`Transaction ${index + 1}`}> - -
- Value -
- Ether - - {fromTokenUnit(tx.value, nativeCoin.decimals)} {nativeCoin.name} - + <> + + + + {txs.map((tx, index) => ( + + } title={`Transaction ${index + 1}`}> + +
+ Value +
+ Ether + + {fromTokenUnit(tx.value, nativeCoin.decimals)} {nativeCoin.name} + +
-
-
- Data (hex encoded)* - {tx.data} -
- - - - ))} - - {params?.safeTxGas && ( -
- SafeTxGas - {params?.safeTxGas} - -
- )} +
+ Data (hex encoded)* + {tx.data} +
+ + + + ))} + + {params?.safeTxGas && ( +
+ SafeTxGas + {params?.safeTxGas} + +
+ )} - {/* Tx Parameters */} - - - - - + + {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : ( + + + + )} + ) } @@ -272,7 +280,6 @@ export const ConfirmTransactionModal = ({ {body(txParameters, toggleEditMode)} - - - - - - +
+ +
+