✨(lld): add details drawer for inscriptions (#7908)

✨(lld): add detaildrawer for inscriptions

.changeset/dry-otters-shop.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"@ledgerhq/live-nft": patch
+---
+
+Add detail drawers for inscriptions of ordinals protocol

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Flex, Icons, IconsLegacy, Text } from "@ledgerhq/react-ui";
+import Button from "~/renderer/components/Button";
+import { useTranslation } from "react-i18next";
+
+const Actions = () => {
+  const { t } = useTranslation();
+  return (
+    <Flex alignItems="center" columnGap={12}>
+      <Button
+        outlineGrey
+        style={{ flex: 1, justifyContent: "center" }}
+        my={4}
+        onClick={() => {
+          /* TODO */
+        }}
+        center
+      >
+        <Flex columnGap={1}>
+          <Icons.Eye color="neutral.c100" />
+          <Text variant="bodyLineHeight" fontWeight="600" fontSize={14} color="neutral.c100">
+            {t("ordinals.inscriptions.detailsDrawer.hide")}
+          </Text>
+        </Flex>
+      </Button>
+      <Button outlineGrey>
+        <IconsLegacy.OthersMedium />
+      </Button>
+    </Flex>
+  );
+};
+export default Actions;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { Flex, Text } from "@ledgerhq/react-ui";
+import IconContainer from "LLD/features/Collectibles/components/Collection/TableRow/IconContainer";
+import { IconProps } from "LLD/features/Collectibles/types/Collection";
+import { MappingKeys } from "LLD/features/Collectibles/types/Ordinals";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  icons: (({ size, color, style }: IconProps) => JSX.Element)[];
+  names: MappingKeys[];
+};
+
+const SubTitle: React.FC<Props> = ({ icons, names }) => {
+  const { t } = useTranslation();
+  return (
+    <Flex mb={20} alignItems="center" columnGap={12}>
+      <IconContainer icons={icons} iconNames={names} />
+      <Text variant="bodyLineHeight" fontSize={14} color="neutral.c70">
+        {t("ordinals.inscriptions.detailsDrawer.storedOnChain")}
+      </Text>
+    </Flex>
+  );
+};
+
+export default SubTitle;

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

@@ -1,18 +1,66 @@
 import React from "react";
-import { SideDrawer } from "~/renderer/components/SideDrawer";
 import { SimpleHashNft } from "@ledgerhq/live-nft/api/types";
+import { DetailDrawer } from "LLD/features/Collectibles/components";
+import { CollectibleTypeEnum } from "LLD/features/Collectibles/types/enum/Collectibles";
+import useInscriptionDetailDrawer from "./useInscriptionDetailDrawer";
+import Actions from "./Actions";
+import SubTitle from "./SubTitle";
+
+type ViewProps = ReturnType<typeof useInscriptionDetailDrawer> & {
+  onClose: () => void;
+};
 
 type Props = {
   inscription: SimpleHashNft;
+  correspondingRareSat: SimpleHashNft | null | undefined;
+  isLoading: boolean;
   onClose: () => void;
 };
-const InscriptionDetailsDrawer: React.FC<Props> = ({ inscription, onClose }) => {
-  // will be replaced by DetailsDrawer from collectibles
+
+const View: React.FC<ViewProps> = ({ data, rareSat, onClose }) => (
+  <DetailDrawer
+    collectibleType={CollectibleTypeEnum.NFT}
+    areFieldsLoading={data.areFieldsLoading}
+    collectibleName={data.collectibleName}
+    contentType={data.contentType}
+    collectionName={data.collectionName}
+    details={data.details}
+    previewUri={data.previewUri}
+    originalUri={data.originalUri}
+    isPanAndZoomOpen={data.isPanAndZoomOpen}
+    mediaType={data.mediaType}
+    tags={data.tags}
+    useFallback={data.useFallback}
+    tokenId={data.tokenId}
+    isOpened={true}
+    closeCollectiblesPanAndZoom={data.closeCollectiblesPanAndZoom}
+    handleRequestClose={onClose}
+    openCollectiblesPanAndZoom={data.openCollectiblesPanAndZoom}
+    setUseFallback={data.setUseFallback}
+  >
+    {rareSat?.icons && (
+      <DetailDrawer.Subtitle>
+        <SubTitle icons={Object.values(rareSat.icons)} names={rareSat.names} />
+      </DetailDrawer.Subtitle>
+    )}
+    <DetailDrawer.Actions>
+      <Actions />
+    </DetailDrawer.Actions>
+  </DetailDrawer>
+);
+
+const InscriptionDetailDrawer = ({
+  inscription,
+  isLoading,
+  correspondingRareSat,
+  onClose,
+}: Props) => {
   return (
-    <SideDrawer direction={"left"} isOpen={!!inscription} onRequestClose={onClose}>
-      {inscription.name || inscription.contract.name}
-    </SideDrawer>
+    <View
+      onClose={onClose}
+      {...useInscriptionDetailDrawer({ isLoading, inscription, correspondingRareSat })}
+    />
   );
 };
 
-export default InscriptionDetailsDrawer;
+export default InscriptionDetailDrawer;

apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/DetailsDrawer/useInscriptionDetailDrawer.ts

@@ -0,0 +1,64 @@
+import { useMemo, useState } from "react";
+import { SimpleHashNft } from "@ledgerhq/live-nft/api/types";
+import useCollectibles from "LLD/features/Collectibles/hooks/useCollectibles";
+import { createDetails } from "LLD/features/Collectibles/utils/createInscriptionDetailsArrays";
+import { useCalendarFormatted } from "~/renderer/hooks/useDateFormatter";
+import { Tag } from "LLD/features/Collectibles/types/DetailDrawer";
+import { processRareSat } from "../helpers";
+
+type Props = {
+  isLoading: boolean;
+  inscription: SimpleHashNft;
+  correspondingRareSat: SimpleHashNft | null | undefined;
+};
+
+const useInscriptionDetailDrawer = ({ isLoading, inscription, correspondingRareSat }: Props) => {
+  const [useFallback, setUseFallback] = useState(false);
+  const imageUri =
+    inscription.video_url || inscription.previews?.image_large_url || inscription.image_url;
+
+  const isVideo = !!inscription.video_url;
+
+  const contentType = isVideo ? "video" : imageUri ? "image" : "";
+
+  const { isPanAndZoomOpen, openCollectiblesPanAndZoom, closeCollectiblesPanAndZoom } =
+    useCollectibles();
+
+  const createdDateFromTimestamp = new Date(inscription.first_created?.timestamp || 0);
+  const formattedCreatedDate = useCalendarFormatted(createdDateFromTimestamp);
+  const createdDate = createdDateFromTimestamp === new Date(0) ? "" : formattedCreatedDate;
+  const details = createDetails(inscription, createdDate);
+
+  const tags: Tag[] =
+    inscription.extra_metadata?.attributes?.map(attr => ({
+      key: attr.trait_type,
+      value: attr.value,
+    })) || [];
+
+  const rareSat = useMemo(() => {
+    if (correspondingRareSat) return processRareSat(correspondingRareSat);
+  }, [correspondingRareSat]);
+
+  const data = {
+    areFieldsLoading: isLoading,
+    collectibleName: inscription.name || inscription.contract.name || "",
+    contentType,
+    collectionName: inscription.collection.name || "",
+    details: details,
+    previewUri: imageUri,
+    originalUri: imageUri,
+    isPanAndZoomOpen,
+    mediaType: inscription.video_properties?.mime_type || "image",
+    tags: tags,
+    useFallback: useFallback,
+    tokenId: inscription.nft_id,
+    isOpened: true,
+    closeCollectiblesPanAndZoom,
+    openCollectiblesPanAndZoom,
+    setUseFallback: setUseFallback,
+  };
+
+  return { inscription, data, rareSat };
+};
+
+export default useInscriptionDetailDrawer;

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

@@ -4,9 +4,10 @@ import Switch from "~/renderer/components/Switch";
 import { hasProtectedOrdinalsAssetsSelector } from "~/renderer/reducers/settings";
 import { setHasProtectedOrdinalsAssets } from "~/renderer/actions/settings";
 import { useDispatch, useSelector } from "react-redux";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
 const ProtectBox: React.FC = () => {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const hasProtectedOrdinals = useSelector(hasProtectedOrdinalsAssetsSelector);
 

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

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import { InscriptionsItemProps } from "LLD/features/Collectibles/types/Inscriptions";
+import TableRow from "LLD/features/Collectibles/components/Collection/TableRow";
+import { GroupedNftOrdinals } from "@ledgerhq/live-nft-react/index";
+import { findCorrespondingSat } from "LLD/features/Collectibles/utils/findCorrespondingSat";
+import { processRareSat } from "../helpers";
+
+type ItemProps = {
+  isLoading: boolean;
+  inscriptionsGroupedWithRareSats: GroupedNftOrdinals[];
+} & InscriptionsItemProps;
+
+const Item: React.FC<ItemProps> = ({
+  isLoading,
+  tokenName,
+  collectionName,
+  media,
+  nftId,
+  inscriptionsGroupedWithRareSats,
+  onClick,
+}) => {
+  const correspondingRareSat = findCorrespondingSat(inscriptionsGroupedWithRareSats, nftId);
+  const rareSat = useMemo(() => {
+    if (correspondingRareSat) return processRareSat(correspondingRareSat.rareSat);
+  }, [correspondingRareSat]);
+
+  return (
+    <TableRow
+      isLoading={isLoading}
+      tokenName={tokenName}
+      collectionName={collectionName}
+      tokenIcons={rareSat?.icons || []}
+      media={media}
+      rareSatName={rareSat?.names || []}
+      onClick={onClick}
+    />
+  );
+};
+
+export default Item;

apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/helpers.ts

@@ -1,40 +1,14 @@
 import { SimpleHashNft } from "@ledgerhq/live-nft/api/types";
-import { IconProps } from "LLD/features/Collectibles/types/Collection";
-import { mappingKeysWithIconAndName } from "../Icons";
-import { MappingKeys } from "LLD/features/Collectibles/types/Ordinals";
-
-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 };
-  });
-}
+import { createRareSatObject, matchCorrespondingIcon } from "../helpers";
 
 export function getInscriptionsData(
   inscriptions: SimpleHashNft[],
   onInscriptionClick: (inscription: SimpleHashNft) => void,
 ) {
-  const inscriptionsWithIcons = matchCorrespondingIcon(inscriptions);
-  return inscriptionsWithIcons.map(item => ({
+  return inscriptions.map(item => ({
     tokenName: item.name || item.contract.name || "",
+    nftId: item.nft_id,
     collectionName: item.collection.name,
-    tokenIcons: item.icons,
-    rareSatName: [item.extra_metadata?.ordinal_details?.sat_rarity] as MappingKeys[],
     media: {
       uri: item.image_url || item.previews?.image_small_url,
       isLoading: false,
@@ -45,3 +19,9 @@ export function getInscriptionsData(
     onClick: () => onInscriptionClick(item),
   }));
 }
+
+export function processRareSat(inscription: SimpleHashNft) {
+  const matchedRareSatsIcons = matchCorrespondingIcon(inscription);
+  const rareSatObject = createRareSatObject({ rareSat: matchedRareSatsIcons });
+  return rareSatObject.rareSat[0];
+}