Merge pull request #784 from gre/polish-send

Send: polishes

src/components/AdvancedOptions/EthereumKind.js

@@ -25,7 +25,7 @@ export default translate()(({ gasLimit, onChangeGasLimit, t }: Props) => (
         <Input
           value={gasLimit}
           onChange={str => {
-            const gasLimit = parseInt(str, 10)
+            const gasLimit = parseInt(str || 0, 10)
             if (!isNaN(gasLimit) && isFinite(gasLimit)) onChangeGasLimit(gasLimit)
             else onChangeGasLimit(0x5208)
           }}

src/components/FeesField/BitcoinKind.js

@@ -50,10 +50,9 @@ const customItem = {
   feePerByte: 0,
 }
 
-class FeesField extends Component<
-  Props & { fees?: Fees, error?: Error },
-  { isFocused: boolean, items: FeeItem[], selectedItem: FeeItem },
-> {
+type State = { isFocused: boolean, items: FeeItem[], selectedItem: FeeItem }
+
+class FeesField extends Component<Props & { fees?: Fees, error?: Error }, State> {
   state = {
     items: [customItem],
     selectedItem: customItem,
@@ -103,10 +102,21 @@ class FeesField extends Component<
 
   onSelectChange = selectedItem => {
     const { onChange } = this.props
-    this.setState({ selectedItem })
-    if (selectedItem.feePerByte) onChange(selectedItem.feePerByte)
+    const patch: $Shape<State> = { selectedItem }
+    if (selectedItem.feePerByte) {
+      onChange(selectedItem.feePerByte)
+    } else {
+      const { input } = this
+      if (!selectedItem.feePerByte && input.current) {
+        patch.isFocused = true
+        input.current.select()
+      }
+    }
+    this.setState(patch)
   }
 
+  input = React.createRef()
+
   render() {
     const { account, feePerByte, error, onChange, t } = this.props
     const { items, selectedItem } = this.state
@@ -118,6 +128,7 @@ class FeesField extends Component<
       <GenericContainer error={error} help={t('app:send.steps.amount.unitPerByte')}>
         <Select width={156} options={items} value={selectedItem} onChange={this.onSelectChange} />
         <InputCurrency
+          ref={this.input}
           defaultUnit={satoshi}
           units={units}
           containerProps={{ grow: true }}

src/components/FeesField/RippleKind.js

@@ -23,11 +23,17 @@ class FeesField extends Component<Props, State> {
   componentDidMount() {
     this.sync()
   }
+  componentWillUnmount() {
+    this.syncId++
+  }
+  syncId = 0
   async sync() {
     const api = apiForEndpointConfig(this.props.account.endpointConfig)
+    const syncId = ++this.syncId
     try {
       await api.connect()
       const info = await api.getServerInfo()
+      if (syncId !== this.syncId) return
       const serverFee = parseAPIValue(info.validatedLedger.baseFeeXRP)
       if (!this.props.fee) {
         this.props.onChange(serverFee)

src/components/base/Input/index.js

@@ -151,9 +151,12 @@ class Input extends PureComponent<Props, State> {
     onBlur(e)
   }
 
-  handleSelectEverything = () => {
-    this._input && this._input.setSelectionRange(0, this._input.value.length)
-    this._input && this._input.focus()
+  select = () => {
+    const { _input } = this
+    if (_input) {
+      _input.select()
+      _input.focus()
+    }
   }
 
   _input = null

src/components/base/InputCurrency/index.js

@@ -190,6 +190,16 @@ class InputCurrency extends PureComponent<Props, State> {
     )
   }
 
+  select = () => {
+    // TODO we should fowardRef so InputCurrency ref is on Input
+    this.input && this.input.select()
+  }
+
+  input: ?Input
+  onRef = (input: ?Input) => {
+    this.input = input
+  }
+
   render() {
     const { renderRight, showAllDigits, unit, subMagnitude } = this.props
     const { displayValue } = this.state
@@ -198,6 +208,7 @@ class InputCurrency extends PureComponent<Props, State> {
       <Input
         {...this.props}
         ff="Rubik"
+        ref={this.onRef}
         value={displayValue}
         onChange={this.handleChange}
         onFocus={this.handleFocus}

src/components/modals/Send/fields/AmountField.js

@@ -20,13 +20,14 @@ class AmountField extends Component<*, { canBeSpent: boolean }> {
     }
   }
   componentWillUnmount() {
-    this.unmount = true
+    this.syncId++
   }
-  unmount = false
+  syncId = 0
   async resync() {
     const { account, bridge, transaction } = this.props
+    const syncId = ++this.syncId
     const canBeSpent = await bridge.canBeSpent(account, transaction)
-    if (this.unmount) return
+    if (this.syncId !== syncId) return
     this.setState({ canBeSpent })
   }
 

src/components/modals/Send/fields/RecipientField.js

@@ -33,16 +33,17 @@ class RecipientField<Transaction> extends Component<Props<Transaction>, { isVali
     }
   }
   componentWillUnmount() {
-    this.unmount = true
+    this.syncId++
   }
-  unmount = false
+  syncId = 0
   async resync() {
     const { account, bridge, transaction } = this.props
+    const syncId = ++this.syncId
     const isValid = await bridge.isRecipientValid(
       account.currency,
       bridge.getTransactionRecipient(account, transaction),
     )
-    if (this.unmount) return
+    if (syncId !== this.syncId) return
     this.setState({ isValid })
   }
 

src/components/modals/Send/steps/01-step-amount.js

@@ -112,14 +112,16 @@ export class StepAmountFooter extends PureComponent<
   }
 
   componentWillUnmount() {
-    this._isUnmounted = true
+    this.syncId++
   }
 
-  _isUnmounted = false
+  syncId = 0
 
   async resync() {
     const { account, bridge, transaction } = this.props
 
+    const syncId = ++this.syncId
+
     if (!account || !transaction || !bridge) {
       return
     }
@@ -128,9 +130,9 @@ export class StepAmountFooter extends PureComponent<
 
     try {
       const totalSpent = await bridge.getTotalSpent(account, transaction)
-      if (this._isUnmounted) return
+      if (syncId !== this.syncId) return
       const canBeSpent = await bridge.canBeSpent(account, transaction)
-      if (this._isUnmounted) return
+      if (syncId !== this.syncId) return
       this.setState({ totalSpent, canBeSpent, isSyncing: false })
     } catch (err) {
       this.setState({ isSyncing: false })