Fix many race conditions in Send step1

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/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 })