fix ts issues

bleu · May 29, 2024 · 451bb26 · 451bb26
1 parent d64d611
commit 451bb26
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 84 deletions.
diff --git a/apps/cow-amm-deployer/src/app/amms/[id]/(components)/BalancerPriceInformation.tsx b/apps/cow-amm-deployer/src/app/amms/[id]/(components)/BalancerPriceInformation.tsx
@@ -1,54 +1,22 @@
-import { Address, NetworkFromNetworkChainId } from "@bleu/utils";
+import { 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 { decodePriceOracleWithData } from "#/lib/decodePriceOracle";
-import { ICowAmm, PRICE_ORACLES, PriceOracleData } from "#/lib/types";
+import { useDecodedPriceOracleData } from "#/hooks/useDecodedPriceOracleData";
+import { ICowAmm } 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({
+  const { isLoading, decodedData } = useDecodedPriceOracleData({
     priceOracleAddress: cowAmm.priceOracleAddress,
     priceOracleData: cowAmm.priceOracleData,
     chainId: safe.chainId as ChainId,
   });
 
-  if (loading || !decodedData) {
+  if (isLoading || !decodedData) {
     return <span>Loading price information...</span>;
   }
 

diff --git a/apps/cow-amm-deployer/src/app/amms/[id]/(components)/ChainlinkPriceInformation.tsx b/apps/cow-amm-deployer/src/app/amms/[id]/(components)/ChainlinkPriceInformation.tsx
@@ -1,36 +1,65 @@
 import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
+import { ResultOf } from "gql.tada";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { Address } from "viem";
 import { gnosis, sepolia } from "viem/chains";
 
+import { useDecodedPriceOracleData } from "#/hooks/useDecodedPriceOracleData";
+import { AMM_QUERY } from "#/hooks/useStandaloneAmm";
 import { priceFeedAbi } from "#/lib/abis/priceFeed";
-import { ICowAmm } from "#/lib/types";
 import { ChainId, publicClientsFromIds } from "#/utils/chainsPublicClients";
 
-export function ChainlinkPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
+function usePriceFeedLinks(cowAmm: ResultOf<typeof AMM_QUERY>) {
   const { safe } = useSafeAppsSDK();
   const [priceFeed0Link, setPriceFeed0Link] = useState<string>();
   const [priceFeed1Link, setPriceFeed1Link] = useState<string>();
 
-  const fetchPriceFeedLinks = async () => {
-    const [priceFeed0Link, priceFeed1Link] = await Promise.all([
-      getPriceFeedLink(
-        safe.chainId as ChainId,
-        cowAmm.priceOracleData.chainlinkPriceFeed0,
-      ),
-      getPriceFeedLink(
-        safe.chainId as ChainId,
-        cowAmm.priceOracleData.chainlinkPriceFeed1,
-      ),
-    ]);
-    setPriceFeed0Link(priceFeed0Link);
-    setPriceFeed1Link(priceFeed1Link);
-  };
+  if (!cowAmm || !cowAmm.constantProductData)
+    return { error: "No price oracle data" };
+
+  const { isLoading, decodedData } = useDecodedPriceOracleData({
+    priceOracleAddress: cowAmm.constantProductData.priceOracle as Address,
+    priceOracleData: cowAmm.constantProductData.priceOracleData as Address,
+    chainId: safe.chainId as ChainId,
+  });
+
+  if (isLoading || !decodedData) {
+    return { isLoading };
+  }
 
   useEffect(() => {
+    const fetchPriceFeedLinks = async () => {
+      const [priceFeed0Link, priceFeed1Link] = await Promise.all([
+        getPriceFeedLink(
+          safe.chainId as ChainId,
+          decodedData[1].chainlinkPriceFeed0,
+        ),
+        getPriceFeedLink(
+          safe.chainId as ChainId,
+          decodedData[1].chainlinkPriceFeed1,
+        ),
+      ]);
+      setPriceFeed0Link(priceFeed0Link);
+      setPriceFeed1Link(priceFeed1Link);
+    };
+
     fetchPriceFeedLinks();
-  }, []);
+  }, [cowAmm]);
+
+  return { isLoading, priceFeed0Link, priceFeed1Link };
+}
+
+export function ChainlinkPriceInformation({
+  cowAmm,
+}: {
+  cowAmm: ResultOf<typeof AMM_QUERY>;
+}) {
+  const { isLoading, priceFeed0Link, priceFeed1Link } =
+    usePriceFeedLinks(cowAmm);
+
+  if (isLoading) return <span>Loading price information...</span>;
+
   return (
     <div className="flex flex-row gap-x-1 items-start hover:text-foreground/90">
       <span>Using price information from Chainlink</span>

diff --git a/apps/cow-amm-deployer/src/app/amms/[id]/(components)/PriceInformation.tsx b/apps/cow-amm-deployer/src/app/amms/[id]/(components)/PriceInformation.tsx
@@ -1,13 +1,33 @@
-import { ICowAmm, PRICE_ORACLES } from "#/lib/types";
+import { Address } from "@bleu/utils";
+import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
+import { ResultOf } from "gql.tada";
+
+import { useDecodedPriceOracleData } from "#/hooks/useDecodedPriceOracleData";
+import { AMM_QUERY } from "#/hooks/useStandaloneAmm";
+import { PRICE_ORACLES } from "#/lib/types";
+import { ChainId } from "#/utils/chainsPublicClients";
 
 import { BalancerPriceInformation } from "./BalancerPriceInformation";
 import { ChainlinkPriceInformation } from "./ChainlinkPriceInformation";
 import { CustomPriceInformation } from "./CustomPriceInformation";
 import { SushiV2PriceInformation } from "./SushiV2PriceInformation";
 import { UniswapV2PriceInformation } from "./UniswapV2PriceInformation";
 
-export function PriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
-  switch (cowAmm.priceOracle) {
+export function PriceInformation({
+  cowAmm,
+}: {
+  cowAmm: ResultOf<typeof AMM_QUERY>;
+}) {
+  const { safe } = useSafeAppsSDK();
+  const { isLoading, decodedData } = useDecodedPriceOracleData({
+    priceOracleAddress: cowAmm.constantProductData?.priceOracle as Address,
+    priceOracleData: cowAmm.constantProductData?.priceOracleData as Address,
+    chainId: safe.chainId as ChainId,
+  });
+
+  if (isLoading || !decodedData) return <>Loading...</>;
+
+  switch (decodedData[0]) {
     case PRICE_ORACLES.UNI:
       return <UniswapV2PriceInformation cowAmm={cowAmm} />;
     case PRICE_ORACLES.BALANCER:

diff --git a/apps/cow-amm-deployer/src/app/amms/[id]/(components)/SushiV2PriceInformation.tsx b/apps/cow-amm-deployer/src/app/amms/[id]/(components)/SushiV2PriceInformation.tsx
@@ -2,15 +2,23 @@ import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
 import { ArrowTopRightIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 
+import { useDecodedPriceOracleData } from "#/hooks/useDecodedPriceOracleData";
 import { ICowAmm } from "#/lib/types";
 import { ChainId } from "#/utils/chainsPublicClients";
 
 export function SushiV2PriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
   const { safe } = useSafeAppsSDK();
+  const { isLoading, decodedData } = useDecodedPriceOracleData({
+    priceOracleAddress: cowAmm.priceOracleAddress,
+    priceOracleData: cowAmm.priceOracleData,
+    chainId: safe.chainId as ChainId,
+  });
+
+  if (isLoading || !decodedData) return <>Loading...</>;
 
   const priceOracleLink = getSushiV2Pair(
     safe.chainId as ChainId,
-    cowAmm.priceOracleData?.sushiSwapPairAddress,
+    decodedData[1].sushiSwapPairAddress,
   );
 
   return (

diff --git a/apps/cow-amm-deployer/src/app/amms/[id]/(components)/UniswapV2PriceInformation.tsx b/apps/cow-amm-deployer/src/app/amms/[id]/(components)/UniswapV2PriceInformation.tsx
@@ -4,15 +4,24 @@ import { ArrowTopRightIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { gnosis } from "viem/chains";
 
+import { useDecodedPriceOracleData } from "#/hooks/useDecodedPriceOracleData";
 import { ICowAmm } from "#/lib/types";
 import { ChainId } from "#/utils/chainsPublicClients";
 
 export function UniswapV2PriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
   const { safe } = useSafeAppsSDK();
 
+  const { isLoading, decodedData } = useDecodedPriceOracleData({
+    priceOracleAddress: cowAmm.priceOracleAddress,
+    priceOracleData: cowAmm.priceOracleData,
+    chainId: safe.chainId as ChainId,
+  });
+
+  if (isLoading || !decodedData) return <>Loading...</>;
+
   const priceOracleLink = getUniV2PairUrl(
     safe.chainId as ChainId,
-    cowAmm.priceOracleData?.uniswapV2PairAddress,
+    decodedData[1].uniswapV2PairAddress,
   );
 
   return (

diff --git a/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx b/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx
@@ -49,9 +49,9 @@ const getNewMinTradeToken0 = async (newToken0: IToken, chainId: ChainId) => {
       Number(
         formatUnits(
           parseUnits(String(amount), newToken0.decimals),
-          newToken0.decimals
-        )
-      )
+          newToken0.decimals,
+        ),
+      ),
     )
     .catch(() => 0);
 };
@@ -126,7 +126,7 @@ export function AmmForm({
                 });
                 setValue(
                   "minTradedToken0",
-                  await getNewMinTradeToken0(token, chainId as ChainId)
+                  await getNewMinTradeToken0(token, chainId as ChainId),
                 );
               }}
               selectedToken={(formData?.token0 as IToken) ?? undefined}
@@ -189,7 +189,7 @@ export function AmmForm({
           <AccordionTrigger
             className={cn(
               errors.minTradedToken0 ? "text-destructive" : "",
-              "pt-0"
+              "pt-0",
             )}
           >
             Advanced Options

diff --git a/apps/cow-amm-deployer/src/components/HomeWrapper.tsx b/apps/cow-amm-deployer/src/components/HomeWrapper.tsx
@@ -53,7 +53,7 @@ export function HomeWrapper({ goToSafe = false }: { goToSafe?: boolean }) {
   const userId = `${safe.safeAddress}-${safe.chainId}`;
 
   const { data, isLoading } = useSWR(CREATED_AMMS_FOR_USER_QUERY, (query) =>
-    request(NEXT_PUBLIC_API_URL, query, { userId })
+    request(NEXT_PUBLIC_API_URL, query, { userId }),
   );
 
   if (isLoading || !data) return <>Loading...</>;

diff --git a/apps/cow-amm-deployer/src/hooks/useDecodedPriceOracleData.ts b/apps/cow-amm-deployer/src/hooks/useDecodedPriceOracleData.ts
@@ -0,0 +1,37 @@
+import { Address } from "@bleu/utils";
+import { useEffect, useState } from "react";
+
+import { decodePriceOracleWithData } from "#/lib/decodePriceOracle";
+import { PRICE_ORACLES, PriceOracleData } from "#/lib/types";
+import { ChainId } from "#/utils/chainsPublicClients";
+
+type DecodedPriceOracleData = [PRICE_ORACLES, PriceOracleData];
+
+interface UseDecodedPriceOracleWithDataState {
+  isLoading: boolean;
+  decodedData?: DecodedPriceOracleData;
+}
+
+export function useDecodedPriceOracleData({
+  priceOracleAddress,
+  priceOracleData,
+  chainId,
+}: {
+  priceOracleAddress: Address;
+  priceOracleData: Address;
+  chainId: ChainId;
+}): UseDecodedPriceOracleWithDataState {
+  const [state, setState] = useState<UseDecodedPriceOracleWithDataState>({
+    isLoading: true,
+  });
+
+  useEffect(() => {
+    decodePriceOracleWithData({
+      address: priceOracleAddress,
+      priceOracleData,
+      chainId,
+    }).then((data) => setState({ isLoading: false, decodedData: data }));
+  }, [priceOracleAddress, priceOracleData, chainId]);
+
+  return state;
+}
diff --git a/apps/cow-amm-deployer/src/hooks/useStandaloneAmm/index.ts b/apps/cow-amm-deployer/src/hooks/useStandaloneAmm/index.ts
@@ -10,7 +10,7 @@ import { ChainId } from "#/utils/chainsPublicClients";
 import { getBalancesFromContract } from "./getBalancesFromContract";
 import { getTokensExternalPrices } from "./getTokesFrom";
 
-const AMM_QUERY = graphql(`
+export const AMM_QUERY = graphql(`
   query fetchAmmData($ammId: String!) {
     constantProductData(id: $ammId) {
       token0 {
@@ -41,7 +41,7 @@ export function useStandaloneAMM(ammId: Address) {
     error: subgraphError,
     isLoading: isSubgraphLoading,
   } = useSWR(ammId, (ammId) =>
-    request(NEXT_PUBLIC_API_URL, AMM_QUERY, { ammId })
+    request(NEXT_PUBLIC_API_URL, AMM_QUERY, { ammId }),
   );
 
   const token0SubgraphData = subgraphData?.constantProductData?.token0;
@@ -62,7 +62,7 @@ export function useStandaloneAMM(ammId: Address) {
       token0SubgraphData as IToken,
       token1SubgraphData as IToken,
     ],
-    getBalancesFromContract
+    getBalancesFromContract,
   );
 
   const {
@@ -76,7 +76,7 @@ export function useStandaloneAMM(ammId: Address) {
       token0SubgraphData as IToken,
       token1SubgraphData as IToken,
     ],
-    getTokensExternalPrices
+    getTokensExternalPrices,
   );
 
   if (