add upgrade button

tari-project · Nov 25, 2024 · fc672af · fc672af
1 parent bc37cbb
commit fc672af
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,4 @@
-# Tari Universe - Testnet V0.6.4
+# Tari Universe - Testnet v0.6.4
 
 _November 12, 2024_
 
@@ -21,7 +21,7 @@ _November 12, 2024_
 
 ---
 
-# Tari Universe - Testnet V0.6.3
+# Tari Universe - Testnet v0.6.3
 
 _November 1, 2024_
 
@@ -41,7 +41,7 @@ _November 1, 2024_
 
 ---
 
-# Tari Universe - Testnet V0.6.2
+# Tari Universe - Testnet v0.6.2
 
 _October 15, 2024_
 
@@ -65,7 +65,7 @@ _October 15, 2024_
 
 ---
 
-# Tari Universe - Testnet V0.6.1
+# Tari Universe - Testnet v0.6.1
 
 _October 1, 2024_
 
@@ -85,7 +85,7 @@ _October 1, 2024_
 
 ---
 
-# Tari Universe - Testnet V0.6.0
+# Tari Universe - Testnet v0.6.0
 
 _September 15, 2024_
 

diff --git a/src/containers/floating/Settings/sections/releaseNotes/ReleaseNotes.tsx b/src/containers/floating/Settings/sections/releaseNotes/ReleaseNotes.tsx
@@ -1,10 +1,22 @@
 import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { IconImage, MarkdownWrapper, Text, TextWrapper, Title, VersionWrapper, Wrapper } from './styles';
+import {
+    IconImage,
+    LoadingText,
+    MarkdownWrapper,
+    Text,
+    TextWrapper,
+    Title,
+    UpgradeButton,
+    VersionWrapper,
+    Wrapper,
+} from './styles';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 import tariIcon from './tari-icon.png';
 import packageInfo from '../../../../../../package.json';
 import { useTranslation } from 'react-i18next';
+import { useUIStore } from '@app/store/useUIStore';
+import { checkUpdate } from '@tauri-apps/api/updater';
 
 const environment = import.meta.env.MODE;
 const appVersion = packageInfo.version;
@@ -38,28 +50,44 @@ interface ReleaseSection {
 }
 
 export const ReleaseNotes = () => {
+    const { setDialogToShow } = useUIStore();
     const [sections, setSections] = useState<ReleaseSection[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
     const [openSectionIndex, setOpenSectionIndex] = useState<number | null>(0);
+    const [needsUpgrade, setNeedsUpgrade] = useState(false);
 
     const { t } = useTranslation(['common', 'settings'], { useSuspense: false });
 
     useEffect(() => {
         const loadReleaseNotes = async () => {
             try {
+                setIsLoading(true);
                 const response = await fetch(CHANGELOG_URL);
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
                 const text = await response.text();
-                setSections(parseMarkdownSections(text));
+                const parsedSections = parseMarkdownSections(text);
+                setSections(parsedSections);
             } catch (err) {
                 console.error('Error loading release notes:', err);
+            } finally {
+                setIsLoading(false);
             }
         };
 
         loadReleaseNotes();
     }, []);
 
+    useEffect(() => {
+        const checkForUpdates = async () => {
+            const { shouldUpdate } = await checkUpdate();
+            setNeedsUpgrade(shouldUpdate);
+        };
+
+        checkForUpdates();
+    }, []);
+
     const toggleSection = (index: number) => {
         setOpenSectionIndex(openSectionIndex === index ? null : index);
     };
@@ -74,19 +102,27 @@ export const ReleaseNotes = () => {
                         {t('tari-universe')} - {t('testnet')} {versionString}
                     </Text>
                 </TextWrapper>
+
+                {needsUpgrade && !isLoading && (
+                    <UpgradeButton onClick={() => setDialogToShow('autoUpdate')}>⚠️ Upgrade Available</UpgradeButton>
+                )}
             </VersionWrapper>
 
             <MarkdownWrapper>
-                {sections.map((section, index) => (
-                    <AccordionItem
-                        key={index}
-                        title={section.title}
-                        subtitle={section.date}
-                        content={<ReactMarkdown>{section.content}</ReactMarkdown>}
-                        isOpen={openSectionIndex === index}
-                        onToggle={() => toggleSection(index)}
-                    />
-                ))}
+                {isLoading ? (
+                    <LoadingText>Loading Release Notes...</LoadingText>
+                ) : (
+                    sections.map((section, index) => (
+                        <AccordionItem
+                            key={index}
+                            title={section.title}
+                            subtitle={section.date}
+                            content={<ReactMarkdown>{section.content}</ReactMarkdown>}
+                            isOpen={openSectionIndex === index}
+                            onToggle={() => toggleSection(index)}
+                        />
+                    ))
+                )}
             </MarkdownWrapper>
         </Wrapper>
     );

diff --git a/src/containers/floating/Settings/sections/releaseNotes/styles.ts b/src/containers/floating/Settings/sections/releaseNotes/styles.ts
@@ -25,6 +25,7 @@ export const TextWrapper = styled('div')`
     display: flex;
     flex-direction: column;
     gap: 5px;
+    width: 100%;
 `;
 
 export const Title = styled('div')`
@@ -92,3 +93,30 @@ export const MarkdownWrapper = styled('div')`
         margin: 25px 0;
     }
 `;
+
+export const LoadingText = styled('div')`
+    color: #797979;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 116.667%;
+
+    padding: 20px 0;
+`;
+
+export const UpgradeButton = styled('button')`
+    flex-shrink: 0;
+
+    color: #fff;
+
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 99.7%;
+    white-space: nowrap;
+
+    border-radius: 49px;
+    background: #000;
+
+    padding: 10px 16px;
+
+    cursor: pointer;
+`;