|
|
|
@ -23,7 +23,7 @@ type Props = BaseProps & {
|
|
|
|
|
const SmallScreenWidth = '850px';
|
|
|
|
|
|
|
|
|
|
const InputRow = styled.div`
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
padding-bottom: 25px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const InputLabelWrapper = styled.div`
|
|
|
|
@ -55,7 +55,7 @@ const GasInputRow = styled(InputRow)`
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const GasInput = styled(Input)`
|
|
|
|
|
min-height: 85px;
|
|
|
|
|
/* min-height: 85px; */
|
|
|
|
|
&:first-child {
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
}
|
|
|
|
@ -69,7 +69,7 @@ const GasInput = styled(Input)`
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const StyledTextarea = styled(Textarea)`
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
padding-bottom: 25px;
|
|
|
|
|
min-height: 80px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
@ -214,17 +214,46 @@ const AdvancedForm = (props: Props) => {
|
|
|
|
|
spellCheck="false"
|
|
|
|
|
topLabel={(
|
|
|
|
|
<InputLabelWrapper>
|
|
|
|
|
Gas price
|
|
|
|
|
<Left>
|
|
|
|
|
Gas price
|
|
|
|
|
<Tooltip
|
|
|
|
|
content={(
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
Gas price refers to the amount of ether you are willing to pay for every
|
|
|
|
|
unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
|
|
|
|
|
makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
)}
|
|
|
|
|
maxWidth={400}
|
|
|
|
|
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
|
|
|
|
|
placement="top"
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon={ICONS.HELP}
|
|
|
|
|
color={colors.TEXT_SECONDARY}
|
|
|
|
|
size={24}
|
|
|
|
|
/>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</Left>
|
|
|
|
|
</InputLabelWrapper>
|
|
|
|
|
)}
|
|
|
|
|
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
|
|
|
|
|
value={gasPrice}
|
|
|
|
|
onChange={event => onGasPriceChange(event.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
</GasInputRow>
|
|
|
|
|
|
|
|
|
|
<StyledTextarea
|
|
|
|
|
topLabel={(
|
|
|
|
|
<InputLabelWrapper>
|
|
|
|
|
<Left>
|
|
|
|
|
Data
|
|
|
|
|
<Tooltip
|
|
|
|
|
content={(
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
Gas price refers to the amount of ether you are willing to pay for every
|
|
|
|
|
unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
|
|
|
|
|
makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
|
|
|
|
|
Data is usually used when you send transactions to contracts.
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
)}
|
|
|
|
|
maxWidth={400}
|
|
|
|
|
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
|
|
|
|
|
placement="top"
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
@ -233,32 +262,7 @@ const AdvancedForm = (props: Props) => {
|
|
|
|
|
size={24}
|
|
|
|
|
/>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</InputLabelWrapper>
|
|
|
|
|
)}
|
|
|
|
|
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
|
|
|
|
|
value={gasPrice}
|
|
|
|
|
onChange={event => onGasPriceChange(event.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
</GasInputRow>
|
|
|
|
|
|
|
|
|
|
<StyledTextarea
|
|
|
|
|
topLabel={(
|
|
|
|
|
<InputLabelWrapper>
|
|
|
|
|
Data
|
|
|
|
|
<Tooltip
|
|
|
|
|
content={(
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
Data is usually used when you send transactions to contracts.
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
)}
|
|
|
|
|
placement="top"
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon={ICONS.HELP}
|
|
|
|
|
color={colors.TEXT_SECONDARY}
|
|
|
|
|
size={24}
|
|
|
|
|
/>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</Left>
|
|
|
|
|
</InputLabelWrapper>
|
|
|
|
|
)}
|
|
|
|
|
state={getDataTextareaState(errors.data, warnings.data)}
|
|
|
|
|