✨feat(lld): UI of rare sats table

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

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

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { Flex } from "@ledgerhq/react-ui";
+import styled from "styled-components";
+
+type Props = {
+  firstColumnElement: JSX.Element;
+  secondColumnElement: JSX.Element;
+  thirdColumnElement?: JSX.Element;
+  bgColor?: string;
+  isDoubleRow?: boolean;
+};
+
+const Container = styled(Flex)`
+  &:not(:nth-child(2)) {
+    border-top: 1px solid ${p => p.theme.colors.palette.text.shade10};
+    padding-top: 15px;
+  }
+  &:nth-child(2) {
+    padding-bottom: 15px;
+  }
+`;
+
+const RowLayout: React.FC<Props> = ({
+  firstColumnElement,
+  secondColumnElement,
+  thirdColumnElement,
+  bgColor,
+  isDoubleRow,
+}) => {
+  const verticalPadding = isDoubleRow ? 1 : 3;
+  return (
+    <Container
+      py={verticalPadding}
+      px={4}
+      flexDirection={"row"}
+      maxHeight={64}
+      alignItems={"center"}
+      bg={bgColor}
+    >
+      <Flex flex={1}>{firstColumnElement}</Flex>
+      <Flex flex={1} flexDirection={"row"} columnGap={20}>
+        <Flex flex={1} justifyContent={"flex-end"}>
+          {secondColumnElement}
+        </Flex>
+        <Flex flex={0.2} justifyContent={"flex-end"}>
+          {thirdColumnElement}
+        </Flex>
+      </Flex>
+    </Container>
+  );
+};
+
+export default RowLayout;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { Text } from "@ledgerhq/react-ui";
+import { useTranslation } from "react-i18next";
+import RowLayout from "./RowLayout";
+
+export const TableHeader = () => {
+  const { t } = useTranslation();
+
+  const firstColumn = (
+    <Text variant={"bodyLineHeight"} fontSize={12} color={"neutral.c70"}>
+      {t("ordinals.rareSats.table.type")}
+    </Text>
+  );
+
+  const secondColumn = (
+    <Text variant={"bodyLineHeight"} fontSize={12} color={"neutral.c70"}>
+      {t("ordinals.rareSats.table.year")}
+    </Text>
+  );
+
+  const thirdColumn = (
+    <Text variant={"bodyLineHeight"} fontSize={12} color={"neutral.c70"}>
+      {t("ordinals.rareSats.table.utxo")}
+    </Text>
+  );
+
+  return (
+    <RowLayout
+      firstColumnElement={firstColumn}
+      secondColumnElement={secondColumn}
+      thirdColumnElement={thirdColumn}
+      bgColor={"opacityDefault.c05"}
+    />
+  );
+};

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { useRareSatsModel } from "./useRareSatsModel";
+import TableContainer from "~/renderer/components/TableContainer";
+import TableHeader from "LLD/features/Collectibles/components/Collection/TableHeader";
+import { TableHeaderTitleKey } from "LLD/features/Collectibles/types/Collection";
+import { Box, Text, Flex } from "@ledgerhq/react-ui";
+import { TableHeader as TableHeaderContainer } from "./TableHeader";
+import RowLayout from "LLD/features/Collectibles/Ordinals/components/RareSats/RowLayout";
+import IconContainer from "LLD/features/Collectibles/components/Collection/TableRow/IconContainer";
+import TokenTitle from "LLD/features/Collectibles/components/Collection/TableRow/TokenTitle";
+import { IconProps } from "../../../types/Collection";
+
+type ViewProps = ReturnType<typeof useRareSatsModel>;
+
+type ItemProps = {
+  icons: { [key: string]: ({ size, color, style }: IconProps) => JSX.Element } | undefined;
+  name: string;
+  year: string;
+  utxo_size: string;
+  isDoubleRow?: boolean;
+  count: string;
+};
+
+const Item = ({ icons, name, year, count, utxo_size, isDoubleRow }: ItemProps) => {
+  const firstColumn = (
+    <Flex columnGap={2}>
+      {icons && <IconContainer icons={Object.values(icons)} />}
+      <TokenTitle tokenName={[name]} complementaryData={count} isLoading={false} />
+    </Flex>
+  );
+  const secondColumn = (
+    <Text variant={"bodyLineHeight"} fontSize={12} color={"neutral.c70"}>
+      {year}
+    </Text>
+  );
+  const thirdColumn = (
+    <Text variant={"bodyLineHeight"} fontSize={12} color={"neutral.c70"}>
+      {utxo_size}
+    </Text>
+  );
+
+  return (
+    <RowLayout
+      isDoubleRow={isDoubleRow}
+      firstColumnElement={firstColumn}
+      secondColumnElement={secondColumn}
+      thirdColumnElement={thirdColumn}
+    />
+  );
+};
+
+function View(_props: ViewProps) {
+  return (
+    <Box>
+      <TableContainer id="oridinals-inscriptions">
+        <TableHeader titleKey={TableHeaderTitleKey.RareSats} />
+        <TableHeaderContainer />
+        <Flex flexDirection={"column"}>
+          {_props.rareSats.map((rareSat, index) => (
+            <Item key={index} icons={rareSat.icons} {...rareSat} />
+          ))}
+        </Flex>
+      </TableContainer>
+    </Box>
+  );
+}
+
+const RareSats = () => {
+  return <View {...useRareSatsModel({})} />;
+};
+
+export default RareSats;

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

@@ -0,0 +1,61 @@
+import { mockedRareSats } from "../../../__integration__/mockedRareSats";
+import { mappingKeysWithIconAndName } from "../Icons";
+import { MappingKeys } from "LLD/features/Collectibles/types/Ordinals";
+import { IconProps } from "../../../types/Collection";
+
+type RareSatsProps = {};
+
+type RareSat = {
+  count: string;
+  display_name: string | string[];
+  year: string;
+  utxo_size: string;
+  icons?: { [key: string]: ({ size, color, style }: IconProps) => JSX.Element };
+  name: string;
+  isDoubleRow?: boolean;
+};
+
+export const useRareSatsModel = (_props: RareSatsProps) => {
+  const processedRareSats: RareSat[] = mockedRareSats.map(sat => {
+    const { display_name } = sat;
+    const icons: { [key: string]: ({ size, color, style }: IconProps) => JSX.Element } = {};
+    let name: string;
+
+    if (Array.isArray(display_name)) {
+      name = display_name
+        .map(
+          dn => mappingKeysWithIconAndName[dn.toLowerCase().replace(" ", "_") as MappingKeys]?.name,
+        )
+        .join(" / ");
+      display_name.forEach(dn => {
+        const key = dn.toLowerCase().replace(" ", "_") as MappingKeys;
+        icons[key] = mappingKeysWithIconAndName[key]?.icon;
+      });
+    } else {
+      const key = display_name.toLowerCase().replace(" ", "_") as MappingKeys;
+      icons[key] = mappingKeysWithIconAndName[key]?.icon;
+      name = mappingKeysWithIconAndName[key]?.name;
+    }
+
+    return {
+      ...sat,
+      icons,
+      name,
+    };
+  });
+
+  const utxoSizeCount: Record<string, number> = processedRareSats.reduce(
+    (acc, sat) => {
+      acc[sat.utxo_size] = (acc[sat.utxo_size] || 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+
+  const finalRareSats: RareSat[] = processedRareSats.map(sat => ({
+    ...sat,
+    isDoubleRow: utxoSizeCount[sat.utxo_size] > 1,
+  }));
+
+  return { rareSats: finalRareSats };
+};

apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/screens/Account/index.tsx

@@ -1,13 +1,20 @@
 import React from "react";
 import { Account } from "@ledgerhq/types-live";
 import Inscriptions from "../../components/Inscriptions";
+import RareSats from "../../components/RareSats";
+import { Flex } from "@ledgerhq/react-ui";
 
 type Props = {
   account: Account;
 };
 
 const OrdinalsAccount: React.FC<Props> = ({ account }) => {
-  return <Inscriptions account={account} />;
+  return (
+    <Flex mb={50} width={"100%"} flexDirection={"column"} rowGap={40}>
+      <Inscriptions account={account} />
+      <RareSats />
+    </Flex>
+  );
   // here we will add the rare sats table
 };
 

apps/ledger-live-desktop/src/newArch/features/Collectibles/__integration__/mockedRareSats.ts

@@ -0,0 +1,20 @@
+export const mockedRareSats = [
+  {
+    count: "20",
+    display_name: ["common", "jpeg"],
+    year: "2011",
+    utxo_size: "239",
+  },
+  {
+    count: "800",
+    display_name: "alpha",
+    year: "2011",
+    utxo_size: "239",
+  },
+  {
+    count: "1000",
+    display_name: "rare",
+    year: "2011",
+    utxo_size: "3212",
+  },
+];

apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/IconContainer.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Flex } from "@ledgerhq/react-ui";
+import { IconProps } from "../../../types/Collection";
+
+type Props = {
+  icons: (({ size, color, style }: IconProps) => JSX.Element)[];
+};
+
+const IconContainer: React.FC<Props> = ({ icons }) => {
+  return (
+    <Flex
+      borderRadius={"8px"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      bg={"opacityDefault.c05"}
+      borderColor={"opacityDefault.c10"}
+      borderWidth={"1px"}
+      borderStyle={"solid"}
+      p={"8px"}
+      columnGap={"8px"}
+    >
+      {icons.map((Icon, index) => (
+        <Icon key={index} size={"XS"} color={"neutral.c100"} />
+      ))}
+    </Flex>
+  );
+};
+
+export default IconContainer;