✨feat(lld/ui): add sat icons to lib (#7734)

.changeset/odd-ants-dress.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"@ledgerhq/ui": patch
+---
+
+Add rare satoshis icons to ui package and a mapping inside LLD to use them

apps/ledger-live-desktop/.unimportedrc.json

@@ -21,10 +21,7 @@
     "src/generate-cryptoassets-md.ts",
 
     "src/newArch/features/Collectibles/**",
-    "src/newArch/features/AnalyticsOptInPrompt/**",
-    "src/newArch/features/WalletSync/**",
-    "src/newArch/components/ContextMenu/**",
-    "src/newArch/components/BreadCrumb/**",
+    "src/newArch/features/WalletSync/__tests__/shared.tsx",
     "src/renderer/DesktopStorageProvider.ts"
   ],
   "ignoreUnused": [

apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Icons.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Icons } from "@ledgerhq/react-ui";
+
+export const mappingKeysWithIconAndName = {
+  alpha: { icon: <Icons.OrdinalsAlpha />, name: "Alpha" },
+  black_epic: { icon: <Icons.OrdinalsBlackEpic />, name: "Black Epic" },
+  black_legendary: { icon: <Icons.OrdinalsBlackLegendary />, name: "Black Legendary" },
+  black_mythic: { icon: <Icons.OrdinalsBlackMythic />, name: "Black Mythic" },
+  black_rare: { icon: <Icons.OrdinalsBlackRare />, name: "Black Rare" },
+  black_uncommon: { icon: <Icons.OrdinalsBlackUncommon />, name: "Black Uncommon" },
+  block_9: { icon: <Icons.OrdinalsBlock9 />, name: "Block 9" },
+  block_9_450x: { icon: <Icons.OrdinalsBlock9450X />, name: "Block 9 450x" },
+  block_78: { icon: <Icons.OrdinalsBlock78 />, name: "Block 78" },
+  block_286: { icon: <Icons.OrdinalsBlock286 />, name: "Block 286" },
+  block_666: { icon: <Icons.OrdinalsBlock666 />, name: "Block 666" },
+  common: { icon: <Icons.OrdinalsCommon />, name: "Common" },
+  epic: { icon: <Icons.OrdinalsEpic />, name: "Epic" },
+  first_tx: { icon: <Icons.OrdinalsFirstTx />, name: "First Transaction" },
+  hitman: { icon: <Icons.OrdinalsHitman />, name: "Hitman" },
+  jpeg: { icon: <Icons.OrdinalsJpeg />, name: "JPEG" },
+  legacy: { icon: <Icons.OrdinalsLegacy />, name: "Legacy" },
+  legendary: { icon: <Icons.OrdinalsLegendary />, name: "Legendary" },
+  mythic: { icon: <Icons.OrdinalsMythic />, name: "Mythic" },
+  nakamoto: { icon: <Icons.OrdinalsNakamoto />, name: "Nakamoto" },
+  omega: { icon: <Icons.OrdinalsOmega />, name: "Omega" },
+  paliblock: { icon: <Icons.OrdinalsPaliblockPalindrome />, name: "PaliBlock Palindrome" },
+  palindrome: { icon: <Icons.OrdinalsPalindrome />, name: "Palindrome" },
+  palinception: { icon: <Icons.OrdinalsPalinception />, name: "Palinception" },
+  pizza: { icon: <Icons.OrdinalsPizza />, name: "Pizza" },
+  rare: { icon: <Icons.OrdinalsRare />, name: "Rare" },
+  uncommon: { icon: <Icons.OrdinalsUncommon />, name: "Uncommon" },
+  vintage: { icon: <Icons.OrdinalsVintage />, name: "Vintage" },
+};

libs/ui/packages/icons/scripts/build.js

@@ -21,7 +21,7 @@ interface SizeData {
     size: number;
     stroke: number;
   }
-  
+
   interface AvailableSizes {
     XS: SizeData;
     S: SizeData;
@@ -95,7 +95,7 @@ function reactTemplate({ template }, _, { imports, interfaces, componentName, __
     type Props = { size?: ${Object.keys(availableSizes)
       .map(key => `"${key}"`)
       .join(" | ")}; color?: string; style?: object };
-    
+
     ${interfaces}
     ${sizeInterface}
 
@@ -180,12 +180,14 @@ function reactNativeRTLTemplate(
 const convert = (svg, options, componentName, outputFile) => {
   svgr(svg, options, componentName)
     .then(result => {
-      let component = result.replace("xlinkHref=", "href=").replace("import Svg,", "import ");
-
-      component = component.replace(/fill="white"/g, 'fill="currentColor"');
-      component = component.replace(/stroke="white"/g, 'stroke="currentColor"');
-      component = component.replace(/<path/g, '<path vectorEffect="non-scaling-stroke"');
-      component = component.replace(/<Path/g, '<Path vectorEffect="non-scaling-stroke"');
+      let component = result
+        .replace("xlinkHref=", "href=")
+        .replace("import Svg,", "import ")
+        .replace(/fill="white"/g, 'fill="currentColor"')
+        .replace(/stroke="white"/g, 'stroke="currentColor"')
+        .replace(/<path/g, '<path vectorEffect="non-scaling-stroke"')
+        .replace(/<Path/g, '<Path vectorEffect="non-scaling-stroke"')
+        .replace(/id={(\d+)}/g, 'id={"$1"}');
 
       if (!options.native) {
         component = component.replace(/(<\s*\/?\s*)svg(\s*([^>]*)?\s*>)/gi, "$1Svg$2");