Merge pull request #82 from satoshilabs/feature-show-current-token-balance

feature: show current token balance

src/views/Wallet/views/AccountSend/index.js

@@ -31,6 +31,16 @@ const StyledH2 = styled(H2)`
     padding: 20px 0;
 `;
 
+const AmountInputLabelWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const AmountInputLabel = styled.span`
+    text-align: right;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
 const InputRow = styled.div`
     margin-bottom: 20px;
 `;
@@ -198,7 +208,6 @@ const AccountSend = (props: Props) => {
         sending,
         advanced,
     } = props.sendForm;
-
     const {
         toggleAdvanced,
         onAddressChange,
@@ -210,6 +219,14 @@ const AccountSend = (props: Props) => {
         onSend,
     } = props.sendFormActions;
 
+    const isCurrentCurrencyToken = networkSymbol !== currency;
+
+    let selectedTokenBalance = 0;
+    const selectedToken = tokens.find(t => t.symbol === currency);
+    if (selectedToken) {
+        selectedTokenBalance = selectedToken.balance;
+    }
+
     if (!device || !account || !discovery || !network) return null;
 
     let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
@@ -259,7 +276,14 @@ const AccountSend = (props: Props) => {
                         autoCorrect="off"
                         autoCapitalize="off"
                         spellCheck="false"
-                        topLabel="Amount"
+                        topLabel={(
+                            <AmountInputLabelWrapper>
+                                <AmountInputLabel>Amount</AmountInputLabel>
+                                {(isCurrentCurrencyToken && selectedToken) && (
+                                    <AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
+                                )}
+                            </AmountInputLabelWrapper>
+                        )}
                         value={amount}
                         onChange={event => onAmountChange(event.target.value)}
                         bottomText={errors.amount || warnings.amount || infos.amount}