Bugfix: new send flow amount balance (#1294)

* add balance * snaps * ui issue * fix collectible
MetaMask · Jan 28, 2020 · 510aa9b · 510aa9b
1 parent 5d45314
commit 510aa9b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 7 deletions.
diff --git a/app/components/Views/SendFlow/Amount/__snapshots__/index.test.js.snap b/app/components/Views/SendFlow/Amount/__snapshots__/index.test.js.snap
@@ -153,6 +153,27 @@ exports[`Amount should render correctly 1`] = `
           />
         </View>
       </View>
+      <View
+        style={
+          Object {
+            "marginVertical": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "alignSelf": "center",
+              "fontFamily": "Roboto",
+              "fontSize": 12,
+              "fontWeight": "400",
+              "lineHeight": 16,
+            }
+          }
+        >
+          Balance: undefined
+        </Text>
+      </View>
     </View>
   </View>
   <KeyboardAvoidingView

diff --git a/app/components/Views/SendFlow/Amount/index.js b/app/components/Views/SendFlow/Amount/index.js
@@ -265,6 +265,15 @@ const styles = StyleSheet.create({
 	nextActionWrapper: {
 		flex: 1,
 		marginBottom: 16
+	},
+	balanceWrapper: {
+		marginVertical: 16
+	},
+	balanceText: {
+		...fontStyles.normal,
+		alignSelf: 'center',
+		fontSize: 12,
+		lineHeight: 16
 	}
 });
 
@@ -357,11 +366,13 @@ class Amount extends PureComponent {
 	collectibles = [];
 
 	componentDidMount = async () => {
-		const { tokens, ticker } = this.props;
+		const { tokens, ticker, selectedAsset } = this.props;
 		this.tokens = [getEther(ticker), ...tokens];
 		this.collectibles = this.processCollectibles();
 		this.amountInput && this.amountInput.current && this.amountInput.current.focus();
 		this.onInputChange();
+		// if collectible don't do this
+		if (!selectedAsset.tokenId) this.handleSelectedAssetBalance(selectedAsset);
 		const estimatedTotalGas = await this.estimateTransactionTotalGas();
 		this.setState({ estimatedTotalGas });
 	};
@@ -570,11 +581,24 @@ class Amount extends PureComponent {
 		this.setState({ assetsModalVisible: !assetsModalVisible });
 	};
 
+	handleSelectedAssetBalance = selectedAsset => {
+		const { accounts, selectedAddress, contractBalances } = this.props;
+		let currentBalance;
+		const { address, decimals, symbol, isETH } = selectedAsset;
+		if (isETH) {
+			currentBalance = `${renderFromWei(accounts[selectedAddress].balance)} ${symbol}`;
+		} else {
+			currentBalance = `${renderFromTokenMinimalUnit(contractBalances[address], decimals)} ${symbol}`;
+		}
+		this.setState({ currentBalance });
+	};
+
 	pickSelectedAsset = selectedAsset => {
 		this.toggleAssetsModal();
 		this.props.setSelectedAsset(selectedAsset);
 		if (!selectedAsset.tokenId) {
 			this.onInputChange(undefined, selectedAsset);
+			this.handleSelectedAssetBalance(selectedAsset);
 			// Wait for input to mount first
 			setTimeout(() => this.amountInput && this.amountInput.current && this.amountInput.current.focus(), 500);
 		}
@@ -719,7 +743,8 @@ class Amount extends PureComponent {
 			renderableInputValueConversion,
 			amountError,
 			hasExchangeRate,
-			internalPrimaryCurrencyIsCrypto
+			internalPrimaryCurrencyIsCrypto,
+			currentBalance
 		} = this.state;
 		const { currentCurrency } = this.props;
 		return (
@@ -741,7 +766,7 @@ class Amount extends PureComponent {
 				</View>
 				{hasExchangeRate && (
 					<View style={styles.actionsWrapper}>
-						<View style={[styles.action]}>
+						<View style={styles.action}>
 							<TouchableOpacity style={styles.actionSwitch} onPress={this.switchCurrency}>
 								<Text style={styles.textSwitch} numberOfLines={1}>
 									{renderableInputValueConversion}
@@ -758,6 +783,9 @@ class Amount extends PureComponent {
 						</View>
 					</View>
 				)}
+				<View style={styles.balanceWrapper}>
+					<Text style={styles.balanceText}>{`${strings('transaction.balance')}: ${currentBalance}`}</Text>
+				</View>
 				{amountError && (
 					<View style={styles.errorMessageWrapper}>
 						<ErrorMessage errorMessage={amountError} />

diff --git a/app/components/Views/SendFlow/Confirm/index.js b/app/components/Views/SendFlow/Confirm/index.js
@@ -328,8 +328,8 @@ class Confirm extends PureComponent {
 		} else if (selectedAsset.tokenId) {
 			fromAccountBalance = `${renderFromWei(accounts[from].balance)} ${parsedTicker}`;
 			const collectibleTransferInformation =
-				selectedAsset.address in collectiblesTransferInformation &&
-				collectiblesTransferInformation[selectedAsset.address];
+				selectedAsset.address.toLowerCase() in collectiblesTransferInformation &&
+				collectiblesTransferInformation[selectedAsset.address.toLowerCase()];
 			if (
 				!collectibleTransferInformation ||
 				(collectibleTransferInformation.tradable && collectibleTransferInformation.method === 'transferFrom')

diff --git a/locales/en.json b/locales/en.json
@@ -506,7 +506,8 @@
 		"total_amount": "Total amount",
 		"adjust_transaction_fee": "Adjust transaction fee",
 		"could_not_resolve_ens": "Couldn't resolve ENS",
-		"asset": "Asset"
+		"asset": "Asset",
+		"balance": "Balance"
 	},
 	"custom_gas": {
 		"advanced_options": "Show advanced options",

diff --git a/locales/es.json b/locales/es.json
@@ -496,7 +496,8 @@
 		"total_amount": "Cantidad total",
 		"adjust_transaction_fee": "Ajustar tarifa de transacción",
 		"could_not_resolve_ens": "No se pudo resolver nombre ENS",
-		"asset": "Activo"
+		"asset": "Activo",
+		"balance": "Balance"
 	},
 	"custom_gas": {
 		"advanced_options": "Mostrar opciones avanzadas",