feature(component): Show account balance and feedback when wallet balance is too low to create transaction

package.json

@@ -39,6 +39,7 @@
     "react-spinners": "^0.5.4",
     "react-tabs": "^2.2.1",
     "react-test-renderer": "^16.8.6",
+    "react-toastify": "^5.3.1",
     "redux": "^3.6.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-saga": "^0.16.0",

pages/deploy.js

@@ -5,12 +5,6 @@ import "@babel/polyfill";
 import { connect } from "react-redux";
 import AdminContainer from "../src/components/AdminContainer";
 
-const AdminPage = props => (
-  <div className="min-vh-100 pv5">
-    <div className="mw9 mw8-ns center pa4 ph5-ns br3 pv5">
-      <AdminContainer {...props} />
-    </div>
-  </div>
-);
+const AdminPage = props => <AdminContainer {...props} />;
 
 export default connect()(AdminPage);

src/components/AdminContainer.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { ToastContainer } from "react-toastify";
 /** @jsx jsx */
 import { Global, css, jsx } from "@emotion/core";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
@@ -14,6 +15,7 @@ import { isValidAddress } from "./utils";
 import {
   loadAdminAddress,
   getAdminAddress,
+  getAccountBalance,
   deployStore,
   getStoreAddress,
   updateStoreAddress,
@@ -98,7 +100,6 @@ class AdminContainer extends Component {
   // eslint-disable-next-line camelcase
   UNSAFE_componentWillMount() {
     this.props.updateNetworkId();
-    this.props.loadAdminAddress();
   }
 
   // eslint-disable-next-line camelcase
@@ -135,6 +136,7 @@ class AdminContainer extends Component {
   render() {
     const {
       adminAddress,
+      accountBalance,
       storeAddress,
       issuingCertificate,
       issuedTx,
@@ -148,20 +150,19 @@ class AdminContainer extends Component {
     return (
       <React.Fragment>
         {adminAddress ? (
-          <Panel>
-            {baseStyle}
-            <div className="flex">
-              <div className="w-50">
-                <h1 className="mt0">Admin</h1>
-              </div>
-              <div className="w-50">
-                <NetworkSelectorContainer />
-              </div>
-            </div>
-            <div className="flex bb pb3">
-              <div className="w-50">
-                <h3>
-                  Current account{" "}
+          <React.Fragment>
+            <nav className="dt pa3 w-100 border-box pa3 ph5-ns bg-white shadow-1-ns flex-l flex-row-l">
+              <a className="w-100 w-20-l" href="/" title="Home">
+                <img
+                  src={"../../static/images/logo.svg"}
+                  className="dtc v-mid mid-gray link dim pa3"
+                  style={{ width: "200px" }}
+                  alt="OpenCerts"
+                />
+              </a>
+              <div className="w-100 w-40-l">
+                <h3 className="ma0">
+                  Current Account{" "}
                   <div
                     style={{ cursor: "pointer" }}
                     className="dib click-to-refresh"
@@ -180,71 +181,105 @@ class AdminContainer extends Component {
                   )}
                 </div>
               </div>
-              <div className="w-50">
-                <h3>Store address</h3>
-                <HashColorInput
-                  variant="rounded"
-                  type="address"
-                  value={this.state.localStoreAddress}
-                  onChange={this.storeAddressOnChange}
-                  placeholder="Enter existing (0x…), or deploy new instance"
-                />
+              <div className="w-100 w-20-l">
+                <h3 className="ma0">Account Balance</h3>
+                <div className="pa2">
+                  {accountBalance ? (
+                    <div>{accountBalance} ETH</div>
+                  ) : (
+                    <div className="red">Unable to load account balance.</div>
+                  )}
+                </div>
+              </div>
+              <div className="w-100 w-20-l">
+                <h3 className="ma0">Wallet Provider</h3>
+                <NetworkSelectorContainer />
+              </div>
+            </nav>
+            <ToastContainer autoClose={2000} />
+            <Panel style={{ maxWidth: "900px" }}>
+              {baseStyle}
+              <div className="flex">
+                <div className="w-100 w-50-ns">
+                  <h1 className="mt0">Admin</h1>
+                </div>
               </div>
-            </div>
-            <Tabs className="flex flex-row w-100">
-              <TabList className="flex flex-column w-30 list pa0">
-                <Tab className="tab pl3">
-                  <h3>Deploy new instance</h3>
-                </Tab>
-                <Tab className="tab pl3">
-                  <h3>Issue certificate batch</h3>
-                </Tab>
-                <Tab className="tab pl3">
-                  <h3>Revoke certificate</h3>
-                </Tab>
-              </TabList>
-              <div className="w-70 pa4 pl5">
-                <TabPanel>
-                  <StoreDeployBlock
-                    adminAddress={adminAddress}
-                    storeAddress={storeAddress}
-                    handleStoreDeploy={this.handleStoreDeploy}
-                    deploying={deploying}
-                    networkId={networkId}
-                    deployedTx={deployedTx}
+              <div className="flex bb pb3">
+                <div className="w-100  w-50-l">
+                  <h3>Store address</h3>
+                  <HashColorInput
+                    variant="rounded"
+                    type="address"
+                    value={this.state.localStoreAddress}
+                    onChange={this.storeAddressOnChange}
+                    placeholder="Enter existing (0x…), or deploy new instance"
                   />
-                </TabPanel>
-                <TabPanel>
-                  {storeAddress ? (
-                    <StoreIssueBlock
-                      networkId={networkId}
-                      issuedTx={issuedTx}
+                </div>
+              </div>
+              <Tabs className="flex flex-row w-100">
+                <TabList className="flex flex-column w-30 list pa0">
+                  <Tab
+                    className="tab pl3"
+                    style={{ borderTopLeftRadius: "5px" }}
+                  >
+                    <h3>Deploy new instance</h3>
+                  </Tab>
+                  <Tab className="tab pl3">
+                    <h3>Issue certificate batch</h3>
+                  </Tab>
+                  <Tab
+                    className="tab pl3"
+                    style={{ borderBottomLeftRadius: "5px" }}
+                  >
+                    <h3>Revoke certificate</h3>
+                  </Tab>
+                </TabList>
+                <div className="w-70 pa4 pl5">
+                  <TabPanel>
+                    <StoreDeployBlock
                       adminAddress={adminAddress}
                       storeAddress={storeAddress}
-                      handleCertificateIssue={this.handleCertificateIssue}
-                      issuingCertificate={issuingCertificate}
-                    />
-                  ) : (
-                    <div className="red">Enter a store address first.</div>
-                  )}
-                </TabPanel>
-                <TabPanel>
-                  {storeAddress ? (
-                    <StoreRevokeBlock
+                      accountBalance={accountBalance}
+                      handleStoreDeploy={this.handleStoreDeploy}
+                      deploying={deploying}
                       networkId={networkId}
-                      revokingCertificate={revokingCertificate}
-                      revokedTx={revokedTx}
-                      adminAddress={adminAddress}
-                      storeAddress={storeAddress}
-                      handleCertificateRevoke={this.handleCertificateRevoke}
+                      deployedTx={deployedTx}
                     />
-                  ) : (
-                    <div className="red">Enter a store address first.</div>
-                  )}
-                </TabPanel>
-              </div>
-            </Tabs>
-          </Panel>
+                  </TabPanel>
+                  <TabPanel>
+                    {storeAddress ? (
+                      <StoreIssueBlock
+                        networkId={networkId}
+                        issuedTx={issuedTx}
+                        adminAddress={adminAddress}
+                        storeAddress={storeAddress}
+                        accountBalance={accountBalance}
+                        handleCertificateIssue={this.handleCertificateIssue}
+                        issuingCertificate={issuingCertificate}
+                      />
+                    ) : (
+                      <div className="red">Enter a store address first.</div>
+                    )}
+                  </TabPanel>
+                  <TabPanel>
+                    {storeAddress ? (
+                      <StoreRevokeBlock
+                        networkId={networkId}
+                        revokingCertificate={revokingCertificate}
+                        revokedTx={revokedTx}
+                        adminAddress={adminAddress}
+                        storeAddress={storeAddress}
+                        accountBalance={accountBalance}
+                        handleCertificateRevoke={this.handleCertificateRevoke}
+                      />
+                    ) : (
+                      <div className="red">Enter a store address first.</div>
+                    )}
+                  </TabPanel>
+                </div>
+              </Tabs>
+            </Panel>
+          </React.Fragment>
         ) : (
           <ErrorPage />
         )}
@@ -256,6 +291,7 @@ class AdminContainer extends Component {
 const mapStateToProps = store => ({
   isLoading: getIsLoading(store),
   adminAddress: getAdminAddress(store),
+  accountBalance: getAccountBalance(store),
   storeAddress: getStoreAddress(store),
   issuedTx: getIssuedTx(store),
   revokingCertificate: getrevokingCertificate(store),
@@ -290,6 +326,7 @@ AdminContainer.propTypes = {
   issueCertificate: PropTypes.func,
   updateStoreAddress: PropTypes.func,
   adminAddress: PropTypes.string,
+  accountBalance: PropTypes.string,
   storeAddress: PropTypes.string,
   setIsNotLoading: PropTypes.func,
   issuingCertificate: PropTypes.bool,

src/components/Meta.js

@@ -1,4 +1,5 @@
 import Head from "next/head";
+
 /** @jsx jsx */
 import { Global, css, jsx } from "@emotion/core";
 import { faintBlue } from "../styles/variables";
@@ -22,6 +23,17 @@ const Meta = () => (
         rel="stylesheet"
         type="text/css"
       />
+      <link
+        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
+        rel="stylesheet"
+        type="text/css"
+      />
+      <link
+        href="
+        https://cdn.jsdelivr.net/npm/[email protected]/dist/ReactToastify.min.css"
+        rel="stylesheet"
+        type="text/css"
+      />
     </Head>
     <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" />
     <link

src/components/NetworkSelectorContainer.js

@@ -10,6 +10,7 @@ import { white } from "./../styles/variables";
 const divBase = css`
   border-radius: 50px;
   padding: 0.2em 0.5em;
+  width: 13em;
 `;
 
 const selectorBase = css`
@@ -35,13 +36,13 @@ class AdminContainer extends Component {
 
   render() {
     const { INJECTED, LEDGER_MAIN, LEDGER_ROPSTEN } = NETWORK_TYPES;
-
+    const { network, style } = this.props;
     return (
-      <div className="fr ba" css={css(divBase)}>
+      <div className="ba" style={style} css={css(divBase)}>
         <select
           css={css(selectorBase)}
           className="pa2 provider-selector"
-          value={this.props.network}
+          value={network}
           onChange={this.handleNetworkChange}
         >
           <option value={INJECTED}>Metamask</option>
@@ -68,6 +69,7 @@ export default connect(
 )(AdminContainer);
 
 AdminContainer.propTypes = {
+  style: PropTypes.object,
   network: PropTypes.string,
   customRpc: PropTypes.string,
   updateWeb3: PropTypes.func