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
@@ -144,8 +164,9 @@ jobs:
           fi
 
   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

.gitignore

@@ -30,3 +30,6 @@ 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",
@@ -80,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,16 +42,15 @@
     "@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/sdk": "workspace:*",
@@ -67,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",
@@ -81,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",
@@ -105,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",
@@ -116,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",
@@ -133,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/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

@@ -4,7 +4,6 @@ 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 { 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/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/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/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/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 { 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

@@ -8,10 +8,5 @@ const LOGGED_IN_ONLY_PATHS = [
 ];
 
 export function isLoginRequired(pathname: string) {
-  // exceptions from LOGGED_IN_ONLY_PATHS
-  if (pathname.startsWith("/dashboard/connect/playground")) {
-    return false;
-  }
-
   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/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,12 +3,16 @@
 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";
@@ -16,10 +20,6 @@ import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import type { Chain } from "thirdweb";
 import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
-import { getSDKTheme } from "../../../../app/components/sdk-component-theme";
-import { CustomChainRenderer } from "../../../../components/selects/CustomChainRenderer";
-import { mapV4ChainToV5Chain } from "../../../../contexts/map-chains";
-import { useSetIsNetworkConfigModalOpen } from "../../../../hooks/networkConfigModal";
 import { useFavoriteChains } from "../../hooks/useFavoriteChains";
 import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";

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

@@ -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/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

@@ -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,5 +1,5 @@
-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";
 

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,7 +1,8 @@
 import { isLoginRequired } from "@/constants/auth";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useQuery } from "@tanstack/react-query";
 import type { EnsureLoginResponse } from "app/api/auth/ensure-login/route";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { useRef } from "react";
 import {
   useActiveAccount,
@@ -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();

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

@@ -1,47 +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 { defineDashboardChain } from "lib/defineDashboardChain";
-import { thirdwebClient } from "lib/thirdweb-client";
 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,
-  // eslint-disable-next-line no-restricted-syntax
-  chain: defineDashboardChain(polygon.id, undefined),
-});
-
 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 {
@@ -97,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,18 +2,17 @@
 
 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, useQuery } from "@tanstack/react-query";
+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 { thirdwebClient } from "lib/thirdweb-client";
-import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { toUnits } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useActiveAccount, useWalletBalance } from "thirdweb/react";
-import { mapV4ChainToV5Chain } from "../../../../../../../contexts/map-chains";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -48,6 +47,9 @@ export function FaucetButton({
     client: thirdwebClient,
   });
   const trackEvent = useTrack();
+
+  const queryClient = useQueryClient();
+
   const claimMutation = useMutation({
     mutationFn: async () => {
       trackEvent({
@@ -64,7 +66,6 @@ export function FaucetButton({
         body: JSON.stringify({
           chainId: chainId,
           toAddress: address,
-          amount,
         }),
       });
 
@@ -80,7 +81,6 @@ export function FaucetButton({
         label: "success",
         chain_id: chainId,
       });
-      router.refresh();
     },
     onError: (error) => {
       trackEvent({
@@ -91,6 +91,12 @@ export function FaucetButton({
         errorMsg: error instanceof Error ? error.message : "Unknown error",
       });
     },
+    onSettled: () => {
+      return queryClient.invalidateQueries([
+        "testnet-faucet-can-claim",
+        chainId,
+      ]);
+    },
   });
 
   const canClaimFaucetQuery = useQuery({
@@ -107,8 +113,6 @@ export function FaucetButton({
     },
   });
 
-  const router = useRouter();
-
   const isFaucetEmpty =
     faucetWalletBalanceQuery.data !== undefined &&
     faucetWalletBalanceQuery.data.value < toUnits("1", 17);

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

@@ -2,6 +2,7 @@
 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 { PayEmbed } from "thirdweb/react";
@@ -9,10 +10,21 @@ 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,6 +38,34 @@ 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: {
               // Do not include local chain overrides for chain pages
               // eslint-disable-next-line no-restricted-syntax

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

@@ -4,7 +4,7 @@ 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;

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,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { type SortBy, fetchTopContracts } from "lib/search";
+import { fetchTopContracts } from "lib/search";
 import { ArrowRightIcon, CircleAlertIcon } from "lucide-react";
 import Link from "next/link";
 import { TrendingContractSection } from "../../../trending/components/trending-table";
@@ -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 { 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,8 +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 } from "constants/rpc";
-import { ZERO_ADDRESS, createThirdwebClient, toTokens } from "thirdweb";
+import { thirdwebClient } from "@/constants/client";
+import { ZERO_ADDRESS, toTokens } from "thirdweb";
 import {
   eth_getBlockByHash,
   eth_getTransactionByHash,
@@ -16,14 +15,6 @@ import { getChain } from "../../../utils";
 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({

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,7 +1,8 @@
 "use client";
 
 import { PaginationButtons } from "@/components/pagination-buttons";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { usePathname, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
 
 type ChainlistPaginationProps = {
@@ -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();
 

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

@@ -1,8 +1,9 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { Grid2X2Icon, ListIcon } from "lucide-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
 
 type hainListViewProps = {
@@ -12,7 +13,7 @@ type hainListViewProps = {
 export const ChainListView: React.FC<hainListViewProps> = ({ activeView }) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const router = useRouter();
+  const router = useDashboardRouter();
 
   const createPageURL = useCallback(
     (view: "grid" | "table") => {

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/page.tsx

@@ -96,12 +96,6 @@ async function getChainsToRender(params: SearchParams) {
       // if the chain does not have all of the services in the filter, return false to filter it out
       if (
         !urlServiceArray.every((service) => {
-          // TODO improve this
-          // We don't have "faucet" added in services array, so for now we just check if it's testnet or not
-          if (service === "faucet") {
-            return chain.testnet;
-          }
-
           return chain.services.find((s) => s.enabled && s.service === service);
         })
       ) {
@@ -154,6 +148,10 @@ export const metadata: Metadata = {
     "A list of EVM networks with RPCs, smart contracts, block explorers & faucets. Deploy smart contracts to all EVM chains with thirdweb.",
 };
 
+// we use headers() to determine if we should default to table or grid view by checking viewport
+// so this page needs to be forced as dynamic
+export const dynamic = "force-dynamic";
+
 export default function ChainListPage(props: { searchParams: SearchParams }) {
   const headersList = headers();
   const viewportWithHint = Number(

apps/dashboard/src/app/(dashboard)/(chain)/components/server/chain-icon.tsx

@@ -1,12 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import "server-only";
 
-import {
-  DASHBOARD_THIRDWEB_SECRET_KEY,
-  IPFS_GATEWAY_URL,
-} from "@/constants/env";
+import { thirdwebClient } from "@/constants/client";
+import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/env";
 import { cn } from "@/lib/utils";
-import { createThirdwebClient } from "thirdweb";
 import { resolveScheme } from "thirdweb/storage";
 
 const fallbackChainIcon =
@@ -17,16 +14,8 @@ export async function ChainIcon(props: {
   className?: string;
 }) {
   if (props.iconUrl) {
-    const client = createThirdwebClient({
-      secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-      config: {
-        storage: {
-          gatewayUrl: IPFS_GATEWAY_URL,
-        },
-      },
-    });
     const resolved = resolveScheme({
-      client,
+      client: thirdwebClient,
       uri: props.iconUrl,
     });
     const res = await fetch(resolved, {

apps/dashboard/src/app/(dashboard)/(chain)/types/chain.ts

@@ -6,12 +6,18 @@ export type ChainSupportedService =
   | "engine"
   | "account-abstraction"
   | "pay"
-  | "faucet"
-  | "rpc-edge";
+  | "rpc-edge"
+  | "chainsaw";
 
 export type ChainService = {
   service: ChainSupportedService;
   enabled: boolean;
+  status: "enabled" | "disabled";
+};
+
+export type ChainServices = {
+  chainId: number;
+  services: Array<ChainService>;
 };
 
 export type ChainMetadataWithServices = ChainMetadata & {

apps/dashboard/src/app/(dashboard)/(chain)/utils.ts

@@ -2,6 +2,8 @@ import "server-only";
 
 import { redirect } from "next/navigation";
 import type { ChainCTAProps } from "./[chain_id]/(chainPage)/components/server/cta-card";
+import zeroGCTA from "./temp-assets/0gCTA.png";
+import zeroGBanner from "./temp-assets/0gLabsBanner.png";
 import alephZeroBaner from "./temp-assets/AlephZeroBanner.jpg";
 import alephZeroCTA from "./temp-assets/AlephZeroCTA.jpg";
 import ancient8Banner from "./temp-assets/ancient8-banner.png";
@@ -20,48 +22,75 @@ import rootStockCTABG from "./temp-assets/rootstock-cta.png";
 import superpositionBanner from "./temp-assets/superpositionBanner.png";
 import superpositionCTA from "./temp-assets/superpositionCTA.png";
 import thirdwebBanner from "./temp-assets/thirdweb-banner.png";
+import treasureBanner from "./temp-assets/treasureBanner.png";
+import treasureCTA from "./temp-assets/treasureCta.png";
 import vanarBanner from "./temp-assets/vanar-banner.png";
 import vanarCTABG from "./temp-assets/vanar-cta.png";
 import xaiBanner from "./temp-assets/xai-banner.jpg";
 
-import type { ChainMetadataWithServices } from "./types/chain";
-
 // END TEMPORARY
 
+import type { ChainMetadata } from "thirdweb/chains";
+import type {
+  ChainMetadataWithServices,
+  ChainService,
+  ChainServices,
+} from "./types/chain";
+
 const THIRDWEB_API_HOST =
   process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
 
 export async function getChains() {
-  const response = await fetch(
-    `${THIRDWEB_API_HOST}/v1/chains?includeServices=true`,
-    // revalidate every hour
-    { next: { revalidate: 60 * 60 } },
-  );
+  const [chains, chainServices] = await Promise.all([
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains`,
+      // revalidate every 60 minutes
+      { next: { revalidate: 60 * 60 } },
+    ).then((res) => res.json()) as Promise<{ data: ChainMetadata[] }>,
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains/services`,
+      // revalidate every 60 minutes
+      { next: { revalidate: 60 * 60 } },
+    ).then((res) => res.json()) as Promise<{
+      data: Record<number, Array<ChainService>>;
+    }>,
+  ]);
 
-  if (!response.ok) {
-    response.body?.cancel();
+  if (!chains.data.length) {
     throw new Error("Failed to fetch chains");
   }
-  return (await response.json()).data as ChainMetadataWithServices[];
+  return chains.data.map((c) => ({
+    ...c,
+    services: chainServices.data[c.chainId] || [],
+  })) satisfies ChainMetadataWithServices[];
 }
 
 export async function getChain(
   chainIdOrSlug: string,
 ): Promise<ChainMetadataWithServices> {
-  const res = await fetch(
-    `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}?includeServices=true`,
-    // revalidate every 15 minutes
-    { next: { revalidate: 15 * 60 } },
-  );
+  const [chain, chainServices] = await Promise.all([
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}`,
+      // revalidate every 15 minutes
+      { next: { revalidate: 15 * 60 } },
+    ).then((res) => res.json()) as Promise<{ data: ChainMetadata }>,
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}/services`,
+      // revalidate every 15 minutes
+      { next: { revalidate: 15 * 60 } },
+    ).then((res) => res.json()) as Promise<{ data: ChainServices }>,
+  ]);
 
-  const result = await res.json();
-  if (!result.data) {
+  if (!chain.data) {
     redirect("/404");
   }
-  return result.data as ChainMetadataWithServices;
+  return {
+    ...chain.data,
+    services: chainServices.data.services,
+  } satisfies ChainMetadataWithServices;
 }
 
-type ChainMetadata = Partial<{
+type ExtraChainMetadata = Partial<{
   headerImgUrl: string;
   about: string;
   gasSponsored: boolean;
@@ -275,13 +304,13 @@ const chainMetaRecord = {
   },
   //0G-Newton-Testnet
   16600: {
-    headerImgUrl: thirdwebBanner.src,
+    headerImgUrl: zeroGBanner.src,
     about:
-      "0G is an infinitely scalable data availability layer and data storage system that provides the necessary infrastructure to scale Web3 and bring novel use cases on-chain.",
+      "ZeroGravity (0G) is the first infinitely scalable and decentralized data availability layer with a built-in general-purpose storage layer.",
     cta: {
-      backgroundImageUrl: thirdwebCTA.src,
-      title: "",
-      buttonLink: "https://0g.ai/",
+      backgroundImageUrl: zeroGCTA.src,
+      title: "Unlock web3's full potential with 0G",
+      buttonLink: "https://docs.0g.ai/0g-doc",
       buttonText: "Learn more",
     },
   },
@@ -321,12 +350,24 @@ const chainMetaRecord = {
       buttonText: "Learn more",
     },
   },
-} satisfies Record<number, ChainMetadata>;
+  //treasure
+  978657: {
+    headerImgUrl: treasureBanner.src,
+    about:
+      'Treasure is the decentralized game console. Powered by $MAGIC, the Treasure L2 serves as the base layer for the best cryptonative games and projects. Treasure and its network of "Infinity Chains" L3s offers EVM compatibility, massive scale, and decentralized infrastructure enshrined throughout. Combined with a passionate community and builder support, developers on Treasure are equipped with all of the tools they need to not only build great games and products, but also distribute to the masses.',
+    cta: {
+      backgroundImageUrl: treasureCTA.src,
+      title: "Start building on Treasure!",
+      buttonLink: "https://portal.treasure.lol",
+      buttonText: "Learn more",
+    },
+  },
+} satisfies Record<number, ExtraChainMetadata>;
 // END TEMPORARY
 
 export async function getChainMetadata(
   chainId: number,
-): Promise<ChainMetadata | null> {
+): Promise<ExtraChainMetadata | null> {
   // TODO: fetch this from the API
   if (chainId in chainMetaRecord) {
     return chainMetaRecord[chainId as keyof typeof chainMetaRecord];

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/layout.tsx

@@ -51,3 +51,6 @@ export default async function Layout({
     </div>
   );
 }
+
+// because cookies() is used
+export const dynamic = "force-dynamic";

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx

@@ -15,11 +15,11 @@ import { ImageUpload } from "@/components/ui/image-upload";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItemButton } from "@/components/ui/radio-group";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -49,7 +49,7 @@ export function CreateEcosystemForm() {
   >();
   const { data: billingAccountInfo } = useAccount();
 
-  const router = useRouter();
+  const router = useDashboardRouter();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/page.tsx

@@ -113,3 +113,6 @@ export default async function Page() {
     </main>
   );
 }
+
+// because cookies() is used
+export const dynamic = "force-dynamic";

apps/dashboard/src/app/(dashboard)/dashboard/connect/layout.tsx

@@ -7,20 +7,15 @@ const SIDEBAR_SECTIONS = [
     title: "Connect",
     items: [
       {
-        id: "playground",
-        title: "Playground",
-        href: "/dashboard/connect/playground",
+        id: "embedded-wallets",
+        title: "In-App Wallets",
+        href: "/dashboard/connect/in-app-wallets",
       },
       {
         id: "analytics",
         title: "Analytics",
         href: "/dashboard/connect/analytics",
       },
-      {
-        id: "embedded-wallets",
-        title: "In-App Wallets",
-        href: "/dashboard/connect/in-app-wallets",
-      },
       {
         id: "ecosystem",
         title: "Ecosystem Wallets",
@@ -36,6 +31,11 @@ const SIDEBAR_SECTIONS = [
         title: "Pay",
         href: "/dashboard/connect/pay",
       },
+      {
+        id: "playground",
+        title: "Playground",
+        href: "https://playground.thirdweb.com/connect/sign-in/button",
+      },
     ],
   },
 ] satisfies Array<SidebarNavSection>;

apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/webhooks.client.tsx

@@ -1,6 +1,5 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -247,9 +246,7 @@ function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
 
             {/* Note: this is a "fake" form field since there is nothing to select yet */}
             <FormItem>
-              <FormLabel>
-                Event Type <Badge variant="outline">Coming Soon</Badge>
-              </FormLabel>
+              <FormLabel>Event Type</FormLabel>
               <Select disabled defaultValue="purchase_complete">
                 <SelectTrigger className="w-full">
                   <SelectValue placeholder="Purchase Complete" />

apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/page.tsx

@@ -79,3 +79,6 @@ export default async function DashboardConnectPayPage() {
     </div>
   );
 }
+
+// because cookies() is used
+export const dynamic = "force-dynamic";

apps/dashboard/src/app/(dashboard)/support/components/create-ticket.action.ts

@@ -73,7 +73,7 @@ function prepareEmailBody(
 }
 
 export async function createTicketAction(
-  previousState: State,
+  _previousState: State,
   formData: FormData,
 ) {
   const cookieManager = cookies();

apps/dashboard/src/app/(dashboard)/tools/components/tabs.tsx

@@ -7,6 +7,7 @@ const links: {
   name: string;
   segment: string;
 }[] = [
+  { name: "Transaction Simulator", segment: "transaction-simulator" },
   { name: "Wei Converter", segment: "wei-converter" },
   { name: "Hex Converter", segment: "hex-converter" },
   { name: "Unix Time Converter", segment: "unixtime-converter" },

apps/dashboard/src/app/(dashboard)/tools/hex-converter/components/HexConverter.tsx

@@ -21,7 +21,7 @@ export const HexConverter = () => {
         setHex(toHex(args.dec));
         setDec(args.dec);
       }
-    } catch (e) {}
+    } catch {}
   };
 
   return (

apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import { CodeBlock } from "@/components/ui/CodeBlock";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { thirdwebClient } from "@/constants/client";
+import type { Abi, AbiFunction } from "abitype";
+import { useV5DashboardChain } from "lib/v5-adapter";
+import { ArrowDown } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { MdOutlineAccountBalanceWallet } from "react-icons/md";
+import {
+  getContract,
+  prepareContractCall,
+  resolveMethod,
+  simulateTransaction,
+  toSerializableTransaction,
+  toWei,
+} from "thirdweb";
+import { resolveContractAbi } from "thirdweb/contract";
+import { useActiveAccount } from "thirdweb/react";
+import { parseAbiParams } from "thirdweb/utils";
+import { ShareButton } from "../../components/share";
+
+export type SimulateTransactionForm = {
+  chainId: number;
+  from: string;
+  to: string;
+  functionName: string;
+  functionArgs: string;
+  value: string;
+};
+
+type State = {
+  success: boolean;
+  message: string;
+  codeExample: string;
+  shareUrl: string;
+};
+
+export const TransactionSimulator = (props: {
+  searchParams: Partial<SimulateTransactionForm>;
+}) => {
+  const activeAccount = useActiveAccount();
+  const initialFormValues = props.searchParams;
+  const [isLoading, setIsLoading] = useState(false);
+  const [state, setState] = useState<State>({
+    success: false,
+    message: "",
+    codeExample: "",
+    shareUrl: "",
+  });
+  const form = useForm<SimulateTransactionForm>();
+  const chainId = form.watch("chainId");
+  const chain = useV5DashboardChain(
+    Number.isInteger(Number(chainId)) ? chainId : undefined,
+  );
+
+  async function handleSimulation(data: SimulateTransactionForm) {
+    try {
+      setIsLoading(true);
+      const { from, to, value, functionArgs, functionName } = data;
+      if (!chain) {
+        throw new Error("Invalid chainId");
+      }
+      const contract = getContract({
+        client: thirdwebClient,
+        chain,
+        address: to,
+      });
+      const abi = (await resolveContractAbi(contract)) as Abi;
+      const abiItem = abi.find(
+        (o) => o.type === "function" && o.name === functionName,
+      ) as AbiFunction;
+      if (!abiItem) {
+        throw new Error(`Contract does not have method \`${functionName}]\``);
+      }
+      const inputParams = functionArgs
+        ? functionArgs.split(/[\n,]+/).map((arg) => arg.trim())
+        : [];
+      if (abiItem.inputs.length !== inputParams.length) {
+        throw new Error(
+          `Param length mismatch. Expected ${abiItem.inputs.length} params. Received ${
+            inputParams.length
+          }`,
+        );
+      }
+      // Parse to proper types
+      const types = abiItem.inputs.map((o) => o.type);
+      const params = parseAbiParams(types, inputParams);
+      const codeExample = getCodeExample(
+        {
+          chainId: chain.id,
+          from,
+          to,
+          value,
+          functionArgs,
+          functionName,
+        },
+        params,
+      );
+      const shareUrl = getShareUrl({
+        chainId: chain.id,
+        from,
+        to,
+        value,
+        functionArgs,
+        functionName,
+      });
+      const transaction = prepareContractCall({
+        contract,
+        method: resolveMethod(functionName),
+        params,
+        value: value ? toWei(value) : undefined,
+      });
+      const [simulateResult, populatedTransaction] = await Promise.all([
+        simulateTransaction({
+          from,
+          transaction,
+        }),
+        toSerializableTransaction({
+          from,
+          transaction,
+        }),
+      ]);
+      setState({
+        success: true,
+        message: `result: ${simulateResult.length > 0 ? simulateResult.join(",") : "Method did not return a result."}\n
+${Object.keys(populatedTransaction)
+  .map((key) => {
+    let _val = populatedTransaction[key as keyof typeof populatedTransaction];
+    if (key === "value" && !_val) {
+      _val = 0;
+    }
+    return `${key}: ${_val}\n`;
+  })
+  .join("")}`,
+        codeExample,
+        shareUrl,
+      });
+    } catch (err) {
+      setState({
+        success: false,
+        message: `${err}`,
+        codeExample: "",
+        shareUrl: "",
+      });
+    }
+    setIsLoading(false);
+  }
+  return (
+    <div className="max-w-[800px] space-y-4">
+      <p>
+        Simulate a transaction on any EVM chain. Account Abstraction support is
+        coming soon.
+      </p>
+
+      <form
+        onSubmit={form.handleSubmit(handleSimulation)}
+        className="space-y-4 flex-col"
+      >
+        <Card className="flex flex-col gap-4 p-4">
+          <div className="flex gap-2 sm:items-center flex-col sm:flex-row">
+            <Label htmlFor="chainId" className="min-w-60">
+              Chain ID
+            </Label>
+            <Input
+              type="number"
+              required
+              placeholder="The chain ID of the sender wallet"
+              defaultValue={initialFormValues.chainId}
+              {...form.register("chainId", { required: true })}
+              // Hide spinner.
+              className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            />
+          </div>
+
+          <div className="flex gap-2 sm:items-center flex-col sm:flex-row">
+            <Label htmlFor="from" className="min-w-60">
+              From Address
+            </Label>
+            <Input
+              required
+              placeholder="The sender wallet address"
+              defaultValue={initialFormValues.from}
+              {...form.register("from", { required: true })}
+            />
+            {activeAccount && (
+              <ToolTipLabel label="Use current wallet address">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => form.setValue("from", activeAccount.address)}
+                >
+                  <MdOutlineAccountBalanceWallet />
+                </Button>
+              </ToolTipLabel>
+            )}
+          </div>
+        </Card>
+
+        <div className="flex justify-center">
+          <ArrowDown />
+        </div>
+
+        <Card className="flex flex-col gap-4 p-4">
+          <div className="flex gap-2 sm:items-center flex-col sm:flex-row">
+            <Label htmlFor="to" className="min-w-60">
+              Contract Address
+            </Label>
+            <Input
+              placeholder="The contract address to call"
+              defaultValue={initialFormValues.to}
+              {...form.register("to", { required: true })}
+            />
+          </div>
+          <div className="flex gap-2 sm:items-center flex-col sm:flex-row">
+            <Label htmlFor="functionName" className="min-w-60">
+              Function Name
+            </Label>
+            <Input
+              placeholder="The contract function name (i.e. mintTo)"
+              defaultValue={initialFormValues.functionName}
+              {...form.register("functionName", { required: true })}
+            />
+          </div>
+          <div className="flex gap-2 sm:items-center flex-col sm:flex-row">
+            <Label htmlFor="functionArgs" className="min-w-60">
+              Function Arguments
+            </Label>
+            <Textarea
+              placeholder="Comma-separated arguments to call the function"
+              rows={3}
+              className="bg-transparent"
+              {...form.register("functionArgs")}
+              defaultValue={
+                initialFormValues.functionArgs
+                  ? decodeURIComponent(initialFormValues.functionArgs)
+                  : undefined
+              }
+            />
+          </div>
+          <div className="flex gap-2 sm:items-center flex-col sm:flex-row">
+            <Label htmlFor="value" className="min-w-60">
+              Value
+            </Label>
+            <Input
+              {...form.register("value")}
+              placeholder={`The amount of native currency to send (e.g "0.01")`}
+            />
+          </div>
+
+          <Button type="submit">
+            {isLoading ? (
+              <>
+                <Spinner className="w-4 h-4 mr-2" />
+                Simulating
+              </>
+            ) : (
+              "Simulate Transaction"
+            )}
+          </Button>
+        </Card>
+      </form>
+
+      {state.message && (
+        <>
+          <div className="flex justify-center">
+            <ArrowDown />
+          </div>
+          <Card className="max-w-[800px] p-4">
+            <p className="text-sm font-mono whitespace-pre-wrap overflow-auto">
+              {state.success
+                ? "--- ✅ Simulation succeeded ---\n"
+                : "--- ❌ Simulation failed ---\n"}
+              {state.message}
+            </p>
+          </Card>
+        </>
+      )}
+
+      <div className="flex justify-between">
+        {state.shareUrl && (
+          <CopyTextButton
+            textToShow="Copy Simulation Link"
+            tooltip="Copy Simulation Link"
+            textToCopy={state.shareUrl}
+            copyIconPosition="right"
+          />
+        )}
+        <ShareButton
+          cta="Share on X"
+          href="https://twitter.com/intent/tweet?text=Easy-to-use%20transaction%20simulator%20by%20thirdweb%20%F0%9F%98%8D&url=https%3A%2F%2Fthirdweb.com%2Ftools%2Ftransaction-simulator"
+        />
+      </div>
+
+      {state.codeExample && (
+        <div className="max-w-[800px] flex flex-col gap-2 pt-16 ">
+          <a
+            href="https://portal.thirdweb.com/references/typescript/v5/simulateTransaction"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            Connect SDK example
+          </a>
+          <CodeBlock code={state.codeExample} language="typescript" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Generate code example with input values.
+const getCodeExample = (
+  parsedData: SimulateTransactionForm,
+  params: unknown[],
+) => {
+  const displayParams = params.map((item) => {
+    if (typeof item === "bigint") {
+      return `${item.toString()}n`;
+    }
+    if (typeof item === "string") {
+      return `"${item}"`;
+    }
+    if (
+      typeof item === "object" &&
+      item !== null &&
+      !Array.isArray(item) &&
+      Object.prototype.toString.call(item) === "[object Object]"
+    ) {
+      return JSON.stringify(item);
+    }
+    return item;
+  });
+  return `import { 
+  getContract,
+  defineChain,
+  prepareContractCall,
+  createThirdwebClient 
+} from "thirdweb";
+
+const client = createThirdwebClient({
+  // use secretKey instead of clientId in backend environment
+  clientId: "your-client-id",
+});
+
+const contract = getContract({
+  client,
+  chain: defineChain(${parsedData.chainId}),
+  address: "${parsedData.to}",
+});
+
+const transaction = prepareContractCall({
+  contract,
+  method: resolveMethod("${parsedData.functionName}"),
+  params: [${displayParams.join(", ")}],
+  value: ${parsedData.value ? `${parsedData.value}n` : ""},
+});
+
+const result = await simulateTransaction({
+  from: "${parsedData.from}",
+  transaction,
+});`;
+};
+
+// Generate share link from input values.
+const getShareUrl = (parsedData: SimulateTransactionForm) => {
+  const url = new URL(`${window.location.origin}/tools/transaction-simulator`);
+  url.searchParams.set("chainId", parsedData.chainId.toString());
+  url.searchParams.set("from", parsedData.from);
+  url.searchParams.set("to", parsedData.to);
+  url.searchParams.set("functionName", parsedData.functionName);
+  url.searchParams.set(
+    "functionArgs",
+    encodeURIComponent(parsedData.functionArgs),
+  );
+  url.searchParams.set("value", parsedData.value);
+  return url.href;
+};

apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import {
+  type SimulateTransactionForm,
+  TransactionSimulator,
+} from "./components/TransactionSimulator";
+
+export const metadata: Metadata = {
+  title: "thirdweb Transaction Simulator",
+  description:
+    "Simulate any EVM transaction. Get gas estimates and onchain error messages to debug your contract calls.",
+};
+
+export default async function Page(props: {
+  searchParams: Partial<SimulateTransactionForm>;
+}) {
+  return <TransactionSimulator searchParams={props.searchParams} />;
+}