Dashboard Mutations

.env.local.template

@@ -1,11 +1,9 @@
-WALLETCONNECT_PROJECT_ID=""
-
 # auth
 # Keycloak client secret, ask engineering team for this. It is required for local authentication
 AUTH_KEYCLOAK_SECRET=""
 # NB: an auth secret can be generated and injected automatically with `npx auth`, see https://cli.authjs.dev
 AUTH_SECRET=""
 
-# NB: mocked user ID from locally seeded database.
-# TODO: remove once keycloak / hidra are synced with database (https://linear.app/omnidev/issue/OMNI-147/replace-mock-user-id-flow-with-hidra-integration)
-NEXT_PUBLIC_MOCK_USER_ID=""
+# NB: mocked user HIDRA ID from locally seeded database.
+# TODO: remove once keycloak / hidra are synced with database and mock data is no longer needed (https://linear.app/omnidev/issue/OMNI-147/replace-mock-user-id-flow-with-hidra-integration)
+NEXT_PUBLIC_MOCK_USER_HIDRA_ID=""

package.json

@@ -22,7 +22,6 @@
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@graphql-codegen/typescript-react-query": "^6.1.0",
     "@pandacss/dev": "^0.48.0",
-    "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20.11.19",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
@@ -36,14 +35,13 @@
   "dependencies": {
     "@ark-ui/react": "^4.4.3",
     "@omnidev/sigil": "^0.12.2",
-    "@rainbow-me/rainbowkit": "^2.2.0",
+    "@tanstack/react-form": "^0.41.0",
     "@tanstack/react-query": "^5.20.5",
     "@tanstack/react-query-devtools": "^5.20.5",
     "@theme-toggles/react": "^4.1.0",
     "dayjs": "^1.11.10",
     "graphql": "^16.10.0",
     "graphql-request": "^7.1.2",
-    "lodash.merge": "^4.6.2",
     "next": "^15.0.3",
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.4.3",
@@ -55,8 +53,7 @@
     "recharts": "^2.13.3",
     "ts-pattern": "^5.5.0",
     "usehooks-ts": "^3.1.0",
-    "viem": "^2.7.9",
-    "wagmi": "^2.5.7"
+    "zod": "^3.24.1"
   },
   "trustedDependencies": [
     "@biomejs/biome",

src/app/not-found.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Button, Text, VStack } from "@omnidev/sigil";
-import Link from "next/link";
 
+import { Link } from "components/core";
 import { app } from "lib/config";
 
 /**

src/app/organizations/[organizationId]/page.tsx → src/app/organizations/[organizationSlug]/page.tsx

@@ -13,9 +13,11 @@ import type { Metadata } from "next";
 export const generateMetadata = async ({
   params,
 }: Props): Promise<Metadata> => {
-  const { organizationId } = await params;
+  const { organizationSlug } = await params;
 
-  const { organization } = await sdk.Organization({ rowId: organizationId });
+  const { organizationBySlug: organization } = await sdk.Organization({
+    slug: organizationSlug,
+  });
 
   return {
     title: `${organization?.name} | ${app.name}`,
@@ -24,18 +26,18 @@ export const generateMetadata = async ({
 
 interface Props {
   /** Organization page params. */
-  params: Promise<{ organizationId: string }>;
+  params: Promise<{ organizationSlug: string }>;
 }
 
 /**
  * Organization overview page.
  */
 const OrganizationPage = async ({ params }: Props) => {
-  const { organizationId } = await params;
+  const { organizationSlug } = await params;
 
-  const [session, { organization }] = await Promise.all([
+  const [session, { organizationBySlug: organization }] = await Promise.all([
     getAuthSession(),
-    sdk.Organization({ rowId: organizationId }),
+    sdk.Organization({ slug: organizationSlug }),
   ]);
 
   const breadcrumbs = [
@@ -44,7 +46,7 @@ const OrganizationPage = async ({ params }: Props) => {
       href: "/organizations",
     },
     {
-      label: organization?.name ?? organizationId,
+      label: organization?.name ?? organizationSlug,
     },
   ];
 
@@ -62,7 +64,7 @@ const OrganizationPage = async ({ params }: Props) => {
             // TODO: get Sigil Icon component working and update accordingly. Context: https://github.com/omnidotdev/backfeed-app/pull/44#discussion_r1897974331
             icon: <HiOutlineFolder />,
             variant: "outline",
-            href: `/organizations/${organizationId}/projects`,
+            href: `/organizations/${organizationSlug}/projects`,
           },
           {
             label: app.organizationPage.header.cta.newProject.label,
@@ -72,7 +74,10 @@ const OrganizationPage = async ({ params }: Props) => {
         ],
       }}
     >
-      <OrganizationOverview organizationId={organizationId} />
+      <OrganizationOverview
+        organizationId={organization?.rowId}
+        organizationSlug={organizationSlug}
+      />
     </Page>
   );
 };

src/app/organizations/[organizationId]/projects/[projectId]/[feedbackId]/page.tsx → src/app/organizations/[organizationSlug]/projects/[projectSlug]/[feedbackId]/page.tsx

@@ -13,8 +13,8 @@ export const metadata = {
 interface Props {
   /** Feedback page params. */
   params: Promise<{
-    organizationId: string;
-    projectId: string;
+    organizationSlug: string;
+    projectSlug: string;
     feedbackId: string;
   }>;
 }
@@ -23,7 +23,7 @@ interface Props {
  * Feedback overview page.
  */
 const FeedbackPage = async ({ params }: Props) => {
-  const { organizationId, projectId, feedbackId } = await params;
+  const { organizationSlug, projectSlug, feedbackId } = await params;
 
   const [session, { post: feedback }] = await Promise.all([
     getAuthSession(),
@@ -36,16 +36,16 @@ const FeedbackPage = async ({ params }: Props) => {
       href: "/organizations",
     },
     {
-      label: feedback?.project?.organization?.name ?? organizationId,
-      href: `/organizations/${organizationId}`,
+      label: feedback?.project?.organization?.name ?? organizationSlug,
+      href: `/organizations/${organizationSlug}`,
     },
     {
       label: app.projectsPage.breadcrumb,
-      href: `/organizations/${organizationId}/projects`,
+      href: `/organizations/${organizationSlug}/projects`,
     },
     {
-      label: feedback?.project?.name ?? projectId,
-      href: `/organizations/${organizationId}/projects/${projectId}`,
+      label: feedback?.project?.name ?? projectSlug,
+      href: `/organizations/${organizationSlug}/projects/${projectSlug}`,
     },
     {
       label: app.feedbackPage.breadcrumb,

src/app/organizations/[organizationId]/projects/[projectId]/page.tsx → src/app/organizations/[organizationSlug]/projects/[projectSlug]/page.tsx

@@ -1,9 +1,9 @@
 import { notFound } from "next/navigation";
-import { LuSettings } from "react-icons/lu";
 import { HiOutlineFolder } from "react-icons/hi2";
+import { LuSettings } from "react-icons/lu";
 
-import { ProjectOverview } from "components/project";
 import { Page } from "components/layout";
+import { ProjectOverview } from "components/project";
 import { app } from "lib/config";
 import { sdk } from "lib/graphql";
 import { getAuthSession } from "lib/util";
@@ -13,9 +13,11 @@ import type { Metadata } from "next";
 export const generateMetadata = async ({
   params,
 }: Props): Promise<Metadata> => {
-  const { projectId } = await params;
+  const { organizationSlug, projectSlug } = await params;
+
+  const { projects } = await sdk.Project({ projectSlug, organizationSlug });
 
-  const { project } = await sdk.Project({ rowId: projectId });
+  const project = projects?.nodes?.[0];
 
   return {
     title: `${project?.name} | ${app.name}`,
@@ -24,35 +26,37 @@ export const generateMetadata = async ({
 
 interface Props {
   /** Project page params. */
-  params: Promise<{ organizationId: string; projectId: string }>;
+  params: Promise<{ organizationSlug: string; projectSlug: string }>;
 }
 
 /**
  * Project overview page.
  */
 const ProjectPage = async ({ params }: Props) => {
-  const { organizationId, projectId } = await params;
+  const { organizationSlug, projectSlug } = await params;
 
-  const [session, { project }] = await Promise.all([
+  const [session, { projects }] = await Promise.all([
     getAuthSession(),
-    sdk.Project({ rowId: projectId }),
+    sdk.Project({ projectSlug, organizationSlug }),
   ]);
 
+  const project = projects?.nodes?.[0];
+
   const breadcrumbs = [
     {
       label: app.organizationsPage.breadcrumb,
       href: "/organizations",
     },
     {
-      label: project?.organization?.name ?? organizationId,
-      href: `/organizations/${organizationId}`,
+      label: project?.organization?.name ?? organizationSlug,
+      href: `/organizations/${organizationSlug}`,
     },
     {
       label: app.projectsPage.breadcrumb,
-      href: `/organizations/${organizationId}/projects`,
+      href: `/organizations/${organizationSlug}/projects`,
     },
     {
-      label: project?.name ?? projectId,
+      label: project?.name ?? projectSlug,
     },
   ];
 
@@ -76,12 +80,12 @@ const ProjectPage = async ({ params }: Props) => {
             // TODO: get Sigil Icon component working and update accordingly. Context: https://github.com/omnidotdev/backfeed-app/pull/44#discussion_r1897974331
             icon: <HiOutlineFolder />,
             variant: "outline",
-            href: `/organizations/${organizationId}/projects`,
+            href: `/organizations/${organizationSlug}/projects`,
           },
         ],
       }}
     >
-      <ProjectOverview projectId={projectId} />
+      <ProjectOverview projectId={project?.rowId} />
     </Page>
   );
 };

src/app/organizations/[organizationId]/projects/page.tsx → src/app/organizations/[organizationSlug]/projects/page.tsx

@@ -12,9 +12,11 @@ import type { Metadata } from "next";
 export const generateMetadata = async ({
   params,
 }: Props): Promise<Metadata> => {
-  const { organizationId } = await params;
+  const { organizationSlug } = await params;
 
-  const { organization } = await sdk.Organization({ rowId: organizationId });
+  const { organizationBySlug: organization } = await sdk.Organization({
+    slug: organizationSlug,
+  });
 
   return {
     title: `${organization?.name} ${app.projectsPage.breadcrumb} | ${app.name}`,
@@ -23,18 +25,18 @@ export const generateMetadata = async ({
 
 interface Props {
   /** Projects page params. */
-  params: Promise<{ organizationId: string }>;
+  params: Promise<{ organizationSlug: string }>;
 }
 
 /**
  * Projects overview page.
  */
 const ProjectsPage = async ({ params }: Props) => {
-  const { organizationId } = await params;
+  const { organizationSlug } = await params;
 
-  const [session, { organization }] = await Promise.all([
+  const [session, { organizationBySlug: organization }] = await Promise.all([
     getAuthSession(),
-    sdk.Organization({ rowId: organizationId }),
+    sdk.Organization({ slug: organizationSlug }),
   ]);
 
   const breadcrumbs = [
@@ -43,8 +45,8 @@ const ProjectsPage = async ({ params }: Props) => {
       href: "/organizations",
     },
     {
-      label: organization?.name ?? organizationId,
-      href: `/organizations/${organizationId}`,
+      label: organization?.name ?? organizationSlug,
+      href: `/organizations/${organizationSlug}`,
     },
     {
       label: app.projectsPage.breadcrumb,

src/app/providers.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  BlockchainProvider,
   QueryProvider,
   SearchParamsProvider,
   AuthProvider,
@@ -17,9 +16,7 @@ const Providers = ({ children }: { children: ReactNode }) => (
   <AuthProvider>
     <ThemeProvider>
       <SearchParamsProvider>
-        <QueryProvider>
-          <BlockchainProvider>{children}</BlockchainProvider>
-        </QueryProvider>
+        <QueryProvider>{children}</QueryProvider>
       </SearchParamsProvider>
     </ThemeProvider>
   </AuthProvider>

src/auth.ts

@@ -6,9 +6,9 @@ import "next-auth/jwt";
 
 import { token } from "generated/panda/tokens";
 
+import { sdk } from "lib/graphql";
 import type { User as NextAuthUser } from "next-auth";
 import type { DefaultJWT } from "next-auth/jwt";
-import { sdk } from "lib/graphql";
 
 /**
  * Augment the JWT interface with custom claims. See `callbacks` below, where the `jwt` callback is augmented.
@@ -28,6 +28,7 @@ declare module "next-auth/jwt" {
 declare module "next-auth" {
   interface Session {
     user: {
+      rowId?: string;
       hidraId?: string;
       firstName?: string;
       lastName?: string;
@@ -110,6 +111,14 @@ export const { handlers, auth } = NextAuth({
       session.user.lastName = token.family_name;
       session.user.username = token.preferred_username;
 
+      // retrieve user by HIDRA ID
+      const { userByHidraId } = await sdk.User({ hidraId: token.sub! });
+
+      if (userByHidraId) {
+        // TODO: discuss removing additional augmentation of the session object (i.e. user.rowId) and just overwriting the user.id field here. Currently, the user.id field is ovewritten within the `useAuth` hook to supply mock data, but when that is no longer required, we could simply overwrite that field here instead.
+        session.user.rowId = userByHidraId.rowId;
+      }
+
       return session;
     },
   },

src/components/core/Breadcrumb/Breadcrumb.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { Flex, Icon, Text } from "@omnidev/sigil";
-import { app } from "lib/config";
-import Link from "next/link";
 import { LuChevronRight } from "react-icons/lu";
 
+import { Link } from "components/core";
+import { app } from "lib/config";
+
 export interface BreadcrumbRecord {
   /** Label for the breadcrumb. */
   label: string;
@@ -32,7 +33,8 @@ const Breadcrumb = ({ breadcrumbs }: Props) => (
       const isLastItem = breadcrumbs.length - 1 === index;
 
       return (
-        <Flex key={label} align="center">
+        // biome-ignore lint/suspicious/noArrayIndexKey: index used in the key in case an organization and project have the same label
+        <Flex key={`${label}-${index}`} align="center">
           <Icon src={LuChevronRight} color="foreground.subtle" mx={2} />
 
           {href ? (