✨feat(lld): UI of rare sats table

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

@@ -31,3 +31,5 @@ export const mappingKeysWithIconAndName = {
   uncommon: { icon: <Icons.OrdinalsUncommon />, name: "Uncommon" },
   vintage: { icon: <Icons.OrdinalsVintage />, name: "Vintage" },
 };
+
+export type MappingKeys = keyof typeof mappingKeysWithIconAndName;

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

@@ -0,0 +1,46 @@
+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"} 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,62 @@
+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, Icons, 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";
+
+type ViewProps = ReturnType<typeof useRareSatsModel>;
+
+const Item = ({ ...props }) => {
+  const firstColumn = (
+    <Flex columnGap={2}>
+      <IconContainer icons={[Icons.OrdinalsAlpha, Icons.OrdinalsOmega]} />
+      <TokenTitle tokenName={[props.name]} complementaryData={"collectionName"} isLoading={false} />
+    </Flex>
+  );
+  const secondColumn = (
+    <Text variant={"bodyLineHeight"} fontSize={12} color={"neutral.c70"}>
+      {props.year}
+    </Text>
+  );
+  const thirdColumn = (
+    <Text variant={"bodyLineHeight"} fontSize={12} color={"neutral.c70"}>
+      {props.utxo_size}
+    </Text>
+  );
+
+  return (
+    <RowLayout
+      isDoubleRow={props.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} {...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,42 @@
+import { mockedRareSats } from "../../../__integration__/mockedRareSats";
+import { mappingKeysWithIconAndName, MappingKeys } from "../Icons";
+
+type RareSatsProps = {};
+
+type RareSat = {
+  count: number;
+  display_name: string;
+  year: string;
+  utxo_size: string;
+  icon?: React.ReactNode;
+  name?: string;
+  isDoubleRow?: boolean;
+};
+
+export const useRareSatsModel = (_props: RareSatsProps) => {
+  const processedRareSats: RareSat[] = mockedRareSats.map(sat => {
+    const { display_name } = sat;
+    const key = display_name.toLowerCase().replace(" ", "_") as MappingKeys;
+    const iconAndName = mappingKeysWithIconAndName[key];
+    return {
+      ...sat,
+      icon: iconAndName?.icon,
+      name: iconAndName?.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: 8000,
+    display_name: "common",
+    year: "2011",
+    utxo_size: "239",
+  },
+  {
+    count: 8000,
+    display_name: "legendary",
+    year: "2011",
+    utxo_size: "239",
+  },
+  {
+    count: 8000,
+    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"}
+      alignContent={"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;

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

@@ -6,17 +6,23 @@ type Props = {
   tokenName: string | string[];
   isLoading: boolean;
   collectionName?: string;
+  complementaryData?: string;
 };
 
-const TokenTitle: React.FC<Props> = ({ tokenName, isLoading, collectionName }) => {
+const TokenTitle: React.FC<Props> = ({
+  tokenName,
+  isLoading,
+  collectionName,
+  complementaryData,
+}) => {
   return (
     <Skeleton width={136} minHeight={24} barHeight={10} show={isLoading}>
       <Flex flexDirection="column" alignItems="flex-start">
         <Text ff="Inter|SemiBold" color="palette.text.shade100" fontSize={4}>
           {tokenName}
         </Text>
         <Text ff="Inter|SemiBold" color={"opacityDefault.c50"} fontSize={3}>
-          {collectionName}
+          {collectionName || complementaryData}
         </Text>
       </Flex>
     </Skeleton>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Media, Skeleton } from "../../index";
-import { Box, Flex, Text } from "@ledgerhq/react-ui";
+import { Box, Text } from "@ledgerhq/react-ui";
 import { rgba } from "~/renderer/styles/helpers";
 import styled from "styled-components";
 import {
@@ -10,6 +10,7 @@ import {
 } from "LLD/features/Collectibles/utils/typeGuardsChecker";
 import { RowProps as Props } from "LLD/features/Collectibles/types/Collection";
 import TokenTitle from "./TokenTitle";
+import IconContainer from "./IconContainer";
 
 const Container = styled(Box)`
   &.disabled {
@@ -25,13 +26,6 @@ const Container = styled(Box)`
   }
 `;
 
-const SatsIconContainer = styled(Flex)`
-  border-radius: 8px;
-  background: ${p => p.theme.colors.opacityDefault.c05};
-  border: 1px solid ${p => p.theme.colors.opacityDefault.c10};
-  padding: 8px;
-`;
-
 const TableRow: React.FC<Props> = props => {
   const mediaBox = () => {
     return (
@@ -53,17 +47,7 @@ const TableRow: React.FC<Props> = props => {
           </Skeleton>
         )}
         {isOrdinalsRow(props) && props.tokenIcons.length != 0 && (
-          <SatsIconContainer
-            p={"8px"}
-            alignItems={"center"}
-            justifyContent={"center"}
-            flexDirection={"row"}
-            columnGap={"12px"}
-          >
-            {props.tokenIcons?.map((Icon, index) => (
-              <Icon key={index} size={"XS"} color={"neutral.c100"} />
-            ))}
-          </SatsIconContainer>
+          <IconContainer icons={props.tokenIcons} />
         )}
       </>
     );

apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Collection.ts

@@ -42,6 +42,7 @@ export type TableHeaderActionsProps = {
 export enum TableHeaderTitleKey {
   NFTCollections = "NFT.collections.title",
   Inscriptions = "Inscriptions",
+  RareSats = "Rare Sats",
 }
 
 export type TableHeaderProps = {

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -6591,5 +6591,15 @@
       "title": "Continue on your Ledger {{wording}}",
       "description": "Follow the instruction which appear on your Ledger’s Trusted Display."
     }
+  },
+  "ordinals": {
+    "rareSats": {
+      "title": "Rare Sats",
+      "table": {
+        "type": "Sat Type / Amount",
+        "year": "Year",
+        "utxo": "UTXO size"
+      }
+    }
   }
 }