Add shutdown notice banner and disable staking/locking

packages/app/src/common/components/ShutdownBanner.tsx

@@ -0,0 +1,17 @@
+import { type FC } from "react";
+import { IoWarningOutline } from "react-icons/io5";
+
+const ShutdownBanner: FC = () => {
+  return (
+    <div className="w-full bg-danger text-white py-3 px-4 text-center">
+      <div className="flex items-center justify-center gap-2">
+        <IoWarningOutline size={24} className="flex-shrink-0" />
+        <span className="font-semibold">
+          Sunrise is shutting down. Please withdraw your SOL now.
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export { ShutdownBanner };

packages/app/src/common/components/index.ts

@@ -10,3 +10,4 @@ export * from "./Panel";
 export * from "./Spinner";
 export * from "./TooltipPopover";
 export * from "./TweetButton";
+export * from "./ShutdownBanner";

packages/app/src/common/partials/Layout.tsx

@@ -8,6 +8,7 @@ import { PageHelpModal } from "../components/modals/PageHelpModal";
 
 import { useZenMode } from "../context/ZenModeContext";
 import { ExternalLinks } from "../components/ExternalLinks";
+import { ShutdownBanner } from "../components/ShutdownBanner";
 
 const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   const [zenMode] = useZenMode();
@@ -84,6 +85,7 @@ const Layout: FC<{ children: ReactNode }> = ({ children }) => {
         <ExternalLinks />
       </Transition>
       <div className="flex flex-col min-h-screen">
+        <ShutdownBanner />
         <Toaster />
         <main className="grow flex">{children}</main>
       </div>

packages/app/src/locking/LockForm.tsx

@@ -1,35 +1,22 @@
 import BN from "bn.js";
 import React, { useState } from "react";
 import { FiArrowDownLeft } from "react-icons/fi";
+import { Popover } from "@headlessui/react";
 
 import { useSunriseStake } from "../common/context/sunriseStakeContext";
-import { useModal } from "../common/hooks";
 import { ZERO } from "../common/utils";
-import { AmountInput, Button, Panel, Spinner } from "../common/components";
-import { LockWarningModal } from "../common/components/modals/LockWarningModal";
+import { AmountInput, Panel } from "../common/components";
 
 interface LockFormProps {
   lock: (amount: string) => Promise<any>;
 }
-const LockForm: React.FC<LockFormProps> = ({ lock }) => {
+const LockForm: React.FC<LockFormProps> = () => {
   const { details } = useSunriseStake();
   const [amount, setAmount] = useState("");
-  const [valid, setValid] = useState(false);
-  const [isBusy, setIsBusy] = useState(false);
-  const lockModal = useModal(() => {
-    setIsBusy(true);
-    lock(amount).finally(() => {
-      setIsBusy(false);
-    });
-  });
+  const [, setValid] = useState(false);
 
   return (
     <Panel className="flex flex-row mx-auto mb-9 p-3 sm:p-4 rounded-lg w-full sm:w-[80%] md:w-[60%] lg:w-[40%] max-w-xl">
-      <LockWarningModal
-        ok={lockModal.onModalOK}
-        cancel={lockModal.onModalClose}
-        show={lockModal.modalShown}
-      />
       <AmountInput
         className="mr-4 basis-3/4"
         token="gSOL"
@@ -40,15 +27,15 @@ const LockForm: React.FC<LockFormProps> = ({ lock }) => {
         mode="LOCK"
         variant="small"
       />
-      <Button
-        onClick={lockModal.trigger}
-        disabled={!valid || isBusy}
-        className="mr-auto sm:mr-0 m-auto"
-        size="sm"
-      >
-        {isBusy ? <Spinner size="1rem" className="mr-1" /> : null}
-        Lock <FiArrowDownLeft className="inline" size={24} />
-      </Button>
+      <Popover className="relative mr-auto sm:mr-0 m-auto">
+        <Popover.Button className="inline-flex items-center border-2 rounded-lg leading-6 shadow-sm border-green bg-green text-white px-4 py-2 text-base opacity-50">
+          Lock <FiArrowDownLeft className="inline ml-1" size={24} />
+        </Popover.Button>
+        <Popover.Panel className="absolute z-[100] bottom-full right-0 mb-2 bg-danger text-white text-sm rounded-lg p-4 w-64 shadow-xl">
+          Locking is disabled. Sunrise is shutting down - please withdraw your
+          SOL.
+        </Popover.Panel>
+      </Popover>
     </Panel>
   );
 };

packages/app/src/staking/components/StakeForm.tsx

@@ -1,50 +1,23 @@
 import type BN from "bn.js";
-import React, { useState } from "react";
-import { FiArrowUpRight } from "react-icons/fi";
-
-import { useModal } from "../../common/hooks";
-import { AmountInput, Button, Spinner } from "../../common/components";
-import { DepositWarningModal } from "../../common/components/modals";
+import React from "react";
+import { IoWarningOutline } from "react-icons/io5";
 
 interface StakeFormProps {
   deposit: (amount: string) => Promise<any>;
   solBalance: BN | undefined;
 }
 
-const StakeForm: React.FC<StakeFormProps> = ({ deposit, solBalance }) => {
-  const [amount, setAmount] = useState("");
-  const [valid, setValid] = useState(false);
-  const [isBusy, setIsBusy] = useState(false);
-
-  const depositModal = useModal(() => {
-    setIsBusy(true);
-    deposit(amount).finally(() => {
-      setIsBusy(false);
-    });
-  });
-
+const StakeForm: React.FC<StakeFormProps> = () => {
   return (
-    <div>
-      <DepositWarningModal
-        ok={depositModal.onModalOK}
-        cancel={depositModal.onModalClose}
-        show={depositModal.modalShown}
-      />
-      <AmountInput
-        className="mb-5"
-        balance={solBalance}
-        token="SOL"
-        amount={amount}
-        setAmount={setAmount}
-        setValid={setValid}
-        mode="STAKE"
-      />
-      <div className="flex items-center justify-start sm:justify-end">
-        <Button onClick={depositModal.trigger} disabled={!valid || isBusy}>
-          {isBusy ? <Spinner size="1rem" className="mr-1" /> : null}
-          Deposit <FiArrowUpRight className="inline" size={24} />
-        </Button>
-      </div>
+    <div className="flex flex-col items-center justify-center py-8 text-center">
+      <IoWarningOutline size={48} className="text-danger mb-4" />
+      <h2 className="text-xl font-semibold text-white mb-2">
+        Deposits Disabled
+      </h2>
+      <p className="text-gray-300 max-w-md">
+        Sunrise is shutting down and deposits have been disabled. Please
+        withdraw your existing SOL using the Unstake option above.
+      </p>
     </div>
   );
 };

packages/app/src/staking/pages/StakeDashboard.tsx

@@ -6,6 +6,7 @@ import { type FC, useEffect, useState } from "react";
 import { FaLeaf } from "react-icons/fa";
 import { TbLeafOff } from "react-icons/tb";
 import { GiCircleForest } from "react-icons/gi";
+import { Popover } from "@headlessui/react";
 
 import {
   solToLamports,
@@ -49,7 +50,7 @@ const StakeDashboard: FC = () => {
   const [delayedUnstakeTickets, setDelayedUnstakeTickets] = useState<
     TicketAccount[]
   >([]);
-  const [mode, setMode] = useState<UIMode>("STAKE");
+  const [mode, setMode] = useState<UIMode>("UNSTAKE");
   const { totalCarbon } = useCarbon();
   const navigate = useNavigate();
 
@@ -147,24 +148,17 @@ const StakeDashboard: FC = () => {
         </LinkWithQuery>
       </div>
       <div className="flex">
-        <Panel className="flex flex-row mx-auto mb-9 p-3 sm:p-4 rounded-lg">
-          <Button
-            color={mode === "STAKE" ? "primary" : "secondary"}
-            size={"sm"}
-            className="mr-3 sm:mr-5"
-            onClick={() => {
-              setMode("STAKE");
-            }}
-          >
-            Stake
-            <FaLeaf
-              className={clx(
-                "animate-fade-in inline ml-2 transition-opacity duration-500",
-                { hidden: mode !== "STAKE" }
-              )}
-              size={24}
-            />
-          </Button>
+        <Panel className="flex flex-row mx-auto mb-9 p-3 sm:p-4 rounded-lg items-center">
+          <Popover className="relative mr-3 sm:mr-5">
+            <Popover.Button className="inline-flex items-center border-2 rounded-lg leading-6 shadow-sm border-outset bg-outset text-white px-5 py-3 text-xl opacity-50">
+              Stake
+              <FaLeaf className="inline ml-2" size={24} />
+            </Popover.Button>
+            <Popover.Panel className="absolute z-[100] bottom-full left-0 mb-2 bg-danger text-white text-sm rounded-lg p-4 w-64 shadow-xl">
+              Staking is disabled. Sunrise is shutting down - please withdraw
+              your SOL.
+            </Popover.Panel>
+          </Popover>
           <Button
             color={mode === "UNSTAKE" ? "danger" : "secondary"}
             size={"sm"}