Refactor token input to use daisy components

apps/hyperdrive-trading/src/ui/base/numericInput.ts

@@ -0,0 +1,5 @@
+/**
+ * Tailwind classes to hide the up and down arrow buttons in a numeric input
+ */
+export const HIDE_NUMERIC_INPUT_ARROWS_CLASS =
+  "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" as const;

apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useDevLogging.ts

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 import { Hyperdrive } from "src/appconfig/types";
-import { useHyperdrivePoolInfo } from "src/ui/hyperdrive/hooks//useHyperdrivePoolInfo";
-import { useHyperdrivePoolConfig } from "src/ui/hyperdrive/hooks/useHyperdrivePoolConfig";
+import { usePoolConfig } from "src/ui/hyperdrive/hooks/usePoolConfig";
+import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
 import { formatUnits } from "viem";
 
 export function useDevLogging(market: Hyperdrive): void {
-  const { poolConfig } = useHyperdrivePoolConfig(market.address);
+  const { poolConfig } = usePoolConfig(market.address);
   useEffect(() => {
     if (import.meta.env.DEV) {
       console.log("Pool Config:");
@@ -17,7 +17,7 @@ export function useDevLogging(market: Hyperdrive): void {
     }
   }, [poolConfig, market.baseToken.decimals]);
 
-  const { poolInfo } = useHyperdrivePoolInfo(market.address);
+  const { poolInfo } = usePoolInfo(market.address);
   useEffect(() => {
     if (import.meta.env.DEV) {
       console.log("Pool Info:");

apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useHyperdrivePoolConfig.ts → apps/hyperdrive-trading/src/ui/hyperdrive/hooks/usePoolConfig.ts

@@ -5,7 +5,7 @@ import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import { ContractFunctionResult } from "viem";
 import { Address } from "wagmi";
 
-export function useHyperdrivePoolConfig(hyperdriveAddress: Address): {
+export function usePoolConfig(hyperdriveAddress: Address): {
   poolConfig:
     | ContractFunctionResult<typeof HyperdriveABI, "getPoolConfig">
     | undefined;

apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useHyperdrivePoolInfo.ts → apps/hyperdrive-trading/src/ui/hyperdrive/hooks/usePoolInfo.ts

@@ -3,14 +3,14 @@ import { QueryStatus, useQuery } from "@tanstack/react-query";
 import { makeQueryKey } from "src/base/makeQueryKey";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import { Address } from "wagmi";
-export function useHyperdrivePoolInfo(marketAddress: Address): {
+export function usePoolInfo(hyperdriveAddress: Address): {
   poolInfo: PoolInfo | undefined;
   poolInfoStatus: QueryStatus;
 } {
-  const readHyperdrive = useReadHyperdrive(marketAddress);
+  const readHyperdrive = useReadHyperdrive(hyperdriveAddress);
   const queryEnabled = !!readHyperdrive;
   const { data: poolInfo, status: poolInfoStatus } = useQuery({
-    queryKey: makeQueryKey("poolInfo", { marketAddress }),
+    queryKey: makeQueryKey("poolInfo", { marketAddress: hyperdriveAddress }),
     queryFn: queryEnabled ? () => readHyperdrive.getPoolInfo() : undefined,
     enabled: queryEnabled,
   });

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

@@ -57,18 +57,21 @@ export function CloseLongForm({
     <div className="flex flex-col gap-6">
       {/* Amount to close section */}
       {long && (
-        <div className="space-y-4 text-base-content">
-          <h5>Amount to close</h5>
+        <div className="flex space-y-4 text-base-content">
           <TokenInput
             token={{
-              name: "Hyperdrive Long",
-              symbol: "Long",
+              name: `Hyperdrive ${baseSymbol}`,
+              symbol: `hy${baseSymbol}`,
               decimals: baseDecimals,
               address: "0x00",
             }}
             value={amount ?? ""}
             maxValue={long ? formatUnits(long.bondAmount, baseDecimals) : ""}
-            maxLabel="Balance"
+            stat={`Balance: ${formatBalance({
+              balance: long.bondAmount,
+              decimals: baseDecimals,
+              places: 4,
+            })}`}
             onChange={(newAmount) => setAmount(newAmount)}
           />
         </div>

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

@@ -5,8 +5,9 @@ import { ReactElement } from "react";
 import { Link } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { MAX_UINT256 } from "src/base/constants";
+import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
-import { useHyperdrivePoolInfo } from "src/ui/hyperdrive/hooks/useHyperdrivePoolInfo";
+import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
 import { useMaxLong } from "src/ui/hyperdrive/longs/hooks/useMaxLong";
 import { useOpenLong } from "src/ui/hyperdrive/longs/hooks/useOpenLong";
 import { usePreviewOpenLong } from "src/ui/hyperdrive/longs/hooks/usePreviewOpenLong";
@@ -60,7 +61,7 @@ export function OpenLongForm({ market }: OpenLongFormProps): ReactElement {
     ? amountAsBigInt === undefined || amountAsBigInt < tokenAllowance
     : false;
 
-  const { poolInfo } = useHyperdrivePoolInfo(market.address);
+  const { poolInfo } = usePoolInfo(market.address);
   const { longAmountOut, status: openLongPreviewStatus } = usePreviewOpenLong({
     market,
     baseAmount: amountAsBigInt,
@@ -110,6 +111,16 @@ export function OpenLongForm({ market }: OpenLongFormProps): ReactElement {
         token={market.baseToken}
         value={amount ?? ""}
         maxValue={maxAmount}
+        inputLabel="Amount to spend"
+        stat={
+          baseTokenBalance
+            ? `Balance: ${formatBalance({
+                balance: baseTokenBalance?.value,
+                decimals: market.baseToken.decimals,
+                places: 4,
+              })} ${market.baseToken.symbol}`
+            : undefined
+        }
         onChange={(newAmount) => setAmount(newAmount)}
       />
       {/* New Position Section */}

apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { MAX_UINT256 } from "src/base/constants";
 import { parseUnits } from "src/base/parseUnits";
+import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { AddLiquidityPreview } from "src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview";
 import { useAddLiquidity } from "src/ui/hyperdrive/lp/hooks/useAddLiquidity";
@@ -90,7 +91,16 @@ export function AddLiquidityForm({
         token={market.baseToken}
         value={amount ?? ""}
         maxValue={baseTokenBalance?.formatted}
-        maxLabel="Balance"
+        inputLabel="Amount to deposit"
+        stat={
+          baseTokenBalance
+            ? `Balance: ${formatBalance({
+                balance: baseTokenBalance?.value,
+                decimals: market.baseToken.decimals,
+                places: 4,
+              })} ${market.baseToken.symbol}`
+            : undefined
+        }
         onChange={(newAmount) => setAmount(newAmount)}
       />
 

apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesForm/RedeemWithdrawalSharesForm.tsx

@@ -63,11 +63,16 @@ export function RedeemWithdrawalSharesForm({
           token={{
             name: "Hyperdrive Withdrawal Shares",
             // TODO: What should the symbol be?
-            symbol: "Shares",
+            symbol: "Withdrawal shares",
             decimals: baseDecimals,
             address: "0x00",
           }}
           value={amount ?? ""}
+          stat={`Redeemable balance: ${formatBalance({
+            balance: maxRedeemableShares ?? withdrawalShares,
+            decimals: baseDecimals,
+            places: 4,
+          })}`}
           maxValue={formatUnits(
             maxRedeemableShares ?? withdrawalShares,
             baseDecimals,

apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx

@@ -77,13 +77,21 @@ export function RemoveLiquidityForm({
         <TokenInput
           token={{
             name: "Hyperdrive LP",
-            symbol: "LP",
+            symbol: "LP shares",
             decimals: baseDecimals,
             address: "0x00",
           }}
           value={amount ?? ""}
           maxValue={formatUnits(lpShares, baseDecimals)}
-          maxLabel="Balance"
+          stat={
+            lpShares
+              ? `Balance: ${formatBalance({
+                  balance: lpShares,
+                  decimals: baseDecimals,
+                  places: 4,
+                })} LP shares`
+              : undefined
+          }
           onChange={(newAmount) => setAmount(newAmount)}
         />
       </div>

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx

@@ -57,17 +57,24 @@ export function CloseShortForm({
       {/* Amount to close section */}
       {short && (
         <div className="space-y-4 text-base-content">
-          <h5>Amount to close</h5>
           <TokenInput
             token={{
               name: "Hyperdrive Short",
-              symbol: "Short",
+              symbol: "Shorts",
               decimals: baseDecimals,
               address: "0x00",
             }}
             value={amount ?? ""}
             maxValue={short ? formatUnits(short.bondAmount, baseDecimals) : ""}
-            maxLabel="Balance"
+            stat={
+              short
+                ? `Available to close: ${formatBalance({
+                    balance: short.bondAmount,
+                    decimals: hyperdrive.baseToken.decimals,
+                    places: 4,
+                  })}`
+                : undefined
+            }
             onChange={(newAmount) => setAmount(newAmount)}
           />
         </div>

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx

@@ -5,15 +5,14 @@ import { Link } from "react-router-dom";
 import { Hyperdrive, Token } from "src/appconfig/types";
 import { MAX_UINT256 } from "src/base/constants";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
-import { useHyperdrivePoolInfo } from "src/ui/hyperdrive/hooks/useHyperdrivePoolInfo";
+import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
 import { useMaxShort } from "src/ui/hyperdrive/shorts/hooks/useMaxShort";
 import { useOpenShort } from "src/ui/hyperdrive/shorts/hooks/useOpenShort";
 import { usePreviewOpenShort } from "src/ui/hyperdrive/shorts/hooks/usePreviewOpenShort";
 import { OpenShortPreview } from "src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview";
 import { useTokenAllowance } from "src/ui/token/hooks/useTokenAllowance";
 import { useTokenApproval } from "src/ui/token/hooks/useTokenApproval";
 import { TokenInput } from "src/ui/token/TokenInput";
-import { formatUnits } from "viem";
 import { useAccount, useBalance } from "wagmi";
 
 interface OpenShortPositionFormProps {
@@ -36,7 +35,7 @@ export function OpenShortForm({
     decimals: market.baseToken.decimals,
   });
 
-  const { poolInfo } = useHyperdrivePoolInfo(market.address);
+  const { poolInfo } = usePoolInfo(market.address);
   const { baseAmountIn, status: openShortPreviewStatus } = usePreviewOpenShort({
     market,
     amountBondShorts: amountAsBigInt,
@@ -81,7 +80,7 @@ export function OpenShortForm({
   const current = new Date();
   const expiryDate = new Date(current.getTime() + market.termLengthMS);
   const bondToken = {
-    symbol: "Bonds",
+    symbol: `hy${market.baseToken.symbol}`,
     address: "0x0",
     decimals: 18,
     name: "Bonds",
@@ -106,17 +105,8 @@ export function OpenShortForm({
       </div>
       <TokenInput
         token={bondToken}
+        inputLabel="Amount to short"
         value={amount ?? ""}
-        maxValue={
-          maxShort
-            ? formatUnits(maxShort, market.baseToken.decimals)
-            : undefined
-        }
-        showMax={
-          // TODO: Show the max button again on once we have get_max_short from
-          // the rust sdk and can get a quote for the user's max short
-          false
-        }
         onChange={(newAmount) => setAmount(newAmount)}
       />
 

apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx

@@ -8,7 +8,7 @@ import {
   SortableGridTable,
 } from "src/ui/base/components/tables/SortableGridTable";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
-import { useHyperdrivePoolInfo } from "src/ui/hyperdrive/hooks/useHyperdrivePoolInfo";
+import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
 import { useLpShares } from "src/ui/hyperdrive/lp/hooks/useLpShares";
 import { usePreviewRedeemWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/usePreviewRedeemWithdrawalShares";
 import { usePreviewRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreviewRemoveLiquidity";
@@ -52,7 +52,7 @@ export function OpenLpPosition({
       destination: account,
     });
 
-  const { poolInfo } = useHyperdrivePoolInfo(hyperdrive.address);
+  const { poolInfo } = usePoolInfo(hyperdrive.address);
 
   const rows: Row[] = [];
   if (lpShares) {