Merge pull request #113 from FredrikOseberg/compress-larger-render-fu…

…nctions

Compress larger render functions

__tests__/components/Login.test.js

@@ -133,9 +133,8 @@ describe('Login', () => {
     jest.runAllTimers()
 
     process.nextTick(() => {
-      const loginState = loginForm.find(Login).instance().state
-      expect(loginState.errorMsg).not.toEqual('')
-      expect(loginForm.text().includes(loginState.errorMsg)).toEqual(true)
+      const loginProps = loginForm.find(Login).instance().props
+      expect(loginProps.errors.passPhrase).toEqual('Wrong password')
       done()
     })
   })

src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css

@@ -0,0 +1,41 @@
+.accountInfoAmounts {
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-around;
+  color: #585858;
+  position: relative;
+}
+
+.accountInfoNeoAmount,
+.accountInfoGasAmount {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.accountInfoNeoAmountImg {
+  width: 25px;
+}
+
+.accountInfoGasAmount svg {
+  font-size: 1.3rem;
+  margin-bottom: 3px;
+  color: #36b049;
+}
+
+.accountInfoAmountParagraph {
+  font-size: 1rem;
+  border: 1px solid #36b149;
+  color: #36b149;
+  padding: 4px 10px;
+  border-radius: 50px;
+}
+
+
+.accountInfoRefreshButton {
+  font-size: 1.2rem;
+  border: none;
+  color: #585858;
+  position: absolute;
+  cursor: pointer;
+}

src/app/components/AccountInfo/AccountInfoAmounts/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import neonPNG from '../../../../img/icon-34.png'
+
+import style from './AccountInfoAmounts.css'
+
+const AccountInfoAmounts = ({ neo, getBalance, gas }) => {
+  return (
+    <div className={ style.accountInfoAmounts }>
+      <div className={ style.accountInfoNeoAmount }>
+        <img src={ neonPNG } alt='Neo' className={ style.accountInfoNeoAmountImg } />
+        <p className={ style.accountInfoAmountParagraph }>{neo} NEO</p>
+      </div>
+      <button className={ style.accountInfoRefreshButton } onClick={ getBalance }>
+        <i className='fas fa-sync' />
+      </button>
+      <div className={ style.accountInfoGasAmount }>
+        <i className='fas fa-tint' />
+        <p className={ style.accountInfoAmountParagraph }>{gas > 0 ? gas : 0} GAS</p>
+      </div>
+    </div>
+  )
+}
+
+AccountInfoAmounts.propTypes = {
+  neo: PropTypes.number.isRequired,
+  gas: PropTypes.number.isRequired,
+  getBalance: PropTypes.func.isRequired,
+}
+
+export default AccountInfoAmounts

src/app/components/AccountInfo/AccountInfoDropDownContent/AccountInfoDropDownContent.css

@@ -0,0 +1,27 @@
+.dropDownLinks,
+.dropDownLinksButton {
+  color: #585858;
+  text-decoration: none;
+  border: none;
+  background-color: transparent;
+  text-align: left;
+  padding-left: 0;
+  font-family: Roboto;
+  font-size: 0.9rem;
+  cursor: pointer;
+  width: 100%;
+  display: block;
+  padding: 5px 10px;
+}
+
+.dropDownLinks:hover,
+.dropDownLinksButton:hover {
+  background-color: #ededed;
+}
+
+.dropDownLinks svg,
+.dropDownLinksButton svg {
+  margin-right: 5px;
+  color: #585858;
+  font-size: 1rem;
+}

src/app/components/AccountInfo/AccountInfoDropDownContent/index.js

@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+import style from './AccountInfoDropDownContent.css'
+
+const AccountInfoDropDownContent = ({ onClickHandler, address }) => {
+  return (
+    <Fragment>
+      <Link to='/send' className={ style.dropDownLinks }>
+        <i className='fas fa-paper-plane' />Send
+      </Link>
+
+      <Link to={ `https://neoscan.io/address/${address}` } target='_blank' className={ style.dropDownLinks }>
+        <i className='fas fa-eye' />View on Neoscan
+      </Link>
+      <button className={ style.dropDownLinksButton } onClick={ onClickHandler }>
+        <i className='fas fa-edit' />Edit Name
+      </button>
+    </Fragment>
+  )
+}
+
+AccountInfoDropDownContent.propTypes = {
+  onClickHandler: PropTypes.func.isRequired,
+  address: PropTypes.string.isRequired,
+}
+
+export default AccountInfoDropDownContent

src/app/components/AccountInfo/AccountInfoError/AccountInfoError.css

@@ -0,0 +1,10 @@
+.accountInfoErrorButton {
+  margin: 0 auto;
+  height: 35px;
+  font-size: 0.9rem;
+  box-shadow: none;
+  background: transparent;
+  border: 1px solid #36b148;
+  color: #36b149;
+}
+

src/app/components/AccountInfo/AccountInfoError/index.js

@@ -0,0 +1,22 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import FlashMessage from '../../FlashMessage'
+import PrimaryButton from '../../common/buttons/PrimaryButton'
+
+import style from './AccountInfoError.css'
+
+const AccountInfoError = ({ amountsError, getBalance }) => {
+  return (
+    <Fragment>
+      <FlashMessage flashMessage={ amountsError } />
+      <PrimaryButton buttonText='Retry' classNames={ style.accountInfoErrorButton } onClickHandler={ getBalance } />
+    </Fragment>
+  )
+}
+
+AccountInfoError.propTypes = {
+  amountsError: PropTypes.string.isRequired,
+  getBalance: PropTypes.func.isRequired,
+}
+
+export default AccountInfoError

src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css

@@ -0,0 +1,58 @@
+.accountInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.accountInfoNoOptions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.accountInfoDetails {
+  width: 70%;
+}
+
+.accountInfoImageContainer svg {
+  height: 30px;
+}
+
+.accountInfoDetailsHeading,
+.accountInfoDetailsParagraph {
+  width: 100%;
+  overflow-wrap: break-word;
+  margin: 0;
+  padding: 0 15px;
+}
+
+.accountInfoDetailsHeading {
+  font-size: 1rem;
+  color: #000;
+}
+
+.accountInfoDetailsParagraph {
+  font-size: 0.8rem;
+  margin-top: 5px;
+  color: #585858;
+}
+
+.accountDropDownButton {
+  background: transparent;
+  border: none;
+  width: 100%;
+  cursor: pointer;
+  color: #585858;
+  font-size: 1.1rem;
+}
+
+.accountInfoDropDown {
+  background-color: #f5f5f5;
+  top: 24px;
+  width: 160px;
+  border-radius: 3px;
+  left: -127px;
+  z-index: 999;
+  padding: 5px 0;
+}
+