⬆️ Update Wallet to React Router v7

.gitignore

@@ -22,6 +22,9 @@ cdk.context.json
 **/.open-next/
 **/out/
 
+# react router
+.react-router
+
 # production
 build
 dist

packages/wallet/app/entry.client.tsx

@@ -6,12 +6,12 @@ import {
     supportedLngs,
 } from "@/i18n/config";
 import { isRunningLocally } from "@frak-labs/app-essentials";
-import { RemixBrowser } from "@remix-run/react";
 import i18next from "i18next";
 import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
 import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { I18nextProvider, initReactI18next } from "react-i18next";
+import { HydratedRouter } from "react-router/dom";
 
 async function main() {
     await i18next
@@ -31,7 +31,7 @@ async function main() {
             document,
             <I18nextProvider i18n={i18next}>
                 <StrictMode>
-                    <RemixBrowser />
+                    <HydratedRouter />
                 </StrictMode>
             </I18nextProvider>
         );

packages/wallet/app/module/authentication/component/ButtonAuth/index.tsx

@@ -1,7 +1,7 @@
 import { AuthFingerprint } from "@module/component/AuthFingerprint";
-import { useNavigate } from "@remix-run/react";
 import { useState, useTransition } from "react";
 import type { PropsWithChildren } from "react";
+import { useNavigate } from "react-router";
 
 export function ButtonAuth({
     trigger,

packages/wallet/app/module/authentication/component/LoginItem/index.tsx

@@ -3,10 +3,10 @@ import { useLogin } from "@/module/authentication/hook/useLogin";
 import { FingerprintFrak } from "@module/asset/icons/FingerprintFrak";
 import { Button } from "@module/component/Button";
 import { formatHash } from "@module/component/HashDisplay";
-import { useNavigate } from "@remix-run/react";
 import { SquareUser } from "lucide-react";
 import { useTransition } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
 import { toHex } from "viem";
 import styles from "./index.module.css";
 

packages/wallet/app/module/authentication/component/Logout/index.tsx

@@ -2,11 +2,11 @@ import { sdkSessionAtom, sessionAtom } from "@/module/common/atoms/session";
 import { Panel } from "@/module/common/component/Panel";
 import { jotaiStore } from "@module/atoms/store";
 import { Button } from "@module/component/Button";
-import { useNavigate } from "@remix-run/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { RESET } from "jotai/utils";
 import { LogOut } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
 
 function cleanLocalStorage() {
     // Clear static local storage items

packages/wallet/app/module/common/component/AuthRestricted/index.tsx

@@ -1,9 +1,9 @@
 import { sessionAtom } from "@/module/common/atoms/session";
 import { getSafeSession } from "@/module/listener/utils/localStorage";
 import { Skeleton } from "@module/component/Skeleton";
-import { useNavigate } from "@remix-run/react";
 import { useAtomValue } from "jotai";
 import { type PropsWithChildren, useEffect, useState } from "react";
+import { useNavigate } from "react-router";
 
 /**
  * Simple wrapper that limit the access to the subpage depending on the authentication status

packages/wallet/app/module/common/component/Back/index.tsx

@@ -1,6 +1,6 @@
-import { Link } from "@remix-run/react";
 import { ArrowLeft } from "lucide-react";
 import type { PropsWithChildren } from "react";
+import { Link } from "react-router";
 import styles from "./index.module.css";
 
 type BackProps = {

packages/wallet/app/module/common/component/Header/index.tsx

@@ -1,7 +1,7 @@
 import { LogoFrakWithName } from "@frak-labs/shared/module/asset/icons/LogoFrakWithName";
 import { Notifications } from "@module/asset/icons/Notifications";
-import { Link } from "@remix-run/react";
 import { useAtomValue } from "jotai";
+import { Link } from "react-router";
 import { useHydrated } from "remix-utils/use-hydrated";
 import { sessionAtom } from "../../atoms/session";
 import styles from "./index.module.css";

packages/wallet/app/module/common/component/NavigationItem/index.tsx

@@ -1,5 +1,5 @@
-import { NavLink } from "@remix-run/react";
 import type { PropsWithChildren } from "react";
+import { NavLink } from "react-router";
 import styles from "./index.module.css";
 
 type NavigationProps = {

packages/wallet/app/module/common/component/TopLoader/index.tsx

@@ -1,7 +1,7 @@
-import { useFetchers, useNavigation } from "@remix-run/react";
 import NProgress from "nprogress";
 import nProgressStylesUrl from "nprogress/nprogress.css?url";
 import { useEffect, useMemo } from "react";
+import { useFetchers, useNavigation } from "react-router";
 
 export function TopLoader() {
     NProgress.configure({ showSpinner: false });

packages/wallet/app/module/recovery/component/Recover/Step2.tsx

@@ -6,10 +6,10 @@ import {
 } from "@/module/settings/atoms/recovery";
 import { Button } from "@module/component/Button";
 import { WalletAddress } from "@module/component/HashDisplay";
-import { useNavigate } from "@remix-run/react";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useTransition } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
 import { toHex } from "viem";
 import styles from "./Step2.module.css";
 

packages/wallet/app/module/recovery/component/Recover/Step6.tsx

@@ -1,6 +1,6 @@
 import { AccordionRecoveryItem } from "@/module/common/component/AccordionRecoveryItem";
-import { Link } from "@remix-run/react";
 import { Trans, useTranslation } from "react-i18next";
+import { Link } from "react-router";
 
 const ACTUAL_STEP = 6;
 

packages/wallet/app/module/recovery/hook/useRecoveryAvailability.ts

@@ -9,8 +9,6 @@ export function useRecoveryAvailability({
     file,
     newAuthenticatorId,
 }: { file: RecoveryFileContent; newAuthenticatorId: string }) {
-    // const fetcher = useFetcherWithPromise<GetRecoveryAvailabilityResponse>();
-
     const { data, ...queryStuff } = useQuery({
         queryKey: [
             "recovery",
@@ -26,21 +24,6 @@ export function useRecoveryAvailability({
                 expectedGuardian: file.guardianAddress,
                 newAuthenticatorId,
             });
-            // const data = await fetcher.submit(
-            //     {
-            //         wallet: file.initialWallet.address,
-            //         expectedGuardian: file.guardianAddress,
-            //         newAuthenticatorId,
-            //     },
-            //     {
-            //         action: "/recovery",
-            //         method: "post",
-            //     }
-            // );
-            // if (!data) {
-            //     return undefined;
-            // }
-            // return data;
         },
     });
     return {

packages/wallet/app/module/root/config.ts

@@ -1,7 +1,7 @@
 import { nProgressStylesUrl } from "@/module/common/component/TopLoader";
 import allCssUrl from "@/styles/all.css?url";
 import { isRunningInProd } from "@frak-labs/app-essentials";
-import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import type { LinksFunction, MetaFunction } from "react-router";
 
 const meta: MetaFunction = () => {
     return [

packages/wallet/app/module/settings/component/Recovery/index.tsx

@@ -1,9 +1,9 @@
 import { Panel } from "@/module/common/component/Panel";
 import { Title } from "@/module/common/component/Title";
 import { CurrentRecoverySetupStatus } from "@/module/recovery-setup/component/CurrentSetupStatus";
-import { Link } from "@remix-run/react";
 import { Shield } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
 
 /**
  * Component for the settings with the recovery link

packages/wallet/app/module/tokens/component/Tokens/index.tsx

@@ -1,8 +1,8 @@
 import { Panel } from "@/module/common/component/Panel";
 import { Balance } from "@/module/tokens/component/Balance";
-import { Link } from "@remix-run/react";
 import { HandCoins, Send } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
 import styles from "./index.module.css";
 
 export function Tokens() {

packages/wallet/app/module/wallet/component/HomeNavigation/index.tsx

@@ -1,8 +1,8 @@
 import { ButtonRefresh } from "@module/component/ButtonRefresh";
-import { Link } from "@remix-run/react";
 import { HandCoins, RefreshCcw, Send } from "lucide-react";
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
 import styles from "./index.module.css";
 
 export function HomeNavigation() {

packages/wallet/app/root.tsx

@@ -4,14 +4,8 @@ import { rootConfig } from "@/module/root/config";
 import { DetectPWA } from "@/module/wallet/component/DetectPWA";
 import { isRunningInProd } from "@frak-labs/app-essentials";
 import { Analytics } from "@module/component/Analytics";
-import {
-    Links,
-    Meta,
-    Outlet,
-    Scripts,
-    ScrollRestoration,
-} from "@remix-run/react";
 import type { ReactNode } from "react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 
 export const meta = rootConfig.meta;
 export const links = rootConfig.links;

packages/wallet/app/routes.ts

@@ -3,7 +3,7 @@ import {
     index,
     layout,
     route,
-} from "@remix-run/route-config";
+} from "@react-router/dev/routes";
 
 export default [
     // Landing Routes

packages/wallet/app/views/auth/login.tsx

@@ -3,9 +3,9 @@ import { LoginList } from "@/module/authentication/component/LoginList";
 import { useLogin } from "@/module/authentication/hook/useLogin";
 import { Back } from "@/module/common/component/Back";
 import { Grid } from "@/module/common/component/Grid";
-import { Link, useNavigate } from "@remix-run/react";
 import { CloudUpload } from "lucide-react";
 import { Trans, useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router";
 import styles from "./login.module.css";
 
 export default function Login() {

packages/wallet/app/views/auth/register.tsx

@@ -2,9 +2,9 @@ import { ButtonAuth } from "@/module/authentication/component/ButtonAuth";
 import { useRegister } from "@/module/authentication/hook/useRegister";
 import { Grid } from "@/module/common/component/Grid";
 import { Notice } from "@/module/common/component/Notice";
-import { Link, useNavigate } from "@remix-run/react";
 import { useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router";
 import styles from "./register.module.css";
 
 export default function Register() {

packages/wallet/app/views/auth/sso.tsx

@@ -13,7 +13,6 @@ import {
 } from "@/module/authentication/utils/ssoDataCompression";
 import { Grid } from "@/module/common/component/Grid";
 import { Notice } from "@/module/common/component/Notice";
-import { decompressJson } from "@frak-labs/nexus-sdk/core";
 import { jotaiStore } from "@module/atoms/store";
 import { formatHash } from "@module/component/HashDisplay";
 import { Spinner } from "@module/component/Spinner";
@@ -23,7 +22,8 @@ import { CloudUpload } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import "./sso.global.css";
-import { Link, useSearchParams } from "@remix-run/react";
+import { decompressJson } from "@frak-labs/nexus-sdk/core";
+import { Link, useSearchParams } from "react-router";
 
 export default function Sso() {
     const { i18n, t } = useTranslation();

packages/wallet/app/views/catch-all.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 
 export default function NotFound() {
     return (

packages/wallet/app/views/landings/home.tsx

@@ -1,5 +1,5 @@
-import { useNavigate } from "@remix-run/react";
 import { useEffect } from "react";
+import { useNavigate } from "react-router";
 
 export default function Home() {
     const navigate = useNavigate();

packages/wallet/app/views/layouts/authentication.tsx

@@ -1,6 +1,6 @@
 import { AuthRestricted } from "@/module/common/component/AuthRestricted";
 import { GlobalLayout } from "@/module/common/component/GlobalLayout";
-import { Outlet } from "@remix-run/react";
+import { Outlet } from "react-router";
 
 export default function AuthenticationLayout() {
     return (

packages/wallet/app/views/layouts/protected.tsx

@@ -1,6 +1,6 @@
 import { AuthRestricted } from "@/module/common/component/AuthRestricted";
 import { GlobalLayout } from "@/module/common/component/GlobalLayout";
-import { Outlet } from "@remix-run/react";
+import { Outlet } from "react-router";
 
 export default function ProtectedLayout() {
     return (

packages/wallet/app/views/layouts/sso.tsx

@@ -1,5 +1,5 @@
 import { GlobalLayout } from "@/module/common/component/GlobalLayout";
-import { Outlet } from "@remix-run/react";
+import { Outlet } from "react-router";
 
 export default function SsoLayout() {
     return (