From 3c0846df8404689abe6879b8b1d9c964a3c0be35 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 3 Aug 2021 12:09:39 -0700
Subject: [PATCH] Fall back to aggregator name when icon is unavailable (Swaps
 Load View) (#11718)

---
 .../loading-swaps-quotes/aggregator-logo.js   | 31 ++++++++++++-------
 .../swaps/loading-swaps-quotes/index.scss     |  5 +++
 .../loading-swaps-quotes.js                   |  3 +-
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js b/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js
index 2d43d83a6..395389ae5 100644
--- a/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js
+++ b/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js
@@ -10,22 +10,31 @@ function hexToRGB(hex, alpha) {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 
-export default function AggregatorLogo({ icon, color }) {
+export default function AggregatorLogo({ name, icon, color }) {
   return (
     <div className="loading-swaps-quotes__logo">
-      <div
-        style={{
-          background: color,
-          boxShadow: `0px 4px 20px ${hexToRGB(color, 0.25)}`,
-        }}
-      >
-        <img src={icon} alt="" />
-      </div>
+      {icon && color ? (
+        <div
+          style={{
+            background: color,
+            boxShadow: `0px 4px 20px ${hexToRGB(color, 0.25)}`,
+          }}
+        >
+          <img src={icon} alt="" />
+        </div>
+      ) : (
+        name && (
+          <div>
+            <span>{name}</span>
+          </div>
+        )
+      )}
     </div>
   );
 }
 
 AggregatorLogo.propTypes = {
-  icon: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  icon: PropTypes.string,
+  color: PropTypes.string,
 };
diff --git a/ui/pages/swaps/loading-swaps-quotes/index.scss b/ui/pages/swaps/loading-swaps-quotes/index.scss
index 9c70f0503..e9b21bf0e 100644
--- a/ui/pages/swaps/loading-swaps-quotes/index.scss
+++ b/ui/pages/swaps/loading-swaps-quotes/index.scss
@@ -107,12 +107,17 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      background: $ui-black;
     }
 
     img {
       width: 74px;
       height: 30px;
     }
+
+    span {
+      color: $ui-white;
+    }
   }
 
   &__loading-bar-container {
diff --git a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
index b0a5760f4..1e8d389f6 100644
--- a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
+++ b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
@@ -220,7 +220,7 @@ export default function LoadingSwapsQuotes({
                 key={`aggregator-logo-${aggName}`}
               >
                 <AggregatorLogo
-                  aggregatorName={aggName}
+                  name={aggregatorMetadata[aggName]?.title}
                   icon={aggregatorMetadata[aggName]?.icon}
                   color={aggregatorMetadata[aggName]?.color}
                 />
@@ -245,6 +245,7 @@ LoadingSwapsQuotes.propTypes = {
   onDone: PropTypes.func.isRequired,
   aggregatorMetadata: PropTypes.objectOf(
     PropTypes.shape({
+      title: PropTypes.string,
       color: PropTypes.string,
       icon: PropTypes.string,
     }),