[Dashboard] Feature: update ecosystem wallet auth options (#4797)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces new authentication options for the ecosystem feature, updates related types, and enhances the UI components to support these options.

### Detailed summary
- Added new authentication options: `google`, `facebook`, `x`, `discord`, `farcaster`, `telegram`, `phone`, `email`, `guest`, `apple`, `coinbase`, `line`.
- Updated `Ecosystem` type to include `authOptions`.
- Modified `useUpdateEcosystem` to accept optional `authOptions`.
- Added `AuthOptionsSection` to the `EcosystemPermissionsPage`.
- Created `AuthOptionsForm` for managing authentication options.
- Implemented confirmation dialog for adding/removing auth options.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

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

@@ -1,4 +1,5 @@
 "use client";
+import { AuthOptionsSection } from "./components/server/auth-options-section";
 import { EcosystemPartnersSection } from "./components/server/ecosystem-partners-section";
 import { IntegrationPermissionsSection } from "./components/server/integration-permissions-section";
 import { useEcosystem } from "./hooks/use-ecosystem";
@@ -11,6 +12,7 @@ export function EcosystemPermissionsPage({
   return (
     <div className="flex flex-col gap-12">
       <IntegrationPermissionsSection ecosystem={ecosystem} />
+      <AuthOptionsSection ecosystem={ecosystem} />
       {ecosystem?.permission === "PARTNER_WHITELIST" && (
         <EcosystemPartnersSection ecosystem={ecosystem} />
       )}

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/auth-options-form.client.tsx

@@ -0,0 +1,99 @@
+"use client";
+import { ConfirmationDialog } from "@/components/ui/ConfirmationDialog";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import { toast } from "sonner";
+import invariant from "tiny-invariant";
+import { type Ecosystem, authOptions } from "../../../../types";
+import { useUpdateEcosystem } from "../../hooks/use-update-ecosystem";
+
+export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
+  const [messageToConfirm, setMessageToConfirm] = useState<
+    | {
+        title: string;
+        description: string;
+        authOptions: typeof ecosystem.authOptions;
+      }
+    | undefined
+  >();
+  const {
+    mutateAsync: updateEcosystem,
+    variables,
+    isPending,
+  } = useUpdateEcosystem({
+    onError: (error) => {
+      const message =
+        error instanceof Error ? error.message : "Failed to create ecosystem";
+      toast.error(message);
+    },
+  });
+
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-5 md:gap-2">
+      {authOptions.map((option) => (
+        <CheckboxWithLabel
+          key={option}
+          className={cn(
+            isPending &&
+              variables?.authOptions?.includes(option) &&
+              "animate-pulse",
+            "hover:cursor-pointer hover:text-foreground",
+          )}
+        >
+          <Checkbox
+            checked={ecosystem.authOptions.includes(option)}
+            onClick={() => {
+              if (ecosystem.authOptions.includes(option)) {
+                setMessageToConfirm({
+                  title: `Are you sure you want to remove ${option.slice(0, 1).toUpperCase() + option.slice(1)} as an authentication option for this ecosystem?`,
+                  description:
+                    "Users will no longer be able to log into your ecosystem using this option. Any users that previously used this option will be unable to log in.",
+                  authOptions: ecosystem.authOptions.filter(
+                    (o) => o !== option,
+                  ),
+                });
+              } else {
+                setMessageToConfirm({
+                  title: `Are you sure you want to add ${option.slice(0, 1).toUpperCase() + option.slice(1)} as an authentication option for this ecosystem?`,
+                  description:
+                    "Users will be able to log into your ecosystem using this option. If you later remove this option users that used it will no longer be able to log in.",
+                  authOptions: [...ecosystem.authOptions, option],
+                });
+              }
+            }}
+          />
+          {option.slice(0, 1).toUpperCase() + option.slice(1)}
+        </CheckboxWithLabel>
+      ))}
+      <ConfirmationDialog
+        open={!!messageToConfirm}
+        onOpenChange={(open) => {
+          if (!open) {
+            setMessageToConfirm(undefined);
+          }
+        }}
+        title={messageToConfirm?.title}
+        description={messageToConfirm?.description}
+        onSubmit={() => {
+          invariant(messageToConfirm, "Must have message for modal to be open");
+          updateEcosystem({
+            ecosystem,
+            authOptions: messageToConfirm.authOptions,
+          });
+        }}
+      />
+    </div>
+  );
+}
+
+export function AuthOptionsFormSkeleton() {
+  return (
+    <div className="flex flex-col gap-2 py-2 md:flex-row md:gap-4">
+      {authOptions.map((option) => (
+        <Skeleton key={option} className="h-14 w-full md:w-32" />
+      ))}
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/server/auth-options-section.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import type { Ecosystem } from "../../../../types";
+import {
+  AuthOptionsForm,
+  AuthOptionsFormSkeleton,
+} from "../client/auth-options-form.client";
+
+export function AuthOptionsSection({ ecosystem }: { ecosystem?: Ecosystem }) {
+  return (
+    <section className="flex flex-col gap-4 md:gap-8">
+      <div className="flex flex-col gap-1">
+        <h4 className="font-semibold text-2xl text-foreground">
+          Authentication Options
+        </h4>
+        {ecosystem ? (
+          <p className="text-muted-foreground text-sm">
+            Configure the authentication options your ecosystem supports.
+          </p>
+        ) : (
+          <Skeleton className="h-6 w-[300px]" />
+        )}
+      </div>
+      {ecosystem ? (
+        <AuthOptionsForm ecosystem={ecosystem} />
+      ) : (
+        <AuthOptionsFormSkeleton />
+      )}
+    </section>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/hooks/use-update-ecosystem.ts

@@ -4,11 +4,12 @@ import {
   useMutation,
   useQueryClient,
 } from "@tanstack/react-query";
-import type { Ecosystem } from "../../../types";
+import type { AuthOption, Ecosystem } from "../../../types";
 
 type UpdateEcosystemParams = {
   ecosystem: Ecosystem;
-  permission: "PARTNER_WHITELIST" | "ANYONE";
+  permission?: "PARTNER_WHITELIST" | "ANYONE";
+  authOptions?: AuthOption[];
 };
 
 export function useUpdateEcosystem(
@@ -38,6 +39,7 @@ export function useUpdateEcosystem(
           },
           body: JSON.stringify({
             permission: params.permission,
+            authOptions: params.authOptions,
           }),
         },
       );

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/types.ts

@@ -1,10 +1,26 @@
+export const authOptions = [
+  "google",
+  "facebook",
+  "x",
+  "discord",
+  "farcaster",
+  "telegram",
+  "phone",
+  "email",
+  "guest",
+  "apple",
+  "coinbase",
+  "line",
+] as const;
+export type AuthOption = (typeof authOptions)[number];
+
 export type Ecosystem = {
   name: string;
   imageUrl?: string;
   id: string;
   slug: string;
   permission: "PARTNER_WHITELIST" | "ANYONE";
-  authOptions: unknown;
+  authOptions: (typeof authOptions)[number][];
   url: string;
   status: "active" | "requested" | "paymentFailed";
   createdAt: string;