From 5ee40675b9f986a9ff2e5d15a271d7de2145d0e9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 30 Jul 2018 22:03:20 -0700
Subject: Refactor transactions list views. Add redesign components

---
 .../token-view-balance.component.js                | 92 ++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 ui/app/components/token-view-balance/token-view-balance.component.js

(limited to 'ui/app/components/token-view-balance/token-view-balance.component.js')

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>
+    )
+  }
+}
-- 
cgit