Version Packages (#4263)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/CI.yml

@@ -19,7 +19,21 @@ env:
   CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
 jobs:
+  optimize_ci:
+    runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check_skip.outputs.skip }}
+    steps:
+      - name: Optimize CI
+        id: check_skip
+        uses: withgraphite/graphite-ci-action@main
+        with:
+          graphite_token: ${{ secrets.GRAPHITE_OMTIMIZE_TOKEN }}
+  
+
   build:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     runs-on: ubuntu-latest
     name: Build Packages
     steps:
@@ -33,6 +47,8 @@ jobs:
         run: pnpm build:packages
 
   lint:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Lint Packages
     runs-on: ubuntu-latest
@@ -51,6 +67,8 @@ jobs:
       - run: pnpm lint
 
   test:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Unit Tests
     runs-on: ubuntu-latest
@@ -77,6 +95,8 @@ jobs:
           verbose: true
 
   e2e:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: E2E Tests
     runs-on: ubuntu-latest
@@ -142,35 +162,11 @@ jobs:
             echo "Bundling failed"
             exit 1
           fi
-      
-
-  benchmark:
-    # cannot run benchmarks on merge group
-    if: github.event_name != 'merge_group'
-    timeout-minutes: 15
-    name: "Benchmarks"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Set up foundry
-        uses: foundry-rs/foundry-toolchain@v1
-        with:
-          cache: false
-
-      - name: Run benchmarks
-        uses: CodSpeedHQ/action@v3
-        with:
-          token: ${{ secrets.CODSPEED_TOKEN }}
-          run: "pnpm bench"
 
   size:
+    needs: optimize_ci
     # only run on pull requests
-    if: github.event_name == 'pull_request'
+    if:  github.event_name == 'pull_request' && needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: "Size"
     runs-on: ubuntu-latest

.github/workflows/CI_legacy.yml

@@ -27,7 +27,20 @@ env:
   CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
 jobs:
+  optimize_ci:
+    runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check_skip.outputs.skip }}
+    steps:
+      - name: Optimize CI
+        id: check_skip
+        uses: withgraphite/graphite-ci-action@main
+        with:
+          graphite_token: ${{ secrets.GRAPHITE_OMTIMIZE_TOKEN }}
+
   build:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     runs-on: ubuntu-latest
     name: Build Packages
     steps:
@@ -41,6 +54,8 @@ jobs:
         run: pnpm build:legacy_packages
 
   lint:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Lint Packages
     runs-on: ubuntu-latest
@@ -54,6 +69,8 @@ jobs:
       - run: pnpm lint:legacy
 
   test:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Unit Tests
     runs-on: ubuntu-latest
@@ -74,6 +91,8 @@ jobs:
           verbose: true
 
   e2e:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: E2E Tests
     runs-on: ubuntu-latest

.github/workflows/release-artifacts.yml

@@ -1,75 +0,0 @@
-# On the Version Packages branch
-# Generate and Commit the Typedoc JSON files and the Snippets JSON files
-
-name: Commit Release Artifacts
-
-on:
-  push:
-    branches:
-      - changeset-release/main
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  # cancel any previous runs if they were started before this one
-  cancel-in-progress: true
-
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
-
-jobs:
-  release-artifacts:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v4
-
-      # bun setup is required, because pnpm typdoc will run pnpm build and some packages uses bun for build
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.35
-
-      - name: Install
-        uses: ./.github/composite-actions/install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Typedoc
-        run: pnpm typedoc
-
-      - name: Generate Docs
-        run: |
-          cd legacy_packages/sdk
-          pnpm generate-docs
-          cd ../react-core
-          pnpm generate-docs
-          cd ../react
-          pnpm generate-docs
-          cd ../..
-
-      - name: Generate Snippets
-        run: pnpm generate-snippets
-
-      - name: Commit changes
-        run: |
-          git config --local user.email "[email protected]"
-          git config --local user.name "GitHub Action"
-          git status
-          git add legacy_packages/react/typedoc/documentation.json.gz
-          git add legacy_packages/react-core/typedoc/documentation.json.gz
-          git add legacy_packages/react-native/typedoc/documentation.json.gz
-          git add legacy_packages/sdk/typedoc/documentation.json.gz
-          git add legacy_packages/storage/typedoc/documentation.json.gz
-          git add legacy_packages/wallets/typedoc/documentation.json.gz
-          git add packages/thirdweb/typedoc/documentation.json.gz
-          git add snippets/feature_snippets_react.json
-          git add snippets/feature_snippets_sdk.json
-          git add snippets/snippets.json
-          git commit -m "Commit Release Artifacts [skip ci]"
-          git push
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -26,3 +26,10 @@ codecov
 
 # Remove sitemap files (generated at build time)
 sitemap*.xml
+
+# typedoc
+legacy_packages/*/typedoc/*
+packages/*/typedoc/*
+
+*storybook.log
+storybook-static

.vscode/settings.json

@@ -18,5 +18,8 @@
   },
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

apps/dashboard/.env.example

@@ -40,6 +40,9 @@ NEXT_PUBLIC_STRIPE_KEY=
 
 NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID=
 
+# Needed for contract analytics / blockchain data information
+CHAINSAW_API_KEY=
+
 #
 # Private (server)
 #

apps/dashboard/.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:@next/next/recommended",
     "plugin:promise/recommended",
+    "plugin:storybook/recommended"
   ],
   rules: {
     "react-compiler/react-compiler": "error",
@@ -15,6 +16,21 @@ module.exports = {
         message:
           'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
       },
+      {
+        selector: "CallExpression[callee.name='defineChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='defineDashboardChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='mapV4ChainToV5Chain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
     ],
     "no-restricted-imports": [
       "error",
@@ -65,6 +81,12 @@ module.exports = {
             message:
               "Import from `@chakra-ui/react` instead of `@chakra-ui/menu`.",
           },
+          {
+            name: "next/navigation",
+            importNames: ["useRouter"],
+            message:
+              'Use `import { useDashboardRouter } from "@/lib/DashboardRouter";` instead',
+          },
         ],
       },
     ],

apps/dashboard/.storybook/main.ts

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+import { dirname, join } from "node:path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+  staticDirs: ["../public"],
+};
+export default config;

apps/dashboard/.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import type { Preview } from "@storybook/react";
+import "@/styles/globals.css";
+import { Inter as interFont } from "next/font/google";
+// biome-ignore lint/correctness/noUnusedImports: <explanation>
+import React from "react";
+import { cn } from "../src/@/lib/utils";
+
+// Note: Wrapping the Stoy with AppRouterProviders makes the storybook server time SUPER SLOW
+// so let's just not have it there - all stories should be independent from context anyway and just rely on props
+
+const fontSans = interFont({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => {
+      return (
+        <div className={cn("font-sans antialiased", fontSans.variable)}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default preview;

apps/dashboard/next.config.js

@@ -5,8 +5,8 @@ const ContentSecurityPolicy = `
   img-src * data: blob:;
   media-src * data: blob:;
   object-src 'none';
-  style-src 'self' 'unsafe-inline';
-  font-src 'self';
+  style-src 'self' 'unsafe-inline' https://vercel.live;
+  font-src 'self' https://vercel.live https://assets.vercel.com;
   frame-src * data:;
   script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com pg.paper.xyz portal.usecontext.io;
   connect-src * data: blob:;

apps/dashboard/package.json

@@ -18,7 +18,9 @@
     "build:analyze": "ANALYZE=true pnpm run build",
     "knip": "knip",
     "playwright": "playwright test",
-    "update-checkly": "npx checkly deploy"
+    "update-checkly": "npx checkly deploy",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
@@ -27,7 +29,7 @@
     "@coinbase/onchainkit": "^0.14.2",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@hookform/resolvers": "^3.6.0",
+    "@hookform/resolvers": "^3.9.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -40,23 +42,20 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
     "@react-icons/all-files": "^4.1.0",
-    "@sentry/nextjs": "^8.8.0",
-    "@stripe/react-stripe-js": "^2.7.2",
+    "@sentry/nextjs": "^8.26.0",
+    "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^3.5.0",
-    "@tanstack/query-async-storage-persister": "^4.36.1",
     "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-persist-client": "^4.36.1",
     "@tanstack/react-table": "^8.17.3",
     "@thirdweb-dev/react": "workspace:*",
-    "@thirdweb-dev/react-core": "workspace:*",
     "@thirdweb-dev/sdk": "workspace:*",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@thirdweb-dev/storage": "workspace:*",
-    "@thirdweb-dev/wallets": "workspace:*",
     "@vercel/og": "^0.6.2",
     "abitype": "1.0.5",
     "chakra-react-select": "^4.7.6",
@@ -69,7 +68,6 @@
     "flat": "^6.0.1",
     "framer-motion": "^11.2.12",
     "fuse.js": "7.0.0",
-    "idb-keyval": "^6.2.1",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
@@ -83,13 +81,11 @@
     "pluralize": "^8.0.0",
     "posthog-js": "1.128.3",
     "posthog-js-opensource": "npm:[email protected]",
-    "prettier": "^3.3.2",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.3",
     "react": "18.3.1",
     "react-children-utilities": "^2.10.0",
-    "react-confetti": "^6.1.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
@@ -107,7 +103,7 @@
     "sonner": "^1.5.0",
     "spdx-correct": "^3.2.0",
     "swagger-ui-react": "^5.17.14",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "workspace:*",
     "tiny-invariant": "^1.3.3",
@@ -118,9 +114,18 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
+    "@chromatic-com/storybook": "^1.5.0",
     "@next/bundle-analyzer": "^14.2.4",
     "@next/eslint-plugin-next": "^14.2.4",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "1.44.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
@@ -135,21 +140,17 @@
     "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.19",
     "checkly": "^4.7.0",
-    "dotenv": "^16.4.5",
     "eslint": "8.57.0",
     "eslint-config-biome": "^1.7.3",
-    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-inclusive-language": "^2.2.1",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
     "knip": "^5.23.1",
     "next-sitemap": "^4.2.3",
     "next-unused": "^0.0.6",
-    "tailwindcss": "^3.4.4",
+    "storybook": "^8.2.9",
+    "tailwindcss": "^3.4.10",
     "typescript": "5.5.4"
   },
   "next-unused": {

apps/dashboard/public/.well-known/apple-app-site-association

@@ -0,0 +1,30 @@
+{
+  "applinks": {
+    "apps": ["XYHGSFAMHX.com.thirdweb.demo"],
+    "details": [
+      {
+        "appIDs": ["XYHGSFAMHX.com.thirdweb.demo"],
+        "components": [
+          {
+            "#": "no_universal_links",
+            "exclude": true,
+            "comment": "Matches any URL with a fragment that equals no_universal_links and instructs the system not to open it as a universal link."
+          },
+          {
+            "/": "/mobile-wallet-protocol",
+            "comment": "Matches any URL with a path that starts with /mobile-wallet-protocol for coinbase wallet mobile redirects."
+          },
+          {
+            "/": "/dashboard/*",
+            "exclude": true,
+            "comment": "no universal link for dashboard"
+          }
+        ]
+      }
+    ]
+  },
+  "webcredentials": {
+    "apps": ["XYHGSFAMHX.com.thirdweb.demo"]
+  },
+  "appclips": {}
+}

apps/dashboard/public/.well-known/assetlinks.json

@@ -0,0 +1,15 @@
+[
+  {
+    "relation": [
+      "delegate_permission/common.handle_all_urls",
+      "delegate_permission/common.get_login_creds"
+    ],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.thirdweb.demo",
+      "sha256_cert_fingerprints": [
+        "40:EB:0D:96:57:F3:D8:1F:BA:87:B8:E4:26:E0:3A:DB:C8:35:96:A8:A2:B2:55:F0:B1:64:F1:39:F8:6F:7E:EB"
+      ]
+    }
+  }
+]

apps/dashboard/redirects.js

@@ -119,11 +119,6 @@ function redirects() {
       destination: "/template/erc721",
       permanent: false,
     },
-    {
-      source: "/abuse",
-      destination: "https://forms.gle/v9UJtHbVw8fXypcd7",
-      permanent: false,
-    },
     {
       source: "/create-api-key",
       destination: "/dashboard/settings/api-keys",
@@ -136,12 +131,17 @@ function redirects() {
     },
     {
       source: "/dashboard/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "/dashboard/connect/in-app-wallets",
+      permanent: false,
+    },
+    {
+      source: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
       source: "/dashboard/wallet",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -166,7 +166,7 @@ function redirects() {
     },
     {
       source: "/dashboard/wallets",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -186,7 +186,7 @@ function redirects() {
     },
     {
       source: "/dashboard/wallets/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -282,6 +282,13 @@ function redirects() {
         "https://support.thirdweb.com/troubleshooting-errors/7Y1BqKNvtLdBv5fZkRZZB3/issue-linking-device-on-the-authorization-page-via-thirdweb-cli/cn9LRA3ax7XCP6uxwRYdvx",
       permanent: false,
     },
+
+    // temporary redirect gas -> explore page
+    {
+      source: "/gas",
+      destination: "/explore",
+      permanent: false,
+    },
   ];
 }
 

apps/dashboard/src/@/components/blocks/BurgerMenuButton.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { MenuIcon } from "lucide-react";
+import { useState } from "react";
+import { NavLink } from "../ui/NavLink";
+
+export function BurgerMenuButton(props: {
+  links?: { href: string; label: React.ReactNode }[];
+  footer?: React.ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button size="icon" variant="outline">
+          <MenuIcon strokeWidth={1} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className="p-6 rounded-xl"
+        dialogCloseClassName="hidden"
+        onClick={(e) => {
+          if (e.target instanceof HTMLAnchorElement) {
+            setIsOpen(false);
+          }
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {props.links?.map((link) => {
+            return (
+              <Button size="sm" variant="ghost" asChild key={link.href}>
+                <NavLink
+                  href={link.href}
+                  className="!text-left justify-start flex gap-2 h-auto py-3"
+                  activeClassName="bg-accent"
+                >
+                  {link.label}
+                </NavLink>
+              </Button>
+            );
+          })}
+        </div>
+        {props.footer}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/dashboard/src/@/components/blocks/Sidebar.tsx

@@ -0,0 +1,33 @@
+import type React from "react";
+import { cn } from "../../lib/utils";
+import { NavLink } from "../ui/NavLink";
+
+export type SidebarContentProps = {
+  header?: React.ReactNode;
+  links?: { href: string; label: React.ReactNode }[];
+  className?: string;
+};
+
+export function Sidebar(props: SidebarContentProps) {
+  return (
+    <aside
+      className={cn("w-[240px] flex-shrink-0 hidden lg:block", props.className)}
+    >
+      <div className="sticky top-0 pt-8">
+        {props.header}
+        <div className="flex flex-col border-l-2 border-border">
+          {props.links?.map((link) => (
+            <NavLink
+              key={link.href}
+              href={link.href}
+              className="text-sm py-1.5 pl-4 text-muted-foreground hover:text-foreground border-l-2 ml-[-2px] border-transparent hover:border-foreground transition-colors"
+              activeClassName="text-foreground border-link-foreground"
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
 import Link from "next/link";
 import {
   SiDiscord,
@@ -11,7 +12,6 @@ import {
   SiX,
   SiYoutube,
 } from "react-icons/si";
-import { ThirdwebMiniLogo } from "../../../app/components/ThirdwebMiniLogo";
 
 type AppFooterProps = {
   className?: string;

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useMemo } from "react";
+
+export type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
+  // metadata
+  title: string;
+  description?: string;
+  // chart config
+  config: TConfig;
+  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
+  showLegend?: boolean;
+
+  // chart className
+  chartClassName?: string;
+};
+
+export function ThirdwebAreaChart<TConfig extends ChartConfig>(
+  props: ThirdwebAreaChartProps<TConfig>,
+) {
+  const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        {props.description && (
+          <CardDescription>{props.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={props.config} className={props.chartClassName}>
+          <AreaChart
+            accessibilityLayer
+            data={props.data}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => new Date(value).toLocaleDateString()}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <defs>
+              {configKeys.map((key) => (
+                <linearGradient
+                  key={key}
+                  id={`fill_${key}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset="5%"
+                    stopColor={`var(--color-${key})`}
+                    stopOpacity={0.8}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={`var(--color-${key})`}
+                    stopOpacity={0.1}
+                  />
+                </linearGradient>
+              ))}
+            </defs>
+            {configKeys.map((key) => (
+              <Area
+                key={key}
+                dataKey={key}
+                type="natural"
+                fill={`url(#fill_${key})`}
+                fillOpacity={0.4}
+                stroke={`var(--color-${key})`}
+                stackId="a"
+              />
+            ))}
+
+            {props.showLegend && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useMemo } from "react";
+
+export type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
+  // metadata
+  title: string;
+  description?: string;
+  // chart config
+  config: TConfig;
+  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
+  showLegend?: boolean;
+  variant?: "stacked" | "grouped";
+  // chart className
+  chartClassName?: string;
+};
+
+export function ThirdwebBarChart<TConfig extends ChartConfig>(
+  props: ThirdwebBarChartProps<TConfig>,
+) {
+  const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
+  // if there are more than 4 keys then we should stack them by default
+  const variant =
+    props.variant || configKeys.length > 4 ? "stacked" : "grouped";
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        {props.description && (
+          <CardDescription>{props.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={props.config} className={props.chartClassName}>
+          <BarChart accessibilityLayer data={props.data}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={10}
+              tickFormatter={(value) => new Date(value).toLocaleDateString()}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            {props.showLegend && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+            {configKeys.map((key, idx) => (
+              <Bar
+                key={key}
+                dataKey={key}
+                // if stacked then they should all be the same stackId
+                // if grouped then they should all be unique stackId (so the key works great)
+                stackId={variant === "stacked" ? "a" : key}
+                fill={`var(--color-${key})`}
+                // if stacked then we need to figure out the radius based on the index in the array
+                // if grouped then we can just use the same radius for all
+                radius={
+                  variant === "stacked"
+                    ? idx === 0
+                      ? [0, 0, 4, 4]
+                      : idx === configKeys.length - 1
+                        ? [4, 4, 0, 0]
+                        : [0, 0, 0, 0]
+                    : [4, 4, 4, 4]
+                }
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

apps/dashboard/src/@/components/color-mode-toggle.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import * as React from "react";
-import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { Skeleton } from "./ui/skeleton";
 
 export function ColorModeToggle() {

apps/dashboard/src/@/components/ui/CodeBlock.tsx

@@ -0,0 +1,46 @@
+import { Highlight } from "prism-react-renderer";
+import { cn } from "../../lib/utils";
+import { CopyButton } from "./CopyButton";
+import { Card } from "./card";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+  canCopy?: boolean;
+}
+
+export const CodeBlock = ({
+  code,
+  language = "sh",
+  canCopy = true,
+}: CodeBlockProps) => {
+  return (
+    <Highlight code={code} language={language}>
+      {({ className, tokens, getLineProps, getTokenProps }) => (
+        <Card className={className}>
+          {canCopy && (
+            <CopyButton text={code} className="float-right p-2 m-2" />
+          )}
+
+          <div
+            className={cn(
+              "block font-mono text-sm whitespace-pre-wrap p-4 overflow-auto",
+              className,
+            )}
+          >
+            {tokens.map((line, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+              <div {...getLineProps({ line, key: i })} key={i}>
+                {line.map((token, key) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+                  <span {...getTokenProps({ token, key })} key={key} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </Highlight>
+  );
+};

apps/dashboard/src/@/components/ui/ConfirmationDialog.tsx

@@ -10,9 +10,9 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import type { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import type { VariantProps } from "class-variance-authority";
 import type React from "react";
-import { cn } from "../../lib/utils";
 
 export interface ConfirmationDialogProps
   extends VariantProps<typeof buttonVariants> {

apps/dashboard/src/@/components/ui/CopyAddressButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 import { CopyTextButton } from "./CopyTextButton";
 
 export function CopyAddressButton(props: {

apps/dashboard/src/@/components/ui/CopyButton.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 

apps/dashboard/src/@/components/ui/CopyTextButton.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
@@ -23,10 +23,15 @@ export function CopyTextButton(props: {
 }) {
   const [isCopied, setIsCopied] = useState(false);
   const copyButton = isCopied ? (
-    <CheckIcon className={cn("size-3 text-green-500", props.iconClassName)} />
+    <CheckIcon
+      className={cn("size-3 text-green-500 shrink-0", props.iconClassName)}
+    />
   ) : (
     <CopyIcon
-      className={cn("size-3 text-muted-foreground", props.iconClassName)}
+      className={cn(
+        "size-3 text-muted-foreground shrink-0",
+        props.iconClassName,
+      )}
     />
   );
 
@@ -47,13 +52,13 @@ export function CopyTextButton(props: {
       >
         {props.copyIconPosition === "right" ? (
           <>
-            {props.textToShow}
+            <span className="truncate min-w-0"> {props.textToShow} </span>
             {copyButton}
           </>
         ) : (
           <>
             {copyButton}
-            {props.textToShow}
+            <span className="truncate min-w-0"> {props.textToShow} </span>
           </>
         )}
       </Button>

apps/dashboard/src/@/components/ui/DynamicHeight.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import type React from "react";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 export function DynamicHeight(props: {
   children: React.ReactNode;
@@ -33,11 +34,11 @@ export function DynamicHeight(props: {
   );
 }
 
-export function useHeightObserver() {
+function useHeightObserver() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const element = elementRef.current;
     if (!element) {
       return;

apps/dashboard/src/@/components/ui/List/List.module.css

@@ -0,0 +1,25 @@
+.unorderedList,
+.orderedList {
+  @apply pl-5 leading-relaxed list-none text-secondary-foreground;
+}
+
+.unorderedList > li {
+  @apply pb-1 pl-2 list-disc;
+}
+
+.orderedList > li {
+  @apply pb-1 pl-2 list-decimal;
+}
+
+.unorderedList > li::marker {
+  @apply text-muted-foreground !m-0 text-left;
+}
+
+.orderedList > li::marker {
+  @apply text-muted-foreground text-left;
+}
+
+.unorderedList > li:hover::marker,
+.orderedList > li:hover::marker {
+  @apply text-foreground;
+}

apps/dashboard/src/@/components/ui/List/List.tsx

@@ -0,0 +1,9 @@
+import styles from "./List.module.css";
+
+export function UnorderedList(props: { children?: React.ReactNode }) {
+  return <ul className={styles.unorderedList}>{props.children}</ul>;
+}
+
+export function OrderedList(props: { children?: React.ReactNode }) {
+  return <ul className={styles.orderedList}>{props.children}</ul>;
+}

apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { cn } from "@/lib/utils";
-import { useLayoutEffect, useRef } from "react";
+import { useRef } from "react";
 import styles from "./ScrollShadow.module.css";
 
 export function ScrollShadow(props: {
@@ -17,7 +18,7 @@ export function ScrollShadow(props: {
   const shadowRightEl = useRef<HTMLDivElement>(null);
   const wrapperEl = useRef<HTMLDivElement>(null);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const content = scrollableEl.current;
     const shadowTop = shadowTopEl.current;
     const shadowBottom = shadowBottomEl.current;

apps/dashboard/src/@/components/ui/alert.tsx

@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "bg-destructive/10 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
+          "bg-destructive/30 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
         info: "bg-primary/10 border-primary/50 dark:border-primary [&>svg]:text-primary",
         warning:
           "bg-warning/10 border-warning/50 dark:border-warning [&>svg]:text-warning",

apps/dashboard/src/@/components/ui/button.tsx

@@ -44,10 +44,13 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    const btnOnlyProps =
+      Comp === "button" ? { type: "button" as const } : undefined;
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        {...btnOnlyProps}
         {...props}
       />
     );

apps/dashboard/src/@/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}

apps/dashboard/src/@/components/ui/chart.tsx

@@ -283,7 +283,7 @@ const ChartLegendContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "flex items-center justify-center gap-4",
+          "flex items-center justify-center gap-4 overflow-x-auto",
           verticalAlign === "top" ? "pb-3" : "pt-3",
           className,
         )}

apps/dashboard/src/@/components/ui/checkbox.tsx

@@ -36,7 +36,7 @@ export function CheckboxWithLabel(props: {
   return (
     <label
       className={cn(
-        "flex gap-2 items-center text-secondary-foreground text-sm cursor-pointer select-none",
+        "flex gap-2 items-start text-secondary-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
         props.className,
       )}
     >

apps/dashboard/src/@/components/ui/dialog.tsx

@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-lg border-border",
+        "fixed grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-t-xl md:rounded-lg border-border",
         // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
         "bottom-0 left-0 right-0",
         "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",

apps/dashboard/src/@/components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}

apps/dashboard/src/@/components/ui/select.tsx

@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,

apps/dashboard/src/@/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -1,6 +1,9 @@
+"use client";
+
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { cn } from "../../lib/utils";
+import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
 
@@ -126,7 +129,7 @@ function useUnderline<El extends HTMLElement>() {
     setActiveTabEl(el);
   }, []);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (activeTabEl && containerRef.current && lineRef.current) {
       const containerRect = containerRef.current.getBoundingClientRect();
       const lineEl = lineRef.current;

apps/dashboard/src/@/components/ui/tooltip.tsx

@@ -31,7 +31,7 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 
 export function ToolTipLabel(props: {
   children: React.ReactNode;
-  label: string | undefined;
+  label: React.ReactNode;
   rightIcon?: React.ReactNode;
   leftIcon?: React.ReactNode;
 }) {
@@ -47,7 +47,7 @@ export function ToolTipLabel(props: {
         </TooltipTrigger>
         <TooltipContent
           sideOffset={10}
-          className="max-w-[300px] leading-relaxed"
+          className="max-w-[400px] leading-relaxed whitespace-normal"
         >
           <div className="p-2 text-sm flex items-center gap-1.5">
             {props.leftIcon}

apps/dashboard/src/@/constants/auth.ts

@@ -1,4 +1,4 @@
-export const LOGGED_IN_ONLY_PATHS = [
+const LOGGED_IN_ONLY_PATHS = [
   // anything that _starts_ with /dashboard is logged in only
   "/dashboard",
   // anything that _starts_ with /cli is logged in only
@@ -6,3 +6,7 @@ export const LOGGED_IN_ONLY_PATHS = [
   "/support",
   // TODO: add any other logged in only paths here
 ];
+
+export function isLoginRequired(pathname: string) {
+  return LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path));
+}

apps/dashboard/src/@/constants/client.ts

@@ -1,11 +1,30 @@
+import {
+  DASHBOARD_THIRDWEB_CLIENT_ID,
+  DASHBOARD_THIRDWEB_SECRET_KEY,
+  IPFS_GATEWAY_URL,
+} from "@/constants/env";
 import { createThirdwebClient } from "thirdweb";
-import { DASHBOARD_THIRDWEB_CLIENT_ID, IPFS_GATEWAY_URL } from "./env";
 
-export const thirdwebClient = createThirdwebClient({
-  clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
-  config: {
-    storage: {
-      gatewayUrl: IPFS_GATEWAY_URL,
-    },
-  },
-});
+export const thirdwebClient = createThirdwebClient(
+  DASHBOARD_THIRDWEB_SECRET_KEY
+    ? {
+        secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
+        config: {
+          storage: {
+            gatewayUrl: IPFS_GATEWAY_URL,
+          },
+        },
+      }
+    : {
+        clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
+        config: {
+          storage: {
+            gatewayUrl: IPFS_GATEWAY_URL,
+          },
+        },
+      },
+);
+
+/**
+ * DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
+ */

apps/dashboard/src/@/constants/env.ts

@@ -10,3 +10,9 @@ export const IPFS_GATEWAY_URL =
 
 export const THIRDWEB_ENGINE_FAUCET_WALLET =
   process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
+
+export const isProd =
+  (process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV) ===
+  "production";
+
+export const PROD_OR_DEV_URL = isProd ? "thirdweb.com" : "thirdweb-dev.com";

apps/dashboard/src/@/lib/DashboardRouter.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+// eslint-disable-next-line no-restricted-imports
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import {
+  Suspense,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { createStore } from "./reactive";
+
+// Using useDashboardRouter instead of useRouter gives us a nice progress bar on top of the page when navigating using router.push or router.replace
+
+// using a store instead of context to avoid triggering re-renders on root component
+export const LoadingRouteHref = createStore<string | undefined>(undefined);
+
+export function useDashboardRouter() {
+  const router = useRouter();
+  return useMemo(() => {
+    return {
+      ...router,
+      replace(href: string, options?: { scroll?: boolean }) {
+        LoadingRouteHref.setValue(href);
+        router.replace(href, options);
+      },
+      push(href: string, options?: { scroll?: boolean }) {
+        LoadingRouteHref.setValue(href);
+        router.push(href, options);
+      },
+    };
+  }, [router]);
+}
+
+function useRouterLoadingStatus() {
+  const loadingHref = useSyncExternalStore(
+    LoadingRouteHref.subscribe,
+    LoadingRouteHref.getValue,
+    LoadingRouteHref.getValue,
+  );
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const searchParamsStr = searchParams?.toString();
+
+  const routerHref = pathname + (searchParamsStr ? `?${searchParamsStr}` : "");
+  const isLoading = loadingHref && loadingHref !== routerHref;
+
+  // reset loading on route load
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!isLoading) {
+      LoadingRouteHref.setValue(undefined);
+    }
+  }, [isLoading]);
+
+  return isLoading;
+}
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+// Render this on root
+function DashboardRouterTopProgressBarInner() {
+  const isLoading = useRouterLoadingStatus();
+  const [progress, setProgress] = useState(0);
+
+  const progressStartedRef = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!isLoading) {
+      setProgress(0);
+      progressStartedRef.current = false;
+      return;
+    }
+
+    if (progressStartedRef.current) {
+      return;
+    }
+
+    let isMounted = true;
+
+    progressStartedRef.current = true;
+
+    async function updateProgressBar(progress: number, delay: number) {
+      if (!isMounted) {
+        if (!isLoading) {
+          setProgress(100);
+        }
+        return;
+      }
+
+      setProgress(progress);
+      await wait(delay);
+
+      // increase progress by 10% of the remaining progress
+      // increase the delay by 5% to slow down number of updates for slower progress
+      updateProgressBar(progress + (100 - progress) / 10, delay * 1.05);
+    }
+
+    async function startEffect() {
+      // if the loading state remains for atleast 500ms start the progress bar
+      await wait(500);
+      if (isMounted) {
+        updateProgressBar(0, 100);
+      }
+    }
+
+    startEffect();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isLoading]);
+
+  const width = isLoading ? progress : 100;
+  return (
+    <span
+      className="block fixed top-0 h-[2px] bg-blue-500"
+      style={{
+        opacity: isLoading ? "100" : "0",
+        width: `${width}%`,
+        transition: width === 0 ? "none" : "width 0.2s ease, opacity 0.3s ease",
+        zIndex: "100000000",
+        pointerEvents: "none",
+      }}
+    />
+  );
+}
+
+// need to wrap with suspense because of useSearchParams usage
+export function DashboardRouterTopProgressBar() {
+  return (
+    <Suspense fallback={null}>
+      <DashboardRouterTopProgressBarInner />
+    </Suspense>
+  );
+}

apps/dashboard/src/@/lib/reactive.ts

@@ -0,0 +1,47 @@
+export type Store<T> = {
+  getValue(): T;
+  setValue(newValue: T): void;
+  subscribe(listener: () => void): () => void;
+};
+
+/**
+ * Create a reactive value store
+ * @param initialValue - The initial value to store
+ * @example
+ * ```ts
+ * const store = createStore(0);
+ * ```
+ * @returns A store object
+ * @internal
+ */
+export function createStore<T>(initialValue: T): Store<T> {
+  type Listener = () => void;
+  const listeners = new Set<Listener>();
+
+  let value = initialValue;
+
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+
+  return {
+    getValue() {
+      return value;
+    },
+    setValue(newValue: T) {
+      if (newValue === value) {
+        return;
+      }
+      value = newValue;
+      notify();
+    },
+    subscribe(listener: Listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}

apps/dashboard/src/@/lib/shareLink.ts

@@ -0,0 +1,17 @@
+import { toast } from "sonner";
+
+// if browser supports sharing use native sharing - use that, else just copy to clipboard + show toast
+export async function shareLink(_data: ShareData) {
+  const data = { ..._data, url: _data.url || window.location.href };
+
+  if (
+    "canShare" in navigator &&
+    navigator.canShare &&
+    navigator.canShare(data)
+  ) {
+    await navigator.share(data);
+  } else {
+    await navigator.clipboard.writeText(data.url);
+    toast.info("URL copied to clipboard");
+  }
+}

apps/dashboard/src/@/lib/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

apps/dashboard/src/@/styles/globals.css

@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  :root,
+  [data-theme="light"] {
     /* bg - neutral  */
     --background: 0 0% 100%;
     --secondary: 0 0% 97%;
@@ -44,7 +45,8 @@
     --radius: 0.5rem;
   }
 
-  .dark {
+  .dark,
+  [data-theme="dark"] {
     /* bg - neutral  */
     --background: 0 0% 4.5%;
     --secondary: 0 0% 6.5%;
@@ -94,19 +96,22 @@
 /* shadcn charts */
 @layer base {
   :root {
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    /* below is ai generated based on the initial */
+    --chart-6: 200 65% 50%;
+    --chart-7: 120 70% 45%;
+    --chart-8: 45 75% 55%;
+    --chart-9: 260 60% 60%;
+    --chart-10: 0 70% 50%;
+    --chart-11: 180 60% 50%;
+    --chart-12: 100 65% 55%;
+    --chart-13: 360 70% 55%;
+    --chart-14: 240 65% 50%;
+    --chart-15: 80 60% 50%;
   }
 }
 

apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts

@@ -90,8 +90,10 @@ export const engineKeys = {
   health: (instance: string) =>
     [...engineKeys.all, instance, "health"] as const,
   latestVersion: () => [...engineKeys.all, "latestVersion"] as const,
-  metrics: (engineId: string) =>
-    [...engineKeys.all, engineId, "metrics"] as const,
+  systemMetrics: (engineId: string) =>
+    [...engineKeys.all, engineId, "systemMetrics"] as const,
+  queueMetrics: (engineId: string) =>
+    [...engineKeys.all, engineId, "queueMetrics"] as const,
 };
 
 export const contractKeys = {

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -3,20 +3,23 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { thirdwebClient } from "@/constants/client";
-import { useSupportedChains } from "@thirdweb-dev/react";
+import { getSDKTheme } from "app/components/sdk-component-theme";
+import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
+import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useSupportedChains } from "hooks/chains/configureChains";
 import {
   useAddRecentlyUsedChainId,
   useRecentlyUsedChains,
 } from "hooks/chains/recentlyUsedChains";
+import { useSetIsNetworkConfigModalOpen } from "hooks/networkConfigModal";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
-import { type Chain, defineChain } from "thirdweb";
+import type { Chain } from "thirdweb";
 import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
-import { getSDKTheme } from "../../../../app/components/sdk-component-theme";
 import { useFavoriteChains } from "../../hooks/useFavoriteChains";
 import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";
@@ -34,16 +37,16 @@ export const CustomConnectWallet = (props: {
   const t = theme === "light" ? "light" : "dark";
   const allv4Chains = useSupportedChains();
   const favChainsQuery = useFavoriteChains();
-
+  const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
   const allChains = useMemo(() => {
-    return allv4Chains.map((c) => defineChain(c));
+    return allv4Chains.map(mapV4ChainToV5Chain);
   }, [allv4Chains]);
 
   const chainSections = useMemo(() => {
     return [
       {
         label: "Favorites",
-        chains: favChainsQuery.data.map(defineChain),
+        chains: favChainsQuery.data.map(mapV4ChainToV5Chain),
       },
       {
         label: "Popular",
@@ -51,7 +54,7 @@ export const CustomConnectWallet = (props: {
       },
       {
         label: "Recent",
-        chains: recentChainsv4.map(defineChain),
+        chains: recentChainsv4.map(mapV4ChainToV5Chain),
       },
     ];
   }, [recentChainsv4, favChainsQuery.data]);
@@ -63,7 +66,7 @@ export const CustomConnectWallet = (props: {
   if (isLoading) {
     return (
       <>
-        <div className="w-[144px] h-[48px] bg-muted border rounded-lg flex items-center justify-center">
+        <div className="w-[144px] h-[48px] bg-muted border border-border rounded-lg flex items-center justify-center">
           <Spinner className="size-4" />
         </div>
         {/* need autoconnect here so that we actually connect */}
@@ -123,8 +126,10 @@ export const CustomConnectWallet = (props: {
           onSwitch(chain) {
             addRecentlyUsedChainId(chain.id);
           },
-          // TODO: bring this back when it works reliably
-          // renderChain: CustomChainRenderer,
+          renderChain: CustomChainRenderer,
+          onCustomClick: () => {
+            setIsNetworkConfigModalOpen(true);
+          },
         },
       }}
     />

apps/dashboard/src/@3rdweb-sdk/react/components/roles/admin-only.tsx

@@ -2,11 +2,11 @@ import {
   useIsAdmin,
   useIsAdminOrSelf,
 } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface AdminOnlyProps {
-  contract?: ValidContractInstance;
+  contract: ThirdwebContract;
   fallback?: JSX.Element;
 }
 
@@ -22,7 +22,9 @@ export const AdminOnly: ComponentWithChildren<AdminOnlyProps> = ({
   return <>{children}</>;
 };
 
-interface AdminOrSelfOnlyProps extends AdminOnlyProps {
+interface AdminOrSelfOnlyProps {
+  contract: ThirdwebContract;
+  fallback?: JSX.Element;
   /**
    * The address of the account to check against
    */

apps/dashboard/src/@3rdweb-sdk/react/hooks/useActivity.ts

@@ -1,56 +1,70 @@
-import { useContract, useContractEvents } from "@thirdweb-dev/react";
-import type { ContractEvent } from "@thirdweb-dev/sdk";
+import { type AbiEvent, formatAbiItem } from "abitype";
 import { useMemo } from "react";
+import {
+  type PreparedEvent,
+  type ThirdwebContract,
+  prepareEvent,
+} from "thirdweb";
+import { useContractEvents } from "thirdweb/react";
+import { useResolveContractAbi } from "./useResolveContractAbi";
 
-interface InternalTransaction {
-  transactionHash: ContractEvent["transaction"]["transactionHash"];
-  blockNumber: ContractEvent["transaction"]["blockNumber"];
-  events: ContractEvent[];
+export interface InternalTransaction {
+  transactionHash: string;
+  blockNumber: bigint;
+  events: Array<{
+    logIndex: number;
+    address: string;
+    eventName: string;
+    args: readonly unknown[] | Record<string, unknown>;
+  }>;
 }
 
-export function useActivity(contractAddress?: string, autoUpdate?: boolean) {
-  // const provider = useProvider();
-  const contractQuery = useContract(contractAddress);
+export function useActivity(contract: ThirdwebContract, autoUpdate?: boolean) {
+  const abiQuery = useResolveContractAbi(contract);
 
-  const eventsQuery = useContractEvents(contractQuery.contract, undefined, {
-    subscribe: autoUpdate,
-    queryFilter: {
-      fromBlock: -20000,
-    },
+  // Get all the PreprareEvents from the contract abis
+  const events: PreparedEvent<AbiEvent>[] = useMemo(() => {
+    const eventsItems = (abiQuery.data || []).filter((o) => o.type === "event");
+    const eventSignatures = eventsItems.map((event) => formatAbiItem(event));
+    return eventSignatures.map((signature) =>
+      prepareEvent({ signature: signature as `event ${string}` }),
+    );
+  }, [abiQuery.data]);
+
+  const eventsQuery = useContractEvents({
+    contract,
+    events,
+    blockRange: 20000,
+    watch: autoUpdate,
   });
 
   return useMemo(() => {
     if (!eventsQuery.data) {
       return [];
     }
-
     const obj = eventsQuery.data.slice(0, 100).reduce(
       (acc, curr) => {
-        if (acc[curr.transaction.transactionHash]) {
-          acc[curr.transaction.transactionHash].events.push(curr);
-          acc[curr.transaction.transactionHash].events.sort(
-            // biome-ignore lint/suspicious/noExplicitAny: FIXME
-            (a: any, b: any) => b.transaction.logIndex - a.transaction.logIndex,
+        if (acc[curr.transactionHash]) {
+          acc[curr.transactionHash].events.push(curr);
+          acc[curr.transactionHash].events.sort(
+            (a, b) => b.logIndex - a.logIndex,
           );
-          if (
-            acc[curr.transaction.transactionHash].blockNumber >
-            curr.transaction.blockNumber
-          ) {
-            acc[curr.transaction.transactionHash].blockNumber =
-              curr.transaction.blockNumber;
+          if (acc[curr.transactionHash].blockNumber > curr.blockNumber) {
+            acc[curr.transactionHash].blockNumber = curr.blockNumber;
           }
         } else {
-          acc[curr.transaction.transactionHash] = {
-            transactionHash: curr.transaction.transactionHash,
-            blockNumber: curr.transaction.blockNumber,
+          acc[curr.transactionHash] = {
+            transactionHash: curr.transactionHash,
+            blockNumber: curr.blockNumber,
             events: [curr],
           };
         }
-
         return acc;
       },
       {} as Record<string, InternalTransaction>,
     );
-    return Object.values(obj).sort((a, b) => b.blockNumber - a.blockNumber);
+    return Object.values(obj).sort((a, b) =>
+      a.blockNumber > b.blockNumber ? -1 : 1,
+    );
   }, [eventsQuery.data]);
 }

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -4,9 +4,9 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
+import { THIRDWEB_API_HOST } from "constants/urls";
 import type { ChainMetadata } from "thirdweb/chains";
 import invariant from "tiny-invariant";
-import { THIRDWEB_API_HOST } from "../../../constants/urls";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
 import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
@@ -73,7 +73,6 @@ export type Account = {
 interface UpdateAccountInput {
   name?: string;
   email?: string;
-  plan?: AccountPlan;
   linkWallet?: boolean;
   subscribeToUpdates?: boolean;
   onboardSkipped?: boolean;
@@ -271,9 +270,9 @@ interface UseAccountInput {
 export function useAccount({ refetchInterval }: UseAccountInput = {}) {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.me(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.me(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/me`, {
         method: "GET",
         headers: {
@@ -288,19 +287,17 @@ export function useAccount({ refetchInterval }: UseAccountInput = {}) {
 
       return json.data as Account;
     },
-    {
-      enabled: !!user?.address && isLoggedIn,
-      refetchInterval: refetchInterval ?? false,
-    },
-  );
+    enabled: !!user?.address && isLoggedIn,
+    refetchInterval: refetchInterval ?? false,
+  });
 }
 
 export function useAccountUsage() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.usage(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.usage(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/usage`, {
         method: "GET",
         headers: {
@@ -315,16 +312,16 @@ export function useAccountUsage() {
 
       return json.data as UsageBillableByService;
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 export function useAccountCredits() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.credits(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.credits(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/credits`, {
         method: "GET",
 
@@ -347,16 +344,19 @@ export function useAccountCredits() {
 
       return credits;
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 export function useWalletStats(clientId: string | undefined) {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.walletStats(user?.address as string, clientId as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.walletStats(
+      user?.address as string,
+      clientId as string,
+    ),
+    queryFn: async () => {
       const res = await fetch(
         `${THIRDWEB_API_HOST}/v1/account/wallets?clientId=${clientId}`,
         {
@@ -375,8 +375,8 @@ export function useWalletStats(clientId: string | undefined) {
 
       return json.data as WalletStats;
     },
-    { enabled: !!clientId && !!user?.address && isLoggedIn },
-  );
+    enabled: !!clientId && !!user?.address && isLoggedIn,
+  });
 }
 
 export function useUpdateAccount() {
@@ -419,7 +419,7 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
   const queryClient = useQueryClient();
 
   return useMutationWithInvalidate(
-    async (input: { plan: string; feedback?: string; useTrial?: boolean }) => {
+    async (input: { plan: string; feedback?: string }) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/plan`, {
@@ -495,9 +495,9 @@ export function useUpdateNotifications() {
 export function useCreateBillingSession(enabled = false) {
   const { user } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.billingSession(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.billingSession(user?.address as string),
+    queryFn: async () => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(
@@ -518,8 +518,8 @@ export function useCreateBillingSession(enabled = false) {
 
       return json.data;
     },
-    { enabled },
-  );
+    enabled,
+  });
 }
 
 export function useConfirmEmail() {
@@ -637,9 +637,9 @@ export function useCreatePaymentMethod() {
 
 export function useApiKeys() {
   const { user, isLoggedIn } = useLoggedInUser();
-  return useQuery(
-    apiKeys.keys(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: apiKeys.keys(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys`, {
         method: "GET",
 
@@ -654,8 +654,8 @@ export function useApiKeys() {
       }
       return json.data as ApiKey[];
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 export function useCreateApiKey() {
@@ -885,9 +885,9 @@ export function useRevokeAuthorizedWallet() {
 export function useAuthorizedWallets() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    authorizedWallets.authorizedWallets(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: authorizedWallets.authorizedWallets(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/authorized-wallets`, {
         method: "GET",
 
@@ -903,8 +903,9 @@ export function useAuthorizedWallets() {
 
       return json.data as AuthorizedWallet[];
     },
-    { enabled: !!user?.address && isLoggedIn, cacheTime: 0 },
-  );
+    enabled: !!user?.address && isLoggedIn,
+    cacheTime: 0,
+  });
 }
 
 /**
@@ -913,12 +914,7 @@ export function useAuthorizedWallets() {
 export async function fetchChainsFromApi() {
   // always fetch from prod for chains for now
   // TODO: re-visit this
-  const res = await fetch("https://api.thirdweb.com/v1/chains", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
+  const res = await fetch("https://api.thirdweb.com/v1/chains");
   const json = await res.json();
 
   if (json.error) {
@@ -929,7 +925,10 @@ export async function fetchChainsFromApi() {
 }
 
 export function useApiChains() {
-  return useQuery(["all-chains"], async () => {
-    return fetchChainsFromApi();
+  return useQuery({
+    queryKey: ["all-chains"],
+    queryFn: () => {
+      return fetchChainsFromApi();
+    },
   });
 }

apps/dashboard/src/@3rdweb-sdk/react/hooks/useContractRoles.ts

@@ -1,76 +1,31 @@
-import {
-  type ContractWithRoles,
-  type RolesForContract,
-  useContractType,
-  useRoleMembers,
-} from "@thirdweb-dev/react";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { hasRole } from "thirdweb/extensions/permissions";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
 import type { RequiredParam } from "utils/types";
 
-function isContractWithRoles(
-  contract: RequiredParam<ValidContractInstance>,
-): contract is ContractWithRoles {
-  if (contract && "roles" in contract) {
-    return true;
-  }
-  return false;
-}
-
-function useIsAccountRole<TContract extends ContractWithRoles>(
-  role: RolesForContract<TContract>[number],
-  contract: RequiredParam<TContract>,
-  account: RequiredParam<string>,
-): boolean {
-  const contractHasRoles = isContractWithRoles(contract);
-  const { data } = useRoleMembers(contract, role);
-
-  if (contractHasRoles === false) {
-    return false;
-  }
-
-  if (data?.includes(ZERO_ADDRESS)) {
-    return true;
-  }
-
-  return !!(account && data?.includes(account));
-}
-
-export function useIsAdmin<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
-) {
+export function useIsAdmin(contract: ThirdwebContract) {
   const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
+  const { data: userIsAdmin, isError } = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: address ?? "",
+    role: "admin",
+    queryOptions: { enabled: !!address },
+  });
 
-  const contractHasRoles = isContractWithRoles(contract);
-  const isAccountRole = useIsAccountRole(
-    "admin",
-    contractHasRoles ? contract : undefined,
-    address,
-  );
-
-  if (contractType === "custom") {
-    return true;
-  }
-  return isAccountRole;
+  // If the request results in an error, it's likely that the contract is a non-thirdweb contract
+  // in that case we return `true` anyway
+  return userIsAdmin || isError;
 }
 
-export function useIsAdminOrSelf<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
+export function useIsAdminOrSelf(
+  contract: ThirdwebContract,
   self: RequiredParam<string>,
 ) {
   const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
   const isAdmin = useIsAdmin(contract);
-
   if (address === self) {
     return true;
   }
-  if (contractType === "custom") {
-    return true;
-  }
   return isAdmin;
 }
 

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx

@@ -0,0 +1,54 @@
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebContract } from "thirdweb";
+import { getCompilerMetadata } from "thirdweb/contract";
+import { getContractMetadata, name, symbol } from "thirdweb/extensions/common";
+
+/**
+ * Fetch the contract metadata for Dashboard
+ *
+ * If the contract itself doesn't implement the metadata extension,
+ * we try to fall back to:
+ * 1. name(), symbol()
+ * 2. our API endpoint
+ */
+export function useDashboardContractMetadata(contract: ThirdwebContract) {
+  return useQuery({
+    queryKey: ["contract-metadata-header", contract.chain.id, contract.address],
+    queryFn: async () => {
+      const [contractMetadata, _name, _symbol, compilerMetadata] =
+        await Promise.all([
+          getContractMetadata({ contract }).catch(() => ({
+            image: "",
+            name: "",
+            symbol: "",
+          })),
+          name({ contract }).catch(() => ""),
+          symbol({ contract }).catch(() => ""),
+          getCompilerMetadata(contract).catch(() => undefined),
+        ]);
+
+      /**
+       * Handle the case where the contract.thirdweb.com endpoint returns a very long name
+       * example url: https://contract.thirdweb.com/metadata/324/0x66E298335c5992d599132582De8eaAF75348e6e6
+       * In that case, we split the solidity name on ":" and take the second part
+       */
+      if (compilerMetadata?.name.includes(":")) {
+        const _name = compilerMetadata.name.split(":")[1];
+        if (_name) {
+          compilerMetadata.name = compilerMetadata.name.split(":")[1];
+        }
+      }
+
+      const contractName =
+        contractMetadata?.name || _name || compilerMetadata?.name || "";
+      const contractSymbol = contractMetadata?.symbol || _symbol || "";
+
+      return {
+        name: contractName,
+        symbol: contractSymbol,
+        image: contractMetadata.image || "",
+        contractType: compilerMetadata?.name || "",
+      };
+    },
+  });
+}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs.ts

@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import type { NFT, ThirdwebContract } from "thirdweb";
+import {
+  getOwnedNFTs as getOwnedERC721,
+  isERC721,
+} from "thirdweb/extensions/erc721";
+import { getOwnedNFTs as getOwnedERC1155 } from "thirdweb/extensions/erc1155";
+import invariant from "tiny-invariant";
+
+/**
+ * This hook is currently used for getting owned NFTs for Create DirectListing/English Auction
+ * It should only be used if our indexing solutions don't support the current network
+ */
+export function useDashboardOwnedNFTs({
+  contract,
+  owner,
+  disabled,
+}: { owner?: string; contract?: ThirdwebContract; disabled?: boolean }) {
+  return useQuery({
+    queryKey: [
+      "owned-nfts",
+      contract?.chain.id || "",
+      contract?.address || "",
+      owner || "",
+    ],
+    queryFn: async (): Promise<NFT[]> => {
+      invariant(contract, "Contract is required");
+      invariant(owner, "owner address is required");
+      const is721 = await isERC721({ contract });
+      if (is721) {
+        return getOwnedERC721({
+          contract,
+          owner,
+        });
+      }
+      // Else default to 1155
+      return getOwnedERC1155({ contract, address: owner });
+    },
+    enabled: !!contract && !!owner && !disabled,
+  });
+}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEmbeddedWallets.ts

@@ -25,12 +25,12 @@ export type EmbeddedWalletUser = {
 export function useEmbeddedWallets(clientId: string) {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    embeddedWalletsKeys.embeddedWallets(
+  return useQuery({
+    queryKey: embeddedWalletsKeys.embeddedWallets(
       user?.address as string,
       clientId as string,
     ),
-    async () => {
+    queryFn: async () => {
       const res = await fetch(
         `${THIRDWEB_EWS_API_HOST}/api/thirdweb/embedded-wallet?clientId=${clientId}&lastAccessedAt=0`,
         {
@@ -46,6 +46,6 @@ export function useEmbeddedWallets(clientId: string) {
 
       return json.walletUsers as EmbeddedWalletUser[];
     },
-    { enabled: !!user?.address && isLoggedIn && !!clientId },
-  );
+    enabled: !!user?.address && isLoggedIn && !!clientId,
+  });
 }

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -1,9 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ResultItem } from "components/engine/system-metrics/components/StatusCodes";
 import { THIRDWEB_API_HOST } from "constants/urls";
 import { useState } from "react";
 import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import type { ResultItem } from "../../../components/engine/system-metrics/components/StatusCodes";
 import { engineKeys } from "../cache-keys";
 import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
@@ -55,9 +55,9 @@ const getEngineRequestHeaders = (token: string | null): HeadersInit => {
 export function useEngineInstances() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    engineKeys.instances(user?.address as string),
-    async (): Promise<EngineInstance[]> => {
+  return useQuery({
+    queryKey: engineKeys.instances(user?.address as string),
+    queryFn: async (): Promise<EngineInstance[]> => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine`, {
         method: "GET",
       });
@@ -79,8 +79,8 @@ export function useEngineInstances() {
         };
       });
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 // GET Requests
@@ -100,9 +100,9 @@ export type BackendWallet = {
 export function useEngineBackendWallets(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    [engineKeys.backendWallets(instance)],
-    async () => {
+  return useQuery({
+    queryKey: [engineKeys.backendWallets(instance)],
+    queryFn: async () => {
       const res = await fetch(`${instance}backend-wallet/get-all?limit=50`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -112,8 +112,8 @@ export function useEngineBackendWallets(instance: string) {
 
       return (json.result as BackendWallet[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 export interface EngineSystemHealth {
@@ -126,9 +126,9 @@ export function useEngineSystemHealth(
   instanceUrl: string,
   pollInterval: number | false = false,
 ) {
-  return useQuery(
-    engineKeys.health(instanceUrl),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.health(instanceUrl),
+    queryFn: async () => {
       const res = await fetch(`${instanceUrl}system/health`, {
         headers: getEngineRequestHeaders(null),
       });
@@ -138,23 +138,57 @@ export function useEngineSystemHealth(
       const json = (await res.json()) as EngineSystemHealth;
       return json;
     },
-    {
-      enabled: !!instanceUrl,
-      refetchInterval: pollInterval,
+    enabled: !!instanceUrl,
+    refetchInterval: pollInterval,
+  });
+}
+
+export interface EngineSystemQueueMetrics {
+  result: {
+    queued: number;
+    pending: number;
+    latency?: {
+      msToSend: { p50: number; p90: number };
+      msToMine: { p50: number; p90: number };
+    };
+  };
+}
+
+export function useEngineQueueMetrics(
+  instanceUrl: string,
+  pollInterval: number | false = false,
+) {
+  const token = useLoggedInUser().user?.jwt ?? null;
+
+  return useQuery({
+    queryKey: engineKeys.queueMetrics(instanceUrl),
+    queryFn: async () => {
+      const res = await fetch(`${instanceUrl}system/queue`, {
+        headers: getEngineRequestHeaders(token),
+      });
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+      return (await res.json()) as EngineSystemQueueMetrics;
     },
-  );
+    enabled: !!instanceUrl && !!token,
+    refetchInterval: pollInterval,
+  });
 }
 
 export function useEngineLatestVersion() {
-  return useQuery(engineKeys.latestVersion(), async () => {
-    const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/latest-version`, {
-      method: "GET",
-    });
-    if (!res.ok) {
-      throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
-    }
-    const json = await res.json();
-    return json.data.version as string;
+  return useQuery({
+    queryKey: engineKeys.latestVersion(),
+    queryFn: async () => {
+      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/latest-version`, {
+        method: "GET",
+      });
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+      const json = await res.json();
+      return json.data.version as string;
+    },
   });
 }
 
@@ -299,6 +333,7 @@ export type Transaction = {
   gasPrice?: string | null;
   maxFeePerGas?: string | null;
   maxPriorityFeePerGas?: string | null;
+  effectiveGasPrice?: string | null;
   transactionType?: number | null;
   transactionHash?: string | null;
   queuedAt?: string | null;
@@ -347,9 +382,9 @@ type TransactionResponse = {
 export function useEngineTransactions(instance: string, autoUpdate: boolean) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.transactions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.transactions(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}transaction/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -359,11 +394,10 @@ export function useEngineTransactions(instance: string, autoUpdate: boolean) {
 
       return (json.result as TransactionResponse) || {};
     },
-    {
-      enabled: !!instance && !!token,
-      refetchInterval: autoUpdate ? 4_000 : false,
-    },
-  );
+
+    enabled: !!instance && !!token,
+    refetchInterval: autoUpdate ? 4_000 : false,
+  });
 }
 
 type WalletConfig =
@@ -388,9 +422,9 @@ type WalletConfig =
 export function useEngineWalletConfig(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.walletConfig(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.walletConfig(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}configuration/wallets`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -400,8 +434,8 @@ export function useEngineWalletConfig(instance: string) {
 
       return (json.result as WalletConfig) || {};
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 type CurrencyValue = {
@@ -421,9 +455,9 @@ export function useEngineBackendWalletBalance(
 
   invariant(chainId, "chainId is required");
 
-  return useQuery(
-    engineKeys.backendWalletBalance(address, chainId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.backendWalletBalance(address, chainId),
+    queryFn: async () => {
       const res = await fetch(
         `${instance}backend-wallet/${chainId}/${address}/get-balance`,
         {
@@ -436,8 +470,8 @@ export function useEngineBackendWalletBalance(
 
       return (json.result as CurrencyValue) || {};
     },
-    { enabled: !!instance && !!address && !!chainId && !!token },
-  );
+    enabled: !!instance && !!address && !!chainId && !!token,
+  });
 }
 
 export type EngineAdmin = {
@@ -450,9 +484,9 @@ export function useEnginePermissions(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const address = useActiveAccount()?.address;
 
-  return useQuery(
-    engineKeys.permissions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.permissions(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}auth/permissions/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -466,10 +500,9 @@ export function useEnginePermissions(instance: string) {
 
       return (json.result as EngineAdmin[]) || [];
     },
-    {
-      enabled: !!instance && !!token && !!address,
-    },
-  );
+
+    enabled: !!instance && !!token && !!address,
+  });
 }
 
 export type AccessToken = {
@@ -484,9 +517,9 @@ export type AccessToken = {
 export function useEngineAccessTokens(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.accessTokens(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.accessTokens(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}auth/access-tokens/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -496,8 +529,8 @@ export function useEngineAccessTokens(instance: string) {
 
       return (json.result as AccessToken[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 export type KeypairAlgorithm = "ES256" | "RS256" | "PS256";
@@ -514,9 +547,9 @@ export type Keypair = {
 export function useEngineKeypairs(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.keypairs(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.keypairs(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}auth/keypair/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -526,8 +559,8 @@ export function useEngineKeypairs(instance: string) {
 
       return (json.result as Keypair[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 type AddKeypairInput = {
@@ -610,9 +643,9 @@ export type EngineRelayer = {
 export function useEngineRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.relayers(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.relayers(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}relayer/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -622,8 +655,8 @@ export function useEngineRelayer(instance: string) {
 
       return (json.result as EngineRelayer[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 export type CreateRelayerInput = {
@@ -747,9 +780,9 @@ export interface EngineWebhook {
 export function useEngineWebhooks(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.webhooks(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.webhooks(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}webhooks/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -759,8 +792,8 @@ export function useEngineWebhooks(instance: string) {
 
       return (json.result as EngineWebhook[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 // POST REQUESTS
@@ -1206,9 +1239,9 @@ export function useEngineSendTokens(instance: string) {
 export function useEngineCorsConfiguration(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.corsUrls(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.corsUrls(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}configuration/cors`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -1218,8 +1251,8 @@ export function useEngineCorsConfiguration(instance: string) {
 
       return (json.result as string[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 interface SetCorsUrlInput {
@@ -1262,9 +1295,9 @@ export function useEngineIpAllowlistConfiguration(instance: string) {
   // if engine instance is not updated to have IP_ALLOWLIST
   const { data: health } = useEngineSystemHealth(instance);
 
-  return useQuery(
-    engineKeys.ipAllowlist(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.ipAllowlist(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}configuration/ip-allowlist`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -1273,11 +1306,10 @@ export function useEngineIpAllowlistConfiguration(instance: string) {
       const json = await res.json();
       return (json.result as string[]) || [];
     },
-    {
-      enabled:
-        !!instance && !!token && health?.features?.includes("IP_ALLOWLIST"),
-    },
-  );
+
+    enabled:
+      !!instance && !!token && health?.features?.includes("IP_ALLOWLIST"),
+  });
 }
 
 interface SetIpAllowlistInput {
@@ -1330,9 +1362,9 @@ export interface EngineContractSubscription {
 
 export function useEngineContractSubscription(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
-  return useQuery(
-    engineKeys.contractSubscriptions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.contractSubscriptions(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}contract-subscriptions/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -1341,10 +1373,9 @@ export function useEngineContractSubscription(instance: string) {
       const json = await res.json();
       return json.result as EngineContractSubscription[];
     },
-    {
-      enabled: !!instance && !!token,
-    },
-  );
+
+    enabled: !!instance && !!token,
+  });
 }
 
 export interface AddContractSubscriptionInput {
@@ -1430,9 +1461,9 @@ export function useEngineSubscriptionsLastBlock(
 ) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.contractSubscriptionsLastBlock(instanceUrl, chainId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.contractSubscriptionsLastBlock(instanceUrl, chainId),
+    queryFn: async () => {
       const response = await fetch(
         `${instanceUrl}contract-subscriptions/last-block?chain=${chainId}`,
         {
@@ -1444,11 +1475,10 @@ export function useEngineSubscriptionsLastBlock(
       const json = await response.json();
       return json.result.lastBlock as number;
     },
-    {
-      enabled: !!instanceUrl && !!token,
-      refetchInterval: autoUpdate ? 5_000 : false,
-    },
-  );
+
+    enabled: !!instanceUrl && !!token,
+    refetchInterval: autoUpdate ? 5_000 : false,
+  });
 }
 
 export interface EngineResourceMetrics {
@@ -1462,12 +1492,12 @@ export interface EngineResourceMetrics {
   };
 }
 
-export function useEngineResourceMetrics(engineId: string) {
+export function useEngineSystemMetrics(engineId: string) {
   const [enabled, setEnabled] = useState(true);
 
-  return useQuery(
-    engineKeys.metrics(engineId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.systemMetrics(engineId),
+    queryFn: async () => {
       const res = await fetch(
         `${THIRDWEB_API_HOST}/v1/engine/${engineId}/metrics`,
       );
@@ -1478,10 +1508,9 @@ export function useEngineResourceMetrics(engineId: string) {
       const json = (await res.json()) as EngineResourceMetrics;
       return json;
     },
-    {
-      // Poll every 5s unless disabled.
-      enabled,
-      refetchInterval: 5_000,
-    },
-  );
+
+    // Poll every 5s unless disabled.
+    enabled,
+    refetchInterval: 5_000,
+  });
 }

apps/dashboard/src/@3rdweb-sdk/react/hooks/useFavoriteChains.ts

@@ -1,7 +1,7 @@
-import { useSupportedChains } from "@thirdweb-dev/react";
+import { useFavouriteChainIds } from "app/(dashboard)/(chain)/components/client/star-button";
+import { useSupportedChains } from "hooks/chains/configureChains";
 import { useMemo } from "react";
 import type { ChainMetadata } from "thirdweb/chains";
-import { useFavouriteChainIds } from "../../../app/(dashboard)/(chain)/components/client/star-button";
 
 export function useFavoriteChains() {
   const allChains = useSupportedChains();

apps/dashboard/src/@3rdweb-sdk/react/hooks/useGas.ts

@@ -1,16 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-export type GasEstimate = { gasPrice: number; ethPrice: number };
-
-export function useGas() {
-  return useQuery(
-    ["gas-price", "ethereum"],
-    async () => {
-      const res = await fetch("/api/gas");
-      return res.json() as Promise<GasEstimate>;
-    },
-    {
-      refetchInterval: 60_000,
-    },
-  );
-}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts

@@ -1,12 +1,13 @@
-import { LOGGED_IN_ONLY_PATHS } from "@/constants/auth";
+import { isLoginRequired } from "@/constants/auth";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useQuery } from "@tanstack/react-query";
-import { usePathname, useRouter } from "next/navigation";
+import type { EnsureLoginResponse } from "app/api/auth/ensure-login/route";
+import { usePathname } from "next/navigation";
 import { useRef } from "react";
 import {
   useActiveAccount,
   useActiveWalletConnectionStatus,
 } from "thirdweb/react";
-import type { EnsureLoginResponse } from "../../../app/api/auth/ensure-login/route";
 
 // define "TW_AUTH_TOKEN" to exist on the window object
 declare global {
@@ -20,7 +21,7 @@ export function useLoggedInUser(): {
   isLoggedIn: boolean;
   user: { address: string; jwt?: string } | null;
 } {
-  const router = useRouter();
+  const router = useDashboardRouter();
   const pathname = usePathname();
   const connectedAddress = useActiveAccount()?.address;
   const connectionStatus = useActiveWalletConnectionStatus();
@@ -35,12 +36,12 @@ export function useLoggedInUser(): {
     // enabled if:
     // - there is a pathname
     // - we are not already currently connecting
-    // - the pathname is one of the LOGGED_IN_ONLY_PATHS
+    // - the pathname requires login
     enabled:
       !!pathname &&
       connectionStatus !== "connecting" &&
       statusWasEverConnecting.current &&
-      LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path)),
+      isLoginRequired(pathname),
     // the last "persist", part of the queryKey, is to make sure that we do not cache this query in indexDB
     // convention in v4 of the SDK that we are (ab)using here
     queryKey: ["logged_in_user", connectedAddress, { persist: false }],
@@ -113,7 +114,7 @@ export function useLoggedInUser(): {
   }
 
   // if we are not on a logged in path, we can simply return the connected address
-  if (!LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path))) {
+  if (!isLoginRequired(pathname)) {
     return {
       isLoading: false,
       isLoggedIn: true,

apps/dashboard/src/@3rdweb-sdk/react/hooks/useRegistry.ts

@@ -1,46 +1,35 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useSigner } from "@thirdweb-dev/react";
+import { addContractToMultiChainRegistry } from "components/contract-components/utils";
+import { MULTICHAIN_REGISTRY_CONTRACT } from "constants/contracts";
 import {
-  addContractToMultiChainRegistry,
-  getGaslessPolygonSDK,
-} from "components/contract-components/utils";
+  DASHBOARD_ENGINE_RELAYER_URL,
+  DASHBOARD_FORWARDER_ADDRESS,
+} from "constants/misc";
 import type { BasicContract } from "contract-ui/types/types";
 import { getAllMultichainRegistry } from "dashboard-extensions/common/read/getAllMultichainRegistry";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useSupportedChainsRecord } from "hooks/chains/configureChains";
-import { thirdwebClient } from "lib/thirdweb-client";
-import { defineDashboardChain } from "lib/v5-adapter";
 import { useMemo } from "react";
-import { getContract } from "thirdweb";
-import { polygon } from "thirdweb/chains";
+import { sendAndConfirmTransaction } from "thirdweb";
+import { remove } from "thirdweb/extensions/thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
 
-const MULTICHAIN_REGISTRY_ADDRESS =
-  "0xcdAD8FA86e18538aC207872E8ff3536501431B73";
-
-const registryContract = getContract({
-  client: thirdwebClient,
-  address: MULTICHAIN_REGISTRY_ADDRESS,
-  chain: defineDashboardChain(polygon.id),
-});
-
 function useMultiChainRegContractList(walletAddress?: string) {
-  return useQuery(
-    ["dashboard-registry", walletAddress, "multichain-contract-list"],
-    async () => {
+  return useQuery({
+    queryKey: ["dashboard-registry", walletAddress, "multichain-contract-list"],
+    queryFn: async () => {
       invariant(walletAddress, "walletAddress is required");
       const contracts = await getAllMultichainRegistry({
-        contract: registryContract,
+        contract: MULTICHAIN_REGISTRY_CONTRACT,
         address: walletAddress,
       });
 
       return contracts;
     },
-    {
-      enabled: !!walletAddress,
-    },
-  );
+
+    enabled: !!walletAddress,
+  });
 }
 
 interface Options {
@@ -96,28 +85,30 @@ type RemoveContractParams = {
 };
 
 export function useRemoveContractMutation() {
-  const walletAddress = useActiveAccount()?.address;
-  const signer = useSigner();
   const { chainIdToChainRecord } = useAllChainsData();
-
   const queryClient = useQueryClient();
-
+  const account = useActiveAccount();
   return useMutation(
     async (data: RemoveContractParams) => {
-      invariant(
-        walletAddress,
-        "cannot add a contract without a wallet address",
-      );
       invariant(chainIdToChainRecord, "chains not initialzed yet");
-      invariant(signer, "no wallet connected");
       invariant(data.chainId, "chainId not provided");
-
+      invariant(account, "No wallet connected");
       const { contractAddress, chainId } = data;
-
-      const gaslessPolygonSDK = getGaslessPolygonSDK(signer);
-      return await gaslessPolygonSDK.multiChainRegistry?.removeContract({
-        address: contractAddress,
-        chainId,
+      const transaction = remove({
+        contract: MULTICHAIN_REGISTRY_CONTRACT,
+        deployer: account.address,
+        deployment: contractAddress,
+        chainId: BigInt(chainId),
+      });
+      return await sendAndConfirmTransaction({
+        transaction,
+        account,
+        gasless: {
+          experimentalChainlessSupport: true,
+          provider: "engine",
+          relayerUrl: DASHBOARD_ENGINE_RELAYER_URL,
+          relayerForwarderAddress: DASHBOARD_FORWARDER_ADDRESS,
+        },
       });
     },
     {

apps/dashboard/src/@3rdweb-sdk/react/hooks/useResolveContractAbi.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Abi } from "abitype";
+import type { ThirdwebContract } from "thirdweb";
+import { resolveContractAbi } from "thirdweb/contract";
+import invariant from "tiny-invariant";
+
+export function useResolveContractAbi(contract?: ThirdwebContract) {
+  return useQuery({
+    queryKey: [
+      "full-contract-abi",
+      contract?.chain.id || "",
+      contract?.address || "",
+    ],
+    queryFn: async () => {
+      invariant(contract, "contract is required");
+      const abi = await resolveContractAbi<Abi>(contract);
+      return abi;
+    },
+    enabled: !!contract,
+  });
+}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useSplit.ts

@@ -1,29 +1,21 @@
-import { useToast } from "@chakra-ui/react";
-import { useSDKChainId } from "@thirdweb-dev/react";
-import type { Split } from "@thirdweb-dev/sdk";
 import type {
   BalanceQueryRequest,
   BalanceQueryResponse,
 } from "pages/api/moralis/balances";
+import { toast } from "sonner";
+import type { ThirdwebContract } from "thirdweb";
+import { distribute, distributeByToken } from "thirdweb/extensions/split";
+import { useSendAndConfirmTransaction } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import { parseErrorToMessage } from "utils/errorParser";
 import { splitsKeys } from "..";
 import {
   useMutationWithInvalidate,
   useQueryWithNetwork,
 } from "./query/useQueryWithNetwork";
 
-export function useSplitData(contract?: Split) {
-  return useQueryWithNetwork(
-    splitsKeys.list(contract?.getAddress()),
-    async () => contract?.getAllRecipients(),
-    {
-      enabled: !!contract,
-    },
-  );
-}
-export function useSplitBalances(contractAddress?: string) {
-  const chainId = useSDKChainId();
+export function useSplitBalances(contract: ThirdwebContract) {
+  const chainId = contract.chain.id;
+  const contractAddress = contract.address;
   const currencies = useQueryWithNetwork(
     splitsKeys.currencies(contractAddress),
     async () => {
@@ -48,72 +40,31 @@ export function useSplitBalances(contractAddress?: string) {
   return currencies;
 }
 
-export function useSplitDistributeFunds(contract?: Split) {
-  const contractAddress = contract?.getAddress();
-  const balances = useSplitBalances(contractAddress);
-  const toast = useToast();
+export function useSplitDistributeFunds(contract: ThirdwebContract) {
+  const contractAddress = contract.address;
+  const balances = useSplitBalances(contract);
+  const { mutateAsync } = useSendAndConfirmTransaction();
 
   return useMutationWithInvalidate(
     async () => {
       invariant(contract, "split contract is not ready");
       invariant(balances.data, "No balances to distribute");
-
       const distributions = (balances.data || [])
         .filter((token) => token.display_balance !== "0.0")
         .map(async (currency) => {
-          if (currency.name === "Native Token") {
-            await contract
-              .distribute()
-              .then(() => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: "Success",
-                  description: `Successfully distributed ${currency.name}`,
-                  status: "success",
-                  duration: 5000,
-                  isClosable: true,
+          const transaction =
+            currency.name === "Native Token"
+              ? distribute({ contract })
+              : distributeByToken({
+                  contract,
+                  tokenAddress: currency.token_address,
                 });
-                return void 0;
-              })
-              .catch((err: unknown) => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: `Error distributing ${currency.name}`,
-                  description: parseErrorToMessage(err),
-                  status: "error",
-                  duration: 9000,
-                  isClosable: true,
-                });
-              });
-          } else {
-            await contract
-              .distributeToken(currency.token_address)
-              .then(() => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: "Success",
-                  description: `Successfully distributed ${currency.name}`,
-                  status: "success",
-                  duration: 5000,
-                  isClosable: true,
-                });
-                return void 0;
-              })
-              .catch((err: unknown) => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: `Error distributing ${currency.name}`,
-                  description: parseErrorToMessage(err),
-                  status: "error",
-                  duration: 9000,
-                  isClosable: true,
-                });
-              });
-          }
+          const promise = mutateAsync(transaction);
+          toast.promise(promise, {
+            success: `Successfully distributed ${currency.name}`,
+            error: `Error distributing ${currency.name}`,
+            loading: "Distributing funds",
+          });
         });
 
       return await Promise.all(distributions);

apps/dashboard/src/@3rdweb-sdk/react/hooks/useVote.ts

@@ -1,18 +1,36 @@
-import { useContract, useContractMetadata, useSDK } from "@thirdweb-dev/react";
-import type { Vote, VoteType } from "@thirdweb-dev/sdk";
-import { useActiveAccount } from "thirdweb/react";
+import { thirdwebClient } from "@/constants/client";
+import { type ThirdwebContract, getContract, toTokens } from "thirdweb";
+import {
+  balanceOf,
+  decimals,
+  delegate,
+  delegates,
+} from "thirdweb/extensions/erc20";
+import {
+  type VoteType,
+  canExecute,
+  castVoteWithReason,
+  executeProposal,
+  getAll,
+  hasVoted,
+  propose,
+  token,
+} from "thirdweb/extensions/vote";
+import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import type { RequiredParam } from "utils/types";
 import { voteKeys } from "../cache-keys";
 import {
   useMutationWithInvalidate,
   useQueryWithNetwork,
 } from "./query/useQueryWithNetwork";
 
-export function useVoteProposalList(contract?: Vote) {
+export function useVoteProposalList(contract?: ThirdwebContract) {
   return useQueryWithNetwork(
-    voteKeys.proposals(contract?.getAddress()),
-    async () => await contract?.getAll(),
+    voteKeys.proposals(contract?.address || ""),
+    async () => {
+      invariant(contract, "contract is required");
+      return await getAll({ contract });
+    },
     {
       enabled: !!contract,
     },
@@ -20,17 +38,20 @@ export function useVoteProposalList(contract?: Vote) {
 }
 
 export function useHasVotedOnProposal(
-  contract: RequiredParam<Vote>,
-  proposalId: string,
+  contract: ThirdwebContract,
+  proposalId: bigint,
 ) {
-  const address = useActiveAccount()?.address;
+  const userAddress = useActiveAccount()?.address;
   return useQueryWithNetwork(
     voteKeys.userHasVotedOnProposal(
-      proposalId,
-      contract?.getAddress(),
-      address,
+      proposalId.toString(),
+      contract.address,
+      userAddress,
     ),
-    async () => await contract?.hasVoted(proposalId, address),
+    async () => {
+      invariant(userAddress, "address is required");
+      return await hasVoted({ contract, proposalId, account: userAddress });
+    },
     {
       enabled: !!contract,
     },
@@ -38,65 +59,83 @@ export function useHasVotedOnProposal(
 }
 
 export function useCanExecuteProposal(
-  contract: RequiredParam<Vote>,
-  proposalId: string,
+  contract: ThirdwebContract,
+  proposalId: bigint,
 ) {
   return useQueryWithNetwork(
-    voteKeys.canExecuteProposal(proposalId, contract?.getAddress()),
-    async () => await contract?.canExecute(proposalId),
+    voteKeys.canExecuteProposal(proposalId.toString(), contract.address),
+    async () => await canExecute({ contract, proposalId }),
     {
       enabled: !!contract,
     },
   );
 }
 
-export function useTokensDelegated(contract?: Vote) {
-  const sdk = useSDK();
-  const address = useActiveAccount()?.address;
+export function useTokensDelegated(contract: ThirdwebContract) {
+  const userAddress = useActiveAccount()?.address;
 
   return useQueryWithNetwork(
-    voteKeys.delegation(contract?.getAddress(), address),
+    voteKeys.delegation(contract.address, userAddress),
     async () => {
-      invariant(address, "address is required");
-      invariant(contract, "vote contract is required");
-
-      const metadata = await contract?.metadata.get();
-      const tokenAddress = metadata?.voting_token_address;
-      const tokenContract = await sdk?.getToken(tokenAddress);
-      const delegation = await tokenContract?.getDelegationOf(address);
-      return delegation?.toLowerCase() === address.toLowerCase();
+      invariant(userAddress, "wallet address is required");
+      const tokenAddress = await token({ contract });
+      if (!tokenAddress) {
+        throw new Error("Expected a delegated token address");
+      }
+      const tokenContract = getContract({
+        address: tokenAddress,
+        chain: contract.chain,
+        client: thirdwebClient,
+      });
+      const delegatedAddress = await delegates({
+        contract: tokenContract,
+        account: userAddress,
+      });
+      return delegatedAddress?.toLowerCase() === userAddress.toLowerCase();
     },
     {
-      enabled: !!contract && !!address,
+      enabled: !!contract && !!userAddress,
     },
   );
 }
 
-export function useVoteTokenBalances(contract?: Vote, addresses?: string[]) {
-  const { data } = useContractMetadata(contract);
-  const tokenContract = useContract(
-    data?.voting_token_address,
-    "token",
-  ).contract;
-
+export function useVoteTokenBalances(
+  contract: ThirdwebContract,
+  addresses: string[],
+) {
   return useQueryWithNetwork(
-    voteKeys.balances(contract?.getAddress(), addresses),
-    async () => {
-      invariant(data, "contract metadata is required");
-      invariant(tokenContract, "voting contract is required");
-      invariant(addresses, "addresses are required");
-
-      const balances = addresses.map(async (address) => {
+    voteKeys.balances(contract.address, addresses),
+    async (): Promise<
+      Array<{ address: string; balance: string; decimals: number }>
+    > => {
+      invariant(addresses.length, "addresses are required");
+      const tokenAddress = await token({ contract });
+      if (!tokenAddress) {
+        throw new Error("Expected a delegated token address");
+      }
+      const tokenContract = getContract({
+        address: tokenAddress,
+        chain: contract.chain,
+        client: thirdwebClient,
+      });
+      const _decimals = await decimals({ contract: tokenContract });
+      const balanceData = await Promise.all(
+        addresses.map((address) =>
+          balanceOf({ contract: tokenContract, address }),
+        ),
+      );
+      const balances = addresses.map((address, index) => {
+        const balance = balanceData[index] || 0n;
         return {
           address,
-          balance: (await tokenContract.balanceOf(address)).displayValue,
+          balance: toTokens(balance, _decimals),
+          decimals: _decimals,
         };
       });
-
       return await Promise.all(balances);
     },
     {
-      enabled: !!data && !!contract && !!addresses?.length,
+      enabled: addresses.length > 0,
     },
   );
 }
@@ -105,94 +144,143 @@ export interface IProposalInput {
   description: string;
 }
 
-export function useProposalCreateMutation(contractAddress?: string) {
-  const voteContract = useContract(contractAddress, "vote").contract;
+/**
+ * This hook is a simplified version meant to use on the Dashboard
+ * since _currently_ the dashboard only supports creating proposals with descriptions
+ *
+ * todo: make an extension in the SDK that is more robust and user-friendly ?
+ */
+export function useProposalCreateMutation(contract: ThirdwebContract) {
+  const { mutateAsync } = useSendAndConfirmTransaction();
   return useMutationWithInvalidate(
-    (proposal: IProposalInput) => {
-      invariant(voteContract, "contract is required");
+    async (proposal: IProposalInput) => {
       const { description } = proposal;
-      return voteContract.propose(description);
+      const transaction = propose({
+        contract,
+        description,
+        targets: [contract.address],
+        values: [0n],
+        calldatas: ["0x"],
+      });
+      return await mutateAsync(transaction);
     },
     {
       onSuccess: (_data, _options, _variables, invalidate) => {
-        return invalidate([voteKeys.proposals(contractAddress)]);
+        return invalidate([voteKeys.proposals(contract.address)]);
       },
     },
   );
 }
 
-export function useDelegateMutation(contract?: Vote) {
-  const sdk = useSDK();
-  const address = useActiveAccount()?.address;
-
-  const contractAddress = contract?.getAddress();
-
+export function useDelegateMutation(contract: ThirdwebContract) {
+  const userAddress = useActiveAccount()?.address;
+  const { mutateAsync } = useSendAndConfirmTransaction();
   return useMutationWithInvalidate(
     async () => {
-      invariant(address, "address is required");
-      invariant(contractAddress, "contract address is required");
-      invariant(contract, "vote contract is required");
-
-      const metadata = await contract?.metadata.get();
-      const tokenAddress = metadata?.voting_token_address;
-      const tokenContract = await sdk?.getToken(tokenAddress);
-      return tokenContract?.delegateTo(address);
+      invariant(userAddress, "address is required");
+      const tokenAddress = await token({ contract });
+      if (!tokenAddress) {
+        throw new Error("Expected a delegated token address");
+      }
+      const tokenContract = getContract({
+        address: tokenAddress,
+        chain: contract.chain,
+        client: thirdwebClient,
+      });
+      const transaction = delegate({
+        contract: tokenContract,
+        delegatee: userAddress,
+      });
+      return await mutateAsync(transaction);
     },
     {
       onSuccess: (_data, _options, _variables, invalidate) => {
-        return invalidate([voteKeys.delegation(contractAddress, address)]);
+        return invalidate([voteKeys.delegation(contract.address, userAddress)]);
       },
     },
   );
 }
 
+/**
+ * Get the decimals of the voting erc20 token
+ */
+export function useVotingTokenDecimals(contract: ThirdwebContract) {
+  return useMutationWithInvalidate(async () => {
+    const tokenAddress = await token({ contract });
+    if (!tokenAddress) {
+      throw new Error("Expected a delegated token address");
+    }
+    const tokenContract = getContract({
+      address: tokenAddress,
+      chain: contract.chain,
+      client: thirdwebClient,
+    });
+    const _decimals = await decimals({ contract: tokenContract });
+    return _decimals;
+  });
+}
+
 interface IVoteCast {
   voteType: VoteType;
   reason?: string;
 }
 
 export function useCastVoteMutation(
-  contract: RequiredParam<Vote>,
-  proposalId: string,
+  contract: ThirdwebContract,
+  proposalId: bigint,
 ) {
   const address = useActiveAccount()?.address;
-  const contractAddress = contract?.getAddress();
-
+  const contractAddress = contract.address;
+  const { mutateAsync } = useSendAndConfirmTransaction();
   return useMutationWithInvalidate(
-    async (vote: IVoteCast) => {
+    async (voteItem: IVoteCast) => {
       invariant(contract, "contract is required");
       invariant(address, "address is required");
-      const { voteType, reason } = vote;
-      return contract.vote(proposalId, voteType, reason);
+      const { voteType, reason } = voteItem;
+      const transaction = castVoteWithReason({
+        contract,
+        proposalId,
+        support: voteType,
+        reason: reason ?? "",
+      });
+      return await mutateAsync(transaction);
     },
     {
       onSuccess: (_data, _options, _variables, invalidate) => {
         return invalidate([
           voteKeys.proposals(contractAddress),
-          voteKeys.userHasVotedOnProposal(proposalId, contractAddress, address),
-          voteKeys.canExecuteProposal(proposalId, contractAddress),
+          voteKeys.userHasVotedOnProposal(
+            proposalId.toString(),
+            contractAddress,
+            address,
+          ),
+          voteKeys.canExecuteProposal(proposalId.toString(), contractAddress),
         ]);
       },
     },
   );
 }
 
+/**
+ * This hook is a simplified version for the Dashboard
+ * It doesn't pass any extra info to the execute function
+ */
 export function useExecuteProposalMutation(
-  contract: RequiredParam<Vote>,
-  proposalId: string,
+  contract: ThirdwebContract,
+  proposalId: bigint,
 ) {
-  const contractAddress = contract?.getAddress();
-
+  const contractAddress = contract.address;
+  const mutation = useSendAndConfirmTransaction();
   return useMutationWithInvalidate(
     async () => {
-      invariant(contract, "contract is required");
-      return contract.execute(proposalId);
+      const transaction = executeProposal({ contract, proposalId });
+      return await mutation.mutateAsync(transaction);
     },
     {
       onSuccess: (_data, _options, _variables, invalidate) => {
         return invalidate([
           voteKeys.proposals(contractAddress),
-          voteKeys.canExecuteProposal(proposalId, contractAddress),
+          voteKeys.canExecuteProposal(proposalId.toString(), contractAddress),
         ]);
       },
     },

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -2,13 +2,15 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
+import { thirdwebClient } from "@/constants/client";
 import { THIRDWEB_ENGINE_FAUCET_WALLET } from "@/constants/env";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { useMutation } from "@tanstack/react-query";
-import { thirdwebClient } from "lib/thirdweb-client";
-import { useRouter } from "next/navigation";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { CanClaimResponseType } from "app/api/testnet-faucet/can-claim/CanClaimResponseType";
+import { mapV4ChainToV5Chain } from "contexts/map-chains";
+import { useTrack } from "hooks/analytics/useTrack";
 import { toast } from "sonner";
-import { defineChain, toUnits } from "thirdweb";
+import { toUnits } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useActiveAccount, useWalletBalance } from "thirdweb/react";
 
@@ -29,23 +31,33 @@ function formatTime(seconds: number) {
 
 export function FaucetButton({
   chain,
-  ttlSeconds,
   amount,
 }: {
   chain: ChainMetadata;
-  ttlSeconds: number;
   amount: string;
 }) {
   const address = useActiveAccount()?.address;
   const chainId = chain.chainId;
-  const definedChain = defineChain(chainId);
+  // do not include local overrides for chain pages
+  // eslint-disable-next-line no-restricted-syntax
+  const definedChain = mapV4ChainToV5Chain(chain);
   const faucetWalletBalanceQuery = useWalletBalance({
     address: THIRDWEB_ENGINE_FAUCET_WALLET,
     chain: definedChain,
     client: thirdwebClient,
   });
+  const trackEvent = useTrack();
+
+  const queryClient = useQueryClient();
+
   const claimMutation = useMutation({
     mutationFn: async () => {
+      trackEvent({
+        category: "faucet",
+        action: "claim",
+        label: "attempt",
+        chain_id: chainId,
+      });
       const response = await fetch("/api/testnet-faucet/claim", {
         method: "POST",
         headers: {
@@ -54,30 +66,62 @@ export function FaucetButton({
         body: JSON.stringify({
           chainId: chainId,
           toAddress: address,
-          amount,
         }),
       });
 
       if (!response.ok) {
         const data = await response.json();
-        throw data.error;
+        throw new Error(data?.error || "Failed to claim funds");
       }
     },
     onSuccess: () => {
-      router.refresh();
+      trackEvent({
+        category: "faucet",
+        action: "claim",
+        label: "success",
+        chain_id: chainId,
+      });
+    },
+    onError: (error) => {
+      trackEvent({
+        category: "faucet",
+        action: "claim",
+        label: "error",
+        chain_id: chainId,
+        errorMsg: error instanceof Error ? error.message : "Unknown error",
+      });
+    },
+    onSettled: () => {
+      return queryClient.invalidateQueries([
+        "testnet-faucet-can-claim",
+        chainId,
+      ]);
+    },
+  });
+
+  const canClaimFaucetQuery = useQuery({
+    queryKey: ["testnet-faucet-can-claim", chainId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/testnet-faucet/can-claim?chainId=${chainId}`,
+      );
+      if (!response.ok) {
+        throw new Error("Failed to get claim status");
+      }
+      const data = (await response.json()) as CanClaimResponseType;
+      return data;
     },
   });
-  const router = useRouter();
 
   const isFaucetEmpty =
     faucetWalletBalanceQuery.data !== undefined &&
     faucetWalletBalanceQuery.data.value < toUnits("1", 17);
 
-  // checking faucet balance
-  if (faucetWalletBalanceQuery.isLoading) {
+  // loading state
+  if (faucetWalletBalanceQuery.isLoading || canClaimFaucetQuery.isLoading) {
     return (
       <Button variant="secondary" className="w-full gap-2">
-        Checking Faucet Balance <Spinner className="size-3" />
+        Checking Faucet <Spinner className="size-3" />
       </Button>
     );
   }
@@ -85,17 +129,25 @@ export function FaucetButton({
   // faucet is empty
   if (isFaucetEmpty) {
     return (
-      <Button variant="outline" disabled className="w-full">
-        Faucet is empty right now, come back later
+      <Button variant="secondary" disabled className="w-full !opacity-100 ">
+        Faucet is empty right now
       </Button>
     );
   }
 
-  // not eligible to claim right now
-  if (ttlSeconds > 0) {
+  // Can not claim
+  if (canClaimFaucetQuery.data && canClaimFaucetQuery.data.canClaim === false) {
     return (
-      <Button variant="outline" className="w-full" disabled>
-        Your next claim is available {formatTime(ttlSeconds)}
+      <Button variant="secondary" className="w-full !opacity-100 " disabled>
+        {canClaimFaucetQuery.data.type === "throttle" && (
+          <>
+            Your next claim is available{" "}
+            {formatTime(canClaimFaucetQuery.data.ttlSeconds)}
+          </>
+        )}
+
+        {canClaimFaucetQuery.data.type === "unsupported-chain" &&
+          "Faucet is empty right now"}
       </Button>
     );
   }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/MobileMenu.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { MenuIcon } from "lucide-react";
-import { useState } from "react";
-import type { ChainMetadata } from "thirdweb/chains";
-import { SidebarContent } from "../server/sidebar-content";
-
-export function MobileMenu(props: {
-  chain: ChainMetadata;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button size="icon" variant="outline" className="lg:hidden">
-          <MenuIcon strokeWidth={1} />
-        </Button>
-      </DialogTrigger>
-      <DialogContent
-        className="p-0"
-        dialogCloseClassName="hidden"
-        onClick={(e) => {
-          if (e.target instanceof HTMLAnchorElement) {
-            setIsOpen(false);
-          }
-        }}
-      >
-        <SidebarContent chain={props.chain} />
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx

@@ -2,17 +2,29 @@
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { thirdwebClient } from "@/constants/client";
+import { useTrack } from "hooks/analytics/useTrack";
+import { defineDashboardChain } from "lib/defineDashboardChain";
 import { useTheme } from "next-themes";
-import { defineChain } from "thirdweb";
 import { PayEmbed } from "thirdweb/react";
 import { getSDKTheme } from "../../../../../../components/sdk-component-theme";
 
 export function PayModalButton(props: { chainId: number; label: string }) {
   const { theme } = useTheme();
+  const trackEvent = useTrack();
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="primary" className="w-full">
+        <Button
+          variant="primary"
+          className="w-full"
+          onClick={() => {
+            trackEvent({
+              category: "pay",
+              action: "buy",
+              label: "attempt",
+            });
+          }}
+        >
           {props.label}
         </Button>
       </DialogTrigger>
@@ -26,8 +38,38 @@ export function PayModalButton(props: { chainId: number; label: string }) {
           theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
           className="!w-auto"
           payOptions={{
+            onPurchaseSuccess(info) {
+              if (
+                info.type === "crypto" &&
+                info.status.status !== "NOT_FOUND"
+              ) {
+                trackEvent({
+                  category: "pay",
+                  action: "buy",
+                  label: "success",
+                  type: info.type,
+                  chainId: info.status.quote.toToken.chainId,
+                  tokenAddress: info.status.quote.toToken.tokenAddress,
+                  amount: info.status.quote.toAmount,
+                });
+              }
+
+              if (info.type === "fiat" && info.status.status !== "NOT_FOUND") {
+                trackEvent({
+                  category: "pay",
+                  action: "buy",
+                  label: "success",
+                  type: info.type,
+                  chainId: info.status.quote.toToken.chainId,
+                  tokenAddress: info.status.quote.toToken.tokenAddress,
+                  amount: info.status.quote.estimatedToTokenAmount,
+                });
+              }
+            },
             prefillBuy: {
-              chain: defineChain(props.chainId),
+              // Do not include local chain overrides for chain pages
+              // eslint-disable-next-line no-restricted-syntax
+              chain: defineDashboardChain(props.chainId, undefined),
               allowEdits: {
                 chain: false,
                 amount: true,

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx

@@ -3,9 +3,9 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { thirdwebClient } from "@/constants/client";
+import { isProd } from "@/constants/env";
 import { useQuery } from "@tanstack/react-query";
-import { isProd } from "constants/rpc";
-import { thirdwebClient } from "lib/thirdweb-client";
 import { CircleCheck, XIcon } from "lucide-react";
 import { useState } from "react";
 import { hostnameEndsWith } from "utils/url";

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ChainOverviewSection.tsx

@@ -1,7 +1,6 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
-import React from "react";
 import type { ChainMetadata } from "thirdweb/chains";
 import { ChainLiveStats } from "../client/live-stats";
 import { SectionTitle } from "./SectionTitle";

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx

@@ -1,20 +1,15 @@
-import { getIpAddress } from "lib/ip";
-import { cacheTtl } from "lib/redis";
 import type { ChainMetadata } from "thirdweb/chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
 import { FaucetButton } from "../client/FaucetButton";
 import { GiftIcon } from "../icons/GiftIcon";
 import { SectionTitle } from "./SectionTitle";
 
-const amountToGive = "0.1";
+const amountToGive = "0.01";
 
 export async function FaucetSection(props: { chain: ChainMetadata }) {
   const { chain } = props;
 
   // Check eligibilty.
-  const ipAddress = getIpAddress();
-  const cacheKey = `testnet-faucet:${chain.chainId}:${ipAddress}`;
-  const ttlSeconds = await cacheTtl(cacheKey);
   const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
 
   return (
@@ -45,11 +40,7 @@ export async function FaucetSection(props: { chain: ChainMetadata }) {
 
           <div className="h-8" />
 
-          <FaucetButton
-            chain={chain}
-            ttlSeconds={ttlSeconds}
-            amount={amountToGive}
-          />
+          <FaucetButton chain={chain} amount={amountToGive} />
         </div>
       </div>
     </section>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx

@@ -1,10 +1,9 @@
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { defineChain } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import { mapV4ChainToV5Chain } from "../../../../../../../contexts/map-chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
-import { MobileMenu } from "../client/MobileMenu";
 import { AddChainToWallet } from "../client/add-chain-to-wallet";
 
 type ChainHeaderProps = {
@@ -48,16 +47,19 @@ export function ChainHeader(props: ChainHeaderProps) {
         <div className="pt-3 lg:pt-6">
           {/* Desktop only */}
           <div className="hidden lg:flex flex-row gap-2">
-            <AddChainToWallet chain={defineChain(props.chain)} />
+            <AddChainToWallet
+              chain={
+                // Do not include chain overrides for chain pages
+                // eslint-disable-next-line no-restricted-syntax
+                mapV4ChainToV5Chain(props.chain)
+              }
+            />
             <Button variant="primary" asChild>
               <Link href="https://thirdweb.com/dashboard" target="_blank">
                 Get started with thirdweb
               </Link>
             </Button>
           </div>
-
-          {/* Mobile Menu */}
-          <MobileMenu chain={props.chain} />
         </div>
       </div>
     </div>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/sidebar-content.tsx

@@ -1,70 +0,0 @@
-import { ArrowLeftIcon } from "lucide-react";
-import Link from "next/link";
-import type React from "react";
-import type { ChainMetadata } from "thirdweb/chains";
-import { Button } from "../../../../../../../@/components/ui/button";
-import { Separator } from "../../../../../../../@/components/ui/separator";
-import { NavLink } from "../client/nav-link.client";
-
-export type SidebarContentProps = {
-  chain: ChainMetadata;
-};
-
-export function SidebarContent(props: SidebarContentProps) {
-  return (
-    <div className="p-4 md:pt-8 sticky top-0">
-      {/* Desktop only */}
-      <div className="lg:flex items-center gap-1.5 mb-5 hidden flex-wrap">
-        <Link
-          href="/chainlist"
-          className="text-secondary-foreground hover:text-foreground text-sm"
-        >
-          Chainlist
-        </Link>
-        <span className="text-secondary-foreground text-sm"> / </span>
-        <Link href={`/${props.chain.slug}`} className="text-foreground text-sm">
-          {props.chain.name.replace("Mainnet", "")}
-        </Link>
-      </div>
-
-      <div className="flex flex-col gap-2 lg:gap-4 lg:border-l-2 lg:pl-1">
-        <SidebarNavLink href={`/${props.chain.slug}`} label="Overview" />
-        <SidebarNavLink
-          href={`/${props.chain.slug}/popular`}
-          label="Popular Contracts"
-        />
-      </div>
-
-      {/* mobile obly */}
-      <div className="lg:hidden">
-        <Separator className="mt-10 mb-4" />
-        <SidebarNavLink
-          href="/chainlist"
-          label={
-            <>
-              <ArrowLeftIcon className="size-4" />
-              <span className="text-secondary-foreground">View all chains</span>
-            </>
-          }
-        />
-      </div>
-    </div>
-  );
-}
-
-function SidebarNavLink(props: {
-  href: string;
-  label: React.ReactNode;
-}) {
-  return (
-    <Button size="sm" variant="ghost" asChild>
-      <NavLink
-        href={props.href}
-        className="!text-left justify-start flex gap-2 h-auto py-3.5 lg:text-secondary-foreground before:absolute before:h-full relative before:w-[2px] before:-left-1.5 lg:py-0 lg:h-auto lg:hover:bg-transparent"
-        activeClassName="bg-accent lg:text-foreground lg:bg-transparent lg:before:bg-link-foreground "
-      >
-        {props.label}
-      </NavLink>
-    </Button>
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -1,14 +1,15 @@
+import { BurgerMenuButton } from "@/components/blocks/BurgerMenuButton";
+import { Sidebar } from "@/components/blocks/Sidebar";
 import { Button } from "@/components/ui/button";
-import { TicketCheckIcon } from "lucide-react";
+import { ArrowLeftIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { defineChain } from "thirdweb";
+import { mapV4ChainToV5Chain } from "../../../../../contexts/map-chains";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
 import { ChainHeader } from "./components/server/chain-header";
-import { SidebarContent } from "./components/server/sidebar-content";
 
 // TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
 
@@ -45,11 +46,37 @@ export default async function ChainPageLayout({
 
   const chainMetadata = await getChainMetadata(chain.chainId);
 
+  const sidebarLinks = [
+    {
+      href: `/${chain.slug}`,
+      label: "Overview",
+    },
+    {
+      href: `/${chain.slug}/popular`,
+      label: "Popular Contracts",
+    },
+  ];
+
   return (
     <div className="container flex flex-row h-full">
-      <aside className="w-[280px] flex-shrink-0 hidden lg:block">
-        <SidebarContent chain={chain} />
-      </aside>
+      <Sidebar
+        header={
+          <div className="flex items-center gap-1.5 mb-5 flex-wrap">
+            <Link
+              href="/chainlist"
+              className="text-secondary-foreground hover:text-foreground text-sm"
+            >
+              Chainlist
+            </Link>
+            <span className="text-secondary-foreground text-sm"> / </span>
+            <Link href={`/${chain.slug}`} className="text-foreground text-sm">
+              {chain.name.replace("Mainnet", "")}
+            </Link>
+          </div>
+        }
+        links={sidebarLinks}
+      />
+
       <div className="flex flex-col w-full lg:px-6 lg:border-x pb-10">
         {/* Icon + Background */}
         <ChainHeader
@@ -58,6 +85,23 @@ export default async function ChainPageLayout({
           chain={chain}
         />
 
+        <div className="flex lg:hidden justify-end">
+          <BurgerMenuButton
+            links={sidebarLinks}
+            footer={
+              <div className="mt-5 border-t pt-6 pb-2">
+                <Link
+                  href="/chainlist"
+                  className="px-2 text-sm flex justify-start gap-2 items-center text-secondary-foreground hover:text-foreground"
+                >
+                  <ArrowLeftIcon className="size-4" />
+                  View all chains
+                </Link>
+              </div>
+            }
+          />
+        </div>
+
         <div className="h-4 md:h-8" />
 
         <div className="flex flex-col gap-3 md:gap-2">
@@ -99,7 +143,13 @@ export default async function ChainPageLayout({
           {/* mobile action row */}
           <div className="sm:hidden w-full">
             <div className="grid grid-cols-2 gap-2">
-              <AddChainToWallet chain={defineChain(chain)} />
+              <AddChainToWallet
+                chain={
+                  // Do not include chain overrides for chain pages
+                  // eslint-disable-next-line no-restricted-syntax
+                  mapV4ChainToV5Chain(chain)
+                }
+              />
               <Button variant="primary">
                 <Link href="https://thirdweb.com/dashboard" target="_blank">
                   Get started

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx

@@ -1,10 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
-import {
-  DASHBOARD_THIRDWEB_SECRET_KEY,
-  IPFS_GATEWAY_URL,
-} from "@/constants/env";
+import { thirdwebClient } from "@/constants/client";
 import { ImageResponse } from "next/og";
-import { createThirdwebClient } from "thirdweb";
 import { download } from "thirdweb/storage";
 import { fetchChain } from "utils/fetchChain";
 
@@ -66,15 +62,6 @@ const TWLogo: React.FC = () => (
 export default async function Image({
   params,
 }: { params: { chain_id: string } }) {
-  const thirdwebClient = createThirdwebClient({
-    secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-    config: {
-      storage: {
-        gatewayUrl: IPFS_GATEWAY_URL,
-      },
-    },
-  });
-
   const chain = await fetchChain(params.chain_id);
   if (!chain) {
     return new Response("Chain not found", { status: 400 });

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button";
+import { fetchTopContracts } from "lib/search";
 import { ArrowRightIcon, CircleAlertIcon } from "lucide-react";
 import Link from "next/link";
-import { type SortBy, fetchTopContracts } from "../../../../../lib/search";
 import { TrendingContractSection } from "../../../trending/components/trending-table";
 import { getChain, getChainMetadata } from "../../utils";
 import { BuyFundsSection } from "./components/server/BuyFundsSection";
@@ -14,7 +14,6 @@ import { ExplorersSection } from "./components/server/explorer-section";
 
 export default async function Page(props: {
   params: { chain_id: string };
-  searchParams: { page?: number; sortBy?: SortBy };
 }) {
   const chain = await getChain(props.params.chain_id);
   const chainMetadata = await getChainMetadata(chain.chainId);
@@ -22,8 +21,6 @@ export default async function Page(props: {
 
   const topContracts = await fetchTopContracts({
     chainId: chain.chainId,
-    page: props.searchParams.page,
-    sortBy: props.searchParams.sortBy,
     perPage: 3,
     timeRange: "month",
   });
@@ -48,13 +45,12 @@ export default async function Page(props: {
         </section>
       )}
 
-      {/* Buy Funds */}
-      {chain.services.find((c) => c.service === "pay" && c.enabled) && (
+      {/* Faucet / Buy Funds */}
+      {chain.testnet ? (
+        <FaucetSection chain={chain} />
+      ) : chain.services.find((c) => c.service === "pay" && c.enabled) ? (
         <BuyFundsSection chain={chain} />
-      )}
-
-      {/* Faucet */}
-      {chain.testnet && <FaucetSection chain={chain} />}
+      ) : null}
 
       {/* Chain Overview */}
       <ChainOverviewSection chain={chain} />
@@ -83,8 +79,8 @@ export default async function Page(props: {
           <TrendingContractSection
             topContracts={topContracts}
             chainId={chain.chainId}
-            searchParams={props.searchParams}
             showPagination={false}
+            searchParams={undefined}
           />
         </section>
       )}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/popular/page.tsx

@@ -1,9 +1,11 @@
+import { type SortBy, fetchTopContracts } from "lib/search";
 import { CircleAlertIcon } from "lucide-react";
-import React from "react";
-import { type SortBy, fetchTopContracts } from "../../../../../../lib/search";
 import { TrendingContractSection } from "../../../../trending/components/trending-table";
 import { getChain } from "../../../utils";
 
+// we're using searchParams here - use dynamic rendering
+export const dynamic = "force-dynamic";
+
 export default async function Page(props: {
   params: { chain_id: string };
   searchParams: { page?: number; sortBy?: SortBy };

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx

@@ -1,14 +1,7 @@
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { IPFS_GATEWAY_URL } from "@/constants/env";
-import { DASHBOARD_THIRDWEB_SECRET_KEY, PROD_OR_DEV_URL } from "constants/rpc";
-import {
-  ZERO_ADDRESS,
-  createThirdwebClient,
-  defineChain,
-  toTokens,
-} from "thirdweb";
-import type { ChainMetadata } from "thirdweb/chains";
+import { thirdwebClient } from "@/constants/client";
+import { ZERO_ADDRESS, toTokens } from "thirdweb";
 import {
   eth_getBlockByHash,
   eth_getTransactionByHash,
@@ -16,34 +9,19 @@ import {
   getRpcClient,
 } from "thirdweb/rpc";
 import { hexToNumber, shortenAddress, toEther } from "thirdweb/utils";
+import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { getChain } from "../../../utils";
 
-function defineDashboardChain(chainId: number, dashboardChain?: ChainMetadata) {
-  return defineChain({
-    id: chainId,
-    rpc:
-      dashboardChain?.rpc?.[0] || `https://${chainId}.rpc.${PROD_OR_DEV_URL}`,
-    slug: dashboardChain?.slug,
-    nativeCurrency: dashboardChain?.nativeCurrency,
-  });
-}
-
 export default async function Page(props: {
   params: { chain_id: string; txHash: `0x${string}` };
 }) {
-  const thirdwebClient = createThirdwebClient({
-    secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-    config: {
-      storage: {
-        gatewayUrl: IPFS_GATEWAY_URL,
-      },
-    },
-  });
   const chain = await getChain(props.params.chain_id);
 
   const rpcRequest = getRpcClient({
     client: thirdwebClient,
-    chain: defineDashboardChain(chain.chainId),
+    // Do not include chain overrides for chain pages
+    // eslint-disable-next-line no-restricted-syntax
+    chain: mapV4ChainToV5Chain(chain),
   });
 
   const [transaction, receipt] = await Promise.all([

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx

@@ -10,8 +10,9 @@ import {
 } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { ChevronDownIcon, Filter, XIcon } from "lucide-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import type React from "react";
 import { type PropsWithChildren, useCallback, useMemo } from "react";
 import { products } from "../../../components/server/products";
@@ -73,7 +74,7 @@ type FilterResetButtonProps = {
 const FilterResetButton: React.FC<
   PropsWithChildren<FilterResetButtonProps>
 > = ({ filters, children }) => {
-  const router = useRouter();
+  const router = useDashboardRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const mutableSearchParams = useMemo(() => {
@@ -124,7 +125,7 @@ type ChainTypeFilterProps = { sectionOnly?: boolean };
 export const ChainTypeFilter: React.FC<ChainTypeFilterProps> = ({
   sectionOnly,
 }) => {
-  const router = useRouter();
+  const router = useDashboardRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
@@ -228,7 +229,7 @@ type ChainOptionsFilterProps = { sectionOnly?: boolean };
 export const ChainOptionsFilter: React.FC<ChainOptionsFilterProps> = ({
   sectionOnly,
 }) => {
-  const router = useRouter();
+  const router = useDashboardRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const mutableSearchParams = useMemo(() => {
@@ -332,7 +333,7 @@ type ChainServiceFilterProps = { sectionOnly?: boolean };
 export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
   sectionOnly,
 }) => {
-  const router = useRouter();
+  const router = useDashboardRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const mutableSearchParams = useMemo(() => {

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/pagination.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { PaginationButtons } from "@/components/pagination-buttons";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { usePathname, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
-import { PaginationButtons } from "../../../../../../@/components/pagination-buttons";
 
 type ChainlistPaginationProps = {
   totalPages: number;
@@ -15,7 +16,7 @@ export const ChainlistPagination: React.FC<ChainlistPaginationProps> = ({
 }) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const router = useRouter();
+  const router = useDashboardRouter();
 
   const createPageURL = useCallback(
     (pageNumber: number) => {

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/search.tsx

@@ -2,8 +2,9 @@
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { SearchIcon, XCircleIcon } from "lucide-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
@@ -15,7 +16,7 @@ function cleanUrl(url: string) {
 }
 
 export const SearchInput: React.FC = () => {
-  const router = useRouter();
+  const router = useDashboardRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();