diff --git a/packages/frontend/components/App/Header/Banners.tsx b/packages/frontend/components/App/Header/Banners.tsx
index a7c57ac41..c8c74a14c 100644
--- a/packages/frontend/components/App/Header/Banners.tsx
+++ b/packages/frontend/components/App/Header/Banners.tsx
@@ -1,12 +1,10 @@
import CloseIcon from '@mui/icons-material/Close';
import { Collapse, Link, Stack, Typography } from '@mui/material';
import { alpha, useTheme } from '@mui/material/styles';
-import React, { ReactNode, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import React, { ReactNode, useState } from 'react';
-import { HELPER_URL } from '../../../constants';
-import { dismissBanner, getBannerVisibility } from '../../../helpers/banners';
-import { fetchGuardedLaunchAddresses } from '../../../helpers/guardedLaunch';
-import { useAuth } from '../../../store/auth.store';
+import { PATH, SHUTDOWN_BLOG_POST_URL } from '../../../constants';
type BannerLinkProps = {
label: string;
@@ -21,69 +19,32 @@ export type BannerConfig = {
isContrast?: boolean;
};
-const BANNERS: BannerConfig[] = [
- {
- key: 'betaTest',
- message:
- 'We are in beta, some bugs may arise. We appreciate your feedback as we work diligently to improve the user experience.',
- },
-];
-
-const GUARDED_LAUNCH_BANNERS: BannerConfig[] = [
- {
- key: 'guardedLaunch',
- customMessage: (
-
- {`We have released Fuji's official V2 🎉. We are incredibly grateful for
- your participation in the guarded launch. For your support, you can
- claim your NFT on `}
-
- {`. If you had a position in the guarded launch, you can migrate it from `}
-
- {` to the official version.`}
-
- ),
- isContrast: true,
- },
-];
-
function Banners() {
- const [banners, setBanners] = useState([]);
- const walletAddress = useAuth((state) => state.address);
-
- useEffect(() => {
- let filteredBanners = BANNERS.filter((banner) =>
- getBannerVisibility(banner.key)
- );
-
- const guardedLaunchBanners = GUARDED_LAUNCH_BANNERS.filter((banner) =>
- getBannerVisibility(banner.key)
- );
-
- fetchGuardedLaunchAddresses().then((addresses) => {
- if (
- addresses.includes(walletAddress?.toLowerCase() || '') &&
- window !== undefined &&
- window.location.href !== HELPER_URL.GUARDED_LAUNCH
- ) {
- filteredBanners = filteredBanners.concat(guardedLaunchBanners);
- }
-
- setBanners(filteredBanners);
- });
- }, [walletAddress]);
+ const router = useRouter();
+
+ const BANNERS: BannerConfig[] = [
+ {
+ key: 'shutdownBanner',
+ customMessage: (
+
+ {`🚨Attention🚨 We are closing down the company and halting all work to the protocol. Please close your`}
+ router.push(PATH.MY_POSITIONS)}
+ style={{
+ cursor: 'pointer',
+ textDecoration: 'underline',
+ marginLeft: '0.2rem',
+ }}
+ >
+ positions
+
+ {` and withdraw your funds prior to Dec 31th. For more information, read `}
+
+
+ ),
+ isContrast: true,
+ },
+ ];
return (
- {banners.map((banner) => (
-
+ {BANNERS.map((banner) => (
+
))}
);
@@ -103,14 +64,14 @@ function Banner({
onDismiss,
}: {
banner: BannerConfig;
- onDismiss: (key: string) => void;
+ onDismiss?: (key: string) => void;
}) {
const { palette } = useTheme();
const [isVisible, setIsVisible] = useState(true);
const onDismissClick = () => {
setIsVisible(false);
- onDismiss(banner.key);
+ onDismiss && onDismiss(banner.key);
};
return (
@@ -135,17 +96,19 @@ function Banner({
)}
{banner.customMessage}
-
+ {onDismiss && (
+
+ )}
);
diff --git a/packages/frontend/components/App/Onboarding/ExploreCarousel.tsx b/packages/frontend/components/App/Onboarding/ExploreCarousel.tsx
deleted file mode 100644
index c2bf2cf29..000000000
--- a/packages/frontend/components/App/Onboarding/ExploreCarousel.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import {
- Box,
- Button,
- Dialog,
- Grid,
- Paper,
- Stack,
- Typography,
-} from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useEffect, useState } from 'react';
-
-import { getOnboardStatus, setExploreInfoShown } from '../../../helpers/auth';
-
-function ExploreCarousel() {
- const { palette } = useTheme();
- const [currentSlide, setCurrentSlide] = useState(1);
- const [hasPreviouslyExploreInfoShown, setHasPreviouslyExploreInfoShown] =
- useState(true);
-
- useEffect(() => {
- const wasExploreInfoShown = getOnboardStatus().wasExploreInfoShown || false;
-
- setHasPreviouslyExploreInfoShown(wasExploreInfoShown);
- }, []);
-
- const slides = [
- {
- id: 1,
- image: '/assets/images/onboarding/onboarding_1.svg',
- title: 'Welcome To Fuji Finance',
- text: 'Optimize your DeFi lending and borrowing positions.',
- },
- {
- id: 2,
- image: '/assets/images/onboarding/onboarding_2.svg',
- title: 'Money Market Aggregator',
- text: 'Aggregating the best money markets for you and helping to save up to 40% per year on your borrow rates.',
- },
- {
- id: 3,
- image: '/assets/images/onboarding/onboarding_3.svg',
- title: 'Cross-Chain Lending And Borrowing',
- text: 'Select your collateral and borrow assets; Fuji scans the money markets and routes you to the best rates available.',
- },
- ];
-
- const handleNextSlide = () => {
- setCurrentSlide(currentSlide + 1);
- };
-
- const next = () => {
- if (currentSlide === 3) {
- setExploreInfoShown(true);
- setHasPreviouslyExploreInfoShown(true);
- }
-
- handleNextSlide();
- };
-
- const skip = () => {
- setExploreInfoShown(true);
- setHasPreviouslyExploreInfoShown(true);
- };
-
- return (
-
- );
-}
-
-export default ExploreCarousel;
diff --git a/packages/frontend/components/App/ShutdownNotice.tsx b/packages/frontend/components/App/ShutdownNotice.tsx
new file mode 100644
index 000000000..cb9605513
--- /dev/null
+++ b/packages/frontend/components/App/ShutdownNotice.tsx
@@ -0,0 +1,105 @@
+import { Button, Dialog, Link, Paper, Typography } from '@mui/material';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+
+import { PATH, SHUTDOWN_BLOG_POST_URL } from '../../constants';
+import { usePositions } from '../../store/positions.store';
+import ModalHeader from '../Shared/ModalHeader';
+
+function ShutdownNotice() {
+ const [isShown, setIsShown] = useState(true);
+ const [hasPositions, setHasPositions] = useState(false);
+
+ const borrowPositions = usePositions((state) => state.borrowPositions);
+ const lendingPositions = usePositions((state) => state.lendingPositions);
+
+ useEffect(() => {
+ if (borrowPositions.length || lendingPositions.length) {
+ setHasPositions(true);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const router = useRouter();
+
+ const isOnMyPositionPage = router.pathname === PATH.MY_POSITIONS;
+
+ const navigateToPositions = () => {
+ !isOnMyPositionPage && router.push(PATH.MY_POSITIONS);
+ setIsShown(false);
+ };
+
+ const onClose = () => setIsShown(false);
+
+ return (
+
+ );
+}
+
+export default ShutdownNotice;
diff --git a/packages/frontend/components/Shared/ModalHeaderTitle.tsx b/packages/frontend/components/Shared/ModalHeaderTitle.tsx
index 9ac888e07..b7e41ef04 100644
--- a/packages/frontend/components/Shared/ModalHeaderTitle.tsx
+++ b/packages/frontend/components/Shared/ModalHeaderTitle.tsx
@@ -4,7 +4,7 @@ import React from 'react';
function ModalHeaderTitle({ title }: { title: string }) {
return (
-
+
{title}
diff --git a/packages/frontend/constants/common.ts b/packages/frontend/constants/common.ts
index b87f04650..b8b9a9238 100644
--- a/packages/frontend/constants/common.ts
+++ b/packages/frontend/constants/common.ts
@@ -43,3 +43,6 @@ export type HelperLink = {
export const SENTRY_DSN =
'https://f64501e2fca94d6c9434a00ed0aece54@o1151449.ingest.sentry.io/4504884437057536';
+
+export const SHUTDOWN_BLOG_POST_URL =
+ 'https://medium.com/fuji-finance/7a8437b8b172';
diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
index 18c8a2a2a..40f7f1d3d 100644
--- a/packages/frontend/pages/_app.tsx
+++ b/packages/frontend/pages/_app.tsx
@@ -11,7 +11,7 @@ import { useEffect, useRef } from 'react';
import Header from '../components/App/Header/Header';
import Notification from '../components/App/Notification';
import DisclaimerModal from '../components/App/Onboarding/DisclaimerModal';
-import ExploreCarousel from '../components/App/Onboarding/ExploreCarousel';
+import ShutdownNotice from '../components/App/ShutdownNotice';
import TransactionModal from '../components/App/TransactionModal';
import { PATH } from '../constants';
import {
@@ -160,7 +160,7 @@ function MyApp({ Component, pageProps }: AppProps) {
/>
)}
-
+