fix: flip the balances

leather-io · Dec 20, 2024 · 57bb153 · 57bb153
1 parent 1f81cc0
commit 57bb153
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 32 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
@@ -1,8 +1,7 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Box } from 'leather-styles/jsx';
-import { useHover } from 'use-events';
 
 import { type Inscription } from '@leather.io/models';
 import {
@@ -11,8 +10,10 @@ import {
   ExternalLinkIcon,
   Flag,
   IconButton,
+  LockIcon,
   OrdinalAvatarIcon,
   TrashIcon,
+  UnlockIcon,
 } from '@leather.io/ui';
 
 import { ORD_IO_URL } from '@shared/constants';
@@ -49,8 +50,6 @@ export function Inscription({ inscription }: InscriptionProps) {
     });
   }, [navigate, inscription, location]);
 
-  const [isHovered, bind] = useHover();
-
   const content = useMemo(() => {
     const sharedProps = { onClickSend: () => openSendInscriptionModal() };
     switch (inscription.mimeType) {
@@ -120,8 +119,8 @@ export function Inscription({ inscription }: InscriptionProps) {
   ]);
 
   return (
-    <Box position="relative" {...bind} opacity={hasInscriptionBeenDiscarded(inscription) ? 0.5 : 1}>
-      {content}
+    <Box position="relative">
+      <Box opacity={hasInscriptionBeenDiscarded(inscription) ? 0.5 : 1}>{content}</Box>
       <Box
         bg="ink.background-primary"
         position="absolute"
@@ -146,34 +145,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/pages/home/home.tsx b/src/app/pages/home/home.tsx
@@ -42,6 +42,7 @@ export function Home() {
   });
 
   const inscriptions = useInscribedSpendableUtxos();
+  // eslint-disable-next-line no-console
   console.log(inscriptions);
 
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();

diff --git a/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts b/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts
@@ -17,6 +17,7 @@ export function useBtcCryptoAssetBalanceNativeSegwit(address: string) {
   const runesEnabled = useRunesEnabled();
 
   const spendableInscriptionUtxos = useInscribedSpendableUtxos();
+  console.log('spendable utxos', spendableInscriptionUtxos);
 
   const availableUtxosQuery = useNativeSegwitUtxosByAddress({
     address,

diff --git a/src/app/ui/components/account/account.card.stories.tsx b/src/app/ui/components/account/account.card.stories.tsx
@@ -33,7 +33,8 @@ export function AccountCard() {
   return (
     <Component
       name="leather.btc"
-      balance="$1,000"
+      availableBalance="$1,000"
+      totalBalance="$1,000"
       toggleSwitchAccount={() => null}
       isLoadingBalance={false}
       isFetchingBnsName={false}
@@ -52,7 +53,8 @@ export function AccountCardLoading() {
   return (
     <Component
       name="leather.btc"
-      balance="$1,000"
+      availableBalance="$1,000"
+      totalBalance="$1,000"
       toggleSwitchAccount={() => null}
       isLoadingBalance
       isFetchingBnsName={false}
@@ -71,7 +73,8 @@ export function AccountCardBnsNameLoading() {
   return (
     <Component
       name="leather.btc"
-      balance="$1,000"
+      availableBalance="$1,000"
+      totalBalance="$1,000"
       toggleSwitchAccount={() => null}
       isLoadingBalance={false}
       isFetchingBnsName
@@ -91,7 +94,8 @@ export function AccountCardPrivateBalance() {
   return (
     <Component
       name="leather.btc"
-      balance="$1,000"
+      availableBalance="$1,000"
+      totalBalance="$1,000"
       toggleSwitchAccount={() => null}
       isLoadingBalance={false}
       isFetchingBnsName={false}

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>