Refactor common fetch logic into fetch_utils

3 files changed, 62 insertions, 56 deletions

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 44bf69455..3f0a4fdca 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -40,6 +40,7 @@ import { backendClient } from 'ts/utils/backend_client';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
+import { fetchUtils } from 'ts/utils/fetch_utils';
 import { utils } from 'ts/utils/utils';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
 
@@ -130,6 +131,7 @@ const FOOTER_ITEM_KEY = 'FOOTER';
 const DISCONNECTED_ITEM_KEY = 'DISCONNECTED';
 const ETHER_ITEM_KEY = 'ETHER';
 const USD_DECIMAL_PLACES = 2;
+const CRYPTO_COMPARE_MULTI_ENDPOINT = '/pricemulti';
 
 export class Wallet extends React.Component<WalletProps, WalletState> {
     private _isUnmounted: boolean;
@@ -511,24 +513,29 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             ),
         );
         const joinedTokenSymbols = _.keys(tokenAddressBySymbol).join(',');
-        const url = `${configs.CRYPTO_COMPARE_BASE_URL}/pricemulti?fsyms=${joinedTokenSymbols}&tsyms=USD`;
-        const response = await fetch(url);
-        if (response.status !== 200) {
-            const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`;
-            logUtils.log(errorText);
-            const error = Error(errorText);
-            // tslint:disable-next-line:no-floating-promises
-            errorReporter.reportAsync(error);
+        const baseCurrency = 'USD';
+        const queryParams = {
+            fsyms: joinedTokenSymbols,
+            tsyms: baseCurrency,
+        };
+        try {
+            const priceInfoBySymbol = await fetchUtils.requestAsync(
+                configs.CRYPTO_COMPARE_BASE_URL,
+                CRYPTO_COMPARE_MULTI_ENDPOINT,
+                queryParams,
+            );
+            const priceInfoByAddress = _.mapKeys(priceInfoBySymbol, (value, symbol) =>
+                _.get(tokenAddressBySymbol, symbol),
+            );
+            const result = _.mapValues(priceInfoByAddress, priceInfo => {
+                const price = _.get(priceInfo, baseCurrency);
+                const priceBigNumber = new BigNumber(price);
+                return priceBigNumber;
+            });
+            return result;
+        } catch (err) {
             return {};
         }
-        const priceInfoBySymbol = await response.json();
-        const priceInfoByAddress = _.mapKeys(priceInfoBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol));
-        const result = _.mapValues(priceInfoByAddress, priceInfo => {
-            const price = _.get(priceInfo, 'USD');
-            const priceBigNumber = new BigNumber(price);
-            return priceBigNumber;
-        });
-        return result;
     }
     private _openWrappedEtherActionRow(wrappedEtherDirection: Side) {
         this.setState({
diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts
index fdbb3e03a..ab0fb4f32 100644
--- a/packages/website/ts/utils/backend_client.ts
+++ b/packages/website/ts/utils/backend_client.ts
@@ -1,16 +1,8 @@
-import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
-import * as queryString from 'query-string';
 
-import {
-    ArticlesBySection,
-    ItemByAddress,
-    WebsiteBackendGasInfo,
-    WebsiteBackendPriceInfo,
-    WebsiteBackendRelayerInfo,
-} from 'ts/types';
+import { ArticlesBySection, WebsiteBackendGasInfo, WebsiteBackendPriceInfo, WebsiteBackendRelayerInfo } from 'ts/types';
 import { configs } from 'ts/utils/configs';
-import { errorReporter } from 'ts/utils/error_reporter';
+import { fetchUtils } from 'ts/utils/fetch_utils';
 
 const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station';
 const PRICES_ENDPOINT = '/prices';
@@ -19,7 +11,7 @@ const WIKI_ENDPOINT = '/wiki';
 
 export const backendClient = {
     async getGasInfoAsync(): Promise<WebsiteBackendGasInfo> {
-        const result = await requestAsync(ETH_GAS_STATION_ENDPOINT);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, ETH_GAS_STATION_ENDPOINT);
         return result;
     },
     async getPriceInfosAsync(tokenAddresses: string[]): Promise<WebsiteBackendPriceInfo[]> {
@@ -30,41 +22,15 @@ export const backendClient = {
         const queryParams = {
             tokens: joinedTokenAddresses,
         };
-        const result = await requestAsync(PRICES_ENDPOINT, queryParams);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, PRICES_ENDPOINT, queryParams);
         return result;
     },
     async getRelayerInfosAsync(): Promise<WebsiteBackendRelayerInfo[]> {
-        const result = await requestAsync(RELAYERS_ENDPOINT);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, RELAYERS_ENDPOINT);
         return result;
     },
     async getWikiArticlesBySectionAsync(): Promise<ArticlesBySection> {
-        const result = await requestAsync(WIKI_ENDPOINT);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, WIKI_ENDPOINT);
         return result;
     },
 };
-
-async function requestAsync(endpoint: string, queryParams?: object): Promise<any> {
-    const query = queryStringFromQueryParams(queryParams);
-    const url = `${configs.BACKEND_BASE_URL}${endpoint}${query}`;
-    const response = await fetch(url);
-    if (response.status !== 200) {
-        const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`;
-        logUtils.log(errorText);
-        const error = Error(errorText);
-        // tslint:disable-next-line:no-floating-promises
-        errorReporter.reportAsync(error);
-        throw error;
-    }
-    const result = await response.json();
-    return result;
-}
-
-function queryStringFromQueryParams(queryParams?: object): string {
-    // if params are undefined or empty, return an empty string
-    if (_.isUndefined(queryParams) || _.isEmpty(queryParams)) {
-        return '';
-    }
-    // stringify the formatted object
-    const stringifiedParams = queryString.stringify(queryParams);
-    return `?${stringifiedParams}`;
-}
diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts
new file mode 100644
index 000000000..d2e902db5
--- /dev/null
+++ b/packages/website/ts/utils/fetch_utils.ts
@@ -0,0 +1,33 @@
+import { logUtils } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as queryString from 'query-string';
+
+import { errorReporter } from 'ts/utils/error_reporter';
+
+export const fetchUtils = {
+    async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> {
+        const query = queryStringFromQueryParams(queryParams);
+        const url = `${baseUrl}${path}${query}`;
+        const response = await fetch(url);
+        if (response.status !== 200) {
+            const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`;
+            logUtils.log(errorText);
+            const error = Error(errorText);
+            // tslint:disable-next-line:no-floating-promises
+            errorReporter.reportAsync(error);
+            throw error;
+        }
+        const result = await response.json();
+        return result;
+    },
+};
+
+function queryStringFromQueryParams(queryParams?: object): string {
+    // if params are undefined or empty, return an empty string
+    if (_.isUndefined(queryParams) || _.isEmpty(queryParams)) {
+        return '';
+    }
+    // stringify the formatted object
+    const stringifiedParams = queryString.stringify(queryParams);
+    return `?${stringifiedParams}`;
+}