1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

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

This commit is contained in:
ryanml 2021-08-03 12:09:39 -07:00 committed by GitHub
parent 24d563fc2c
commit 7f0b2a81ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 12 deletions

View File

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

View File

@ -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 {

View File

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