diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Icons.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Icons.tsx
index 55cb97100043..feb7ec041fe5 100644
--- a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Icons.tsx
+++ b/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: , name: "Alpha" },
- black_epic: { icon: , name: "Black Epic" },
- black_legendary: { icon: , name: "Black Legendary" },
- black_mythic: { icon: , name: "Black Mythic" },
- black_rare: { icon: , name: "Black Rare" },
- black_uncommon: { icon: , name: "Black Uncommon" },
- block_9: { icon: , name: "Block 9" },
- block_9_450x: { icon: , name: "Block 9 450x" },
- block_78: { icon: , name: "Block 78" },
- block_286: { icon: , name: "Block 286" },
- block_666: { icon: , name: "Block 666" },
- common: { icon: , name: "Common" },
- epic: { icon: , name: "Epic" },
- first_tx: { icon: , name: "First Transaction" },
- hitman: { icon: , name: "Hitman" },
- jpeg: { icon: , name: "JPEG" },
- legacy: { icon: , name: "Legacy" },
- legendary: { icon: , name: "Legendary" },
- mythic: { icon: , name: "Mythic" },
- nakamoto: { icon: , name: "Nakamoto" },
- omega: { icon: , name: "Omega" },
- paliblock: { icon: , name: "PaliBlock Palindrome" },
- palindrome: { icon: , name: "Palindrome" },
- palinception: { icon: , name: "Palinception" },
- pizza: { icon: , name: "Pizza" },
- rare: { icon: , name: "Rare" },
- uncommon: { icon: , name: "Uncommon" },
- vintage: { icon: , name: "Vintage" },
+ alpha: { icon: (props: IconProps) => , name: "Alpha" },
+ black_epic: {
+ icon: (props: IconProps) => ,
+ name: "Black Epic",
+ },
+ black_legendary: {
+ icon: (props: IconProps) => ,
+ name: "Black Legendary",
+ },
+ black_mythic: {
+ icon: (props: IconProps) => ,
+ name: "Black Mythic",
+ },
+ black_rare: {
+ icon: (props: IconProps) => ,
+ name: "Black Rare",
+ },
+ black_uncommon: {
+ icon: (props: IconProps) => ,
+ name: "Black Uncommon",
+ },
+ block_9: { icon: (props: IconProps) => , name: "Block 9" },
+ block_9_450x: {
+ icon: (props: IconProps) => ,
+ name: "Block 9 450x",
+ },
+ block_78: { icon: (props: IconProps) => , name: "Block 78" },
+ block_286: {
+ icon: (props: IconProps) => ,
+ name: "Block 286",
+ },
+ block_666: {
+ icon: (props: IconProps) => ,
+ name: "Block 666",
+ },
+ common: { icon: (props: IconProps) => , name: "Common" },
+ epic: { icon: (props: IconProps) => , name: "Epic" },
+ first_tx: {
+ icon: (props: IconProps) => ,
+ name: "First Transaction",
+ },
+ hitman: { icon: (props: IconProps) => , name: "Hitman" },
+ jpeg: { icon: (props: IconProps) => , name: "JPEG" },
+ legacy: { icon: (props: IconProps) => , name: "Legacy" },
+ legendary: {
+ icon: (props: IconProps) => ,
+ name: "Legendary",
+ },
+ mythic: { icon: (props: IconProps) => , name: "Mythic" },
+ nakamoto: { icon: (props: IconProps) => , name: "Nakamoto" },
+ omega: { icon: (props: IconProps) => , name: "Omega" },
+ paliblock: {
+ icon: (props: IconProps) => ,
+ name: "PaliBlock Palindrome",
+ },
+ palindrome: {
+ icon: (props: IconProps) => ,
+ name: "Palindrome",
+ },
+ palinception: {
+ icon: (props: IconProps) => ,
+ name: "Palinception",
+ },
+ pizza: { icon: (props: IconProps) => , name: "Pizza" },
+ rare: { icon: (props: IconProps) => , name: "Rare" },
+ uncommon: { icon: (props: IconProps) => , name: "Uncommon" },
+ vintage: { icon: (props: IconProps) => , name: "Vintage" },
};
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/.gitkeep b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/.gitkeep
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/RowLayout.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/RowLayout.tsx
new file mode 100644
index 000000000000..a4a329de8bbc
--- /dev/null
+++ b/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 = ({
+ firstColumnElement,
+ secondColumnElement,
+ thirdColumnElement,
+ bgColor,
+ isDoubleRow,
+}) => {
+ const verticalPadding = isDoubleRow ? 1 : 3;
+ return (
+
+ {firstColumnElement}
+
+
+ {secondColumnElement}
+
+
+ {thirdColumnElement}
+
+
+
+ );
+};
+
+export default RowLayout;
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/TableHeader.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/TableHeader.tsx
new file mode 100644
index 000000000000..889871442cf8
--- /dev/null
+++ b/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 = (
+
+ {t("ordinals.rareSats.table.type")}
+
+ );
+
+ const secondColumn = (
+
+ {t("ordinals.rareSats.table.year")}
+
+ );
+
+ const thirdColumn = (
+
+ {t("ordinals.rareSats.table.utxo")}
+
+ );
+
+ return (
+
+ );
+};
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/index.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/index.tsx
new file mode 100644
index 000000000000..b0103ae48f0b
--- /dev/null
+++ b/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;
+
+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 = (
+
+ {icons && }
+
+
+ );
+ const secondColumn = (
+
+ {year}
+
+ );
+ const thirdColumn = (
+
+ {utxo_size}
+
+ );
+
+ return (
+
+ );
+};
+
+function View(_props: ViewProps) {
+ return (
+
+
+
+
+
+ {_props.rareSats.map((rareSat, index) => (
+
+ ))}
+
+
+
+ );
+}
+
+const RareSats = () => {
+ return ;
+};
+
+export default RareSats;
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/useRareSatsModel.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/useRareSatsModel.tsx
new file mode 100644
index 000000000000..c5a15431331f
--- /dev/null
+++ b/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 = processedRareSats.reduce(
+ (acc, sat) => {
+ acc[sat.utxo_size] = (acc[sat.utxo_size] || 0) + 1;
+ return acc;
+ },
+ {} as Record,
+ );
+
+ const finalRareSats: RareSat[] = processedRareSats.map(sat => ({
+ ...sat,
+ isDoubleRow: utxoSizeCount[sat.utxo_size] > 1,
+ }));
+
+ return { rareSats: finalRareSats };
+};
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/screens/Account/index.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/screens/Account/index.tsx
index d404995e3d08..d340166d4ccf 100644
--- a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/screens/Account/index.tsx
+++ b/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 = ({ account }) => {
- return ;
+ return (
+
+
+
+
+ );
// here we will add the rare sats table
};
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/__integration__/mockedRareSats.ts b/apps/ledger-live-desktop/src/newArch/features/Collectibles/__integration__/mockedRareSats.ts
new file mode 100644
index 000000000000..ccce9aba47d1
--- /dev/null
+++ b/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",
+ },
+];
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/IconContainer.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/IconContainer.tsx
new file mode 100644
index 000000000000..fa2744ba0860
--- /dev/null
+++ b/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 = ({ icons }) => {
+ return (
+
+ {icons.map((Icon, index) => (
+
+ ))}
+
+ );
+};
+
+export default IconContainer;
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/TokenTitle.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/TokenTitle.tsx
index 2ab7c9bef6ce..c5d11986eaf9 100644
--- a/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/TokenTitle.tsx
+++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/TokenTitle.tsx
@@ -6,17 +6,32 @@ type Props = {
tokenName: string | string[];
isLoading: boolean;
collectionName?: string;
+ complementaryData?: string;
};
-const TokenTitle: React.FC = ({ tokenName, isLoading, collectionName }) => {
+const TokenTitle: React.FC = ({
+ tokenName,
+ isLoading,
+ collectionName,
+ complementaryData,
+}) => {
+ const isInsideRareSatRow = Boolean(complementaryData);
return (
-
+
{tokenName}
-
- {collectionName}
+
+ {collectionName || complementaryData}
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/index.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/index.tsx
index c930b1f9566e..6c0ef4bf55d2 100644
--- a/apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/index.tsx
+++ b/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 => {
const mediaBox = () => {
return (
@@ -53,17 +47,7 @@ const TableRow: React.FC = props => {
)}
{isOrdinalsRow(props) && props.tokenIcons.length != 0 && (
-
- {props.tokenIcons?.map((Icon, index) => (
-
- ))}
-
+
)}
>
);
@@ -75,7 +59,6 @@ const TableRow: React.FC = props => {
justifyContent="center"
px={4}
py={3}
- maxHeight={64}
display={"flex"}
onClick={props.onClick}
>
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Collection.ts b/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Collection.ts
index 4410715c5b7b..f57e380bd7fb 100644
--- a/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Collection.ts
+++ b/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 = {
diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Ordinals.ts b/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Ordinals.ts
new file mode 100644
index 000000000000..2dc3f5f537ef
--- /dev/null
+++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Ordinals.ts
@@ -0,0 +1,3 @@
+import { mappingKeysWithIconAndName } from "../Ordinals/components/Icons";
+
+export type MappingKeys = keyof typeof mappingKeysWithIconAndName;
diff --git a/apps/ledger-live-desktop/static/i18n/en/app.json b/apps/ledger-live-desktop/static/i18n/en/app.json
index 88c6642f74d0..188e7333d73f 100644
--- a/apps/ledger-live-desktop/static/i18n/en/app.json
+++ b/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"
+ }
+ }
}
}
\ No newline at end of file