diff options
author | Fabio Berger <me@fabioberger.com> | 2018-06-06 18:31:30 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-06-06 18:31:30 +0800 |
commit | 271fa26890c7d86fe516b51d653a308b2789d2c2 (patch) | |
tree | eff3a17c8dd56cd1fbe4da76557b904253792cd2 /packages/website/ts/components/portal | |
parent | fe437da7517b4ea8e308a7210a34e66b715d5c78 (diff) | |
parent | cc39eea9991306eabadd912256452f67fb49c20b (diff) | |
download | dexon-sol-tools-271fa26890c7d86fe516b51d653a308b2789d2c2.tar.gz dexon-sol-tools-271fa26890c7d86fe516b51d653a308b2789d2c2.tar.zst dexon-sol-tools-271fa26890c7d86fe516b51d653a308b2789d2c2.zip |
merge v2-prototype
Diffstat (limited to 'packages/website/ts/components/portal')
4 files changed, 53 insertions, 19 deletions
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index 48858613c..2d0bbefc3 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -2,7 +2,7 @@ import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { colors } from 'ts/utils/colors'; +import { colors } from 'ts/style/colors'; export interface BackButtonProps { to: string; diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index ace11639a..8ac2b9091 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -4,8 +4,8 @@ import * as React from 'react'; import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu'; import { Identicon } from 'ts/components/ui/identicon'; +import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; const IDENTICON_DIAMETER = 45; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index b0710de60..39dab77f5 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -2,8 +2,8 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { MenuItem } from 'ts/components/ui/menu_item'; +import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; export interface MenuTheme { paddingLeft: number; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 088b33c90..0e82766f8 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -34,6 +34,7 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { BlockchainErrs, HashData, + ItemByAddress, Order, ProviderType, ScreenWidths, @@ -43,6 +44,7 @@ import { TokenVisibility, WebsitePaths, } from 'ts/types'; +import { backendClient } from 'ts/utils/backend_client'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { orderParser } from 'ts/utils/order_parser'; @@ -266,10 +268,6 @@ export class Portal extends React.Component<PortalProps, PortalState> { 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 @@ -394,18 +392,24 @@ export class Portal extends React.Component<PortalProps, PortalState> { }, ]; return ( - <Switch> - {_.map(accountManagementItems, item => { - return ( - <Route - key={item.pathName} - path={item.pathName} - render={this._renderAccountManagementItem.bind(this, item)} - /> - ); - })}} - <Route render={this._renderNotFoundMessage.bind(this)} /> - </Switch> + <div> + <Switch> + {_.map(accountManagementItems, item => { + return ( + <Route + key={item.pathName} + path={item.pathName} + render={this._renderAccountManagementItem.bind(this, item)} + /> + ); + })}} + <Route render={this._renderNotFoundMessage.bind(this)} /> + </Switch> + <PortalDisclaimerDialog + isOpen={this.state.isDisclaimerDialogOpen} + onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)} + /> + </div> ); } private _renderAccountManagementItem(item: AccountManagementItem): React.ReactNode { @@ -587,6 +591,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { return this._blockchain.getTokenBalanceAndAllowanceAsync(userAddressIfExists, tokenAddress); }), ); + const priceByAddress = await this._getPriceByAddressAsync(tokenAddresses); for (let i = 0; i < tokenAddresses.length; i++) { // Order is preserved in Promise.all const [balance, allowance] = balancesAndAllowances[i]; @@ -595,6 +600,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { balance, allowance, isLoaded: true, + price: priceByAddress[tokenAddress], }; } this.setState({ @@ -602,6 +608,34 @@ export class Portal extends React.Component<PortalProps, PortalState> { }); } + private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> { + if (_.isEmpty(tokenAddresses)) { + return {}; + } + // for each input token address, search for the corresponding symbol in this.props.tokenByAddress, if it exists + // create a mapping from existing symbols -> address + const tokenAddressBySymbol: { [symbol: string]: string } = {}; + _.each(tokenAddresses, address => { + const tokenIfExists = _.get(this.props.tokenByAddress, address); + if (!_.isUndefined(tokenIfExists)) { + const symbol = tokenIfExists.symbol; + tokenAddressBySymbol[symbol] = address; + } + }); + const tokenSymbols = _.keys(tokenAddressBySymbol); + try { + const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols); + const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol)); + const result = _.mapValues(priceByAddress, price => { + const priceBigNumber = new BigNumber(price); + return priceBigNumber; + }); + return result; + } catch (err) { + return {}; + } + } + private async _refetchTokenStateAsync(tokenAddress: string): Promise<void> { await this._fetchBalancesAndAllowancesAsync([tokenAddress]); } |