Chore/deps 241226

package.json

@@ -31,50 +31,44 @@
   },
   "dependencies": {
     "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
-    "@heroicons/react": "^2.1.5",
-    "@nextui-org/react": "^2.3.3",
-    "axios": "^1.7.7",
-    "framer-motion": "^11.7.0",
-    "i18next": "^23.15.1",
-    "qrcode.react": "^4.0.1",
+    "@heroicons/react": "^2.2.0",
+    "@nextui-org/react": "^2.3.6",
+    "axios": "^1.7.9",
+    "i18next": "^24.2.0",
+    "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0",
-    "react-i18next": "^15.0.2",
-    "react-router-dom": "^6.26.2",
-    "react-toastify": "^10.0.4",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.2.0",
+    "react-router": "^7.1.1",
+    "react-toastify": "^11.0.2",
     "react-tooltip": "^5.28.0",
-    "tailwind-merge": "^2.5.2"
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@playwright/test": "^1.47.2",
+    "@playwright/test": "^1.49.1",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/node": "^22.7.0",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.1.0",
-    "@vitest/coverage-v8": "^2.1.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
     "autoprefixer": "^10.4.20",
-    "concurrently": "^9.0.1",
-    "globals": "^15.10.0",
-    "husky": "^9.1.6",
+    "concurrently": "^9.1.0",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
     "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
-    "msw": "^2.0.11",
+    "lint-staged": "^15.2.11",
+    "msw": "^2.7.0",
     "postcss": "^8.4.47",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "tailwindcss": "^3.4.13",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.8.0",
-    "vite": "^5.4.8",
-    "vite-plugin-svgr": "^4.1.0",
-    "vite-tsconfig-paths": "^5.0.1",
-    "vitest": "^2.1.1"
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.6",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.1.8"
   }
 }

src/App.test.tsx

@@ -6,9 +6,9 @@ import { http, HttpResponse, server } from "./testServer";
 
 const mockedUsedNavigate = vi.fn();
 
-vi.mock("react-router-dom", async () => {
+vi.mock("react-router", async () => {
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  const reactRouterDom: any = await vi.importActual("react-router-dom");
+  const reactRouterDom: any = await vi.importActual("react-router");
 
   return { ...reactRouterDom, useNavigate: () => mockedUsedNavigate };
 });

src/App.tsx

@@ -13,7 +13,7 @@ import {
   useEffect,
   useState,
 } from "react";
-import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { Route, Routes, useLocation, useNavigate } from "react-router";
 import Layout from "./layouts/Layout";
 import LoadingScreen from "./layouts/LoadingScreen";
 import SkeletonLoadingScreen from "./layouts/SkeletonLoadingScreen";

src/components/AppStatusItem.tsx

@@ -3,7 +3,7 @@ import type { AppStatus } from "@/models/app-status";
 import { getHrefFromApp } from "@/utils";
 import { availableApps } from "@/utils/availableApps";
 import type { FC } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 type Props = {
   app: AppStatus;

src/components/RequireAuth.tsx

@@ -1,6 +1,6 @@
 import { AppContext } from "@/context/app-context";
 import { type FC, type PropsWithChildren, useContext } from "react";
-import { Navigate, useLocation } from "react-router-dom";
+import { Navigate, useLocation } from "react-router";
 
 // see https://reactrouter.com/docs/en/v6/examples/auth
 const RequireAuth: FC<PropsWithChildren> = ({ children }) => {

src/components/RequireSetup.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from "react";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
 
 type Props = {
   needsSetup: boolean;

src/context/app-context.tsx

@@ -16,7 +16,7 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { toast } from "react-toastify";
 import { SSEContext } from "./sse-context";
 
@@ -101,7 +101,7 @@ const AppContextProvider: FC<PropsWithChildren> = ({ children }) => {
             window.location.pathname === "/" ||
             window.location.pathname === "/login"
           ) {
-            return navigate("/home");
+            navigate("/home");
           }
         } else {
           localStorage.removeItem(ACCESS_TOKEN);

src/index.tsx

@@ -8,7 +8,7 @@ import { NextUIProvider } from "@nextui-org/react";
 import "i18next";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 import { ToastContainer } from "react-toastify";
 import "react-tooltip/dist/react-tooltip.css";
 

src/layouts/BottomNav.tsx

@@ -5,7 +5,7 @@ import {
 } from "@heroicons/react/24/outline";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 
 const navLinkClasses = "text-white opacity-80";
 const navLinkActiveClasses = "text-yellow-500 opacity-100";

src/layouts/Header.tsx

@@ -17,7 +17,7 @@ import {
 } from "@nextui-org/react";
 import { type Key, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 
 export default function Header() {
   const { t } = useTranslation();
@@ -70,12 +70,12 @@ export default function Header() {
                 ? t("navigation.display_btc")
                 : t("navigation.display_sats")}
             </DropdownItem>
+
             <DropdownItem
               key="documentation"
               href="https://docs.raspiblitz.org/docs/intro"
               target="_blank"
               rel="noopener noreferrer"
-              color="warning"
               startContent={<BookOpenIcon className="h-5 w-5" />}
             >
               {t("navigation.documentation")}

src/layouts/SetupContainer.tsx

@@ -3,6 +3,7 @@ import I18nSelect from "@/components/I18nDropdown";
 import Stepper from "@/pages/Setup/Stepper";
 import { BookOpenIcon } from "@heroicons/react/24/outline";
 import type { PropsWithChildren } from "react";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   currentStep: number | null;
@@ -12,6 +13,8 @@ export default function SetupContainer({
   currentStep,
   children,
 }: PropsWithChildren<Props>) {
+  const { t } = useTranslation();
+
   return (
     <main className="flex h-full min-h-screen w-screen flex-col items-center justify-center bg-primary-900 text-white transition-colors">
       <div className="fixed top-16 flex h-8 w-48 flex-col-reverse items-center justify-center gap-6 md:right-16 md:top-6 md:w-96 md:flex-row md:gap-4">
@@ -25,7 +28,7 @@ export default function SetupContainer({
           className="w-full p-4"
           startContent={<BookOpenIcon className="h-5 w-5" />}
         >
-          Documentation
+          {t("navigation.documentation")}
         </Button>
         <I18nSelect />
       </div>

src/layouts/SideDrawer.tsx

@@ -12,7 +12,7 @@ import {
 import type { FC } from "react";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 
 const navLinkClasses =
   "flex md:flex-col lg:flex-row items-center justify-center py-4 w-full text-white opacity-80 hover:text-yellow-500";

src/pages/Apps/AppCard.tsx

@@ -11,7 +11,7 @@ import {
 import { Button, Link, Tooltip } from "@nextui-org/react";
 import { type FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 export type Props = {
   appInfo: App;

src/pages/Apps/AppInfo.tsx

@@ -13,7 +13,7 @@ import {
 import { Button, Link } from "@nextui-org/react";
 import { type FC, useCallback, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { toast } from "react-toastify";
 import ImageCarousel from "./ImageCarousel";
 

src/pages/Apps/AppPage.tsx

@@ -3,7 +3,7 @@ import PageLoadingScreen from "@/layouts/PageLoadingScreen";
 import { getHrefFromApp } from "@/utils";
 import { availableApps } from "@/utils/availableApps";
 import { type FC, useContext, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 
 export const AppInfo: FC = () => {
   const navigate = useNavigate();

src/pages/Apps/customApps/Electrs.tsx

@@ -17,7 +17,7 @@ import {
 import { QRCodeSVG } from "qrcode.react";
 import { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 const Electrs = () => {
   const navigate = useNavigate();

src/pages/Login/index.tsx

@@ -14,7 +14,7 @@ import { type FC, useContext, useEffect, useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 
 interface IFormInputs {
   passwordInput: string;
@@ -43,11 +43,10 @@ const Login: FC = () => {
     if (isLoggedIn) {
       if (back) {
         console.info(`back(${back})`);
-        return navigate(back, { replace: true });
-        // biome-ignore lint/style/noUselessElse: <explanation>
+        navigate(back, { replace: true });
       } else {
         console.info(`from(${from})`);
-        return navigate(from || "/home", { replace: true });
+        navigate(from || "/home", { replace: true });
       }
     }
   }, [navigate, from, isLoggedIn, back]);

src/pages/Setup/SetupContext.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/pages/Setup/setup-functions";
 import type React from "react";
 import { createContext, useCallback, useContext } from "react";
-import type { NavigateFunction } from "react-router-dom";
+import type { NavigateFunction } from "react-router";
 
 interface SetupContextType {
   state: SetupState;

src/pages/Setup/SyncScreen.tsx

@@ -25,7 +25,7 @@ import { HttpStatusCode } from "axios";
 import { type ChangeEvent, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 type Props = {
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>

src/pages/Setup/index.tsx

@@ -3,7 +3,7 @@ import SetupProvider from "@/pages/Setup/SetupContext";
 import SetupScreenRenderer from "@/pages/Setup/SetupScreenRenderer";
 import { setupMonitoringLoop } from "@/pages/Setup/setup-functions";
 import { useCallback, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 export default function Setup() {
   const [state, setState] = useState<SetupState>(initialState);

src/pages/Setup/setup-functions.ts

@@ -7,7 +7,7 @@ import {
 import { ACCESS_TOKEN } from "@/utils";
 import { instance } from "@/utils/interceptor";
 import { HttpStatusCode } from "axios";
-import type { NavigateFunction } from "react-router-dom";
+import type { NavigateFunction } from "react-router";
 
 type UpdateState = (newState: Partial<SetupState>) => void;
 

src/utils/test-utils.tsx

@@ -12,7 +12,7 @@ import i18n from "@/i18n/test_config";
 import { type RenderOptions, render } from "@testing-library/react";
 import type { FC, PropsWithChildren, ReactElement } from "react";
 import { I18nextProvider } from "react-i18next";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 type Props = {
   sseProps: SSEContextType;

tailwind.config.js

@@ -6,14 +6,7 @@ export const content = [
   "./public/index.html",
   "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
 ];
-export const theme = {
-  extend: {
-    colors: {
-      "bd-yellow-light": "#F7CB47",
-      "bd-yellow-dark": "#F7CB47",
-    },
-  },
-};
+
 export const plugins = [
   nextui({
     addCommonColors: true,