Merge pull request #31 from onchainification/feat/subgraph-query-ui-test

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/helpers/chainDetails.tsx

@@ -0,0 +1,13 @@
+// in future this `type` may contain more data pieces
+interface IChainDetails {
+  [key: number]: {
+    subgraphGauges: string;
+  };
+}
+
+export const chainDetails: IChainDetails = {
+  10: {
+    subgraphGauges:
+      "https://api.studio.thegraph.com/proxy/50162/smartgarden-optimism-gauges/version/latest",
+  },
+};

src/queries/graphql/gaugePositions.tsx

@@ -0,0 +1,14 @@
+import { gql } from "graphql-request";
+
+export const GET_GAUGE_POSITIONS = gql`
+  query UserGaugePositions($safeAddr: String!) {
+    gaugePositions(where: { user: $safeAddr, balance_gt: "0" }) {
+      gauge {
+        id
+        protocol
+        pool
+        pool_name
+      }
+    }
+  }
+`;

src/queries/useGetUserGaugePositions.tsx

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAccount, useNetwork } from "wagmi";
+
+import { request } from "graphql-request";
+
+import { chainDetails } from "../helpers/chainDetails";
+import { GET_GAUGE_POSITIONS } from "./graphql/gaugePositions";
+
+export interface IGaugePositions {
+  id: string;
+  pool_name: string;
+}
+
+async function getUserGaugePositions(
+  safeAddress: string | undefined,
+  chainId: number | undefined,
+) {
+  try {
+    if (!safeAddress) throw new Error("No Safe Account");
+    if (!chainId) throw new Error("Missing Chain ID");
+    if (!chainDetails[chainId].subgraphGauges)
+      throw new Error("No Gauge subgraph url available");
+    const queryVars = {
+      safeAddr: `${safeAddress}`,
+    };
+    const positions = (
+      await request(
+        chainDetails[chainId].subgraphGauges,
+        GET_GAUGE_POSITIONS,
+        queryVars,
+      )
+    ).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();
+  const { chain } = useNetwork();
+  return useQuery(["userGaugePositions", address?.toLowerCase()], () =>
+    getUserGaugePositions(address?.toLowerCase(), chain?.id),
+  );
+}

src/queries/user_active_stakes.graphql

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