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