crypto-icons bump and LLM CurrencyIcon simplification

.changeset/stupid-plants-laugh.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+CurrencyIcon simplification and cache bug fix

apps/ledger-live-mobile/android/app/build.gradle

@@ -126,7 +126,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 36176158
-        versionName "3.97.1"
+        versionName "3.98.0"
         resValue "string", "build_config_package", "com.ledger.live"
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'

apps/ledger-live-mobile/src/components/AccountCard.tsx

@@ -75,7 +75,7 @@ const AccountCard = ({
         style={style}
         {...props}
       >
-        <CurrencyIcon currency={currency} disabled={disabled} size={iconSize} circle />
+        <CurrencyIcon currency={currency} disabled={disabled} size={iconSize} />
         <Flex flexGrow={1} flexShrink={1} marginLeft={4} flexDirection="row" alignItems="center">
           <Flex minWidth={20} flexShrink={1}>
             <Text

apps/ledger-live-mobile/src/components/AssetCentricGraphCard.tsx

@@ -141,7 +141,7 @@ function AssetCentricGraphCard({
       >
         <Animated.View style={[BalanceOpacity]}>
           <Flex alignItems="center">
-            <CurrencyIcon size={32} currency={currency} circle />
+            <CurrencyIcon size={32} currency={currency} />
             <Flex alignItems="center">
               <Flex>
                 {!balanceHistory ? (

apps/ledger-live-mobile/src/components/AssetRowLayout.tsx

@@ -51,7 +51,7 @@ const AssetRowLayout = ({
         />
       )}
       <Flex flexDirection="row" pt={topLink ? 0 : 6} pb={bottomLink ? 0 : 6} alignItems="center">
-        <CurrencyIcon currency={currency} size={40} circle />
+        <CurrencyIcon currency={currency} size={40} />
         <Flex flex={1} justifyContent="center" ml={4}>
           <Flex mb={1} flexDirection="row" justifyContent="space-between">
             <Flex flexGrow={1} flexShrink={1} flexDirection="row" alignItems="center">

apps/ledger-live-mobile/src/components/CurrencyIcon.tsx

@@ -1,8 +1,7 @@
-import React, { useMemo, memo } from "react";
+import React, { memo } from "react";
 import { Currency } from "@ledgerhq/types-cryptoassets";
-import { Flex, ensureContrast } from "@ledgerhq/native-ui";
+import { Flex } from "@ledgerhq/native-ui";
 import styled, { useTheme } from "styled-components/native";
-import { getCurrencyColor } from "~/helpers/getCurrencyColor";
 import { CryptoIcon } from "@ledgerhq/native-ui/pre-ldls";
 import { getValidCryptoIconSizeNative } from "@ledgerhq/live-common/helpers/cryptoIconSize";
 
@@ -12,32 +11,15 @@ const DefaultWrapper = styled(Flex)<{ disabled?: boolean }>`
   opacity: ${p => (p.disabled ? 0.6 : 1)};
 `;
 
-const CircleWrapper = styled(Flex)<{ disabled?: boolean }>`
-  border-radius: 9999px;
-  border: 1px solid transparent;
-  background: ${p => p.color};
-  height: ${p => p.size}px;
-  width: ${p => p.size}px;
-  align-items: center;
-  justify-content: center;
-  opacity: ${p => (p.disabled ? 0.6 : 1)};
-`;
-
 type Props = {
   currency: Currency;
   size: number;
-  bg?: string;
-  circle?: boolean;
   disabled?: boolean;
   hideNetwork?: boolean;
 };
 
-const CurrencyIcon = ({ size, currency, circle, bg, disabled, hideNetwork }: Props) => {
+const CurrencyIcon = ({ size, currency, disabled, hideNetwork }: Props) => {
   const { colors } = useTheme();
-  const bgColor = useMemo(
-    () => ensureContrast(getCurrencyColor(currency), colors.constant.white),
-    [colors, currency],
-  );
   const validIconSize = getValidCryptoIconSizeNative(size);
 
   if (currency.type === "FiatCurrency") {
@@ -46,29 +28,24 @@ const CurrencyIcon = ({ size, currency, circle, bg, disabled, hideNetwork }: Pro
 
   const ledgerId = currency.id;
   const ticker = currency.ticker;
-  const network = hideNetwork
-    ? undefined
-    : currency.type === "TokenCurrency"
-      ? currency.parentCurrency.id
-      : undefined;
-
-  const cryptoIconElement = (
-    <CryptoIcon
-      ledgerId={ledgerId}
-      ticker={ticker}
-      size={validIconSize}
-      backgroundColor={colors.background.main}
-      {...(network && { network })}
-    />
-  );
 
-  if (circle) {
-    return (
-      <CircleWrapper size={size} color={bg || bgColor} disabled={disabled}>
-        {cryptoIconElement}
-      </CircleWrapper>
+  const cryptoIconElement =
+    !hideNetwork && currency.type === "TokenCurrency" ? (
+      <CryptoIcon
+        ledgerId={ledgerId}
+        ticker={ticker}
+        size={validIconSize}
+        backgroundColor={colors.background.main}
+        network={currency.parentCurrency.id}
+      />
+    ) : (
+      <CryptoIcon
+        ledgerId={ledgerId}
+        ticker={ticker}
+        size={validIconSize}
+        backgroundColor={colors.background.main}
+      />
     );
-  }
 
   if (disabled) {
     return <DefaultWrapper disabled={disabled}>{cryptoIconElement}</DefaultWrapper>;

apps/ledger-live-mobile/src/components/DelegationDrawer.tsx

@@ -60,7 +60,7 @@ export default function DelegationDrawer({
           left={
             icon || (
               <Circle size={iconWidth} bg={rgba(color, 0.2)}>
-                <CurrencyIcon size={iconWidth / 2} currency={currency} bg={"rgba(0,0,0,0)"} />
+                <CurrencyIcon size={iconWidth / 2} currency={currency} />
               </Circle>
             )
           }

apps/ledger-live-mobile/src/components/FabActions/modals/ZeroBalanceDisabledModalContent.tsx

@@ -106,7 +106,7 @@ function ZeroBalanceDisabledModalContent({
         currencyTicker: actionCurrency?.ticker,
         actionName: action.label,
       })}
-      Icon={<CurrencyIcon size={48} currency={actionCurrency as Currency} circle />}
+      Icon={<CurrencyIcon size={48} currency={actionCurrency as Currency} />}
     >
       <Flex mx={16} flexDirection={"row"}>
         <Button onPress={goToBuy} type="main" size={"large"} outline flex={1} mr={3}>

apps/ledger-live-mobile/src/families/hedera/AssociateTokenFlow/SummaryFromSection.tsx

@@ -29,7 +29,7 @@ function SummaryFromSection({ token }: Readonly<Props>) {
       data={
         <View style={styles.container}>
           <View style={styles.currencyIcon}>
-            <CurrencyIcon size={16} currency={token} circle />
+            <CurrencyIcon size={16} currency={token} />
           </View>
           <LText numberOfLines={1} style={styles.text}>
             {token.name}

apps/ledger-live-mobile/src/families/hedera/Confirmation.tsx

@@ -5,7 +5,6 @@ import QRCode from "react-native-qrcode-svg";
 import { Trans } from "react-i18next";
 import type { Account, TokenAccount } from "@ledgerhq/types-live";
 import { getMainAccount, getAccountCurrency } from "@ledgerhq/live-common/account/index";
-import { getCurrencyColor } from "@ledgerhq/live-common/currencies/color";
 import { CompositeScreenProps } from "@react-navigation/native";
 import styled, { useTheme } from "styled-components/native";
 import { Box, Flex, Text } from "@ledgerhq/native-ui";
@@ -109,12 +108,7 @@ export default function ReceiveConfirmation({ route }: Props) {
                     bg="constant.white"
                     position="absolute"
                   >
-                    <CurrencyIcon
-                      currency={currency}
-                      bg={getCurrencyColor(currency) || colors.constant.black}
-                      size={48}
-                      circle
-                    />
+                    <CurrencyIcon currency={currency} size={48} />
                   </Flex>
                 </Flex>
                 <Text

apps/ledger-live-mobile/src/families/polkadot/components/NominationDrawer.tsx

@@ -48,7 +48,7 @@ export default function NominationDrawer({
             left={
               icon || (
                 <Circle size={iconWidth} bg={rgba(color, 0.2)}>
-                  <CurrencyIcon size={iconWidth / 2} currency={currency} bg={"rgba(0,0,0,0)"} />
+                  <CurrencyIcon size={iconWidth / 2} currency={currency} />
                 </Circle>
               )
             }

apps/ledger-live-mobile/src/newArch/features/Accounts/components/AccountsListView/components/AccountItem/index.tsx

@@ -45,7 +45,7 @@ const View: React.FC<ViewProps> = ({
         <Text numberOfLines={1} variant="body" color="neutral.c70" flexShrink={1}>
           {formattedAddress}
         </Text>
-        <CurrencyIcon currency={currency} size={20} circle hideNetwork />
+        <CurrencyIcon currency={currency} size={20} hideNetwork />
       </Flex>
     </Flex>
     {!hideBalanceInfo && (

apps/ledger-live-mobile/src/newArch/features/Assets/components/AssetsListView/components/AssetItem.tsx

@@ -23,7 +23,7 @@ const AssetItem: React.FC<AssetItemProps> = ({ asset, balance }) => {
 
   return (
     <>
-      <CurrencyIcon currency={currency} size={40} circle />
+      <CurrencyIcon currency={currency} size={40} />
       <Flex flex={1} flexShrink={1} testID={`assetItem-${currency.name}`}>
         <Text
           numberOfLines={1}

apps/ledger-live-mobile/src/screens/Analytics/DistributionCard.tsx

@@ -83,7 +83,7 @@ function DistributionCard({ item: { currency, amount, distribution } }: Props) {
     <Container onPress={navigateToAccounts}>
       <Flex flexDirection="row">
         <IconContainer>
-          <CurrencyIcon currency={currency} size={35} circle />
+          <CurrencyIcon currency={currency} size={35} />
         </IconContainer>
         <CoinInfoContainer>
           <CurrencyRow>

apps/ledger-live-mobile/src/screens/ReceiveFunds/03-Confirmation.tsx

@@ -11,7 +11,6 @@ import {
   getMainAccount,
   getAccountCurrency,
 } from "@ledgerhq/live-common/account/index";
-import { getCurrencyColor } from "@ledgerhq/live-common/currencies/color";
 import FeatureToggle from "@ledgerhq/live-common/featureFlags/FeatureToggle";
 import { useTheme } from "styled-components/native";
 import { Flex, Text, IconsLegacy, Button, Box, BannerCard, Icons } from "@ledgerhq/native-ui";
@@ -379,12 +378,7 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
                   bg="constant.white"
                   position="absolute"
                 >
-                  <CurrencyIcon
-                    currency={currency}
-                    bg={getCurrencyColor(currency) || colors.constant.black}
-                    size={48}
-                    circle
-                  />
+                  <CurrencyIcon currency={currency} size={48} />
                 </Flex>
               </Flex>
               <Text

apps/ledger-live-mobile/src/screens/Settings/Accounts/TokenContextualModal.tsx

@@ -93,7 +93,7 @@ const TokenContextualModal = ({
       preventBackdropClick={false}
       Icon={
         showingContextMenu ? (
-          <CurrencyIcon size={48} currency={getAccountCurrency(account)} circle />
+          <CurrencyIcon size={48} currency={getAccountCurrency(account)} />
         ) : undefined
       }
       title={showingContextMenu ? account.token.name : undefined}

apps/ledger-live-mobile/src/screens/Settings/Debug/Generators/GenerateMockAccountsSelect.tsx

@@ -107,7 +107,7 @@ export const GenerateMockAccountSelectScreen = () => {
                 checked={checkedCurrencies[id]}
                 label={
                   <Flex flexDirection="row" alignItems="center" pt={2}>
-                    <CurrencyIcon circle size={32} currency={currency} />
+                    <CurrencyIcon size={32} currency={currency} />
                     <Text style={{ marginLeft: 5 }}>{name}</Text>
                   </Flex>
                 }

apps/ledger-live-mobile/src/screens/SignMessage/01-Summary.tsx

@@ -137,7 +137,7 @@ function SignSummary({
             </LText>
             <View style={styles.headerContainer}>
               <View style={styles.headerIconContainer}>
-                <CurrencyIcon size={18} currency={mainAccount.currency} circle />
+                <CurrencyIcon size={18} currency={mainAccount.currency} />
               </View>
               <LText semiBold secondary numberOfLines={1}>
                 {maybeAccountName}

apps/web-tools/package.json

@@ -19,7 +19,7 @@
     "@codemirror/view": "^6.28.2",
     "@ledgerhq/coin-framework": "workspace:^",
     "@ledgerhq/cryptoassets": "workspace:^",
-    "@ledgerhq/crypto-icons": "1.3.0",
+    "@ledgerhq/crypto-icons": "catalog:",
     "@ledgerhq/domain-service": "workspace:^",
     "@ledgerhq/errors": "workspace:^",
     "@ledgerhq/hw-app-eth": "workspace:^",

libs/ui/packages/native/package.json

@@ -57,7 +57,7 @@
     "storybook-generate": "sb-rn-get-stories"
   },
   "dependencies": {
-    "@ledgerhq/crypto-icons": "1.3.0",
+    "@ledgerhq/crypto-icons": "catalog:",
     "@ledgerhq/icons-ui": "workspace:^",
     "@ledgerhq/ui-shared": "workspace:^",
     "color": "^4.0.0",

libs/ui/packages/react/package.json

@@ -76,7 +76,7 @@
     "unimported": "unimported"
   },
   "dependencies": {
-    "@ledgerhq/crypto-icons": "1.3.0",
+    "@ledgerhq/crypto-icons": "catalog:",
     "@ledgerhq/icons-ui": "workspace:^",
     "@ledgerhq/ui-shared": "workspace:^",
     "@tanstack/react-virtual": "3.13.6",