Merge branch 'development' into launchKitLanding

* development: (110 commits) fix: fix exceeds block gas limit error chore(instant): fix lint error fix: remove unused vars Send in affiliate info as option Have heartbeat update not trigger errors fix: remove redundant handler feat: make onUnlockWalletClick different based on ON chore: remove wallet panel content for mobile feat: use blue for wallet prompt on mobile feat: use stable version of bowser fix: add http to external url string feat: make onUnlockWalletClick different based on ON chore: remove wallet panel content for mobile feat: use blue for wallet prompt on mobile feat: use stable version of bowser feat: expose webpack-dev-server content to local network fix(website): remove node env definition from webpack fix(website): currentProvider called on undefined chore: update yarn lock feat: use capital values for enums ...
author: Fabio Berger <me@fabioberger.com> 2018-11-16 21:52:20 +0800
committer: Fabio Berger <me@fabioberger.com> 2018-11-16 21:52:20 +0800
commit: 25d0b1e6e58987d0f00a5034158c2c514cf476d6 (patch)
tree: 412ef07e713fd928b856aca2fc603e182adcd1d3 /packages/instant/src
parent: e36fc4e6aef414c5d3507c59d82e03e92fbc93fb (diff)
parent: cabb7432b9a6d4a5bb8da6fc7fe4522d24e4ece5 (diff)
download: dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar
dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.gz
dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.bz2
dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.lz
dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.xz
dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.zst
dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.zip
52 files changed, 1118 insertions, 251 deletions
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 9adb1c674..5992bcba7 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { OptionallyScreenSpecific } from '../../style/media';
+import { SlideAnimationState } from '../../types';
 
 import { PositionAnimation, PositionAnimationSettings } from './position_animation';
 
-export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
     animationState: SlideAnimationState;
     slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 877ab275c..8b6121e43 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -43,7 +43,6 @@ export class BuyButton extends React.Component<BuyButtonProps> {
                 onClick={this._handleClick}
                 isDisabled={shouldDisableButton}
                 fontColor={ColorOption.white}
-                fontSize="20px"
             >
                 Buy
             </Button>
diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
index bc7319423..6568de91b 100644
--- a/packages/instant/src/components/buy_order_progress.tsx
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -12,7 +12,6 @@ export interface BuyOrderProgressProps {
 
 export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> = props => {
     const { buyOrderState } = props;
-
     if (
         buyOrderState.processState === OrderProcessState.Processing ||
         buyOrderState.processState === OrderProcessState.Success ||
@@ -30,6 +29,5 @@ export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> =
             </Container>
         );
     }
-
     return null;
 };
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 6041bf4f5..e563bec73 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -35,7 +35,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
     if (props.buyOrderProcessingState === OrderProcessState.Failure) {
         return (
             <Flex justify="space-between">
-                <Button width="48%" onClick={props.onRetry} fontColor={ColorOption.white} fontSize="16px">
+                <Button width="48%" onClick={props.onRetry} fontColor={ColorOption.white}>
                     Back
                 </Button>
                 <SecondaryButton width="48%" onClick={props.onViewTransaction}>
diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx
new file mode 100644
index 000000000..845b96d73
--- /dev/null
+++ b/packages/instant/src/components/coinbase_wallet_logo.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export interface CoinbaseWalletLogoProps {
+    width?: number;
+}
+
+export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width }) => (
+    <svg width={width} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="25.5" cy="25.5" r="25.5" fill="#3263E9" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M25.5 41C34.0604 41 41 34.0604 41 25.5C41 16.9396 34.0604 10 25.5 10C16.9396 10 10 16.9396 10 25.5C10 34.0604 16.9396 41 25.5 41ZM21.5108 20.5107C20.9586 20.5107 20.5108 20.9584 20.5108 21.5107V29.6223C20.5108 30.1746 20.9586 30.6223 21.5108 30.6223H29.6224C30.1747 30.6223 30.6224 30.1746 30.6224 29.6223V21.5107C30.6224 20.9584 30.1747 20.5107 29.6224 20.5107H21.5108Z"
+            fill="white"
+        />
+    </svg>
+);
+
+CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
+
+CoinbaseWalletLogo.defaultProps = {
+    width: 164,
+};
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 3503ff31a..e4d8749a9 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -29,13 +29,19 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
         const { tokens, onTokenSelect } = this.props;
         return (
             <Container height="100%">
+                <Container marginBottom="10px">
+                    <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px">
+                        Select Token
+                    </Text>
+                </Container>
                 <SearchInput
                     placeholder="Search tokens..."
                     width="100%"
                     value={this.state.searchQuery}
                     onChange={this._handleSearchInputChange}
+                    tabIndex={-1}
                 />
-                <Container overflow="scroll" height="calc(100% - 80px)" marginTop="10px">
+                <Container overflow="scroll" height="calc(100% - 90px)" marginTop="10px">
                     {_.map(tokens, token => {
                         if (!this._isTokenQueryMatch(token)) {
                             return null;
@@ -57,8 +63,10 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
         if (_.isUndefined(searchQuery)) {
             return true;
         }
-        const stringToSearch = `${token.metaData.name} ${token.metaData.symbol}`;
-        return _.includes(stringToSearch.toLowerCase(), searchQuery.toLowerCase());
+        const searchQueryLowerCase = searchQuery.toLowerCase();
+        const tokenName = token.metaData.name.toLowerCase();
+        const tokenSymbol = token.metaData.symbol.toLowerCase();
+        return _.startsWith(tokenSymbol, searchQueryLowerCase) || _.startsWith(tokenName, searchQueryLowerCase);
     };
 }
 
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
new file mode 100644
index 000000000..88c26f59c
--- /dev/null
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import {
+    META_MASK_CHROME_STORE_URL,
+    META_MASK_FIREFOX_STORE_URL,
+    META_MASK_OPERA_STORE_URL,
+    META_MASK_SITE_URL,
+} from '../constants';
+import { ColorOption } from '../style/theme';
+import { Browser } from '../types';
+import { envUtil } from '../util/env';
+
+import { MetaMaskLogo } from './meta_mask_logo';
+import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content';
+import { Button } from './ui/button';
+
+export interface InstallWalletPanelContentProps {}
+
+export class InstallWalletPanelContent extends React.Component<InstallWalletPanelContentProps> {
+    public render(): React.ReactNode {
+        const panelProps = this._getStandardPanelContentProps();
+        return <StandardPanelContent {...panelProps} />;
+    }
+    private readonly _getStandardPanelContentProps = (): StandardPanelContentProps => {
+        const browser = envUtil.getBrowser();
+        let description = 'Please install the MetaMask wallet browser extension.';
+        let actionText = 'Learn More';
+        let actionUrl = META_MASK_SITE_URL;
+        switch (browser) {
+            case Browser.Chrome:
+                description = 'Please install the MetaMask wallet browser extension from the Chrome Store.';
+                actionText = 'Get Chrome Extension';
+                actionUrl = META_MASK_CHROME_STORE_URL;
+                break;
+            case Browser.Firefox:
+                description = 'Please install the MetaMask wallet browser extension from the Firefox Store.';
+                actionText = 'Get Firefox Extension';
+                actionUrl = META_MASK_FIREFOX_STORE_URL;
+                break;
+            case Browser.Opera:
+                description = 'Please install the MetaMask wallet browser extension from the Opera Store.';
+                actionText = 'Get Opera Add-on';
+                actionUrl = META_MASK_OPERA_STORE_URL;
+                break;
+            default:
+                break;
+        }
+        return {
+            image: <MetaMaskLogo width={85} height={80} />,
+            title: 'Install MetaMask',
+            description,
+            moreInfoSettings: {
+                href: META_MASK_SITE_URL,
+                text: 'What is MetaMask?',
+            },
+            action: (
+                <Button
+                    href={actionUrl}
+                    width="100%"
+                    fontColor={ColorOption.white}
+                    backgroundColor={ColorOption.darkOrange}
+                >
+                    {actionText}
+                </Button>
+            ),
+        };
+    };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index b07776b2c..002695269 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -15,8 +15,8 @@ import { Spinner } from './ui/spinner';
 import { Text } from './ui/text';
 
 export interface InstantHeadingProps {
-    selectedAssetAmount?: BigNumber;
-    totalEthBaseAmount?: BigNumber;
+    selectedAssetUnitAmount?: BigNumber;
+    totalEthBaseUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
@@ -32,12 +32,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
         const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
         return (
-            <Container
-                backgroundColor={ColorOption.primaryColor}
-                padding="20px"
-                width="100%"
-                borderRadius="3px 3px 0px 0px"
-            >
+            <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
                 <Container marginBottom="5px">
                     <Text
                         letterSpacing="1px"
@@ -104,7 +99,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         if (this.props.quoteRequestState === AsyncProcessState.Pending) {
             return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
-        if (_.isUndefined(this.props.selectedAssetAmount)) {
+        if (_.isUndefined(this.props.selectedAssetUnitAmount)) {
             return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />;
         }
         return amountFunction();
@@ -113,8 +108,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private readonly _renderEthAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                {format.ethBaseAmount(
-                    this.props.totalEthBaseAmount,
+                {format.ethBaseUnitAmount(
+                    this.props.totalEthBaseUnitAmount,
                     4,
                     <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
                 )}
@@ -125,8 +120,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private readonly _renderDollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
-                {format.ethBaseAmountInUsd(
-                    this.props.totalEthBaseAmount,
+                {format.ethBaseUnitAmountInUsd(
+                    this.props.totalEthBaseUnitAmount,
                     this.props.ethUsdPrice,
                     2,
                     <AmountPlaceholder isPulsating={false} color={ColorOption.white} />,
diff --git a/packages/instant/src/components/meta_mask_logo.tsx b/packages/instant/src/components/meta_mask_logo.tsx
new file mode 100644
index 000000000..bfbc67270
--- /dev/null
+++ b/packages/instant/src/components/meta_mask_logo.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+export interface MetaMaskLogoProps {
+    width?: number;
+    height?: number;
+}
+
+export const MetaMaskLogo: React.StatelessComponent<MetaMaskLogoProps> = ({ width, height }) => (
+    <svg width={width} height={height} viewBox="0 0 85 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M80.578 0L47.7107 24.8648L53.542 10.2702L80.578 0Z" fill="#E2761B" />
+        <path d="M4.24075 0L37.1081 25.4053L31.2768 10.2702L4.24075 0Z" fill="#E4761B" />
+        <path d="M68.9152 57.8379L59.9032 71.8919L78.9874 77.2973L84.2886 58.3785L68.9152 57.8379Z" fill="#E4761B" />
+        <path d="M0.53006 58.3785L5.83124 77.2973L24.9155 71.8919L15.9035 57.8379L0.53006 58.3785Z" fill="#E4761B" />
+        <path d="M23.8552 34.5941L18.554 42.7022L37.1082 43.7833L36.5781 23.2428L23.8552 34.5941Z" fill="#E4761B" />
+        <path d="M60.9635 34.5941L47.7106 23.2428V43.7833L66.2647 42.7022L60.9635 34.5941Z" fill="#E4761B" />
+        <path d="M24.9156 71.8914L36.0481 66.4861L26.5059 58.378L24.9156 71.8914Z" fill="#E4761B" />
+        <path d="M48.7709 66.4861L59.9034 71.8914L58.313 58.378L48.7709 66.4861Z" fill="#E4761B" />
+        <path d="M59.9034 71.8919L48.7709 66.4865L49.301 73.5135V76.7567L59.9034 71.8919Z" fill="#D7C1B3" />
+        <path d="M24.9157 71.892L35.518 76.7568V73.5136L36.0482 66.4866L24.9157 71.892Z" fill="#D7C1B3" />
+        <path d="M35.5179 53.5138L25.9758 50.8111L32.8673 47.5678L35.5179 53.5138Z" fill="#233447" />
+        <path d="M49.3009 53.5138L51.9515 47.5678L58.843 50.8111L49.3009 53.5138Z" fill="#233447" />
+        <path d="M24.9155 71.892L26.5059 57.838L15.9035 58.3785L24.9155 71.892Z" fill="#CD6116" />
+        <path d="M58.313 57.838L59.9034 71.892L68.9154 58.3785L58.313 57.838Z" fill="#CD6116" />
+        <path
+            d="M66.2648 42.7025L47.7106 43.7836L49.301 53.5132L51.9516 47.5673L58.8431 50.8106L66.2648 42.7025Z"
+            fill="#CD6116"
+        />
+        <path
+            d="M25.9758 50.8106L32.8673 47.5673L35.5179 53.5132L37.1083 43.7836L18.5541 42.7025L25.9758 50.8106Z"
+            fill="#CD6116"
+        />
+        <path d="M18.5541 42.7024L26.5059 58.378L25.9758 50.8105L18.5541 42.7024Z" fill="#E4751F" />
+        <path d="M58.8431 50.8106L58.313 58.3781L66.2647 42.7025L58.8431 50.8106Z" fill="#E4751F" />
+        <path d="M37.1083 43.7838L35.518 53.5135L37.6384 65.4053L38.1686 49.7297L37.1083 43.7838Z" fill="#E4751F" />
+        <path d="M47.7105 43.7838L46.6503 49.7297L47.1804 65.4053L49.3009 53.5135L47.7105 43.7838Z" fill="#E4751F" />
+        <path
+            d="M49.301 53.5134L47.1805 65.4052L48.7709 66.4863L58.313 58.3782L58.8431 50.8107L49.301 53.5134Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M25.9758 50.8107L26.5059 58.3782L36.048 66.4863L37.6384 65.4052L35.5179 53.5134L25.9758 50.8107Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M49.3011 76.7568V73.5135L48.771 72.973H36.0482L35.518 73.5135V76.7568L24.9157 71.8919L28.6265 75.1351L36.0482 80H48.771L56.1927 75.1351L59.9035 71.8919L49.3011 76.7568Z"
+            fill="#C0AD9E"
+        />
+        <path
+            d="M48.771 66.486L47.1806 65.405H37.6385L36.0482 66.486L35.518 73.513L36.0482 72.9725H48.771L49.3011 73.513L48.771 66.486Z"
+            fill="#161616"
+        />
+        <path
+            d="M82.1685 26.4864L84.8191 12.9729L80.5781 0L48.771 24.3242L60.9637 34.5945L78.4576 39.9998L82.1685 35.6755L80.5781 34.0539L83.2287 31.8918L81.1082 30.2702L83.7588 28.108L82.1685 26.4864Z"
+            fill="#763D16"
+        />
+        <path
+            d="M0 12.9729L2.65059 26.4864L1.06024 28.108L3.71083 30.2702L1.59036 31.8918L4.24095 34.0539L2.65059 35.6755L6.36142 39.9998L23.8553 34.5945L36.0481 24.3242L4.24095 0L0 12.9729Z"
+            fill="#763D16"
+        />
+        <path
+            d="M78.4575 39.9993L60.9636 34.5939L66.2648 42.702L58.313 58.3776H68.9154H84.2888L78.4575 39.9993Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M23.8554 34.5939L6.36147 39.9993L0.530167 58.3776H15.9036H26.506L18.5542 42.702L23.8554 34.5939Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M47.7106 43.7833L48.7709 24.3239L53.5419 10.2699H31.2769L36.048 24.3239L37.1083 43.7833L37.6384 49.7292V65.4048H47.1805V49.7292L47.7106 43.7833Z"
+            fill="#F6851B"
+        />
+    </svg>
+);
+
+MetaMaskLogo.displayName = 'MetaMaskLogo';
+
+MetaMaskLogo.defaultProps = {
+    width: 85,
+    height: 80,
+};
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 9abd7137e..5fc956e1c 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { oc } from 'ts-optchain';
 
+import { BIG_NUMBER_ZERO } from '../constants';
 import { ColorOption } from '../style/theme';
 import { format } from '../util/format';
 
@@ -15,16 +16,23 @@ import { Text } from './ui/text';
 
 export interface OrderDetailsProps {
     buyQuoteInfo?: BuyQuoteInfo;
+    selectedAssetUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     isLoading: boolean;
 }
 export class OrderDetails extends React.Component<OrderDetailsProps> {
     public render(): React.ReactNode {
-        const { buyQuoteInfo, ethUsdPrice } = this.props;
+        const { buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
         const buyQuoteAccessor = oc(buyQuoteInfo);
-        const ethAssetPrice = buyQuoteAccessor.ethPerAssetPrice();
-        const ethTokenFee = buyQuoteAccessor.feeEthAmount();
-        const totalEthAmount = buyQuoteAccessor.totalEthAmount();
+        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;
         return (
             <Container padding="20px" width="100%" flexGrow={1}>
                 <Container marginBottom="10px">
@@ -40,20 +48,19 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
                 </Container>
                 <EthAmountRow
                     rowLabel="Token Price"
-                    ethAmount={ethAssetPrice}
+                    ethAmount={pricePerTokenEth}
                     ethUsdPrice={ethUsdPrice}
-                    isEthAmountInBaseUnits={false}
                     isLoading={this.props.isLoading}
                 />
                 <EthAmountRow
                     rowLabel="Fee"
-                    ethAmount={ethTokenFee}
+                    ethAmount={feeEthBaseUnitAmount}
                     ethUsdPrice={ethUsdPrice}
                     isLoading={this.props.isLoading}
                 />
                 <EthAmountRow
                     rowLabel="Total Cost"
-                    ethAmount={totalEthAmount}
+                    ethAmount={totalEthBaseUnitAmount}
                     ethUsdPrice={ethUsdPrice}
                     shouldEmphasize={true}
                     isLoading={this.props.isLoading}
@@ -81,7 +88,7 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
         const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props;
 
         const fontWeight = shouldEmphasize ? 700 : 400;
-        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
+        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseUnitAmount : format.ethUnitAmount;
         return (
             <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
                 <Flex justify="space-between">
@@ -105,7 +112,9 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
         );
     }
     private _renderUsdSection(): React.ReactNode {
-        const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+        const usdFormatter = this.props.isEthAmountInBaseUnits
+            ? format.ethBaseUnitAmountInUsd
+            : format.ethUnitAmountInUsd;
         const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount);
         return shouldHideUsdPriceSection ? null : (
             <Container marginRight="3px" display="inline-block">
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 8c0b47d72..ebcd62f35 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -1,45 +1,114 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { Network } from '../types';
+import { Account, AccountState, Network } from '../types';
+import { envUtil } from '../util/env';
 
+import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
+import { MetaMaskLogo } from './meta_mask_logo';
 import { PaymentMethodDropdown } from './payment_method_dropdown';
 import { Circle } from './ui/circle';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
 import { Text } from './ui/text';
+import { WalletPrompt } from './wallet_prompt';
 
-export interface PaymentMethodProps {}
+export interface PaymentMethodProps {
+    account: Account;
+    network: Network;
+    walletName: string;
+    onInstallWalletClick: () => void;
+    onUnlockWalletClick: () => void;
+}
 
-export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = () => (
-    <Container padding="20px" width="100%">
-        <Container marginBottom="10px">
-            <Flex justify="space-between">
-                <Text
-                    letterSpacing="1px"
-                    fontColor={ColorOption.primaryColor}
-                    fontWeight={600}
-                    textTransform="uppercase"
-                    fontSize="14px"
-                >
-                    Payment Method
-                </Text>
+export class PaymentMethod extends React.Component<PaymentMethodProps> {
+    public render(): React.ReactNode {
+        return (
+            <Container padding="20px" width="100%">
+                <Container marginBottom="12px">
+                    <Flex justify="space-between">
+                        <Text
+                            letterSpacing="1px"
+                            fontColor={ColorOption.primaryColor}
+                            fontWeight={600}
+                            textTransform="uppercase"
+                            fontSize="14px"
+                        >
+                            {this._renderTitleText()}
+                        </Text>
+                        {this._renderTitleLabel()}
+                    </Flex>
+                </Container>
+                {this._renderMainContent()}
+            </Container>
+        );
+    }
+    private readonly _renderTitleText = (): string => {
+        const { account } = this.props;
+        switch (account.state) {
+            case AccountState.Loading:
+                return 'loading...';
+            case AccountState.Locked:
+            case AccountState.None:
+                return 'connect your wallet';
+            case AccountState.Ready:
+                return 'payment method';
+        }
+    };
+    private readonly _renderTitleLabel = (): React.ReactNode => {
+        const { account } = this.props;
+        if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
+            const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
+            return (
                 <Flex>
-                    <Circle color={ColorOption.green} diameter={8} />
+                    <Circle diameter={8} color={circleColor} />
                     <Container marginLeft="3px">
                         <Text fontColor={ColorOption.darkGrey} fontSize="12px">
-                            MetaMask
+                            {this.props.walletName}
                         </Text>
                     </Container>
                 </Flex>
-            </Flex>
-        </Container>
-        <PaymentMethodDropdown
-            accountAddress="0xa1b2c3d4e5f6g7h8j9k10"
-            accountEthBalanceInWei={new BigNumber(10500000000000000000)}
-            network={Network.Mainnet}
-        />
-    </Container>
-);
+            );
+        }
+        return null;
+    };
+    private readonly _renderMainContent = (): React.ReactNode => {
+        const { account, network } = this.props;
+        const isMobile = envUtil.isMobileOperatingSystem();
+        const logo = isMobile ? <CoinbaseWalletLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
+        const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange;
+        const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange;
+        const colors = { primaryColor, secondaryColor };
+        switch (account.state) {
+            case AccountState.Loading:
+                // Just take up the same amount of space as the other states.
+                return <Container height="52px" />;
+            case AccountState.Locked:
+                return (
+                    <WalletPrompt
+                        onClick={this.props.onUnlockWalletClick}
+                        image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+                        {...colors}
+                    >
+                        Please Unlock {this.props.walletName}
+                    </WalletPrompt>
+                );
+            case AccountState.None:
+                return (
+                    <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}>
+                        {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
+                    </WalletPrompt>
+                );
+            case AccountState.Ready:
+                return (
+                    <PaymentMethodDropdown
+                        accountAddress={account.address}
+                        accountEthBalanceInWei={account.ethBalanceInWei}
+                        network={network}
+                    />
+                );
+        }
+    };
+}
diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx
index bdce2a49d..b330dbcd6 100644
--- a/packages/instant/src/components/payment_method_dropdown.tsx
+++ b/packages/instant/src/components/payment_method_dropdown.tsx
@@ -3,6 +3,7 @@ import copy from 'copy-to-clipboard';
 import * as React from 'react';
 
 import { Network } from '../types';
+import { envUtil } from '../util/env';
 import { etherscanUtil } from '../util/etherscan';
 import { format } from '../util/format';
 
@@ -18,10 +19,13 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
     public render(): React.ReactNode {
         const { accountAddress, accountEthBalanceInWei } = this.props;
         const value = format.ethAddress(accountAddress);
-        const label = format.ethBaseAmount(accountEthBalanceInWei, 4, '') as string;
+        const label = format.ethBaseUnitAmount(accountEthBalanceInWei, 4, '') as string;
         return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
     }
     private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {
+        if (envUtil.isMobileOperatingSystem()) {
+            return [];
+        }
         const viewOnEtherscan = {
             text: 'View on Etherscan',
             onClick: this._handleEtherscanClick,
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index d774d7d27..2516b90b1 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -7,9 +7,9 @@ import { Container } from './ui/container';
 import { Spinner } from './ui/spinner';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
-    <Button isDisabled={true} width="100%" fontColor={ColorOption.white} fontSize="20px">
+    <Button isDisabled={true} width="100%" fontColor={ColorOption.white}>
         <Container display="inline-block" position="relative" top="3px" marginRight="8px">
-            <Spinner widthPx={20} heightPx={20} />
+            <Spinner widthPx={16} heightPx={16} />
         </Container>
         Placing Order&hellip;
     </Button>
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 1abadb78b..e1599a316 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -156,8 +156,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                     return `${width}px`;
                 }
                 return `${textLengthThreshold}ch`;
-            default:
-                return '1ch';
         }
     };
     private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index df0539606..705390e28 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -15,8 +15,6 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
             borderColor={ColorOption.lightGrey}
             width={props.width}
             onClick={props.onClick}
-            fontColor={ColorOption.primaryColor}
-            fontSize="16px"
             {...buttonProps}
         >
             {props.children}
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index a8d4e391c..b59e2a905 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -3,9 +3,10 @@ import * as React from 'react';
 import { ScreenSpecification } from '../style/media';
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
+import { SlideAnimationState } from '../types';
 
 import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { SlideAnimation } from './animations/slide_animation';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 9d16f9560..7f9037049 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -2,35 +2,25 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
+import { SlideAnimationState } from '../types';
 
 import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { SlideAnimation } from './animations/slide_animation';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Icon } from './ui/icon';
-import { Text } from './ui/text';
 
 export interface PanelProps {
-    title?: string;
     onClose?: () => void;
 }
 
-export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, onClose }) => (
+export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
     <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel} padding="20px">
-        <Flex justify="space-between">
-            {title && (
-                <Container marginTop="3px">
-                    <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px">
-                        {title}
-                    </Text>
-                </Container>
-            )}
-            <Container position="relative" bottom="7px">
-                <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
-            </Container>
+        <Flex justify="flex-end">
+            <Icon padding="5px" width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
         </Flex>
-        <Container marginTop="10px" height="100%">
+        <Container position="relative" top="-10px" height="100%">
             {children}
         </Container>
     </Container>
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
new file mode 100644
index 000000000..582b3318e
--- /dev/null
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+export interface MoreInfoSettings {
+    text: string;
+    href: string;
+}
+
+export interface StandardPanelContentProps {
+    image: React.ReactNode;
+    title?: string;
+    description: string;
+    moreInfoSettings?: MoreInfoSettings;
+    action: React.ReactNode;
+}
+
+const SPACING_BETWEEN_PX = '20px';
+
+export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({
+    image,
+    title,
+    description,
+    moreInfoSettings,
+    action,
+}) => (
+    <Container height="100%">
+        <Flex direction="column" height="calc(100% - 58px)">
+            <Container marginBottom={SPACING_BETWEEN_PX}>{image}</Container>
+            {title && (
+                <Container marginBottom={SPACING_BETWEEN_PX}>
+                    <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}>
+                        {title}
+                    </Text>
+                </Container>
+            )}
+            <Container marginBottom={SPACING_BETWEEN_PX}>
+                <Text fontSize="14px" fontColor={ColorOption.grey} center={true}>
+                    {description}
+                </Text>
+            </Container>
+            <Container marginBottom={SPACING_BETWEEN_PX}>
+                {moreInfoSettings && (
+                    <Text
+                        center={true}
+                        fontSize="13px"
+                        textDecorationLine="underline"
+                        fontColor={ColorOption.lightGrey}
+                        href={moreInfoSettings.href}
+                    >
+                        {moreInfoSettings.text}
+                    </Text>
+                )}
+            </Container>
+        </Flex>
+        <Container>{action}</Container>
+    </Container>
+);
diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx
new file mode 100644
index 000000000..f587ff79a
--- /dev/null
+++ b/packages/instant/src/components/standard_sliding_panel.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { SlideAnimationState, StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types';
+
+import { InstallWalletPanelContent } from './install_wallet_panel_content';
+import { SlidingPanel } from './sliding_panel';
+
+export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings {
+    onClose: () => void;
+}
+
+export class StandardSlidingPanel extends React.Component<StandardSlidingPanelProps> {
+    public render(): React.ReactNode {
+        const { animationState, content, onClose } = this.props;
+        return (
+            <SlidingPanel animationState={animationState} onClose={onClose}>
+                {this._getNodeForContent(content)}
+            </SlidingPanel>
+        );
+    }
+    private readonly _getNodeForContent = (content: StandardSlidingPanelContent): React.ReactNode => {
+        switch (content) {
+            case StandardSlidingPanelContent.InstallWallet:
+                return <InstallWalletPanelContent />;
+            case StandardSlidingPanelContent.None:
+                return null;
+        }
+    };
+}
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 59aaa33a1..8465b9cd0 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants';
-import { ColorOption, keyframes, styled } from '../style/theme';
+import { ColorOption, css, keyframes, styled } from '../style/theme';
 
 import { Container } from './ui/container';
 
@@ -20,15 +20,11 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}>
     private readonly _barRef = React.createRef<HTMLDivElement>();
 
     public render(): React.ReactNode {
-        const timedProgressProps = this._calculateTimedProgressProps();
-        return (
-            <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-                <TimedProgress {...timedProgressProps} ref={this._barRef as any} />
-            </Container>
-        );
+        const widthAnimationSettings = this._calculateWidthAnimationSettings();
+        return <ProgressBar animationSettings={widthAnimationSettings} ref={this._barRef} />;
     }
 
-    private _calculateTimedProgressProps(): TimedProgressProps {
+    private _calculateWidthAnimationSettings(): WidthAnimationSettings {
         if (this.props.hasEnded) {
             if (!this._barRef.current) {
                 throw new Error('ended but no reference');
@@ -60,21 +56,45 @@ const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => {
       `;
 };
 
-interface TimedProgressProps {
+export interface WidthAnimationSettings {
     timeMs: number;
     fromWidth: string;
     toWidth: string;
 }
 
-export const TimedProgress =
+interface ProgressProps {
+    width?: string;
+    animationSettings?: WidthAnimationSettings;
+}
+
+export const Progress =
     styled.div <
-    TimedProgressProps >
+    ProgressProps >
     `
     && {
         background-color: ${props => props.theme[ColorOption.primaryColor]};
         border-radius: 6px;
         height: 6px;
-        animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
-          ${props => props.timeMs}ms linear 1 forwards;
+        ${props => (props.width ? `width: ${props.width};` : '')}
+        ${props =>
+            props.animationSettings
+                ? css`
+                      animation: ${expandingWidthKeyframes(
+                              props.animationSettings.fromWidth,
+                              props.animationSettings.toWidth,
+                          )}
+                          ${props.animationSettings.timeMs}ms linear 1 forwards;
+                  `
+                : ''}
     }
 `;
+
+export interface ProgressBarProps extends ProgressProps {}
+
+export const ProgressBar: React.ComponentType<ProgressBarProps & React.ClassAttributes<{}>> = React.forwardRef(
+    (props, ref) => (
+        <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
+            <Progress {...props} ref={ref as any} />
+        </Container>
+    ),
+);
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index b90221bf4..e77b1b5d1 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -2,6 +2,9 @@ import { darken, saturate } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
+
+export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
 export interface ButtonProps {
     backgroundColor?: ColorOption;
@@ -12,15 +15,26 @@ export interface ButtonProps {
     padding?: string;
     type?: string;
     isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    href?: string;
+    onClick?: ButtonOnClickHandler;
     className?: string;
 }
 
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
-        {children}
-    </button>
-);
+const PlainButton: React.StatelessComponent<ButtonProps> = ({
+    children,
+    isDisabled,
+    onClick,
+    href,
+    type,
+    className,
+}) => {
+    const computedOnClick = isDisabled ? undefined : href ? util.createOpenUrlInNewWindow(href) : onClick;
+    return (
+        <button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}>
+            {children}
+        </button>
+    );
+};
 
 const darkenOnHoverAmount = 0.1;
 const darkenOnActiveAmount = 0.2;
@@ -31,7 +45,7 @@ export const Button = styled(PlainButton)`
         box-sizing: border-box;
         font-size: ${props => props.fontSize};
         font-family: 'Inter UI', sans-serif;
-        font-weight: 600;
+        font-weight: 500;
         color: ${props => props.fontColor && props.theme[props.fontColor]};
         cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
         transition: background-color, opacity 0.5s ease;
@@ -64,11 +78,10 @@ export const Button = styled(PlainButton)`
 
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
-    borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
-    padding: '.6em 1.2em',
-    fontSize: '15px',
+    padding: '.82em 1.2em',
+    fontSize: '16px',
 };
 
 Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 8aa5db9e5..4dafe1386 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -20,7 +20,7 @@ export interface ContainerProps {
     marginBottom?: string;
     marginLeft?: string;
     padding?: string;
-    borderRadius?: string;
+    borderRadius?: MediaChoice;
     border?: string;
     borderColor?: ColorOption;
     borderTop?: string;
@@ -57,7 +57,6 @@ export const Container =
         ${props => cssRuleIfExists(props, 'margin-bottom')}
         ${props => cssRuleIfExists(props, 'margin-left')}
         ${props => cssRuleIfExists(props, 'padding')}
-        ${props => cssRuleIfExists(props, 'border-radius')}
         ${props => cssRuleIfExists(props, 'border')}
         ${props => cssRuleIfExists(props, 'border-top')}
         ${props => cssRuleIfExists(props, 'border-bottom')}
@@ -70,6 +69,7 @@ export const Container =
         ${props => props.display && stylesForMedia<string>('display', props.display)}
         ${props => props.width && stylesForMedia<string>('width', props.width)}
         ${props => props.height && stylesForMedia<string>('height', props.height)}
+        ${props => props.borderRadius && stylesForMedia<string>('border-radius', props.borderRadius)}
         background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
         border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
         &:hover {
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index a88fa87dd..811142b5b 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -20,6 +20,7 @@ interface IconInfoMapping {
     success: IconInfo;
     chevron: IconInfo;
     search: IconInfo;
+    lock: IconInfo;
 }
 const ICONS: IconInfoMapping = {
     closeX: {
@@ -58,6 +59,11 @@ const ICONS: IconInfoMapping = {
         path:
             'M8.39404 5.19727C8.39404 6.96289 6.96265 8.39453 5.19702 8.39453C3.4314 8.39453 2 6.96289 2 5.19727C2 3.43164 3.4314 2 5.19702 2C6.96265 2 8.39404 3.43164 8.39404 5.19727ZM8.09668 9.51074C7.26855 10.0684 6.27075 10.3945 5.19702 10.3945C2.3269 10.3945 0 8.06738 0 5.19727C0 2.32715 2.3269 0 5.19702 0C8.06738 0 10.394 2.32715 10.394 5.19727C10.394 6.27051 10.0686 7.26855 9.51074 8.09668L13.6997 12.2861L12.2854 13.7002L8.09668 9.51074Z',
     },
+    lock: {
+        viewBox: '0 0 13 16',
+        path:
+            'M6.47619 0C3.79509 0 1.60489 2.21216 1.60489 4.92014V6.33135C0.717479 6.33135 0 7.05602 0 7.95232V14.379C0 15.2753 0.717479 16 1.60489 16H11.3475C12.2349 16 12.9524 15.2753 12.9524 14.379V7.95232C12.9524 7.05602 12.2349 6.33135 11.3475 6.33135V4.92014C11.3475 2.21216 9.1573 0 6.47619 0ZM9.6482 6.33135H3.30418V4.92014C3.30418 3.16567 4.72026 1.71633 6.47619 1.71633C8.23213 1.71633 9.6482 3.16567 9.6482 4.92014V6.33135Z',
+    },
 };
 
 export interface IconProps {
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 2fb408db4..1ea5d8fe1 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ColorOption, styled } from '../../style/theme';
 
 export interface InputProps {
+    tabIndex?: number;
     className?: string;
     value?: string;
     width?: string;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 4fe429d25..fd14cc4d1 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -2,6 +2,7 @@ import { darken } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
 
 export interface TextProps {
     fontColor?: ColorOption;
@@ -20,10 +21,16 @@ export interface TextProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     noWrap?: boolean;
     display?: string;
+    href?: string;
 }
 
+export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => {
+    const computedOnClick = href ? util.createOpenUrlInNewWindow(href) : onClick;
+    return <StyledText {...rest} onClick={computedOnClick} />;
+};
+
 const darkenOnHoverAmount = 0.3;
-export const Text =
+export const StyledText =
     styled.div <
     TextProps >
     `
diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx
new file mode 100644
index 000000000..a0b3ae457
--- /dev/null
+++ b/packages/instant/src/components/wallet_prompt.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+export interface WalletPromptProps {
+    image: React.ReactNode;
+    onClick?: () => void;
+    primaryColor: ColorOption;
+    secondaryColor: ColorOption;
+}
+
+export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
+    onClick,
+    image,
+    children,
+    secondaryColor,
+    primaryColor,
+}) => (
+    <Container
+        padding="14.5px"
+        border={`1px solid ${primaryColor}`}
+        backgroundColor={secondaryColor}
+        width="100%"
+        borderRadius="4px"
+        onClick={onClick}
+        cursor={onClick ? 'pointer' : undefined}
+        boxShadowOnHover={!!onClick}
+    >
+        <Flex>
+            {image}
+            <Container marginLeft="10px">
+                <Text fontSize="16px" fontColor={primaryColor}>
+                    {children}
+                </Text>
+            </Container>
+        </Flex>
+    </Container>
+);
+
+WalletPrompt.defaultProps = {
+    primaryColor: ColorOption.darkOrange,
+    secondaryColor: ColorOption.lightOrange,
+};
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index b945f9908..2267b4dbf 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 
+import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
+
 import { INJECTED_DIV_CLASS } from '../constants';
 
-import { ZeroExInstantContainer } from './zero_ex_instant_container';
 import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
 export type ZeroExInstantProps = ZeroExInstantProviderProps;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 5748e064e..698bfef17 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,26 +1,29 @@
 import * as React from 'react';
 
 import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
+import { ConnectedBuyOrderProgressOrPaymentMethod } from '../containers/connected_buy_order_progress_or_payment_method';
+import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel';
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
 import { LatestError } from '../containers/latest_error';
-import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
+import { OrderProcessState, SlideAnimationState } from '../types';
 
-import { SlideAnimationState } from './animations/slide_animation';
 import { CSSReset } from './css_reset';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 
-export interface ZeroExInstantContainerProps {}
+export interface ZeroExInstantContainerProps {
+    orderProcessState: OrderProcessState;
+}
 export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
 }
 
-export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
+export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantContainerState> {
     public state = {
         tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
     };
@@ -40,26 +43,26 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         zIndex={zIndex.mainContainer}
                         position="relative"
                         backgroundColor={ColorOption.white}
-                        borderRadius="3px"
+                        borderRadius={{ default: '3px', sm: '0px' }}
                         hasBoxShadow={true}
                         overflow="hidden"
                         height="100%"
                     >
                         <Flex direction="column" justify="flex-start" height="100%">
                             <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
-                            <SelectedAssetBuyOrderProgress />
+                            <ConnectedBuyOrderProgressOrPaymentMethod />
                             <LatestBuyQuoteOrderDetails />
                             <Container padding="20px" width="100%">
                                 <SelectedAssetBuyOrderStateButtons />
                             </Container>
                         </Flex>
                         <SlidingPanel
-                            title="Select Token"
                             animationState={this.state.tokenSelectionPanelAnimationState}
                             onClose={this._handlePanelClose}
                         >
                             <AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
                         </SlidingPanel>
+                        <CurrentStandardSlidingPanel />
                     </Container>
                 </Container>
             </React.Fragment>
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
index 10438ab7a..2856ea3e3 100644
--- a/packages/instant/src/components/zero_ex_instant_overlay.tsx
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
+import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Icon } from './ui/icon';
 import { Overlay } from './ui/overlay';
-import { ZeroExInstantContainer } from './zero_ex_instant_container';
 import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
 export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps {
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 411f118cc..8be53ee20 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -73,7 +73,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
                       completeAssetMetaDataMap,
                       networkId,
                   ),
-            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
+            selectedAssetUnitAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? undefined
                 : new BigNumber(props.defaultAssetBuyAmount),
             availableAssets: _.isUndefined(props.availableAssetDatas)
@@ -91,12 +91,13 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     }
     public componentDidMount(): void {
         const state = this._store.getState();
+        const dispatch = this._store.dispatch;
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchEthPriceAndDispatchToStore(this._store);
+        asyncData.fetchEthPriceAndDispatchToStore(dispatch);
         // fetch available assets if none are specified
         if (_.isUndefined(state.availableAssets)) {
             // tslint:disable-next-line:no-floating-promises
-            asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
+            asyncData.fetchAvailableAssetDatasAndDispatchToStore(state, dispatch);
         }
         if (state.providerState.account.state !== AccountState.None) {
             this._accountUpdateHeartbeat = generateAccountHeartbeater({
@@ -111,8 +112,9 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             shouldPerformImmediatelyOnStart: false,
         });
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
+        // Trigger first buyquote fetch
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, shouldSetPending: true });
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, { updateSilently: false });
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 110a8248a..5bd2349b3 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -1,6 +1,6 @@
 import { BigNumber } from '@0x/utils';
 
-import { AccountNotReady, AccountState, Network } from './types';
+import { AccountNotReady, AccountState, Network, ProviderType } from './types';
 
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
@@ -19,6 +19,14 @@ export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 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 COINBASE_WALLET_IOS_APP_STORE_URL = 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8';
+export const COINBASE_WALLET_ANDROID_APP_STORE_URL = 'https://play.google.com/store/apps/details?id=org.toshi&hl=en';
+export const COINBASE_WALLET_SITE_URL = 'https://wallet.coinbase.com/';
+export const META_MASK_FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/';
+export const META_MASK_CHROME_STORE_URL =
+    'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en';
+export const META_MASK_OPERA_STORE_URL = 'https://addons.opera.com/en/extensions/details/metamask/';
+export const META_MASK_SITE_URL = 'https://metamask.io/';
 export const ETHEREUM_NODE_URL_BY_NETWORK = {
     [Network.Mainnet]: 'https://mainnet.infura.io/',
     [Network.Kovan]: 'https://kovan.infura.io/',
@@ -33,3 +41,10 @@ export const LOADING_ACCOUNT: AccountNotReady = {
 export const LOCKED_ACCOUNT: AccountNotReady = {
     state: AccountState.Locked,
 };
+export const PROVIDER_TYPE_TO_NAME: { [key in ProviderType]: string } = {
+    [ProviderType.Cipher]: 'Cipher',
+    [ProviderType.MetaMask]: 'MetaMask',
+    [ProviderType.Mist]: 'Mist',
+    [ProviderType.CoinbaseWallet]: 'Coinbase Wallet',
+    [ProviderType.Parity]: 'Parity',
+};
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
new file mode 100644
index 000000000..eacbadfca
--- /dev/null
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { PaymentMethod, PaymentMethodProps } from '../components/payment_method';
+import {
+    COINBASE_WALLET_ANDROID_APP_STORE_URL,
+    COINBASE_WALLET_IOS_APP_STORE_URL,
+    COINBASE_WALLET_SITE_URL,
+} from '../constants';
+import { Action, actions } from '../redux/actions';
+import { asyncData } from '../redux/async_data';
+import { State } from '../redux/reducer';
+import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent } from '../types';
+import { envUtil } from '../util/env';
+
+export interface ConnectedAccountPaymentMethodProps {}
+
+interface ConnectedState {
+    network: Network;
+    providerState: ProviderState;
+}
+
+interface ConnectedDispatch {
+    openInstallWalletPanel: () => void;
+    unlockWalletAndDispatchToStore: (providerState: ProviderState) => void;
+}
+
+type ConnectedProps = Omit<PaymentMethodProps, keyof ConnectedAccountPaymentMethodProps>;
+
+type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps;
+
+const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
+    network: state.network,
+    providerState: state.providerState,
+});
+
+const mapDispatchToProps = (
+    dispatch: Dispatch<Action>,
+    ownProps: ConnectedAccountPaymentMethodProps,
+): ConnectedDispatch => ({
+    openInstallWalletPanel: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
+    unlockWalletAndDispatchToStore: async (providerState: ProviderState) =>
+        asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true),
+});
+
+const mergeProps = (
+    connectedState: ConnectedState,
+    connectedDispatch: ConnectedDispatch,
+    ownProps: ConnectedAccountPaymentMethodProps,
+): FinalProps => ({
+    ...ownProps,
+    network: connectedState.network,
+    account: connectedState.providerState.account,
+    walletName: connectedState.providerState.name,
+    onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
+    onInstallWalletClick: () => {
+        const isMobile = envUtil.isMobileOperatingSystem();
+        if (!isMobile) {
+            connectedDispatch.openInstallWalletPanel();
+            return;
+        }
+        const operatingSystem = envUtil.getOperatingSystem();
+        let url = COINBASE_WALLET_SITE_URL;
+        switch (operatingSystem) {
+            case OperatingSystem.Android:
+                url = COINBASE_WALLET_ANDROID_APP_STORE_URL;
+                break;
+            case OperatingSystem.iOS:
+                url = COINBASE_WALLET_IOS_APP_STORE_URL;
+                break;
+            default:
+                break;
+        }
+        window.open(url, '_blank');
+    },
+});
+
+export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+    mergeProps,
+)(PaymentMethod);
diff --git a/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx b/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx
new file mode 100644
index 000000000..cace18e7e
--- /dev/null
+++ b/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+import { OrderProcessState } from '../types';
+
+import { ConnectedAccountPaymentMethod } from './connected_account_payment_method';
+import { SelectedAssetBuyOrderProgress } from './selected_asset_buy_order_progress';
+
+interface BuyOrderProgressOrPaymentMethodProps {
+    orderProcessState: OrderProcessState;
+}
+export const BuyOrderProgressOrPaymentMethod = (props: BuyOrderProgressOrPaymentMethodProps) => {
+    const { orderProcessState } = props;
+    if (
+        orderProcessState === OrderProcessState.Processing ||
+        orderProcessState === OrderProcessState.Success ||
+        orderProcessState === OrderProcessState.Failure
+    ) {
+        return <SelectedAssetBuyOrderProgress />;
+    } else {
+        return <ConnectedAccountPaymentMethod />;
+    }
+    return null;
+};
+
+interface ConnectedState extends BuyOrderProgressOrPaymentMethodProps {}
+
+export interface ConnectedBuyOrderProgressOrPaymentMethodProps {}
+const mapStateToProps = (state: State, _ownProps: ConnectedBuyOrderProgressOrPaymentMethodProps): ConnectedState => ({
+    orderProcessState: state.buyOrderState.processState,
+});
+export const ConnectedBuyOrderProgressOrPaymentMethod: React.ComponentClass<
+    ConnectedBuyOrderProgressOrPaymentMethodProps
+> = connect(mapStateToProps)(BuyOrderProgressOrPaymentMethod);
diff --git a/packages/instant/src/containers/current_standard_sliding_panel.ts b/packages/instant/src/containers/current_standard_sliding_panel.ts
new file mode 100644
index 000000000..82ac7fa1b
--- /dev/null
+++ b/packages/instant/src/containers/current_standard_sliding_panel.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { StandardSlidingPanel } from '../components/standard_sliding_panel';
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { StandardSlidingPanelSettings } from '../types';
+
+export interface CurrentStandardSlidingPanelProps {}
+
+interface ConnectedState extends StandardSlidingPanelSettings {}
+
+interface ConnectedDispatch {
+    onClose: () => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: CurrentStandardSlidingPanelProps): ConnectedState =>
+    state.standardSlidingPanelSettings;
+
+const mapDispatchToProps = (
+    dispatch: Dispatch<Action>,
+    ownProps: CurrentStandardSlidingPanelProps,
+): ConnectedDispatch => ({
+    onClose: () => dispatch(actions.closeStandardSlidingPanel()),
+});
+
+export const CurrentStandardSlidingPanel: React.ComponentClass<CurrentStandardSlidingPanelProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(StandardSlidingPanel);
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 2b59ed3ae..5dfe535e7 100644
--- a/packages/instant/src/containers/latest_buy_quote_order_details.ts
+++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts
@@ -14,6 +14,7 @@ export interface LatestBuyQuoteOrderDetailsProps {}
 
 interface ConnectedState {
     buyQuoteInfo?: BuyQuoteInfo;
+    selectedAssetUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     isLoading: boolean;
 }
@@ -21,6 +22,7 @@ interface ConnectedState {
 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,
 });
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index c0da181f1..b7cfdb504 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
-import { SlideAnimationState } from '../components/animations/slide_animation';
 import { SlidingError } from '../components/sliding_error';
 import { Overlay } from '../components/ui/overlay';
 import { Action } from '../redux/actions';
@@ -11,7 +10,7 @@ import { State } from '../redux/reducer';
 import { ScreenWidths } from '../style/media';
 import { generateOverlayBlack } from '../style/theme';
 import { zIndex } from '../style/z_index';
-import { Asset, DisplayStatus, Omit } from '../types';
+import { Asset, DisplayStatus, Omit, SlideAnimationState } from '../types';
 import { errorFlasher } from '../util/error_flasher';
 
 export interface LatestErrorComponentProps {
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index a407279e6..8dc127e1d 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -14,16 +14,16 @@ export interface InstantHeadingProps {
 }
 
 interface ConnectedState {
-    selectedAssetAmount?: BigNumber;
-    totalEthBaseAmount?: BigNumber;
+    selectedAssetUnitAmount?: BigNumber;
+    totalEthBaseUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
 }
 
 const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
-    selectedAssetAmount: state.selectedAssetAmount,
-    totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
+    selectedAssetUnitAmount: state.selectedAssetUnitAmount,
+    totalEthBaseUnitAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
     ethUsdPrice: state.ethUsdPrice,
     quoteRequestState: state.quoteRequestState,
     buyOrderState: state.buyOrderState,
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 93ff3db70..2c2661e1a 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -6,11 +6,11 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
-import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
+import { ERC20AssetAmountInput, ERC20AssetAmountInputProps } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
+import { AffiliateInfo, ERC20Asset, Omit, OrderProcessState } from '../types';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 
 export interface SelectedERC20AssetAmountInputProps {
@@ -37,13 +37,7 @@ interface ConnectedDispatch {
     ) => void;
 }
 
-interface ConnectedProps {
-    value?: BigNumber;
-    asset?: ERC20Asset;
-    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
-    isDisabled: boolean;
-    numberOfAssetsAvailable?: number;
-}
+type ConnectedProps = Omit<ERC20AssetAmountInputProps, keyof SelectedERC20AssetAmountInputProps>;
 
 type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
 
@@ -59,7 +53,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
     const assetBuyer = state.providerState.assetBuyer;
     return {
         assetBuyer,
-        value: state.selectedAssetAmount,
+        value: state.selectedAssetUnitAmount,
         asset: selectedAsset,
         isDisabled,
         numberOfAssetsAvailable,
@@ -87,7 +81,11 @@ const mapDispatchToProps = (
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, true, affiliateInfo);
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, {
+                setPending: true,
+                dispatchErrors: true,
+                affiliateInfo,
+            });
         }
     },
 });
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index 970b6c383..6ecb9af85 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -8,42 +8,42 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
     '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: 'rgb(54, 50, 60)',
+        primaryColor: '#333333',
         symbol: 'zrx',
         name: '0x',
     },
     '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#ec3e6c',
+        primaryColor: '#EC4F81',
         symbol: 'spank',
         name: 'Spank',
     },
     '0xf47261b0000000000000000000000000d26114cd6ee289accf82350c8d8487fedb8a0c07': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#2e61ea',
+        primaryColor: '#2458E7',
         symbol: 'omg',
         name: 'OmiseGo',
     },
     '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#87e4ca',
+        primaryColor: '#68CCBB',
         symbol: 'mkr',
         name: 'Maker',
     },
     '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#9c326c',
+        primaryColor: '#FF5000',
         symbol: 'bat',
         name: 'Basic Attention Token',
     },
     '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#5663b0',
+        primaryColor: '#4763D7',
         symbol: 'snt',
         name: 'Status',
     },
@@ -54,32 +54,151 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         symbol: 'mana',
         name: 'Decentraland',
     },
-    '0xf47261b0000000000000000000000000a74476443119a942de498590fe1f2454d7d4ac0d': {
+    '0xf47261b00000000000000000000000001985365e9f78359a9b6ad760e32412f4a445e862': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#263469',
-        symbol: 'gnt',
-        name: 'Golem',
+        primaryColor: '#512D80',
+        symbol: 'rep',
+        name: 'Augur',
     },
-    '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a': {
+    '0xf47261b00000000000000000000000000abdace70d3790235af448c88547603b945604ea': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#de5445',
-        symbol: 'sub',
-        name: 'Substratum',
+        primaryColor: '#2c3c8c',
+        symbol: 'dnt',
+        name: 'district0x',
     },
-    '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6': {
+    '0xf47261b000000000000000000000000005f4a42e251f2d52b8ed15e9fedaacfcef1fad27': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 12,
+        primaryColor: '#048998',
+        symbol: 'zil',
+        name: 'Zilliqa',
+    },
+    '0xf47261b00000000000000000000000008f8221afbb33998d8584a2b05749ba73c37a938a': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#000',
-        symbol: 'dentacoin',
-        name: 'Dentacoin',
+        primaryColor: '#58BFD6',
+        symbol: 'req',
+        name: 'Request Network',
     },
-    '0xf47261b00000000000000000000000001985365e9f78359a9b6ad760e32412f4a445e862': {
+    '0xf47261b0000000000000000000000000e0b7927c4af23765cb51314a0e0521a9645f0e2a': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 9,
+        primaryColor: '#BC9952',
+        symbol: 'dgd',
+        name: 'DigixDao',
+    },
+    '0xf47261b00000000000000000000000004f3afec4e5a3f2a6a1a411def7d7dfe50ee057bf': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 9,
+        primaryColor: '#DEB564',
+        symbol: 'dgx',
+        name: 'Digix Gold Token',
+    },
+    '0xf47261b0000000000000000000000000419d0d8bdd9af5e606ae2232ed285aff190e711b': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#E40057',
+        symbol: 'fun',
+        name: 'FunFair',
+    },
+    '0xf47261b000000000000000000000000041e5560054824ea6b0732e656e3ad64e20e94e45': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#04bc24',
+        symbol: 'cvc',
+        name: 'Civic',
+    },
+    '0xf47261b00000000000000000000000005ca9a71b1d01849c0a95490cc00559717fcf0d1d': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#512D80',
-        symbol: 'rep',
-        name: 'Augur',
+        primaryColor: '#F7296E',
+        symbol: 'ae',
+        name: 'Aeternity',
+    },
+    '0xf47261b0000000000000000000000000408e41876cccdc0f92210600ef50372656052a38': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#233C5A',
+        symbol: 'ren',
+        name: 'Republic Protocol',
+    },
+    '0xf47261b0000000000000000000000000514910771af9ca656af840dff83e8264ecf986ca': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#325CD2',
+        symbol: 'link',
+        name: 'ChainLink',
+    },
+    '0xf47261b00000000000000000000000006810e776880c02933d47db1b9fc05908e5386b96': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#48A4C0',
+        symbol: 'gno',
+        name: 'Gnosis',
+    },
+    '0xf47261b0000000000000000000000000960b236a07cf122663c4303350609a66a7b288c0': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#04a29e',
+        symbol: 'ant',
+        name: 'Aragon',
+    },
+    '0xf47261b00000000000000000000000004156d3342d5c385a87d264f90653733592000581': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#4CABA7',
+        symbol: 'salt',
+        name: 'Salt',
+    },
+    '0xf47261b0000000000000000000000000595832f8fc6bf59c85c527fec3740a1b7a361269': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 6,
+        primaryColor: '#5BC9D4',
+        symbol: 'powr',
+        name: 'PowerLedger',
+    },
+    '0xf47261b00000000000000000000000008eb24319393716668d768dcec29356ae9cffe285': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#523CE8',
+        symbol: 'agi',
+        name: 'SingularityNET',
+    },
+    '0xf47261b000000000000000000000000039bb259f66e1c59d5abef88375979b4d20d98022': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#EDB740',
+        symbol: 'wax',
+        name: 'WAX',
+    },
+    '0xf47261b0000000000000000000000000beb9ef514a379b997e0798fdcc901ee474b6d9a1': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#333333',
+        symbol: 'mln',
+        name: 'Melon',
+    },
+    '0xf47261b000000000000000000000000058b6a8a3302369daec383334672404ee733ab239': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#232D37',
+        symbol: 'lpt',
+        name: 'Livepeer',
+    },
+    '0xf47261b000000000000000000000000027054b13b1b798b345b591a4d22e6562d47ea75a': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 4,
+        primaryColor: '#3A74F6',
+        symbol: 'ast',
+        name: 'AirSwap',
+    },
+    '0xf47261b000000000000000000000000089d24a6b4ccb1b6faa2625fe562bdd9a23260359': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#F2B350',
+        symbol: 'dai',
+        name: 'Dai Stablecoin',
     },
 };
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 8947c6c97..77e3dec12 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 } from '../types';
+import { ActionsUnion, AddressAndEthBalanceInWei, Asset, StandardSlidingPanelContent } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -26,7 +26,7 @@ export enum ActionTypes {
     SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY',
     UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE',
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
-    UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
+    UPDATE_SELECTED_ASSET_UNIT_AMOUNT = 'UPDATE_SELECTED_ASSET_UNIT_AMOUNT',
     SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
     SET_BUY_ORDER_STATE_VALIDATING = 'SET_BUY_ORDER_STATE_VALIDATING',
     SET_BUY_ORDER_STATE_PROCESSING = 'SET_BUY_ORDER_STATE_PROCESSING',
@@ -41,6 +41,8 @@ export enum ActionTypes {
     HIDE_ERROR = 'HIDE_ERROR',
     CLEAR_ERROR = 'CLEAR_ERROR',
     RESET_AMOUNT = 'RESET_AMOUNT',
+    OPEN_STANDARD_SLIDING_PANEL = 'OPEN_STANDARD_SLIDING_PANEL',
+    CLOSE_STANDARD_SLIDING_PANEL = 'CLOSE_STANDARD_SLIDING_PANEL',
 }
 
 export const actions = {
@@ -50,7 +52,8 @@ export const actions = {
     updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
         createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance),
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
-    updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
+    updateSelectedAssetAmount: (amount?: BigNumber) =>
+        createAction(ActionTypes.UPDATE_SELECTED_ASSET_UNIT_AMOUNT, amount),
     setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
     setBuyOrderStateValidating: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_VALIDATING),
     setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
@@ -66,4 +69,7 @@ export const actions = {
     hideError: () => createAction(ActionTypes.HIDE_ERROR),
     clearError: () => createAction(ActionTypes.CLEAR_ERROR),
     resetAmount: () => createAction(ActionTypes.RESET_AMOUNT),
+    openStandardSlidingPanel: (content: StandardSlidingPanelContent) =>
+        createAction(ActionTypes.OPEN_STANDARD_SLIDING_PANEL, content),
+    closeStandardSlidingPanel: () => createAction(ActionTypes.CLOSE_STANDARD_SLIDING_PANEL),
 };
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index b920ac914..5d30388b8 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -1,102 +1,103 @@
 import { AssetProxyId } from '@0x/types';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
+import { Dispatch } from 'redux';
 
 import { BIG_NUMBER_ZERO } from '../constants';
-import { AccountState, ERC20Asset, OrderProcessState } from '../types';
+import { AccountState, ERC20Asset, OrderProcessState, ProviderState } from '../types';
 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 { actions } from './actions';
-import { Store } from './store';
+import { State } from './reducer';
 
 export const asyncData = {
-    fetchEthPriceAndDispatchToStore: async (store: Store) => {
+    fetchEthPriceAndDispatchToStore: async (dispatch: Dispatch) => {
         try {
             const ethUsdPrice = await coinbaseApi.getEthUsdPrice();
-            store.dispatch(actions.updateEthUsdPrice(ethUsdPrice));
+            dispatch(actions.updateEthUsdPrice(ethUsdPrice));
         } catch (e) {
             const errorMessage = 'Error fetching ETH/USD price';
-            errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
-            store.dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
+            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
+            dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
         }
     },
-    fetchAvailableAssetDatasAndDispatchToStore: async (store: Store) => {
-        const { providerState, assetMetaDataMap, network } = store.getState();
+    fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => {
+        const { providerState, assetMetaDataMap, network } = state;
         const assetBuyer = providerState.assetBuyer;
         try {
             const assetDatas = await assetBuyer.getAvailableAssetDatasAsync();
             const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
-            store.dispatch(actions.setAvailableAssets(assets));
+            dispatch(actions.setAvailableAssets(assets));
         } catch (e) {
             const errorMessage = 'Could not find any assets';
-            errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
+            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
             // On error, just specify that none are available
-            store.dispatch(actions.setAvailableAssets([]));
+            dispatch(actions.setAvailableAssets([]));
         }
     },
-    fetchAccountInfoAndDispatchToStore: async (options: { store: Store; shouldSetToLoading: boolean }) => {
-        const { store, shouldSetToLoading } = options;
-        const { providerState } = store.getState();
+    fetchAccountInfoAndDispatchToStore: async (
+        providerState: ProviderState,
+        dispatch: Dispatch,
+        shouldAttemptUnlock: boolean = false,
+        shouldSetToLoading: boolean = false,
+    ) => {
         const web3Wrapper = providerState.web3Wrapper;
         const provider = providerState.provider;
         if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) {
-            store.dispatch(actions.setAccountStateLoading());
+            dispatch(actions.setAccountStateLoading());
         }
         let availableAddresses: string[];
         try {
             // TODO(bmillman): Add support at the web3Wrapper level for calling `eth_requestAccounts` instead of calling enable here
             const isPrivacyModeEnabled = !_.isUndefined((provider as any).enable);
-            availableAddresses = isPrivacyModeEnabled
-                ? await (provider as any).enable()
-                : await web3Wrapper.getAvailableAddressesAsync();
+            availableAddresses =
+                isPrivacyModeEnabled && shouldAttemptUnlock
+                    ? await (provider as any).enable()
+                    : await web3Wrapper.getAvailableAddressesAsync();
         } catch (e) {
-            store.dispatch(actions.setAccountStateLocked());
+            dispatch(actions.setAccountStateLocked());
             return;
         }
         if (!_.isEmpty(availableAddresses)) {
             const activeAddress = availableAddresses[0];
-            store.dispatch(actions.setAccountStateReady(activeAddress));
+            dispatch(actions.setAccountStateReady(activeAddress));
             // tslint:disable-next-line:no-floating-promises
-            asyncData.fetchAccountBalanceAndDispatchToStore(store);
+            asyncData.fetchAccountBalanceAndDispatchToStore(activeAddress, providerState.web3Wrapper, dispatch);
         } else {
-            store.dispatch(actions.setAccountStateLocked());
+            dispatch(actions.setAccountStateLocked());
         }
     },
-    fetchAccountBalanceAndDispatchToStore: async (store: Store) => {
-        const { providerState } = store.getState();
-        const web3Wrapper = providerState.web3Wrapper;
-        const account = providerState.account;
-        if (account.state !== AccountState.Ready) {
-            return;
-        }
+    fetchAccountBalanceAndDispatchToStore: async (address: string, web3Wrapper: Web3Wrapper, dispatch: Dispatch) => {
         try {
-            const address = account.address;
             const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address);
-            store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
+            dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
         } catch (e) {
             // leave balance as is
             return;
         }
     },
-    fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; shouldSetPending: boolean }) => {
-        const { store, shouldSetPending } = options;
-        const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
+    fetchCurrentBuyQuoteAndDispatchToStore: async (
+        state: State,
+        dispatch: Dispatch,
+        options: { updateSilently: boolean },
+    ) => {
+        const { buyOrderState, providerState, selectedAsset, selectedAssetUnitAmount, affiliateInfo } = state;
         const assetBuyer = providerState.assetBuyer;
         if (
-            !_.isUndefined(selectedAssetAmount) &&
+            !_.isUndefined(selectedAssetUnitAmount) &&
             !_.isUndefined(selectedAsset) &&
             buyOrderState.processState === OrderProcessState.None &&
             selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
         ) {
             await buyQuoteUpdater.updateBuyQuoteAsync(
                 assetBuyer,
-                store.dispatch,
+                dispatch,
                 selectedAsset as ERC20Asset,
-                selectedAssetAmount,
-                shouldSetPending,
-                affiliateInfo,
+                selectedAssetUnitAmount,
+                { setPending: !options.updateSilently, dispatchErrors: !options.updateSilently, affiliateInfo },
             );
         }
     },
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index ef46fdd9d..dfc2b89f3 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -19,6 +19,8 @@ import {
     OrderProcessState,
     OrderState,
     ProviderState,
+    StandardSlidingPanelContent,
+    StandardSlidingPanelSettings,
 } from '../types';
 
 import { Action, ActionTypes } from './actions';
@@ -30,6 +32,7 @@ export interface DefaultState {
     buyOrderState: OrderState;
     latestErrorDisplayStatus: DisplayStatus;
     quoteRequestState: AsyncProcessState;
+    standardSlidingPanelSettings: StandardSlidingPanelSettings;
 }
 
 // State that is required but needs to be derived from the props
@@ -41,7 +44,7 @@ interface PropsDerivedState {
 interface OptionalState {
     selectedAsset: Asset;
     availableAssets: Asset[];
-    selectedAssetAmount: BigNumber;
+    selectedAssetUnitAmount: BigNumber;
     ethUsdPrice: BigNumber;
     latestBuyQuote: BuyQuote;
     latestErrorMessage: string;
@@ -56,6 +59,10 @@ export const DEFAULT_STATE: DefaultState = {
     buyOrderState: { processState: OrderProcessState.None },
     latestErrorDisplayStatus: DisplayStatus.Hidden,
     quoteRequestState: AsyncProcessState.None,
+    standardSlidingPanelSettings: {
+        animationState: 'none',
+        content: StandardSlidingPanelContent.None,
+    },
 };
 
 export const createReducer = (initialState: State) => {
@@ -66,11 +73,19 @@ export const createReducer = (initialState: State) => {
             case ActionTypes.SET_ACCOUNT_STATE_LOCKED:
                 return reduceStateWithAccount(state, LOCKED_ACCOUNT);
             case ActionTypes.SET_ACCOUNT_STATE_READY: {
-                const account: AccountReady = {
+                const address = action.data;
+                let newAccount: AccountReady = {
                     state: AccountState.Ready,
-                    address: action.data,
+                    address,
                 };
-                return reduceStateWithAccount(state, account);
+                const currentAccount = state.providerState.account;
+                if (currentAccount.state === AccountState.Ready && currentAccount.address === address) {
+                    newAccount = {
+                        ...newAccount,
+                        ethBalanceInWei: currentAccount.ethBalanceInWei,
+                    };
+                }
+                return reduceStateWithAccount(state, newAccount);
             }
             case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: {
                 const { address, ethBalanceInWei } = action.data;
@@ -90,10 +105,10 @@ export const createReducer = (initialState: State) => {
                     ...state,
                     ethUsdPrice: action.data,
                 };
-            case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT:
+            case ActionTypes.UPDATE_SELECTED_ASSET_UNIT_AMOUNT:
                 return {
                     ...state,
-                    selectedAssetAmount: action.data,
+                    selectedAssetUnitAmount: action.data,
                 };
             case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
                 const newBuyQuoteIfExists = action.data;
@@ -204,13 +219,29 @@ export const createReducer = (initialState: State) => {
                     latestBuyQuote: undefined,
                     quoteRequestState: AsyncProcessState.None,
                     buyOrderState: { processState: OrderProcessState.None },
-                    selectedAssetAmount: undefined,
+                    selectedAssetUnitAmount: undefined,
                 };
             case ActionTypes.SET_AVAILABLE_ASSETS:
                 return {
                     ...state,
                     availableAssets: action.data,
                 };
+            case ActionTypes.OPEN_STANDARD_SLIDING_PANEL:
+                return {
+                    ...state,
+                    standardSlidingPanelSettings: {
+                        content: action.data,
+                        animationState: 'slidIn',
+                    },
+                };
+            case ActionTypes.CLOSE_STANDARD_SLIDING_PANEL:
+                return {
+                    ...state,
+                    standardSlidingPanelSettings: {
+                        content: state.standardSlidingPanelSettings.content,
+                        animationState: 'slidOut',
+                    },
+                };
             default:
                 return state;
         }
@@ -232,9 +263,9 @@ const reduceStateWithAccount = (state: State, account: Account) => {
 
 const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
     const selectedAssetIfExists = state.selectedAsset;
-    const selectedAssetAmountIfExists = state.selectedAssetAmount;
+    const selectedAssetUnitAmountIfExists = state.selectedAssetUnitAmount;
     // if no selectedAsset or selectedAssetAmount exists on the current state, return false
-    if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetAmountIfExists)) {
+    if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetUnitAmountIfExists)) {
         return false;
     }
     // if buyQuote's assetData does not match that of the current selected asset, return false
@@ -246,7 +277,7 @@ const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
     const selectedAssetMetaData = selectedAssetIfExists.metaData;
     if (selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20) {
         const selectedAssetAmountBaseUnits = Web3Wrapper.toBaseUnitAmount(
-            selectedAssetAmountIfExists,
+            selectedAssetUnitAmountIfExists,
             selectedAssetMetaData.decimals,
         );
         const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 1e9f55e00..a0751286b 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -17,6 +17,8 @@ export enum ColorOption {
     darkOrange = 'darkOrange',
     green = 'green',
     red = 'red',
+    darkBlue = 'darkBlue',
+    lightBlue = 'lightBlue',
 }
 
 export const theme: Theme = {
@@ -32,6 +34,8 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
     green: '#3CB34F',
     red: '#D00000',
+    darkBlue: '#135df6',
+    lightBlue: '#F2F7FF',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index b43a82d46..67f21a396 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -95,6 +95,7 @@ export interface AffiliateInfo {
 }
 
 export interface ProviderState {
+    name: string;
     provider: Provider;
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
@@ -125,3 +126,42 @@ export interface AddressAndEthBalanceInWei {
     address: string;
     ethBalanceInWei: BigNumber;
 }
+
+export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
+
+export enum StandardSlidingPanelContent {
+    None = 'NONE',
+    InstallWallet = 'INSTALL_WALLET',
+}
+
+export interface StandardSlidingPanelSettings {
+    animationState: SlideAnimationState;
+    content: StandardSlidingPanelContent;
+}
+
+export enum Browser {
+    Chrome = 'CHROME',
+    Firefox = 'FIREFOX',
+    Opera = 'OPERA',
+    Safari = 'SAFARI',
+    Edge = 'EDGE',
+    Other = 'OTHER',
+}
+
+export enum OperatingSystem {
+    Android = 'ANDROID',
+    iOS = 'IOS',
+    Mac = 'MAC',
+    Windows = 'WINDOWS',
+    WindowsPhone = 'WINDOWS_PHONE',
+    Linux = 'LINUX',
+    Other = 'OTHER',
+}
+
+export enum ProviderType {
+    Parity = 'PARITY',
+    MetaMask = 'META_MASK',
+    Mist = 'MIST',
+    CoinbaseWallet = 'COINBASE_WALLET',
+    Cipher = 'CIPHER',
+}
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index fbfbb19f3..40560d3eb 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -80,8 +80,6 @@ export const assetUtils = {
                 return metaData.symbol.toUpperCase();
             case AssetProxyId.ERC721:
                 return metaData.name;
-            default:
-                return defaultName;
         }
     },
     formattedSymbolForAsset: (asset?: ERC20Asset, defaultName: string = '???'): string => {
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index c33e28f1c..2fd16d781 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -15,40 +15,43 @@ export const buyQuoteUpdater = {
         assetBuyer: AssetBuyer,
         dispatch: Dispatch<Action>,
         asset: ERC20Asset,
-        assetAmount: BigNumber,
-        setPending = true,
-        affiliateInfo?: AffiliateInfo,
+        assetUnitAmount: BigNumber,
+        options: { setPending: boolean; dispatchErrors: boolean; affiliateInfo?: AffiliateInfo },
     ): Promise<void> => {
         // get a new buy quote.
-        const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
-        if (setPending) {
+        const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetUnitAmount, asset.metaData.decimals);
+        if (options.setPending) {
             // mark quote as pending
             dispatch(actions.setQuoteRequestStatePending());
         }
-        const feePercentage = oc(affiliateInfo).feePercentage();
+        const feePercentage = oc(options.affiliateInfo).feePercentage();
         let newBuyQuote: BuyQuote | undefined;
         try {
             newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
         } catch (error) {
-            dispatch(actions.setQuoteRequestStateFailure());
-            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;
+            if (options.dispatchErrors) {
+                dispatch(actions.setQuoteRequestStateFailure());
+                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;
+                }
             }
+            // TODO: report to error reporter on else
+
             return;
         }
         // We have a successful new buy quote
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
new file mode 100644
index 000000000..4a32f9cb1
--- /dev/null
+++ b/packages/instant/src/util/env.ts
@@ -0,0 +1,65 @@
+import * as bowser from 'bowser';
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
+
+import { PROVIDER_TYPE_TO_NAME } from '../constants';
+import { Browser, OperatingSystem, ProviderType } from '../types';
+
+export const envUtil = {
+    getBrowser(): Browser {
+        if (bowser.chrome) {
+            return Browser.Chrome;
+        } else if (bowser.firefox) {
+            return Browser.Firefox;
+        } else if (bowser.opera) {
+            return Browser.Opera;
+        } else if (bowser.msedge) {
+            return Browser.Edge;
+        } else if (bowser.safari) {
+            return Browser.Safari;
+        } else {
+            return Browser.Other;
+        }
+    },
+    isMobileOperatingSystem(): boolean {
+        return bowser.mobile;
+    },
+    getOperatingSystem(): OperatingSystem {
+        if (bowser.android) {
+            return OperatingSystem.Android;
+        } else if (bowser.ios) {
+            return OperatingSystem.iOS;
+        } else if (bowser.mac) {
+            return OperatingSystem.Mac;
+        } else if (bowser.windows) {
+            return OperatingSystem.Windows;
+        } else if (bowser.windowsphone) {
+            return OperatingSystem.WindowsPhone;
+        } else if (bowser.linux) {
+            return OperatingSystem.Linux;
+        } else {
+            return OperatingSystem.Other;
+        }
+    },
+    getProviderType(provider: Provider): ProviderType | undefined {
+        if (provider.constructor.name === 'EthereumProvider') {
+            return ProviderType.Mist;
+        } else if ((provider as any).isParity) {
+            return ProviderType.Parity;
+        } else if ((provider as any).isMetaMask) {
+            return ProviderType.MetaMask;
+        } else if (!_.isUndefined(_.get(window, 'SOFA'))) {
+            return ProviderType.CoinbaseWallet;
+        } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) {
+            return ProviderType.Cipher;
+        }
+        return;
+    },
+    getProviderName(provider: Provider): string {
+        const providerTypeIfExists = envUtil.getProviderType(provider);
+        if (_.isUndefined(providerTypeIfExists)) {
+            return provider.constructor.name;
+        }
+        return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
+    },
+};
diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts
index 4d62c4d9f..f9bf82827 100644
--- a/packages/instant/src/util/etherscan.ts
+++ b/packages/instant/src/util/etherscan.ts
@@ -8,9 +8,8 @@ const etherscanPrefix = (networkId: number): string | undefined => {
             return 'kovan.';
         case Network.Mainnet:
             return '';
-        default:
-            return undefined;
     }
+    return '';
 };
 
 export const etherscanUtil = {
diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index 44661d697..e9c432b2f 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -5,15 +5,15 @@ import * as _ from 'lodash';
 import { ETH_DECIMALS } from '../constants';
 
 export const format = {
-    ethBaseAmount: (
-        ethBaseAmount?: BigNumber,
+    ethBaseUnitAmount: (
+        ethBaseUnitAmount?: BigNumber,
         decimalPlaces: number = 4,
         defaultText: React.ReactNode = '0 ETH',
     ): React.ReactNode => {
-        if (_.isUndefined(ethBaseAmount)) {
+        if (_.isUndefined(ethBaseUnitAmount)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
         return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
     },
     ethUnitAmount: (
@@ -27,16 +27,16 @@ export const format = {
         const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
         return `${roundedAmount} ETH`;
     },
-    ethBaseAmountInUsd: (
-        ethBaseAmount?: BigNumber,
+    ethBaseUnitAmountInUsd: (
+        ethBaseUnitAmount?: BigNumber,
         ethUsdPrice?: BigNumber,
         decimalPlaces: number = 2,
         defaultText: React.ReactNode = '$0.00',
     ): React.ReactNode => {
-        if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
+        if (_.isUndefined(ethBaseUnitAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
         return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
     },
     ethUnitAmountInUsd: (
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index 96a8ac4e6..2b852fb0d 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -10,13 +10,15 @@ export interface HeartbeatFactoryOptions {
 export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
     const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchAccountInfoAndDispatchToStore({ store, shouldSetToLoading: false });
+        await asyncData.fetchAccountInfoAndDispatchToStore(store.getState().providerState, store.dispatch, false);
     }, shouldPerformImmediatelyOnStart);
 };
 
 export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
     const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, shouldSetPending: false });
+        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store.getState(), store.dispatch, {
+            updateSilently: true,
+        });
     }, shouldPerformImmediatelyOnStart);
 };
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 3281f6bfb..452a71460 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 
 import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants';
 import { Maybe, Network, OrderSource, ProviderState } from '../types';
+import { envUtil } from '../util/env';
 
 import { assetBuyerFactory } from './asset_buyer_factory';
 import { providerFactory } from './provider_factory';
@@ -29,6 +30,7 @@ export const providerStateFactory = {
         provider: Provider,
     ): ProviderState => {
         const providerState: ProviderState = {
+            name: envUtil.getProviderName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
@@ -40,6 +42,7 @@ export const providerStateFactory = {
         const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
         if (!_.isUndefined(injectedProviderIfExists)) {
             const providerState: ProviderState = {
+                name: envUtil.getProviderName(injectedProviderIfExists),
                 provider: injectedProviderIfExists,
                 web3Wrapper: new Web3Wrapper(injectedProviderIfExists),
                 assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network),
@@ -53,6 +56,7 @@ export const providerStateFactory = {
     getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
         const provider = providerFactory.getFallbackNoSigningProvider(network);
         const providerState: ProviderState = {
+            name: envUtil.getProviderName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
diff --git a/packages/instant/src/util/util.ts b/packages/instant/src/util/util.ts
index 232a86850..29b6b1d2b 100644
--- a/packages/instant/src/util/util.ts
+++ b/packages/instant/src/util/util.ts
@@ -2,4 +2,5 @@ import * as _ from 'lodash';
 
 export const util = {
     boundNoop: _.noop.bind(_),
+    createOpenUrlInNewWindow: (href: string) => () => window.open(href, '_blank'),
 };
author	Fabio Berger <me@fabioberger.com>	2018-11-16 21:52:20 +0800
committer	Fabio Berger <me@fabioberger.com>	2018-11-16 21:52:20 +0800
commit	25d0b1e6e58987d0f00a5034158c2c514cf476d6 (patch)
tree	412ef07e713fd928b856aca2fc603e182adcd1d3 /packages/instant/src
parent	e36fc4e6aef414c5d3507c59d82e03e92fbc93fb (diff)
parent	cabb7432b9a6d4a5bb8da6fc7fe4522d24e4ece5 (diff)
download	dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.gz dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.bz2 dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.lz dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.xz dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.zst dexon-sol-tools-25d0b1e6e58987d0f00a5034158c2c514cf476d6.zip