Fix bug in LP table, polish shorts table, and close long and close sh…

…ort modals (#442)
delvtech · Oct 18, 2023 · 67257d2 · 67257d2 · vercel · Oct 18, 2023
1 parent 64161c0
commit 67257d2
Show file tree

Hide file tree

Showing 18 changed files with 394 additions and 379 deletions.
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
@@ -61,7 +61,7 @@ const getColumns = (hyperdrive: Hyperdrive) => [
         <span>
           {size}{" "}
           {isLpRow
-            ? hyperdrive.baseToken.name
+            ? hyperdrive.baseToken.symbol
             : `hy${hyperdrive.baseToken.symbol}`}
         </span>
       );

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionView.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionView.tsx
@@ -0,0 +1,41 @@
+import { ReactElement, ReactNode } from "react";
+import { Well } from "src/ui/base/components/Well/Well";
+
+interface TransactionViewProps {
+  heading: string;
+  tokenInput: ReactNode;
+  transactionPreview: ReactNode;
+  disclaimer?: ReactNode;
+
+  actionButton: ReactNode;
+}
+
+export function TransactionView({
+  heading,
+  tokenInput,
+  transactionPreview,
+  disclaimer,
+  actionButton,
+}: TransactionViewProps): ReactElement {
+  return (
+    <div className="flex flex-col gap-4">
+      <h5 className="font-bold">{heading}</h5>
+      {tokenInput}
+
+      <div className="mt-4 flex flex-col gap-6">
+        <Well elevation="flat">
+          <div className="space-y-4">
+            <span className="text-h6 font-bold">Preview transaction</span>
+            {transactionPreview}
+          </div>
+        </Well>
+
+        {disclaimer ? (
+          <p className="text-center text-body">{disclaimer}</p>
+        ) : null}
+
+        {actionButton}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
@@ -4,6 +4,7 @@ import { MouseEvent, ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
+import { TransactionView } from "src/ui/hyperdrive/TransactionView";
 import { useCloseLong } from "src/ui/hyperdrive/longs/hooks/useCloseLong";
 import { usePreviewCloseLong } from "src/ui/hyperdrive/longs/hooks/usePreviewCloseLong";
 import { TokenInput } from "src/ui/token/TokenInput";
@@ -13,13 +14,13 @@ import { useAccount } from "wagmi";
 interface CloseLongFormProps {
   hyperdrive: Hyperdrive;
   long: Long;
-  onSuccess: () => void;
   onCloseLong?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 export function CloseLongForm({
   hyperdrive,
   long,
+  onCloseLong,
 }: CloseLongFormProps): ReactElement {
   const { decimals: baseDecimals, symbol: baseSymbol } = hyperdrive.baseToken;
 
@@ -54,58 +55,57 @@ export function CloseLongForm({
   });
 
   return (
-    <div className="flex flex-col gap-6">
-      {/* Amount to close section */}
-      {long && (
-        <div className="flex space-y-4 text-base-content">
-          <TokenInput
-            token={{
-              name: `Hyperdrive ${baseSymbol}`,
-              symbol: `hy${baseSymbol}`,
-              decimals: baseDecimals,
-              address: "0x00",
-            }}
-            value={amount ?? ""}
-            maxValue={long ? formatUnits(long.bondAmount, baseDecimals) : ""}
-            stat={`Balance: ${formatBalance({
-              balance: long.bondAmount,
-              decimals: baseDecimals,
-              places: 4,
-            })}`}
-            onChange={(newAmount) => setAmount(newAmount)}
-          />
-        </div>
-      )}
-
-      {/* You receive Section */}
-      {long && (
+    <TransactionView
+      heading="Close long"
+      tokenInput={
+        <TokenInput
+          token={{
+            name: `Hyperdrive ${baseSymbol}`,
+            symbol: `hy${baseSymbol}`,
+            decimals: baseDecimals,
+            address: "0x00",
+          }}
+          value={amount ?? ""}
+          maxValue={long ? formatUnits(long.bondAmount, baseDecimals) : ""}
+          stat={`Balance: ${formatBalance({
+            balance: long.bondAmount,
+            decimals: baseDecimals,
+            places: 4,
+          })}`}
+          onChange={(newAmount) => setAmount(newAmount)}
+        />
+      }
+      transactionPreview={
         <div className="flex justify-between">
-          <p className="font-light">You receive</p>
-          <p className="tracking-wide">
+          <p>You receive</p>
+          <p className="font-bold">
             {baseAmountOut
               ? `${formatBalance({
                   balance: baseAmountOut,
                   decimals: baseDecimals,
                   places: 8,
-                })} ${baseSymbol}`
-              : ""}
+                })}`
+              : "0"}{" "}
+            {baseSymbol}
           </p>
         </div>
-      )}
-
-      {account ? (
-        <button
-          className="daisy-btn-secondary daisy-btn w-full"
-          disabled={!closeLong || isPendingWalletAction}
-          onClick={(e) => {
-            closeLong?.();
-          }}
-        >
-          <span>Close position</span>
-        </button>
-      ) : (
-        <ConnectButton />
-      )}
-    </div>
+      }
+      actionButton={
+        account ? (
+          <button
+            className="daisy-btn-secondary daisy-btn w-full"
+            disabled={!closeLong || isPendingWalletAction}
+            onClick={(e) => {
+              closeLong?.();
+              onCloseLong?.(e);
+            }}
+          >
+            <span>Close position</span>
+          </button>
+        ) : (
+          <ConnectButton />
+        )
+      }
+    />
   );
 }
diff --git a/.../hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton.tsx b/.../hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton.tsx
@@ -30,13 +30,9 @@ export function CloseLongModalButton({
           >
             <XMarkIcon className="w-6 " title="Close position" />
           </button>
-          <h3 className="text-h6 font-thin text-base-content">
-            Close position
-          </h3>
           <CloseLongForm
             hyperdrive={hyperdrive}
             long={long}
-            onSuccess={closeModal}
             onCloseLong={(e) => {
               // preventDefault since we don't want to close the modal while the
               // tx is temporarily pending the user's signature in their wallet.

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
@@ -3,14 +3,14 @@ import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { MAX_UINT256 } from "src/base/constants";
-import { Well } from "src/ui/base/components/Well/Well";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 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";
 import { OpenLongPreview } from "src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview";
+import { TransactionView } from "src/ui/hyperdrive/TransactionView";
 import { useTokenAllowance } from "src/ui/token/hooks/useTokenAllowance";
 import { useTokenApproval } from "src/ui/token/hooks/useTokenApproval";
 import { TokenInput } from "src/ui/token/TokenInput";
@@ -92,51 +92,42 @@ export function OpenLongForm({
   });
 
   return (
-    <div className="flex flex-col gap-4">
-      <h5 className="font-bold">Long hy{hyperdrive.baseToken.symbol}</h5>
-      <TokenInput
-        token={hyperdrive.baseToken}
-        value={amount ?? ""}
-        maxValue={maxAmount}
-        inputLabel="Amount to spend"
-        stat={
-          baseTokenBalance
-            ? `Balance: ${formatBalance({
-                balance: baseTokenBalance?.value,
-                decimals: hyperdrive.baseToken.decimals,
-                places: 4,
-              })} ${hyperdrive.baseToken.symbol}`
-            : undefined
-        }
-        onChange={(newAmount) => setAmount(newAmount)}
-      />
-
-      {/* New Position Section */}
-      <div className="mt-4 flex flex-col gap-6">
-        <Well elevation="flat">
-          <div className="space-y-4">
-            <span className="text-h6 font-bold">Preview transaction</span>
-            <OpenLongPreview
-              hyperdrive={hyperdrive}
-              long={{
-                bondAmount: longAmountOut || 0n,
-                assetId: 0n,
-                baseAmountPaid: amountAsBigInt || 0n,
-                maturity: BigInt(
-                  Math.round((Date.now() + hyperdrive.termLengthMS) / 1000),
-                ),
-              }}
-            />
-          </div>
-        </Well>
-
-        <p className="text-center text-body">
-          Note: 1 hy{hyperdrive.baseToken.symbol} is always worth 1{" "}
-          {hyperdrive.baseToken.symbol} at maturity, however its value may
-          fluctuate before maturity based on market activity.
-        </p>
-
-        {account ? (
+    <TransactionView
+      heading={`Long hy${hyperdrive.baseToken.symbol}`}
+      tokenInput={
+        <TokenInput
+          token={hyperdrive.baseToken}
+          value={amount ?? ""}
+          maxValue={maxAmount}
+          inputLabel="Amount to spend"
+          stat={
+            baseTokenBalance
+              ? `Balance: ${formatBalance({
+                  balance: baseTokenBalance?.value,
+                  decimals: hyperdrive.baseToken.decimals,
+                  places: 4,
+                })} ${hyperdrive.baseToken.symbol}`
+              : undefined
+          }
+          onChange={(newAmount) => setAmount(newAmount)}
+        />
+      }
+      transactionPreview={
+        <OpenLongPreview
+          hyperdrive={hyperdrive}
+          long={{
+            bondAmount: longAmountOut || 0n,
+            assetId: 0n,
+            baseAmountPaid: amountAsBigInt || 0n,
+            maturity: BigInt(
+              Math.round((Date.now() + hyperdrive.termLengthMS) / 1000),
+            ),
+          }}
+        />
+      }
+      disclaimer={`Note: 1 hy${hyperdrive.baseToken.symbol} is always worth 1 ${hyperdrive.baseToken.symbol} at maturity, however its value may fluctuate before maturity based on market activity.`}
+      actionButton={
+        account ? (
           !hasEnoughAllowance ? (
             // Approval button
             <button
@@ -167,8 +158,8 @@ export function OpenLongForm({
           >
             <h5>Connect wallet</h5>
           </button>
-        )}
-      </div>
-    </div>
+        )
+      }
+    />
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx
@@ -31,7 +31,7 @@ export function OpenLongPreview({
 
       <div className="flex justify-between">
         <p>Fixed rate</p>
-        <p className="flex items-center">
+        <div className="flex items-center">
           {long.bondAmount > 0 ? (
             <>
               <div
@@ -58,7 +58,7 @@ export function OpenLongPreview({
             "0"
           )}
           % APR
-        </p>
+        </div>
       </div>
       <div className="flex justify-between">
         <p className="">Matures in</p>