✨(lld): add hide inscription feature

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

Hide file tree

Showing 17 changed files with 355 additions and 18 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,6 +5,8 @@ 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;
@@ -13,15 +15,24 @@ type ActionsProps = {
 
 const Actions: React.FC<ActionsProps> = ({ inscription, account }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const onClick = () => {
+    dispatch(
+      openModal("MODAL_HIDE_INSCRIPTION", {
+        inscriptionName: inscription.name || inscription.contract.name || "",
+        inscriptionId: inscription.nft_id,
+      }),
+    );
+  };
+
   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/...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/...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/.../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} />

diff --git a/...ktop/src/newArch/features/Collectibles/Ordinals/screens/Account/useBitcoinAccountModel.ts b/...ktop/src/newArch/features/Collectibles/Ordinals/screens/Account/useBitcoinAccountModel.ts
@@ -5,7 +5,10 @@ import { useState, useEffect, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { openModal } from "~/renderer/actions/modals";
 import { setHasSeenOrdinalsDiscoveryDrawer } from "~/renderer/actions/settings";
-import { hasSeenOrdinalsDiscoveryDrawerSelector } from "~/renderer/reducers/settings";
+import {
+  hasSeenOrdinalsDiscoveryDrawerSelector,
+  hiddenOrdinalsAssetSelector,
+} from "~/renderer/reducers/settings";
 import { findCorrespondingSat } from "LLD/features/Collectibles/utils/findCorrespondingSat";
 
 interface Props {
@@ -14,6 +17,7 @@ interface Props {
 
 export const useBitcoinAccountModel = ({ account }: Props) => {
   const dispatch = useDispatch();
+  const hiddenOrdinalAssets = useSelector(hiddenOrdinalsAssetSelector);
   const hasSeenDiscoveryDrawer = useSelector(hasSeenOrdinalsDiscoveryDrawerSelector);
   const [selectedInscription, setSelectedInscription] = useState<SimpleHashNft | null>(null);
   const [correspondingRareSat, setCorrespondingRareSat] = useState<
@@ -24,6 +28,10 @@ export const useBitcoinAccountModel = ({ account }: Props) => {
     account,
   });
 
+  const filteredInscriptions = inscriptions.filter(inscription => {
+    return !hiddenOrdinalAssets.includes(inscription.nft_id);
+  });
+
   const [isDrawerOpen, setIsDrawerOpen] = useState(!hasSeenDiscoveryDrawer);
 
   useEffect(() => {
@@ -56,7 +64,7 @@ export const useBitcoinAccountModel = ({ account }: Props) => {
 
   return {
     rareSats,
-    inscriptions,
+    inscriptions: filteredInscriptions,
     rest,
     isDrawerOpen,
     selectedInscription,

diff --git a/apps/ledger-live-desktop/src/renderer/actions/settings.ts b/apps/ledger-live-desktop/src/renderer/actions/settings.ts
@@ -218,6 +218,11 @@ export const hideNftCollection = (collectionId: string) => ({
   type: "HIDE_NFT_COLLECTION",
   payload: collectionId,
 });
+export const hideOrdinalsAsset = (inscriptionId: string) => ({
+  type: "HIDE_ORDINALS_ASSET",
+  payload: inscriptionId,
+});
+
 export const setLastSeenCustomImage = (lastSeenCustomImage: {
   imageSize: number;
   imageHash: string;
@@ -247,6 +252,10 @@ export const unhideNftCollection = (collectionId: string) => ({
   type: "UNHIDE_NFT_COLLECTION",
   payload: collectionId,
 });
+export const unhideOrdinalsAsset = (inscriptionId: string) => ({
+  type: "UNHIDE_ORDINALS_ASSET",
+  payload: inscriptionId,
+});
 type FetchSettings = (a: SettingsState) => (a: Dispatch<Action<"FETCH_SETTINGS">>) => void;
 export const fetchSettings: FetchSettings = (settings: SettingsState) => dispatch => {
   dispatch({

diff --git a/apps/ledger-live-desktop/src/renderer/modals/index.ts b/apps/ledger-live-desktop/src/renderer/modals/index.ts
@@ -30,6 +30,7 @@ import MODAL_PROTECT_DISCOVER from "./ProtectDiscover";
 import MODAL_CONFIRM from "./ConfirmModal";
 import MODAL_ERROR from "./ErrorModal";
 import MODAL_VAULT_SIGNER from "./VaultSigner";
+import MODAL_HIDE_INSCRIPTION from "LLD/features/Collectibles/Ordinals/components/Inscriptions/HideModal";
 
 import MODAL_WALLET_SYNC_DEBUGGER from "./WalletSyncDebugger";
 import MODAL_SIMPLEHASH_TOOLS from "./SimpleHashTools";
@@ -63,6 +64,7 @@ const globalModals: GlobalModals = {
   MODAL_CREATE_LOCAL_APP,
   MODAL_WALLET_SYNC_DEBUGGER,
   MODAL_SIMPLEHASH_TOOLS,
+  MODAL_HIDE_INSCRIPTION,
 
   // Platform
   MODAL_PLATFORM_EXCHANGE_START,