Release/utxo protection fixes

package.json

@@ -370,7 +370,8 @@
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-hot-middleware": "2.26.1",
-    "webpack-shell-plugin": "0.5.0"
+    "webpack-shell-plugin": "0.5.0",
+    "type-fest": "4.30.2"
   },
   "resolutions": {
     "cross-spawn": "7.0.5",

src/app/components/account/account-addresses.tsx

@@ -3,22 +3,20 @@ import { HStack } from 'leather-styles/jsx';
 import { BulletSeparator, Caption } from '@leather.io/ui';
 import { truncateMiddle } from '@leather.io/utils';
 
-import { BitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
-import { StacksAccountLoader } from '../loaders/stacks-account-loader';
+import { useBitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
+import { useStacksAccountLoader } from '../loaders/stacks-account-loader';
 
 interface AccountAddressesProps {
   index: number;
 }
 export function AcccountAddresses({ index }: AccountAddressesProps) {
+  const account = useStacksAccountLoader({ index });
+  const signer = useBitcoinNativeSegwitAccountLoader({ index });
   return (
     <HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
       <BulletSeparator>
-        <StacksAccountLoader index={index}>
-          {account => <Caption>{truncateMiddle(account.address, 4)}</Caption>}
-        </StacksAccountLoader>
-        <BitcoinNativeSegwitAccountLoader index={index}>
-          {signer => <Caption>{truncateMiddle(signer.address, 4)}</Caption>}
-        </BitcoinNativeSegwitAccountLoader>
+        {account ? <Caption>{truncateMiddle(account.address, 4)}</Caption> : null}
+        {signer ? <Caption>{truncateMiddle(signer.address, 4)}</Caption> : null}
       </BulletSeparator>
     </HStack>
   );

src/app/components/loaders/bitcoin-account-loader.tsx

@@ -1,4 +1,5 @@
 import { P2Ret } from '@scure/btc-signer/payment';
+import type { DistributedOmit } from 'type-fest';
 
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
@@ -20,11 +21,9 @@ interface BtcAccountLoaderIndexProps extends BitcoinAccountLoaderBaseProps {
 
 type BtcAccountLoaderProps = BtcAccountLoaderCurrentProps | BtcAccountLoaderIndexProps;
 
-export function BitcoinNativeSegwitAccountLoader({
-  children,
-  fallback,
-  ...props
-}: BtcAccountLoaderProps) {
+export function useBitcoinNativeSegwitAccountLoader(
+  props: DistributedOmit<BtcAccountLoaderProps, 'children' | 'fallback'>
+) {
   const isBitcoinEnabled = useConfigBitcoinEnabled();
 
   const currentAccountIndex = useCurrentAccountIndex();
@@ -33,8 +32,18 @@ export function BitcoinNativeSegwitAccountLoader({
 
   const signer = useNativeSegwitSigner(properIndex);
 
-  if (!signer || !isBitcoinEnabled) return fallback;
-  return children(signer(0));
+  if (!signer || !isBitcoinEnabled) return null;
+  return signer(0);
+}
+
+export function BitcoinNativeSegwitAccountLoader({
+  children,
+  fallback,
+  ...props
+}: BtcAccountLoaderProps) {
+  const signer = useBitcoinNativeSegwitAccountLoader(props);
+  if (!signer) return fallback;
+  return children(signer);
 }
 
 export function BitcoinTaprootAccountLoader({ children, ...props }: BtcAccountLoaderProps) {

src/app/components/loaders/stacks-account-loader.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import type { DistributedOmit } from 'type-fest';
+
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import {
   useCurrentStacksAccount,
@@ -34,12 +36,14 @@ interface StacksAccountIndexLoaderProps extends StacksAccountBaseLoaderProps {
 
 type StacksAccountLoaderProps = StacksAccountCurrentLoaderProps | StacksAccountIndexLoaderProps;
 
-export function StacksAccountLoader({ children, ...props }: StacksAccountLoaderProps) {
+export function useStacksAccountLoader(
+  props: DistributedOmit<StacksAccountLoaderProps, 'children'>
+) {
   const stacksAccounts = useStacksAccounts();
   const currentAccountIndex = useCurrentAccountIndex();
   const properIndex = 'current' in props ? currentAccountIndex : props.index;
 
   const account = stacksAccounts[properIndex];
   if (!account) return null;
-  return children(account);
+  return account;
 }

src/app/features/asset-list/_components/connect-ledger-asset-button.tsx

@@ -27,7 +27,7 @@ export function ConnectLedgerButton({ chain }: ConnectLedgerButtonProps) {
   };
 
   return (
-    <Button variant="outline" onClick={onClick}>
+    <Button variant="outline" size="sm" onClick={onClick}>
       <HStack>
         <LedgerIcon />
         <styled.span textStyle="label.02">Connect&nbsp;{capitalize(chain)}</styled.span>

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

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
 import { type Inscription } from '@leather.io/models';
 import {
@@ -128,30 +128,44 @@ export function Inscription({ inscription }: InscriptionProps) {
           position="absolute"
           right="space.03"
           top="space.03"
-          zIndex="90"
+          zIndex="900"
         >
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
               <IconButton
                 _focus={{ outline: 'focus' }}
                 _hover={{ bg: 'ink.component-background-hover' }}
                 bg="ink.background-primary"
+                border="1px solid"
+                borderColor="ink.text-primary"
+                borderRadius="2px"
                 transform="rotate(90deg)"
                 color="ink.action-primary-default"
-                icon={<EllipsisVIcon variant="small" />}
+                icon={<EllipsisVIcon />}
               />
             </DropdownMenu.Trigger>
-            <DropdownMenu.Content side="bottom" style={{ marginRight: '96px' }}>
+            <DropdownMenu.Content
+              align="end"
+              side="bottom"
+              sideOffset={4}
+              style={{ padding: '8px' }}
+            >
               <DropdownMenu.Item onClick={() => openInscriptionUrl(inscription.number)}>
-                <Flag img={<ExternalLinkIcon variant="small" />}>Open original</Flag>
+                <Flag img={<ExternalLinkIcon />}>
+                  <styled.span textStyle="label.02">Open original</styled.span>
+                </Flag>
               </DropdownMenu.Item>
               {hasInscriptionBeenDiscarded(inscription) ? (
                 <DropdownMenu.Item onClick={() => recoverInscription(inscription)}>
-                  <Flag img={<LockIcon variant="small" />}>Protect</Flag>
+                  <Flag img={<LockIcon />}>
+                    <styled.span textStyle="label.02">Protect</styled.span>
+                  </Flag>
                 </DropdownMenu.Item>
               ) : (
                 <DropdownMenu.Item onClick={() => discardInscription(inscription)}>
-                  <Flag img={<UnlockIcon variant="small" />}>Unprotect</Flag>
+                  <Flag img={<UnlockIcon />}>
+                    <styled.span textStyle="label.02">Unprotect</styled.span>
+                  </Flag>
                 </DropdownMenu.Item>
               )}
             </DropdownMenu.Content>

src/app/ui/components/account/account.card.tsx

@@ -13,12 +13,16 @@ import {
   shimmerStyles,
 } from '@leather.io/ui';
 
+import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { useScaleText } from '@app/common/hooks/use-scale-text';
 import { AccountNameLayout } from '@app/components/account/account-name';
 import { PrivateTextLayout } from '@app/components/privacy/private-text.layout';
 
 import { BasicTooltip } from '../tooltip/basic-tooltip';
 
+const availableBalanceTooltipLabel =
+  'Total balance minus outbound transfers, protected collectibles and uneconomical UTXOs.';
+
 interface AccountCardProps {
   name: string;
   availableBalance: string;
@@ -45,6 +49,8 @@ export function AccountCard({
   isBalancePrivate,
 }: AccountCardProps) {
   const scaleTextRef = useScaleText();
+  const isAtLeastMd = useViewportMinWidth('md');
+  const tooltipSide = isAtLeastMd ? 'right' : 'bottom';
 
   return (
     <Flex
@@ -106,10 +112,7 @@ export function AccountCard({
             <styled.h2 textStyle="label.02" color="ink.text-subdued" mt="space.01">
               Available balance:
               <styled.span ml="space.01">
-                <BasicTooltip
-                  side="right"
-                  label="Some funds may be unavailable to protect your collectible assets. Disable protection to access your remaining balance."
-                >
+                <BasicTooltip side={tooltipSide} label={availableBalanceTooltipLabel}>
                   <Flag
                     reverse
                     spacing="space.01"