Move disclaimers into buttons (#1493)

delvtech · Sep 12, 2024 · 5e8b2b5 · 5e8b2b5
1 parent 80ccd71
commit 5e8b2b5
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 76 deletions.
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/InvalidTransactionButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/InvalidTransactionButton.tsx
@@ -0,0 +1,19 @@
+import classNames from "classnames";
+import { PropsWithChildren, ReactElement } from "react";
+
+export function InvalidTransactionButton({
+  children,
+  wide,
+}: PropsWithChildren<{ wide?: boolean }>): ReactElement {
+  return (
+    <button
+      disabled
+      className={classNames(
+        "daisy-btn daisy-btn-error rounded-full disabled:bg-error disabled:text-base-100 disabled:opacity-70",
+        { "w-full": wide },
+      )}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
@@ -18,6 +18,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 { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton";
 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";
@@ -300,29 +301,15 @@ export function OpenLongForm({
           />
         ) : null
       }
-      disclaimer={(() => {
-        if (!!depositAmountAsBigInt && !hasEnoughLiquidity) {
-          return (
-            <p className="text-center text-sm text-error">
-              Pool limit exceeded. Max long size is{" "}
-              {formatBalance({
-                balance: maxBondsOut || 0n,
-                decimals: baseToken.decimals,
-                places: baseToken.places,
-              })}{" "}
-              hy{baseToken.symbol}
-            </p>
-          );
-        }
-        if (!!depositAmountAsBigInt && !hasEnoughBalance) {
+      actionButton={(() => {
+        if (marketState?.isPaused) {
           return (
-            <p className="text-center text-sm text-error">
-              Insufficient balance
-            </p>
+            <InvalidTransactionButton wide>
+              This market is paused
+            </InvalidTransactionButton>
           );
         }
-      })()}
-      actionButton={(() => {
+
         if (!account) {
           return <ConnectWalletButton wide />;
         }
@@ -336,14 +323,24 @@ export function OpenLongForm({
           );
         }
 
-        if (!hasEnoughBalance || !hasEnoughLiquidity || marketState?.isPaused) {
+        if (!!depositAmountAsBigInt && !hasEnoughLiquidity) {
+          return (
+            <InvalidTransactionButton wide>
+              Pool limit exceeded. Max long is{" "}
+              {formatBalance({
+                balance: maxBondsOut || 0n,
+                decimals: baseToken.decimals,
+                places: baseToken.places,
+              })}{" "}
+              hy{baseToken.symbol}
+            </InvalidTransactionButton>
+          );
+        }
+        if (!!depositAmountAsBigInt && !hasEnoughBalance) {
           return (
-            <button
-              disabled
-              className="daisy-btn daisy-btn-circle daisy-btn-primary w-full disabled:bg-primary disabled:text-base-100 disabled:opacity-30"
-            >
-              Open Long
-            </button>
+            <InvalidTransactionButton wide>
+              Insufficient balance
+            </InvalidTransactionButton>
           );
         }
 

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx
@@ -20,6 +20,7 @@ import { PrimaryStat } from "src/ui/base/components/PrimaryStat";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton";
+import { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton";
 import { TransactionView } from "src/ui/hyperdrive/TransactionView";
 import { useIsNewPool } from "src/ui/hyperdrive/hooks/useIsNewPool";
 import { useLpApy } from "src/ui/hyperdrive/hooks/useLpApy";
@@ -304,13 +305,6 @@ export function AddLiquidityForm2({
         </div>
       }
       disclaimer={(() => {
-        if (!!depositAmountAsBigInt && !hasEnoughBalance) {
-          return (
-            <p className="text-center text-sm text-error">
-              Insufficient balance
-            </p>
-          );
-        }
         if (
           previewAddLiquidityError?.message.includes(
             "Not enough lp shares minted.",
@@ -323,26 +317,20 @@ export function AddLiquidityForm2({
             </p>
           );
         }
-        if (
-          previewAddLiquidityError?.message.includes("MinimumTransactionAmount")
-        ) {
+      })()}
+      actionButton={(() => {
+        if (marketState?.isPaused) {
           return (
-            <p className="text-center text-sm text-error">
-              Trade does not meet the minimum transaction amount:{" "}
-              {formatBalance({
-                balance: hyperdrive.poolConfig.minimumTransactionAmount,
-                decimals: hyperdrive.decimals,
-                places: activeToken.places,
-              })}{" "}
-              {activeToken.symbol}.
-            </p>
+            <InvalidTransactionButton wide>
+              This market is paused
+            </InvalidTransactionButton>
           );
         }
-      })()}
-      actionButton={(() => {
+
         if (!account) {
           return <ConnectWalletButton wide />;
         }
+
         if (connectedChainId !== hyperdrive.chainId) {
           return (
             <SwitchNetworksButton
@@ -351,6 +339,28 @@ export function AddLiquidityForm2({
             />
           );
         }
+        if (!!depositAmountAsBigInt && !hasEnoughBalance) {
+          return (
+            <InvalidTransactionButton wide>
+              Insufficient balance
+            </InvalidTransactionButton>
+          );
+        }
+        if (
+          previewAddLiquidityError?.message.includes("MinimumTransactionAmount")
+        ) {
+          return (
+            <InvalidTransactionButton wide>
+              Deposit must be greater than{" "}
+              {formatBalance({
+                balance: hyperdrive.poolConfig.minimumTransactionAmount,
+                decimals: hyperdrive.decimals,
+                places: activeToken.places * 2,
+              })}{" "}
+              {activeToken.symbol}
+            </InvalidTransactionButton>
+          );
+        }
 
         if (!hasEnoughBalance || marketState?.isPaused) {
           return (

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
@@ -21,6 +21,7 @@ import { PrimaryStat } from "src/ui/base/components/PrimaryStat";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton";
+import { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton";
 import { TransactionView } from "src/ui/hyperdrive/TransactionView";
 import { useIsNewPool } from "src/ui/hyperdrive/hooks/useIsNewPool";
 import { useMarketState } from "src/ui/hyperdrive/hooks/useMarketState";
@@ -454,39 +455,19 @@ export function OpenShortForm({
           openShortPreviewStatus={openShortPreviewStatus}
         />
       }
-      disclaimer={(() => {
-        // If the user has not input a short amount, don't show the disclaimer
-        if (!amountOfBondsToShortAsBigInt) {
-          return null;
-        }
-        // If the user has input an amount, but that amount makes the hasEnoughLiquidity become falsy, show the pool limit exceeded note
-        else if (!!amountOfBondsToShortAsBigInt && !hasEnoughLiquidity) {
-          return (
-            <p className="text-center text-sm text-error">
-              Pool limit exceeded. Max short size is{" "}
-              {formatBalance({
-                balance: maxBondsOut || 0n,
-                decimals: hyperdrive.decimals,
-                includeCommas: true,
-                places: activeToken.places,
-              })}{" "}
-              hy{baseToken.symbol}
-            </p>
-          );
-        }
-        // In all other cases where the user has input an amount, show the disclaimer, but ensure a skeleton is shown only on the stats that are being refetched on new blocks
-        if (!hasEnoughBalance && openShortPreviewStatus !== "loading") {
+      actionButton={(() => {
+        if (marketState?.isPaused) {
           return (
-            <p className="flex flex-col text-center text-sm text-error">
-              Insufficient balance
-            </p>
+            <InvalidTransactionButton wide>
+              This market is paused
+            </InvalidTransactionButton>
           );
         }
-      })()}
-      actionButton={(() => {
+
         if (!account) {
           return <ConnectWalletButton wide />;
         }
+
         if (connectedChainId !== hyperdrive.chainId) {
           return (
             <SwitchNetworksButton
@@ -496,6 +477,26 @@ export function OpenShortForm({
           );
         }
 
+        if (!!amountOfBondsToShortAsBigInt && !hasEnoughLiquidity) {
+          return (
+            <InvalidTransactionButton wide>
+              Pool limit exceeded. Max short size is{" "}
+              {formatBalance({
+                balance: maxBondsOut || 0n,
+                decimals: hyperdrive.decimals,
+                includeCommas: true,
+                places: activeToken.places,
+              })}{" "}
+              hy{baseToken.symbol}
+            </InvalidTransactionButton>
+          );
+        }
+        if (!hasEnoughBalance && openShortPreviewStatus !== "loading") {
+          <InvalidTransactionButton wide>
+            Insufficient balance
+          </InvalidTransactionButton>;
+        }
+
         if (!hasEnoughAllowance) {
           return (
             <ApproveTokenChoices
@@ -514,7 +515,7 @@ export function OpenShortForm({
         }
         return (
           <button
-            disabled={!openShort || !hasEnoughBalance || marketState?.isPaused}
+            disabled={!openShort}
             className="daisy-btn daisy-btn-circle daisy-btn-primary w-full disabled:bg-primary disabled:text-base-100 disabled:opacity-30"
             onClick={(e) => {
               openShort?.();