feat: use radix tooltip

package.json

@@ -131,6 +131,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
+    "@leather-wallet/tokens": "0.0.4",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",
@@ -140,6 +141,7 @@
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/themes": "2.0.3",
     "@reduxjs/toolkit": "1.9.6",
     "@scure/base": "1.1.3",
@@ -168,7 +170,6 @@
     "@tanstack/react-query": "4.35.7",
     "@tanstack/react-query-devtools": "4.35.7",
     "@tanstack/react-query-persist-client": "4.35.7",
-    "@tippyjs/react": "4.2.6",
     "@types/lodash.uniqby": "4.7.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@vkontakte/vk-qr": "2.0.13",
@@ -240,7 +241,6 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
-    "@leather-wallet/tokens": "0.0.3",
     "@ls-lint/ls-lint": "2.2.2",
     "@pandacss/dev": "0.26.2",
     "@playwright/test": "1.40.1",

src/app/common/theme-provider.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 
+import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { Theme as RadixTheme } from '@radix-ui/themes';
 
 import { noop } from '@shared/utils';
@@ -80,7 +81,9 @@ export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps)
 
   return (
     <ThemeContext.Provider value={{ theme, userSelectedTheme, setUserSelectedTheme }}>
-      <RadixTheme appearance={theme}>{children}</RadixTheme>
+      <RadixTheme appearance={theme}>
+        <RadixTooltip.Provider>{children}</RadixTooltip.Provider>
+      </RadixTheme>
     </ThemeContext.Provider>
   );
 }

src/app/components/app-version.tsx

@@ -7,8 +7,7 @@ import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { useIsLatestPullRequestBuild } from '@app/query/common/outdated-pr/outdated-pr.query';
-
-import { Tooltip } from './tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface AppVersionLabelProps extends HTMLStyledProps<'span'> {
   isLatestVersion: boolean;
@@ -47,15 +46,15 @@ export function AppVersion() {
 
   if (!isLatestBuild && process.env.WALLET_ENVIRONMENT === 'feature') {
     return (
-      <Tooltip label="Outdated PR build, download the latest version">
+      <BasicTooltip label="Outdated PR build, download the latest version">
         <AppVersionLabel
           isLatestVersion={false}
           cursor="pointer"
           onClick={() => openInNewTab(pullRequestLink ?? '')}
         >
           {version}
         </AppVersionLabel>
-      </Tooltip>
+      </BasicTooltip>
     );
   }
 

src/app/components/available-balance.tsx

@@ -3,8 +3,8 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
 import { Money } from '@shared/models/money.model';
 
 import { formatMoney } from '@app/common/money/format-money';
-import { Tooltip } from '@app/components/tooltip';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?: string }) {
   const {
@@ -18,11 +18,11 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?:
         <styled.span color="accent.text-subdued" textStyle="caption.01">
           Available balance
         </styled.span>
-        <Tooltip label={balanceTooltipLabel} placement="top">
+        <BasicTooltip label={balanceTooltipLabel} side="top">
           <Box>
             <InfoIcon color="accent.text-subdued" size="xs" />
           </Box>
-        </Tooltip>
+        </BasicTooltip>
       </HStack>
       <styled.span color="accent.text-subdued" mr="space.02" textStyle="caption.01">
         {formatMoney(balance)}

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx

@@ -5,7 +5,7 @@ import { Money } from '@shared/models/money.model';
 import { formatBalance } from '@app/common/format-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { LoadingSpinner } from '../loading-spinner';
 
@@ -33,14 +33,14 @@ export function BitcoinContractEntryPointLayout(props: BitcoinContractEntryPoint
       <Flag align="middle" img={icon} spacing="space.04" width="100%">
         <HStack alignItems="center" justifyContent="space-between" width="100%">
           <styled.span textStyle="label.01">Bitcoin Contracts</styled.span>
-          <Tooltip
+          <BasicTooltip
             label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-            placement="left-start"
+            side="left"
           >
             <styled.span textStyle="label.01">
               {isLoading ? <LoadingSpinner size="sm" /> : formattedBalance.value}
             </styled.span>
-          </Tooltip>
+          </BasicTooltip>
         </HStack>
         <HStack alignItems="center" justifyContent="space-between" width="100%">
           <styled.span textStyle="caption.02">{caption}</styled.span>

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

@@ -4,10 +4,10 @@ import { RouteUrls } from '@shared/route-urls';
 import { noop } from '@shared/utils';
 
 import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item';
-import { Tooltip } from '@app/components/tooltip';
 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';
 
@@ -31,19 +31,18 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
   return (
     <Brc20AssetListLayout>
       {props.brc20Tokens?.map(token => (
-        <Tooltip
+        <BasicTooltip
           disabled={hasPositiveBtcBalanceForFees}
           key={token.tick}
-          placement="top"
+          side="top"
           label={'Not enough BTC in balance'}
-          hideOnClick={false}
         >
           <Brc20TokenAssetItem
             token={token}
             isPressable={hasPositiveBtcBalanceForFees}
             onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
           />
-        </Tooltip>
+        </BasicTooltip>
       ))}
     </Brc20AssetListLayout>
   );

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

@@ -6,8 +6,8 @@ import { formatBalance } from '@app/common/format-balance';
 import { AssetCaption } from '@app/components/crypto-assets/components/asset-caption';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
 import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface Brc20TokenAssetItemLayoutProps extends BoxProps {
   balance: Money;
@@ -41,14 +41,14 @@ export function Brc20TokenAssetItemLayout({
           >
             {title}
           </styled.span>
-          <Tooltip
+          <BasicTooltip
             label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-            placement="left-start"
+            side="left"
           >
             <styled.span data-testid={title} textStyle="label.01">
               {formattedBalance.value}
             </styled.span>
-          </Tooltip>
+          </BasicTooltip>
         </HStack>
         <HStack alignItems="center" justifyContent="space-between" height="1.25rem" width="100%">
           <AssetCaption caption={caption} />

src/app/components/crypto-assets/components/asset-caption.tsx

@@ -1,7 +1,7 @@
 import { Flex, HStack, styled } from 'leather-styles/jsx';
 
-import { Tooltip } from '@app/components/tooltip';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface AssetCaptionProps {
   caption: string;
@@ -16,7 +16,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) {
           <styled.span mx="space.01" textStyle="caption.02">
             • Microblock
           </styled.span>
-          <Tooltip placement="right-end" label={'Learn more about microblocks'}>
+          <BasicTooltip side="right" label={'Learn more about microblocks'}>
             <HStack>
               <a
                 href="https://docs.stacks.co/understand-stacks/microblocks"
@@ -26,7 +26,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) {
                 <InfoIcon color="accent.text-subdued" ml="space.01" size="xs" />
               </a>
             </HStack>
-          </Tooltip>
+          </BasicTooltip>
         </>
       ) : (
         ''

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -9,7 +9,7 @@ import { formatBalance } from '@app/common/format-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 import { AssetRowGrid } from '../components/asset-row-grid';
@@ -71,14 +71,14 @@ export function CryptoCurrencyAssetItemLayout({
             </styled.span>
           }
           balance={
-            <Tooltip
+            <BasicTooltip
               label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-              placement="left-start"
+              side="left"
             >
               <styled.span data-testid={title} textStyle="label.01">
                 {formattedBalance.value} {additionalBalanceInfo}
               </styled.span>
-            </Tooltip>
+            </BasicTooltip>
           }
           caption={<styled.span textStyle="caption.02">{caption}</styled.span>}
           usdBalance={

src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx

@@ -7,7 +7,7 @@ import { ftDecimals } from '@app/common/stacks-utils';
 import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { AssetCaption } from '../../components/asset-caption';
 import { AssetRowGrid } from '../../components/asset-row-grid';
@@ -56,14 +56,11 @@ export function StacksFungibleTokenAssetItemLayout({
         <AssetRowGrid
           title={<styled.span textStyle="label.01">{title}</styled.span>}
           balance={
-            <Tooltip
-              label={formattedBalance.isAbbreviated ? amount : undefined}
-              placement="left-start"
-            >
+            <BasicTooltip label={formattedBalance.isAbbreviated ? amount : undefined} side="left">
               <styled.span data-testid={title} textStyle="label.01">
                 {formattedBalance.value}
               </styled.span>
-            </Tooltip>
+            </BasicTooltip>
           }
           caption={<AssetCaption caption={caption} />}
         />

src/app/components/fees-row/components/fees-row.layout.tsx

@@ -4,9 +4,9 @@ import { HStack } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { SponsoredLabel } from '@app/components/sponsored-label';
-import { Tooltip } from '@app/components/tooltip';
 import { WarningLabel } from '@app/components/warning-label';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 const feesInfo =
   'Higher fees increase the likelihood of your transaction getting confirmed before others. Click to learn more.';
@@ -26,14 +26,14 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
     <HStack gap="space.04" width="100%" {...rest} flexWrap="wrap">
       <HStack alignItems="center" justifyContent="space-between" position="relative" width="100%">
         <HStack alignItems="center" width="100%">
-          <Tooltip label={feesInfo} placement="bottom">
+          <BasicTooltip label={feesInfo} side="bottom">
             <HStack gap="space.01">
               <styled.span color="accent.text-subdued" textStyle="label.02">
                 Fee
               </styled.span>
               <InfoIcon color="accent.text-subdued" onClick={() => openInNewTab(url)} size="xs" />
             </HStack>
-          </Tooltip>
+          </BasicTooltip>
           {!isSponsored ? selectInput : null}
         </HStack>
         {feeField}

src/app/components/fees-row/components/transaction-fee.tsx

@@ -5,7 +5,7 @@ import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { Money } from '@shared/models/money.model';
 
 import { formatDustUsdAmounts, i18nFormatCurrency } from '@app/common/money/format-money';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface TransactionFeeProps {
   fee: string | number;
@@ -23,5 +23,9 @@ export function TransactionFee({ fee, feeCurrencySymbol, usdAmount }: Transactio
     </styled.span>
   );
   if (!usdAmount || usdAmount.amount.isNaN()) return feeLabel;
-  return <Tooltip label={formatDustUsdAmounts(i18nFormatCurrency(usdAmount))}>{feeLabel}</Tooltip>;
+  return (
+    <BasicTooltip label={formatDustUsdAmounts(i18nFormatCurrency(usdAmount))}>
+      {feeLabel}
+    </BasicTooltip>
+  );
 }

src/app/components/pill.tsx

@@ -1,14 +1,14 @@
 import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
-import { Tooltip } from './tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface PillProps extends BoxProps {
   hoverLabel?: string;
   label: string;
 }
 export function Pill({ hoverLabel, label, ...props }: PillProps) {
   return (
-    <Tooltip disabled={!hoverLabel} label={hoverLabel} maxWidth="200px" placement="bottom">
+    <BasicTooltip label={hoverLabel} side="bottom">
       <Box
         border="default"
         borderRadius="xs"
@@ -19,6 +19,6 @@ export function Pill({ hoverLabel, label, ...props }: PillProps) {
       >
         <styled.span textStyle="caption.02">{label}</styled.span>
       </Box>
-    </Tooltip>
+    </BasicTooltip>
   );
 }

src/app/components/stacks-transaction-item/stacks-transaction-status.tsx

@@ -3,7 +3,7 @@ import { styled } from 'leather-styles/jsx';
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
 import { isPendingTx } from '@app/common/transactions/stacks/transaction.utils';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { MicroblockLabel } from '../transaction/microblock-label';
 import { PendingLabel } from '../transaction/pending-label';
@@ -22,11 +22,11 @@ export function StacksTransactionStatus({ transaction }: TransactionStatusProps)
       {isPending && <PendingLabel />}
       {isInMicroblock && <MicroblockLabel />}
       {isFailed && (
-        <Tooltip label={transaction.tx_status} placement="bottom">
+        <BasicTooltip label={transaction.tx_status} side="bottom">
           <styled.span color="error.label" textStyle="label.03">
             Failed
           </styled.span>
-        </Tooltip>
+        </BasicTooltip>
       )}
     </>
   );