Refactor transactions list views. Add redesign components

4 files changed, 201 insertions, 0 deletions

diff --git a/ui/app/components/token-view-balance/index.js b/ui/app/components/token-view-balance/index.js
new file mode 100644
index 000000000..e0509096a
--- /dev/null
+++ b/ui/app/components/token-view-balance/index.js
@@ -0,0 +1 @@
+export { default } from './token-view-balance.container'
diff --git a/ui/app/components/token-view-balance/index.scss b/ui/app/components/token-view-balance/index.scss
new file mode 100644
index 000000000..6a89e125b
--- /dev/null
+++ b/ui/app/components/token-view-balance/index.scss
@@ -0,0 +1,66 @@
+.token-view-balance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: 54px;
+
+  &__balance {
+    margin-left: 12px;
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (max-width: $break-small) {
+      align-items: center;
+      margin: 16px 0;
+    }
+  }
+
+  &__primary-balance {
+    font-size: 1.5rem;
+
+    @media screen and (max-width: $break-small) {
+      margin-bottom: 12px;
+      font-size: 1.75rem;
+    }
+  }
+
+  &__secondary-balance {
+    font-size: 1.15rem;
+    color: #a0a0a0;
+  }
+
+  &__balance-container {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    flex-direction: row;
+
+    @media screen and (max-width: $break-small) {
+      margin-bottom: 16px;
+    }
+  }
+
+  &__button {
+    min-width: initial;
+    width: 100px;
+
+    &:not(:last-child) {
+      margin-right: 12px;
+    }
+  }
+
+  @media screen and (max-width: $break-small) {
+    flex-direction: column;
+    height: initial
+  }
+}
diff --git a/ui/app/components/token-view-balance/token-view-balance.component.js b/ui/app/components/token-view-balance/token-view-balance.component.js
new file mode 100644
index 000000000..6b8140a22
--- /dev/null
+++ b/ui/app/components/token-view-balance/token-view-balance.component.js
@@ -0,0 +1,92 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../button'
+import Identicon from '../identicon'
+import TokenBalance from '../token-balance'
+import { SEND_ROUTE } from '../../routes'
+import { formatCurrency } from '../../helpers/confirm-transaction/util'
+
+export default class TokenViewBalance extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    showDepositModal: PropTypes.func,
+    selectedToken: PropTypes.object,
+    history: PropTypes.object,
+    network: PropTypes.string,
+    ethBalance: PropTypes.string,
+    fiatBalance: PropTypes.string,
+    currentCurrency: PropTypes.string,
+  }
+
+  renderBalance () {
+    const { selectedToken, ethBalance, fiatBalance, currentCurrency } = this.props
+    const formattedFiatBalance = formatCurrency(fiatBalance, currentCurrency)
+
+    return selectedToken
+      ? (
+        <TokenBalance
+          token={selectedToken}
+          withSymbol
+          className="token-view-balance__primary-balance"
+        />
+      ) : (
+        <div className="token-view-balance__balance">
+          <div className="token-view-balance__primary-balance">
+            { `${ethBalance} ETH` }
+          </div>
+          <div className="token-view-balance__secondary-balance">
+            { formattedFiatBalance }
+          </div>
+        </div>
+      )
+  }
+
+  renderButtons () {
+    const { t } = this.context
+    const { selectedToken, showDepositModal, history } = this.props
+
+    return (
+      <div className="token-view-balance__buttons">
+        {
+          !selectedToken && (
+            <Button
+              type="primary"
+              className="token-view-balance__button"
+              onClick={() => showDepositModal()}
+            >
+              { t('deposit') }
+            </Button>
+          )
+        }
+        <Button
+          type="primary"
+          className="token-view-balance__button"
+          onClick={() => history.push(SEND_ROUTE)}
+        >
+          { t('send') }
+        </Button>
+      </div>
+    )
+  }
+
+  render () {
+    const { network, selectedToken } = this.props
+
+    return (
+      <div className="token-view-balance">
+        <div className="token-view-balance__balance-container">
+          <Identicon
+            diameter={50}
+            address={selectedToken && selectedToken.address}
+            network={network}
+          />
+          { this.renderBalance() }
+        </div>
+        { this.renderButtons() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/token-view-balance/token-view-balance.container.js b/ui/app/components/token-view-balance/token-view-balance.container.js
new file mode 100644
index 000000000..692e6e32f
--- /dev/null
+++ b/ui/app/components/token-view-balance/token-view-balance.container.js
@@ -0,0 +1,42 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TokenViewBalance from './token-view-balance.component'
+import { getSelectedToken, getSelectedAddress } from '../../selectors'
+import { showModal } from '../../actions'
+import { getValueFromWeiHex } from '../../helpers/confirm-transaction/util'
+
+const mapStateToProps = state => {
+  const selectedAddress = getSelectedAddress(state)
+  const { metamask } = state
+  const { network, accounts, currentCurrency, conversionRate } = metamask
+  const account = accounts[selectedAddress]
+  const { balance: value } = account
+
+  const ethBalance = getValueFromWeiHex({
+    value, toCurrency: 'ETH', conversionRate, numberOfDecimals: 3,
+  })
+
+  const fiatBalance = getValueFromWeiHex({
+    value, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
+  })
+
+  return {
+    selectedToken: getSelectedToken(state),
+    network,
+    ethBalance,
+    fiatBalance,
+    currentCurrency,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showDepositModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(TokenViewBalance)