✨(lld): add hide inscription feature

LedgerHQ · Oct 2, 2024 · ef1e14a · ef1e14a
1 parent 94b2e3d
commit ef1e14a
Show file tree

Hide file tree

Showing 27 changed files with 516 additions and 34 deletions.
diff --git a/.changeset/breezy-cycles-design.md b/.changeset/breezy-cycles-design.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Add the hide inscription feature for ordinals
diff --git a/apps/ledger-live-desktop/src/newArch/components/ContextMenu/CollectibleContextMenu.tsx b/apps/ledger-live-desktop/src/newArch/components/ContextMenu/CollectibleContextMenu.tsx
@@ -16,6 +16,8 @@ type Props = {
   leftClick?: boolean;
   goBackToAccount?: boolean;
   typeOfCollectible: CollectibleType;
+  inscriptionId?: string;
+  inscriptionName?: string;
 };
 
 export default function CollectionContextMenu({
@@ -26,6 +28,8 @@ export default function CollectionContextMenu({
   leftClick,
   goBackToAccount = false,
   typeOfCollectible,
+  inscriptionId,
+  inscriptionName,
 }: Props) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -36,6 +40,8 @@ export default function CollectionContextMenu({
     collectionName,
     collectionAddress,
     account,
+    inscriptionId,
+    inscriptionName,
     dispatch,
     setDrawer,
     history,

diff --git a/apps/ledger-live-desktop/src/newArch/components/ContextMenu/createContextMenuItems.ts b/apps/ledger-live-desktop/src/newArch/components/ContextMenu/createContextMenuItems.ts
@@ -12,6 +12,8 @@ type Props = {
   collectionAddress: string;
   collectionName?: string | null;
   goBackToAccount?: boolean;
+  inscriptionId?: string;
+  inscriptionName?: string;
   typeOfCollectible: CollectibleType;
   dispatch: Dispatch;
   setDrawer: () => void;
@@ -24,6 +26,8 @@ export function createContextMenuItems({
   collectionName,
   collectionAddress,
   account,
+  inscriptionId,
+  inscriptionName,
   dispatch,
   setDrawer,
   history,
@@ -52,5 +56,27 @@ export function createContextMenuItems({
       },
     ];
   }
+  if (typeOfCollectible === CollectibleTypeEnum.Inscriptions) {
+    return [
+      {
+        key: "hide",
+        label: t("ordinals.inscriptions.hide"),
+        Icon: IconsLegacy.NoneMedium,
+        callback: () =>
+          dispatch(
+            openModal("MODAL_HIDE_INSCRIPTION", {
+              inscriptionName: String(inscriptionName),
+              inscriptionId: String(inscriptionId),
+              onClose: () => {
+                if (goBackToAccount) {
+                  setDrawer();
+                  history.replace(`account/${account.id}`);
+                }
+              },
+            }),
+          ),
+      },
+    ];
+  }
   return [];
 }
diff --git a/.../newArch/features/Collectibles/Ordinals/components/Inscriptions/DetailsDrawer/Actions.tsx b/.../newArch/features/Collectibles/Ordinals/components/Inscriptions/DetailsDrawer/Actions.tsx
@@ -5,23 +5,36 @@ import { useTranslation } from "react-i18next";
 import { ExternalViewerButton } from "LLD/features/Collectibles/components/DetailDrawer/components";
 import { SimpleHashNft } from "@ledgerhq/live-nft/api/types";
 import { Account } from "@ledgerhq/types-live";
+import { useDispatch } from "react-redux";
+import { openModal } from "~/renderer/actions/modals";
 
 type ActionsProps = {
   inscription: SimpleHashNft;
   account: Account;
+  onModalClose: () => void;
 };
 
-const Actions: React.FC<ActionsProps> = ({ inscription, account }) => {
+const Actions: React.FC<ActionsProps> = ({ inscription, account, onModalClose }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const onClick = () => {
+    dispatch(
+      openModal("MODAL_HIDE_INSCRIPTION", {
+        inscriptionName: inscription.name || inscription.contract.name || "",
+        inscriptionId: String(inscription.extra_metadata?.ordinal_details?.inscription_id),
+        onClose: () => onModalClose(),
+      }),
+    );
+  };
+
   return (
     <Flex alignItems="center" columnGap={12}>
       <Button
         outlineGrey
         style={{ flex: 1, justifyContent: "center" }}
         my={4}
-        onClick={() => {
-          /* TODO */
-        }}
+        onClick={onClick}
         center
       >
         <Flex columnGap={1}>

diff --git a/...rc/newArch/features/Collectibles/Ordinals/components/Inscriptions/DetailsDrawer/index.tsx b/...rc/newArch/features/Collectibles/Ordinals/components/Inscriptions/DetailsDrawer/index.tsx
@@ -47,7 +47,7 @@ const View: React.FC<ViewProps> = ({ data, rareSat, account, inscription, onClos
       </DetailDrawer.Subtitle>
     )}
     <DetailDrawer.Actions>
-      <Actions account={account} inscription={inscription} />
+      <Actions account={account} onModalClose={onClose} inscription={inscription} />
     </DetailDrawer.Actions>
   </DetailDrawer>
 );

diff --git a/...top/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/HideModal/Body.tsx b/...top/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/HideModal/Body.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { Text } from "@ledgerhq/react-ui";
+import Box from "~/renderer/components/Box";
+import { Trans, useTranslation } from "react-i18next";
+import ModalBody from "~/renderer/components/Modal/ModalBody";
+import Button from "~/renderer/components/Button";
+import { useDispatch } from "react-redux";
+import { hideOrdinalsAsset } from "~/renderer/actions/settings";
+
+const Body = ({
+  onClose,
+  inscriptionName,
+  inscriptionId,
+}: {
+  onClose: () => void;
+  inscriptionName: string;
+  inscriptionId: string;
+}) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const confirmHide = () => {
+    dispatch(hideOrdinalsAsset(inscriptionId));
+    onClose();
+  };
+
+  return (
+    <ModalBody
+      onClose={onClose}
+      title={t("ordinals.inscriptions.modal.title")}
+      render={() => (
+        <Box>
+          <Box
+            color="palette.text.shade60"
+            mb={2}
+            mt={3}
+            alignItems={"center"}
+            textAlign={"center"}
+          >
+            <Trans
+              i18nKey="ordinals.inscriptions.modal.desc"
+              t={t}
+              values={{ inscriptionName }}
+              components={[<Text key={1} ff="Inter|SemiBold" alignSelf={"center"} />]}
+            />
+          </Box>
+        </Box>
+      )}
+      renderFooter={() => (
+        <Box horizontal alignItems="center" justifyContent="flex-end" flow={2}>
+          <Button onClick={onClose}>{t("common.cancel")}</Button>
+          <Button data-testid="modal-confirm-button" onClick={confirmHide} primary>
+            {t("ordinals.inscriptions.hide")}
+          </Button>
+        </Box>
+      )}
+    />
+  );
+};
+export default Body;
diff --git a/...op/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/HideModal/index.tsx b/...op/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/HideModal/index.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Modal from "~/renderer/components/Modal";
+import Body from "./Body";
+
+const HideNftCollectionModal = () => (
+  <Modal
+    name="MODAL_HIDE_INSCRIPTION"
+    centered
+    render={({ data, onClose }) => (
+      <Body
+        inscriptionName={data.inscriptionName}
+        inscriptionId={data.inscriptionId}
+        onClose={() => {
+          onClose?.();
+          data?.onClose?.();
+        }}
+      />
+    )}
+  />
+);
+export default HideNftCollectionModal;
diff --git a/...desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/Item/index.tsx b/...desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/Item/index.tsx
@@ -4,10 +4,14 @@ 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";
+import { CollectibleTypeEnum } from "LLD/features/Collectibles/types/enum/Collectibles";
+import { BitcoinAccount } from "@ledgerhq/coin-bitcoin/lib/types";
+import CollectionContextMenu from "LLD/components/ContextMenu/CollectibleContextMenu";
 
 type ItemProps = {
   isLoading: boolean;
   inscriptionsGroupedWithRareSats: GroupedNftOrdinals[];
+  account: BitcoinAccount;
 } & InscriptionsItemProps;
 
 const Item: React.FC<ItemProps> = ({
@@ -17,6 +21,7 @@ const Item: React.FC<ItemProps> = ({
   media,
   nftId,
   inscriptionsGroupedWithRareSats,
+  account,
   onClick,
 }) => {
   const correspondingRareSat = findCorrespondingSat(inscriptionsGroupedWithRareSats, nftId);
@@ -25,15 +30,23 @@ const Item: React.FC<ItemProps> = ({
   }, [correspondingRareSat]);
 
   return (
-    <TableRow
-      isLoading={isLoading}
-      tokenName={tokenName}
-      collectionName={collectionName}
-      tokenIcons={rareSat?.icons || []}
-      media={media}
-      rareSatName={rareSat?.names || []}
-      onClick={onClick}
-    />
+    <CollectionContextMenu
+      account={account}
+      collectionAddress={nftId}
+      typeOfCollectible={CollectibleTypeEnum.Inscriptions}
+      inscriptionId={nftId}
+      inscriptionName={tokenName}
+    >
+      <TableRow
+        isLoading={isLoading}
+        tokenName={tokenName}
+        collectionName={collectionName}
+        tokenIcons={rareSat?.icons || []}
+        media={media}
+        rareSatName={rareSat?.names || []}
+        onClick={onClick}
+      />
+    </CollectionContextMenu>
   );
 };
 

diff --git a/...ive-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/helpers.ts b/...ive-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/helpers.ts
@@ -7,7 +7,7 @@ export function getInscriptionsData(
 ) {
   return inscriptions.map(item => ({
     tokenName: item.name || item.contract.name || "",
-    nftId: item.nft_id,
+    nftId: String(item.extra_metadata?.ordinal_details?.inscription_id),
     collectionName: item.collection.name,
     media: {
       uri: item.image_url || item.previews?.image_small_url,

diff --git a/...live-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/index.tsx b/...live-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/index.tsx
@@ -14,12 +14,14 @@ import { CollectibleTypeEnum } from "LLD/features/Collectibles/types/enum/Collec
 import Button from "~/renderer/components/Button";
 import { useTranslation } from "react-i18next";
 import { GroupedNftOrdinals } from "@ledgerhq/live-nft-react/index";
+import { BitcoinAccount } from "@ledgerhq/coin-bitcoin/lib/types";
 
 type ViewProps = ReturnType<typeof useInscriptionsModel> & {
   isLoading: boolean;
   isError: boolean;
   error: Error | null;
   inscriptionsGroupedWithRareSats: GroupedNftOrdinals[];
+  account: BitcoinAccount;
   onReceive: () => void;
 };
 
@@ -29,6 +31,7 @@ type Props = {
   isError: boolean;
   error: Error | null;
   inscriptionsGroupedWithRareSats: GroupedNftOrdinals[];
+  account: BitcoinAccount;
   onReceive: () => void;
   onInscriptionClick: (inscription: SimpleHashNft) => void;
 };
@@ -40,6 +43,7 @@ const View: React.FC<ViewProps> = ({
   inscriptions,
   error,
   inscriptionsGroupedWithRareSats,
+  account,
   onShowMore,
   onReceive,
 }) => {
@@ -57,6 +61,7 @@ const View: React.FC<ViewProps> = ({
         {hasInscriptions &&
           inscriptions.map((item, index) => (
             <Item
+              account={account}
               key={index}
               isLoading={isLoading}
               inscriptionsGroupedWithRareSats={inscriptionsGroupedWithRareSats}
@@ -85,13 +90,15 @@ const Inscriptions: React.FC<Props> = ({
   isError,
   error,
   inscriptionsGroupedWithRareSats,
+  account,
   onReceive,
   onInscriptionClick,
 }) => (
   <View
     isLoading={isLoading}
     isError={isError}
     error={error}
+    account={account}
     onReceive={onReceive}
     inscriptionsGroupedWithRareSats={inscriptionsGroupedWithRareSats}
     {...useInscriptionsModel({ inscriptions, onInscriptionClick })}

diff --git a/...c/newArch/features/Collectibles/Ordinals/components/Inscriptions/useInscriptionsModel.tsx b/...c/newArch/features/Collectibles/Ordinals/components/Inscriptions/useInscriptionsModel.tsx
@@ -22,11 +22,16 @@ export const useInscriptionsModel = ({ inscriptions, onInscriptionClick }: Props
     useState<InscriptionsItemProps[]>(initialDisplayedObjects);
 
   useEffect(() => {
-    if (displayedObjects.length === 0) {
-      if (items.length > 3) setDisplayShowMore(true);
+    const filteredDisplayedObjects = displayedObjects.filter(displayedObject =>
+      items.some(item => item.nftId === displayedObject.nftId),
+    );
+    if (filteredDisplayedObjects.length !== displayedObjects.length) {
+      setDisplayedObjects(filteredDisplayedObjects);
+    } else if (displayedObjects.length === 0 && items.length > 3) {
+      setDisplayShowMore(true);
       setDisplayedObjects(items.slice(0, 3));
     }
-  }, [items, displayedObjects.length]);
+  }, [items, displayedObjects]);
 
   const onShowMore = () => {
     setDisplayedObjects(prevDisplayedObjects => {

diff --git a/.../ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/screens/Account/index.tsx b/.../ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/screens/Account/index.tsx
@@ -36,6 +36,7 @@ const View: React.FC<ViewProps> = ({
       onReceive={onReceive}
       onInscriptionClick={onInscriptionClick}
       inscriptionsGroupedWithRareSats={inscriptionsGroupedWithRareSats}
+      account={account}
     />
     <RareSats rareSats={rareSats} onReceive={onReceive} {...rest} />
     <DiscoveryDrawer isOpen={isDrawerOpen} onClose={handleDrawerClose} />