refactor(gui): Update MUI to v7 (#383)

* task(gui): update to mui v5

* task(gui): use sx prop instead of system props

* task(gui): update to mui v6 and replace makeStyles with sx prop

* task(gui): update to mui v7

* task(gui): update react

* fix(gui): fix import

* task(gui): adjust theme and few components to fix migration introduced styling errors

* fix(gui): animation issues with text field animations

* fix(gui): remove 'darker' theme and make 'dark' theme the default

- with the new update 'dark' theme is already quite dark and therefore a 'darker' theme not necessary
- the default theme is set to 'dark' now in settings initialization

* feat(tooling): Upgrade dprint to 0.50.0, eslint config, prettier, justfile commands

- Upgrade dprint to 0.50.0
- Use sane default eslint config (fairly permissive)
- `dprint fmt` now runs prettier for the `src-gui` folder
- Added `check_gui_eslint`, `check_gui_tsc` and `check_gui` commands

* refactor: fix a few eslint errors

* dprint fmt

* fix tsc complains

* nitpick: small spacing issue

---------

Co-authored-by: Binarybaron <binarybaron@protonmail.com>
Co-authored-by: Mohan <86064887+binarybaron@users.noreply.github.com>

src-gui/src/store/hooks.ts

@@ -1,5 +1,13 @@
 import { sortBy, sum } from "lodash";
-import { BobStateName, GetSwapInfoResponseExt, isBitcoinSyncProgress, isPendingBackgroundProcess, isPendingLockBitcoinApprovalEvent, PendingApprovalRequest, PendingLockBitcoinApprovalRequest } from "models/tauriModelExt";
+import {
+  BobStateName,
+  GetSwapInfoResponseExt,
+  isBitcoinSyncProgress,
+  isPendingBackgroundProcess,
+  isPendingLockBitcoinApprovalEvent,
+  PendingApprovalRequest,
+  PendingLockBitcoinApprovalRequest,
+} from "models/tauriModelExt";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import type { AppDispatch, RootState } from "renderer/store/storeRenderer";
 import { parseDateString } from "utils/parseUtils";
@@ -9,7 +17,11 @@ import { SettingsState } from "./features/settingsSlice";
 import { NodesSlice } from "./features/nodesSlice";
 import { RatesState } from "./features/ratesSlice";
 import { sortMakerList } from "utils/sortUtils";
-import { TauriBackgroundProgress, TauriBitcoinSyncProgress, TauriContextStatusEvent } from "models/tauriModel";
+import {
+  TauriBackgroundProgress,
+  TauriBitcoinSyncProgress,
+  TauriContextStatusEvent,
+} from "models/tauriModel";
 
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
@@ -23,7 +35,8 @@ export function useResumeableSwapsCount(
     (state) =>
       saneSwapInfos.filter(
         (swapInfo: GetSwapInfoResponseExt) =>
-          !swapInfo.completed && (additionalFilter == null || additionalFilter(swapInfo))
+          !swapInfo.completed &&
+          (additionalFilter == null || additionalFilter(swapInfo)),
       ).length,
   );
 }
@@ -35,7 +48,9 @@ export function useResumeableSwapsCount(
  */
 export function useResumeableSwapsCountExcludingPunished() {
   return useResumeableSwapsCount(
-    (s) => s.state_name !== BobStateName.BtcPunished && s.state_name !== BobStateName.SwapSetupCompleted,
+    (s) =>
+      s.state_name !== BobStateName.BtcPunished &&
+      s.state_name !== BobStateName.SwapSetupCompleted,
   );
 }
 
@@ -48,7 +63,9 @@ export function useIsSwapRunning() {
 }
 
 export function useIsContextAvailable() {
-  return useAppSelector((state) => state.rpc.status === TauriContextStatusEvent.Available);
+  return useAppSelector(
+    (state) => state.rpc.status === TauriContextStatusEvent.Available,
+  );
 }
 
 /// We do not use a sanity check here, as opposed to the other useSwapInfo hooks,
@@ -57,7 +74,7 @@ export function useSwapInfo(
   swapId: string | null,
 ): GetSwapInfoResponseExt | null {
   return useAppSelector((state) =>
-    swapId ? state.rpc.state.swapInfos[swapId] ?? null : null,
+    swapId ? (state.rpc.state.swapInfos[swapId] ?? null) : null,
   );
 }
 
@@ -118,10 +135,7 @@ export function useSaneSwapInfos() {
 export function useSwapInfosSortedByDate() {
   const swapInfos = useSaneSwapInfos();
 
-  return sortBy(
-    swapInfos,
-    (swap) => -parseDateString(swap.start_date),
-  );
+  return sortBy(swapInfos, (swap) => -parseDateString(swap.start_date));
 }
 
 export function useRates<T>(selector: (rates: RatesState) => T): T {
@@ -151,14 +165,21 @@ export function usePendingLockBitcoinApproval(): PendingLockBitcoinApprovalReque
 
 /// Returns all the pending background processes
 /// In the format [id, {componentName, {type: "Pending", content: {consumed, total}}}]
-export function usePendingBackgroundProcesses(): [string, TauriBackgroundProgress][] {
+export function usePendingBackgroundProcesses(): [
+  string,
+  TauriBackgroundProgress,
+][] {
   const background = useAppSelector((state) => state.rpc.state.background);
-  return Object.entries(background).filter(([_, c]) => isPendingBackgroundProcess(c));
+  return Object.entries(background).filter(([_, c]) =>
+    isPendingBackgroundProcess(c),
+  );
 }
 
 export function useBitcoinSyncProgress(): TauriBitcoinSyncProgress[] {
   const pendingProcesses = usePendingBackgroundProcesses();
-  const syncingProcesses = pendingProcesses.map(([_, c]) => c).filter(isBitcoinSyncProgress);
+  const syncingProcesses = pendingProcesses
+    .map(([_, c]) => c)
+    .filter(isBitcoinSyncProgress);
   return syncingProcesses.map((c) => c.progress.content);
 }
 
@@ -236,4 +257,4 @@ export function useTotalUnreadMessagesCount(): number {
   }
 
   return totalUnreadCount;
-}
+}