Skip to content

Commit 85da120

Browse files
dankelleherdankelleher
authored
Merge pull request #314 from sunrise-stake/feature/shutdown-notice
Add shutdown notice banner and disable staking/locking
2 parents 3ae5155 + 2e54368 commit 85da120

6 files changed

Lines changed: 58 additions & 84 deletions

File tree

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { type FC } from "react";
2+
import { IoWarningOutline } from "react-icons/io5";
3+
4+
const ShutdownBanner: FC = () => {
5+
return (
6+
<div className="w-full bg-danger text-white py-3 px-4 text-center">
7+
<div className="flex items-center justify-center gap-2">
8+
<IoWarningOutline size={24} className="flex-shrink-0" />
9+
<span className="font-semibold">
10+
Sunrise is shutting down. Please withdraw your SOL now.
11+
</span>
12+
</div>
13+
</div>
14+
);
15+
};
16+
17+
export { ShutdownBanner };

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ export * from "./Panel";
1010
export * from "./Spinner";
1111
export * from "./TooltipPopover";
1212
export * from "./TweetButton";
13+
export * from "./ShutdownBanner";

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { PageHelpModal } from "../components/modals/PageHelpModal";
88

99
import { useZenMode } from "../context/ZenModeContext";
1010
import { ExternalLinks } from "../components/ExternalLinks";
11+
import { ShutdownBanner } from "../components/ShutdownBanner";
1112

1213
const Layout: FC<{ children: ReactNode }> = ({ children }) => {
1314
const [zenMode] = useZenMode();
@@ -84,6 +85,7 @@ const Layout: FC<{ children: ReactNode }> = ({ children }) => {
8485
<ExternalLinks />
8586
</Transition>
8687
<div className="flex flex-col min-h-screen">
88+
<ShutdownBanner />
8789
<Toaster />
8890
<main className="grow flex">{children}</main>
8991
</div>

‎packages/app/src/locking/LockForm.tsx‎

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,22 @@
11
import BN from "bn.js";
22
import React, { useState } from "react";
33
import { FiArrowDownLeft } from "react-icons/fi";
4+
import { Popover } from "@headlessui/react";
45

56
import { useSunriseStake } from "../common/context/sunriseStakeContext";
6-
import { useModal } from "../common/hooks";
77
import { ZERO } from "../common/utils";
8-
import { AmountInput, Button, Panel, Spinner } from "../common/components";
9-
import { LockWarningModal } from "../common/components/modals/LockWarningModal";
8+
import { AmountInput, Panel } from "../common/components";
109

1110
interface LockFormProps {
1211
lock: (amount: string) => Promise<any>;
1312
}
14-
const LockForm: React.FC<LockFormProps> = ({ lock }) => {
13+
const LockForm: React.FC<LockFormProps> = () => {
1514
const { details } = useSunriseStake();
1615
const [amount, setAmount] = useState("");
17-
const [valid, setValid] = useState(false);
18-
const [isBusy, setIsBusy] = useState(false);
19-
const lockModal = useModal(() => {
20-
setIsBusy(true);
21-
lock(amount).finally(() => {
22-
setIsBusy(false);
23-
});
24-
});
16+
const [, setValid] = useState(false);
2517

2618
return (
2719
<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">
28-
<LockWarningModal
29-
ok={lockModal.onModalOK}
30-
cancel={lockModal.onModalClose}
31-
show={lockModal.modalShown}
32-
/>
3320
<AmountInput
3421
className="mr-4 basis-3/4"
3522
token="gSOL"
@@ -40,15 +27,15 @@ const LockForm: React.FC<LockFormProps> = ({ lock }) => {
4027
mode="LOCK"
4128
variant="small"
4229
/>
43-
<Button
44-
onClick={lockModal.trigger}
45-
disabled={!valid || isBusy}
46-
className="mr-auto sm:mr-0 m-auto"
47-
size="sm"
48-
>
49-
{isBusy ? <Spinner size="1rem" className="mr-1" /> : null}
50-
Lock <FiArrowDownLeft className="inline" size={24} />
51-
</Button>
30+
<Popover className="relative mr-auto sm:mr-0 m-auto">
31+
<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">
32+
Lock <FiArrowDownLeft className="inline ml-1" size={24} />
33+
</Popover.Button>
34+
<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">
35+
Locking is disabled. Sunrise is shutting down - please withdraw your
36+
SOL.
37+
</Popover.Panel>
38+
</Popover>
5239
</Panel>
5340
);
5441
};

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

Lines changed: 12 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,23 @@
11
import type BN from "bn.js";
2-
import React, { useState } from "react";
3-
import { FiArrowUpRight } from "react-icons/fi";
4-
5-
import { useModal } from "../../common/hooks";
6-
import { AmountInput, Button, Spinner } from "../../common/components";
7-
import { DepositWarningModal } from "../../common/components/modals";
2+
import React from "react";
3+
import { IoWarningOutline } from "react-icons/io5";
84

95
interface StakeFormProps {
106
deposit: (amount: string) => Promise<any>;
117
solBalance: BN | undefined;
128
}
139

14-
const StakeForm: React.FC<StakeFormProps> = ({ deposit, solBalance }) => {
15-
const [amount, setAmount] = useState("");
16-
const [valid, setValid] = useState(false);
17-
const [isBusy, setIsBusy] = useState(false);
18-
19-
const depositModal = useModal(() => {
20-
setIsBusy(true);
21-
deposit(amount).finally(() => {
22-
setIsBusy(false);
23-
});
24-
});
25-
10+
const StakeForm: React.FC<StakeFormProps> = () => {
2611
return (
27-
<div>
28-
<DepositWarningModal
29-
ok={depositModal.onModalOK}
30-
cancel={depositModal.onModalClose}
31-
show={depositModal.modalShown}
32-
/>
33-
<AmountInput
34-
className="mb-5"
35-
balance={solBalance}
36-
token="SOL"
37-
amount={amount}
38-
setAmount={setAmount}
39-
setValid={setValid}
40-
mode="STAKE"
41-
/>
42-
<div className="flex items-center justify-start sm:justify-end">
43-
<Button onClick={depositModal.trigger} disabled={!valid || isBusy}>
44-
{isBusy ? <Spinner size="1rem" className="mr-1" /> : null}
45-
Deposit <FiArrowUpRight className="inline" size={24} />
46-
</Button>
47-
</div>
12+
<div className="flex flex-col items-center justify-center py-8 text-center">
13+
<IoWarningOutline size={48} className="text-danger mb-4" />
14+
<h2 className="text-xl font-semibold text-white mb-2">
15+
Deposits Disabled
16+
</h2>
17+
<p className="text-gray-300 max-w-md">
18+
Sunrise is shutting down and deposits have been disabled. Please
19+
withdraw your existing SOL using the Unstake option above.
20+
</p>
4821
</div>
4922
);
5023
};

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

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { type FC, useEffect, useState } from "react";
66
import { FaLeaf } from "react-icons/fa";
77
import { TbLeafOff } from "react-icons/tb";
88
import { GiCircleForest } from "react-icons/gi";
9+
import { Popover } from "@headlessui/react";
910

1011
import {
1112
solToLamports,
@@ -49,7 +50,7 @@ const StakeDashboard: FC = () => {
4950
const [delayedUnstakeTickets, setDelayedUnstakeTickets] = useState<
5051
TicketAccount[]
5152
>([]);
52-
const [mode, setMode] = useState<UIMode>("STAKE");
53+
const [mode, setMode] = useState<UIMode>("UNSTAKE");
5354
const { totalCarbon } = useCarbon();
5455
const navigate = useNavigate();
5556

@@ -147,24 +148,17 @@ const StakeDashboard: FC = () => {
147148
</LinkWithQuery>
148149
</div>
149150
<div className="flex">
150-
<Panel className="flex flex-row mx-auto mb-9 p-3 sm:p-4 rounded-lg">
151-
<Button
152-
color={mode === "STAKE" ? "primary" : "secondary"}
153-
size={"sm"}
154-
className="mr-3 sm:mr-5"
155-
onClick={() => {
156-
setMode("STAKE");
157-
}}
158-
>
159-
Stake
160-
<FaLeaf
161-
className={clx(
162-
"animate-fade-in inline ml-2 transition-opacity duration-500",
163-
{ hidden: mode !== "STAKE" }
164-
)}
165-
size={24}
166-
/>
167-
</Button>
151+
<Panel className="flex flex-row mx-auto mb-9 p-3 sm:p-4 rounded-lg items-center">
152+
<Popover className="relative mr-3 sm:mr-5">
153+
<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">
154+
Stake
155+
<FaLeaf className="inline ml-2" size={24} />
156+
</Popover.Button>
157+
<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">
158+
Staking is disabled. Sunrise is shutting down - please withdraw
159+
your SOL.
160+
</Popover.Panel>
161+
</Popover>
168162
<Button
169163
color={mode === "UNSTAKE" ? "danger" : "secondary"}
170164
size={"sm"}

0 commit comments

Comments
 (0)