Merge pull request #828 from 0xProject/feature/website/portal-improvements

Fix some portal bugs, and poll for best gas price

packages/website/ts/blockchain.ts

@@ -92,6 +92,7 @@ export class Blockchain {
     private _userAddressIfExists: string;
     private _ledgerSubprovider: LedgerSubprovider;
     private _defaultGasPrice: BigNumber;
+    private _watchGasPriceIntervalId: NodeJS.Timer;
     private static _getNameGivenProvider(provider: Provider): string {
         const providerType = utils.getProviderType(provider);
         const providerNameIfExists = providerToName[providerType];
@@ -199,13 +200,11 @@ export class Blockchain {
     }
     constructor(dispatcher: Dispatcher) {
         this._dispatcher = dispatcher;
-        const defaultGasPrice = GWEI_IN_WEI * 30;
+        const defaultGasPrice = GWEI_IN_WEI * 40;
         this._defaultGasPrice = new BigNumber(defaultGasPrice);
         // We need a unique reference to this function so we can use it to unsubcribe.
         this._injectedProviderUpdateHandler = this._handleInjectedProviderUpdateAsync.bind(this);
         // tslint:disable-next-line:no-floating-promises
-        this._updateDefaultGasPriceAsync();
-        // tslint:disable-next-line:no-floating-promises
         this._onPageLoadInitFireAndForgetAsync();
     }
     public async networkIdUpdatedFireAndForgetAsync(newNetworkId: number): Promise<void> {
@@ -540,6 +539,7 @@ export class Blockchain {
         this._blockchainWatcher.destroy();
         this._injectedProviderObservable.unsubscribe(this._injectedProviderUpdateHandler);
         this._stopWatchingExchangeLogFillEvents();
+        this._stopWatchingGasPrice();
     }
     public async fetchTokenInformationAsync(): Promise<void> {
         utils.assert(
@@ -803,8 +803,30 @@ export class Blockchain {
         this._updateProviderName(injectedWeb3IfExists);
         const shouldPollUserAddress = true;
         const shouldUseLedgerProvider = false;
+        this._startWatchingGasPrice();
         await this._resetOrInitializeAsync(this.networkId, shouldPollUserAddress, shouldUseLedgerProvider);
     }
+    private _startWatchingGasPrice(): void {
+        if (!_.isUndefined(this._watchGasPriceIntervalId)) {
+            return; // we are already watching
+        }
+        const oneMinuteInMs = 60000;
+        // tslint:disable-next-line:no-floating-promises
+        this._updateDefaultGasPriceAsync();
+        this._watchGasPriceIntervalId = intervalUtils.setAsyncExcludingInterval(
+            this._updateDefaultGasPriceAsync.bind(this),
+            oneMinuteInMs,
+            (err: Error) => {
+                logUtils.log(`Watching gas price failed: ${err.stack}`);
+                this._stopWatchingGasPrice();
+            },
+        );
+    }
+    private _stopWatchingGasPrice(): void {
+        if (!_.isUndefined(this._watchGasPriceIntervalId)) {
+            intervalUtils.clearAsyncExcludingInterval(this._watchGasPriceIntervalId);
+        }
+    }
     private async _resetOrInitializeAsync(
         networkId: number,
         shouldPollUserAddress: boolean = false,
@@ -900,7 +922,7 @@ export class Blockchain {
     private async _updateDefaultGasPriceAsync(): Promise<void> {
         try {
             const gasInfo = await backendClient.getGasInfoAsync();
-            const gasPriceInGwei = new BigNumber(gasInfo.average / 10);
+            const gasPriceInGwei = new BigNumber(gasInfo.fast / 10);
             const gasPriceInWei = gasPriceInGwei.mul(1000000000);
             this._defaultGasPrice = gasPriceInWei;
         } catch (err) {

packages/website/ts/components/dialogs/ledger_config_dialog.tsx

@@ -29,7 +29,7 @@ interface LedgerConfigDialogProps {
     toggleDialogFn: (isOpen: boolean) => void;
     dispatcher: Dispatcher;
     blockchain: Blockchain;
-    networkId: number;
+    networkId?: number;
     providerType: ProviderType;
 }
 
@@ -44,6 +44,9 @@ interface LedgerConfigDialogState {
 }
 
 export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, LedgerConfigDialogState> {
+    public static defaultProps = {
+        networkId: 1,
+    };
     constructor(props: LedgerConfigDialogProps) {
         super(props);
         const derivationPathIfExists = props.blockchain.getLedgerDerivationPathIfExists();

packages/website/ts/components/onboarding/onboarding_flow.tsx

@@ -44,12 +44,14 @@ export interface OnboardingFlowProps {
     updateOnboardingStep: (stepIndex: number) => void;
     disableOverlay?: boolean;
     isMobile: boolean;
+    disableCloseOnClickOutside?: boolean;
 }
 
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
     public static defaultProps = {
         disableOverlay: false,
         isMobile: false,
+        disableCloseOnClickOutside: false,
     };
     public render(): React.ReactNode {
         if (!this.props.isRunning) {
@@ -86,7 +88,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         }
         return (
             <div>
-                <Overlay onClick={this.props.onClose} />
+                <Overlay onClick={this.props.disableCloseOnClickOutside ? undefined : this.props.onClose} />
                 {onboardingElement}
             </div>
         );

packages/website/ts/components/onboarding/portal_onboarding_flow.tsx

@@ -23,7 +23,7 @@ import {
     WrapEthOnboardingStep3,
 } from 'ts/components/onboarding/wrap_eth_onboarding_step';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
-import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { BrowserType, ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { utils } from 'ts/utils/utils';
 
@@ -68,6 +68,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         }
     }
     public render(): React.ReactNode {
+        const browserType = utils.getBrowserType();
         return (
             <OnboardingFlow
                 steps={this._getSteps()}
@@ -77,6 +78,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 updateOnboardingStep={this._updateOnboardingStep.bind(this)}
                 disableOverlay={this.props.screenWidth === ScreenWidths.Sm}
                 isMobile={this.props.screenWidth === ScreenWidths.Sm}
+                // This is necessary to ensure onboarding stays open once the user unlocks metamask and clicks away
+                disableCloseOnClickOutside={browserType === BrowserType.Firefox || browserType === BrowserType.Opera}
             />
         );
     }

packages/website/ts/components/wallet/wallet.tsx

@@ -270,7 +270,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden',
             marginRight: this.state.isHoveringSidebar ? 0 : 4,
             // TODO: make this completely responsive
-            maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined,
+            maxHeight: !utils.isMobileWidth(this.props.screenWidth) ? 'calc(90vh - 300px)' : undefined,
         };
     }
     private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {

packages/website/ts/types.ts

@@ -552,7 +552,10 @@ export interface WebsiteBackendTokenInfo {
 }
 
 export interface WebsiteBackendGasInfo {
+    safeSlow: number;
     average: number;
+    fast: number;
+    fastest: number;
 }
 
 export interface WebsiteBackendJobInfo {