status-im/safe-react
2
0
Fork 0
mirror of https://github.com/status-im/safe-react.git synced 2025-02-18 12:36:34 +00:00
Code Issues Projects Releases Wiki Activity

Gas calculation info UI fixes (#1861)

Browse Source 
* upgrade SRC

* add styles to GasInfo container

* reject modal

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
Agustín Longoni 2021-02-05 14:58:08 -03:00 committed by GitHub
parent 0ea73c4eda
commit 63cd88d845
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 221 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

16
src/components/TransactionsFees/index.tsx
View File

@ -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 (
<>
<Paragraph>
<Paragraph size="lg" align="center">
You&apos;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{' '}
<Text size="lg" as="span" color="text" strong>
{gasCostFormatted}
</Text>{' '}
(fee price) {nativeCoin.name} in this wallet to fund this confirmation.
</>
)}
</Paragraph>
<TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
</>

17
src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
View File

@ -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,6 +202,7 @@ export const ConfirmTransactionModal = ({
)
: (txParameters, toggleEditMode) => {
return (
<>
<Container>
<AddressInfo ethBalance={ethBalance} safeAddress={safeAddress} safeName={safeName} />
<DividerLine withArrow />
@ -243,7 +248,9 @@ export const ConfirmTransactionModal = ({
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row>
</Container>
{txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
<TransactionFeesWrapper>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -251,8 +258,9 @@ export const ConfirmTransactionModal = ({
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Container>
</TransactionFeesWrapper>
)}
</>
)
}
@ -272,7 +280,6 @@ export const ConfirmTransactionModal = ({
{body(txParameters, toggleEditMode)}
<Hairline />
<ModalFooter align="center" grow>
<ModalFooterConfirmation
cancelText="Cancel"

9
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
View File

@ -187,8 +187,8 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row>
</Block>
<div className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -196,9 +196,8 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
<Hairline />
</div>
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} onClick={onPrev}>
Back

8
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
View File

@ -169,8 +169,9 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row>
</Block>
{txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
<Block className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -178,9 +179,8 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
<Hairline />
)}
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} onClick={onPrev}>
Back

6
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
View File

@ -1,4 +1,4 @@
import { border, lg, md, secondaryText, sm } from 'src/theme/variables'
import { background, border, lg, md, secondaryText, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@ -55,4 +55,8 @@ export const styles = createStyles({
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
marginLeft: '15px',
},
gasCostsContainer: {
backgroundColor: background,
padding: `${sm} ${lg}`,
},
})

6
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
View File

@ -1,4 +1,4 @@
import { lg, md, secondaryText, sm, border } from 'src/theme/variables'
import { lg, md, secondaryText, sm, border, background } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@ -71,4 +71,8 @@ export const styles = createStyles({
fullWidth: {
justifyContent: 'space-between',
},
gasCostsContainer: {
backgroundColor: background,
padding: `0 ${lg}`,
},
})

8
src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
View File

@ -183,8 +183,8 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row>
</Block>
<div className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -192,9 +192,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
<Hairline style={{ position: 'absolute', bottom: 85 }} />
</div>
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} onClick={onPrev}>
Back

6
src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
View File

@ -1,4 +1,4 @@
import { lg, md, secondaryText, sm } from 'src/theme/variables'
import { background, lg, md, secondaryText, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@ -42,4 +42,8 @@ export const styles = createStyles({
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
marginLeft: '15px',
},
gasCostsContainer: {
backgroundColor: background,
padding: `0 ${lg}`,
},
})

10
src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
View File

@ -239,7 +239,9 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
/>
{/* Disclaimer */}
<Row>
</Block>
{txEstimationExecutionStatus !== EstimationStatus.LOADING && (
<div className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -247,10 +249,8 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
<Hairline style={{ position: 'absolute', bottom: 85 }} />
</div>
)}
{/* Footer */}
<Row align="center" className={classes.buttonRow}>

6
src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/style.ts
View File

@ -1,4 +1,4 @@
import { lg, md, secondaryText, sm } from 'src/theme/variables'
import { background, lg, md, secondaryText, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@ -42,4 +42,8 @@ export const styles = createStyles({
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
marginLeft: '15px',
},
gasCostsContainer: {
backgroundColor: background,
padding: `0 ${lg}`,
},
})

10
src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx
View File

@ -120,7 +120,7 @@ export const RemoveModuleModal = ({ onClose, selectedModulePair }: RemoveModuleM
</IconButton>
</Row>
<Hairline />
<Block className={classes.modalContainer}>
<Block>
<Row className={classes.modalOwner}>
<Col align="center" xs={1}>
<Identicon address={moduleAddress} diameter={32} />
@ -149,15 +149,17 @@ export const RemoveModuleModal = ({ onClose, selectedModulePair }: RemoveModuleM
as well.
</Paragraph>
</Row>
</Block>
<Block className={classes.accordionContainer}>
{/* Tx Parameters */}
<TxParametersDetail
txParameters={txParameters}
onEdit={toggleEditMode}
compact={false}
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row className={classes.modalDescription}>
</Block>
<Row className={cn(classes.modalDescription, classes.gasCostsContainer)}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -166,8 +168,6 @@ export const RemoveModuleModal = ({ onClose, selectedModulePair }: RemoveModuleM
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
<Hairline />
<Row align="center" className={classes.modalButtonRow}>
<FooterWrapper>
<Button size="md" color="secondary" onClick={onClose}>

10
src/routes/safe/components/Settings/Advanced/style.ts
View File

@ -60,9 +60,6 @@ export const styles = createStyles({
maxHeight: '75px',
padding: `${sm} ${lg}`,
},
modalContainer: {
minHeight: '369px',
},
modalManage: {
fontSize: lg,
},
@ -109,4 +106,11 @@ export const styles = createStyles({
maxWidth: 'calc(100% - 30px)',
overflow: 'hidden',
},
gasCostsContainer: {
backgroundColor: background,
padding: `0 ${lg}`,
},
accordionContainer: {
margin: `0 ${md}`,
},
})

1
src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
View File

@ -82,5 +82,6 @@ export const styles = createStyles({
alignItems: 'center',
textAlign: 'center',
width: '100%',
backgroundColor: background,
},
})

1
src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
View File

@ -225,7 +225,6 @@ export const ReviewRemoveOwnerModal = ({
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
<Hairline />
</Block>
)}
<Row align="center" className={classes.buttonRow}>

1
src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
View File

@ -82,5 +82,6 @@ export const styles = createStyles({
alignItems: 'center',
textAlign: 'center',
width: '100%',
backgroundColor: background,
},
})

1
src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
View File

@ -248,7 +248,6 @@ export const ReviewReplaceOwnerModal = ({
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button minHeight={42} minWidth={140} onClick={onClickBack}>
Back

1
src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
View File

@ -87,5 +87,6 @@ export const styles = createStyles({
alignItems: 'center',
textAlign: 'center',
width: '100%',
backgroundColor: background,
},
})

8
src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Review.tsx
View File

@ -251,9 +251,11 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
</Col>
{existentSpendingLimit && (
<Col margin="md">
<Text size="xl" color="error" center strong>
You are about to replace an existent spending limit
</Text>
</Col>
)}
{/* Tx Parameters */}
<TxParametersDetail
@ -262,7 +264,8 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row>
</Block>
<div className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -270,8 +273,7 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
</div>
<Modal.Footer>
<Button

8
src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx
View File

@ -23,6 +23,7 @@ import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionPara
import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
import Row from 'src/components/layout/Row'
import { TransactionFees } from 'src/components/TransactionsFees'
import cn from 'classnames'
interface RemoveSpendingLimitModalProps {
onClose: () => void
@ -117,17 +118,16 @@ export const RemoveLimitModal = ({ onClose, spendingLimit, open }: RemoveSpendin
<Col margin="lg">
<ResetTimeInfo title="Reset Time" label={resetTimeLabel} />
</Col>
</Block>
{/* Tx Parameters */}
<TxParametersDetail
txParameters={txParameters}
onEdit={toggleEditMode}
compact={false}
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row className={classes.modalDescription}>
</Block>
<Row className={cn(classes.modalDescription, classes.gasCostsContainer)}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}

4
src/routes/safe/components/Settings/SpendingLimit/style.ts
View File

@ -127,5 +127,9 @@ export const useStyles = makeStyles(
amountInput: {
width: '100% !important',
},
gasCostsContainer: {
backgroundColor: background,
padding: `0 ${lg}`,
},
}),
)

11
src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
View File

@ -145,8 +145,9 @@ export const ChangeThresholdModal = ({
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row>
</Block>
{txEstimationExecutionStatus !== EstimationStatus.LOADING && (
<div className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -154,10 +155,8 @@ export const ChangeThresholdModal = ({
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
<Hairline style={{ position: 'absolute', bottom: 85 }} />
</div>
)}
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} onClick={onClose}>

6
src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
View File

@ -1,4 +1,4 @@
import { lg, md, secondaryText, sm } from 'src/theme/variables'
import { background, lg, md, secondaryText, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@ -41,4 +41,8 @@ export const styles = createStyles({
position: 'absolute',
bottom: '-25px',
},
gasCostsContainer: {
backgroundColor: background,
padding: `${sm} ${lg}`,
},
})

7
src/routes/safe/components/Settings/UpdateSafeModal/index.tsx
View File

@ -117,7 +117,9 @@ export const UpdateSafeModal = ({ onClose, safeAddress }: Props): React.ReactEle
isTransactionCreation={isCreation}
isTransactionExecution={isExecution}
/>
<Row>
</Block>
{txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
<Block className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -125,9 +127,8 @@ export const UpdateSafeModal = ({ onClose, safeAddress }: Props): React.ReactEle
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
<Hairline />
)}
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} onClick={onClose}>
Back

6
src/routes/safe/components/Settings/UpdateSafeModal/style.ts
View File

@ -1,4 +1,4 @@
import { lg, md, secondaryText, sm } from 'src/theme/variables'
import { background, lg, md, secondaryText, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@ -38,4 +38,8 @@ export const styles = createStyles({
position: 'absolute',
bottom: '-25px',
},
gasCostsContainer: {
backgroundColor: background,
padding: `0 ${lg}`,
},
})

6
src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
View File

@ -203,7 +203,9 @@ export const ApproveTxModal = ({
/>
)}
</Row>
</Block>
{txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
<Block className={classes.gasCostsContainer}>
<TransactionFees
gasCostFormatted={gasCostFormatted}
isExecution={isExecution}
@ -212,7 +214,7 @@ export const ApproveTxModal = ({
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Block>
)}
{/* Footer */}
<Row align="center" className={classes.buttonRow}>
<Button minHeight={42} minWidth={140} onClick={onClose}>

6
src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/style.ts
View File

@ -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}`,
},
})

7
src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
View File

@ -110,12 +110,13 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
<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}
@ -123,8 +124,8 @@ export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElemen
isOffChainSignature={isOffChainSignature}
txEstimationExecutionStatus={txEstimationExecutionStatus}
/>
</Row>
</Block>
)}
<Row align="center" className={classes.buttonRow}>
<Button minHeight={42} minWidth={140} onClick={onClose}>
Exit

6
src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/style.ts
View File

@ -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}`,
},
})

2
src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx
View File

@ -55,7 +55,7 @@ export const TxParametersDetail = ({
}
return (
<Accordion {...compact}>
<Accordion compact={compact}>
<AccordionSummary>
<Text size="lg">Advanced options</Text>
</AccordionSummary>

4
yarn.lock
View File

@ -1554,9 +1554,9 @@
solc "0.5.14"
truffle "^5.1.21"
"@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":
version "0.4.0"
resolved "https://github.com/gnosis/safe-react-components.git#2e7574fa0ea4ec798aac35249f532be86a1c5cb8"
resolved "https://github.com/gnosis/safe-react-components.git#420f59570a8d2e8da0acd7d8c192dc9f1bf7bf34"
dependencies:
classnames "^2.2.6"
polished "^3.6.7"