diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js
index 97638549..52e605d6 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/index.js
@@ -10,6 +10,7 @@ import Link from 'components/Link';
import ICONS from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
import colors from 'config/colors';
+import Title from 'views/Wallet/components/Title';
import P from 'components/Paragraph';
import { H2 } from 'components/Heading';
import Content from 'views/Wallet/components/Content';
@@ -34,7 +35,7 @@ const AmountInputLabel = styled.span`
`;
const InputRow = styled.div`
- margin: 20px 0;
+ padding: 0 0 15px 0;
`;
const SetMaxAmountButton = styled(Button)`
@@ -250,155 +251,153 @@ const AccountSend = (props: Props) => {
return (
-
- Send Ethereum or tokens
-
- onAddressChange(event.target.value)}
- />
-
+ Send Ethereum or tokens
+
+ onAddressChange(event.target.value)}
+ />
+
-
-
- Amount
- {(isCurrentCurrencyToken && selectedToken) && (
- You have: {selectedTokenBalance} {selectedToken.symbol}
- )}
-
- )}
- value={amount}
- onChange={event => onAmountChange(event.target.value)}
- bottomText={errors.amount || warnings.amount || infos.amount}
- sideAddons={[
- (
- onSetMax()}
- isActive={setMax}
- >
- {!setMax && (
-
- )}
- {setMax && (
-
- )}
- Set max
-
- ),
- (
-
- ),
- ]}
- />
-
-
-
-
- Fee
- {gasPriceNeedsUpdate && (
-
-
- Recommended fees updated. Click here to use them
-
- )}
-
-
-
-
-
- Advanced settings
-
-
-
- {isAdvancedSettingsHidden && (
- onSend()}
- >
- {sendButtonText}
-
+
+
+ Amount
+ {(isCurrentCurrencyToken && selectedToken) && (
+ You have: {selectedTokenBalance} {selectedToken.symbol}
+ )}
+
)}
-
+ value={amount}
+ onChange={event => onAmountChange(event.target.value)}
+ bottomText={errors.amount || warnings.amount || infos.amount}
+ sideAddons={[
+ (
+ onSetMax()}
+ isActive={setMax}
+ >
+ {!setMax && (
+
+ )}
+ {setMax && (
+
+ )}
+ Set max
+
+ ),
+ (
+
+ ),
+ ]}
+ />
+
- {advanced && (
-
- onSend()}
- >
- {sendButtonText}
-
-
- )}
+
+
+ Fee
+ {gasPriceNeedsUpdate && (
+
+
+ Recommended fees updated. Click here to use them
+
+ )}
+
+
- {props.selectedAccount.pending.length > 0 && (
-
+
+ Advanced settings
+
+
+
+ {isAdvancedSettingsHidden && (
+ onSend()}
+ >
+ {sendButtonText}
+
)}
-
+
+
+ {advanced && (
+
+ onSend()}
+ >
+ {sendButtonText}
+
+
+ )}
+
+ {props.selectedAccount.pending.length > 0 && (
+
+ )}
);
};
diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js
index 34caa47d..737cf165 100644
--- a/src/views/Wallet/views/Account/Send/index.js
+++ b/src/views/Wallet/views/Account/Send/index.js
@@ -1,407 +1,5 @@
/* @flow */
import React from 'react';
-<<<<<<< HEAD
-import styled, { css } from 'styled-components';
-import { Select } from 'components/Select';
-import Button from 'components/Button';
-import Input from 'components/inputs/Input';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
-import ICONS from 'config/icons';
-import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
-import colors from 'config/colors';
-import Title from 'views/Wallet/components/Title';
-import P from 'components/Paragraph';
-import Content from 'views/Wallet/components/Content';
-import type { Token } from 'flowtype';
-import AdvancedForm from './components/AdvancedForm';
-import PendingTransactions from './components/PendingTransactions';
-
-import type { Props } from './Container';
-
-// TODO: Decide on a small screen width for the whole app
-// and put it inside config/variables.js
-const SmallScreenWidth = '850px';
-
-const AmountInputLabelWrapper = styled.div`
- display: flex;
- justify-content: space-between;
-`;
-
-const AmountInputLabel = styled.span`
- text-align: right;
- color: ${colors.TEXT_SECONDARY};
-`;
-
-const InputRow = styled.div`
- padding: 0 0 15px 0;
-`;
-
-const SetMaxAmountButton = styled(Button)`
- height: 40px;
- padding: 0 10px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- font-size: ${FONT_SIZE.SMALLER};
- font-weight: ${FONT_WEIGHT.SMALLEST};
- color: ${colors.TEXT_SECONDARY};
-
- border-radius: 0;
- border: 1px solid ${colors.DIVIDER};
- border-right: 0;
- border-left: 0;
- background: transparent;
- transition: ${TRANSITION.HOVER};
-
- &:hover {
- background: ${colors.GRAY_LIGHT};
- }
-
- ${props => props.isActive && css`
- color: ${colors.WHITE};
- background: ${colors.GREEN_PRIMARY};
- border-color: ${colors.GREEN_PRIMARY};
-
- &:hover {
- background: ${colors.GREEN_SECONDARY};
- }
-
- &:active {
- background: ${colors.GREEN_TERTIARY};
- }
- `}
-`;
-
-const CurrencySelect = styled(Select)`
- min-width: 77px;
- height: 40px;
- flex: 0.2;
-`;
-
-const FeeOptionWrapper = styled.div`
- display: flex;
- justify-content: space-between;
-`;
-
-const FeeLabelWrapper = styled.div`
- display: flex;
- align-items: center;
- margin-bottom: 4px;
-`;
-
-const FeeLabel = styled.span`
- color: ${colors.TEXT_SECONDARY};
-`;
-
-const UpdateFeeWrapper = styled.span`
- margin-left: 8px;
- display: flex;
- align-items: center;
- font-size: ${FONT_SIZE.SMALLER};
- color: ${colors.WARNING_PRIMARY};
-`;
-
-const StyledLink = styled(Link)`
- margin-left: 4px;
- white-space: nowrap;
-`;
-
-const ToggleAdvancedSettingsWrapper = styled.div`
- min-height: 40px;
- margin-bottom: 20px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-
- @media screen and (max-width: ${SmallScreenWidth}) {
- ${props => (props.isAdvancedSettingsHidden && css`
- flex-direction: column;
- `)}
- }
-`;
-
-const ToggleAdvancedSettingsButton = styled(Button)`
- min-height: 40px;
- padding: 0;
- display: flex;
- align-items: center;
- font-weight: ${FONT_WEIGHT.BIGGER};
-`;
-
-const SendButton = styled(Button)`
- min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
- font-size: 13px;
-
- @media screen and (max-width: ${SmallScreenWidth}) {
- margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
- }
-`;
-
-const AdvancedSettingsIcon = styled(Icon)`
- margin-left: 10px;
-`;
-
-// render helpers
-const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
- let state = '';
- if (address && !addressErrors) {
- state = 'success';
- }
- if (addressWarnings && !addressErrors) {
- state = 'warning';
- }
- if (addressErrors) {
- state = 'error';
- }
- return state;
-};
-
-const getAmountInputState = (amountErrors: string, amountWarnings: string): string => {
- let state = '';
- if (amountWarnings && !amountErrors) {
- state = 'warning';
- }
- if (amountErrors) {
- state = 'error';
- }
- return state;
-};
-
-const getTokensSelectData = (tokens: Array, accountNetwork: any): Array<{ value: string, label: string }> => {
- const tokensSelectData: Array<{ value: string, label: string }> = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
- tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
-
- return tokensSelectData;
-};
-
-// stateless component
-const AccountSend = (props: Props) => {
- const device = props.wallet.selectedDevice;
- const {
- account,
- network,
- discovery,
- tokens,
- shouldRender,
- loader,
- } = props.selectedAccount;
- const {
- address,
- amount,
- setMax,
- networkSymbol,
- currency,
- feeLevels,
- selectedFeeLevel,
- gasPriceNeedsUpdate,
- total,
- errors,
- warnings,
- infos,
- sending,
- advanced,
- } = props.sendForm;
-
- const {
- toggleAdvanced,
- onAddressChange,
- onAmountChange,
- onSetMax,
- onCurrencyChange,
- onFeeLevelChange,
- updateFeeLevels,
- onSend,
- } = props.sendFormActions;
- const { type, title, message } = loader;
- if (!device || !account || !discovery || !network || !shouldRender) return ;
-
- 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 sendButtonText: string = 'Send';
- 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) {
- sendButtonText = 'Device is not connected';
- isSendButtonDisabled = true;
- } else if (!device.available) {
- sendButtonText = 'Device is unavailable';
- isSendButtonDisabled = true;
- } else if (!discovery.completed) {
- sendButtonText = 'Loading accounts';
- isSendButtonDisabled = true;
- }
-
- const tokensSelectData = getTokensSelectData(tokens, network);
- const tokensSelectValue = tokensSelectData.find(t => t.value === currency);
- const isAdvancedSettingsHidden = !advanced;
-
- return (
-
- Send Ethereum or tokens
-
- onAddressChange(event.target.value)}
- />
-
-
-
- Amount
- {(isCurrentCurrencyToken && selectedToken) && (
- You have: {selectedTokenBalance} {selectedToken.symbol}
- )}
-
- )}
- value={amount}
- onChange={event => onAmountChange(event.target.value)}
- bottomText={errors.amount || warnings.amount || infos.amount}
- sideAddons={[
- (
- onSetMax()}
- isActive={setMax}
- >
- {!setMax && (
-
- )}
- {setMax && (
-
- )}
- Set max
-
- ),
- (
-
- ),
- ]}
- />
-
-
-
-
- Fee
- {gasPriceNeedsUpdate && (
-
-
- Recommended fees updated. Click here to use them
-
- )}
-
-
-
-
-
- Advanced settings
-
-
-
- {isAdvancedSettingsHidden && (
- onSend()}
- >
- {sendButtonText}
-
- )}
-
-
- {advanced && (
-
- onSend()}
- >
- {sendButtonText}
-
-
- )}
-
- {props.selectedAccount.pending.length > 0 && (
-
- )}
-
- );
-};
-
-export default AccountSend;
-=======
import { connect } from 'react-redux';
import type { State } from 'flowtype';
@@ -428,4 +26,3 @@ export default connect((state: State): BaseProps => ({
return null;
}
});
->>>>>>> split SendForm into networks
diff --git a/src/views/Wallet/views/Account/Send/ripple/Container.js b/src/views/Wallet/views/Account/Send/ripple/Container.js
index f68ffb71..ea29c363 100644
--- a/src/views/Wallet/views/Account/Send/ripple/Container.js
+++ b/src/views/Wallet/views/Account/Send/ripple/Container.js
@@ -8,7 +8,7 @@ import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from 'flowtype';
import AccountSend from './index';
-type OwnProps = { }
+type OwnProps = {}
export type StateProps = {
selectedAccount: $ElementType,
diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js
index ea07f40f..82961712 100644
--- a/src/views/Wallet/views/Account/Send/ripple/index.js
+++ b/src/views/Wallet/views/Account/Send/ripple/index.js
@@ -10,6 +10,7 @@ import ICONS from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
import colors from 'config/colors';
import { H2 } from 'components/Heading';
+import Title from 'views/Wallet/components/Title';
import Content from 'views/Wallet/components/Content';
import PendingTransactions from '../components/PendingTransactions';
@@ -20,7 +21,7 @@ import type { Props } from './Container';
const SmallScreenWidth = '850px';
const InputRow = styled.div`
- margin: 20px 0;
+ padding: 0 0 15px 0;
`;
const SetMaxAmountButton = styled(Button)`
@@ -166,91 +167,89 @@ const AccountSend = (props: Props) => {
return (
-
- Send Ripple
-
- onAddressChange(event.target.value)}
- />
-
+ Send Ripple
+
+ onAddressChange(event.target.value)}
+ />
+
-
- onAmountChange(event.target.value)}
- bottomText={errors.amount || warnings.amount || infos.amount}
- sideAddons={[
- (
- onSetMax()}
- isActive={setMax}
- >
- {!setMax && (
-
- )}
- {setMax && (
-
- )}
- Set max
-
- ),
- (
-
- ),
- ]}
- />
-
+
+ onAmountChange(event.target.value)}
+ bottomText={errors.amount || warnings.amount || infos.amount}
+ sideAddons={[
+ (
+ onSetMax()}
+ isActive={setMax}
+ >
+ {!setMax && (
+
+ )}
+ {setMax && (
+
+ )}
+ Set max
+
+ ),
+ (
+
+ ),
+ ]}
+ />
+
-
+ onSend()}
>
- onSend()}
- >
- {sendButtonText}
-
-
+ {sendButtonText}
+
+
- {props.selectedAccount.pending.length > 0 && (
-
- )}
-
+ {props.selectedAccount.pending.length > 0 && (
+
+ )}
);
};