From 5a62dd923e41ef97c53001ea1a1b547461f1b96b Mon Sep 17 00:00:00 2001 From: Lucas Werey Date: Thu, 5 Sep 2024 11:12:41 +0200 Subject: [PATCH] :sparkles:feat(lld): UI of rare sats table --- .changeset/friendly-rings-laugh.md | 5 + .../Ordinals/components/Icons.tsx | 96 +- .../Ordinals/components/RareSats/.gitkeep | 0 .../Ordinals/components/RareSats/Item.tsx | 43 + .../components/RareSats/RowLayout.tsx | 53 + .../components/RareSats/TableHeader.tsx | 27 + .../Ordinals/components/RareSats/helpers.ts | 107 ++ .../Ordinals/components/RareSats/index.tsx | 43 + .../components/RareSats/useRareSatsModel.ts | 12 + .../Ordinals/screens/Account/index.tsx | 10 +- .../__integration__/mockedRareSats.ts | 1384 +++++++++++++++++ .../Collection/TableRow/IconContainer.tsx | 29 + .../Collection/TableRow/TokenTitle.tsx | 23 +- .../components/Collection/TableRow/index.tsx | 23 +- .../features/Collectibles/types/Collection.ts | 1 + .../features/Collectibles/types/Ordinals.ts | 14 + .../features/Collectibles/types/RareSats.ts | 62 + .../static/i18n/en/app.json | 10 + 18 files changed, 1888 insertions(+), 54 deletions(-) create mode 100644 .changeset/friendly-rings-laugh.md delete mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/.gitkeep create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/Item.tsx create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/RowLayout.tsx create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/TableHeader.tsx create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/helpers.ts create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/index.tsx create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/useRareSatsModel.ts create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/__integration__/mockedRareSats.ts create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/components/Collection/TableRow/IconContainer.tsx create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Ordinals.ts create mode 100644 apps/ledger-live-desktop/src/newArch/features/Collectibles/types/RareSats.ts diff --git a/.changeset/friendly-rings-laugh.md b/.changeset/friendly-rings-laugh.md new file mode 100644 index 000000000000..29b1876f67a9 --- /dev/null +++ b/.changeset/friendly-rings-laugh.md @@ -0,0 +1,5 @@ +--- +"ledger-live-desktop": patch +--- + +add the ui of rare sats table for ordinals 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/Item.tsx b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/Item.tsx new file mode 100644 index 000000000000..6845c31536f4 --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/Item.tsx @@ -0,0 +1,43 @@ +import React from "react"; +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"; +import { Text, Flex } from "@ledgerhq/react-ui"; + +const Item = ({ + icons, + name, + year, + count, + utxo_size, + isMultipleRow, +}: RareSat & { isMultipleRow: boolean }) => { + const firstColumn = ( + + {icons && } + + + ); + const secondColumn = ( + + {year} + + ); + const thirdColumn = ( + + {utxo_size} + + ); + + return ( + + ); +}; + +export default Item; 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..31449ce9ec39 --- /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; + 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 = ({ + firstColumnElement, + secondColumnElement, + thirdColumnElement, + bgColor, + isMultipleRow, +}) => { + const verticalPadding = isMultipleRow ? 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..8ce914bf20f9 --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/TableHeader.tsx @@ -0,0 +1,27 @@ +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 Column = (translationKey: string) => ( + + {t(translationKey)} + + ); + + const firstColumn = Column("ordinals.rareSats.table.type"); + const secondColumn = Column("ordinals.rareSats.table.year"); + const thirdColumn = Column("ordinals.rareSats.table.utxo"); + + return ( + + ); +}; diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/helpers.ts b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/helpers.ts new file mode 100644 index 000000000000..23e7080c2dea --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/helpers.ts @@ -0,0 +1,107 @@ +import { mappingKeysWithIconAndName } from "../Icons"; +import { MappingKeys } from "LLD/features/Collectibles/types/Ordinals"; +import { IconProps } from "LLD/features/Collectibles/types/Collection"; +import { RareSat } from "LLD/features/Collectibles/types/Ordinals"; +import { + Satributes, + Subrange, + SatRange, + MockedRareSat, + Sat, + Icons, +} from "LLD/features/Collectibles/types/RareSats"; + +export const processSatType = ( + type: string, + satributes: Satributes, + icons: Icons, + displayNames: string[], + totalCount: number, +) => { + const attribute = satributes[type as MappingKeys]; + if (attribute && attribute.count) { + displayNames.push(type); + if (mappingKeysWithIconAndName[type as MappingKeys]) { + icons[type] = mappingKeysWithIconAndName[type as MappingKeys].icon; + } + totalCount = attribute.count; + } + return { displayNames, totalCount }; +}; + +export const processSatTypes = (satTypes: string[], satributes: Satributes) => { + let displayNames: string[] = []; + let totalCount = 0; + const icons: { [key: string]: ({ size, color, style }: IconProps) => JSX.Element } = {}; + + satTypes.forEach(type => { + const result = processSatType(type, satributes, icons, displayNames, totalCount); + displayNames = result.displayNames; + totalCount = result.totalCount; + }); + + return { displayNames, totalCount, icons }; +}; + +export const processSubrange = ( + subrange: Subrange, + satributes: Satributes, + year: string, + value: number, +) => { + const { sat_types } = subrange; + const { displayNames, totalCount, icons } = processSatTypes(sat_types, satributes); + + const name = displayNames + .map(dn => mappingKeysWithIconAndName[dn.toLowerCase().replace(" ", "_") as MappingKeys]?.name) + .filter(Boolean) + .join(" / "); + + return { + count: totalCount.toString() + (totalCount === 1 ? " sat" : " sats"), + display_name: displayNames.join(" / "), + year, + utxo_size: value.toString(), + icons, + name, + }; +}; + +export const processSatRanges = (satRanges: SatRange[], satributes: Satributes) => { + return satRanges.flatMap(range => { + const { year, value, subranges } = range; + return subranges.flatMap(subrange => processSubrange(subrange, satributes, year, value)); + }); +}; + +export const processRareSat = (sat: Sat) => { + const { extra_metadata } = sat; + const satributes = extra_metadata.utxo_details.satributes as Satributes; + const satRanges = extra_metadata.utxo_details.sat_ranges; + return processSatRanges(satRanges, satributes); +}; + +export const processRareSats = (rareSats: MockedRareSat[]) => { + return rareSats.flatMap(item => item.nfts.flatMap(processRareSat)); +}; + +export const groupRareSats = (processedRareSats: RareSat[]) => { + return processedRareSats.reduce( + (acc, sat) => { + if (!acc[sat.utxo_size]) { + acc[sat.utxo_size] = []; + } + acc[sat.utxo_size].push(sat); + return acc; + }, + {} as Record, + ); +}; + +export const finalizeRareSats = (groupedRareSats: Record) => { + return Object.entries(groupedRareSats).map(([utxo_size, sats]) => ({ + utxo_size, + sats, + isMultipleRow: sats.length > 1, + })); +}; 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..838d4a0c957f --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { useRareSatsModel } from "./useRareSatsModel"; +import TableContainer from "~/renderer/components/TableContainer"; +import TableHeader from "LLD/features/Collectibles/components/Collection/TableHeader"; +import Item from "./Item"; +import { TableHeaderTitleKey } from "LLD/features/Collectibles/types/Collection"; +import { Box, Flex } from "@ledgerhq/react-ui"; +import { TableHeader as TableHeaderContainer } from "./TableHeader"; + +type ViewProps = ReturnType; + +function View({ rareSats }: ViewProps) { + return ( + + + + + + {rareSats + ? rareSats.map(rareSatGroup => ( + + {rareSatGroup.sats.map(rareSat => ( + + ))} + + )) + : null} + {/** wait for design */} + + + + ); +} + +const RareSats = () => { + return ; +}; + +export default RareSats; diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/useRareSatsModel.ts b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/useRareSatsModel.ts new file mode 100644 index 000000000000..931c590a56d8 --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/RareSats/useRareSatsModel.ts @@ -0,0 +1,12 @@ +import { mockedRareSats } from "LLD/features/Collectibles/__integration__/mockedRareSats"; +import { processRareSats, groupRareSats, finalizeRareSats } from "./helpers"; + +type RareSatsProps = {}; + +export const useRareSatsModel = (_props: RareSatsProps) => { + const processedRareSats = processRareSats(mockedRareSats); + const groupedRareSats = groupRareSats(processedRareSats); + const finalRareSats = finalizeRareSats(groupedRareSats); + + 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..30aed15cccc5 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,14 +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 ; - // here we will add the rare sats table + return ( + + + + + ); }; export default OrdinalsAccount; 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..c7413c9fae4f --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/__integration__/mockedRareSats.ts @@ -0,0 +1,1384 @@ +// Mock account from Simplehash Docs +export const mockedRareSats = [ + { + next_cursor: null, + next: null, + previous: null, + nfts: [ + { + nft_id: "utxo.7893390614d9a5608e39ea637e5794f7564d3fcdd5ad46105f349c2cf45272fb.1", + chain: "utxo", + contract_address: "", + token_id: "1", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-14T11:34:34", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-14T11:34:34", + last_acquired_date: "2024-03-14T11:34:34", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: null, + name: null, + description: null, + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: null, + distinct_nft_count: null, + total_quantity: null, + chains: [], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-14T11:34:34", + block_number: 834655, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 0, + satributes: { + common: { + count: 8000, + display_name: "Common", + description: "Any sat that is not the first sat of its block", + icon: "https://cdn.simplehash.com/rare_sats/satribute_common.png", + }, + }, + sat_ranges: [ + { + starting_sat: 574534229491726, + value: 8000, + distinct_rare_sats: 0, + year: "2011", + subranges: [ + { + starting_sat: 574534229491726, + value: 8000, + sat_types: ["common"], + }, + ], + }, + ], + block_number: 834655, + value: 8000, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.7893390614d9a5608e39ea637e5794f7564d3fcdd5ad46105f349c2cf45272fb.0", + chain: "utxo", + contract_address: "", + token_id: "0", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-14T11:34:34", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-14T11:34:34", + last_acquired_date: "2024-03-14T11:34:34", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: null, + name: null, + description: null, + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: null, + distinct_nft_count: null, + total_quantity: null, + chains: [], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-14T11:34:34", + block_number: 834655, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 0, + satributes: { + common: { + count: 9000, + display_name: "Common", + description: "Any sat that is not the first sat of its block", + icon: "https://cdn.simplehash.com/rare_sats/satribute_common.png", + }, + }, + sat_ranges: [ + { + starting_sat: 574534229482726, + value: 9000, + distinct_rare_sats: 0, + year: "2011", + subranges: [ + { + starting_sat: 574534229482726, + value: 9000, + sat_types: ["common"], + }, + ], + }, + ], + block_number: 834655, + value: 9000, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.51fb634f0fefa3441e1a60090d9e292ce1f0803258c2dae818410db4192c89f6.0", + chain: "utxo", + contract_address: "", + token_id: "0", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T10:37:28", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T10:37:28", + last_acquired_date: "2024-03-08T10:37:28", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: null, + name: null, + description: null, + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: null, + distinct_nft_count: null, + total_quantity: null, + chains: [], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T10:37:28", + block_number: 833719, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 0, + satributes: { + common: { + count: 600, + display_name: "Common", + description: "Any sat that is not the first sat of its block", + icon: "https://cdn.simplehash.com/rare_sats/satribute_common.png", + }, + }, + sat_ranges: [ + { + starting_sat: 1032093336971063, + value: 600, + distinct_rare_sats: 0, + year: "2012", + subranges: [ + { + starting_sat: 1032093336971063, + value: 600, + sat_types: ["common"], + }, + ], + }, + ], + block_number: 833719, + value: 600, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "witness_v1_taproot", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.b2011509f56ca83378d5e72e413ed5c939cfa4ff3d82680c1b12b5a6b406ac95.0", + chain: "utxo", + contract_address: "", + token_id: "0", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T10:33:01", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T10:33:01", + last_acquired_date: "2024-03-08T10:33:01", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: null, + name: null, + description: null, + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: null, + distinct_nft_count: null, + total_quantity: null, + chains: [], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T10:33:01", + block_number: 833718, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 0, + satributes: { + common: { + count: 600, + display_name: "Common", + description: "Any sat that is not the first sat of its block", + icon: "https://cdn.simplehash.com/rare_sats/satribute_common.png", + }, + }, + sat_ranges: [ + { + starting_sat: 1032093336949888, + value: 600, + distinct_rare_sats: 0, + year: "2012", + subranges: [ + { + starting_sat: 1032093336949888, + value: 600, + sat_types: ["common"], + }, + ], + }, + ], + block_number: 833718, + value: 600, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.398901189471c069dd74068a2884e02829c831432e705b28a0c337696e681b97.0", + chain: "utxo", + contract_address: "", + token_id: "0", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T10:06:46", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T10:06:46", + last_acquired_date: "2024-03-08T10:06:46", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: null, + name: null, + description: null, + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: null, + distinct_nft_count: null, + total_quantity: null, + chains: [], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T10:06:46", + block_number: 833714, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 0, + satributes: { + common: { + count: 600, + display_name: "Common", + description: "Any sat that is not the first sat of its block", + icon: "https://cdn.simplehash.com/rare_sats/satribute_common.png", + }, + }, + sat_ranges: [ + { + starting_sat: 1032093336943299, + value: 600, + distinct_rare_sats: 0, + year: "2012", + subranges: [ + { + starting_sat: 1032093336943299, + value: 600, + sat_types: ["common"], + }, + ], + }, + ], + block_number: 833714, + value: 600, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.68f11cb8770c6e761a5763bb47f00b368e03a4960046f441617c46edad2b0215.5", + chain: "utxo", + contract_address: "", + token_id: "5", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T09:47:36", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T09:47:36", + last_acquired_date: "2024-03-08T09:47:36", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: "0123456789abcdeffedcba9876543210", + name: "Rare Sats", + description: + 'Rare Sats are attributes, or "satributes," ascribed to different types of sats. Sats are the smallest unit of a Bitcoin, and satributes commemorate special moments like when a sat was mined or used in a transaction.', + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: 5284108, + distinct_nft_count: 7259220, + total_quantity: 7259196, + chains: ["utxo"], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T09:47:36", + block_number: 833711, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 330, + satributes: { + block_78: { + count: 330, + display_name: "Block 78", + description: + "Sats mined by Hal Finney in block 78 which was the first block mined by someone other than Satoshi", + icon: "https://cdn.simplehash.com/rare_sats/satribute_block78.png", + }, + vintage: { + count: 330, + display_name: "Vintage", + description: "Sats mined in the first 1,000 blocks", + icon: "https://cdn.simplehash.com/rare_sats/satribute_vintage.png", + }, + }, + sat_ranges: [ + { + starting_sat: 392582274563, + value: 330, + distinct_rare_sats: 330, + year: "2009", + subranges: [ + { + starting_sat: 392582274563, + value: 330, + sat_types: ["block_78", "vintage"], + }, + ], + }, + ], + block_number: 833711, + value: 330, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.68f11cb8770c6e761a5763bb47f00b368e03a4960046f441617c46edad2b0215.4", + chain: "utxo", + contract_address: "", + token_id: "4", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T09:47:36", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T09:47:36", + last_acquired_date: "2024-03-08T09:47:36", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: "0123456789abcdeffedcba9876543210", + name: "Rare Sats", + description: + 'Rare Sats are attributes, or "satributes," ascribed to different types of sats. Sats are the smallest unit of a Bitcoin, and satributes commemorate special moments like when a sat was mined or used in a transaction.', + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: 5284108, + distinct_nft_count: 7259220, + total_quantity: 7259196, + chains: ["utxo"], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T09:47:36", + block_number: 833711, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 330, + satributes: { + vintage: { + count: 330, + display_name: "Vintage", + description: "Sats mined in the first 1,000 blocks", + icon: "https://cdn.simplehash.com/rare_sats/satribute_vintage.png", + }, + }, + sat_ranges: [ + { + starting_sat: 4834087454144, + value: 330, + distinct_rare_sats: 330, + year: "2009", + subranges: [ + { + starting_sat: 4834087454144, + value: 330, + sat_types: ["vintage"], + }, + ], + }, + ], + block_number: 833711, + value: 330, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.68f11cb8770c6e761a5763bb47f00b368e03a4960046f441617c46edad2b0215.3", + chain: "utxo", + contract_address: "", + token_id: "3", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T09:47:36", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T09:47:36", + last_acquired_date: "2024-03-08T09:47:36", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: "0123456789abcdeffedcba9876543210", + name: "Rare Sats", + description: + 'Rare Sats are attributes, or "satributes," ascribed to different types of sats. Sats are the smallest unit of a Bitcoin, and satributes commemorate special moments like when a sat was mined or used in a transaction.', + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: 5284108, + distinct_nft_count: 7259220, + total_quantity: 7259196, + chains: ["utxo"], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T09:47:36", + block_number: 833711, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 330, + satributes: { + pizza: { + count: 330, + display_name: "Pizza", + description: + "Sat from the 10,000 Bitcoins used to purchase two Papa John's pizzas on May 22, 2010", + icon: "https://cdn.simplehash.com/rare_sats/satribute_pizza.png", + }, + }, + sat_ranges: [ + { + starting_sat: 265675444186667, + value: 330, + distinct_rare_sats: 330, + year: "2010", + subranges: [ + { + starting_sat: 265675444186667, + value: 330, + sat_types: ["pizza"], + }, + ], + }, + ], + block_number: 833711, + value: 330, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.68f11cb8770c6e761a5763bb47f00b368e03a4960046f441617c46edad2b0215.2", + chain: "utxo", + contract_address: "", + token_id: "2", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T09:47:36", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T09:47:36", + last_acquired_date: "2024-03-08T09:47:36", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: "0123456789abcdeffedcba9876543210", + name: "Rare Sats", + description: + 'Rare Sats are attributes, or "satributes," ascribed to different types of sats. Sats are the smallest unit of a Bitcoin, and satributes commemorate special moments like when a sat was mined or used in a transaction.', + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: 5284108, + distinct_nft_count: 7259220, + total_quantity: 7259196, + chains: ["utxo"], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T09:47:36", + block_number: 833711, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 547, + satributes: { + jpeg: { + count: 547, + display_name: "JPEG", + description: + "Sats involved in the possible first bitcoin trade for an image on February 24, 2010", + icon: "https://cdn.simplehash.com/rare_sats/satribute_jpeg.png", + }, + }, + sat_ranges: [ + { + starting_sat: 152060443363905, + value: 547, + distinct_rare_sats: 547, + year: "2009", + subranges: [ + { + starting_sat: 152060443363905, + value: 547, + sat_types: ["jpeg"], + }, + ], + }, + ], + block_number: 833711, + value: 547, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + { + nft_id: "utxo.68f11cb8770c6e761a5763bb47f00b368e03a4960046f441617c46edad2b0215.1", + chain: "utxo", + contract_address: "", + token_id: "1", + name: null, + description: null, + previews: { + image_small_url: null, + image_medium_url: null, + image_large_url: null, + image_opengraph_url: null, + blurhash: null, + predominant_color: null, + }, + image_url: null, + image_properties: null, + video_url: null, + video_properties: null, + audio_url: null, + audio_properties: null, + model_url: null, + model_properties: null, + other_url: null, + other_properties: null, + background_color: null, + external_url: null, + created_date: "2024-03-08T09:47:36", + status: "minted", + token_count: 1, + owner_count: 1, + owners: [ + { + owner_address: "", + quantity: 1, + quantity_string: "1", + first_acquired_date: "2024-03-08T09:47:36", + last_acquired_date: "2024-03-08T09:47:36", + }, + ], + contract: { + type: "UTXO", + name: null, + symbol: null, + deployed_by: null, + deployed_via_contract: null, + owned_by: null, + has_multiple_collections: false, + }, + collection: { + collection_id: "0123456789abcdeffedcba9876543210", + name: "Rare Sats", + description: + 'Rare Sats are attributes, or "satributes," ascribed to different types of sats. Sats are the smallest unit of a Bitcoin, and satributes commemorate special moments like when a sat was mined or used in a transaction.', + image_url: null, + image_properties: null, + banner_image_url: null, + category: null, + is_nsfw: null, + external_url: null, + twitter_username: null, + discord_url: null, + instagram_username: null, + medium_username: null, + telegram_url: null, + marketplace_pages: [], + metaplex_mint: null, + metaplex_candy_machine: null, + metaplex_first_verified_creator: null, + spam_score: null, + floor_prices: [], + top_bids: [], + distinct_owner_count: 5284108, + distinct_nft_count: 7259220, + total_quantity: 7259196, + chains: ["utxo"], + top_contracts: [], + collection_royalties: [], + }, + last_sale: null, + first_created: { + minted_to: "", + quantity: 1, + quantity_string: "1", + timestamp: "2024-03-08T09:47:36", + block_number: 833711, + transaction: "", + transaction_initiator: null, + }, + rarity: { + rank: null, + score: null, + unique_attributes: null, + }, + royalty: [], + extra_metadata: { + attributes: [], + utxo_details: { + distinct_rare_sats: 555, + satributes: { + nakamoto: { + count: 555, + display_name: "Nakamoto", + description: "Sat mined by Satoshi Nakamoto", + icon: "https://cdn.simplehash.com/rare_sats/satribute_nakamoto.png", + }, + }, + sat_ranges: [ + { + starting_sat: 95469010861290, + value: 555, + distinct_rare_sats: 555, + year: "2009", + subranges: [ + { + starting_sat: 95469010861290, + value: 555, + sat_types: ["nakamoto"], + }, + ], + }, + ], + block_number: 833711, + value: 555, + script_pub_key: { + asm: "", + desc: "", + hex: "", + address: "", + type: "", + }, + }, + image_original_url: null, + animation_original_url: null, + metadata_original_url: null, + }, + }, + ], + }, +]; 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..79bd9ee94c49 --- /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 "LLD/features/Collectibles/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..c2fd9cf1e8bf 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 = "ordinals.rareSats.title", } 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..38ce93b53a2a --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/Ordinals.ts @@ -0,0 +1,14 @@ +import { mappingKeysWithIconAndName } from "../Ordinals/components/Icons"; +import { IconProps } from "./Collection"; + +export type MappingKeys = keyof typeof mappingKeysWithIconAndName; + +export 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; +}; diff --git a/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/RareSats.ts b/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/RareSats.ts new file mode 100644 index 000000000000..0aa47984190e --- /dev/null +++ b/apps/ledger-live-desktop/src/newArch/features/Collectibles/types/RareSats.ts @@ -0,0 +1,62 @@ +import { IconProps } from "./Collection"; +import { MappingKeys } from "./Ordinals"; + +export type Satributes = { + [key in MappingKeys]?: { + count: number; + display_name: string | string[]; + description?: string; + icon?: string; + }; +}; + +export type Subrange = { + starting_sat: number; + value: number; + sat_types: string[]; +}; + +export type SatRange = { + starting_sat: number; + value: number; + distinct_rare_sats: number; + year: string; + subranges: Subrange[]; +}; + +export type UtxoDetails = { + distinct_rare_sats: number; + satributes: Satributes; + sat_ranges: SatRange[]; + block_number: number; + value: number; + script_pub_key: { + asm: string; + desc: string; + hex: string; + address: string; + type: string; + }; +}; + +export type Icons = Record JSX.Element>; + +export type ExtraMetadata = { + attributes: { + trait_type: string; + value: string; + display_type: string; + }[]; + utxo_details: UtxoDetails; + image_original_url: string | null; + animation_original_url: string | null; + metadata_original_url: string | null; +}; + +export type Sat = { + extra_metadata: ExtraMetadata; +}; + +export type MockedRareSat = { + nfts: Sat[]; +}; 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