Merge pull request #4203 from LedgerHQ/bugfix/LIVE-8841

Bugfix(LIVE-8841): default provider icon to use boxed mode

.changeset/beige-needles-sip.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+---
+
+Default ProviderIcon to boxed mode in order to support light and dark mode out of the box

apps/ledger-live-desktop/src/renderer/components/ProviderIcon/index.tsx

@@ -13,7 +13,7 @@ export type Props = {
 const ProviderIcon = ({
   name,
   size = "S",
-  boxed = false,
+  boxed = true,
   alt = `${name} icon`,
 }: Props): JSX.Element | null => {
   const iconUrl = getProviderIconUrl({ boxed, name });

apps/ledger-live-desktop/src/renderer/families/ethereum/StakeFlowModal/StakingIcon.tsx

@@ -46,7 +46,7 @@ export function StakingIcon({ icon }: Props) {
   if (iconType === "provider") {
     return (
       <ProviderIconContainer>
-        <ProviderIcon name={iconName} size="S" boxed={true} />
+        <ProviderIcon name={iconName} size="S" />
       </ProviderIconContainer>
     );
   }

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Rates/Rate.tsx

@@ -59,7 +59,7 @@ function Rate({
     >
       {icon && (
         <Box mr={2}>
-          <ProviderIcon size="S" name={icon} boxed={true} />
+          <ProviderIcon size="S" name={icon} />
         </Box>
       )}
       <Box flex={1}>

apps/ledger-live-mobile/src/components/ProviderIcon/index.tsx

@@ -2,16 +2,21 @@ import React from "react";
 import { getProviderIconUrl } from "@ledgerhq/live-common/icons/providers/providers";
 import { ProviderIconSize } from "@ledgerhq/live-common/icons/providers/sizes";
 import * as Styles from "./styles";
+import { SvgUri } from "react-native-svg";
 
 export type Props = {
   name: string;
   size?: ProviderIconSize;
   boxed?: boolean;
 };
 
-const ProviderIcon = ({ name, size = "S", boxed = false }: Props): JSX.Element | null => {
+const ProviderIcon = ({ name, size = "S", boxed = true }: Props): JSX.Element | null => {
   const iconUrl = getProviderIconUrl({ boxed, name });
-  return <Styles.Icon uri={iconUrl} size={size} />;
+  return (
+    <Styles.Contianer size={size}>
+      <SvgUri uri={iconUrl} />
+    </Styles.Contianer>
+  );
 };
 
 export default ProviderIcon;

apps/ledger-live-mobile/src/components/ProviderIcon/styles.ts

@@ -1,12 +1,12 @@
 import styled from "styled-components/native";
-import { SvgUri } from "react-native-svg";
 import { ProviderIconSize, ProviderIconSizes } from "@ledgerhq/live-common/icons/providers/sizes";
+import { View } from "react-native";
 
 type StyledIconProps = {
   size: ProviderIconSize;
 };
 
-export const Icon = styled(SvgUri)<StyledIconProps>`
+export const Contianer = styled(View)<StyledIconProps>`
   border-radius: 8px;
   width: ${({ size }) => ProviderIconSizes[size]}px;
   height: ${({ size }) => ProviderIconSizes[size]}px;