Bump bugfix: update notice for v2 (#432)

Co-authored-by: Tejasv Sharma <tejasvonly@gmail.com>

cysync/src/components/customPlayer.tsx

@@ -0,0 +1,44 @@
+import { CircularProgress } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useState } from 'react';
+import ReactPlayer from 'react-player';
+
+export interface CustomPlayerProps {
+  url: string;
+}
+
+export const CustomPlayer = ({ url }: CustomPlayerProps) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const loadingComponent = () => {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingTop: '4rem'
+        }}
+      >
+        <CircularProgress color="secondary" />
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      {isLoading && loadingComponent()}
+      <ReactPlayer
+        style={{ opacity: isLoading ? '0' : '1' }}
+        width="100%"
+        url={url}
+        onReady={() => setIsLoading(false)}
+      />
+    </div>
+  );
+};
+
+CustomPlayer.propTypes = {
+  url: PropTypes.string.isRequired
+};

cysync/src/constants/markdown/update-notice.md

@@ -0,0 +1,11 @@
+We have done a major overhaul to the cySync app.
+The new cySync comes with all your favorite features and much more.
+Download from: <https://cypherock.com/get-started>
+
+## Important
+
+- You won’t lose your funds
+- After update, you will have to import your accounts again
+- cySync v1 will not get new updates, just security updates will be given
+
+<i>Note - NEAR Protocol integration is currently under development and will arrive in a future update.</i>

cysync/src/pages/mainApp/sidebar/portfolio/dialogs/DeprecationNotice.tsx

@@ -1,7 +1,6 @@
 import content from '!!html-loader!markdown-loader!../../../../../constants/markdown/near-deprecation.md';
 import { Alert, Button, Typography } from '@mui/material';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 
 import CustomButton from '../../../../../designSystem/designComponents/buttons/button';
@@ -113,8 +112,3 @@ export const DeprecationNotice: React.FC = () => {
     </>
   );
 };
-
-DeprecationNotice.propTypes = {
-  open: PropTypes.bool.isRequired,
-  handleClose: PropTypes.func.isRequired
-};

cysync/src/pages/mainApp/sidebar/portfolio/dialogs/UpdateNotice.tsx

@@ -0,0 +1,76 @@
+import content from '!!html-loader!markdown-loader!../../../../../constants/markdown/update-notice.md';
+import BrowserUpdatedIcon from '@mui/icons-material/BrowserUpdated';
+import { Alert, Button, Typography } from '@mui/material';
+import React, { useState } from 'react';
+
+import { CustomPlayer } from '../../../../../components/customPlayer';
+import DialogBox from '../../../../../designSystem/designComponents/dialog/dialogBox';
+import Markdown from '../../../../../designSystem/designComponents/textComponents/Markdown';
+
+const alertText = 'cySync v2 is available!';
+
+export const UpdateNotice: React.FC = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(true);
+  return (
+    <>
+      <DialogBox
+        open={isDialogOpen}
+        handleClose={() => {
+          setIsDialogOpen(false);
+        }}
+        fullWidth
+        isClosePresent
+        maxWidth="md"
+        dialogHeading={alertText}
+        restComponents={
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              padding: '5rem'
+            }}
+          >
+            <CustomPlayer
+              url={
+                'https://www.youtube.com/embed/X7Kv4cGptcA?autoplay=1&loop=1'
+              }
+            />
+            <Markdown style={{ paddingBottom: '1rem', paddingTop: '1rem' }}>
+              {content}
+            </Markdown>
+          </div>
+        }
+      />
+      {
+        <Alert
+          action={
+            <Button
+              style={{ padding: '0px', marginRight: '16px' }}
+              onClick={() => {
+                setIsDialogOpen(true);
+              }}
+            >
+              <Typography
+                sx={{
+                  '&:hover': {
+                    textDecoration: 'underline'
+                  },
+                  textTransform: 'none',
+                  color: '#5dab61'
+                }}
+              >
+                Learn More
+              </Typography>
+            </Button>
+          }
+          severity="success"
+          variant="outlined"
+          iconMapping={{ success: <BrowserUpdatedIcon fontSize="inherit" /> }}
+          sx={{ mb: 2 }}
+        >
+          {alertText}
+        </Alert>
+      }
+    </>
+  );
+};

cysync/src/pages/mainApp/sidebar/portfolio/dialogs/index.ts

@@ -1 +1,2 @@
 export * from './DeprecationNotice';
+export * from './UpdateNotice';

cysync/src/pages/mainApp/sidebar/portfolio/index.tsx

@@ -15,7 +15,7 @@ import logger from '../../../../utils/logger';
 
 import Charts from './charts';
 import CoinAllocation from './coins';
-import { DeprecationNotice } from './dialogs';
+import { DeprecationNotice, UpdateNotice } from './dialogs';
 
 const Portfolio = () => {
   const { allWallets } = useWallets();
@@ -142,6 +142,7 @@ const Portfolio = () => {
           </div>
         </div>
       )}
+      <UpdateNotice />
       <DeprecationNotice />
 
       <Grid

cysync/src/pages/mainApp/sidebar/tutorial/index.tsx

@@ -3,53 +3,13 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Grid from '@mui/material/Grid';
 import { styled, useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
-import ReactPlayer from 'react-player/youtube';
+import React, { useEffect } from 'react';
 
+import { CustomPlayer } from '../../../../components/customPlayer';
 import { useTutorial } from '../../../../store/provider';
 import Analytics from '../../../../utils/analytics';
 import logger from '../../../../utils/logger';
 
-export interface CustomPlayerProps {
-  url: string;
-}
-
-const CustomPlayer = ({ url }: CustomPlayerProps) => {
-  const [isLoading, setIsLoading] = useState(true);
-
-  const loadingComponent = () => {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingTop: '4rem'
-        }}
-      >
-        <CircularProgress color="secondary" />
-      </div>
-    );
-  };
-
-  return (
-    <div style={{ width: '100%' }}>
-      {isLoading && loadingComponent()}
-      <ReactPlayer
-        style={{ opacity: isLoading ? '0' : '1' }}
-        width="100%"
-        url={url}
-        onReady={() => setIsLoading(false)}
-      />
-    </div>
-  );
-};
-
-CustomPlayer.propTypes = {
-  url: PropTypes.string.isRequired
-};
-
 const PREFIX = 'Tutorial';
 
 const classes = {