[#2285] - fix MAX gas amount (#2391)

* Updates GAS fee calculation logic

* Fix type errors

* Add alert if user is attempting to send total GAS balance

* Remove testing stub

app/components/Send/SendPanel/index.jsx

@@ -19,6 +19,7 @@ import EditIcon from '../../../assets/icons/edit.svg'
 
 import styles from './SendPanel.scss'
 import AlertBox from '../../AlertBox'
+import TotalGasBeingSentAlert from '../../TotalGasBeingSentAlert'
 
 type Props = {
   sendRowDetails: Array<*>,
@@ -55,6 +56,7 @@ type Props = {
   hasEnoughGas: boolean,
   loading: boolean,
   isMigration: boolean,
+  isSendingTotalAmountOfGas: boolean,
 }
 
 const shouldDisableSendButton = (sendRowDetails, loading) =>
@@ -99,6 +101,7 @@ const SendPanel = ({
   hasEnoughGas,
   loading,
   isMigration,
+  isSendingTotalAmountOfGas,
 }: Props) => {
   if (noSendableAssets) {
     return <ZeroAssets address={address} />
@@ -111,6 +114,7 @@ const SendPanel = ({
   let content = (
     <form>
       {chain === 'neo2' && !isMigration && <AlertBox />}
+      {isSendingTotalAmountOfGas && <TotalGasBeingSentAlert />}
       <SendRecipientList
         sendRowDetails={sendRowDetails}
         sendableAssets={sendableAssets}

app/components/TotalGasBeingSentAlert/TotalGasBeingSentAlert.scss

@@ -0,0 +1,55 @@
+@import '../../styles/variables';
+
+.alertBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  margin-bottom: 20px;
+  max-width: 1100px;
+  box-sizing: border-box;
+  background-color: rgba(211, 85, 231, 0.52);
+  border-radius: 3px;
+
+  .iconContainer {
+    width: 70px;
+    background-color: #d355e7;
+    display: flex;
+    align-items: center;
+    border-radius: 3px 0 0 3px;
+    height: 100px;
+    justify-content: center;
+  }
+
+  h2 {
+    font-family: var(--font-gotham-bold);
+    font-size: 15px;
+    font-weight: bold;
+    margin-bottom: 6px;
+    margin: 0 0 6px 0;
+    margin-left: 12px;
+  }
+  b {
+    font-family: var(--font-gotham-bold);
+  }
+
+  .warning {
+    margin-left: 12px;
+  }
+
+  svg {
+    margin: 6px;
+    vertical-align: center;
+    min-width: 31px;
+    min-height: 28px;
+
+    path {
+      fill: var(--input-text);
+    }
+  }
+
+  a {
+    color: var(--input-text);
+    text-decoration: underline;
+  }
+}

app/components/TotalGasBeingSentAlert/index.js

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react'
+
+import classNames from 'classnames'
+
+import styles from './TotalGasBeingSentAlert.scss'
+import WarningIcon from '../../assets/icons/warning.svg'
+
+const electron = require('electron').remote
+
+const TotalGasBeingSentAlert = () => (
+  <section className={classNames(styles.alertBox, 'alertBox')}>
+    <div className={styles.iconContainer}>
+      <WarningIcon />
+    </div>
+    <div>
+      <div>
+        <h2>WARNING</h2>
+      </div>
+      <div className={styles.warning}>
+        <b>You are about to send all of your GAS out of this wallet. </b>
+        You will not be able to perform any additional future transactions on N3
+        without a GAS balance to pay transaction fees.
+      </div>
+    </div>
+  </section>
+)
+
+export default TotalGasBeingSentAlert

app/containers/Send/Send.jsx

@@ -22,6 +22,7 @@ import styles from './Send.scss'
 import DialogueBox from '../../components/DialogueBox'
 
 const MAX_NUMBER_OF_RECIPIENTS = 25
+const MIN_EXPECTED_N3_GAS_FEE = 0.072
 
 type Props = {
   sendableAssets: Object,
@@ -72,6 +73,8 @@ type State = {
     networkFee: string,
   },
   loading: boolean,
+  expectedGasFee: string | number,
+  isSendingTotalAmountOfGas: boolean,
 }
 
 export default class Send extends React.Component<Props, State> {
@@ -92,6 +95,8 @@ export default class Send extends React.Component<Props, State> {
       },
       hasEnoughGas: true,
       loading: false,
+      expectedGasFee: MIN_EXPECTED_N3_GAS_FEE,
+      isSendingTotalAmountOfGas: false,
     }
   }
 
@@ -121,6 +126,16 @@ export default class Send extends React.Component<Props, State> {
         : new n3Wallet.Account(this.props.wif)
       this.updateRowField(0, 'address', account.address)
     }
+
+    // Calculate expected gas fee
+    this.setState({ loading: true })
+    const results = await this.attemptToCalculateN3Fees([])
+    if (results) {
+      const transactionFee = (
+        Number(results.networkFee) + Number(results.systemFee)
+      ).toFixed(8)
+      this.setState({ expectedGasFee: transactionFee })
+    }
   }
 
   pushQRCodeData = (data: Object) => {
@@ -234,17 +249,51 @@ export default class Send extends React.Component<Props, State> {
   }
 
   attemptToCalculateN3Fees = async (sendRowDetails: Array<Object>) => {
-    this.setState({ loading: true })
+    if (!sendRowDetails.length) {
+      const fees = await this.props
+        .calculateN3Fees({
+          sendEntries: [
+            // $flow-fix-me
+            { address: this.props.address, amount: 1, symbol: 'GAS' },
+          ],
+        })
+        .catch(() => {
+          console.warn('An error occurred attempting to calculate fees')
+        })
+      return fees
+    }
+
     const sendEntries = sendRowDetails.map((row: Object) => ({
       address: row.address,
       amount: toNumber(row.amount.toString()),
-      symbol: row.asset,
+      symbol: row.asset || 'GAS',
     }))
 
+    if (this.props.sendableAssets.GAS) {
+      const totalGasBeingSent = sendEntries.reduce((prev, curr) => {
+        if (curr.symbol === 'GAS') {
+          return prev + curr.amount
+        }
+        return 0
+      }, 0)
+      if (
+        (Number(totalGasBeingSent) + Number(this.state.expectedGasFee)).toFixed(
+          8,
+        ) ===
+        Number(
+          this.props.sendableAssets.GAS
+            ? this.props.sendableAssets.GAS.balance
+            : 0,
+        ).toFixed(8)
+      ) {
+        this.setState({ isSendingTotalAmountOfGas: true })
+      } else {
+        this.setState({ isSendingTotalAmountOfGas: false })
+      }
+    }
+
     let shouldCalculateFees = true
 
-    // TODO: not exactly sure what the criteria should be for
-    // attempting to calculate fees
     sendEntries.forEach(entry => {
       if (!n3Wallet.isAddress(entry.address)) {
         shouldCalculateFees = false
@@ -268,8 +317,6 @@ export default class Send extends React.Component<Props, State> {
   calculateMaxValue = (asset: string, index: number = 0) => {
     const { sendableAssets, chain } = this.props
 
-    const MIN_EXPECTED_GAS_FEE = 0.072
-
     if (chain === 'neo2') {
       if (sendableAssets[asset]) {
         const rows = [...this.state.sendRowDetails]
@@ -296,11 +343,12 @@ export default class Send extends React.Component<Props, State> {
 
       if (asset === 'GAS') {
         const existingGasAmounts =
-          Number(this.calculateRowAmounts(asset, index)) - MIN_EXPECTED_GAS_FEE
+          Number(this.calculateRowAmounts(asset, index)) -
+          Number(this.state.expectedGasFee)
 
         totalSendableAssets = minusNumber(
           totalSendableAssets,
-          MIN_EXPECTED_GAS_FEE * rowsWithAsset.length,
+          Number(this.state.expectedGasFee) * rowsWithAsset.length,
         )
 
         if (totalSendableAssets < 0) {
@@ -790,6 +838,7 @@ export default class Send extends React.Component<Props, State> {
       n3Fees,
       hasEnoughGas,
       loading,
+      isSendingTotalAmountOfGas,
     } = this.state
     const {
       sendableAssets,
@@ -874,6 +923,7 @@ export default class Send extends React.Component<Props, State> {
           loading={loading}
           toggleHasEnoughGas={this.toggleHasEnoughGas}
           isMigration={isMigration}
+          isSendingTotalAmountOfGas={isSendingTotalAmountOfGas}
         />
       </section>
     )

flow-typed/declarations.js

@@ -152,7 +152,7 @@ declare type TokenBalanceType = {
 }
 
 declare type SendEntryType = {
-  amount: string,
+  amount: string | number,
   address: string,
   symbol: SymbolType,
   contractHash?: string,