feat: granular utxo protection feature

src/app/common/hooks/balance/use-total-balance.tsx → src/app/common/hooks/balance/use-balances.tsx

@@ -10,11 +10,13 @@ import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance
 
 import { useSip10ManagedTokensBalance } from './use-sip10-balance';
 
-interface UseTotalBalanceArgs {
+const highBalance = createMoney(100_000, 'USD');
+
+interface UseBalanceArgs {
   btcAddress: string;
   stxAddress: string;
 }
-export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) {
+export function useBalances({ btcAddress, stxAddress }: UseBalanceArgs) {
   // get market data
   const btcMarketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
   const stxMarketData = useCryptoCurrencyMarketDataMeanAverage('STX');
@@ -46,41 +48,59 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
   return useMemo(() => {
     // calculate total balance
     const stxUsdAmount = baseCurrencyAmountInQuote(stxBalance, stxMarketData);
-    const btcUsdAmount = baseCurrencyAmountInQuote(btcBalance.availableBalance, btcMarketData);
+
+    const availableBtcUsdAmount = baseCurrencyAmountInQuote(
+      btcBalance.availableBalance,
+      btcMarketData
+    );
+
+    const totalBtcUsdAmount = baseCurrencyAmountInQuote(btcBalance.totalBalance, btcMarketData);
 
     const totalBalance = {
       ...stxUsdAmount,
-      amount: stxUsdAmount.amount.plus(btcUsdAmount.amount).plus(sip10BalanceUsd.amount),
+      amount: stxUsdAmount.amount.plus(totalBtcUsdAmount.amount).plus(sip10BalanceUsd.amount),
+    };
+
+    const availableBalance = {
+      ...stxUsdAmount,
+      amount: stxUsdAmount.amount.plus(availableBtcUsdAmount.amount).plus(sip10BalanceUsd.amount),
     };
+
     return {
       isFetching: isFetchingStxBalance || isFetchingBtcBalance,
       isLoading: isLoadingStxBalance || isLoadingBtcBalance,
       isPending:
         (isPendingStxBalance && Boolean(stxAddress)) ||
         (isPendingBtcBalance && Boolean(btcAddress)),
       totalBalance,
+      availableBalance,
+      availableUsdBalance: i18nFormatCurrency(
+        availableBalance,
+        availableBalance.amount.isGreaterThanOrEqualTo(highBalance.amount) ? 0 : 2
+      ),
       totalUsdBalance: i18nFormatCurrency(
         totalBalance,
-        totalBalance.amount.isGreaterThanOrEqualTo(100_000) ? 0 : 2
+        totalBalance.amount.isGreaterThanOrEqualTo(highBalance.amount) ? 0 : 2
       ),
       isLoadingAdditionalData:
         isLoadingAdditionalDataStxBalance || isLoadingAdditionalDataBtcBalance,
     };
   }, [
+    stxBalance,
+    stxMarketData,
     btcBalance.availableBalance,
+    btcBalance.totalBalance,
     btcMarketData,
-    isFetchingBtcBalance,
+    sip10BalanceUsd.amount,
     isFetchingStxBalance,
-    isLoadingBtcBalance,
+    isFetchingBtcBalance,
     isLoadingStxBalance,
-    isPendingBtcBalance,
+    isLoadingBtcBalance,
     isPendingStxBalance,
-    stxBalance,
-    stxMarketData,
-    isLoadingAdditionalDataBtcBalance,
-    isLoadingAdditionalDataStxBalance,
     stxAddress,
+    isPendingBtcBalance,
     btcAddress,
-    sip10BalanceUsd,
+    isLoadingAdditionalDataStxBalance,
+    isLoadingAdditionalDataBtcBalance,
   ]);
 }

src/app/common/hooks/use-hover-with-children.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+
+interface HoverBind {
+  onMouseEnter(event: React.MouseEvent<HTMLElement, MouseEvent>): void;
+  onMouseLeave(event: React.MouseEvent<HTMLElement, MouseEvent>): void;
+}
+
+export function useHoverWithChildren(): [boolean, HoverBind] {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const relatedTarget = event.relatedTarget as HTMLElement;
+
+    // If the related target is a child of the current element, don't trigger mouseleave
+    if (event.currentTarget.contains(relatedTarget)) {
+      return;
+    }
+
+    setIsHovered(false);
+  }, []);
+
+  const bind: HoverBind = {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+  };
+
+  return [isHovered, bind];
+}

src/app/components/account-total-balance.tsx

@@ -4,7 +4,7 @@ import { styled } from 'leather-styles/jsx';
 
 import { SkeletonLoader, shimmerStyles } from '@leather.io/ui';
 
-import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
+import { useBalances } from '@app/common/hooks/balance/use-balances';
 import { PrivateText } from '@app/components/privacy/private-text';
 
 interface AccountTotalBalanceProps {
@@ -13,7 +13,7 @@ interface AccountTotalBalanceProps {
 }
 
 export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTotalBalanceProps) => {
-  const { totalUsdBalance, isFetching, isLoading, isLoadingAdditionalData } = useTotalBalance({
+  const { totalUsdBalance, isFetching, isLoading, isLoadingAdditionalData } = useBalances({
     btcAddress,
     stxAddress,
   });

src/app/debug.ts

@@ -57,6 +57,12 @@ const debug = {
     chrome.storage.local.clear();
     chrome.storage.session.clear();
   },
+  bypassInscriptionChecks() {
+    store.dispatch(settingsSlice.actions.dangerouslyChosenToBypassAllInscriptionChecks());
+  },
+  resetInscriptionState() {
+    store.dispatch(settingsSlice.actions.resetInscriptionState());
+  },
 };
 
 export function setDebugOnGlobal() {

src/app/features/collectibles/components/bitcoin/high-sat-value-utxo.tsx

@@ -0,0 +1,23 @@
+import { Box, Circle } from 'leather-styles/jsx';
+
+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">
+        <Circle bg="red" size="sm" />
+      </BasicTooltip>
+    </Box>
+  );
+}

src/app/features/collectibles/components/bitcoin/inscription-text.tsx

@@ -10,7 +10,7 @@ import { CollectibleText } from '../_collectible-types/collectible-text';
 interface InscriptionTextProps {
   contentSrc: string;
   inscriptionNumber: number;
-  onClickCallToAction(): void;
+  onClickCallToAction?(): void;
   onClickSend(): void;
 }
 export function InscriptionText({