Merge branch 'main' into mintable-module

Author: MananTank

.changeset/real-cars-sell.md

@@ -0,0 +1,22 @@
+---
+"thirdweb": minor
+---
+
+Add SiteLink component for creating wallet-aware links between thirdweb-enabled sites. This component automatically adds wallet connection parameters to the target URL when a wallet is connected, enabling seamless wallet state sharing between sites.
+
+Example:
+```tsx
+import { SiteLink } from "thirdweb/react";
+
+function App() {
+  return (
+    <SiteLink 
+      href="https://thirdweb.com" 
+      client={thirdwebClient} 
+      ecosystem={{ id: "ecosystem.thirdweb" }}
+    >
+      Visit thirdweb.com with connected wallet
+    </SiteLink>
+  );
+}
+```

apps/portal/package.json

@@ -8,13 +8,12 @@
     "dev": "next dev --turbopack",
     "prebuild": "pnpm run create-index",
     "build": "next build",
-    "postbuild": "pnpm run extract-search-data",
+    "postbuild": "pnpm run extract-search-data && pnpm next-sitemap",
     "start": "next start",
     "lint": "biome check ./src && eslint ./src",
     "fix": "biome check ./src --fix && eslint ./src --fix",
     "create-index": "pnpm tsx scripts/createEmptySearchIndex.ts",
-    "extract-search-data": "pnpm tsx scripts/extractSearchData.ts",
-    "postextract-search-data": "next-sitemap"
+    "extract-search-data": "pnpm tsx scripts/extractSearchData.ts"
   },
   "dependencies": {
     "@dirtycajunrice/klee": "^1.0.1",

apps/portal/src/components/Document/metadata.ts

@@ -32,6 +32,7 @@ export function createMetadata(obj: {
 }): Metadata {
   return {
     title: obj.title,
+    description: obj.description,
     metadataBase: new URL("https://portal.thirdweb.com"),
     twitter: {
       title: obj.title,
@@ -45,6 +46,7 @@ export function createMetadata(obj: {
       description: obj.description,
       locale: "en_US",
       type: "website",
+      siteName: "thirdweb docs",
       images: obj.image
         ? [
             {

packages/thirdweb/src/exports/react.ts

@@ -196,5 +196,6 @@ export type {
   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,14 +17,14 @@ 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({

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

@@ -0,0 +1,48 @@
+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(() =>
+      render(
+        // biome-ignore lint/suspicious/noExplicitAny: testing invalid input
+        <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="));
+  });
+});

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

@@ -0,0 +1,86 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { getLastAuthProvider } from "../../../react/core/utils/storage.js";
+import { webLocalStorage } from "../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import { ClientScopedStorage } from "../../../wallets/in-app/core/authentication/client-scoped-storage.js";
+import type { Ecosystem } from "../../../wallets/in-app/core/wallet/types.js";
+import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
+
+/**
+ * Creates a link to another thirdweb-supported site with wallet connection parameters.
+ *
+ * @note The target site must support the connected wallet (ecosystem or in-app).
+ *
+ * @param {Object} props - The props to pass to the anchor tag
+ * @param {String} props.href - The URL of the site to link to
+ * @param {ThirdwebClient} props.client - The current site's thirdweb client
+ * @param {Ecosystem} [props.ecosystem] - The ecosystem to use for the wallet connection in the target site
+ * @param {React.ReactNode} props.children - The content to render inside the link
+ *
+ * @example
+ * ```tsx
+ * import { SiteLink } from "thirdweb/react";
+ *
+ * <SiteLink href="https://thirdweb.com" client={thirdwebClient} ecosystem={{ id: "ecosystem.thirdweb" }}>
+ *   Visit Site
+ * </SiteLink>
+ * ```
+ */
+export function SiteLink({
+  href,
+  client,
+  ecosystem,
+  children,
+  ...props
+}: {
+  href: string;
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+  children: React.ReactNode;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">) {
+  if (!client.clientId) {
+    throw new Error("The SiteLink client must have a clientId");
+  }
+
+  const activeWallet = useActiveWallet();
+  const walletId = activeWallet?.id;
+
+  const {
+    data: { authProvider, authCookie } = {},
+  } = useQuery({
+    queryKey: ["site-link", walletId, href, 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();
+
+      return { authProvider, authCookie };
+    },
+  });
+
+  const url = new URL(href);
+  if (walletId) {
+    url.searchParams.set("walletId", walletId);
+  }
+  if (authProvider) {
+    url.searchParams.set("authProvider", authProvider);
+  }
+  if (authCookie) {
+    url.searchParams.set("authCookie", authCookie);
+  }
+
+  return (
+    <a href={encodeURI(url.toString())} {...props}>
+      {children}
+    </a>
+  );
+}

turbo.json

@@ -6,6 +6,16 @@
       "outputs": ["dist/**"],
       "dependsOn": ["^build"]
     },
+    "postbuild": {
+      "dependsOn": ["^postbuild"],
+      "outputs": [
+        "dist/**",
+        ".next/**",
+        "public/robots.txt",
+        "public/sitemap*.xml",
+        "searchIndex.json"
+      ]
+    },
     "bench": {
       "cache": false,
       "dependsOn": []