m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 20:39:08 +01:00
Code

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js
View File

@ -10,22 +10,31 @@ function hexToRGB(hex, alpha) {
return `rgba(${r}, ${g}, ${b}, ${alpha})`; return `rgba(${r}, ${g}, ${b}, ${alpha})`;
} }
export default function AggregatorLogo({ icon, color }) { export default function AggregatorLogo({ name, icon, color }) {
return ( return (
<div className="loading-swaps-quotes__logo"> <div className="loading-swaps-quotes__logo">
<div {icon && color ? (
style={{ <div
background: color, style={{
boxShadow: `0px 4px 20px ${hexToRGB(color, 0.25)}`, background: color,
}} boxShadow: `0px 4px 20px ${hexToRGB(color, 0.25)}`,
> }}
<img src={icon} alt="" /> >
</div> <img src={icon} alt="" />
</div>
) : (
name && (
<div>
<span>{name}</span>
</div>
)
)}
</div> </div>
); );
} }
AggregatorLogo.propTypes = { AggregatorLogo.propTypes = {
icon: PropTypes.string.isRequired, name: PropTypes.string,
color: PropTypes.string.isRequired, icon: PropTypes.string,
color: PropTypes.string,
}; };

5
ui/pages/swaps/loading-swaps-quotes/index.scss
View File

@ -107,12 +107,17 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: $ui-black;
} }
img { img {
width: 74px; width: 74px;
height: 30px; height: 30px;
} }
span {
color: $ui-white;
}
} }
&__loading-bar-container { &__loading-bar-container {

3
ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
View File

@ -220,7 +220,7 @@ export default function LoadingSwapsQuotes({
key={`aggregator-logo-${aggName}`} key={`aggregator-logo-${aggName}`}
> >
<AggregatorLogo <AggregatorLogo
aggregatorName={aggName} name={aggregatorMetadata[aggName]?.title}
icon={aggregatorMetadata[aggName]?.icon} icon={aggregatorMetadata[aggName]?.icon}
color={aggregatorMetadata[aggName]?.color} color={aggregatorMetadata[aggName]?.color}
/> />
@ -245,6 +245,7 @@ LoadingSwapsQuotes.propTypes = {
onDone: PropTypes.func.isRequired, onDone: PropTypes.func.isRequired,
aggregatorMetadata: PropTypes.objectOf( aggregatorMetadata: PropTypes.objectOf(
PropTypes.shape({ PropTypes.shape({
title: PropTypes.string,
color: PropTypes.string, color: PropTypes.string,
icon: PropTypes.string, icon: PropTypes.string,
}), }),