Show error when fetching usd prices

1 files changed, 32 insertions, 4 deletions

diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 537b9ee4e..ea975a5f7 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -27,12 +27,19 @@ export interface OrderDetailsProps {
 }
 export class OrderDetails extends React.Component<OrderDetailsProps> {
     public render(): React.ReactNode {
-        const { buyQuoteInfo } = this.props;
-
+        const showUsdError = this.props.baseCurrency === BaseCurrency.USD && this._hadErrorFetchingUsdPrice();
         return (
             <Container width="100%" flexGrow={1} padding="20px 20px 0px 20px">
                 <Container marginBottom="10px">{this._renderHeader()}</Container>
+                {showUsdError ? this._renderErrorFetchingUsdPrice() : this._renderRows()}
+            </Container>
+        );
+    }
 
+    private _renderRows(): React.ReactNode {
+        const { buyQuoteInfo } = this.props;
+        return (
+            <React.Fragment>
                 <OrderDetailsRow
                     labelText={this._assetAmountLabel()}
                     primaryValue={this._displayAmountOrPlaceholder(buyQuoteInfo && buyQuoteInfo.assetEthAmount)}
@@ -48,10 +55,30 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
                     isPrimaryValueBold={true}
                     secondaryValue={this._totalCostSecondaryValue()}
                 />
-            </Container>
+            </React.Fragment>
         );
     }
 
+    private _renderErrorFetchingUsdPrice(): React.ReactNode {
+        return (
+            <Text>
+                There was an error fetching the USD price.
+                <Text
+                    onClick={this.props.onBaseCurrencySwitchEth}
+                    fontWeight={700}
+                    fontColor={ColorOption.primaryColor}
+                >
+                    Click here
+                </Text>
+                {' to view ETH prices'}
+            </Text>
+        );
+    }
+
+    private _hadErrorFetchingUsdPrice(): boolean {
+        return this.props.ethUsdPrice === BIG_NUMBER_ZERO;
+    }
+
     private _totalCostSecondaryValue(): React.ReactNode {
         const secondaryCurrency = this.props.baseCurrency === BaseCurrency.USD ? BaseCurrency.ETH : BaseCurrency.USD;
 
@@ -92,7 +119,8 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
     }
 
     private _assetAmountLabel(): string {
-        const { assetName, baseCurrency } = this.props;
+        const { assetName, baseCurrency, ethUsdPrice } = this.props;
+
         const numTokens = this.props.selectedAssetUnitAmount;
 
         // Display as 0 if we have a selected asset