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/models/apiModel.ts

@@ -6,7 +6,7 @@ export interface ExtendedMakerStatus extends MakerStatus {
   recommended?: boolean;
 }
 
-export interface MakerStatus extends MakerQuote, Maker { }
+export interface MakerStatus extends MakerQuote, Maker {}
 
 export interface MakerQuote {
   price: number;
@@ -29,16 +29,16 @@ export interface Alert {
 
 // Define the correct 9-element tuple type for PrimitiveDateTime
 export type PrimitiveDateTimeString = [
-    number, // Year
-    number, // Day of Year
-    number, // Hour
-    number, // Minute
-    number, // Second
-    number, // Nanosecond
-    number, // Offset Hour
-    number, // Offset Minute
-    number  // Offset Second
-]; 
+  number, // Year
+  number, // Day of Year
+  number, // Hour
+  number, // Minute
+  number, // Second
+  number, // Nanosecond
+  number, // Offset Hour
+  number, // Offset Minute
+  number, // Offset Second
+];
 
 export interface Feedback {
   id: string;
@@ -46,7 +46,7 @@ export interface Feedback {
 }
 
 export interface Attachment {
-  id: number; 
+  id: number;
   message_id: number;
   key: string;
   content: string;

src-gui/src/models/cliModel.ts

@@ -61,4 +61,3 @@ export function parseCliLogString(log: string): CliLog | string {
     return log;
   }
 }
-

src-gui/src/models/tauriModelExt.ts

@@ -14,7 +14,8 @@ export type TauriSwapProgressEventContent<
   T extends TauriSwapProgressEventType,
 > = Extract<TauriSwapProgressEvent, { type: T }>["content"];
 
-export type TauriSwapProgressEventExt<T extends TauriSwapProgressEventType> = Extract<TauriSwapProgressEvent, { type: T }>;
+export type TauriSwapProgressEventExt<T extends TauriSwapProgressEventType> =
+  Extract<TauriSwapProgressEvent, { type: T }>;
 
 // See /swap/src/protocol/bob/state.rs#L57
 // TODO: Replace this with a typeshare definition
@@ -36,19 +37,32 @@ export enum BobStateName {
 
 export function bobStateNameToHumanReadable(stateName: BobStateName): string {
   switch (stateName) {
-    case BobStateName.Started: return "Started";
-    case BobStateName.SwapSetupCompleted: return "Setup completed";
-    case BobStateName.BtcLocked: return "Bitcoin locked";
-    case BobStateName.XmrLockProofReceived: return "Monero locked";
-    case BobStateName.XmrLocked: return "Monero locked and fully confirmed";
-    case BobStateName.EncSigSent: return "Encrypted signature sent";
-    case BobStateName.BtcRedeemed: return "Bitcoin redeemed";
-    case BobStateName.CancelTimelockExpired: return "Cancel timelock expired";
-    case BobStateName.BtcCancelled: return "Bitcoin cancelled";
-    case BobStateName.BtcRefunded: return "Bitcoin refunded";
-    case BobStateName.XmrRedeemed: return "Monero redeemed";
-    case BobStateName.BtcPunished: return "Bitcoin punished";
-    case BobStateName.SafelyAborted: return "Safely aborted";
+    case BobStateName.Started:
+      return "Started";
+    case BobStateName.SwapSetupCompleted:
+      return "Setup completed";
+    case BobStateName.BtcLocked:
+      return "Bitcoin locked";
+    case BobStateName.XmrLockProofReceived:
+      return "Monero locked";
+    case BobStateName.XmrLocked:
+      return "Monero locked and fully confirmed";
+    case BobStateName.EncSigSent:
+      return "Encrypted signature sent";
+    case BobStateName.BtcRedeemed:
+      return "Bitcoin redeemed";
+    case BobStateName.CancelTimelockExpired:
+      return "Cancel timelock expired";
+    case BobStateName.BtcCancelled:
+      return "Bitcoin cancelled";
+    case BobStateName.BtcRefunded:
+      return "Bitcoin refunded";
+    case BobStateName.XmrRedeemed:
+      return "Monero redeemed";
+    case BobStateName.BtcPunished:
+      return "Bitcoin punished";
+    case BobStateName.SafelyAborted:
+      return "Safely aborted";
     default:
       return exhaustiveGuard(stateName);
   }
@@ -64,7 +78,11 @@ export type TimelockCancel = Extract<ExpiredTimelocks, { type: "Cancel" }>;
 export type TimelockPunish = Extract<ExpiredTimelocks, { type: "Punish" }>;
 
 // This function returns the absolute block number of the timelock relative to the block the tx_lock was included in
-export function getAbsoluteBlock(timelock: ExpiredTimelocks, cancelTimelock: number, punishTimelock: number): number {
+export function getAbsoluteBlock(
+  timelock: ExpiredTimelocks,
+  cancelTimelock: number,
+  punishTimelock: number,
+): number {
   if (timelock.type === "None") {
     return cancelTimelock - timelock.content.blocks_left;
   }
@@ -208,12 +226,15 @@ export function isGetSwapInfoResponseRunningSwap(
  * @returns True if the timelock exists, false otherwise
  */
 export function isGetSwapInfoResponseWithTimelock(
-  response: GetSwapInfoResponseExt
+  response: GetSwapInfoResponseExt,
 ): response is GetSwapInfoResponseExtWithTimelock {
   return response.timelock !== null;
 }
 
-export type PendingApprovalRequest = Extract<ApprovalRequest, { state: "Pending" }>;
+export type PendingApprovalRequest = Extract<
+  ApprovalRequest,
+  { state: "Pending" }
+>;
 
 export type PendingLockBitcoinApprovalRequest = PendingApprovalRequest & {
   content: {
@@ -239,7 +260,10 @@ export function isPendingBackgroundProcess(
   return process.progress.type === "Pending";
 }
 
-export type TauriBitcoinSyncProgress = Extract<TauriBackgroundProgress, { componentName: "SyncingBitcoinWallet" }>;
+export type TauriBitcoinSyncProgress = Extract<
+  TauriBackgroundProgress,
+  { componentName: "SyncingBitcoinWallet" }
+>;
 
 export function isBitcoinSyncProgress(
   progress: TauriBackgroundProgress,