feat: use subgraph to pre-populate gauge options for the safe user in ui

package.json

@@ -26,6 +26,8 @@
     "@tanstack/react-table": "^8.9.3",
     "@wagmi/cli": "^1.3.0",
     "buffer": "^6.0.3",
+    "graphql": "^16.8.0",
+    "graphql-request": "^6.1.0",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -42,4 +44,4 @@
     "typescript": "^4.9.5",
     "vite": "^4.1.4"
   }
-}
+}

src/components/EnablePlugin.tsx

@@ -12,27 +12,28 @@ import "../../styles/enablePlugin.css";
 import { encodeFunctionData } from "viem";
 
 import useGnosisBatch from "../queries/useGnosisBatch";
+import useGetUserGaugePositions from "../queries/useGetUserGaugePositions";
 
 import {
   smartGardenManagerABI,
   smartGardenManagerAddress,
   harvesterPluginAddress,
 } from "../generated";
 
-// TODO: this gauge addr needs to be retrieve from subgraph. Probably auto-fill a select options?
-// https://optimistic.etherscan.io/address/0xa1034Ed2C9eb616d6F7f318614316e64682e7923
-const GAUGE_USDC_DOLA_ADDRESS = "0xa1034Ed2C9eb616d6F7f318614316e64682e7923";
-
 export function EnablePlugin() {
   const { mutate: gnosisBatch } = useGnosisBatch();
+  const { data: gaugePositions, isLoading, error } = useGetUserGaugePositions();
 
   // defaulting: 86400(1 - day)
   const formPluginConfig = useFormStore({
-    defaultValues: { gaugeAddr: GAUGE_USDC_DOLA_ADDRESS, cadence: 86400 },
+    defaultValues: { gaugeAddr: "", cadence: 86400 },
   });
   const cadenceValue = formPluginConfig.useValue(
     formPluginConfig.names.cadence,
   );
+  const gaugeAddrValue = formPluginConfig.useValue(
+    formPluginConfig.names.gaugeAddr,
+  );
 
   formPluginConfig.useSubmit(() => {
     const values = formPluginConfig.getState().values;
@@ -64,6 +65,13 @@ export function EnablePlugin() {
       parseInt(event.target.value),
     );
 
+  // Use to modify the value of `vault` in the <select> action for the gauges that safe is in
+  const onGaugeChangeAction = (event: React.ChangeEvent<HTMLSelectElement>) =>
+    formPluginConfig.setValue(
+      formPluginConfig.names.gaugeAddr,
+      event.target.value,
+    );
+
   // Options for feeding the <options> html -> (10min, 1h, 1d, 3d, 1w)
   const cadenceOptions = [
     { sec: 600, str: "Once every ten minutes" },
@@ -79,14 +87,23 @@ export function EnablePlugin() {
       <Form store={formPluginConfig} className="wrapper">
         <div className="field">
           <FormLabel name={formPluginConfig.names.gaugeAddr}>
-            Gauge Address
+            Gauges your Safe is currently active
           </FormLabel>
-          <FormInput
+          <FormField
             name={formPluginConfig.names.gaugeAddr}
+            value={gaugeAddrValue}
+            touchOnBlur={false}
             required
-            placeholder="0x.."
-            className="input"
-          />
+            render={<select onChange={onGaugeChangeAction} />}
+          >
+            {gaugePositions?.map((gauge, index) => {
+              return (
+                <option key={index} value={gauge.id}>
+                  {gauge.pool_name}
+                </option>
+              );
+            })}
+          </FormField>
           <FormError
             name={formPluginConfig.names.gaugeAddr}
             className="error"

src/components/GraphQuery.tsx

@@ -1,7 +1,6 @@
 export async function getBalance(_address: string) {
   // define url and query
-  var url =
-    "https://api.studio.thegraph.com/query/50162/smartgarden/v0.0.2e";
+  var url = "https://api.studio.thegraph.com/query/50162/smartgarden/v0.0.2e";
   var query = `{
     gaugePosition(id: "${_address}") {
       balance
@@ -11,7 +10,7 @@ export async function getBalance(_address: string) {
   // add request metadata
   var options = {
     method: "POST",
-    headers: {"Content-Type": "application/json"},
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
       query: query,
     }),
@@ -26,8 +25,7 @@ export async function getBalance(_address: string) {
   // determine balance or default to 0
   try {
     var balance = queryResult["data"]["gaugePosition"]["balance"];
-  }
-  catch {
+  } catch {
     var balance = 0;
   }
 

src/queries/useGetUserGaugePositions.tsx

@@ -0,0 +1,55 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAccount } from "wagmi";
+
+import { request, gql } from "graphql-request";
+
+const SUBGRAPH_URL =
+  "https://api.studio.thegraph.com/proxy/50162/smartgarden-optimism-gauges/version/latest";
+
+export interface IGaugePositions {
+  id: string;
+  pool_name: string;
+}
+
+async function getUserGaugePositions(safeAddress: string | undefined) {
+  try {
+    if (!safeAddress) throw new Error("No Safe Account");
+    const querySafeAddr = gql`
+      query UserGaugePositions {
+        gaugePositions(
+          where: {
+            user: "${safeAddress}"
+            balance_gt: "0"
+          }
+        ) {
+          gauge {
+            id
+            protocol
+            pool
+            pool_name
+          }
+        }
+      }
+    `;
+    const positions = (await request(SUBGRAPH_URL, querySafeAddr))
+      .gaugePositions;
+    const gaugeResults: IGaugePositions[] = [];
+    positions.forEach((position: any) => {
+      gaugeResults.push({
+        id: position.gauge.id,
+        pool_name: position.gauge.pool_name,
+      });
+    });
+    return gaugeResults;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+export default function useGetUserGaugePositions() {
+  const { address } = useAccount();
+  return useQuery(["userGaugePositions", address?.toLowerCase()], () =>
+    getUserGaugePositions(address?.toLowerCase()),
+  );
+}

src/queries/user_active_stakes.graphql

@@ -17,4 +17,4 @@ query UserGaugePositions {
       pool_name
     }
   }
-}
+}