Adding initial form

Author: Joe-Thirdweb

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

@@ -0,0 +1,39 @@
+"use server";
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+
+export type TokenMetadata = {
+  name: string;
+  symbol: string;
+  address: string;
+  decimals: number;
+  chainId: number;
+  iconUri?: string;
+};
+
+export async function addUniversalBridgeTokenRoute(props: {
+  chainId?: number;
+  tokenAddress?: string;
+}) {
+  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}`,
+    } 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/pay/RouteDiscovery.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { Project } from "@/api/projects";
+import { addUniversalBridgeTokenRoute } from "@/api/universal-bridge/addRoute"; // Adjust the import path
 import type { Fee } from "@/api/universal-bridge/developer";
 import { RouteDiscoveryCard } from "@/components/blocks/RouteDiscoveryCard";
 import {
@@ -12,6 +13,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
 import { NetworkSelectorButton } from "components/selects/NetworkSelectorButton";
 import {
   type RouteDiscoveryValidationSchema,
@@ -20,95 +22,179 @@ import {
 import { useTrack } from "hooks/analytics/useTrack";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 
-interface PayConfigProps {
+interface RouteDiscoveryProps {
   project: Project;
   teamId: string;
   teamSlug: string;
   fees: Fee;
 }
 
-const TRACKING_CATEGORY = "pay";
+const TRACKING_CATEGORY = "token_discovery";
 
-export const RouteDiscovery: React.FC<PayConfigProps> = (props) => {
+export const RouteDiscovery: React.FC<RouteDiscoveryProps> = () => {
   const [isSubmitSuccess, setIsSubmitSuccess] = useState(false);
+  const [isSubmitFail, setIsSubmitFailed] = useState(false);
+
+  // State to track the selected chain ID directly from the NetworkSelectorButton
+  const [selectedChainId, setSelectedChainId] = useState<number | undefined>(
+    undefined,
+  );
+
   const form = useForm<RouteDiscoveryValidationSchema>({
     resolver: zodResolver(routeDiscoveryValidationSchema),
     defaultValues: {
+      chainId: 1,
       tokenAddress: "",
     },
   });
 
   const trackEvent = useTrack();
 
+  const submitDiscoveryMutation = useMutation({
+    mutationFn: async (values: {
+      tokenAddress: string;
+    }) => {
+      try {
+        // Call the API to add the route
+        const result = await addUniversalBridgeTokenRoute({
+          chainId: selectedChainId,
+          tokenAddress: values.tokenAddress,
+        });
+
+        return result;
+      } catch (error) {
+        console.error("Error adding route:", error);
+        throw error; // Re-throw to trigger onError handler
+      }
+    },
+  });
+
   const handleSubmit = form.handleSubmit(
-    () => {
-      console.log("Button pressed");
-      setIsSubmitSuccess(true);
+    ({ tokenAddress }) => {
+      console.log("selectedChainId", selectedChainId);
+      submitDiscoveryMutation.mutate(
+        {
+          tokenAddress,
+        },
+        {
+          onSuccess: (data) => {
+            setIsSubmitSuccess(true);
+            toast.success("Token submitted for discovery");
+            console.log("Token route added successfully:", data);
+            trackEvent({
+              category: TRACKING_CATEGORY,
+              action: "token-discovery-submit",
+              label: "success",
+              data: {
+                tokenAddress,
+                tokenCount: data?.length || 0,
+              },
+            });
+          },
+          onError: (err) => {
+            setIsSubmitFailed(true);
+            toast.error("Token Submission Failed");
+            console.error("Token route addition failed:", err);
+
+            // Get appropriate error message
+            let errorMessage = "An unknown error occurred";
+            if (err instanceof Error) {
+              errorMessage = err.message;
+            }
+
+            trackEvent({
+              category: TRACKING_CATEGORY,
+              action: "token-discovery-submit",
+              label: "error",
+              error: errorMessage,
+            });
+          },
+        },
+      );
     },
     (errors) => {
-      console.log(errors);
+      console.log("Form validation errors:", errors);
+      toast.error("Please fix the form errors before submitting");
     },
   );
 
   // Success component shown after successful submission
   const SuccessComponent = () => (
-    <div className="bg-green-50 border border-green-200 rounded-md p-4 mt-4">
-      <h4 className="text-green-600 font-medium text-lg">
+    <div className="mt-4 rounded-md border border-green-200 bg-green-50 p-4">
+      <h4 className="font-medium text-green-600 text-lg">
         Token submitted successfully!
       </h4>
-      <p className="text-green-600">
+      <p className="mb-3 text-green-600">
         Thank you for your submission. If you still do not see your token listed
         after some time, please reach out to our team for support.
       </p>
     </div>
   );
 
+  // Failure component shown after submission fails
+  const FailComponent = () => (
+    <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
+      <h4 className="font-medium text-lg text-red-600">
+        Token submission failed!
+      </h4>
+      <p className="mb-2 text-red-600">
+        Please double check the network and token address. If issues persist,
+        please reach out to our support team.
+        {submitDiscoveryMutation.error instanceof Error && (
+          <span className="mt-1 block text-sm">
+            Error: {submitDiscoveryMutation.error.message}
+          </span>
+        )}
+      </p>
+    </div>
+  );
+
   return (
-    <RouteDiscoveryCard
-      bottomText=""
-      saveButton={
-        !isSubmitSuccess
-          ? {
-              type: "submit",
-              form: "route-discovery-form", // Connect to form by ID
-              disabled: !form.formState.isDirty || form.formState.isSubmitting,
-              variant: "primary",
-            }
-          : undefined
-      }
-      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>
-
-        {isSubmitSuccess ? (
-          // Show success message after successful submission
-          <SuccessComponent />
-        ) : (
-          // Show form when not yet successfully submitted
-          <Form {...form}>
-              <form onSubmit={handleSubmit} autoComplete="off">
-              autoComplete="off"
-            >
+    <Form {...form}>
+      <form onSubmit={handleSubmit} autoComplete="off">
+        <RouteDiscoveryCard
+          bottomText=""
+          errorText={form.getFieldState("tokenAddress").error?.message}
+          saveButton={{
+            type: "submit",
+            disabled: !form.formState.isDirty,
+            isPending: submitDiscoveryMutation.isPending,
+          }}
+          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>
+
+            {isSubmitSuccess ? (
+              <SuccessComponent />
+            ) : isSubmitFail ? (
+              <FailComponent />
+            ) : (
               <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                 <FormField
                   control={form.control}
-                  name="blockchain"
+                  name="chainId"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Blockchain</FormLabel>
                       <FormControl>
                         <NetworkSelectorButton
-                          value={field.value}
-                          onChange={field.onChange}
+                          onSwitchChain={(chain) => {
+                            // When a chain is selected, capture its ID and name
+                            setSelectedChainId(chain.chainId);
+
+                            // Update the form field value
+                            field.onChange(chain.chainId);
+                          }}
                         />
                       </FormControl>
                     </FormItem>
@@ -129,10 +215,10 @@ export const RouteDiscovery: React.FC<PayConfigProps> = (props) => {
                   )}
                 />
               </div>
-            </form>
-          </Form>
-        )}
-      </div>
-    </RouteDiscoveryCard>
+            )}
+          </div>
+        </RouteDiscoveryCard>
+      </form>
+    </Form>
   );
 };

apps/dashboard/src/components/settings/ApiKeys/validations.ts

@@ -124,6 +124,7 @@ export const apiKeyPayConfigValidationSchema = z.object({
 });
 
 export const routeDiscoveryValidationSchema = z.object({
+  chainId: z.number(),
   tokenAddress: z
     .string({
       required_error: "Token address is required",