feat(e2e): start dashboard

.github/labeler.yml

@@ -49,6 +49,9 @@ Github Config & Actions:
 '@kadena/rwa-demo':
   - changed-files:
       - any-glob-to-any-file: packages/apps/rwa-demo/*
+'@kadena/e2e-overview':
+  - changed-files:
+      - any-glob-to-any-file: packages/apps/e2e-overview/*
 '@kadena/graph':
   - changed-files:
       - any-glob-to-any-file: packages/apps/graph/*

.gitignore

@@ -104,3 +104,5 @@ temp
 
 # parcel
 .parcel-cache
+
+/.playwright-mcp

packages.json

@@ -161,6 +161,12 @@
     "private": true,
     "path": "packages/apps/rwa-demo"
   },
+  {
+    "name": "@kadena/e2e-overview",
+    "version": "0.0.1",
+    "private": true,
+    "path": "packages/apps/e2e-overview"
+  },
   {
     "name": "@kadena/snap",
     "version": "1.0.2",

packages/apps/e2e-overview/.eslintignore

@@ -0,0 +1,2 @@
+# generated code
+**/__generated__/**

packages/apps/e2e-overview/.eslintrc.js

@@ -0,0 +1,19 @@
+// This is a workaround for https://github.com/eslint/eslint/issues/3458
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+
+module.exports = {
+  extends: ['@kadena-dev/eslint-config/profile/next'],
+  ignorePatterns: ['**/__generated__/**', '/playwright-report'],
+  parserOptions: { tsconfigRootDir: __dirname },
+  rules: {
+    'jsx-a11y/aria-props': 'warn',
+    'jsx-a11y/role-has-required-aria-props': 'warn',
+    'jsx-a11y/heading-has-content': 'warn',
+    'jsx-a11y/mouse-events-have-key-events': 'warn',
+    'jsx-a11y/role-supports-aria-props': 'warn',
+    '@rushstack/no-new-null': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-uses-react': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+  },
+};

packages/apps/e2e-overview/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/artifacts
+/screenshots
+/test-results

packages/apps/e2e-overview/.prettierignore

@@ -0,0 +1,2 @@
+src/__generated__
+**/*.md

packages/apps/e2e-overview/instrumentation-client.js

@@ -0,0 +1,22 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  // Adds request headers and IP for users, for more info visit:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+  enabled: true, //process.env.NODE_ENV !== 'development', // Set to true for dev testing
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+  tracesSampleRate: 1.0,
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
+// This export will instrument router navigations, and is only relevant if you enable tracing.
+// `captureRouterTransitionStart` is available from SDK version 9.12.0 onwards
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

packages/apps/e2e-overview/instrumentation.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+export const onRequestError = Sentry.captureRequestError;
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./sentry.server.config');
+  }
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./sentry.edge.config');
+  }
+}

packages/apps/e2e-overview/next.config.js

@@ -0,0 +1,39 @@
+const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
+const withVanillaExtract = createVanillaExtractPlugin();
+const { withSentryConfig } = require('@sentry/nextjs');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false,
+  transpilePackages: ['@kadena/kode-ui'],
+  env: {
+    NEXT_PUBLIC_COMMIT_SHA: process.env.VERCEL_GIT_COMMIT_SHA,
+    NEXT_PUBLIC_BUILD_TIME: new Date().toUTCString(),
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/graph',
+        destination:
+          process.env.NEXT_PUBLIC_GRAPHURL ?? 'http://localhost:8080/graphql',
+      },
+    ];
+  },
+};
+
+const configWithSentry = withSentryConfig(nextConfig, {
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+  silent: !process.env.CI,
+  disableLogger: true,
+  reactComponentAnnotation: {
+    enabled: true,
+  },
+  automaticVercelMonitors: true,
+  tunnelRoute: '/monitoring',
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+});
+
+module.exports = withVanillaExtract(configWithSentry);

packages/apps/e2e-overview/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@kadena/e2e-overview",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "generatetypes": "npx supabase gen types typescript --project-id ykahoipuhxpwitpuyvvn > ./src/database.types.ts",
+    "lint": "pnpm run /^lint:.*/",
+    "lint:fmt": "prettier . --cache --check",
+    "lint:src": "eslint src",
+    "start": "next start",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest"
+  },
+  "browserslist": [
+    "defaults and supports es6-module",
+    "not dead",
+    "not IE 11"
+  ],
+  "dependencies": {
+    "@ai-sdk/gateway": "^1.0.21",
+    "@ai-sdk/openai": "^2.0.29",
+    "@ai-sdk/react": "^2.0.42",
+    "@anthropic-ai/sdk": "^0.62.0",
+    "@google-analytics/data": "~3.2.2",
+    "@graphql-yoga/apollo-link": "~3.3.0",
+    "@kadena/kode-icons": "workspace:*",
+    "@kadena/kode-ui": "workspace:*",
+    "@modelcontextprotocol/sdk": "^1.18.0",
+    "@playwright/mcp": "^0.0.38",
+    "@playwright/test": "^1.45.3",
+    "@prisma/client": "5.16.1",
+    "@sentry/nextjs": "^10.5.0",
+    "@sentry/tracing": "^7.120.3",
+    "@supabase/ssr": "^0.7.0",
+    "@supabase/supabase-js": "^2.57.4",
+    "@tanstack/react-query": "^5.32.0",
+    "@vanilla-extract/css": "1.14.2",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/next-plugin": "^2.4.14",
+    "@vanilla-extract/recipes": "0.5.1",
+    "ai": "^5.0.42",
+    "cache-sh": "^1.2.1",
+    "classnames": "^2.3.1",
+    "cors": "^2.8.5",
+    "cronstrue": "^3.3.0",
+    "dockerode": "^4.0.9",
+    "dotenv": "~16.4.5",
+    "execa": "^9.6.0",
+    "mailgun.js": "^12.0.2",
+    "next": "~15.4.6",
+    "next-themes": "^0.4.6",
+    "playwright": "^1.55.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.45.4",
+    "react-markdown": "^10.1.0",
+    "types": "link:@modelcontextprotocol/sdk/types",
+    "uuid": "^9.0.1",
+    "zod": "~3.23.0"
+  },
+  "devDependencies": {
+    "@kadena-dev/eslint-config": "workspace:*",
+    "@kadena-dev/lint-package": "workspace:*",
+    "@kadena-dev/shared-config": "workspace:*",
+    "@sentry/types": "^9.29.0",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.3",
+    "@types/gtag.js": "~0.0.12",
+    "@types/node": "^20.12.7",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.1",
+    "@types/uuid": "^9.0.8",
+    "@vanilla-extract/vite-plugin": "4.0.17",
+    "@vanilla-extract/webpack-plugin": "2.3.7",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^1.6.0",
+    "eslint": "^8.45.0",
+    "eslint-config-next": "13.4.5",
+    "express": "^5.1.0",
+    "prettier": "~3.2.5",
+    "prisma": "^5.16.1",
+    "supabase": "^2.45.5",
+    "ts-node": "~10.9.2",
+    "typescript": "5.4.5",
+    "vitest": "^1.6.0",
+    "vitest-dom": "^0.1.1"
+  }
+}

packages/apps/e2e-overview/playwright.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@playwright/test';
+export default defineConfig({
+  use: {
+    headless: false,
+    viewport: { width: 1366, height: 900 },
+    locale: 'en-US',
+    timezoneId: 'UTC',
+    trace: 'on-first-retry',
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  reporter: [['html', { open: 'never' }]],
+});

packages/apps/e2e-overview/playwright.mcp.config.json

@@ -0,0 +1,20 @@
+{
+  "browser": {
+    "browserName": "chromium",
+    "launchOptions": {
+      "headless": false
+    }
+  },
+  "outputDir": "./results",
+  "saveSession": true,
+  "saveTrace": true,
+  "timeOuts": {
+    "action": 10000,
+    "navigation": 30000
+  },
+  "server": {
+    "port": 8931,
+    "host": "localhost",
+    "verbose": true
+  }
+}

packages/apps/e2e-overview/sentry.edge.config.js

@@ -0,0 +1,7 @@
+import * as Sentry from '@sentry/nextjs';
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  sendDefaultPii: true,
+  tracesSampleRate: 1.0,
+  environment: process.env.NODE_ENV,
+});

packages/apps/e2e-overview/sentry.server.config.js

@@ -0,0 +1,7 @@
+import * as Sentry from '@sentry/nextjs';
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  sendDefaultPii: true,
+  tracesSampleRate: 1.0,
+  environment: process.env.NODE_ENV,
+});

packages/apps/e2e-overview/src/app/(app)/KLogo.tsx

@@ -0,0 +1,57 @@
+import type { FC } from 'react';
+import { logoClass } from './../styles.css';
+
+export const KLogo: FC<{ className?: string }> = (props) => (
+  <svg
+    data-style="kdacolor"
+    viewBox="0 0 160 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    className={logoClass}
+  >
+    <g clipPath="url(#clip0_1001_16541)">
+      <path
+        d="M33.0251 23.1416V8.85695H35.2012V14.7935H35.5375C36.4215 13.8112 38.182 11.8319 40.8222 8.85695H43.6723C42.6033 10.0398 40.4727 12.3835 37.2804 15.8894C38.3876 17.0973 40.599 19.5147 43.9102 23.1416H40.9617C40.0645 22.1313 38.2569 20.1136 35.539 17.0841H35.2027V23.1416H33.0266H33.0251Z"
+        fill="currentColor"
+      />
+      <path
+        d="M44.502 23.1416C45.1745 20.764 46.5209 16.0015 48.5385 8.85545H52.3976C53.0701 11.2331 54.4166 15.9956 56.4341 23.1416H54.1772C54.0184 22.5841 53.7088 21.4617 53.2478 19.7744H47.6868C47.5415 20.3319 47.2317 21.4543 46.7574 23.1416H44.502ZM48.2419 17.7419H52.6938C52.3503 16.4809 51.6649 13.9764 50.637 10.2301H50.3005C49.957 11.4794 49.2712 13.9823 48.2433 17.7419H48.2419Z"
+        fill="currentColor"
+      />
+      <path
+        d="M57.8213 23.1416V8.85695H63.5009C65.388 8.85695 66.8316 9.3422 67.8341 10.3112C68.8491 11.2817 69.3583 12.736 69.3583 14.674V17.3436C69.3583 19.2964 68.8506 20.7507 67.8341 21.7065C66.8316 22.6622 65.3865 23.1401 63.5009 23.1401H57.8213V23.1416ZM60.0389 21.1489H63.5218C64.7479 21.1489 65.6583 20.8377 66.2526 20.2138C66.846 19.5767 67.1427 18.6401 67.1427 17.4041V14.5944C67.1427 13.3451 66.846 12.4159 66.2526 11.8038C65.6598 11.1932 64.7494 10.8879 63.5218 10.8879H60.0389V21.1489Z"
+        fill="currentColor"
+      />
+      <path
+        d="M71.8313 23.1416V8.85695H80.756V10.8702H74.0076V14.9543H80.2024V16.9675H74.0076V21.1519H80.856V23.1445H71.8313V23.1416Z"
+        fill="currentColor"
+      />
+      <path
+        d="M83.1538 23.1416V8.85695H87.3695C88.0027 10.9955 89.2829 15.2655 91.2093 21.6681H91.5458V8.85695H93.7027V23.143H89.487C88.8539 21.0044 87.5751 16.7271 85.6472 10.3112H85.3107V23.143H83.1538V23.1416Z"
+        fill="currentColor"
+      />
+      <path
+        d="M95.6187 23.1416C96.2912 20.764 97.6376 16.0015 99.6556 8.85545H103.514C104.187 11.2331 105.533 15.9956 107.551 23.1416H105.295C105.137 22.5841 104.827 21.4617 104.366 19.7744H98.8069C98.6616 20.3319 98.3515 21.4543 97.8771 23.1416H95.6201H95.6187ZM99.359 17.7419H103.811C103.467 16.4809 102.782 13.9764 101.754 10.2301H101.417C101.074 11.4794 100.388 13.9823 99.3604 17.7419H99.359Z"
+        fill="currentColor"
+      />
+      <path
+        d="M28.8065 28L20.1489 27.9956L9.35791 19.5354L13.7469 16L28.8065 28Z"
+        fill="#4A9079"
+      />
+      <path
+        d="M28.8065 4H20.1534L9.35791 12.4646L13.7469 16L28.8065 4Z"
+        fill="#4A9079"
+      />
+      <path
+        d="M9.35494 27.9956L3.98218 23.7316V8.2685L9.35494 4.00451V27.9956Z"
+        fill="#4A9079"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1001_16541">
+        <rect width="112" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);