mirror of https://github.com/trezor/trezor-wallet
Merge pull request #288 from trezor/feature/ripple-custom-fee
Feature/ripple custom feepull/290/head
Vladimir Volek
5 years ago
committed by
GitHub
commit
10df59f1da
@ -0,0 +1,81 @@
|
||||
// useful data for tests
|
||||
export default [
|
||||
{
|
||||
type: 'send',
|
||||
network: 'trop',
|
||||
deviceState: '4058d01c7c964787b7d06f0f32ce229088e123a042bf95aad658f1b1b99c73fc',
|
||||
deviceID: 'A21DA462908B176CEE0402C1',
|
||||
descriptor: '0x73d0385F4d8E00C5e6504C6030F47BF6212736A8',
|
||||
inputs: [
|
||||
{
|
||||
addresses: ['0x73d0385F4d8E00C5e6504C6030F47BF6212736A8'],
|
||||
},
|
||||
],
|
||||
outputs: [
|
||||
{
|
||||
addresses: ['0x73d0385F4d8E00C5e6504C6030F47BF6212736A8', '2a', '3a'],
|
||||
},
|
||||
],
|
||||
hash: '0x100000',
|
||||
amount: '0.01',
|
||||
fee: '0.00001',
|
||||
total: '0.01001',
|
||||
|
||||
sequence: 1,
|
||||
// tokens: undefined,
|
||||
tokens: [
|
||||
{
|
||||
name: 'Name',
|
||||
shortcut: 'T01',
|
||||
value: '200',
|
||||
},
|
||||
// {
|
||||
// name: 'Name2',
|
||||
// shortcut: 'USD',
|
||||
// value: '100',
|
||||
// },
|
||||
],
|
||||
|
||||
blockHeight: 0,
|
||||
blockHash: undefined,
|
||||
},
|
||||
{
|
||||
type: 'send',
|
||||
network: 'txrp',
|
||||
deviceState: '4058d01c7c964787b7d06f0f32ce229088e123a042bf95aad658f1b1b99c73fc',
|
||||
deviceID: 'A21DA462908B176CEE0402C1',
|
||||
descriptor: 'rNaqKtKrMSwpwZSzRckPf7S96DkimjkF4H',
|
||||
inputs: [
|
||||
{
|
||||
addresses: ['rNaqKtKrMSwpwZSzRckPf7S96DkimjkF4H'],
|
||||
},
|
||||
],
|
||||
outputs: [
|
||||
{
|
||||
addresses: ['rNaqKtKrMSwpwZSzRckPf7S96DkimjkF4H', '2a', '3a'],
|
||||
},
|
||||
],
|
||||
hash: '0x100000',
|
||||
amount: '0.01',
|
||||
fee: '0.00001',
|
||||
total: '0.01001',
|
||||
|
||||
sequence: 1,
|
||||
tokens: undefined,
|
||||
// tokens: [
|
||||
// {
|
||||
// name: 'Name',
|
||||
// shortcut: 'T01',
|
||||
// value: '200',
|
||||
// },
|
||||
// {
|
||||
// name: 'Name2',
|
||||
// shortcut: 'USD',
|
||||
// value: '100',
|
||||
// },
|
||||
// ],
|
||||
|
||||
blockHeight: 0,
|
||||
blockHash: undefined,
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,144 @@
|
||||
/* @flow */
|
||||
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
|
||||
import Input from 'components/inputs/Input';
|
||||
import Tooltip from 'components/Tooltip';
|
||||
import Icon from 'components/Icon';
|
||||
import ICONS from 'config/icons';
|
||||
|
||||
import type { Props as BaseProps } from '../../Container';
|
||||
|
||||
type Props = BaseProps & {
|
||||
children: React.Node,
|
||||
}
|
||||
|
||||
// TODO: Decide on a small screen width for the whole app
|
||||
// and put it inside config/variables.js
|
||||
// same variable also in "AccountSend/index.js"
|
||||
const SmallScreenWidth = '850px';
|
||||
|
||||
const InputLabelWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const AdvancedSettingsWrapper = styled.div`
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
border-top: 1px solid ${colors.DIVIDER};
|
||||
`;
|
||||
|
||||
const GasInputRow = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: ${SmallScreenWidth}) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
const GasInput = styled(Input)`
|
||||
/* min-height: 85px; */
|
||||
padding-bottom: 28px;
|
||||
&:first-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: ${SmallScreenWidth}) {
|
||||
&:first-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const AdvancedSettingsSendButtonWrapper = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const getFeeInputState = (feeErrors: string, feeWarnings: string): string => {
|
||||
let state = '';
|
||||
if (feeWarnings && !feeErrors) {
|
||||
state = 'warning';
|
||||
}
|
||||
if (feeErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
const Left = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
// stateless component
|
||||
const AdvancedForm = (props: Props) => {
|
||||
const {
|
||||
network,
|
||||
} = props.selectedAccount;
|
||||
if (!network) return null;
|
||||
const {
|
||||
errors,
|
||||
warnings,
|
||||
infos,
|
||||
fee,
|
||||
} = props.sendForm;
|
||||
const {
|
||||
onFeeChange,
|
||||
} = props.sendFormActions;
|
||||
|
||||
return (
|
||||
<AdvancedSettingsWrapper>
|
||||
<GasInputRow>
|
||||
<GasInput
|
||||
state={getFeeInputState(errors.fee, warnings.fee)}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
topLabel={(
|
||||
<InputLabelWrapper>
|
||||
<Left>
|
||||
Fee
|
||||
<Tooltip
|
||||
content={(
|
||||
<React.Fragment>
|
||||
Transfer cost in XRP drops
|
||||
</React.Fragment>
|
||||
)}
|
||||
maxWidth={410}
|
||||
readMoreLink="https://developers.ripple.com/transaction-cost.html"
|
||||
placement="top"
|
||||
>
|
||||
<Icon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Left>
|
||||
</InputLabelWrapper>
|
||||
)}
|
||||
bottomText={errors.fee || warnings.fee || infos.fee}
|
||||
value={fee}
|
||||
onChange={event => onFeeChange(event.target.value)}
|
||||
/>
|
||||
</GasInputRow>
|
||||
|
||||
<AdvancedSettingsSendButtonWrapper>
|
||||
{ props.children }
|
||||
</AdvancedSettingsSendButtonWrapper>
|
||||
</AdvancedSettingsWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancedForm;
|
||||
Loading…
Reference in new issue