Version Packages (#4782)

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

.changeset/config.json

@@ -10,32 +10,7 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": [
-    "bundlers-esbuild",
-    "bundlers-vite",
-    "bundlers-webpack",
-    "bundlers-swc",
-    "runtimes-node-commonjs",
-    "runtimes-node-module",
-    "playground-web",
-    "thirdweb-dashboard",
-    "wallet-ui",
-    "@thirdweb-dev/auth",
-    "@thirdweb-dev/chains",
-    "@thirdweb-dev/cli",
-    "@thirdweb-dev/contracts-js",
-    "@thirdweb-dev/crypto",
-    "@thirdweb-dev/generated-abis",
-    "@thirdweb-dev/merkletree",
-    "@thirdweb-dev/pay",
-    "@thirdweb-dev/payments",
-    "@thirdweb-dev/react",
-    "@thirdweb-dev/react-core",
-    "@thirdweb-dev/sdk",
-    "@thirdweb-dev/storage",
-    "@thirdweb-dev/unity-js-bridge",
-    "@thirdweb-dev/wallets"
-  ],
+  "ignore": ["playground-web", "thirdweb-dashboard", "wallet-ui", "portal"],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always",
     "onlyUpdatePeerDependentsWhenOutOfRange": true

.github/CODEOWNERS

@@ -1,53 +1,31 @@
 # Order is important; the last matching pattern takes the most precedence.
 
-# Platform team owns everything by default
-
+# default ownership group
 - @jnsdls @joaquim-verges @MananTank @gregfromstl
 
-# legacy packages
-
-legacy_packages/auth/ @jnsdls
-legacy_packages/chains/ @jnsdls
-legacy_packages/cli/ @jnsdls
-legacy_packages/contracts-js/ @jnsdls
-legacy_packages/crypto/ @jnsdls
-legacy_packages/generated-abis/ @jnsdls
-legacy_packages/merkletree/ @jnsdls
-legacy_packages/pay/ @jnsdls
-legacy_packages/payments/ @jnsdls
-legacy_packages/react/ @MananTank @jnsdls
-legacy_packages/react-core/ @MananTank @jnsdls
-legacy_packages/react-native/ @jnsdls
-legacy_packages/react-native-compat/ @jnsdls
-legacy_packages/sdk/ @joaquim-verges @jnsdls
-legacy_packages/storage/ @jnsdls
-legacy_packages/wallets/ @MananTank @jnsdls
-
-# legacy e2e
-
-legacy_e2e/ @jnsdls
-
 # packages
+packages/thirdweb/ @joaquim-verges @gregfromstl @jnsdls
 
 ## specific thirdweb pieces
+packages/thirdweb/src/react/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
+packages/thirdweb/src/reactive/ @joaquim-verges @gregfromstl @MananTank @jnsdls
+packages/thirdweb/src/gas/ @joaquim-verges @jnsdls
+packages/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
+packages/service-utils/ @arcoraven @jnsdls @joaquim-verges
+packages/eslint-config-thirdweb/ @jnsdls @joaquim-verges
+packages/tw-tsconfig/ @jnsdls @joaquim-verges
 
-packages/thirdweb/src/react/ @MananTank
-packages/thirdweb/src/reactive/ @MananTank
-packages/thirdweb/src/gas/ @joaquim-verges
-packages/thirdweb/src/pay/ @MananTank @IDubuque
-
-packages/typedoc-gen/ @MananTank
-
-# owned by phil for now
-
-packages/service-utils/ @arcoraven
-packages/eslint-config-thirdweb/ @jnsdls
-packages/tw-tsconfig/ @jnsdls
-packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper
+# apps
+apps/ @jnsdls @joaquim-verges
+apps/dashboard/ @jnsdls @MananTank @joaquim-verges
+apps/playground-web/ @joaquim-verges @gregfromstl @jnsdls @joaquim-verges
+apps/wallet-ui/ @gregfromstl @jnsdls @joaquim-verges @MananTank
+apps/portal/ @gregfromstl @jnsdls @joaquim-verges @MananTank
 
 # .github folder + .changeset + turbo config is owned by jonas for now
+scripts/ @jnsdls @joaquim-verges
+.github/ @jnsdls @joaquim-verges
+.changeset/config.json @jnsdls @joaquim-verges
+turbo.json @jnsdls @joaquim-verges
+.vscode/ @jnsdls @joaquim-verges
 
-scripts/ @jnsdls
-.github/ @jnsdls
-.changeset/config.json @jnsdls
-turbo.json @jnsdls

.github/contributing.md

@@ -77,6 +77,21 @@ Many of the tests use forked versions of live chains like mainnet. We fork these
 
 If you need to use accounts in your tests, use the predefined accounts in `test/src/test-wallets.ts`. These are the default anvil accounts that are pre-funded on the local test forks.
 
+##### Mocking Network Calls
+
+If your test depends on a downstream network call, you must mock the call using `msw`. You can use one of the existing mocks in `test/src/mocks` or create your own. Once you've created a mock request, setup the server and add all your mocks like so:
+
+```ts
+import { setupServer } from "msw/node";
+import { downloadMock, uploadMock } from "../../../test/src/mocks/storage.js";
+
+const server = setupServer(uploadMock("HASH"), downloadMock({ name: "Test NFT" }));
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
 #### Linting
 
 We use a linter to maintain best practices across projects. Once your changes are complete (or periodically while making changes), run the linter with the following command from the repo root:

.github/labeler.yml

@@ -5,9 +5,9 @@ dashboard:
 playground:
   - changed-files:
     - any-glob-to-any-file: "apps/playground-web/**/*"
-legacy_packages:
-  - changed-files:
-    - any-glob-to-any-file: "legacy-packages/**/*"
 packages:
   - changed-files:
     - any-glob-to-any-file: "packages/**/*"
+portal:
+  - changed-files:
+    - any-glob-to-any-file: "apps/portal/**/*"

.github/pull_request_template.md

@@ -2,18 +2,3 @@
 
 Short description of the bug fixed or feature added
 
-## Changes made
-
-- [ ] Public API changes: list the public API changes made if any
-- [ ] Internal API changes: explain the internal logic changes
-
-## How to test
-
-- [ ] Automated tests: link to unit test file
-- [ ] Manual tests: step by step instructions on how to test
-
-## Contributor NFT
-
-Paste in your wallet address below and we will airdrop you a special NFT when your pull request is merged. 
-
-```Address: ```

.github/workflows/CI.yml

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

.github/workflows/CI_legacy.yml

@@ -1,94 +0,0 @@
-name: CI (Legacy Packages)
-
-on:
-  push:
-    branches: ["main"]
-    paths:
-      - "legacy_packages/**"
-      - "legacy_e2e/**"
-      - "package.json"
-  pull_request:
-    types: [opened, synchronize]
-    paths:
-      - "legacy_packages/**"
-      - "legacy_e2e/**"
-      - "package.json"
-  workflow_dispatch:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-  # To use Remote Caching, uncomment the next lines and follow the steps below.
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
-  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    name: Build Packages
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Build Packages
-        run: pnpm build:legacy_packages
-
-  lint:
-    timeout-minutes: 15
-    name: Lint Packages
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - run: pnpm lint:legacy
-
-  test:
-    timeout-minutes: 15
-    name: Unit Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - run: pnpm test:legacy
-
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          directory: legacy_packages/
-          flags: legacy_packages
-          verbose: true
-
-  e2e:
-    timeout-minutes: 15
-    name: E2E Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-
-      - name: Run e2e tests
-        run: pnpm e2e:legacy
-        env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
-          CLI_E2E_API_KEY: ${{ secrets.CLI_E2E_API_KEY }}

.github/workflows/release-artifacts.yml

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

.github/workflows/release.yml

@@ -8,7 +8,6 @@ on:
     paths:
       - ".changeset/**"
       - "packages/**"
-      - "legacy_packages/**"
     branches:
       - main
 

.github/workflows/sync-chains.yml

@@ -1,58 +0,0 @@
-name: Sync chains every hour
-
-on:
-  # temporarily disabled chain syncing
-  # schedule:
-    # - cron: "0 * * * *" # Runs every hour
-  workflow_dispatch: # Allows you to manually run the workflow from the Actions tab
-
-jobs:
-  sync-chains:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-
-      - name: Install bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.35
-
-      - name: Run chains sync
-        run: bun run db:sync
-        working-directory: ./legacy_packages/chains
-
-      - name: Check for Changes
-        id: git-check
-        run: |
-          if git diff --quiet; then
-            echo "CHANGES_FOUND=false" >> $GITHUB_ENV
-          else
-            echo "CHANGES_FOUND=true" >> $GITHUB_ENV
-          fi
-
-      - name: Create or Update sync-chains.md
-        if: env.CHANGES_FOUND == 'true'
-        run: |
-          echo '---' > .changeset/sync-chains.md
-          echo '"@thirdweb-dev/chains": patch' >> .changeset/sync-chains.md
-          echo '---' >> .changeset/sync-chains.md
-          echo '' >> .changeset/sync-chains.md
-          echo 'Synced Chains Package' >> .changeset/sync-chains.md
-
-      - name: Commit Changes
-        if: env.CHANGES_FOUND == 'true'
-        run: |
-          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-          git add -A
-          git commit -m "chore(chains): sync from db"
-
-      - name: Create or Update Pull Request
-        if: env.CHANGES_FOUND == 'true'
-        uses: peter-evans/create-pull-request@v6
-        with:
-          title: "chore(chains): update chains"
-          branch: "sync-chains"
-          body: "This PR was automatically created by a GitHub Action. It updates the chains package with the latest changes from the database."
-          commit-message: "chore(chains): sync from db"

.gitignore

@@ -10,19 +10,21 @@ dist-ssr
 .cache
 server/dist
 public/dist
-./legacy_packages/contracts-js/abis
 .idea/
 .yalc/
 yalc.lock
-build/
+./build/
 playwright-report/
 .env/
 
-# Artifacts
-legacy_packages/cli/artifacts/
-
 # codecov binary
 codecov
 
 # Remove sitemap files (generated at build time)
-sitemap*.xml
+sitemap*.xml
+
+# typedoc
+packages/*/typedoc/*
+
+*storybook.log
+storybook-static

.v4-changesets-apply-later/dry-jobs-reply.md

@@ -1,6 +0,0 @@
----
-"@thirdweb-dev/cli": minor
-"thirdweb": minor
----
-
-Adds --expo option to cli

.v4-changesets-apply-later/eighty-carrots-count.md

@@ -1,5 +0,0 @@
----
-"@thirdweb-dev/sdk": patch
----
-
-ZkCandy addresses

.v4-changesets-apply-later/fuzzy-dolphins-fail.md

@@ -1,6 +0,0 @@
----
-"@thirdweb-dev/cli": patch
-"@thirdweb-dev/sdk": patch
----
-
-Override contract publish id on CLI

.v4-changesets-apply-later/khaki-apricots-turn.md

@@ -1,17 +0,0 @@
----
-"@thirdweb-dev/merkletree": patch
-"@thirdweb-dev/react-core": patch
-"@thirdweb-dev/payments": patch
-"@thirdweb-dev/storage": patch
-"@thirdweb-dev/wallets": patch
-"@thirdweb-dev/chains": patch
-"@thirdweb-dev/crypto": patch
-"@thirdweb-dev/service-utils": patch
-"@thirdweb-dev/react": patch
-"@thirdweb-dev/auth": patch
-"@thirdweb-dev/cli": patch
-"@thirdweb-dev/pay": patch
-"@thirdweb-dev/sdk": patch
----
-
-update dependencies

.v4-changesets-apply-later/sharp-tools-scream.md

@@ -1,5 +0,0 @@
----
-"@thirdweb-dev/react": patch
----
-
-Fix error when doing buy with Crypto transaction with InApp wallet

.v4-changesets-apply-later/smart-avocados-juggle.md

@@ -1,5 +0,0 @@
----
-"@thirdweb-dev/sdk": patch
----
-
-Fix EIP155 check for create2 factory deployment

.v4-changesets-apply-later/smart-bears-breathe.md

@@ -1,6 +0,0 @@
----
-"@thirdweb-dev/wallets": patch
-"@thirdweb-dev/sdk": patch
----
-
-respect gas overrides if they are passed in

.v4-changesets-apply-later/strong-moons-add.md

@@ -1,5 +0,0 @@
----
-"@thirdweb-dev/react": patch
----
-
-Fix wallet app not opening when using ConnectButton inside an iframe

.v4-changesets-apply-later/sync-chains.md

@@ -1,5 +0,0 @@
----
-"@thirdweb-dev/chains": patch
----
-
-Synced Chains Package

.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)
 #
@@ -90,4 +93,7 @@ UNTHREAD_GROWTH_TIER_ID=""
 UNTHREAD_PRO_TIER_ID=""
 
 # Demo Engine
-NEXT_PUBLIC_DEMO_ENGINE_URL=""
+NEXT_PUBLIC_DEMO_ENGINE_URL=""
+
+# API server secret (required for thirdweb.com SIWE login). Copy from Vercel.
+API_SERVER_SECRET=""

apps/dashboard/.eslintrc.js

@@ -2,9 +2,8 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
     "plugin:@next/next/recommended",
-    "plugin:promise/recommended",
+    "plugin:storybook/recommended",
   ],
   rules: {
     "react-compiler/react-compiler": "error",
@@ -15,6 +14,26 @@ module.exports = {
         message:
           'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
       },
+      {
+        selector: "CallExpression[callee.name='createContext']",
+        message:
+          'Are you *sure* you need to use a "Context"? In almost all cases you should prefer passing props directly.',
+      },
+      {
+        selector: "CallExpression[callee.name='defineChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='defineDashboardChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='mapV4ChainToV5Chain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
     ],
     "no-restricted-imports": [
       "error",
@@ -36,6 +55,11 @@ module.exports = {
               "FormErrorMessage",
               "MenuGroup",
               "MenuItem",
+              "VStack",
+              "HStack",
+              "AspectRatio",
+              "useToast",
+              "useClipboard",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -46,6 +70,7 @@ module.exports = {
               "HelpTextProps",
               "MenuGroupProps",
               "MenuItemProps",
+              "AspectRatioProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',
@@ -65,12 +90,24 @@ 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',
+          },
+          {
+            name: "lucide-react",
+            importNames: ["Link", "Table", "Sidebar"],
+            message:
+              'This is likely a mistake. If you really want to import this - postfix the imported name with Icon. Example - "LinkIcon"',
+          },
         ],
       },
     ],
   },
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "import", "react-compiler"],
+  plugins: ["@typescript-eslint", "react-compiler"],
   parserOptions: {
     ecmaVersion: 2019,
     ecmaFeatures: {
@@ -87,31 +124,6 @@ module.exports = {
     },
   },
   overrides: [
-    {
-      files: "src/core-ui/**/*",
-      rules: {
-        // no restricted imports
-        "@typescript-eslint/no-restricted-imports": [
-          "error",
-          {
-            paths: [
-              {
-                name: "@thirdweb-dev/sdk",
-                message:
-                  "core-ui should not import from @thirdweb-dev/sdk. (except for types)",
-                allowTypeImports: true,
-              },
-              {
-                name: "@thirdweb-dev/react",
-                message:
-                  "core-ui should not import from @thirdweb-dev/react. (except for types)",
-                allowTypeImports: true,
-              },
-            ],
-          },
-        ],
-      },
-    },
     // disable restricted imports in tw-components
     {
       files: "src/tw-components/**/*",

apps/dashboard/.storybook/main.ts

@@ -0,0 +1,31 @@
+import { dirname, join } from "node:path";
+import type { StorybookConfig } from "@storybook/nextjs";
+
+/**
+ * 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,78 @@
+import type { Preview } from "@storybook/react";
+import "@/styles/globals.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { Inter as interFont } from "next/font/google";
+// biome-ignore lint/style/useImportType: <explanation>
+import React, { useState } from "react";
+import { useEffect } from "react";
+import { Button } from "../src/@/components/ui/button";
+
+// 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 queryClient = new QueryClient();
+
+const fontSans = interFont({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => {
+      return (
+        <StoryLayout>
+          <Story />
+        </StoryLayout>
+      );
+    },
+  ],
+};
+
+export default preview;
+
+function StoryLayout(props: {
+  children: React.ReactNode;
+}) {
+  const [theme, setTheme] = useState<"light" | "dark">("dark");
+
+  useEffect(() => {
+    document.body.className = `font-sans antialiased ${fontSans.variable} ${theme === "dark" ? " dark" : ""}`;
+  }, [theme]);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="min-h-screen flex flex-col bg-background text-foreground min-w-0">
+        <div className="flex justify-end p-4 border-b gap-2">
+          <Button
+            onClick={() => setTheme("dark")}
+            size="sm"
+            variant={theme === "dark" ? "default" : "ghost"}
+          >
+            <MoonIcon className="size-5" />
+          </Button>
+
+          <Button
+            onClick={() => setTheme("light")}
+            size="sm"
+            variant={theme === "light" ? "default" : "ghost"}
+          >
+            <SunIcon className="size-5" />
+          </Button>
+        </div>
+
+        <div className="grow flex flex-col min-w-0">{props.children}</div>
+      </div>
+    </QueryClientProvider>
+  );
+}

apps/dashboard/biome.json

@@ -1,8 +1,16 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
   "extends": ["../../biome.json"],
-
-  "files": {
-    "ignore": ["src/graphql/**"]
-  }
+  "overrides": [
+    {
+      "include": ["src/css/swagger-ui.css"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noImportantInKeyframe": "off"
+          }
+        }
+      }
+    }
+  ]
 }

apps/dashboard/knip.json

@@ -1,7 +1,8 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "next": true,
-  "ignore": ["src/graphql/**", "src/theme/*"],
+  "ignore": ["src/@/components/ui/**"],
   "project": ["src/**"],
-  "ignoreBinaries": ["only-allow"]
+  "ignoreBinaries": ["only-allow", "biome"],
+  "ignoreDependencies": ["@storybook/blocks", "@thirdweb-dev/service-utils"]
 }

apps/dashboard/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/dashboard/next-sitemap.config.js

@@ -1,7 +1,6 @@
 // @ts-check
 /**
  *
- * @returns {Promise<import("@thirdweb-dev/chains").Chain[]>}
  */
 async function fetchChainsFromApi() {
   const res = await fetch(`https://api.thirdweb.com/v1/chains`, {
@@ -21,7 +20,6 @@ async function fetchChainsFromApi() {
 /**
  *
  * @param {number|string} chainIdOrSlug
- * @returns {Promise<import("@thirdweb-dev/chains").Chain>}
  */
 async function getSingleChain(chainIdOrSlug) {
   const res = await fetch(

apps/dashboard/next.config.js

@@ -5,10 +5,10 @@ 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;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;
@@ -144,7 +144,6 @@ const moduleExports = {
   reactStrictMode: true,
   experimental: {
     scrollRestoration: true,
-    esmExternals: "loose",
     webpackBuildWorker: true,
     serverSourceMaps: false,
   },

apps/dashboard/package.json

@@ -4,61 +4,55 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev:no-cache": "rm -rf .next/cache && pnpm run dev",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "format": "biome format ./src --write",
-    "lint": "biome check ./src && eslint ./src",
+    "lint": "biome check ./src && knip && eslint ./src",
     "fix": "biome check ./src --fix && eslint ./src --fix",
+    "typecheck": "tsc --noEmit",
     "gen:theme-typings": "chakra-cli tokens src/theme/index.ts",
     "postinstall": "pnpm run gen:theme-typings",
-    "find:unused": "next-unused",
     "postbuild": "next-sitemap",
     "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",
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@coinbase/onchainkit": "^0.14.2",
-    "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.5",
-    "@hookform/resolvers": "^3.6.0",
+    "@emotion/react": "11.13.3",
+    "@emotion/styled": "11.13.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",
+    "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-switch": "^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.30.0",
+    "@shazow/whatsabi": "^0.14.1",
+    "@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-query": "5.56.2",
     "@tanstack/react-table": "^8.17.3",
-    "@thirdweb-dev/chains": "workspace:*",
-    "@thirdweb-dev/react": "workspace:*",
-    "@thirdweb-dev/react-core": "workspace:*",
-    "@thirdweb-dev/sdk": "workspace:*",
     "@thirdweb-dev/service-utils": "workspace:*",
-    "@thirdweb-dev/storage": "workspace:*",
-    "@thirdweb-dev/wallets": "workspace:*",
     "@vercel/og": "^0.6.2",
     "abitype": "1.0.5",
     "chakra-react-select": "^4.7.6",
@@ -67,31 +61,26 @@
     "color": "^4.2.3",
     "compare-versions": "^6.1.0",
     "date-fns": "^3.6.0",
-    "ethers": "^5.7.2",
     "flat": "^6.0.1",
-    "framer-motion": "^11.2.12",
+    "framer-motion": "11.5.6",
     "fuse.js": "7.0.0",
-    "idb-keyval": "^6.2.1",
-    "ipaddr.js": "^2.2.0",
     "ioredis": "^5.4.1",
+    "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
-    "lucide-react": "^0.399.0",
-    "next": "14.2.4",
+    "lucide-react": "0.441.0",
+    "next": "14.2.13",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
     "papaparse": "^5.4.1",
     "pluralize": "^8.0.0",
-    "posthog-js": "1.128.3",
-    "posthog-js-opensource": "npm:[email protected]",
-    "prettier": "^3.3.2",
+    "posthog-js": "1.67.1",
     "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",
@@ -100,7 +89,6 @@
     "react-intersection-observer": "^9.10.3",
     "react-markdown": "^9.0.1",
     "react-otp-input": "^3.1.1",
-    "react-query-v5": "npm:@tanstack/react-query@^5.40.1",
     "react-responsive-carousel": "^3.2.23",
     "react-table": "^7.8.0",
     "recharts": "^2.12.7",
@@ -108,27 +96,35 @@
     "server-only": "^0.0.1",
     "sonner": "^1.5.0",
     "spdx-correct": "^3.2.0",
-    "spin-wheel-game": "1.0.3-alpha.3",
     "swagger-ui-react": "^5.17.14",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "workspace:*",
     "tiny-invariant": "^1.3.3",
     "use-debounce": "^10.0.1",
-    "zksync-ethers": "5.9.0",
     "zod": "3.23.8"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
-    "@next/bundle-analyzer": "^14.2.4",
-    "@next/eslint-plugin-next": "^14.2.4",
-    "@playwright/test": "^1.44.1",
+    "@chromatic-com/storybook": "2.0.2",
+    "@next/bundle-analyzer": "14.2.13",
+    "@next/eslint-plugin-next": "14.2.13",
+    "@playwright/test": "1.47.2",
+    "@storybook/addon-essentials": "8.3.2",
+    "@storybook/addon-interactions": "8.3.2",
+    "@storybook/addon-links": "8.3.2",
+    "@storybook/addon-onboarding": "8.3.2",
+    "@storybook/addon-viewport": "8.3.2",
+    "@storybook/blocks": "8.3.2",
+    "@storybook/nextjs": "8.3.2",
+    "@storybook/react": "8.3.2",
+    "@storybook/test": "8.3.2",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
@@ -136,47 +132,16 @@
     "@typescript-eslint/eslint-plugin": "7.14.1",
     "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.19",
-    "checkly": "^4.7.0",
-    "dotenv": "^16.4.5",
+    "checkly": "^4.8.1",
     "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",
-    "knip": "^5.23.1",
+    "eslint-config-biome": "1.8.4",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
+    "eslint-plugin-storybook": "^0.8.0",
+    "knip": "^5.30.5",
     "next-sitemap": "^4.2.3",
-    "next-unused": "^0.0.6",
-    "tailwindcss": "^3.4.4",
-    "typescript": "5.5.2"
-  },
-  "next-unused": {
-    "alias": {},
-    "include": [
-      "components",
-      "hooks",
-      "schema",
-      "theme",
-      "utils",
-      "@3rdweb-sdk",
-      "constants",
-      "tw-components",
-      "contract-ui"
-    ],
-    "exclude": [
-      "node_modules",
-      "types",
-      "tw-components"
-    ],
-    "entrypoints": []
-  },
-  "browserslist": [
-    "defaults",
-    "unreleased versions",
-    "not UCAndroid > 0"
-  ]
+    "postcss": "8.4.47",
+    "storybook": "8.3.2",
+    "tailwindcss": "3.4.12",
+    "typescript": "5.6.2"
+  }
 }

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/analytics",
+      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,
     },
     {
@@ -270,9 +270,18 @@ function redirects() {
       destination: "/in-app-wallets",
       permanent: false,
     },
+    // temporarily redirect cli login to support page
     {
-      source: "/dashboard/connect/ecosystem/:slug((?!create$)[^/]+)",
-      destination: "/dashboard/connect/ecosystem/:slug/permissions",
+      source: "/cli/login",
+      destination:
+        "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/@/api/projects.ts

@@ -0,0 +1,73 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { cookies } from "next/headers";
+
+const THIRDWEB_API_HOST =
+  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
+
+export type Project = {
+  id: string;
+  name: string;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date | null;
+  bannedAt: Date | null;
+  domains: string[];
+  bundleIds: string[];
+  redirectUrls: string[];
+  lastAccessedAt: Date | null;
+  slug: string;
+  teamId: string;
+  publishableKey: string;
+  // image: string; // TODO
+};
+
+export async function getProjects(teamSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Project[];
+  }
+  return [];
+}
+
+export async function getProject(teamSlug: string, projectSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return null;
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects/${projectSlug}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Project;
+  }
+  return null;
+}

apps/dashboard/src/@/api/team-members.ts

@@ -0,0 +1,53 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { cookies } from "next/headers";
+
+const THIRDWEB_API_HOST =
+  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
+
+const TeamAccountRole = {
+  OWNER: "OWNER",
+  MEMBER: "MEMBER",
+} as const;
+
+export type TeamAccountRole =
+  (typeof TeamAccountRole)[keyof typeof TeamAccountRole];
+
+export type TeamMember = {
+  account: {
+    name: string;
+    email: string | null;
+  };
+} & {
+  deletedAt: Date | null;
+  accountId: string;
+  teamId: string;
+  createdAt: Date;
+  updatedAt: Date;
+  role: TeamAccountRole;
+};
+
+export async function getMembers(teamSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as TeamMember[];
+  }
+  return [];
+}

apps/dashboard/src/@/api/team.ts

@@ -0,0 +1,69 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { cookies } from "next/headers";
+
+const THIRDWEB_API_HOST =
+  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
+
+export type Team = {
+  id: string;
+  name: string;
+  slug: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  bannedAt: string | null;
+  // image: string; // -> TODO
+  billingPlan: "pro" | "growth" | "free";
+  billingStatus: "validPayment" | (string & {}); // what's the other value?
+  // billingEmail: string;
+  // billingExternalId: string;
+  // billingType: "STRIPE" | ??
+  // billingCustomerPayload: ?? | null
+  // paymentAttemptCount: number
+  // trialPeriodEndedAt: string | null;
+};
+
+export async function getTeamBySlug(slug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return null;
+  }
+
+  const teamRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams/${slug}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as Team;
+  }
+  return null;
+}
+
+export async function getTeams() {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Team[];
+  }
+  return [];
+}

apps/dashboard/src/@/components/ChakraProviderSetup.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ChakraProvider, useColorMode } from "@chakra-ui/react";
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import chakraTheme from "../../theme";
+
+export function ChakraProviderSetup(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ChakraProvider theme={chakraTheme}>
+      {props.children}
+      <SyncTheme />
+    </ChakraProvider>
+  );
+}
+
+function SyncTheme() {
+  const { theme, setTheme } = useTheme();
+  const { setColorMode } = useColorMode();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setColorMode(theme === "light" ? "light" : "dark");
+  }, [setColorMode, theme]);
+
+  // handle dashboard with now old "system" set
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (theme === "system") {
+      setTheme("dark");
+      setColorMode("dark");
+    }
+  }, [theme, setTheme, setColorMode]);
+
+  return null;
+}

apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { DangerSettingCard } from "./DangerSettingCard";
+
+const meta = {
+  title: "blocks/DangerSettingCard",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="min-h-screen bg-background py-4 text-foreground">
+      <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+        <BadgeContainer label="Base">
+          <DangerSettingCard
+            title="This is a title"
+            description="This is a description"
+            buttonLabel="Some Action"
+            buttonOnClick={() => {}}
+            isPending={false}
+            confirmationDialog={{
+              title: "This is confirmation title",
+              description: "This is confirmation description",
+            }}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="Loading">
+          <DangerSettingCard
+            title="This is a title"
+            description="This is a description"
+            buttonLabel="Some Action"
+            buttonOnClick={() => {}}
+            isPending={true}
+            confirmationDialog={{
+              title: "This is confirmation title",
+              description: "This is confirmation description",
+            }}
+          />
+        </BadgeContainer>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export function DangerSettingCard(props: {
+  title: string;
+  description: string;
+  buttonLabel: string;
+  buttonOnClick: () => void;
+  isPending: boolean;
+  confirmationDialog: {
+    title: string;
+    description: string;
+  };
+}) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-red-500/70">
+      <div className="bg-muted/50 px-4 py-6 lg:px-6">
+        <h3 className="font-semibold text-xl tracking-tight">{props.title}</h3>
+
+        <p className="mt-1.5 mb-4 text-foreground text-sm">
+          {props.description}
+        </p>
+      </div>
+
+      <div className="flex justify-end border-red-500/70 border-t bg-red-100 px-4 py-4 lg:px-6 dark:bg-red-500/20">
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button
+              variant="destructive"
+              className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
+              disabled={props.isPending}
+            >
+              {props.isPending && <Spinner className="size-3" />}
+              {props.buttonLabel}
+            </Button>
+          </DialogTrigger>
+
+          <DialogContent>
+            <DialogHeader className="pr-10">
+              <DialogTitle className="leading-snug">
+                {props.confirmationDialog.title}
+              </DialogTitle>
+
+              <DialogDescription>
+                {props.confirmationDialog.description}
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter className="mt-4 gap-4 lg:gap-2">
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+
+              <Button
+                variant="destructive"
+                className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
+                onClick={props.buttonOnClick}
+                disabled={props.isPending}
+              >
+                {props.isPending && <Spinner className="size-3" />}
+                {props.buttonLabel}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

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

@@ -1,12 +1,15 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { useToast } from "@/components/ui/use-toast";
 import { useMutation } from "@tanstack/react-query";
 import { DownloadIcon } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "../../lib/utils";
 
 export function ExportToCSVButton(props: {
   getData: () => Promise<{ header: string[]; rows: string[][] }>;
   fileName: string;
+  disabled?: boolean;
+  className?: string;
 }) {
   const exportMutation = useMutation({
     mutationFn: async () => {
@@ -14,30 +17,25 @@ export function ExportToCSVButton(props: {
       exportToCSV(props.fileName, data);
     },
     onError: () => {
-      toast({
-        title: "Failed to download CSV",
-        variant: "destructive",
-      });
+      toast.error("Failed to download CSV");
     },
     onSuccess: () => {
-      toast({
-        title: "Exported Successfully",
+      toast("Exported Successfully", {
         description: "CSV file has been downloaded",
       });
     },
   });
 
-  const { toast } = useToast();
-
   return (
     <Button
       variant="outline"
-      className="border flex gap-2 items-center text-xs"
+      disabled={props.disabled}
+      className={cn("flex items-center gap-2 border text-xs", props.className)}
       onClick={async () => {
         exportMutation.mutate();
       }}
     >
-      {exportMutation.isLoading ? (
+      {exportMutation.isPending ? (
         <>
           Downloading
           <Spinner className="size-3" />

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

@@ -0,0 +1,36 @@
+import { Label } from "@/components/ui/label";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { AsteriskIcon, InfoIcon } from "lucide-react";
+
+export function FormFieldSetup(props: {
+  htmlFor: string;
+  label: string;
+  errorMessage: React.ReactNode | undefined;
+  children: React.ReactNode;
+  tooltip: React.ReactNode | undefined;
+  isRequired: boolean;
+}) {
+  return (
+    <div>
+      <div className="mb-2 inline-flex items-center gap-1">
+        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+
+        {props.isRequired && (
+          <AsteriskIcon className="size-3.5 text-destructive-text" />
+        )}
+
+        {props.tooltip && (
+          <ToolTipLabel label={props.tooltip}>
+            <InfoIcon className="size-3.5 text-muted-foreground" />
+          </ToolTipLabel>
+        )}
+      </div>
+      {props.children}
+      {props.errorMessage && (
+        <p className="mt-1 text-destructive-text text-sm">
+          {props.errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}

apps/dashboard/src/@/components/blocks/Img.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ImageIcon } from "lucide-react";
+import { useState } from "react";
+import { BadgeContainer } from "../../../stories/utils";
+import { Spinner } from "../ui/Spinner/Spinner";
+import { Button } from "../ui/button";
+import { Img } from "./Img";
+
+const meta = {
+  title: "blocks/Img",
+  component: Story,
+  parameters: {},
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <div className="flex flex-col gap-10 p-10">
+      <p> All images below are set with size-20 className </p>
+
+      <BadgeContainer label="No Src - pending">
+        <Img className="size-20" src={undefined} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Failed to load - fallback">
+        <Img className="size-20" src="invalid-src" />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Src, pending - rounded-full">
+        <Img className="size-20 rounded-full" src={undefined} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Failed to load - fallback - rounded-full">
+        <Img className="size-20 rounded-full" src="invalid-src" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Valid Src">
+        <Img className="size-20" src="https://picsum.photos/200" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Valid Src, rounded">
+        <Img className="size-20 rounded-full" src="https://picsum.photos/200" />
+      </BadgeContainer>
+
+      <ToggleTest />
+
+      <BadgeContainer label="Custom Skeleton">
+        <Img
+          src={undefined}
+          skeleton={
+            <div className="flex items-center justify-center rounded-lg border">
+              <Spinner className="size-6" />
+            </div>
+          }
+          className="size-20"
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Custom Fallback">
+        <Img
+          fallback={
+            <div className="flex items-center justify-center rounded-lg border">
+              <ImageIcon className="size-10 text-muted-foreground" />
+            </div>
+          }
+          className="size-20"
+          src="invalid-src"
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+function ToggleTest() {
+  const [src, setSrc] = useState<undefined | string>(undefined);
+
+  return (
+    <div className="relative flex flex-col gap-10 border p-6">
+      <Button
+        variant="outline"
+        onClick={() => {
+          if (src) {
+            setSrc(undefined);
+          } else {
+            setSrc("https://picsum.photos/400");
+          }
+        }}
+        className="absolute top-6 right-6 inline-flex"
+      >
+        Toggle Src
+      </Button>
+
+      <p> Src is {src ? "set" : "not set"} </p>
+
+      <BadgeContainer label="Valid Src">
+        <Img className="size-20" src={src} />
+      </BadgeContainer>
+
+      <BadgeContainer label="invalid Src">
+        <Img
+          className="size-20 rounded-full"
+          src={src ? "invalid-src" : undefined}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+
+type imgElementProps = React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> & {
+  skeleton?: React.ReactNode;
+  fallback?: React.ReactNode;
+  src: string | undefined;
+};
+
+export function Img(props: imgElementProps) {
+  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
+    "pending",
+  );
+  const status =
+    props.src === undefined
+      ? "pending"
+      : props.src === ""
+        ? "fallback"
+        : _status;
+  const { className, fallback, skeleton, ...restProps } = props;
+  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
+  const defaultFallback = <div className="bg-muted" />;
+
+  return (
+    <div className="relative">
+      <img
+        {...restProps}
+        onLoad={() => {
+          setStatus("loaded");
+        }}
+        onError={() => {
+          setStatus("fallback");
+        }}
+        style={{
+          opacity: status === "loaded" ? 1 : 0,
+        }}
+        alt={restProps.alt || ""}
+        className={cn(
+          "fade-in-0 object-cover transition-opacity duration-300",
+          className,
+        )}
+      />
+
+      {status !== "loaded" && (
+        <div
+          className={cn(
+            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
+            className,
+          )}
+        >
+          {status === "pending" && (skeleton || defaultSkeleton)}
+          {status === "fallback" && (fallback || defaultFallback)}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { ChevronDownIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+import { NavLink } from "../ui/NavLink";
+import type { SidebarLink } from "./Sidebar";
+
+export function MobileSidebar(props: {
+  links?: SidebarLink[];
+  footer?: React.ReactNode;
+  trigger?: React.ReactNode;
+  triggerClassName?: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+  const activeLink = props.links?.find((link) => {
+    if (link.exactMatch) {
+      return link.href === pathname;
+    }
+    return pathname?.startsWith(link.href);
+  });
+
+  const defaultTrigger = (
+    <Button
+      className={cn(
+        "w-full justify-between gap-2 bg-muted/50 text-left lg:hidden",
+        props.triggerClassName,
+      )}
+      variant="outline"
+    >
+      {activeLink?.label}
+      <ChevronDownIcon className="size-4 text-muted-foreground" />
+    </Button>
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>{props.trigger || defaultTrigger}</DialogTrigger>
+      <DialogContent
+        className="rounded-t-xl rounded-b-none p-4"
+        dialogCloseClassName="hidden"
+        onClick={(e) => {
+          if (e.target instanceof HTMLAnchorElement) {
+            setIsOpen(false);
+          }
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {props.links?.map((link) => {
+            return (
+              <Button size="sm" variant="ghost" asChild key={link.href}>
+                <NavLink
+                  href={link.href}
+                  className="!text-left flex h-auto justify-start gap-2 py-3"
+                  activeClassName="bg-accent"
+                  exactMatch={link.exactMatch}
+                  tracking={link.tracking}
+                >
+                  {link.label}
+                </NavLink>
+              </Button>
+            );
+          })}
+        </div>
+        {props.footer}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { SettingsCard } from "./SettingsCard";
+
+const meta = {
+  title: "blocks/SettingsCard",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="min-h-screen bg-background py-6 text-foreground">
+      <div className="container flex max-w-[1100px] flex-col gap-10 lg:p-10">
+        <BadgeContainer label="No Header">
+          <SettingsCard
+            bottomText="This is bottom text"
+            header={undefined}
+            errorText={undefined}
+            noPermissionText={undefined}
+            saveButton={undefined}
+          >
+            <ChildrenPlaceholder />
+          </SettingsCard>
+        </BadgeContainer>
+
+        <BadgeContainer label="Header">
+          <SettingsCard
+            bottomText="This is bottom text"
+            header={{
+              title: "Some Title",
+              description: "This is some description for this card",
+            }}
+            errorText={undefined}
+            noPermissionText={undefined}
+            saveButton={undefined}
+          >
+            <ChildrenPlaceholder />
+          </SettingsCard>
+        </BadgeContainer>
+
+        <BadgeContainer label="Error">
+          <SettingsCard
+            bottomText="This is bottom text"
+            header={{
+              title: "Some Title",
+              description: "This is some description for this card",
+            }}
+            errorText="This is error text"
+            noPermissionText={undefined}
+            saveButton={undefined}
+          >
+            <ChildrenPlaceholder />
+          </SettingsCard>
+        </BadgeContainer>
+
+        <BadgeContainer label="No Permission">
+          <SettingsCard
+            bottomText="This is bottom text"
+            header={{
+              title: "Some Title",
+              description: "This is some description for this card",
+            }}
+            saveButton={{
+              disabled: false,
+              isPending: false,
+              onClick: () => {},
+            }}
+            noPermissionText="You do not have permission to edit this"
+            errorText={undefined}
+          >
+            <ChildrenPlaceholder />
+          </SettingsCard>
+        </BadgeContainer>
+
+        <BadgeContainer label="Save">
+          <SettingsCard
+            bottomText="This is bottom text"
+            header={{
+              title: "Some Title",
+              description: "This is some description for this card",
+            }}
+            saveButton={{
+              disabled: false,
+              isPending: false,
+              onClick: () => {},
+            }}
+            noPermissionText={undefined}
+            errorText={undefined}
+          >
+            <ChildrenPlaceholder />
+          </SettingsCard>
+        </BadgeContainer>
+
+        <BadgeContainer label="Save Disabled">
+          <SettingsCard
+            bottomText="This is bottom text"
+            header={{
+              title: "Some Title",
+              description: "This is some description for this card",
+            }}
+            saveButton={{
+              disabled: true,
+              isPending: false,
+              onClick: () => {},
+            }}
+            noPermissionText={undefined}
+            errorText={undefined}
+          >
+            <ChildrenPlaceholder />
+          </SettingsCard>
+        </BadgeContainer>
+
+        <BadgeContainer label="Save Loading">
+          <SettingsCard
+            bottomText="This is bottom text"
+            header={{
+              title: "Some Title",
+              description: "This is some description for this card",
+            }}
+            saveButton={{
+              disabled: false,
+              isPending: true,
+              onClick: () => {},
+            }}
+            noPermissionText={undefined}
+            errorText={undefined}
+          >
+            <ChildrenPlaceholder />
+          </SettingsCard>
+        </BadgeContainer>
+      </div>
+    </div>
+  );
+}
+
+function ChildrenPlaceholder() {
+  return (
+    <div className="flex h-10 items-center justify-center text-muted-foreground/50 text-xs">
+      CHILDREN GOES HERE
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type React from "react";
+
+export function SettingsCard(
+  props: React.PropsWithChildren<{
+    bottomText: React.ReactNode;
+    header?: {
+      description: string | undefined;
+      title: string;
+    };
+    errorText: string | undefined;
+    noPermissionText: string | undefined;
+    saveButton?: {
+      onClick?: () => void;
+      disabled: boolean;
+      isPending: boolean;
+      type?: "submit";
+    };
+  }>,
+) {
+  return (
+    <div className="relative rounded-lg border border-border bg-muted/50">
+      <div
+        className={cn(
+          "relative border-border border-b px-4 py-6 lg:px-6",
+          props.noPermissionText && "cursor-not-allowed",
+        )}
+      >
+        {props.header && (
+          <>
+            <h3 className="font-semibold text-xl tracking-tight">
+              {props.header.title}
+            </h3>
+            {props.header.description && (
+              <p className="mt-1.5 mb-4 text-foreground text-sm">
+                {props.header.description}
+              </p>
+            )}
+          </>
+        )}
+
+        {props.children}
+      </div>
+
+      <div className="flex min-h-[60px] items-center justify-between gap-2 px-4 py-3 lg:px-6">
+        {props.noPermissionText ? (
+          <p className="text-muted-foreground text-sm">
+            {props.noPermissionText}
+          </p>
+        ) : props.errorText ? (
+          <p className="text-destructive-text text-sm">{props.errorText}</p>
+        ) : (
+          <p className="text-muted-foreground text-sm">{props.bottomText}</p>
+        )}
+
+        {props.saveButton && !props.noPermissionText && (
+          <Button
+            size="sm"
+            className="gap-2"
+            onClick={props.saveButton.onClick}
+            disabled={props.saveButton.disabled || props.saveButton.isPending}
+            variant="outline"
+            type={props.saveButton.type}
+          >
+            {props.saveButton.isPending && <Spinner className="size-3" />}
+            {props.saveButton.isPending ? "Saving" : "Save"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { ExternalLinkIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "../../lib/utils";
+import { NavLink } from "../ui/NavLink";
+
+export type SidebarLink = {
+  href: string;
+  label: React.ReactNode;
+  exactMatch?: boolean;
+  tracking?: {
+    category: string;
+    action: string;
+    label: string;
+  };
+};
+
+type SidebarContentProps = {
+  header?: React.ReactNode;
+  links: SidebarLink[];
+  className?: string;
+};
+
+export function Sidebar(props: SidebarContentProps) {
+  return (
+    <aside
+      className={cn(
+        "sticky top-0 hidden w-[230px] flex-shrink-0 self-start lg:block",
+        props.className,
+      )}
+    >
+      <div className="pt-7">
+        {props.header}
+        <div className="flex flex-col gap-1">
+          {props.links?.map((link) => {
+            const isExternal = link.href.startsWith("http");
+            return (
+              <NavLink
+                key={link.href}
+                href={link.href}
+                className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
+                activeClassName="text-foreground"
+                exactMatch={link.exactMatch}
+              >
+                {link.label}
+                {isExternal && <ExternalLinkIcon className="size-3" />}
+              </NavLink>
+            );
+          })}
+        </div>
+      </div>
+    </aside>
+  );
+}

apps/dashboard/src/@/components/blocks/SidebarLayout.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../stories/utils";
+import { SidebarLayout } from "./SidebarLayout";
+
+const meta = {
+  title: "blocks/SidebarLayout",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <SidebarLayout
+      sidebarLinks={[
+        {
+          href: "/foo",
+          label: "consectetur",
+        },
+        {
+          href: "/bar",
+          label: "adipiscing",
+        },
+        {
+          href: "/bar",
+          label: "eiusmod",
+        },
+        {
+          label: "incididunt",
+          href: "https://playground.thirdweb.com/",
+        },
+      ]}
+    >
+      <ContentPlaceholder />
+    </SidebarLayout>
+  );
+}
+
+function ContentPlaceholder() {
+  return (
+    <div className="flex grow items-center justify-center bg-muted">
+      <p className="text-3xl text-muted-foreground"> CHILDREN </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { cn } from "../../lib/utils";
+import { MobileSidebar } from "./MobileSidebar";
+import { Sidebar, type SidebarLink } from "./Sidebar";
+
+export function SidebarLayout(props: {
+  sidebarLinks: SidebarLink[];
+  children: React.ReactNode;
+  desktopSidebarClassName?: string;
+  mobileSidebarClassName?: string;
+  className?: string;
+}) {
+  const { sidebarLinks, children } = props;
+  return (
+    <div
+      className={cn(
+        "container flex w-full grow flex-col gap-6 px-4 max-sm:pt-6 lg:flex-row",
+        props.className,
+      )}
+    >
+      <Sidebar links={sidebarLinks} className={props.desktopSidebarClassName} />
+      <MobileSidebar
+        links={sidebarLinks}
+        triggerClassName={props.mobileSidebarClassName}
+      />
+      {/* min-w-0 is enough to ensure the content inside does not stretch this container */}
+      <main className="flex min-w-0 grow flex-col pb-10 max-sm:w-full lg:pt-8">
+        {children}
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,142 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import Link from "next/link";
+import {
+  SiDiscord,
+  SiGithub,
+  SiInstagram,
+  SiLinkedin,
+  SiReddit,
+  SiTiktok,
+  SiX,
+  SiYoutube,
+} from "react-icons/si";
+
+type AppFooterProps = {
+  className?: string;
+};
+
+export function AppFooter(props: AppFooterProps) {
+  return (
+    <footer
+      className={cn(
+        "w-full border-border border-t bg-muted/50 py-6 md:py-8",
+        props.className,
+      )}
+    >
+      <div className="container flex flex-col gap-4 md:gap-6">
+        {/* top row */}
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-row items-center gap-3">
+            <ThirdwebMiniLogo className="h-7" />
+            <p className="text-muted-foreground text-sm">© 2024 thirdweb</p>
+          </div>
+          <div className="flex flex-row gap-3">
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://github.com/thirdweb-dev" target="_blank">
+                <SiGithub className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.tiktok.com/@thirdweb" target="_blank">
+                <SiTiktok className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.instagram.com/thirdweb/" target="_blank">
+                <SiInstagram className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link
+                href="hhttps://www.linkedin.com/company/third-web/"
+                target="_blank"
+              >
+                <SiLinkedin className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.youtube.com/@thirdweb_" target="_blank">
+                <SiYoutube className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://discord.gg/thirdweb" target="_blank">
+                <SiDiscord className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
+                <SiReddit className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://x.com/thirdweb" target="_blank">
+                <SiX className="size-5 text-muted-foreground" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+        {/* bottom row */}
+        <div className="grid grid-flow-col grid-cols-2 grid-rows-5 gap-2 md:flex md:flex-row md:justify-between">
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="/"
+          >
+            Home
+          </Link>
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="https://blog.thirdweb.com"
+            target="_blank"
+          >
+            Blog
+          </Link>
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="https://portal.thirdweb.com/changelog"
+            target="_blank"
+          >
+            Changelog
+          </Link>
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="https://feedback.thirdweb.com/"
+            target="_blank"
+          >
+            Feedback
+          </Link>
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="https://thirdweb.com/privacy"
+            target="_blank"
+          >
+            Privacy Policy
+          </Link>
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="https://thirdweb.com/tos"
+            target="_blank"
+          >
+            Terms of Service
+          </Link>
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="https://thirdweb.com/gas"
+            target="_blank"
+          >
+            Gas Estimator
+          </Link>
+          <Link
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
+            href="https://thirdweb.com/chainlist"
+            target="_blank"
+          >
+            Chain List
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}

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";
+
+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";
+
+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/blocks/multi-select.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMemo, useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { MultiSelect } from "./multi-select";
+
+const meta = {
+  title: "blocks/MultiSelect",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function createList(len: number) {
+  return Array.from({ length: len }, (_, i) => ({
+    value: `${i}`,
+    label: `Item ${i}`,
+  }));
+}
+
+function Story() {
+  return (
+    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+      <VariantTest defaultValues={[]} storyLabel="5 items" listLen={5} />
+      <VariantTest defaultValues={[]} storyLabel="5000 items" listLen={5000} />
+      <VariantTest
+        defaultValues={["1", "3", "5"]}
+        storyLabel="20 items, 3 selected by default"
+        listLen={20}
+      />
+      <VariantTest
+        defaultValues={["1", "2", "3", "4", "5", "6", "7"]}
+        storyLabel="20 items, 7 selected, show max 3"
+        listLen={20}
+        maxCount={3}
+      />
+    </div>
+  );
+}
+
+function VariantTest(props: {
+  defaultValues: string[];
+  maxCount?: number;
+  storyLabel: string;
+  listLen: number;
+}) {
+  const list = useMemo(() => createList(props.listLen), [props.listLen]);
+  const [values, setValues] = useState<string[]>(props.defaultValues);
+
+  return (
+    <BadgeContainer label={props.storyLabel}>
+      <MultiSelect
+        selectedValues={values}
+        options={list}
+        onSelectedValuesChange={(values) => {
+          setValues(values);
+        }}
+        placeholder="Select items"
+        maxCount={props.maxCount}
+      />
+    </BadgeContainer>
+  );
+}

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDown, SearchIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useShowMore } from "../../lib/useShowMore";
+import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
+import { Input } from "../ui/input";
+
+interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  options: {
+    label: string;
+    value: string;
+  }[];
+
+  selectedValues: string[];
+  onSelectedValuesChange: (value: string[]) => void;
+  placeholder: string;
+
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized.
+   * Optional, defaults to 3.
+   */
+  maxCount?: number;
+
+  className?: string;
+}
+
+export const MultiSelect = React.forwardRef<
+  HTMLButtonElement,
+  MultiSelectProps
+>(
+  (
+    {
+      options,
+      onSelectedValuesChange,
+      placeholder,
+      maxCount = Number.POSITIVE_INFINITY,
+      className,
+      selectedValues,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+
+    const handleInputKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+          setIsPopoverOpen(true);
+        } else if (event.key === "Backspace" && !event.currentTarget.value) {
+          const newSelectedValues = [...selectedValues];
+          newSelectedValues.pop();
+          onSelectedValuesChange(newSelectedValues);
+        }
+      },
+      [selectedValues, onSelectedValuesChange],
+    );
+
+    const toggleOption = React.useCallback(
+      (option: string) => {
+        const newSelectedValues = selectedValues.includes(option)
+          ? selectedValues.filter((value) => value !== option)
+          : [...selectedValues, option];
+        onSelectedValuesChange(newSelectedValues);
+      },
+      [selectedValues, onSelectedValuesChange],
+    );
+
+    const handleClear = React.useCallback(() => {
+      onSelectedValuesChange([]);
+    }, [onSelectedValuesChange]);
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+
+    const clearExtraOptions = React.useCallback(() => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      onSelectedValuesChange(newSelectedValues);
+    }, [selectedValues, onSelectedValuesChange, maxCount]);
+
+    // show 50 initially and then 20 more when reaching the end
+    const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
+
+    const optionsToShow = React.useMemo(() => {
+      const searchValLowercase = searchValue.toLowerCase();
+      const filteredOptions = options.filter((option) => {
+        return option.label.toLowerCase().includes(searchValLowercase);
+      });
+
+      return filteredOptions.slice(0, itemsToShow);
+    }, [options, searchValue, itemsToShow]);
+
+    return (
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            onClick={handleTogglePopover}
+            className={cn(
+              "flex h-auto min-h-10 w-full items-center justify-between rounded-md border bg-inherit p-3 hover:bg-inherit",
+              className,
+            )}
+          >
+            {selectedValues.length > 0 ? (
+              <div className="flex w-full justify-between">
+                {/* badges */}
+                <div className="flex flex-wrap items-center gap-1.5">
+                  {selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    return (
+                      <ClosableBadge
+                        key={value}
+                        label={option?.label || ""}
+                        onClose={() => toggleOption(value)}
+                      />
+                    );
+                  })}
+
+                  {/* +X more */}
+                  {selectedValues.length > maxCount && (
+                    <ClosableBadge
+                      label={`+ ${selectedValues.length - maxCount} more`}
+                      onClose={clearExtraOptions}
+                    />
+                  )}
+                </div>
+
+                <div className="flex items-center justify-between gap-2">
+                  {/* Clear All */}
+                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+                  {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
+                  <div
+                    role="button"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleClear();
+                    }}
+                    className="rounded p-1 hover:bg-muted"
+                  >
+                    <XIcon className="h-4 cursor-pointer text-muted-foreground" />
+                  </div>
+
+                  <Separator
+                    orientation="vertical"
+                    className="flex h-full min-h-6"
+                  />
+                  <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                </div>
+              </div>
+            ) : (
+              <div className="flex w-full items-center justify-between">
+                <span className="text-muted-foreground text-sm">
+                  {placeholder}
+                </span>
+                <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+              </div>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          align="center"
+          sideOffset={10}
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+          style={{
+            width: "var(--radix-popover-trigger-width)",
+            maxHeight: "var(--radix-popover-content-available-height)",
+          }}
+        >
+          <div>
+            {/* Search */}
+            <div className="relative">
+              <Input
+                placeholder="Search"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
+                onKeyDown={handleInputKeyDown}
+              />
+              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+            </div>
+
+            <ScrollShadow
+              scrollableClassName="max-h-[350px] p-1"
+              className="rounded"
+            >
+              {/* List */}
+              <div>
+                {optionsToShow.length === 0 && (
+                  <div className="flex justify-center py-10">
+                    No results found
+                  </div>
+                )}
+
+                {optionsToShow.map((option, i) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  return (
+                    <Button
+                      key={option.value}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => toggleOption(option.value)}
+                      variant="ghost"
+                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2"
+                      ref={
+                        i === optionsToShow.length - 1 ? lastItemRef : undefined
+                      }
+                    >
+                      <div
+                        className={cn(
+                          "flex size-4 items-center justify-center rounded-sm border border-foreground",
+                          isSelected
+                            ? "bg-inverted text-inverted-foreground"
+                            : "opacity-50 [&_svg]:invisible",
+                        )}
+                      >
+                        <CheckIcon className="size-4" />
+                      </div>
+
+                      <span>{option.label}</span>
+                    </Button>
+                  );
+                })}
+              </div>
+            </ScrollShadow>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+function ClosableBadge(props: {
+  label: string;
+  onClose: () => void;
+}) {
+  return (
+    <span className="flex items-center gap-3 rounded-xl border border-border bg-muted px-2 py-1 text-foreground text-xs">
+      {props.label}
+      <XIcon
+        className="h-3 w-3 cursor-pointer text-muted-foreground"
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onClose();
+        }}
+      />
+    </span>
+  );
+}
+
+MultiSelect.displayName = "MultiSelect";

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useClipboard } from "hooks/useClipboard";
+import { Check, Copy, ExternalLinkIcon } from "lucide-react";
+import { useMemo } from "react";
+import { type ThirdwebClient, isAddress } from "thirdweb";
+import { ZERO_ADDRESS } from "thirdweb";
+import {
+  Blobbie,
+  MediaRenderer,
+  type SocialProfile,
+  useSocialProfiles,
+} from "thirdweb/react";
+import { resolveScheme } from "thirdweb/storage";
+import { cn } from "../../lib/utils";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+
+export function WalletAddress(props: {
+  address: string | undefined;
+  shortenAddress?: boolean;
+  className?: string;
+}) {
+  const thirdwebClient = useThirdwebClient();
+  // default back to zero address if no address provided
+  const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
+
+  const [shortenedAddress, lessShortenedAddress] = useMemo(() => {
+    return [
+      props.shortenAddress !== false
+        ? `${address.slice(0, 6)}...${address.slice(-4)}`
+        : address,
+      `${address.slice(0, 14)}...${address.slice(-12)}`,
+    ];
+  }, [address, props.shortenAddress]);
+
+  const profiles = useSocialProfiles({
+    address: address,
+    client: thirdwebClient,
+  });
+
+  const { onCopy, hasCopied } = useClipboard(address, 2000);
+
+  if (!isAddress(address)) {
+    return <span>Invalid Address ({address})</span>;
+  }
+
+  // special case for zero address
+  if (address === ZERO_ADDRESS) {
+    return <span className="cursor-pointer font-mono">{shortenedAddress}</span>;
+  }
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button
+          onClick={(e) => e.stopPropagation()}
+          variant="link"
+          className={cn(
+            "flex flex-row items-center gap-2 px-0",
+            props.className,
+          )}
+        >
+          {address && (
+            <WalletAvatar
+              address={address}
+              profiles={profiles.data || []}
+              thirdwebClient={thirdwebClient}
+            />
+          )}
+          <span className="cursor-pointer font-mono">
+            {profiles.data?.[0]?.name || shortenedAddress}
+          </span>
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent
+        className="w-80 border-border"
+        onClick={(e) => {
+          // do not close the hover card when clicking anywhere in the content
+          e.stopPropagation();
+        }}
+      >
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="font-semibold text-lg">Wallet Address</h3>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onCopy}
+              className="flex items-center gap-2"
+            >
+              {hasCopied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+              {hasCopied ? "Copied!" : "Copy"}
+            </Button>
+          </div>
+          <p className="rounded bg-muted p-2 text-center font-mono text-sm">
+            {lessShortenedAddress}
+          </p>
+          <h3 className="font-semibold text-lg">Social Profiles</h3>
+          {profiles.isPending ? (
+            <p className="text-muted-foreground text-sm">Loading profiles...</p>
+          ) : !profiles.data?.length ? (
+            <p className="text-muted-foreground text-sm">No profiles found</p>
+          ) : (
+            profiles.data?.map((profile) => (
+              <div
+                className="flex flex-row items-center gap-2"
+                key={profile.type + profile.name}
+              >
+                {profile.avatar &&
+                  (profile.avatar.startsWith("http") ||
+                    profile.avatar?.startsWith("ipfs")) && (
+                    <Avatar>
+                      <AvatarImage
+                        src={resolveScheme({
+                          client: thirdwebClient,
+                          uri: profile.avatar,
+                        })}
+                        alt={profile.name}
+                      />
+                      {profile.name && (
+                        <AvatarFallback>
+                          {profile.name.slice(0, 2)}
+                        </AvatarFallback>
+                      )}
+                    </Avatar>
+                  )}
+                <div className="flex w-full flex-col gap-1">
+                  <div className="flex w-full flex-row items-center justify-between gap-4">
+                    <h4 className="font-semibold text-md">{profile.name}</h4>
+                    <Badge variant="outline">{profile.type}</Badge>
+                  </div>
+                  {profile.bio && (
+                    <p className="line-clamp-1 whitespace-normal text-muted-foreground text-sm">
+                      {profile.bio}
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+          <Button
+            asChild
+            variant="upsell"
+            className="flex flex-row items-center gap-2 text-sm"
+            size="sm"
+          >
+            <a
+              target="_blank"
+              href="https://blog.thirdweb.com/changelog/introducing-the-social-sdk?ref=dashboard-social-wallet"
+              rel="noreferrer"
+            >
+              Learn more
+              <ExternalLinkIcon className="size-4" />
+            </a>
+          </Button>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+
+function WalletAvatar(props: {
+  address: string;
+  profiles: SocialProfile[];
+  thirdwebClient: ThirdwebClient;
+}) {
+  const avatar = useMemo(() => {
+    return props.profiles.find(
+      (profile) =>
+        profile.avatar &&
+        (profile.avatar.startsWith("http") ||
+          profile.avatar.startsWith("ipfs")),
+    )?.avatar;
+  }, [props.profiles]);
+  return (
+    <div className="size-6 overflow-hidden rounded-full">
+      {avatar ? (
+        <MediaRenderer
+          client={props.thirdwebClient}
+          src={avatar}
+          className="size-6"
+        />
+      ) : (
+        <Blobbie address={props.address} size={24} />
+      )}
+    </div>
+  );
+}

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

@@ -1,17 +1,16 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import * as React from "react";
-import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { Skeleton } from "./ui/skeleton";
 
 export function ColorModeToggle() {
   const { setTheme, theme } = useTheme();
 
   return (
-    <ClientOnly ssr={<Skeleton className="size-10 bg-accent border" />}>
+    <ClientOnly ssr={<Skeleton className="size-10 border bg-accent" />}>
       <Button
         variant="ghost"
         size="icon"
@@ -21,9 +20,9 @@ export function ColorModeToggle() {
         aria-label="Toggle theme"
       >
         {theme === "light" ? (
-          <Sun strokeWidth={1} className="size-6" />
+          <Sun strokeWidth={1} className="size-5" />
         ) : (
-          <Moon strokeWidth={1} className="size-6" />
+          <Moon strokeWidth={1} className="size-5" />
         )}
       </Button>
     </ClientOnly>

apps/dashboard/src/@/components/theme-provider.tsx

@@ -1,9 +1,18 @@
 "use client";
 
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 import type { ThemeProviderProps } from "next-themes/dist/types";
-import * as React from "react";
+import { useEffect } from "react";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
+
+export function useForceDarkTheme() {
+  const { setTheme } = useTheme();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setTheme("dark");
+  }, [setTheme]);
+}

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 m-2 p-2" />
+          )}
+
+          <div
+            className={cn(
+              "block overflow-auto whitespace-pre-wrap p-4 font-mono text-sm",
+              className,
+            )}
+          >
+            {tokens.map((line, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+              <div {...getLineProps({ line, key: i })} key={i}>
+                {line.map((token, key) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+                  <span {...getTokenProps({ token, key })} key={key} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </Highlight>
+  );
+};

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

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

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { CopyTextButton } from "./CopyTextButton";
 
 export function CopyAddressButton(props: {
@@ -15,14 +16,14 @@ export function CopyAddressButton(props: {
     | "ghost";
   copyIconPosition: "left" | "right";
 }) {
-  const shortenedAddress = `${props.address.slice(0, 6)}...${props.address.slice(0, 4)}`;
+  const shortenedAddress = `${props.address.slice(0, 6)}...${props.address.slice(-4)}`;
 
   return (
     <CopyTextButton
       textToCopy={props.address}
       textToShow={shortenedAddress}
       tooltip="Copy Address"
-      className="font-mono text-sm"
+      className={cn("font-mono text-sm", props.className)}
       variant={props.variant}
       copyIconPosition={props.copyIconPosition}
     />

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

@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "@/lib/utils";
+import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
@@ -10,21 +10,18 @@ export function CopyButton(props: {
   text: string;
   className?: string;
   iconClassName?: string;
+  variant?: "ghost" | "primary" | "secondary";
 }) {
-  const [isCopied, setIsCopied] = useState(false);
+  const { hasCopied, onCopy } = useClipboard(props.text, 1000);
   return (
     <ToolTipLabel label="Copy">
       <Button
-        variant="ghost"
+        variant={props.variant || "ghost"}
         aria-label="Copy"
         className={cn("h-auto w-auto p-1", props.className)}
-        onClick={() => {
-          navigator.clipboard.writeText(props.text);
-          setIsCopied(true);
-          setTimeout(() => setIsCopied(false), 1000);
-        }}
+        onClick={onCopy}
       >
-        {isCopied ? (
+        {hasCopied ? (
           <CheckIcon
             className={cn("size-4 text-green-500", props.iconClassName)}
           />

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

@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "@/lib/utils";
+import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
@@ -20,13 +20,19 @@ export function CopyTextButton(props: {
     | "secondary"
     | "ghost";
   copyIconPosition: "left" | "right";
+  onClick?: () => void;
 }) {
-  const [isCopied, setIsCopied] = useState(false);
-  const copyButton = isCopied ? (
-    <CheckIcon className={cn("size-3 text-green-500", props.iconClassName)} />
+  const { hasCopied, onCopy } = useClipboard(props.textToCopy, 1000);
+  const copyButton = hasCopied ? (
+    <CheckIcon
+      className={cn("size-3 shrink-0 text-green-500", props.iconClassName)}
+    />
   ) : (
     <CopyIcon
-      className={cn("size-3 text-muted-foreground", props.iconClassName)}
+      className={cn(
+        "size-3 shrink-0 text-muted-foreground",
+        props.iconClassName,
+      )}
     />
   );
 
@@ -36,24 +42,24 @@ export function CopyTextButton(props: {
         variant={props.variant || "outline"}
         aria-label={props.tooltip}
         className={cn(
-          "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground",
+          "flex h-auto w-auto gap-2 rounded-lg px-2.5 py-1.5 font-normal text-foreground",
           props.className,
         )}
-        onClick={() => {
-          navigator.clipboard.writeText(props.textToCopy);
-          setIsCopied(true);
-          setTimeout(() => setIsCopied(false), 1000);
+        onClick={(e) => {
+          onCopy();
+          e.stopPropagation();
+          props.onClick?.();
         }}
       >
         {props.copyIconPosition === "right" ? (
           <>
-            {props.textToShow}
+            <span className="min-w-0 truncate"> {props.textToShow} </span>
             {copyButton}
           </>
         ) : (
           <>
             {copyButton}
-            {props.textToShow}
+            <span className="min-w-0 truncate"> {props.textToShow} </span>
           </>
         )}
       </Button>

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

@@ -48,9 +48,9 @@ export function DatePickerWithRange(props: {
       <PopoverTrigger asChild>
         <Button
           id="date"
-          variant={"outline"}
+          variant="outline"
           className={cn(
-            "justify-start text-left font-normal gap-2",
+            "justify-start gap-2 text-left font-normal",
             props.className,
           )}
         >
@@ -60,7 +60,7 @@ export function DatePickerWithRange(props: {
               {format(from, "LLL dd, y")} - {format(to, "LLL dd, y")}
             </>
           )}
-          <ChevronDownIcon className="h-4 w-4 ml-auto text-muted-foreground" />
+          <ChevronDownIcon className="ml-auto h-4 w-4 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
 
@@ -69,7 +69,7 @@ export function DatePickerWithRange(props: {
         <DynamicHeight>
           <div>
             {!isValid && (
-              <p className="text-sm pt-2 justify-center text-destructive-foreground text-center flex items-center gap-2">
+              <p className="flex items-center justify-center gap-2 pt-2 text-center text-destructive-text text-sm">
                 <CalendarX2Icon className="h-4 w-4" />
                 Invalid date range
               </p>
@@ -113,9 +113,9 @@ export function DatePickerWithRange(props: {
                   }
                 }}
                 classNames={{
-                  day_range_start: "!bg-inverted",
+                  day_range_start: "!bg-inverted !text-inverted-foreground",
                   day_range_end:
-                    "!bg-inverted/20 !text-inverted pointer-events-none",
+                    "!bg-inverted/50 !text-inverted-foreground pointer-events-none",
                 }}
               />
             )}
@@ -135,9 +135,9 @@ export function DatePickerWithRange(props: {
                   }
                 }}
                 classNames={{
-                  day_range_end: "!bg-inverted",
+                  day_range_end: "!bg-inverted !text-inverted-foreground",
                   day_range_start:
-                    "!bg-inverted/20 !text-inverted pointer-events-none",
+                    "!bg-inverted/50 !text-inverted-foreground pointer-events-none",
                 }}
               />
             )}