feat(ui): release notes modal

public/locales/en/components.json

@@ -14,5 +14,9 @@
     "seconds": "seconds",
     "keepChanges": "Keep Changes",
     "cancel": "Cancel"
+  },
+  "releaseNotesDialog": {
+    "title": "Release Notes",
+    "close": "Got It"
   }
 }

src-tauri/src/app_config.rs

@@ -36,6 +36,7 @@ use tari_common::configuration::Network;
 use tokio::fs;
 
 const LOG_TARGET: &str = "tari::universe::app_config";
+const UNIVERSE_VERSION: &str = env!("CARGO_PKG_VERSION");
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[allow(clippy::struct_excessive_bools)]
@@ -112,6 +113,8 @@ pub struct AppConfigFromFile {
     p2pool_stats_server_port: Option<u16>,
     #[serde(default = "default_false")]
     pre_release: bool,
+    #[serde(default = "default_changelog_version")]
+    last_changelog_version: String,
     #[serde(default)]
     airdrop_tokens: Option<AirdropTokens>,
 }
@@ -156,6 +159,7 @@ impl Default for AppConfigFromFile {
             show_experimental_settings: false,
             p2pool_stats_server_port: default_p2pool_stats_server_port(),
             pre_release: false,
+            last_changelog_version: default_changelog_version(),
             airdrop_tokens: None,
         }
     }
@@ -275,6 +279,7 @@ pub(crate) struct AppConfig {
     show_experimental_settings: bool,
     p2pool_stats_server_port: Option<u16>,
     pre_release: bool,
+    last_changelog_version: String,
     airdrop_tokens: Option<AirdropTokens>,
 }
 
@@ -320,6 +325,7 @@ impl AppConfig {
             keyring_accessed: false,
             p2pool_stats_server_port: default_p2pool_stats_server_port(),
             pre_release: false,
+            last_changelog_version: default_changelog_version(),
             airdrop_tokens: None,
         }
     }
@@ -398,6 +404,7 @@ impl AppConfig {
                 self.show_experimental_settings = config.show_experimental_settings;
                 self.p2pool_stats_server_port = config.p2pool_stats_server_port;
                 self.pre_release = config.pre_release;
+                self.last_changelog_version = config.last_changelog_version;
                 self.airdrop_tokens = config.airdrop_tokens;
 
                 KEYRING_ACCESSED.store(
@@ -478,6 +485,10 @@ impl AppConfig {
         &self.anon_id
     }
 
+    pub fn last_changelog_version(&self) -> &str {
+        &self.last_changelog_version
+    }
+
     pub async fn set_mode(
         &mut self,
         mode: String,
@@ -764,6 +775,15 @@ impl AppConfig {
         Ok(())
     }
 
+    pub async fn set_last_changelog_version(
+        &mut self,
+        version: String,
+    ) -> Result<(), anyhow::Error> {
+        self.last_changelog_version = version;
+        self.update_config_file().await?;
+        Ok(())
+    }
+
     // Allow needless update because in future there may be fields that are
     // missing
     #[allow(clippy::needless_update)]
@@ -811,6 +831,7 @@ impl AppConfig {
             show_experimental_settings: self.show_experimental_settings,
             p2pool_stats_server_port: self.p2pool_stats_server_port,
             pre_release: self.pre_release,
+            last_changelog_version: self.last_changelog_version.clone(),
             airdrop_tokens: self.airdrop_tokens.clone(),
         };
         let config = serde_json::to_string(config)?;
@@ -907,3 +928,7 @@ fn default_window_settings() -> Option<WindowSettings> {
 fn default_p2pool_stats_server_port() -> Option<u16> {
     None
 }
+
+fn default_changelog_version() -> String {
+    UNIVERSE_VERSION.clone().into()
+}

src-tauri/src/commands.rs

@@ -753,6 +753,18 @@ pub async fn get_coinbase_transactions(
     Ok(transactions)
 }
 
+#[tauri::command]
+pub async fn get_last_changelog_version(
+    state: tauri::State<'_, UniverseAppState>,
+) -> Result<String, String> {
+    let timer = Instant::now();
+    let last_changelog_version = state.config.read().await.last_changelog_version().into();
+    if timer.elapsed() > MAX_ACCEPTABLE_COMMAND_TIME {
+        warn!(target: LOG_TARGET, "get_last_changelog_version took too long: {:?}", timer.elapsed());
+    }
+    Ok(last_changelog_version)
+}
+
 #[tauri::command]
 pub async fn import_seed_words(
     seed_words: Vec<String>,
@@ -1791,3 +1803,26 @@ pub async fn proceed_with_update(
     }
     Ok(())
 }
+
+#[tauri::command]
+pub async fn set_last_changelog_version(
+    version: String,
+    state: tauri::State<'_, UniverseAppState>,
+) -> Result<(), String> {
+    let timer = Instant::now();
+
+    state
+        .config
+        .write()
+        .await
+        .set_last_changelog_version(version)
+        .await
+        .inspect_err(|e| error!("error at set_last_changelog_version{:?}", e))
+        .map_err(|e| e.to_string())?;
+
+    if timer.elapsed() > MAX_ACCEPTABLE_COMMAND_TIME {
+        warn!(target: LOG_TARGET, "set_last_changelog_version took too long: {:?}", timer.elapsed());
+    }
+
+    Ok(())
+}

src-tauri/src/main.rs

@@ -1160,6 +1160,8 @@ fn main() {
             commands::try_update,
             commands::get_network,
             commands::sign_ws_data,
+            commands::get_last_changelog_version,
+            commands::set_last_changelog_version,
             commands::set_airdrop_tokens,
             commands::get_airdrop_tokens
         ])

src/components/AdminUI/groups/DialogsGroup.tsx

@@ -45,6 +45,12 @@ export function DialogsGroup() {
                 >
                     External Dependencies
                 </Button>
+                <Button
+                    onClick={() => setDialogToShow(dialogToShow === 'releaseNotes' ? undefined : 'releaseNotes')}
+                    $isActive={dialogToShow === 'releaseNotes'}
+                >
+                    Release Notes
+                </Button>
                 <Button
                     onClick={() =>
                         setDialogToShow(dialogToShow === 'ludicrousConfirmation' ? undefined : 'ludicrousConfirmation')

src/containers/floating/FloatingElements.tsx

@@ -11,6 +11,7 @@ import AdminUI from '@app/components/AdminUI/AdminUI.tsx';
 import { ToastStack } from '@app/components/ToastStack/ToastStack.tsx';
 import { CriticalProblemDialog } from './CriticalProblemDialog/CriticalProblemDialog.tsx';
 import ShellOfSecrets from '../main/ShellOfSecrets/ShellOfSecrets.tsx';
+import ReleaseNotesDialog from './ReleaseNotesDialog/ReleaseNotesDialog.tsx';
 import LudicrousCofirmationDialog from './LudicrousCofirmationDialog/LudicrousCofirmationDialog.tsx';
 
 const environment = import.meta.env.MODE;
@@ -29,6 +30,7 @@ export default function FloatingElements() {
             <ShellOfSecrets />
             <ToastStack />
             <CriticalProblemDialog />
+            <ReleaseNotesDialog />
             {environment === 'development' && <AdminUI />}
         </FloatingTree>
     );

src/containers/floating/ReleaseNotesDialog/ReleaseNotesDialog.tsx

@@ -0,0 +1,33 @@
+import { useUIStore } from '@app/store/useUIStore';
+import { DialogContent, Dialog } from '@app/components/elements/dialog/Dialog';
+import { useCallback } from 'react';
+import { ReleaseNotes } from '../Settings/sections';
+import { Button, ButtonWrapper, Title, Wrapper } from './styles';
+import { useTranslation } from 'react-i18next';
+
+export default function ReleaseNotesDialog() {
+    const open = useUIStore((s) => s.dialogToShow === 'releaseNotes');
+    const setDialogToShow = useUIStore((s) => s.setDialogToShow);
+    const { t } = useTranslation('components', { useSuspense: false });
+
+    const handleClose = useCallback(() => {
+        setDialogToShow(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <Dialog open={open} onOpenChange={handleClose}>
+            <DialogContent>
+                <Wrapper>
+                    <Title>{t('releaseNotesDialog.title')}</Title>
+                    <ReleaseNotes noHeader={true} showScrollBars={true} />
+                    <ButtonWrapper>
+                        <Button onClick={handleClose}>
+                            <span>{t('releaseNotesDialog.close')}</span>
+                        </Button>
+                    </ButtonWrapper>
+                </Wrapper>
+            </DialogContent>
+        </Dialog>
+    );
+}

src/containers/floating/ReleaseNotesDialog/styles.ts

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+    width: 500px;
+    padding: 0 15px;
+`;
+
+export const Title = styled.div`
+    color: #000;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 150%;
+    letter-spacing: -0.4px;
+
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    padding-bottom: 10px;
+    margin-bottom: 5px;
+`;
+
+export const ButtonWrapper = styled.div`
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    padding-top: 20px;
+    margin-top: 5px;
+`;
+
+export const Button = styled.button`
+    border-radius: 49px;
+    background: #000;
+    box-shadow: 28px 28px 77px 0px rgba(0, 0, 0, 0.1);
+
+    height: 51px;
+    width: 100%;
+
+    color: #c9eb00;
+    text-align: center;
+    font-family: DrukWide, sans-serif;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 99.7%;
+    text-transform: uppercase;
+
+    span {
+        display: block;
+        transition: transform 0.2s ease;
+    }
+
+    &:hover {
+        span {
+            transform: scale(1.075);
+        }
+    }
+`;

src/containers/floating/Settings/SettingsModal.tsx

@@ -51,14 +51,17 @@ export default function SettingsModal() {
         setIsSettingsOpen(!isSettingsOpen);
     }
 
+    const sectionTitle = t(`tabs.${activeSection}`);
+    const title = activeSection === 'releaseNotes' ? sectionTitle : `${sectionTitle} ${t('settings')}`;
+
     return (
         <Dialog open={isSettingsOpen} onOpenChange={onOpenChange}>
             <DialogContent $unPadded>
                 <Container>
                     <SettingsNavigation activeSection={activeSection} onChangeActiveSection={setActiveSection} />
                     <ContentContainer>
                         <HeaderContainer>
-                            <Typography variant="h4">{`${t(`tabs.${activeSection}`)} ${t('settings')}`}</Typography>
+                            <Typography variant="h4">{title}</Typography>
                             <IconButton onClick={() => onOpenChange()}>
                                 <IoClose size={18} />
                             </IconButton>

src/containers/floating/Settings/sections/releaseNotes/AccordionItem/styles.ts

@@ -12,6 +12,7 @@ export const Header = styled.div`
     padding: 20px 0;
     cursor: pointer;
     font-weight: 500;
+    gap: 10px;
 `;
 
 export const TextWrapper = styled.div`
@@ -48,6 +49,7 @@ export const ChevronIcon = styled.svg<{ $isOpen: boolean }>`
     height: 22px;
     transform: scaleY(1);
     transition: transform 0.3s ease;
+    flex-shrink: 0;
 
     ${({ $isOpen }) =>
         $isOpen &&