🐛 [BUGFIX] : Add Fallback for Market Widget Crypto icons (#7044)

LedgerHQ · Jun 10, 2024 · c1b405b · c1b405b
1 parent 6023f05
commit c1b405b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/.changeset/cold-paws-shave.md b/.changeset/cold-paws-shave.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+FIx fallback when no image on MArketWidget
diff --git a/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx b/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx
@@ -37,8 +37,14 @@ function WidgetRow({ data, index, isFirst, range }: PropsBodyElem) {
           {index}
         </Text>
 
-        <CryptoCurrencyIconWrapper>
-          <img width="32px" height="32px" src={data.image} alt={"currency logo"} />
+        <CryptoCurrencyIconWrapper hasImage={!!data.image}>
+          {data.image ? (
+            <img width="32px" height="32px" src={data.image} alt={"currency logo"} />
+          ) : (
+            <Text color="neutral.c100" variant="h5Inter" fontSize={12}>
+              {data.name.charAt(0).toUpperCase()}
+            </Text>
+          )}
         </CryptoCurrencyIconWrapper>
 
         <Flex ml={2} overflow="hidden" flexDirection="column" alignItems="left">
@@ -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)`