Cleanup Deprecated Components

apps/hyperdrive-trading/src/ui/base/components/Tabs/Tabs.tsx

@@ -7,10 +7,6 @@ export interface Tab<TabId extends string> {
   label: string;
   content: ReactNode;
 }
-
-/**
- * @deprecated Use TabsTwo instead. Remove this component once all references to it have been replaced.
- */
 export function Tabs<TabId extends string>({
   tabs,
   activeTabId,
@@ -19,36 +15,24 @@ export function Tabs<TabId extends string>({
   activeTabId: TabId;
 }): ReactElement {
   return (
-    <div role="tablist" className="daisy-tabs daisy-tabs-lifted daisy-tabs-lg">
+    <div role="tablist" className="daisy-tabs daisy-tabs-lg">
       {tabs.map(({ id, onClick, label }) => (
         <input
           key={id}
-          className={classNames(
-            "daisy-tab font-chakraPetch",
-            "!border-b-0", // override the bottom border since lifted tabs style doesn't need it, and it creates a stray line beneath the tab
-            {
-              "daisy-tab-active font-bold": activeTabId === id,
-              "opacity-80 hover:opacity-100": activeTabId !== id,
-            },
-          )}
+          className={classNames("daisy-tab font-chakraPetch text-h4", {
+            "daisy-tab-active border-b-2 !border-b-primary/40 pb-1":
+              activeTabId === id,
+            "border-b-2 border-transparent pb-1 opacity-80 hover:opacity-100":
+              activeTabId !== id,
+          })}
           aria-label={label}
           onChange={onClick}
           checked={activeTabId === id}
           type="radio"
           role="tab"
         />
       ))}
-      <div
-        role="tabpanel"
-        className={classNames(
-          "daisy-tab-content flex max-w-full overflow-x-auto rounded-b-box rounded-tr-box border-neutral-content/20 bg-base-100",
-          {
-            // The Longs tab is first, and the tabby bit is connected to the
-            // tab content, so don't put a round border on it
-            "rounded-tl-box": activeTabId !== tabs[0].id,
-          },
-        )}
-      >
+      <div role="tabpanel" className={classNames("daisy-tab-content flex")}>
         {tabs.find(({ id }) => id === activeTabId)?.content}
       </div>
     </div>

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

@@ -4,7 +4,7 @@ import { ReactElement } from "react";
 import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
 import { formatDate } from "src/ui/base/formatting/formatDate";
 
-export function MaturesOnCellTwo({
+export function MaturesOnCell({
   maturity,
   hyperdrive,
 }: {

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

@@ -21,9 +21,8 @@ import { StatusCell } from "src/ui/hyperdrive/longs/OpenLongsTable/StatusCell";
 import { TransactionView } from "src/ui/hyperdrive/TransactionView";
 import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance";
 import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice";
-import { TokenInputTwo } from "src/ui/token/TokenInputTwo";
-import { TokenChoice } from "src/ui/token/TokenPicker";
-import { TokenPickerTwo } from "src/ui/token/TokenPickerTwo";
+import { TokenInput } from "src/ui/token/TokenInput";
+import { TokenChoice, TokenPicker } from "src/ui/token/TokenPicker";
 import { formatUnits, parseUnits } from "viem";
 import { useAccount } from "wagmi";
 
@@ -161,7 +160,7 @@ export function CloseLongForm({
       tokenInput={
         baseToken ? (
           <div className="flex flex-col gap-3">
-            <TokenInputTwo
+            <TokenInput
               name={baseToken.symbol}
               inputLabel="Amount to redeem"
               token={`hy${baseToken.symbol}`}
@@ -191,11 +190,11 @@ export function CloseLongForm({
                 </div>
               }
             />
-            <TokenInputTwo
+            <TokenInput
               name={baseToken.symbol}
               inputLabel="You receive"
               token={
-                <TokenPickerTwo
+                <TokenPicker
                   tokens={withdrawTokenChoices}
                   activeTokenAddress={activeWithdrawToken.address}
                   onChange={(tokenAddress) => {

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

@@ -34,13 +34,13 @@ 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 { SlippageSettingsTwo } from "src/ui/token/SlippageSettingsTwo";
-import { TokenInputTwo } from "src/ui/token/TokenInputTwo";
+import { SlippageSettings } from "src/ui/token/SlippageSettings";
+import { TokenInput } from "src/ui/token/TokenInput";
 import {
   TokenChoice,
-  TokenPickerTwo,
+  TokenPicker,
   ZapsTokenPicker,
-} from "src/ui/token/TokenPickerTwo";
+} from "src/ui/token/TokenPicker";
 import { Address, formatUnits } from "viem";
 import { useAccount, useChainId } from "wagmi";
 
@@ -250,12 +250,12 @@ export function OpenLongForm({
   return (
     <TransactionView
       tokenInput={
-        <TokenInputTwo
+        <TokenInput
           variant="lighter"
           settings={
             <div className="mb-3 flex w-full items-center justify-between">
               <PositionPicker hyperdrive={hyperdrive} />
-              <SlippageSettingsTwo
+              <SlippageSettings
                 onSlippageChange={(slippage) => {
                   window.plausible("formChange", {
                     props: {
@@ -296,7 +296,7 @@ export function OpenLongForm({
                 }}
               />
             ) : (
-              <TokenPickerTwo
+              <TokenPicker
                 tokens={tokenChoices}
                 activeTokenAddress={activeToken.address}
                 onChange={(tokenAddress) => {

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

@@ -11,7 +11,7 @@ import Skeleton from "react-loading-skeleton";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { usePreviewCloseLong } from "src/ui/hyperdrive/longs/hooks/usePreviewCloseLong";
 
-export function CurrentValueCellTwo({
+export function CurrentValueCell({
   row,
   hyperdrive,
 }: {

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktop.tsx

@@ -29,9 +29,9 @@ import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { Pagination } from "src/ui/base/components/Pagination";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
-import { MaturesOnCellTwo } from "src/ui/hyperdrive/MaturesOnCell/MaturesOnCell";
+import { MaturesOnCell } from "src/ui/hyperdrive/MaturesOnCell/MaturesOnCell";
 import { CloseLongModalButton } from "src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton";
-import { CurrentValueCellTwo } from "src/ui/hyperdrive/longs/OpenLongsTable/CurrentValueCell";
+import { CurrentValueCell } from "src/ui/hyperdrive/longs/OpenLongsTable/CurrentValueCell";
 import { StatusCell } from "src/ui/hyperdrive/longs/OpenLongsTable/StatusCell";
 import { TotalOpenLongsValue } from "src/ui/hyperdrive/longs/OpenLongsTable/TotalOpenLongsValue";
 import { usePortfolioLongsData } from "src/ui/portfolio/usePortfolioLongsData";
@@ -329,7 +329,7 @@ function getColumns({
       header: `Maturity Date`,
       cell: ({ row }) => {
         return (
-          <MaturesOnCellTwo
+          <MaturesOnCell
             hyperdrive={hyperdrive}
             maturity={row.original.maturity}
           />
@@ -384,7 +384,7 @@ function getColumns({
       cell: ({ row }) => {
         return (
           <div>
-            <CurrentValueCellTwo hyperdrive={hyperdrive} row={row.original} />
+            <CurrentValueCell hyperdrive={hyperdrive} row={row.original} />
             <span className="flex font-dmMono text-neutral-content">
               {formatBalance({
                 balance: row.original.details?.baseAmountPaid || 0n,