Close Long Zap Approval

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

@@ -2,29 +2,42 @@ import { fixed } from "@delvtech/fixed-point-wasm";
 import {
   appConfig,
   getBaseToken,
+  getHyperdriveConfig,
   getToken,
   HyperdriveConfig,
   TokenConfig,
 } from "@delvtech/hyperdrive-appconfig";
 import { adjustAmountByPercentage, Long } from "@delvtech/hyperdrive-js";
 import { MouseEvent, ReactElement } from "react";
 import { isTestnetChain } from "src/chains/isTestnetChain";
+import { getDepositAssets } from "src/hyperdrive/getDepositAssets";
+import { ETH_MAGIC_NUMBER } from "src/token/ETH_MAGIC_NUMBER";
+import { getHasEnoughAllowance } from "src/token/getHasEnoughAllowance";
 import { ConnectWalletButton } from "src/ui/base/components/ConnectWallet";
 import { LoadingButton } from "src/ui/base/components/LoadingButton";
 import { PrimaryStat } from "src/ui/base/components/PrimaryStat";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useActiveItem } from "src/ui/base/hooks/useActiveItem";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
+import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton";
+import { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton";
 import { useCloseLong } from "src/ui/hyperdrive/longs/hooks/useCloseLong";
 import { usePreviewCloseLong } from "src/ui/hyperdrive/longs/hooks/usePreviewCloseLong";
 import { StatusCell } from "src/ui/hyperdrive/longs/StatusCell";
 import { TransactionView } from "src/ui/hyperdrive/TransactionView";
-import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance";
+import { ApproveTokenChoices } from "src/ui/token/ApproveTokenChoices";
+import { useTokenAllowance } from "src/ui/token/hooks/useTokenAllowance";
 import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice";
 import { TokenInput } from "src/ui/token/TokenInput";
-import { TokenChoice, TokenPicker } from "src/ui/token/TokenPicker";
+import {
+  TokenChoice,
+  TokenPicker,
+  ZapsTokenPicker,
+} from "src/ui/token/TokenPicker";
+import { useTokenList } from "src/ui/tokenlist/useTokenList";
 import { formatUnits, parseUnits } from "viem";
-import { useAccount } from "wagmi";
+import { useAccount, useChainId } from "wagmi";
 
 interface CloseLongFormProps {
   hyperdrive: HyperdriveConfig;
@@ -38,13 +51,21 @@ export function CloseLongForm({
   onCloseLong,
 }: CloseLongFormProps): ReactElement {
   const { address: account } = useAccount();
-
+  const connectedChainId = useChainId();
   const defaultItems: TokenConfig[] = [];
   const baseToken = getBaseToken({
     hyperdriveAddress: hyperdrive.address,
     hyperdriveChainId: hyperdrive.chainId,
     appConfig,
   });
+
+  const { isFlagEnabled: isZapsEnabled } = useFeatureFlag("zaps");
+
+  const { tokenList } = useTokenList({
+    chainId: hyperdrive.chainId,
+    enabled: isZapsEnabled,
+  });
+
   if (hyperdrive.withdrawOptions.isBaseTokenWithdrawalEnabled) {
     defaultItems.push(baseToken);
   }
@@ -58,23 +79,29 @@ export function CloseLongForm({
     defaultItems.push(sharesToken);
   }
 
-  const { balance: baseTokenBalance } = useTokenBalance({
-    account,
-    tokenAddress: hyperdrive.poolConfig.baseToken,
-    decimals: hyperdrive.decimals,
-  });
-
   const {
     activeItem: activeWithdrawToken,
     setActiveItemId: setActiveWithdrawToken,
   } = useActiveItem({
-    items: defaultItems,
+    items: isZapsEnabled ? [...defaultItems, ...tokenList] : defaultItems,
     idField: "address",
     defaultActiveItemId: hyperdrive.withdrawOptions.isBaseTokenWithdrawalEnabled
       ? hyperdrive.poolConfig.baseToken
       : hyperdrive.poolConfig.vaultSharesToken,
   });
 
+  const depositAssets = getDepositAssets(
+    getHyperdriveConfig({
+      hyperdriveChainId: hyperdrive.chainId,
+      hyperdriveAddress: hyperdrive.address,
+      appConfig,
+    }),
+  );
+
+  const isZapping = !depositAssets.some(
+    (asset) => asset.address === activeWithdrawToken.address,
+  );
+
   const { fiatPrice: activeWithdrawTokenPrice } = useTokenFiatPrice({
     tokenAddress: activeWithdrawToken.address,
     chainId: activeWithdrawToken.chainId,
@@ -134,10 +161,15 @@ export function CloseLongForm({
   if (hyperdrive.withdrawOptions.isBaseTokenWithdrawalEnabled) {
     withdrawTokenChoices.push({
       tokenConfig: baseToken,
-      tokenBalance: baseTokenBalance?.value,
     });
   }
-
+  if (isZapsEnabled) {
+    tokenList?.map((tokenFromTokenList) => {
+      withdrawTokenChoices.push({
+        tokenConfig: tokenFromTokenList,
+      });
+    });
+  }
   if (hyperdrive.withdrawOptions.isShareTokenWithdrawalEnabled) {
     withdrawTokenChoices.push({
       // Safe to cast: sharesToken must be defined if its enabled for withdrawal
@@ -149,6 +181,25 @@ export function CloseLongForm({
     bondAmountAsBigInt && bondAmountAsBigInt > long.bondAmount
   );
 
+  const zapsConfig = appConfig.zaps[hyperdrive.chainId];
+  const spender = isZapping ? zapsConfig.address : hyperdrive.address;
+
+  // ETH doesn't require allowance
+  const requiresAllowance = activeWithdrawToken.address !== ETH_MAGIC_NUMBER;
+  const { tokenAllowance: bondAllowance } = useTokenAllowance({
+    account,
+    spender,
+    tokenAddress: activeWithdrawToken.address,
+    tokenChainId: activeWithdrawToken.chainId,
+    enabled: requiresAllowance,
+  });
+
+  const hasEnoughAllowance = getHasEnoughAllowance({
+    requiresAllowance,
+    allowance: bondAllowance,
+    amount: bondAmountAsBigInt,
+  });
+
   // Plausible event props
   const formName = "Close Long";
   const chainId = hyperdrive.chainId;
@@ -194,23 +245,44 @@ export function CloseLongForm({
               name={baseToken.symbol}
               inputLabel="You receive"
               token={
-                <TokenPicker
-                  tokens={withdrawTokenChoices}
-                  activeTokenAddress={activeWithdrawToken.address}
-                  onChange={(tokenAddress) => {
-                    window.plausible("formChange", {
-                      props: {
-                        inputName: "token",
-                        inputValue: tokenAddress,
-                        formName,
-                        chainId,
-                        poolAddress,
-                        connectedWallet: account,
-                      },
-                    });
-                    setActiveWithdrawToken(tokenAddress);
-                  }}
-                />
+                isZapsEnabled ? (
+                  <ZapsTokenPicker
+                    tokens={withdrawTokenChoices}
+                    activeTokenAddress={activeWithdrawToken.address}
+                    onChange={(tokenAddress) => {
+                      window.plausible("formChange", {
+                        props: {
+                          inputName: "token",
+                          inputValue: tokenAddress,
+                          formName,
+                          chainId,
+                          poolAddress,
+                          connectedWallet: account,
+                        },
+                      });
+
+                      setActiveWithdrawToken(tokenAddress);
+                    }}
+                  />
+                ) : (
+                  <TokenPicker
+                    tokens={withdrawTokenChoices}
+                    activeTokenAddress={activeWithdrawToken.address}
+                    onChange={(tokenAddress) => {
+                      window.plausible("formChange", {
+                        props: {
+                          inputName: "token",
+                          inputValue: tokenAddress,
+                          formName,
+                          chainId,
+                          poolAddress,
+                          connectedWallet: account,
+                        },
+                      });
+                      setActiveWithdrawToken(tokenAddress);
+                    }}
+                  />
+                )
               }
               value={
                 withdrawAmount
@@ -295,9 +367,39 @@ export function CloseLongForm({
         if (!account) {
           return <ConnectWalletButton />;
         }
+
+        if (connectedChainId !== hyperdrive.chainId) {
+          return (
+            <SwitchNetworksButton
+              targetChainId={hyperdrive.chainId}
+              targetChainName={appConfig.chains[hyperdrive.chainId].name}
+            />
+          );
+        }
+
+        if (!!bondAmountAsBigInt && isAmountLargerThanPositionSize) {
+          return (
+            <InvalidTransactionButton wide>
+              Insufficient balance
+            </InvalidTransactionButton>
+          );
+        }
+
+        if (!hasEnoughAllowance) {
+          return (
+            <ApproveTokenChoices
+              spender={spender}
+              token={activeWithdrawToken}
+              amountAsBigInt={bondAmountAsBigInt}
+              amount={bondAmount}
+            />
+          );
+        }
+
         if (closeLongStatus === "loading") {
           return <LoadingButton label="Closing Long" variant="primary" />;
         }
+
         return (
           <button
             className="daisy-btn daisy-btn-circle daisy-btn-primary w-full disabled:bg-primary disabled:text-base-100 disabled:opacity-30"