✨feat(ui): add simplehash calls for ordis

.changeset/dry-parents-breathe.md

@@ -0,0 +1,7 @@
+---
+"ledger-live-desktop": patch
+"@ledgerhq/live-nft-react": patch
+"@ledgerhq/live-nft": patch
+---
+
+Plug the front with simplehash api for the rare sats table and inscriptions table

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Flex, Icons, Text } from "@ledgerhq/react-ui";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  hasError: boolean;
+};
+
+const Error: React.FC<Props> = ({ hasError }) => {
+  const { t } = useTranslation();
+  if (!hasError) return null;
+
+  return (
+    <Flex justifyContent="center" my={4} columnGap={2}>
+      <Icons.Warning size={"S"} color="palette.error.c60" />
+      <Text color="palette.error.c60">{t("crash.title")}</Text>
+    </Flex>
+  );
+};
+
+export default Error;

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

@@ -3,71 +3,144 @@ import { Icons } from "@ledgerhq/react-ui";
 import { IconProps } from "../../types/Collection";
 
 export const mappingKeysWithIconAndName = {
-  alpha: { icon: (props: IconProps) => <Icons.OrdinalsAlpha {...props} />, name: "Alpha" },
+  alpha: {
+    icon: (props: IconProps) => <Icons.OrdinalsAlpha {...props} />,
+    name: "Alpha",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.alpha",
+  },
   black_epic: {
     icon: (props: IconProps) => <Icons.OrdinalsBlackEpic {...props} />,
     name: "Black Epic",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.black_epic",
   },
   black_legendary: {
     icon: (props: IconProps) => <Icons.OrdinalsBlackLegendary {...props} />,
     name: "Black Legendary",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.black_legendary",
   },
   black_mythic: {
     icon: (props: IconProps) => <Icons.OrdinalsBlackMythic {...props} />,
     name: "Black Mythic",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.black_mythic",
   },
   black_rare: {
     icon: (props: IconProps) => <Icons.OrdinalsBlackRare {...props} />,
     name: "Black Rare",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.black_rare",
   },
   black_uncommon: {
     icon: (props: IconProps) => <Icons.OrdinalsBlackUncommon {...props} />,
     name: "Black Uncommon",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.black_uncommon",
+  },
+  block_9: {
+    icon: (props: IconProps) => <Icons.OrdinalsBlock9 {...props} />,
+    name: "Block 9",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.block_9",
   },
-  block_9: { icon: (props: IconProps) => <Icons.OrdinalsBlock9 {...props} />, name: "Block 9" },
   block_9_450x: {
     icon: (props: IconProps) => <Icons.OrdinalsBlock9450X {...props} />,
     name: "Block 9 450x",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.block_9_450x",
+  },
+  block_78: {
+    icon: (props: IconProps) => <Icons.OrdinalsBlock78 {...props} />,
+    name: "Block 78",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.block_78",
   },
-  block_78: { icon: (props: IconProps) => <Icons.OrdinalsBlock78 {...props} />, name: "Block 78" },
   block_286: {
     icon: (props: IconProps) => <Icons.OrdinalsBlock286 {...props} />,
     name: "Block 286",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.block_286",
   },
   block_666: {
     icon: (props: IconProps) => <Icons.OrdinalsBlock666 {...props} />,
     name: "Block 666",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.block_666",
+  },
+  common: {
+    icon: (props: IconProps) => <Icons.OrdinalsCommon {...props} />,
+    name: "Common",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.common",
+  },
+  epic: {
+    icon: (props: IconProps) => <Icons.OrdinalsEpic {...props} />,
+    name: "Epic",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.epic",
   },
-  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",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.first_tx",
+  },
+  hitman: {
+    icon: (props: IconProps) => <Icons.OrdinalsHitman {...props} />,
+    name: "Hitman",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.hitman",
+  },
+  jpeg: {
+    icon: (props: IconProps) => <Icons.OrdinalsJpeg {...props} />,
+    name: "JPEG",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.jpeg",
+  },
+  legacy: {
+    icon: (props: IconProps) => <Icons.OrdinalsLegacy {...props} />,
+    name: "Legacy",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.legacy",
   },
-  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",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.legendary",
+  },
+  mythic: {
+    icon: (props: IconProps) => <Icons.OrdinalsMythic {...props} />,
+    name: "Mythic",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.mythic",
+  },
+  nakamoto: {
+    icon: (props: IconProps) => <Icons.OrdinalsNakamoto {...props} />,
+    name: "Nakamoto",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.nakamoto",
+  },
+  omega: {
+    icon: (props: IconProps) => <Icons.OrdinalsOmega {...props} />,
+    name: "Omega",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.omega",
   },
-  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",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.paliblock",
   },
   palindrome: {
     icon: (props: IconProps) => <Icons.OrdinalsPalindrome {...props} />,
     name: "Palindrome",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.palindrome",
   },
   palinception: {
     icon: (props: IconProps) => <Icons.OrdinalsPalinception {...props} />,
     name: "Palinception",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.palinception",
+  },
+  pizza: {
+    icon: (props: IconProps) => <Icons.OrdinalsPizza {...props} />,
+    name: "Pizza",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.pizza",
+  },
+  rare: {
+    icon: (props: IconProps) => <Icons.OrdinalsRare {...props} />,
+    name: "Rare",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.rare",
+  },
+  uncommon: {
+    icon: (props: IconProps) => <Icons.OrdinalsUncommon {...props} />,
+    name: "Uncommon",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.uncommon",
+  },
+  vintage: {
+    icon: (props: IconProps) => <Icons.OrdinalsVintage {...props} />,
+    name: "Vintage",
+    descriptionTranslationKey: "ordinals.rareSats.rareSat.description.vintage",
   },
-  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/Inscriptions/helpers.ts

@@ -0,0 +1,43 @@
+import { SimpleHashNft } from "@ledgerhq/live-nft/api/types";
+import { IconProps } from "LLD/features/Collectibles/types/Collection";
+import { mappingKeysWithIconAndName } from "../Icons";
+
+function matchCorrespondingIcon(
+  rareSats: SimpleHashNft[],
+): Array<SimpleHashNft & { icons: Array<({ size, color, style }: IconProps) => JSX.Element> }> {
+  return rareSats.map(rareSat => {
+    const iconKeys: string[] = [];
+    const rarity = rareSat.extra_metadata?.ordinal_details?.sat_rarity?.toLowerCase();
+
+    if (rarity && rarity !== "common") {
+      iconKeys.push(rarity.replace(" ", "_"));
+    }
+
+    const icons = iconKeys
+      .map(
+        iconKey =>
+          mappingKeysWithIconAndName[iconKey as keyof typeof mappingKeysWithIconAndName]?.icon,
+      )
+      .filter(Boolean) as Array<({ size, color, style }: IconProps) => JSX.Element>;
+
+    return { ...rareSat, icons };
+  });
+}
+
+export function getInscriptionsData(inscriptions: SimpleHashNft[]) {
+  const inscriptionsWithIcons = matchCorrespondingIcon(inscriptions);
+  return inscriptionsWithIcons.map(item => ({
+    tokenName: item.name || item.contract.name || "",
+    collectionName: item.collection.name,
+    tokenIcons: item.icons,
+    rareSatName: item.extra_metadata?.ordinal_details?.sat_name,
+    media: {
+      uri: item.image_url || item.previews?.image_small_url,
+      isLoading: false,
+      useFallback: true,
+      contentType: item.extra_metadata?.ordinal_details?.content_type,
+      mediaType: "image",
+    },
+    onClick: () => {},
+  }));
+}

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { Account } from "@ledgerhq/types-live";
 import { Box, Flex } from "@ledgerhq/react-ui";
 import { useInscriptionsModel } from "./useInscriptionsModel";
 import TableContainer from "~/renderer/components/TableContainer";
@@ -8,73 +7,86 @@ import { OrdinalsRowProps, TableHeaderTitleKey } from "LLD/features/Collectibles
 import TableRow from "LLD/features/Collectibles/components/Collection/TableRow";
 import ShowMore from "LLD/features/Collectibles/components/Collection/ShowMore";
 import { MediaProps } from "LLD/features/Collectibles/types/Media";
+import { SimpleHashNft } from "@ledgerhq/live-nft/api/types";
+import { Status } from "LLD/features/Collectibles/types/Collectibles";
+import { TanStackStatus } from "LLD/features/Collectibles/types/enum/Collectibles";
+import Loader from "../Loader";
+import Error from "../Error";
 
-type ViewProps = ReturnType<typeof useInscriptionsModel>;
+type ViewProps = ReturnType<typeof useInscriptionsModel> & { status: Status };
 
 type Props = {
-  account: Account;
+  inscriptions: SimpleHashNft[];
+  status: Status;
 };
 
 export type InscriptionsItemProps = {
-  isLoading: boolean;
   tokenName: string;
   collectionName: string;
   tokenIcons: OrdinalsRowProps["tokenIcons"];
   media: MediaProps;
   onClick: () => void;
 };
 
-const Item: React.FC<InscriptionsItemProps> = ({
+type ItemProps = {
+  isLoading: boolean;
+} & InscriptionsItemProps;
+
+const Item: React.FC<ItemProps> = ({
   isLoading,
   tokenName,
   collectionName,
   tokenIcons,
   media,
   onClick,
-}) => {
-  return (
-    <TableRow
-      isLoading={isLoading}
-      tokenName={tokenName}
-      collectionName={collectionName}
-      tokenIcons={tokenIcons}
-      media={media}
-      onClick={onClick}
-    />
-  );
-};
+}) => (
+  <TableRow
+    isLoading={isLoading}
+    tokenName={tokenName}
+    collectionName={collectionName}
+    tokenIcons={tokenIcons}
+    media={media}
+    onClick={onClick}
+  />
+);
+
+const View: React.FC<ViewProps> = ({ displayShowMore, status, inscriptions, onShowMore }) => {
+  const isLoading = status === TanStackStatus.Pending;
+  const hasError = status === TanStackStatus.Error;
+  const hasInscriptions = inscriptions.length > 0 && !hasError;
+  const nothingToShow = !hasInscriptions && !isLoading && !hasError;
 
-function View({ displayedObjects, displayShowMore, onShowMore }: ViewProps) {
   return (
     <Box>
-      <TableContainer id="oridinals-inscriptions">
+      <TableContainer id="ordinals-inscriptions">
         <TableHeader titleKey={TableHeaderTitleKey.Inscriptions} />
-        {/** titlekey doesn't need to be translated so we keep it hard coded  */}
-        {displayedObjects ? (
-          displayedObjects.map((item, index) => (
+        <Loader isLoading={isLoading} />
+        <Error hasError={hasError} />
+        {hasInscriptions &&
+          inscriptions.map((item, index) => (
             <Item
               key={index}
-              isLoading={item.isLoading}
+              isLoading={isLoading}
               tokenName={item.tokenName}
               collectionName={item.collectionName}
               tokenIcons={item.tokenIcons}
               media={item.media}
               onClick={item.onClick}
             />
-          ))
-        ) : (
-          <Flex justifyContent={"center"} my={12}>
-            {"NOTHING TO SHOW"}
+          ))}
+        {nothingToShow && (
+          <Flex justifyContent="center" my={4}>
+            {"NOTHING TO SHOW WAITING FOR DESIGN"}
           </Flex>
         )}
-        {displayShowMore && <ShowMore onShowMore={onShowMore} />}
+        {displayShowMore && !hasError && <ShowMore onShowMore={onShowMore} isInscriptions />}
       </TableContainer>
     </Box>
   );
-}
-
-const Inscriptions: React.FC<Props> = ({ account }: Props) => {
-  return <View {...useInscriptionsModel({ account })} />;
 };
 
+const Inscriptions: React.FC<Props> = ({ inscriptions, status }) => (
+  <View status={status} {...useInscriptionsModel({ inscriptions })} />
+);
+
 export default Inscriptions;