mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-01 04:38:15 +00:00
removr advanced view from ripple/SendForm component
This commit is contained in:
parent
326967b551
commit
c43b9b138c
@ -14,7 +14,6 @@ import P from 'components/Paragraph';
|
|||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
import Content from 'views/Wallet/components/Content';
|
import Content from 'views/Wallet/components/Content';
|
||||||
import type { Token } from 'flowtype';
|
import type { Token } from 'flowtype';
|
||||||
import AdvancedForm from '../components/AdvancedForm';
|
|
||||||
import PendingTransactions from '../components/PendingTransactions';
|
import PendingTransactions from '../components/PendingTransactions';
|
||||||
|
|
||||||
import type { Props } from './Container';
|
import type { Props } from './Container';
|
||||||
@ -122,14 +121,6 @@ const ToggleAdvancedSettingsWrapper = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ToggleAdvancedSettingsButton = styled(Button)`
|
|
||||||
min-height: 40px;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: ${FONT_WEIGHT.BIGGER};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const SendButton = styled(Button)`
|
const SendButton = styled(Button)`
|
||||||
min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
|
min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@ -139,10 +130,6 @@ const SendButton = styled(Button)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AdvancedSettingsIcon = styled(Icon)`
|
|
||||||
margin-left: 10px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
// render helpers
|
// render helpers
|
||||||
const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
|
const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
|
||||||
let state = '';
|
let state = '';
|
||||||
@ -192,10 +179,8 @@ const AccountSend = (props: Props) => {
|
|||||||
amount,
|
amount,
|
||||||
setMax,
|
setMax,
|
||||||
networkSymbol,
|
networkSymbol,
|
||||||
currency,
|
|
||||||
feeLevels,
|
feeLevels,
|
||||||
selectedFeeLevel,
|
selectedFeeLevel,
|
||||||
gasPriceNeedsUpdate,
|
|
||||||
total,
|
total,
|
||||||
errors,
|
errors,
|
||||||
warnings,
|
warnings,
|
||||||
@ -205,7 +190,6 @@ const AccountSend = (props: Props) => {
|
|||||||
} = props.sendForm;
|
} = props.sendForm;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
toggleAdvanced,
|
|
||||||
onAddressChange,
|
onAddressChange,
|
||||||
onAmountChange,
|
onAmountChange,
|
||||||
onSetMax,
|
onSetMax,
|
||||||
@ -217,21 +201,8 @@ const AccountSend = (props: Props) => {
|
|||||||
const { type, title, message } = loader;
|
const { type, title, message } = loader;
|
||||||
if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
|
if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
|
||||||
|
|
||||||
const isCurrentCurrencyToken = networkSymbol !== currency;
|
|
||||||
|
|
||||||
let selectedTokenBalance = 0;
|
|
||||||
const selectedToken = tokens.find(t => t.symbol === currency);
|
|
||||||
if (selectedToken) {
|
|
||||||
selectedTokenBalance = selectedToken.balance;
|
|
||||||
}
|
|
||||||
|
|
||||||
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
|
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
|
||||||
let sendButtonText: string = 'Send';
|
let sendButtonText: string = ` ${total} ${network.symbol}`;
|
||||||
if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
|
|
||||||
sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
|
|
||||||
} else if (networkSymbol === currency && total !== '0') {
|
|
||||||
sendButtonText += ` ${total} ${network.symbol}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!device.connected) {
|
if (!device.connected) {
|
||||||
sendButtonText = 'Device is not connected';
|
sendButtonText = 'Device is not connected';
|
||||||
@ -244,14 +215,16 @@ const AccountSend = (props: Props) => {
|
|||||||
isSendButtonDisabled = true;
|
isSendButtonDisabled = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const tokensSelectData = getTokensSelectData(tokens, network);
|
isSendButtonDisabled = false;
|
||||||
const tokensSelectValue = tokensSelectData.find(t => t.value === currency);
|
|
||||||
|
const tokensSelectData: Array<{ value: string, label: string }> = [{ value: network.symbol, label: network.symbol }];
|
||||||
|
const tokensSelectValue = tokensSelectData[0];
|
||||||
const isAdvancedSettingsHidden = !advanced;
|
const isAdvancedSettingsHidden = !advanced;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Content>
|
<Content>
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<H2>Send Ethereum or tokens</H2>
|
<H2>Send Ripple</H2>
|
||||||
<InputRow>
|
<InputRow>
|
||||||
<Input
|
<Input
|
||||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||||
@ -273,14 +246,6 @@ const AccountSend = (props: Props) => {
|
|||||||
autoCorrect="off"
|
autoCorrect="off"
|
||||||
autoCapitalize="off"
|
autoCapitalize="off"
|
||||||
spellCheck="false"
|
spellCheck="false"
|
||||||
topLabel={(
|
|
||||||
<AmountInputLabelWrapper>
|
|
||||||
<AmountInputLabel>Amount</AmountInputLabel>
|
|
||||||
{(isCurrentCurrencyToken && selectedToken) && (
|
|
||||||
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
|
|
||||||
)}
|
|
||||||
</AmountInputLabelWrapper>
|
|
||||||
)}
|
|
||||||
value={amount}
|
value={amount}
|
||||||
onChange={event => onAmountChange(event.target.value)}
|
onChange={event => onAmountChange(event.target.value)}
|
||||||
bottomText={errors.amount || warnings.amount || infos.amount}
|
bottomText={errors.amount || warnings.amount || infos.amount}
|
||||||
@ -326,16 +291,6 @@ const AccountSend = (props: Props) => {
|
|||||||
<InputRow>
|
<InputRow>
|
||||||
<FeeLabelWrapper>
|
<FeeLabelWrapper>
|
||||||
<FeeLabel>Fee</FeeLabel>
|
<FeeLabel>Fee</FeeLabel>
|
||||||
{gasPriceNeedsUpdate && (
|
|
||||||
<UpdateFeeWrapper>
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.WARNING}
|
|
||||||
color={colors.WARNING_PRIMARY}
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
|
|
||||||
</UpdateFeeWrapper>
|
|
||||||
)}
|
|
||||||
</FeeLabelWrapper>
|
</FeeLabelWrapper>
|
||||||
<Select
|
<Select
|
||||||
isSearchable={false}
|
isSearchable={false}
|
||||||
@ -355,21 +310,6 @@ const AccountSend = (props: Props) => {
|
|||||||
<ToggleAdvancedSettingsWrapper
|
<ToggleAdvancedSettingsWrapper
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
>
|
>
|
||||||
<ToggleAdvancedSettingsButton
|
|
||||||
isTransparent
|
|
||||||
onClick={toggleAdvanced}
|
|
||||||
>
|
|
||||||
Advanced settings
|
|
||||||
<AdvancedSettingsIcon
|
|
||||||
icon={ICONS.ARROW_DOWN}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
size={24}
|
|
||||||
isActive={advanced}
|
|
||||||
canAnimate
|
|
||||||
/>
|
|
||||||
</ToggleAdvancedSettingsButton>
|
|
||||||
|
|
||||||
{isAdvancedSettingsHidden && (
|
|
||||||
<SendButton
|
<SendButton
|
||||||
isDisabled={isSendButtonDisabled}
|
isDisabled={isSendButtonDisabled}
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
@ -377,19 +317,8 @@ const AccountSend = (props: Props) => {
|
|||||||
>
|
>
|
||||||
{sendButtonText}
|
{sendButtonText}
|
||||||
</SendButton>
|
</SendButton>
|
||||||
)}
|
|
||||||
</ToggleAdvancedSettingsWrapper>
|
</ToggleAdvancedSettingsWrapper>
|
||||||
|
|
||||||
{advanced && (
|
|
||||||
<AdvancedForm {...props}>
|
|
||||||
<SendButton
|
|
||||||
isDisabled={isSendButtonDisabled}
|
|
||||||
onClick={() => onSend()}
|
|
||||||
>
|
|
||||||
{sendButtonText}
|
|
||||||
</SendButton>
|
|
||||||
</AdvancedForm>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{props.selectedAccount.pending.length > 0 && (
|
{props.selectedAccount.pending.length > 0 && (
|
||||||
<PendingTransactions
|
<PendingTransactions
|
||||||
|
Loading…
Reference in New Issue
Block a user