1 files changed, 43 insertions, 1 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 7a78a360c..5b2588ec5 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -16,6 +16,9 @@ const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
 const EditableLabel = require('./components/editable-label')
 const Tooltip = require('./components/tooltip')
+const TabBar = require('./components/tab-bar')
+const TokenList = require('./components/token-list')
+
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
 function mapStateToProps (state) {
@@ -36,6 +39,7 @@ function mapStateToProps (state) {
 
 inherits(AccountDetailScreen, Component)
 function AccountDetailScreen () {
+  this.state = {}
   Component.call(this)
 }
 
@@ -237,11 +241,48 @@ AccountDetailScreen.prototype.subview = function () {
 
   switch (subview) {
     case 'transactions':
-      return this.transactionList()
+      return this.tabSections()
     case 'export':
       var state = extend({key: 'export'}, this.props)
       return h(ExportAccountView, state)
     default:
+      return this.tabSections()
+  }
+}
+
+AccountDetailScreen.prototype.tabSections = function () {
+  var subview
+  try {
+    subview = this.props.accountDetail.subview
+  } catch (e) {
+    subview = null
+  }
+
+  return h('section.tabSection', [
+
+    h(TabBar, {
+      tabs: [
+        { content: 'History', key: 'history' },
+        { content: 'Tokens', key: 'tokens' },
+      ],
+      defaultTab: subview || 'history',
+      tabSelected: (key) => {
+        this.setState({ tabSelection: key })
+      },
+    }),
+
+    this.tabSwitchView(),
+  ])
+}
+
+AccountDetailScreen.prototype.tabSwitchView = function () {
+  const userAddress = this.props.address
+  const tabSelection = this.state.tabSelection || 'history'
+
+  switch (tabSelection) {
+    case 'tokens':
+      return h(TokenList, { userAddress })
+    default:
       return this.transactionList()
   }
 }
@@ -249,6 +290,7 @@ AccountDetailScreen.prototype.subview = function () {
 AccountDetailScreen.prototype.transactionList = function () {
   const {transactions, unapprovedMsgs, address,
     network, shapeShiftTxList, conversionRate } = this.props
+
   return h(TransactionList, {
     transactions: transactions.sort((a, b) => b.time - a.time),
     network,