1 files changed, 311 insertions, 0 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
new file mode 100644
index 000000000..bed05a7fb
--- /dev/null
+++ b/ui/app/account-detail.js
@@ -0,0 +1,311 @@
+const inherits = require('util').inherits
+const extend = require('xtend')
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const CopyButton = require('./components/copyButton')
+const AccountInfoLink = require('./components/account-info-link')
+const actions = require('./actions')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const valuesFor = require('./util').valuesFor
+
+const Identicon = require('./components/identicon')
+const EthBalance = require('./components/eth-balance')
+const TransactionList = require('./components/transaction-list')
+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) {
+  return {
+    metamask: state.metamask,
+    identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+    address: state.metamask.selectedAddress,
+    accountDetail: state.appState.accountDetail,
+    network: state.metamask.network,
+    unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs),
+    shapeShiftTxList: state.metamask.shapeShiftTxList,
+    transactions: state.metamask.selectedAddressTxList || [],
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+    currentAccountTab: state.metamask.currentAccountTab,
+    tokens: state.metamask.tokens,
+  }
+}
+
+inherits(AccountDetailScreen, Component)
+function AccountDetailScreen () {
+  Component.call(this)
+}
+
+AccountDetailScreen.prototype.render = function () {
+  var props = this.props
+  var selected = props.address || Object.keys(props.accounts)[0]
+  var checksumAddress = selected && ethUtil.toChecksumAddress(selected)
+  var identity = props.identities[selected]
+  var account = props.accounts[selected]
+  const { network, conversionRate, currentCurrency } = props
+
+  return (
+
+    h('.account-detail-section', [
+
+      // identicon, label, balance, etc
+      h('.account-data-subsection', {
+        style: {
+          margin: '0 20px',
+        },
+      }, [
+
+        // header - identicon + nav
+        h('div', {
+          style: {
+            paddingTop: '20px',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+          },
+        }, [
+
+          // large identicon and addresses
+          h('.identicon-wrapper.select-none', [
+            h(Identicon, {
+              diameter: 62,
+              address: selected,
+            }),
+          ]),
+          h('flex-column', {
+            style: {
+              lineHeight: '10px',
+              marginLeft: '15px',
+            },
+          }, [
+            h(EditableLabel, {
+              textValue: identity ? identity.name : '',
+              state: {
+                isEditingLabel: false,
+              },
+              saveText: (text) => {
+                props.dispatch(actions.saveAccountLabel(selected, text))
+              },
+            }, [
+
+              // What is shown when not editing + edit text:
+              h('label.editing-label', [h('.edit-text', 'edit')]),
+              h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
+            ]),
+            h('.flex-row', {
+              style: {
+                width: '15em',
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+              },
+            }, [
+
+              // address
+
+              h('div', {
+                style: {
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  paddingTop: '3px',
+                  width: '5em',
+                  fontSize: '13px',
+                  fontFamily: 'Montserrat Light',
+                  textRendering: 'geometricPrecision',
+                  marginTop: '10px',
+                  marginBottom: '15px',
+                  color: '#AEAEAE',
+                },
+              }, checksumAddress),
+
+              // copy and export
+
+              h('.flex-row', {
+                style: {
+                  justifyContent: 'flex-end',
+                },
+              }, [
+
+                h(AccountInfoLink, { selected, network }),
+
+                h(CopyButton, {
+                  value: checksumAddress,
+                }),
+
+                h(Tooltip, {
+                  title: 'QR Code',
+                }, [
+                  h('i.fa.fa-qrcode.pointer.pop-hover', {
+                    onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')),
+                    style: {
+                      fontSize: '18px',
+                      position: 'relative',
+                      color: 'rgb(247, 134, 28)',
+                      top: '5px',
+                      marginLeft: '3px',
+                      marginRight: '3px',
+                    },
+                  }),
+                ]),
+
+                h(Tooltip, {
+                  title: 'Export Private Key',
+                }, [
+                  h('div', {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                    },
+                  }, [
+                    h('img.cursor-pointer.color-orange', {
+                      src: 'images/key-32.png',
+                      onClick: () => this.requestAccountExport(selected),
+                      style: {
+                        height: '19px',
+                      },
+                    }),
+                  ]),
+                ]),
+              ]),
+            ]),
+
+            // account ballence
+
+          ]),
+        ]),
+        h('.flex-row', {
+          style: {
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+          },
+        }, [
+
+          h(EthBalance, {
+            value: account && account.balance,
+            conversionRate,
+            currentCurrency,
+            style: {
+              lineHeight: '7px',
+              marginTop: '10px',
+            },
+          }),
+
+          h('button', {
+            onClick: () => props.dispatch(actions.buyEthView(selected)),
+            style: {
+              marginBottom: '20px',
+              marginRight: '8px',
+              position: 'absolute',
+              left: '219px',
+            },
+          }, 'BUY'),
+
+          h('button', {
+            onClick: () => props.dispatch(actions.showSendPage()),
+            style: {
+              marginBottom: '20px',
+              marginRight: '8px',
+            },
+          }, 'SEND'),
+
+        ]),
+      ]),
+
+      // subview (tx history, pk export confirm, buy eth warning)
+      h(ReactCSSTransitionGroup, {
+        className: 'css-transition-group',
+        transitionName: 'main',
+        transitionEnterTimeout: 300,
+        transitionLeaveTimeout: 300,
+      }, [
+        this.subview(),
+      ]),
+
+    ])
+  )
+}
+
+AccountDetailScreen.prototype.subview = function () {
+  var subview
+  try {
+    subview = this.props.accountDetail.subview
+  } catch (e) {
+    subview = null
+  }
+
+  switch (subview) {
+    case 'transactions':
+      return this.tabSections()
+    case 'export':
+      var state = extend({key: 'export'}, this.props)
+      return h(ExportAccountView, state)
+    default:
+      return this.tabSections()
+  }
+}
+
+AccountDetailScreen.prototype.tabSections = function () {
+  const { currentAccountTab } = this.props
+
+  return h('section.tabSection', [
+
+    h(TabBar, {
+      tabs: [
+        { content: 'Sent', key: 'history' },
+        { content: 'Tokens', key: 'tokens' },
+      ],
+      defaultTab: currentAccountTab || 'history',
+      tabSelected: (key) => {
+        this.props.dispatch(actions.setCurrentAccountTab(key))
+      },
+    }),
+
+    this.tabSwitchView(),
+  ])
+}
+
+AccountDetailScreen.prototype.tabSwitchView = function () {
+  const props = this.props
+  const { address, network } = props
+  const { currentAccountTab, tokens } = this.props
+
+  switch (currentAccountTab) {
+    case 'tokens':
+      return h(TokenList, {
+        userAddress: address,
+        network,
+        tokens,
+        addToken: () => this.props.dispatch(actions.showAddTokenPage()),
+      })
+    default:
+      return this.transactionList()
+  }
+}
+
+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,
+    unapprovedMsgs,
+    conversionRate,
+    address,
+    shapeShiftTxList,
+    viewPendingTx: (txId) => {
+      this.props.dispatch(actions.viewPendingTx(txId))
+    },
+  })
+}
+
+AccountDetailScreen.prototype.requestAccountExport = function () {
+  this.props.dispatch(actions.requestExportAccount())
+}