diff options
Diffstat (limited to 'packages/website')
28 files changed, 304 insertions, 92 deletions
diff --git a/packages/website/md/docs/order_utils/installation.md b/packages/website/md/docs/order_utils/installation.md new file mode 100644 index 000000000..68a7cf960 --- /dev/null +++ b/packages/website/md/docs/order_utils/installation.md @@ -0,0 +1,17 @@ +**Install** + +```bash +yarn add @0xproject/order-utils +``` + +**Import** + +```javascript +import { createSignedOrderAsync } from '@0xproject/order-utils'; +``` + +or + +```javascript +var createSignedOrderAsync = require('@0xproject/order-utils').createSignedOrderAsync; +``` diff --git a/packages/website/md/docs/order_utils/introduction.md b/packages/website/md/docs/order_utils/introduction.md new file mode 100644 index 000000000..d5f3f2925 --- /dev/null +++ b/packages/website/md/docs/order_utils/introduction.md @@ -0,0 +1 @@ +Welcome to the [@0xproject/order-utils](https://github.com/0xProject/0x-monorepo/tree/development/packages/order-utils) documentation! Order utils is a set of utils around creating, signing, validating 0x orders. diff --git a/packages/website/package.json b/packages/website/package.json index 169231fac..ad84a3eb9 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,6 +1,6 @@ { "name": "@0xproject/website", - "version": "0.0.28", + "version": "0.0.32", "private": true, "description": "Website and 0x portal dapp", "scripts": { @@ -14,13 +14,13 @@ "author": "Fabio Berger", "license": "Apache-2.0", "dependencies": { - "0x.js": "^0.36.3", - "@0xproject/react-docs": "^0.0.8", - "@0xproject/react-shared": "^0.1.3", - "@0xproject/subproviders": "^0.9.0", - "@0xproject/typescript-typings": "^0.2.0", - "@0xproject/utils": "^0.5.2", - "@0xproject/web3-wrapper": "^0.6.1", + "0x.js": "^0.37.2", + "@0xproject/react-docs": "^0.0.11", + "@0xproject/react-shared": "^0.1.6", + "@0xproject/subproviders": "^0.10.1", + "@0xproject/typescript-typings": "^0.3.1", + "@0xproject/utils": "^0.6.1", + "@0xproject/web3-wrapper": "^0.6.3", "accounting": "^0.4.1", "basscss": "^8.0.3", "blockies": "^0.0.2", @@ -48,7 +48,7 @@ "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3": "^0.20.0", - "web3-provider-engine": "^13.0.1", + "web3-provider-engine": "^14.0.4", "whatwg-fetch": "^2.0.3", "xml-js": "^1.3.2" }, @@ -60,7 +60,7 @@ "@types/material-ui": "0.18.0", "@types/node": "^8.0.53", "@types/query-string": "^5.1.0", - "@types/react": "^16.0.34", + "@types/react": "16.3.13", "@types/react-copy-to-clipboard": "^4.2.0", "@types/react-dom": "^16.0.3", "@types/react-redux": "^4.4.37", diff --git a/packages/website/public/images/landing/project_logos/the_ocean.png b/packages/website/public/images/landing/project_logos/the_ocean.png Binary files differindex 74678b5d4..0677abc29 100644 --- a/packages/website/public/images/landing/project_logos/the_ocean.png +++ b/packages/website/public/images/landing/project_logos/the_ocean.png diff --git a/packages/website/public/images/team/greg.jpeg b/packages/website/public/images/team/greg.jpeg Binary files differnew file mode 100644 index 000000000..a765e047f --- /dev/null +++ b/packages/website/public/images/team/greg.jpeg diff --git a/packages/website/public/images/team/philippe.png b/packages/website/public/images/team/philippe.png Binary files differdeleted file mode 100644 index cd43c2754..000000000 --- a/packages/website/public/images/team/philippe.png +++ /dev/null diff --git a/packages/website/public/images/team/remco.jpeg b/packages/website/public/images/team/remco.jpeg Binary files differnew file mode 100644 index 000000000..e87e7bfd6 --- /dev/null +++ b/packages/website/public/images/team/remco.jpeg diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index f610bf56c..d37b1abdf 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -66,6 +66,7 @@ "WHITEPAPER": "白皮书", "WIKI": "维基", "WEB3_WRAPPER": "Web3Wrapper", + "ORDER_UTILS": "Order Utils", "FAQ": "FAQ", "SMART_CONTRACTS": "0x 智能合约", "STANDARD_RELAYER_API": "中继方标准API", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 122d445cb..8d7485e9a 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -67,6 +67,7 @@ "WHITEPAPER": "whitepaper", "WIKI": "wiki", "WEB3_WRAPPER": "Web3Wrapper", + "ORDER_UTILS": "Order Utils", "FAQ": "FAQ", "SMART_CONTRACTS": "0x smart contracts", "STANDARD_RELAYER_API": "standard relayer API", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index dd5f19b16..028476d2c 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -66,6 +66,7 @@ "WHITEPAPER": "백서", "WIKI": "위키", "WEB3_WRAPPER": "Web3Wrapper", + "ORDER_UTILS": "Order Utils", "FAQ": "FAQ", "SMART_CONTRACTS": "0x 스마트 계약", "STANDARD_RELAYER_API": "Standard Relayer API", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 5a8e2c539..9254ab1c0 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -66,6 +66,7 @@ "WHITEPAPER": "Whitepaper", "WIKI": "Вики", "WEB3_WRAPPER": "Web3Wrapper", + "ORDER_UTILS": "Order Utils", "FAQ": "Документация", "SMART_CONTRACTS": "0x Смарт-контракты ", "STANDARD_RELAYER_API": "standard relayer API", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index dd34e805c..eb8f4035c 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -67,6 +67,7 @@ "WHITEPAPER": "documento técnico", "WIKI": "wiki", "WEB3_WRAPPER": "Web3Wrapper", + "ORDER_UTILS": "Order Utils", "FAQ": "preguntas frecuentes", "SMART_CONTRACTS": "0x contratos inteligentes", "STANDARD_RELAYER_API": "API de transmisión estándar", 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 {}; } diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts new file mode 100644 index 000000000..64aa7300f --- /dev/null +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -0,0 +1,99 @@ +import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, Environments, WebsitePaths } from 'ts/types'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown = require('md/docs/order_utils/introduction'); +const InstallationMarkdown = require('md/docs/order_utils/installation'); +/* tslint:enable:no-var-requires */ + +const docSections = { + introduction: 'introduction', + installation: 'installation', + usage: 'usage', + types: 'types', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.OrderUtils, + type: SupportedDocJson.TypeDoc, + displayName: 'Order utils', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + menu: { + introduction: [docSections.introduction], + install: [docSections.installation], + usage: [docSections.usage], + types: [docSections.types], + }, + sectionNameToMarkdown: { + [docSections.introduction]: IntroMarkdown, + [docSections.installation]: InstallationMarkdown, + }, + sectionNameToModulePath: { + [docSections.usage]: [ + '"order-utils/src/order_hash"', + '"order-utils/src/signature_utils"', + '"order-utils/src/order_factory"', + '"order-utils/src/salt"', + '"order-utils/src/assert"', + '"order-utils/src/constants"', + ], + [docSections.types]: ['"order-utils/src/types"', '"types/src/index"'], + }, + menuSubsectionToVersionWhenIntroduced: {}, + sections: docSections, + visibleConstructors: [], + typeConfigs: { + // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is + // currently no way to extract the re-exported types from index.ts via TypeDoc :( + publicTypes: [ + 'OrderError', + 'Order', + 'SignedOrder', + 'ECSignature', + 'Provider', + 'JSONRPCRequestPayload', + 'JSONRPCResponsePayload', + 'JSONRPCErrorCallback', + ], + typeNameToExternalLink: { + BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + }, + }, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 7b7a7eb2e..1b1255214 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -66,6 +66,9 @@ const LazySolCovDocumentation = createLazyComponent('Documentation', async () => const LazySubprovidersDocumentation = createLazyComponent('Documentation', async () => System.import<any>(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), ); +const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async () => + System.import<any>(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'), +); analytics.init(); // tslint:disable-next-line:no-floating-promises @@ -99,6 +102,10 @@ render( component={LazySubprovidersDocumentation} /> <Route + path={`${WebsitePaths.OrderUtils}/:version?`} + component={LazyOrderUtilsDocumentation} + /> + <Route path={`${WebsitePaths.Web3Wrapper}/:version?`} component={LazyWeb3WrapperDocumentation} /> diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 97be59526..d78cca703 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -113,7 +113,7 @@ const teamRow4: ProfileInfo[] = [ { name: 'Blake Henderson', title: 'Operations Associate', - description: `Operations and Analytics. Previously analytics at LinkedIn. Economics at UC San Diego. `, + description: `Operations and Analytics. Previously analytics at LinkedIn. Economics at UC San Diego.`, image: '/images/team/blake.jpg', linkedIn: 'https://www.linkedin.com/in/blakerhenderson/', github: '', @@ -130,6 +130,27 @@ const teamRow4: ProfileInfo[] = [ }, ]; +const teamRow5: ProfileInfo[] = [ + { + name: 'Greg Hysen', + title: 'Blockchain Engineer', + description: `Smart contract R&D. Previously lead distributed systems engineer at Hivemapper. Computer Science at University of Waterloo.`, + image: '/images/team/greg.jpeg', + linkedIn: 'https://www.linkedin.com/in/gregory-hysen-71741463/', + github: 'https://github.com/hysz', + medium: '', + }, + { + name: 'Remco Bloemen', + title: 'Technical Fellow', + description: `Previously cofounder at Neufund and Coblue. Part III at Cambridge. PhD dropout at Twente Business School.`, + image: '/images/team/remco.jpeg', + linkedIn: 'https://www.linkedin.com/in/remcobloemen/', + github: 'http://github.com/recmo', + medium: '', + }, +]; + const advisors: ProfileInfo[] = [ { name: 'Fred Ehrsam', @@ -223,6 +244,7 @@ export class About extends React.Component<AboutProps, AboutState> { <div className="clearfix">{this._renderProfiles(teamRow2)}</div> <div className="clearfix">{this._renderProfiles(teamRow3)}</div> <div className="clearfix">{this._renderProfiles(teamRow4)}</div> + <div className="clearfix">{this._renderProfiles(teamRow5)}</div> </div> <div className="pt3 pb2"> <div diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index aca20447b..9feb27dac 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -34,6 +34,7 @@ const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.JSONSchemas]: 'json-schemas', [DocPackages.SolCov]: 'sol-cov', [DocPackages.Subproviders]: 'subproviders', + [DocPackages.OrderUtils]: 'order-utils', }; export interface DocPageProps { diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index f961220fd..a63c24fb7 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -37,6 +37,8 @@ interface Project { } const THROTTLE_TIMEOUT = 100; +const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018'; +const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; const relayersAndDappProjects: Project[] = [ { @@ -233,6 +235,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 clearfix"> + {this._renderWhatsNew()} <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-my4 md-my4 sm-mt2 sm-mb4 clearfix"> <div className="col lg-col-5 md-col-5 col-12 sm-center"> <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} /> @@ -302,6 +305,28 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } + private _renderWhatsNew() { + return ( + <div className="sm-center sm-px1"> + <a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none"> + <div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}> + <div + className="mr1 px1" + style={{ + backgroundColor: colors.lightTurquois, + borderRadius: 3, + color: colors.heroGrey, + height: 23, + }} + > + New + </div> + <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div> + </div> + </a> + </div> + ); + } private _renderProjects(projects: Project[], title: string, backgroundColor: string, isTitleCenter: boolean) { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const projectList = _.map(projects, (project: Project, i: number) => { diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 7ed2b750d..edca5834d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -47,7 +47,7 @@ const styles: Styles = { left: 0, bottom: 0, right: 0, - overflowZ: 'hidden', + overflow: 'hidden', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, WebkitOverflowScrolling: 'touch', }, diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 2544e6735..2754075a7 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -361,6 +361,7 @@ export enum WebsitePaths { JSONSchemas = '/docs/json-schemas', SolCov = '/docs/sol-cov', Subproviders = '/docs/subproviders', + OrderUtils = '/docs/order-utils', Jobs = '/jobs', } @@ -373,6 +374,7 @@ export enum DocPackages { JSONSchemas = 'JSON_SCHEMAS', SolCov = 'SOL_COV', Subproviders = 'SUBPROVIDERS', + OrderUtils = 'ORDER_UTILS', } export enum Key { @@ -431,6 +433,7 @@ export enum Key { Whitepaper = 'WHITEPAPER', Wiki = 'WIKI', Web3Wrapper = 'WEB3_WRAPPER', + OrderUtils = 'ORDER_UTILS', And = 'AND', Faq = 'FAQ', SmartContracts = 'SMART_CONTRACTS', @@ -500,17 +503,17 @@ export interface TokenState { price?: BigNumber; } -// TODO: Add topTokens and headerUrl properties once available from backend +// TODO: Add topTokens property once available from backend export interface WebsiteBackendRelayerInfo { - id: string; name: string; dailyTxnVolume: string; url: string; + appUrl?: string; + headerImgUrl: string; } export interface WebsiteBackendPriceInfo { - price: string; - address: string; + [symbol: string]: string; } export interface WebsiteBackendGasInfo { diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts index fdbb3e03a..63e06fda7 100644 --- a/packages/website/ts/utils/backend_client.ts +++ b/packages/website/ts/utils/backend_client.ts @@ -1,16 +1,8 @@ -import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; -import * as queryString from 'query-string'; -import { - ArticlesBySection, - ItemByAddress, - WebsiteBackendGasInfo, - WebsiteBackendPriceInfo, - WebsiteBackendRelayerInfo, -} from 'ts/types'; +import { ArticlesBySection, WebsiteBackendGasInfo, WebsiteBackendPriceInfo, WebsiteBackendRelayerInfo } from 'ts/types'; import { configs } from 'ts/utils/configs'; -import { errorReporter } from 'ts/utils/error_reporter'; +import { fetchUtils } from 'ts/utils/fetch_utils'; const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station'; const PRICES_ENDPOINT = '/prices'; @@ -19,52 +11,26 @@ const WIKI_ENDPOINT = '/wiki'; export const backendClient = { async getGasInfoAsync(): Promise<WebsiteBackendGasInfo> { - const result = await requestAsync(ETH_GAS_STATION_ENDPOINT); + const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, ETH_GAS_STATION_ENDPOINT); return result; }, - async getPriceInfosAsync(tokenAddresses: string[]): Promise<WebsiteBackendPriceInfo[]> { - if (_.isEmpty(tokenAddresses)) { - return []; + async getPriceInfoAsync(tokenSymbols: string[]): Promise<WebsiteBackendPriceInfo> { + if (_.isEmpty(tokenSymbols)) { + return {}; } - const joinedTokenAddresses = tokenAddresses.join(','); + const joinedTokenSymbols = tokenSymbols.join(','); const queryParams = { - tokens: joinedTokenAddresses, + tokens: joinedTokenSymbols, }; - const result = await requestAsync(PRICES_ENDPOINT, queryParams); + const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, PRICES_ENDPOINT, queryParams); return result; }, async getRelayerInfosAsync(): Promise<WebsiteBackendRelayerInfo[]> { - const result = await requestAsync(RELAYERS_ENDPOINT); + const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, RELAYERS_ENDPOINT); return result; }, async getWikiArticlesBySectionAsync(): Promise<ArticlesBySection> { - const result = await requestAsync(WIKI_ENDPOINT); + const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, WIKI_ENDPOINT); return result; }, }; - -async function requestAsync(endpoint: string, queryParams?: object): Promise<any> { - const query = queryStringFromQueryParams(queryParams); - const url = `${configs.BACKEND_BASE_URL}${endpoint}${query}`; - const response = await fetch(url); - if (response.status !== 200) { - const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`; - logUtils.log(errorText); - const error = Error(errorText); - // tslint:disable-next-line:no-floating-promises - errorReporter.reportAsync(error); - throw error; - } - const result = await response.json(); - return result; -} - -function queryStringFromQueryParams(queryParams?: object): string { - // if params are undefined or empty, return an empty string - if (_.isUndefined(queryParams) || _.isEmpty(queryParams)) { - return ''; - } - // stringify the formatted object - const stringifiedParams = queryString.stringify(queryParams); - return `?${stringifiedParams}`; -} diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts new file mode 100644 index 000000000..d2e902db5 --- /dev/null +++ b/packages/website/ts/utils/fetch_utils.ts @@ -0,0 +1,33 @@ +import { logUtils } from '@0xproject/utils'; +import * as _ from 'lodash'; +import * as queryString from 'query-string'; + +import { errorReporter } from 'ts/utils/error_reporter'; + +export const fetchUtils = { + async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> { + const query = queryStringFromQueryParams(queryParams); + const url = `${baseUrl}${path}${query}`; + const response = await fetch(url); + if (response.status !== 200) { + const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`; + logUtils.log(errorText); + const error = Error(errorText); + // tslint:disable-next-line:no-floating-promises + errorReporter.reportAsync(error); + throw error; + } + const result = await response.json(); + return result; + }, +}; + +function queryStringFromQueryParams(queryParams?: object): string { + // if params are undefined or empty, return an empty string + if (_.isUndefined(queryParams) || _.isEmpty(queryParams)) { + return ''; + } + // stringify the formatted object + const stringifiedParams = queryString.stringify(queryParams); + return `?${stringifiedParams}`; +} diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 53d60b3ce..0d77b9e72 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,4 +1,5 @@ import { ECSignature, ExchangeContractErrs, ZeroEx, ZeroExError } from '0x.js'; +import { OrderError } from '@0xproject/order-utils'; import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared'; import { Provider } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; @@ -202,7 +203,7 @@ export const utils = { [ZeroExError.ZRXContractDoesNotExist]: 'ZRX contract does not exist', [ZeroExError.UnhandledError]: 'Unhandled error occured', [ZeroExError.UserHasNoAssociatedAddress]: 'User has no addresses available', - [ZeroExError.InvalidSignature]: 'Order signature is not valid', + [OrderError.InvalidSignature]: 'Order signature is not valid', [ZeroExError.ContractNotDeployedOnNetwork]: 'Contract is not deployed on the detected network', [ZeroExError.InvalidJump]: 'Invalid jump occured while executing the transaction', [ZeroExError.OutOfGas]: 'Transaction ran out of gas', |
