Change userEtherBalanceInWei to optional so we can know if its loading

2018-05-31 11:40:21 -07:00
parent bee26daf0c
commit df27f4f118
13 changed files with 26 additions and 22 deletions
--- a/packages/website/ts/blockchain_watcher.ts
+++ b/packages/website/ts/blockchain_watcher.ts
@@ -10,7 +10,7 @@ export class BlockchainWatcher {
    private _prevNetworkId: number;
    private _shouldPollUserAddress: boolean;
    private _watchNetworkAndBalanceIntervalId: NodeJS.Timer;
-    private _prevUserEtherBalanceInWei: BigNumber;
+    private _prevUserEtherBalanceInWei?: BigNumber;
    private _prevUserAddressIfExists: string;
    constructor(
        dispatcher: Dispatcher,
@@ -41,7 +41,7 @@ export class BlockchainWatcher {
        }

        let prevNodeVersion: string;
-        this._prevUserEtherBalanceInWei = new BigNumber(0);
+        this._prevUserEtherBalanceInWei = undefined;
        this._dispatcher.updateNetworkId(this._prevNetworkId);
        this._watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(
            async () => {
@@ -94,7 +94,7 @@ export class BlockchainWatcher {
    }
    private async _updateUserWeiBalanceAsync(userAddress: string): Promise<void> {
        const balanceInWei = await this._web3Wrapper.getBalanceInWeiAsync(userAddress);
-        if (!balanceInWei.eq(this._prevUserEtherBalanceInWei)) {
+        if (_.isUndefined(this._prevUserEtherBalanceInWei) || !balanceInWei.eq(this._prevUserEtherBalanceInWei)) {
            this._prevUserEtherBalanceInWei = balanceInWei;
            this._dispatcher.updateUserWeiBalance(balanceInWei);
        }
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -18,7 +18,7 @@ interface EthWethConversionButtonProps {
    ethToken: Token;
    dispatcher: Dispatcher;
    blockchain: Blockchain;
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    isOutdatedWrappedEther: boolean;
    onConversionSuccessful?: () => void;
    isDisabled?: boolean;
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -33,7 +33,7 @@ interface EthWrappersProps {
    dispatcher: Dispatcher;
    tokenByAddress: TokenByAddress;
    userAddress: string;
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    lastForceTokenStateRefetch: number;
 }

--- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
@@ -55,7 +55,7 @@ export interface LegacyPortalProps {
    providerType: ProviderType;
    screenWidth: ScreenWidths;
    tokenByAddress: TokenByAddress;
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    userAddress: string;
    shouldBlockchainErrDialogBeOpen: boolean;
    userSuppliedOrderCache: Order;
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -14,7 +14,7 @@ export interface PortalOnboardingFlowProps {
    providerType: ProviderType;
    injectedProviderName: string;
    blockchainIsLoaded: boolean;
-    userEthBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    tokenByAddress: TokenByAddress;
    updateIsRunning: (isRunning: boolean) => void;
    updateOnboardingStep: (stepIndex: number) => void;
@@ -85,7 +85,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
    }

    private _userHasEth(): boolean {
-        return this.props.userEthBalanceInWei > new BigNumber(0);
+        return this.props.userEtherBalanceInWei > new BigNumber(0);
    }

    private _userHasWeth(): boolean {
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -57,7 +57,7 @@ export interface PortalProps {
    providerType: ProviderType;
    screenWidth: ScreenWidths;
    tokenByAddress: TokenByAddress;
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    userAddress: string;
    shouldBlockchainErrDialogBeOpen: boolean;
    userSuppliedOrderCache: Order;
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -85,6 +85,9 @@ interface TokenBalancesState {
 }

 export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> {
+    public static defaultProps: Partial<TokenBalancesProps> = {
+        userEtherBalanceInWei: new BigNumber(0),
+    };
    private _isUnmounted: boolean;
    public constructor(props: TokenBalancesProps) {
        super(props);
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -61,7 +61,7 @@ export interface WalletProps {
    dispatcher: Dispatcher;
    tokenByAddress: TokenByAddress;
    trackedTokens: Token[];
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    lastForceTokenStateRefetch: number;
    injectedProviderName: string;
    providerType: ProviderType;
@@ -335,16 +335,16 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
    private _renderEthRows(): React.ReactNode {
        const icon = <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />;
        const primaryText = this._renderAmount(
-            true,
-            this.props.userEtherBalanceInWei,
+            !_.isUndefined(this.props.userEtherBalanceInWei),
+            this.props.userEtherBalanceInWei || new BigNumber(0),
            constants.DECIMAL_PLACES_ETH,
            constants.ETHER_SYMBOL,
        );
        const etherToken = this._getEthToken();
        const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price;
        const secondaryText = this._renderValue(
-            true,
-            this.props.userEtherBalanceInWei,
+            !_.isUndefined(this.props.userEtherBalanceInWei) && !_.isUndefined(etherPrice),
+            this.props.userEtherBalanceInWei || new BigNumber(0),
            constants.DECIMAL_PLACES_ETH,
            etherPrice,
        );
@@ -407,7 +407,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
    ): React.ReactNode {
        const shouldShowWrapEtherItem =
            !_.isUndefined(this.state.wrappedEtherDirection) &&
-            this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection;
+            this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
+            !_.isUndefined(this.props.userEtherBalanceInWei);
        const additionalStyle = shouldShowWrapEtherItem ? walletItemStyles.focusedItem : styles.borderedItem;
        const style = { ...styles.tokenItem, ...additionalStyle };
        const etherToken = this._getEthToken();
--- a/packages/website/ts/containers/legacy_portal.ts
+++ b/packages/website/ts/containers/legacy_portal.ts
@@ -24,7 +24,7 @@ interface ConnectedState {
    providerType: ProviderType;
    tokenByAddress: TokenByAddress;
    lastForceTokenStateRefetch: number;
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    screenWidth: ScreenWidths;
    shouldBlockchainErrDialogBeOpen: boolean;
    userAddress: string;
--- a/packages/website/ts/containers/portal.ts
+++ b/packages/website/ts/containers/portal.ts
@@ -21,7 +21,7 @@ interface ConnectedState {
    providerType: ProviderType;
    tokenByAddress: TokenByAddress;
    lastForceTokenStateRefetch: number;
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    screenWidth: ScreenWidths;
    shouldBlockchainErrDialogBeOpen: boolean;
    userAddress: string;
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -17,7 +17,7 @@ interface ConnectedState {
    providerType: ProviderType;
    injectedProviderName: string;
    blockchainIsLoaded: boolean;
-    userEthBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    tokenByAddress: TokenByAddress;
 }

@@ -33,7 +33,7 @@ const mapStateToProps = (state: State): ConnectedState => ({
    providerType: state.providerType,
    injectedProviderName: state.injectedProviderName,
    blockchainIsLoaded: state.blockchainIsLoaded,
-    userEthBalanceInWei: state.userEtherBalanceInWei,
+    userEtherBalanceInWei: state.userEtherBalanceInWei,
    tokenByAddress: state.tokenByAddress,
    hasBeenSeen: state.hasPortalOnboardingBeenSeen,
 });
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -155,7 +155,7 @@ export class Dispatcher {
            type: ActionTypes.UpdateOrderECSignature,
        });
    }
-    public updateUserWeiBalance(balance: BigNumber): void {
+    public updateUserWeiBalance(balance?: BigNumber): void {
        this._dispatch({
            data: balance,
            type: ActionTypes.UpdateUserEtherBalance,
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -39,7 +39,7 @@ export interface State {
    tokenByAddress: TokenByAddress;
    lastForceTokenStateRefetch: number;
    userAddress: string;
-    userEtherBalanceInWei: BigNumber;
+    userEtherBalanceInWei?: BigNumber;
    portalOnboardingStep: number;
    isPortalOnboardingShowing: boolean;
    hasPortalOnboardingBeenSeen: boolean;
@@ -81,7 +81,7 @@ export const INITIAL_STATE: State = {
    tokenByAddress: {},
    lastForceTokenStateRefetch: moment().unix(),
    userAddress: '',
-    userEtherBalanceInWei: new BigNumber(0),
+    userEtherBalanceInWei: undefined,
    userSuppliedOrderCache: undefined,
    portalOnboardingStep: 0,
    isPortalOnboardingShowing: false,