feat: Add SiteLink component for cross-site wallet-aware linking

Author: gregfromstl

.changeset/real-cars-sell.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds SiteLink

packages/thirdweb/src/exports/react.ts

@@ -1,19 +1,19 @@
 export { darkTheme, lightTheme } from "../react/core/design-system/index.js";
 export type {
-  Theme,
-  ThemeOverrides,
+	Theme,
+	ThemeOverrides,
 } from "../react/core/design-system/index.js";
 
 export { ConnectButton } from "../react/web/ui/ConnectWallet/ConnectButton.js";
 export { ConnectEmbed } from "../react/web/ui/ConnectWallet/Modal/ConnectEmbed.js";
 export type { ConnectEmbedProps } from "../react/core/hooks/connection/ConnectEmbedProps.js";
 
 export type {
-  ConnectButtonProps,
-  ConnectButton_connectButtonOptions,
-  ConnectButton_connectModalOptions,
-  ConnectButton_detailsButtonOptions,
-  ConnectButton_detailsModalOptions,
+	ConnectButtonProps,
+	ConnectButton_connectButtonOptions,
+	ConnectButton_connectModalOptions,
+	ConnectButton_detailsButtonOptions,
+	ConnectButton_detailsModalOptions,
 } from "../react/core/hooks/connection/ConnectButtonProps.js";
 export type { NetworkSelectorProps } from "../react/web/ui/ConnectWallet/NetworkSelector.js";
 export type { WelcomeScreen } from "../react/web/ui/ConnectWallet/screens/types.js";
@@ -26,12 +26,12 @@ export { ThirdwebProvider } from "../react/web/providers/thirdweb-provider.js";
 
 // tokens
 export type {
-  SupportedTokens,
-  TokenInfo,
+	SupportedTokens,
+	TokenInfo,
 } from "../react/core/utils/defaultTokens.js";
 export {
-  defaultTokens,
-  getDefaultToken,
+	defaultTokens,
+	getDefaultToken,
 } from "../react/core/utils/defaultTokens.js";
 
 // Media Renderer
@@ -71,8 +71,8 @@ export { useContractEvents } from "../react/core/hooks/contract/useContractEvent
 
 // transaction
 export type {
-  SendTransactionConfig,
-  SendTransactionPayModalConfig,
+	SendTransactionConfig,
+	SendTransactionPayModalConfig,
 } from "../react/core/hooks/transaction/useSendTransaction.js";
 export { useSimulateTransaction } from "../react/core/hooks/transaction/useSimulateTransaction.js";
 export { useSendTransaction } from "../react/web/hooks/transaction/useSendTransaction.js";
@@ -83,8 +83,8 @@ export { useEstimateGasCost } from "../react/core/hooks/transaction/useEstimateG
 
 // rpc related
 export {
-  useBlockNumber,
-  type UseBlockNumberOptions,
+	useBlockNumber,
+	type UseBlockNumberOptions,
 } from "../react/core/hooks/rpc/useBlockNumber.js";
 
 // utils
@@ -93,30 +93,30 @@ export { useInvalidateContractQuery } from "../react/core/hooks/others/useInvali
 
 // pay
 export {
-  useBuyWithCryptoQuote,
-  type BuyWithCryptoQuoteQueryOptions,
+	useBuyWithCryptoQuote,
+	type BuyWithCryptoQuoteQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithCryptoQuote.js";
 export { useBuyWithCryptoStatus } from "../react/core/hooks/pay/useBuyWithCryptoStatus.js";
 export {
-  useBuyWithCryptoHistory,
-  type BuyWithCryptoHistoryQueryOptions,
+	useBuyWithCryptoHistory,
+	type BuyWithCryptoHistoryQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithCryptoHistory.js";
 export {
-  useBuyWithFiatQuote,
-  type BuyWithFiatQuoteQueryOptions,
+	useBuyWithFiatQuote,
+	type BuyWithFiatQuoteQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithFiatQuote.js";
 export { useBuyWithFiatStatus } from "../react/core/hooks/pay/useBuyWithFiatStatus.js";
 export {
-  useBuyWithFiatHistory,
-  type BuyWithFiatHistoryQueryOptions,
+	useBuyWithFiatHistory,
+	type BuyWithFiatHistoryQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithFiatHistory.js";
 export {
-  useBuyHistory,
-  type BuyHistoryQueryOptions,
+	useBuyHistory,
+	type BuyHistoryQueryOptions,
 } from "../react/core/hooks/pay/useBuyHistory.js";
 export {
-  usePostOnRampQuote,
-  type PostOnRampQuoteQueryOptions,
+	usePostOnRampQuote,
+	type PostOnRampQuoteQueryOptions,
 } from "../react/core/hooks/pay/usePostOnrampQuote.js";
 
 export { AutoConnect } from "../react/web/ui/AutoConnect/AutoConnect.js";
@@ -126,34 +126,34 @@ export type { AutoConnectProps } from "../react/core/hooks/connection/types.js";
 export type { SiweAuthOptions } from "../react/core/hooks/auth/useSiweAuth.js";
 
 export {
-  PayEmbed,
-  type PayEmbedProps,
-  type PayEmbedConnectOptions,
+	PayEmbed,
+	type PayEmbedProps,
+	type PayEmbedConnectOptions,
 } from "../react/web/ui/PayEmbed.js";
 export type {
-  PayUIOptions,
-  PaymentInfo,
-  DirectPaymentOptions,
-  FundWalletOptions,
-  TranasctionOptions,
+	PayUIOptions,
+	PaymentInfo,
+	DirectPaymentOptions,
+	FundWalletOptions,
+	TranasctionOptions,
 } from "../react/core/hooks/connection/ConnectButtonProps.js";
 
 export {
-  useConnectModal,
-  type UseConnectModalOptions,
+	useConnectModal,
+	type UseConnectModalOptions,
 } from "../react/web/ui/ConnectWallet/useConnectModal.js";
 
 // wallet info
 export { useWalletInfo, useWalletImage } from "../react/core/utils/wallet.js";
 
 export {
-  useWalletDetailsModal,
-  type UseWalletDetailsModalOptions,
+	useWalletDetailsModal,
+	type UseWalletDetailsModalOptions,
 } from "../react/web/ui/ConnectWallet/Details.js";
 
 export {
-  useNetworkSwitcherModal,
-  type UseNetworkSwitcherModalOptions,
+	useNetworkSwitcherModal,
+	type UseNetworkSwitcherModalOptions,
 } from "../react/web/ui/ConnectWallet/NetworkSelector.js";
 
 // ens
@@ -165,17 +165,17 @@ export { useEnsName, useEnsAvatar } from "../react/core/utils/wallet.js";
 export { ClaimButton } from "../react/web/ui/prebuilt/thirdweb/ClaimButton/index.js";
 export type { ClaimButtonProps } from "../react/web/ui/prebuilt/thirdweb/ClaimButton/types.js";
 export {
-  BuyDirectListingButton,
-  type BuyDirectListingButtonProps,
+	BuyDirectListingButton,
+	type BuyDirectListingButtonProps,
 } from "../react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.js";
 export {
-  CreateDirectListingButton,
-  type CreateDirectListingButtonProps,
+	CreateDirectListingButton,
+	type CreateDirectListingButtonProps,
 } from "../react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.js";
 
 export {
-  NFT,
-  type NFTMediaProps,
+	NFT,
+	type NFTMediaProps,
 } from "../react/web/ui/prebuilt/NFT/NFT.js";
 
 export { useConnectionManager } from "../react/core/providers/connection-manager.js";
@@ -190,11 +190,12 @@ export { useSiweAuth } from "../react/core/hooks/auth/useSiweAuth.js";
 // Social
 export { useSocialProfiles } from "../react/core/social/useSocialProfiles.js";
 export type {
-  SocialProfile,
-  EnsProfile,
-  FarcasterProfile,
-  LensProfile,
+	SocialProfile,
+	EnsProfile,
+	FarcasterProfile,
+	LensProfile,
 } from "../social/types.js";
 
-// Site Embed
+// Site Embed and Linking
 export { SiteEmbed } from "../react/web/ui/SiteEmbed.js";
+export { SiteLink } from "../react/web/ui/SiteLink.js";

packages/thirdweb/src/react/web/ui/SiteEmbed.tsx

@@ -17,74 +17,74 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
  *
  * @param {Object} props - The props to pass to the iframe
  * @param {String} props.src - The URL of the site to embed
- * @param {ThirdwebClient} props.client - The client to use for the embedded site
- * @param {Ecosystem} [props.ecosystem] - The ecosystem to use for the embedded site
+ * @param {ThirdwebClient} props.client - The current site's thirdweb client
+ * @param {Ecosystem} [props.ecosystem] - The ecosystem to use for the wallet connection in the embedded site
  *
  * @example
  * ```tsx
  * import { SiteEmbed } from "thirdweb/react";
  *
- * <SiteEmbed src="https://thirdweb.com" clientId="thirdweb-client-id" />
+ * <SiteEmbed src="https://thirdweb.com" client={thirdwebClient} ecosystem={{ id: "ecosystem.thirdweb" }} />
  * ```
  */
 export function SiteEmbed({
-  src,
-  client,
-  ecosystem,
-  ...props
+	src,
+	client,
+	ecosystem,
+	...props
 }: {
-  src: string;
-  client: ThirdwebClient;
-  ecosystem?: Ecosystem;
+	src: string;
+	client: ThirdwebClient;
+	ecosystem?: Ecosystem;
 } & React.DetailedHTMLProps<
-  React.IframeHTMLAttributes<HTMLIFrameElement>,
-  HTMLIFrameElement
+	React.IframeHTMLAttributes<HTMLIFrameElement>,
+	HTMLIFrameElement
 >) {
-  if (!client.clientId) {
-    throw new Error("The SiteEmbed client must have a clientId");
-  }
+	if (!client.clientId) {
+		throw new Error("The SiteEmbed client must have a clientId");
+	}
 
-  const activeWallet = useActiveWallet();
-  const walletId = activeWallet?.id;
+	const activeWallet = useActiveWallet();
+	const walletId = activeWallet?.id;
 
-  const {
-    data: { authProvider, authCookie } = {},
-  } = useQuery({
-    queryKey: ["site-embed", walletId, src, client.clientId, ecosystem],
-    enabled:
-      activeWallet && (isEcosystemWallet(activeWallet) || walletId === "inApp"),
-    queryFn: async () => {
-      const storage = new ClientScopedStorage({
-        storage: webLocalStorage,
-        clientId: client.clientId,
-        ecosystem,
-      });
+	const {
+		data: { authProvider, authCookie } = {},
+	} = useQuery({
+		queryKey: ["site-embed", walletId, src, client.clientId, ecosystem],
+		enabled:
+			activeWallet && (isEcosystemWallet(activeWallet) || walletId === "inApp"),
+		queryFn: async () => {
+			const storage = new ClientScopedStorage({
+				storage: webLocalStorage,
+				clientId: client.clientId,
+				ecosystem,
+			});
 
-      const authProvider = await getLastAuthProvider(webLocalStorage);
-      const authCookie = await storage.getAuthCookie();
+			const authProvider = await getLastAuthProvider(webLocalStorage);
+			const authCookie = await storage.getAuthCookie();
 
-      return { authProvider, authCookie };
-    },
-  });
+			return { authProvider, authCookie };
+		},
+	});
 
-  const url = new URL(src);
-  if (walletId) {
-    url.searchParams.set("walletId", walletId);
-  }
-  if (authProvider) {
-    url.searchParams.set("authProvider", authProvider);
-  }
-  if (authCookie) {
-    url.searchParams.set("authCookie", authCookie);
-  }
+	const url = new URL(src);
+	if (walletId) {
+		url.searchParams.set("walletId", walletId);
+	}
+	if (authProvider) {
+		url.searchParams.set("authProvider", authProvider);
+	}
+	if (authCookie) {
+		url.searchParams.set("authCookie", authCookie);
+	}
 
-  return (
-    <iframe
-      src={encodeURI(url.toString())}
-      width="100%"
-      height="100%"
-      allowFullScreen
-      {...props}
-    />
-  );
+	return (
+		<iframe
+			src={encodeURI(url.toString())}
+			width="100%"
+			height="100%"
+			allowFullScreen
+			{...props}
+		/>
+	);
 }

packages/thirdweb/src/react/web/ui/SiteLink.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { render, waitFor } from "../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../test/src/test-clients.js";
+import { SiteLink } from "./SiteLink.js";
+
+describe("SiteLink", () => {
+	it("renders anchor with correct href", () => {
+		const testUrl = "https://example.com/";
+		const { container } = render(
+			<SiteLink href={testUrl} client={TEST_CLIENT}>
+				Test Link
+			</SiteLink>,
+		);
+
+		const anchor = container.querySelector("a");
+		expect(anchor).toBeTruthy();
+		expect(anchor?.href).toBe(testUrl);
+		expect(anchor?.textContent).toBe("Test Link");
+	});
+
+	it("throws error if clientId is not provided", () => {
+		const testUrl = "https://example.com/";
+		expect(() =>
+			// biome-ignore lint/suspicious/noExplicitAny: testing invalid input
+			render(<SiteLink href={testUrl} client={{} as any}>Test Link</SiteLink>),
+		).toThrow("The SiteLink client must have a clientId");
+	});
+
+	it("adds wallet params to url when wallet is connected", async () => {
+		const testUrl = "https://example.com/";
+		const { container } = render(
+			<SiteLink href={testUrl} client={TEST_CLIENT}>
+				Test Link
+			</SiteLink>,
+			{
+				setConnectedWallet: true,
+			},
+		);
+
+		const anchor = container.querySelector("a");
+		expect(anchor).toBeTruthy();
+		await waitFor(() => expect(anchor?.href).toContain("walletId="));
+	});
+});