diff options
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/README.md | 14 | ||||
| -rw-r--r-- | packages/website/ts/blockchain.ts | 7 | ||||
| -rw-r--r-- | packages/website/ts/components/portal.tsx | 19 | ||||
| -rw-r--r-- | packages/website/ts/components/portal_menu.tsx | 26 | ||||
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 84 | ||||
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_index.tsx | 118 | ||||
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_top_tokens.tsx | 46 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 17 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wrap_ether_item.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/containers/zero_ex_js_documentation.ts | 1 | ||||
| -rw-r--r-- | packages/website/ts/globals.d.ts | 113 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 8 | ||||
| -rw-r--r-- | packages/website/ts/utils/utils.ts | 6 |
13 files changed, 324 insertions, 141 deletions
diff --git a/packages/website/README.md b/packages/website/README.md index 042df52de..d93d18935 100644 --- a/packages/website/README.md +++ b/packages/website/README.md @@ -28,20 +28,24 @@ Add the following to your `/etc/hosts` file: yarn install ``` -### Run dev server +### Initial setup + +The **first** time you work with this package, you must build **all** packages within the monorepo. This is because packages that depend on other packages located inside this monorepo are symlinked when run from **within** the monorepo. This allows you to make changes across multiple packages without first publishing dependent packages to NPM. To build all packages, run the following from the monorepo root directory: ```bash -yarn run dev +yarn lerna:rebuild ``` -Visit [0xproject.localhost:3572](http://0xproject.localhost:3572) in your browser. +### Run dev server -### Build +The the `website` root directory, run: ```bash -yarn build +yarn dev ``` +Visit [0xproject.localhost:3572](http://0xproject.localhost:3572) in your browser. + ### Clean ```bash diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 72cb94c02..fd34ab82d 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -23,6 +23,7 @@ import { LedgerWalletSubprovider, RedundantRPCSubprovider, } from '@0xproject/subproviders'; +import { Provider } from '@0xproject/types'; import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; @@ -73,11 +74,11 @@ export class Blockchain { private _web3Wrapper?: Web3Wrapper; private _blockchainWatcher?: BlockchainWatcher; private _userAddressIfExists: string; - private _cachedProvider: Web3.Provider; + private _cachedProvider: Provider; private _cachedProviderNetworkId: number; private _ledgerSubprovider: LedgerWalletSubprovider; private _defaultGasPrice: BigNumber; - private static _getNameGivenProvider(provider: Web3.Provider): string { + private static _getNameGivenProvider(provider: Provider): string { const providerType = utils.getProviderType(provider); const providerNameIfExists = providerToName[providerType]; if (_.isUndefined(providerNameIfExists)) { @@ -377,7 +378,7 @@ export class Blockchain { } public isValidAddress(address: string): boolean { const lowercaseAddress = address.toLowerCase(); - return this._web3Wrapper.isAddress(lowercaseAddress); + return Web3Wrapper.isAddress(lowercaseAddress); } public async pollTokenBalanceAsync(token: Token) { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index ceb0ecc72..b79f5e288 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -15,6 +15,7 @@ import { EthWrappers } from 'ts/components/eth_wrappers'; import { FillOrder } from 'ts/components/fill_order'; import { Footer } from 'ts/components/footer'; import { PortalMenu } from 'ts/components/portal_menu'; +import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; 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'; @@ -155,6 +156,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind( this.props.dispatcher, ); + const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT; const portalStyle: React.CSSProperties = { minHeight: '100vh', display: 'flex', @@ -204,12 +206,18 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { <div className="py2" style={{ backgroundColor: colors.grey50 }}> {this.props.blockchainIsLoaded ? ( <Switch> - {configs.ENVIRONMENT === Environments.DEVELOPMENT && ( + {isDevelopment && ( <Route path={`${WebsitePaths.Portal}/wallet`} render={this._renderWallet.bind(this)} /> )} + {isDevelopment && ( + <Route + path={`${WebsitePaths.Portal}/relayers`} + render={this._renderRelayers.bind(this)} + /> + )} <Route path={`${WebsitePaths.Portal}/weth`} render={this._renderEthWrapper.bind(this)} @@ -313,6 +321,15 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { </div> ); } + private _renderRelayers() { + return ( + <div className="flex flex-center"> + <div className="mx-auto" style={{ width: 800 }}> + <RelayerIndex networkId={this.props.networkId} /> + </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 9ab611556..2b4d7eea2 100644 --- a/packages/website/ts/components/portal_menu.tsx +++ b/packages/website/ts/components/portal_menu.tsx @@ -59,14 +59,24 @@ 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> + <MenuItem + style={this.props.menuItemStyle} + className="py2" + to={`${WebsitePaths.Portal}/wallet`} + onClick={this.props.onClick.bind(this)} + > + {this._renderMenuItemWithIcon('Wallet', 'zmdi-balance-wallet')} + </MenuItem> + <MenuItem + style={this.props.menuItemStyle} + className="py2" + to={`${WebsitePaths.Portal}/relayers`} + onClick={this.props.onClick.bind(this)} + > + {this._renderMenuItemWithIcon('Relayers', 'zmdi-input-antenna')} + </MenuItem> + </div> )} </div> ); diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx new file mode 100644 index 000000000..530576828 --- /dev/null +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -0,0 +1,84 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import { GridTile } from 'material-ui/GridList'; +import * as React from 'react'; + +import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; +import { TokenIcon } from 'ts/components/ui/token_icon'; +import { RelayerInfo, Token } from 'ts/types'; + +export interface RelayerGridTileProps { + relayerInfo: RelayerInfo; + networkId: number; +} + +const styles: Styles = { + root: { + backgroundColor: colors.white, + borderBottomRightRadius: 10, + borderBottomLeftRadius: 10, + borderTopRightRadius: 10, + borderTopLeftRadius: 10, + boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + overflow: 'hidden', + boxSizing: 'border-box', + }, + innerDiv: { + padding: 6, + height: '100%', + boxSizing: 'border-box', + }, + header: { + height: '50%', + width: '100%', + objectFit: 'cover', + borderBottomRightRadius: 4, + borderBottomLeftRadius: 4, + borderTopRightRadius: 4, + borderTopLeftRadius: 4, + }, + body: { + paddingLeft: 6, + paddingRight: 6, + height: '50%', + width: '100%', + boxSizing: 'border-box', + }, + marketShareBar: { + height: 14, + width: '100%', + backgroundColor: colors.mediumBlue, + }, + subLabel: { + fontSize: 12, + color: colors.lightGrey, + }, + relayerNameLabel: { + fontSize: 16, + fontWeight: 'bold', + color: colors.black, + }, +}; + +export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => { + return ( + <GridTile style={styles.root}> + <div style={styles.innerDiv}> + <img src={props.relayerInfo.headerUrl} style={styles.header} /> + <div style={styles.body}> + <div className="py1" style={styles.relayerNameLabel}> + {props.relayerInfo.name} + </div> + <div style={styles.marketShareBar} /> + <div className="py1" style={styles.subLabel}> + Market share + </div> + <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} /> + <div className="py1" style={styles.subLabel}> + Top tokens + </div> + </div> + </div> + </GridTile> + ); +}; diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx new file mode 100644 index 000000000..db3cf07b5 --- /dev/null +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -0,0 +1,118 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import { GridList } from 'material-ui/GridList'; +import * as React from 'react'; + +import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { RelayerInfo } from 'ts/types'; + +export interface RelayerIndexProps { + networkId: number; +} + +const styles: Styles = { + root: { + width: '100%', + }, + item: { + backgroundColor: colors.white, + borderBottomRightRadius: 10, + borderBottomLeftRadius: 10, + borderTopRightRadius: 10, + borderTopLeftRadius: 10, + boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + overflow: 'hidden', + padding: 4, + }, +}; + +// TODO: replace fake data with real, remote data +const topTokens = [ + { + address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba', + decimals: 18, + iconUrl: '/images/token_icons/makerdao.png', + isRegistered: true, + isTracked: true, + name: 'Maker DAO', + symbol: 'MKR', + }, + { + address: '0x323b5d4c32345ced77393b3530b1eed0f346429d', + decimals: 18, + iconUrl: '/images/token_icons/melon.png', + isRegistered: true, + isTracked: true, + name: 'Melon Token', + symbol: 'MLN', + }, + { + address: '0xb18845c260f680d5b9d84649638813e342e4f8c9', + decimals: 18, + iconUrl: '/images/token_icons/augur.png', + isRegistered: true, + isTracked: true, + name: 'Augur Reputation Token', + symbol: 'REP', + }, +]; + +const relayerInfos: RelayerInfo[] = [ + { + id: '1', + headerUrl: '/images/og_image.png', + name: 'Radar Relay', + marketShare: 0.5, + topTokens, + }, + { + id: '2', + headerUrl: '/images/og_image.png', + name: 'Paradex', + marketShare: 0.5, + topTokens, + }, + { + id: '3', + headerUrl: '/images/og_image.png', + name: 'yo', + marketShare: 0.5, + topTokens, + }, + { + id: '4', + headerUrl: '/images/og_image.png', + name: 'test', + marketShare: 0.5, + topTokens, + }, + { + id: '5', + headerUrl: '/images/og_image.png', + name: 'blahg', + marketShare: 0.5, + topTokens, + }, + { + id: '6', + headerUrl: '/images/og_image.png', + name: 'hello', + marketShare: 0.5, + topTokens, + }, +]; + +const CELL_HEIGHT = 260; +const NUMBER_OF_COLUMNS = 4; +const GRID_PADDING = 16; + +export const RelayerIndex: React.StatelessComponent<RelayerIndexProps> = (props: RelayerIndexProps) => { + return ( + <div style={styles.root}> + <GridList cellHeight={CELL_HEIGHT} cols={NUMBER_OF_COLUMNS} padding={GRID_PADDING} style={styles.gridList}> + {relayerInfos.map((relayerInfo: RelayerInfo) => ( + <RelayerGridTile key={relayerInfo.id} relayerInfo={relayerInfo} networkId={props.networkId} /> + ))} + </GridList> + </div> + ); +}; diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx new file mode 100644 index 000000000..233590b78 --- /dev/null +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -0,0 +1,46 @@ +import { colors, EtherscanLinkSuffixes, Styles, utils as sharedUtils } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { TokenIcon } from 'ts/components/ui/token_icon'; +import { Token } from 'ts/types'; + +export interface TopTokensProps { + tokens: Token[]; + networkId: number; +} + +const styles: Styles = { + tokenLabel: { + textDecoration: 'none', + color: colors.mediumBlue, + }, + followingTokenLabel: { + paddingLeft: 16, + }, +}; + +export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTokensProps) => { + return ( + <div className="flex"> + {_.map(props.tokens, (token: Token, index: number) => { + const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel }; + const style = index !== 0 ? firstItemStyle : styles.tokenLabel; + return ( + <a + key={token.address} + href={tokenLinkFromToken(token, props.networkId)} + target="_blank" + style={style} + > + {token.symbol} + </a> + ); + })} + </div> + ); +}; + +function tokenLinkFromToken(token: Token, networkId: number) { + return sharedUtils.getEtherScanLinkIfExists(token.address, networkId, EtherscanLinkSuffixes.Address); +} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 39c95d31c..d3dc8e3dd 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -71,7 +71,7 @@ interface AccessoryItemConfig { } const styles: Styles = { - wallet: { + root: { width: 346, backgroundColor: colors.white, borderBottomRightRadius: 10, @@ -121,6 +121,10 @@ const ZRX_TOKEN_SYMBOL = 'ZRX'; const ETHER_SYMBOL = 'ETH'; const ICON_DIMENSION = 24; const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; +const HEADER_ITEM_KEY = 'HEADER'; +const FOOTER_ITEM_KEY = 'FOOTER'; +const DISCONNECTED_ITEM_KEY = 'DISCONNECTED'; +const ETHER_ITEM_KEY = 'ETHER'; export class Wallet extends React.Component<WalletProps, WalletState> { private _isUnmounted: boolean; @@ -174,7 +178,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { } public render() { const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; - return <div style={styles.wallet}>{isReadyToRender && this._renderRows()}</div>; + return <div style={styles.root}>{isReadyToRender && this._renderRows()}</div>; } private _renderRows() { const isAddressAvailable = !_.isEmpty(this.props.userAddress); @@ -196,6 +200,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const primaryText = 'wallet'; return ( <ListItem + key={HEADER_ITEM_KEY} primaryText={primaryText.toUpperCase()} leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />} style={styles.paddedItem} @@ -206,6 +211,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { private _renderDisconnectedRows() { return ( <WalletDisconnectedItem + key={DISCONNECTED_ITEM_KEY} providerType={this.props.providerType} injectedProviderName={this.props.injectedProviderName} onToggleLedgerDialog={this.props.onToggleLedgerDialog} @@ -217,6 +223,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const primaryText = utils.getAddressBeginAndEnd(userAddress); return ( <ListItem + key={HEADER_ITEM_KEY} primaryText={primaryText} leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} style={{ ...styles.paddedItem, ...styles.borderedItem }} @@ -226,7 +233,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { } private _renderFooterRows() { const primaryText = '+ other tokens'; - return <ListItem primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />; + return <ListItem key={FOOTER_ITEM_KEY} primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />; } private _renderEthRows() { const primaryText = this._renderAmount( @@ -245,7 +252,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const etherToken = this._getEthToken(); return ( - <div> + <div key={ETHER_ITEM_KEY}> <ListItem primaryText={primaryText} leftIcon={<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />} @@ -304,7 +311,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const etherToken = this._getEthToken(); return ( - <div> + <div key={token.address}> <ListItem primaryText={amount} leftIcon={this._renderTokenIcon(token, tokenLink)} diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 3a876721a..a38163770 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -111,7 +111,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther disableTouchRipple={true} style={walletItemStyles.focusedItem} innerDivStyle={styles.innerDiv} - leftIcon={this.state.isEthConversionHappening && this._renderIsEthConversionHappeningSpinner()} + leftIcon={this._renderIsEthConversionHappeningSpinner()} rightAvatar={this._renderWrapEtherConfirmationButton()} /> ); @@ -123,11 +123,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther }); } private _renderIsEthConversionHappeningSpinner() { - return ( + return this.state.isEthConversionHappening ? ( <div className="pl1" style={{ paddingTop: 10 }}> <i className="zmdi zmdi-spinner zmdi-hc-spin" /> </div> - ); + ) : null; } private _renderWrapEtherConfirmationButton() { const isWrappingEth = this.props.direction === Side.Deposit; diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 6e893133f..da8922e79 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -121,6 +121,7 @@ const docsInfoConfig: DocsInfoConfig = { 'ExchangeContractErrs', 'ContractEvent', 'Token', + 'Provider', 'ExchangeEvents', 'IndexedFilterValues', 'SubscriptionOpts', diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 2c2140485..719c2708a 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -1,8 +1,5 @@ -declare module 'react-tooltip'; declare module 'truffle-contract'; -declare module 'keccak'; declare module 'whatwg-fetch'; -declare module 'web3-provider-engine/subproviders/filters'; declare module 'thenby'; declare module 'react-document-title'; declare module 'react-ga'; @@ -14,119 +11,9 @@ declare module '*.json' { /* tslint:enable */ } -// tslint:disable:max-classes-per-file - -// find-version declarations -declare function findVersions(version: string): string[]; -declare module 'find-versions' { - export = findVersions; -} - -// semver-sort declarations -declare module 'semver-sort' { - const desc: (versions: string[]) => string[]; -} - -// xml-js declarations -declare interface XML2JSONOpts { - compact?: boolean; - spaces?: number; -} -declare module 'xml-js' { - const xml2json: (xml: string, opts: XML2JSONOpts) => string; -} - // This will be defined by default in TS 2.4 // Source: https://github.com/Microsoft/TypeScript/issues/12364 interface System { import<T>(module: string): Promise<T>; } declare var System: System; - -// jsonschema declarations -// Source: https://github.com/tdegrunt/jsonschema/blob/master/lib/index.d.ts -declare interface Schema { - id?: string; - $schema?: string; - title?: string; - description?: string; - multipleOf?: number; - maximum?: number; - exclusiveMaximum?: boolean; - minimum?: number; - exclusiveMinimum?: boolean; - maxLength?: number; - minLength?: number; - pattern?: string; - additionalItems?: boolean | Schema; - items?: Schema | Schema[]; - maxItems?: number; - minItems?: number; - uniqueItems?: boolean; - maxProperties?: number; - minProperties?: number; - required?: string[]; - additionalProperties?: boolean | Schema; - definitions?: { - [name: string]: Schema; - }; - properties?: { - [name: string]: Schema; - }; - patternProperties?: { - [name: string]: Schema; - }; - dependencies?: { - [name: string]: Schema | string[]; - }; - enum?: any[]; - type?: string | string[]; - allOf?: Schema[]; - anyOf?: Schema[]; - oneOf?: Schema[]; - not?: Schema; - // This is the only property that's not defined in https://github.com/tdegrunt/jsonschema/blob/master/lib/index.d.ts - // There is an open issue for that: https://github.com/tdegrunt/jsonschema/issues/194 - // There is also an opened PR: https://github.com/tdegrunt/jsonschema/pull/218/files - // As soon as it gets merged we should be good to use types from 'jsonschema' package - $ref?: string; -} - -// blockies declarations -declare interface BlockiesIcon { - toDataURL(): string; -} -declare interface BlockiesConfig { - seed: string; -} -declare function blockies(config: BlockiesConfig): BlockiesIcon; -declare module 'blockies' { - export = blockies; -} - -// web3-provider-engine declarations -declare class Subprovider {} -declare module 'web3-provider-engine/subproviders/subprovider' { - export = Subprovider; -} -declare module 'web3-provider-engine/subproviders/rpc' { - import { JSONRPCRequestPayload } from '@0xproject/types'; - class RpcSubprovider { - constructor(options: { rpcUrl: string }); - public handleRequest( - payload: JSONRPCRequestPayload, - next: () => void, - end: (err: Error | null, data?: any) => void, - ): void; - } - export = RpcSubprovider; -} - -declare interface Artifact { - abi: any; - networks: { - [networkId: number]: { - address: string; - }; - }; -} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 901483327..dba59f704 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -490,4 +490,12 @@ export interface TokenState { allowance: BigNumber; isLoaded: boolean; } + +export interface RelayerInfo { + headerUrl: string; + id: string; + name: string; + marketShare: number; + topTokens: Token[]; +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 75597a7e2..afe159beb 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,5 +1,6 @@ -import { ECSignature, ExchangeContractErrs, Web3Provider, ZeroEx, ZeroExError } from '0x.js'; +import { ECSignature, ExchangeContractErrs, ZeroEx, ZeroExError } from '0x.js'; import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared'; +import { Provider } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import deepEqual = require('deep-equal'); import * as _ from 'lodash'; @@ -8,7 +9,6 @@ import { Order, Providers, ScreenWidths, Side, SideToAssetToken, Token, TokenByA import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import * as u2f from 'ts/vendor/u2f_api'; -import Web3 = require('web3'); const LG_MIN_EM = 64; const MD_MIN_EM = 52; @@ -273,7 +273,7 @@ export const utils = { window.onload = () => resolve(); }); }, - getProviderType(provider: Web3.Provider): Providers | string { + getProviderType(provider: Provider): Providers | string { const constructorName = provider.constructor.name; let parsedProviderName = constructorName; switch (constructorName) { |