Add nonce refresh button & loading indicator

common/components/NonceField.scss

@@ -0,0 +1,27 @@
+.nonce {
+  &-input-wrapper {
+    position: relative;
+  }
+  &-refresh {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0 1rem;
+    height: 2.55rem;
+    opacity: 0.3;
+    transition: opacity 300ms;
+    > img {
+      height: 1.4rem;
+    }
+    &:hover {
+      opacity: 0.54;
+    }
+    &:active {
+      transition: opacity 120ms;
+      opacity: 1;
+    }
+  }
+}

common/components/NonceField.tsx

@@ -1,38 +1,72 @@
 import React from 'react';
 import { NonceFieldFactory } from 'components/NonceFieldFactory';
 import Help from 'components/ui/Help';
+import RefreshIcon from 'assets/images/refresh.svg';
+import './NonceField.scss';
+import { InlineSpinner } from 'components/ui/InlineSpinner';
+import { connect } from 'react-redux';
+import { getNonceRequested } from 'actions/transaction';
+import { nonceRequestPending } from 'selectors/transaction';
+import { AppState } from 'reducers';
 
-interface Props {
+interface OwnProps {
   alwaysDisplay: boolean;
 }
 
-const nonceHelp = (
+interface StateProps {
-  <Help
+  nonePending: any;
-    size={'x1'}
+}
-    link={'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'}
-  />
-);
 
-export const NonceField: React.SFC<Props> = ({ alwaysDisplay }) => (
+interface DispatchProps {
-  <NonceFieldFactory
+  requestNonce: any;
-    withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
+}
-      const content = (
-        <div>
-          <label>Nonce</label>
-          {nonceHelp}
 
-          <input
+type Props = OwnProps & DispatchProps & StateProps;
-            className={`form-control ${!!value ? 'is-valid' : 'is-invalid'}`}
-            type="number"
-            placeholder="e.g. 7"
-            value={raw}
-            readOnly={readOnly}
-            onChange={onChange}
-          />
-        </div>
-      );
 
-      return alwaysDisplay || shouldDisplay ? content : null;
+class NonceField extends React.Component<Props> {
-    }}
+  public render() {
-  />
+    const { alwaysDisplay, requestNonce, nonePending } = this.props;
-);
+    return (
+      <NonceFieldFactory
+        withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
+          return alwaysDisplay || shouldDisplay ? (
+            <React.Fragment>
+              <div className="flex-wrapper">
+                <label className="nonce-label">Nonce</label>
+                <Help
+                  size={'x1'}
+                  link={
+                    'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'
+                  }
+                />
+                <div className="flex-spacer" />
+                <InlineSpinner active={nonePending} text="Calculating" />
+              </div>
+              <div className="nonce-input-wrapper">
+                <input
+                  className={`form-control nonce-input ${!!value ? 'is-valid' : 'is-invalid'}`}
+                  type="number"
+                  placeholder="e.g. 7"
+                  value={raw}
+                  readOnly={readOnly}
+                  onChange={onChange}
+                />
+                <button className="nonce-refresh" onClick={requestNonce}>
+                  <img src={RefreshIcon} alt="refresh" />
+                </button>
+              </div>
+            </React.Fragment>
+          ) : null;
+        }}
+      />
+    );
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    nonePending: nonceRequestPending(state)
+  };
+};
+
+export default connect(mapStateToProps, { requestNonce: getNonceRequested })(NonceField);

common/components/index.ts

@@ -1,7 +1,6 @@
 export * from './AddressField';
 export * from './DataField';
 export * from './GasLimitField';
-export * from './NonceField';
 export * from './AmountField';
 export * from './SendEverything';
 export * from './UnitDropDown';
@@ -9,6 +8,7 @@ export * from './CurrentCustomMessage';
 export * from './GenerateTransaction';
 export * from './SendButton';
 export * from './SigningStatus';
+export { default as NonceField } from './NonceField';
 export { default as Header } from './Header';
 export { default as Footer } from './Footer';
 export { default as BalanceSidebar } from './BalanceSidebar';