Fall back to aggregator name when icon is unavailable (Swaps Load View) (#11718)

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,
 };

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 {

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,
     }),