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

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 {};
         }