notice of closure

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-v2",
-  "version": "2.5.41",
+  "version": "2.5.42",
   "private": true,
   "dependencies": {
     "@ethersproject/providers": "^5.6.8",

src/components/FooterInfo.tsx

@@ -15,6 +15,7 @@ import BoxWrap from './wraps/BoxWrap';
 import NetworkSelector from './selectors/NetworkSelector';
 import PublicNotification from './PublicNotification';
 import TermsModal from './TermsModal';
+import PublicNotificationSunset from './PublicNotificationSunset';
 
 const IconSize = '1.15rem';
 const IconGap = 'small';
@@ -30,7 +31,8 @@ const FooterInfo = () => {
     <>
       <Box gap="small" align="end" width="20%" style={{ position: 'absolute', bottom: '3em', right: '3em' }}>
         <Box alignSelf="end" width="225px">
-          <PublicNotification />{' '}
+          <PublicNotificationSunset />
+          <PublicNotification  />
         </Box>
         <Box alignSelf="end">
           <Text size="xsmall" color="text-weak">

src/components/PublicNotificationSunset.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { Box, Text, Button } from 'grommet';
+import { FiAlertTriangle } from 'react-icons/fi';
+import useChainId from '../hooks/useChainId';
+import TermsModal from './TermsModal';
+import useUpgradeTokens from '../hooks/actionHooks/useUpgradeTokens';
+
+type PublicNotificationProps = {
+  children?: any;
+};
+
+const PublicNotificationSunset = ({ children }: PublicNotificationProps) => {
+  const chainId = useChainId();
+  const { hasUpgradeable, isUpgrading, upgradeAllStrategies } = useUpgradeTokens();
+  const [showTerms, setShowTerms] = useState<boolean>(false);
+
+  const showTermsModal = () => {
+    setShowTerms(!showTerms);
+  };
+
+  const confirmUpgrade = (hasAcceptedTerms: boolean) => {
+    if (!hasAcceptedTerms) {
+      return;
+    }
+    upgradeAllStrategies(hasAcceptedTerms);
+  };
+
+  return (
+    <>
+      <Box direction="row" align="center" justify="between">
+        <Box direction="column" border={{ size: 'small' }} pad="small" gap="small" align="center" round="xsmall">
+          <Box gap="small" align="center">
+            <Box direction="row" gap="xsmall" align="center">
+              {/* <Text size="medium">
+                  <FiAlertTriangle />
+                </Text> */}
+              <Text size="medium" weight={'bold'}>
+                Important Notice:{' '}
+                <Text size="medium" weight={'normal'}>
+                  Yield Protocol Shutting Down
+                </Text>
+              </Text>
+            </Box>
+            <Text size="xsmall" textAlign="center" weight={'normal'}>
+              As of 31st of December 2023, the Yield Protocol will be officially discontinued.
+            </Text>
+            <Text size="xsmall" textAlign="center" weight={'normal'}>
+              Contact us on our {" "}
+              <a
+                  target="_blank"
+                  href="https://discord.gg/JAFfDj5"
+                  style={{ color: 'rgb(255,255,255)', cursor: 'pointer' }}
+                >
+                  discord channel
+                </a> {" "}
+                 with any support issues until 31 January 2024.
+            </Text>
+          </Box>
+        </Box>
+        <TermsModal isOpen={showTerms} onClose={() => showTermsModal()} onConfirm={confirmUpgrade} />
+      </Box>
+    </>
+  );
+};
+
+export default PublicNotificationSunset;