arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-07 14:50:52 +00:00
Code Issues Releases Wiki Activity

add currency switcher to eth send form

Browse Source
This commit is contained in:
slowbackspace 2019-03-11 18:43:41 +01:00
parent 1b3a363fd6
commit a44a0b608a
4 changed files with 169 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/actions/ethereum/SendFormActions.js
View File

@ -10,6 +10,7 @@ import * as WEB3 from 'actions/constants/web3';
import { initialState } from 'reducers/SendFormEthereumReducer';
import * as reducerUtils from 'reducers/utils';
import * as ethUtils from 'utils/ethUtils';
import { toFiatCurrency, fromFiatCurrency } from 'utils/fiatConverter';
import type {
Dispatch,
@ -150,6 +151,9 @@ export const init = (): AsyncAction => async (
initialState.selectedFeeLevel
);
// initial local currency is set according to wallet settings
const { localCurrency } = getState().wallet;
dispatch({
type: SEND.INIT,
networkType: 'ethereum',
@ -158,6 +162,7 @@ export const init = (): AsyncAction => async (
networkName: network.shortcut,
networkSymbol: network.symbol,
currency: network.symbol,
localCurrency,
feeLevels,
selectedFeeLevel,
recommendedGasPrice: gasPrice.toString(),
@ -241,7 +246,7 @@ export const onAddressChange = (address: string): ThunkAction => (
/*
* Called from UI on "amount" field change
*/
export const onAmountChange = (amount: string): ThunkAction => (
export const onAmountChange = (amount: string, shouldUpdateLocalAmount = true): ThunkAction => (
dispatch: Dispatch,
getState: GetState
): void => {
@ -257,6 +262,72 @@ export const onAmountChange = (amount: string): ThunkAction => (
amount,
},
});
if (shouldUpdateLocalAmount) {
const { localCurrency } = getState().sendFormEthereum;
const fiatRates = getState().fiat.find(f => f.network === state.networkName);
const localAmount = toFiatCurrency(amount, localCurrency, fiatRates.rates);
dispatch(onLocalAmountChange(localAmount, false));
}
};
/*
* Called from UI on "localAmount" field change
*/
export const onLocalAmountChange = (
localAmount: string,
shouldUpdateAmount = true
): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
const state = getState().sendFormEthereum;
const { localCurrency } = getState().sendFormEthereum;
const fiatRates = getState().fiat.find(f => f.network === state.networkName);
const { network } = getState().selectedAccount;
// updates localAmount
dispatch({
type: SEND.CHANGE,
networkType: 'ethereum',
state: {
...state,
untouched: false,
touched: { ...state.touched, localAmount: true },
setMax: false,
localAmount,
},
});
// updates amount
if (shouldUpdateAmount) {
if (!network) return;
// converts amount in local currency to crypto currency that will be sent
const amount = fromFiatCurrency(
localAmount,
localCurrency,
fiatRates.rates,
network.decimals
);
dispatch(onAmountChange(amount, false));
}
};
/*
* Called from UI on "localCurrency" selection change
*/
export const onLocalCurrencyChange = (localCurrency: {
value: string,
label: string,
}): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
const state = getState().sendFormEthereum;
dispatch({
type: SEND.CHANGE,
networkType: 'ethereum',
state: {
...state,
localCurrency: localCurrency.value,
},
});
// Recalculates amount with new currency rates
dispatch(onLocalAmountChange(state.localAmount));
};
/*
@ -756,7 +827,9 @@ export default {
toggleAdvanced,
onAddressChange,
onAmountChange,
onLocalAmountChange,
onCurrencyChange,
onLocalCurrencyChange,
onSetMax,
onFeeLevelChange,
updateFeeLevels,

9
src/actions/ethereum/SendFormValidationActions.js
View File

@ -4,6 +4,7 @@ import BigNumber from 'bignumber.js';
import EthereumjsUtil from 'ethereumjs-util';
import EthereumjsUnits from 'ethereumjs-units';
import { findDevice, getPendingAmount, findToken } from 'reducers/utils';
import { toFiatCurrency } from 'utils/fiatConverter';
import * as SEND from 'actions/constants/send';
import * as ethUtils from 'utils/ethUtils';
@ -130,6 +131,14 @@ export const recalculateTotalAmount = ($state: State): PayloadAction<State> => (
} else {
const b = new BigNumber(account.balance).minus(pendingAmount);
state.amount = calculateMaxAmount(b, state.gasPrice, state.gasLimit);
// calculate amount in local currency
const { localCurrency } = getState().sendFormEthereum;
const fiatRates = getState().fiat.find(f => f.network === state.networkName);
const localAmount = toFiatCurrency(state.amount, localCurrency, fiatRates.rates);
if (localAmount) {
state.localAmount = localAmount;
}
}
}

4
src/reducers/SendFormEthereumReducer.js
View File

@ -17,11 +17,13 @@ export type State = {
currency: string,
// form fields
localCurrency: string,
advanced: boolean,
untouched: boolean, // set to true when user made any changes in form
touched: { [k: string]: boolean },
address: string,
amount: string,
localAmount: string,
setMax: boolean,
feeLevels: Array<FeeLevel>,
selectedFeeLevel: FeeLevel,
@ -45,6 +47,7 @@ export const initialState: State = {
networkName: '',
networkSymbol: '',
currency: '',
localCurrency: '',
advanced: false,
untouched: true,
@ -52,6 +55,7 @@ export const initialState: State = {
address: '',
//address: '0x574BbB36871bA6b78E27f4B4dCFb76eA0091880B',
amount: '',
localAmount: '',
setMax: false,
feeLevels: [],
selectedFeeLevel: {

85
src/views/Wallet/views/Account/Send/ethereum/index.js
View File

@ -9,7 +9,8 @@ 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 { FONT_SIZE, FONT_WEIGHT, TRANSITION, SCREEN_SIZE } from 'config/variables';
import { FIAT_CURRENCIES } from 'config/app';
import colors from 'config/colors';
import Title from 'views/Wallet/components/Title';
import P from 'components/Paragraph';
@ -43,6 +44,44 @@ const InputRow = styled.div`
padding-bottom: 28px;
`;
const LocalAmountWrapper = styled.div`
display: flex;
align-self: flex-start;
margin-top: 26px;
@media screen and (max-width: ${SCREEN_SIZE.MD}) {
flex: 1 0 100%;
justify-content: flex-end;
margin-top: 0px;
padding-top: 28px;
}
`;
const AmountRow = styled(InputRow)`
display: flex;
align-items: flex-end;
padding-bottom: 28px;
@media screen and (max-width: ${SCREEN_SIZE.MD}) {
flex-wrap: wrap;
}
`;
const LocalAmountInput = styled(Input)`
@media screen and (max-width: ${SCREEN_SIZE.MD}) {
flex: 1 1 100%;
}
`;
const LocalCurrencySelect = styled(Select)`
min-width: 77px;
height: 40px;
@media screen and (max-width: ${SCREEN_SIZE.MD}) {
flex: 1 1 0;
}
`;
const SetMaxAmountButton = styled(Button)`
height: 40px;
padding: 0 10px;
@ -187,6 +226,16 @@ const QrButton = styled(Button)`
padding: 0 10px;
`;
const EqualsSign = styled.div`
align-self: center;
padding: 0 10px;
font-size: ${FONT_SIZE.BIGGER};
@media screen and (max-width: ${SCREEN_SIZE.MD}) {
display: none;
}
`;
// render helpers
const getAddressInputState = (
address: string,
@ -230,6 +279,10 @@ const getTokensSelectData = (
return tokensSelectData;
};
const buildCurrencyOption = currency => {
return { value: currency, label: currency.toUpperCase() };
};
// stateless component
const AccountSend = (props: Props) => {
const device = props.wallet.selectedDevice;
@ -237,9 +290,11 @@ const AccountSend = (props: Props) => {
const {
address,
amount,
localAmount,
setMax,
networkSymbol,
currency,
localCurrency,
feeLevels,
selectedFeeLevel,
gasPriceNeedsUpdate,
@ -255,8 +310,10 @@ const AccountSend = (props: Props) => {
toggleAdvanced,
onAddressChange,
onAmountChange,
onLocalAmountChange,
onSetMax,
onCurrencyChange,
onLocalCurrencyChange,
onFeeLevelChange,
updateFeeLevels,
onSend,
@ -337,7 +394,7 @@ const AccountSend = (props: Props) => {
]}
/>
</InputRow>
<InputRow>
<AmountRow>
<Input
state={getAmountInputState(errors.amount, warnings.amount)}
autoComplete="off"
@ -385,7 +442,29 @@ const AccountSend = (props: Props) => {
/>,
]}
/>
</InputRow>
<LocalAmountWrapper>
<EqualsSign>=</EqualsSign>
<LocalAmountInput
// state={getAmountInputState(errors.amount, warnings.amount)}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
value={localAmount}
onChange={event => onLocalAmountChange(event.target.value)}
sideAddons={[
<LocalCurrencySelect
key="local-currency"
isSearchable={false}
isClearable={false}
onChange={option => onLocalCurrencyChange(option)}
value={buildCurrencyOption(localCurrency)}
options={FIAT_CURRENCIES.map(c => buildCurrencyOption(c))}
/>,
]}
/>
</LocalAmountWrapper>
</AmountRow>
<InputRow>
<FeeLabelWrapper>