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
  ...

16 files changed, 271 insertions, 82 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 {};
         }
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',