diff --git a/package.json b/package.json index 4ad53146b72..41ab8a85409 100644 --- a/package.json +++ b/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", diff --git a/src/app/common/theme-provider.tsx b/src/app/common/theme-provider.tsx index 5af6e839032..fc4bb066f18 100644 --- a/src/app/common/theme-provider.tsx +++ b/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 ( - {children} + + {children} + ); } diff --git a/src/app/components/app-version.tsx b/src/app/components/app-version.tsx index ddd256e2fb4..442e4b24a35 100644 --- a/src/app/components/app-version.tsx +++ b/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,7 +46,7 @@ export function AppVersion() { if (!isLatestBuild && process.env.WALLET_ENVIRONMENT === 'feature') { return ( - + {version} - + ); } diff --git a/src/app/components/available-balance.tsx b/src/app/components/available-balance.tsx index 09484003cc5..34e4bc143c6 100644 --- a/src/app/components/available-balance.tsx +++ b/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?: Available balance - + - + {formatMoney(balance)} diff --git a/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx b/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx index 87921d4d498..32d5b3330e2 100644 --- a/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx +++ b/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 Bitcoin Contracts - {isLoading ? : formattedBalance.value} - + {caption} diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx index 10adfb1ee8f..7667d5b29aa 100644 --- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx +++ b/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 ( {props.brc20Tokens?.map(token => ( - navigateToBrc20SendForm(token) : noop} /> - + ))} ); diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx index b31dfa74f2c..2b9946fb0dd 100644 --- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx +++ b/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} - {formattedBalance.value} - + diff --git a/src/app/components/crypto-assets/components/asset-caption.tsx b/src/app/components/crypto-assets/components/asset-caption.tsx index b451063bda9..d0ff9b5caa0 100644 --- a/src/app/components/crypto-assets/components/asset-caption.tsx +++ b/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) { • Microblock - + - + ) : ( '' diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx index a075acc54f3..ff8086c2ff0 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx +++ b/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({ } balance={ - {formattedBalance.value} {additionalBalanceInfo} - + } caption={{caption}} usdBalance={ diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx index 7a2fe95fee4..a259f6fbf0b 100644 --- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx +++ b/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({ {title}} balance={ - + {formattedBalance.value} - + } caption={} /> diff --git a/src/app/components/fees-row/components/fees-row.layout.tsx b/src/app/components/fees-row/components/fees-row.layout.tsx index 6c3eff8bac4..9c60f48c63a 100644 --- a/src/app/components/fees-row/components/fees-row.layout.tsx +++ b/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) { - + Fee openInNewTab(url)} size="xs" /> - + {!isSponsored ? selectInput : null} {feeField} diff --git a/src/app/components/fees-row/components/transaction-fee.tsx b/src/app/components/fees-row/components/transaction-fee.tsx index 2b04b9361ed..58b954c4581 100644 --- a/src/app/components/fees-row/components/transaction-fee.tsx +++ b/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 ); if (!usdAmount || usdAmount.amount.isNaN()) return feeLabel; - return {feeLabel}; + return ( + + {feeLabel} + + ); } diff --git a/src/app/components/pill.tsx b/src/app/components/pill.tsx index a9dbe753726..f63281d02a5 100644 --- a/src/app/components/pill.tsx +++ b/src/app/components/pill.tsx @@ -1,6 +1,6 @@ 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; @@ -8,7 +8,7 @@ interface PillProps extends BoxProps { } export function Pill({ hoverLabel, label, ...props }: PillProps) { return ( - + {label} - + ); } diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx index 840544c7da8..f3075f06311 100644 --- a/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx +++ b/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 && } {isInMicroblock && } {isFailed && ( - + Failed - + )} ); diff --git a/src/app/components/tooltip.tsx b/src/app/components/tooltip.tsx deleted file mode 100644 index 1a5be3d9afa..00000000000 --- a/src/app/components/tooltip.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { memo, useMemo } from 'react'; - -import Tippy, { TippyProps } from '@tippyjs/react'; -import { BoxProps, styled } from 'leather-styles/jsx'; - -// #4506 TODO replace this with Radix tooltip -interface TooltipProps extends TippyProps { - hideOnClick?: boolean; - label?: TippyProps['content']; - labelProps?: BoxProps; -} -export const Tooltip = memo( - ({ children, hideOnClick, label, labelProps = {}, ...rest }: TooltipProps) => { - const content = useMemo( - () => ( - - {label} - - ), - [labelProps, label] - ); - - if (!label) return <>{children}; - - return ( - - {children} - - ); - } -); diff --git a/src/app/components/transaction/microblock-label.tsx b/src/app/components/transaction/microblock-label.tsx index 68f42d8ffb6..6db87cf84e2 100644 --- a/src/app/components/transaction/microblock-label.tsx +++ b/src/app/components/transaction/microblock-label.tsx @@ -1,7 +1,7 @@ import { Box, Flex, 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'; const inMicroblockMessage = 'This transaction is currently in a microblock, which increases the chances of inclusion in the next anchor block.'; @@ -12,11 +12,11 @@ export function MicroblockLabel() { In microblock - + - + ); } diff --git a/src/app/components/transaction/pending-label.tsx b/src/app/components/transaction/pending-label.tsx index 43c97e81f00..939a42bc5e5 100644 --- a/src/app/components/transaction/pending-label.tsx +++ b/src/app/components/transaction/pending-label.tsx @@ -1,7 +1,7 @@ import { Box, Flex, 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'; const defaultPendingWaitingMessage = 'This transaction is waiting to be confirmed. Depending on network congestion, this may take anywhere from a few minutes, to a couple of hours.'; @@ -18,11 +18,11 @@ export function PendingLabel({ Pending - + - + ); } diff --git a/src/app/components/transaction/transaction-title.tsx b/src/app/components/transaction/transaction-title.tsx index 91481a3ea30..6f9bf4af05c 100644 --- a/src/app/components/transaction/transaction-title.tsx +++ b/src/app/components/transaction/transaction-title.tsx @@ -2,7 +2,7 @@ import { useRef, useState } from 'react'; import { useOnResizeListener } from '@app/common/hooks/use-on-resize-listener'; import { spamFilter } from '@app/common/utils/spam-filter'; -import { Tooltip } from '@app/components/tooltip'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { Title } from '@app/ui/components/typography/title'; interface TransactionTitleProps { @@ -20,7 +20,7 @@ export function TransactionTitle(props: TransactionTitleProps) { useOnResizeListener(onResize); return ( - + {spamFilter(title)} - + ); } diff --git a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx index b357aaf23a0..e3423190705 100644 --- a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx +++ b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx @@ -4,8 +4,8 @@ import { Box, HStack, Stack } from 'leather-styles/jsx'; import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link'; import { getTxSenderAddress } from '@app/common/transactions/stacks/transaction.utils'; import { usePressable } from '@app/components/item-hover'; -import { Tooltip } from '@app/components/tooltip'; import { TransactionTitle } from '@app/components/transaction/transaction-title'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { Caption } from '@app/ui/components/typography/caption'; import { Title } from '@app/ui/components/typography/title'; @@ -52,12 +52,12 @@ export function SubmittedTransactionItem({ transaction, txId }: SubmittedTransac {caption} - Submitted - + {value && {value}} diff --git a/src/app/features/collectibles/components/taproot-balance-displayer.tsx b/src/app/features/collectibles/components/taproot-balance-displayer.tsx index 5ee6d482e0b..b65bc0a8872 100644 --- a/src/app/features/collectibles/components/taproot-balance-displayer.tsx +++ b/src/app/features/collectibles/components/taproot-balance-displayer.tsx @@ -1,8 +1,8 @@ import { formatMoney } from '@app/common/money/format-money'; -import { Tooltip } from '@app/components/tooltip'; import { useCurrentTaprootAccountBalance } from '@app/query/bitcoin/balance/btc-taproot-balance.hooks'; import { useRecoverUninscribedTaprootUtxosFeatureEnabled } from '@app/query/common/remote-config/remote-config.query'; import { LeatherButton } from '@app/ui/components/button'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; const taprootSpendNotSupportedYetMsg = ` Total amount of BTC in your Taproot account addresses. Click to @@ -18,7 +18,7 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala if (!isRecoverFeatureEnabled) return null; if (balance.amount.isLessThanOrEqualTo(0)) return null; return ( - + onSelectRetrieveBalance()} textStyle="caption.02" @@ -26,6 +26,6 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala > {formatMoney(balance)} - + ); } diff --git a/src/app/features/current-account/current-account-name.tsx b/src/app/features/current-account/current-account-name.tsx index a3c4781b9ef..1d8d1ca875c 100644 --- a/src/app/features/current-account/current-account-name.tsx +++ b/src/app/features/current-account/current-account-name.tsx @@ -6,8 +6,8 @@ import { Box, BoxProps, styled } from 'leather-styles/jsx'; import { HasChildren } from '@app/common/has-children'; import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names'; import { truncateString } from '@app/common/utils'; -import { Tooltip } from '@app/components/tooltip'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; function AccountNameTitle({ children, ...props }: HasChildren & BoxProps) { return ( @@ -28,9 +28,9 @@ const AccountNameSuspense = memo((props: BoxProps) => { const isLong = name.length > nameCharLimit; const displayName = truncateString(name, nameCharLimit); return ( - + {displayName} - + ); }); diff --git a/src/app/features/ledger/components/ledger-screen-detail.tsx b/src/app/features/ledger/components/ledger-screen-detail.tsx index a89bb0e86c6..1a2620133a0 100644 --- a/src/app/features/ledger/components/ledger-screen-detail.tsx +++ b/src/app/features/ledger/components/ledger-screen-detail.tsx @@ -1,8 +1,8 @@ import { Flex, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; -import { Tooltip } from '@app/components/tooltip'; import { InfoIcon } from '@app/ui/components/icons/info-icon'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { Caption } from '@app/ui/components/typography/caption'; interface LedgerScreenDetailProps { @@ -17,7 +17,7 @@ export function LedgerScreenDetail(props: LedgerScreenDetailProps) { {tooltipLabel ? ( - + {title} - + ) : ( <>{title} )} diff --git a/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx b/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx index 89c75481eb9..8c06beec5d9 100644 --- a/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx +++ b/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx @@ -10,7 +10,6 @@ import { usePressable } from '@app/components/item-hover'; import { Flag } from '@app/components/layout/flag'; import { StatusPending } from '@app/components/status-pending'; import { StatusReady } from '@app/components/status-ready'; -import { Tooltip } from '@app/components/tooltip'; import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks'; import { useCheckOrderStatuses } from '@app/query/bitcoin/ordinals/brc20/use-check-order-status'; import { fetchInscripionById } from '@app/query/bitcoin/ordinals/inscription-by-id.query'; @@ -22,6 +21,7 @@ import { PendingBrc20Transfer, usePendingBrc20Transfers, } from '@app/store/ordinals/ordinals.slice'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { Caption } from '@app/ui/components/typography/caption'; function StatusIcon({ status }: { status: OrdinalsbotInscriptionStatus }) { @@ -44,15 +44,15 @@ function StatusLabel({ status }: { status: OrdinalsbotInscriptionStatus }) { return <>Paying for transfer inscription…; case 'paid': return ( - + <>Creating transfer inscription… - + ); case 'waiting-for-indexer': return ( - + <>Receiving transfer inscription… - + ); case 'ready': return <>Ready to transfer; diff --git a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx index 272b753bbc6..b092b1d95d2 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx @@ -3,9 +3,9 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx'; import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { Flag } from '@app/components/layout/flag'; -import { Tooltip } from '@app/components/tooltip'; import { LeatherButton } from '@app/ui/components/button'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; interface PsbtInputOutputItemLayoutProps { address: string; @@ -33,20 +33,17 @@ export function PsbtInputOutputItemLayout({ {address} - {addressHoverLabel ? : null} - + {label} {amount} @@ -61,16 +58,9 @@ export function PsbtInputOutputItemLayout({ } variant="text" > - + {txId} - + ) : null} diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx index 0669543c04e..2e07d473d95 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx @@ -2,10 +2,10 @@ import { Box, HStack, styled } from 'leather-styles/jsx'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { Flag } from '@app/components/layout/flag'; -import { Tooltip } from '@app/components/tooltip'; import { LeatherButton } from '@app/ui/components/button'; import { BtcIcon } from '@app/ui/components/icons/btc-icon'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; interface PsbtAddressTotalItemProps { hoverLabel?: string; @@ -45,20 +45,17 @@ export function PsbtAddressTotalItem({ {subtitle} - {hoverLabel ? : null} - + ) : null} {subValue ? ( diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx index c1f10121b22..25e4da90d0e 100644 --- a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx +++ b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx @@ -1,10 +1,10 @@ import { Box, HStack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; -import { Tooltip } from '@app/components/tooltip'; import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context'; import { LockIcon } from '@app/ui/components/icons/lock-icon'; import { UnlockIcon } from '@app/ui/components/icons/unlock-icon'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; const immutableLabel = 'Any modification to the transaction, including the fee amount or other inputs/outputs, will invalidate the signature.'; @@ -20,11 +20,7 @@ export function PsbtRequestDetailsHeader() { return ( Transaction - + - + ); } diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx index e2fea0b02e6..7e479bd9a8f 100644 --- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx +++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx @@ -6,11 +6,11 @@ import { token } from 'leather-styles/tokens'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { Flag } from '@app/components/layout/flag'; -import { Tooltip } from '@app/components/tooltip'; import { LeatherButton } from '@app/ui/components/button'; import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon'; import { BtcIcon } from '@app/ui/components/icons/btc-icon'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; interface BitcoinContractLockAmountProps { hoverLabel?: string; @@ -45,13 +45,10 @@ export function BitcoinContractLockAmount({ {subtitle ? ( - {hoverLabel ? : null} - + ) : null} {subValue ? ( diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx index 90346b460fd..48c9b81c792 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx @@ -5,8 +5,8 @@ import { HStack, styled } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { Tooltip } from '@app/components/tooltip'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; interface RecipientAddressDisplayerProps { address: string; @@ -28,7 +28,7 @@ export function RecipientAddressDisplayer({ address }: RecipientAddressDisplayer > {address} - + - + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx index 776626c5b10..c848668ec4d 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx +++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx @@ -3,8 +3,8 @@ import { Box } from 'leather-styles/jsx'; import { Money } from '@shared/models/money.model'; -import { Tooltip } from '@app/components/tooltip'; import { LeatherButton } from '@app/ui/components/button'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { useSendMax } from '../hooks/use-send-max'; @@ -38,12 +38,7 @@ export function BitcoinSendMaxButton({ if (sendMaxBalance === '0') return ; return ( - + - + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx index 6cf07846e5d..87b99531a8b 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx @@ -7,8 +7,8 @@ import { CryptoCurrencies } from '@shared/models/currencies.model'; import { useLocationStateWithCache } from '@app/common/hooks/use-location-state'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { ModalHeader } from '@app/components/modal-header'; -import { Tooltip } from '@app/components/tooltip'; import { InfoIcon } from '@app/ui/components/icons/info-icon'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { useStacksBroadcastTransaction } from '../../family/stacks/hooks/use-stacks-broadcast-transaction'; import { useStacksTransactionSummary } from '../../family/stacks/hooks/use-stacks-transaction-summary'; @@ -56,18 +56,18 @@ export function StacksSendFormConfirmation() { ); const feeWarningTooltip = showFeeChangeWarning ? ( - - + ) : null; return ( diff --git a/src/app/pages/swap/components/swap-details/swap-detail.layout.tsx b/src/app/pages/swap/components/swap-details/swap-detail.layout.tsx index fa4cc37aa24..ae1b6e00f5d 100644 --- a/src/app/pages/swap/components/swap-details/swap-detail.layout.tsx +++ b/src/app/pages/swap/components/swap-details/swap-detail.layout.tsx @@ -2,8 +2,8 @@ import { ReactNode } from 'react'; import { Box, 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 SwapDetailLayoutProps { dataTestId?: string; @@ -24,11 +24,11 @@ export function SwapDetailLayout({ {title} {tooltipLabel ? ( - + - + ) : null} diff --git a/src/app/pages/swap/components/swap-selected-asset.layout.tsx b/src/app/pages/swap/components/swap-selected-asset.layout.tsx index 6a7284e8ec7..0832b719aca 100644 --- a/src/app/pages/swap/components/swap-selected-asset.layout.tsx +++ b/src/app/pages/swap/components/swap-selected-asset.layout.tsx @@ -2,8 +2,8 @@ import { Box, HStack, styled } from 'leather-styles/jsx'; import { noop } from '@shared/utils'; -import { Tooltip } from '@app/components/tooltip'; import { LeatherButton } from '@app/ui/components/button'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { SelectAssetTriggerButton } from './select-asset-trigger-button'; import { SelectedAsset } from './selected-asset'; @@ -73,7 +73,7 @@ export function SwapSelectedAssetLayout({ /> {caption ? ( - + {showError ? error : caption} - + + {children} + + + + + ); +} diff --git a/src/app/ui/components/tooltip/tooltip.stories.tsx b/src/app/ui/components/tooltip/tooltip.stories.tsx new file mode 100644 index 00000000000..b71080778fb --- /dev/null +++ b/src/app/ui/components/tooltip/tooltip.stories.tsx @@ -0,0 +1,32 @@ +import * as RadixTooltip from '@radix-ui/react-tooltip'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Box } from 'leather-styles/jsx'; + +import { InfoIcon } from '../icons/info-icon'; +import { BasicTooltip as Component } from './basic-tooltip'; + +const meta: Meta = { + component: Component, + tags: ['autodocs'], + title: 'Tooltip', +}; + +export default meta; +type Story = StoryObj; + +export const Tooltip: Story = { + args: { + label: 'Some tooltip', + side: 'top', + disabled: false, + }, + render: args => ( + + + + + + + + ), +}; diff --git a/src/app/ui/components/tooltip/tooltip.tsx b/src/app/ui/components/tooltip/tooltip.tsx new file mode 100644 index 00000000000..15b872b943e --- /dev/null +++ b/src/app/ui/components/tooltip/tooltip.tsx @@ -0,0 +1,68 @@ +import { forwardRef } from 'react'; + +import * as RadixTooltip from '@radix-ui/react-tooltip'; +import { css } from 'leather-styles/css'; + +function Root(props: RadixTooltip.TooltipProps) { + return ; +} + +function Portal(props: RadixTooltip.TooltipPortalProps) { + return ; +} + +const Trigger: typeof RadixTooltip.Trigger = forwardRef((props, ref) => ( + +)); + +const Content: typeof RadixTooltip.Content = forwardRef(({ className, ...props }, ref) => ( + +)); + +const Arrow: typeof RadixTooltip.Arrow = forwardRef(({ className, ...props }, ref) => ( + +)); + +export const Tooltip = { + Root, + Portal, + Trigger, + Content, + Arrow, +}; + +const defaultContentStyles = css({ + bg: 'accent.action-primary-default', + borderRadius: 'xs', + px: 'space.03', + py: 'space.02', + textStyle: 'body.02', + animationDuration: '400ms', + animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)', + willChange: 'transform, opacity', + maxWidth: '250px', + textAlign: 'center', + wordWrap: 'break-word', + color: 'accent.background-primary', + + "&[data-state='delayed-open'][data-side='top']": { + animationName: 'slideDownAndFade', + }, + "&[data-state='delayed-open'][data-side='right']": { + animationName: 'slideLeftAndFade', + }, + "&[data-state='delayed-open'][data-side='bottom']": { + animationName: 'slideUpAndFade', + }, + "&[data-state='delayed-open'][data-side='left']": { + animationName: 'slideRightAndFade', + }, +}); + +const defaultTooltipArrowStyles = css({ + fill: 'accent.action-primary-default', +}); diff --git a/theme/global/global.ts b/theme/global/global.ts index 68e0572069e..1128e20584e 100644 --- a/theme/global/global.ts +++ b/theme/global/global.ts @@ -3,8 +3,6 @@ import { defineGlobalStyles } from '@pandacss/dev'; import { fullPageStyles } from './full-page-styles'; import { popupCenterStyles } from './popup-center-styles'; import { popupStyles } from './popup-styles'; -import { tippyStyles } from './tippy-styles'; - // ts-unused-exports:disable-next-line export const globalCss = defineGlobalStyles({ 'html, body': { @@ -26,5 +24,4 @@ export const globalCss = defineGlobalStyles({ ...fullPageStyles, ...popupStyles, ...popupCenterStyles, - ...tippyStyles, }); diff --git a/theme/global/tippy-styles.ts b/theme/global/tippy-styles.ts deleted file mode 100644 index e37d9436650..00000000000 --- a/theme/global/tippy-styles.ts +++ /dev/null @@ -1,75 +0,0 @@ -export const tippyStyles = { - '.tippy-box[data-animation="fade"][data-state="hidden"]': { - opacity: 0, - }, - '[data-tippy-root]': { - maxWidth: 'calc(100vw - 10px)', - }, - '.tippy-box': { - position: 'relative', - backgroundColor: ' #333', - color: '#fff', - borderRadius: 'sm', - fontSize: '14px', - lineHeight: 1.4, - outline: 0, - transitionProperty: 'transform, visibility, opacity', - }, - '.tippy-box[data-placement^="top"] > .tippy-arrow': { - bottom: 0, - }, - '.tippy-box[data-placement^="top"] > .tippy-arrow:before': { - bottom: '-7px', - left: 0, - borderWidth: '8px 8px 0', - borderTopColor: 'initial', - transformOrigin: 'center top', - }, - '.tippy-box[data-placement^="bottom"] > .tippy-arrow': { - top: 0, - }, - '.tippy-box[data-placement^="bottom"] > .tippy-arrow:before': { - top: '-7px', - left: 0, - borderWidth: '0 8px 8px', - borderBottomColor: 'initial', - transformOrigin: 'center bottom', - }, - '.tippy-box[data-placement^="left"] > .tippy-arrow': { - right: 0, - }, - '.tippy-box[data-placement^="left"] > .tippy-arrow:before': { - borderWidth: '8px 0 8px 8px', - borderLeftColor: 'initial', - right: '-7px', - transformOrigin: 'center left', - }, - '.tippy-box[data-placement^="right"] > .tippy-arrow': { - left: 0, - }, - '.tippy-box[data-placement^="right"] > .tippy-arrow:before': { - left: '-7px', - borderWidth: '8px 8px 8px 0', - borderRightColor: 'initial', - transformOrigin: 'center right', - }, - '.tippy-box[data-inertia][data-state="visible"]': { - transitionTimingFunction: 'cubic-bezier(0.54, 1.5, 0.38, 1.11)', - }, - '.tippy-arrow': { - width: '16px', - height: '16px', - color: '#333', - }, - '.tippy-arrow:before': { - content: '', - position: 'absolute', - borderColor: 'transparent', - borderStyle: 'solid', - }, - '.tippy-content': { - position: 'relative', - padding: '5px 9px', - zIndex: 1, - }, -}; diff --git a/yarn.lock b/yarn.lock index c4bb00e5dc4..741c512d05d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2484,10 +2484,10 @@ "@trivago/prettier-plugin-sort-imports" "^4.2.0" prettier "^3.0.3" -"@leather-wallet/tokens@0.0.3": - version "0.0.3" - resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.3.tgz#c120820e51a0af3df2a62dccb9149b99b739d358" - integrity sha512-ga2gLj17dGLEZKK59J/T12w/p2ibdO23yj5tGwSL8e6Nu7sWid06xTVwGixS3JdYZnW1531wEBm4rsX+I4pl+w== +"@leather-wallet/tokens@0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.4.tgz#16eefec9ebce9b546436243bc07b0942a4e9d55f" + integrity sha512-6klYyoM/frCl+5HNYHooZaAIv0pZJ2103xu3lN3CRqHQl/epMWfq58BPtquh48/XmQT8VoMD/qLR+o/tUvBopQ== "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.2.0": version "8.2.0" @@ -2925,11 +2925,6 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.24.tgz#58601079e11784d20f82d0585865bb42305c4df3" integrity sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ== -"@popperjs/core@^2.9.0": - version "2.11.8" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" - integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== - "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf" @@ -3561,7 +3556,7 @@ "@radix-ui/react-separator" "1.0.3" "@radix-ui/react-toggle-group" "1.0.4" -"@radix-ui/react-tooltip@^1.0.7": +"@radix-ui/react-tooltip@1.0.7", "@radix-ui/react-tooltip@^1.0.7": version "1.0.7" resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e" integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw== @@ -6383,13 +6378,6 @@ resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.3.0.tgz#0a6750b94b40e4739706d41e8efc2ccf64d2aad9" integrity sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA== -"@tippyjs/react@4.2.6": - version "4.2.6" - resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71" - integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw== - dependencies: - tippy.js "^6.3.1" - "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -19348,13 +19336,6 @@ tinyspy@^2.1.1, tinyspy@^2.2.0: resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.0.tgz#9dc04b072746520b432f77ea2c2d17933de5d6ce" integrity sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg== -tippy.js@^6.3.1: - version "6.3.7" - resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c" - integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ== - dependencies: - "@popperjs/core" "^2.9.0" - tmp@0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"