diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-09 02:04:31 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-05-09 02:04:31 +0800 |
commit | 607d738342a839788b59e0dee63849ea447331bc (patch) | |
tree | d90078ec0e95357a2fe9fb4af65f9135e9e44408 /packages/website/ts/components | |
parent | b8c611de2b82657a274c55007ffc5d72807eae7f (diff) | |
parent | e9d70b7b1edb5089a6e5e2a9ee8c964ab4b4d4ab (diff) | |
download | dexon-sol-tools-607d738342a839788b59e0dee63849ea447331bc.tar dexon-sol-tools-607d738342a839788b59e0dee63849ea447331bc.tar.gz dexon-sol-tools-607d738342a839788b59e0dee63849ea447331bc.tar.bz2 dexon-sol-tools-607d738342a839788b59e0dee63849ea447331bc.tar.lz dexon-sol-tools-607d738342a839788b59e0dee63849ea447331bc.tar.xz dexon-sol-tools-607d738342a839788b59e0dee63849ea447331bc.tar.zst dexon-sol-tools-607d738342a839788b59e0dee63849ea447331bc.zip |
Merge branch 'development' into feature/website/top-bar-redesign
* development: (63 commits)
Update The Ocean logo
Fix artifacts paths
Create an artifacts folder
Introduce a var
Add removeHexPrefix util method
CHeck if ABI exists
Improve the readability of the check for should compile
Use named constants
Add a comment
Fix comments
Rename args to constructor-args
Fix a typo
Define a separator const
Move artifacts from src/artifacts to artifacts/v1
Fix sol-cov to work with the new artifacts format
Implement new artifacts format
Publish
Updated CHANGELOGS
Make node types a dependency
Fix type errors in CSS properties
...
Diffstat (limited to 'packages/website/ts/components')
6 files changed, 62 insertions, 30 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index bf12c924f..88003a94e 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -9,7 +9,11 @@ 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 { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; +<<<<<<< HEAD import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; +======= +import { TopBar } from 'ts/components/top_bar/top_bar'; +>>>>>>> development import { FlashMessage } from 'ts/components/ui/flash_message'; import { Wallet } from 'ts/components/wallet/wallet'; import { localStorage } from 'ts/local_storage/local_storage'; @@ -51,7 +55,11 @@ interface PortalState { } const THROTTLE_TIMEOUT = 100; +<<<<<<< HEAD const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded); +======= +const TOP_BAR_HEIGHT = 60; +>>>>>>> development const styles: Styles = { root: { diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 0c4b2841c..0b9b8165e 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -12,8 +12,7 @@ export interface RelayerGridTileProps { networkId: number; } -// TODO: Get top tokens and headerurl from remote -const headerUrl = '/images/og_image.png'; +// TODO: Get top tokens from remote const topTokens = [ { address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba', @@ -68,6 +67,9 @@ const styles: Styles = { borderBottomLeftRadius: 4, borderTopRightRadius: 4, borderTopLeftRadius: 4, + borderWidth: 1, + borderStyle: 'solid', + borderColor: colors.walletBorder, }, body: { paddingLeft: 6, @@ -92,24 +94,27 @@ const styles: Styles = { }; export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => { + const link = props.relayerInfo.appUrl || props.relayerInfo.url; return ( - <GridTile style={styles.root}> - <div style={styles.innerDiv}> - <img src={headerUrl} style={styles.header} /> - <div style={styles.body}> - <div className="py1" style={styles.relayerNameLabel}> - {props.relayerInfo.name} - </div> - <div style={styles.dailyTradeVolumeLabel}>{props.relayerInfo.dailyTxnVolume}</div> - <div className="py1" style={styles.subLabel}> - Daily Trade Volume - </div> - <TopTokens tokens={topTokens} networkId={props.networkId} /> - <div className="py1" style={styles.subLabel}> - Top tokens + <a href={link} target="_blank" style={{ textDecoration: 'none' }}> + <GridTile style={styles.root}> + <div style={styles.innerDiv}> + <img src={props.relayerInfo.headerImgUrl} style={styles.header} /> + <div style={styles.body}> + <div className="py1" style={styles.relayerNameLabel}> + {props.relayerInfo.name} + </div> + <div style={styles.dailyTradeVolumeLabel}>{props.relayerInfo.dailyTxnVolume}</div> + <div className="py1" style={styles.subLabel}> + Daily Trade Volume + </div> + <TopTokens tokens={topTokens} networkId={props.networkId} /> + <div className="py1" style={styles.subLabel}> + Top tokens + </div> </div> </div> - </div> - </GridTile> + </GridTile> + </a> ); }; diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 1e92dba85..bc84cf9e8 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -66,7 +66,7 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde > {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo) => ( <RelayerGridTile - key={relayerInfo.id} + key={relayerInfo.name} relayerInfo={relayerInfo} networkId={this.props.networkId} /> diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 8c842d2a5..2502bea6d 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -143,6 +143,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)} /> </Link>, + <Link key="subMenuItem-order-utils" to={WebsitePaths.OrderUtils} className="text-decoration-none"> + <MenuItem + style={{ fontSize: styles.menuItem.fontSize }} + primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)} + /> + </Link>, <Link key="subMenuItem-deployer" to={WebsitePaths.Deployer} className="text-decoration-none"> <MenuItem style={{ fontSize: styles.menuItem.fontSize }} @@ -199,7 +205,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return ( <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1"> <div className={parentClassNames}> - <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{ paddingTop: 15 }}> + <div className="col col-2 sm-pl1 md-pl2 lg-pl0" style={{ paddingTop: 15 }}> <Link to={`${WebsitePaths.Home}`} className="text-decoration-none"> <img src={logoUrl} height="30" /> </Link> diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index 6a3f26155..8137c0db6 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -17,7 +17,7 @@ const styles = { userSelect: 'none', width: 240, zIndex: 1, - }, + } as React.CSSProperties, }; export const InputLabel = (props: InputLabelProps) => { diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index d1ae38550..057c712e5 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -461,16 +461,16 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ); balanceAndAllowanceTupleByAddress[tokenAddress] = balanceAndAllowanceTuple; } - const pricesByAddress = await this._getPricesByAddressAsync(tokenAddresses); + const priceByAddress = await this._getPriceByAddressAsync(tokenAddresses); const trackedTokenStateByAddress = _.reduce( tokenAddresses, (acc, address) => { const [balance, allowance] = balanceAndAllowanceTupleByAddress[address]; - const price = pricesByAddress[address]; + const priceIfExists = _.get(priceByAddress, address); acc[address] = { balance, allowance, - price, + price: priceIfExists, isLoaded: true, }; return acc; @@ -487,16 +487,29 @@ export class Wallet extends React.Component<WalletProps, WalletState> { private async _refetchTokenStateAsync(tokenAddress: string) { await this._fetchBalancesAndAllowancesAsync([tokenAddress]); } - private async _getPricesByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> { + 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 websiteBackendPriceInfos = await backendClient.getPriceInfosAsync(tokenAddresses); - const addresses = _.map(websiteBackendPriceInfos, info => info.address); - const prices = _.map(websiteBackendPriceInfos, info => new BigNumber(info.price)); - const pricesByAddress = _.zipObject(addresses, prices); - return pricesByAddress; + 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 {}; } |