From ad838f6eb2cd1485aeb26cbd3c2602129a590068 Mon Sep 17 00:00:00 2001
From: William O'Beirne <wbobeirne@gmail.com>
Date: Fri, 6 Apr 2018 14:59:07 -0400
Subject: [PATCH] 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                       | 18 +++---------------
 .../Tabs/Swap/components/CurrencySwap.scss     |  7 +++++++
 .../Tabs/Swap/components/CurrencySwap.tsx      |  4 +++-
 .../Tabs/Swap/components/CurrentRates.scss     |  8 ++++++++
 .../Tabs/Swap/components/CurrentRates.tsx      | 12 ++++++------
 5 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/common/api/shapeshift.ts b/common/api/shapeshift.ts
index 66b3bc83..3cd255fa 100644
--- a/common/api/shapeshift.ts
+++ b/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)
diff --git a/common/containers/Tabs/Swap/components/CurrencySwap.scss b/common/containers/Tabs/Swap/components/CurrencySwap.scss
index b7cf1f1e..d13c60d4 100644
--- a/common/containers/Tabs/Swap/components/CurrencySwap.scss
+++ b/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;
+  }
 }
diff --git a/common/containers/Tabs/Swap/components/CurrencySwap.tsx b/common/containers/Tabs/Swap/components/CurrencySwap.tsx
index 09f46108..e177fef9 100644
--- a/common/containers/Tabs/Swap/components/CurrencySwap.tsx
+++ b/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>
     );
diff --git a/common/containers/Tabs/Swap/components/CurrentRates.scss b/common/containers/Tabs/Swap/components/CurrentRates.scss
index 0ed846f8..d8f193df 100644
--- a/common/containers/Tabs/Swap/components/CurrentRates.scss
+++ b/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%;
diff --git a/common/containers/Tabs/Swap/components/CurrentRates.tsx b/common/containers/Tabs/Swap/components/CurrentRates.tsx
index 3253be41..2cdf218f 100644
--- a/common/containers/Tabs/Swap/components/CurrentRates.tsx
+++ b/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>
       );
     }