crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hit website backend for price information

Browse Source
This commit is contained in:
Brandon Millman
2018-04-30 16:36:42 -07:00
parent 2403323463
commit 1131d66b3d
4 changed files with 12 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/website/ts/components/wallet/wallet.tsx
View File

@@ -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,

3
packages/website/ts/types.ts
View File

@@ -509,8 +509,7 @@ export interface WebsiteBackendRelayerInfo {
}
export interface WebsiteBackendPriceInfo {
price: string;
address: string;
[symbol: string]: string;
}
export interface WebsiteBackendGasInfo {

10
packages/website/ts/utils/backend_client.ts
View File

@@ -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;

2
packages/website/ts/utils/configs.ts
View File

@@ -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'],