import { colors, Styles } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
import { LedgerConfigDialog } from 'ts/components/dialogs/ledger_config_dialog';
import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_dialog';
import { EthWrappers } from 'ts/components/eth_wrappers';
import { AssetPicker } from 'ts/components/generate_order/asset_picker';
import { PortalMenu } from 'ts/components/portal/portal_menu';
import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
import { TokenBalances } from 'ts/components/token_balances';
import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
import { TradeHistory } from 'ts/components/trade_history/trade_history';
import { FlashMessage } from 'ts/components/ui/flash_message';
import { Wallet } from 'ts/components/wallet/wallet';
import { GenerateOrderForm } from 'ts/containers/generate_order_form';
import { localStorage } from 'ts/local_storage/local_storage';
import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
import { FullscreenMessage } from 'ts/pages/fullscreen_message';
import { Dispatcher } from 'ts/redux/dispatcher';
import {
BlockchainErrs,
HashData,
Order,
ProviderType,
ScreenWidths,
TokenByAddress,
TokenVisibility,
WebsitePaths,
} from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
export interface PortalProps {
blockchainErr: BlockchainErrs;
blockchainIsLoaded: boolean;
dispatcher: Dispatcher;
hashData: HashData;
injectedProviderName: string;
networkId: number;
nodeVersion: string;
orderFillAmount: BigNumber;
providerType: ProviderType;
screenWidth: ScreenWidths;
tokenByAddress: TokenByAddress;
userEtherBalanceInWei: BigNumber;
userAddress: string;
shouldBlockchainErrDialogBeOpen: boolean;
userSuppliedOrderCache: Order;
location: Location;
flashMessage?: string | React.ReactNode;
lastForceTokenStateRefetch: number;
translate: Translate;
}
interface PortalState {
prevNetworkId: number;
prevNodeVersion: string;
prevUserAddress: string;
prevPathname: string;
isDisclaimerDialogOpen: boolean;
isLedgerDialogOpen: boolean;
tokenManagementState: TokenManagementState;
}
enum TokenManagementState {
Add = 'Add',
Remove = 'Remove',
None = 'None',
}
const THROTTLE_TIMEOUT = 100;
const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
const BACK_BUTTON_HEIGHT = 28;
const LEFT_COLUMN_WIDTH = 346;
const styles: Styles = {
root: {
width: '100%',
height: '100%',
backgroundColor: colors.lightestGrey,
},
body: {
height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
},
leftColumn: {
width: LEFT_COLUMN_WIDTH,
},
scrollContainer: {
height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
WebkitOverflowScrolling: 'touch',
overflow: 'auto',
},
title: {
fontWeight: 'bold',
fontSize: 20,
},
backButton: {
height: BACK_BUTTON_HEIGHT,
backgroundColor: colors.white,
borderRadius: BACK_BUTTON_HEIGHT,
boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
},
backButtonIcon: {
color: colors.mediumBlue,
fontSize: 20,
},
};
export class Portal extends React.Component<PortalProps, PortalState> {
private _blockchain: Blockchain;
private _throttledScreenWidthUpdate: () => void;
constructor(props: PortalProps) {
super(props);
this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
const hasAcceptedDisclaimer =
!_.isUndefined(didAcceptPortalDisclaimer) && !_.isEmpty(didAcceptPortalDisclaimer);
this.state = {
prevNetworkId: this.props.networkId,
prevNodeVersion: this.props.nodeVersion,
prevUserAddress: this.props.userAddress,
prevPathname: this.props.location.pathname,
isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
tokenManagementState: TokenManagementState.None,
isLedgerDialogOpen: false,
};
}
public componentDidMount(): void {
window.addEventListener('resize', this._throttledScreenWidthUpdate);
window.scrollTo(0, 0);
}
public componentWillMount(): void {
this._blockchain = new Blockchain(this.props.dispatcher);
}
public componentWillUnmount(): void {
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
// become disconnected from their backing Ethereum node, changed user accounts, etc...)
this.props.dispatcher.resetState();
}
public componentWillReceiveProps(nextProps: PortalProps): void {
if (nextProps.networkId !== this.state.prevNetworkId) {
// tslint:disable-next-line:no-floating-promises
this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId);
this.setState({
prevNetworkId: nextProps.networkId,
});
}
if (nextProps.userAddress !== this.state.prevUserAddress) {
const newUserAddress = _.isEmpty(nextProps.userAddress) ? undefined : nextProps.userAddress;
// tslint:disable-next-line:no-floating-promises
this._blockchain.userAddressUpdatedFireAndForgetAsync(newUserAddress);
this.setState({
prevUserAddress: nextProps.userAddress,
});
}
if (nextProps.nodeVersion !== this.state.prevNodeVersion) {
// tslint:disable-next-line:no-floating-promises
this._blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
}
if (nextProps.location.pathname !== this.state.prevPathname) {
this.setState({
prevPathname: nextProps.location.pathname,
});
}
}
public render(): React.ReactNode {
const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
this.props.dispatcher,
);
const isAssetPickerDialogOpen = this.state.tokenManagementState !== TokenManagementState.None;
const tokenVisibility =
this.state.tokenManagementState === TokenManagementState.Add
? TokenVisibility.UNTRACKED
: TokenVisibility.TRACKED;
return (
<div style={styles.root}>
<DocumentTitle title="0x Portal DApp" />
<TopBar
userAddress={this.props.userAddress}
networkId={this.props.networkId}
injectedProviderName={this.props.injectedProviderName}
onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
dispatcher={this.props.dispatcher}
providerType={this.props.providerType}
blockchainIsLoaded={this.props.blockchainIsLoaded}
location={this.props.location}
blockchain={this._blockchain}
translate={this.props.translate}
displayType={TopBarDisplayType.Expanded}
style={{ backgroundColor: colors.lightestGrey }}
/>
<div id="portal" style={styles.body}>
<div className="sm-flex flex-center">
<div className="flex-last px3">
<div style={styles.leftColumn}>
<Switch>
<Route
path={`${WebsitePaths.Portal}/:route`}
render={this._renderMenu.bind(this)}
/>
<Route
exact={true}
path={`${WebsitePaths.Portal}`}
render={this._renderWallet.bind(this)}
/>
</Switch>
</div>
</div>
<div className="flex-auto px3" style={styles.scrollContainer}>
<Switch>
<Route
path={`${WebsitePaths.Portal}/:route`}
render={this._renderAccountManagement.bind(this)}
/>
<Route
exact={true}
path={`${WebsitePaths.Portal}/`}
render={this._renderRelayerIndex.bind(this)}
/>
</Switch>
</div>
</div>
<BlockchainErrDialog
blockchain={this._blockchain}
blockchainErr={this.props.blockchainErr}
isOpen={this.props.shouldBlockchainErrDialogBeOpen}
userAddress={this.props.userAddress}
toggleDialogFn={updateShouldBlockchainErrDialogBeOpen}
networkId={this.props.networkId}
/>
<PortalDisclaimerDialog
isOpen={this.state.isDisclaimerDialogOpen}
onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
/>
<FlashMessage dispatcher={this.props.dispatcher} flashMessage={this.props.flashMessage} />
{this.props.blockchainIsLoaded && (
<LedgerConfigDialog
providerType={this.props.providerType}
networkId={this.props.networkId}
blockchain={this._blockchain}
dispatcher={this.props.dispatcher}
toggleDialogFn={this._onToggleLedgerDialog.bind(this)}
isOpen={this.state.isLedgerDialogOpen}
/>
)}
<AssetPicker
userAddress={this.props.userAddress}
networkId={this.props.networkId}
blockchain={this._blockchain}
dispatcher={this.props.dispatcher}
isOpen={isAssetPickerDialogOpen}
currentTokenAddress={''}
onTokenChosen={this._onTokenChosen.bind(this)}
tokenByAddress={this.props.tokenByAddress}
tokenVisibility={tokenVisibility}
/>
</div>
</div>
);
}
private _renderMenu(routeComponentProps: RouteComponentProps<any>): React.ReactNode {
return (
<div>
<BackButton to={`${WebsitePaths.Portal}`} labelText={'back to Relayers'} />
<PortalMenu selectedPath={routeComponentProps.location.pathname} />
</div>
);
}
private _renderWallet(): React.ReactNode {
const allTokens = _.values(this.props.tokenByAddress);
const trackedTokens = _.filter(allTokens, t => t.isTracked);
return (
<div>
<Title labelText={'Your Account'} />
<Wallet
userAddress={this.props.userAddress}
networkId={this.props.networkId}
blockchain={this._blockchain}
blockchainIsLoaded={this.props.blockchainIsLoaded}
blockchainErr={this.props.blockchainErr}
dispatcher={this.props.dispatcher}
tokenByAddress={this.props.tokenByAddress}
trackedTokens={trackedTokens}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
injectedProviderName={this.props.injectedProviderName}
providerType={this.props.providerType}
onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
onAddToken={this._onAddToken.bind(this)}
onRemoveToken={this._onRemoveToken.bind(this)}
/>
</div>
);
}
private _renderAccountManagement(): React.ReactNode {
return this.props.blockchainIsLoaded ? (
<Switch>
<Route path={`${WebsitePaths.Portal}/weth`} render={this._renderEthWrapper.bind(this)} />
<Route path={`${WebsitePaths.Portal}/account`} render={this._renderTokenBalances.bind(this)} />
<Route path={`${WebsitePaths.Portal}/trades`} render={this._renderTradeHistory.bind(this)} />
<Route path={`${WebsitePaths.Portal}/direct`} render={this._renderTradeDirect.bind(this)} />
<Route render={this._renderNotFoundMessage.bind(this)} />
</Switch>
) : (
// TODO: consolidate this loading component with the one in relayer_index
<div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}>
<div
className="relative sm-px2 sm-pt2 sm-m1"
style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
>
<div className="center pb2">
<CircularProgress size={40} thickness={5} />
</div>
</div>
</div>
);
}
private _renderEthWrapper(): React.ReactNode {
return (
<div>
<Title labelText={'Wrapped ETH'} />
<EthWrappers
networkId={this.props.networkId}
blockchain={this._blockchain}
dispatcher={this.props.dispatcher}
tokenByAddress={this.props.tokenByAddress}
userAddress={this.props.userAddress}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
/>
</div>
);
}
private _renderTradeHistory(): React.ReactNode {
return (
<div>
<Title labelText={'Trade History'} />
<TradeHistory
tokenByAddress={this.props.tokenByAddress}
userAddress={this.props.userAddress}
networkId={this.props.networkId}
/>
</div>
);
}
private _renderTradeDirect(match: any, location: Location, history: History): React.ReactNode {
return (
<div>
<Title labelText={'Trade Direct'} />
<GenerateOrderForm
blockchain={this._blockchain}
hashData={this.props.hashData}
dispatcher={this.props.dispatcher}
/>
</div>
);
}
private _renderTokenBalances(): React.ReactNode {
const allTokens = _.values(this.props.tokenByAddress);
const trackedTokens = _.filter(allTokens, t => t.isTracked);
return (
<div>
<Title labelText={'Your Account'} />
<TokenBalances
blockchain={this._blockchain}
blockchainErr={this.props.blockchainErr}
blockchainIsLoaded={this.props.blockchainIsLoaded}
dispatcher={this.props.dispatcher}
screenWidth={this.props.screenWidth}
tokenByAddress={this.props.tokenByAddress}
trackedTokens={trackedTokens}
userAddress={this.props.userAddress}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
networkId={this.props.networkId}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
/>
</div>
);
}
private _renderRelayerIndex(): React.ReactNode {
return (
<div>
<Title labelText={'Explore 0x Relayers'} />
<RelayerIndex networkId={this.props.networkId} />
</div>
);
}
private _renderNotFoundMessage(): React.ReactNode {
return (
<FullscreenMessage
headerText={'404 Not Found'}
bodyText={"Hm... looks like we couldn't find what you are looking for."}
/>
);
}
private _onTokenChosen(tokenAddress: string): void {
if (_.isEmpty(tokenAddress)) {
this.setState({
tokenManagementState: TokenManagementState.None,
});
return;
}
const token = this.props.tokenByAddress[tokenAddress];
const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol);
if (this.state.tokenManagementState === TokenManagementState.Remove && !isDefaultTrackedToken) {
if (token.isRegistered) {
// Remove the token from tracked tokens
const newToken = {
...token,
isTracked: false,
};
this.props.dispatcher.updateTokenByAddress([newToken]);
} else {
this.props.dispatcher.removeTokenToTokenByAddress(token);
}
trackedTokenStorage.removeTrackedToken(this.props.userAddress, this.props.networkId, tokenAddress);
} else if (isDefaultTrackedToken) {
this.props.dispatcher.showFlashMessage(`Cannot remove ${token.name} because it's a default token`);
}
this.setState({
tokenManagementState: TokenManagementState.None,
});
}
private _onToggleLedgerDialog(): void {
this.setState({
isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
});
}
private _onAddToken(): void {
this.setState({
tokenManagementState: TokenManagementState.Add,
});
}
private _onRemoveToken(): void {
this.setState({
tokenManagementState: TokenManagementState.Remove,
});
}
private _onPortalDisclaimerAccepted(): void {
localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
this.setState({
isDisclaimerDialogOpen: false,
});
}
private _updateScreenWidth(): void {
const newScreenWidth = utils.getScreenWidth();
this.props.dispatcher.updateScreenWidth(newScreenWidth);
}
}
interface TitleProps {
labelText: string;
}
const Title = (props: TitleProps) => {
return (
<div className="py3" style={styles.title}>
{props.labelText}
</div>
);
};
interface BackButtonProps {
to: string;
labelText: string;
}
const BackButton = (props: BackButtonProps) => {
return (
<div style={{ height: 65, paddingTop: 25 }}>
<Link to={props.to} style={{ textDecoration: 'none' }}>
<div className="flex right" style={{ ...styles.backButton, paddingTop: 10 }}>
<div style={{ marginLeft: 12 }}>
<i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
</div>
<div style={{ marginLeft: 12, marginRight: 12 }}>
<div style={{ fontSize: 16, color: colors.lightGrey }}>{props.labelText}</div>
</div>
</div>
</Link>
</div>
);
};
