status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add gas costs to custom tx, add etherscan/copy btns to send funds flow

This commit is contained in:
Mikhail Mikheev 2019-10-09 16:47:05 +04:00
parent 4d25c04410
commit 769f16401a
8 changed files with 68 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/Col/index.jsx
View File

@ -1,6 +1,6 @@
// @flow
import * as React from 'react'
import classNames from 'classnames/bind'
import React from 'react'
import { capitalize } from '~/utils/css'
import styles from './index.scss'

41
src/routes/safe/components/Balances/SendModal/SafeInfo/index.jsx
View File

@ -1,23 +1,17 @@
// @flow
import React from 'react'
import OpenInNew from '@material-ui/icons/OpenInNew'
import { withStyles } from '@material-ui/core/styles'
import { makeStyles } from '@material-ui/core/styles'
import Row from '~/components/layout/Row'
import Col from '~/components/layout/Col'
import Paragraph from '~/components/layout/Paragraph'
import Link from '~/components/layout/Link'
import EtherscanBtn from '~/components/EtherscanBtn'
import CopyBtn from '~/components/CopyBtn'
import Bold from '~/components/layout/Bold'
import Block from '~/components/layout/Block'
import Identicon from '~/components/Identicon'
import { copyToClipboard } from '~/utils/clipboard'
import { secondary, xs, border } from '~/theme/variables'
import { xs, border } from '~/theme/variables'
const openIconStyle = {
height: '16px',
color: secondary,
}
const styles = () => ({
const useStyles = makeStyles({
balanceContainer: {
fontSize: '12px',
lineHeight: 1.08,
@ -28,20 +22,22 @@ const styles = () => ({
marginTop: xs,
borderRadius: '3px',
},
address: {
marginRight: xs,
},
})
type Props = {
classes: Object,
safeAddress: string,
etherScanLink: string,
safeName: string,
ethBalance: string,
}
const SafeInfo = (props: Props) => {
const {
safeAddress, safeName, etherScanLink, ethBalance, classes,
safeAddress, safeName, ethBalance,
} = props
const classes = useStyles()
return (
<Row margin="md">
@ -52,21 +48,18 @@ const SafeInfo = (props: Props) => {
<Paragraph weight="bolder" noMargin style={{ lineHeight: 1 }}>
{safeName}
</Paragraph>
<Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
<Block justify="left">
<Paragraph weight="bolder" className={classes.address} noMargin>
{safeAddress}
<Link to={etherScanLink} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Paragraph>
<CopyBtn content={safeAddress} />
<EtherscanBtn type="address" value={safeAddress} />
</Block>
<Block className={classes.balanceContainer}>
<Paragraph noMargin>
Balance:
{' '}
<Bold>
{ethBalance}
{' '}
ETH
</Bold>
<Bold>{`${ethBalance} ETH`}</Bold>
</Paragraph>
</Block>
</Col>
@ -74,4 +67,4 @@ const SafeInfo = (props: Props) => {
)
}
export default withStyles(styles)(SafeInfo)
export default SafeInfo

3
src/routes/safe/components/Balances/SendModal/index.jsx
View File

@ -113,7 +113,6 @@ const Send = ({
<SendFunds
onClose={onClose}
safeAddress={safeAddress}
etherScanLink={etherScanLink}
safeName={safeName}
ethBalance={ethBalance}
tokens={tokens}
@ -128,7 +127,6 @@ const Send = ({
onClose={onClose}
setActiveScreen={setActiveScreen}
safeAddress={safeAddress}
etherScanLink={etherScanLink}
safeName={safeName}
ethBalance={ethBalance}
createTransaction={createTransaction}
@ -138,7 +136,6 @@ const Send = ({
<SendCustomTx
onClose={onClose}
safeAddress={safeAddress}
etherScanLink={etherScanLink}
safeName={safeName}
ethBalance={ethBalance}
onSubmit={handleCustomTxCreation}

36
src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
View File

@ -1,5 +1,5 @@
// @flow
import React from 'react'
import React, { useState, useEffect } from 'react'
import OpenInNew from '@material-ui/icons/OpenInNew'
import { withStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
@ -17,9 +17,11 @@ import Hairline from '~/components/layout/Hairline'
import { copyToClipboard } from '~/utils/clipboard'
import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
import { estimateApprovalTxGasCosts } from '~/logic/safe/transactions/gasNew'
import { getWeb3 } from '~/logic/wallets/getWeb3'
import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers'
import { formatAmount } from '~/logic/tokens/utils/formatAmount'
import ArrowDown from '../assets/arrow-down.svg'
import { secondary } from '~/theme/variables'
import { styles } from './style'
@ -56,10 +58,33 @@ const ReviewCustomTx = ({
enqueueSnackbar,
closeSnackbar,
}: Props) => {
const [gasCosts, setGasCosts] = useState<string>('< 0.001')
useEffect(() => {
let isCurrent = true
const estimateGas = async () => {
const web3 = getWeb3()
const { fromWei, toBN } = web3.utils
const estimatedGasCosts = await estimateApprovalTxGasCosts(safeAddress, tx.recipientAddress, tx.data.trim())
const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
const formattedGasCosts = formatAmount(gasCostsAsEth)
if (isCurrent) {
setGasCosts(formattedGasCosts)
}
}
estimateGas()
return () => {
isCurrent = false
}
}, [])
const submitTx = async () => {
const web3 = getWeb3()
const txRecipient = tx.recipientAddress
const txData = tx.data
const txData = tx.data.trim()
const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0
createTransaction(
@ -125,7 +150,7 @@ const ReviewCustomTx = ({
</Paragraph>
</Row>
<Row margin="md" align="center">
<Img src={getEthAsToken().logoUri} height={28} alt="Ether" onError={setImageToPlaceholder} />
<Img src={getEthAsToken('0').logoUri} height={28} alt="Ether" onError={setImageToPlaceholder} />
<Paragraph size="md" noMargin className={classes.value}>
{tx.value || 0}
{' ETH'}
@ -143,6 +168,11 @@ const ReviewCustomTx = ({
</Row>
</Col>
</Row>
<Row>
<Paragraph>
{`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ETH in this wallet to fund this confirmation.`}
</Paragraph>
</Row>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>

24
src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
View File

@ -1,20 +1,19 @@
// @flow
import React, { useEffect, useState } from 'react'
import { BigNumber } from 'bignumber.js'
import OpenInNew from '@material-ui/icons/OpenInNew'
import { withStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
import IconButton from '@material-ui/core/IconButton'
import { withSnackbar } from 'notistack'
import Paragraph from '~/components/layout/Paragraph'
import Row from '~/components/layout/Row'
import Link from '~/components/layout/Link'
import Col from '~/components/layout/Col'
import Button from '~/components/layout/Button'
import Img from '~/components/layout/Img'
import Block from '~/components/layout/Block'
import EtherscanBtn from '~/components/EtherscanBtn'
import CopyBtn from '~/components/CopyBtn'
import Identicon from '~/components/Identicon'
import { copyToClipboard } from '~/utils/clipboard'
import Hairline from '~/components/layout/Hairline'
import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
@ -24,7 +23,6 @@ import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
import { formatAmount } from '~/logic/tokens/utils/formatAmount'
import { getWeb3 } from '~/logic/wallets/getWeb3'
import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
import { secondary } from '~/theme/variables'
import { isEther } from '~/logic/tokens/utils/tokenHelpers'
import ArrowDown from '../assets/arrow-down.svg'
import { styles } from './style'
@ -34,7 +32,6 @@ type Props = {
setActiveScreen: Function,
classes: Object,
safeAddress: string,
etherScanLink: string,
safeName: string,
ethBalance: string,
tx: Object,
@ -43,17 +40,11 @@ type Props = {
closeSnackbar: Function,
}
const openIconStyle = {
height: '16px',
color: secondary,
}
const ReviewTx = ({
onClose,
setActiveScreen,
classes,
safeAddress,
etherScanLink,
safeName,
ethBalance,
tx,
@ -139,7 +130,7 @@ const ReviewTx = ({
</Row>
<Hairline />
<Block className={classes.container}>
<SafeInfo safeAddress={safeAddress} etherScanLink={etherScanLink} safeName={safeName} ethBalance={ethBalance} />
<SafeInfo safeAddress={safeAddress} safeName={safeName} ethBalance={ethBalance} />
<Row margin="md">
<Col xs={1}>
<img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
@ -158,12 +149,13 @@ const ReviewTx = ({
<Identicon address={tx.recipientAddress} diameter={32} />
</Col>
<Col xs={11} layout="column">
<Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
<Block justify="left">
<Paragraph weight="bolder" className={classes.address} noMargin>
{tx.recipientAddress}
<Link to={etherScanLink} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Paragraph>
<CopyBtn content={tx.recipientAddress} />
<EtherscanBtn type="address" value={tx.recipientAddress} />
</Block>
</Col>
</Row>
<Row margin="xs">

3
src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.js
View File

@ -29,6 +29,9 @@ export const styles = () => ({
amount: {
marginLeft: sm,
},
address: {
marginRight: sm,
},
buttonRow: {
height: '84px',
justifyContent: 'center',

9
src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
View File

@ -30,7 +30,6 @@ type Props = {
onClose: () => void,
classes: Object,
safeAddress: string,
etherScanLink: string,
safeName: string,
ethBalance: string,
onSubmit: Function,
@ -41,7 +40,6 @@ const SendCustomTx = ({
classes,
onClose,
safeAddress,
etherScanLink,
safeName,
ethBalance,
onSubmit,
@ -101,12 +99,7 @@ const SendCustomTx = ({
return (
<>
<Block className={classes.formContainer}>
<SafeInfo
safeAddress={safeAddress}
etherScanLink={etherScanLink}
safeName={safeName}
ethBalance={ethBalance}
/>
<SafeInfo safeAddress={safeAddress} safeName={safeName} ethBalance={ethBalance} />
<Row margin="md">
<Col xs={1}>
<img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />

9
src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
View File

@ -33,7 +33,6 @@ type Props = {
onClose: () => void,
classes: Object,
safeAddress: string,
etherScanLink: string,
safeName: string,
ethBalance: string,
selectedToken: string,
@ -60,7 +59,6 @@ const SendFunds = ({
classes,
onClose,
safeAddress,
etherScanLink,
safeName,
ethBalance,
tokens,
@ -114,12 +112,7 @@ const SendFunds = ({
return (
<>
<Block className={classes.formContainer}>
<SafeInfo
safeAddress={safeAddress}
etherScanLink={etherScanLink}
safeName={safeName}
ethBalance={ethBalance}
/>
<SafeInfo safeAddress={safeAddress} safeName={safeName} ethBalance={ethBalance} />
<Row margin="md">
<Col xs={1}>
<img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />