thirdweb-dev · joaquim-verges · Jan 24, 2025 · Jan 23, 2025
@@ -27,5 +27,9 @@
   },
   "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
-  }
+  },
+  "eslint.workingDirectories": [
+    { "pattern": "./packages/*/" },
+    { "pattern": "./apps/*/" }
+  ]
 }
@@ -5,12 +5,20 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@next/next/recommended",
-    "plugin:storybook/recommended"
+    "plugin:mdx/recommended",
+    "plugin:tailwindcss/recommended"
   ],
   "rules": {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "off",
-    "svg-jsx/camel-case-dash": "error"
-  }
+    "svg-jsx/camel-case-dash": "error",
+    "tailwindcss/classnames-order": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      "extends": ["biome"]
+    }
+  ]
 }
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "next": true,
+  "project": ["src/**"],
+  "ignoreBinaries": ["only-allow", "biome"],
+  "ignore": ["src/components/ui/**"],
+  "ignoreDependencies": [
+    "@thirdweb-dev/chains",
+    "@thirdweb-dev/wallets",
+    "thirdweb",
+    "@types/mdx"
+  ],
+  "entry": [
+    "next.config.{js,ts,cjs,mjs}",
+    "{instrumentation,middleware}.{js,ts}",
+    "app/global-error.{js,jsx,ts,tsx}",
+    "app/**/{error,layout,loading,not-found,page,template,default}.{js,jsx,ts,tsx,mdx}",
+    "app/**/route.{js,jsx,ts,tsx}",
+    "app/{manifest,sitemap,robots}.{js,ts}",
+    "app/**/{icon,apple-icon}.{js,jsx,ts,tsx}",
+    "app/**/{opengraph,twitter}-image.{js,jsx,ts,tsx}",
+    "pages/**/*.{js,jsx,ts,tsx}",
+    "src/{instrumentation,middleware}.{js,ts}",
+    "src/app/global-error.{js,jsx,ts,tsx}",
+    "src/app/**/{error,layout,loading,not-found,page,template,default}.{js,jsx,ts,tsx,mdx}",
+    "src/app/**/route.{js,jsx,ts,tsx}",
+    "src/app/{manifest,sitemap,robots}.{js,ts}",
+    "src/app/**/{icon,apple-icon}.{js,jsx,ts,tsx}",
+    "src/app/**/{opengraph,twitter}-image.{js,jsx,ts,tsx}",
+    "src/pages/**/*.{js,jsx,ts,tsx}",
+    "scripts/*.ts"
+  ]
+}
@@ -10,10 +10,12 @@
     "build": "next build",
     "postbuild": "pnpm run extract-search-data && pnpm next-sitemap",
     "start": "next start",
-    "lint": "biome check ./src && eslint ./src",
+    "lint": "biome check ./src && knip && 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"
+    "extract-search-data": "pnpm tsx scripts/extractSearchData.ts",
+    "typecheck": "tsc --noEmit",
+    "knip": "knip"
   },
   "dependencies": {
     "@dirtycajunrice/klee": "^1.0.6",
@@ -30,7 +32,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "4.1.0",
-    "escape-string-regexp": "^5.0.0",
     "flexsearch": "^0.7.43",
     "github-slugger": "^2.0.0",
     "lucide-react": "0.468.0",
@@ -43,7 +44,6 @@
     "react-dom": "19.0.0",
     "react-html-parser": "2.0.2",
     "remark-gfm": "3.0.1",
-    "semver": "^7.6.0",
     "server-only": "^0.0.1",
     "shiki": "1.27.0",
     "tailwind-merge": "^2.6.0",
@@ -53,6 +53,7 @@
     "typedoc-better-json": "0.9.4"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "15.1.3",
     "@types/flexsearch": "^0.7.6",
     "@types/mdx": "^2.0.13",
     "@types/node": "22.10.2",
@@ -65,10 +66,10 @@
     "autoprefixer": "^10.4.19",
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.4",
-    "eslint-config-next": "15.1.4",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-svg-jsx": "^1.2.4",
     "eslint-plugin-tailwindcss": "^3.17.5",
+    "knip": "5.41.0",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.49",
     "tailwindcss": "3.4.17",

@@ -1,6 +1,11 @@
 // @ts-check
 
-import { unrealEngineRedirects } from "./src/app/unreal-engine/redirects.mjs";
+const unrealEngineRedirects = {
+  "/unreal/:path*": "/unreal-engine/:path*",
+  "/unreal-engine/cpp/wallet-handle": "/unreal-engine/cpp/wallet-handles",
+  "/unreal-engine/blueprints/private-key-wallet":
+    "unreal-engine/blueprints/in-app-wallet",
+};
 
 const reactRedirects = {
   "/react": "/react/v4",
@@ -981,6 +986,20 @@ const v5RestructuredRedirects = {
   "/typescript/v5/react-native/:path*": "/react-native/v5/:path*",
 };
 
+const v4ToV5Redirects = {
+  "/typescript/v4": "/typescript/v5",
+  "/typescript/v4/:path*": "/typescript/v5",
+  "/react/v4": "/react/v5",
+  "/react/v4/:path*": "/react/v5",
+  "/react-native/v0": "/react-native/v5",
+  "/react-native/v0/:path*": "/react-native/v5",
+  "/wallet-sdk/:path*": "/connect",
+  "/storage-sdk/v2": "/typescript/v5/storage",
+  "/storage-sdk/v2/:path*": "/typescript/v5/storage",
+  "/unity/v4": "/unity/v5",
+  "/unity/v4/:path*": "/unity/v5",
+};
+
 /**
  * @type {import('next').NextConfig['redirects']}
  */
@@ -999,18 +1018,7 @@ export const redirects = async () => {
     ...createRedirects(otherRedirects),
     ...createRedirects(v5RestructuredRedirects),
     ...createRedirects(unrealEngineRedirects),
-    // references docs
-    latestReference("react", "v4"),
-    latestReference("react-native", "v0"),
-    latestReference("typescript", "v5"),
-    latestReference("wallets", "v2"),
-    latestReference("storage", "v2"),
-    // sdk docs
-    latestSDK("react", "v4"),
-    latestSDK("react-native", "v0"),
-    latestSDK("typescript", "v5"),
-    latestSDK("wallet-sdk", "v2"),
-    latestSDK("storage-sdk", "v2"),
+    ...createRedirects(v4ToV5Redirects),
   ];
 };
 
@@ -1026,31 +1034,3 @@ function createRedirects(linkMap, permanent = true) {
   }
   return redirects;
 }
-
-/**
- *
- * @param {string} pkg
- * @param {string} latestVersion
- * @returns
- */
-function latestReference(pkg, latestVersion) {
-  return {
-    source: `/references/${pkg}/latest/:path*`,
-    destination: `/references/${pkg}/${latestVersion}/:path*`,
-    permanent: false,
-  };
-}
-
-/**
- *
- * @param {string} pkg
- * @param {string} latestVersion
- * @returns
- */
-function latestSDK(pkg, latestVersion) {
-  return {
-    source: `/${pkg}/latest/:path*`,
-    destination: `/${pkg}/${latestVersion}/:path*`,
-    permanent: false,
-  };
-}
@@ -19,5 +19,3 @@ export const ignoreHeadings = new Set(
     "example",
   ].map((t) => t.toLowerCase()),
 );
-
-export const minimumParagraphlength = 20;
@@ -3,7 +3,7 @@ import path from "node:path";
 import FlexSearch from "flexsearch";
 import type { PageData, PageTitleIndex, SectionIndex } from "../types";
 
-export type Indexes = {
+type Indexes = {
   sectionIndex: SectionIndex;
   websiteData: PageData[];
   pageTitleIndex: PageTitleIndex;

@@ -1,7 +1,7 @@
 import type { PostsOrPages } from "@tryghost/content-api";
 import "./[slug]/styles.css";
 
-export const GHOST_THIRDWEB_BLOG_KEY = "49c62b5137df1c17ab6b9e46e3";
+const GHOST_THIRDWEB_BLOG_KEY = "49c62b5137df1c17ab6b9e46e3";
 
 export async function fetchChangeLogs() {
   const queryParamsString = Object.entries({

@@ -72,6 +72,7 @@ async function PageContent() {
               <div>
                 <Heading
                   level={2}
+                  // eslint-disable-next-line tailwindcss/no-custom-classname
                   className="changelog-title"
                   id={slugger.slug(post.title || "")}
                   anchorClassName="[&>a]:hidden m-0 border-b pb-5 mb-5"

@@ -16,16 +16,6 @@ npx thirdweb install <projectpath> [options]
 
 This command will automatically detect the type of project you are working on and install or update the appropriate thirdweb dependencies.
 
-**Dependencies installed:**
-
-- **JS/TS**
-  - **Smart contract projects**: [`@thirdweb/contracts`](/typescript/latest)
-  - **App projects:**
-    - **React**: [`@thirdweb/react`](/react/latest), [`@thirdweb/sdk`](/typescript/latest) and [`ethers` v5](https://docs.ethers.org/v5/)
-    - **React Native**: [`@thirdweb/react-native`](/react-native/latest), [`@thirdweb/react-native-compat`](/react-native/latest) and [`ethers` v5](https://docs.ethers.org/v5/)
-    - **Other**: [`@thirdweb/sdk`](/typescript/latest) and [`ethers` v5](https://docs.ethers.org/v5/)
-
-If any thirdweb package _(or Ethers)_ is already installed, they are updated to the latest compatible version.
 
 ## Options
 

@@ -183,7 +183,7 @@ string address = await sdk.wallet.Connect(connection);
 </Step>
 <Step title="Executing Transactions with Smart Accounts">
 
-Once setup, you can use the Connect [TypeScript](/typescript/latest), [React](/react/latest) and [Unity SDKs](/unity) to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.
+Once setup, you can use the Connect [TypeScript](/typescript/v5), [React](/react/v5) and [Unity SDKs](/unity) to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.
 
 <Tabs defaultValue="react">
 

@@ -14,7 +14,7 @@ export const metadata = createMetadata({
 
 # Using Account Abstraction in React
 
-By using the [wallet SDK](/references/wallets/latest) alongside the [React SDK](/react/latest), you can use smart accounts in your front-end applications easily.
+By using the [TypeScript SDK](/typescript/v5), you can use smart accounts in your front-end applications easily.
 
 <Steps>
 

@@ -14,7 +14,7 @@ export const metadata = createMetadata({
 
 # Using Account abstraction in Typescript
 
-By using the [wallet SDK](/references/wallets/latest) alongside the [TypeScript SDK](/typescript/latest), you can use smart accounts in your applications easily.
+By using the [TypeScript SDK](/typescript/v5), you can use smart accounts in your applications easily.
 
 ## Example Use Cases
 
@@ -80,15 +80,18 @@ console.log("Personal account address:", personalAccount.address);
 </Step>
 <Step title="Creating the Smart account">
 
-Now, let's create a smart account using the SmartWallet class from the `@thirdweb-dev/wallets` package.
-To do this, we need to pass a `SmartWalletConfig` object to the constructor. This object contains the following properties:
+Now, let's create a smart account using `smartWallet` from `thirdweb/wallets` package.
+To do this, we need to pass an object of type [SmartWalletOptions](/references/typescript/v5/SmartWalletOptions) to the function.
+
+Some of the important properties in this object are:
 
 - `chain`: the chain that the smart account will be deployed on.
 - `sponsorGas`: whether the smart account should have sponsored transactions or not.
 
-Once we have created the config and instantiated the `SmartWallet` class, we can connect the personal wallet to the smart account using the `connect` method.
-
+Once we have created the smart wallet interface, we can connect the personal wallet to the smart account using the `connect` method.
 ```typescript
+import { smartWallet } from "thirdweb/wallets";
+
 // Configure the smart wallet
 const wallet = smartWallet({
 	chain: sepolia,

@@ -1,6 +1,5 @@
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { createMetadata } from "@doc";
-import { V4SDKbanner } from "@/components/others/V4SDKBanner";
 
 export const metadata = createMetadata({
 	image: {

@@ -11,7 +11,6 @@ import {
 	TabsTrigger,
 } from "@doc";
 import { GraduationCap } from "lucide-react";
-import { V4SDKbanner } from "@/components/others/V4SDKBanner";
 
 export const metadata = createMetadata({
 	image: {

@@ -11,7 +11,6 @@ import {
 	TabsTrigger,
 } from "@doc";
 import { GraduationCap } from "lucide-react";
-import { V4SDKbanner } from "@/components/others/V4SDKBanner";
 
 export const metadata = createMetadata({
 	image: {

@@ -31,25 +31,27 @@ Engine makes it effortless for any developer to airdrop NFTs at scale. You spons
 
 ## Frontend: Add Connect Wallet and Claim buttons
 
-Use [`<ConnectWallet>`](/react/latest/components/ConnectWallet) to prompt the user for their wallet. The **Claim** button calls `POST /api/claim`.
+Use [`ConnectButton`](/references/typescript/v5/ConnectButton) component to prompt the user for their wallet. The **Claim** button calls `POST /api/claim`.
 
 ```tsx
+import { useActiveAccount } from "thirdweb/react";
 function ClaimPage() {
-	const userWalletAddress = useAddress();
+	const account = useActiveAccount();
+	const address = account?.address;
 
 	const onClick = async () => {
 		await fetch("/api/claim", {
 			method: "POST",
-			body: JSON.stringify({ userWalletAddress }),
+			body: JSON.stringify({ address }),
 		});
-		alert(`🎉 A reward has been sent to your wallet: ${userWalletAddress}`);
+		alert(`🎉 A reward has been sent to your wallet: ${address}`);
 	};
 
 	return (
 		<main>
 			<h2>Thank you for being a superfan! ❤️</h2>
 			<ConnectWallet />
-			{userWalletAddress && <button onClick={onClick}>Claim my reward</button>}
+			{address && <button onClick={onClick}>Claim my reward</button>}
 		</main>
 	);
 }

@@ -33,12 +33,12 @@ The buyer receives the NFT without requiring wallet signatures or gas funds.
 
 ## Frontend: Add Connect Wallet and credit card form
 
-Use [`<ConnectWallet>`](/react/latest/components/ConnectWallet) to prompt the buyer for their wallet address. The buyer provides their credit card details and selects **Pay now** to send payment details directly to Stripe.
+Use [`<ConnectButton>`](/references/typescript/v5/ConnectButton) to prompt the buyer for their wallet address. The buyer provides their credit card details and selects **Pay now** to send payment details directly to Stripe.
 
 ```tsx
 function Home() {
 	return (
-		<ThirdwebProvider activeChain="<chain_id>" clientId="<thirdweb_client_id>">
+		<ThirdwebProvider>
 			<PurchasePage />
 		</ThirdwebProvider>
 	);

@@ -4,7 +4,7 @@ Composability refers to the ability for different protocols and smart contracts
 It allows for the creation of new products and services without having to build everything from scratch.
 
 Thirdweb is completely composable. Each product can be used independently or in combination with other products.
-For example, you can use the [SDKs](/typescript/latest) or [Dashboard](https://thirdweb.com/team) with **any** contract. Similarly, you can use the [Solidity SDK](/contracts/build/overview)
-without using the [Dashboard](https://thirdweb.com/team) or [TypeScript/JavaScript SDK](/typescript/latest).
+For example, you can use the [SDKs](/connect) or [Dashboard](https://thirdweb.com/team) with **any** contract. Similarly, you can use the [Solidity SDK](/contracts/build/overview)
+without using the [Dashboard](https://thirdweb.com/team) or [TypeScript/JavaScript SDK](/typescript/v5).
 
 So, if you already have your own workflow which works for you, you can pick and choose which products you want to use.
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ export const metadata = createMetadata({ @@
     # Using Account Abstraction in React
-    By using the [wallet SDK](/references/wallets/latest) alongside the [React SDK](/react/latest), you can use smart accounts in your front-end applications easily.
+    By using the [TypeScript SDK](/typescript/v5), you can use smart accounts in your front-end applications easily.
     <Steps>
@@ Expand Down @@