fix(ui): permissions on intro & updated settings with anon id (#1128)

Description
---
- add `created_at` field to app_config to check if it's the first ever
run of the app or not (to hide permissions toggle on the Intro screens
on subsequent runs)
- added Application Information settings section in General Settings to
display the `anon_id` which can be copied
- tightened up General Settings styling a little


Motivation and Context
---
resolves:
- #1123
- #1114

How Has This Been Tested?
---

- locally:



https://github.com/user-attachments/assets/410b1168-d926-4fde-b8a2-3aa346fed434


What process can a PR reviewer use to test or verify this change?
---

re. #1123:

- reset everything/remove app_config and start app - should show
permissions toggle on the intro screens
- on any runs after that (not after reset) it shouldn't show on intro
screens

re. #1114:

- your app anon_id should be viewable and copy-able(?) from general
settings

public/locales/af/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "Hierdie aksie vereis \"n herbegin om veranderinge toe te pas",
   "action-restart-copy": "Jou voorkeur sal gestoor word en toegepas word die volgende keer as Tari Universe begin word.",
   "app-restart-required": "App herbegin benodig",
+  "application-info": "Application Information",
   "applyInviteCode": "Pas Uitnodigingskode Toe",
   "cancel": "Cancel",
   "change-language": "Verander taal",

public/locales/cn/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "此操作需要重启以应用更改",
   "action-restart-copy": "您的偏好将被保存，并在下次启动 Tari 宇宙时应用。",
   "app-restart-required": "需要重启应用",
+  "application-info": "Application Information",
   "applyInviteCode": "应用邀请代码",
   "cancel": "取消",
   "change-language": "更改语言",

public/locales/de/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "Diese Aktion erfordert einen Neustart, um Änderungen anzuwenden",
   "action-restart-copy": "Ihre Einstellungen werden gespeichert und beim nächsten Start des Tari-Universums angewendet.",
   "app-restart-required": "App-Neustart erforderlich",
+  "application-info": "Application Information",
   "applyInviteCode": "Einladungscode anwenden",
   "cancel": "Abbrechen",
   "change-language": "Sprache",

public/locales/en/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "This action requires restart to apply changes",
   "action-restart-copy": "Your preference will be saved and applied the next time Tari Universe is started.",
   "app-restart-required": "App restart required",
+  "application-info": "Application Information",
   "applyInviteCode": "Apply Invite Code",
   "cancel": "Cancel",
   "change-language": "Language",

public/locales/fr/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "Cette action nécessite un redémarrage pour appliquer les modifications",
   "action-restart-copy": "Votre préférence sera enregistrée et appliquée lors du prochain démarrage de Tari Universe.",
   "app-restart-required": "Redémarrage de l\"application requis",
+  "application-info": "Application Information",
   "applyInviteCode": "Appliquer le code d\"invitation",
   "cancel": "Cancel",
   "change-language": "Langue",

public/locales/hi/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "इस क्रिया के लिए परिवर्तनों को लागू करने हेतु पुनः आरंभ करना आवश्यक है",
   "action-restart-copy": "आपकी पसंद को सहेजा जाएगा और अगली बार जब तारी यूनिवर्स शुरू होगा, तब लागू किया जाएगा।",
   "app-restart-required": "ऐप पुनः प्रारंभ आवश्यक है",
+  "application-info": "Application Information",
   "applyInviteCode": "आमंत्रण कोड लागू करें",
   "cancel": "रद्द करें",
   "change-language": "भाषा",

public/locales/id/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "Tindakan ini memerlukan restart untuk menerapkan perubahan",
   "action-restart-copy": "Preferensi Anda akan disimpan dan diterapkan saat Tari Universe dimulai berikutnya.",
   "app-restart-required": "Diperlukan restart aplikasi",
+  "application-info": "Application Information",
   "applyInviteCode": "Terapkan Kode Undangan",
   "cancel": "Batal",
   "change-language": "Bahasa",

public/locales/ja/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "この操作には再起動が必要です。変更を適用します",
   "action-restart-copy": "設定は保存され、次回Tari Universeを起動したときに適用されます。",
   "app-restart-required": "アプリの再起動が必要です",
+  "application-info": "Application Information",
   "applyInviteCode": "招待コードを適用",
   "cancel": "キャンセル",
   "change-language": "言語",

public/locales/ko/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "이 작업은 변경 사항을 적용하기 위해 재시작이 필요합니다",
   "action-restart-copy": "선호 설정이 저장되어 다음에 Tari Universe가 시작될 때 적용됩니다.",
   "app-restart-required": "앱 재시작 필요",
+  "application-info": "Application Information",
   "applyInviteCode": "초대 코드 적용",
   "cancel": "취소",
   "change-language": "언어",

public/locales/pl/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "Ta akcja wymaga ponownego uruchomienia, aby wprowadzić zmiany",
   "action-restart-copy": "Twoje preferencje zostaną zapisane i zastosowane przy następnym uruchomieniu Tari Universe.",
   "app-restart-required": "Wymagany restart aplikacji",
+  "application-info": "Application Information",
   "applyInviteCode": "Zastosuj Kod Zaproszenia",
   "cancel": "Anuluj",
   "change-language": "Zmień język",

public/locales/ru/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "Для применения изменений требуется перезапуск",
   "action-restart-copy": "Ваши предпочтения будут сохранены и применены при следующем запуске Tari Universe.",
   "app-restart-required": "Требуется перезапуск приложения",
+  "application-info": "Application Information",
   "applyInviteCode": "Применить код приглашения",
   "cancel": "Отмена",
   "change-language": "Язык",

public/locales/tr/settings.json

@@ -2,6 +2,7 @@
   "action-requires-restart": "Bu işlem değişikliklerin uygulanması için yeniden başlatma gerektirir",
   "action-restart-copy": "Tercihiniz kaydedilecek ve bir sonraki Tari Universe başlatıldığında uygulanacaktır.",
   "app-restart-required": "Uygulama yeniden başlatılması gerekiyor",
+  "application-info": "Application Information",
   "applyInviteCode": "Davet Kodunu Uygula",
   "cancel": "İptal",
   "change-language": "Dil Değiştir",

src-tauri/src/app_config.rs

@@ -5,6 +5,7 @@ use sys_locale::get_locale;
 use crate::credential_manager::CredentialManager;
 use crate::{consts::DEFAULT_MONERO_ADDRESS, internal_wallet::generate_password};
 use anyhow::anyhow;
+use chrono::{DateTime, Utc};
 use log::{debug, info, warn};
 use monero_address_creator::network::Mainnet;
 use monero_address_creator::Seed as MoneroSeed;
@@ -186,6 +187,7 @@ pub struct GpuThreads {
 pub(crate) struct AppConfig {
     config_version: u32,
     config_file: Option<PathBuf>,
+    created_at: Option<DateTime<Utc>>,
     mode: MiningMode,
     display_mode: DisplayMode,
     auto_mining: bool,
@@ -226,6 +228,7 @@ impl AppConfig {
         Self {
             config_version: default_version(),
             config_file: None,
+            created_at: None,
             mode: MiningMode::Eco,
             display_mode: DisplayMode::Light,
             auto_mining: true,
@@ -269,13 +272,18 @@ impl AppConfig {
         if file.exists() {
             debug!(target: LOG_TARGET, "Loading app config from file: {:?}", file);
             let config = fs::read_to_string(&file).await?;
+            self.created_at = Some(file.clone().metadata()?.created()?.into());
             self.apply_loaded_config(config);
         } else {
             info!(target: LOG_TARGET, "App config does not exist or is corrupt. Creating new one");
             if let Ok(address) = create_monereo_address(config_path).await {
                 self.monero_address = address;
                 self.monero_address_is_generated = true;
             }
+
+            if self.update_config_file().await.is_ok() {
+                self.created_at = Some(file.clone().metadata()?.created()?.into());
+            }
         }
         self.update_config_file().await?;
         Ok(())

src/containers/floating/Settings/sections/general/AppDataSettings.tsx

@@ -0,0 +1,33 @@
+import { IconButton } from '@app/components/elements/buttons/IconButton';
+import { Stack } from '@app/components/elements/Stack';
+import { Typography } from '@app/components/elements/Typography';
+import { useCopyToClipboard } from '@app/hooks/helpers/useCopyToClipboard';
+import { useAppConfigStore } from '@app/store/useAppConfigStore';
+import { useTranslation } from 'react-i18next';
+import { IoCheckmarkOutline, IoCopyOutline } from 'react-icons/io5';
+import { SettingsGroupContent, SettingsGroupTitle } from '../../components/SettingsGroup.styles.ts';
+
+export default function AppDataSettings() {
+    const { t } = useTranslation('settings');
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+    const anon_id = useAppConfigStore((s) => s.anon_id);
+
+    return (
+        <>
+            <SettingsGroupTitle>
+                <Typography variant="h6">{t('application-info')}</Typography>
+            </SettingsGroupTitle>
+            {anon_id && (
+                <SettingsGroupContent>
+                    <Stack direction="row" alignItems="center" justifyContent="flex-start">
+                        {/* eslint-disable-next-line i18next/no-literal-string */}
+                        <Typography variant="p">Anon ID: {anon_id}</Typography>
+                        <IconButton onClick={() => copyToClipboard(anon_id)} size="small">
+                            {!isCopied ? <IoCopyOutline /> : <IoCheckmarkOutline />}
+                        </IconButton>
+                    </Stack>
+                </SettingsGroupContent>
+            )}
+        </>
+    );
+}

src/containers/floating/Settings/sections/general/GeneralSettings.tsx

@@ -1,3 +1,5 @@
+import { SettingsGroupWrapper } from '@app/containers/floating/Settings/components/SettingsGroup.styles';
+import AppDataSettings from './AppDataSettings';
 import ThemeSettings from './ThemeSettings';
 import AirdropPermissionSettings from './AirdropPermissionSettings.tsx';
 import LogsSettings from './LogsSettings.tsx';
@@ -11,11 +13,14 @@ export const GeneralSettings = () => {
         <>
             <StartApplicationOnBootSettings />
             <AutoUpdate />
+            <AirdropPermissionSettings />
             <LanguageSettings />
             <ThemeSettings />
             <LogsSettings />
-            <AirdropPermissionSettings />
-            <ResetSettingsButton />
+            <SettingsGroupWrapper $advanced>
+                <AppDataSettings />
+                <ResetSettingsButton />
+            </SettingsGroupWrapper>
         </>
     );
 };

src/containers/floating/Settings/sections/general/LanguageSettings.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import { Stack } from '@app/components/elements/Stack';
 import { useTranslation } from 'react-i18next';
 import { Typography } from '@app/components/elements/Typography.tsx';
 import LanguageDropdown from '../../components/LanguageDropdown.tsx';
 import {
+    SettingsGroup,
+    SettingsGroupAction,
     SettingsGroupContent,
     SettingsGroupTitle,
     SettingsGroupWrapper,
@@ -18,26 +20,29 @@ export default function LanguageSettings() {
     }));
 
     return (
-        <React.Fragment>
-            <SettingsGroupWrapper>
-                <SettingsGroupTitle>
-                    <Typography variant="h6">{t('change-language')}</Typography>
-                </SettingsGroupTitle>
-                <SettingsGroupContent>
-                    <LanguageDropdown />
-                </SettingsGroupContent>
-            </SettingsGroupWrapper>
-            <SettingsGroupWrapper>
-                <SettingsGroupTitle>
-                    <Typography variant="h6">{t('should-use-system-language')}</Typography>
-                </SettingsGroupTitle>
-                <SettingsGroupContent>
-                    <ToggleSwitch
-                        checked={shouldAlwaysUseSystemLanguage}
-                        onChange={(event) => setShouldAlwaysUseSystemLanguage(event.target.checked)}
-                    />
-                </SettingsGroupContent>
-            </SettingsGroupWrapper>
-        </React.Fragment>
+        <SettingsGroupWrapper>
+            <SettingsGroupTitle>
+                <Typography variant="h6">{t('change-language')}</Typography>
+                <SettingsGroup>
+                    <Stack direction="row" gap={8}>
+                        <SettingsGroupContent>
+                            <SettingsGroupTitle>
+                                <Typography variant="h6">{t('should-use-system-language')}</Typography>
+                            </SettingsGroupTitle>
+                        </SettingsGroupContent>
+                        <SettingsGroupAction>
+                            <ToggleSwitch
+                                checked={shouldAlwaysUseSystemLanguage}
+                                onChange={(event) => setShouldAlwaysUseSystemLanguage(event.target.checked)}
+                            />
+                        </SettingsGroupAction>
+                    </Stack>
+                </SettingsGroup>
+            </SettingsGroupTitle>
+
+            <SettingsGroupContent>
+                <LanguageDropdown />
+            </SettingsGroupContent>
+        </SettingsGroupWrapper>
     );
 }

src/containers/phase/Setup/components/Footer.tsx

@@ -1,11 +1,18 @@
 import Lottie from 'react-lottie';
 import SetupProgress from './SetupProgress';
 
+import { useAppConfigStore } from '@app/store/useAppConfigStore';
 import { Container, LottieWrapper, StatusWrapper } from './Footer.styles';
 import animationData from './lil-soon-cookies.json';
 import AirdropPermission from './AirdropPermission/AirdropPermission';
 
 export default function Footer() {
+    const created_at = useAppConfigStore((s) => s.created_at);
+    const now = new Date();
+    const config_creation_date = created_at ? new Date(created_at) : null;
+
+    const diff = config_creation_date ? now.getTime() - config_creation_date.getTime() : 0;
+    const isFirstLoad = diff > 0 && diff < 1000 * 60; // 1 min buffer
     const defaultOptions = {
         loop: true,
         autoplay: true,
@@ -14,6 +21,7 @@ export default function Footer() {
             preserveAspectRatio: 'xMidYMid slice',
         },
     };
+
     return (
         <Container>
             <StatusWrapper>
@@ -22,7 +30,7 @@ export default function Footer() {
                 </LottieWrapper>
                 <SetupProgress />
             </StatusWrapper>
-            <AirdropPermission />
+            {isFirstLoad ? <AirdropPermission /> : null}
         </Container>
     );
 }

src/hooks/useSetUp.ts

@@ -18,7 +18,7 @@ export function useSetUp() {
     const setCriticalError = useAppStateStore((s) => s.setCriticalError);
     const isAfterAutoUpdate = useAppStateStore((s) => s.isAfterAutoUpdate);
     const setSettingUpFinished = useAppStateStore((s) => s.setSettingUpFinished);
-    const setSeenPermissions = useAirdropStore((s) => s.setSeenPermissions);
+
     const fetchApplicationsVersionsWithRetry = useAppStateStore((s) => s.fetchApplicationsVersionsWithRetry);
     const syncedAidropWithBackend = useAirdropStore((s) => s.syncedWithBackend);
 
@@ -57,7 +57,7 @@ export function useSetUp() {
                         setSetupDetails(p.title, p.title_params, p.progress);
                     }
                     if (p.progress >= 1) {
-                        handlePostSetup().finally(() => setSeenPermissions(true));
+                        handlePostSetup();
                     }
                     break;
                 default:
@@ -82,7 +82,6 @@ export function useSetUp() {
         handlePostSetup,
         isAfterAutoUpdate,
         setCriticalError,
-        setSeenPermissions,
         setSetupDetails,
         adminShow,
     ]);