3 files changed, 120 insertions, 0 deletions
diff --git a/ui/app/components/balance/balance.component.js b/ui/app/components/balance/balance.component.js
new file mode 100644
index 000000000..9d0018add
--- /dev/null
+++ b/ui/app/components/balance/balance.component.js
@@ -0,0 +1,92 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TokenBalance from '../token-balance'
+import Identicon from '../identicon'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../constants/common'
+import { formatBalance } from '../../util'
+
+export default class Balance extends PureComponent {
+  static propTypes = {
+    account: PropTypes.object,
+    assetImages: PropTypes.object,
+    nativeCurrency: PropTypes.string,
+    needsParse: PropTypes.bool,
+    network: PropTypes.string,
+    showFiat: PropTypes.bool,
+    token: PropTypes.object,
+  }
+
+  static defaultProps = {
+    needsParse: true,
+    showFiat: true,
+  }
+
+  renderBalance () {
+    const { account, nativeCurrency, needsParse, showFiat } = this.props
+    const balanceValue = account && account.balance
+    const formattedBalance = balanceValue
+      ? formatBalance(balanceValue, 6, needsParse, nativeCurrency)
+      : '...'
+
+    if (formattedBalance === 'None' || formattedBalance === '...') {
+      return (
+        <div className="flex-column balance-display">
+          <div className="token-amount">
+            { formattedBalance }
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex-column balance-display">
+        <UserPreferencedCurrencyDisplay
+          className="token-amount"
+          value={balanceValue}
+          type={PRIMARY}
+          ethNumberOfDecimals={4}
+        />
+        {
+          showFiat && (
+            <UserPreferencedCurrencyDisplay
+              value={balanceValue}
+              type={SECONDARY}
+              ethNumberOfDecimals={4}
+            />
+          )
+        }
+      </div>
+    )
+  }
+
+  renderTokenBalance () {
+    const { token } = this.props
+
+    return (
+      <div className="flex-column balance-display">
+        <div className="token-amount">
+          <TokenBalance token={token} />
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { token, network, assetImages } = this.props
+    const address = token && token.address
+    const image = assetImages && address ? assetImages[token.address] : undefined
+
+    return (
+      <div className="balance-container">
+        <Identicon
+          diameter={50}
+          address={address}
+          network={network}
+          image={image}
+        />
+        { token ? this.renderTokenBalance() : this.renderBalance() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/balance/balance.container.js b/ui/app/components/balance/balance.container.js
new file mode 100644
index 000000000..b8c3a04cc
--- /dev/null
+++ b/ui/app/components/balance/balance.container.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import Balance from './balance.component'
+import {
+  getNativeCurrency,
+  getAssetImages,
+  conversionRateSelector,
+  getCurrentCurrency,
+  getMetaMaskAccounts,
+} from '../../selectors'
+
+const mapStateToProps = state => {
+  const accounts = getMetaMaskAccounts(state)
+  const network = state.metamask.network
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const account = accounts[selectedAddress]
+
+  return {
+    account,
+    network,
+    nativeCurrency: getNativeCurrency(state),
+    conversionRate: conversionRateSelector(state),
+    currentCurrency: getCurrentCurrency(state),
+    assetImages: getAssetImages(state),
+  }
+}
+
+export default connect(mapStateToProps)(Balance)
diff --git a/ui/app/components/balance/index.js b/ui/app/components/balance/index.js
new file mode 100644
index 000000000..f8fb9ea19
--- /dev/null
+++ b/ui/app/components/balance/index.js
@@ -0,0 +1 @@
+export { default } from './balance.container'