Merge branch 'develop' into develop

MyCryptoHQ · Dec 4, 2018 · aefaded · aefaded
2 parents 8f1f40f + c213287
commit aefaded
Show file tree

Hide file tree

Showing 42 changed files with 2,956 additions and 472 deletions.
diff --git a/common/components/AwaitingMiningModal/index.scss b/common/components/AwaitingMiningModal/index.scss
@@ -0,0 +1,9 @@
+@import 'common/sass/variables';
+
+.AwaitingMiningModal {
+  &-content {
+    text-align: center;
+    max-width: 40rem;
+    word-break: break-word;
+  }
+}
diff --git a/common/components/AwaitingMiningModal/index.tsx b/common/components/AwaitingMiningModal/index.tsx
@@ -0,0 +1,42 @@
+import React, { ReactElement } from 'react';
+import translate, { translateRaw } from 'translations';
+import Modal from 'components/ui/Modal';
+import './index.scss';
+import { Spinner } from 'components/ui';
+import { ETHTxExplorer } from 'config';
+
+interface Props {
+  isOpen: boolean;
+  message?: ReactElement<any>;
+  transactionHash: string;
+}
+
+export default class AwaitingMiningModal extends React.Component<Props> {
+  public render() {
+    return (
+      <Modal
+        title={translateRaw('AWAITING_MINING')}
+        isOpen={this.props.isOpen}
+        // tslint:disable-next-line:no-empty
+        handleClose={() => {}}
+      >
+        <div className="AwaitingMiningModal-content">
+          <Spinner size="x5" />
+          <br />
+          <br />
+          {translate('SCHEDULE_TRANSACTION_MINING_PART_1')}
+          <a
+            href={ETHTxExplorer(this.props.transactionHash)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {translate('SCHEDULE_TRANSACTION_MINING_PART_2')}
+          </a>
+          <br />
+          <br />
+          {this.props.message}
+        </div>
+      </Modal>
+    );
+  }
+}
diff --git a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/AddCustomTokenForm.tsx b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/AddCustomTokenForm.tsx
@@ -13,6 +13,7 @@ import './AddCustomTokenForm.scss';
 
 interface Props {
   allTokens: Token[];
+  isOffline: boolean;
   onSave(params: Token): void;
   toggleForm(): void;
 }
@@ -50,13 +51,18 @@ export class AddCustomTokenForm extends React.PureComponent<Props, State> {
           addressLookup={this.tokenAddressLookup}
           onChange={this.handleFieldChange('address')}
         />
-        <DecimalField address={address} onChange={this.handleFieldChange('decimal')} />
+        <DecimalField
+          address={address}
+          isOffline={this.props.isOffline}
+          onChange={this.handleFieldChange('decimal')}
+        />
         <SymbolField
           address={address}
           symbolLookup={this.tokenSymbolLookup}
+          isOffline={this.props.isOffline}
           onChange={this.handleFieldChange('symbol')}
         />
-        <BalanceField address={address} />
+        {!this.props.isOffline && <BalanceField address={address} />}
         <HelpLink article={HELP_ARTICLE.ADDING_NEW_TOKENS} className="AddCustom-buttons-help">
           {translate('ADD_CUSTOM_TKN_HELP')}
         </HelpLink>

diff --git a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/DecimalField.tsx b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/DecimalField.tsx
@@ -7,6 +7,7 @@ import { FieldInput } from './FieldInput';
 
 interface OwnProps {
   address?: string;
+  isOffline: boolean;
   onChange(decimals: Result<string>): void;
 }
 
@@ -18,6 +19,7 @@ export class DecimalField extends React.Component<OwnProps> {
         fieldToFetch={'decimals'}
         shouldEnableAutoField={req => !(req.toVal().res === '0')}
         address={this.props.address}
+        isOffline={this.props.isOffline}
         userInputValidator={this.isValidUserInput}
         onChange={this.props.onChange}
       />

diff --git a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/FieldInput.tsx b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/FieldInput.tsx
@@ -10,6 +10,7 @@ interface OwnProps {
   fieldToFetch: keyof Pick<typeof ERC20, 'symbol' | 'decimals'>;
   fieldName: string;
   address?: string;
+  isOffline: boolean;
   userInputValidator(input: string): Result<string>;
   fetchedFieldValidator?(input: any): Result<string>;
   shouldEnableAutoField(input: Result<string>): boolean;
@@ -29,7 +30,11 @@ export class FieldInput extends React.Component<OwnProps, State> {
     nextProps: OwnProps,
     prevState: State
   ): Partial<State> | null {
-    if (nextProps.address && nextProps.address !== prevState.addressToLoad) {
+    if (
+      !nextProps.isOffline &&
+      nextProps.address &&
+      nextProps.address !== prevState.addressToLoad
+    ) {
       return { loading: true, autoField: true, addressToLoad: nextProps.address };
     }
     return null;
@@ -45,7 +50,7 @@ export class FieldInput extends React.Component<OwnProps, State> {
   private currentRequest: Promise<any> | null;
 
   public componentDidUpdate() {
-    if (this.state.addressToLoad && this.state.loading) {
+    if (!this.props.isOffline && this.state.addressToLoad && this.state.loading) {
       this.attemptToLoadField(this.state.addressToLoad);
     }
   }
@@ -70,7 +75,7 @@ export class FieldInput extends React.Component<OwnProps, State> {
             className="input-group-input-small"
             type="text"
             name={this.props.fieldName}
-            readOnly={autoField}
+            readOnly={!this.props.isOffline && autoField}
             value={field.ok() ? field.unwrap() : userInput}
             onChange={this.handleFieldChange}
           />

diff --git a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/SymbolField.tsx b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm/SymbolField.tsx
@@ -8,6 +8,7 @@ import { FieldInput } from './FieldInput';
 interface OwnProps {
   address?: string;
   symbolLookup: IGenerateSymbolLookup;
+  isOffline: boolean;
   onChange(symbol: Result<string>): void;
 }
 
@@ -25,6 +26,7 @@ export class SymbolField extends React.Component<OwnProps> {
             ? Result.from({ res: field })
             : Result.from({ err: 'No Symbol found, please input the token symbol manually' })
         }
+        isOffline={this.props.isOffline}
         onChange={this.props.onChange}
       />
     );

diff --git a/common/components/BalanceSidebar/TokenBalances/Balances.tsx b/common/components/BalanceSidebar/TokenBalances/Balances.tsx
@@ -10,6 +10,7 @@ interface Props {
   allTokens: Token[];
   tokenBalances: walletTypes.TokenBalance[];
   hasSavedWalletTokens: boolean;
+  isOffline: boolean;
   scanWalletForTokens(): any;
   setWalletTokens(tokens: string[]): any;
   onAddCustomToken(token: Token): any;
@@ -41,7 +42,7 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    const { allTokens, tokenBalances, hasSavedWalletTokens } = this.props;
+    const { allTokens, tokenBalances, hasSavedWalletTokens, isOffline } = this.props;
     const { showCustomTokenForm, trackedTokens } = this.state;
 
     let bottom;
@@ -64,6 +65,7 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
         <div className="TokenBalances-form">
           <AddCustomTokenForm
             allTokens={allTokens}
+            isOffline={isOffline}
             onSave={this.addCustomToken}
             toggleForm={this.toggleShowCustomTokenForm}
           />
@@ -78,12 +80,14 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
           >
             <span>{translate('SEND_CUSTOM')}</span>
           </button>
-          <button
-            className="TokenBalances-buttons-btn btn btn-default btn-xs"
-            onClick={this.props.scanWalletForTokens}
-          >
-            <span>{translate('SCAN_TOKENS')}</span>
-          </button>
+          {!isOffline && (
+            <button
+              className="TokenBalances-buttons-btn btn btn-default btn-xs"
+              onClick={this.props.scanWalletForTokens}
+            >
+              <span>{translate('SCAN_TOKENS')}</span>
+            </button>
+          )}
         </div>
       );
     }
@@ -105,13 +109,18 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
                       custom={token.custom}
                       decimal={token.decimal}
                       tracked={trackedTokens[token.symbol]}
+                      isOffline={isOffline}
                       toggleTracked={!hasSavedWalletTokens && this.toggleTrack}
                       onRemove={this.props.onRemoveCustomToken}
                     />
                   ) : null
               )}
             </tbody>
           </table>
+        ) : isOffline ? (
+          <div className="TokenBalances-offline well well-sm text-center">
+            {translate('SCAN_TOKENS_OFFLINE')}
+          </div>
         ) : (
           <div className="well well-sm text-center">{translate('SCAN_TOKENS_FAIL_NO_TOKENS')}</div>
         )}

diff --git a/common/components/BalanceSidebar/TokenBalances/TokenRow.tsx b/common/components/BalanceSidebar/TokenBalances/TokenRow.tsx
@@ -14,6 +14,7 @@ interface Props {
   custom?: boolean;
   decimal: number;
   tracked: boolean;
+  isOffline: boolean;
   toggleTracked: ToggleTrackedFn | false;
   onRemove(symbol: string): void;
 }
@@ -27,7 +28,7 @@ export default class TokenRow extends React.PureComponent<Props, State> {
   };
 
   public render() {
-    const { balance, symbol, custom, decimal, tracked } = this.props;
+    const { balance, symbol, custom, decimal, tracked, isOffline } = this.props;
     const { showLongBalance } = this.state;
 
     return (
@@ -43,20 +44,22 @@ export default class TokenRow extends React.PureComponent<Props, State> {
             />
           </td>
         )}
-        <td
-          className="TokenRow-balance"
-          title={`${balance.toString()} (Double-Click)`}
-          onDoubleClick={this.toggleShowLongBalance}
-        >
-          <span>
-            <UnitDisplay
-              value={balance}
-              decimal={decimal}
-              displayShortBalance={!showLongBalance}
-              checkOffline={true}
-            />
-          </span>
-        </td>
+        {!isOffline && (
+          <td
+            className="TokenRow-balance"
+            title={`${balance.toString()} (Double-Click)`}
+            onDoubleClick={this.toggleShowLongBalance}
+          >
+            <span>
+              <UnitDisplay
+                value={balance}
+                decimal={decimal}
+                displayShortBalance={!showLongBalance}
+                checkOffline={true}
+              />
+            </span>
+          </td>
+        )}
         <td className="TokenRow-symbol">
           {symbol}
           {!!custom && (

diff --git a/common/components/BalanceSidebar/TokenBalances/index.scss b/common/components/BalanceSidebar/TokenBalances/index.scss
@@ -64,9 +64,4 @@
       color: shade-dark(0.7);
     }
   }
-
-  &-offline {
-    margin-bottom: 0;
-    text-align: center;
-  }
 }