diff --git a/components/AmountInput.tsx b/components/AmountInput.tsx index edf2182f0..d3437fcb0 100644 --- a/components/AmountInput.tsx +++ b/components/AmountInput.tsx @@ -24,6 +24,7 @@ interface AmountInputProps { title?: string; hideConversion?: boolean; hideUnitChangeButton?: boolean; + forceUnit?: 'sats' | 'BTC' | 'fiat'; FiatStore?: FiatStore; SettingsStore?: SettingsStore; UnitsStore?: UnitsStore; @@ -33,12 +34,13 @@ interface AmountInputState { satAmount: string | number; } -const getSatAmount = (amount: string | number) => { +const getSatAmount = (amount: string | number, forceUnit?: string) => { const { fiatStore, settingsStore, unitsStore } = Stores; const { fiatRates } = fiatStore; const { settings } = settingsStore; const { fiat } = settings; const { units } = unitsStore; + const effectiveUnits = forceUnit || units; // replace , with . for unit separator const value = amount ? amount.toString().replace(/,/g, ',') : ''; @@ -51,7 +53,7 @@ const getSatAmount = (amount: string | number) => { const rate = fiat && fiatRates && fiatEntry ? fiatEntry.rate : 0; let satAmount: string | number = 0; - switch (units) { + switch (effectiveUnits) { case 'sats': satAmount = value; break; @@ -89,7 +91,8 @@ export default class AmountInput extends React.Component< const { amount } = props; let satAmount = '0'; - if (amount) satAmount = getSatAmount(amount).toString(); + if (amount) + satAmount = getSatAmount(amount, props.forceUnit).toString(); this.state = { satAmount @@ -98,16 +101,26 @@ export default class AmountInput extends React.Component< componentDidMount() { const { amount }: any = this.props; - const satAmount = getSatAmount(amount); + const satAmount = getSatAmount(amount, this.props.forceUnit); this.setState({ satAmount }); } UNSAFE_componentWillReceiveProps( nextProps: Readonly ): void { - const { amount } = nextProps; - if (amount) { - const satAmount = getSatAmount(amount); + const { amount, forceUnit } = nextProps; + if (forceUnit === 'sats' && forceUnit !== this.props.forceUnit) { + const currentSatAmount = getSatAmount( + amount || '', + this.props.forceUnit + ); + this.setState({ satAmount: currentSatAmount }); + this.props.onAmountChange( + currentSatAmount.toString(), + currentSatAmount + ); + } else { + const satAmount = getSatAmount(amount || '', forceUnit); this.setState({ satAmount }); } } @@ -115,7 +128,7 @@ export default class AmountInput extends React.Component< onChangeUnits = () => { const { amount, onAmountChange, UnitsStore }: any = this.props; UnitsStore.changeUnits(); - const satAmount = getSatAmount(amount); + const satAmount = getSatAmount(amount, this.props.forceUnit); onAmountChange(amount, satAmount); this.setState({ satAmount }); }; @@ -131,9 +144,11 @@ export default class AmountInput extends React.Component< hideUnitChangeButton, FiatStore, UnitsStore, - SettingsStore + SettingsStore, + forceUnit } = this.props; const { units }: any = UnitsStore; + const effectiveUnits = forceUnit || units; const { getRate, getSymbol }: any = FiatStore; const { settings }: any = SettingsStore; const { fiatEnabled } = settings; @@ -158,24 +173,27 @@ export default class AmountInput extends React.Component< onChangeText={(text: string) => { // remove spaces and non-numeric chars const formatted = text.replace(/[^\d.,-]/g, ''); - const satAmount = getSatAmount(formatted); + const satAmount = getSatAmount( + formatted, + forceUnit + ); onAmountChange(formatted, satAmount); this.setState({ satAmount }); }} locked={locked} prefix={ - units !== 'sats' && - (units === 'BTC' + effectiveUnits !== 'sats' && + (effectiveUnits === 'BTC' ? '₿' : !getSymbol().rtl ? getSymbol().symbol : null) } suffix={ - units === 'sats' - ? units + effectiveUnits === 'sats' + ? effectiveUnits : getSymbol().rtl && - units === 'fiat' && + effectiveUnits === 'fiat' && getSymbol().symbol } style={{ @@ -213,16 +231,16 @@ export default class AmountInput extends React.Component< color: themeColor('text') }} > - {getRate(units === 'sats')} + {getRate(effectiveUnits === 'sats')} )} - {fiatEnabled && units !== 'fiat' && ( + {fiatEnabled && effectiveUnits !== 'fiat' && ( )} - {units !== 'BTC' && ( + {effectiveUnits !== 'BTC' && ( )} - {units !== 'sats' && ( + {effectiveUnits !== 'sats' && ( )} diff --git a/views/OpenChannel.tsx b/views/OpenChannel.tsx index 52fcd6ae0..18aaa5041 100644 --- a/views/OpenChannel.tsx +++ b/views/OpenChannel.tsx @@ -14,7 +14,6 @@ import { Route } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { Tab } from 'react-native-elements'; -import Amount from '../components/Amount'; import AmountInput from '../components/AmountInput'; import Button from '../components/Button'; import DropdownSetting from '../components/DropdownSetting'; @@ -569,40 +568,32 @@ export default class OpenChannel extends React.Component< {!connectPeerOnly && ( <> - {!fundMax && ( - { - this.setState({ - local_funding_amount: amount, - satAmount - }); - }} - hideConversion={ - local_funding_amount === 'all' - } - /> - )} - - {(local_funding_amount === 'all' || - fundMax) && ( - - 0 - ? utxoBalance - : confirmedBlockchainBalance - } - toggleable - /> - - )} + 0 + ? utxoBalance.toString() + : confirmedBlockchainBalance.toString() + : local_funding_amount + } + title={localeString( + 'views.OpenChannel.localAmt' + )} + onAmountChange={( + amount: string, + satAmount: string | number + ) => { + this.setState({ + local_funding_amount: amount, + satAmount + }); + }} + hideConversion={ + local_funding_amount === 'all' + } + locked={fundMax} + forceUnit={fundMax ? 'sats' : undefined} + /> {BackendUtils.supportsChannelFundMax() && additionalChannels.length === 0 && ( diff --git a/views/Send.tsx b/views/Send.tsx index 4c4254da1..44397cc2b 100644 --- a/views/Send.tsx +++ b/views/Send.tsx @@ -35,7 +35,6 @@ import TransactionsStore from '../stores/TransactionsStore'; import UTXOsStore from '../stores/UTXOsStore'; import ContactStore from '../stores/ContactStore'; -import Amount from '../components/Amount'; import AmountInput from '../components/AmountInput'; import Button from '../components/Button'; import FeeLimit from '../components/FeeLimit'; @@ -987,47 +986,28 @@ export default class Send extends React.Component { {transactionType === 'On-chain' && BackendUtils.supportsOnchainSends() && ( - {!fundMax && ( - { - this.setState({ - amount, - satAmount - }); - }} - hideConversion={amount === 'all'} - /> - )} - - - {fundMax && ( - <> - 0 - ? utxoBalance - : confirmedBlockchainBalance - } - fixedUnits="BTC" - /> - 0 - ? utxoBalance - : confirmedBlockchainBalance - } - fixedUnits="sats" - /> - - )} - + 0 + ? utxoBalance.toString() + : confirmedBlockchainBalance.toString() + : amount + } + title={localeString('views.Send.amount')} + onAmountChange={( + amount: string, + satAmount: string | number + ) => { + this.setState({ + amount, + satAmount + }); + }} + hideConversion={amount === 'all'} + locked={fundMax} + forceUnit={fundMax ? 'sats' : undefined} + /> {BackendUtils.supportsOnchainSendMax() && additionalOutputs.length === 0 &&