aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/portal.tsx40
-rw-r--r--packages/website/ts/components/portal_menu.tsx13
-rw-r--r--packages/website/ts/components/wallet.tsx382
3 files changed, 433 insertions, 2 deletions
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 5bdb5bde9..59eaca67e 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -19,12 +19,22 @@ import { TokenBalances } from 'ts/components/token_balances';
import { TopBar } 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';
import { GenerateOrderForm } from 'ts/containers/generate_order_form';
import { localStorage } from 'ts/local_storage/local_storage';
import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
import { validator } from 'ts/schemas/validator';
-import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, WebsitePaths } from 'ts/types';
+import {
+ BlockchainErrs,
+ Environments,
+ HashData,
+ Order,
+ ProviderType,
+ ScreenWidths,
+ TokenByAddress,
+ WebsitePaths,
+} from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -194,6 +204,12 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
<div className="py2" style={{ backgroundColor: colors.grey50 }}>
{this.props.blockchainIsLoaded ? (
<Switch>
+ {configs.ENVIRONMENT === Environments.DEVELOPMENT && (
+ <Route
+ path={`${WebsitePaths.Portal}/wallet`}
+ render={this._renderWallet.bind(this)}
+ />
+ )}
<Route
path={`${WebsitePaths.Portal}/weth`}
render={this._renderEthWrapper.bind(this)}
@@ -272,6 +288,28 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
});
}
+ private _renderWallet() {
+ const allTokens = _.values(this.props.tokenByAddress);
+ const trackedTokens = _.filter(allTokens, t => t.isTracked);
+ return (
+ <div className="flex flex-center">
+ <div className="mx-auto">
+ <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}
+ />
+ </div>
+ </div>
+ );
+ }
private _renderEthWrapper() {
return (
<EthWrappers
diff --git a/packages/website/ts/components/portal_menu.tsx b/packages/website/ts/components/portal_menu.tsx
index a2f9340c8..9ab611556 100644
--- a/packages/website/ts/components/portal_menu.tsx
+++ b/packages/website/ts/components/portal_menu.tsx
@@ -1,7 +1,8 @@
import * as _ from 'lodash';
import * as React from 'react';
import { MenuItem } from 'ts/components/ui/menu_item';
-import { WebsitePaths } from 'ts/types';
+import { Environments, WebsitePaths } from 'ts/types';
+import { configs } from 'ts/utils/configs';
export interface PortalMenuProps {
menuItemStyle: React.CSSProperties;
@@ -57,6 +58,16 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
>
{this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
</MenuItem>
+ {configs.ENVIRONMENT === Environments.DEVELOPMENT && (
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/wallet`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Wallet', 'zmdi-balance-wallet')}
+ </MenuItem>
+ )}
</div>
);
}
diff --git a/packages/website/ts/components/wallet.tsx b/packages/website/ts/components/wallet.tsx
new file mode 100644
index 000000000..41c10c57a
--- /dev/null
+++ b/packages/website/ts/components/wallet.tsx
@@ -0,0 +1,382 @@
+import { ZeroEx } from '0x.js';
+import {
+ constants as sharedConstants,
+ EtherscanLinkSuffixes,
+ Styles,
+ utils as sharedUtils,
+} from '@0xproject/react-shared';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import FlatButton from 'material-ui/FlatButton';
+import { List, ListItem } from 'material-ui/List';
+import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward';
+import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward';
+import * as React from 'react';
+import ReactTooltip = require('react-tooltip');
+import firstBy = require('thenby');
+
+import { Blockchain } from 'ts/blockchain';
+import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { Identicon } from 'ts/components/ui/identicon';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BalanceErrs, BlockchainErrs, Token, TokenByAddress } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
+
+export interface WalletProps {
+ userAddress?: string;
+ networkId?: number;
+ blockchain?: Blockchain;
+ blockchainIsLoaded: boolean;
+ blockchainErr: BlockchainErrs;
+ dispatcher: Dispatcher;
+ tokenByAddress: TokenByAddress;
+ trackedTokens: Token[];
+ userEtherBalanceInWei: BigNumber;
+ lastForceTokenStateRefetch: number;
+}
+
+interface WalletState {
+ trackedTokenStateByAddress: TokenStateByAddress;
+}
+
+interface TokenStateByAddress {
+ [address: string]: TokenState;
+}
+
+interface TokenState {
+ balance: BigNumber;
+ allowance: BigNumber;
+ isLoaded: boolean;
+}
+
+enum WrappedEtherAction {
+ Wrap,
+ Unwrap,
+}
+
+interface AllowanceToggleConfig {
+ token: Token;
+ tokenState: TokenState;
+}
+
+interface AccessoryItemConfig {
+ wrappedEtherAction?: WrappedEtherAction;
+ allowanceToggleConfig?: AllowanceToggleConfig;
+}
+
+const styles: Styles = {
+ wallet: {
+ width: 346,
+ backgroundColor: '#ffffff',
+ borderBottomRightRadius: 10,
+ borderBottomLeftRadius: 10,
+ borderTopRightRadius: 10,
+ borderTopLeftRadius: 10,
+ boxShadow: '0px 4px 6px rgba(56, 59, 137, 0.2)',
+ overflow: 'hidden',
+ },
+ list: {
+ padding: '0px 0px 0px 0px',
+ },
+ tokenItemInnerDiv: {
+ paddingLeft: 60,
+ },
+ headerItemInnerDiv: {
+ paddingLeft: 65,
+ },
+ footerItemInnerDiv: {
+ paddingLeft: 24,
+ },
+ borderedItem: {
+ borderBottomColor: '#f5f5f6',
+ borderBottomStyle: 'solid',
+ borderWidth: 1,
+ },
+ tokenItem: {
+ backgroundColor: '#fbfbfc',
+ paddingTop: 8,
+ paddingBottom: 8,
+ },
+ headerItem: {
+ paddingTop: 8,
+ paddingBottom: 8,
+ },
+ wrappedEtherButtonLabel: {
+ fontSize: 12,
+ },
+ amountLabel: {
+ fontWeight: 'bold',
+ color: 'black',
+ },
+};
+
+const ETHER_ICON_PATH = '/images/ether.png';
+const ETHER_TOKEN_SYMBOL = 'WETH';
+const ZRX_TOKEN_SYMBOL = 'ZRX';
+const ETHER_SYMBOL = 'ETH';
+const ICON_DIMENSION = 24;
+const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
+
+export class Wallet extends React.Component<WalletProps, WalletState> {
+ private _isUnmounted: boolean;
+ constructor(props: WalletProps) {
+ super(props);
+ this._isUnmounted = false;
+ const initialTrackedTokenStateByAddress = this._getInitialTrackedTokenStateByAddress(props.trackedTokens);
+ this.state = {
+ trackedTokenStateByAddress: initialTrackedTokenStateByAddress,
+ };
+ }
+ public componentWillMount() {
+ const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress);
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses);
+ }
+ public componentWillUnmount() {
+ this._isUnmounted = true;
+ }
+ public componentWillReceiveProps(nextProps: WalletProps) {
+ if (
+ nextProps.userAddress !== this.props.userAddress ||
+ nextProps.networkId !== this.props.networkId ||
+ nextProps.lastForceTokenStateRefetch !== this.props.lastForceTokenStateRefetch
+ ) {
+ const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress);
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses);
+ }
+ if (!_.isEqual(nextProps.trackedTokens, this.props.trackedTokens)) {
+ const newTokens = _.difference(nextProps.trackedTokens, this.props.trackedTokens);
+ const newTokenAddresses = _.map(newTokens, token => token.address);
+ // Add placeholder entry for this token to the state, since fetching the
+ // balance/allowance is asynchronous
+ const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress;
+ for (const tokenAddress of newTokenAddresses) {
+ trackedTokenStateByAddress[tokenAddress] = {
+ balance: new BigNumber(0),
+ allowance: new BigNumber(0),
+ isLoaded: false,
+ };
+ }
+ this.setState({
+ trackedTokenStateByAddress,
+ });
+ // Fetch the actual balance/allowance.
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchBalancesAndAllowancesAsync(newTokenAddresses);
+ }
+ }
+ public render() {
+ const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
+ return <div style={styles.wallet}>{isReadyToRender ? this._renderRows() : <div />}</div>;
+ }
+ private _renderRows() {
+ return (
+ <List style={styles.list}>
+ {_.concat(
+ this._renderHeaderRows(),
+ this._renderEthRows(),
+ this._renderTokenRows(),
+ this._renderFooterRows(),
+ )}
+ </List>
+ );
+ }
+ private _renderHeaderRows() {
+ const userAddress = this.props.userAddress;
+ const primaryText = utils.getAddressBeginAndEnd(userAddress);
+ return (
+ <ListItem
+ primaryText={primaryText}
+ leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
+ style={{ ...styles.headerItem, ...styles.borderedItem }}
+ innerDivStyle={styles.headerItemInnerDiv}
+ />
+ );
+ }
+ private _renderFooterRows() {
+ const primaryText = '+ other tokens';
+ return (
+ <ListItem primaryText={primaryText} style={styles.borderedItem} innerDivStyle={styles.footerItemInnerDiv} />
+ );
+ }
+ private _renderEthRows() {
+ const primaryText = this._renderAmount(
+ this.props.userEtherBalanceInWei,
+ constants.DECIMAL_PLACES_ETH,
+ ETHER_SYMBOL,
+ );
+ const accessoryItemConfig = {
+ wrappedEtherAction: WrappedEtherAction.Wrap,
+ };
+ return (
+ <ListItem
+ primaryText={primaryText}
+ leftIcon={<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />}
+ rightAvatar={this._renderAccessoryItems(accessoryItemConfig)}
+ style={{ ...styles.tokenItem, ...styles.borderedItem }}
+ innerDivStyle={styles.tokenItemInnerDiv}
+ />
+ );
+ }
+ private _renderTokenRows() {
+ const trackedTokens = this.props.trackedTokens;
+ const trackedTokensStartingWithEtherToken = trackedTokens.sort(
+ firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL)
+ .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL)
+ .thenBy('address'),
+ );
+ return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
+ }
+ private _renderTokenRow(token: Token) {
+ const tokenState = this.state.trackedTokenStateByAddress[token.address];
+ const tokenLink = sharedUtils.getEtherScanLinkIfExists(
+ token.address,
+ this.props.networkId,
+ EtherscanLinkSuffixes.Address,
+ );
+ const amount = this._renderAmount(tokenState.balance, token.decimals, token.symbol);
+ const wrappedEtherAction = token.symbol === ETHER_TOKEN_SYMBOL ? WrappedEtherAction.Unwrap : undefined;
+ const accessoryItemConfig: AccessoryItemConfig = {
+ wrappedEtherAction,
+ allowanceToggleConfig: {
+ token,
+ tokenState,
+ },
+ };
+ return (
+ <ListItem
+ primaryText={amount}
+ leftIcon={this._renderTokenIcon(token, tokenLink)}
+ rightAvatar={this._renderAccessoryItems(accessoryItemConfig)}
+ style={{ ...styles.tokenItem, ...styles.borderedItem }}
+ innerDivStyle={styles.tokenItemInnerDiv}
+ />
+ );
+ }
+ private _renderAccessoryItems(config: AccessoryItemConfig) {
+ const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherAction);
+ const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig);
+ return (
+ <div style={{ width: 160 }}>
+ <div className="flex">
+ <div className="flex-auto">
+ {shouldShowWrappedEtherAction && this._renderWrappedEtherButton(config.wrappedEtherAction)}
+ </div>
+ <div className="flex-last py1">
+ {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)}
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderAllowanceToggle(config: AllowanceToggleConfig) {
+ return (
+ <AllowanceToggle
+ networkId={this.props.networkId}
+ blockchain={this.props.blockchain}
+ dispatcher={this.props.dispatcher}
+ token={config.token}
+ tokenState={config.tokenState}
+ onErrorOccurred={_.noop} // TODO: Error handling
+ userAddress={this.props.userAddress}
+ isDisabled={!config.tokenState.isLoaded}
+ refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, config.token.address)}
+ />
+ );
+ }
+ private _renderAmount(amount: BigNumber, decimals: number, symbol: string) {
+ const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+ const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION);
+ const result = `${formattedAmount} ${symbol}`;
+ return <div style={styles.amountLabel}>{result}</div>;
+ }
+ private _renderTokenIcon(token: Token, tokenLink?: string) {
+ const tooltipId = `tooltip-${token.address}`;
+ const tokenIcon = <TokenIcon token={token} diameter={ICON_DIMENSION} />;
+ if (_.isUndefined(tokenLink)) {
+ return tokenIcon;
+ } else {
+ return (
+ <a href={tokenLink} target="_blank" style={{ textDecoration: 'none' }}>
+ {tokenIcon}
+ </a>
+ );
+ }
+ }
+ private _renderWrappedEtherButton(action: WrappedEtherAction) {
+ let buttonLabel;
+ let buttonIcon;
+ switch (action) {
+ case WrappedEtherAction.Wrap:
+ buttonLabel = 'wrap';
+ buttonIcon = <NavigationArrowDownward />;
+ break;
+ case WrappedEtherAction.Unwrap:
+ buttonLabel = 'unwrap';
+ buttonIcon = <NavigationArrowUpward />;
+ break;
+ default:
+ throw utils.spawnSwitchErr('wrappedEtherAction', action);
+ }
+ return (
+ <FlatButton
+ label={buttonLabel}
+ labelPosition="after"
+ primary={true}
+ icon={buttonIcon}
+ labelStyle={styles.wrappedEtherButtonLabel}
+ />
+ );
+ }
+ private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]) {
+ const trackedTokenStateByAddress: TokenStateByAddress = {};
+ _.each(trackedTokens, token => {
+ trackedTokenStateByAddress[token.address] = {
+ balance: new BigNumber(0),
+ allowance: new BigNumber(0),
+ isLoaded: false,
+ };
+ });
+ return trackedTokenStateByAddress;
+ }
+ private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]) {
+ const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress;
+ const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
+ for (const tokenAddress of tokenAddresses) {
+ const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
+ userAddressIfExists,
+ tokenAddress,
+ );
+ trackedTokenStateByAddress[tokenAddress] = {
+ balance,
+ allowance,
+ isLoaded: true,
+ };
+ }
+ if (!this._isUnmounted) {
+ this.setState({
+ trackedTokenStateByAddress,
+ });
+ }
+ }
+ private async _refetchTokenStateAsync(tokenAddress: string) {
+ const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
+ const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
+ userAddressIfExists,
+ tokenAddress,
+ );
+ this.setState({
+ trackedTokenStateByAddress: {
+ ...this.state.trackedTokenStateByAddress,
+ [tokenAddress]: {
+ balance,
+ allowance,
+ isLoaded: true,
+ },
+ },
+ });
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-16 13:53:50 +0800