Get token balance

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
+    "bignumber.js": "^7.2.1",
     "classnames": "^2.2.6",
     "d3": "^4.13.0",
     "drizzle": "^1.2.3",

src/abi/erc20.json

+[
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "fallback"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  }
+]

src/components/CurrencyInputPanel/index.js

@@ -3,11 +3,13 @@ import { drizzleConnect } from 'drizzle-react'
 import PropTypes from 'prop-types';
 import { CSSTransitionGroup } from "react-transition-group";
 import classnames from 'classnames';
+import {BigNumber as BN} from 'bignumber.js';
 import Fuse from '../../helpers/fuse';
 import { updateField } from '../../ducks/swap';
 import Modal from '../Modal';
 import TokenLogo from '../TokenLogo';
 import SearchIcon from '../../assets/images/magnifying-glass.svg';
+import ERC20_ABI from '../../abi/erc20';
 
 import './currency-panel.scss';
 
@@ -45,13 +47,45 @@ class CurrencyInputPanel extends Component {
     selectedTokenAddress: '',
   };
 
+  getTokenData(address) {
+    const {
+      initialized,
+      contracts,
+      account,
+    } = this.props;
+    const { drizzle } = this.context;
+    const { web3 } = drizzle;
+
+    if (!initialized || !web3) {
+      return;
+    }
+
+    const balanceKey = drizzle.contracts[address].methods.balanceOf.cacheCall(account);
+    const decimalsKey = drizzle.contracts[address].methods.decimals.cacheCall();
+    const token = contracts[address];
+
+    const balance = token.balanceOf[balanceKey];
+    const decimals = token.decimals[decimalsKey];
+
+    if (!balance || !decimals) {
+      return;
+    }
+
+
+    return {
+      balance: balance.value,
+      decimals: decimals.value,
+    };
+  }
+
   getBalance() {
     const {
       balance,
       initialized,
     } = this.props;
     const { selectedTokenAddress } = this.state;
-    const { drizzle: { web3 } } = this.context;
+    const { drizzle } = this.context;
+    const { web3 } = drizzle;
 
     if (!selectedTokenAddress || !initialized || !web3 || !balance) {
       return '';
@@ -61,13 +95,17 @@ class CurrencyInputPanel extends Component {
       return `Balance: ${web3.utils.fromWei(balance, 'ether')}`;
     }
 
-    const bn = balance[selectedTokenAddress];
+    const tokenData = this.getTokenData(selectedTokenAddress);
 
-    if (!bn) {
+    if (!tokenData) {
       return '';
     }
 
-    return `Balance: ${web3.utils.fromWei(bn, 'ether')}`;
+    const tokenBalance = BN(tokenData.balance);
+    const denomination = Math.pow(10, tokenData.decimals);
+    const adjustedBalance = tokenBalance.dividedBy(denomination);
+
+    return `Balance: ${adjustedBalance.toFixed(2)}`;
   }
 
   createTokenList = () => {
@@ -103,11 +141,25 @@ class CurrencyInputPanel extends Component {
       <div
         key={label}
         className="token-modal__token-row"
-        onClick={() => this.setState({
-          selectedTokenAddress: address || 'ETH',
-          searchQuery: '',
-          isShowingModal: false,
-        })}
+        onClick={() => {
+          this.setState({
+            selectedTokenAddress: address || 'ETH',
+            searchQuery: '',
+            isShowingModal: false,
+          });
+
+          if (address && address !== 'ETH') {
+            const { drizzle } = this.context;
+            const { web3 } = drizzle;
+            const contractConfig = {
+              contractName: address,
+              web3Contract: new web3.eth.Contract(ERC20_ABI, address),
+            };
+            const events = ['Approval', 'Transfer'];
+
+            this.context.drizzle.addContract(contractConfig, events, { from: this.props.account });
+          }
+        }}
       >
         <TokenLogo className="token-modal__token-logo" address={address} />
         <div className="token-modal__token-label" >{label}</div>
@@ -220,6 +272,8 @@ export default drizzleConnect(
       tokenAddresses: state.addresses.tokenAddresses,
       initialized,
       balance: accountBalances[accounts[0]] || null,
+      account: accounts[0],
+      contracts: state.contracts,
     };
   },
   dispatch => ({

yarn.lock

@@ -1982,6 +1982,10 @@ big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
 
+bignumber.js@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-7.2.1.tgz#80c048759d826800807c4bfd521e50edbba57a5f"
+
 bin-links@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/bin-links/-/bin-links-1.1.2.tgz#fb74bd54bae6b7befc6c6221f25322ac830d9757"