Reduce Shapeshift Requests (#1463)
* Use market info instead of fetching each and every pair. * Make loaders the size of the content.
This commit is contained in:
parent
8fb0e03d8d
commit
ad838f6eb2
|
@ -118,26 +118,20 @@ class ShapeshiftService {
|
||||||
|
|
||||||
public getAllRates = async () => {
|
public getAllRates = async () => {
|
||||||
const marketInfo = await this.getMarketInfo();
|
const marketInfo = await this.getMarketInfo();
|
||||||
const pairRates = await this.getPairRates(marketInfo);
|
const pairRates = await this.filterPairs(marketInfo);
|
||||||
const checkAvl = await this.checkAvl(pairRates);
|
const checkAvl = await this.checkAvl(pairRates);
|
||||||
const mappedRates = this.mapMarketInfo(checkAvl);
|
const mappedRates = this.mapMarketInfo(checkAvl);
|
||||||
return mappedRates;
|
return mappedRates;
|
||||||
};
|
};
|
||||||
|
|
||||||
private getPairRates(marketInfo: ShapeshiftMarketInfo[]) {
|
private filterPairs(marketInfo: ShapeshiftMarketInfo[]) {
|
||||||
const filteredMarketInfo = marketInfo.filter(obj => {
|
return marketInfo.filter(obj => {
|
||||||
const { pair } = obj;
|
const { pair } = obj;
|
||||||
const pairArr = pair.split('_');
|
const pairArr = pair.split('_');
|
||||||
return this.whitelist.includes(pairArr[0]) && this.whitelist.includes(pairArr[1])
|
return this.whitelist.includes(pairArr[0]) && this.whitelist.includes(pairArr[1])
|
||||||
? true
|
? true
|
||||||
: false;
|
: false;
|
||||||
});
|
});
|
||||||
const pairRates = filteredMarketInfo.map(p => {
|
|
||||||
const { pair } = p;
|
|
||||||
const singlePair = Promise.resolve(this.getSinglePairRate(pair));
|
|
||||||
return { ...p, ...singlePair };
|
|
||||||
});
|
|
||||||
return pairRates;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async checkAvl(pairRates: IPairData[]) {
|
private async checkAvl(pairRates: IPairData[]) {
|
||||||
|
@ -174,12 +168,6 @@ class ShapeshiftService {
|
||||||
.then(parseJSON);
|
.then(parseJSON);
|
||||||
}
|
}
|
||||||
|
|
||||||
private getSinglePairRate(pair: string) {
|
|
||||||
return fetch(`${this.url}/rate/${pair}`)
|
|
||||||
.then(checkHttpStatus)
|
|
||||||
.then(parseJSON);
|
|
||||||
}
|
|
||||||
|
|
||||||
private getMarketInfo() {
|
private getMarketInfo() {
|
||||||
return fetch(`${this.url}/marketinfo`)
|
return fetch(`${this.url}/marketinfo`)
|
||||||
.then(checkHttpStatus)
|
.then(checkHttpStatus)
|
||||||
|
|
|
@ -66,4 +66,11 @@
|
||||||
&-submit {
|
&-submit {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-loader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 175px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -375,7 +375,9 @@ export default class CurrencySwap extends PureComponent<Props, State> {
|
||||||
</div>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
) : (
|
) : (
|
||||||
<Spinner />
|
<div className="CurrencySwap-loader">
|
||||||
|
<Spinner size="x3" />
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
|
|
|
@ -27,6 +27,14 @@
|
||||||
&-rate {
|
&-rate {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
|
&.is-loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-self: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
&-input {
|
&-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16%;
|
width: 16%;
|
||||||
|
|
|
@ -152,25 +152,25 @@ class CurrentRates extends PureComponent<Props> {
|
||||||
} else {
|
} else {
|
||||||
// TODO - de-dup
|
// TODO - de-dup
|
||||||
children = (
|
children = (
|
||||||
<>
|
<React.Fragment>
|
||||||
<div className="SwapRates-panel-side col-sm-6">
|
<div className="SwapRates-panel-side col-sm-6">
|
||||||
<div className="SwapRates-panel-rate">
|
<div className="SwapRates-panel-rate is-loading">
|
||||||
<Spinner size="x1" light={true} />
|
<Spinner size="x1" light={true} />
|
||||||
</div>
|
</div>
|
||||||
<div className="SwapRates-panel-rate">
|
<div className="SwapRates-panel-rate is-loading">
|
||||||
<Spinner size="x1" light={true} />
|
<Spinner size="x1" light={true} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="SwapRates-panel-side col-sm-6">
|
<div className="SwapRates-panel-side col-sm-6">
|
||||||
<div className="SwapRates-panel-rate">
|
<div className="SwapRates-panel-rate is-loading">
|
||||||
<Spinner size="x1" light={true} />
|
<Spinner size="x1" light={true} />
|
||||||
</div>
|
</div>
|
||||||
<div className="SwapRates-panel-rate">
|
<div className="SwapRates-panel-rate is-loading">
|
||||||
<Spinner size="x1" light={true} />
|
<Spinner size="x1" light={true} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue