LoanScreen: move the card states bar behind a demo flag

liquity · Sep 24, 2024 · 9e5de66 · 9e5de66
1 parent d1b7e71
commit 9e5de66
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/frontend/app/src/demo-mode/demo-data.ts b/frontend/app/src/demo-mode/demo-data.ts
@@ -5,6 +5,8 @@ import type { Dnum } from "dnum";
 import { INTEREST_RATE_INCREMENT, INTEREST_RATE_MAX, INTEREST_RATE_MIN } from "@/src/constants";
 import * as dn from "dnum";
 
+export const LOAN_SCREEN_MANUAL_LOADING_STATE = false;
+
 export const PRICE_UPDATE_INTERVAL = 15_000;
 export const PRICE_UPDATE_VARIATION = 0.003;
 export const PRICE_UPDATE_MANUAL = false;

diff --git a/frontend/app/src/screens/LoanScreen/LoanScreen.tsx b/frontend/app/src/screens/LoanScreen/LoanScreen.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Screen } from "@/src/comps/Screen/Screen";
+import { LOAN_SCREEN_MANUAL_LOADING_STATE } from "@/src/demo-mode/demo-data";
 import { getPrefixedTroveId, parsePrefixedTroveId } from "@/src/liquity-utils";
 import { useLoanById } from "@/src/subgraph-hooks";
 import { isPrefixedtroveId } from "@/src/types";
@@ -58,6 +59,7 @@ export function LoanScreen() {
   const [leverageMode, setLeverageMode] = useState(false);
 
   const [forcedLoadingState, setForcedLoadingState] = useState<LoanLoadingState | null>(null);
+
   const loadingState = forcedLoadingState ?? match(loan)
     .returnType<LoanLoadingState>()
     .with({ status: "error" }, () => "error")
@@ -66,11 +68,6 @@ export function LoanScreen() {
     .with({ data: P.nonNullable }, () => "success")
     .otherwise(() => "error");
 
-  const setLoadingstate = (state: LoanLoadingState) => {
-    setForcedLoadingState(state);
-  };
-  // const [loadingState, setLoadingstate] = useState<LoanLoadingState>("loading");
-
   const tabsTransition = useTransition(loadingState, {
     from: { opacity: 0 },
     enter: { opacity: 1 },
@@ -84,44 +81,45 @@ export function LoanScreen() {
 
   return (
     <Screen>
-      <div
-        className={css({
-          position: "fixed",
-          zIndex: 2,
-          // bottom: 39,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          height: 48,
-          padding: "12px 32px",
-          fontSize: 14,
-          color: "contentAlt",
-          background: "background",
-          border: "1px solid token(colors.border)",
-        })}
-      >
-        loan state: {LOAN_STATES.map((s) => (
-          <Button
-            key={s}
-            label={s}
-            size="mini"
-            onClick={() => {
-              setLoadingstate(s);
-            }}
-          />
-        ))}
-      </div>
+      {LOAN_SCREEN_MANUAL_LOADING_STATE && (
+        <div
+          className={css({
+            position: "fixed",
+            zIndex: 2,
+            // bottom: 39,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            height: 48,
+            padding: "12px 32px",
+            fontSize: 14,
+            color: "contentAlt",
+            background: "background",
+            border: "1px solid token(colors.border)",
+          })}
+        >
+          loan state: {LOAN_STATES.map((s) => (
+            <Button
+              key={s}
+              label={s}
+              size="mini"
+              onClick={() => {
+                setForcedLoadingState(s);
+              }}
+            />
+          ))}
+        </div>
+      )}
       <VFlex gap={0}>
         <LoanCard
           leverageMode={leverageMode}
           loadingState={loadingState}
           loan={loan.data ?? null}
           onLeverageModeChange={setLeverageMode}
           onRetry={() => {
-            setLoadingstate("loading");
             loan.refetch();
           }}
           troveId={troveId}