Hit website backend for price information

4 files changed, 12 insertions, 49 deletions

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 51399ae0b..9022eb1c9 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -37,9 +37,7 @@ import {
     TokenStateByAddress,
 } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
-import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
-import { fetchUtils } from 'ts/utils/fetch_utils';
 import { utils } from 'ts/utils/utils';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
 
@@ -130,13 +128,9 @@ 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';
-// Crypto compare recommends requesting no more than once every 10s: https://www.cryptocompare.com/api/?javascript#requests
-const CRYPTO_COMPARE_UPDATE_INTERVAL_MS = 10 * 1000;
 
 export class Wallet extends React.Component<WalletProps, WalletState> {
     private _isUnmounted: boolean;
-    private _cryptoCompareLastFetchTimestampMs?: number;
     constructor(props: WalletProps) {
         super(props);
         this._isUnmounted = false;
@@ -467,18 +461,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             );
             balanceAndAllowanceTupleByAddress[tokenAddress] = balanceAndAllowanceTuple;
         }
-        // if we are allowed to fetch prices do so, if not, keep the old price state
-        const canFetchPrices = this._canGetPrice();
-        let priceByAddress: ItemByAddress<BigNumber> = {};
-        if (canFetchPrices) {
-            priceByAddress = await this._getPricesByAddressAsync(tokenAddresses);
-        } else {
-            const cachedPricesByAddress = _.mapValues(
-                this.state.trackedTokenStateByAddress,
-                tokenState => tokenState.price,
-            );
-            priceByAddress = cachedPricesByAddress;
-        }
+        const priceByAddress = await this._getPriceByAddressAsync(tokenAddresses);
         const trackedTokenStateByAddress = _.reduce(
             tokenAddresses,
             (acc, address) => {
@@ -504,7 +487,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
     private async _refetchTokenStateAsync(tokenAddress: string) {
         await this._fetchBalancesAndAllowancesAsync([tokenAddress]);
     }
-    private async _getPricesByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> {
+    private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> {
         if (_.isEmpty(tokenAddresses)) {
             return {};
         }
@@ -520,23 +503,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 tokenAddressBySymbol[key] = address;
             }
         });
-        const joinedTokenSymbols = _.keys(tokenAddressBySymbol).join(',');
-        const queryParams = {
-            fsyms: joinedTokenSymbols,
-            tsyms: configs.FIAT_QUOTE_CURRENCY_SYMBOL,
-        };
+        const tokenSymbols = _.keys(tokenAddressBySymbol);
         try {
-            this._cryptoCompareLastFetchTimestampMs = Date.now();
-            const priceInfoBySymbol = await fetchUtils.requestAsync(
-                configs.CRYPTO_COMPARE_BASE_URL,
-                CRYPTO_COMPARE_MULTI_ENDPOINT,
-                queryParams,
-            );
-            const priceInfoByAddress = _.mapKeys(priceInfoBySymbol, (value, symbol) =>
+            const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols);
+            const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) =>
                 _.get(tokenAddressBySymbol, symbol),
             );
-            const result = _.mapValues(priceInfoByAddress, priceInfo => {
-                const price = _.get(priceInfo, configs.FIAT_QUOTE_CURRENCY_SYMBOL);
+            const result = _.mapValues(priceByAddress, price => {
                 const priceBigNumber = new BigNumber(price);
                 return priceBigNumber;
             });
@@ -545,13 +518,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             return {};
         }
     }
-    private _canGetPrice() {
-        const currentTimeStamp = Date.now();
-        const result =
-            _.isUndefined(this._cryptoCompareLastFetchTimestampMs) ||
-            this._cryptoCompareLastFetchTimestampMs + CRYPTO_COMPARE_UPDATE_INTERVAL_MS < currentTimeStamp;
-        return result;
-    }
     private _openWrappedEtherActionRow(wrappedEtherDirection: Side) {
         this.setState({
             wrappedEtherDirection,
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 2544e6735..f4fddb556 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -509,8 +509,7 @@ export interface WebsiteBackendRelayerInfo {
 }
 
 export interface WebsiteBackendPriceInfo {
-    price: string;
-    address: string;
+    [symbol: string]: string;
 }
 
 export interface WebsiteBackendGasInfo {
diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts
index ab0fb4f32..63e06fda7 100644
--- a/packages/website/ts/utils/backend_client.ts
+++ b/packages/website/ts/utils/backend_client.ts
@@ -14,13 +14,13 @@ export const backendClient = {
         const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, ETH_GAS_STATION_ENDPOINT);
         return result;
     },
-    async getPriceInfosAsync(tokenAddresses: string[]): Promise<WebsiteBackendPriceInfo[]> {
-        if (_.isEmpty(tokenAddresses)) {
-            return [];
+    async getPriceInfoAsync(tokenSymbols: string[]): Promise<WebsiteBackendPriceInfo> {
+        if (_.isEmpty(tokenSymbols)) {
+            return {};
         }
-        const joinedTokenAddresses = tokenAddresses.join(',');
+        const joinedTokenSymbols = tokenSymbols.join(',');
         const queryParams = {
-            tokens: joinedTokenAddresses,
+            tokens: joinedTokenSymbols,
         };
         const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, PRICES_ENDPOINT, queryParams);
         return result;
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index a214593d4..a54fc56a8 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -13,8 +13,6 @@ export const configs = {
     BACKEND_BASE_URL: 'https://website-api.0xproject.com',
     BASE_URL,
     BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
-    CRYPTO_COMPARE_BASE_URL: 'https://min-api.cryptocompare.com/data',
-    FIAT_QUOTE_CURRENCY_SYMBOL: 'USD',
     DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
     // WARNING: ZRX & WETH MUST always be default trackedTokens
     DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'],