diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useTokenDepositOptions.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useTokenDepositOptions.ts new file mode 100644 index 000000000..5abc36f11 --- /dev/null +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useTokenDepositOptions.ts @@ -0,0 +1,74 @@ +import { + AppConfig, + getBaseToken, + getToken, + HyperdriveConfig, + TokenConfig, +} from "@delvtech/hyperdrive-appconfig"; +import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance"; +import { Address } from "viem"; + +/** + * Returns back a list of token options for depositing into the given hyperdrive + */ +export function useTokenDepositOptions({ + hyperdrive, + account, + appConfig, +}: { + hyperdrive: HyperdriveConfig; + account: Address | undefined; + appConfig: AppConfig; +}): { + baseTokenDepositEnabled: boolean; + baseToken: TokenConfig; + sharesToken: TokenConfig | undefined; + tokenOptions: { + tokenConfig: TokenConfig; + tokenBalance: bigint | undefined; + }[]; +} { + const baseToken = getBaseToken({ + hyperdriveChainId: hyperdrive.chainId, + hyperdriveAddress: hyperdrive.address, + appConfig, + }); + const sharesToken = getToken({ + chainId: hyperdrive.chainId, + appConfig, + tokenAddress: hyperdrive.poolConfig.vaultSharesToken, + }); + + const { balance: baseTokenBalance } = useTokenBalance({ + account, + tokenAddress: baseToken.address, + decimals: baseToken.decimals, + }); + + const { balance: sharesTokenBalance } = useTokenBalance({ + account, + tokenAddress: hyperdrive.poolConfig.vaultSharesToken, + decimals: hyperdrive.decimals, + }); + + const baseTokenDepositEnabled = + hyperdrive.depositOptions.isBaseTokenDepositEnabled; + const shareTokenDepositsEnabled = + hyperdrive.depositOptions.isShareTokenDepositsEnabled; + + const tokenOptions = []; + if (baseTokenDepositEnabled) { + tokenOptions.push({ + tokenConfig: baseToken, + tokenBalance: baseTokenBalance?.value, + }); + } + + if (sharesToken && shareTokenDepositsEnabled) { + tokenOptions.push({ + tokenConfig: sharesToken, + tokenBalance: sharesTokenBalance?.value, + }); + } + return { baseTokenDepositEnabled, baseToken, tokenOptions, sharesToken }; +} diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx index 05f3d1b39..7b407ce32 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx @@ -1,9 +1,5 @@ import { fixed } from "@delvtech/fixed-point-wasm"; -import { - getBaseToken, - getToken, - HyperdriveConfig, -} from "@delvtech/hyperdrive-appconfig"; +import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig"; import { adjustAmountByPercentage } from "@delvtech/hyperdrive-js"; import uniqBy from "lodash.uniqby"; import { MouseEvent, ReactElement } from "react"; @@ -21,6 +17,7 @@ import { useNumericInput } from "src/ui/base/hooks/useNumericInput"; import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton"; import { useMarketState } from "src/ui/hyperdrive/hooks/useMarketState"; import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; +import { useTokenDepositOptions } from "src/ui/hyperdrive/hooks/useTokenDepositOptions"; import { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton"; import { useMaxLong } from "src/ui/hyperdrive/longs/hooks/useMaxLong"; import { useOpenLong } from "src/ui/hyperdrive/longs/hooks/useOpenLong"; @@ -34,15 +31,10 @@ import { ApproveTokenChoices } from "src/ui/token/ApproveTokenChoices"; import { useActiveToken } from "src/ui/token/hooks/useActiveToken"; import { useSlippageSettings } from "src/ui/token/hooks/useSlippageSettings"; import { useTokenAllowance } from "src/ui/token/hooks/useTokenAllowance"; -import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance"; import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice"; import { SlippageSettings } from "src/ui/token/SlippageSettings"; import { TokenInput } from "src/ui/token/TokenInput"; -import { - TokenChoice, - TokenPicker, - ZapsTokenPicker, -} from "src/ui/token/TokenPicker"; +import { TokenPicker, ZapsTokenPicker } from "src/ui/token/TokenPicker"; import { useTokenList } from "src/ui/tokenlist/useTokenList"; import { formatUnits } from "viem"; import { useAccount, useChainId } from "wagmi"; @@ -74,45 +66,13 @@ export function OpenLongForm({ hyperdriveAddress: hyperdrive.address, chainId: hyperdrive.chainId, }); - const baseToken = getBaseToken({ - hyperdriveChainId: hyperdrive.chainId, - hyperdriveAddress: hyperdrive.address, - appConfig, - }); - - const { balance: baseTokenBalance } = useTokenBalance({ - account, - tokenAddress: baseToken.address, - decimals: baseToken.decimals, - }); - const { balance: sharesTokenBalance } = useTokenBalance({ + const { baseToken, tokenOptions, sharesToken } = useTokenDepositOptions({ account, - tokenAddress: hyperdrive.poolConfig.vaultSharesToken, - decimals: hyperdrive.decimals, - }); - - const tokenChoices: TokenChoice[] = []; - if (baseToken && hyperdrive.depositOptions.isBaseTokenDepositEnabled) { - tokenChoices.push({ - tokenConfig: baseToken, - tokenBalance: baseTokenBalance?.value, - }); - } - - const sharesToken = getToken({ - chainId: hyperdrive.chainId, - tokenAddress: hyperdrive.poolConfig.vaultSharesToken, + hyperdrive, appConfig, }); - if (sharesToken && hyperdrive.depositOptions.isShareTokenDepositsEnabled) { - tokenChoices.push({ - tokenConfig: sharesToken, - tokenBalance: sharesTokenBalance?.value, - }); - } - if (isZapsEnabled) { tokenList ?.filter( @@ -122,13 +82,14 @@ export function OpenLongForm({ tokenFromTokenList.chainId === hyperdrive.chainId, ) .map((tokenFromTokenList) => { - tokenChoices.push({ + tokenOptions.push({ + tokenBalance: undefined, tokenConfig: tokenFromTokenList, }); }); } - let activeTokenChoices = tokenChoices.map((token) => token.tokenConfig); + let activeTokenChoices = tokenOptions.map((token) => token.tokenConfig); if (isZapsEnabled) { activeTokenChoices = uniqBy( [...activeTokenChoices, ...tokenList], @@ -323,7 +284,7 @@ export function OpenLongForm({ token={ isZapsEnabled ? ( { window.plausible("formChange", { @@ -342,7 +303,7 @@ export function OpenLongForm({ /> ) : ( { window.plausible("formChange", { diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx index 706be6e26..7880fbdd7 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx @@ -3,7 +3,6 @@ import { HyperdriveConfig, TokenConfig, getBaseToken, - getToken, getYieldSource, } from "@delvtech/hyperdrive-appconfig"; import { adjustAmountByPercentage } from "@delvtech/hyperdrive-js"; @@ -27,6 +26,7 @@ import { TransactionView } from "src/ui/hyperdrive/TransactionView"; import { useIsNewPool } from "src/ui/hyperdrive/hooks/useIsNewPool"; import { useMarketState } from "src/ui/hyperdrive/hooks/useMarketState"; import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; +import { useTokenDepositOptions } from "src/ui/hyperdrive/hooks/useTokenDepositOptions"; import { useFixedRate } from "src/ui/hyperdrive/longs/hooks/useFixedRate"; import { useAddLiquidity } from "src/ui/hyperdrive/lp/hooks/useAddLiquidity"; import { useLpApy } from "src/ui/hyperdrive/lp/hooks/useLpApy"; @@ -43,7 +43,6 @@ import { TokenPicker } from "src/ui/token/TokenPicker"; import { useActiveToken } from "src/ui/token/hooks/useActiveToken"; import { useSlippageSettings } from "src/ui/token/hooks/useSlippageSettings"; import { useTokenAllowance } from "src/ui/token/hooks/useTokenAllowance"; -import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance"; import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice"; import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate"; import { useAccount, useChainId } from "wagmi"; @@ -69,53 +68,12 @@ export function AddLiquidityForm({ chainId: hyperdrive.chainId, }); - const baseToken = getBaseToken({ - hyperdriveChainId: hyperdrive.chainId, - hyperdriveAddress: hyperdrive.address, - appConfig, - }); - const sharesToken = getToken({ - chainId: hyperdrive.chainId, - appConfig, - tokenAddress: hyperdrive.poolConfig.vaultSharesToken, - }); - - const { balance: baseTokenBalance } = useTokenBalance({ - account, - tokenAddress: baseToken.address, - decimals: baseToken.decimals, - }); - - const { balance: sharesTokenBalance } = useTokenBalance({ - account, - tokenAddress: hyperdrive.poolConfig.vaultSharesToken, - decimals: hyperdrive.decimals, - }); - - const baseTokenDepositEnabled = - hyperdrive.depositOptions.isBaseTokenDepositEnabled; - const shareTokenDepositsEnabled = - hyperdrive.depositOptions.isShareTokenDepositsEnabled; - - const { fixedApr } = useFixedRate({ - chainId: hyperdrive.chainId, - hyperdriveAddress: hyperdrive.address, - }); - - const tokenOptions = []; - if (baseTokenDepositEnabled) { - tokenOptions.push({ - tokenConfig: baseToken, - tokenBalance: baseTokenBalance?.value, - }); - } - - if (sharesToken && shareTokenDepositsEnabled) { - tokenOptions.push({ - tokenConfig: sharesToken, - tokenBalance: sharesTokenBalance?.value, + const { baseTokenDepositEnabled, baseToken, tokenOptions } = + useTokenDepositOptions({ + hyperdrive, + account, + appConfig, }); - } const { activeToken, activeTokenBalance, setActiveToken, isActiveTokenEth } = useActiveToken({ @@ -188,6 +146,10 @@ export function AddLiquidityForm({ // rate gaurd @ 5% = 0.05 // minApr = .1 * (1 - .05) // maxApr = .1 * (1 + .05) + const { fixedApr } = useFixedRate({ + chainId: hyperdrive.chainId, + hyperdriveAddress: hyperdrive.address, + }); const rateGuard = parseFixed(0.05).bigint; // 5% as an 18 digit number const minApr = fixedApr ? fixed(fixedApr.apr).mul(BigInt(1e18) - rateGuard).bigint diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx index 047665f9b..8b67e9d42 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx @@ -1,10 +1,5 @@ import { fixed } from "@delvtech/fixed-point-wasm"; -import { - getBaseToken, - getToken, - getYieldSource, - HyperdriveConfig, -} from "@delvtech/hyperdrive-appconfig"; +import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig"; import { adjustAmountByPercentage } from "@delvtech/hyperdrive-js"; import { InformationCircleIcon } from "@heroicons/react/24/outline"; import { MouseEvent, ReactElement, useState } from "react"; @@ -21,7 +16,6 @@ import { LoadingButton } from "src/ui/base/components/LoadingButton"; import { PrimaryStat } from "src/ui/base/components/PrimaryStat"; import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip"; import { formatBalance } from "src/ui/base/formatting/formatBalance"; -import { formatDate } from "src/ui/base/formatting/formatDate"; import { useNumericInput } from "src/ui/base/hooks/useNumericInput"; import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton"; import { RestrictedRegionButton } from "src/ui/compliance/RestrictedRegionButton"; @@ -31,6 +25,7 @@ import { TransactionView } from "src/ui/hyperdrive/TransactionView"; import { useIsNewPool } from "src/ui/hyperdrive/hooks/useIsNewPool"; import { useMarketState } from "src/ui/hyperdrive/hooks/useMarketState"; import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; +import { useTokenDepositOptions } from "src/ui/hyperdrive/hooks/useTokenDepositOptions"; import { useCurrentLongPrice } from "src/ui/hyperdrive/longs/hooks/useCurrentLongPrice"; import { useFixedRate } from "src/ui/hyperdrive/longs/hooks/useFixedRate"; import { OpenShortPreview } from "src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview"; @@ -73,16 +68,17 @@ export function OpenShortForm({ chainId: hyperdrive.chainId, }); const appConfig = useAppConfigForConnectedChain(); + const { baseToken, baseTokenDepositEnabled, tokenOptions } = + useTokenDepositOptions({ + hyperdrive, + account, + appConfig, + }); const { rewards } = useOpenShortRewards({ hyperdriveConfig: hyperdrive }); const { poolInfo } = usePoolInfo({ chainId: hyperdrive.chainId, hyperdriveAddress: hyperdrive.address, }); - const baseToken = getBaseToken({ - hyperdriveChainId: hyperdrive.chainId, - hyperdriveAddress: hyperdrive.address, - appConfig, - }); const { vaultRate } = useYieldSourceRate({ chainId: hyperdrive.chainId, hyperdriveAddress: hyperdrive.address, @@ -98,38 +94,6 @@ export function OpenShortForm({ hyperdriveAddress: hyperdrive.address, }); - const { balance: sharesTokenBalance } = useTokenBalance({ - account, - tokenAddress: hyperdrive.poolConfig.vaultSharesToken, - decimals: hyperdrive.decimals, - }); - - const baseTokenDepositEnabled = - hyperdrive.depositOptions.isBaseTokenDepositEnabled; - const shareTokenDepositsEnabled = - hyperdrive.depositOptions.isShareTokenDepositsEnabled; - const tokenOptions = []; - - if (baseTokenDepositEnabled) { - tokenOptions.push({ - tokenConfig: baseToken, - tokenBalance: baseTokenBalance?.value, - }); - } - - const sharesToken = getToken({ - chainId: hyperdrive.chainId, - appConfig, - tokenAddress: hyperdrive.poolConfig.vaultSharesToken, - }); - - if (sharesToken && shareTokenDepositsEnabled) { - tokenOptions.push({ - tokenConfig: sharesToken, - tokenBalance: sharesTokenBalance?.value, - }); - } - const { activeToken, activeTokenBalance, setActiveToken, isActiveTokenEth } = useActiveToken({ account, @@ -295,16 +259,6 @@ export function OpenShortForm({ rounding: "trunc", }); - const maturesOnLabel = formatDate( - Date.now() + Number(hyperdrive.poolConfig.positionDuration * 1000n), - ); - - const yieldSource = getYieldSource({ - hyperdriveAddress: hyperdrive.address, - hyperdriveChainId: hyperdrive.chainId, - appConfig, - }); - // Plausible event props const formName = "Open Short"; const chainId = hyperdrive.chainId; diff --git a/packages/hyperdrive-appconfig/src/tokens/selectors.ts b/packages/hyperdrive-appconfig/src/tokens/selectors.ts index 97b39c268..caa0c1c22 100644 --- a/packages/hyperdrive-appconfig/src/tokens/selectors.ts +++ b/packages/hyperdrive-appconfig/src/tokens/selectors.ts @@ -14,9 +14,9 @@ export function getToken({ chainId: number; tokenAddress: Address; appConfig: AppConfig; -}): TokenConfig | null { +}): TokenConfig | undefined { if (tokenAddress === zeroAddress) { - return null; + return; } const token = appConfig.tokens.find(