crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create blockchainWatcher class and refactor Portal such that Ether amounts are always passed around as baseUnits

Browse Source
This commit is contained in:
Fabio Berger
2018-03-09 19:02:07 +01:00
parent 8f921a61da
commit 7ebebb5bd9
11 changed files with 114 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/website/ts/blockchain.ts
View File

@@ -24,9 +24,11 @@ import {
RedundantRPCSubprovider,
} from '@0xproject/subproviders';
import { BigNumber, intervalUtils, promisify } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
import contract = require('truffle-contract');
import { BlockchainWatcher } from 'ts/blockchain_watcher';
import { TokenSendCompleted } from 'ts/components/flash_messages/token_send_completed';
import { TransactionSubmitted } from 'ts/components/flash_messages/transaction_submitted';
import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
@@ -47,7 +49,6 @@ import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
import { Web3Wrapper } from 'ts/web3_wrapper';
import Web3 = require('web3');
import ProviderEngine = require('web3-provider-engine');
import FilterSubprovider = require('web3-provider-engine/subproviders/filters');
@@ -63,6 +64,7 @@ export class Blockchain {
private _zeroEx: ZeroEx;
private _dispatcher: Dispatcher;
private _web3Wrapper?: Web3Wrapper;
private _blockchainWatcher?: BlockchainWatcher;
private _userAddress: string;
private _cachedProvider: Web3.Provider;
private _cachedProviderNetworkId: number;
@@ -188,11 +190,11 @@ export class Blockchain {
// Cache injected provider so that we can switch the user back to it easily
if (_.isUndefined(this._cachedProvider)) {
this._cachedProvider = this._web3Wrapper.getProviderObj();
this._cachedProvider = this._web3Wrapper.getProvider();
this._cachedProviderNetworkId = this.networkId;
}
this._web3Wrapper.destroy();
this._blockchainWatcher.destroy();
this._userAddress = '';
this._dispatcher.updateUserAddress(''); // Clear old userAddress
@@ -210,9 +212,15 @@ export class Blockchain {
this.networkId = networkId;
this._dispatcher.updateNetworkId(this.networkId);
const shouldPollUserAddress = false;
this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
this._web3Wrapper = new Web3Wrapper(provider);
this._blockchainWatcher = new BlockchainWatcher(
this._dispatcher,
this._web3Wrapper,
this.networkId,
shouldPollUserAddress,
);
this._zeroEx.setProvider(provider, this.networkId);
this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceState();
this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
this._dispatcher.updateProviderType(ProviderType.Ledger);
}
public async updateProviderToInjectedAsync() {
@@ -222,20 +230,26 @@ export class Blockchain {
return; // Going from injected to injected, so we noop
}
this._web3Wrapper.destroy();
this._blockchainWatcher.destroy();
const provider = this._cachedProvider;
this.networkId = this._cachedProviderNetworkId;
const shouldPollUserAddress = true;
this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
this._web3Wrapper = new Web3Wrapper(provider);
this._blockchainWatcher = new BlockchainWatcher(
this._dispatcher,
this._web3Wrapper,
this.networkId,
shouldPollUserAddress,
);
this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
this._userAddress = await this.getFirstAccountIfExistsAsync();
this._zeroEx.setProvider(provider, this.networkId);
await this.fetchTokenInformationAsync();
this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceState();
this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
this._dispatcher.updateProviderType(ProviderType.Injected);
delete this._ledgerSubprovider;
delete this._cachedProvider;
@@ -428,9 +442,9 @@ export class Blockchain {
gasPrice: this._defaultGasPrice,
});
}
public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
const balance = await this._web3Wrapper.getBalanceInEthAsync(owner);
return balance;
public async getBalanceInWeiAsync(owner: string): Promise<BigNumber> {
const balanceInWei = await this._web3Wrapper.getBalanceInWeiAsync(owner);
return balanceInWei;
}
public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
@@ -484,10 +498,10 @@ export class Blockchain {
// by-passes the web3Wrapper logic for updating the prevUserAddress. We therefore need to
// manually update it. This should only be called by the LedgerConfigDialog.
public updateWeb3WrapperPrevUserAddress(newUserAddress: string) {
this._web3Wrapper.updatePrevUserAddress(newUserAddress);
this._blockchainWatcher.updatePrevUserAddress(newUserAddress);
}
public destroy() {
this._web3Wrapper.destroy();
this._blockchainWatcher.destroy();
this._stopWatchingExchangeLogFillEvents();
}
public async fetchTokenInformationAsync() {
@@ -540,6 +554,13 @@ export class Blockchain {
this._dispatcher.updateBlockchainIsLoaded(true);
}
public async getFirstAccountIfExistsAsync() {
const addresses = await this._web3Wrapper.getAvailableAddressesAsync();
if (_.isEmpty(addresses)) {
return '';
}
return addresses[0];
}
private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
txHash: string,
): Promise<TransactionReceiptWithDecodedLogs> {
@@ -736,11 +757,18 @@ export class Blockchain {
this._zeroEx = new ZeroEx(provider, zeroExConfigs);
this._updateProviderName(injectedWeb3);
const shouldPollUserAddress = true;
this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
this._web3Wrapper = new Web3Wrapper(provider);
this._blockchainWatcher = new BlockchainWatcher(
this._dispatcher,
this._web3Wrapper,
this.networkId,
shouldPollUserAddress,
);
this._userAddress = await this.getFirstAccountIfExistsAsync();
this._dispatcher.updateUserAddress(this._userAddress);
await this.fetchTokenInformationAsync();
this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceState();
this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
await this._rehydrateStoreWithContractEvents();
}
private _updateProviderName(injectedWeb3: Web3) {
@@ -752,7 +780,7 @@ export class Blockchain {
}
private async _instantiateContractIfExistsAsync(artifact: any, address?: string): Promise<ContractInstance> {
const c = await contract(artifact);
const providerObj = this._web3Wrapper.getProviderObj();
const providerObj = this._web3Wrapper.getProvider();
c.setProvider(providerObj);
const artifactNetworkConfigs = artifact.networks[this.networkId];

70
packages/website/ts/web3_wrapper.ts → packages/website/ts/blockchain_watcher.ts
View File

@@ -1,60 +1,32 @@
import { BigNumber, intervalUtils, promisify } from '@0xproject/utils';
import { Web3Wrapper as Web3WrapperBase } from '@0xproject/web3-wrapper';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import { Dispatcher } from 'ts/redux/dispatcher';
import { utils } from 'ts/utils/utils';
import * as Web3 from 'web3';
export class Web3Wrapper extends Web3WrapperBase {
export class BlockchainWatcher {
private _dispatcher: Dispatcher;
private _web3: Web3;
private _web3Wrapper: Web3Wrapper;
private _prevNetworkId: number;
private _shouldPollUserAddress: boolean;
private _watchNetworkAndBalanceIntervalId: NodeJS.Timer;
private _prevUserEtherBalanceInEth: BigNumber;
private _prevUserEtherBalanceInWei: BigNumber;
private _prevUserAddress: string;
constructor(
dispatcher: Dispatcher,
provider: Web3.Provider,
web3Wrapper: Web3Wrapper,
networkIdIfExists: number,
shouldPollUserAddress: boolean,
) {
super(provider);
this._dispatcher = dispatcher;
this._prevNetworkId = networkIdIfExists;
this._shouldPollUserAddress = shouldPollUserAddress;
this._web3 = new Web3();
this._web3.setProvider(provider);
}
public async getFirstAccountIfExistsAsync() {
const addresses = await this.getAvailableAddressesAsync();
if (_.isEmpty(addresses)) {
return '';
}
return addresses[0];
}
public getProviderObj() {
return this._web3.currentProvider;
}
public async getNetworkIdIfExistsAsync(): Promise<number | undefined> {
try {
const networkId = await this.getNetworkIdAsync();
return Number(networkId);
} catch (err) {
return undefined;
}
}
public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
const balanceInWei = await this.getBalanceInWeiAsync(owner);
const balanceEthOldBigNumber = this._web3.fromWei(balanceInWei, 'ether');
const balanceEth = new BigNumber(balanceEthOldBigNumber);
return balanceEth;
this._web3Wrapper = web3Wrapper;
}
public destroy() {
this._stopEmittingNetworkConnectionAndUserBalanceStateAsync();
// HACK: stop() is only available on providerEngine instances
const provider = this._web3.currentProvider;
const provider = this._web3Wrapper.getProvider();
if (!_.isUndefined((provider as any).stop)) {
(provider as any).stop();
}
@@ -69,26 +41,32 @@ export class Web3Wrapper extends Web3WrapperBase {
}
let prevNodeVersion: string;
this._prevUserEtherBalanceInEth = new BigNumber(0);
this._prevUserEtherBalanceInWei = new BigNumber(0);
this._dispatcher.updateNetworkId(this._prevNetworkId);
this._watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(
async () => {
// Check for network state changes
const currentNetworkId = await this.getNetworkIdIfExistsAsync();
let currentNetworkId;
try {
currentNetworkId = await this._web3Wrapper.getNetworkIdAsync();
} catch (err) {
// Noop
}
if (currentNetworkId !== this._prevNetworkId) {
this._prevNetworkId = currentNetworkId;
this._dispatcher.updateNetworkId(currentNetworkId);
}
// Check for node version changes
const currentNodeVersion = await this.getNodeVersionAsync();
const currentNodeVersion = await this._web3Wrapper.getNodeVersionAsync();
if (currentNodeVersion !== prevNodeVersion) {
prevNodeVersion = currentNodeVersion;
this._dispatcher.updateNodeVersion(currentNodeVersion);
}
if (this._shouldPollUserAddress) {
const userAddressIfExists = await this.getFirstAccountIfExistsAsync();
const addresses = await this._web3Wrapper.getAvailableAddressesAsync();
const userAddressIfExists = addresses[0] || '';
// Update makerAddress on network change
if (this._prevUserAddress !== userAddressIfExists) {
this._prevUserAddress = userAddressIfExists;
@@ -97,13 +75,13 @@ export class Web3Wrapper extends Web3WrapperBase {
// Check for user ether balance changes
if (!_.isEmpty(userAddressIfExists)) {
await this._updateUserEtherBalanceAsync(userAddressIfExists);
await this._updateUserWeiBalanceAsync(userAddressIfExists);
}
} else {
// This logic is primarily for the Ledger, since we don't regularly poll for the address
// we simply update the balance for the last fetched address.
if (!_.isEmpty(this._prevUserAddress)) {
await this._updateUserEtherBalanceAsync(this._prevUserAddress);
await this._updateUserWeiBalanceAsync(this._prevUserAddress);
}
}
},
@@ -114,11 +92,11 @@ export class Web3Wrapper extends Web3WrapperBase {
},
);
}
private async _updateUserEtherBalanceAsync(userAddress: string) {
const balance = await this.getBalanceInEthAsync(userAddress);
if (!balance.eq(this._prevUserEtherBalanceInEth)) {
this._prevUserEtherBalanceInEth = balance;
this._dispatcher.updateUserEtherBalance(balance);
private async _updateUserWeiBalanceAsync(userAddress: string) {
const balanceInWei = await this._web3Wrapper.getBalanceInWeiAsync(userAddress);
if (!balanceInWei.eq(this._prevUserEtherBalanceInWei)) {
this._prevUserEtherBalanceInWei = balanceInWei;
this._dispatcher.updateUserWeiBalance(balanceInWei);
}
}
private _stopEmittingNetworkConnectionAndUserBalanceStateAsync() {

7
packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
View File

@@ -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 (
<div>
<div className="pb2">{explanation}</div>
@@ -103,7 +106,7 @@ export class EthWethConversionDialog extends React.Component<
/>
) : (
<EthAmountInput
balance={this.props.etherBalance}
balance={etherBalanceInEth}
amount={this.state.value}
onChange={this._onValueChange.bind(this)}
shouldCheckBalance={true}

12
packages/website/ts/components/dialogs/ledger_config_dialog.tsx
View File

@@ -1,3 +1,4 @@
import { ZeroEx } from '0x.js';
import { colors, constants as sharedConstants } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
@@ -160,14 +161,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
}
private _renderAddressTableRows() {
const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
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 (
<TableRow key={userAddress} style={{ height: 40 }}>
<TableRowColumn colSpan={2}>
@@ -204,7 +206,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
this.props.blockchain.updateWeb3WrapperPrevUserAddress(selectedAddress);
// tslint:disable-next-line:no-floating-promises
this.props.blockchain.fetchTokenInformationAsync();
this.props.dispatcher.updateUserEtherBalance(selectAddressBalance);
this.props.dispatcher.updateUserWeiBalance(selectAddressBalance);
this.setState({
stepIndex: LedgerSteps.CONNECT,
});
@@ -233,8 +235,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
try {
userAddresses = await this._getUserAddressesAsync();
for (const address of userAddresses) {
const balance = await this.props.blockchain.getBalanceInEthAsync(address);
addressBalances.push(balance);
const balanceInWei = await this.props.blockchain.getBalanceInWeiAsync(address);
addressBalances.push(balanceInWei);
}
} catch (err) {
utils.consoleLog(`Ledger error: ${JSON.stringify(err)}`);

4
packages/website/ts/components/eth_weth_conversion_button.tsx
View File

@@ -18,7 +18,7 @@ interface EthWethConversionButtonProps {
ethToken: Token;
dispatcher: Dispatcher;
blockchain: Blockchain;
userEtherBalance: BigNumber;
userEtherBalanceInWei: BigNumber;
isOutdatedWrappedEther: boolean;
onConversionSuccessful?: () => 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}
/>

16
packages/website/ts/components/eth_wrappers.tsx
View File

@@ -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<EthWrappersProps, EthWrappersSt
EtherscanLinkSuffixes.Address,
);
const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH);
const userEtherBalanceInEth = ZeroEx.toUnitAmount(
this.props.userEtherBalanceInWei,
constants.DECIMAL_PLACES_ETH,
);
return (
<div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
<div className="relative">
@@ -143,9 +147,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</div>
</div>
</TableRowColumn>
<TableRowColumn>
{this.props.userEtherBalance.toFixed(PRECISION)} ETH
</TableRowColumn>
<TableRowColumn>{userEtherBalanceInEth.toFixed(PRECISION)} ETH</TableRowColumn>
<TableRowColumn>
<EthWethConversionButton
refetchEthTokenStateAsync={this._refetchEthTokenStateAsync.bind(this)}
@@ -157,7 +159,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
ethToken={etherToken}
dispatcher={this.props.dispatcher}
blockchain={this.props.blockchain}
userEtherBalance={this.props.userEtherBalance}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
/>
</TableRowColumn>
</TableRow>
@@ -184,7 +186,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
ethToken={etherToken}
dispatcher={this.props.dispatcher}
blockchain={this.props.blockchain}
userEtherBalance={this.props.userEtherBalance}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
/>
</TableRowColumn>
</TableRow>
@@ -304,7 +306,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
ethToken={outdatedEtherToken}
dispatcher={this.props.dispatcher}
blockchain={this.props.blockchain}
userEtherBalance={this.props.userEtherBalance}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
onConversionSuccessful={onConversionSuccessful}
/>
</TableRowColumn>

6
packages/website/ts/components/portal.tsx
View File

@@ -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<PortalAllProps, PortalAllState> {
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<PortalAllProps, PortalAllState> {
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}
/>

17
packages/website/ts/components/token_balances.tsx
View File

@@ -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<TokenBalancesProps, TokenBala
this._isUnmounted = true;
}
public componentWillReceiveProps(nextProps: TokenBalancesProps) {
if (nextProps.userEtherBalance !== this.props.userEtherBalance) {
if (nextProps.userEtherBalanceInWei !== this.props.userEtherBalanceInWei) {
if (this.state.isBalanceSpinnerVisible) {
const receivedAmount = nextProps.userEtherBalance.minus(this.props.userEtherBalance);
const receivedAmountInWei = nextProps.userEtherBalanceInWei.minus(this.props.userEtherBalanceInWei);
const receivedAmountInEth = ZeroEx.toUnitAmount(receivedAmountInWei, constants.DECIMAL_PLACES_ETH);
const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
this.props.dispatcher.showFlashMessage(`Received ${receivedAmount.toString(10)} ${networkName} Ether`);
this.props.dispatcher.showFlashMessage(
`Received ${receivedAmountInEth.toString(10)} ${networkName} Ether`,
);
}
this.setState({
isBalanceSpinnerVisible: false,
@@ -205,6 +208,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
token balances in order to execute trades.<br> \
Toggling sets an allowance for the<br> \
smart contract so you can start trading that token.';
const userEtherBalanceInEth = ZeroEx.toUnitAmount(
this.props.userEtherBalanceInWei,
constants.DECIMAL_PLACES_ETH,
);
return (
<div className="lg-px4 md-px4 sm-px1 pb2">
<h3>{isTestNetwork ? 'Test ether' : 'Ether'}</h3>
@@ -241,7 +248,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />
</TableRowColumn>
<TableRowColumn>
{this.props.userEtherBalance.toFixed(PRECISION)} ETH
{userEtherBalanceInEth.toFixed(PRECISION)} ETH
{this.state.isBalanceSpinnerVisible && (
<span className="pl1">
<i className="zmdi zmdi-spinner zmdi-hc-spin" />

4
packages/website/ts/containers/portal.ts
View File

@@ -21,7 +21,7 @@ interface ConnectedState {
providerType: ProviderType;
tokenByAddress: TokenByAddress;
lastForceTokenStateRefetch: number;
userEtherBalance: BigNumber;
userEtherBalanceInWei: BigNumber;
screenWidth: ScreenWidths;
shouldBlockchainErrDialogBeOpen: boolean;
userAddress: string;
@@ -72,7 +72,7 @@ const mapStateToProps = (state: State, ownProps: PortalComponentAllProps): Conne
tokenByAddress: state.tokenByAddress,
lastForceTokenStateRefetch: state.lastForceTokenStateRefetch,
userAddress: state.userAddress,
userEtherBalance: state.userEtherBalance,
userEtherBalanceInWei: state.userEtherBalanceInWei,
userSuppliedOrderCache: state.userSuppliedOrderCache,
flashMessage: state.flashMessage,
translate: state.translate,

2
packages/website/ts/redux/dispatcher.ts
View File

@@ -155,7 +155,7 @@ export class Dispatcher {
type: ActionTypes.UpdateOrderECSignature,
});
}
public updateUserEtherBalance(balance: BigNumber) {
public updateUserWeiBalance(balance: BigNumber) {
this._dispatch({
data: balance,
type: ActionTypes.UpdateUserEtherBalance,

6
packages/website/ts/redux/reducer.ts
View File

@@ -38,7 +38,7 @@ export interface State {
tokenByAddress: TokenByAddress;
lastForceTokenStateRefetch: number;
userAddress: string;
userEtherBalance: BigNumber;
userEtherBalanceInWei: BigNumber;
// Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
userSuppliedOrderCache: Order;
@@ -77,7 +77,7 @@ const INITIAL_STATE: State = {
tokenByAddress: {},
lastForceTokenStateRefetch: moment().unix(),
userAddress: '',
userEtherBalance: new BigNumber(0),
userEtherBalanceInWei: new BigNumber(0),
userSuppliedOrderCache: undefined,
// Docs
@@ -138,7 +138,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action) {
case ActionTypes.UpdateUserEtherBalance: {
return {
...state,
userEtherBalance: action.data,
userEtherBalanceInWei: action.data,
};
}