Migrate to v2

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

components/layout/top-bar.tsx

@@ -153,11 +153,13 @@ export default function Topbar() {
               alt="Nexus Elements"
               width={100}
               height={100}
+              loading="eager"
               className="w-[100px] h-[100px] dark:hidden block"
             />
             <Image
               src="/avail-logo-light.svg"
               alt="Nexus Elements"
+              loading="eager"
               width={100}
               height={100}
               className="w-[100px] h-[100px] hidden dark:block"

components/showcase/deposit-showcase.tsx

@@ -77,13 +77,13 @@ const DepositShowcase = () => {
     return {
       to: contractAddress,
       data: encoded,
-      gasPriceSelector: "medium",
+      gasPrice: "medium" as any, // v2: GasPriceSelector (was gasPriceSelector string in v1)
       tokenApproval: {
-        token: tokenAddress,
+        toTokenSymbol: "USDC", // v2: was token address
         amount,
         spender: contractAddress,
       },
-    };
+    } as any;
   };
 
   return (

components/showcase/showcase-wrapper.tsx

@@ -55,7 +55,7 @@ const ShowcaseWrapper = ({
   useEffect(() => {
     // Read from localStorage on client side only
     const storedNetwork = getItem(NETWORK_KEY);
-    setCurrentNetwork(storedNetwork ?? "mainnet");
+    setCurrentNetwork(storedNetwork ?? "testnet");
   }, []);
 
   const resolvedToggle =

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@avail-project/nexus-core": "1.2.0",
+    "@avail-project/nexus-sdk-v2": "github:availproject/nexus-sdk-v2#f4e99ab1d7e96c607d98fef3107f3945cdfbd92a",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -30,6 +31,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
     "@tanstack/react-query": "^5.90.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -38,11 +40,11 @@
     "fumadocs-core": "^16.0.10",
     "fumadocs-mdx": "^13.0.7",
     "lucide-react": "^0.487.0",
-    "next": "15.5.9",
+    "next": "16.2.2",
     "next-themes": "^0.4.6",
     "pino-pretty": "^13.1.2",
-    "react": "19.2.2",
-    "react-dom": "19.2.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "rehype-pretty-code": "^0.14.1",
     "shadcn": "2.9.3-canary.0",
     "shiki": "^1.22.0",
@@ -57,12 +59,12 @@
     "@eslint/eslintrc": "^3.3.1",
     "@tailwindcss/postcss": "^4.1.11",
     "@types/node": "^20.19.9",
-    "@types/react": "19.1.2",
-    "@types/react-dom": "19.1.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.1",
     "eslint": "^9.32.0",
-    "eslint-config-next": "15.3.1",
+    "eslint-config-next": "16.2.1",
     "stream-browserify": "^3.0.0",
     "tailwindcss": "^4.1.11",
     "ts-node": "^10.9.2",
@@ -71,8 +73,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@types/react": "19.1.2",
-      "@types/react-dom": "19.1.2"
+      "@types/react": "19.2.14",
+      "@types/react-dom": "19.2.3"
     }
   }
 }

pnpm-workspace.yaml

@@ -1,3 +1,5 @@
 onlyBuiltDependencies:
   - "@avail-project/ca-common"
   - "@avail-project/nexus-core"
+  - "@avail-project/nexus-sdk-v2"
+  - "@avail-project/nexus-types"

providers/Web3Provider.tsx

@@ -21,7 +21,7 @@ import {
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { Chain, defineChain } from "viem";
 import NexusProvider from "@/registry/nexus-elements/nexus/NexusProvider";
-import { type NexusNetwork } from "@avail-project/nexus-core";
+import { type NexusNetwork } from "@avail-project/nexus-sdk-v2";
 import { Suspense, useMemo, useState, useEffect } from "react";
 import { Skeleton } from "@/registry/nexus-elements/ui/skeleton";
 import { getItem, setItem } from "@/lib/local-storage";
@@ -130,7 +130,7 @@ const wagmiConfig = createConfig(defaultConfig);
 export const NETWORK_KEY = "nexus-elements-network-key";
 
 function NexusContainer({ children }: Readonly<{ children: React.ReactNode }>) {
-  const [network, setNetwork] = useState<NexusNetwork>("mainnet");
+  const [network, setNetwork] = useState<NexusNetwork>("testnet");
   const [isInitialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
@@ -144,16 +144,16 @@ function NexusContainer({ children }: Readonly<{ children: React.ReactNode }>) {
       setNetwork(storedNetwork);
     } else {
       // Set default to mainnet if not found or invalid
-      setNetwork("mainnet");
-      setItem(NETWORK_KEY, "mainnet");
+      setNetwork("testnet");
+      setItem(NETWORK_KEY, "testnet");
     }
 
     setIsInitialized(true);
   }, []);
 
   const nexusConfig = useMemo(
     () => ({ network: network, debug: true }),
-    [network]
+    [network],
   );
 
   // Don't render until we've initialized from localStorage

middleware.ts → proxy.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
-export function middleware(request: NextRequest) {
+export function proxy(request: NextRequest) {
   const response = NextResponse.next();
 
   // const csp = [

public/r/dialog.json

@@ -6,6 +6,7 @@
   "description": "UI primitive: Dialog",
   "dependencies": [
     "@radix-ui/react-dialog",
+    "@radix-ui/react-visually-hidden",
     "lucide-react"
   ],
   "registryDependencies": [
@@ -14,7 +15,7 @@
   "files": [
     {
       "path": "registry/nexus-elements/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  dismissible = true,\n  onInteractOutside,\n  onEscapeKeyDown,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n  dismissible?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className\n        )}\n        onInteractOutside={(event) => {\n          if (!dismissible) {\n            event.preventDefault()\n          }\n          onInteractOutside?.(event)\n        }}\n        onEscapeKeyDown={(event) => {\n          if (!dismissible) {\n            event.preventDefault()\n          }\n          onEscapeKeyDown?.(event)\n        }}\n        {...props}\n      >\n        {children}\n        {showCloseButton && dismissible && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  dismissible = true,\n  onInteractOutside,\n  onEscapeKeyDown,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n  dismissible?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        aria-describedby={undefined}\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className,\n        )}\n        onInteractOutside={(event) => {\n          if (!dismissible) {\n            event.preventDefault();\n          }\n          onInteractOutside?.(event);\n        }}\n        onEscapeKeyDown={(event) => {\n          if (!dismissible) {\n            event.preventDefault();\n          }\n          onEscapeKeyDown?.(event);\n        }}\n        {...props}\n      >\n        <VisuallyHidden>\n          <DialogPrimitive.Title>Deposit Dialog</DialogPrimitive.Title>\n        </VisuallyHidden>\n        {children}\n        {showCloseButton && dismissible && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n",
       "type": "registry:component",
       "target": "components/ui/dialog.tsx"
     }