diff --git a/.changeset/funny-taxis-grow.md b/.changeset/funny-taxis-grow.md new file mode 100644 index 00000000000..d453481f4b5 --- /dev/null +++ b/.changeset/funny-taxis-grow.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +allow passing `asChild` for most ui components diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index 9e3a45a6ed2..6c5a24a2342 100644 --- a/apps/dashboard/package.json +++ b/apps/dashboard/package.json @@ -43,7 +43,7 @@ "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-select": "^2.1.5", "@radix-ui/react-separator": "^1.1.1", - "@radix-ui/react-slot": "^1.1.1", + "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tooltip": "1.1.7", "@sentry/nextjs": "8.52.0", diff --git a/apps/playground-web/package.json b/apps/playground-web/package.json index 1ef52d943bf..1ae9c4baa28 100644 --- a/apps/playground-web/package.json +++ b/apps/playground-web/package.json @@ -25,7 +25,7 @@ "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.5", "@radix-ui/react-separator": "^1.1.1", - "@radix-ui/react-slot": "^1.1.1", + "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-tooltip": "1.1.7", diff --git a/apps/portal/package.json b/apps/portal/package.json index d632c4ecb48..c068a35a5f9 100644 --- a/apps/portal/package.json +++ b/apps/portal/package.json @@ -25,7 +25,7 @@ "@radix-ui/react-dialog": "1.1.5", "@radix-ui/react-dropdown-menu": "^2.1.5", "@radix-ui/react-select": "^2.1.5", - "@radix-ui/react-slot": "^1.1.1", + "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-tabs": "^1.1.2", "@tanstack/react-query": "5.65.1", "@tryghost/content-api": "^1.11.21", diff --git a/apps/wallet-ui/package.json b/apps/wallet-ui/package.json index 8c14d3736e6..0da2a59da36 100644 --- a/apps/wallet-ui/package.json +++ b/apps/wallet-ui/package.json @@ -14,7 +14,7 @@ "@radix-ui/react-dialog": "1.1.5", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-popover": "^1.1.5", - "@radix-ui/react-slot": "^1.1.1", + "@radix-ui/react-slot": "1.1.1", "@tanstack/react-query": "5.65.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/packages/thirdweb/package.json b/packages/thirdweb/package.json index 573a6add2ff..52c2adb0e0f 100644 --- a/packages/thirdweb/package.json +++ b/packages/thirdweb/package.json @@ -132,63 +132,25 @@ }, "typesVersions": { "*": { - "adapters/*": [ - "./dist/types/exports/adapters/*.d.ts" - ], - "auth": [ - "./dist/types/exports/auth.d.ts" - ], - "chains": [ - "./dist/types/exports/chains.d.ts" - ], - "contract": [ - "./dist/types/exports/contract.d.ts" - ], - "deploys": [ - "./dist/types/exports/deploys.d.ts" - ], - "event": [ - "./dist/types/exports/event.d.ts" - ], - "extensions/*": [ - "./dist/types/exports/extensions/*.d.ts" - ], - "pay": [ - "./dist/types/exports/pay.d.ts" - ], - "react": [ - "./dist/types/exports/react.d.ts" - ], - "react-native": [ - "./dist/types/exports/react-native.d.ts" - ], - "rpc": [ - "./dist/types/exports/rpc.d.ts" - ], - "storage": [ - "./dist/types/exports/storage.d.ts" - ], - "transaction": [ - "./dist/types/exports/transaction.d.ts" - ], - "utils": [ - "./dist/types/exports/utils.d.ts" - ], - "wallets": [ - "./dist/types/exports/wallets.d.ts" - ], - "wallets/*": [ - "./dist/types/exports/wallets/*.d.ts" - ], - "modules": [ - "./dist/types/exports/modules.d.ts" - ], - "social": [ - "./dist/types/exports/social.d.ts" - ], - "ai": [ - "./dist/types/exports/ai.d.ts" - ] + "adapters/*": ["./dist/types/exports/adapters/*.d.ts"], + "auth": ["./dist/types/exports/auth.d.ts"], + "chains": ["./dist/types/exports/chains.d.ts"], + "contract": ["./dist/types/exports/contract.d.ts"], + "deploys": ["./dist/types/exports/deploys.d.ts"], + "event": ["./dist/types/exports/event.d.ts"], + "extensions/*": ["./dist/types/exports/extensions/*.d.ts"], + "pay": ["./dist/types/exports/pay.d.ts"], + "react": ["./dist/types/exports/react.d.ts"], + "react-native": ["./dist/types/exports/react-native.d.ts"], + "rpc": ["./dist/types/exports/rpc.d.ts"], + "storage": ["./dist/types/exports/storage.d.ts"], + "transaction": ["./dist/types/exports/transaction.d.ts"], + "utils": ["./dist/types/exports/utils.d.ts"], + "wallets": ["./dist/types/exports/wallets.d.ts"], + "wallets/*": ["./dist/types/exports/wallets/*.d.ts"], + "modules": ["./dist/types/exports/modules.d.ts"], + "social": ["./dist/types/exports/social.d.ts"], + "ai": ["./dist/types/exports/ai.d.ts"] } }, "browser": { @@ -217,6 +179,7 @@ "@radix-ui/react-dialog": "1.1.5", "@radix-ui/react-focus-scope": "1.1.1", "@radix-ui/react-icons": "1.3.2", + "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-tooltip": "1.1.7", "@tanstack/react-query": "5.65.1", "@walletconnect/ethereum-provider": "2.17.5", diff --git a/packages/thirdweb/src/react/web/ui/SiteLink.tsx b/packages/thirdweb/src/react/web/ui/SiteLink.tsx index a30ef72f257..0f40526bd1d 100644 --- a/packages/thirdweb/src/react/web/ui/SiteLink.tsx +++ b/packages/thirdweb/src/react/web/ui/SiteLink.tsx @@ -1,4 +1,5 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { useQuery } from "@tanstack/react-query"; import type { ThirdwebClient } from "../../../client/client.js"; import { getLastAuthProvider } from "../../../react/core/utils/storage.js"; @@ -34,8 +35,10 @@ export function SiteLink({ client, ecosystem, children, + asChild, ...props }: { + asChild?: boolean; href: string; client: ThirdwebClient; ecosystem?: Ecosystem; @@ -82,9 +85,10 @@ export function SiteLink({ url.searchParams.set("authCookie", authCookie); } + const Comp = asChild ? Slot.Root : "a"; return ( - + {children} - + ); } diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Account/address.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Account/address.tsx index 52caee3e260..0b15588fa54 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Account/address.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Account/address.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { useAccountContext } from "../../../../core/account/provider.js"; /** @@ -8,6 +9,7 @@ import { useAccountContext } from "../../../../core/account/provider.js"; */ export interface AccountAddressProps extends Omit, "children"> { + asChild?: boolean; /** * The function used to transform (format) the wallet address * Specifically useful for shortening the wallet. @@ -56,9 +58,11 @@ export interface AccountAddressProps */ export function AccountAddress({ formatFn, + asChild, ...restProps }: AccountAddressProps) { const { address } = useAccountContext(); const value = formatFn ? formatFn(address) : address; - return {value}; + const Comp = asChild ? Slot.Root : "span"; + return {value}; } diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Account/avatar.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Account/avatar.tsx index 74d7283662c..ebd78dce303 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Account/avatar.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Account/avatar.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type React from "react"; import type { JSX } from "react"; @@ -20,6 +21,7 @@ import { useAccountContext } from "../../../../core/account/provider.js"; export interface AccountAvatarProps extends Omit, "src">, Omit { + asChild?: boolean; /** * Use this prop to prioritize the social profile that you want to display * This is useful for a wallet containing multiple social profiles. @@ -159,6 +161,7 @@ export function AccountAvatar({ loadingComponent, fallbackComponent, queryOptions, + asChild, ...restProps }: AccountAvatarProps) { const { address, client } = useAccountContext(); @@ -222,5 +225,6 @@ export function AccountAvatar({ return fallbackComponent || null; } - return {restProps.alt}; + const Comp = asChild ? Slot.Root : "img"; + return ; } diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Account/balance.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Account/balance.tsx index 608e87f880d..499ff9b591d 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Account/balance.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Account/balance.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type React from "react"; import type { JSX } from "react"; @@ -22,6 +23,7 @@ import { formatAccountTokenBalance } from "../../../../core/utils/account.js"; */ export interface AccountBalanceProps extends Omit, "children"> { + asChild?: boolean; /** * The network to fetch balance on * If not passed, the component will use the current chain that the wallet is connected to (`useActiveWalletChain()`) @@ -166,6 +168,7 @@ export function AccountBalance({ queryOptions, formatFn, showBalanceInFiat, + asChild, ...restProps }: AccountBalanceProps) { const { address, client } = useAccountContext(); @@ -212,12 +215,13 @@ export function AccountBalance({ ); } + const Comp = asChild ? Slot.Root : "span"; return ( - + {formatAccountTokenBalance({ ...balanceQuery.data, decimals: balanceQuery.data.balance < 1 ? 3 : 2, })} - + ); } diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Account/name.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Account/name.tsx index 2156ce31473..28db84e4949 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Account/name.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Account/name.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type React from "react"; import type { JSX } from "react"; @@ -19,6 +20,7 @@ import { useAccountContext } from "../../../../core/account/provider.js"; export interface AccountNameProps extends Omit, "children">, Omit { + asChild?: boolean; /** * A function used to transform (format) the name of the account. * it should take in a string and output a string. @@ -134,6 +136,7 @@ export function AccountName({ queryOptions, loadingComponent, fallbackComponent, + asChild, ...restProps }: AccountNameProps) { const { address, client } = useAccountContext(); @@ -177,5 +180,6 @@ export function AccountName({ return fallbackComponent || null; } - return {nameQuery.data}; + const Comp = asChild ? Slot.Root : "span"; + return {nameQuery.data}; } diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx index 3ba2cba59f9..fec5b5dfbd1 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type { JSX } from "react"; import type { Chain } from "../../../../../chains/types.js"; @@ -16,6 +17,7 @@ import { useChainContext } from "./provider.js"; */ export interface ChainIconProps extends Omit, "src"> { + asChild?: boolean; /** * You need a ThirdwebClient to resolve the icon which is hosted on IPFS. * (since most chain icons are hosted on IPFS, loading them via thirdweb gateway will ensure better performance) @@ -119,6 +121,7 @@ export function ChainIcon({ fallbackComponent, queryOptions, client, + asChild, ...restProps }: ChainIconProps) { const { chain } = useChainContext(); @@ -136,7 +139,8 @@ export function ChainIcon({ return fallbackComponent || null; } - return {restProps.alt}; + const Comp = asChild ? Slot.Root : "img"; + return ; } /** diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/name.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/name.tsx index 3cf9c80b83e..aa481ddf8e4 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/name.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/name.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type React from "react"; import type { JSX } from "react"; @@ -15,6 +16,7 @@ import { useChainContext } from "./provider.js"; */ export interface ChainNameProps extends Omit, "children"> { + asChild?: boolean; /** * This prop can be a string or a (async) function that resolves to a string, representing the name of the chain * This is particularly useful if you already have a way to fetch the chain name. @@ -153,6 +155,7 @@ export function ChainName({ loadingComponent, fallbackComponent, queryOptions, + asChild, ...restProps }: ChainNameProps) { const { chain } = useChainContext(); @@ -172,7 +175,8 @@ export function ChainName({ const displayValue = formatFn ? formatFn(nameQuery.data) : nameQuery.data; - return {displayValue}; + const Comp = asChild ? Slot.Root : "span"; + return {displayValue}; } /** diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/NFT/description.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/NFT/description.tsx index 81e5825c8c5..aa6cd4bd0a3 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/NFT/description.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/NFT/description.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type { JSX } from "react"; import type { ThirdwebContract } from "../../../../../contract/contract.js"; @@ -9,6 +10,7 @@ import { getNFTInfo } from "./utils.js"; export interface NFTDescriptionProps extends Omit, "children"> { + asChild?: boolean; loadingComponent?: JSX.Element; fallbackComponent?: JSX.Element; /** @@ -88,6 +90,7 @@ export function NFTDescription({ fallbackComponent, queryOptions, descriptionResolver, + asChild, ...restProps }: NFTDescriptionProps) { const { contract, tokenId } = useNFTContext(); @@ -119,7 +122,8 @@ export function NFTDescription({ return fallbackComponent || null; } - return {descQuery.data}; + const Comp = asChild ? Slot.Root : "span"; + return {descQuery.data}; } /** diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/NFT/name.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/NFT/name.tsx index 5486abcff50..eb946f14e5a 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/NFT/name.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/NFT/name.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type { JSX } from "react"; import type { ThirdwebContract } from "../../../../../contract/contract.js"; @@ -9,6 +10,7 @@ import { getNFTInfo } from "./utils.js"; export interface NFTNameProps extends Omit, "children"> { + asChild?: boolean; loadingComponent?: JSX.Element; fallbackComponent?: JSX.Element; /** @@ -89,6 +91,7 @@ export function NFTName({ fallbackComponent, queryOptions, nameResolver, + asChild, ...restProps }: NFTNameProps) { const { contract, tokenId } = useNFTContext(); @@ -112,7 +115,8 @@ export function NFTName({ if (!nameQuery.data) { return fallbackComponent || null; } - return {nameQuery.data}; + const Comp = asChild ? Slot.Root : "span"; + return {nameQuery.data}; } /** diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Token/icon.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Token/icon.tsx index 0be981d8ee1..250461dcb45 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Token/icon.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Token/icon.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type { JSX } from "react"; import { getChainMetadata } from "../../../../../chains/utils.js"; @@ -17,6 +18,7 @@ import { useTokenContext } from "./provider.js"; */ export interface TokenIconProps extends Omit, "src"> { + asChild?: boolean; /** * This prop can be a string or a (async) function that resolves to a string, representing the icon url of the token * This is particularly useful if you already have a way to fetch the token icon. @@ -114,6 +116,7 @@ export function TokenIcon({ loadingComponent, fallbackComponent, queryOptions, + asChild, ...restProps }: TokenIconProps) { const { address, client, chain } = useTokenContext(); @@ -180,5 +183,6 @@ export function TokenIcon({ return fallbackComponent || null; } - return {restProps.alt}; + const Comp = asChild ? Slot.Root : "img"; + return ; } diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Token/name.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Token/name.tsx index 0fd1c16b97a..887316d9360 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Token/name.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Token/name.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type React from "react"; import type { JSX } from "react"; @@ -20,6 +21,7 @@ import { useTokenContext } from "./provider.js"; */ export interface TokenNameProps extends Omit, "children"> { + asChild?: boolean; /** * This prop can be a string or a (async) function that resolves to a string, representing the name of the token * This is particularly useful if you already have a way to fetch the token name. @@ -156,6 +158,7 @@ export function TokenName({ loadingComponent, fallbackComponent, queryOptions, + asChild, ...restProps }: TokenNameProps) { const { address, client, chain } = useTokenContext(); @@ -174,11 +177,13 @@ export function TokenName({ return fallbackComponent || null; } + const Comp = asChild ? Slot.Root : "span"; + if (formatFn && typeof formatFn === "function") { - return {formatFn(nameQuery.data)}; + return {formatFn(nameQuery.data)}; } - return {nameQuery.data}; + return {nameQuery.data}; } /** diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Token/symbol.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Token/symbol.tsx index a4066cdf9de..95bb4bc3de4 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Token/symbol.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Token/symbol.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type React from "react"; import type { JSX } from "react"; @@ -20,6 +21,7 @@ import { useTokenContext } from "./provider.js"; */ export interface TokenSymbolProps extends Omit, "children"> { + asChild?: boolean; /** * This prop can be a string or a (async) function that resolves to a string, representing the symbol of the token * This is particularly useful if you already have a way to fetch the token symbol. @@ -148,6 +150,7 @@ export interface TokenSymbolProps * @beta */ export function TokenSymbol({ + asChild, symbolResolver, formatFn, loadingComponent, @@ -171,11 +174,13 @@ export function TokenSymbol({ return fallbackComponent || null; } + const Comp = asChild ? Slot.Root : "span"; + if (formatFn && typeof formatFn === "function") { - return {formatFn(symbolQuery.data)}; + return {formatFn(symbolQuery.data)}; } - return {symbolQuery.data}; + return {symbolQuery.data}; } /** diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/icon.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/icon.tsx index 4cdb6256478..e325a9fb5f8 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/icon.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/icon.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import type { UseQueryOptions } from "@tanstack/react-query"; import type { JSX } from "react"; import type { AuthOption } from "../../../../../wallets/types.js"; @@ -10,6 +11,7 @@ import { export interface WalletIconProps extends Omit, "src"> { + asChild?: boolean; /** * This component will be shown while the icon of the wallet is being fetched * If not passed, the component will return `null`. @@ -81,6 +83,7 @@ export interface WalletIconProps * @beta */ export function WalletIcon({ + asChild, loadingComponent, fallbackComponent, queryOptions, @@ -93,11 +96,14 @@ export function WalletIcon({ if (!imageQuery.data) { return fallbackComponent || null; } - return {restProps.alt}; + + const Comp = asChild ? Slot.Root : "img"; + return ; } export interface SocialIconProps extends Omit, "src"> { + asChild?: boolean; provider: AuthOption | string; } @@ -121,7 +127,12 @@ export interface SocialIconProps * @wallet * @beta */ -export function SocialIcon({ provider, ...restProps }: SocialIconProps) { +export function SocialIcon({ + provider, + asChild, + ...restProps +}: SocialIconProps) { const src = getSocialIcon(provider); - return {restProps.alt}; + const Comp = asChild ? Slot.Root : "img"; + return ; } diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/name.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/name.tsx index 98ed7d59f64..805cb5ea6da 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/name.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Wallet/name.tsx @@ -1,5 +1,6 @@ "use client"; +import * as Slot from "@radix-ui/react-slot"; import type { UseQueryOptions } from "@tanstack/react-query"; import type { JSX } from "react"; import { useWalletName } from "../../../../core/utils/walletname.js"; @@ -11,6 +12,7 @@ import { useWalletName } from "../../../../core/utils/walletname.js"; */ export interface WalletNameProps extends Omit, "children"> { + asChild?: boolean; /** * This component will be shown while the name of the wallet name is being fetched * If not passed, the component will return `null`. @@ -101,6 +103,7 @@ export function WalletName({ fallbackComponent, queryOptions, formatFn, + asChild, ...restProps }: WalletNameProps) { const nameQuery = useWalletName({ queryOptions, formatFn }); @@ -110,5 +113,6 @@ export function WalletName({ if (!nameQuery.data) { return fallbackComponent || null; } - return {nameQuery.data}; + const Comp = asChild ? Slot.Root : "span"; + return {nameQuery.data}; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbff91ffd9e..50e8bb8a203 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -125,7 +125,7 @@ importers: specifier: ^1.1.1 version: 1.1.1(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@radix-ui/react-slot': - specifier: ^1.1.1 + specifier: 1.1.1 version: 1.1.1(@types/react@19.0.8)(react@19.0.0) '@radix-ui/react-switch': specifier: ^1.1.2 @@ -450,7 +450,7 @@ importers: specifier: ^1.1.1 version: 1.1.1(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@radix-ui/react-slot': - specifier: ^1.1.1 + specifier: 1.1.1 version: 1.1.1(@types/react@19.0.8)(react@19.0.0) '@radix-ui/react-switch': specifier: ^1.1.2 @@ -568,7 +568,7 @@ importers: specifier: ^2.1.5 version: 2.1.5(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@radix-ui/react-slot': - specifier: ^1.1.1 + specifier: 1.1.1 version: 1.1.1(@types/react@19.0.8)(react@19.0.0) '@radix-ui/react-tabs': specifier: ^1.1.2 @@ -728,7 +728,7 @@ importers: specifier: ^1.1.5 version: 1.1.5(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@radix-ui/react-slot': - specifier: ^1.1.1 + specifier: 1.1.1 version: 1.1.1(@types/react@19.0.8)(react@19.0.0) '@tanstack/react-query': specifier: 5.65.1 @@ -940,6 +940,9 @@ importers: '@radix-ui/react-icons': specifier: 1.3.2 version: 1.3.2(react@19.0.0) + '@radix-ui/react-slot': + specifier: 1.1.1 + version: 1.1.1(@types/react@19.0.8)(react@19.0.0) '@radix-ui/react-tooltip': specifier: 1.1.7 version: 1.1.7(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)