add currency switcher to eth send form

src/actions/ethereum/SendFormActions.js

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

src/actions/ethereum/SendFormValidationActions.js

@@ -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;
+            }
         }
     }
 

src/reducers/SendFormEthereumReducer.js

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

src/views/Wallet/views/Account/Send/ethereum/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';
@@ -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>