add currency switcher to ripple send tab

src/actions/ripple/SendFormActions.js

@@ -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,

src/actions/ripple/SendFormValidationActions.js

@@ -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);

src/reducers/SendFormRippleReducer.js

@@ -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: [],

src/views/Wallet/views/Account/Send/ripple/index.js

@@ -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>