diff --git a/.changeset/cold-paws-shave.md b/.changeset/cold-paws-shave.md new file mode 100644 index 000000000000..7623fe45c03d --- /dev/null +++ b/.changeset/cold-paws-shave.md @@ -0,0 +1,5 @@ +--- +"ledger-live-desktop": patch +--- + +FIx fallback when no image on MArketWidget diff --git a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx index 30ffb0240374..1951ac551815 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx +++ b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx @@ -37,8 +37,14 @@ function WidgetRow({ data, index, isFirst, range }: PropsBodyElem) { {index} - - {"currency + + {data.image ? ( + {"currency + ) : ( + + {data.name.charAt(0).toUpperCase()} + + )} @@ -96,15 +102,20 @@ function WidgetRow({ data, index, isFirst, range }: PropsBodyElem) { ); } -const CryptoCurrencyIconWrapper = styled.div` +const CryptoCurrencyIconWrapper = styled(Flex)<{ + hasImage?: boolean; +}>` height: 32px; width: 32px; position: relative; border-radius: 32px; overflow: hidden; + background-color: ${p => (p.hasImage ? "transparent" : p.theme.colors.opacityDefault.c05)}; img { object-fit: cover; } + align-items: center; + justify-content: center; `; const EllipsisText = styled(Text)`