Disable Earn deposits (#848)

liquity · Feb 19, 2025 · 7bd5791 · 7bd5791
1 parent 36b27f0
commit 7bd5791
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 57 deletions.
diff --git a/frontend/app/src/comps/AppLayout/AppLayout.tsx b/frontend/app/src/comps/AppLayout/AppLayout.tsx
@@ -86,7 +86,7 @@ function EarnRiskBanner() {
           whiteSpace: "nowrap",
         })}
       >
-        There is a potential issue affecting Stability Pools (“Earn”).{" "}
+        There is an issue affecting the Stability Pools (“Earn”).{" "}
         <Link
           href="https://www.liquity.org/blog/stability-pool-issue"
           passHref

diff --git a/frontend/app/src/content.tsx b/frontend/app/src/content.tsx
@@ -339,7 +339,7 @@ export default {
       rewardsLabel: "My rewards",
     },
     tabs: {
-      deposit: "Deposit",
+      deposit: "Withdraw",
       claim: "Claim rewards",
     },
     depositPanel: {

diff --git a/frontend/app/src/screens/EarnPoolScreen/EarnPoolScreen.tsx b/frontend/app/src/screens/EarnPoolScreen/EarnPoolScreen.tsx
@@ -64,54 +64,81 @@ export function EarnPoolScreen() {
         label: content.earnScreen.backButton,
       }}
       heading={
-        <ScreenCard
-          mode={match(loadingState)
-            .returnType<"ready" | "loading">()
-            .with("success", () => "ready")
-            .with("loading", () => "loading")
-            .exhaustive()}
-          finalHeight={140}
+        <div
+          className={css({
+            display: "flex",
+            flexDirection: "column",
+            gap: 24,
+          })}
         >
-          {loadingState === "success"
-            ? (
-              <EarnPositionSummary
-                earnPosition={earnPosition.data ?? null}
-                branchId={branch.id}
-              />
-            )
-            : (
-              <>
-                <div
-                  className={css({
-                    position: "absolute",
-                    top: 16,
-                    left: 16,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    textTransform: "uppercase",
-                    userSelect: "none",
-                    fontSize: 12,
-                  })}
-                >
+          <ScreenCard
+            mode={match(loadingState)
+              .returnType<"ready" | "loading">()
+              .with("success", () => "ready")
+              .with("loading", () => "loading")
+              .exhaustive()}
+            finalHeight={140}
+          >
+            {loadingState === "success"
+              ? (
+                <EarnPositionSummary
+                  earnPosition={earnPosition.data ?? null}
+                  branchId={branch.id}
+                />
+              )
+              : (
+                <>
                   <div
                     className={css({
+                      position: "absolute",
+                      top: 16,
+                      left: 16,
                       display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      textTransform: "uppercase",
+                      userSelect: "none",
+                      fontSize: 12,
                     })}
                   >
-                    <IconEarn size={16} />
+                    <div
+                      className={css({
+                        display: "flex",
+                      })}
+                    >
+                      <IconEarn size={16} />
+                    </div>
+                    <div>
+                      Earn Pool
+                    </div>
                   </div>
-                  <div>
-                    Earn Pool
-                  </div>
-                </div>
-                <HFlex gap={8}>
-                  Fetching {earnPool.data.collateral?.name} Stability Pool…
-                  <Spinner size={18} />
-                </HFlex>
-              </>
-            )}
-        </ScreenCard>
+                  <HFlex gap={8}>
+                    Fetching {earnPool.data.collateral?.name} Stability Pool…
+                    <Spinner size={18} />
+                  </HFlex>
+                </>
+              )}
+          </ScreenCard>
+          {active && (
+            <div
+              className={css({
+                display: "flex",
+                flexDirection: "column",
+                gap: 32,
+                marginBottom: -24,
+                padding: 16,
+                textAlign: "center",
+                textWrap: "balance",
+                color: "content",
+                background: "infoSurface",
+                border: "1px solid token(colors.infoSurfaceBorder)",
+                borderRadius: 8,
+              })}
+            >
+              Please withdraw your Earn position. See the top banner for more information.
+            </div>
+          )}
+        </div>
       }
       className={css({
         position: "relative",
@@ -151,15 +178,16 @@ export function EarnPoolScreen() {
                 />
               )
               : (
-                <h1
+                <p
                   className={css({
-                    fontSize: 24,
+                    fontSize: 18,
+                    textAlign: "center",
                   })}
                 >
-                  New Stability Pool deposit
-                </h1>
+                  Stability Pool (“Earn”) deposits are disabled, see top banner.
+                </p>
               )}
-            {tab.action === "deposit" && (
+            {tab.action === "deposit" && active && (
               <PanelUpdateDeposit
                 branchId={branch.id}
                 deposited={earnPool.data.totalDeposited ?? dn.from(0, 18)}

diff --git a/frontend/app/src/screens/EarnPoolScreen/PanelUpdateDeposit.tsx b/frontend/app/src/screens/EarnPoolScreen/PanelUpdateDeposit.tsx
@@ -14,7 +14,7 @@ import { useAccount, useBalance } from "@/src/services/Ethereum";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { infoTooltipProps } from "@/src/uikit-utils";
 import { css } from "@/styled-system/css";
-import { Button, Checkbox, HFlex, InfoTooltip, InputField, Tabs, TextButton, TokenIcon } from "@liquity2/uikit";
+import { Button, Checkbox, HFlex, InfoTooltip, InputField, TextButton, TokenIcon } from "@liquity2/uikit";
 import * as dn from "dnum";
 import { useState } from "react";
 
@@ -32,7 +32,7 @@ export function PanelUpdateDeposit({
   const account = useAccount();
   const txFlow = useTransactionFlow();
 
-  const [mode, setMode] = useState<ValueUpdateMode>("add");
+  const [mode, _setMode] = useState<ValueUpdateMode>("remove");
   const [value, setValue] = useState("");
   const [focused, setFocused] = useState(false);
   const [claimRewards, setClaimRewards] = useState(true);
@@ -114,11 +114,11 @@ export function PanelUpdateDeposit({
               start: mode === "remove"
                 ? content.earnScreen.withdrawPanel.label
                 : content.earnScreen.depositPanel.label,
-              end: (
+              end: null, /*(
                 <Tabs
                   compact
                   items={[
-                    { label: "Deposit", panelId: "panel-deposit", tabId: "tab-deposit" },
+                    { label: "Deposit", panelId: "panel-deposit", tabId: "tab-deposit", disabled: true },
                     { label: "Withdraw", panelId: "panel-withdraw", tabId: "tab-withdraw" },
                   ]}
                   onSelect={(index, { origin, event }) => {
@@ -131,7 +131,7 @@ export function PanelUpdateDeposit({
                   }}
                   selected={mode === "remove" ? 1 : 0}
                 />
-              ),
+              )*/
             }}
             labelHeight={32}
             onFocus={() => setFocused(true)}

diff --git a/frontend/uikit/src/Tabs/Tabs.tsx b/frontend/uikit/src/Tabs/Tabs.tsx
@@ -9,6 +9,7 @@ import { token } from "../../styled-system/tokens";
 import { useElementSize } from "../react-utils";
 
 export type TabItem = {
+  disabled?: boolean;
   label: ReactNode;
   panelId: string;
   tabId: string;
@@ -50,7 +51,11 @@ export function Tabs({
   useKeyboardNavigation({
     isFocused,
     itemsLength: items.length,
-    onSelect,
+    onSelect: (index, context) => {
+      if (!items[index].disabled) {
+        onSelect(index, context);
+      }
+    },
     selected,
   });
 
@@ -205,7 +210,7 @@ function Tab({
   compact,
   onSelect,
   selected,
-  tabItem: { label, tabId, panelId },
+  tabItem: { disabled, label, tabId, panelId },
 }: {
   compact?: boolean;
   onSelect: (context: Exclude<OnSelectContext, { origin: "keyboard" }>) => void;
@@ -229,10 +234,14 @@ function Tab({
       aria-selected={selected}
       id={tabId}
       onMouseDown={(event) => {
-        onSelect({ origin: "mouse", event });
+        if (!disabled) {
+          onSelect({ origin: "mouse", event });
+        }
       }}
       onTouchStart={(event) => {
-        onSelect({ origin: "touch", event });
+        if (!disabled) {
+          onSelect({ origin: "touch", event });
+        }
       }}
       role="tab"
       tabIndex={selected ? 0 : -1}
@@ -256,6 +265,8 @@ function Tab({
         color: styles.activeTabContent.color,
         padding: compact ? "0 12px" : "0 16px",
         outlineOffset: compact ? 1 : -2,
+        pointerEvents: disabled ? "none" : "auto",
+        opacity: disabled ? 0.5 : 1,
       }}
     >
       <div