fix: nested button tooltip error, closes #4835

src/app/common/hooks/use-brc20-tokens.ts

@@ -0,0 +1,11 @@
+import { useGetBrc20TokensQuery } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+
+export function useBrc20Tokens() {
+  const { data: allBrc20TokensResponse } = useGetBrc20TokensQuery();
+  const brc20Tokens = allBrc20TokensResponse?.pages
+    .flatMap(page => page.brc20Tokens)
+    .filter(token => token.length > 0)
+    .flatMap(token => token);
+
+  return brc20Tokens;
+}

src/app/common/theme-provider.tsx

@@ -82,7 +82,7 @@ export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps)
   return (
     <ThemeContext.Provider value={{ theme, userSelectedTheme, setUserSelectedTheme }}>
       <RadixTheme appearance={theme}>
-        <RadixTooltip.Provider>{children}</RadixTooltip.Provider>
+        <RadixTooltip.Provider delayDuration={300}>{children}</RadixTooltip.Provider>
       </RadixTheme>
     </ThemeContext.Provider>
   );

src/app/components/brc20-tokens-loader.tsx

@@ -1,17 +1,12 @@
-import {
-  Brc20Token,
-  useGetBrc20TokensQuery,
-} from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+import { useBrc20Tokens } from '@app/common/hooks/use-brc20-tokens';
+import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 
 interface Brc20TokensLoaderProps {
   children(brc20Tokens: Brc20Token[]): React.JSX.Element;
 }
+
 export function Brc20TokensLoader({ children }: Brc20TokensLoaderProps) {
-  const { data: allBrc20TokensResponse } = useGetBrc20TokensQuery();
-  const brc20Tokens = allBrc20TokensResponse?.pages
-    .flatMap(page => page.brc20Tokens)
-    .filter(token => token.length > 0)
-    .flatMap(token => token);
+  const brc20Tokens = useBrc20Tokens();
 
   if (!brc20Tokens) return null;
   return children(brc20Tokens);

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx

@@ -7,9 +7,6 @@ import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
 import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
-
-import { Brc20AssetListLayout } from './components/brc20-token-asset-list.layout';
 
 export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
   const navigate = useNavigate();
@@ -27,23 +24,13 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
   }
 
   if (!props.brc20Tokens?.length) return null;
-
-  return (
-    <Brc20AssetListLayout>
-      {props.brc20Tokens?.map(token => (
-        <BasicTooltip
-          disabled={hasPositiveBtcBalanceForFees}
-          key={token.tick}
-          side="top"
-          label={'Not enough BTC in balance'}
-        >
-          <Brc20TokenAssetItem
-            token={token}
-            isPressable={hasPositiveBtcBalanceForFees}
-            onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
-          />
-        </BasicTooltip>
-      ))}
-    </Brc20AssetListLayout>
-  );
+  return props.brc20Tokens.map(token => (
+    <Brc20TokenAssetItem
+      token={token}
+      isPressable={hasPositiveBtcBalanceForFees}
+      onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
+      displayNotEnoughBalance={!hasPositiveBtcBalanceForFees}
+      key={token.tick}
+    />
+  ));
 }

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -15,46 +15,55 @@ interface Brc20TokenAssetItemLayoutProps extends BoxProps {
   isPressable?: boolean;
   onClick?(): void;
   title: string;
+  displayNotEnoughBalance?: boolean;
 }
 export function Brc20TokenAssetItemLayout({
   balance,
   caption,
   isPressable,
   onClick,
   title,
+  displayNotEnoughBalance,
 }: Brc20TokenAssetItemLayoutProps) {
   const [component, bind] = usePressable(isPressable);
 
   const formattedBalance = formatBalance(balance.amount.toString());
 
   return (
-    <Flex onClick={isPressable ? onClick : undefined} {...bind}>
-      <Flag align="middle" img={<Brc20TokenIcon />} spacing="space.04" width="100%">
-        <HStack alignItems="center" justifyContent="space-between" width="100%">
-          <styled.span
-            maxWidth="150px"
-            overflow="hidden"
-            textAlign="left"
-            textOverflow="ellipsis"
-            textStyle="label.01"
-            whiteSpace="nowrap"
-          >
-            {title}
-          </styled.span>
-          <BasicTooltip
-            label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-            side="left"
-          >
-            <styled.span data-testid={title} textStyle="label.01">
-              {formattedBalance.value}
+    <BasicTooltip
+      disabled={!displayNotEnoughBalance}
+      side="top"
+      label={'Not enough BTC in balance'}
+      asChild
+    >
+      <Flex onClick={isPressable ? onClick : undefined} {...bind}>
+        <Flag align="middle" img={<Brc20TokenIcon />} spacing="space.04" width="100%">
+          <HStack alignItems="center" justifyContent="space-between" width="100%">
+            <styled.span
+              maxWidth="150px"
+              overflow="hidden"
+              textAlign="left"
+              textOverflow="ellipsis"
+              textStyle="label.01"
+              whiteSpace="nowrap"
+            >
+              {title}
             </styled.span>
-          </BasicTooltip>
-        </HStack>
-        <HStack alignItems="center" justifyContent="space-between" height="1.25rem" width="100%">
-          <AssetCaption caption={caption} />
-        </HStack>
-        {component}
-      </Flag>
-    </Flex>
+            <BasicTooltip
+              label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
+              side="left"
+            >
+              <styled.span data-testid={title} textStyle="label.01">
+                {formattedBalance.value}
+              </styled.span>
+            </BasicTooltip>
+          </HStack>
+          <HStack alignItems="center" justifyContent="space-between" height="1.25rem" width="100%">
+            <AssetCaption caption={caption} />
+          </HStack>
+          {component}
+        </Flag>
+      </Flex>
+    </BasicTooltip>
   );
 }

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx

@@ -8,15 +8,22 @@ interface Brc20TokenAssetItemProps {
   token: Brc20Token;
   isPressable?: boolean;
   onClick?(): void;
+  displayNotEnoughBalance?: boolean;
 }
-export function Brc20TokenAssetItem({ token, isPressable, onClick }: Brc20TokenAssetItemProps) {
+export function Brc20TokenAssetItem({
+  token,
+  isPressable,
+  onClick,
+  displayNotEnoughBalance,
+}: Brc20TokenAssetItemProps) {
   return (
     <Brc20TokenAssetItemLayout
       balance={createMoney(Number(token.overall_balance), token.tick, 0)}
       caption="BRC-20"
       title={token.tick}
       isPressable={isPressable}
       onClick={onClick}
+      displayNotEnoughBalance={displayNotEnoughBalance}
     />
   );
 }

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -1,14 +1,25 @@
 import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
 import { StacksFungibleTokenAsset } from '@shared/models/crypto-asset.model';
 
+import { useWalletType } from '@app/common/use-wallet-type';
+import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
+import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+
 import { CryptoAssetListItem } from './crypto-asset-list-item';
 import { CryptoAssetListLayout } from './crypto-asset-list.layout';
 
 interface CryptoAssetListProps {
   cryptoAssetBalances: AllTransferableCryptoAssetBalances[];
   onItemClick(cryptoAssetBalance: AllTransferableCryptoAssetBalances): void;
+  brc20Tokens?: Brc20Token[];
 }
-export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAssetListProps) {
+export function CryptoAssetList({
+  cryptoAssetBalances,
+  onItemClick,
+  brc20Tokens,
+}: CryptoAssetListProps) {
+  const { whenWallet } = useWalletType();
+
   return (
     <CryptoAssetListLayout>
       {cryptoAssetBalances.map(cryptoAssetBalance => (
@@ -21,6 +32,12 @@ export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAsse
           }
         />
       ))}
+      {brc20Tokens
+        ? whenWallet({
+            software: <Brc20TokenAssetList brc20Tokens={brc20Tokens} />,
+            ledger: null,
+          })
+        : null}
     </CryptoAssetListLayout>
   );
 }

src/app/features/collectibles/components/taproot-balance-displayer.tsx

@@ -18,7 +18,7 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala
   if (!isRecoverFeatureEnabled) return null;
   if (balance.amount.isLessThanOrEqualTo(0)) return null;
   return (
-    <BasicTooltip label={taprootSpendNotSupportedYetMsg}>
+    <BasicTooltip label={taprootSpendNotSupportedYetMsg} asChild>
       <Link onClick={() => onSelectRetrieveBalance()} textStyle="caption.02" variant="text">
         {formatMoney(balance)}
       </Link>

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx

@@ -44,11 +44,14 @@ export function BitcoinContractLockAmount({
         </styled.span>
       </HStack>
       <HStack alignItems="center" justifyContent="space-between" mt="space.02">
+        {/** TODO: We need to persist the tooltip after it is clicked.
+             Current implementation of radix-ui tooltip doesn't allow that, ref: https://github.com/radix-ui/primitives/issues/2029 */}
         {subtitle ? (
           <BasicTooltip
             disabled={!hoverLabel}
             label={hasCopied ? 'Copied!' : hoverLabel}
             side="bottom"
+            asChild
           >
             <styled.button
               _hover={{ cursor: 'pointer' }}

src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx

@@ -4,11 +4,10 @@ import { useNavigate } from 'react-router-dom';
 import { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
 import { RouteUrls } from '@shared/route-urls';
 
+import { useBrc20Tokens } from '@app/common/hooks/use-brc20-tokens';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useAllTransferableCryptoAssetBalances } from '@app/common/hooks/use-transferable-asset-balances.hooks';
 import { useWalletType } from '@app/common/use-wallet-type';
-import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
-import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
 import { ChooseCryptoAssetLayout } from '@app/components/crypto-assets/choose-crypto-asset/choose-crypto-asset.layout';
 import { CryptoAssetList } from '@app/components/crypto-assets/choose-crypto-asset/crypto-asset-list';
 import { ModalHeader } from '@app/components/modal-header';
@@ -17,6 +16,7 @@ import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchai
 
 export function ChooseCryptoAsset() {
   const allTransferableCryptoAssetBalances = useAllTransferableCryptoAssetBalances();
+  const brc20Tokens = useBrc20Tokens();
 
   const { whenWallet } = useWalletType();
   const navigate = useNavigate();
@@ -49,21 +49,14 @@ export function ChooseCryptoAsset() {
     <ChooseCryptoAssetLayout title="choose asset to send">
       <CryptoAssetList
         onItemClick={cryptoAssetBalance => navigateToSendForm(cryptoAssetBalance)}
+        brc20Tokens={brc20Tokens}
         cryptoAssetBalances={allTransferableCryptoAssetBalances.filter(asset =>
           whenWallet({
             ledger: checkBlockchainAvailable(asset.blockchain),
             software: true,
           })
         )}
       />
-      {whenWallet({
-        software: (
-          <Brc20TokensLoader>
-            {brc20Tokens => <Brc20TokenAssetList brc20Tokens={brc20Tokens} />}
-          </Brc20TokensLoader>
-        ),
-        ledger: null,
-      })}
     </ChooseCryptoAssetLayout>
   );
 }

src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx

@@ -28,7 +28,9 @@ export function RecipientAddressDisplayer({ address }: RecipientAddressDisplayer
       >
         {address}
       </styled.span>
-      <BasicTooltip label={hasCopied ? 'Copied!' : 'Copy address'} side="right">
+      {/** TODO: We need to persist the tooltip after it is clicked.
+           Current implementation of radix-ui tooltip doesn't allow that, ref: https://github.com/radix-ui/primitives/issues/2029 */}
+      <BasicTooltip label={hasCopied ? 'Copied!' : 'Copy address'} side="right" asChild>
         <styled.button
           _hover={{ cursor: 'pointer' }}
           data-testid={SendCryptoAssetSelectors.RecipientBnsAddressCopyToClipboard}

src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx

@@ -38,16 +38,14 @@ export function BitcoinSendMaxButton({
   if (sendMaxBalance === '0') return <Box height="32px" />;
 
   return (
-    <BasicTooltip label={sendMaxTooltipLabel} side="bottom">
-      <Box>
-        <Link
-          data-testid={SendCryptoAssetSelectors.SendMaxBtn}
-          onClick={() => onSendMax()}
-          {...props}
-        >
-          {isSendingMax ? 'Sending max' : 'Send max'}
-        </Link>
-      </Box>
+    <BasicTooltip label={sendMaxTooltipLabel} side="bottom" asChild>
+      <Link
+        data-testid={SendCryptoAssetSelectors.SendMaxBtn}
+        onClick={() => onSendMax()}
+        {...props}
+      >
+        {isSendingMax ? 'Sending max' : 'Send max'}
+      </Link>
     </BasicTooltip>
   );
 }

src/app/ui/components/link/link.tsx

@@ -1,3 +1,5 @@
+import { ForwardedRef, forwardRef } from 'react';
+
 import { styled } from 'leather-styles/jsx';
 import { type LinkVariantProps, link as linkRecipe } from 'leather-styles/recipes/link';
 
@@ -6,16 +8,17 @@ const StyledLink = styled('a');
 type LinkProps = Omit<React.ComponentProps<typeof StyledLink>, keyof LinkVariantProps> &
   LinkVariantProps;
 
-export function Link(props: LinkProps) {
+export const Link = forwardRef((props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
   const { children, fullWidth, invert, size, variant, ...rest } = props;
 
   return (
     <StyledLink
+      ref={ref}
       className={linkRecipe({ fullWidth, invert, size, variant })}
       cursor="pointer"
       {...rest}
     >
       {children}
     </StyledLink>
   );
-}
+});

src/app/ui/components/tooltip/basic-tooltip.tsx

@@ -9,13 +9,14 @@ interface BasicTooltipProps {
   label?: string;
   disabled?: boolean;
   side?: RadixTooltip.TooltipContentProps['side'];
+  asChild?: boolean;
 }
 
-export function BasicTooltip({ children, label, disabled, side }: BasicTooltipProps) {
+export function BasicTooltip({ children, label, disabled, side, asChild }: BasicTooltipProps) {
   const isDisabled = !label || disabled;
   return (
     <Tooltip.Root>
-      <Tooltip.Trigger>{children}</Tooltip.Trigger>
+      <Tooltip.Trigger asChild={asChild}>{children}</Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content hidden={isDisabled} side={side} sideOffset={5}>
           {label}