diff --git a/frontend/app/src/screens/BorrowScreen/BorrowScreen.tsx b/frontend/app/src/screens/BorrowScreen/BorrowScreen.tsx index be4c887a..e455e9b8 100644 --- a/frontend/app/src/screens/BorrowScreen/BorrowScreen.tsx +++ b/frontend/app/src/screens/BorrowScreen/BorrowScreen.tsx @@ -11,6 +11,8 @@ import { InterestRateField } from "@/src/comps/InterestRateField/InterestRateFie import { LinkTextButton } from "@/src/comps/LinkTextButton/LinkTextButton"; import { RedemptionInfo } from "@/src/comps/RedemptionInfo/RedemptionInfo"; import { Screen } from "@/src/comps/Screen/Screen"; +import { useStoredState } from "@/src/services/StoredState"; +import { FirstTimeOnboardingModal } from "./FirstTimeOnboardingModal"; import { WarningBox } from "@/src/comps/WarningBox/WarningBox"; import { DEBT_SUGGESTIONS, ETH_MAX_RESERVE, MAX_COLLATERAL_DEPOSITS, MIN_DEBT } from "@/src/constants"; import content from "@/src/content"; @@ -91,6 +93,16 @@ export function BorrowScreen() { const [interestRateDelegate, setInterestRateDelegate] = useState
(null); const [agreeToLiquidationRisk, setAgreeToLiquidationRisk] = useState(false); + // First-time user onboarding modal + const { onboardingDismissed, setState: setStoredState } = useStoredState(); + const [onboardingClosed, setOnboardingClosed] = useState(false); + const showOnboarding = !onboardingDismissed && !onboardingClosed; + + const handleOnboardingClose = () => { + setOnboardingClosed(true); + setStoredState({ onboardingDismissed: true }); + }; + const agreeCheckboxId = useId(); const setInterestRateRounded = useCallback((averageInterestRate: Dnum, setValue: (value: string) => void) => { @@ -224,19 +236,24 @@ export function BorrowScreen() { && !insufficientColl; return ( -+ Before opening your first position, here are some important things to know: +
+ ++ {description} +
+