From 7ebebb5bd9e0b60aab8dfac22bc1663d3fc13285 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 9 Mar 2018 19:02:07 +0100 Subject: Create blockchainWatcher class and refactor Portal such that Ether amounts are always passed around as baseUnits --- .../components/dialogs/eth_weth_conversion_dialog.tsx | 7 +++++-- .../ts/components/dialogs/ledger_config_dialog.tsx | 12 +++++++----- .../ts/components/eth_weth_conversion_button.tsx | 4 ++-- packages/website/ts/components/eth_wrappers.tsx | 16 +++++++++------- packages/website/ts/components/portal.tsx | 6 +++--- packages/website/ts/components/token_balances.tsx | 17 ++++++++++++----- 6 files changed, 38 insertions(+), 24 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index 5c61f0d57..72ebe1f67 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,3 +1,4 @@ +import { ZeroEx } from '0x.js'; import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import Dialog from 'material-ui/Dialog'; @@ -7,6 +8,7 @@ import { Blockchain } from 'ts/blockchain'; import { EthAmountInput } from 'ts/components/inputs/eth_amount_input'; import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Side, Token } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface EthWethConversionDialogProps { blockchain: Blockchain; @@ -17,7 +19,7 @@ interface EthWethConversionDialogProps { onCancelled: () => void; isOpen: boolean; token: Token; - etherBalance: BigNumber; + etherBalanceInWei: BigNumber; lastForceTokenStateRefetch: number; } @@ -75,6 +77,7 @@ export class EthWethConversionDialog extends React.Component< ? 'Convert your Ether into a tokenized, tradable form.' : "Convert your Wrapped Ether back into it's native form."; const isWrappedVersion = this.props.direction === Side.Receive; + const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH); return (
{explanation}
@@ -103,7 +106,7 @@ export class EthWethConversionDialog extends React.Component< /> ) : ( { - const balance = this.state.addressBalances[i]; + const balanceInWei = this.state.addressBalances[i]; const addressTooltipId = `address-${userAddress}`; const balanceTooltipId = `balance-${userAddress}`; const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; // We specifically prefix kovan ETH. // TODO: We should probably add prefixes for all networks const isKovanNetwork = networkName === 'Kovan'; - const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`; + const balanceInEth = ZeroEx.toUnitAmount(balanceInWei, constants.DECIMAL_PLACES_ETH); + const balanceString = `${balanceInEth.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`; return ( @@ -204,7 +206,7 @@ export class LedgerConfigDialog extends React.Component void; isDisabled?: boolean; @@ -74,7 +74,7 @@ export class EthWethConversionButton extends React.Component< isOpen={this.state.isEthConversionDialogVisible} onComplete={this._onConversionAmountSelectedAsync.bind(this)} onCancelled={this._toggleConversionDialog.bind(this)} - etherBalance={this.props.userEtherBalance} + etherBalanceInWei={this.props.userEtherBalanceInWei} token={this.props.ethToken} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} /> diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 7ac5d5c9c..8aac31917 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -34,7 +34,7 @@ interface EthWrappersProps { dispatcher: Dispatcher; tokenByAddress: TokenByAddress; userAddress: string; - userEtherBalance: BigNumber; + userEtherBalanceInWei: BigNumber; lastForceTokenStateRefetch: number; } @@ -98,6 +98,10 @@ export class EthWrappers extends React.Component
@@ -143,9 +147,7 @@ export class EthWrappers extends React.Component
- - {this.props.userEtherBalance.toFixed(PRECISION)} ETH - + {userEtherBalanceInEth.toFixed(PRECISION)} ETH @@ -184,7 +186,7 @@ export class EthWrappers extends React.Component @@ -304,7 +306,7 @@ export class EthWrappers extends React.Component diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index d71e821c6..ad437acdb 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -46,7 +46,7 @@ export interface PortalAllProps { providerType: ProviderType; screenWidth: ScreenWidths; tokenByAddress: TokenByAddress; - userEtherBalance: BigNumber; + userEtherBalanceInWei: BigNumber; userAddress: string; shouldBlockchainErrDialogBeOpen: boolean; userSuppliedOrderCache: Order; @@ -279,7 +279,7 @@ export class Portal extends React.Component { dispatcher={this.props.dispatcher} tokenByAddress={this.props.tokenByAddress} userAddress={this.props.userAddress} - userEtherBalance={this.props.userEtherBalance} + userEtherBalanceInWei={this.props.userEtherBalanceInWei} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} /> ); @@ -306,7 +306,7 @@ export class Portal extends React.Component { tokenByAddress={this.props.tokenByAddress} trackedTokens={trackedTokens} userAddress={this.props.userAddress} - userEtherBalance={this.props.userEtherBalance} + userEtherBalanceInWei={this.props.userEtherBalanceInWei} networkId={this.props.networkId} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} /> diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 7e7596fd7..3c285803b 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -79,7 +79,7 @@ interface TokenBalancesProps { tokenByAddress: TokenByAddress; trackedTokens: Token[]; userAddress: string; - userEtherBalance: BigNumber; + userEtherBalanceInWei: BigNumber; networkId: number; lastForceTokenStateRefetch: number; } @@ -119,11 +119,14 @@ export class TokenBalances extends React.Component \ Toggling sets an allowance for the
\ smart contract so you can start trading that token.'; + const userEtherBalanceInEth = ZeroEx.toUnitAmount( + this.props.userEtherBalanceInWei, + constants.DECIMAL_PLACES_ETH, + ); return (

{isTestNetwork ? 'Test ether' : 'Ether'}

@@ -241,7 +248,7 @@ export class TokenBalances extends React.Component - {this.props.userEtherBalance.toFixed(PRECISION)} ETH + {userEtherBalanceInEth.toFixed(PRECISION)} ETH {this.state.isBalanceSpinnerVisible && ( -- cgit v1.2.3