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

Add new underscore-privates rule to @0xproject/tslint-config and fix lint errors

Browse Source
This commit is contained in:
Brandon Millman
2017-12-20 00:44:08 -05:00
committed by Leonid Logvinov
parent 972e1675f6
commit cb11aec84d
93 changed files with 1418 additions and 1345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,15 +59,15 @@ const BLOCK_NUMBER_BACK_TRACK = 50;
export class Blockchain {
public networkId: number;
public nodeVersion: string;
private zeroEx: ZeroEx;
private dispatcher: Dispatcher;
private web3Wrapper?: Web3Wrapper;
private exchangeAddress: string;
private userAddress: string;
private cachedProvider: Web3.Provider;
private ledgerSubprovider: LedgerWalletSubprovider;
private zrxPollIntervalId: NodeJS.Timer;
private static async onPageLoadAsync() {
private _zeroEx: ZeroEx;
private _dispatcher: Dispatcher;
private _web3Wrapper?: Web3Wrapper;
private _exchangeAddress: string;
private _userAddress: string;
private _cachedProvider: Web3.Provider;
private _ledgerSubprovider: LedgerWalletSubprovider;
private _zrxPollIntervalId: NodeJS.Timer;
private static async _onPageLoadAsync() {
if (document.readyState === 'complete') {
return; // Already loaded
}
@@ -75,7 +75,7 @@ export class Blockchain {
window.onload = resolve;
});
}
private static getNameGivenProvider(provider: Web3.Provider): string {
private static _getNameGivenProvider(provider: Web3.Provider): string {
if (!_.isUndefined((provider as any).isMetaMask)) {
return constants.PROVIDER_NAME_METAMASK;
}
@@ -89,7 +89,7 @@ export class Blockchain {
return constants.PROVIDER_NAME_GENERIC;
}
private static async getProviderAsync(injectedWeb3: Web3, networkIdIfExists: number) {
private static async _getProviderAsync(injectedWeb3: Web3, networkIdIfExists: number) {
const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists];
const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId);
@@ -126,29 +126,29 @@ export class Blockchain {
return provider;
}
constructor(dispatcher: Dispatcher, isSalePage: boolean = false) {
this.dispatcher = dispatcher;
this.userAddress = '';
this._dispatcher = dispatcher;
this._userAddress = '';
// tslint:disable-next-line:no-floating-promises
this.onPageLoadInitFireAndForgetAsync();
this._onPageLoadInitFireAndForgetAsync();
}
public async networkIdUpdatedFireAndForgetAsync(newNetworkId: number) {
const isConnected = !_.isUndefined(newNetworkId);
if (!isConnected) {
this.networkId = newNetworkId;
this.dispatcher.encounteredBlockchainError(BlockchainErrs.DisconnectedFromEthereumNode);
this.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
this._dispatcher.encounteredBlockchainError(BlockchainErrs.DisconnectedFromEthereumNode);
this._dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
} else if (this.networkId !== newNetworkId) {
this.networkId = newNetworkId;
this.dispatcher.encounteredBlockchainError(BlockchainErrs.NoError);
await this.fetchTokenInformationAsync();
await this.rehydrateStoreWithContractEvents();
this._dispatcher.encounteredBlockchainError(BlockchainErrs.NoError);
await this._fetchTokenInformationAsync();
await this._rehydrateStoreWithContractEvents();
}
}
public async userAddressUpdatedFireAndForgetAsync(newUserAddress: string) {
if (this.userAddress !== newUserAddress) {
this.userAddress = newUserAddress;
await this.fetchTokenInformationAsync();
await this.rehydrateStoreWithContractEvents();
if (this._userAddress !== newUserAddress) {
this._userAddress = newUserAddress;
await this._fetchTokenInformationAsync();
await this._rehydrateStoreWithContractEvents();
}
}
public async nodeVersionUpdatedFireAndForgetAsync(nodeVersion: string) {
@@ -157,7 +157,7 @@ export class Blockchain {
}
}
public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
// HACK: temporarily whitelist the new WETH token address `as if` they were
// already in the tokenRegistry.
// TODO: Remove this hack once we've updated the TokenRegistries
@@ -166,30 +166,30 @@ export class Blockchain {
tokenAddress === configs.NEW_WRAPPED_ETHERS[this.networkId]) {
return true;
}
const tokenIfExists = await this.zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
return !_.isUndefined(tokenIfExists);
}
public getLedgerDerivationPathIfExists(): string {
if (_.isUndefined(this.ledgerSubprovider)) {
if (_.isUndefined(this._ledgerSubprovider)) {
return undefined;
}
const path = this.ledgerSubprovider.getPath();
const path = this._ledgerSubprovider.getPath();
return path;
}
public updateLedgerDerivationPathIfExists(path: string) {
if (_.isUndefined(this.ledgerSubprovider)) {
if (_.isUndefined(this._ledgerSubprovider)) {
return; // noop
}
this.ledgerSubprovider.setPath(path);
this._ledgerSubprovider.setPath(path);
}
public updateLedgerDerivationIndex(pathIndex: number) {
if (_.isUndefined(this.ledgerSubprovider)) {
if (_.isUndefined(this._ledgerSubprovider)) {
return; // noop
}
this.ledgerSubprovider.setPathIndex(pathIndex);
this._ledgerSubprovider.setPathIndex(pathIndex);
}
public async providerTypeUpdatedFireAndForgetAsync(providerType: ProviderType) {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
// Should actually be Web3.Provider|ProviderEngine union type but it causes issues
// later on in the logic.
let provider;
@@ -201,17 +201,17 @@ export class Blockchain {
}
// Cache injected provider so that we can switch the user back to it easily
this.cachedProvider = this.web3Wrapper.getProviderObj();
this._cachedProvider = this._web3Wrapper.getProviderObj();
this.dispatcher.updateUserAddress(''); // Clear old userAddress
this._dispatcher.updateUserAddress(''); // Clear old userAddress
provider = new ProviderEngine();
const ledgerWalletConfigs = {
networkId: this.networkId,
ledgerEthereumClientFactoryAsync: ledgerEthereumBrowserClientFactoryAsync,
};
this.ledgerSubprovider = new LedgerSubprovider(ledgerWalletConfigs);
provider.addProvider(this.ledgerSubprovider);
this._ledgerSubprovider = new LedgerSubprovider(ledgerWalletConfigs);
provider.addProvider(this._ledgerSubprovider);
provider.addProvider(new FilterSubprovider());
const networkId = configs.IS_MAINNET_ENABLED ?
constants.NETWORK_ID_MAINNET :
@@ -220,25 +220,25 @@ export class Blockchain {
configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId],
));
provider.start();
this.web3Wrapper.destroy();
this._web3Wrapper.destroy();
const shouldPollUserAddress = false;
this.web3Wrapper = new Web3Wrapper(this.dispatcher, provider, this.networkId, shouldPollUserAddress);
this.zeroEx.setProvider(provider, networkId);
await this.postInstantiationOrUpdatingProviderZeroExAsync();
this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
this._zeroEx.setProvider(provider, networkId);
await this._postInstantiationOrUpdatingProviderZeroExAsync();
break;
}
case ProviderType.Injected: {
if (_.isUndefined(this.cachedProvider)) {
if (_.isUndefined(this._cachedProvider)) {
return; // Going from injected to injected, so we noop
}
provider = this.cachedProvider;
provider = this._cachedProvider;
const shouldPollUserAddress = true;
this.web3Wrapper = new Web3Wrapper(this.dispatcher, provider, this.networkId, shouldPollUserAddress);
this.zeroEx.setProvider(provider, this.networkId);
await this.postInstantiationOrUpdatingProviderZeroExAsync();
delete this.ledgerSubprovider;
delete this.cachedProvider;
this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
this._zeroEx.setProvider(provider, this.networkId);
await this._postInstantiationOrUpdatingProviderZeroExAsync();
delete this._ledgerSubprovider;
delete this._cachedProvider;
break;
}
@@ -246,28 +246,28 @@ export class Blockchain {
throw utils.spawnSwitchErr('providerType', providerType);
}
await this.fetchTokenInformationAsync();
await this._fetchTokenInformationAsync();
}
public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> {
utils.assert(this.isValidAddress(token.address), BlockchainCallErrs.TokenAddressIsInvalid);
utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
const txHash = await this.zeroEx.token.setProxyAllowanceAsync(
token.address, this.userAddress, amountInBaseUnits,
const txHash = await this._zeroEx.token.setProxyAllowanceAsync(
token.address, this._userAddress, amountInBaseUnits,
);
await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const allowance = amountInBaseUnits;
this.dispatcher.replaceTokenAllowanceByAddress(token.address, allowance);
this._dispatcher.replaceTokenAllowanceByAddress(token.address, allowance);
}
public async transferAsync(token: Token, toAddress: string,
amountInBaseUnits: BigNumber): Promise<void> {
const txHash = await this.zeroEx.token.transferAsync(
token.address, this.userAddress, toAddress, amountInBaseUnits,
const txHash = await this._zeroEx.token.transferAsync(
token.address, this._userAddress, toAddress, amountInBaseUnits,
);
await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
this.dispatcher.showFlashMessage(React.createElement(TokenSendCompleted, {
this._dispatcher.showFlashMessage(React.createElement(TokenSendCompleted, {
etherScanLinkIfExists,
token,
toAddress,
@@ -302,16 +302,16 @@ export class Blockchain {
}
public async fillOrderAsync(signedOrder: SignedOrder,
fillTakerTokenAmount: BigNumber): Promise<BigNumber> {
utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const shouldThrowOnInsufficientBalanceOrAllowance = true;
const txHash = await this.zeroEx.exchange.fillOrderAsync(
signedOrder, fillTakerTokenAmount, shouldThrowOnInsufficientBalanceOrAllowance, this.userAddress,
const txHash = await this._zeroEx.exchange.fillOrderAsync(
signedOrder, fillTakerTokenAmount, shouldThrowOnInsufficientBalanceOrAllowance, this._userAddress,
);
const receipt = await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
this.zeroEx.exchange.throwLogErrorsAsErrors(logs);
this._zeroEx.exchange.throwLogErrorsAsErrors(logs);
const logFill = _.find(logs, {event: 'LogFill'});
const args = logFill.args as any as LogFillContractEventArgs;
const filledTakerTokenAmount = args.filledTakerTokenAmount;
@@ -319,12 +319,12 @@ export class Blockchain {
}
public async cancelOrderAsync(signedOrder: SignedOrder,
cancelTakerTokenAmount: BigNumber): Promise<BigNumber> {
const txHash = await this.zeroEx.exchange.cancelOrderAsync(
const txHash = await this._zeroEx.exchange.cancelOrderAsync(
signedOrder, cancelTakerTokenAmount,
);
const receipt = await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
this.zeroEx.exchange.throwLogErrorsAsErrors(logs);
this._zeroEx.exchange.throwLogErrorsAsErrors(logs);
const logCancel = _.find(logs, {event: ExchangeEvents.LogCancel});
const args = logCancel.args as any as LogCancelContractEventArgs;
const cancelledTakerTokenAmount = args.cancelledTakerTokenAmount;
@@ -332,95 +332,95 @@ export class Blockchain {
}
public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> {
utils.assert(ZeroEx.isValidOrderHash(orderHash), 'Must be valid orderHash');
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
const unavailableTakerAmount = await this.zeroEx.exchange.getUnavailableTakerAmountAsync(orderHash);
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
const unavailableTakerAmount = await this._zeroEx.exchange.getUnavailableTakerAmountAsync(orderHash);
return unavailableTakerAmount;
}
public getExchangeContractAddressIfExists() {
return this.exchangeAddress;
return this._exchangeAddress;
}
public async validateFillOrderThrowIfInvalidAsync(signedOrder: SignedOrder,
fillTakerTokenAmount: BigNumber,
takerAddress: string): Promise<void> {
await this.zeroEx.exchange.validateFillOrderThrowIfInvalidAsync(
await this._zeroEx.exchange.validateFillOrderThrowIfInvalidAsync(
signedOrder, fillTakerTokenAmount, takerAddress);
}
public async validateCancelOrderThrowIfInvalidAsync(order: Order,
cancelTakerTokenAmount: BigNumber): Promise<void> {
await this.zeroEx.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
await this._zeroEx.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
}
public isValidAddress(address: string): boolean {
const lowercaseAddress = address.toLowerCase();
return this.web3Wrapper.isAddress(lowercaseAddress);
return this._web3Wrapper.isAddress(lowercaseAddress);
}
public async pollTokenBalanceAsync(token: Token) {
utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const [currBalance] = await this.getTokenBalanceAndAllowanceAsync(this.userAddress, token.address);
const [currBalance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
this.zrxPollIntervalId = intervalUtils.setAsyncExcludingInterval(async () => {
const [balance] = await this.getTokenBalanceAndAllowanceAsync(this.userAddress, token.address);
this._zrxPollIntervalId = intervalUtils.setAsyncExcludingInterval(async () => {
const [balance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
if (!balance.eq(currBalance)) {
this.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
clearInterval(this.zrxPollIntervalId);
delete this.zrxPollIntervalId;
this._dispatcher.replaceTokenBalanceByAddress(token.address, balance);
clearInterval(this._zrxPollIntervalId);
delete this._zrxPollIntervalId;
}
}, 5000);
}
public async signOrderHashAsync(orderHash: string): Promise<SignatureData> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
const makerAddress = this.userAddress;
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
const makerAddress = this._userAddress;
// If makerAddress is undefined, this means they have a web3 instance injected into their browser
// but no account addresses associated with it.
if (_.isUndefined(makerAddress)) {
throw new Error('Tried to send a sign request but user has no associated addresses');
}
const ecSignature = await this.zeroEx.signOrderHashAsync(orderHash, makerAddress);
const ecSignature = await this._zeroEx.signOrderHashAsync(orderHash, makerAddress);
const signatureData = _.extend({}, ecSignature, {
hash: orderHash,
});
this.dispatcher.updateSignatureData(signatureData);
this._dispatcher.updateSignatureData(signatureData);
return signatureData;
}
public async mintTestTokensAsync(token: Token) {
utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const mintableContract = await this.instantiateContractIfExistsAsync(MintableArtifacts, token.address);
const mintableContract = await this._instantiateContractIfExistsAsync(MintableArtifacts, token.address);
await mintableContract.mint(constants.MINT_AMOUNT, {
from: this.userAddress,
from: this._userAddress,
});
const balanceDelta = constants.MINT_AMOUNT;
this.dispatcher.updateTokenBalanceByAddress(token.address, balanceDelta);
this._dispatcher.updateTokenBalanceByAddress(token.address, balanceDelta);
}
public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
const balance = await this.web3Wrapper.getBalanceInEthAsync(owner);
const balance = await this._web3Wrapper.getBalanceInEthAsync(owner);
return balance;
}
public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const txHash = await this.zeroEx.etherToken.depositAsync(etherTokenAddress, amount, this.userAddress);
await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const txHash = await this._zeroEx.etherToken.depositAsync(etherTokenAddress, amount, this._userAddress);
await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
}
public async convertWrappedEthTokensToEthAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const txHash = await this.zeroEx.etherToken.withdrawAsync(etherTokenAddress, amount, this.userAddress);
await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const txHash = await this._zeroEx.etherToken.withdrawAsync(etherTokenAddress, amount, this._userAddress);
await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
}
public async doesContractExistAtAddressAsync(address: string) {
const doesContractExist = await this.web3Wrapper.doesContractExistAtAddressAsync(address);
const doesContractExist = await this._web3Wrapper.doesContractExistAtAddressAsync(address);
return doesContractExist;
}
public async getCurrentUserTokenBalanceAndAllowanceAsync(tokenAddress: string): Promise<BigNumber[]> {
const tokenBalanceAndAllowance = await this.getTokenBalanceAndAllowanceAsync(this.userAddress, tokenAddress);
const tokenBalanceAndAllowance = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, tokenAddress);
return tokenBalanceAndAllowance;
}
public async getTokenBalanceAndAllowanceAsync(ownerAddress: string, tokenAddress: string):
Promise<BigNumber[]> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
if (_.isEmpty(ownerAddress)) {
const zero = new BigNumber(0);
@@ -428,9 +428,9 @@ export class Blockchain {
}
let balance = new BigNumber(0);
let allowance = new BigNumber(0);
if (this.doesUserAddressExist()) {
balance = await this.zeroEx.token.getBalanceAsync(tokenAddress, ownerAddress);
allowance = await this.zeroEx.token.getProxyAllowanceAsync(tokenAddress, ownerAddress);
if (this._doesUserAddressExist()) {
balance = await this._zeroEx.token.getBalanceAsync(tokenAddress, ownerAddress);
allowance = await this._zeroEx.token.getProxyAllowanceAsync(tokenAddress, ownerAddress);
}
return [balance, allowance];
}
@@ -439,11 +439,11 @@ export class Blockchain {
for (const token of tokens) {
let balance = new BigNumber(0);
let allowance = new BigNumber(0);
if (this.doesUserAddressExist()) {
if (this._doesUserAddressExist()) {
[
balance,
allowance,
] = await this.getTokenBalanceAndAllowanceAsync(this.userAddress, token.address);
] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
}
const tokenState = {
balance,
@@ -451,61 +451,61 @@ export class Blockchain {
};
tokenStateByAddress[token.address] = tokenState;
}
this.dispatcher.updateTokenStateByAddress(tokenStateByAddress);
this._dispatcher.updateTokenStateByAddress(tokenStateByAddress);
}
public async getUserAccountsAsync() {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
const userAccountsIfExists = await this.zeroEx.getAvailableAddressesAsync();
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
const userAccountsIfExists = await this._zeroEx.getAvailableAddressesAsync();
return userAccountsIfExists;
}
// HACK: When a user is using a Ledger, we simply dispatch the selected userAddress, which
// 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._web3Wrapper.updatePrevUserAddress(newUserAddress);
}
public destroy() {
clearInterval(this.zrxPollIntervalId);
this.web3Wrapper.destroy();
this.stopWatchingExchangeLogFillEvents();
clearInterval(this._zrxPollIntervalId);
this._web3Wrapper.destroy();
this._stopWatchingExchangeLogFillEvents();
}
private async showEtherScanLinkAndAwaitTransactionMinedAsync(
private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
txHash: string): Promise<TransactionReceiptWithDecodedLogs> {
const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
this.dispatcher.showFlashMessage(React.createElement(TransactionSubmitted, {
this._dispatcher.showFlashMessage(React.createElement(TransactionSubmitted, {
etherScanLinkIfExists,
}));
const receipt = await this.zeroEx.awaitTransactionMinedAsync(txHash);
const receipt = await this._zeroEx.awaitTransactionMinedAsync(txHash);
return receipt;
}
private doesUserAddressExist(): boolean {
return this.userAddress !== '';
private _doesUserAddressExist(): boolean {
return this._userAddress !== '';
}
private async rehydrateStoreWithContractEvents() {
private async _rehydrateStoreWithContractEvents() {
// Ensure we are only ever listening to one set of events
this.stopWatchingExchangeLogFillEvents();
this._stopWatchingExchangeLogFillEvents();
if (!this.doesUserAddressExist()) {
if (!this._doesUserAddressExist()) {
return; // short-circuit
}
if (!_.isUndefined(this.zeroEx)) {
if (!_.isUndefined(this._zeroEx)) {
// Since we do not have an index on the `taker` address and want to show
// transactions where an account is either the `maker` or `taker`, we loop
// through all fill events, and filter/cache them client-side.
const filterIndexObj = {};
await this.startListeningForExchangeLogFillEventsAsync(filterIndexObj);
await this._startListeningForExchangeLogFillEventsAsync(filterIndexObj);
}
}
private async startListeningForExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues): Promise<void> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
private async _startListeningForExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues): Promise<void> {
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
// Fetch historical logs
await this.fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues);
await this._fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues);
// Start a subscription for new logs
this.zeroEx.exchange.subscribe(
this._zeroEx.exchange.subscribe(
ExchangeEvents.LogFill, indexFilterValues,
async (err: Error, decodedLogEvent: DecodedLogEvent<LogFillContractEventArgs>) => {
if (err) {
@@ -517,40 +517,40 @@ export class Blockchain {
return;
} else {
const decodedLog = decodedLogEvent.log;
if (!this.doesLogEventInvolveUser(decodedLog)) {
if (!this._doesLogEventInvolveUser(decodedLog)) {
return; // We aren't interested in the fill event
}
this.updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
const fill = await this.convertDecodedLogToFillAsync(decodedLog);
this._updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
const fill = await this._convertDecodedLogToFillAsync(decodedLog);
if (decodedLogEvent.isRemoved) {
tradeHistoryStorage.removeFillFromUser(this.userAddress, this.networkId, fill);
tradeHistoryStorage.removeFillFromUser(this._userAddress, this.networkId, fill);
} else {
tradeHistoryStorage.addFillToUser(this.userAddress, this.networkId, fill);
tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
}
}
});
}
private async fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues) {
const fromBlock = tradeHistoryStorage.getFillsLatestBlock(this.userAddress, this.networkId);
private async _fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues) {
const fromBlock = tradeHistoryStorage.getFillsLatestBlock(this._userAddress, this.networkId);
const blockRange: BlockRange = {
fromBlock,
toBlock: 'latest' as BlockParam,
};
const decodedLogs = await this.zeroEx.exchange.getLogsAsync<LogFillContractEventArgs>(
const decodedLogs = await this._zeroEx.exchange.getLogsAsync<LogFillContractEventArgs>(
ExchangeEvents.LogFill, blockRange, indexFilterValues,
);
for (const decodedLog of decodedLogs) {
if (!this.doesLogEventInvolveUser(decodedLog)) {
if (!this._doesLogEventInvolveUser(decodedLog)) {
continue; // We aren't interested in the fill event
}
this.updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
const fill = await this.convertDecodedLogToFillAsync(decodedLog);
tradeHistoryStorage.addFillToUser(this.userAddress, this.networkId, fill);
this._updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
const fill = await this._convertDecodedLogToFillAsync(decodedLog);
tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
}
}
private async convertDecodedLogToFillAsync(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
private async _convertDecodedLogToFillAsync(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
const args = decodedLog.args;
const blockTimestamp = await this.web3Wrapper.getBlockTimestampAsync(decodedLog.blockHash);
const blockTimestamp = await this._web3Wrapper.getBlockTimestampAsync(decodedLog.blockHash);
const fill = {
filledTakerTokenAmount: args.filledTakerTokenAmount,
filledMakerTokenAmount: args.filledMakerTokenAmount,
@@ -567,13 +567,13 @@ export class Blockchain {
};
return fill;
}
private doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
const args = decodedLog.args;
const isUserMakerOrTaker = args.maker === this.userAddress ||
args.taker === this.userAddress;
const isUserMakerOrTaker = args.maker === this._userAddress ||
args.taker === this._userAddress;
return isUserMakerOrTaker;
}
private updateLatestFillsBlockIfNeeded(blockNumber: number) {
private _updateLatestFillsBlockIfNeeded(blockNumber: number) {
const isBlockPending = _.isNull(blockNumber);
if (!isBlockPending) {
// Hack: I've observed the behavior where a client won't register certain fill events
@@ -585,15 +585,15 @@ export class Blockchain {
const blockNumberToSet = blockNumber - BLOCK_NUMBER_BACK_TRACK < 0 ?
0 :
blockNumber - BLOCK_NUMBER_BACK_TRACK;
tradeHistoryStorage.setFillsLatestBlock(this.userAddress, this.networkId, blockNumberToSet);
tradeHistoryStorage.setFillsLatestBlock(this._userAddress, this.networkId, blockNumberToSet);
}
}
private stopWatchingExchangeLogFillEvents(): void {
this.zeroEx.exchange.unsubscribeAll();
private _stopWatchingExchangeLogFillEvents(): void {
this._zeroEx.exchange.unsubscribeAll();
}
private async getTokenRegistryTokensByAddressAsync(): Promise<TokenByAddress> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
const tokenRegistryTokens = await this.zeroEx.tokenRegistry.getTokensAsync();
private async _getTokenRegistryTokensByAddressAsync(): Promise<TokenByAddress> {
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
const tokenRegistryTokens = await this._zeroEx.tokenRegistry.getTokensAsync();
const tokenByAddress: TokenByAddress = {};
_.each(tokenRegistryTokens, (t: ZeroExToken, i: number) => {
@@ -626,8 +626,8 @@ export class Blockchain {
});
return tokenByAddress;
}
private async onPageLoadInitFireAndForgetAsync() {
await Blockchain.onPageLoadAsync(); // wait for page to load
private async _onPageLoadInitFireAndForgetAsync() {
await Blockchain._onPageLoadAsync(); // wait for page to load
// Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
// order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot
@@ -645,7 +645,7 @@ export class Blockchain {
}
}
const provider = await Blockchain.getProviderAsync(injectedWeb3, networkIdIfExists);
const provider = await Blockchain._getProviderAsync(injectedWeb3, networkIdIfExists);
const networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists :
configs.IS_MAINNET_ENABLED ?
constants.NETWORK_ID_MAINNET :
@@ -653,45 +653,45 @@ export class Blockchain {
const zeroExConfigs = {
networkId,
};
this.zeroEx = new ZeroEx(provider, zeroExConfigs);
this.updateProviderName(injectedWeb3);
this._zeroEx = new ZeroEx(provider, zeroExConfigs);
this._updateProviderName(injectedWeb3);
const shouldPollUserAddress = true;
this.web3Wrapper = new Web3Wrapper(this.dispatcher, provider, networkId, shouldPollUserAddress);
await this.postInstantiationOrUpdatingProviderZeroExAsync();
this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, networkId, shouldPollUserAddress);
await this._postInstantiationOrUpdatingProviderZeroExAsync();
}
// This method should always be run after instantiating or updating the provider
// of the ZeroEx instance.
private async postInstantiationOrUpdatingProviderZeroExAsync() {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
this.exchangeAddress = this.zeroEx.exchange.getContractAddress();
private async _postInstantiationOrUpdatingProviderZeroExAsync() {
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
this._exchangeAddress = this._zeroEx.exchange.getContractAddress();
}
private updateProviderName(injectedWeb3: Web3) {
private _updateProviderName(injectedWeb3: Web3) {
const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
const providerName = doesInjectedWeb3Exist ?
Blockchain.getNameGivenProvider(injectedWeb3.currentProvider) :
Blockchain._getNameGivenProvider(injectedWeb3.currentProvider) :
constants.PROVIDER_NAME_PUBLIC;
this.dispatcher.updateInjectedProviderName(providerName);
this._dispatcher.updateInjectedProviderName(providerName);
}
private async fetchTokenInformationAsync() {
private async _fetchTokenInformationAsync() {
utils.assert(!_.isUndefined(this.networkId),
'Cannot call fetchTokenInformationAsync if disconnected from Ethereum node');
this.dispatcher.updateBlockchainIsLoaded(false);
this.dispatcher.clearTokenByAddress();
this._dispatcher.updateBlockchainIsLoaded(false);
this._dispatcher.clearTokenByAddress();
const tokenRegistryTokensByAddress = await this.getTokenRegistryTokensByAddressAsync();
const tokenRegistryTokensByAddress = await this._getTokenRegistryTokensByAddressAsync();
// HACK: We need to fetch the userAddress here because otherwise we cannot save the
// tracked tokens in localStorage under the users address nor fetch the token
// balances and allowances and we need to do this in order not to trigger the blockchain
// loading dialog to show up twice. First to load the contracts, and second to load the
// balances and allowances.
this.userAddress = await this.web3Wrapper.getFirstAccountIfExistsAsync();
if (!_.isEmpty(this.userAddress)) {
this.dispatcher.updateUserAddress(this.userAddress);
this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
if (!_.isEmpty(this._userAddress)) {
this._dispatcher.updateUserAddress(this._userAddress);
}
let trackedTokensIfExists = trackedTokenStorage.getTrackedTokensIfExists(this.userAddress, this.networkId);
let trackedTokensIfExists = trackedTokenStorage.getTrackedTokensIfExists(this._userAddress, this.networkId);
const tokenRegistryTokens = _.values(tokenRegistryTokensByAddress);
if (_.isUndefined(trackedTokensIfExists)) {
trackedTokensIfExists = _.map(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, symbol => {
@@ -700,7 +700,7 @@ export class Blockchain {
return token;
});
_.each(trackedTokensIfExists, token => {
trackedTokenStorage.addTrackedTokenToUser(this.userAddress, this.networkId, token);
trackedTokenStorage.addTrackedTokenToUser(this._userAddress, this.networkId, token);
});
} else {
// Properly set all tokenRegistry tokens `isTracked` to true if they are in the existing trackedTokens array
@@ -711,7 +711,7 @@ export class Blockchain {
});
}
const allTokens = _.uniq([...tokenRegistryTokens, ...trackedTokensIfExists]);
this.dispatcher.updateTokenByAddress(allTokens);
this._dispatcher.updateTokenByAddress(allTokens);
// Get balance/allowance for tracked tokens
await this.updateTokenBalancesAndAllowancesAsync(trackedTokensIfExists);
@@ -720,13 +720,13 @@ export class Blockchain {
_.find(allTokens, {symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[0]}),
_.find(allTokens, {symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[1]}),
];
this.dispatcher.updateChosenAssetTokenAddress(Side.Deposit, mostPopularTradingPairTokens[0].address);
this.dispatcher.updateChosenAssetTokenAddress(Side.Receive, mostPopularTradingPairTokens[1].address);
this.dispatcher.updateBlockchainIsLoaded(true);
this._dispatcher.updateChosenAssetTokenAddress(Side.Deposit, mostPopularTradingPairTokens[0].address);
this._dispatcher.updateChosenAssetTokenAddress(Side.Receive, mostPopularTradingPairTokens[1].address);
this._dispatcher.updateBlockchainIsLoaded(true);
}
private async instantiateContractIfExistsAsync(artifact: any, address?: string): Promise<ContractInstance> {
private async _instantiateContractIfExistsAsync(artifact: any, address?: string): Promise<ContractInstance> {
const c = await contract(artifact);
const providerObj = this.web3Wrapper.getProviderObj();
const providerObj = this._web3Wrapper.getProviderObj();
c.setProvider(providerObj);
const artifactNetworkConfigs = artifact.networks[this.networkId];

24
packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
View File

@@ -31,7 +31,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
const hasWalletAddress = this.props.userAddress !== '';
return (
<Dialog
title={this.getTitle(hasWalletAddress)}
title={this._getTitle(hasWalletAddress)}
titleStyle={{fontWeight: 100}}
actions={dialogActions}
open={this.props.isOpen}
@@ -40,12 +40,12 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
autoScrollBodyContent={true}
>
<div className="pt2" style={{color: colors.grey700}}>
{this.renderExplanation(hasWalletAddress)}
{this._renderExplanation(hasWalletAddress)}
</div>
</Dialog>
);
}
private getTitle(hasWalletAddress: boolean) {
private _getTitle(hasWalletAddress: boolean) {
if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
return '0x smart contracts not found';
} else if (!hasWalletAddress) {
@@ -56,18 +56,18 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
return 'Unexpected error';
}
}
private renderExplanation(hasWalletAddress: boolean) {
private _renderExplanation(hasWalletAddress: boolean) {
if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
return this.renderContractsNotDeployedExplanation();
return this._renderContractsNotDeployedExplanation();
} else if (!hasWalletAddress) {
return this.renderNoWalletFoundExplanation();
return this._renderNoWalletFoundExplanation();
} else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
return this.renderDisconnectedFromNode();
return this._renderDisconnectedFromNode();
} else {
return this.renderUnexpectedErrorExplanation();
return this._renderUnexpectedErrorExplanation();
}
}
private renderDisconnectedFromNode() {
private _renderDisconnectedFromNode() {
return (
<div>
You were disconnected from the backing Ethereum node.
@@ -78,14 +78,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
</div>
);
}
private renderUnexpectedErrorExplanation() {
private _renderUnexpectedErrorExplanation() {
return (
<div>
We encountered an unexpected error. Please try refreshing the page.
</div>
);
}
private renderNoWalletFoundExplanation() {
private _renderNoWalletFoundExplanation() {
return (
<div>
<div>
@@ -122,7 +122,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
</div>
);
}
private renderContractsNotDeployedExplanation() {
private _renderContractsNotDeployedExplanation() {
return (
<div>
<div>

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

@@ -37,13 +37,13 @@ export class EthWethConversionDialog extends
<FlatButton
key="cancel"
label="Cancel"
onTouchTap={this.onCancel.bind(this)}
onTouchTap={this._onCancel.bind(this)}
/>,
<FlatButton
key="convert"
label="Convert"
primary={true}
onTouchTap={this.onConvertClick.bind(this)}
onTouchTap={this._onConvertClick.bind(this)}
/>,
];
const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
@@ -55,11 +55,11 @@ export class EthWethConversionDialog extends
contentStyle={{width: 448}}
open={this.props.isOpen}
>
{this.renderConversionDialogBody()}
{this._renderConversionDialogBody()}
</Dialog>
);
}
private renderConversionDialogBody() {
private _renderConversionDialogBody() {
const explanation = this.props.direction === Side.Deposit ?
'Convert your Ether into a tokenized, tradable form.' :
'Convert your Wrapped Ether back into it\'s native form.';
@@ -71,14 +71,14 @@ export class EthWethConversionDialog extends
</div>
<div className="mx-auto" style={{maxWidth: 312}}>
<div className="flex">
{this.renderCurrency(isWrappedVersion)}
{this._renderCurrency(isWrappedVersion)}
<div style={{paddingTop: 68}}>
<i
style={{fontSize: 28, color: colors.darkBlue}}
className="zmdi zmdi-arrow-right"
/>
</div>
{this.renderCurrency(!isWrappedVersion)}
{this._renderCurrency(!isWrappedVersion)}
</div>
<div
className="pt2 mx-auto"
@@ -91,14 +91,14 @@ export class EthWethConversionDialog extends
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
shouldCheckBalance={true}
shouldCheckAllowance={false}
onChange={this.onValueChange.bind(this)}
onChange={this._onValueChange.bind(this)}
amount={this.state.value}
onVisitBalancesPageClick={this.props.onCancelled}
/> :
<EthAmountInput
balance={this.props.etherBalance}
amount={this.state.value}
onChange={this.onValueChange.bind(this)}
onChange={this._onValueChange.bind(this)}
shouldCheckBalance={true}
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
onVisitBalancesPageClick={this.props.onCancelled}
@@ -112,7 +112,7 @@ export class EthWethConversionDialog extends
{this.props.direction === Side.Receive &&
<div
className="right"
onClick={this.onMaxClick.bind(this)}
onClick={this._onMaxClick.bind(this)}
style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}}
>
Max
@@ -124,7 +124,7 @@ export class EthWethConversionDialog extends
</div>
);
}
private renderCurrency(isWrappedVersion: boolean) {
private _renderCurrency(isWrappedVersion: boolean) {
const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether';
const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png';
const symbol = isWrappedVersion ? 'WETH' : 'ETH';
@@ -145,18 +145,18 @@ export class EthWethConversionDialog extends
</div>
);
}
private onMaxClick() {
private _onMaxClick() {
this.setState({
value: this.props.tokenState.balance,
});
}
private onValueChange(isValid: boolean, amount?: BigNumber) {
private _onValueChange(isValid: boolean, amount?: BigNumber) {
this.setState({
value: amount,
hasErrors: !isValid,
});
}
private onConvertClick() {
private _onConvertClick() {
if (this.state.hasErrors) {
this.setState({
shouldShowIncompleteErrs: true,
@@ -169,7 +169,7 @@ export class EthWethConversionDialog extends
this.props.onComplete(this.props.direction, value);
}
}
private onCancel() {
private _onCancel() {
this.setState({
value: undefined,
});

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

@@ -62,7 +62,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
<FlatButton
key="ledgerConnectCancel"
label="Cancel"
onTouchTap={this.onClose.bind(this)}
onTouchTap={this._onClose.bind(this)}
/>,
];
const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ?
@@ -74,22 +74,22 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
titleStyle={{fontWeight: 100}}
actions={dialogActions}
open={this.props.isOpen}
onRequestClose={this.onClose.bind(this)}
onRequestClose={this._onClose.bind(this)}
autoScrollBodyContent={true}
bodyStyle={{paddingBottom: 0}}
>
<div style={{color: colors.grey700, paddingTop: 1}}>
{this.state.stepIndex === LedgerSteps.CONNECT &&
this.renderConnectStep()
this._renderConnectStep()
}
{this.state.stepIndex === LedgerSteps.SELECT_ADDRESS &&
this.renderSelectAddressStep()
this._renderSelectAddressStep()
}
</div>
</Dialog>
);
}
private renderConnectStep() {
private _renderConnectStep() {
return (
<div>
<div className="h4 pt3">
@@ -113,7 +113,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
labelReady="Connect to Ledger"
labelLoading="Connecting..."
labelComplete="Connected!"
onClickAsyncFn={this.onConnectLedgerClickAsync.bind(this, true)}
onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
/>
{this.state.didConnectFail &&
<div className="pt2 left-align" style={{color: colors.red200}}>
@@ -124,13 +124,13 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
</div>
);
}
private renderSelectAddressStep() {
private _renderSelectAddressStep() {
return (
<div>
<div>
<Table
bodyStyle={{height: 300}}
onRowSelection={this.onAddressSelected.bind(this)}
onRowSelection={this._onAddressSelected.bind(this)}
>
<TableHeader displaySelectAll={false}>
<TableRow>
@@ -139,7 +139,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
</TableRow>
</TableHeader>
<TableBody>
{this.renderAddressTableRows()}
{this._renderAddressTableRows()}
</TableBody>
</Table>
</div>
@@ -151,7 +151,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
floatingLabelText="Update path derivation (advanced)"
value={this.state.derivationPath}
errorText={this.state.derivationErrMsg}
onChange={this.onDerivationPathChanged.bind(this)}
onChange={this._onDerivationPathChanged.bind(this)}
/>
</div>
<div className="pl2" style={{paddingTop: 28}}>
@@ -159,14 +159,14 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
labelReady="Update"
labelLoading="Updating..."
labelComplete="Updated!"
onClickAsyncFn={this.onFetchAddressesForDerivationPathAsync.bind(this, true)}
onClickAsyncFn={this._onFetchAddressesForDerivationPathAsync.bind(this, true)}
/>
</div>
</div>
</div>
);
}
private renderAddressTableRows() {
private _renderAddressTableRows() {
const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
const balance = this.state.addressBalances[i];
const addressTooltipId = `address-${userAddress}`;
@@ -201,14 +201,14 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
});
return rows;
}
private onClose() {
private _onClose() {
this.setState({
didConnectFail: false,
});
const isOpen = false;
this.props.toggleDialogFn(isOpen);
}
private onAddressSelected(selectedRowIndexes: number[]) {
private _onAddressSelected(selectedRowIndexes: number[]) {
const selectedRowIndex = selectedRowIndexes[0];
this.props.blockchain.updateLedgerDerivationIndex(selectedRowIndex);
const selectedAddress = this.state.userAddresses[selectedRowIndex];
@@ -222,13 +222,13 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
const isOpen = false;
this.props.toggleDialogFn(isOpen);
}
private async onFetchAddressesForDerivationPathAsync() {
private async _onFetchAddressesForDerivationPathAsync() {
const currentlySetPath = this.props.blockchain.getLedgerDerivationPathIfExists();
if (currentlySetPath === this.state.derivationPath) {
return;
}
this.props.blockchain.updateLedgerDerivationPathIfExists(this.state.derivationPath);
const didSucceed = await this.fetchAddressesAndBalancesAsync();
const didSucceed = await this._fetchAddressesAndBalancesAsync();
if (!didSucceed) {
this.setState({
derivationErrMsg: 'Failed to connect to Ledger.',
@@ -236,11 +236,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
}
return didSucceed;
}
private async fetchAddressesAndBalancesAsync() {
private async _fetchAddressesAndBalancesAsync() {
let userAddresses: string[];
const addressBalances: BigNumber[] = [];
try {
userAddresses = await this.getUserAddressesAsync();
userAddresses = await this._getUserAddressesAsync();
for (const address of userAddresses) {
const balance = await this.props.blockchain.getBalanceInEthAsync(address);
addressBalances.push(balance);
@@ -258,7 +258,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
});
return true;
}
private onDerivationPathChanged(e: any, derivationPath: string) {
private _onDerivationPathChanged(e: any, derivationPath: string) {
let derivationErrMsg = '';
if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) {
derivationErrMsg = 'Must be valid Ethereum path.';
@@ -269,8 +269,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
derivationErrMsg,
});
}
private async onConnectLedgerClickAsync() {
const didSucceed = await this.fetchAddressesAndBalancesAsync();
private async _onConnectLedgerClickAsync() {
const didSucceed = await this._fetchAddressesAndBalancesAsync();
if (didSucceed) {
this.setState({
stepIndex: LedgerSteps.SELECT_ADDRESS,
@@ -278,7 +278,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
}
return didSucceed;
}
private async getUserAddressesAsync(): Promise<string[]> {
private async _getUserAddressesAsync(): Promise<string[]> {
let userAddresses: string[];
userAddresses = await this.props.blockchain.getUserAccountsAsync();

26
packages/website/ts/components/dialogs/send_dialog.tsx
View File

@@ -36,14 +36,14 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
<FlatButton
key="cancelTransfer"
label="Cancel"
onTouchTap={this.onCancel.bind(this)}
onTouchTap={this._onCancel.bind(this)}
/>,
<FlatButton
key="sendTransfer"
disabled={this.hasErrors()}
disabled={this._hasErrors()}
label="Send"
primary={true}
onTouchTap={this.onSendClick.bind(this)}
onTouchTap={this._onSendClick.bind(this)}
/>,
];
return (
@@ -53,17 +53,17 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
actions={transferDialogActions}
open={this.props.isOpen}
>
{this.renderSendDialogBody()}
{this._renderSendDialogBody()}
</Dialog>
);
}
private renderSendDialogBody() {
private _renderSendDialogBody() {
return (
<div className="mx-auto" style={{maxWidth: 300}}>
<div style={{height: 80}}>
<AddressInput
initialAddress={this.state.recipient}
updateAddress={this.onRecipientChange.bind(this)}
updateAddress={this._onRecipientChange.bind(this)}
isRequired={true}
label={'Recipient address'}
hintText={'Address'}
@@ -76,27 +76,27 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
shouldCheckBalance={true}
shouldCheckAllowance={false}
onChange={this.onValueChange.bind(this)}
onChange={this._onValueChange.bind(this)}
amount={this.state.value}
onVisitBalancesPageClick={this.props.onCancelled}
/>
</div>
);
}
private onRecipientChange(recipient?: string) {
private _onRecipientChange(recipient?: string) {
this.setState({
shouldShowIncompleteErrs: false,
recipient,
});
}
private onValueChange(isValid: boolean, amount?: BigNumber) {
private _onValueChange(isValid: boolean, amount?: BigNumber) {
this.setState({
isAmountValid: isValid,
value: amount,
});
}
private onSendClick() {
if (this.hasErrors()) {
private _onSendClick() {
if (this._hasErrors()) {
this.setState({
shouldShowIncompleteErrs: true,
});
@@ -109,13 +109,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
this.props.onComplete(this.state.recipient, value);
}
}
private onCancel() {
private _onCancel() {
this.setState({
value: undefined,
});
this.props.onCancelled();
}
private hasErrors() {
private _hasErrors() {
return _.isUndefined(this.state.recipient) ||
_.isUndefined(this.state.value) ||
!this.state.isAmountValid;

6
packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
View File

@@ -41,12 +41,12 @@ export class TrackTokenConfirmationDialog extends
<FlatButton
key="trackNo"
label="No"
onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, false)}
onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
/>,
<FlatButton
key="trackYes"
label="Yes"
onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, true)}
onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
/>,
]}
open={this.props.isOpen}
@@ -64,7 +64,7 @@ export class TrackTokenConfirmationDialog extends
</Dialog>
);
}
private async onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
if (!didUserAcceptTracking) {
this.props.onToggleDialog(didUserAcceptTracking);
return;

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

@@ -59,13 +59,13 @@ export class EthWethConversionButton extends
labelStyle={labelStyle}
disabled={this.props.isDisabled || this.state.isEthConversionHappening}
label={this.state.isEthConversionHappening ? inProgressLabel : callToActionLabel}
onClick={this.toggleConversionDialog.bind(this)}
onClick={this._toggleConversionDialog.bind(this)}
/>
<EthWethConversionDialog
direction={this.props.direction}
isOpen={this.state.isEthConversionDialogVisible}
onComplete={this.onConversionAmountSelectedAsync.bind(this)}
onCancelled={this.toggleConversionDialog.bind(this)}
onComplete={this._onConversionAmountSelectedAsync.bind(this)}
onCancelled={this._toggleConversionDialog.bind(this)}
etherBalance={this.props.userEtherBalance}
token={this.props.ethToken}
tokenState={this.props.ethTokenState}
@@ -73,16 +73,16 @@ export class EthWethConversionButton extends
</div>
);
}
private toggleConversionDialog() {
private _toggleConversionDialog() {
this.setState({
isEthConversionDialogVisible: !this.state.isEthConversionDialogVisible,
});
}
private async onConversionAmountSelectedAsync(direction: Side, value: BigNumber) {
private async _onConversionAmountSelectedAsync(direction: Side, value: BigNumber) {
this.setState({
isEthConversionHappening: true,
});
this.toggleConversionDialog();
this._toggleConversionDialog();
const token = this.props.ethToken;
const tokenState = this.props.ethTokenState;
let balance = tokenState.balance;

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

@@ -61,7 +61,7 @@ interface EthWrappersState {
export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> {
constructor(props: EthWrappersProps) {
super(props);
const outdatedWETHAddresses = this.getOutdatedWETHAddresses();
const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
_.each(outdatedWETHAddresses, outdatedWETHAddress => {
@@ -79,7 +79,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
public componentDidMount() {
window.scrollTo(0, 0);
// tslint:disable-next-line:no-floating-promises
this.fetchOutdatedWETHStateAsync();
this._fetchOutdatedWETHStateAsync();
}
public render() {
const tokens = _.values(this.props.tokenByAddress);
@@ -90,7 +90,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
const etherscanUrl = utils.getEtherScanLinkIfExists(
etherToken.address, this.props.networkId, EtherscanLinkSuffixes.Address,
);
const tokenLabel = this.renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH);
const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH);
return (
<div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}>
<div className="relative">
@@ -125,7 +125,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<TableHeaderColumn>ETH Token</TableHeaderColumn>
<TableHeaderColumn>Balance</TableHeaderColumn>
<TableHeaderColumn className="center">
{this.renderActionColumnTitle(isBidirectional)}
{this._renderActionColumnTitle(isBidirectional)}
</TableHeaderColumn>
</TableRow>
</TableHeader>
@@ -162,7 +162,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</TableRow>
<TableRow key="WETH">
<TableRowColumn className="py1">
{this.renderTokenLink(tokenLabel, etherscanUrl)}
{this._renderTokenLink(tokenLabel, etherscanUrl)}
</TableRowColumn>
<TableRowColumn>
{wethBalance.toFixed(PRECISION)} WETH
@@ -207,12 +207,12 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<TableHeaderColumn>WETH Version</TableHeaderColumn>
<TableHeaderColumn>Balance</TableHeaderColumn>
<TableHeaderColumn className="center">
{this.renderActionColumnTitle(!isBidirectional)}
{this._renderActionColumnTitle(!isBidirectional)}
</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
{this.renderOutdatedWeths(etherToken, etherTokenState)}
{this._renderOutdatedWeths(etherToken, etherTokenState)}
</TableBody>
</Table>
</div>
@@ -220,7 +220,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</div>
);
}
private renderActionColumnTitle(isBidirectional: boolean) {
private _renderActionColumnTitle(isBidirectional: boolean) {
let iconClass = 'zmdi-long-arrow-right';
let leftSymbol = 'WETH';
let rightSymbol = 'ETH';
@@ -242,7 +242,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</div>
);
}
private renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) {
private _renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) {
const rows = _.map(configs.OUTDATED_WRAPPED_ETHERS,
(outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => {
const outdatedWETHIfExists = outdatedWETHByNetworkId[this.props.networkId];
@@ -269,17 +269,17 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH,
).toFixed(PRECISION) :
undefined;
const onConversionSuccessful = this.onOutdatedConversionSuccessfulAsync.bind(
const onConversionSuccessful = this._onOutdatedConversionSuccessfulAsync.bind(
this, outdatedWETHIfExists.address,
);
const etherscanUrl = utils.getEtherScanLinkIfExists(
outdatedWETHIfExists.address, this.props.networkId, EtherscanLinkSuffixes.Address,
);
const tokenLabel = this.renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH);
const tokenLabel = this._renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH);
return (
<TableRow key={`weth-${outdatedWETHIfExists.address}`}>
<TableRowColumn className="py1">
{this.renderTokenLink(tokenLabel, etherscanUrl)}
{this._renderTokenLink(tokenLabel, etherscanUrl)}
</TableRowColumn>
<TableRowColumn>
{isStateLoaded ?
@@ -305,7 +305,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
});
return rows;
}
private renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) {
private _renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) {
return (
<span>
{_.isUndefined(etherscanUrl) ?
@@ -317,7 +317,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</span>
);
}
private renderToken(name: string, address: string, imgPath: string) {
private _renderToken(name: string, address: string, imgPath: string) {
const tooltipId = `tooltip-${address}`;
return (
<div className="flex">
@@ -340,7 +340,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</div>
);
}
private async onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) {
private async _onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) {
this.setState({
outdatedWETHAddressToIsStateLoaded: {
...this.state.outdatedWETHAddressToIsStateLoaded,
@@ -364,8 +364,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
},
});
}
private async fetchOutdatedWETHStateAsync() {
const outdatedWETHAddresses = this.getOutdatedWETHAddresses();
private async _fetchOutdatedWETHStateAsync() {
const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
for (const address of outdatedWETHAddresses) {
@@ -383,7 +383,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
outdatedWETHAddressToIsStateLoaded,
});
}
private getOutdatedWETHAddresses(): string[] {
private _getOutdatedWETHAddresses(): string[] {
const outdatedWETHAddresses = _.compact(_.map(configs.OUTDATED_WRAPPED_ETHERS,
outdatedWrappedEtherByNetwork => {
const outdatedWrappedEtherIfExists = outdatedWrappedEtherByNetwork[this.props.networkId];

70
packages/website/ts/components/fill_order.tsx
View File

@@ -66,7 +66,7 @@ interface FillOrderState {
}
export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
private validator: SchemaValidator;
private _validator: SchemaValidator;
constructor(props: FillOrderProps) {
super(props);
this.state = {
@@ -87,12 +87,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
isConfirmingTokenTracking: false,
tokensToTrack: [],
};
this.validator = new SchemaValidator();
this._validator = new SchemaValidator();
}
public componentWillMount() {
if (!_.isEmpty(this.state.orderJSON)) {
// tslint:disable-next-line:no-floating-promises
this.validateFillOrderFireAndForgetAsync(this.state.orderJSON);
this._validateFillOrderFireAndForgetAsync(this.state.orderJSON);
}
}
public componentDidMount() {
@@ -115,15 +115,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
tokenByAddress={this.props.tokenByAddress}
networkId={this.props.networkId}
orderJSON={this.state.orderJSON}
onFillOrderJSONChanged={this.onFillOrderJSONChanged.bind(this)}
onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
/>
{this.renderOrderJsonNotices()}
{this._renderOrderJsonNotices()}
</div>
}
<div>
{!_.isUndefined(this.state.parsedOrder) && this.state.didOrderValidationRun
&& this.state.areAllInvolvedTokensTracked &&
this.renderVisualOrder()
this._renderVisualOrder()
}
</div>
{this.props.isOrderInUrl &&
@@ -140,17 +140,17 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
tokenByAddress={this.props.tokenByAddress}
networkId={this.props.networkId}
orderJSON={this.state.orderJSON}
onFillOrderJSONChanged={this.onFillOrderJSONChanged.bind(this)}
onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
/>
</CardText>
</Card>
{this.renderOrderJsonNotices()}
{this._renderOrderJsonNotices()}
</div>
}
</div>
<FillWarningDialog
isOpen={this.state.isFillWarningDialogOpen}
onToggleDialog={this.onFillWarningClosed.bind(this)}
onToggleDialog={this._onFillWarningClosed.bind(this)}
/>
<TrackTokenConfirmationDialog
userAddress={this.props.userAddress}
@@ -160,12 +160,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
dispatcher={this.props.dispatcher}
tokens={this.state.tokensToTrack}
isOpen={this.state.isConfirmingTokenTracking}
onToggleDialog={this.onToggleTrackConfirmDialog.bind(this)}
onToggleDialog={this._onToggleTrackConfirmDialog.bind(this)}
/>
</div>
);
}
private renderOrderJsonNotices() {
private _renderOrderJsonNotices() {
return (
<div>
{!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun &&
@@ -182,7 +182,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
</div>
);
}
private renderVisualOrder() {
private _renderVisualOrder() {
const takerTokenAddress = this.state.parsedOrder.taker.token.address;
const takerToken = this.props.tokenByAddress[takerTokenAddress];
const orderTakerAmount = new BigNumber(this.state.parsedOrder.taker.amount);
@@ -211,7 +211,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
let orderReceiveAmount = 0;
if (!_.isUndefined(this.props.orderFillAmount)) {
const orderReceiveAmountBigNumber = exchangeRate.mul(this.props.orderFillAmount);
orderReceiveAmount = this.formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals);
orderReceiveAmount = this._formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals);
}
const isUserMaker = !_.isUndefined(this.state.parsedOrder) &&
this.state.parsedOrder.maker.address === this.props.userAddress;
@@ -261,7 +261,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
<div className="clearfix mx-auto relative" style={{width: 235, height: 108}}>
<TokenAmountInput
label="Fill amount"
onChange={this.onFillAmountChange.bind(this)}
onChange={this._onFillAmountChange.bind(this)}
shouldShowIncompleteErrs={false}
token={fillToken}
tokenState={fillTokenState}
@@ -284,12 +284,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
style={{width: '100%'}}
disabled={this.state.isCancelling}
label={this.state.isCancelling ? 'Cancelling order...' : 'Cancel order'}
onClick={this.onCancelOrderClickFireAndForgetAsync.bind(this)}
onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)}
/>
{this.state.didCancelOrderSucceed &&
<Alert
type={AlertTypes.SUCCESS}
message={this.renderCancelSuccessMsg()}
message={this._renderCancelSuccessMsg()}
/>
}
</div> :
@@ -298,7 +298,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
style={{width: '100%'}}
disabled={this.state.isFilling}
label={this.state.isFilling ? 'Filling order...' : 'Fill order'}
onClick={this.onFillOrderClick.bind(this)}
onClick={this._onFillOrderClick.bind(this)}
/>
{!_.isEmpty(this.state.globalErrMsg) &&
<Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
@@ -306,7 +306,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
{this.state.didFillOrderSucceed &&
<Alert
type={AlertTypes.SUCCESS}
message={this.renderFillSuccessMsg()}
message={this._renderFillSuccessMsg()}
/>
}
</div>
@@ -315,7 +315,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
</div>
);
}
private renderFillSuccessMsg() {
private _renderFillSuccessMsg() {
return (
<div>
Order successfully filled. See the trade details in your{' '}
@@ -328,45 +328,45 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
</div>
);
}
private renderCancelSuccessMsg() {
private _renderCancelSuccessMsg() {
return (
<div>
Order successfully cancelled.
</div>
);
}
private onFillOrderClick() {
private _onFillOrderClick() {
if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) {
this.setState({
isFillWarningDialogOpen: true,
});
} else {
// tslint:disable-next-line:no-floating-promises
this.onFillOrderClickFireAndForgetAsync();
this._onFillOrderClickFireAndForgetAsync();
}
}
private onFillWarningClosed(didUserCancel: boolean) {
private _onFillWarningClosed(didUserCancel: boolean) {
this.setState({
isFillWarningDialogOpen: false,
});
if (!didUserCancel) {
// tslint:disable-next-line:no-floating-promises
this.onFillOrderClickFireAndForgetAsync();
this._onFillOrderClickFireAndForgetAsync();
}
}
private onFillAmountChange(isValid: boolean, amount?: BigNumber) {
private _onFillAmountChange(isValid: boolean, amount?: BigNumber) {
this.props.dispatcher.updateOrderFillAmount(amount);
}
private onFillOrderJSONChanged(event: any) {
private _onFillOrderJSONChanged(event: any) {
const orderJSON = event.target.value;
this.setState({
didOrderValidationRun: _.isEmpty(orderJSON) && _.isEmpty(this.state.orderJSONErrMsg),
didFillOrderSucceed: false,
});
// tslint:disable-next-line:no-floating-promises
this.validateFillOrderFireAndForgetAsync(orderJSON);
this._validateFillOrderFireAndForgetAsync(orderJSON);
}
private async checkForUntrackedTokensAndAskToAdd() {
private async _checkForUntrackedTokensAndAskToAdd() {
if (!_.isEmpty(this.state.orderJSONErrMsg)) {
return;
}
@@ -410,12 +410,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
});
}
}
private async validateFillOrderFireAndForgetAsync(orderJSON: string) {
private async _validateFillOrderFireAndForgetAsync(orderJSON: string) {
let orderJSONErrMsg = '';
let parsedOrder: Order;
try {
const order = JSON.parse(orderJSON);
const validationResult = this.validator.validate(order, orderSchema);
const validationResult = this._validator.validate(order, orderSchema);
if (validationResult.errors.length > 0) {
orderJSONErrMsg = 'Submitted order JSON is not a valid order';
utils.consoleLog(`Unexpected order JSON validation error: ${validationResult.errors.join(', ')}`);
@@ -508,9 +508,9 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
unavailableTakerAmount,
});
await this.checkForUntrackedTokensAndAskToAdd();
await this._checkForUntrackedTokensAndAskToAdd();
}
private async onFillOrderClickFireAndForgetAsync(): Promise<void> {
private async _onFillOrderClickFireAndForgetAsync(): Promise<void> {
if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return;
@@ -601,7 +601,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return;
}
}
private async onCancelOrderClickFireAndForgetAsync(): Promise<void> {
private async _onCancelOrderClickFireAndForgetAsync(): Promise<void> {
if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return;
@@ -684,12 +684,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return;
}
}
private formatCurrencyAmount(amount: BigNumber, decimals: number): number {
private _formatCurrencyAmount(amount: BigNumber, decimals: number): number {
const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000;
return roundedUnitAmount;
}
private onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) {
private _onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) {
if (!didConfirmTokenTracking) {
this.setState({
orderJSON: '',

22
packages/website/ts/components/footer.tsx
View File

@@ -133,20 +133,20 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
<div className="col lg-col-4 md-col-4 col-12">
<div className="lg-right md-right sm-center">
{this.renderHeader(Sections.Documentation)}
{_.map(menuItemsBySection[Sections.Documentation], this.renderMenuItem.bind(this))}
{this._renderHeader(Sections.Documentation)}
{_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))}
</div>
</div>
<div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
<div className="lg-right md-right sm-center">
{this.renderHeader(Sections.Community)}
{_.map(menuItemsBySection[Sections.Community], this.renderMenuItem.bind(this))}
{this._renderHeader(Sections.Community)}
{_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))}
</div>
</div>
<div className="col lg-col-4 md-col-4 col-12">
<div className="lg-right md-right sm-center">
{this.renderHeader(Sections.Organization)}
{_.map(menuItemsBySection[Sections.Organization], this.renderMenuItem.bind(this))}
{this._renderHeader(Sections.Organization)}
{_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
</div>
</div>
</div>
@@ -154,14 +154,14 @@ export class Footer extends React.Component<FooterProps, FooterState> {
</div>
);
}
private renderIcon(fileName: string) {
private _renderIcon(fileName: string) {
return (
<div style={{height: ICON_DIMENSION, width: ICON_DIMENSION}}>
<img src={`/images/social/${fileName}`} style={{width: ICON_DIMENSION}} />
</div>
);
}
private renderMenuItem(item: FooterMenuItem) {
private _renderMenuItem(item: FooterMenuItem) {
const iconIfExists = titleToIcon[item.title];
return (
<div
@@ -180,7 +180,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<div className="sm-mx-auto" style={{width: 65}}>
<div className="flex">
<div className="pr1">
{this.renderIcon(iconIfExists)}
{this._renderIcon(iconIfExists)}
</div>
<div>{item.title}</div>
</div>
@@ -196,7 +196,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<div>
{!_.isUndefined(iconIfExists) &&
<div className="pr1">
{this.renderIcon(iconIfExists)}
{this._renderIcon(iconIfExists)}
</div>
}
{item.title}
@@ -206,7 +206,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
</div>
);
}
private renderHeader(title: string) {
private _renderHeader(title: string) {
const headerStyle = {
textTransform: 'uppercase',
color: colors.grey400,

52
packages/website/ts/components/generate_order/asset_picker.tsx
View File

@@ -47,7 +47,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
public static defaultProps: Partial<AssetPickerProps> = {
tokenVisibility: TokenVisibility.ALL,
};
private dialogConfigsByAssetView: {[assetView: string]: DialogConfigs};
private _dialogConfigsByAssetView: {[assetView: string]: DialogConfigs};
constructor(props: AssetPickerProps) {
super(props);
this.state = {
@@ -56,7 +56,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
chosenTrackTokenAddress: undefined,
isAddingTokenToTracked: false,
};
this.dialogConfigsByAssetView = {
this._dialogConfigsByAssetView = {
[AssetViews.ASSET_PICKER]: {
title: 'Select token',
isModal: false,
@@ -74,19 +74,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
<FlatButton
key="noTracking"
label="No"
onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, false)}
onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
/>,
<FlatButton
key="yesTrack"
label="Yes"
onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, true)}
onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
/>,
],
},
};
}
public render() {
const dialogConfigs: DialogConfigs = this.dialogConfigsByAssetView[this.state.assetView];
const dialogConfigs: DialogConfigs = this._dialogConfigsByAssetView[this.state.assetView];
return (
<Dialog
title={dialogConfigs.title}
@@ -94,25 +94,25 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
modal={dialogConfigs.isModal}
open={this.props.isOpen}
actions={dialogConfigs.actions}
onRequestClose={this.onCloseDialog.bind(this)}
onRequestClose={this._onCloseDialog.bind(this)}
>
{this.state.assetView === AssetViews.ASSET_PICKER &&
this.renderAssetPicker()
this._renderAssetPicker()
}
{this.state.assetView === AssetViews.NEW_TOKEN_FORM &&
<NewTokenForm
blockchain={this.props.blockchain}
onNewTokenSubmitted={this.onNewTokenSubmitted.bind(this)}
onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)}
tokenByAddress={this.props.tokenByAddress}
/>
}
{this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN &&
this.renderConfirmTrackToken()
this._renderConfirmTrackToken()
}
</Dialog>
);
}
private renderConfirmTrackToken() {
private _renderConfirmTrackToken() {
const token = this.props.tokenByAddress[this.state.chosenTrackTokenAddress];
return (
<TrackTokenConfirmation
@@ -123,17 +123,17 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
/>
);
}
private renderAssetPicker() {
private _renderAssetPicker() {
return (
<div
className="clearfix flex flex-wrap"
style={{overflowY: 'auto', maxWidth: 720, maxHeight: 356, marginBottom: 10}}
>
{this.renderGridTiles()}
{this._renderGridTiles()}
</div>
);
}
private renderGridTiles() {
private _renderGridTiles() {
let isHovered;
let tileStyles;
const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => {
@@ -151,9 +151,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
key={address}
style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}}
className="p2 mx-auto"
onClick={this.onChooseToken.bind(this, address)}
onMouseEnter={this.onToggleHover.bind(this, address, true)}
onMouseLeave={this.onToggleHover.bind(this, address, false)}
onClick={this._onChooseToken.bind(this, address)}
onMouseEnter={this._onToggleHover.bind(this, address, true)}
onMouseLeave={this._onToggleHover.bind(this, address, false)}
>
<div className="p1 center">
<TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
@@ -174,9 +174,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
key={otherTokenKey}
style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}}
className="p2 mx-auto"
onClick={this.onCustomAssetChosen.bind(this)}
onMouseEnter={this.onToggleHover.bind(this, otherTokenKey, true)}
onMouseLeave={this.onToggleHover.bind(this, otherTokenKey, false)}
onClick={this._onCustomAssetChosen.bind(this)}
onMouseEnter={this._onToggleHover.bind(this, otherTokenKey, true)}
onMouseLeave={this._onToggleHover.bind(this, otherTokenKey, false)}
>
<div className="p1 center">
<i
@@ -190,19 +190,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
}
return gridTiles;
}
private onToggleHover(address: string, isHovered: boolean) {
private _onToggleHover(address: string, isHovered: boolean) {
const hoveredAddress = isHovered ? address : undefined;
this.setState({
hoveredAddress,
});
}
private onCloseDialog() {
private _onCloseDialog() {
this.setState({
assetView: AssetViews.ASSET_PICKER,
});
this.props.onTokenChosen(this.props.currentTokenAddress);
}
private onChooseToken(tokenAddress: string) {
private _onChooseToken(tokenAddress: string) {
const token = this.props.tokenByAddress[tokenAddress];
if (token.isTracked) {
this.props.onTokenChosen(tokenAddress);
@@ -213,12 +213,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
});
}
}
private onCustomAssetChosen() {
private _onCustomAssetChosen() {
this.setState({
assetView: AssetViews.NEW_TOKEN_FORM,
});
}
private onNewTokenSubmitted(newToken: Token, newTokenState: TokenState) {
private _onNewTokenSubmitted(newToken: Token, newTokenState: TokenState) {
this.props.dispatcher.updateTokenStateByAddress({
[newToken.address]: newTokenState,
});
@@ -229,14 +229,14 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
});
this.props.onTokenChosen(newToken.address);
}
private async onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
if (!didUserAcceptTracking) {
this.setState({
isAddingTokenToTracked: false,
assetView: AssetViews.ASSET_PICKER,
chosenTrackTokenAddress: undefined,
});
this.onCloseDialog();
this._onCloseDialog();
return;
}
this.setState({

28
packages/website/ts/components/generate_order/generate_order_form.tsx
View File

@@ -63,7 +63,7 @@ interface GenerateOrderFormState {
}
export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> {
private validator: SchemaValidator;
private _validator: SchemaValidator;
constructor(props: GenerateOrderFormProps) {
super(props);
this.state = {
@@ -71,7 +71,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
shouldShowIncompleteErrs: false,
signingState: SigningState.UNSIGNED,
};
this.validator = new SchemaValidator();
this._validator = new SchemaValidator();
}
public componentDidMount() {
window.scrollTo(0, 0);
@@ -113,7 +113,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
token={depositToken}
tokenState={depositTokenState}
amount={this.props.sideToAssetToken[Side.Deposit].amount}
onChange={this.onTokenAmountChange.bind(this, depositToken, Side.Deposit)}
onChange={this._onTokenAmountChange.bind(this, depositToken, Side.Deposit)}
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
shouldCheckBalance={true}
shouldCheckAllowance={true}
@@ -144,7 +144,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
token={receiveToken}
tokenState={receiveTokenState}
amount={this.props.sideToAssetToken[Side.Receive].amount}
onChange={this.onTokenAmountChange.bind(this, receiveToken, Side.Receive)}
onChange={this._onTokenAmountChange.bind(this, receiveToken, Side.Receive)}
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
shouldCheckBalance={false}
shouldCheckAllowance={false}
@@ -165,7 +165,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
<IdenticonAddressInput
label="Taker"
initialAddress={this.props.orderTakerAddress}
updateOrderAddress={this.updateOrderAddress.bind(this)}
updateOrderAddress={this._updateOrderAddress.bind(this)}
/>
<div className="pt3">
<div className="pl1">
@@ -189,7 +189,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
labelReady="Sign hash"
labelLoading="Signing..."
labelComplete="Hash signed!"
onClickAsyncFn={this.onSignClickedAsync.bind(this)}
onClickAsyncFn={this._onSignClickedAsync.bind(this)}
/>
</div>
{this.state.globalErrMsg !== '' &&
@@ -202,7 +202,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
titleStyle={{fontWeight: 100}}
modal={false}
open={this.state.signingState === SigningState.SIGNED}
onRequestClose={this.onCloseOrderJSONDialog.bind(this)}
onRequestClose={this._onCloseOrderJSONDialog.bind(this)}
>
<OrderJSON
exchangeContractIfExists={exchangeContractIfExists}
@@ -222,10 +222,10 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
</div>
);
}
private onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) {
private _onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) {
this.props.dispatcher.updateChosenAssetToken(side, {address: token.address, amount});
}
private onCloseOrderJSONDialog() {
private _onCloseOrderJSONDialog() {
// Upon closing the order JSON dialog, we update the orderSalt stored in the Redux store
// with a new value so that if a user signs the identical order again, the newly signed
// orderHash will not collide with the previously generated orderHash.
@@ -234,7 +234,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
signingState: SigningState.UNSIGNED,
});
}
private async onSignClickedAsync(): Promise<boolean> {
private async _onSignClickedAsync(): Promise<boolean> {
if (this.props.blockchainErr !== BlockchainErrs.NoError) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return false;
@@ -249,7 +249,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
debitToken.amount.gt(0) && receiveAmount.gt(0) &&
this.props.userAddress !== '' &&
debitBalance.gte(debitToken.amount) && debitAllowance.gte(debitToken.amount)) {
const didSignSuccessfully = await this.signTransactionAsync();
const didSignSuccessfully = await this._signTransactionAsync();
if (didSignSuccessfully) {
this.setState({
globalErrMsg: '',
@@ -270,7 +270,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
return false;
}
}
private async signTransactionAsync(): Promise<boolean> {
private async _signTransactionAsync(): Promise<boolean> {
this.setState({
signingState: SigningState.SIGNING,
});
@@ -308,7 +308,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
this.props.userAddress, hashData.makerFee, hashData.takerFee,
hashData.feeRecipientAddress, signatureData, this.props.tokenByAddress,
hashData.orderSalt);
const validationResult = this.validator.validate(order, orderSchema);
const validationResult = this._validator.validate(order, orderSchema);
if (validationResult.errors.length > 0) {
globalErrMsg = 'Order signing failed. Please refresh and try again';
utils.consoleLog(`Unexpected error occured: Order validation failed:
@@ -331,7 +331,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
});
return globalErrMsg === '';
}
private updateOrderAddress(address?: string): void {
private _updateOrderAddress(address?: string): void {
if (!_.isUndefined(address)) {
this.props.dispatcher.updateOrderTakerAddress(address);
}

38
packages/website/ts/components/generate_order/new_token_form.tsx
View File

@@ -53,7 +53,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
floatingLabelText={<RequiredLabel label="Name" />}
value={this.state.name}
errorText={this.state.nameErrText}
onChange={this.onTokenNameChanged.bind(this)}
onChange={this._onTokenNameChanged.bind(this)}
/>
</div>
<div>
@@ -63,7 +63,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
floatingLabelText={<RequiredLabel label="Symbol" />}
value={this.state.symbol}
errorText={this.state.symbolErrText}
onChange={this.onTokenSymbolChanged.bind(this)}
onChange={this._onTokenSymbolChanged.bind(this)}
/>
</div>
<div>
@@ -72,7 +72,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
label="Contract address"
initialAddress=""
shouldShowIncompleteErrs={this.state.shouldShowAddressIncompleteErr}
updateAddress={this.onTokenAddressChanged.bind(this)}
updateAddress={this._onTokenAddressChanged.bind(this)}
/>
</div>
<div>
@@ -82,7 +82,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
floatingLabelText={<RequiredLabel label="Decimals" />}
value={this.state.decimals}
errorText={this.state.decimalsErrText}
onChange={this.onTokenDecimalsChanged.bind(this)}
onChange={this._onTokenDecimalsChanged.bind(this)}
/>
</div>
<div className="pt2 mx-auto" style={{width: 120}}>
@@ -90,7 +90,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
labelReady="Add"
labelLoading="Adding..."
labelComplete="Added!"
onClickAsyncFn={this.onAddNewTokenClickAsync.bind(this)}
onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)}
/>
</div>
{this.state.globalErrMsg !== '' &&
@@ -99,11 +99,11 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
</div>
);
}
private async onAddNewTokenClickAsync() {
private async _onAddNewTokenClickAsync() {
// Trigger validation of name and symbol
this.onTokenNameChanged(undefined, this.state.name);
this.onTokenSymbolChanged(undefined, this.state.symbol);
this.onTokenDecimalsChanged(undefined, this.state.decimals);
this._onTokenNameChanged(undefined, this.state.name);
this._onTokenSymbolChanged(undefined, this.state.symbol);
this._onTokenDecimalsChanged(undefined, this.state.decimals);
const isAddressIncomplete = this.state.address === '';
let doesContractExist = false;
@@ -160,7 +160,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
};
this.props.onNewTokenSubmitted(newToken, newTokenState);
}
private onTokenNameChanged(e: any, name: string) {
private _onTokenNameChanged(e: any, name: string) {
let nameErrText = '';
const maxLength = 30;
const tokens = _.values(this.props.tokenByAddress);
@@ -168,7 +168,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists);
if (name === '') {
nameErrText = 'Name is required';
} else if (!this.isValidName(name)) {
} else if (!this._isValidName(name)) {
nameErrText = 'Name should only contain letters, digits and spaces';
} else if (name.length > maxLength) {
nameErrText = `Max length is ${maxLength}`;
@@ -181,14 +181,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
nameErrText,
});
}
private onTokenSymbolChanged(e: any, symbol: string) {
private _onTokenSymbolChanged(e: any, symbol: string) {
let symbolErrText = '';
const maxLength = 5;
const tokens = _.values(this.props.tokenByAddress);
const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, {symbol}));
if (symbol === '') {
symbolErrText = 'Symbol is required';
} else if (!this.isLetters(symbol)) {
} else if (!this._isLetters(symbol)) {
symbolErrText = 'Can only include letters';
} else if (symbol.length > maxLength) {
symbolErrText = `Max length is ${maxLength}`;
@@ -201,12 +201,12 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
symbolErrText,
});
}
private onTokenDecimalsChanged(e: any, decimals: string) {
private _onTokenDecimalsChanged(e: any, decimals: string) {
let decimalsErrText = '';
const maxLength = 2;
if (decimals === '') {
decimalsErrText = 'Decimals is required';
} else if (!this.isInteger(decimals)) {
} else if (!this._isInteger(decimals)) {
decimalsErrText = 'Must be an integer';
} else if (decimals.length > maxLength) {
decimalsErrText = `Max length is ${maxLength}`;
@@ -217,20 +217,20 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
decimalsErrText,
});
}
private onTokenAddressChanged(address?: string) {
private _onTokenAddressChanged(address?: string) {
if (!_.isUndefined(address)) {
this.setState({
address,
});
}
}
private isValidName(input: string) {
private _isValidName(input: string) {
return /^[a-z0-9 ]+$/i.test(input);
}
private isInteger(input: string) {
private _isInteger(input: string) {
return /^[0-9]+$/i.test(input);
}
private isLetters(input: string) {
private _isLetters(input: string) {
return /^[a-zA-Z]+$/i.test(input);
}
}

4
packages/website/ts/components/inputs/address_input.tsx
View File

@@ -54,12 +54,12 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
floatingLabelText={label}
errorText={this.state.errMsg}
value={this.state.address}
onChange={this.onOrderTakerAddressUpdated.bind(this)}
onChange={this._onOrderTakerAddressUpdated.bind(this)}
/>
</div>
);
}
private onOrderTakerAddressUpdated(e: any) {
private _onOrderTakerAddressUpdated(e: any) {
const address = e.target.value.toLowerCase();
const isValidAddress = addressUtils.isAddress(address) || address === '';
const errMsg = isValidAddress ? '' : 'Invalid ethereum address';

10
packages/website/ts/components/inputs/allowance_toggle.tsx
View File

@@ -46,8 +46,8 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
<div>
<Toggle
disabled={this.state.isSpinnerVisible}
toggled={this.isAllowanceSet()}
onToggle={this.onToggleAllowanceAsync.bind(this, this.props.token)}
toggled={this._isAllowanceSet()}
onToggle={this._onToggleAllowanceAsync.bind(this, this.props.token)}
/>
</div>
{this.state.isSpinnerVisible &&
@@ -58,7 +58,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
</div>
);
}
private async onToggleAllowanceAsync() {
private async _onToggleAllowanceAsync() {
if (this.props.userAddress === '') {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return false;
@@ -69,7 +69,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
});
let newAllowanceAmountInBaseUnits = new BigNumber(0);
if (!this.isAllowanceSet()) {
if (!this._isAllowanceSet()) {
newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
}
try {
@@ -88,7 +88,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
}
}
private isAllowanceSet() {
private _isAllowanceSet() {
return !this.props.tokenState.allowance.eq(0);
}
}

18
packages/website/ts/components/inputs/balance_bounded_input.tsx
View File

@@ -35,7 +35,7 @@ export class BalanceBoundedInput extends
super(props);
const amountString = this.props.amount ? this.props.amount.toString() : '';
this.state = {
errMsg: this.validate(amountString, props.balance),
errMsg: this._validate(amountString, props.balance),
amountString,
};
}
@@ -57,14 +57,14 @@ export class BalanceBoundedInput extends
if (shouldResetState) {
const amountString = nextProps.amount.toString();
this.setState({
errMsg: this.validate(amountString, nextProps.balance),
errMsg: this._validate(amountString, nextProps.balance),
amountString,
});
}
} else if (isCurrentAmountNumeric) {
const amountString = '';
this.setState({
errMsg: this.validate(amountString, nextProps.balance),
errMsg: this._validate(amountString, nextProps.balance),
amountString,
});
}
@@ -87,13 +87,13 @@ export class BalanceBoundedInput extends
errorText={errorText}
value={this.state.amountString}
hintText={<span style={{textTransform: 'capitalize'}}>amount</span>}
onChange={this.onValueChange.bind(this)}
onChange={this._onValueChange.bind(this)}
underlineStyle={{width: 'calc(100% + 50px)'}}
/>
);
}
private onValueChange(e: any, amountString: string) {
const errMsg = this.validate(amountString, this.props.balance);
private _onValueChange(e: any, amountString: string) {
const errMsg = this._validate(amountString, this.props.balance);
this.setState({
amountString,
errMsg,
@@ -106,7 +106,7 @@ export class BalanceBoundedInput extends
}
});
}
private validate(amountString: string, balance: BigNumber): InputErrMsg {
private _validate(amountString: string, balance: BigNumber): InputErrMsg {
if (!utils.isNumeric(amountString)) {
return amountString !== '' ? 'Must be a number' : '';
}
@@ -118,14 +118,14 @@ export class BalanceBoundedInput extends
return (
<span>
Insufficient balance.{' '}
{this.renderIncreaseBalanceLink()}
{this._renderIncreaseBalanceLink()}
</span>
);
}
const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
return errMsg;
}
private renderIncreaseBalanceLink() {
private _renderIncreaseBalanceLink() {
if (this.props.shouldHideVisitBalancesLink) {
return null;
}

4
packages/website/ts/components/inputs/eth_amount_input.tsx
View File

@@ -30,7 +30,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
label={this.props.label}
balance={this.props.balance}
amount={amount}
onChange={this.onChange.bind(this)}
onChange={this._onChange.bind(this)}
shouldCheckBalance={this.props.shouldCheckBalance}
shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
@@ -42,7 +42,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
</div>
);
}
private onChange(isValid: boolean, amount?: BigNumber) {
private _onChange(isValid: boolean, amount?: BigNumber) {
const baseUnitAmountIfExists = _.isUndefined(amount) ?
undefined :
ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);

22
packages/website/ts/components/inputs/expiration_input.tsx
View File

@@ -17,11 +17,11 @@ interface ExpirationInputState {
}
export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> {
private earliestPickableMoment: moment.Moment;
private _earliestPickableMoment: moment.Moment;
constructor(props: ExpirationInputProps) {
super(props);
// Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates
this.earliestPickableMoment = moment().startOf('day');
this._earliestPickableMoment = moment().startOf('day');
const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
@@ -42,8 +42,8 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
mode="landscape"
autoOk={true}
value={date}
onChange={this.onDateChanged.bind(this)}
shouldDisableDate={this.shouldDisableDate.bind(this)}
onChange={this._onDateChanged.bind(this)}
shouldDisableDate={this._shouldDisableDate.bind(this)}
/>
<div
className="absolute"
@@ -58,7 +58,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
hintText="Time"
autoOk={true}
value={time}
onChange={this.onTimeChanged.bind(this)}
onChange={this._onTimeChanged.bind(this)}
/>
<div
className="absolute"
@@ -68,7 +68,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
</div>
</div>
<div
onClick={this.clearDates.bind(this)}
onClick={this._clearDates.bind(this)}
className="col col-1 pt2"
style={{textAlign: 'right'}}
>
@@ -77,10 +77,10 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
</div>
);
}
private shouldDisableDate(date: Date): boolean {
return moment(date).startOf('day').isBefore(this.earliestPickableMoment);
private _shouldDisableDate(date: Date): boolean {
return moment(date).startOf('day').isBefore(this._earliestPickableMoment);
}
private clearDates() {
private _clearDates() {
this.setState({
dateMoment: undefined,
timeMoment: undefined,
@@ -88,7 +88,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
this.props.updateOrderExpiry(defaultDateTime);
}
private onDateChanged(e: any, date: Date) {
private _onDateChanged(e: any, date: Date) {
const dateMoment = moment(date);
this.setState({
dateMoment,
@@ -96,7 +96,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
this.props.updateOrderExpiry(timestamp);
}
private onTimeChanged(e: any, time: Date) {
private _onTimeChanged(e: any, time: Date) {
const timeMoment = moment(time);
this.setState({
timeMoment,

4
packages/website/ts/components/inputs/hash_input.tsx
View File

@@ -27,7 +27,7 @@ interface HashInputState {}
export class HashInput extends React.Component<HashInputProps, HashInputState> {
public render() {
const msgHashHex = this.props.blockchainIsLoaded ? this.generateMessageHashHex() : '';
const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : '';
return (
<div>
<FakeTextField label={this.props.label}>
@@ -43,7 +43,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> {
</div>
);
}
private generateMessageHashHex() {
private _generateMessageHashHex() {
const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
const hashData = this.props.hashData;
const order: Order = {

4
packages/website/ts/components/inputs/identicon_address_input.tsx
View File

@@ -38,14 +38,14 @@ export class IdenticonAddressInput extends React.Component<IdenticonAddressInput
hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
shouldHideLabel={true}
initialAddress={this.props.initialAddress}
updateAddress={this.updateAddress.bind(this)}
updateAddress={this._updateAddress.bind(this)}
/>
</div>
</div>
</div>
);
}
private updateAddress(address?: string): void {
private _updateAddress(address?: string): void {
this.setState({
address,
});

8
packages/website/ts/components/inputs/token_amount_input.tsx
View File

@@ -33,8 +33,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
label={this.props.label}
amount={amount}
balance={ZeroEx.toUnitAmount(this.props.tokenState.balance, this.props.token.decimals)}
onChange={this.onChange.bind(this)}
validate={this.validate.bind(this)}
onChange={this._onChange.bind(this)}
validate={this._validate.bind(this)}
shouldCheckBalance={this.props.shouldCheckBalance}
shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
@@ -45,14 +45,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
</div>
);
}
private onChange(isValid: boolean, amount?: BigNumber) {
private _onChange(isValid: boolean, amount?: BigNumber) {
let baseUnitAmount;
if (!_.isUndefined(amount)) {
baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals);
}
this.props.onChange(isValid, baseUnitAmount);
}
private validate(amount: BigNumber): InputErrMsg {
private _validate(amount: BigNumber): InputErrMsg {
if (this.props.shouldCheckAllowance && amount.gt(this.props.tokenState.allowance)) {
return (
<span>

14
packages/website/ts/components/inputs/token_input.tsx
View File

@@ -52,9 +52,9 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
<Paper
zDepth={1}
style={{cursor: 'pointer'}}
onMouseEnter={this.onToggleHover.bind(this, true)}
onMouseLeave={this.onToggleHover.bind(this, false)}
onClick={this.onAssetClicked.bind(this)}
onMouseEnter={this._onToggleHover.bind(this, true)}
onMouseLeave={this._onToggleHover.bind(this, false)}
onClick={this._onAssetClicked.bind(this)}
>
<div
className="mx-auto pt2"
@@ -73,13 +73,13 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
dispatcher={this.props.dispatcher}
isOpen={this.state.isPickerOpen}
currentTokenAddress={this.props.assetToken.address}
onTokenChosen={this.onTokenChosen.bind(this)}
onTokenChosen={this._onTokenChosen.bind(this)}
tokenByAddress={this.props.tokenByAddress}
/>
</div>
);
}
private onTokenChosen(tokenAddress: string) {
private _onTokenChosen(tokenAddress: string) {
const assetToken: AssetToken = {
address: tokenAddress,
amount: this.props.assetToken.amount,
@@ -89,12 +89,12 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
isPickerOpen: false,
});
}
private onToggleHover(isHoveringIcon: boolean) {
private _onToggleHover(isHoveringIcon: boolean) {
this.setState({
isHoveringIcon,
});
}
private onAssetClicked() {
private _onAssetClicked() {
if (this.props.blockchainErr !== BlockchainErrs.NoError) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return;

24
packages/website/ts/components/order_json.tsx
View File

@@ -36,7 +36,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
shareLink: '',
};
// tslint:disable-next-line:no-floating-promises
this.setShareLinkAsync();
this._setShareLinkAsync();
}
public render() {
const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists,
@@ -88,21 +88,21 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
<div>
<i
style={{cursor: 'pointer', fontSize: 29}}
onClick={this.shareViaFacebook.bind(this)}
onClick={this._shareViaFacebook.bind(this)}
className="zmdi zmdi-facebook-box"
/>
</div>
<div className="pl1" style={{position: 'relative', width: 28}}>
<i
style={{cursor: 'pointer', fontSize: 32, position: 'absolute', top: -2, left: 8}}
onClick={this.shareViaEmailAsync.bind(this)}
onClick={this._shareViaEmailAsync.bind(this)}
className="zmdi zmdi-email"
/>
</div>
<div className="pl1">
<i
style={{cursor: 'pointer', fontSize: 29}}
onClick={this.shareViaTwitterAsync.bind(this)}
onClick={this._shareViaTwitterAsync.bind(this)}
className="zmdi zmdi-twitter-box"
/>
</div>
@@ -111,32 +111,32 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
</div>
);
}
private async shareViaTwitterAsync() {
private async _shareViaTwitterAsync() {
const tweetText = encodeURIComponent(`Fill my order using the 0x protocol: ${this.state.shareLink}`);
window.open(`https://twitter.com/intent/tweet?text=${tweetText}`, 'Share your order', 'width=500,height=400');
}
private async shareViaFacebook() {
private async _shareViaFacebook() {
(window as any).FB.ui({
display: 'popup',
href: this.state.shareLink,
method: 'share',
}, _.noop);
}
private async shareViaEmailAsync() {
private async _shareViaEmailAsync() {
const encodedSubject = encodeURIComponent('Let\'s trade using the 0x protocol');
const encodedBody = encodeURIComponent(`I generated an order with the 0x protocol.
You can see and fill it here: ${this.state.shareLink}`);
const mailToLink = `mailto:mail@example.org?subject=${encodedSubject}&body=${encodedBody}`;
window.open(mailToLink, '_blank');
}
private async setShareLinkAsync() {
const shareLink = await this.generateShareLinkAsync();
private async _setShareLinkAsync() {
const shareLink = await this._generateShareLinkAsync();
this.setState({
shareLink,
});
}
private async generateShareLinkAsync(): Promise<string> {
const longUrl = encodeURIComponent(this.getOrderUrl());
private async _generateShareLinkAsync(): Promise<string> {
const longUrl = encodeURIComponent(this._getOrderUrl());
const bitlyRequestUrl =
`${constants.URL_BITLY_API}/v3/shorten?access_token=${configs.BITLY_ACCESS_TOKEN}&longUrl=${longUrl}`;
const response = await fetch(bitlyRequestUrl);
@@ -150,7 +150,7 @@ You can see and fill it here: ${this.state.shareLink}`);
}
return (bodyObj).data.url;
}
private getOrderUrl() {
private _getOrderUrl() {
const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists,
this.props.sideToAssetToken, this.props.orderExpiryTimestamp, this.props.orderTakerAddress,
this.props.orderMakerAddress, this.props.orderMakerFee, this.props.orderTakerFee,

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

@@ -70,9 +70,9 @@ interface PortalAllState {
}
export class Portal extends React.Component<PortalAllProps, PortalAllState> {
private blockchain: Blockchain;
private sharedOrderIfExists: Order;
private throttledScreenWidthUpdate: () => void;
private _blockchain: Blockchain;
private _sharedOrderIfExists: Order;
private _throttledScreenWidthUpdate: () => void;
public static hasAlreadyDismissedWethNotice() {
const didDismissWethNotice = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE);
const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) &&
@@ -81,8 +81,8 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
}
constructor(props: PortalAllProps) {
super(props);
this.sharedOrderIfExists = this.getSharedOrderIfExists();
this.throttledScreenWidthUpdate = _.throttle(this.updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
this._sharedOrderIfExists = this._getSharedOrderIfExists();
this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`);
const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
@@ -100,15 +100,15 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
};
}
public componentDidMount() {
window.addEventListener('resize', this.throttledScreenWidthUpdate);
window.addEventListener('resize', this._throttledScreenWidthUpdate);
window.scrollTo(0, 0);
}
public componentWillMount() {
this.blockchain = new Blockchain(this.props.dispatcher);
this._blockchain = new Blockchain(this.props.dispatcher);
}
public componentWillUnmount() {
this.blockchain.destroy();
window.removeEventListener('resize', this.throttledScreenWidthUpdate);
this._blockchain.destroy();
window.removeEventListener('resize', this._throttledScreenWidthUpdate);
// We re-set the entire redux state when the portal is unmounted so that when it is re-rendered
// the initialization process always occurs from the same base state. This helps avoid
// initialization inconsistencies (i.e While the portal was unrendered, the user might have
@@ -118,19 +118,19 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
public componentWillReceiveProps(nextProps: PortalAllProps) {
if (nextProps.networkId !== this.state.prevNetworkId) {
// tslint:disable-next-line:no-floating-promises
this.blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId);
this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId);
this.setState({
prevNetworkId: nextProps.networkId,
});
}
if (nextProps.userAddress !== this.state.prevUserAddress) {
// tslint:disable-next-line:no-floating-promises
this.blockchain.userAddressUpdatedFireAndForgetAsync(nextProps.userAddress);
this._blockchain.userAddressUpdatedFireAndForgetAsync(nextProps.userAddress);
if (!_.isEmpty(nextProps.userAddress) &&
nextProps.blockchainIsLoaded) {
const tokens = _.values(nextProps.tokenByAddress);
// tslint:disable-next-line:no-floating-promises
this.updateBalanceAndAllowanceWithLoadingScreenAsync(tokens);
this._updateBalanceAndAllowanceWithLoadingScreenAsync(tokens);
}
this.setState({
prevUserAddress: nextProps.userAddress,
@@ -138,7 +138,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
}
if (nextProps.nodeVersion !== this.state.prevNodeVersion) {
// tslint:disable-next-line:no-floating-promises
this.blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
this._blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
}
if (nextProps.location.pathname !== this.state.prevPathname) {
const isViewingBalances = _.includes(nextProps.location.pathname, `${WebsitePaths.Portal}/balances`);
@@ -206,23 +206,23 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
<Switch>
<Route
path={`${WebsitePaths.Portal}/weth`}
render={this.renderEthWrapper.bind(this)}
render={this._renderEthWrapper.bind(this)}
/>
<Route
path={`${WebsitePaths.Portal}/fill`}
render={this.renderFillOrder.bind(this)}
render={this._renderFillOrder.bind(this)}
/>
<Route
path={`${WebsitePaths.Portal}/balances`}
render={this.renderTokenBalances.bind(this)}
render={this._renderTokenBalances.bind(this)}
/>
<Route
path={`${WebsitePaths.Portal}/trades`}
component={this.renderTradeHistory.bind(this)}
component={this._renderTradeHistory.bind(this)}
/>
<Route
path={`${WebsitePaths.Home}`}
render={this.renderGenerateOrderForm.bind(this)}
render={this._renderGenerateOrderForm.bind(this)}
/>
</Switch> :
<Loading />
@@ -233,7 +233,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
}
</Paper>
<BlockchainErrDialog
blockchain={this.blockchain}
blockchain={this._blockchain}
blockchainErr={this.props.blockchainErr}
isOpen={this.props.shouldBlockchainErrDialogBeOpen}
userAddress={this.props.userAddress}
@@ -242,11 +242,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
/>
<WrappedEthSectionNoticeDialog
isOpen={this.state.isWethNoticeDialogOpen}
onToggleDialog={this.onWethNoticeAccepted.bind(this)}
onToggleDialog={this._onWethNoticeAccepted.bind(this)}
/>
<PortalDisclaimerDialog
isOpen={this.state.isDisclaimerDialogOpen}
onToggleDialog={this.onPortalDisclaimerAccepted.bind(this)}
onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
/>
<FlashMessage
dispatcher={this.props.dispatcher}
@@ -257,11 +257,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
</div>
);
}
private renderEthWrapper() {
private _renderEthWrapper() {
return (
<EthWrappers
networkId={this.props.networkId}
blockchain={this.blockchain}
blockchain={this._blockchain}
dispatcher={this.props.dispatcher}
tokenByAddress={this.props.tokenByAddress}
tokenStateByAddress={this.props.tokenStateByAddress}
@@ -270,7 +270,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
/>
);
}
private renderTradeHistory() {
private _renderTradeHistory() {
return (
<TradeHistory
tokenByAddress={this.props.tokenByAddress}
@@ -279,10 +279,10 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
/>
);
}
private renderTokenBalances() {
private _renderTokenBalances() {
return (
<TokenBalances
blockchain={this.blockchain}
blockchain={this._blockchain}
blockchainErr={this.props.blockchainErr}
blockchainIsLoaded={this.props.blockchainIsLoaded}
dispatcher={this.props.dispatcher}
@@ -295,16 +295,16 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
/>
);
}
private renderFillOrder(match: any, location: Location, history: History) {
private _renderFillOrder(match: any, location: Location, history: History) {
const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache) ?
this.props.userSuppliedOrderCache :
this.sharedOrderIfExists;
this._sharedOrderIfExists;
return (
<FillOrder
blockchain={this.blockchain}
blockchain={this._blockchain}
blockchainErr={this.props.blockchainErr}
initialOrder={initialFillOrder}
isOrderInUrl={!_.isUndefined(this.sharedOrderIfExists)}
isOrderInUrl={!_.isUndefined(this._sharedOrderIfExists)}
orderFillAmount={this.props.orderFillAmount}
networkId={this.props.networkId}
userAddress={this.props.userAddress}
@@ -314,28 +314,28 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
/>
);
}
private renderGenerateOrderForm(match: any, location: Location, history: History) {
private _renderGenerateOrderForm(match: any, location: Location, history: History) {
return (
<GenerateOrderForm
blockchain={this.blockchain}
blockchain={this._blockchain}
hashData={this.props.hashData}
dispatcher={this.props.dispatcher}
/>
);
}
private onPortalDisclaimerAccepted() {
private _onPortalDisclaimerAccepted() {
localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
this.setState({
isDisclaimerDialogOpen: false,
});
}
private onWethNoticeAccepted() {
private _onWethNoticeAccepted() {
localStorage.setItem(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE, 'set');
this.setState({
isWethNoticeDialogOpen: false,
});
}
private getSharedOrderIfExists(): Order {
private _getSharedOrderIfExists(): Order {
const queryString = window.location.search;
if (queryString.length === 0) {
return;
@@ -362,13 +362,13 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
}
return order;
}
private updateScreenWidth() {
private _updateScreenWidth() {
const newScreenWidth = utils.getScreenWidth();
this.props.dispatcher.updateScreenWidth(newScreenWidth);
}
private async updateBalanceAndAllowanceWithLoadingScreenAsync(tokens: Token[]) {
private async _updateBalanceAndAllowanceWithLoadingScreenAsync(tokens: Token[]) {
this.props.dispatcher.updateBlockchainIsLoaded(false);
await this.blockchain.updateTokenBalancesAndAllowancesAsync(tokens);
await this._blockchain.updateTokenBalancesAndAllowancesAsync(tokens);
this.props.dispatcher.updateBlockchainIsLoaded(true);
}
}

12
packages/website/ts/components/portal_menu.tsx
View File

@@ -23,7 +23,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
to={`${WebsitePaths.Portal}`}
onClick={this.props.onClick.bind(this)}
>
{this.renderMenuItemWithIcon('Generate order', 'zmdi-arrow-right-top')}
{this._renderMenuItemWithIcon('Generate order', 'zmdi-arrow-right-top')}
</MenuItem>
<MenuItem
style={this.props.menuItemStyle}
@@ -31,7 +31,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
to={`${WebsitePaths.Portal}/fill`}
onClick={this.props.onClick.bind(this)}
>
{this.renderMenuItemWithIcon('Fill order', 'zmdi-arrow-left-bottom')}
{this._renderMenuItemWithIcon('Fill order', 'zmdi-arrow-left-bottom')}
</MenuItem>
<MenuItem
style={this.props.menuItemStyle}
@@ -39,7 +39,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
to={`${WebsitePaths.Portal}/balances`}
onClick={this.props.onClick.bind(this)}
>
{this.renderMenuItemWithIcon('Balances', 'zmdi-balance-wallet')}
{this._renderMenuItemWithIcon('Balances', 'zmdi-balance-wallet')}
</MenuItem>
<MenuItem
style={this.props.menuItemStyle}
@@ -47,7 +47,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
to={`${WebsitePaths.Portal}/trades`}
onClick={this.props.onClick.bind(this)}
>
{this.renderMenuItemWithIcon('Trade history', 'zmdi-format-list-bulleted')}
{this._renderMenuItemWithIcon('Trade history', 'zmdi-format-list-bulleted')}
</MenuItem>
<MenuItem
style={this.props.menuItemStyle}
@@ -55,12 +55,12 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
to={`${WebsitePaths.Portal}/weth`}
onClick={this.props.onClick.bind(this)}
>
{this.renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
{this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
</MenuItem>
</div>
);
}
private renderMenuItemWithIcon(title: string, iconName: string) {
private _renderMenuItemWithIcon(title: string, iconName: string) {
return (
<div className="flex" style={{fontWeight: 100}}>
<div className="pr1 pl2">

12
packages/website/ts/components/send_button.tsx
View File

@@ -39,28 +39,28 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState
labelStyle={labelStyle}
disabled={this.state.isSending}
label={this.state.isSending ? 'Sending...' : 'Send'}
onClick={this.toggleSendDialog.bind(this)}
onClick={this._toggleSendDialog.bind(this)}
/>
<SendDialog
isOpen={this.state.isSendDialogVisible}
onComplete={this.onSendAmountSelectedAsync.bind(this)}
onCancelled={this.toggleSendDialog.bind(this)}
onComplete={this._onSendAmountSelectedAsync.bind(this)}
onCancelled={this._toggleSendDialog.bind(this)}
token={this.props.token}
tokenState={this.props.tokenState}
/>
</div>
);
}
private toggleSendDialog() {
private _toggleSendDialog() {
this.setState({
isSendDialogVisible: !this.state.isSendDialogVisible,
});
}
private async onSendAmountSelectedAsync(recipient: string, value: BigNumber) {
private async _onSendAmountSelectedAsync(recipient: string, value: BigNumber) {
this.setState({
isSending: true,
});
this.toggleSendDialog();
this._toggleSendDialog();
const token = this.props.token;
const tokenState = this.props.tokenState;
let balance = tokenState.balance;

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

@@ -133,7 +133,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
key="errorOkBtn"
label="Ok"
primary={true}
onTouchTap={this.onErrorDialogToggle.bind(this, false)}
onTouchTap={this._onErrorDialogToggle.bind(this, false)}
/>,
];
const dharmaDialogActions = [
@@ -141,7 +141,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
key="dharmaCloseBtn"
label="Close"
primary={true}
onTouchTap={this.onDharmaDialogToggle.bind(this, false)}
onTouchTap={this._onDharmaDialogToggle.bind(this, false)}
/>,
];
const isTestNetwork = this.props.networkId === constants.NETWORK_ID_TESTNET;
@@ -239,7 +239,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
labelReady="Request"
labelLoading="Sending..."
labelComplete="Sent!"
onClickAsyncFn={this.faucetRequestAsync.bind(this, true)}
onClickAsyncFn={this._faucetRequestAsync.bind(this, true)}
/>
</TableRowColumn>
}
@@ -249,7 +249,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
<RaisedButton
label="Request"
style={{width: '100%'}}
onTouchTap={this.onDharmaDialogToggle.bind(this)}
onTouchTap={this._onDharmaDialogToggle.bind(this)}
/>
</TableRowColumn>
}
@@ -266,7 +266,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
<FloatingActionButton
mini={true}
zDepth={0}
onClick={this.onAddTokenClicked.bind(this)}
onClick={this._onAddTokenClicked.bind(this)}
>
<ContentAdd />
</FloatingActionButton>
@@ -275,7 +275,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
<FloatingActionButton
mini={true}
zDepth={0}
onClick={this.onRemoveTokenClicked.bind(this)}
onClick={this._onRemoveTokenClicked.bind(this)}
>
<ContentRemove />
</FloatingActionButton>
@@ -319,7 +319,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
{this.renderTokenTableRows()}
{this._renderTokenTableRows()}
</TableBody>
</Table>
<Dialog
@@ -327,9 +327,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
titleStyle={{fontWeight: 100}}
actions={errorDialogActions}
open={!_.isUndefined(this.state.errorType)}
onRequestClose={this.onErrorDialogToggle.bind(this, false)}
onRequestClose={this._onErrorDialogToggle.bind(this, false)}
>
{this.renderErrorDialogBody()}
{this._renderErrorDialogBody()}
</Dialog>
<Dialog
title="Request Dharma Loan"
@@ -340,7 +340,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
actions={dharmaDialogActions}
open={this.state.isDharmaDialogVisible}
>
{this.renderDharmaLoanFrame()}
{this._renderDharmaLoanFrame()}
</Dialog>
<AssetPicker
userAddress={this.props.userAddress}
@@ -349,14 +349,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
dispatcher={this.props.dispatcher}
isOpen={this.state.isTokenPickerOpen}
currentTokenAddress={''}
onTokenChosen={this.onAssetTokenPicked.bind(this)}
onTokenChosen={this._onAssetTokenPicked.bind(this)}
tokenByAddress={this.props.tokenByAddress}
tokenVisibility={this.state.isAddingToken ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED}
/>
</div>
);
}
private renderTokenTableRows() {
private _renderTokenTableRows() {
if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) {
return '';
}
@@ -372,11 +372,11 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
);
const tableRows = _.map(
trackedTokensStartingWithEtherToken,
this.renderTokenRow.bind(this, tokenColSpan, actionPaddingX),
this._renderTokenRow.bind(this, tokenColSpan, actionPaddingX),
);
return tableRows;
}
private renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) {
private _renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) {
const tokenState = this.props.tokenStateByAddress[token.address];
const tokenLink = utils.getEtherScanLinkIfExists(token.address, this.props.networkId,
EtherscanLinkSuffixes.Address);
@@ -388,14 +388,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
colSpan={tokenColSpan}
>
{_.isUndefined(tokenLink) ?
this.renderTokenName(token) :
this._renderTokenName(token) :
<a href={tokenLink} target="_blank" style={{textDecoration: 'none'}}>
{this.renderTokenName(token)}
{this._renderTokenName(token)}
</a>
}
</TableRowColumn>
<TableRowColumn style={{paddingRight: 3, paddingLeft: 3}}>
{this.renderAmount(tokenState.balance, token.decimals)} {token.symbol}
{this._renderAmount(tokenState.balance, token.decimals)} {token.symbol}
{this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL &&
<span className="pl1">
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
@@ -408,7 +408,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
dispatcher={this.props.dispatcher}
token={token}
tokenState={tokenState}
onErrorOccurred={this.onErrorOccurred.bind(this)}
onErrorOccurred={this._onErrorOccurred.bind(this)}
userAddress={this.props.userAddress}
/>
</TableRowColumn>
@@ -420,7 +420,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
labelReady="Mint"
labelLoading={<span style={{fontSize: 12}}>Minting...</span>}
labelComplete="Minted!"
onClickAsyncFn={this.onMintTestTokensAsync.bind(this, token)}
onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)}
/>
}
{token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.NETWORK_ID_TESTNET &&
@@ -428,7 +428,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
labelReady="Request"
labelLoading="Sending..."
labelComplete="Sent!"
onClickAsyncFn={this.faucetRequestAsync.bind(this, false)}
onClickAsyncFn={this._faucetRequestAsync.bind(this, false)}
/>
}
</TableRowColumn>
@@ -441,14 +441,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
dispatcher={this.props.dispatcher}
token={token}
tokenState={tokenState}
onError={this.onSendFailed.bind(this)}
onError={this._onSendFailed.bind(this)}
/>
</TableRowColumn>
}
</TableRow>
);
}
private onAssetTokenPicked(tokenAddress: string) {
private _onAssetTokenPicked(tokenAddress: string) {
if (_.isEmpty(tokenAddress)) {
this.setState({
isTokenPickerOpen: false,
@@ -477,16 +477,16 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
isTokenPickerOpen: false,
});
}
private onSendFailed() {
private _onSendFailed() {
this.setState({
errorType: BalanceErrs.sendFailed,
});
}
private renderAmount(amount: BigNumber, decimals: number) {
private _renderAmount(amount: BigNumber, decimals: number) {
const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
return unitAmount.toNumber().toFixed(PRECISION);
}
private renderTokenName(token: Token) {
private _renderTokenName(token: Token) {
const tooltipId = `tooltip-${token.address}`;
return (
<div className="flex">
@@ -502,7 +502,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
</div>
);
}
private renderErrorDialogBody() {
private _renderErrorDialogBody() {
switch (this.state.errorType) {
case BalanceErrs.incorrectNetworkForFaucet:
return (
@@ -550,7 +550,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
throw utils.spawnSwitchErr('errorType', this.state.errorType);
}
}
private renderDharmaLoanFrame() {
private _renderDharmaLoanFrame() {
if (utils.isUserOnMobile()) {
return (
<h4 style={{textAlign: 'center'}}>
@@ -568,12 +568,12 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
);
}
}
private onErrorOccurred(errorType: BalanceErrs) {
private _onErrorOccurred(errorType: BalanceErrs) {
this.setState({
errorType,
});
}
private async onMintTestTokensAsync(token: Token): Promise<boolean> {
private async _onMintTestTokensAsync(token: Token): Promise<boolean> {
try {
await this.props.blockchain.mintTestTokensAsync(token);
const amount = ZeroEx.toUnitAmount(constants.MINT_AMOUNT, token.decimals);
@@ -597,7 +597,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
return false;
}
}
private async faucetRequestAsync(isEtherRequest: boolean): Promise<boolean> {
private async _faucetRequestAsync(isEtherRequest: boolean): Promise<boolean> {
if (this.props.userAddress === '') {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return false;
@@ -646,23 +646,23 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
}
return true;
}
private onErrorDialogToggle(isOpen: boolean) {
private _onErrorDialogToggle(isOpen: boolean) {
this.setState({
errorType: undefined,
});
}
private onDharmaDialogToggle() {
private _onDharmaDialogToggle() {
this.setState({
isDharmaDialogVisible: !this.state.isDharmaDialogVisible,
});
}
private onAddTokenClicked() {
private _onAddTokenClicked() {
this.setState({
isTokenPickerOpen: true,
isAddingToken: true,
});
}
private onRemoveTokenClicked() {
private _onRemoveTokenClicked() {
this.setState({
isTokenPickerOpen: true,
isAddingToken: false,

72
packages/website/ts/components/top_bar.tsx
View File

@@ -127,7 +127,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Whitepaper" />
</a>,
];
const bottomBorderStyle = this.shouldDisplayBottomBar() ? styles.bottomBar : {};
const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
const fullWidthClasses = isFullWidthPage ? 'pr4' : '';
const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
@@ -147,7 +147,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
</div>
<div className={`col col-${isFullWidthPage ? '8' : '9'} lg-hide md-hide`} />
<div className={`col col-${isFullWidthPage ? '6' : '5'} sm-hide xs-hide`} />
{!this.isViewingPortal() &&
{!this._isViewingPortal() &&
<div
className={menuClasses}
>
@@ -183,37 +183,37 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
}
{this.props.blockchainIsLoaded && !_.isEmpty(this.props.userAddress) &&
<div className="col col-5">
{this.renderUser()}
{this._renderUser()}
</div>
}
{!this.isViewingPortal() &&
{!this._isViewingPortal() &&
<div
className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}
>
<div style={menuIconStyle}>
<i
className="zmdi zmdi-menu"
onClick={this.onMenuButtonClick.bind(this)}
onClick={this._onMenuButtonClick.bind(this)}
/>
</div>
</div>
}
</div>
{this.renderDrawer()}
{this._renderDrawer()}
</div>
);
}
private renderDrawer() {
private _renderDrawer() {
return (
<Drawer
open={this.state.isDrawerOpen}
docked={false}
openSecondary={true}
onRequestChange={this.onMenuButtonClick.bind(this)}
onRequestChange={this._onMenuButtonClick.bind(this)}
>
{this.renderPortalMenu()}
{this.renderDocsMenu()}
{this.renderWiki()}
{this._renderPortalMenu()}
{this._renderDocsMenu()}
{this._renderWiki()}
<div className="pl1 py1 mt3" style={{backgroundColor: colors.lightGrey}}>Website</div>
<Link to={WebsitePaths.Home} className="text-decoration-none">
<MenuItem className="py2">Home</MenuItem>
@@ -221,22 +221,22 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
<MenuItem className="py2">Wiki</MenuItem>
</Link>
{!this.isViewing0xjsDocs() &&
{!this._isViewing0xjsDocs() &&
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
<MenuItem className="py2">0x.js Docs</MenuItem>
</Link>
}
{!this.isViewingConnectDocs() &&
{!this._isViewingConnectDocs() &&
<Link to={WebsitePaths.Connect} className="text-decoration-none">
<MenuItem className="py2">0x Connect Docs</MenuItem>
</Link>
}
{!this.isViewingSmartContractsDocs() &&
{!this._isViewingSmartContractsDocs() &&
<Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
<MenuItem className="py2">Smart Contract Docs</MenuItem>
</Link>
}
{!this.isViewingPortal() &&
{!this._isViewingPortal() &&
<Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
<MenuItem className="py2">Portal DApp</MenuItem>
</Link>
@@ -261,7 +261,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
<MenuItem
className="py2"
onTouchTap={this.onMenuButtonClick.bind(this)}
onTouchTap={this._onMenuButtonClick.bind(this)}
>
FAQ
</MenuItem>
@@ -269,8 +269,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
</Drawer>
);
}
private renderDocsMenu() {
if (!this.isViewing0xjsDocs() && !this.isViewingSmartContractsDocs() && !this.isViewingConnectDocs()
private _renderDocsMenu() {
if (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()
|| _.isUndefined(this.props.menu)) {
return;
}
@@ -283,7 +283,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
topLevelMenu={this.props.menu}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this.onMenuButtonClick.bind(this)}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
selectedVersion={this.props.docsVersion}
docPath={this.props.docsInfo.websitePath}
versions={this.props.availableDocVersions}
@@ -291,8 +291,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
</div>
);
}
private renderWiki() {
if (!this.isViewingWiki()) {
private _renderWiki() {
if (!this._isViewingWiki()) {
return;
}
@@ -303,13 +303,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
topLevelMenu={this.props.menuSubsectionsBySection}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this.onMenuButtonClick.bind(this)}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
/>
</div>
);
}
private renderPortalMenu() {
if (!this.isViewingPortal()) {
private _renderPortalMenu() {
if (!this._isViewingPortal()) {
return;
}
@@ -318,12 +318,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>Portal DApp</div>
<PortalMenu
menuItemStyle={{color: 'black'}}
onClick={this.onMenuButtonClick.bind(this)}
onClick={this._onMenuButtonClick.bind(this)}
/>
</div>
);
}
private renderUser() {
private _renderUser() {
const userAddress = this.props.userAddress;
const identiconDiameter = 26;
return (
@@ -345,31 +345,31 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
</div>
);
}
private onMenuButtonClick() {
private _onMenuButtonClick() {
this.setState({
isDrawerOpen: !this.state.isDrawerOpen,
});
}
private isViewingPortal() {
private _isViewingPortal() {
return _.includes(this.props.location.pathname, WebsitePaths.Portal);
}
private isViewingFAQ() {
private _isViewingFAQ() {
return _.includes(this.props.location.pathname, WebsitePaths.FAQ);
}
private isViewing0xjsDocs() {
private _isViewing0xjsDocs() {
return _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs);
}
private isViewingConnectDocs() {
private _isViewingConnectDocs() {
return _.includes(this.props.location.pathname, WebsitePaths.Connect);
}
private isViewingSmartContractsDocs() {
private _isViewingSmartContractsDocs() {
return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts);
}
private isViewingWiki() {
private _isViewingWiki() {
return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
}
private shouldDisplayBottomBar() {
return this.isViewingWiki() || this.isViewing0xjsDocs() || this.isViewingFAQ() ||
this.isViewingSmartContractsDocs() || this.isViewingConnectDocs();
private _shouldDisplayBottomBar() {
return this._isViewingWiki() || this._isViewing0xjsDocs() || this._isViewingFAQ() ||
this._isViewingSmartContractsDocs() || this._isViewingConnectDocs();
}
}

32
packages/website/ts/components/trade_history/trade_history.tsx
View File

@@ -20,19 +20,19 @@ interface TradeHistoryState {
}
export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> {
private fillPollingIntervalId: number;
private _fillPollingIntervalId: number;
public constructor(props: TradeHistoryProps) {
super(props);
const sortedFills = this.getSortedFills();
const sortedFills = this._getSortedFills();
this.state = {
sortedFills,
};
}
public componentWillMount() {
this.startPollingForFills();
this._startPollingForFills();
}
public componentWillUnmount() {
this.stopPollingForFills();
this._stopPollingForFills();
}
public componentDidMount() {
window.scrollTo(0, 0);
@@ -43,15 +43,15 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor
<h3>Trade history</h3>
<Divider />
<div className="pt2" style={{height: 608, overflow: 'scroll'}}>
{this.renderTrades()}
{this._renderTrades()}
</div>
</div>
);
}
private renderTrades() {
const numNonCustomFills = this.numFillsWithoutCustomERC20Tokens();
private _renderTrades() {
const numNonCustomFills = this._numFillsWithoutCustomERC20Tokens();
if (numNonCustomFills === 0) {
return this.renderEmptyNotice();
return this._renderEmptyNotice();
}
return _.map(this.state.sortedFills, (fill, index) => {
@@ -66,14 +66,14 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor
);
});
}
private renderEmptyNotice() {
private _renderEmptyNotice() {
return (
<Paper className="mt1 p2 mx-auto center" style={{width: '80%'}}>
No filled orders yet.
</Paper>
);
}
private numFillsWithoutCustomERC20Tokens() {
private _numFillsWithoutCustomERC20Tokens() {
let numNonCustomFills = 0;
const tokens = _.values(this.props.tokenByAddress);
_.each(this.state.sortedFills, fill => {
@@ -93,9 +93,9 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor
});
return numNonCustomFills;
}
private startPollingForFills() {
this.fillPollingIntervalId = window.setInterval(() => {
const sortedFills = this.getSortedFills();
private _startPollingForFills() {
this._fillPollingIntervalId = window.setInterval(() => {
const sortedFills = this._getSortedFills();
if (!utils.deepEqual(sortedFills, this.state.sortedFills)) {
this.setState({
sortedFills,
@@ -103,10 +103,10 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor
}
}, FILL_POLLING_INTERVAL);
}
private stopPollingForFills() {
clearInterval(this.fillPollingIntervalId);
private _stopPollingForFills() {
clearInterval(this._fillPollingIntervalId);
}
private getSortedFills() {
private _getSortedFills() {
const fillsByHash = tradeHistoryStorage.getUserFillsByHash(this.props.userAddress, this.props.networkId);
const fills = _.values(fillsByHash);
const sortedFills = _.sortBy(fills, [(fill: Fill) => fill.blockTimestamp * -1]);

14
packages/website/ts/components/trade_history/trade_history_item.tsx
View File

@@ -54,7 +54,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
>
<div className="clearfix">
<div className="col col-12 lg-col-1 md-col-1 pt2 lg-pl3 md-pl3">
{this.renderDate()}
{this._renderDate()}
</div>
<div
className="col col-12 lg-col-6 md-col-6 lg-pl3 md-pl3"
@@ -80,7 +80,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
className={amountColClassNames}
style={amountColStyle}
>
{this.renderAmounts(makerToken, takerToken)}
{this._renderAmounts(makerToken, takerToken)}
</div>
<div className="col col-12 lg-col-1 md-col-1 lg-pr3 md-pr3 lg-py3 md-py3 sm-pb1 sm-center">
<div className="pt1 lg-right md-right sm-mx-auto" style={{width: 13}}>
@@ -95,7 +95,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
</Paper>
);
}
private renderAmounts(makerToken: Token, takerToken: Token) {
private _renderAmounts(makerToken: Token, takerToken: Token) {
const fill = this.props.fill;
const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals);
const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals);
@@ -133,14 +133,14 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
style={{color: colors.green400, fontSize: 16}}
>
<span>+{' '}</span>
{this.renderAmount(receiveAmount, receiveToken.symbol, receiveToken.decimals)}
{this._renderAmount(receiveAmount, receiveToken.symbol, receiveToken.decimals)}
</div>
<div
className="pb1 inline-block"
style={{color: colors.red200, fontSize: 16}}
>
<span>-{' '}</span>
{this.renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)}
{this._renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)}
</div>
<div style={{color: colors.grey400, fontSize: 14}}>
{exchangeRate.toFixed(PRECISION)} {givenToken.symbol}/{receiveToken.symbol}
@@ -148,7 +148,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
</div>
);
}
private renderDate() {
private _renderDate() {
const blockMoment = moment.unix(this.props.fill.blockTimestamp);
if (!blockMoment.isValid()) {
return null;
@@ -170,7 +170,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
</div>
);
}
private renderAmount(amount: BigNumber, symbol: string, decimals: number) {
private _renderAmount(amount: BigNumber, symbol: string, decimals: number) {
const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
return (
<span>

6
packages/website/ts/components/ui/badge.tsx
View File

@@ -42,14 +42,14 @@ export class Badge extends React.Component<BadgeProps, BadgeState> {
<div
className="p1 center"
style={badgeStyle}
onMouseOver={this.setHoverState.bind(this, true)}
onMouseOut={this.setHoverState.bind(this, false)}
onMouseOver={this._setHoverState.bind(this, true)}
onMouseOut={this._setHoverState.bind(this, false)}
>
{this.props.title}
</div>
);
}
private setHoverState(isHovering: boolean) {
private _setHoverState(isHovering: boolean) {
this.setState({
isHovering,
});

38
packages/website/ts/components/ui/copy_icon.tsx
View File

@@ -15,8 +15,8 @@ interface CopyIconState {
}
export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
private copyTooltipTimeoutId: number;
private copyable: HTMLInputElement;
private _copyTooltipTimeoutId: number;
private _copyable: HTMLInputElement;
constructor(props: CopyIconProps) {
super(props);
this.state = {
@@ -25,25 +25,25 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
}
public componentDidUpdate() {
// Remove tooltip if hover away
if (!this.state.isHovering && this.copyTooltipTimeoutId) {
clearInterval(this.copyTooltipTimeoutId);
this.hideTooltip();
if (!this.state.isHovering && this._copyTooltipTimeoutId) {
clearInterval(this._copyTooltipTimeoutId);
this._hideTooltip();
}
}
public render() {
return (
<div className="inline-block">
<CopyToClipboard text={this.props.data} onCopy={this.onCopy.bind(this)}>
<CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}>
<div
className="inline flex"
style={{cursor: 'pointer', color: colors.amber600}}
ref={this.setRefToProperty.bind(this)}
ref={this._setRefToProperty.bind(this)}
data-tip={true}
data-for="copy"
data-event="click"
data-iscapture={true} // This let's the click event continue to propogate
onMouseOver={this.setHoverState.bind(this, true)}
onMouseOut={this.setHoverState.bind(this, false)}
onMouseOver={this._setHoverState.bind(this, true)}
onMouseOut={this._setHoverState.bind(this, false)}
>
<div>
<i style={{fontSize: 15}} className="zmdi zmdi-copy" />
@@ -57,25 +57,25 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
</div>
);
}
private setRefToProperty(el: HTMLInputElement) {
this.copyable = el;
private _setRefToProperty(el: HTMLInputElement) {
this._copyable = el;
}
private setHoverState(isHovering: boolean) {
private _setHoverState(isHovering: boolean) {
this.setState({
isHovering,
});
}
private onCopy() {
if (this.copyTooltipTimeoutId) {
clearInterval(this.copyTooltipTimeoutId);
private _onCopy() {
if (this._copyTooltipTimeoutId) {
clearInterval(this._copyTooltipTimeoutId);
}
const tooltipLifespanMs = 1000;
this.copyTooltipTimeoutId = window.setTimeout(() => {
this.hideTooltip();
this._copyTooltipTimeoutId = window.setTimeout(() => {
this._hideTooltip();
}, tooltipLifespanMs);
}
private hideTooltip() {
ReactTooltip.hide(ReactDOM.findDOMNode(this.copyable));
private _hideTooltip() {
ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable));
}
}

40
packages/website/ts/components/ui/drop_down_menu_item.tsx
View File

@@ -28,8 +28,8 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
menuItemStyle: DEFAULT_STYLE,
isNightVersion: false,
};
private isHovering: boolean;
private popoverCloseCheckIntervalId: number;
private _isHovering: boolean;
private _popoverCloseCheckIntervalId: number;
constructor(props: DropDownMenuItemProps) {
super(props);
this.state = {
@@ -37,20 +37,20 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
};
}
public componentDidMount() {
this.popoverCloseCheckIntervalId = window.setInterval(() => {
this.checkIfShouldClosePopover();
this._popoverCloseCheckIntervalId = window.setInterval(() => {
this._checkIfShouldClosePopover();
}, CHECK_CLOSE_POPOVER_INTERVAL_MS);
}
public componentWillUnmount() {
window.clearInterval(this.popoverCloseCheckIntervalId);
window.clearInterval(this._popoverCloseCheckIntervalId);
}
public render() {
const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color;
return (
<div
style={{...this.props.style, color: colorStyle}}
onMouseEnter={this.onHover.bind(this)}
onMouseLeave={this.onHoverOff.bind(this)}
onMouseEnter={this._onHover.bind(this)}
onMouseLeave={this._onHoverOff.bind(this)}
>
<div className="flex relative">
<div style={{paddingRight: 10}}>
@@ -65,12 +65,12 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
anchorEl={this.state.anchorEl}
anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}}
targetOrigin={{horizontal: 'middle', vertical: 'top'}}
onRequestClose={this.closePopover.bind(this)}
onRequestClose={this._closePopover.bind(this)}
useLayerForClickAway={false}
>
<div
onMouseEnter={this.onHover.bind(this)}
onMouseLeave={this.onHoverOff.bind(this)}
onMouseEnter={this._onHover.bind(this)}
onMouseLeave={this._onHoverOff.bind(this)}
>
<Menu style={{color: colors.grey}}>
{this.props.subMenuItems}
@@ -80,11 +80,11 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
</div>
);
}
private onHover(event: React.FormEvent<HTMLInputElement>) {
this.isHovering = true;
this.checkIfShouldOpenPopover(event);
private _onHover(event: React.FormEvent<HTMLInputElement>) {
this._isHovering = true;
this._checkIfShouldOpenPopover(event);
}
private checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
if (this.state.isDropDownOpen) {
return; // noop
}
@@ -94,16 +94,16 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
anchorEl: event.currentTarget,
});
}
private onHoverOff(event: React.FormEvent<HTMLInputElement>) {
this.isHovering = false;
private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
this._isHovering = false;
}
private checkIfShouldClosePopover() {
if (!this.state.isDropDownOpen || this.isHovering) {
private _checkIfShouldClosePopover() {
if (!this.state.isDropDownOpen || this._isHovering) {
return; // noop
}
this.closePopover();
this._closePopover();
}
private closePopover() {
private _closePopover() {
this.setState({
isDropDownOpen: false,
});

4
packages/website/ts/components/ui/flash_message.tsx
View File

@@ -26,7 +26,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag
open={true}
message={this.props.flashMessage}
autoHideDuration={this.props.showDurationMs}
onRequestClose={this.onClose.bind(this)}
onRequestClose={this._onClose.bind(this)}
bodyStyle={this.props.bodyStyle}
/>
);
@@ -34,7 +34,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag
return null;
}
}
private onClose() {
private _onClose() {
this.props.dispatcher.hideFlashMessage();
}
}

12
packages/website/ts/components/ui/lifecycle_raised_button.tsx
View File

@@ -35,8 +35,8 @@ export class LifeCycleRaisedButton extends
backgroundColor: colors.white,
labelColor: colors.darkGrey,
};
private buttonTimeoutId: number;
private didUnmount: boolean;
private _buttonTimeoutId: number;
private _didUnmount: boolean;
constructor(props: LifeCycleRaisedButtonProps) {
super(props);
this.state = {
@@ -44,8 +44,8 @@ export class LifeCycleRaisedButton extends
};
}
public componentWillUnmount() {
clearTimeout(this.buttonTimeoutId);
this.didUnmount = true;
clearTimeout(this._buttonTimeoutId);
this._didUnmount = true;
}
public render() {
if (this.props.isHidden) {
@@ -83,14 +83,14 @@ export class LifeCycleRaisedButton extends
buttonState: ButtonState.LOADING,
});
const didSucceed = await this.props.onClickAsyncFn();
if (this.didUnmount) {
if (this._didUnmount) {
return; // noop since unmount called before async callback returned.
}
if (didSucceed) {
this.setState({
buttonState: ButtonState.COMPLETE,
});
this.buttonTimeoutId = window.setTimeout(() => {
this._buttonTimeoutId = window.setTimeout(() => {
this.setState({
buttonState: ButtonState.READY,
});

6
packages/website/ts/components/ui/menu_item.tsx
View File

@@ -35,15 +35,15 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
onClick={this.props.onClick.bind(this)}
className={`mx-auto ${this.props.className}`}
style={menuItemStyles}
onMouseEnter={this.onToggleHover.bind(this, true)}
onMouseLeave={this.onToggleHover.bind(this, false)}
onMouseEnter={this._onToggleHover.bind(this, true)}
onMouseLeave={this._onToggleHover.bind(this, false)}
>
{this.props.children}
</div>
</Link>
);
}
private onToggleHover(isHovering: boolean) {
private _onToggleHover(isHovering: boolean) {
this.setState({
isHovering,
});

6
packages/website/ts/components/ui/swap_icon.tsx
View File

@@ -27,8 +27,8 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> {
className="mx-auto pt4"
style={{cursor: 'pointer', height: 50, width: 37.5}}
onClick={this.props.swapTokensFn}
onMouseEnter={this.onToggleHover.bind(this, true)}
onMouseLeave={this.onToggleHover.bind(this, false)}
onMouseEnter={this._onToggleHover.bind(this, true)}
onMouseLeave={this._onToggleHover.bind(this, false)}
>
<i
style={swapStyles}
@@ -37,7 +37,7 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> {
</div>
);
}
private onToggleHover(isHovering: boolean) {
private _onToggleHover(isHovering: boolean) {
this.setState({
isHovering,
});

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

@@ -42,13 +42,13 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt
</div>
<div className="col col-2 center pt1">
<div className="pb1">
{this.renderAmount(this.props.takerAssetToken, this.props.takerToken)}
{this._renderAmount(this.props.takerAssetToken, this.props.takerToken)}
</div>
<div className="lg-p2 md-p2 sm-p1">
<img src="/images/trade_arrows.png" style={{width: 47}} />
</div>
<div className="pt1">
{this.renderAmount(this.props.makerAssetToken, this.props.makerToken)}
{this._renderAmount(this.props.makerAssetToken, this.props.makerToken)}
</div>
</div>
<div className="col col-5 center">
@@ -65,7 +65,7 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt
</div>
);
}
private renderAmount(assetToken: AssetToken, token: Token) {
private _renderAmount(assetToken: AssetToken, token: Token) {
const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals);
return (
<div style={{fontSize: 13}}>

6
packages/website/ts/lazy_component.tsx
View File

@@ -23,12 +23,12 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo
}
public componentWillMount() {
// tslint:disable-next-line:no-floating-promises
this.loadComponentFireAndForgetAsync(this.props);
this._loadComponentFireAndForgetAsync(this.props);
}
public componentWillReceiveProps(nextProps: LazyComponentProps) {
if (nextProps.reactComponentPromise !== this.props.reactComponentPromise) {
// tslint:disable-next-line:no-floating-promises
this.loadComponentFireAndForgetAsync(nextProps);
this._loadComponentFireAndForgetAsync(nextProps);
}
}
public render() {
@@ -36,7 +36,7 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo
null :
React.createElement(this.state.component, this.props.reactComponentProps);
}
private async loadComponentFireAndForgetAsync(props: LazyComponentProps) {
private async _loadComponentFireAndForgetAsync(props: LazyComponentProps) {
const component = await props.reactComponentPromise;
this.setState({
component,

8
packages/website/ts/pages/about/about.tsx
View File

@@ -188,10 +188,10 @@ export class About extends React.Component<AboutProps, AboutState> {
</div>
<div className="pt3 md-px4 lg-px0">
<div className="clearfix pb3">
{this.renderProfiles(teamRow1)}
{this._renderProfiles(teamRow1)}
</div>
<div className="clearfix">
{this.renderProfiles(teamRow2)}
{this._renderProfiles(teamRow2)}
</div>
</div>
<div className="pt3 pb2">
@@ -202,7 +202,7 @@ export class About extends React.Component<AboutProps, AboutState> {
Advisors:
</div>
<div className="clearfix">
{this.renderProfiles(advisors)}
{this._renderProfiles(advisors)}
</div>
</div>
<div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}>
@@ -232,7 +232,7 @@ export class About extends React.Component<AboutProps, AboutState> {
</div>
);
}
private renderProfiles(profiles: ProfileInfo[]) {
private _renderProfiles(profiles: ProfileInfo[]) {
const numIndiv = profiles.length;
const colSize = utils.getColSize(numIndiv);
return _.map(profiles, profile => {

22
packages/website/ts/pages/documentation/docs_info.ts
View File

@@ -19,7 +19,7 @@ export class DocsInfo {
public menu: DocsMenu;
public sections: SectionsMap;
public sectionNameToMarkdown: {[sectionName: string]: string};
private docsInfo: DocsInfoConfig;
private _docsInfo: DocsInfoConfig;
constructor(config: DocsInfoConfig) {
this.displayName = config.displayName;
this.packageUrl = config.packageUrl;
@@ -28,32 +28,32 @@ export class DocsInfo {
this.docsJsonRoot = config.docsJsonRoot;
this.sections = config.sections;
this.sectionNameToMarkdown = config.sectionNameToMarkdown;
this.docsInfo = config;
this._docsInfo = config;
}
public isPublicType(typeName: string): boolean {
if (_.isUndefined(this.docsInfo.publicTypes)) {
if (_.isUndefined(this._docsInfo.publicTypes)) {
return false;
}
const isPublic = _.includes(this.docsInfo.publicTypes, typeName);
const isPublic = _.includes(this._docsInfo.publicTypes, typeName);
return isPublic;
}
public getModulePathsIfExists(sectionName: string): string[] {
const modulePathsIfExists = this.docsInfo.sectionNameToModulePath[sectionName];
const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName];
return modulePathsIfExists;
}
public getMenu(selectedVersion?: string): {[section: string]: string[]} {
if (_.isUndefined(selectedVersion) || _.isUndefined(this.docsInfo.menuSubsectionToVersionWhenIntroduced)) {
return this.docsInfo.menu;
if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) {
return this._docsInfo.menu;
}
const finalMenu = _.cloneDeep(this.docsInfo.menu);
const finalMenu = _.cloneDeep(this._docsInfo.menu);
if (_.isUndefined(finalMenu.contracts)) {
return finalMenu;
}
// TODO: refactor to include more sections then simply the `contracts` section
finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => {
const versionIntroducedIfExists = this.docsInfo.menuSubsectionToVersionWhenIntroduced[contractName];
const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName];
if (!_.isUndefined(versionIntroducedIfExists)) {
const existsInSelectedVersion = compareVersions(selectedVersion,
versionIntroducedIfExists) >= 0;
@@ -104,9 +104,9 @@ export class DocsInfo {
return typeDefinitionByName;
}
public isVisibleConstructor(sectionName: string): boolean {
return _.includes(this.docsInfo.visibleConstructors, sectionName);
return _.includes(this._docsInfo.visibleConstructors, sectionName);
}
public convertToDocAgnosticFormat(docObj: DoxityDocObj|TypeDocNode): DocAgnosticFormat {
return this.docsInfo.convertToDocAgnosticFormatFn(docObj, this);
return this._docsInfo.convertToDocAgnosticFormatFn(docObj, this);
}
}

40
packages/website/ts/pages/documentation/documentation.tsx
View File

@@ -93,7 +93,7 @@ export class Documentation extends
const versions = findVersions(lastSegment);
const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined;
// tslint:disable-next-line:no-floating-promises
this.fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists);
this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists);
}
public render() {
const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) ?
@@ -157,7 +157,7 @@ export class Documentation extends
{this.props.docsInfo.displayName}
</a>
</h1>
{this.renderDocumentation()}
{this._renderDocumentation()}
</div>
</div>
</div>
@@ -165,16 +165,16 @@ export class Documentation extends
</div>
);
}
private renderDocumentation(): React.ReactNode {
private _renderDocumentation(): React.ReactNode {
const subMenus = _.values(this.props.docsInfo.getMenu());
const orderedSectionNames = _.flatten(subMenus);
const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.state.docAgnosticFormat);
const renderedSections = _.map(orderedSectionNames, this.renderSection.bind(this, typeDefinitionByName));
const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName));
return renderedSections;
}
private renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[sectionName];
if (!_.isUndefined(markdownFileIfExists)) {
return (
@@ -203,12 +203,12 @@ export class Documentation extends
});
const sortedProperties = _.sortBy(docSection.properties, 'name');
const propertyDefs = _.map(sortedProperties, this.renderProperty.bind(this));
const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this));
const sortedMethods = _.sortBy(docSection.methods, 'name');
const methodDefs = _.map(sortedMethods, method => {
const isConstructor = false;
return this.renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName);
return this._renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName);
});
const sortedEvents = _.sortBy(docSection.events, 'name');
@@ -230,7 +230,7 @@ export class Documentation extends
<div style={{marginRight: 7}}>
<SectionHeader sectionName={sectionName} />
</div>
{this.renderNetworkBadgesIfExists(sectionName)}
{this._renderNetworkBadgesIfExists(sectionName)}
</div>
{docSection.comment &&
<Comment
@@ -241,7 +241,7 @@ export class Documentation extends
this.props.docsInfo.isVisibleConstructor(sectionName) &&
<div>
<h2 className="thin">Constructor</h2>
{this.renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
{this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
</div>
}
{docSection.properties.length > 0 &&
@@ -270,7 +270,7 @@ export class Documentation extends
</div>
);
}
private renderNetworkBadgesIfExists(sectionName: string) {
private _renderNetworkBadgesIfExists(sectionName: string) {
const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion];
const badges = _.map(networkToAddressByContractName,
(addressByContractName: AddressByContractName, networkName: string) => {
@@ -297,11 +297,11 @@ export class Documentation extends
});
return badges;
}
private renderConstructors(constructors: SolidityMethod[]|TypescriptMethod[],
sectionName: string,
typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
private _renderConstructors(constructors: SolidityMethod[]|TypescriptMethod[],
sectionName: string,
typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
const constructorDefs = _.map(constructors, constructor => {
return this.renderMethodBlocks(
return this._renderMethodBlocks(
constructor, sectionName, constructor.isConstructor, typeDefinitionByName,
);
});
@@ -311,7 +311,7 @@ export class Documentation extends
</div>
);
}
private renderProperty(property: Property): React.ReactNode {
private _renderProperty(property: Property): React.ReactNode {
return (
<div
key={`property-${property.name}-${property.type.name}`}
@@ -337,8 +337,8 @@ export class Documentation extends
</div>
);
}
private renderMethodBlocks(method: SolidityMethod|TypescriptMethod, sectionName: string,
isConstructor: boolean, typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
private _renderMethodBlocks(method: SolidityMethod|TypescriptMethod, sectionName: string,
isConstructor: boolean, typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
return (
<MethodBlock
key={`method-${method.name}-${sectionName}`}
@@ -349,7 +349,7 @@ export class Documentation extends
/>
);
}
private scrollToHash(): void {
private _scrollToHash(): void {
const hashWithPrefix = this.props.location.hash;
let hash = hashWithPrefix.slice(1);
if (_.isEmpty(hash)) {
@@ -358,7 +358,7 @@ export class Documentation extends
scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'});
}
private async fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> {
private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> {
const versionToFileName = await docUtils.getVersionToFileNameAsync(this.props.docsInfo.docsJsonRoot);
const versions = _.keys(versionToFileName);
this.props.dispatcher.updateAvailableDocVersions(versions);
@@ -383,7 +383,7 @@ export class Documentation extends
this.setState({
docAgnosticFormat,
}, () => {
this.scrollToHash();
this._scrollToHash();
});
}
}

10
packages/website/ts/pages/documentation/event_definition.tsx
View File

@@ -29,8 +29,8 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
id={event.name}
className="pb2"
style={{overflow: 'hidden', width: '100%'}}
onMouseOver={this.setAnchorVisibility.bind(this, true)}
onMouseOut={this.setAnchorVisibility.bind(this, false)}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<AnchorTitle
headerSize={HeaderSizes.H3}
@@ -41,14 +41,14 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
<div style={{fontSize: 16}}>
<pre>
<code className="hljs">
{this.renderEventCode()}
{this._renderEventCode()}
</code>
</pre>
</div>
</div>
);
}
private renderEventCode() {
private _renderEventCode() {
const indexed = <span style={{color: colors.green}}> indexed</span>;
const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
const type = (
@@ -76,7 +76,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
</span>
);
}
private setAnchorVisibility(shouldShowAnchor: boolean) {
private _setAnchorVisibility(shouldShowAnchor: boolean) {
this.setState({
shouldShowAnchor,
});

18
packages/website/ts/pages/documentation/method_block.tsx
View File

@@ -57,19 +57,19 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
id={method.name}
style={{overflow: 'hidden', width: '100%'}}
className="pb4"
onMouseOver={this.setAnchorVisibility.bind(this, true)}
onMouseOut={this.setAnchorVisibility.bind(this, false)}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
{!method.isConstructor &&
<div className="flex">
{(method as TypescriptMethod).isStatic &&
this.renderChip('Static')
this._renderChip('Static')
}
{(method as SolidityMethod).isConstant &&
this.renderChip('Constant')
this._renderChip('Constant')
}
{(method as SolidityMethod).isPayable &&
this.renderChip('Payable')
this._renderChip('Payable')
}
<AnchorTitle
headerSize={HeaderSizes.H3}
@@ -108,7 +108,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
>
ARGUMENTS
</h4>
{this.renderParameterDescriptions(method.parameters)}
{this._renderParameterDescriptions(method.parameters)}
</div>
}
{method.returnComment &&
@@ -127,7 +127,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
</div>
);
}
private renderChip(text: string) {
private _renderChip(text: string) {
return (
<div
className="p1 mr1"
@@ -137,7 +137,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
</div>
);
}
private renderParameterDescriptions(parameters: Parameter[]) {
private _renderParameterDescriptions(parameters: Parameter[]) {
const descriptions = _.map(parameters, parameter => {
const isOptional = parameter.isOptional;
return (
@@ -166,7 +166,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
});
return descriptions;
}
private setAnchorVisibility(shouldShowAnchor: boolean) {
private _setAnchorVisibility(shouldShowAnchor: boolean) {
this.setState({
shouldShowAnchor,
});

6
packages/website/ts/pages/documentation/type_definition.tsx
View File

@@ -107,8 +107,8 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
className="pb2"
style={{overflow: 'hidden', width: '100%'}}
onMouseOver={this.setAnchorVisibility.bind(this, true)}
onMouseOut={this.setAnchorVisibility.bind(this, false)}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<AnchorTitle
headerSize={HeaderSizes.H3}
@@ -132,7 +132,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
</div>
);
}
private setAnchorVisibility(shouldShowAnchor: boolean) {
private _setAnchorVisibility(shouldShowAnchor: boolean) {
this.setState({
shouldShowAnchor,
});

8
packages/website/ts/pages/faq/faq.tsx
View File

@@ -459,26 +459,26 @@ export class FAQ extends React.Component<FAQProps, FAQState> {
>
<h1 className="center" style={{...styles.thin}}>0x FAQ</h1>
<div className="sm-px2 md-px2 lg-px0 pb4">
{this.renderSections()}
{this._renderSections()}
</div>
</div>
<Footer />
</div>
);
}
private renderSections() {
private _renderSections() {
const renderedSections = _.map(sections, (section: FAQSection, i: number) => {
const isFirstSection = i === 0;
return (
<div key={section.name}>
<h3>{section.name}</h3>
{this.renderQuestions(section.questions, isFirstSection)}
{this._renderQuestions(section.questions, isFirstSection)}
</div>
);
});
return renderedSections;
}
private renderQuestions(questions: FAQQuestion[], isFirstSection: boolean) {
private _renderQuestions(questions: FAQQuestion[], isFirstSection: boolean) {
const renderedQuestions = _.map(questions, (question: FAQQuestion, i: number) => {
const isFirstQuestion = i === 0;
return (

4
packages/website/ts/pages/faq/question.tsx
View File

@@ -27,7 +27,7 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
>
<Card
initiallyExpanded={this.props.shouldDisplayExpanded}
onExpandChange={this.onExchangeChange.bind(this)}
onExpandChange={this._onExchangeChange.bind(this)}
>
<CardHeader
title={this.props.prompt}
@@ -45,7 +45,7 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
</div>
);
}
private onExchangeChange() {
private _onExchangeChange() {
this.setState({
isExpanded: !this.state.isExpanded,
});

58
packages/website/ts/pages/landing/landing.tsx
View File

@@ -138,20 +138,20 @@ interface LandingState {
}
export class Landing extends React.Component<LandingProps, LandingState> {
private throttledScreenWidthUpdate: () => void;
private _throttledScreenWidthUpdate: () => void;
constructor(props: LandingProps) {
super(props);
this.state = {
screenWidth: utils.getScreenWidth(),
};
this.throttledScreenWidthUpdate = _.throttle(this.updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
}
public componentDidMount() {
window.addEventListener('resize', this.throttledScreenWidthUpdate);
window.addEventListener('resize', this._throttledScreenWidthUpdate);
window.scrollTo(0, 0);
}
public componentWillUnmount() {
window.removeEventListener('resize', this.throttledScreenWidthUpdate);
window.removeEventListener('resize', this._throttledScreenWidthUpdate);
}
public render() {
return (
@@ -163,19 +163,19 @@ export class Landing extends React.Component<LandingProps, LandingState> {
isNightVersion={true}
style={{backgroundColor: colors.heroGrey, position: 'relative'}}
/>
{this.renderHero()}
{this.renderProjects()}
{this.renderTokenizationSection()}
{this.renderProtocolSection()}
{this.renderInfoBoxes()}
{this.renderBuildingBlocksSection()}
{this.renderUseCases()}
{this.renderCallToAction()}
{this._renderHero()}
{this._renderProjects()}
{this._renderTokenizationSection()}
{this._renderProtocolSection()}
{this._renderInfoBoxes()}
{this._renderBuildingBlocksSection()}
{this._renderUseCases()}
{this._renderCallToAction()}
<Footer />
</div>
);
}
private renderHero() {
private _renderHero() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const buttonLabelStyle: React.CSSProperties = {
textTransform: 'none',
@@ -259,7 +259,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private renderProjects() {
private _renderProjects() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
const projectList = _.map(projects, (project: Project, i: number) => {
@@ -323,7 +323,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private renderTokenizationSection() {
private _renderTokenizationSection() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div
@@ -332,7 +332,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
>
<div className="mx-auto max-width-4 py4 clearfix">
{isSmallScreen &&
this.renderTokenCloud()
this._renderTokenCloud()
}
<div className="col lg-col-6 md-col-6 col-12">
<div className="mx-auto" style={{maxWidth: 385, paddingTop: 7}}>
@@ -365,18 +365,18 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
</div>
<div className="flex pt1 sm-px3">
{this.renderAssetTypes()}
{this._renderAssetTypes()}
</div>
</div>
</div>
{!isSmallScreen &&
this.renderTokenCloud()
this._renderTokenCloud()
}
</div>
</div>
);
}
private renderProtocolSection() {
private _renderProtocolSection() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div
@@ -462,7 +462,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private renderBuildingBlocksSection() {
private _renderBuildingBlocksSection() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const descriptionStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
@@ -484,7 +484,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
>
<div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
{isSmallScreen &&
this.renderBlockChipImage()
this._renderBlockChipImage()
}
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
@@ -528,13 +528,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
</div>
{!isSmallScreen &&
this.renderBlockChipImage()
this._renderBlockChipImage()
}
</div>
</div>
);
}
private renderBlockChipImage() {
private _renderBlockChipImage() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="col lg-col-6 md-col-6 col-12 sm-center">
@@ -545,7 +545,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private renderTokenCloud() {
private _renderTokenCloud() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="col lg-col-6 md-col-6 col-12 center">
@@ -556,7 +556,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private renderAssetTypes() {
private _renderAssetTypes() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const assetTypes: AssetType[] = [
{
@@ -595,7 +595,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
});
return assets;
}
private renderInfoBoxes() {
private _renderInfoBoxes() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const boxStyle: React.CSSProperties = {
maxWidth: 252,
@@ -648,7 +648,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private renderUseCases() {
private _renderUseCases() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const useCases: UseCase[] = [
@@ -759,7 +759,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private renderCallToAction() {
private _renderCallToAction() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const buttonLabelStyle: React.CSSProperties = {
textTransform: 'none',
@@ -805,7 +805,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private updateScreenWidth() {
private _updateScreenWidth() {
const newScreenWidth = utils.getScreenWidth();
if (newScreenWidth !== this.state.screenWidth) {
this.setState({

6
packages/website/ts/pages/shared/anchor_title.tsx
View File

@@ -79,14 +79,14 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
className="zmdi zmdi-link"
onClick={utils.setUrlHash.bind(utils, this.props.id)}
style={{...styles.anchor, opacity}}
onMouseOver={this.setHoverState.bind(this, true)}
onMouseOut={this.setHoverState.bind(this, false)}
onMouseOver={this._setHoverState.bind(this, true)}
onMouseOut={this._setHoverState.bind(this, false)}
/>
</ScrollLink>
</div>
);
}
private setHoverState(isHovering: boolean) {
private _setHoverState(isHovering: boolean) {
this.setState({
isHovering,
});

6
packages/website/ts/pages/shared/markdown_section.tsx
View File

@@ -35,8 +35,8 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
return (
<div
className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
onMouseOver={this.setAnchorVisibility.bind(this, true)}
onMouseOut={this.setAnchorVisibility.bind(this, false)}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<ScrollElement name={id}>
<div className="clearfix">
@@ -69,7 +69,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
</div>
);
}
private setAnchorVisibility(shouldShowAnchor: boolean) {
private _setAnchorVisibility(shouldShowAnchor: boolean) {
this.setState({
shouldShowAnchor,
});

22
packages/website/ts/pages/shared/nested_sidebar_menu.tsx
View File

@@ -61,13 +61,13 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
{finalSectionName.toUpperCase()}
</div>
</ScrollLink>
{this.renderMenuItems(menuItems)}
{this._renderMenuItems(menuItems)}
</div>
);
} else {
return (
<div key={`section-${sectionName}`} >
{this.renderMenuItems(menuItems)}
{this._renderMenuItems(menuItems)}
</div>
);
}
@@ -87,7 +87,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
</div>
);
}
private renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
const menuItemStyles = this.props.shouldDisplaySectionHeaders ?
styles.menuItemWithHeaders :
styles.menuItemWithoutHeaders;
@@ -105,7 +105,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
containerId={constants.DOCS_CONTAINER_ID}
>
<MenuItem
onTouchTap={this.onMenuItemClick.bind(this, menuItemName)}
onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
style={menuItemStyles}
innerDivStyle={menuItemInnerDivStyles}
>
@@ -114,19 +114,19 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
</span>
</MenuItem>
</ScrollLink>
{this.renderMenuItemSubsections(menuItemName)}
{this._renderMenuItemSubsections(menuItemName)}
</div>
);
});
return menuItems;
}
private renderMenuItemSubsections(menuItemName: string): React.ReactNode {
private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) {
return null;
}
return this.renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
}
private renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
return (
<ul style={{margin: 0, listStyleType: 'none', paddingLeft: 0}} key={menuItemName}>
{_.map(entityNames, entityName => {
@@ -138,10 +138,10 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
offset={0}
duration={constants.DOCS_SCROLL_DURATION_MS}
containerId={constants.DOCS_CONTAINER_ID}
onTouchTap={this.onMenuItemClick.bind(this, entityName)}
onTouchTap={this._onMenuItemClick.bind(this, entityName)}
>
<MenuItem
onTouchTap={this.onMenuItemClick.bind(this, menuItemName)}
onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
style={{minHeight: 35}}
innerDivStyle={{paddingLeft: 36, fontSize: 14, lineHeight: '35px'}}
>
@@ -154,7 +154,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
</ul>
);
}
private onMenuItemClick(menuItemName: string): void {
private _onMenuItemClick(menuItemName: string): void {
const id = utils.getIdFromName(menuItemName);
utils.setUrlHash(id);
this.props.onMenuItemClick();

6
packages/website/ts/pages/shared/section_header.tsx
View File

@@ -28,8 +28,8 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
const id = utils.getIdFromName(sectionName);
return (
<div
onMouseOver={this.setAnchorVisibility.bind(this, true)}
onMouseOut={this.setAnchorVisibility.bind(this, false)}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<ScrollElement name={id}>
<AnchorTitle
@@ -42,7 +42,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
</div>
);
}
private setAnchorVisibility(shouldShowAnchor: boolean) {
private _setAnchorVisibility(shouldShowAnchor: boolean) {
this.setState({
shouldShowAnchor,
});

8
packages/website/ts/pages/shared/version_drop_down.tsx
View File

@@ -18,14 +18,14 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
<DropDownMenu
maxHeight={300}
value={this.props.selectedVersion}
onChange={this.updateSelectedVersion.bind(this)}
onChange={this._updateSelectedVersion.bind(this)}
>
{this.renderDropDownItems()}
{this._renderDropDownItems()}
</DropDownMenu>
</div>
);
}
private renderDropDownItems() {
private _renderDropDownItems() {
const items = _.map(this.props.versions, version => {
return (
<MenuItem
@@ -37,7 +37,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
});
return items;
}
private updateSelectedVersion(e: any, index: number, value: string) {
private _updateSelectedVersion(e: any, index: number, value: string) {
window.location.href = `${this.props.docPath}/${value}${window.location.hash}`;
}
}

28
packages/website/ts/pages/wiki/wiki.tsx
View File

@@ -46,7 +46,7 @@ const styles: Styles = {
};
export class Wiki extends React.Component<WikiProps, WikiState> {
private wikiBackoffTimeoutId: number;
private _wikiBackoffTimeoutId: number;
constructor(props: WikiProps) {
super(props);
this.state = {
@@ -55,15 +55,15 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
}
public componentWillMount() {
// tslint:disable-next-line:no-floating-promises
this.fetchArticlesBySectionAsync();
this._fetchArticlesBySectionAsync();
}
public componentWillUnmount() {
clearTimeout(this.wikiBackoffTimeoutId);
clearTimeout(this._wikiBackoffTimeoutId);
}
public render() {
const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
? {}
: this.getMenuSubsectionsBySection(this.state.articlesBySection);
: this._getMenuSubsectionsBySection(this.state.articlesBySection);
return (
<div>
<DocumentTitle title="0x Protocol Wiki"/>
@@ -117,7 +117,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
</a>
</h1>
<div id="wiki">
{this.renderWikiArticles()}
{this._renderWikiArticles()}
</div>
</div>
</div>
@@ -126,12 +126,12 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
</div>
);
}
private renderWikiArticles(): React.ReactNode {
private _renderWikiArticles(): React.ReactNode {
const sectionNames = _.keys(this.state.articlesBySection);
const sections = _.map(sectionNames, sectionName => this.renderSection(sectionName));
const sections = _.map(sectionNames, sectionName => this._renderSection(sectionName));
return sections;
}
private renderSection(sectionName: string) {
private _renderSection(sectionName: string) {
const articles = this.state.articlesBySection[sectionName];
const renderedArticles = _.map(articles, (article: Article) => {
const githubLink = `${constants.URL_GITHUB_WIKI}/edit/master/${sectionName}/${article.fileName}`;
@@ -165,7 +165,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
</div>
);
}
private scrollToHash(): void {
private _scrollToHash(): void {
const hashWithPrefix = this.props.location.hash;
let hash = hashWithPrefix.slice(1);
if (_.isEmpty(hash)) {
@@ -174,14 +174,14 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'});
}
private async fetchArticlesBySectionAsync(): Promise<void> {
private async _fetchArticlesBySectionAsync(): Promise<void> {
const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
const response = await fetch(endpoint);
if (response.status === constants.HTTP_NO_CONTENT_STATUS_CODE) {
// We need to backoff and try fetching again later
this.wikiBackoffTimeoutId = window.setTimeout(() => {
this._wikiBackoffTimeoutId = window.setTimeout(() => {
// tslint:disable-next-line:no-floating-promises
this.fetchArticlesBySectionAsync();
this._fetchArticlesBySectionAsync();
}, WIKI_NOT_READY_BACKOUT_TIMEOUT_MS);
return;
}
@@ -195,10 +195,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
this.setState({
articlesBySection,
}, () => {
this.scrollToHash();
this._scrollToHash();
});
}
private getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) {
private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) {
const sectionNames = _.keys(articlesBySection);
const menuSubsectionsBySection: {[section: string]: string[]} = {};
for (const sectionName of sectionNames) {

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

@@ -15,53 +15,53 @@ import {
} from 'ts/types';
export class Dispatcher {
private dispatch: Dispatch<State>;
private _dispatch: Dispatch<State>;
constructor(dispatch: Dispatch<State>) {
this.dispatch = dispatch;
this._dispatch = dispatch;
}
// Portal
public resetState() {
this.dispatch({
this._dispatch({
type: ActionTypes.ResetState,
});
}
public updateNodeVersion(nodeVersion: string) {
this.dispatch({
this._dispatch({
data: nodeVersion,
type: ActionTypes.UpdateNodeVersion,
});
}
public updateScreenWidth(screenWidth: ScreenWidths) {
this.dispatch({
this._dispatch({
data: screenWidth,
type: ActionTypes.UpdateScreenWidth,
});
}
public swapAssetTokenSymbols() {
this.dispatch({
this._dispatch({
type: ActionTypes.SwapAssetTokens,
});
}
public updateOrderSalt(salt: BigNumber) {
this.dispatch({
this._dispatch({
data: salt,
type: ActionTypes.UpdateOrderSalt,
});
}
public updateUserSuppliedOrderCache(order: Order) {
this.dispatch({
this._dispatch({
data: order,
type: ActionTypes.UpdateUserSuppliedOrderCache,
});
}
public updateShouldBlockchainErrDialogBeOpen(shouldBeOpen: boolean) {
this.dispatch({
this._dispatch({
data: shouldBeOpen,
type: ActionTypes.UpdateShouldBlockchainErrDialogBeOpen,
});
}
public updateChosenAssetToken(side: Side, token: AssetToken) {
this.dispatch({
this._dispatch({
data: {
side,
token,
@@ -70,7 +70,7 @@ export class Dispatcher {
});
}
public updateChosenAssetTokenAddress(side: Side, address: string) {
this.dispatch({
this._dispatch({
data: {
address,
side,
@@ -79,72 +79,72 @@ export class Dispatcher {
});
}
public updateOrderTakerAddress(address: string) {
this.dispatch({
this._dispatch({
data: address,
type: ActionTypes.UpdateOrderTakerAddress,
});
}
public updateUserAddress(address: string) {
this.dispatch({
this._dispatch({
data: address,
type: ActionTypes.UpdateUserAddress,
});
}
public updateOrderExpiry(unixTimestampSec: BigNumber) {
this.dispatch({
this._dispatch({
data: unixTimestampSec,
type: ActionTypes.UpdateOrderExpiry,
});
}
public encounteredBlockchainError(err: BlockchainErrs) {
this.dispatch({
this._dispatch({
data: err,
type: ActionTypes.BlockchainErrEncountered,
});
}
public updateBlockchainIsLoaded(isLoaded: boolean) {
this.dispatch({
this._dispatch({
data: isLoaded,
type: ActionTypes.UpdateBlockchainIsLoaded,
});
}
public addTokenToTokenByAddress(token: Token) {
this.dispatch({
this._dispatch({
data: token,
type: ActionTypes.AddTokenToTokenByAddress,
});
}
public removeTokenToTokenByAddress(token: Token) {
this.dispatch({
this._dispatch({
data: token,
type: ActionTypes.RemoveTokenFromTokenByAddress,
});
}
public clearTokenByAddress() {
this.dispatch({
this._dispatch({
type: ActionTypes.ClearTokenByAddress,
});
}
public updateTokenByAddress(tokens: Token[]) {
this.dispatch({
this._dispatch({
data: tokens,
type: ActionTypes.UpdateTokenByAddress,
});
}
public updateTokenStateByAddress(tokenStateByAddress: TokenStateByAddress) {
this.dispatch({
this._dispatch({
data: tokenStateByAddress,
type: ActionTypes.UpdateTokenStateByAddress,
});
}
public removeFromTokenStateByAddress(tokenAddress: string) {
this.dispatch({
this._dispatch({
data: tokenAddress,
type: ActionTypes.RemoveFromTokenStateByAddress,
});
}
public replaceTokenAllowanceByAddress(address: string, allowance: BigNumber) {
this.dispatch({
this._dispatch({
data: {
address,
allowance,
@@ -153,7 +153,7 @@ export class Dispatcher {
});
}
public replaceTokenBalanceByAddress(address: string, balance: BigNumber) {
this.dispatch({
this._dispatch({
data: {
address,
balance,
@@ -162,7 +162,7 @@ export class Dispatcher {
});
}
public updateTokenBalanceByAddress(address: string, balanceDelta: BigNumber) {
this.dispatch({
this._dispatch({
data: {
address,
balanceDelta,
@@ -171,25 +171,25 @@ export class Dispatcher {
});
}
public updateSignatureData(signatureData: SignatureData) {
this.dispatch({
this._dispatch({
data: signatureData,
type: ActionTypes.UpdateOrderSignatureData,
});
}
public updateUserEtherBalance(balance: BigNumber) {
this.dispatch({
this._dispatch({
data: balance,
type: ActionTypes.UpdateUserEtherBalance,
});
}
public updateNetworkId(networkId: number) {
this.dispatch({
this._dispatch({
data: networkId,
type: ActionTypes.UpdateNetworkId,
});
}
public updateOrderFillAmount(amount: BigNumber) {
this.dispatch({
this._dispatch({
data: amount,
type: ActionTypes.UpdateOrderFillAmount,
});
@@ -197,13 +197,13 @@ export class Dispatcher {
// Docs
public updateCurrentDocsVersion(version: string) {
this.dispatch({
this._dispatch({
data: version,
type: ActionTypes.UpdateLibraryVersion,
});
}
public updateAvailableDocVersions(versions: string[]) {
this.dispatch({
this._dispatch({
data: versions,
type: ActionTypes.UpdateAvailableLibraryVersions,
});
@@ -211,24 +211,24 @@ export class Dispatcher {
// Shared
public showFlashMessage(msg: string|React.ReactNode) {
this.dispatch({
this._dispatch({
data: msg,
type: ActionTypes.ShowFlashMessage,
});
}
public hideFlashMessage() {
this.dispatch({
this._dispatch({
type: ActionTypes.HideFlashMessage,
});
}
public updateProviderType(providerType: ProviderType) {
this.dispatch({
this._dispatch({
type: ActionTypes.UpdateProviderType,
data: providerType,
});
}
public updateInjectedProviderName(injectedProviderName: string) {
this.dispatch({
this._dispatch({
type: ActionTypes.UpdateInjectedProviderName,
data: injectedProviderName,
});

14
packages/website/ts/schemas/validator.ts
View File

@@ -5,15 +5,15 @@ import {signatureDataSchema} from 'ts/schemas/signature_data_schema';
import {tokenSchema} from 'ts/schemas/token_schema';
export class SchemaValidator {
private validator: Validator;
private _validator: Validator;
constructor() {
this.validator = new Validator();
this.validator.addSchema(signatureDataSchema as JSONSchema, signatureDataSchema.id);
this.validator.addSchema(tokenSchema as JSONSchema, tokenSchema.id);
this.validator.addSchema(orderTakerSchema as JSONSchema, orderTakerSchema.id);
this.validator.addSchema(orderSchema as JSONSchema, orderSchema.id);
this._validator = new Validator();
this._validator.addSchema(signatureDataSchema as JSONSchema, signatureDataSchema.id);
this._validator.addSchema(tokenSchema as JSONSchema, tokenSchema.id);
this._validator.addSchema(orderTakerSchema as JSONSchema, orderTakerSchema.id);
this._validator.addSchema(orderSchema as JSONSchema, orderSchema.id);
}
public validate(instance: object, schema: Schema) {
return this.validator.validate(instance, schema);
return this._validator.validate(instance, schema);
}
}

100
packages/website/ts/web3_wrapper.ts
View File

@@ -5,30 +5,30 @@ import {Dispatcher} from 'ts/redux/dispatcher';
import * as Web3 from 'web3';
export class Web3Wrapper {
private dispatcher: Dispatcher;
private web3: Web3;
private prevNetworkId: number;
private shouldPollUserAddress: boolean;
private watchNetworkAndBalanceIntervalId: NodeJS.Timer;
private prevUserEtherBalanceInEth: BigNumber;
private prevUserAddress: string;
private _dispatcher: Dispatcher;
private _web3: Web3;
private _prevNetworkId: number;
private _shouldPollUserAddress: boolean;
private _watchNetworkAndBalanceIntervalId: NodeJS.Timer;
private _prevUserEtherBalanceInEth: BigNumber;
private _prevUserAddress: string;
constructor(dispatcher: Dispatcher, provider: Web3.Provider, networkIdIfExists: number,
shouldPollUserAddress: boolean) {
this.dispatcher = dispatcher;
this.prevNetworkId = networkIdIfExists;
this.shouldPollUserAddress = shouldPollUserAddress;
this._dispatcher = dispatcher;
this._prevNetworkId = networkIdIfExists;
this._shouldPollUserAddress = shouldPollUserAddress;
this.web3 = new Web3();
this.web3.setProvider(provider);
this._web3 = new Web3();
this._web3.setProvider(provider);
// tslint:disable-next-line:no-floating-promises
this.startEmittingNetworkConnectionAndUserBalanceStateAsync();
this._startEmittingNetworkConnectionAndUserBalanceStateAsync();
}
public isAddress(address: string) {
return this.web3.isAddress(address);
return this._web3.isAddress(address);
}
public async getAccountsAsync(): Promise<string[]> {
const addresses = await promisify<string[]>(this.web3.eth.getAccounts)();
const addresses = await promisify<string[]>(this._web3.eth.getAccounts)();
return addresses;
}
public async getFirstAccountIfExistsAsync() {
@@ -39,109 +39,109 @@ export class Web3Wrapper {
return (addresses)[0];
}
public async getNodeVersionAsync(): Promise<string> {
const nodeVersion = await promisify<string>(this.web3.version.getNode)();
const nodeVersion = await promisify<string>(this._web3.version.getNode)();
return nodeVersion;
}
public getProviderObj() {
return this.web3.currentProvider;
return this._web3.currentProvider;
}
public async getNetworkIdIfExists() {
try {
const networkId = await this.getNetworkAsync();
const networkId = await this._getNetworkAsync();
return Number(networkId);
} catch (err) {
return undefined;
}
}
public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
const balanceInWei: BigNumber = await promisify<BigNumber>(this.web3.eth.getBalance)(owner);
const balanceEthOldBigNumber = this.web3.fromWei(balanceInWei, 'ether');
const balanceInWei: BigNumber = await promisify<BigNumber>(this._web3.eth.getBalance)(owner);
const balanceEthOldBigNumber = this._web3.fromWei(balanceInWei, 'ether');
const balanceEth = new BigNumber(balanceEthOldBigNumber);
return balanceEth;
}
public async doesContractExistAtAddressAsync(address: string): Promise<boolean> {
const code = await promisify<string>(this.web3.eth.getCode)(address);
const code = await promisify<string>(this._web3.eth.getCode)(address);
// Regex matches 0x0, 0x00, 0x in order to accomodate poorly implemented clients
const zeroHexAddressRegex = /^0[xX][0]*$/;
const didFindCode = _.isNull(code.match(zeroHexAddressRegex));
return didFindCode;
}
public async signTransactionAsync(address: string, message: string): Promise<string> {
const signData = await promisify<string>(this.web3.eth.sign)(address, message);
const signData = await promisify<string>(this._web3.eth.sign)(address, message);
return signData;
}
public async getBlockTimestampAsync(blockHash: string): Promise<number> {
const {timestamp} = await promisify<Web3.BlockWithoutTransactionData>(this.web3.eth.getBlock)(blockHash);
const {timestamp} = await promisify<Web3.BlockWithoutTransactionData>(this._web3.eth.getBlock)(blockHash);
return timestamp;
}
public destroy() {
this.stopEmittingNetworkConnectionAndUserBalanceStateAsync();
this._stopEmittingNetworkConnectionAndUserBalanceStateAsync();
// HACK: stop() is only available on providerEngine instances
const provider = this.web3.currentProvider;
const provider = this._web3.currentProvider;
if (!_.isUndefined((provider as any).stop)) {
(provider as any).stop();
}
}
// This should only be called from the LedgerConfigDialog
public updatePrevUserAddress(userAddress: string) {
this.prevUserAddress = userAddress;
this._prevUserAddress = userAddress;
}
private async getNetworkAsync() {
const networkId = await promisify(this.web3.version.getNetwork)();
private async _getNetworkAsync() {
const networkId = await promisify(this._web3.version.getNetwork)();
return networkId;
}
private async startEmittingNetworkConnectionAndUserBalanceStateAsync() {
if (!_.isUndefined(this.watchNetworkAndBalanceIntervalId)) {
private async _startEmittingNetworkConnectionAndUserBalanceStateAsync() {
if (!_.isUndefined(this._watchNetworkAndBalanceIntervalId)) {
return; // we are already emitting the state
}
let prevNodeVersion: string;
this.prevUserEtherBalanceInEth = new BigNumber(0);
this.dispatcher.updateNetworkId(this.prevNetworkId);
this.watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(async () => {
this._prevUserEtherBalanceInEth = new BigNumber(0);
this._dispatcher.updateNetworkId(this._prevNetworkId);
this._watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(async () => {
// Check for network state changes
const currentNetworkId = await this.getNetworkIdIfExists();
if (currentNetworkId !== this.prevNetworkId) {
this.prevNetworkId = currentNetworkId;
this.dispatcher.updateNetworkId(currentNetworkId);
if (currentNetworkId !== this._prevNetworkId) {
this._prevNetworkId = currentNetworkId;
this._dispatcher.updateNetworkId(currentNetworkId);
}
// Check for node version changes
const currentNodeVersion = await this.getNodeVersionAsync();
if (currentNodeVersion !== prevNodeVersion) {
prevNodeVersion = currentNodeVersion;
this.dispatcher.updateNodeVersion(currentNodeVersion);
this._dispatcher.updateNodeVersion(currentNodeVersion);
}
if (this.shouldPollUserAddress) {
if (this._shouldPollUserAddress) {
const userAddressIfExists = await this.getFirstAccountIfExistsAsync();
// Update makerAddress on network change
if (this.prevUserAddress !== userAddressIfExists) {
this.prevUserAddress = userAddressIfExists;
this.dispatcher.updateUserAddress(userAddressIfExists);
if (this._prevUserAddress !== userAddressIfExists) {
this._prevUserAddress = userAddressIfExists;
this._dispatcher.updateUserAddress(userAddressIfExists);
}
// Check for user ether balance changes
if (userAddressIfExists !== '') {
await this.updateUserEtherBalanceAsync(userAddressIfExists);
await this._updateUserEtherBalanceAsync(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);
if (!_.isEmpty(this._prevUserAddress)) {
await this._updateUserEtherBalanceAsync(this._prevUserAddress);
}
}
}, 5000);
}
private async updateUserEtherBalanceAsync(userAddress: string) {
private async _updateUserEtherBalanceAsync(userAddress: string) {
const balance = await this.getBalanceInEthAsync(userAddress);
if (!balance.eq(this.prevUserEtherBalanceInEth)) {
this.prevUserEtherBalanceInEth = balance;
this.dispatcher.updateUserEtherBalance(balance);
if (!balance.eq(this._prevUserEtherBalanceInEth)) {
this._prevUserEtherBalanceInEth = balance;
this._dispatcher.updateUserEtherBalance(balance);
}
}
private stopEmittingNetworkConnectionAndUserBalanceStateAsync() {
clearInterval(this.watchNetworkAndBalanceIntervalId);
private _stopEmittingNetworkConnectionAndUserBalanceStateAsync() {
clearInterval(this._watchNetworkAndBalanceIntervalId);
}
}