refactor(subgraph-client): simplify subgraph URL configuration

.github/workflows/release-please.yml

@@ -55,9 +55,7 @@ jobs:
       matrix:
         network: [calibration, mainnet]
     env:
-      # Goldsky subgraph name (VITE_GOLDSKY_PROJECT_NAME in the client env).
-      # Endpoint scheme is pdp-explorer/<network>_<version>.
-      GOLDSKY_SUBGRAPH: pdp-explorer
+      # Endpoint scheme is pdp-explorer-<network>/<version>.
       VERSION: ${{ needs.release-please.outputs.version }}
     steps:
       - uses: actions/checkout@v4
@@ -79,4 +77,4 @@ jobs:
       - name: Deploy to Goldsky (${{ matrix.network }})
         env:
           GOLDSKY_API_KEY: ${{ secrets.GOLDSKY_API_KEY }}
-        run: goldsky subgraph deploy "$GOLDSKY_SUBGRAPH/${{ matrix.network }}_$VERSION" --path . --token "$GOLDSKY_API_KEY"
+        run: goldsky subgraph deploy "pdp-explorer-${{ matrix.network }}/$VERSION" --path . --token "$GOLDSKY_API_KEY"

README.md

@@ -81,10 +81,8 @@ Wait until `mainnet_<version>` and `calibration_<version>` finish syncing.
 ```bash
 cd subgraph-client
 # Parameters
-# VITE_GOLDSKY_PROJECT_ID: see Goldsky documentation
-# VITE_GOLDSKY_PROJECT_NAME: product-name
-# VITE_GOLDSKY_MAINNET_SUBGRAPH_VERSION: mainnet_<version>
-# VITE_GOLDSKY_CALIBRATION_SUBGRAPH_VERSION: calibration_<version>
+# VITE_SUBGRAPH_URL_MAINNET: mainnet subgraph query url
+# VITE_SUBGRAPH_URL_CALIBRATION: calibration subgraph query url
 cp .env.example .env
 # Local test
 npm run dev

docs/subgraph/deployment.md

@@ -95,17 +95,15 @@ The `subgraph-client` is a Vite application that queries the deployed subgraph.
     The client needs to know where to find the subgraph. Create a `.env` file in the `subgraph-client` directory with the following content:
 
     ```dotenv
-    VITE_GOLDSKY_PROJECT_ID=<your-goldsky-project-id> # goldsky project id ( subgraph project id )
-    VITE_GOLDSKY_PROJECT_NAME=<your-goldsky-project-name> # goldsky project name ( subgraph project name )
-    VITE_MAINNET_PDP_VERIFIER= # mainnet pdp verifier contract address
-    VITE_MAINNET_PDP_SERVICE= # mainnet pdp simple service contract address
-    VITE_CALIBRATION_PDP_VERIFIER= # calibration pdp verifier contract address
-    VITE_CALIBRATION_PDP_SERVICE= # calibration pdp simple service contract address
-    VITE_GOLDSKY_MAINNET_SUBGRAPH_VERSION= # mainnet subgraph version
-    VITE_GOLDSKY_CALIBRATION_SUBGRAPH_VERSION= # calibration subgraph version
+    VITE_SUBGRAPH_URL_MAINNET= # mainnet subgraph url (https://api.goldsky.com/api/public/<PROJECT_ID>/subgraphs/<SUBGRAPH_NAME>/<SUBGRAPH_VERSION/SUBGRAPH_TAG>/gn)
+    VITE_SUBGRAPH_URL_CALIBRATION= # calibration subgraph url
+    VITE_MAINNET_PDP_VERIFIER= # mainnet pdp verifier contract address (optional)
+    VITE_MAINNET_PDP_SERVICE= # mainnet pdp simple service contract address (optional)
+    VITE_CALIBRATION_PDP_VERIFIER= # calibration pdp verifier contract address (optional)
+    VITE_CALIBRATION_PDP_SERVICE= # calibration pdp simple service contract address (optional)
     ```
 
-    - Replace `<your-goldsky-project-id>` and `<your-goldsky-project-name>` with the project ID and name from the Goldsky dashboard.
+    - Replace `VITE_SUBGRAPH_URL_MAINNET` and `VITE_SUBGRAPH_URL_CALIBRATION` with the deployed subgraph query URLs from the Goldsky dashboard.
 
 3.  **Install Dependencies:**
     If you haven't already, install the client's dependencies:

subgraph-client/.env.example

@@ -1,8 +1,6 @@
-VITE_GOLDSKY_PROJECT_ID= # goldsky project id ( subgraph project id )
-VITE_GOLDSKY_PROJECT_NAME= # goldsky project name ( subgraph project name )
+VITE_SUBGRAPH_URL_MAINNET= # mainnet subgraph url (https://api.goldsky.com/api/public/<PROJECT_ID>/subgraphs/<SUBGRAPH_NAME>/<SUBGRAPH_VERSION/SUBGRAPH_TAG>/gn)
+VITE_SUBGRAPH_URL_CALIBRATION= # calibration subgraph url
 VITE_MAINNET_PDP_VERIFIER= # mainnet pdp verifier contract address (optional)
 VITE_MAINNET_PDP_SERVICE= # mainnet pdp simple service contract address (optional)
 VITE_CALIBRATION_PDP_VERIFIER= # calibration pdp verifier contract address (optional)
 VITE_CALIBRATION_PDP_SERVICE= # calibration pdp simple service contract address (optional)
-VITE_GOLDSKY_MAINNET_SUBGRAPH_VERSION= # mainnet subgraph version
-VITE_GOLDSKY_CALIBRATION_SUBGRAPH_VERSION= # calibration subgraph version

subgraph-client/public/docs/subgraph/deployment.md

@@ -102,17 +102,15 @@ The `subgraph-client` is a Vite application that queries the deployed subgraph.
     The client needs to know where to find the subgraph. Create a `.env` file in the `subgraph-client` directory with the following content:
 
     ```dotenv
-    VITE_GOLDSKY_PROJECT_ID=<your-goldsky-project-id> # goldsky project id ( subgraph project id )
-    VITE_GOLDSKY_PROJECT_NAME=<your-goldsky-project-name> # goldsky project name ( subgraph project name )
-    VITE_MAINNET_PDP_VERIFIER= # mainnet pdp verifier contract address
-    VITE_MAINNET_PDP_SERVICE= # mainnet pdp simple service contract address
-    VITE_CALIBRATION_PDP_VERIFIER= # calibration pdp verifier contract address
-    VITE_CALIBRATION_PDP_SERVICE= # calibration pdp simple service contract address
-    VITE_GOLDSKY_MAINNET_SUBGRAPH_VERSION= # mainnet subgraph version
-    VITE_GOLDSKY_CALIBRATION_SUBGRAPH_VERSION= # calibration subgraph version
+    VITE_SUBGRAPH_URL_MAINNET= # mainnet subgraph url (https://api.goldsky.com/api/public/<PROJECT_ID>/subgraphs/<SUBGRAPH_NAME>/<SUBGRAPH_VERSION/SUBGRAPH_TAG>/gn)
+    VITE_SUBGRAPH_URL_CALIBRATION= # calibration subgraph url
+    VITE_MAINNET_PDP_VERIFIER= # mainnet pdp verifier contract address (optional)
+    VITE_MAINNET_PDP_SERVICE= # mainnet pdp simple service contract address (optional)
+    VITE_CALIBRATION_PDP_VERIFIER= # calibration pdp verifier contract address (optional)
+    VITE_CALIBRATION_PDP_SERVICE= # calibration pdp simple service contract address (optional)
     ```
 
-    - Replace `<your-goldsky-project-id>` and `<your-goldsky-project-name>` with the project ID and name from the Goldsky dashboard.
+    - Replace `VITE_SUBGRAPH_URL_MAINNET` and `VITE_SUBGRAPH_URL_CALIBRATION` with the deployed subgraph query URLs from the Goldsky dashboard.
 
 3.  **Install Dependencies:**
     If you haven't already, install the client's dependencies:

subgraph-client/src/contexts/NetworkContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, type ReactNode, useContext, useEffect } from "react";
+import { createContext, type ReactNode, useContext, useEffect, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import useLocalStorage from "@/hooks/useLocalStorage";
 
@@ -17,19 +17,19 @@ export const NetworkProvider = ({ children }: { children: ReactNode }) => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const getSubgraphUrl = (network: Network) => {
-    const PROJECT_ID = import.meta.env.VITE_GOLDSKY_PROJECT_ID || "";
-    const PROJECT_NAME = import.meta.env.VITE_GOLDSKY_PROJECT_NAME || "pdp";
-
-    const versions = {
-      mainnet: import.meta.env.VITE_GOLDSKY_MAINNET_SUBGRAPH_VERSION || "mainnet",
-      calibration: import.meta.env.VITE_GOLDSKY_CALIBRATION_SUBGRAPH_VERSION || "calibration",
+  const getSubgraphUrl = (network: Network): string => {
+    const urls = {
+      mainnet: import.meta.env.VITE_SUBGRAPH_URL_MAINNET,
+      calibration: import.meta.env.VITE_SUBGRAPH_URL_CALIBRATION,
     };
 
-    // if (network === 'calibration') {
-    //   return `https://pdpsql.vxb.ai/subgraphs/name/pd/${PROJECT_NAME}`
-    // }
-    return `https://api.goldsky.com/api/public/${PROJECT_ID}/subgraphs/${PROJECT_NAME}/${versions[network]}/gn`;
+    const url = urls[network];
+
+    if (!url) {
+      throw new Error(`Missing environment variable: VITE_SUBGRAPH_URL_${network.toUpperCase()}`);
+    }
+
+    return url;
   };
 
   const subgraphUrl = getSubgraphUrl(network);
@@ -61,7 +61,9 @@ export const NetworkProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [location.pathname, network, setNetwork]);
 
-  return <NetworkContext.Provider value={{ network, setNetwork, subgraphUrl }}>{children}</NetworkContext.Provider>;
+  const value = useMemo(() => ({ network, setNetwork, subgraphUrl }), [network, setNetwork, subgraphUrl]);
+
+  return <NetworkContext.Provider value={value}>{children}</NetworkContext.Provider>;
 };
 
 export const useNetwork = (): NetworkContextType => {

subgraph-client/src/hooks/useLocalStorage.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 /**
  * Custom hook to manage localStorage interactions.
@@ -17,15 +17,17 @@ function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => voi
     }
   });
 
-  const setValue = (value: T) => {
+  useEffect(() => {
     try {
-      const valueToStore = value instanceof Function ? value(storedValue) : value;
-      setStoredValue(valueToStore);
-      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      window.localStorage.setItem(key, JSON.stringify(storedValue));
     } catch (error) {
       console.error(`Error setting localStorage key “${key}”: `, error);
     }
-  };
+  }, [key, storedValue]);
+
+  const setValue = useCallback((value: T) => {
+    setStoredValue((prev) => (value instanceof Function ? value(prev) : value));
+  }, []);
 
   return [storedValue, setValue];
 }

subgraph-client/src/vite-env.d.ts

@@ -4,9 +4,7 @@ interface ImportMeta {
     VITE_MAINNET_PDP_SERVICE: string;
     VITE_CALIBRATION_PDP_VERIFIER: string;
     VITE_CALIBRATION_PDP_SERVICE: string;
-    VITE_GOLDSKY_PROJECT_ID: string;
-    VITE_GOLDSKY_PROJECT_NAME: string;
-    VITE_GOLDSKY_MAINNET_SUBGRAPH_VERSION: string;
-    VITE_GOLDSKY_CALIBRATION_SUBGRAPH_VERSION: string;
+    VITE_SUBGRAPH_URL_MAINNET: string;
+    VITE_SUBGRAPH_URL_CALIBRATION: string;
   };
 }