✨feat(lld): UI of rare sats table

.changeset/friendly-rings-laugh.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+add the ui of rare sats table for ordinals

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;
+  isMultipleRow?: boolean;
+};
+
+const Container = styled(Flex)`
+  &:first-child {
+    border-top: 1px solid ${p => p.theme.colors.palette.text.shade10};
+    padding-top: 15px;
+  }
+  &:last-child {
+    padding-bottom: 15px;
+  }
+`;
+
+const RowLayout: React.FC<Props> = ({
+  firstColumnElement,
+  secondColumnElement,
+  thirdColumnElement,
+  bgColor,
+  isMultipleRow,
+}) => {
+  const verticalPadding = isMultipleRow ? 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,79 @@
+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 { RareSat } from "LLD/features/Collectibles/types/Ordinals";
+
+type ViewProps = ReturnType<typeof useRareSatsModel>;
+
+const Item = ({
+  icons,
+  name,
+  year,
+  count,
+  utxo_size,
+  isMultipleRow,
+}: RareSat & { isMultipleRow: boolean }) => {
+  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
+      isMultipleRow={isMultipleRow}
+      firstColumnElement={firstColumn}
+      secondColumnElement={secondColumn}
+      thirdColumnElement={thirdColumn}
+    />
+  );
+};
+
+function View({ rareSats }: ViewProps) {
+  return (
+    <Box>
+      <TableContainer id="oridinals-inscriptions">
+        <TableHeader titleKey={TableHeaderTitleKey.RareSats} />
+        <TableHeaderContainer />
+        <Flex flexDirection={"column"}>
+          {rareSats.map((rareSatGroup, index) => (
+            <Flex key={index} flexDirection={"column"}>
+              {rareSatGroup.sats.map((rareSat, subIndex) => (
+                <Item
+                  key={subIndex}
+                  icons={rareSat.icons}
+                  {...rareSat}
+                  isMultipleRow={rareSatGroup.isMultipleRow}
+                />
+              ))}
+            </Flex>
+          ))}
+        </Flex>
+      </TableContainer>
+    </Box>
+  );
+}
+
+const RareSats = () => {
+  return <View {...useRareSatsModel({})} />;
+};
+
+export default RareSats;