import { constants as sharedConstants, EtherscanLinkSuffixes, Styles, utils as sharedUtils, } from '@0xproject/react-shared'; import { BigNumber, errorUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import FloatingActionButton from 'material-ui/FloatingActionButton'; import { ListItem } from 'material-ui/List'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import ContentAdd from 'material-ui/svg-icons/content/add'; import ContentRemove from 'material-ui/svg-icons/content/remove'; import * as React from 'react'; import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { BlockchainErrs, ProviderType, ScreenWidths, Side, Token, TokenByAddress, TokenState, TokenStateByAddress, WebsitePaths, } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; export interface WalletProps { userAddress: string; networkId: number; blockchain: Blockchain; blockchainIsLoaded: boolean; blockchainErr: BlockchainErrs; dispatcher: Dispatcher; tokenByAddress: TokenByAddress; trackedTokens: Token[]; userEtherBalanceInWei?: BigNumber; lastForceTokenStateRefetch: number; injectedProviderName: string; providerType: ProviderType; screenWidth: ScreenWidths; location: Location; trackedTokenStateByAddress: TokenStateByAddress; onToggleLedgerDialog: () => void; onAddToken: () => void; onRemoveToken: () => void; refetchTokenStateAsync: (tokenAddress: string) => Promise; style: React.CSSProperties; } interface WalletState { wrappedEtherDirection?: Side; isHoveringSidebar: boolean; } interface AllowanceToggleConfig { token: Token; tokenState: TokenState; } interface AccessoryItemConfig { wrappedEtherDirection?: Side; allowanceToggleConfig?: AllowanceToggleConfig; } const styles: Styles = { borderedItem: { borderBottomColor: colors.walletBorder, borderBottomStyle: 'solid', borderWidth: 1, }, tokenItem: { backgroundColor: colors.walletDefaultItemBackground, minHeight: 85, }, headerItem: { minHeight: 60, }, amountLabel: { fontWeight: 'bold', color: colors.black, }, valueLabel: { color: colors.darkGrey, fontSize: 14, }, bodyInnerDiv: { overflow: 'auto', WebkitOverflowScrolling: 'touch', position: 'relative', }, }; const ETHER_ICON_PATH = '/images/ether.png'; const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; const PLACEHOLDER_COLOR = colors.grey300; const LOADING_ROWS_COUNT = 6; const ActionButton = styled(FloatingActionButton)` button { position: static !important; } `; export class Wallet extends React.Component { public static defaultProps = { style: {}, }; constructor(props: WalletProps) { super(props); this.state = { wrappedEtherDirection: undefined, isHoveringSidebar: false, }; } public componentDidUpdate(prevProps: WalletProps): void { const currentTrackedTokens = this.props.trackedTokens; const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens); const firstDifferentTrackedToken = _.head(differentTrackedTokens); // check if there is only one different token, and if that token is a member of the current tracked tokens // this means that the token was added, not removed if ( !_.isUndefined(firstDifferentTrackedToken) && _.size(differentTrackedTokens) === 1 && _.includes(currentTrackedTokens, firstDifferentTrackedToken) ) { document.getElementById(firstDifferentTrackedToken.address).scrollIntoView(); } } public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()} ); } private _renderLoadingRows(): React.ReactNode { return _.concat(this._renderLoadingHeaderRows(), this._renderLoadingBodyRows()); } private _renderLoadingHeaderRows(): React.ReactElement<{}> { return this._renderPlainHeaderRow('Loading...'); } private _renderLoadingBodyRows(): React.ReactElement<{}> { const bodyStyle = this._getBodyStyle(); const loadingRowsRange = _.range(LOADING_ROWS_COUNT); return (
{_.map(loadingRowsRange, index => { return ; })}
); } private _renderLoadedRows(): React.ReactNode { const isAddressAvailable = !_.isEmpty(this.props.userAddress); return isAddressAvailable ? _.concat(this._renderConnectedHeaderRows(), this._renderBody()) : _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows()); } private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { const isExternallyInjectedProvider = utils.isExternallyInjected( this.props.providerType, this.props.injectedProviderName, ); const text = isExternallyInjectedProvider ? 'Please unlock MetaMask...' : 'Please connect a wallet...'; return this._renderPlainHeaderRow(text); } private _renderPlainHeaderRow(text: string): React.ReactElement<{}> { return ( } main={ {text} // https://github.com/palantir/tslint-react/issues/140 // tslint:disable-next-line:jsx-curly-spacing } style={{ ...styles.borderedItem, ...styles.headerItem }} /> ); } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; const main = (
{utils.getAddressBeginAndEnd(userAddress)} {this.props.injectedProviderName}
); return ( } main={main} style={{ ...styles.borderedItem, ...styles.headerItem }} /> ); } private _renderBody(): React.ReactElement<{}> { const bodyStyle = this._getBodyStyle(); return (
{this._renderEthRows()} {this._renderTokenRows()}
); } private _getBodyStyle(): React.CSSProperties { return { ...styles.bodyInnerDiv, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', marginRight: this.state.isHoveringSidebar ? 0 : 4, // TODO: make this completely responsive maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, }; } private _onSidebarHover(_event: React.FormEvent): void { this.setState({ isHoveringSidebar: true, }); } private _onSidebarHoverOff(): void { this.setState({ isHoveringSidebar: false, }); } private _renderEthRows(): React.ReactNode { const icon = ; const primaryText = this._renderAmount( this.props.userEtherBalanceInWei || new BigNumber(0), constants.DECIMAL_PLACES_ETH, constants.ETHER_SYMBOL, _.isUndefined(this.props.userEtherBalanceInWei), ); const etherToken = this._getEthToken(); const etherTokenState = this.props.trackedTokenStateByAddress[etherToken.address]; const etherPrice = etherTokenState.price; const secondaryText = this._renderValue( this.props.userEtherBalanceInWei || new BigNumber(0), constants.DECIMAL_PLACES_ETH, etherPrice, _.isUndefined(this.props.userEtherBalanceInWei) || !etherTokenState.isLoaded, ); const accessoryItemConfig = { wrappedEtherDirection: Side.Deposit, }; const key = ETHER_ITEM_KEY; return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row'); } private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; const trackedTokensStartingWithEtherToken = trackedTokens.sort( firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL) .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL) .thenBy('trackedTimestamp'), ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } private _renderTokenRow(token: Token, index: number): React.ReactNode { const tokenState = this.props.trackedTokenStateByAddress[token.address]; if (_.isUndefined(tokenState)) { return null; } const tokenLink = sharedUtils.getEtherScanLinkIfExists( token.address, this.props.networkId, EtherscanLinkSuffixes.Address, ); const icon = ; const isWeth = token.symbol === constants.ETHER_TOKEN_SYMBOL; const wrappedEtherDirection = isWeth ? Side.Receive : undefined; const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol, !tokenState.isLoaded); const secondaryText = this._renderValue( tokenState.balance, token.decimals, tokenState.price, !tokenState.isLoaded, ); const accessoryItemConfig: AccessoryItemConfig = { wrappedEtherDirection, allowanceToggleConfig: { token, tokenState, }, }; const key = token.address; const isLastRow = index === this.props.trackedTokens.length - 1; return this._renderBalanceRow( key, icon, primaryText, secondaryText, accessoryItemConfig, isLastRow, isWeth ? 'weth-row' : undefined, ); } private _renderBalanceRow( key: string, icon: React.ReactNode, primaryText: React.ReactNode, secondaryText: React.ReactNode, accessoryItemConfig: AccessoryItemConfig, isLastRow: boolean, className?: string, ): React.ReactNode { const shouldShowWrapEtherItem = !_.isUndefined(this.state.wrappedEtherDirection) && this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection && !_.isUndefined(this.props.userEtherBalanceInWei); let additionalStyle; if (shouldShowWrapEtherItem) { additionalStyle = walletItemStyles.focusedItem; } else if (!isLastRow) { additionalStyle = styles.borderedItem; } const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return (
{primaryText} {secondaryText}
} accessory={this._renderAccessoryItems(accessoryItemConfig)} style={style} /> {shouldShowWrapEtherItem && ( this.props.refetchTokenStateAsync(etherToken.address)} /> )} ); } private _renderAccessoryItems(config: AccessoryItemConfig): React.ReactElement<{}> { const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherDirection); const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with // the "unwrap" button in the row below const toggle = shouldShowToggle ? ( this._renderAllowanceToggle(config.allowanceToggleConfig) ) : (
); return (
{shouldShowWrappedEtherAction && this._renderWrappedEtherButton(config.wrappedEtherDirection)}
{toggle}
); } private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { // TODO: Error handling return ( this.props.refetchTokenStateAsync(config.token.address)} /> ); } private _renderAmount( amount: BigNumber, decimals: number, symbol: string, isLoading: boolean = false, ): React.ReactNode { if (isLoading) { return (
0.00 XXX
); } else { const result = utils.getFormattedAmount(amount, decimals, symbol); return
{result}
; } } private _renderValue( amount: BigNumber, decimals: number, price?: BigNumber, isLoading: boolean = false, ): React.ReactNode { let result; if (!isLoading) { if (_.isUndefined(price)) { result = '--'; } else { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const value = unitAmount.mul(price); const formattedAmount = value.toFixed(USD_DECIMAL_PLACES); result = `$${formattedAmount}`; } } else { result = '$0.00'; } return (
{result}
); } private _renderWrappedEtherButton(wrappedEtherDirection: Side): React.ReactNode { const isWrappedEtherDirectionOpen = this.state.wrappedEtherDirection === wrappedEtherDirection; let buttonLabel; let buttonIconName; if (isWrappedEtherDirectionOpen) { buttonLabel = 'cancel'; buttonIconName = 'zmdi-close'; } else { switch (wrappedEtherDirection) { case Side.Deposit: buttonLabel = 'wrap'; buttonIconName = 'zmdi-long-arrow-down'; break; case Side.Receive: buttonLabel = 'unwrap'; buttonIconName = 'zmdi-long-arrow-up'; break; default: throw errorUtils.spawnSwitchErr('wrappedEtherDirection', wrappedEtherDirection); } } const onClick = isWrappedEtherDirectionOpen ? this._closeWrappedEtherActionRow.bind(this, wrappedEtherDirection) : this._openWrappedEtherActionRow.bind(this, wrappedEtherDirection); return ( ); } private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Opened' : 'Wallet - Unwrap WETH Opened'; analytics.logEvent('Portal', action, networkName); this.setState({ wrappedEtherDirection, }); } private _closeWrappedEtherActionRow(wrappedEtherDirection: Side): void { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Closed' : 'Wallet - Unwrap WETH Closed'; analytics.logEvent('Portal', action, networkName); this.setState({ wrappedEtherDirection: undefined, }); } private _getEthToken(): Token { return utils.getEthToken(this.props.tokenByAddress); } } interface StandardIconRowProps { icon: React.ReactNode; main: React.ReactNode; accessory?: React.ReactNode; style?: React.CSSProperties; } const StandardIconRow = (props: StandardIconRowProps) => { return (
{props.icon}
{props.main}
{props.accessory}
); }; interface PlaceHolderProps { hideChildren: React.ReactNode; children?: React.ReactNode; } const PlaceHolder = (props: PlaceHolderProps) => { const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent'; const rootStyle: React.CSSProperties = { backgroundColor: rootBackgroundColor, display: 'inline-block', borderRadius: 2, }; const childrenVisibility = props.hideChildren ? 'hidden' : 'visible'; const childrenStyle: React.CSSProperties = { visibility: childrenVisibility }; return (
{props.children}
); }; const NullTokenRow = () => { const icon = ; const main = (
0.00 XXX
0.00
); const accessory = ( ); return ( ); }; // tslint:disable:max-file-line-count