merge

package.json

@@ -23,12 +23,12 @@
         "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.6.2",
         "linkify-react": "^4.1.3",
-        "lottie-react": "^2.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.53.1",
         "react-i18next": "^15.1.0",
         "react-icons": "^5.3.0",
+        "react-lottie": "^1.2.4",
         "socket.io-client": "^4.8.1",
         "styled-components": "^6.1.12",
         "uuid": "^10.0.0",
@@ -61,4 +61,4 @@
         "typescript-eslint": "^8.13.0",
         "vite": "^5.4.10"
     }
-}
+}

src-tauri/Cargo.toml

@@ -9,12 +9,12 @@ version = "0.5.62"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = {version = "1.5.5", features = ["isolation"]}
+tauri-build = {version = "1.5.5", features = ["isolation"] }
 
 [dependencies]
 anyhow = "1"
 async-trait = "0.1.81"
-async_zip = {version = "0.0.17", features = ["full"]}
+async_zip = {version = "0.0.17", features = ["full"] }
 auto-launch = "0.5.0"
 blake2 = "0.10"
 chrono = "0.4.38"
@@ -29,27 +29,27 @@ keyring = {version = "3.0.5", features = [
   "windows-native",
   "apple-native",
   "linux-native",
-]}
+] }
 libsqlite3-sys = {version = "0.25.1", features = [
   "bundled",
-]}# Required for tari_wallet
+] }# Required for tari_wallet
 log = "0.4.22"
 log4rs = "1.3.0"
 minotari_node_grpc_client = {git = "https://github.com/tari-project/tari.git", branch = "development"}
 minotari_wallet_grpc_client = {git = "https://github.com/tari-project/tari.git", branch = "development"}
-nix = {version = "0.29.0", features = ["signal"]}
+nix = {version = "0.29.0", features = ["signal"] }
 nvml-wrapper = "0.10.0"
 open = "5"
 opencl3 = "0.9.5"
 phraze = "0.3.15"
 rand = "0.8.5"
 regex = "1.10.5"
-reqwest = {version = "0.12.5", features = ["stream", "json", "multipart"]}
+reqwest = {version = "0.12.5", features = ["stream", "json", "multipart"] }
 sanitize-filename = "0.5"
 semver = "1.0.23"
-sentry = {version = "0.34.0", features = ["anyhow"]}
+sentry = {version = "0.34.0", features = ["anyhow"] }
 sentry-tauri = "0.3.0"
-serde = {version = "1", features = ["derive"]}
+serde = {version = "1", features = ["derive"] }
 serde_json = "1"
 sha2 = "0.10.8"
 sys-locale = "0.3.1"
@@ -59,7 +59,7 @@ tari_common = {git = "https://github.com/tari-project/tari.git", branch = "devel
 tari_common_types = {git = "https://github.com/tari-project/tari.git", branch = "development"}
 tari_core = {git = "https://github.com/tari-project/tari.git", branch = "development", features = [
   "transactions",
-]}
+] }
 tari_crypto = "0.21.0"
 tari_key_manager = {git = "https://github.com/tari-project/tari.git", branch = "development"}
 tari_shutdown = {git = "https://github.com/tari-project/tari.git", branch = "development"}
@@ -82,12 +82,12 @@ tauri = {version = "1.8.0", features = [
   "icon-ico",
   "icon-png",
   "process-command-api",
-]}
+] }
 tauri-plugin-single-instance = {git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1"}
 thiserror = "1.0.26"
-tokio = {version = "1", features = ["full"]}
-tokio-util = {version = "0.7.11", features = ["compat"]}
-xz2 = {version = "0.1.7", features = ["static"]}# static bind lzma
+tokio = {version = "1", features = ["full"] }
+tokio-util = {version = "0.7.11", features = ["compat"] }
+xz2 = {version = "0.1.7", features = ["static"] }# static bind lzma
 zip = "2.2.0"
 
 [target.'cfg(windows)'.dependencies]
@@ -96,7 +96,7 @@ winreg = "0.52.0"
 # needed for keymanager. TODO: Find a way of creating a keymanager without bundling sqlite
 chrono = "0.4.38"
 device_query = "2.1.0"
-libsqlite3-sys = {version = "0.25.1", features = ["bundled"]}
+libsqlite3-sys = {version = "0.25.1", features = ["bundled"] }
 log = "0.4.22"
 nvml-wrapper = "0.10.0"
 rand = "0.8.5"

src/containers/phase/Setup/components/Footer.styles.ts

@@ -16,8 +16,9 @@ export const StatusWrapper = styled.div`
     flex-direction: row;
     align-items: center;
     gap: 22px;
-    img {
-        display: flex;
-        max-height: 100%;
-    }
+`;
+
+export const LottieWrapper = styled.div`
+    display: flex;
+    max-height: 100%;
 `;

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

@@ -1,14 +1,25 @@
+import Lottie from 'react-lottie';
 import Permissions from '@app/containers/phase/Setup/components/Permissions';
 import SetupProgress from './SetupProgress';
 
-import { Container, StatusWrapper } from './Footer.styles';
-import tinySoon from '/assets/img/tiny-soon.png';
+import { Container, LottieWrapper, StatusWrapper } from './Footer.styles';
+import animationData from './lil-soon-cookies.json';
 
 export default function Footer() {
+    const defaultOptions = {
+        loop: true,
+        autoplay: true,
+        animationData,
+        rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+        },
+    };
     return (
         <Container>
             <StatusWrapper>
-                <img src={tinySoon} alt="Lil Soon" />
+                <LottieWrapper>
+                    <Lottie options={defaultOptions} height={100} width={100} />
+                </LottieWrapper>
                 <SetupProgress />
             </StatusWrapper>
             <Permissions />

src/containers/phase/Setup/components/InfoNav/InfoNav.styles.ts

@@ -38,7 +38,7 @@ export const NavContainer = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: clamp(240px, 38vh, 300px);
+    height: clamp(240px, 38vh, 340px);
 `;
 
 export const Nav = styled.div`
@@ -69,18 +69,18 @@ export const NavItemCurrent = styled(m.div)`
 export const GraphicContainer = styled(m.div)`
     position: fixed;
     pointer-events: none;
-    width: 45vw;
+    width: 40vw;
     bottom: 0;
-    right: -40px;
-    height: 99vh;
+    right: -20px;
+    height: 95vh;
     display: flex;
     align-items: end;
     justify-content: flex-end;
     z-index: 1;
     transition: height 0.3s ease;
 
-    @media (max-width: 1350px) and (min-height: 800px) {
-        height: 65vh;
+    @media (max-width: 1200px) and (min-height: 850px) {
+        height: 70vh;
     }
 `;