Merge branch 'development' into features/orderwatcher_ws

* development: (107 commits)
  Fix OrderWatcher title to fix sidebar top
  Fix version picker so it doesn't overflow onto two lines
  Fix bug in pull_missing_blocks with incorrect start block (#1438)
  Pull approval events for ZRX and DAI (#1430)
  fix semicolon and apply prettier
  Fix dex order quote/base asset assigning (#1432)
  Apply prettier
  Publish
  Updated CHANGELOGS
  Rename contracts CHANGELOGs to DEPLOYs
  Move Forwarder CHANGELOG entries to extensions CHANGELOG
  Make contracts packages not private
  Publish
  Updated CHANGELOGS
  Show @ price in light grey
  Updated CHANGELOGS
  typeof -> isString
  add special case to scrape OHLCV for eth/usd (#1428)
  run linter
  simplify scaling input logic
  ...

25 files changed, 446 insertions, 198 deletions

diff --git a/packages/instant/README.md b/packages/instant/README.md
index 2092b45d9..32abf76e0 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -1,5 +1,11 @@
 ## @0x/instant
 
+## Integration
+
+Looking to integrate 0x Instant into your web application or site? Check out the dedicated [instant documentation](https://0xproject.com/wiki#Get-Started-With-Instant) to get started. The documentation covers instant and related topics in depth. For a more "drag and drop" experience, check out our [configurator tool](https://0xproject.com/instant#configure). For on demand developer support, join our [Discord](https://discordapp.com/invite/d3FTX3M).
+
+Check out a live sample integration [here](https://www.rexrelay.com/instant).
+
 ## Installation
 
 The package is available as a UMD module named `zeroExInstant` at https://instant.0xproject.com/instant.js.
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 9303276b4..0a5e152ca 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/instant",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "engines": {
         "node": ">=6.12"
     },
@@ -24,7 +24,10 @@
     },
     "config": {
         "postpublish": {
-            "assets": ["packages/instant/umd/instant.js", "packages/instant/umd/instant.js.map"]
+            "assets": [
+                "packages/instant/umd/instant.js",
+                "packages/instant/umd/instant.js.map"
+            ]
         }
     },
     "repository": {
@@ -38,18 +41,18 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
-        "@0x/assert": "^1.0.18",
-        "@0x/asset-buyer": "^3.0.2",
-        "@0x/json-schemas": "^2.1.2",
-        "@0x/order-utils": "^3.0.4",
-        "@0x/subproviders": "^2.1.6",
-        "@0x/types": "^1.3.0",
-        "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.6",
-        "@0x/web3-wrapper": "^3.1.6",
+        "@0x/assert": "^1.0.20",
+        "@0x/asset-buyer": "^3.0.4",
+        "@0x/json-schemas": "^2.1.4",
+        "@0x/order-utils": "^3.0.7",
+        "@0x/subproviders": "^2.1.8",
+        "@0x/types": "^1.4.1",
+        "@0x/typescript-typings": "^3.0.6",
+        "@0x/utils": "^2.0.8",
+        "@0x/web3-wrapper": "^3.2.1",
         "bowser": "^1.9.4",
         "copy-to-clipboard": "^3.0.8",
-        "ethereum-types": "^1.1.2",
+        "ethereum-types": "^1.1.4",
         "lodash": "^4.17.5",
         "polished": "^2.2.0",
         "react": "^16.5.2",
@@ -62,7 +65,7 @@
         "ts-optchain": "^0.1.1"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.10",
+        "@0x/tslint-config": "^2.0.0",
         "@static/discharge": "https://github.com/0xProject/discharge.git",
         "@types/enzyme": "^3.1.14",
         "@types/enzyme-adapter-react-16": "^1.0.3",
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index f7d5a4fe4..cb8a8c797 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -7,7 +7,6 @@ import { analytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 
 import { SearchInput } from './search_input';
-
 import { Circle } from './ui/circle';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -123,10 +122,20 @@ interface TokenSelectorRowIconProps {
     token: ERC20Asset;
 }
 
+const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => {
+    try {
+        return require(`../assets/icons/${symbol}.svg`) as React.StatelessComponent;
+    } catch (e) {
+        // Can't find icon
+        return undefined;
+    }
+};
+
 const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
     const { token } = props;
     const iconUrlIfExists = token.metaData.iconUrl;
-    const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`);
+
+    const TokenIcon = getTokenIcon(token.metaData.symbol);
     const displaySymbol = assetUtils.bestNameForAsset(token);
     if (!_.isUndefined(iconUrlIfExists)) {
         return <img src={iconUrlIfExists} />;
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 117f9dd5f..5b1f9592d 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -61,12 +61,19 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     }
 
     private _renderAmountsSection(): React.ReactNode {
-        return (
-            <Container>
-                <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
-                <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
-            </Container>
-        );
+        if (
+            _.isUndefined(this.props.totalEthBaseUnitAmount) &&
+            this.props.quoteRequestState !== AsyncProcessState.Pending
+        ) {
+            return null;
+        } else {
+            return (
+                <Container>
+                    <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
+                    <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
+                </Container>
+            );
+        }
     }
 
     private _renderIcon(): React.ReactNode {
@@ -106,20 +113,23 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     }
 
     private readonly _renderEthAmount = (): React.ReactNode => {
+        const ethAmount = format.ethBaseUnitAmount(
+            this.props.totalEthBaseUnitAmount,
+            4,
+            <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
+        );
+
+        const fontSize = _.isString(ethAmount) && ethAmount.length >= 13 ? '14px' : '16px';
         return (
             <Text
-                fontSize="16px"
+                fontSize={fontSize}
                 textAlign="right"
                 width="100%"
                 fontColor={ColorOption.white}
                 fontWeight={500}
                 noWrap={true}
             >
-                {format.ethBaseUnitAmount(
-                    this.props.totalEthBaseUnitAmount,
-                    4,
-                    <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
-                )}
+                {ethAmount}
             </Text>
         );
     };
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index a8e0e2513..9c10ef9e6 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -4,124 +4,227 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { oc } from 'ts-optchain';
 
-import { BIG_NUMBER_ZERO } from '../constants';
+import { BIG_NUMBER_ZERO, DEFAULT_UNKOWN_ASSET_NAME } from '../constants';
 import { ColorOption } from '../style/theme';
+import { BaseCurrency } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
+import { SectionHeader } from './section_header';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
-import { Text } from './ui/text';
+import { Text, TextProps } from './ui/text';
 
 export interface OrderDetailsProps {
     buyQuoteInfo?: BuyQuoteInfo;
     selectedAssetUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     isLoading: boolean;
+    assetName?: string;
+    baseCurrency: BaseCurrency;
+    onBaseCurrencySwitchEth: () => void;
+    onBaseCurrencySwitchUsd: () => void;
 }
 export class OrderDetails extends React.Component<OrderDetailsProps> {
     public render(): React.ReactNode {
-        const { buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
-        const buyQuoteAccessor = oc(buyQuoteInfo);
-        const assetEthBaseUnitAmount = buyQuoteAccessor.assetEthAmount();
-        const feeEthBaseUnitAmount = buyQuoteAccessor.feeEthAmount();
-        const totalEthBaseUnitAmount = buyQuoteAccessor.totalEthAmount();
-        const pricePerTokenEth =
-            !_.isUndefined(assetEthBaseUnitAmount) &&
-            !_.isUndefined(selectedAssetUnitAmount) &&
-            !selectedAssetUnitAmount.eq(BIG_NUMBER_ZERO)
-                ? assetEthBaseUnitAmount.div(selectedAssetUnitAmount).ceil()
-                : undefined;
+        const shouldShowUsdError = this.props.baseCurrency === BaseCurrency.USD && this._hadErrorFetchingUsdPrice();
         return (
             <Container width="100%" flexGrow={1} padding="20px 20px 0px 20px">
-                <Container marginBottom="10px">
-                    <Text
-                        letterSpacing="1px"
-                        fontColor={ColorOption.primaryColor}
-                        fontWeight={600}
-                        textTransform="uppercase"
-                        fontSize="14px"
-                    >
-                        Order Details
-                    </Text>
-                </Container>
-                <EthAmountRow
-                    rowLabel="Token Price"
-                    ethAmount={pricePerTokenEth}
-                    ethUsdPrice={ethUsdPrice}
-                    isLoading={this.props.isLoading}
+                <Container marginBottom="10px">{this._renderHeader()}</Container>
+                {shouldShowUsdError ? this._renderErrorFetchingUsdPrice() : this._renderRows()}
+            </Container>
+        );
+    }
+
+    private _renderRows(): React.ReactNode {
+        const { buyQuoteInfo } = this.props;
+        return (
+            <React.Fragment>
+                <OrderDetailsRow
+                    labelText={this._assetAmountLabel()}
+                    primaryValue={this._displayAmountOrPlaceholder(buyQuoteInfo && buyQuoteInfo.assetEthAmount)}
                 />
-                <EthAmountRow
-                    rowLabel="Fee"
-                    ethAmount={feeEthBaseUnitAmount}
-                    ethUsdPrice={ethUsdPrice}
-                    isLoading={this.props.isLoading}
+                <OrderDetailsRow
+                    labelText="Fee"
+                    primaryValue={this._displayAmountOrPlaceholder(buyQuoteInfo && buyQuoteInfo.feeEthAmount)}
                 />
-                <EthAmountRow
-                    rowLabel="Total Cost"
-                    ethAmount={totalEthBaseUnitAmount}
-                    ethUsdPrice={ethUsdPrice}
-                    shouldEmphasize={true}
-                    isLoading={this.props.isLoading}
+                <OrderDetailsRow
+                    labelText="Total Cost"
+                    isLabelBold={true}
+                    primaryValue={this._displayAmountOrPlaceholder(buyQuoteInfo && buyQuoteInfo.totalEthAmount)}
+                    isPrimaryValueBold={true}
+                    secondaryValue={this._totalCostSecondaryValue()}
                 />
-            </Container>
+            </React.Fragment>
         );
     }
-}
 
-export interface EthAmountRowProps {
-    rowLabel: string;
-    ethAmount?: BigNumber;
-    isEthAmountInBaseUnits?: boolean;
-    ethUsdPrice?: BigNumber;
-    shouldEmphasize?: boolean;
-    isLoading: boolean;
+    private _renderErrorFetchingUsdPrice(): React.ReactNode {
+        return (
+            <Text>
+                There was an error fetching the USD price.
+                <Text
+                    onClick={this.props.onBaseCurrencySwitchEth}
+                    fontWeight={700}
+                    fontColor={ColorOption.primaryColor}
+                >
+                    Click here
+                </Text>
+                {' to view ETH prices'}
+            </Text>
+        );
+    }
+
+    private _hadErrorFetchingUsdPrice(): boolean {
+        return this.props.ethUsdPrice ? this.props.ethUsdPrice.equals(BIG_NUMBER_ZERO) : false;
+    }
+
+    private _totalCostSecondaryValue(): React.ReactNode {
+        const secondaryCurrency = this.props.baseCurrency === BaseCurrency.USD ? BaseCurrency.ETH : BaseCurrency.USD;
+
+        const canDisplayCurrency =
+            secondaryCurrency === BaseCurrency.ETH ||
+            (secondaryCurrency === BaseCurrency.USD && this.props.ethUsdPrice && !this._hadErrorFetchingUsdPrice());
+
+        if (this.props.buyQuoteInfo && canDisplayCurrency) {
+            return this._displayAmount(secondaryCurrency, this.props.buyQuoteInfo.totalEthAmount);
+        } else {
+            return undefined;
+        }
+    }
+
+    private _displayAmountOrPlaceholder(weiAmount?: BigNumber): React.ReactNode {
+        const { baseCurrency, isLoading } = this.props;
+
+        if (_.isUndefined(weiAmount)) {
+            return (
+                <Container opacity={0.5}>
+                    <AmountPlaceholder color={ColorOption.lightGrey} isPulsating={isLoading} />
+                </Container>
+            );
+        }
+
+        return this._displayAmount(baseCurrency, weiAmount);
+    }
+
+    private _displayAmount(currency: BaseCurrency, weiAmount: BigNumber): React.ReactNode {
+        switch (currency) {
+            case BaseCurrency.USD:
+                return format.ethBaseUnitAmountInUsd(weiAmount, this.props.ethUsdPrice, 2, '');
+            case BaseCurrency.ETH:
+                return format.ethBaseUnitAmount(weiAmount, 4, '');
+        }
+    }
+
+    private _assetAmountLabel(): React.ReactNode {
+        const { assetName, baseCurrency } = this.props;
+        const numTokens = this.props.selectedAssetUnitAmount;
+
+        // Display as 0 if we have a selected asset
+        const displayNumTokens =
+            assetName && assetName !== DEFAULT_UNKOWN_ASSET_NAME && _.isUndefined(numTokens)
+                ? new BigNumber(0)
+                : numTokens;
+        if (!_.isUndefined(displayNumTokens)) {
+            let numTokensWithSymbol: React.ReactNode = displayNumTokens.toString();
+            if (assetName) {
+                numTokensWithSymbol += ` ${assetName}`;
+            }
+            const pricePerTokenWei = this._pricePerTokenWei();
+            if (pricePerTokenWei) {
+                const atPriceDisplay = (
+                    <Text fontColor={ColorOption.lightGrey}>
+                        @ {this._displayAmount(baseCurrency, pricePerTokenWei)}
+                    </Text>
+                );
+                numTokensWithSymbol = (
+                    <React.Fragment>
+                        {numTokensWithSymbol} {atPriceDisplay}
+                    </React.Fragment>
+                );
+            }
+            return numTokensWithSymbol;
+        }
+        return 'Token Amount';
+    }
+
+    private _pricePerTokenWei(): BigNumber | undefined {
+        const buyQuoteAccessor = oc(this.props.buyQuoteInfo);
+        const assetTotalInWei = buyQuoteAccessor.assetEthAmount();
+        const selectedAssetUnitAmount = this.props.selectedAssetUnitAmount;
+        return !_.isUndefined(assetTotalInWei) &&
+            !_.isUndefined(selectedAssetUnitAmount) &&
+            !selectedAssetUnitAmount.eq(BIG_NUMBER_ZERO)
+            ? assetTotalInWei.div(selectedAssetUnitAmount).ceil()
+            : undefined;
+    }
+
+    private _baseCurrencyChoice(choice: BaseCurrency): React.ReactNode {
+        const onClick =
+            choice === BaseCurrency.ETH ? this.props.onBaseCurrencySwitchEth : this.props.onBaseCurrencySwitchUsd;
+        const isSelected = this.props.baseCurrency === choice;
+
+        const textStyle: TextProps = { onClick, fontSize: '12px' };
+        if (isSelected) {
+            textStyle.fontColor = ColorOption.primaryColor;
+            textStyle.fontWeight = 700;
+        } else {
+            textStyle.fontColor = ColorOption.lightGrey;
+        }
+        return <Text {...textStyle}>{choice}</Text>;
+    }
+
+    private _renderHeader(): React.ReactNode {
+        return (
+            <Flex justify="space-between">
+                <SectionHeader>Order Details</SectionHeader>
+                <Container>
+                    {this._baseCurrencyChoice(BaseCurrency.ETH)}
+                    <Container marginLeft="5px" marginRight="5px" display="inline">
+                        <Text fontSize="12px" fontColor={ColorOption.feintGrey}>
+                            /
+                        </Text>
+                    </Container>
+                    {this._baseCurrencyChoice(BaseCurrency.USD)}
+                </Container>
+            </Flex>
+        );
+    }
 }
 
-export class EthAmountRow extends React.Component<EthAmountRowProps> {
-    public static defaultProps = {
-        shouldEmphasize: false,
-        isEthAmountInBaseUnits: true,
-    };
+export interface OrderDetailsRowProps {
+    labelText: React.ReactNode;
+    isLabelBold?: boolean;
+    isPrimaryValueBold?: boolean;
+    primaryValue: React.ReactNode;
+    secondaryValue?: React.ReactNode;
+}
+export class OrderDetailsRow extends React.Component<OrderDetailsRowProps, {}> {
     public render(): React.ReactNode {
-        const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props;
-
-        const fontWeight = shouldEmphasize ? 700 : 400;
-        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseUnitAmount : format.ethUnitAmount;
         return (
             <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
                 <Flex justify="space-between">
-                    <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
-                        {rowLabel}
+                    <Text fontWeight={this.props.isLabelBold ? 700 : 400} fontColor={ColorOption.grey}>
+                        {this.props.labelText}
                     </Text>
-                    <Container>
-                        {this._renderUsdSection()}
-                        <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
-                            {ethFormatter(
-                                ethAmount,
-                                4,
-                                <Container opacity={0.5}>
-                                    <AmountPlaceholder color={ColorOption.lightGrey} isPulsating={isLoading} />
-                                </Container>,
-                            )}
-                        </Text>
-                    </Container>
+                    <Container>{this._renderValues()}</Container>
                 </Flex>
             </Container>
         );
     }
-    private _renderUsdSection(): React.ReactNode {
-        const usdFormatter = this.props.isEthAmountInBaseUnits
-            ? format.ethBaseUnitAmountInUsd
-            : format.ethUnitAmountInUsd;
-        const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount);
-        return shouldHideUsdPriceSection ? null : (
+
+    private _renderValues(): React.ReactNode {
+        const secondaryValueNode: React.ReactNode = this.props.secondaryValue && (
             <Container marginRight="3px" display="inline-block">
-                <Text fontColor={ColorOption.lightGrey}>
-                    ({usdFormatter(this.props.ethAmount, this.props.ethUsdPrice)})
-                </Text>
+                <Text fontColor={ColorOption.lightGrey}>({this.props.secondaryValue})</Text>
             </Container>
         );
+        return (
+            <React.Fragment>
+                {secondaryValueNode}
+                <Text fontWeight={this.props.isPrimaryValueBold ? 700 : 400}>{this.props.primaryValue}</Text>
+            </React.Fragment>
+        );
     }
 }
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 7c93f1d1c..abadf4bd6 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -8,6 +8,7 @@ import { envUtil } from '../util/env';
 import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
 import { MetaMaskLogo } from './meta_mask_logo';
 import { PaymentMethodDropdown } from './payment_method_dropdown';
+import { SectionHeader } from './section_header';
 import { Circle } from './ui/circle';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -29,15 +30,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
             <Container width="100%" height="120px" padding="20px 20px 0px 20px">
                 <Container marginBottom="12px">
                     <Flex justify="space-between">
-                        <Text
-                            letterSpacing="1px"
-                            fontColor={ColorOption.primaryColor}
-                            fontWeight={600}
-                            textTransform="uppercase"
-                            fontSize="14px"
-                        >
-                            {this._renderTitleText()}
-                        </Text>
+                        <SectionHeader>{this._renderTitleText()}</SectionHeader>
                         {this._renderTitleLabel()}
                     </Flex>
                 </Container>
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 86aca5a65..4feb0502d 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -58,6 +58,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         const { textLengthThreshold, fontColor, maxFontSizePx, onFontSizeChange } = this.props;
         return (
             <ScalingInput
+                type="number"
                 maxFontSizePx={maxFontSizePx}
                 textLengthThreshold={textLengthThreshold}
                 onFontSizeChange={onFontSizeChange}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 791692257..00aea37da 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -1,3 +1,4 @@
+import { ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 import * as React from 'react';
 
@@ -13,10 +14,15 @@ export enum ScalingInputPhase {
 
 export interface ScalingSettings {
     percentageToReduceFontSizePerCharacter: number;
-    constantPxToIncreaseWidthPerCharacter: number;
+    // 1ch = the width of the 0 chararacter.
+    // Allow to customize 'char' length for different characters.
+    characterWidthOverrides: ObjectMap<number>;
+    // How much room to leave to the right of the scaling input.
+    additionalInputSpaceInCh: number;
 }
 
 export interface ScalingInputProps {
+    type?: string;
     textLengthThreshold: number;
     maxFontSizePx: number;
     value: string;
@@ -31,32 +37,29 @@ export interface ScalingInputProps {
     hasAutofocus: boolean;
 }
 
-export interface ScalingInputState {
-    inputWidthPxAtPhaseChange?: number;
-}
-
 export interface ScalingInputSnapshot {
     inputWidthPx: number;
 }
 
 // These are magic numbers that were determined experimentally.
 const defaultScalingSettings: ScalingSettings = {
-    percentageToReduceFontSizePerCharacter: 0.125,
-    constantPxToIncreaseWidthPerCharacter: 4,
+    percentageToReduceFontSizePerCharacter: 0.1,
+    characterWidthOverrides: {
+        '1': 0.7,
+        '.': 0.4,
+    },
+    additionalInputSpaceInCh: 0.4,
 };
 
-export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
+export class ScalingInput extends React.Component<ScalingInputProps> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 7,
+        maxLength: 9,
         scalingSettings: defaultScalingSettings,
         isDisabled: false,
         hasAutofocus: false,
     };
-    public state: ScalingInputState = {
-        inputWidthPxAtPhaseChange: undefined,
-    };
     private readonly _inputRef = React.createRef<HTMLInputElement>();
     public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase {
         if (value.length <= textLengthThreshold) {
@@ -93,36 +96,15 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
             scalingSettings.percentageToReduceFontSizePerCharacter,
         );
     }
-    public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
-        return {
-            inputWidthPx: this._getInputWidthInPx(),
-        };
-    }
     public componentDidMount(): void {
         // Trigger an initial notification of the calculated fontSize.
         const currentPhase = ScalingInput.getPhaseFromProps(this.props);
         const currentFontSize = ScalingInput.calculateFontSizeFromProps(this.props, currentPhase);
         this.props.onFontSizeChange(currentFontSize);
     }
-    public componentDidUpdate(
-        prevProps: ScalingInputProps,
-        prevState: ScalingInputState,
-        snapshot: ScalingInputSnapshot,
-    ): void {
+    public componentDidUpdate(prevProps: ScalingInputProps): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        // if we went from fixed to scaling, save the width from the transition
-        if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
-            this.setState({
-                inputWidthPxAtPhaseChange: snapshot.inputWidthPx,
-            });
-        }
-        // if we went from scaling to fixed, revert back to scaling using `ch`
-        if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
-            this.setState({
-                inputWidthPxAtPhaseChange: undefined,
-            });
-        }
         const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
         const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // If font size has changed, notify.
@@ -131,13 +113,14 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         }
     }
     public render(): React.ReactNode {
-        const { hasAutofocus, isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
+        const { type, hasAutofocus, isDisabled, fontColor, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
+                type={type}
                 ref={this._inputRef as any}
                 fontColor={fontColor}
-                onChange={onChange}
+                onChange={this._handleChange}
                 value={value}
                 placeholder={placeholder}
                 fontSize={`${this._calculateFontSize(phase)}px`}
@@ -149,32 +132,34 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         );
     }
     private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
-        const { value, textLengthThreshold, scalingSettings } = this.props;
+        const { value, scalingSettings } = this.props;
         if (_.isEmpty(value)) {
             return `${this.props.emptyInputWidthCh}ch`;
         }
-        switch (phase) {
-            case ScalingInputPhase.FixedFontSize:
-                return `${value.length}ch`;
-            case ScalingInputPhase.ScalingFontSize:
-                const { inputWidthPxAtPhaseChange } = this.state;
-                if (!_.isUndefined(inputWidthPxAtPhaseChange)) {
-                    const charactersOverMax = value.length - textLengthThreshold;
-                    const scalingAmount = scalingSettings.constantPxToIncreaseWidthPerCharacter * charactersOverMax;
-                    const width = inputWidthPxAtPhaseChange + scalingAmount;
-                    return `${width}px`;
+        const lengthInCh = _.reduce(
+            value.split(''),
+            (sum, char) => {
+                const widthOverride = scalingSettings.characterWidthOverrides[char];
+                if (!_.isUndefined(widthOverride)) {
+                    // tslint is confused
+                    // tslint:disable-next-line:restrict-plus-operands
+                    return sum + widthOverride;
                 }
-                return `${textLengthThreshold}ch`;
-        }
+                return sum + 1;
+            },
+            scalingSettings.additionalInputSpaceInCh,
+        );
+        return `${lengthInCh}ch`;
     };
     private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
         return ScalingInput.calculateFontSizeFromProps(this.props, phase);
     };
-    private readonly _getInputWidthInPx = (): number => {
-        const ref = this._inputRef.current;
-        if (!ref) {
-            return 0;
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const value = event.target.value;
+        const { maxLength } = this.props;
+        if (!_.isUndefined(value) && !_.isUndefined(maxLength) && value.length > maxLength) {
+            return;
         }
-        return ref.getBoundingClientRect().width;
+        this.props.onChange(event);
     };
 }
diff --git a/packages/instant/src/components/section_header.tsx b/packages/instant/src/components/section_header.tsx
new file mode 100644
index 000000000..d0974ebdc
--- /dev/null
+++ b/packages/instant/src/components/section_header.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Text } from './ui/text';
+
+export interface SectionHeaderProps {}
+export const SectionHeader: React.StatelessComponent<SectionHeaderProps> = props => {
+    return (
+        <Text
+            letterSpacing="1px"
+            fontColor={ColorOption.primaryColor}
+            fontWeight={600}
+            textTransform="uppercase"
+            fontSize="12px"
+        >
+            {props.children}
+        </Text>
+    );
+};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 62c70f9e1..53c43ea0b 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 
-export interface InputProps {
+export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
     tabIndex?: number;
     className?: string;
     value?: string;
@@ -32,6 +32,10 @@ export const Input =
             color: ${props => props.theme[props.fontColor || 'white']} !important;
             opacity: 0.5 !important;
         }
+        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
     }
 `;
 
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 7ae27de23..2de327cd7 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -38,6 +38,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             props.orderSource,
             networkId,
             props.provider,
+            props.walletDisplayName,
         );
         // merge the additional additionalAssetMetaDataMap with our default map
         const completeAssetMetaDataMap = {
@@ -121,6 +122,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
                 window,
                 state.selectedAsset,
                 this.props.affiliateInfo,
+                state.baseCurrency,
             ),
         );
         analytics.trackInstantOpened();
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index f83eb4ac7..975dfcbea 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -17,6 +17,7 @@ export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
 export const GIT_SHA = process.env.GIT_SHA;
 export const NODE_ENV = process.env.NODE_ENV;
 export const NPM_PACKAGE_VERSION = process.env.NPM_PACKAGE_VERSION;
+export const DEFAULT_UNKOWN_ASSET_NAME = '???';
 export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 5;
 export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index bb68fdd57..f648f0b54 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -58,7 +58,7 @@ const mergeProps = (
     ...ownProps,
     network: connectedState.network,
     account: connectedState.providerState.account,
-    walletDisplayName: connectedState.walletDisplayName || connectedState.providerState.name,
+    walletDisplayName: connectedState.providerState.displayName,
     onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
     onInstallWalletClick: () => {
         const isMobile = envUtil.isMobileOperatingSystem();
diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts
index 5dfe535e7..148735c47 100644
--- a/packages/instant/src/containers/latest_buy_quote_order_details.ts
+++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts
@@ -1,32 +1,41 @@
-import { BuyQuoteInfo } from '@0x/asset-buyer';
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 import { oc } from 'ts-optchain';
 
+import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 
-import { OrderDetails } from '../components/order_details';
-import { AsyncProcessState } from '../types';
+import { OrderDetails, OrderDetailsProps } from '../components/order_details';
+import { AsyncProcessState, BaseCurrency, Omit } from '../types';
+import { assetUtils } from '../util/asset';
 
-export interface LatestBuyQuoteOrderDetailsProps {}
-
-interface ConnectedState {
-    buyQuoteInfo?: BuyQuoteInfo;
-    selectedAssetUnitAmount?: BigNumber;
-    ethUsdPrice?: BigNumber;
-    isLoading: boolean;
-}
+type DispatchProperties = 'onBaseCurrencySwitchEth' | 'onBaseCurrencySwitchUsd';
 
+interface ConnectedState extends Omit<OrderDetailsProps, DispatchProperties> {}
 const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
     // use the worst case quote info
     buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
     selectedAssetUnitAmount: state.selectedAssetUnitAmount,
     ethUsdPrice: state.ethUsdPrice,
     isLoading: state.quoteRequestState === AsyncProcessState.Pending,
+    assetName: assetUtils.bestNameForAsset(state.selectedAsset),
+    baseCurrency: state.baseCurrency,
 });
 
+interface ConnectedDispatch extends Pick<OrderDetailsProps, DispatchProperties> {}
+const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({
+    onBaseCurrencySwitchEth: () => {
+        dispatch(actions.updateBaseCurrency(BaseCurrency.ETH));
+    },
+    onBaseCurrencySwitchUsd: () => {
+        dispatch(actions.updateBaseCurrency(BaseCurrency.USD));
+    },
+});
+
+export interface LatestBuyQuoteOrderDetailsProps {}
 export const LatestBuyQuoteOrderDetails: React.ComponentClass<LatestBuyQuoteOrderDetailsProps> = connect(
     mapStateToProps,
+    mapDispatchToProps,
 )(OrderDetails);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 77e3dec12..9d7a61fc7 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { ActionsUnion, AddressAndEthBalanceInWei, Asset, StandardSlidingPanelContent } from '../types';
+import { ActionsUnion, AddressAndEthBalanceInWei, Asset, BaseCurrency, StandardSlidingPanelContent } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -43,6 +43,7 @@ export enum ActionTypes {
     RESET_AMOUNT = 'RESET_AMOUNT',
     OPEN_STANDARD_SLIDING_PANEL = 'OPEN_STANDARD_SLIDING_PANEL',
     CLOSE_STANDARD_SLIDING_PANEL = 'CLOSE_STANDARD_SLIDING_PANEL',
+    UPDATE_BASE_CURRENCY = 'UPDATE_BASE_CURRENCY',
 }
 
 export const actions = {
@@ -72,4 +73,5 @@ export const actions = {
     openStandardSlidingPanel: (content: StandardSlidingPanelContent) =>
         createAction(ActionTypes.OPEN_STANDARD_SLIDING_PANEL, content),
     closeStandardSlidingPanel: () => createAction(ActionTypes.CLOSE_STANDARD_SLIDING_PANEL),
+    updateBaseCurrency: (baseCurrency: BaseCurrency) => createAction(ActionTypes.UPDATE_BASE_CURRENCY, baseCurrency),
 };
diff --git a/packages/instant/src/redux/analytics_middleware.ts b/packages/instant/src/redux/analytics_middleware.ts
index 3f7a51707..a86a16b1a 100644
--- a/packages/instant/src/redux/analytics_middleware.ts
+++ b/packages/instant/src/redux/analytics_middleware.ts
@@ -99,6 +99,9 @@ export const analyticsMiddleware: Middleware = store => next => middlewareAction
                 analytics.trackInstallWalletModalClosed();
             }
             break;
+        case ActionTypes.UPDATE_BASE_CURRENCY:
+            analytics.trackBaseCurrencyChanged(curState.baseCurrency);
+            analytics.addEventProperties({ baseCurrency: curState.baseCurrency });
     }
 
     return nextAction;
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index c67b222d1..884ab103d 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
 import { BIG_NUMBER_ZERO } from '../constants';
-import { AccountState, ERC20Asset, OrderProcessState, ProviderState, QuoteFetchOrigin } from '../types';
+import { AccountState, BaseCurrency, ERC20Asset, OrderProcessState, ProviderState, QuoteFetchOrigin } from '../types';
 import { analytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
@@ -24,7 +24,9 @@ export const asyncData = {
             const errorMessage = 'Error fetching ETH/USD price';
             errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
             dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
+            dispatch(actions.updateBaseCurrency(BaseCurrency.ETH));
             errorReporter.report(e);
+            analytics.trackUsdPriceFailed();
         }
     },
     fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => {
@@ -97,6 +99,7 @@ export const asyncData = {
         if (
             !_.isUndefined(selectedAssetUnitAmount) &&
             !_.isUndefined(selectedAsset) &&
+            selectedAssetUnitAmount.greaterThan(BIG_NUMBER_ZERO) &&
             buyOrderState.processState === OrderProcessState.None &&
             selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
         ) {
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index a9a407b7d..8c13c9c72 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -14,6 +14,7 @@ import {
     Asset,
     AssetMetaData,
     AsyncProcessState,
+    BaseCurrency,
     DisplayStatus,
     Network,
     OrderProcessState,
@@ -33,6 +34,7 @@ export interface DefaultState {
     latestErrorDisplayStatus: DisplayStatus;
     quoteRequestState: AsyncProcessState;
     standardSlidingPanelSettings: StandardSlidingPanelSettings;
+    baseCurrency: BaseCurrency;
 }
 
 // State that is required but needs to be derived from the props
@@ -64,6 +66,7 @@ export const DEFAULT_STATE: DefaultState = {
         animationState: 'none',
         content: StandardSlidingPanelContent.None,
     },
+    baseCurrency: BaseCurrency.USD,
 };
 
 export const createReducer = (initialState: State) => {
@@ -243,6 +246,11 @@ export const createReducer = (initialState: State) => {
                         animationState: 'slidOut',
                     },
                 };
+            case ActionTypes.UPDATE_BASE_CURRENCY:
+                return {
+                    ...state,
+                    baseCurrency: action.data,
+                };
             default:
                 return state;
         }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index e65961e95..e7c920f36 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -26,6 +26,11 @@ export enum QuoteFetchOrigin {
     Heartbeat = 'Heartbeat',
 }
 
+export enum BaseCurrency {
+    USD = 'USD',
+    ETH = 'ETH',
+}
+
 export interface SimulatedProgress {
     startTimeUnix: number;
     expectedEndTimeUnix: number;
@@ -102,6 +107,7 @@ export interface AffiliateInfo {
 
 export interface ProviderState {
     name: string;
+    displayName: string;
     provider: Provider;
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 6da52db16..6c63907dc 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -6,6 +6,7 @@ import { GIT_SHA, HEAP_ENABLED, INSTANT_DISCHARGE_TARGET, NODE_ENV, NPM_PACKAGE_
 import {
     AffiliateInfo,
     Asset,
+    BaseCurrency,
     Network,
     OrderProcessState,
     OrderSource,
@@ -37,6 +38,7 @@ enum EventNames {
     ACCOUNT_UNLOCK_REQUESTED = 'Account - Unlock Requested',
     ACCOUNT_UNLOCK_DENIED = 'Account - Unlock Denied',
     ACCOUNT_ADDRESS_CHANGED = 'Account - Address Changed',
+    BASE_CURRENCY_CHANGED = 'Base Currency - Changed',
     PAYMENT_METHOD_DROPDOWN_OPENED = 'Payment Method - Dropdown Opened',
     PAYMENT_METHOD_OPENED_ETHERSCAN = 'Payment Method - Opened Etherscan',
     PAYMENT_METHOD_COPIED_ADDRESS = 'Payment Method - Copied Address',
@@ -47,6 +49,7 @@ enum EventNames {
     BUY_TX_SUBMITTED = 'Buy - Tx Submitted',
     BUY_TX_SUCCEEDED = 'Buy - Tx Succeeded',
     BUY_TX_FAILED = 'Buy - Tx Failed',
+    USD_PRICE_FETCH_FAILED = 'USD Price - Fetch Failed',
     INSTALL_WALLET_CLICKED = 'Install Wallet - Clicked',
     INSTALL_WALLET_MODAL_OPENED = 'Install Wallet - Modal - Opened',
     INSTALL_WALLET_MODAL_CLICKED_EXPLANATION = 'Install Wallet - Modal - Clicked Explanation',
@@ -106,6 +109,7 @@ export interface AnalyticsEventOptions {
     ethAddress?: string;
     networkId?: number;
     providerName?: string;
+    providerDisplayName?: string;
     gitSha?: string;
     npmVersion?: string;
     instantEnvironment?: string;
@@ -117,6 +121,7 @@ export interface AnalyticsEventOptions {
     selectedAssetSymbol?: string;
     selectedAssetData?: string;
     selectedAssetDecimals?: number;
+    baseCurrency?: string;
 }
 export enum TokenSelectorClosedVia {
     ClickedX = 'Clicked X',
@@ -140,6 +145,7 @@ export const analytics = {
         window: Window,
         selectedAsset?: Asset,
         affiliateInfo?: AffiliateInfo,
+        baseCurrency?: BaseCurrency,
     ): AnalyticsEventOptions => {
         const affiliateAddress = affiliateInfo ? affiliateInfo.feeRecipient : 'none';
         const affiliateFeePercent = affiliateInfo ? parseFloat(affiliateInfo.feePercentage.toFixed(4)) : 0;
@@ -149,6 +155,7 @@ export const analytics = {
             embeddedUrl: window.location.href,
             networkId: network,
             providerName: providerState.name,
+            providerDisplayName: providerState.displayName,
             gitSha: GIT_SHA,
             npmVersion: NPM_PACKAGE_VERSION,
             orderSource: orderSourceName,
@@ -157,6 +164,7 @@ export const analytics = {
             selectedAssetName: selectedAsset ? selectedAsset.metaData.name : 'none',
             selectedAssetData: selectedAsset ? selectedAsset.assetData : 'none',
             instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${NODE_ENV}`,
+            baseCurrency,
         };
         return eventOptions;
     },
@@ -168,6 +176,8 @@ export const analytics = {
     trackAccountUnlockDenied: trackingEventFnWithoutPayload(EventNames.ACCOUNT_UNLOCK_DENIED),
     trackAccountAddressChanged: (address: string) =>
         trackingEventFnWithPayload(EventNames.ACCOUNT_ADDRESS_CHANGED)({ address }),
+    trackBaseCurrencyChanged: (currencyChangedTo: BaseCurrency) =>
+        trackingEventFnWithPayload(EventNames.BASE_CURRENCY_CHANGED)({ currencyChangedTo }),
     trackPaymentMethodDropdownOpened: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_DROPDOWN_OPENED),
     trackPaymentMethodOpenedEtherscan: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_OPENED_ETHERSCAN),
     trackPaymentMethodCopiedAddress: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_COPIED_ADDRESS),
@@ -228,4 +238,5 @@ export const analytics = {
             fetchOrigin,
         });
     },
+    trackUsdPriceFailed: trackingEventFnWithoutPayload(EventNames.USD_PRICE_FETCH_FAILED),
 };
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 13f84ef74..faaeb7c22 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -2,6 +2,7 @@ import { AssetBuyerError } from '@0x/asset-buyer';
 import { AssetProxyId, ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 
+import { DEFAULT_UNKOWN_ASSET_NAME } from '../constants';
 import { assetDataNetworkMapping } from '../data/asset_data_network_mapping';
 import { Asset, AssetMetaData, ERC20Asset, Network, ZeroExInstantError } from '../types';
 
@@ -71,7 +72,7 @@ export const assetUtils = {
         }
         return metaData;
     },
-    bestNameForAsset: (asset?: Asset, defaultName: string = '???'): string => {
+    bestNameForAsset: (asset?: Asset, defaultName: string = DEFAULT_UNKOWN_ASSET_NAME): string => {
         if (_.isUndefined(asset)) {
             return defaultName;
         }
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
index 4a32f9cb1..0fda0cc0e 100644
--- a/packages/instant/src/util/env.ts
+++ b/packages/instant/src/util/env.ts
@@ -62,4 +62,11 @@ export const envUtil = {
         }
         return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
     },
+    getProviderDisplayName(provider: Provider): string {
+        const providerTypeIfExists = envUtil.getProviderType(provider);
+        if (_.isUndefined(providerTypeIfExists)) {
+            return 'Wallet';
+        }
+        return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
+    },
 };
diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index e9c432b2f..4adb63e21 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
-import { ETH_DECIMALS } from '../constants';
+import { BIG_NUMBER_ZERO, ETH_DECIMALS } from '../constants';
 
 export const format = {
     ethBaseUnitAmount: (
@@ -20,24 +20,38 @@ export const format = {
         ethUnitAmount?: BigNumber,
         decimalPlaces: number = 4,
         defaultText: React.ReactNode = '0 ETH',
+        minUnitAmountToDisplay: BigNumber = new BigNumber('0.00001'),
     ): React.ReactNode => {
         if (_.isUndefined(ethUnitAmount)) {
             return defaultText;
         }
-        const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
-        return `${roundedAmount} ETH`;
+        let roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
+
+        if (roundedAmount.eq(BIG_NUMBER_ZERO) && ethUnitAmount.greaterThan(BIG_NUMBER_ZERO)) {
+            // Sometimes for small ETH amounts (i.e. 0.000045) the amount rounded to 4 decimalPlaces is 0
+            // If that is the case, show to 1 significant digit
+            roundedAmount = new BigNumber(ethUnitAmount.toPrecision(1));
+        }
+
+        const displayAmount =
+            roundedAmount.greaterThan(BIG_NUMBER_ZERO) && roundedAmount.lessThan(minUnitAmountToDisplay)
+                ? `< ${minUnitAmountToDisplay.toString()}`
+                : roundedAmount.toString();
+
+        return `${displayAmount} ETH`;
     },
     ethBaseUnitAmountInUsd: (
         ethBaseUnitAmount?: BigNumber,
         ethUsdPrice?: BigNumber,
         decimalPlaces: number = 2,
         defaultText: React.ReactNode = '$0.00',
+        minUnitAmountToDisplay: BigNumber = new BigNumber('0.00001'),
     ): React.ReactNode => {
         if (_.isUndefined(ethBaseUnitAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
         const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
-        return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
+        return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces, minUnitAmountToDisplay);
     },
     ethUnitAmountInUsd: (
         ethUnitAmount?: BigNumber,
@@ -48,7 +62,13 @@ export const format = {
         if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
-        return `$${ethUnitAmount.mul(ethUsdPrice).toFixed(decimalPlaces)}`;
+        const rawUsdPrice = ethUnitAmount.mul(ethUsdPrice);
+        const roundedUsdPrice = rawUsdPrice.toFixed(decimalPlaces);
+        if (roundedUsdPrice === '0.00' && rawUsdPrice.gt(BIG_NUMBER_ZERO)) {
+            return '<$0.01';
+        } else {
+            return `$${roundedUsdPrice}`;
+        }
     },
     ethAddress: (address: string): string => {
         return `0x${address.slice(2, 7)}…${address.slice(-5)}`;
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 7c788dff2..bd2d6dad5 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -10,27 +10,40 @@ import { assetBuyerFactory } from './asset_buyer_factory';
 import { providerFactory } from './provider_factory';
 
 export const providerStateFactory = {
-    getInitialProviderState: (orderSource: OrderSource, network: Network, provider?: Provider): ProviderState => {
+    getInitialProviderState: (
+        orderSource: OrderSource,
+        network: Network,
+        provider?: Provider,
+        walletDisplayName?: string,
+    ): ProviderState => {
         if (!_.isUndefined(provider)) {
-            return providerStateFactory.getInitialProviderStateFromProvider(orderSource, network, provider);
+            return providerStateFactory.getInitialProviderStateFromProvider(
+                orderSource,
+                network,
+                provider,
+                walletDisplayName,
+            );
         }
         const providerStateFromWindowIfExits = providerStateFactory.getInitialProviderStateFromWindowIfExists(
             orderSource,
             network,
+            walletDisplayName,
         );
         if (providerStateFromWindowIfExits) {
             return providerStateFromWindowIfExits;
         } else {
-            return providerStateFactory.getInitialProviderStateFallback(orderSource, network);
+            return providerStateFactory.getInitialProviderStateFallback(orderSource, network, walletDisplayName);
         }
     },
     getInitialProviderStateFromProvider: (
         orderSource: OrderSource,
         network: Network,
         provider: Provider,
+        walletDisplayName?: string,
     ): ProviderState => {
         const providerState: ProviderState = {
             name: envUtil.getProviderName(provider),
+            displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
@@ -38,11 +51,16 @@ export const providerStateFactory = {
         };
         return providerState;
     },
-    getInitialProviderStateFromWindowIfExists: (orderSource: OrderSource, network: Network): Maybe<ProviderState> => {
+    getInitialProviderStateFromWindowIfExists: (
+        orderSource: OrderSource,
+        network: Network,
+        walletDisplayName?: string,
+    ): Maybe<ProviderState> => {
         const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
         if (!_.isUndefined(injectedProviderIfExists)) {
             const providerState: ProviderState = {
                 name: envUtil.getProviderName(injectedProviderIfExists),
+                displayName: walletDisplayName || envUtil.getProviderDisplayName(injectedProviderIfExists),
                 provider: injectedProviderIfExists,
                 web3Wrapper: new Web3Wrapper(injectedProviderIfExists),
                 assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network),
@@ -53,10 +71,15 @@ export const providerStateFactory = {
             return undefined;
         }
     },
-    getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
+    getInitialProviderStateFallback: (
+        orderSource: OrderSource,
+        network: Network,
+        walletDisplayName?: string,
+    ): ProviderState => {
         const provider = providerFactory.getFallbackNoSigningProvider(network);
         const providerState: ProviderState = {
             name: 'Fallback',
+            displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
diff --git a/packages/instant/test/util/format.test.ts b/packages/instant/test/util/format.test.ts
index fe0a63e6e..38bf356ec 100644
--- a/packages/instant/test/util/format.test.ts
+++ b/packages/instant/test/util/format.test.ts
@@ -41,6 +41,18 @@ describe('format', () => {
         it('converts BigNumber(5.3014059295032) to the string `5.301 ETH`', () => {
             expect(format.ethUnitAmount(BIG_NUMBER_IRRATIONAL)).toBe('5.301 ETH');
         });
+        it('shows 1 significant digit when rounded amount would be 0', () => {
+            expect(format.ethUnitAmount(new BigNumber(0.00003))).toBe('0.00003 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.000034))).toBe('0.00003 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.000035))).toBe('0.00004 ETH');
+        });
+        it('shows < 0.00001 when hits threshold', () => {
+            expect(format.ethUnitAmount(new BigNumber(0.000011))).toBe('0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.00001))).toBe('0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.000009))).toBe('< 0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.0000000009))).toBe('< 0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0))).toBe('0 ETH');
+        });
         it('returns defaultText param when ethUnitAmount is not defined', () => {
             const defaultText = 'defaultText';
             expect(format.ethUnitAmount(undefined, 4, defaultText)).toBe(defaultText);
@@ -86,6 +98,12 @@ describe('format', () => {
         it('correctly formats 5.3014059295032 ETH to usd according to some price', () => {
             expect(format.ethUnitAmountInUsd(BIG_NUMBER_IRRATIONAL, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$13.43');
         });
+        it('correctly formats amount that is less than 1 cent', () => {
+            expect(format.ethUnitAmountInUsd(new BigNumber(0.000001), BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('<$0.01');
+        });
+        it('correctly formats exactly 1 cent', () => {
+            expect(format.ethUnitAmountInUsd(new BigNumber(0.0039), BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$0.01');
+        });
         it('returns defaultText param when ethUnitAmountInUsd or ethUsdPrice is not defined', () => {
             const defaultText = 'defaultText';
             expect(format.ethUnitAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText);