Merge branch 'development' into feature/contracts-monorepo-2

34 files changed, 322 insertions, 79 deletions

diff --git a/packages/instant/.dogfood.discharge.json b/packages/instant/.dogfood.discharge.json
index b0e4edaff..5d6a09a16 100644
--- a/packages/instant/.dogfood.discharge.json
+++ b/packages/instant/.dogfood.discharge.json
@@ -1,6 +1,6 @@
 {
     "domain": "0x-instant-dogfood",
-    "build_command": "WEBPACK_OUTPUT_PATH=public yarn build --env.discharge_target=dogfood",
+    "build_command": "WEBPACK_OUTPUT_PATH=public dotenv yarn build --env.discharge_target=dogfood",
     "upload_directory": "public",
     "index_key": "index.html",
     "error_key": "index.html",
diff --git a/packages/instant/.env_example b/packages/instant/.env_example
new file mode 100644
index 000000000..234e64bbe
--- /dev/null
+++ b/packages/instant/.env_example
@@ -0,0 +1,7 @@
+INSTANT_ROLLBAR_PUBLISH_TOKEN=
+INSTANT_ROLLBAR_CLIENT_TOKEN=
+INSTANT_HEAP_ANALYTICS_ID_PRODUCTION=
+INSTANT_HEAP_ANALYTICS_ID_DEVELOPMENT=
+# if you want to report to heap or rollbar when building in development mode, you can use the following:
+# INSTANT_HEAP_FORCE_DEVELOPMENT=true
+# INSTANT_ROLLBAR_FORCE_DEVELOPMENT=true
\ No newline at end of file
diff --git a/packages/instant/.gitignore b/packages/instant/.gitignore
index a99cea187..2e65f192d 100644
--- a/packages/instant/.gitignore
+++ b/packages/instant/.gitignore
@@ -1,3 +1,4 @@
 public/instant.js
 public/instant.js.map
-umd/*
\ No newline at end of file
+umd/*
+.env
\ No newline at end of file
diff --git a/packages/instant/.npmignore b/packages/instant/.npmignore
index a4f7810c0..563923652 100644
--- a/packages/instant/.npmignore
+++ b/packages/instant/.npmignore
@@ -2,4 +2,5 @@
 *
 */
 !lib/**/*
-!umd/**/*
\ No newline at end of file
+!umd/**/*
+.env
\ No newline at end of file
diff --git a/packages/instant/.production.discharge.json b/packages/instant/.production.discharge.json
index 4aa5337ba..947f68b1a 100644
--- a/packages/instant/.production.discharge.json
+++ b/packages/instant/.production.discharge.json
@@ -1,6 +1,6 @@
 {
     "domain": "instant.0xproject.com",
-    "build_command": "yarn build --env.discharge_target=production",
+    "build_command": "dotenv yarn build --env.discharge_target=production",
     "upload_directory": "umd",
     "index_key": "instant.js",
     "error_key": "404.html",
diff --git a/packages/instant/.staging.discharge.json b/packages/instant/.staging.discharge.json
index 56ffee4e9..bd5f28ba8 100644
--- a/packages/instant/.staging.discharge.json
+++ b/packages/instant/.staging.discharge.json
@@ -1,6 +1,6 @@
 {
     "domain": "0x-instant-staging",
-    "build_command": "WEBPACK_OUTPUT_PATH=public yarn build --env.discharge_target=staging",
+    "build_command": "dotenv WEBPACK_OUTPUT_PATH=public yarn build --env.discharge_target=staging",
     "upload_directory": "public",
     "index_key": "index.html",
     "error_key": "index.html",
diff --git a/packages/instant/README.md b/packages/instant/README.md
index 45a871124..2092b45d9 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -20,6 +20,8 @@ The package is available as a UMD module named `zeroExInstant` at https://instan
 
 ## Deploying
 
+To run any of the following commands you need to configure your `.env` file. There is an example `.env_example` file to show you what values are required.
+
 You can deploy a work-in-progress version of 0x Instant at http://0x-instant-dogfood.s3-website-us-east-1.amazonaws.com/instant.js for easy sharing.
 
 To build and deploy the bundle run
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 62904949b..7d0bf6bec 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -7,7 +7,6 @@
     "private": true,
     "description": "0x Instant React Component",
     "main": "umd/instant.js",
-    "private": true,
     "scripts": {
         "build": "webpack --mode production",
         "build:ci": "yarn build",
@@ -25,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": {
@@ -58,6 +60,7 @@
         "react-redux": "^5.0.7",
         "redux": "^4.0.0",
         "redux-devtools-extension": "^2.13.5",
+        "rollbar": "^2.5.0",
         "styled-components": "^4.0.2",
         "ts-optchain": "^0.1.1"
     },
@@ -75,6 +78,7 @@
         "@types/redux": "^3.6.0",
         "@types/styled-components": "^4.0.1",
         "awesome-typescript-loader": "^5.2.1",
+        "dotenv-cli": "^1.4.0",
         "enzyme": "^3.6.0",
         "enzyme-adapter-react-16": "^1.5.0",
         "ip": "^1.1.5",
@@ -82,7 +86,9 @@
         "make-promises-safe": "^1.1.0",
         "npm-run-all": "^4.1.2",
         "nyc": "^11.0.1",
+        "rollbar-sourcemap-webpack-plugin": "^2.4.0",
         "shx": "^0.2.2",
+        "source-map-loader": "^0.2.4",
         "svg-react-loader": "^0.4.6",
         "ts-jest": "^23.10.3",
         "tslint": "5.11.0",
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index df39994ef..d10618c58 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -175,6 +175,7 @@
                     defaultSelectedAssetData: queryParams.getQueryParamValue('defaultSelectedAssetData'),
                     affiliateInfo: affiliateInfoOverride,
                     shouldDisablePushToHistory: !!queryParams.getQueryParamValue('shouldDisablePushToHistory'),
+                    walletDisplayName: queryParams.getQueryParamValue('walletDisplayName') || undefined,
                 };
                 return renderOptionsOverrides;
             };
diff --git a/packages/instant/src/assets/icons/zrx.svg b/packages/instant/src/assets/icons/zrx.svg
index 07518f551..da623710b 100644
--- a/packages/instant/src/assets/icons/zrx.svg
+++ b/packages/instant/src/assets/icons/zrx.svg
@@ -1,3 +1,6 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6726 18.5002L22.6787 18.5063L22.625 18.5868C22.641 18.558 22.6569 18.5291 22.6726 18.5002V18.5002H22.6726ZM22.7893 18.5002L21.3866 17.0053L17.9692 12.9131L19.6779 11.0919L17.1249 7.89955L18.8337 6.07835L20.0599 4.74999C20.663 5.26419 21.2058 5.83552 21.6882 6.46394C22.1707 7.09242 22.5828 7.77444 22.9245 8.5101C23.2663 9.2457 23.5309 10.0206 23.7186 10.8347C23.9062 11.6489 24 12.4916 24 13.3628C24 14.3055 23.8928 15.216 23.6784 16.0945C23.4703 16.9468 23.174 17.7487 22.7893 18.5L22.7893 18.5002ZM6.74427 15.3604L8.87512 18.1019L7.20654 19.8795L5.94009 21.2502L5.91999 21.2288C5.3169 20.7291 4.77415 20.1651 4.29169 19.5368C3.80923 18.9086 3.39714 18.2268 3.05539 17.4915C2.71365 16.7562 2.45567 15.9816 2.28144 15.1677C2.09382 14.3539 2 13.5114 2 12.6405C2 11.6981 2.10721 10.7913 2.32164 9.92041C2.53608 9.04943 2.83091 8.24276 3.20615 7.50025L4.61334 8.99943L8.45293 13.54L6.7442 15.3605L6.74427 15.3604ZM7.89849 8.87512L6.12088 7.20654L4.75015 5.94009L4.77157 5.91999C5.27132 5.3169 5.83531 4.77415 6.46352 4.29169C7.09178 3.80923 7.77357 3.39714 8.50886 3.05539C9.2442 2.71365 10.0188 2.45567 10.8326 2.28144C11.6465 2.09382 12.489 2 13.3599 2C14.3023 2 15.209 2.10721 16.08 2.32164C16.9509 2.53608 17.7576 2.83091 18.5001 3.20615L17.0866 4.55302L12.9101 8.0307L11.0896 6.32197L7.89835 8.87496L7.89849 8.87512ZM18.1019 17.1252L19.8795 18.7938L21.2503 20.0602L21.2288 20.0803C20.7291 20.6834 20.1651 21.2262 19.5369 21.7086C18.9086 22.1911 18.2268 22.6032 17.4916 22.9449C16.7562 23.2867 15.9817 23.5447 15.1678 23.7189C14.3539 23.9065 13.5114 24.0003 12.6405 24.0003C11.6981 24.0003 10.7914 23.8931 9.92046 23.6787C9.04952 23.4643 8.2428 23.1694 7.50029 22.7942L8.91381 21.4473L13.54 17.5474L15.3606 19.6782L18.1021 17.1252L18.1019 17.1252Z" fill="white"/>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.62099 13.9044L6.3287 12.1375L4.20565 9.27256L1.50251 5.44771C0.547534 7.07749 0 8.97462 0 11C0 14.3552 1.50251 17.3593 3.8722 19.3768L7.30341 16.9518C6.13632 16.2248 5.19614 15.1662 4.62099 13.9044Z" fill="white"/>
+<path d="M8.09561 4.62099L9.86251 6.3287L12.7274 4.20565L16.5523 1.50251C14.9225 0.547534 13.0254 0 11 0C7.64475 0 4.64072 1.50251 2.62323 3.8722L5.04816 7.30341C5.77525 6.13632 6.83381 5.19614 8.09561 4.62099Z" fill="white"/>
+<path d="M15.6713 9.86251L17.7943 12.7274L20.4975 16.5523C21.4525 14.9225 22 13.0254 22 11C22 7.64475 20.4975 4.64072 18.1278 2.62323L14.6966 5.04816C15.8637 5.77525 16.8039 6.83381 17.379 8.09561L15.6713 9.86251Z" fill="white"/>
+<path d="M19.3768 18.1278L16.9518 14.6966C16.2248 15.8637 15.1662 16.8039 13.9044 17.379L12.1375 15.6713L9.27256 17.7943L5.44771 20.4975C7.07749 21.4525 8.97462 22 11 22C14.3552 22 17.3593 20.4975 19.3768 18.1278Z" fill="white"/>
 </svg>
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index eeb42d6fc..1489b94d4 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,4 +1,5 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
@@ -7,7 +8,7 @@ import { oc } from 'ts-optchain';
 
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
-import { AffiliateInfo, ZeroExInstantError } from '../types';
+import { AffiliateInfo, Asset, ZeroExInstantError } from '../types';
 import { analytics } from '../util/analytics';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
@@ -21,6 +22,7 @@ export interface BuyButtonProps {
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
+    selectedAsset?: Asset;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
@@ -36,8 +38,12 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const { buyQuote, accountAddress } = this.props;
+        const { buyQuote, accountAddress, selectedAsset } = this.props;
         const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress);
+        const buttonText =
+            !_.isUndefined(selectedAsset) && selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
+                ? `Buy ${selectedAsset.metaData.symbol.toUpperCase()}`
+                : 'Buy Now';
         return (
             <Button
                 width="100%"
@@ -45,7 +51,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
                 isDisabled={shouldDisableButton}
                 fontColor={ColorOption.white}
             >
-                Buy
+                {buttonText}
             </Button>
         );
     }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index e563bec73..833818900 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -4,7 +4,7 @@ import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
+import { AffiliateInfo, Asset, OrderProcessState, ZeroExInstantError } from '../types';
 
 import { BuyButton } from './buy_button';
 import { PlacingOrderButton } from './placing_order_button';
@@ -21,6 +21,7 @@ export interface BuyOrderStateButtonProps {
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
+    selectedAsset?: Asset;
     onViewTransaction: () => void;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
@@ -60,6 +61,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
             assetBuyer={props.assetBuyer}
             web3Wrapper={props.web3Wrapper}
             affiliateInfo={props.affiliateInfo}
+            selectedAsset={props.selectedAsset}
             onValidationPending={props.onValidationPending}
             onValidationFail={props.onValidationFail}
             onSignatureDenied={props.onSignatureDenied}
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index ff900842a..4da82eb73 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -113,7 +113,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         );
     };
     private readonly _renderChevronIcon = (): React.ReactNode => {
-        if (!this._areMultipleAssetsAvailable()) {
+        if (!this._areAnyAssetsAvailable()) {
             return null;
         }
         return (
@@ -134,14 +134,14 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         // We don't want to allow opening the token selection panel if there are no assets.
         // Since styles are inferred from the presence of a click handler, we want to return undefined
         // instead of providing a noop.
-        if (!this._areMultipleAssetsAvailable() || _.isUndefined(this.props.onSelectAssetClick)) {
+        if (!this._areAnyAssetsAvailable() || _.isUndefined(this.props.onSelectAssetClick)) {
             return undefined;
         }
         return this._handleSelectAssetClick;
     };
-    private readonly _areMultipleAssetsAvailable = (): boolean => {
+    private readonly _areAnyAssetsAvailable = (): boolean => {
         const { numberOfAssetsAvailable } = this.props;
-        return !_.isUndefined(numberOfAssetsAvailable) && numberOfAssetsAvailable > 1;
+        return !_.isUndefined(numberOfAssetsAvailable) && numberOfAssetsAvailable > 0;
     };
     private readonly _handleSelectAssetClick = (): void => {
         if (this.props.onSelectAssetClick) {
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index c23b43267..4efe5b28e 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -18,7 +18,7 @@ import { WalletPrompt } from './wallet_prompt';
 export interface PaymentMethodProps {
     account: Account;
     network: Network;
-    walletName: string;
+    walletDisplayName: string;
     onInstallWalletClick: () => void;
     onUnlockWalletClick: () => void;
 }
@@ -62,11 +62,11 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
         if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
             const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
             return (
-                <Flex>
+                <Flex align="center">
                     <Circle diameter={8} color={circleColor} />
-                    <Container marginLeft="3px">
-                        <Text fontColor={ColorOption.darkGrey} fontSize="12px">
-                            {this.props.walletName}
+                    <Container marginLeft="5px">
+                        <Text fontColor={ColorOption.darkGrey} fontSize="12px" lineHeight="30px">
+                            {this.props.walletDisplayName}
                         </Text>
                     </Container>
                 </Flex>
@@ -91,7 +91,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
                         image={<Icon width={13} icon="lock" color={ColorOption.black} />}
                         {...colors}
                     >
-                        Please Unlock {this.props.walletName}
+                        Please Unlock {this.props.walletDisplayName}
                     </WalletPrompt>
                 );
             case AccountState.None:
diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx
index 3a693b9f8..71bc18915 100644
--- a/packages/instant/src/components/search_input.tsx
+++ b/packages/instant/src/components/search_input.tsx
@@ -13,10 +13,10 @@ export interface SearchInputProps extends InputProps {
 }
 
 export const SearchInput: React.StatelessComponent<SearchInputProps> = props => (
-    <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em">
-        <Flex justify="flex-start" align="flex-end">
-            <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" />
-            <Input {...props} fontSize="14px" fontColor={props.fontColor} />
+    <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .5em">
+        <Flex justify="flex-start" align="center">
+            <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="2px 12px" />
+            <Input {...props} type="search" fontSize="16px" fontColor={props.fontColor} />
         </Flex>
     </Container>
 );
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index e7d909d92..636eb8fc9 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -77,6 +77,7 @@ export const Container =
         ${props => cssRuleIfExists(props, 'opacity')}
         ${props => cssRuleIfExists(props, 'cursor')}
         ${props => cssRuleIfExists(props, 'overflow')}
+        ${props => (props.overflow === 'scroll' ? `-webkit-overflow-scrolling: touch` : '')};
         ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
         ${props => props.display && stylesForMedia<string>('display', props.display)}
         ${props => props.width && stylesForMedia<string>('width', props.width)}
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 1ea5d8fe1..863c970ef 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -10,6 +10,7 @@ export interface InputProps {
     fontSize?: string;
     fontColor?: ColorOption;
     placeholder?: string;
+    type?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f67d6fb2f..7d311dc2f 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -33,7 +33,7 @@ export const Overlay =
 
 Overlay.defaultProps = {
     zIndex: zIndex.overlayDefault,
-    backgroundColor: generateOverlayBlack(0.6),
+    backgroundColor: generateOverlayBlack(0.9),
 };
 
 Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index a4a03bbf4..dae9124c6 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -15,6 +15,7 @@ import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource, Quote
 import { analytics, disableAnalytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
+import { setupRollbar } from '../util/error_reporter';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { Heartbeater } from '../util/heartbeater';
 import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory';
@@ -29,6 +30,7 @@ export interface ZeroExInstantProviderRequiredProps {
 
 export interface ZeroExInstantProviderOptionalProps {
     provider: Provider;
+    walletDisplayName: string;
     availableAssetDatas: string[];
     defaultAssetBuyAmount: number;
     defaultSelectedAssetData: string;
@@ -66,6 +68,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             ...defaultState,
             providerState,
             network: networkId,
+            walletDisplayName: props.walletDisplayName,
             selectedAsset: _.isUndefined(props.defaultSelectedAssetData)
                 ? undefined
                 : assetUtils.createAssetFromAssetDataOrThrow(
@@ -86,6 +89,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     }
     constructor(props: ZeroExInstantProviderProps) {
         super(props);
+        setupRollbar();
         fonts.include();
         const initialAppState = ZeroExInstantProvider._mergeDefaultStateWithProps(this.props);
         this._store = store.create(initialAppState);
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 0dd770ec6..2439c7349 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -19,9 +19,20 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const HEAP_ANALYTICS_ID = process.env.HEAP_ANALYTICS_ID;
+export const HEAP_ENABLED = process.env.HEAP_ENABLED;
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_STALL_AT_WIDTH = '95%';
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
+export const HOST_DOMAINS = [
+    '0x-instant-staging.s3-website-us-east-1.amazonaws.com',
+    '0x-instant-dogfood.s3-website-us-east-1.amazonaws.com',
+    'localhost',
+    '127.0.0.1',
+    '0.0.0.0',
+    'instant.0xproject.com',
+];
+export const ROLLBAR_CLIENT_TOKEN = process.env.ROLLBAR_CLIENT_TOKEN;
+export const ROLLBAR_ENABLED = process.env.ROLLBAR_ENABLED;
 export const INSTANT_DISCHARGE_TARGET = process.env.INSTANT_DISCHARGE_TARGET as
     | 'production'
     | 'dogfood'
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index e9327a288..bb68fdd57 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -20,6 +20,7 @@ export interface ConnectedAccountPaymentMethodProps {}
 interface ConnectedState {
     network: Network;
     providerState: ProviderState;
+    walletDisplayName?: string;
 }
 
 interface ConnectedDispatch {
@@ -34,6 +35,7 @@ type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps;
 const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
     network: state.network,
     providerState: state.providerState,
+    walletDisplayName: state.walletDisplayName,
 });
 
 const mapDispatchToProps = (
@@ -56,7 +58,7 @@ const mergeProps = (
     ...ownProps,
     network: connectedState.network,
     account: connectedState.providerState.account,
-    walletName: connectedState.providerState.name,
+    walletDisplayName: connectedState.walletDisplayName || connectedState.providerState.name,
     onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
     onInstallWalletClick: () => {
         const isMobile = envUtil.isMobileOperatingSystem();
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 0d49edc57..80943a96f 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -9,7 +9,7 @@ import { Dispatch } from 'redux';
 import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { AccountState, AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
+import { AccountState, AffiliateInfo, Asset, OrderProcessState, ZeroExInstantError } from '../types';
 import { analytics } from '../util/analytics';
 import { errorFlasher } from '../util/error_flasher';
 import { etherscanUtil } from '../util/etherscan';
@@ -22,6 +22,7 @@ interface ConnectedState {
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
+    selectedAsset?: Asset;
     onViewTransaction: () => void;
 }
 
@@ -41,6 +42,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButt
     const account = state.providerState.account;
     const accountAddress = account.state === AccountState.Ready ? account.address : undefined;
     const accountEthBalanceInWei = account.state === AccountState.Ready ? account.ethBalanceInWei : undefined;
+    const selectedAsset = state.selectedAsset;
     return {
         accountAddress,
         accountEthBalanceInWei,
@@ -49,6 +51,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButt
         web3Wrapper,
         buyQuote: state.latestBuyQuote,
         affiliateInfo: state.affiliateInfo,
+        selectedAsset,
         onViewTransaction: () => {
             if (
                 state.buyOrderState.processState === OrderProcessState.Processing ||
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index b24c9c83d..88611a8c0 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -83,14 +83,14 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
     '0xf47261b0000000000000000000000000e0b7927c4af23765cb51314a0e0521a9645f0e2a': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 9,
-        primaryColor: '#DEB564',
+        primaryColor: '#E1AA3E',
         symbol: 'dgd',
         name: 'DigixDao',
     },
     '0xf47261b00000000000000000000000004f3afec4e5a3f2a6a1a411def7d7dfe50ee057bf': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 9,
-        primaryColor: '#DEB564',
+        primaryColor: '#E1AA3E',
         symbol: 'dgx',
         name: 'Digix Gold Token',
     },
@@ -195,7 +195,7 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
     '0xf47261b000000000000000000000000089d24a6b4ccb1b6faa2625fe562bdd9a23260359': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#F2B350',
+        primaryColor: '#DEA349',
         symbol: 'dai',
         name: 'Dai Stablecoin',
     },
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 7391e2844..b92fa3a7c 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -39,6 +39,9 @@ const validateInstantRenderConfig = (config: ZeroExInstantConfig, selector: stri
     if (!_.isUndefined(config.provider)) {
         assert.isWeb3Provider('provider', config.provider);
     }
+    if (!_.isUndefined(config.walletDisplayName)) {
+        assert.isString('walletDisplayName', config.walletDisplayName);
+    }
     if (!_.isUndefined(config.shouldDisablePushToHistory)) {
         assert.isBoolean('shouldDisablePushToHistory', config.shouldDisablePushToHistory);
     }
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 9fdcea3ca..c67b222d1 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -10,6 +10,7 @@ import { assetUtils } from '../util/asset';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 import { coinbaseApi } from '../util/coinbase_api';
 import { errorFlasher } from '../util/error_flasher';
+import { errorReporter } from '../util/error_reporter';
 
 import { actions } from './actions';
 import { State } from './reducer';
@@ -23,6 +24,7 @@ export const asyncData = {
             const errorMessage = 'Error fetching ETH/USD price';
             errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
             dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
+            errorReporter.report(e);
         }
     },
     fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => {
@@ -30,13 +32,15 @@ export const asyncData = {
         const assetBuyer = providerState.assetBuyer;
         try {
             const assetDatas = await assetBuyer.getAvailableAssetDatasAsync();
-            const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
+            const deduplicatedAssetDatas = _.uniq(assetDatas);
+            const assets = assetUtils.createAssetsFromAssetDatas(deduplicatedAssetDatas, assetMetaDataMap, network);
             dispatch(actions.setAvailableAssets(assets));
         } catch (e) {
             const errorMessage = 'Could not find any assets';
             errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
             // On error, just specify that none are available
             dispatch(actions.setAvailableAssets([]));
+            errorReporter.report(e);
         }
     },
     fetchAccountInfoAndDispatchToStore: async (
@@ -77,6 +81,7 @@ export const asyncData = {
             const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address);
             dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
         } catch (e) {
+            errorReporter.report(e);
             // leave balance as is
             return;
         }
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dfc2b89f3..a9a407b7d 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -49,6 +49,7 @@ interface OptionalState {
     latestBuyQuote: BuyQuote;
     latestErrorMessage: string;
     affiliateInfo: AffiliateInfo;
+    walletDisplayName: string;
 }
 
 export type State = DefaultState & PropsDerivedState & Partial<OptionalState>;
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index e625824ef..760ec8b5c 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { INSTANT_DISCHARGE_TARGET } from '../constants';
+import { HEAP_ENABLED, INSTANT_DISCHARGE_TARGET } from '../constants';
 import {
     AffiliateInfo,
     Asset,
@@ -16,15 +16,17 @@ import {
 
 import { EventProperties, heapUtil } from './heap';
 
-let isDisabled = false;
+let isDisabledViaConfig = false;
 export const disableAnalytics = (shouldDisableAnalytics: boolean) => {
-    isDisabled = shouldDisableAnalytics;
+    isDisabledViaConfig = shouldDisableAnalytics;
 };
 export const evaluateIfEnabled = (fnCall: () => void) => {
-    if (isDisabled) {
+    if (isDisabledViaConfig) {
         return;
     }
-    fnCall();
+    if (HEAP_ENABLED) {
+        fnCall();
+    }
 };
 
 enum EventNames {
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 40560d3eb..08f3642e3 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -1,3 +1,4 @@
+import { AssetBuyerError } from '@0x/asset-buyer';
 import { AssetProxyId, ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 
@@ -106,4 +107,20 @@ export const assetUtils = {
         );
         return _.compact(erc20sOrUndefined);
     },
+    assetBuyerErrorMessage: (asset: ERC20Asset, error: Error): string | undefined => {
+        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
+            return `Not enough ${assetName} available`;
+        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
+            return 'Not enough ZRX available';
+        } else if (
+            error.message === AssetBuyerError.StandardRelayerApiError ||
+            error.message.startsWith(AssetBuyerError.AssetUnavailable)
+        ) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
+            return `${assetName} is currently unavailable`;
+        }
+
+        return undefined;
+    },
 };
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index c1899f8c1..4229f2735 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
@@ -10,6 +10,7 @@ import { AffiliateInfo, ERC20Asset, QuoteFetchOrigin } from '../types';
 import { analytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
+import { errorReporter } from '../util/error_reporter';
 
 export const buyQuoteUpdater = {
     updateBuyQuoteAsync: async (
@@ -35,30 +36,18 @@ export const buyQuoteUpdater = {
         try {
             newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
         } catch (error) {
+            const errorMessage = assetUtils.assetBuyerErrorMessage(asset, error);
+
+            if (_.isUndefined(errorMessage)) {
+                // This is an unknown error, report it to rollbar
+                errorReporter.report(error);
+            }
+
             if (options.dispatchErrors) {
                 dispatch(actions.setQuoteRequestStateFailure());
                 analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin);
-                let errorMessage;
-                if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-                    const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-                    errorMessage = `Not enough ${assetName} available`;
-                } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
-                    errorMessage = 'Not enough ZRX available';
-                } else if (
-                    error.message === AssetBuyerError.StandardRelayerApiError ||
-                    error.message.startsWith(AssetBuyerError.AssetUnavailable)
-                ) {
-                    const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-                    errorMessage = `${assetName} is currently unavailable`;
-                }
-                if (!_.isUndefined(errorMessage)) {
-                    errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-                } else {
-                    throw error;
-                }
+                errorFlasher.flashNewErrorMessage(dispatch, errorMessage || 'Error fetching price, please try again');
             }
-            // TODO: report to error reporter on else
-
             return;
         }
         // We have a successful new buy quote
diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts
new file mode 100644
index 000000000..3ec7b6daa
--- /dev/null
+++ b/packages/instant/src/util/error_reporter.ts
@@ -0,0 +1,62 @@
+import { logUtils } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { HOST_DOMAINS, INSTANT_DISCHARGE_TARGET, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants';
+
+// Import version of Rollbar designed for embedded components
+// See https://docs.rollbar.com/docs/using-rollbarjs-inside-an-embedded-component
+// tslint:disable-next-line:no-var-requires
+const Rollbar = require('rollbar/dist/rollbar.noconflict.umd');
+
+let rollbar: any;
+// Configures rollbar and sets up error catching
+export const setupRollbar = (): any => {
+    if (_.isUndefined(rollbar) && ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENABLED) {
+        rollbar = new Rollbar({
+            accessToken: ROLLBAR_CLIENT_TOKEN,
+            captureUncaught: true,
+            captureUnhandledRejections: true,
+            enabled: true,
+            itemsPerMinute: 10,
+            maxItems: 500,
+            payload: {
+                environment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
+                client: {
+                    javascript: {
+                        source_map_enabled: true,
+                        code_version: process.env.GIT_SHA,
+                        guess_uncaught_frames: true,
+                    },
+                },
+            },
+            hostWhiteList: HOST_DOMAINS,
+            uncaughtErrorLevel: 'error',
+            ignoredMessages: [
+                // Errors from the third-party scripts
+                'Script error',
+                // Network errors or ad-blockers
+                'TypeError: Failed to fetch',
+                'Exchange has not been deployed to detected network (network/artifact mismatch)',
+                // Source: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/7VU0_VvC7mE
+                "undefined is not an object (evaluating '__gCrWeb.autofill.extractForms')",
+                // Source: http://stackoverflow.com/questions/43399818/securityerror-from-facebook-and-cross-domain-messaging
+                'SecurityError (DOM Exception 18)',
+            ],
+        });
+    }
+};
+
+export const errorReporter = {
+    report(err: Error): void {
+        if (!rollbar) {
+            logUtils.log('Not reporting to rollbar because not configured', err);
+            return;
+        }
+
+        rollbar.error(err, (rollbarErr: Error) => {
+            if (rollbarErr) {
+                logUtils.log(`Error reporting to rollbar, ignoring: ${rollbarErr}`);
+            }
+        });
+    },
+};
diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index 6b15809a3..332c8d00a 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -7,6 +7,8 @@ import {
     GWEI_IN_WEI,
 } from '../constants';
 
+import { errorReporter } from './error_reporter';
+
 interface EthGasStationResult {
     average: number;
     fastestWait: number;
@@ -42,8 +44,9 @@ export class GasPriceEstimator {
         let fetchedAmount: GasInfo | undefined;
         try {
             fetchedAmount = await fetchFastAmountInWeiAsync();
-        } catch {
+        } catch (e) {
             fetchedAmount = undefined;
+            errorReporter.report(e);
         }
 
         if (fetchedAmount) {
diff --git a/packages/instant/src/util/heap.ts b/packages/instant/src/util/heap.ts
index 7c53c9918..279ff3059 100644
--- a/packages/instant/src/util/heap.ts
+++ b/packages/instant/src/util/heap.ts
@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import { HEAP_ANALYTICS_ID } from '../constants';
 
 import { AnalyticsEventOptions, AnalyticsUserOptions } from './analytics';
+import { errorReporter } from './error_reporter';
 
 export type EventProperties = ObjectMap<string | number>;
 
@@ -107,8 +108,8 @@ export const heapUtil = {
                 heapFunctionCall(curHeap);
             } catch (e) {
                 // We never want analytics to crash our React component
-                // TODO(sk): error reporter here
                 logUtils.log('Analytics error', e);
+                errorReporter.report(e);
             }
         }
     },
diff --git a/packages/instant/test/util/asset.test.ts b/packages/instant/test/util/asset.test.ts
index 4229b24ed..fc4e4e2e4 100644
--- a/packages/instant/test/util/asset.test.ts
+++ b/packages/instant/test/util/asset.test.ts
@@ -1,6 +1,7 @@
+import { AssetBuyerError } from '@0x/asset-buyer';
 import { AssetProxyId, ObjectMap } from '@0x/types';
 
-import { Asset, AssetMetaData, ERC20AssetMetaData, Network, ZeroExInstantError } from '../../src/types';
+import { Asset, AssetMetaData, ERC20Asset, ERC20AssetMetaData, Network, ZeroExInstantError } from '../../src/types';
 import { assetUtils } from '../../src/util/asset';
 
 const ZRX_ASSET_DATA = '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498';
@@ -11,7 +12,7 @@ const ZRX_META_DATA: ERC20AssetMetaData = {
     decimals: 18,
     name: '0x',
 };
-const ZRX_ASSET: Asset = {
+const ZRX_ASSET: ERC20Asset = {
     assetData: ZRX_ASSET_DATA,
     metaData: ZRX_META_DATA,
 };
@@ -45,4 +46,32 @@ describe('assetDataUtil', () => {
             ).toThrowError(ZeroExInstantError.AssetMetaDataNotAvailable);
         });
     });
+    describe('assetBuyerErrorMessage', () => {
+        it('should return message for InsufficientAssetLiquidity', () => {
+            const insufficientAssetError = new Error(AssetBuyerError.InsufficientAssetLiquidity);
+            expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, insufficientAssetError)).toEqual(
+                'Not enough ZRX available',
+            );
+        });
+        it('should return message for InsufficientAssetLiquidity', () => {
+            const insufficientZrxError = new Error(AssetBuyerError.InsufficientZrxLiquidity);
+            expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, insufficientZrxError)).toEqual(
+                'Not enough ZRX available',
+            );
+        });
+        it('should message for StandardRelayerApiError', () => {
+            const standardRelayerError = new Error(AssetBuyerError.StandardRelayerApiError);
+            expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, standardRelayerError)).toEqual(
+                'ZRX is currently unavailable',
+            );
+        });
+        it('should return error for AssetUnavailable error', () => {
+            const assetUnavailableError = new Error(
+                `${AssetBuyerError.AssetUnavailable}: For assetData ${ZRX_ASSET_DATA}`,
+            );
+            expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, assetUnavailableError)).toEqual(
+                'ZRX is currently unavailable',
+            );
+        });
+    });
 });
diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js
index 803240e76..e74cf36d9 100644
--- a/packages/instant/webpack.config.js
+++ b/packages/instant/webpack.config.js
@@ -1,10 +1,16 @@
 const childProcess = require('child_process');
 const ip = require('ip');
 const path = require('path');
+const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin');
 const webpack = require('webpack');
 
+const GIT_SHA = childProcess
+    .execSync('git rev-parse HEAD')
+    .toString()
+    .trim();
+
 const DISCHARGE_TARGETS_THAT_REQUIRED_HEAP = ['production', 'staging', 'dogfood'];
-const getConfigForDischargeTarget = dischargeTarget => {
+const getHeapConfigForDischargeTarget = dischargeTarget => {
     return {
         heapAnalyticsIdEnvName:
             dischargeTarget === 'production'
@@ -14,24 +20,80 @@ const getConfigForDischargeTarget = dischargeTarget => {
     };
 };
 
-const GIT_SHA = childProcess
-    .execSync('git rev-parse HEAD')
-    .toString()
-    .trim();
-const generateConfig = (dischargeTarget, configOptions) => {
+const DISCHARGE_TARGETS_THAT_REQUIRE_ROLLBAR = ['production', 'staging', 'dogfood'];
+const getRollbarConfigForDischargeTarget = dischargeTarget => {
+    if (DISCHARGE_TARGETS_THAT_REQUIRE_ROLLBAR.includes(dischargeTarget)) {
+        const rollbarSourceMapPublicPath =
+            dischargeTarget === 'production'
+                ? 'https://instant.0xproject.com'
+                : `http://0x-instant-${dischargeTarget}.s3-website-us-east-1.amazonaws.com`;
+
+        return {
+            rollbarSourceMapPublicPath,
+            rollbarRequired: true,
+        };
+    }
+
+    return {
+        rollbarRequired: false,
+    };
+};
+
+const ROLLBAR_CLIENT_TOKEN_ENV_VAR_NAME = 'INSTANT_ROLLBAR_CLIENT_TOKEN';
+const ROLLBAR_PUBLISH_TOKEN_ENV_VAR_NAME = 'INSTANT_ROLLBAR_PUBLISH_TOKEN';
+const getRollbarTokens = (dischargeTarget, rollbarRequired) => {
+    const clientToken = process.env[ROLLBAR_CLIENT_TOKEN_ENV_VAR_NAME];
+    const publishToken = process.env[ROLLBAR_PUBLISH_TOKEN_ENV_VAR_NAME];
+
+    if (rollbarRequired) {
+        if (!clientToken) {
+            throw new Error(
+                `Rollbar client token required for ${dischargeTarget}, please set env var ${ROLLBAR_CLIENT_TOKEN_ENV_VAR_NAME}`,
+            );
+        }
+        if (!publishToken) {
+            throw new Error(
+                `Rollbar publish token required for ${dischargeTarget}, please set env var ${ROLLBAR_PUBLISH_TOKEN_ENV_VAR_NAME}`,
+            );
+        }
+    }
+
+    return { clientToken, publishToken };
+};
+
+const generateConfig = (dischargeTarget, heapConfigOptions, rollbarConfigOptions, nodeEnv) => {
     const outputPath = process.env.WEBPACK_OUTPUT_PATH || 'umd';
 
-    const { heapAnalyticsIdEnvName, heapAnalyticsIdRequired } = configOptions;
+    const { heapAnalyticsIdEnvName, heapAnalyticsIdRequired } = heapConfigOptions;
     const heapAnalyticsId = process.env[heapAnalyticsIdEnvName];
     if (heapAnalyticsIdRequired && !heapAnalyticsId) {
         throw new Error(
             `Must define heap analytics id in ENV var ${heapAnalyticsIdEnvName} when building for ${dischargeTarget}`,
         );
     }
+    const heapEnabled = heapAnalyticsId && (nodeEnv !== 'development' || process.env.INSTANT_HEAP_FORCE_DEVELOPMENT);
+
+    const rollbarTokens = getRollbarTokens(dischargeTarget, rollbarConfigOptions.rollbarRequired);
+    const rollbarEnabled =
+        rollbarTokens.clientToken && (nodeEnv !== 'development' || process.env.INSTANT_ROLLBAR_FORCE_DEVELOPMENT);
+
+    let rollbarPlugin;
+    if (rollbarConfigOptions.rollbarRequired) {
+        if (!rollbarEnabled || !rollbarTokens.publishToken || !rollbarConfigOptions.rollbarSourceMapPublicPath) {
+            throw new Error(`Rollbar required for ${dischargeTarget} but not configured`);
+        }
+        rollbarPlugin = new RollbarSourceMapPlugin({
+            accessToken: rollbarTokens.publishToken,
+            version: GIT_SHA,
+            publicPath: rollbarConfigOptions.rollbarSourceMapPublicPath,
+        });
+    }
 
     const envVars = {
         GIT_SHA: JSON.stringify(GIT_SHA),
         NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version),
+        ROLLBAR_ENABLED: rollbarEnabled,
+        HEAP_ENABLED: heapEnabled
     };
     if (dischargeTarget) {
         envVars.INSTANT_DISCHARGE_TARGET = JSON.stringify(dischargeTarget);
@@ -39,6 +101,18 @@ const generateConfig = (dischargeTarget, configOptions) => {
     if (heapAnalyticsId) {
         envVars.HEAP_ANALYTICS_ID = JSON.stringify(heapAnalyticsId);
     }
+    if (rollbarTokens.clientToken) {
+        envVars.ROLLBAR_CLIENT_TOKEN = JSON.stringify(rollbarTokens.clientToken);
+    }
+
+    const plugins = [
+        new webpack.DefinePlugin({
+            'process.env': envVars,
+        }),
+    ];
+    if (rollbarPlugin) {
+        plugins.push(rollbarPlugin);
+    }
 
     const config = {
         entry: {
@@ -50,11 +124,7 @@ const generateConfig = (dischargeTarget, configOptions) => {
             library: 'zeroExInstant',
             libraryTarget: 'umd',
         },
-        plugins: [
-            new webpack.DefinePlugin({
-                'process.env': envVars,
-            }),
-        ],
+        plugins,
         devtool: 'source-map',
         resolve: {
             extensions: ['.js', '.json', '.ts', '.tsx'],
@@ -69,6 +139,15 @@ const generateConfig = (dischargeTarget, configOptions) => {
                     test: /\.svg$/,
                     loader: 'svg-react-loader',
                 },
+                {
+                    test: /\.js$/,
+                    loader: 'source-map-loader',
+                    exclude: [
+                        // instead of /\/node_modules\//
+                        path.join(process.cwd(), 'node_modules'),
+                        path.join(process.cwd(), '../..', 'node_modules'),
+                    ],
+                },
             ],
         },
         devServer: {
@@ -89,8 +168,9 @@ const generateConfig = (dischargeTarget, configOptions) => {
     return config;
 };
 
-module.exports = (env, _argv) => {
+module.exports = (env, argv) => {
     const dischargeTarget = env ? env.discharge_target : undefined;
-    const configOptions = getConfigForDischargeTarget(dischargeTarget);
-    return generateConfig(dischargeTarget, configOptions);
+    const heapConfigOptions = getHeapConfigForDischargeTarget(dischargeTarget);
+    const rollbarConfigOptions = getRollbarConfigForDischargeTarget(dischargeTarget);
+    return generateConfig(dischargeTarget, heapConfigOptions, rollbarConfigOptions, argv.mode);
 };