arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-03-10 21:56:05 +00:00
Code Issues Releases Wiki Activity

add currency switcher to ripple send tab

Browse Source
This commit is contained in:
slowbackspace 2019-03-12 16:03:14 +01:00
parent 93bea9d195
commit 40f61002b6
4 changed files with 168 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/actions/ripple/SendFormActions.js
View File

@ -6,6 +6,7 @@ import * as BLOCKCHAIN from 'actions/constants/blockchain';
import { initialState } from 'reducers/SendFormRippleReducer';
import * as reducerUtils from 'reducers/utils';
import { fromDecimalAmount } from 'utils/formatUtils';
import { toFiatCurrency, fromFiatCurrency } from 'utils/fiatConverter';
import type {
Dispatch,
@ -109,6 +110,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: 'ripple',
@ -116,6 +120,7 @@ export const init = (): AsyncAction => async (
...initialState,
networkName: network.shortcut,
networkSymbol: network.symbol,
localCurrency,
feeLevels,
selectedFeeLevel,
fee: network.fee.defaultFee,
@ -154,6 +159,9 @@ export const onClear = (): AsyncAction => async (
initialState.selectedFeeLevel
);
// initial local currency is set according to wallet settings
const { localCurrency } = getState().wallet;
dispatch({
type: SEND.CLEAR,
networkType: 'ripple',
@ -161,6 +169,7 @@ export const onClear = (): AsyncAction => async (
...initialState,
networkName: network.shortcut,
networkSymbol: network.symbol,
localCurrency,
feeLevels,
selectedFeeLevel,
fee: network.fee.defaultFee,
@ -193,10 +202,10 @@ export const onAddressChange = (address: string): ThunkAction => (
/*
* Called from UI on "amount" field change
*/
export const onAmountChange = (amount: string): ThunkAction => (
dispatch: Dispatch,
getState: GetState
): void => {
export const onAmountChange = (
amount: string,
shouldUpdateLocalAmount: boolean = true
): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
const state = getState().sendFormRipple;
dispatch({
type: SEND.CHANGE,
@ -209,6 +218,67 @@ export const onAmountChange = (amount: string): ThunkAction => (
amount,
},
});
if (shouldUpdateLocalAmount) {
const { localCurrency } = getState().sendFormRipple;
const fiatRates = getState().fiat.find(f => f.network === state.networkName);
const localAmount = toFiatCurrency(amount, localCurrency, fiatRates);
dispatch(onLocalAmountChange(localAmount, false));
}
};
/*
* Called from UI on "localAmount" field change
*/
export const onLocalAmountChange = (
localAmount: string,
shouldUpdateAmount: boolean = true
): ThunkAction => (dispatch: Dispatch, getState: GetState): void => {
const state = getState().sendFormRipple;
const { localCurrency } = getState().sendFormRipple;
const fiatRates = getState().fiat.find(f => f.network === state.networkName);
const { network } = getState().selectedAccount;
// updates localAmount
dispatch({
type: SEND.CHANGE,
networkType: 'ripple',
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, 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().sendFormRipple;
dispatch({
type: SEND.CHANGE,
networkType: 'ripple',
state: {
...state,
localCurrency: localCurrency.value,
},
});
// Recalculates amount with new currency rates
dispatch(onLocalAmountChange(state.localAmount));
};
/*
@ -434,6 +504,8 @@ export default {
toggleAdvanced,
onAddressChange,
onAmountChange,
onLocalAmountChange,
onLocalCurrencyChange,
onSetMax,
onFeeLevelChange,
updateFeeLevels,

7
src/actions/ripple/SendFormValidationActions.js
View File

@ -4,6 +4,7 @@ import BigNumber from 'bignumber.js';
import * as SEND from 'actions/constants/send';
import { findDevice, getPendingAmount } from 'reducers/utils';
import { toDecimalAmount } from 'utils/formatUtils';
import { toFiatCurrency } from 'utils/fiatConverter';
import type {
Dispatch,
@ -103,6 +104,12 @@ const recalculateTotalAmount = ($state: State): PayloadAction<State> => (
.minus(account.reserve)
.minus(pendingAmount);
state.amount = calculateMaxAmount(availableBalance, fee);
// calculate amount in local currency
const { localCurrency } = getState().sendFormRipple;
const fiatRates = getState().fiat.find(f => f.network === state.networkName);
const localAmount = toFiatCurrency(state.amount, localCurrency, fiatRates);
state.localAmount = localAmount;
}
state.total = calculateTotal(state.amount, fee);

4
src/reducers/SendFormRippleReducer.js
View File

@ -16,11 +16,13 @@ export type State = {
+networkSymbol: 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,
minAmount: string,
setMax: boolean,
feeLevels: Array<FeeLevel>,
@ -41,12 +43,14 @@ export type State = {
export const initialState: State = {
networkName: '',
networkSymbol: '',
localCurrency: '',
advanced: false,
untouched: true,
touched: {},
address: '',
amount: '',
localAmount: '',
minAmount: '0',
setMax: false,
feeLevels: [],

84
src/views/Wallet/views/Account/Send/ripple/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';
@ -185,6 +186,53 @@ const QrButton = styled(Button)`
padding: 0 10px;
`;
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 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,
@ -215,6 +263,10 @@ const getAmountInputState = (amountErrors: string, amountWarnings: string): stri
return state;
};
const buildCurrencyOption = currency => {
return { value: currency, label: currency.toUpperCase() };
};
// stateless component
const AccountSend = (props: Props) => {
const device = props.wallet.selectedDevice;
@ -222,6 +274,8 @@ const AccountSend = (props: Props) => {
const {
address,
amount,
localAmount,
localCurrency,
setMax,
feeLevels,
selectedFeeLevel,
@ -238,6 +292,8 @@ const AccountSend = (props: Props) => {
toggleAdvanced,
onAddressChange,
onAmountChange,
onLocalAmountChange,
onLocalCurrencyChange,
onSetMax,
onFeeLevelChange,
updateFeeLevels,
@ -307,7 +363,7 @@ const AccountSend = (props: Props) => {
]}
/>
</InputRow>
<InputRow>
<AmountRow>
<Input
state={getAmountInputState(errors.amount, warnings.amount)}
autoComplete="off"
@ -350,7 +406,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>