feat(ledger): ui to ignore inscriptions

leather-io · Dec 18, 2024 · b2b1558 · b2b1558
1 parent 7b9f763
commit b2b1558
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 66 deletions.
diff --git a/src/app/features/collectibles/components/bitcoin/high-sat-value-utxo.tsx b/src/app/features/collectibles/components/bitcoin/high-sat-value-utxo.tsx
@@ -0,0 +1,20 @@
+import { Box, Circle } from 'leather-styles/jsx';
+
+import type { Inscription } from '@leather.io/models';
+
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+
+interface HighSatValueUtxoProps {
+  inscription: Inscription;
+}
+
+export function HighSatValueUtxoWarning({ inscription }: HighSatValueUtxoProps) {
+  if (Number(inscription.value) < 5_000) return null;
+  return (
+    <Box position="absolute" top="space.01" right="space.01">
+      <BasicTooltip label="This inscription has loads of BTC on it, remove protections? Click">
+        <Circle bg="red" size="sm" />
+      </BasicTooltip>
+    </Box>
+  );
+}
diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx
@@ -1,5 +1,8 @@
+import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { Box } from 'leather-styles/jsx';
+
 import { type Inscription } from '@leather.io/models';
 import { OrdinalAvatarIcon } from '@leather.io/ui';
 
@@ -12,6 +15,7 @@ import { CollectibleAudio } from '../_collectible-types/collectible-audio';
 import { CollectibleIframe } from '../_collectible-types/collectible-iframe';
 import { CollectibleImage } from '../_collectible-types/collectible-image';
 import { CollectibleOther } from '../_collectible-types/collectible-other';
+import { HighSatValueUtxoWarning } from './high-sat-value-utxo';
 import { InscriptionText } from './inscription-text';
 
 interface InscriptionProps {
@@ -26,73 +30,88 @@ export function Inscription({ inscription }: InscriptionProps) {
   const navigate = useNavigate();
   const location = useLocation();
 
-  function openSendInscriptionModal() {
+  const openSendInscriptionModal = useCallback(() => {
     navigate(RouteUrls.SendOrdinalInscription, {
       state: { inscription, backgroundLocation: location },
     });
-  }
+  }, [navigate, inscription, location]);
+
+  const content = useMemo(() => {
+    switch (inscription.mimeType) {
+      case 'audio':
+        return (
+          <CollectibleAudio
+            icon={<OrdinalAvatarIcon size="lg" />}
+            key={inscription.title}
+            onClickCallToAction={() => openInscriptionUrl(inscription.number)}
+            onClickSend={() => openSendInscriptionModal()}
+            subtitle="Ordinal inscription"
+            title={`# ${inscription.number}`}
+          />
+        );
+      case 'html':
+      case 'svg':
+      case 'video':
+      case 'gltf':
+        return (
+          <CollectibleIframe
+            icon={<OrdinalAvatarIcon size="lg" />}
+            key={inscription.title}
+            onClickCallToAction={() => openInscriptionUrl(inscription.number)}
+            onClickSend={() => openSendInscriptionModal()}
+            src={inscription.src}
+            subtitle="Ordinal inscription"
+            title={`# ${inscription.number}`}
+          />
+        );
+      case 'image':
+        return (
+          <CollectibleImage
+            icon={<OrdinalAvatarIcon size="lg" />}
+            key={inscription.title}
+            onClickCallToAction={() => openInscriptionUrl(inscription.number)}
+            onClickSend={() => openSendInscriptionModal()}
+            src={inscription.src}
+            subtitle="Ordinal inscription"
+            title={`# ${inscription.number}`}
+          />
+        );
+      case 'text':
+        return (
+          <InscriptionText
+            contentSrc={inscription.src}
+            inscriptionNumber={inscription.number}
+            onClickCallToAction={() => openInscriptionUrl(inscription.number)}
+            onClickSend={() => openSendInscriptionModal()}
+          />
+        );
+      case 'other':
+        return (
+          <CollectibleOther
+            key={inscription.title}
+            onClickCallToAction={() => openInscriptionUrl(inscription.number)}
+            onClickSend={() => openSendInscriptionModal()}
+            subtitle="Ordinal inscription"
+            title={`# ${inscription.number}`}
+          >
+            <OrdinalAvatarIcon size="lg" />
+          </CollectibleOther>
+        );
+      default:
+        return null;
+    }
+  }, [
+    inscription.mimeType,
+    inscription.number,
+    inscription.src,
+    inscription.title,
+    openSendInscriptionModal,
+  ]);
 
-  switch (inscription.mimeType) {
-    case 'audio':
-      return (
-        <CollectibleAudio
-          icon={<OrdinalAvatarIcon size="lg" />}
-          key={inscription.title}
-          onClickCallToAction={() => openInscriptionUrl(inscription.number)}
-          onClickSend={() => openSendInscriptionModal()}
-          subtitle="Ordinal inscription"
-          title={`# ${inscription.number}`}
-        />
-      );
-    case 'html':
-    case 'svg':
-    case 'video':
-    case 'gltf':
-      return (
-        <CollectibleIframe
-          icon={<OrdinalAvatarIcon size="lg" />}
-          key={inscription.title}
-          onClickCallToAction={() => openInscriptionUrl(inscription.number)}
-          onClickSend={() => openSendInscriptionModal()}
-          src={inscription.src}
-          subtitle="Ordinal inscription"
-          title={`# ${inscription.number}`}
-        />
-      );
-    case 'image':
-      return (
-        <CollectibleImage
-          icon={<OrdinalAvatarIcon size="lg" />}
-          key={inscription.title}
-          onClickCallToAction={() => openInscriptionUrl(inscription.number)}
-          onClickSend={() => openSendInscriptionModal()}
-          src={inscription.src}
-          subtitle="Ordinal inscription"
-          title={`# ${inscription.number}`}
-        />
-      );
-    case 'text':
-      return (
-        <InscriptionText
-          contentSrc={inscription.src}
-          inscriptionNumber={inscription.number}
-          onClickCallToAction={() => openInscriptionUrl(inscription.number)}
-          onClickSend={() => openSendInscriptionModal()}
-        />
-      );
-    case 'other':
-      return (
-        <CollectibleOther
-          key={inscription.title}
-          onClickCallToAction={() => openInscriptionUrl(inscription.number)}
-          onClickSend={() => openSendInscriptionModal()}
-          subtitle="Ordinal inscription"
-          title={`# ${inscription.number}`}
-        >
-          <OrdinalAvatarIcon size="lg" />
-        </CollectibleOther>
-      );
-    default:
-      return null;
-  }
+  return (
+    <Box position="relative">
+      {content}
+      <HighSatValueUtxoWarning inscription={inscription} />
+    </Box>
+  );
 }
diff --git a/src/app/features/collectibles/components/bitcoin/ordinals.tsx b/src/app/features/collectibles/components/bitcoin/ordinals.tsx
@@ -18,8 +18,8 @@ export function Ordinals() {
       void analytics.track('view_collectibles', {
         ordinals_count: inscriptionsLength,
       });
-      void analytics.identify({ ordinals_count: inscriptionsLength });
     }
+    void analytics.identify({ ordinals_count: inscriptionsLength });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [results.inscriptions?.length]);