add gql.tada and graphql-request to make queries

apps/cow-amm-deployer/next.config.js

@@ -18,9 +18,11 @@ const moduleExports = {
       },
     ];
   },
+  experimental: {
+    reactCompiler: true,
+  },
   transpilePackages: ["@bleu/gql"],
   reactStrictMode: true,
-  swcMinify: true,
   /**
    * This configuration is following Rainbowkit Migration Guide to Viem
    * 3. Ensure bundler and polyfill compatibility

apps/cow-amm-deployer/package.json

@@ -19,10 +19,10 @@
   "dependencies": {
     "@bleu/gql": "workspace:*",
     "@bleu/tsconfig": "workspace:*",
-    "@bleu/ui": "^0.1.93",
+    "@bleu/ui": "^0.1.98",
     "@gnosis.pm/safe-apps-react-sdk": "^4.6.2",
     "@gnosis.pm/safe-apps-sdk": "^7.8.0",
-    "@hookform/resolvers": "3.3.2",
+    "@hookform/resolvers": "3.4.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -39,56 +39,59 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "1.0.7",
-    "@safe-global/api-kit": "^2.2.0",
+    "@safe-global/api-kit": "^2.4.0",
     "@safe-global/protocol-kit": "^3.0.1",
     "@safe-global/safe-core-sdk-types": "^4.0.1",
-    "@safe-global/safe-gateway-typescript-sdk": "^3.18.0",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.21.1",
+    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "copy-to-clipboard": "^3.3.3",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "downshift": "^8.4.0",
     "fathom-client": "^3.6.0",
     "gql": "^1.1.2",
+    "gql.tada": "^1.7.5",
     "graphql-request": "6.1.0",
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
     "lodash.merge": "^4.6.2",
-    "next": "^14.1.1",
+    "next": "^14.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "7.43.9",
+    "react-hook-form": "7.51.5",
     "server-only": "^0.0.1",
     "swr": "^2.2.5",
-    "tailwind-merge": "^2.2.1",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "tiny-invariant": "^1.3.3",
     "viem": "^2.7.19",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@0no-co/graphqlsp": "^1.12.5",
     "@bleu/eslint-config": "workspace:^",
     "@bleu/utils": "workspace:^",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/typescript-graphql-request": "6.2.0",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.4",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.3.1",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4.19",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.4.1",
-    "ts-jest": "^29.1.2",
+    "tailwindcss": "^3.4.3",
+    "ts-jest": "^29.1.4",
     "typescript": "5.4.5"
   }
 }

apps/cow-amm-deployer/src/app/amms/[id]/(components)/BalancerPriceInformation.tsx

@@ -1,17 +1,60 @@
-import { NetworkFromNetworkChainId } from "@bleu/utils";
+import { Address, NetworkFromNetworkChainId } from "@bleu/utils";
 import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
 import { ArrowTopRightIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
-import { ICowAmm } from "#/lib/types";
+import { decodePriceOracleWithData } from "#/lib/decodePriceOracle";
+import { ICowAmm, PRICE_ORACLES, PriceOracleData } from "#/lib/types";
 import { ChainId } from "#/utils/chainsPublicClients";
 
+type DecodedPriceOracleData = [PRICE_ORACLES, PriceOracleData];
+
+interface UseDecodedPriceOracleWithDataState {
+  loading: boolean;
+  decodedData?: DecodedPriceOracleData;
+}
+
+function useDecodedPriceOracleWithData({
+  priceOracleAddress,
+  priceOracleData,
+  chainId,
+}: {
+  priceOracleAddress: Address;
+  priceOracleData: Address;
+  chainId: ChainId;
+}): UseDecodedPriceOracleWithDataState {
+  const [state, setState] = useState<UseDecodedPriceOracleWithDataState>({
+    loading: true,
+  });
+
+  useEffect(() => {
+    decodePriceOracleWithData({
+      address: priceOracleAddress,
+      priceOracleData,
+      chainId,
+    }).then((data) => setState({ loading: false, decodedData: data }));
+  }, [priceOracleAddress, priceOracleData, chainId]);
+
+  return state;
+}
+
 export function BalancerPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
   const { safe } = useSafeAppsSDK();
 
+  const { loading, decodedData } = useDecodedPriceOracleWithData({
+    priceOracleAddress: cowAmm.priceOracleAddress,
+    priceOracleData: cowAmm.priceOracleData,
+    chainId: safe.chainId as ChainId,
+  });
+
+  if (loading || !decodedData) {
+    return <span>Loading price information...</span>;
+  }
+
   const priceOracleLink = getBalancerPoolUrl(
     safe.chainId as ChainId,
-    cowAmm.priceOracleData?.balancerPoolId
+    decodedData[1].balancerPoolId
   );
 
   return (

apps/cow-amm-deployer/src/components/HomeWrapper.tsx

@@ -17,50 +17,7 @@ import useSWR from "swr";
 import { Button } from "./Button";
 import Fathom from "./Fathom";
 import { LinkComponent } from "./Link";
-
-/* eslint-disable no-console */
-
-export async function gql(
-  endpoint: string,
-  query: string,
-  variables = {},
-  headers = {}
-) {
-  console.log(`Running GraphQL query on ${endpoint}`);
-
-  const defaultHeaders = {
-    "Content-Type": "application/json",
-  };
-  try {
-    const response = await fetch(endpoint, {
-      method: "POST",
-      headers: {
-        ...defaultHeaders,
-        ...headers,
-      },
-      body: JSON.stringify({
-        query,
-        variables,
-      }),
-    });
-    if (!response.ok) {
-      console.log("response", response);
-      throw new Error(
-        `GraphQL query failed with status ${response.status}: ${response.statusText}`
-      );
-    }
-
-    const json = await response.json();
-    if (json.errors) {
-      console.log("json", json);
-      throw new Error(`GraphQL query failed: ${json.errors[0].message}`);
-    }
-    return json;
-  } catch (e) {
-    console.log("err", e);
-    throw e;
-  }
-}
+import gql from "#/lib/gql";
 
 const CREATED_AMMS_FOR_USER_QUERY = `
 query($userId: String!) {