[Dashboard] Add token request route to dashboard (#7112)

TOOL-4443
TOOL-4559

How to Test
1. Log into dashboard
2. Select a project
3. Click on Universal Bridge on left hand side
4. Click on Settings
5. Scroll down to add token section

-  Failure input
Chain: Ethereum
Token Address: 0x7613c48e0cd50e42dd9bf0f6c235063145f6f8db

-Success input
Chain: Ethereum
Token Address:0x7613c48e0cd50e42dd9bf0f6c235063145f6f8dc

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new validation schema for route discovery, enhances the UI for token submission, and integrates a new `RouteDiscovery` component to facilitate token discovery in the dashboard.

### Detailed summary
- Added `routeDiscoveryValidationSchema` in `validations.ts` for validating token discovery inputs.
- Created `RouteDiscovery` component to handle token submission.
- Updated `page.tsx` to include `RouteDiscovery` below `PayConfig`.
- Implemented `addUniversalBridgeTokenRoute` function in `tokens.ts` for API token submission.
- Added `RouteDiscoveryCard` component for better UI presentation of token discovery.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a Route Discovery workflow, allowing users to submit tokens for route discovery on selected blockchain networks.
  - Added a new card component for displaying route discovery information and actions.
  - Integrated Route Discovery into the Universal Bridge settings page for easier access.

- **Enhancements**
  - Added validation for token address and chain selection to ensure proper input.
  - Provided user feedback through success and error messages, including toast notifications.

- **Style**
  - Minor cleanup of extra blank lines in the Project General Settings page for improved readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: Joe-Thirdweb

apps/dashboard/src/@/api/universal-bridge/tokens.ts

@@ -1,5 +1,7 @@
 "use server";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
+import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
 import { UB_BASE_URL } from "./constants";
 
 export type TokenMetadata = {
@@ -37,3 +39,33 @@ export async function getUniversalBridgeTokens(props: {
   const json = await res.json();
   return json.data as Array<TokenMetadata>;
 }
+
+export async function addUniversalBridgeTokenRoute(props: {
+  chainId: number;
+  tokenAddress: string;
+  project: ProjectResponse;
+}) {
+  const authToken = await getAuthToken();
+  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
+
+  const res = await fetch(url.toString(), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${authToken}`,
+      "x-client-id": props.project.publishableKey,
+    } as Record<string, string>,
+    body: JSON.stringify({
+      chainId: props.chainId,
+      tokenAddress: props.tokenAddress,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<TokenMetadata>;
+}

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

@@ -0,0 +1,84 @@
+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 RouteDiscoveryCard(
+  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";
+      variant?:
+        | "ghost"
+        | "default"
+        | "primary"
+        | "destructive"
+        | "outline"
+        | "secondary";
+      className?: string;
+      label?: string;
+    };
+  }>,
+) {
+  return (
+    <div className="relative rounded-lg border border-border bg-card">
+      <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={cn("gap-2", props.saveButton.className)}
+            onClick={props.saveButton.onClick}
+            disabled={props.saveButton.disabled || props.saveButton.isPending}
+            variant={props.saveButton.variant || "outline"}
+            type={props.saveButton.type}
+          >
+            {props.saveButton.isPending && <Spinner className="size-3" />}
+            {props.saveButton.label ||
+              (props.saveButton.isPending ? "Submit" : "Submit Token")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/settings/page.tsx

@@ -2,6 +2,8 @@ import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { getFees } from "@/api/universal-bridge/developer";
 import { PayConfig } from "components/pay/PayConfig";
+import { RouteDiscovery } from "components/pay/RouteDiscovery";
+
 import { redirect } from "next/navigation";
 
 export default async function Page(props: {
@@ -47,11 +49,17 @@ export default async function Page(props: {
   }
 
   return (
-    <PayConfig
-      project={project}
-      teamId={team.id}
-      teamSlug={team_slug}
-      fees={fees}
-    />
+    <div className="flex flex-col p-5">
+      <PayConfig
+        project={project}
+        teamId={team.id}
+        teamSlug={team_slug}
+        fees={fees}
+      />
+
+      <div className="flex pt-5">
+        <RouteDiscovery project={project} />
+      </div>
+    </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx

@@ -349,40 +349,33 @@ export function ProjectGeneralSettingsPageUI(props: {
             isUpdatingProject={updateProject.isPending}
             handleSubmit={handleSubmit}
           />
-
           <ProjectImageSetting
             updateProjectImage={props.updateProjectImage}
             avatar={project.image || null}
             client={props.client}
           />
-
           <ProjectKeyDetails
             project={project}
             rotateSecretKey={props.rotateSecretKey}
           />
-
           <ProjectIdCard project={project} />
-
           <AllowedDomainsSetting
             form={form}
             isUpdatingProject={updateProject.isPending}
             handleSubmit={handleSubmit}
           />
-
           <AllowedBundleIDsSetting
             form={form}
             isUpdatingProject={updateProject.isPending}
             handleSubmit={handleSubmit}
           />
-
           <EnabledServicesSetting
             form={form}
             isUpdatingProject={updateProject.isPending}
             handleSubmit={handleSubmit}
             paths={paths}
             showNebulaSettings={props.showNebulaSettings}
           />
-
           <TransferProject
             isOwnerAccount={props.isOwnerAccount}
             client={props.client}
@@ -391,7 +384,6 @@ export function ProjectGeneralSettingsPageUI(props: {
             currentTeamId={project.teamId}
             transferProject={props.transferProject}
           />
-
           <DeleteProject
             projectName={project.name}
             deleteProject={props.deleteProject}

apps/dashboard/src/components/pay/RouteDiscovery.tsx

@@ -0,0 +1,165 @@
+"use client";
+import { addUniversalBridgeTokenRoute } from "@/api/universal-bridge/tokens"; // Adjust the import path
+import { RouteDiscoveryCard } from "@/components/blocks/RouteDiscoveryCard";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { NetworkSelectorButton } from "components/selects/NetworkSelectorButton";
+import {
+  type RouteDiscoveryValidationSchema,
+  routeDiscoveryValidationSchema,
+} from "components/settings/ApiKeys/validations";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+const TRACKING_CATEGORY = "token_discovery";
+
+export const RouteDiscovery = ({ project }: { project: ProjectResponse }) => {
+  const form = useForm<RouteDiscoveryValidationSchema>({
+    resolver: zodResolver(routeDiscoveryValidationSchema),
+    defaultValues: {
+      chainId: 1,
+      tokenAddress: undefined,
+    },
+  });
+
+  const trackEvent = useTrack();
+
+  const submitDiscoveryMutation = useMutation({
+    mutationFn: async (values: {
+      chainId: number;
+      tokenAddress: string;
+    }) => {
+      // Call the API to add the route
+      const result = await addUniversalBridgeTokenRoute({
+        chainId: values.chainId,
+        tokenAddress: values.tokenAddress,
+        project,
+      });
+
+      return result;
+    },
+  });
+
+  const handleSubmit = form.handleSubmit(
+    ({ chainId, tokenAddress }) => {
+      submitDiscoveryMutation.mutate(
+        {
+          chainId,
+          tokenAddress,
+        },
+        {
+          onSuccess: (data) => {
+            toast.success("Token submitted successfully!", {
+              description:
+                "Thank you for your submission. Contact support if your token doesn't appear after some time.",
+            });
+            trackEvent({
+              category: TRACKING_CATEGORY,
+              action: "token-discovery-submit",
+              label: "success",
+              data: {
+                tokenAddress,
+                tokenCount: data?.length || 0,
+              },
+            });
+          },
+          onError: () => {
+            toast.error("Token submission failed!", {
+              description:
+                "Please double check the network and token address. If issues persist, please reach out to our support team.",
+            });
+
+            // Get appropriate error message
+            const errorMessage = "An unknown error occurred";
+
+            trackEvent({
+              category: TRACKING_CATEGORY,
+              action: "token-discovery-submit",
+              label: "error",
+              error: errorMessage,
+            });
+          },
+        },
+      );
+    },
+    () => {
+      toast.error("Please fix the form errors before submitting");
+    },
+  );
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} autoComplete="off">
+        <RouteDiscoveryCard
+          bottomText=""
+          errorText={form.getFieldState("tokenAddress").error?.message}
+          saveButton={
+            // Only show the submit button in the default state
+            {
+              type: "submit",
+              disabled: !form.formState.isDirty,
+              isPending: submitDiscoveryMutation.isPending,
+              variant: "outline",
+            }
+          }
+          noPermissionText={undefined}
+        >
+          <div>
+            <h3 className="font-semibold text-xl tracking-tight">
+              Don't see your token listed?
+            </h3>
+            <p className="mt-1.5 mb-4 text-foreground text-sm">
+              Select your chain and input the token address to automatically
+              kick-off the token route discovery process. Please check back on
+              this page within 20-40 minutes of submitting this form.
+            </p>
+
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="chainId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Blockchain</FormLabel>
+                    <FormControl>
+                      <NetworkSelectorButton
+                        onSwitchChain={(chain) => {
+                          // Update the form field value
+                          field.onChange(chain.chainId);
+                        }}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="tokenAddress"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Token Address</FormLabel>
+                    <FormControl>
+                      <div className="flex items-center gap-2">
+                        <Input {...field} placeholder="0x..." />
+                      </div>
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+        </RouteDiscoveryCard>
+      </form>
+    </Form>
+  );
+};