fix: flip the balances

leather-io · Dec 20, 2024 · 00baf47 · 00baf47
1 parent 1f81cc0
commit 00baf47
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 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
@@ -4,12 +4,15 @@ import type { Inscription } from '@leather.io/models';
 
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
+const featureBuilt = false;
+
 interface HighSatValueUtxoProps {
   inscription: Inscription;
 }
 
 export function HighSatValueUtxoWarning({ inscription }: HighSatValueUtxoProps) {
   if (Number(inscription.value) < 5_000) return null;
+  if (!featureBuilt) 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">

diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx
@@ -6,13 +6,17 @@ import { useHover } from 'use-events';
 
 import { type Inscription } from '@leather.io/models';
 import {
+  ArrowRotateClockwiseIcon,
+  CircleIcon,
   DropdownMenu,
   EllipsisVIcon,
   ExternalLinkIcon,
   Flag,
   IconButton,
+  LockIcon,
   OrdinalAvatarIcon,
   TrashIcon,
+  UnlockIcon,
 } from '@leather.io/ui';
 
 import { ORD_IO_URL } from '@shared/constants';
@@ -120,8 +124,8 @@ export function Inscription({ inscription }: InscriptionProps) {
   ]);
 
   return (
-    <Box position="relative" {...bind} opacity={hasInscriptionBeenDiscarded(inscription) ? 0.5 : 1}>
-      {content}
+    <Box position="relative" {...bind}>
+      <Box opacity={hasInscriptionBeenDiscarded(inscription) ? 0.5 : 1}>{content}</Box>
       <Box
         bg="ink.background-primary"
         position="absolute"
@@ -146,34 +150,34 @@ export function Inscription({ inscription }: InscriptionProps) {
             </DropdownMenu.Item>
             {hasInscriptionBeenDiscarded(inscription) ? (
               <DropdownMenu.Item onClick={() => recoverInscription(inscription)}>
-                <Flag img={<TrashIcon variant="small" />}>Protect</Flag>
+                <Flag img={<LockIcon variant="small" />}>Protect</Flag>
               </DropdownMenu.Item>
             ) : (
               <DropdownMenu.Item onClick={() => discardInscription(inscription)}>
-                <Flag img={<TrashIcon variant="small" />}>Unprotect</Flag>
+                <Flag img={<UnlockIcon variant="small" />}>Unprotect</Flag>
               </DropdownMenu.Item>
             )}
           </DropdownMenu.Content>
         </DropdownMenu.Root>
       </Box>
       <HighSatValueUtxoWarning inscription={inscription} />
-      IsDiscarded: {String(hasInscriptionBeenDiscarded(inscription))}
-      <br />
-      is hovered: {String(isHovered)}
-      <br />
-      value: {inscription.value}
-      <br />
-      <button
-        onClick={() => {
-          // change api to use txid and output obj
-          hasInscriptionBeenDiscarded(inscription)
-            ? recoverInscription(inscription)
-            : discardInscription(inscription);
-        }}
-      >
-        toggle safe to spend
-      </button>
-      <br />
+
+      {hasInscriptionBeenDiscarded(inscription) && (
+        <Box
+          p="space.02"
+          borderRadius="xs"
+          border="1px solid"
+          borderColor="ink.border-transparent"
+          background="ink.background-secondary"
+          position="absolute"
+          bottom="134px"
+          left="18px"
+        >
+          <Flag opacity={0.5} spacing="space.01" img={<TrashIcon variant="small" />}>
+            Unprotected
+          </Flag>
+        </Box>
+      )}
     </Box>
   );
 }
diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
@@ -100,11 +100,11 @@ export function AccountCard({
                 display="inline-block"
                 overflow="hidden"
               >
-                {availableBalance}
+                {totalBalance}
               </PrivateTextLayout>
             </styled.h1>
             <styled.h2 textStyle="label.02" color="ink.text-subdued" mt="space.01">
-              Full balance:
+              Available balance:
               <styled.span ml="space.01">
                 <BasicTooltip
                   side="right"
@@ -115,7 +115,7 @@ export function AccountCard({
                     spacing="space.01"
                     img={<InfoCircleIcon display="inline" variant="small" />}
                   >
-                    {totalBalance}
+                    {availableBalance}
                   </Flag>
                 </BasicTooltip>
               </styled.span>