Deprecate DSRHyperdriveABI, Fix Router

apps/hyperdrive-trading/src/ui/app/App/App.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from "react";
+import { ReactElement } from "react";
 import {
   createBrowserRouter,
   Outlet,
@@ -9,7 +9,6 @@ import { Markets } from "src/pages/Markets";
 import { Trade } from "src/pages/Trade";
 import { Navbar } from "src/ui/app/Navbar/Navbar";
 import { useAppConfig } from "src/ui/appconfig/useAppConfig";
-import { useLocalStorage } from "src/ui/base/hooks/useLocalStorage";
 
 const LASTED_VIEWED_MARKET_KEY = "last-viewed-market";
 
@@ -22,65 +21,56 @@ function BaseLayout(): ReactElement {
   );
 }
 
-export function App(): ReactElement {
+export function App(): ReactElement | null {
   const { appConfig } = useAppConfig();
   if (appConfig) {
     // eslint-disable-next-line no-console
     console.log("appConfig", appConfig);
   }
 
-  const [lastViewedMarket, setLastViewedMarket] = useLocalStorage<
-    string | undefined
-  >(LASTED_VIEWED_MARKET_KEY, undefined);
+  if (!appConfig) {
+    return null;
+  }
 
-  const router = useMemo(() => {
-    return createBrowserRouter([
-      {
-        path: "/",
-        element: <BaseLayout />,
-        children: [
-          {
-            path: "/",
-            element: <Markets />,
-          },
-          {
-            path: "markets",
-            element: <Markets />,
-          },
-          {
-            path: "/trade",
-            loader: () => {
-              if (lastViewedMarket) {
-                return redirect(`/trade/${lastViewedMarket}`);
-              }
-              // we fall back to the first market in the config
-              // this should rarely happen
-              return redirect(`/trade/${appConfig?.hyperdrives[0].address}`);
-            },
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <BaseLayout />,
+      children: [
+        {
+          path: "/",
+          element: <Markets />,
+        },
+        {
+          path: "markets",
+          element: <Markets />,
+        },
+        {
+          path: "/trade",
+          loader: () => {
+            return redirect(`/trade/${appConfig?.hyperdrives[0].address}`);
           },
-          {
-            path: "/trade/:address",
-            element: <Trade />,
-            loader: ({ params }) => {
-              const market = appConfig?.hyperdrives.find(
-                (market) => market.address === params.address,
-              );
+        },
+        {
+          path: "/trade/:address",
+          element: <Trade />,
+          loader: ({ params }) => {
+            const market = appConfig?.hyperdrives.find(
+              (market) => market.address === params.address,
+            );
 
-              if (market) {
-                setLastViewedMarket(market.address);
-                return market;
-              }
+            if (market) {
+              return market;
+            }
 
-              // we fall back to the first market in the config
-              // this should rarely happen
-              return redirect(`/trade/${appConfig?.hyperdrives[0].address}`);
-            },
+            // we fall back to the first market in the config
+            // this should rarely happen
+            return redirect(`/trade/${appConfig?.hyperdrives[0].address}`);
           },
-        ],
-      },
-    ]);
-    /* eslint-disable-next-line  react-hooks/exhaustive-deps */
-  }, [appConfig]);
+        },
+      ],
+    },
+  ]);
 
   return (
     <div className="flex h-full flex-col overflow-auto bg-base-100">

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

@@ -25,7 +25,11 @@ export function useCloseLong({
   enabled = true,
 }: UseCloseLongOptions): UseCloseLongResult {
   const queryEnabled =
-    !!long && !!bondAmountIn && !!minBaseAmountOut && !!destination && enabled;
+    !!long &&
+    !!bondAmountIn &&
+    minBaseAmountOut !== undefined && // check undefined since 0 is valid
+    !!destination &&
+    enabled;
 
   const { config } = usePrepareContractWrite({
     abi: HyperdriveABI,

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

@@ -1,4 +1,4 @@
-import { DSRHyperdriveABI } from "@hyperdrive/core";
+import { HyperdriveABI } from "@hyperdrive/core";
 import { QueryStatus, useQuery } from "@tanstack/react-query";
 import { Address, useAccount, usePublicClient } from "wagmi";
 
@@ -37,7 +37,7 @@ export function usePreviewCloseLong({
     !!hyperdriveAddress &&
     !!maturityTime &&
     !!bondAmountIn &&
-    !!minBaseAmountOut &&
+    minBaseAmountOut !== undefined && // check undefined since 0 is valid
     !!destination &&
     !!publicClient &&
     !!account &&
@@ -56,7 +56,7 @@ export function usePreviewCloseLong({
       ? async () => {
           // TODO: Refactor this to the math library instead
           const { result } = await publicClient.simulateContract({
-            abi: DSRHyperdriveABI,
+            abi: HyperdriveABI,
             address: hyperdriveAddress,
             account,
             functionName: "closeLong",

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

@@ -37,14 +37,14 @@ export function CloseLongForm({
     hyperdriveAddress: long.hyperdriveAddress,
     maturityTime: long.maturity,
     bondAmountIn: amountAsBigInt,
-    minBaseAmountOut: parseUnits("0.01", baseDecimals),
+    minBaseAmountOut: parseUnits("0", baseDecimals),
     destination: account,
   });
 
   const { closeLong, isPendingWalletAction } = useCloseLong({
     long,
     bondAmountIn: amountAsBigInt,
-    minBaseAmountOut: parseUnits("1", baseDecimals),
+    minBaseAmountOut: parseUnits("0", baseDecimals),
     destination: account,
     enabled: previewCloseLongStatus === "success",
   });

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

@@ -3,7 +3,6 @@ import { ethers } from "ethers";
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { parseUnits } from "src/base/parseUnits";
-import { Button } from "src/ui/base/components/Button";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { useOpenLong } from "src/ui/hyperdrive/hooks/useOpenLong";
 import { usePreviewOpenLong } from "src/ui/hyperdrive/hooks/usePreviewOpenLong";
@@ -99,40 +98,34 @@ export function OpenLongForm({ market }: OpenLongFormProps): ReactElement {
       {account ? (
         needsApproval ? (
           // Approval button
-          <Button
+          <button
             disabled={!approve}
-            variant="Work"
-            size="lg"
-            block
+            className="daisy-btn-warning daisy-btn"
             onClick={() => approve?.()}
           >
             <h5>Approve {market.baseToken.symbol}</h5>
-          </Button>
+          </button>
         ) : (
           // Trade button
-          <Button
+          <button
             disabled={
               !openLong ||
               openLongTransactionStatus === "loading" ||
               openLongStatus === "loading"
             }
-            variant="Emerald"
-            size="lg"
-            block
+            className="daisy-btn-secondary daisy-btn"
             onClick={() => openLong?.()}
           >
             <h5>Open Long</h5>
-          </Button>
+          </button>
         )
       ) : (
-        <Button
-          variant="Emerald"
-          size="lg"
-          block
+        <button
+          className="daisy-btn-secondary daisy-btn"
           onClick={() => openConnectModal?.()}
         >
           <h5>Connect wallet</h5>
-        </Button>
+        </button>
       )}
     </div>
   );

apps/hyperdrive-trading/src/ui/trade/OpenLongModalButton/OpenLongModalButton.tsx

@@ -25,8 +25,11 @@ export function OpenLongModalButton({
               Open a long
             </p>
             <p className="font-light">
-              Earn fixed rate yield on your existing DAI holdings
+              Earn the fixed rate on your current DAI holdings
             </p>
+            {/* Using a div styled as a button here just as a visual cue. Don't
+            use a real button here since the Well is interactive already, and
+            doing so would create invalid dom nesting of buttons. */}
             <div className="daisy-btn-secondary daisy-btn-sm daisy-btn mt-2 justify-between gap-0 border-secondary normal-case">
               <span className="ml-4 flex-1 text-center">Long</span>
               <ChevronRightIcon className="h-3 text-right" />

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

@@ -1,9 +1,8 @@
-import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { ConnectButton, useConnectModal } from "@rainbow-me/rainbowkit";
 import { constants, ethers } from "ethers";
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { convertMillisecondsToMonths } from "src/base/covertMillisecondsToMonths";
-import { Button } from "src/ui/base/components/Button";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { useOpenShort } from "src/ui/hyperdrive/hooks/useOpenShort";
 import { usePreviewOpenShort } from "src/ui/hyperdrive/hooks/usePreviewOpenShort";
@@ -17,7 +16,7 @@ interface OpenShortPositionFormProps {
   market: Hyperdrive;
 }
 
-export function OpenShortPositionForm({
+export function OpenShortForm({
   market,
 }: OpenShortPositionFormProps): ReactElement {
   const { address: account } = useAccount();
@@ -74,53 +73,35 @@ export function OpenShortPositionForm({
 
   const openShortButton = () => {
     if (!account) {
-      return (
-        <Button
-          variant="Crimson"
-          size="lg"
-          block
-          onClick={() => openConnectModal?.()}
-        >
-          <h5>Connect wallet</h5>
-        </Button>
-      );
+      return <ConnectButton />;
     }
 
-    if (hasEnoughBalance === true) {
-      if (needsApproval) {
-        return (
-          <Button
-            disabled={!approve}
-            variant="Work"
-            onClick={() => approve?.()}
-          >
-            <h5>Approve {market.baseToken.symbol}</h5>
-          </Button>
-        );
-      } else {
-        return (
-          <Button
-            disabled={
-              !openShort ||
-              openShortTransactionStatus === "loading" ||
-              openShortSubmittedStatus === "loading"
-            }
-            variant="Crimson"
-            size="lg"
-            block
-            onClick={() => openShort?.()}
-          >
-            <h5>Open Short</h5>
-          </Button>
-        );
-      }
-    } else {
+    if (needsApproval) {
       return (
-        <Button variant="Crimson" size="lg" block onClick={() => {}}>
-          <h5>Not enough {market.baseToken.symbol}</h5>
-        </Button>
+        <button
+          disabled={!approve}
+          className="daisy-btn-warning daisy-btn"
+          onClick={() => approve?.()}
+        >
+          Approve {market.baseToken.symbol}
+        </button>
       );
     }
+
+    return (
+      <button
+        disabled={
+          !hasEnoughBalance ||
+          !openShort ||
+          openShortTransactionStatus === "loading" ||
+          openShortSubmittedStatus === "loading"
+        }
+        className="daisy-btn-accent daisy-btn"
+        onClick={() => openShort?.()}
+      >
+        <h5>Open Short</h5>
+      </button>
+    );
   };
 
   const current = new Date();

apps/hyperdrive-trading/src/ui/trade/OpenShortModalButton/OpenShortModalButton.tsx

@@ -0,0 +1,41 @@
+import { BoltIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ReactElement } from "react";
+import { Hyperdrive } from "src/appconfig/types";
+import { Modal } from "src/ui/base/components/Modal/Modal";
+import { Well } from "src/ui/base/components/Well/Well";
+import { OpenShortForm } from "src/ui/trade/OpenShortForm/OpenShortForm";
+
+const OPEN_SHORT_MODAL_ID = "openShortModal";
+export function OpenShortModalButton({
+  hyperdrive,
+}: {
+  hyperdrive: Hyperdrive;
+}): ReactElement {
+  return (
+    <Modal
+      modalId={OPEN_SHORT_MODAL_ID}
+      modalContent={<OpenShortForm market={hyperdrive} />}
+    >
+      {({ showModal }) => (
+        <Well interactive variant="accent" onClick={() => showModal()}>
+          <div className="flex w-52 flex-col gap-2 py-4 text-center">
+            <BoltIcon className="mb-2 h-16 text-accent" />
+            <p className="font-lato text-h5 font-light text-accent">
+              Open a short
+            </p>
+            <p className="font-light ">
+              Maximize your exposure to the DAI Savings Rate (DSR)
+            </p>
+            {/* Using a div styled as a button here just as a visual cue. Don't
+            use a real button here since the Well is interactive already, and
+            doing so would create invalid dom nesting of buttons. */}
+            <div className="daisy-btn-accent daisy-btn-sm daisy-btn mt-2 justify-between gap-0 normal-case">
+              <span className="ml-4 flex-1 text-center">Short</span>
+              <ChevronRightIcon className="h-3 text-right" />
+            </div>
+          </div>
+        </Well>
+      )}
+    </Modal>
+  );
+}