Reduce Shapeshift Requests (#1463)

* Use market info instead of fetching each and every pair.

* Make loaders the size of the content.

common/api/shapeshift.ts

@@ -118,26 +118,20 @@ class ShapeshiftService {
 
   public getAllRates = async () => {
     const marketInfo = await this.getMarketInfo();
-    const pairRates = await this.getPairRates(marketInfo);
+    const pairRates = await this.filterPairs(marketInfo);
     const checkAvl = await this.checkAvl(pairRates);
     const mappedRates = this.mapMarketInfo(checkAvl);
     return mappedRates;
   };
 
-  private getPairRates(marketInfo: ShapeshiftMarketInfo[]) {
-    const filteredMarketInfo = marketInfo.filter(obj => {
+  private filterPairs(marketInfo: ShapeshiftMarketInfo[]) {
+    return marketInfo.filter(obj => {
       const { pair } = obj;
       const pairArr = pair.split('_');
       return this.whitelist.includes(pairArr[0]) && this.whitelist.includes(pairArr[1])
         ? true
         : 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[]) {
@@ -174,12 +168,6 @@ class ShapeshiftService {
       .then(parseJSON);
   }
 
-  private getSinglePairRate(pair: string) {
-    return fetch(`${this.url}/rate/${pair}`)
-      .then(checkHttpStatus)
-      .then(parseJSON);
-  }
-
   private getMarketInfo() {
     return fetch(`${this.url}/marketinfo`)
       .then(checkHttpStatus)

common/containers/Tabs/Swap/components/CurrencySwap.scss

@@ -66,4 +66,11 @@
   &-submit {
     margin-top: 0.5rem;
   }
+
+  &-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 175px;
+  }
 }

common/containers/Tabs/Swap/components/CurrencySwap.tsx

@@ -375,7 +375,9 @@ export default class CurrencySwap extends PureComponent<Props, State> {
             </div>
           </React.Fragment>
         ) : (
-          <Spinner />
+          <div className="CurrencySwap-loader">
+            <Spinner size="x3" />
+          </div>
         )}
       </article>
     );

common/containers/Tabs/Swap/components/CurrentRates.scss

@@ -27,6 +27,14 @@
     &-rate {
       color: #fff;
 
+      &.is-loading {
+        display: flex;
+        align-items: center;
+        align-self: center;
+        justify-content: center;
+        height: 50px;
+      }
+
       &-input {
         display: inline-block;
         width: 16%;

common/containers/Tabs/Swap/components/CurrentRates.tsx

@@ -152,25 +152,25 @@ class CurrentRates extends PureComponent<Props> {
     } else {
       // TODO - de-dup
       children = (
-        <>
+        <React.Fragment>
           <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} />
             </div>
-            <div className="SwapRates-panel-rate">
+            <div className="SwapRates-panel-rate is-loading">
               <Spinner size="x1" light={true} />
             </div>
           </div>
 
           <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} />
             </div>
-            <div className="SwapRates-panel-rate">
+            <div className="SwapRates-panel-rate is-loading">
               <Spinner size="x1" light={true} />
             </div>
           </div>
-        </>
+        </React.Fragment>
       );
     }