ZapBasedPreview (#1745)

* preview close long form updated

* Refactor testnet chain detection and token fiat price query

* fix preview

* fix preview

Co-authored-by: Danny Delott <[email protected]>

* update query key

* move toast inside query client provider

* uniqu by

---------

Co-authored-by: Danny Delott <[email protected]>

Author: jackburrus

apps/hyperdrive-trading/src/chains/isTestnetChain.ts

@@ -5,8 +5,14 @@ import { foundry, sepolia } from "viem/chains";
  * Checks if the given chain ID corresponds to a testnet chain.
  * @param chainId - The chain ID to check.
  * @returns True if the chain ID corresponds to a testnet chain, false otherwise.
+ * @deprecated testnet chains should not include a check on fork chains, use isTestnetChain2 instead
  */
 export function isTestnetChain(chainId: number): boolean {
   const testnetChainIds = [sepolia.id, foundry.id] as number[];
   return isForkChain(chainId) || testnetChainIds.includes(chainId);
 }
+
+export function isTestnetChain2(chainId: number): boolean {
+  const testnetChainIds = [sepolia.id, foundry.id] as number[];
+  return testnetChainIds.includes(chainId);
+}

apps/hyperdrive-trading/src/ui/appconfig/useAppConfigForConnectedChain.ts

@@ -4,10 +4,33 @@ import {
   mainnetAppConfig,
   testnetAppConfig,
 } from "@delvtech/hyperdrive-appconfig";
+import uniqBy from "lodash.uniqby";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
+import { useTokenList } from "src/ui/tokenlist/useTokenList";
 import { useChainId } from "wagmi";
 
 export function useAppConfigForConnectedChain(): AppConfig {
   const connectedChainId = useChainId();
 
-  return isMainnetChain(connectedChainId) ? mainnetAppConfig : testnetAppConfig;
+  const appConfig = isMainnetChain(connectedChainId)
+    ? mainnetAppConfig
+    : testnetAppConfig;
+
+  // Add any zap tokens to the appConfig using uniswap's tokenlist
+  const { isFlagEnabled } = useFeatureFlag("zaps");
+  const { tokenList } = useTokenList({
+    chainId: connectedChainId,
+    enabled: isFlagEnabled,
+  });
+  if (tokenList) {
+    return {
+      ...appConfig,
+      tokens: uniqBy(
+        [...appConfig.tokens, ...tokenList],
+        (token) => `${token.address}-${token.chainId}`,
+      ),
+    };
+  }
+
+  return appConfig;
 }

apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx

@@ -128,6 +128,7 @@ export function CloseLongForm({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
     maturityTime: long.maturity,
+    tokenOutAddress: activeWithdrawToken.address,
     bondAmountIn: bondAmountAsBigInt,
     asBase: activeWithdrawToken.address === hyperdrive.poolConfig.baseToken,
   });

apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/usePreviewCloseLong.ts

@@ -1,9 +1,16 @@
+import { fixed } from "@delvtech/fixed-point-wasm";
+import {
+  getBaseToken,
+  getHyperdriveConfig,
+} from "@delvtech/hyperdrive-appconfig";
 import { useQuery } from "@tanstack/react-query";
-import { makeQueryKey } from "src/base/makeQueryKey";
+import { makeQueryKey2 } from "src/base/makeQueryKey";
 import { QueryStatusWithIdle, getStatus } from "src/base/queryStatus";
+import { getDepositAssets } from "src/hyperdrive/getDepositAssets";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { prepareSharesOut } from "src/ui/hyperdrive/hooks/usePrepareSharesOut";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
+import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice";
 import { Address } from "viem";
 interface UsePreviewCloseLongOptions {
   chainId: number;
@@ -13,6 +20,7 @@ interface UsePreviewCloseLongOptions {
    */
   maturityTime: bigint | undefined;
   bondAmountIn: bigint | undefined;
+  tokenOutAddress: Address | undefined;
   asBase?: boolean;
   enabled?: boolean;
 }
@@ -27,6 +35,7 @@ interface UsePreviewCloseLongResult {
 export function usePreviewCloseLong({
   hyperdriveAddress,
   chainId,
+  tokenOutAddress,
   maturityTime,
   bondAmountIn,
   asBase = true,
@@ -39,29 +48,96 @@ export function usePreviewCloseLong({
   const appConfig = useAppConfigForConnectedChain();
   const queryEnabled =
     !!hyperdriveAddress &&
-    !!appConfig &&
     !!maturityTime &&
     !!bondAmountIn &&
     !!readHyperdrive &&
+    !!tokenOutAddress &&
     enabled;
 
+  const baseToken = getBaseToken({
+    hyperdriveChainId: chainId,
+    hyperdriveAddress: hyperdriveAddress!,
+    appConfig,
+  });
+
+  const hyperdriveConfig = getHyperdriveConfig({
+    hyperdriveChainId: chainId,
+    hyperdriveAddress: hyperdriveAddress!,
+    appConfig,
+  });
+
+  const depositAssets = getDepositAssets(hyperdriveConfig, appConfig);
+  const isZapping = !depositAssets.some(
+    (asset) => asset.address === tokenOutAddress,
+  );
+
+  // If we're zapping, we'll need to convert the zap token to fiat and then into
+  // base so we can correctly preview the tx using the sdk. To do this, we need
+  // the fiat price of both the zap and base token
+  const { fiatPrice: zapTokenPrice } = useTokenFiatPrice({
+    tokenAddress: tokenOutAddress,
+    chainId,
+    enabled: isZapping,
+  });
+
+  const { fiatPrice: baseTokenPrice } = useTokenFiatPrice({
+    tokenAddress: baseToken.address,
+    chainId,
+    enabled: isZapping,
+  });
+
   const { data, status, fetchStatus, error } = useQuery({
-    queryKey: makeQueryKey("previewCloseLong", {
-      chainId,
-      hyperdriveAddress,
-      maturityTime: maturityTime?.toString(),
-      bondAmountIn: bondAmountIn?.toString(),
-      asBase,
+    queryKey: makeQueryKey2({
+      namespace: "hyperdrive",
+      queryId: "previewCloseLong",
+      params: {
+        chainId,
+        hyperdriveAddress: hyperdriveAddress!,
+        maturityTime,
+        bondAmountIn,
+        asBase,
+        zapTokenPrice,
+        baseTokenPrice,
+        tokenOutAddress,
+      },
     }),
     enabled: queryEnabled,
     queryFn: queryEnabled
       ? async () => {
+          if (isZapping) {
+            const resultInBase = await readHyperdrive.previewCloseLong({
+              maturityTime,
+              bondAmountIn,
+              asBase: true, // Safe to hardcode to true because previewCloseLong uses the Rust SDK, which doesn't perform checks on if the pool has a base or shares token
+            });
+
+            // Step 1: Calculate fiat value of the base amount
+            const fiatValueOfAmountOut = baseTokenPrice
+              ? fixed(baseTokenPrice).mul(
+                  resultInBase.amountOut,
+                  hyperdriveConfig.decimals,
+                )
+              : 0n;
+
+            // Step 2: Convert that fiat value into the ZAP token amount
+            const zapAmountOut = zapTokenPrice
+              ? fixed(fiatValueOfAmountOut).div(
+                  zapTokenPrice,
+                  hyperdriveConfig.decimals,
+                )
+              : 0n;
+
+            return {
+              ...resultInBase,
+              amountOut: zapAmountOut ? zapAmountOut.bigint : 0n,
+            };
+          }
+
           const result = await readHyperdrive.previewCloseLong({
             maturityTime,
             bondAmountIn,
             asBase,
           });
-
           if (!asBase) {
             return {
               ...result,

apps/hyperdrive-trading/src/ui/hyperdrive/queryKeys.ts

@@ -23,6 +23,16 @@ interface HyperdriveQueryKeys {
     hyperdriveAddress: Address;
     blockNumber: bigint | undefined;
   };
+  previewCloseLong: {
+    chainId: number;
+    hyperdriveAddress: Address;
+    maturityTime: bigint | undefined;
+    bondAmountIn: bigint | undefined;
+    asBase: boolean;
+    zapTokenPrice: bigint | undefined;
+    baseTokenPrice: bigint | undefined;
+    tokenOutAddress: Address | undefined;
+  };
 }
 declare module "src/base/makeQueryKey" {
   interface QueryKeys {

apps/hyperdrive-trading/src/ui/main.tsx

@@ -37,8 +37,8 @@ logAppVersion();
 root.render(
   <WagmiProvider config={wagmiConfig}>
     <Plausible />
-    <ToastProvider />
     <QueryClientProvider client={queryClient}>
+      <ToastProvider />
       <RainbowKitProvider
         appInfo={{
           appName: "Hyperdrive",

apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/CurrentValueCell.tsx

@@ -32,6 +32,7 @@ export function CurrentValueCell({
     hyperdriveAddress: hyperdrive.address,
     maturityTime: row.maturity,
     bondAmountIn: row.details?.bondAmount || 0n,
+    tokenOutAddress: baseToken.address,
   });
 
   const currentValueLabel = formatBalance({

apps/hyperdrive-trading/src/ui/token/hooks/useTokenFiatPrice.ts

@@ -3,7 +3,7 @@ import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { getPublicClient } from "@wagmi/core";
 import { ZERO_ADDRESS } from "src/base/constants";
 import { makeQueryKey2 } from "src/base/makeQueryKey";
-import { isTestnetChain } from "src/chains/isTestnetChain";
+import { isTestnetChain2 } from "src/chains/isTestnetChain";
 import { wagmiConfig } from "src/network/wagmiClient";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { Address, PublicClient } from "viem";
@@ -20,10 +20,11 @@ export function useTokenFiatPrice({
 } {
   const appConfig = useAppConfigForConnectedChain();
   const { data } = useQuery(
-    makeTokenFiatPriceQuery({ appConfig, chainId, tokenAddress, enabled }),
+    makeTokenFiatPriceQuery({ chainId, tokenAddress, enabled, appConfig }),
   );
   return { fiatPrice: data };
 }
+
 export function makeTokenFiatPriceQuery({
   appConfig,
   chainId,
@@ -36,7 +37,7 @@ export function makeTokenFiatPriceQuery({
   enabled?: boolean;
 }): UseQueryOptions<bigint> {
   const queryEnabled =
-    !isTestnetChain(chainId) &&
+    !isTestnetChain2(chainId) &&
     !!tokenAddress &&
     tokenAddress !== ZERO_ADDRESS &&
     enabled;

packages/hyperdrive-appconfig/src/tokens/priceOracles/defillama.ts

@@ -9,6 +9,7 @@ const defiLlamaChainNameIdentifier: Record<number, string> = {
   [gnosis.id]: "gnosis",
   [linea.id]: "linea",
   [base.id]: "base",
+  [707]: "ethereum",
 };
 
 export const fetchDefiLlamaTokenPrice: PriceOracleFn = async ({