Component: Amount Input

components/AmountInput.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { inject, observer } from 'mobx-react';
+import BigNumber from 'bignumber.js';
+
+import Amount from './Amount';
+import TextInput from './TextInput';
+
+import { themeColor } from '../utils/ThemeUtils';
+
+import Stores from '../stores/Stores';
+import FiatStore from '../stores/FiatStore';
+import SettingsStore from '../stores/SettingsStore';
+import UnitsStore, { SATS_PER_BTC } from '../stores/UnitsStore';
+
+interface AmountInputProps {
+    onAmountChange: (amount: string, satAmount: string | number) => void;
+    amount?: string;
+    locked?: boolean;
+    title: string;
+    hideConversion?: boolean;
+    FiatStore?: FiatStore;
+    SettingsStore?: SettingsStore;
+    UnitsStore?: UnitsStore;
+}
+
+interface AmountInputState {
+    satAmount: string | number;
+}
+
+const getSatAmount = (amount: string | number) => {
+    const { fiatStore, settingsStore, unitsStore } = Stores;
+    const { fiatRates } = fiatStore;
+    const { settings } = settingsStore;
+    const { fiat } = settings;
+    const { units } = unitsStore;
+
+    const value = amount || '0';
+
+    const fiatEntry =
+        fiat && fiatRates && fiatRates.filter
+            ? fiatRates.filter((entry: any) => entry.code === fiat)[0]
+            : null;
+
+    const rate =
+        fiat && fiat !== 'Disabled' && fiatRates && fiatEntry
+            ? fiatEntry.rate
+            : 0;
+
+    let satAmount: string | number;
+    switch (units) {
+        case 'sats':
+            satAmount = value;
+            break;
+        case 'BTC':
+            satAmount = new BigNumber(value || 0)
+                .multipliedBy(SATS_PER_BTC)
+                .toNumber();
+            break;
+        case 'fiat':
+            satAmount = rate
+                ? new BigNumber(value.toString().replace(/,/g, '.'))
+                      .dividedBy(rate)
+                      .multipliedBy(SATS_PER_BTC)
+                      .toNumber()
+                      .toFixed(0)
+                : 0;
+            break;
+    }
+
+    return satAmount;
+};
+
+@inject('FiatStore', 'SettingsStore', 'UnitsStore')
+@observer
+export default class AmountInput extends React.Component<
+    AmountInputProps,
+    AmountInputState
+> {
+    constructor(props: any) {
+        super(props);
+
+        this.state = {
+            satAmount: '0'
+        };
+    }
+
+    componentWillReceiveProps(nextProps: Readonly<AmountInputProps>): void {
+        const { amount } = nextProps;
+        if (amount) {
+            const satAmount = getSatAmount(amount);
+            this.setState({ satAmount });
+        }
+    }
+
+    onChangeUnits = () => {
+        const { amount, onAmountChange, UnitsStore }: any = this.props;
+        UnitsStore.changeUnits();
+        const satAmount = getSatAmount(amount);
+        onAmountChange(amount, satAmount);
+        this.setState({ satAmount });
+    };
+
+    render() {
+        const { satAmount } = this.state;
+        const {
+            amount,
+            onAmountChange,
+            title,
+            locked,
+            hideConversion,
+            FiatStore,
+            UnitsStore,
+            SettingsStore
+        } = this.props;
+        const { units }: any = UnitsStore;
+        const { getRate, getSymbol }: any = FiatStore;
+        const { settings }: any = SettingsStore;
+        const { fiat } = settings;
+
+        return (
+            <React.Fragment>
+                {title && (
+                    <TouchableOpacity onPress={() => this.onChangeUnits()}>
+                        <Text
+                            style={{
+                                fontFamily: 'Lato-Regular',
+                                color: themeColor('secondaryText')
+                            }}
+                        >
+                            {title}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+                <TextInput
+                    keyboardType="numeric"
+                    placeholder={'0'}
+                    value={amount}
+                    onChangeText={(text: string) => {
+                        const satAmount = getSatAmount(text);
+                        onAmountChange(text, satAmount);
+                        this.setState({ satAmount });
+                    }}
+                    locked={locked}
+                    prefix={
+                        units !== 'sats' &&
+                        (units === 'BTC'
+                            ? '₿'
+                            : !getSymbol().rtl
+                            ? getSymbol().symbol
+                            : null)
+                    }
+                    suffix={
+                        units === 'sats'
+                            ? units
+                            : getSymbol().rtl &&
+                              units === 'fiat' &&
+                              getSymbol().symbol
+                    }
+                    toggleUnits={this.onChangeUnits}
+                />
+                {!hideConversion && (
+                    <TouchableOpacity onPress={() => this.onChangeUnits()}>
+                        <View style={{ marginBottom: 10 }}>
+                            {fiat !== 'Disabled' && units !== 'fiat' && (
+                                <Amount sats={satAmount} fixedUnits="fiat" />
+                            )}
+                            {fiat !== 'Disabled' && (
+                                <Text
+                                    style={{
+                                        fontFamily: 'Lato-Regular',
+                                        color: themeColor('text')
+                                    }}
+                                >
+                                    {getRate(units === 'sats')}
+                                </Text>
+                            )}
+                            {units !== 'sats' && (
+                                <Amount sats={satAmount} fixedUnits="sats" />
+                            )}
+                            {units !== 'BTC' && (
+                                <Amount sats={satAmount} fixedUnits="BTC" />
+                            )}
+                        </View>
+                    </TouchableOpacity>
+                )}
+            </React.Fragment>
+        );
+    }
+}
+
+export { getSatAmount };

components/Conversion.tsx

@@ -5,9 +5,10 @@ import { inject, observer } from 'mobx-react';
 import Amount from '../components/Amount';
 
 import { Row } from '../components/layout/Row';
+import { getSatAmount } from '../components/AmountInput';
 
 import FiatStore from '../stores/UnitsStore';
-import UnitsStore, { SATS_PER_BTC } from '../stores/UnitsStore';
+import UnitsStore from '../stores/UnitsStore';
 import SettingsStore, { DEFAULT_FIAT } from '../stores/SettingsStore';
 
 import { themeColor } from '../utils/ThemeUtils';
@@ -59,38 +60,13 @@ export default class Conversion extends React.Component<
         const { settings } = SettingsStore;
         const { fiat } = settings;
 
-        const { fiatRates, getRate }: any = FiatStore;
-
-        // calculate fiat rate
-        const fiatEntry =
-            fiat && fiatRates && fiatRates.filter
-                ? fiatRates.filter((entry: any) => entry.code === fiat)[0]
-                : null;
-
-        const rate =
-            fiat && fiat !== 'Disabled' && fiatRates && fiatEntry
-                ? fiatEntry.rate
-                : 0;
+        const { getRate }: any = FiatStore;
 
         let satAmount: string | number;
-        if (amount) {
-            const amountStr = amount.toString();
-            switch (units) {
-                case 'sats':
-                    satAmount = amountStr;
-                    break;
-                case 'BTC':
-                    satAmount = Number(amountStr) * SATS_PER_BTC;
-                    break;
-                case 'fiat':
-                    satAmount = Number(
-                        (Number(amountStr.replace(/,/g, '.')) / Number(rate)) *
-                            Number(SATS_PER_BTC)
-                    ).toFixed(0);
-                    break;
-            }
-        } else if (sats) {
+        if (sats) {
             satAmount = sats;
+        } else {
+            satAmount = getSatAmount(amount);
         }
 
         if (!fiat || fiat === DEFAULT_FIAT || (!amount && !sats)) return;