Fix: Modify checker endpoints setup with InitChecker (#85)

ghostffcode · web-flow · commit 7b1c60163b6d · 2025-06-18T06:31:01.000-05:00
* checker provider update with InitChecker for api url

* update stories to use the InitChecker setup

* changeset

* lockfile
diff --git a/.changeset/purple-bugs-sing.md b/.changeset/purple-bugs-sing.md
@@ -0,0 +1,5 @@
+---
+"@gitcoin/ui": patch
+---
+
+Updated default setup for CheckerProvider with InitChecker
diff --git a/packages/ui/src/features/checker/apps/ApplicationView.tsx b/packages/ui/src/features/checker/apps/ApplicationView.tsx
@@ -8,7 +8,12 @@ import { CheckerProvider } from "~checker/store";
 
 export const ApplicationView: React.FC<ViewApplicationEvaluationsPageProps> = (props) => {
   return (
-    <CheckerProvider>
+    <CheckerProvider
+      config={{
+        checkerEndpoint: "https://checker-api-production.up.railway.app",
+        gsIndexerEndpoint: "https://hasura-production-3454.up.railway.app/v1/graphql",
+      }}
+    >
       <ViewApplicationEvaluationsPage {...props} />
     </CheckerProvider>
   );
diff --git a/packages/ui/src/features/checker/apps/Checker.stories.tsx b/packages/ui/src/features/checker/apps/Checker.stories.tsx
@@ -40,7 +40,12 @@ export const Default: Story = {
       );
     };
     return (
-      <CheckerProvider>
+      <CheckerProvider
+        config={{
+          checkerEndpoint: "https://checker-api-production.up.railway.app",
+          gsIndexerEndpoint: "https://hasura-production-3454.up.railway.app/v1/graphql",
+        }}
+      >
         <StoryWrapper />
       </CheckerProvider>
     );
diff --git a/packages/ui/src/features/checker/apps/Checker.tsx b/packages/ui/src/features/checker/apps/Checker.tsx
@@ -24,7 +24,12 @@ export interface CheckerProps {
 
 export const Checker = (props: CheckerProps) => {
   return (
-    <CheckerProvider>
+    <CheckerProvider
+      config={{
+        checkerEndpoint: "https://checker-api-production.up.railway.app",
+        gsIndexerEndpoint: "https://hasura-production-3454.up.railway.app/v1/graphql",
+      }}
+    >
       <CheckerRouter {...props} />
     </CheckerProvider>
   );
diff --git a/packages/ui/src/features/checker/index.ts b/packages/ui/src/features/checker/index.ts
@@ -9,3 +9,4 @@ export * from "./store";
 export * from "./types";
 export * from "./utils";
 export * from "./constants";
+export * from "./init/InitChecker";
diff --git a/packages/ui/src/features/checker/init/InitChecker.tsx b/packages/ui/src/features/checker/init/InitChecker.tsx
@@ -0,0 +1,35 @@
+import React, { ReactNode, useEffect, useState } from "react";
+
+import { initializeAlloClient } from "../services/allo/alloClient";
+import { initializeCheckerClient } from "../services/checker/checkerClient";
+
+export interface CheckerConfig {
+  checkerEndpoint: string;
+  gsIndexerEndpoint: string;
+}
+
+interface InitCheckerProps {
+  children?: ReactNode;
+  config: CheckerConfig;
+}
+
+// Default configuration
+export const defaultConfig: CheckerConfig = {
+  checkerEndpoint: "https://api.checker.gitcoin.co",
+  gsIndexerEndpoint: "https://yc7lia2566.execute-api.us-east-2.amazonaws.com/api/v1/graphql",
+};
+
+export const InitChecker: React.FC<InitCheckerProps> = ({
+  children = null,
+  config = defaultConfig,
+}) => {
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    initializeCheckerClient(config.checkerEndpoint);
+    initializeAlloClient(config.gsIndexerEndpoint);
+    setInitialized(true);
+  }, [config]);
+
+  return <>{initialized ? children : null}</>;
+};
diff --git a/packages/ui/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.stories.tsx b/packages/ui/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.stories.tsx
@@ -22,7 +22,12 @@ const meta: Meta<typeof ApplicationEvaluationOverviewPage> = {
   },
   decorators: [
     (Story) => (
-      <CheckerProvider>
+      <CheckerProvider
+        config={{
+          checkerEndpoint: "https://checker-api-production.up.railway.app",
+          gsIndexerEndpoint: "https://hasura-production-3454.up.railway.app/v1/graphql",
+        }}
+      >
         <Story />
       </CheckerProvider>
     ),
diff --git a/packages/ui/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx b/packages/ui/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx
@@ -60,10 +60,7 @@ export const ReviewApplicationsPage = ({ isStandalone }: { isStandalone: boolean
   };
 
   const openCheckerApplicationEvaluations = (projectId: string) => {
-    window.open(
-      `https://beta.checker.gitcoin.co/view/application/${chainId}/${poolId}/${projectId}`,
-      "_blank",
-    );
+    window.open(`/view/application/${chainId}/${poolId}/${projectId}`, "_blank");
   };
 
   return (
diff --git a/packages/ui/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx b/packages/ui/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx
@@ -24,7 +24,12 @@ const meta: Meta<typeof SubmitApplicationEvaluationPage> = {
   decorators: [
     (Story) => {
       return (
-        <CheckerProvider>
+        <CheckerProvider
+          config={{
+            checkerEndpoint: "https://checker-api-production.up.railway.app",
+            gsIndexerEndpoint: "https://hasura-production-3454.up.railway.app/v1/graphql",
+          }}
+        >
           <Story />
         </CheckerProvider>
       );
diff --git a/packages/ui/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.stories.tsx b/packages/ui/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.stories.tsx
@@ -22,7 +22,12 @@ const meta: Meta<typeof ViewApplicationEvaluationsPage> = {
   },
   decorators: [
     (Story) => (
-      <CheckerProvider>
+      <CheckerProvider
+        config={{
+          checkerEndpoint: "https://checker-api-production.up.railway.app",
+          gsIndexerEndpoint: "https://hasura-production-3454.up.railway.app/v1/graphql",
+        }}
+      >
         <Story />
       </CheckerProvider>
     ),
diff --git a/packages/ui/src/features/checker/services/allo/alloClient.ts b/packages/ui/src/features/checker/services/allo/alloClient.ts
@@ -1,15 +1,16 @@
 // services/graphqlClient.ts
 import { GraphQLClient } from "graphql-request";
 
-// Base URL for the GraphQL API
-const GS_INDEXER_ENDPOINT = "https://yc7lia2566.execute-api.us-east-2.amazonaws.com/api/v1/graphql";
+let graphqlClient: GraphQLClient;
 
 // Create a new instance of GraphQLClient
-export const graphqlClient = new GraphQLClient(GS_INDEXER_ENDPOINT, {
-  headers: {
-    "Content-Type": "application/json",
-  },
-});
+export const initializeAlloClient = (endpoint: string) => {
+  graphqlClient = new GraphQLClient(endpoint, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+};
 
 /**
  * Executes a GraphQL query.
diff --git a/packages/ui/src/features/checker/services/checker/api.ts b/packages/ui/src/features/checker/services/checker/api.ts
@@ -1,6 +1,6 @@
 import { EvaluationBody } from "../../types";
 import { ProjectApplicationForManager } from "../allo";
-import { CHECKER_ENDPOINT } from "./checkerClient";
+import { getCheckerEndpoint } from "./checkerClient";
 
 export interface SyncPoolBody {
   chainId: number;
@@ -17,7 +17,7 @@ export interface TriggerLLMBody {
 export async function submitEvaluation(
   evaluationBody: EvaluationBody,
 ): Promise<{ evaluationId: string }> {
-  const url = `${CHECKER_ENDPOINT}/api/evaluate`;
+  const url = `${getCheckerEndpoint()}/api/evaluate`;
 
   try {
     const response = await fetch(url, {
@@ -42,7 +42,7 @@ export async function submitEvaluation(
 }
 
 export async function syncPool(syncPoolBody: SyncPoolBody): Promise<boolean> {
-  const url = `${CHECKER_ENDPOINT}/api/pools`;
+  const url = `${getCheckerEndpoint()}/api/pools`;
 
   try {
     const response = await fetch(url, {
@@ -69,7 +69,7 @@ export async function syncPool(syncPoolBody: SyncPoolBody): Promise<boolean> {
 }
 
 export async function triggerLLM(triggerLLMBody: TriggerLLMBody): Promise<boolean> {
-  const url = `${CHECKER_ENDPOINT}/api/evaluate/llm`;
+  const url = `${getCheckerEndpoint()}/api/evaluate/llm`;
 
   try {
     const response = await fetch(url, {
@@ -97,7 +97,7 @@ export async function triggerLLM(triggerLLMBody: TriggerLLMBody): Promise<boolea
 export async function verifyCredentials(
   application: Partial<ProjectApplicationForManager>,
 ): Promise<{ twitter: boolean; github: boolean }> {
-  const url = `${CHECKER_ENDPOINT}/api/passport/validate`;
+  const url = `${getCheckerEndpoint()}/api/passport/validate`;
 
   try {
     const response = await fetch(url, {
diff --git a/packages/ui/src/features/checker/services/checker/checkerClient.ts b/packages/ui/src/features/checker/services/checker/checkerClient.ts
@@ -1,16 +1,20 @@
 // services/graphqlClient.ts
 import { GraphQLClient } from "graphql-request";
 
-// Base URL for the GraphQL API
-export const CHECKER_ENDPOINT = "https://api.checker.gitcoin.co";
-const CHECKER_GRAPHQL_ENDPOINT = `${CHECKER_ENDPOINT}/graphql`;
-
 // Create a new instance of GraphQLClient
-export const graphqlClient = new GraphQLClient(CHECKER_GRAPHQL_ENDPOINT, {
-  headers: {
-    "Content-Type": "application/json",
-  },
-});
+let graphqlClient: GraphQLClient;
+let _checkerEndpoint = "https://api.checker.gitcoin.co";
+export const getCheckerEndpoint = () => _checkerEndpoint;
+
+export const initializeCheckerClient = (endpoint: string) => {
+  _checkerEndpoint = endpoint;
+  const CHECKER_GRAPHQL_ENDPOINT = `${endpoint}/graphql`;
+  graphqlClient = new GraphQLClient(CHECKER_GRAPHQL_ENDPOINT, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+};
 
 /**
  * Executes a GraphQL query.
diff --git a/packages/ui/src/features/checker/store/CheckerProvider.tsx b/packages/ui/src/features/checker/store/CheckerProvider.tsx
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { Toaster } from "@/components/Toaster";
 
+import { CheckerConfig, defaultConfig, InitChecker } from "~checker/init/InitChecker";
 import {
   CheckerContext,
   CheckerDispatchContext,
@@ -13,14 +14,19 @@ import { checkerReducer } from "~checker/store/checkerReducer";
 
 const queryClient = new QueryClient();
 
-export const CheckerProvider = ({ children }: PropsWithChildren) => {
+export const CheckerProvider = ({
+  children,
+  config,
+}: PropsWithChildren<{ config?: CheckerConfig }>) => {
   const [state, dispatch] = useReducer(checkerReducer, initialState);
   return (
     <QueryClientProvider client={queryClient}>
       <CheckerContext.Provider value={state}>
         <CheckerDispatchContext.Provider value={dispatch}>
-          <Toaster />
-          {children}
+          <InitChecker config={config ?? defaultConfig}>
+            <Toaster />
+            {children}
+          </InitChecker>
         </CheckerDispatchContext.Provider>
       </CheckerContext.Provider>
     </QueryClientProvider>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@gitcoin/ui": patch
 +---
++
 +Updated default setup for CheckerProvider with InitChecker