From 08c09781c77f1a8cb92fa9140d667c407da0d660 Mon Sep 17 00:00:00 2001
From: Tommy Verrall <tommyvez@protonmail.com>
Date: Tue, 8 Apr 2025 14:36:42 +0200
Subject: [PATCH] Fixing all yarn lint errors

---
 .../src/components/Accounts/AccountItem.tsx   |  70 +-
 .../Accounts/modals/AccountsModal.tsx         |  66 +-
 .../Bonding/forms/nym-node/NymNodeData.tsx    |   1 +
 .../forms/nym-node/NymNodeSignature.tsx       |   1 -
 .../components/Clipboard/ClipboardActions.tsx |   1 +
 .../Clipboard/ClipboardFormFields.tsx         |  27 +-
 .../components/Delegation/DelegationList.tsx  |   5 +-
 .../src/components/Send/SendInputModal.tsx    | 110 ++-
 nym-wallet/src/requests/gatewayDetails.ts     |   1 -
 nym-wallet/src/theme/NymWalletTheme.tsx       |   2 +-
 nym-wallet/src/theme/index.tsx                |   2 +-
 nym-wallet/src/theme/mui-theme.d.ts           |   4 +-
 nym-wallet/src/theme/theme.tsx                | 876 +++++++++---------
 nym-wallet/src/utils/common.ts                |   3 +-
 nym-wallet/src/utils/shellHelper.ts           |   8 +-
 15 files changed, 617 insertions(+), 560 deletions(-)

diff --git a/nym-wallet/src/components/Accounts/AccountItem.tsx b/nym-wallet/src/components/Accounts/AccountItem.tsx
index 92271a6a4b..e19cf7efd5 100644
--- a/nym-wallet/src/components/Accounts/AccountItem.tsx
+++ b/nym-wallet/src/components/Accounts/AccountItem.tsx
@@ -29,9 +29,9 @@ export const AccountItem = ({
   const { selectedAccount, setDialogToDisplay, setAccountMnemonic, handleAccountToEdit } = useContext(AccountsContext);
   const { copy, copied } = useClipboard({ copiedTimeout: 1000 });
   const theme = useTheme();
-  
+
   const isSelected = selectedAccount?.id === name;
-  
+
   return (
     <ListItem
       disablePadding
@@ -45,23 +45,21 @@ export const AccountItem = ({
         bgcolor: isSelected
           ? alpha(theme.palette.nym.highlight, theme.palette.mode === 'dark' ? 0.15 : 0.08)
           : 'transparent',
-        borderLeft: isSelected 
-          ? `3px solid ${theme.palette.nym.highlight}` 
-          : '3px solid transparent',
+        borderLeft: isSelected ? `3px solid ${theme.palette.nym.highlight}` : '3px solid transparent',
       }}
       secondaryAction={
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           {isSelected && (
-            <CheckCircleIcon 
-              sx={{ 
+            <CheckCircleIcon
+              sx={{
                 color: theme.palette.nym.highlight,
                 fontSize: 18,
               }}
             />
           )}
           <IconButton
-            sx={{ 
-              mr: 1.5, 
+            sx={{
+              mr: 1.5,
               color: theme.palette.mode === 'dark' ? 'nym.text.dark' : theme.palette.text.primary,
               backgroundColor: alpha(theme.palette.text.primary, 0.05),
               '&:hover': {
@@ -80,39 +78,37 @@ export const AccountItem = ({
         </Box>
       }
     >
-      <ListItemButton 
-        disableRipple 
+      <ListItemButton
+        disableRipple
         onClick={onSelectAccount}
         sx={{
           py: 1,
           transition: 'background-color 0.2s',
           '&:hover': {
-            backgroundColor: isSelected 
+            backgroundColor: isSelected
               ? alpha(theme.palette.nym.highlight, theme.palette.mode === 'dark' ? 0.2 : 0.12)
               : alpha(theme.palette.nym.nymWallet.hover.background, 0.5),
           },
         }}
       >
         {/* Account avatar with box wrapper to apply styling */}
-        <ListItemAvatar 
-          sx={{ 
-            minWidth: 0, 
+        <ListItemAvatar
+          sx={{
+            minWidth: 0,
             mr: 2,
             '& .MuiAvatar-root': {
-              border: isSelected 
-                ? `2px solid ${theme.palette.nym.highlight}` 
-                : `2px solid transparent`,
+              border: isSelected ? `2px solid ${theme.palette.nym.highlight}` : '2px solid transparent',
               transition: 'all 0.2s',
-            }
+            },
           }}
         >
           <AccountAvatar name={name} />
         </ListItemAvatar>
         <ListItemText
           primary={
-            <Typography 
-              variant="subtitle1" 
-              sx={{ 
+            <Typography
+              variant="subtitle1"
+              sx={{
                 fontWeight: isSelected ? 600 : 400,
                 color: theme.palette.text.primary,
               }}
@@ -130,13 +126,14 @@ export const AccountItem = ({
                     e.stopPropagation();
                     copy(address);
                   }}
-                  sx={{ 
+                  sx={{
                     fontFamily: 'monospace',
                     cursor: 'pointer',
-                    color: theme.palette.mode === 'dark'
-                      ? theme.palette.nym.nymWallet.text.muted
-                      : alpha(theme.palette.text.primary, 0.7),
-                    '&:hover': { 
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? theme.palette.nym.nymWallet.text.muted
+                        : alpha(theme.palette.text.primary, 0.7),
+                    '&:hover': {
                       color: theme.palette.text.primary,
                       textDecoration: 'underline',
                     },
@@ -149,17 +146,18 @@ export const AccountItem = ({
                 <Typography
                   variant="body2"
                   component="span"
-                  sx={{ 
-                    textDecoration: 'underline', 
-                    mb: 0.5, 
+                  sx={{
+                    textDecoration: 'underline',
+                    mb: 0.5,
                     cursor: 'pointer',
-                    color: theme.palette.mode === 'dark'
-                      ? alpha(theme.palette.nym.highlight, 0.9)
-                      : theme.palette.nym.highlight,
-                    '&:hover': { 
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? alpha(theme.palette.nym.highlight, 0.9)
+                        : theme.palette.nym.highlight,
+                    '&:hover': {
                       color: theme.palette.nym.highlight,
                       fontWeight: 500,
-                    } 
+                    },
                   }}
                   onClick={(e: React.MouseEvent<HTMLElement>) => {
                     e.stopPropagation();
@@ -176,4 +174,4 @@ export const AccountItem = ({
       </ListItemButton>
     </ListItem>
   );
-};
\ No newline at end of file
+};
diff --git a/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
index 964700e410..479335021e 100644
--- a/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
+++ b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useState } from 'react';
 import {
   Box,
   Button,
-  Paper,
   Dialog,
   DialogActions,
   DialogContent,
@@ -74,8 +73,8 @@ export const AccountsModal = () => {
         <Box display="flex" justifyContent="space-between" alignItems="center">
           <Box display="flex" alignItems="center" gap={1}>
             <SwapHorizOutlined
-              sx={{ 
-                color: theme.palette.nym.highlight, 
+              sx={{
+                color: theme.palette.nym.highlight,
                 backgroundColor: alpha(theme.palette.nym.highlight, 0.1),
                 borderRadius: '50%',
                 p: 0.5,
@@ -101,34 +100,36 @@ export const AccountsModal = () => {
             <Close fontSize="small" />
           </IconButton>
         </Box>
-        <Typography 
-          variant="body2" 
-          sx={{ 
-            color: theme.palette.mode === 'dark' 
-              ? theme.palette.nym.nymWallet.text.muted 
-              : alpha(theme.palette.text.primary, 0.6),
+        <Typography
+          variant="body2"
+          sx={{
+            color:
+              theme.palette.mode === 'dark'
+                ? theme.palette.nym.nymWallet.text.muted
+                : alpha(theme.palette.text.primary, 0.6),
             pl: 4.5,
           }}
         >
           Switch between accounts
         </Typography>
       </DialogTitle>
-      
-      <DialogContent 
-        sx={{ 
-          px: 1, 
-          pt: 0, 
+
+      <DialogContent
+        sx={{
+          px: 1,
+          pt: 0,
           flexGrow: 1,
-          overflowY: 'auto',  // Enable vertical scrolling
-          minHeight: '100px',  // Ensure minimum height for content
+          overflowY: 'auto', // Enable vertical scrolling
+          minHeight: '100px', // Ensure minimum height for content
           '&::-webkit-scrollbar': {
             width: '8px',
             height: '8px',
           },
           '&::-webkit-scrollbar-thumb': {
-            backgroundColor: theme.palette.mode === 'dark' 
-              ? alpha(theme.palette.nym.nymWallet.background.greyStroke, 0.8)
-              : alpha(theme.palette.nym.nymWallet.background.greyStroke, 0.5),
+            backgroundColor:
+              theme.palette.mode === 'dark'
+                ? alpha(theme.palette.nym.nymWallet.background.greyStroke, 0.8)
+                : alpha(theme.palette.nym.nymWallet.background.greyStroke, 0.5),
             borderRadius: '4px',
           },
           '&::-webkit-scrollbar-track': {
@@ -151,24 +152,24 @@ export const AccountsModal = () => {
           ))}
         </List>
       </DialogContent>
-      
+
       <Box sx={{ flexShrink: 0 }}>
-        <Divider 
+        <Divider
           variant="middle"
-          sx={{ 
+          sx={{
             my: 1.5,
             opacity: 0.6,
-          }} 
+          }}
         />
-        
-        <DialogActions 
-          sx={{ 
-            p: 3, 
+
+        <DialogActions
+          sx={{
+            p: 3,
             justifyContent: 'space-between',
           }}
         >
-          <Button 
-            startIcon={<ArrowDownwardSharp />} 
+          <Button
+            startIcon={<ArrowDownwardSharp />}
             onClick={() => setDialogToDisplay('Import')}
             sx={{
               borderRadius: 1.5,
@@ -197,9 +198,8 @@ export const AccountsModal = () => {
               boxShadow: 'none',
               transition: 'all 0.2s',
               '&:hover': {
-                boxShadow: theme.palette.mode === 'dark'
-                  ? '0 4px 12px rgba(0, 0, 0, 0.2)'
-                  : '0 4px 12px rgba(0, 0, 0, 0.1)',
+                boxShadow:
+                  theme.palette.mode === 'dark' ? '0 4px 12px rgba(0, 0, 0, 0.2)' : '0 4px 12px rgba(0, 0, 0, 0.1)',
                 transform: 'translateY(-1px)',
               },
             }}
@@ -210,4 +210,4 @@ export const AccountsModal = () => {
       </Box>
     </Dialog>
   );
-};
\ No newline at end of file
+};
diff --git a/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeData.tsx b/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeData.tsx
index 82c93ba4e2..d43eb179a4 100644
--- a/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeData.tsx
+++ b/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeData.tsx
@@ -10,6 +10,7 @@ import { settingsValidationSchema } from './settingsValidationSchema';
 
 type NymNodeDataProps = {
   onClose: () => void;
+  // eslint-disable-next-line react/no-unused-prop-types
   onBack: () => void;
   onNext: () => Promise<void>;
   step: number;
diff --git a/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeSignature.tsx b/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeSignature.tsx
index e7849bf50f..11392445a7 100644
--- a/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeSignature.tsx
+++ b/nym-wallet/src/components/Bonding/forms/nym-node/NymNodeSignature.tsx
@@ -61,7 +61,6 @@ const NymNodeSignature = ({
         setMessage(msg);
       }
     } catch (e) {
-      console.error(e);
       setError('Something went wrong while generating the payload signature');
     }
   };
diff --git a/nym-wallet/src/components/Clipboard/ClipboardActions.tsx b/nym-wallet/src/components/Clipboard/ClipboardActions.tsx
index 065194ad78..26af84a25e 100644
--- a/nym-wallet/src/components/Clipboard/ClipboardActions.tsx
+++ b/nym-wallet/src/components/Clipboard/ClipboardActions.tsx
@@ -127,6 +127,7 @@ export const ClipboardActions = ({
       fieldRef.current.addEventListener('blur', blurHandler);
     }
 
+    // eslint-disable-next-line consistent-return
     return () => {
       document.removeEventListener('keydown', keydownHandler);
       if (fieldRef.current) {
diff --git a/nym-wallet/src/components/Clipboard/ClipboardFormFields.tsx b/nym-wallet/src/components/Clipboard/ClipboardFormFields.tsx
index c90c17def1..ac88a833da 100644
--- a/nym-wallet/src/components/Clipboard/ClipboardFormFields.tsx
+++ b/nym-wallet/src/components/Clipboard/ClipboardFormFields.tsx
@@ -8,7 +8,8 @@ import { PasteFromClipboard } from './ClipboardActions';
 
 export const useCopyAllSupport = (inputRef: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>) => {
   useEffect(() => {
-    if (!inputRef.current) return;
+    if (!inputRef.current) return undefined;
+
     const handleKeyDown = (e: Event) => {
       const keyEvent = e as KeyboardEvent;
 
@@ -33,7 +34,10 @@ export const useCopyAllSupport = (inputRef: React.MutableRefObject<HTMLInputElem
 
           if (selectedText) {
             keyEvent.preventDefault();
-            writeText(selectedText).catch((err) => console.error('Failed to copy text:', err));
+            writeText(selectedText).catch((err) => {
+              // eslint-disable-next-line no-console
+              console.error('Failed to copy text:', err);
+            });
           }
         }
       }
@@ -86,6 +90,11 @@ export const TextFieldWithPaste = React.forwardRef<
   );
 });
 
+// Add defaultProps to fix the "require-default-props" warning
+TextFieldWithPaste.defaultProps = {
+  onPasteValue: undefined,
+};
+
 export const CurrencyFormFieldWithPaste = ({
   label,
   fullWidth,
@@ -110,7 +119,7 @@ export const CurrencyFormFieldWithPaste = ({
 
   // Enable copy-all support for this field
   useEffect(() => {
-    if (!inputRef.current) return;
+    if (!inputRef.current) return undefined;
 
     const handleKeyDown = (e: Event) => {
       const keyEvent = e as KeyboardEvent;
@@ -133,7 +142,10 @@ export const CurrencyFormFieldWithPaste = ({
 
           if (selectedText) {
             keyEvent.preventDefault();
-            writeText(selectedText).catch((err) => console.error('Failed to copy text:', err));
+            writeText(selectedText).catch((err) => {
+              // eslint-disable-next-line no-console
+              console.error('Failed to copy text:', err);
+            });
           }
         }
       }
@@ -293,7 +305,7 @@ export const HookFormCurrencyFieldWithPaste = <TFieldValues extends FieldValues>
 
   // Enable copy-all support for this field
   useEffect(() => {
-    if (!inputRef.current) return;
+    if (!inputRef.current) return undefined;
 
     const handleKeyDown = (e: Event) => {
       const keyEvent = e as KeyboardEvent;
@@ -316,7 +328,10 @@ export const HookFormCurrencyFieldWithPaste = <TFieldValues extends FieldValues>
 
           if (selectedText) {
             keyEvent.preventDefault();
-            writeText(selectedText).catch((err) => console.error('Failed to copy text:', err));
+            writeText(selectedText).catch((err) => {
+              // eslint-disable-next-line no-console
+              console.error('Failed to copy text:', err);
+            });
           }
         }
       }
diff --git a/nym-wallet/src/components/Delegation/DelegationList.tsx b/nym-wallet/src/components/Delegation/DelegationList.tsx
index 0005c52caf..d1db10c1c2 100644
--- a/nym-wallet/src/components/Delegation/DelegationList.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationList.tsx
@@ -178,9 +178,10 @@ export const DelegationList: FCWithChildren<{
           <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
           <TableBody>
             {sorted?.length
-              ? sorted.map((item: any, index: number) => {
+              ? sorted.map((item: any, _index: number) => {
                   if (isPendingDelegation(item)) {
-                    return <PendingDelegationItem key={`pending-${index}`} item={item} explorerUrl={explorerUrl} />;
+                    const pendingKey = `pending-${item.event.mix_id}-${item.event.address}-${item.node_identity}`;
+                    return <PendingDelegationItem key={pendingKey} item={item} explorerUrl={explorerUrl} />;
                   }
                   if (isDelegation(item))
                     return (
diff --git a/nym-wallet/src/components/Send/SendInputModal.tsx b/nym-wallet/src/components/Send/SendInputModal.tsx
index 9f9a72bb5e..6ff29cb73b 100644
--- a/nym-wallet/src/components/Send/SendInputModal.tsx
+++ b/nym-wallet/src/components/Send/SendInputModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Stack, Typography, SxProps, FormControlLabel, Checkbox } from '@mui/material';
+import { Stack, Typography, SxProps, FormControlLabel, Checkbox, Alert } from '@mui/material';
 import Big from 'big.js';
 import { CurrencyDenom, DecCoin, isValidRawCoin } from '@nymproject/types';
 import { validateAmount } from 'src/utils';
@@ -17,7 +17,7 @@ const validateNymAddress = (address: string): boolean => {
 
   if (!address.startsWith('n1')) return false;
 
-  if (address.length < 40 || address.length > 42) return false;
+  if (address.length !== 40) return false;
 
   const validCharsRegex = /^[a-z0-9]+$/;
   return validCharsRegex.test(address);
@@ -68,24 +68,60 @@ export const SendInputModal = ({
   const [addressIsValid, setAddressIsValid] = useState(false);
   const [errorAmount, setErrorAmount] = useState<string | undefined>();
   const [errorFee, setErrorFee] = useState<string | undefined>();
+  const [noAccount, setNoAccount] = useState(false);
+
+  useEffect(() => {
+    if (!balance || balance === '0' || parseFloat(balance) === 0) {
+      setNoAccount(true);
+    } else {
+      setNoAccount(false);
+    }
+  }, [balance]);
 
   const validateSendAmount = async (value: DecCoin) => {
     let newValidatedValue = true;
     let errorAmountMessage;
 
+    if (noAccount) {
+      newValidatedValue = false;
+      errorAmountMessage = 'You need to acquire NYMs before sending. Try using the Buy section in the app.';
+      setIsValid(newValidatedValue);
+      setErrorAmount(errorAmountMessage);
+      return newValidatedValue;
+    }
+
     if (!value.amount) {
       newValidatedValue = false;
     } else {
-      // Validate amount format
+      // Skip validation for partial decimal inputs during typing
+      if (value.amount === '.' || value.amount.endsWith('.')) {
+        newValidatedValue = false;
+        setIsValid(newValidatedValue);
+        setErrorAmount(undefined);
+        return newValidatedValue;
+      }
+
       if (!(await validateAmount(value.amount, '0'))) {
         newValidatedValue = false;
         errorAmountMessage = 'Please enter a valid amount';
-      }
-
-      // Check minimum amount
-      if (Number(value.amount) < Number(MIN_AMOUNT_TO_SEND)) {
+      } else if (Number(value.amount) < Number(MIN_AMOUNT_TO_SEND)) {
         newValidatedValue = false;
         errorAmountMessage = `Min. send amount: ${MIN_AMOUNT_TO_SEND} ${denom?.toUpperCase()}`;
+      } else if (balance && value.amount) {
+        try {
+          const amountBig = new Big(value.amount);
+          const balanceBig = new Big(balance);
+
+          if (amountBig.gt(balanceBig)) {
+            newValidatedValue = false;
+            errorAmountMessage = `Make sure you have sufficient funds. Available: ${balance} ${denom?.toUpperCase()}`;
+          }
+        } catch (err) {
+          if (!/^\d*\.?\d*$/.test(value.amount)) {
+            newValidatedValue = false;
+            errorAmountMessage = 'Invalid number format';
+          }
+        }
       }
     }
 
@@ -95,31 +131,53 @@ export const SendInputModal = ({
   };
 
   const validateUserFees = (fees: DecCoin) => {
-    let isValid = true;
+    let feeValid = true;
     let errorFeeMessage;
 
+    if (noAccount) {
+      feeValid = false;
+      errorFeeMessage = 'You need to acquire NYMs before setting fees.';
+      setFeeAmountIsValid(feeValid);
+      setErrorFee(errorFeeMessage);
+      return feeValid;
+    }
+
+    // Skip validation for partial decimal inputs during typing
+    if (fees.amount === '.' || fees.amount.endsWith('.')) {
+      setFeeAmountIsValid(false);
+      setErrorFee(undefined);
+      return false;
+    }
+
     if (!isValidRawCoin(fees.amount) || !Number(fees.amount)) {
-      isValid = false;
+      feeValid = false;
       errorFeeMessage = 'Please enter a valid fee amount';
     } else {
-      const f = Big(fees.amount);
-      if (f.gt(maxUserFees)) {
-        isValid = false;
-        errorFeeMessage = `Max fee: ${maxUserFees} ${denom?.toUpperCase()}`;
-      } else if (f.lt(minUserFees)) {
-        isValid = false;
-        errorFeeMessage = `Min. fee: ${minUserFees} ${denom?.toUpperCase()}`;
+      try {
+        const f = Big(fees.amount);
+        if (f.gt(maxUserFees)) {
+          feeValid = false;
+          errorFeeMessage = `Max fee: ${maxUserFees} ${denom?.toUpperCase()}`;
+        } else if (f.lt(minUserFees)) {
+          feeValid = false;
+          errorFeeMessage = `Min. fee: ${minUserFees} ${denom?.toUpperCase()}`;
+        }
+      } catch (err) {
+        if (!/^\d*\.?\d*$/.test(fees.amount)) {
+          feeValid = false;
+          errorFeeMessage = 'Invalid fee format';
+        }
       }
     }
 
-    setFeeAmountIsValid(isValid);
+    setFeeAmountIsValid(feeValid);
     setErrorFee(errorFeeMessage);
-    return isValid;
+    return feeValid;
   };
 
   useEffect(() => {
     if (amount) validateSendAmount(amount);
-  }, [amount]);
+  }, [amount, balance, noAccount]);
 
   // Effect to validate address whenever it changes
   useEffect(() => {
@@ -140,7 +198,7 @@ export const SendInputModal = ({
     } else {
       setFeeAmountIsValid(true);
     }
-  }, [userFees]);
+  }, [userFees, noAccount]);
 
   return (
     <SimpleModal
@@ -149,10 +207,16 @@ export const SendInputModal = ({
       onClose={onClose}
       okLabel="Next"
       onOk={async () => onNext()}
-      okDisabled={!isValid || !memoIsValid || !feeAmountIsValid || !addressIsValid}
+      okDisabled={!isValid || !memoIsValid || !feeAmountIsValid || !addressIsValid || noAccount}
       sx={sx}
       backdropProps={backdropProps}
     >
+      {noAccount && (
+        <Alert severity="warning" sx={{ mb: 3 }}>
+          To start staking, sending or operating the on the NYM network, you first need to get native NYM tokens.
+        </Alert>
+      )}
+
       <Stack gap={3}>
         <ModalListItem label="Your address" value={fromAddress} fontWeight="light" />
 
@@ -165,7 +229,7 @@ export const SendInputModal = ({
           error={toAddress !== '' && !addressIsValid}
           helperText={
             toAddress !== '' && !addressIsValid
-              ? 'Invalid NYM address. Must start with n1 and be 40-42 characters long.'
+              ? 'Invalid NYM address. Must start with n1 and be exactly 40 characters long.'
               : undefined
           }
           InputLabelProps={{ shrink: true }}
@@ -207,7 +271,7 @@ export const SendInputModal = ({
       </Stack>
 
       <Stack gap={0.5} sx={{ mt: 1 }}>
-        <ModalListItem label="Account balance" value={balance?.toUpperCase()} divider fontWeight={600} />
+        <ModalListItem label="Account balance" value={balance ? balance.toUpperCase() : '0'} divider fontWeight={600} />
         <Typography fontSize="smaller" sx={{ color: 'text.primary' }}>
           Est. fee for this transaction will be shown on the next page
         </Typography>
diff --git a/nym-wallet/src/requests/gatewayDetails.ts b/nym-wallet/src/requests/gatewayDetails.ts
index 283f7afa72..bf8dd403cd 100644
--- a/nym-wallet/src/requests/gatewayDetails.ts
+++ b/nym-wallet/src/requests/gatewayDetails.ts
@@ -59,7 +59,6 @@ async function getGatewayDetails() {
       version: gateway.version,
     };
   } catch (error) {
-    console.error(error);
     return null;
   }
 }
diff --git a/nym-wallet/src/theme/NymWalletTheme.tsx b/nym-wallet/src/theme/NymWalletTheme.tsx
index 08ea4253d5..fc9451f421 100644
--- a/nym-wallet/src/theme/NymWalletTheme.tsx
+++ b/nym-wallet/src/theme/NymWalletTheme.tsx
@@ -36,4 +36,4 @@ export const NymWalletThemeWithMode: FCWithChildren<{ mode: PaletteMode; childre
       {children}
     </ThemeProvider>
   );
-};
\ No newline at end of file
+};
diff --git a/nym-wallet/src/theme/index.tsx b/nym-wallet/src/theme/index.tsx
index 79c77757a7..ce8accb297 100644
--- a/nym-wallet/src/theme/index.tsx
+++ b/nym-wallet/src/theme/index.tsx
@@ -25,4 +25,4 @@ export const AuthTheme: FCWithChildren = ({ children }) => {
       {children}
     </ThemeProvider>
   );
-};
\ No newline at end of file
+};
diff --git a/nym-wallet/src/theme/mui-theme.d.ts b/nym-wallet/src/theme/mui-theme.d.ts
index 77e944a7bf..446b6f7132 100644
--- a/nym-wallet/src/theme/mui-theme.d.ts
+++ b/nym-wallet/src/theme/mui-theme.d.ts
@@ -53,7 +53,7 @@ declare module '@mui/material/styles' {
       grey: string;
       greyStroke: string;
       elevated: string; // New property for more depth options
-      subtle: string;   // New property for subtle backgrounds
+      subtle: string; // New property for subtle backgrounds
     };
     text: {
       main: string;
@@ -119,4 +119,4 @@ declare module '@mui/material/styles' {
   interface ThemeOptions extends Partial<NymTheme> {}
   interface Palette extends NymPaletteAndNymWalletPalette {}
   interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions {}
-}
\ No newline at end of file
+}
diff --git a/nym-wallet/src/theme/theme.tsx b/nym-wallet/src/theme/theme.tsx
index 4ba9f7793d..4683161188 100644
--- a/nym-wallet/src/theme/theme.tsx
+++ b/nym-wallet/src/theme/theme.tsx
@@ -1,14 +1,9 @@
 import { PaletteMode, alpha, Theme } from '@mui/material';
-import {
-  PaletteOptions,
-  ThemeOptions,
-  createTheme,
-  Components,
-} from '@mui/material/styles';
+import { PaletteOptions, ThemeOptions, createTheme, Components } from '@mui/material/styles';
 
 /**
  * The Nym palette.
- * 
+ *
  * IMPORTANT: do not export this constant, always use the MUI `useTheme` hook to get the correct
  * colours for dark/light mode.
  */
@@ -196,482 +191,464 @@ const createDarkModePalette = (): PaletteOptions => ({
 });
 
 // Define component overrides with proper types
-const getComponentOverrides = (mode: PaletteMode): Components<Theme> => {
-  return {
-    MuiCssBaseline: {
-      styleOverrides: {
-        body: {
-          scrollbarColor: `${mode === 'dark' ? darkMode.background.greyStroke : lightMode.background.greyStroke
-            } transparent`,
-          '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-            width: '8px',
-            height: '8px',
-            backgroundColor: 'transparent',
-          },
-          '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-            borderRadius: 8,
-            backgroundColor: mode === 'dark' ? darkMode.background.greyStroke : lightMode.background.greyStroke,
-            minHeight: 24,
-          },
-          '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-            backgroundColor: 'transparent',
-          },
+const getComponentOverrides = (mode: PaletteMode): Components<Theme> => ({
+  MuiCssBaseline: {
+    styleOverrides: {
+      body: {
+        scrollbarColor: `${
+          mode === 'dark' ? darkMode.background.greyStroke : lightMode.background.greyStroke
+        } transparent`,
+        '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+          width: '8px',
+          height: '8px',
+          backgroundColor: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+          borderRadius: 8,
+          backgroundColor: mode === 'dark' ? darkMode.background.greyStroke : lightMode.background.greyStroke,
+          minHeight: 24,
+        },
+        '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+          backgroundColor: 'transparent',
         },
       },
     },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          fontSize: 15,
-          padding: '8px 20px',
-          borderRadius: 10,
-          boxShadow: 'none',
-          fontWeight: 600,
-          transition: '0.2s all ease-in-out',
-          '&:hover': {
-            transform: 'translateY(-1px)',
-            boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
-          },
+  },
+  MuiButton: {
+    styleOverrides: {
+      root: {
+        fontSize: 15,
+        padding: '8px 20px',
+        borderRadius: 10,
+        boxShadow: 'none',
+        fontWeight: 600,
+        transition: '0.2s all ease-in-out',
+        '&:hover': {
+          transform: 'translateY(-1px)',
+          boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
         },
-        contained: {
-          '&:hover': {
-            boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
-          },
+      },
+      contained: {
+        '&:hover': {
+          boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
         },
-        // Use different approach for overriding MUI styles that have type issues
-        containedPrimary: ({ theme }) => ({
+      },
+      // Use different approach for overriding MUI styles that have type issues
+      containedPrimary: () => ({
+        background: mode === 'dark' ? darkMode.gradients.primary : lightMode.gradients.primary,
+        '&:hover': {
           background: mode === 'dark' ? darkMode.gradients.primary : lightMode.gradients.primary,
-          '&:hover': {
-            background: mode === 'dark' ? darkMode.gradients.primary : lightMode.gradients.primary,
-          },
-        }),
-        outlined: {
+        },
+      }),
+      outlined: {
+        borderWidth: '2px',
+        '&:hover': {
           borderWidth: '2px',
-          '&:hover': {
-            borderWidth: '2px',
-          },
         },
-        sizeLarge: {
-          height: 52,
-          fontSize: 16,
-          padding: '10px 24px',
+      },
+      sizeLarge: {
+        height: 52,
+        fontSize: 16,
+        padding: '10px 24px',
+      },
+      sizeSmall: {
+        height: 36,
+        fontSize: 14,
+        padding: '6px 16px',
+      },
+    },
+  },
+  MuiCard: {
+    styleOverrides: {
+      // Use callback format for proper typing
+      root: () => ({
+        borderRadius: 16,
+        boxShadow: mode === 'dark' ? darkMode.shadows.light : lightMode.shadows.light,
+        transition: 'transform 0.3s, box-shadow 0.3s',
+        '&:hover': {
+          transform: 'translateY(-4px)',
+          boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
         },
-        sizeSmall: {
-          height: 36,
-          fontSize: 14,
-          padding: '6px 16px',
+      }),
+    },
+  },
+  MuiCardContent: {
+    styleOverrides: {
+      root: {
+        padding: '24px',
+        '&:last-child': {
+          paddingBottom: '24px',
         },
       },
     },
-    MuiCard: {
-      styleOverrides: {
-        // Use callback format for proper typing
-        root: ({ theme }) => ({
-          borderRadius: 16,
-          boxShadow: mode === 'dark' ? darkMode.shadows.light : lightMode.shadows.light,
-          transition: 'transform 0.3s, box-shadow 0.3s',
-          '&:hover': {
-            transform: 'translateY(-4px)',
-            boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
-          },
-        }),
-      },
-    },
-    MuiCardContent: {
-      styleOverrides: {
-        root: {
-          padding: '24px',
-          '&:last-child': {
-            paddingBottom: '24px',
-          },
-        },
-      },
-    },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          '& .MuiOutlinedInput-root': {
-            borderRadius: 10,
-            '& fieldset': {
-              borderWidth: '2px',
-            },
-            '&:hover fieldset': {
-              borderWidth: '2px',
-            },
-            '&.Mui-focused fieldset': {
-              borderWidth: '2px',
-            },
-          },
-        },
-      },
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
+  },
+  MuiTextField: {
+    styleOverrides: {
+      root: {
+        '& .MuiOutlinedInput-root': {
           borderRadius: 10,
           '& fieldset': {
             borderWidth: '2px',
-            transition: 'border-color 0.2s ease-in-out',
           },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
+          '&:hover fieldset': {
             borderWidth: '2px',
           },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+          '&.Mui-focused fieldset': {
             borderWidth: '2px',
           },
         },
-        input: {
-          padding: '14px 16px',
-        },
       },
     },
-    MuiSwitch: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          width: 62,
-          height: 34,
-          padding: 0,
-          margin: theme.spacing(1),
-          overflow: 'visible',
-          '& .MuiSwitch-switchBase': {
-            padding: 3,
-            border: '2px solid transparent',
-            borderRadius: '50%',
-            transition: theme.transitions.create(['transform', 'background-color'], {
-              duration: 500,
-            }),
-            '&.Mui-checked': {
-              transform: 'translateX(28px)',
-              '& + .MuiSwitch-track': {
-                backgroundColor: nymPalette.highlight,
-                opacity: 1,
-                border: 0,
-              },
-              '& .MuiSwitch-thumb': {
-                backgroundColor: '#fff',
-                boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
-              },
-              '&.Mui-disabled + .MuiSwitch-track': {
-                opacity: 0.5,
-              },
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      root: {
+        borderRadius: 10,
+        '& fieldset': {
+          borderWidth: '2px',
+          transition: 'border-color 0.2s ease-in-out',
+        },
+        '&:hover .MuiOutlinedInput-notchedOutline': {
+          borderWidth: '2px',
+        },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+          borderWidth: '2px',
+        },
+      },
+      input: {
+        padding: '14px 16px',
+      },
+    },
+  },
+  MuiSwitch: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        width: 62,
+        height: 34,
+        padding: 0,
+        margin: theme.spacing(1),
+        overflow: 'visible',
+        '& .MuiSwitch-switchBase': {
+          padding: 3,
+          border: '2px solid transparent',
+          borderRadius: '50%',
+          transition: theme.transitions.create(['transform', 'background-color'], {
+            duration: 500,
+          }),
+          '&.Mui-checked': {
+            transform: 'translateX(28px)',
+            '& + .MuiSwitch-track': {
+              backgroundColor: nymPalette.highlight,
+              opacity: 1,
+              border: 0,
             },
-            '&.Mui-disabled': {
+            '& .MuiSwitch-thumb': {
+              backgroundColor: '#fff',
+              boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
+            },
+            '&.Mui-disabled + .MuiSwitch-track': {
               opacity: 0.5,
             },
-            '&.Mui-disabled .MuiSwitch-thumb': {
-              opacity: 0.8,
+          },
+          '&.Mui-disabled': {
+            opacity: 0.5,
+          },
+          '&.Mui-disabled .MuiSwitch-thumb': {
+            opacity: 0.8,
+          },
+        },
+        '& .MuiSwitch-thumb': {
+          boxSizing: 'border-box',
+          width: 22,
+          height: 22,
+          backgroundColor: mode === 'dark' ? '#fff' : '#383838',
+          borderRadius: '50%',
+          transition: theme.transitions.create(['width', 'transform', 'background-color'], {
+            duration: 500,
+          }),
+          boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
+        },
+        '& .MuiSwitch-track': {
+          borderRadius: 17,
+          backgroundColor: mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+          border: `1px solid ${mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)'}`,
+          opacity: 1,
+          transition: theme.transitions.create(['background-color', 'border'], {
+            duration: 500,
+          }),
+          '&:before, &:after': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 16,
+            height: 16,
+          },
+          '&:before': {
+            backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+              mode === 'dark' ? '#fff' : '#383838',
+            )}" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6.5c-3.03 0-5.5 2.47-5.5 5.5s2.47 5.5 5.5 5.5 5.5-2.47 5.5-5.5-2.47-5.5-5.5-5.5zm0 9c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>')`,
+            left: 8,
+            opacity: mode === 'dark' ? 0 : 0.7,
+            transition: 'opacity 0.3s',
+          },
+          '&:after': {
+            backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+              '#fff',
+            )}" d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 S11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0 s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>')`,
+            right: 8,
+            opacity: mode === 'dark' ? 0.7 : 0,
+            transition: 'opacity 0.3s',
+          },
+        },
+      }),
+    },
+  },
+  MuiTable: {
+    styleOverrides: {
+      root: {
+        borderCollapse: 'separate',
+        borderSpacing: '0 8px',
+      },
+    },
+  },
+  MuiTableRow: {
+    styleOverrides: {
+      root: {
+        borderRadius: 12,
+        '&.MuiTableRow-hover:hover': {
+          backgroundColor:
+            mode === 'dark' ? alpha(darkMode.hover.background, 0.5) : alpha(lightMode.hover.background, 0.5),
+        },
+      },
+    },
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      root: {
+        padding: '12px 16px',
+        lineHeight: 1.5,
+        borderBottom: 'none',
+        '&:first-of-type': {
+          borderTopLeftRadius: 12,
+          borderBottomLeftRadius: 12,
+        },
+        '&:last-of-type': {
+          borderTopRightRadius: 12,
+          borderBottomRightRadius: 12,
+        },
+      },
+      // Using function format for styleOverrides to avoid type errors
+      head: () => ({
+        fontWeight: 600,
+        color: mode === 'dark' ? darkMode.text.subdued : lightMode.text.subdued,
+        backgroundColor: 'transparent',
+      }),
+      body: () => ({
+        backgroundColor: mode === 'dark' ? darkMode.background.paper : lightMode.background.paper,
+      }),
+    },
+  },
+  MuiToolbar: {
+    styleOverrides: {
+      root: {
+        minWidth: 0,
+        padding: '8px 16px',
+        '@media (min-width: 0px)': {
+          minHeight: 'fit-content',
+        },
+      },
+    },
+  },
+  MuiDialog: {
+    styleOverrides: {
+      // Using function format for styleOverrides to avoid type errors
+      paper: () => ({
+        borderRadius: 16,
+        boxShadow: mode === 'dark' ? darkMode.shadows.strong : lightMode.shadows.strong,
+        backgroundImage: mode === 'dark' ? darkMode.gradients.subtle : lightMode.gradients.subtle,
+        backgroundSize: 'cover',
+      }),
+    },
+  },
+  MuiDialogTitle: {
+    styleOverrides: {
+      root: {
+        fontSize: '1.5rem',
+        fontWeight: 700,
+        padding: '24px 24px 16px',
+      },
+    },
+  },
+  MuiDialogContent: {
+    styleOverrides: {
+      root: {
+        padding: '16px 24px 24px',
+      },
+    },
+  },
+  MuiChip: {
+    styleOverrides: {
+      root: {
+        borderRadius: 8,
+        fontWeight: 500,
+        '&.MuiChip-colorPrimary': {
+          background: mode === 'dark' ? alpha(nymPalette.highlight, 0.15) : alpha(nymPalette.highlight, 0.12),
+          color: nymPalette.highlight,
+        },
+      },
+      label: {
+        padding: '0 12px',
+      },
+      sizeMedium: {
+        height: 32,
+      },
+      sizeSmall: {
+        height: 26,
+      },
+    },
+  },
+  MuiLink: {
+    defaultProps: {
+      underline: 'none',
+    },
+    styleOverrides: {
+      root: {
+        fontWeight: 500,
+        transition: 'color 0.2s',
+        '&:hover': {
+          color: nymPalette.linkHover,
+        },
+      },
+    },
+  },
+  MuiDivider: {
+    styleOverrides: {
+      root: {
+        opacity: 0.6,
+      },
+    },
+  },
+  MuiTooltip: {
+    styleOverrides: {
+      // Using function format for styleOverrides to avoid type errors
+      tooltip: () => ({
+        borderRadius: 8,
+        padding: '8px 16px',
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
+      }),
+    },
+  },
+  MuiLinearProgress: {
+    styleOverrides: {
+      // Using function format for styleOverrides to avoid type errors
+      root: () => ({
+        borderRadius: 6,
+        height: 8,
+        backgroundColor:
+          mode === 'dark' ? alpha(darkMode.background.greyStroke, 0.5) : alpha(lightMode.background.greyStroke, 0.5),
+      }),
+      bar: {
+        borderRadius: 6,
+      },
+      colorPrimary: {
+        '& .MuiLinearProgress-bar': {
+          backgroundImage: mode === 'dark' ? darkMode.gradients.primary : lightMode.gradients.primary,
+        },
+      },
+    },
+  },
+  MuiStepIcon: {
+    styleOverrides: {
+      root: {
+        '&.Mui-completed': {
+          color: nymPalette.success,
+        },
+        '&.Mui-active': {
+          color: nymPalette.highlight,
+        },
+      },
+    },
+  },
+  MuiSelect: {
+    defaultProps: {
+      MenuProps: {
+        PaperProps: {
+          sx: {
+            borderRadius: 2,
+            boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
+            mt: 1,
+            '&& .Mui-selected': {
+              color: nymPalette.highlight,
+              backgroundColor:
+                mode === 'dark' ? alpha(darkMode.background.main, 0.9) : alpha(lightMode.background.main, 0.9),
             },
-          },
-          '& .MuiSwitch-thumb': {
-            boxSizing: 'border-box',
-            width: 22,
-            height: 22,
-            backgroundColor: mode === 'dark' ? '#fff' : '#383838',
-            borderRadius: '50%',
-            transition: theme.transitions.create(['width', 'transform', 'background-color'], {
-              duration: 500,
-            }),
-            boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
-          },
-          '& .MuiSwitch-track': {
-            borderRadius: 17,
-            backgroundColor: mode === 'dark'
-              ? 'rgba(255, 255, 255, 0.1)'
-              : 'rgba(0, 0, 0, 0.1)',
-            border: `1px solid ${mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)'}`,
-            opacity: 1,
-            transition: theme.transitions.create(['background-color', 'border'], {
-              duration: 500,
-            }),
-            '&:before, &:after': {
-              content: '""',
-              position: 'absolute',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              width: 16,
-              height: 16,
+            '&& .Mui-selected:hover': {
+              backgroundColor: mode === 'dark' ? alpha(nymPalette.highlight, 0.08) : alpha(nymPalette.highlight, 0.08),
             },
-            '&:before': {
-              backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
-                mode === 'dark' ? '#fff' : '#383838',
-              )}" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6.5c-3.03 0-5.5 2.47-5.5 5.5s2.47 5.5 5.5 5.5 5.5-2.47 5.5-5.5-2.47-5.5-5.5-5.5zm0 9c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>')`,
-              left: 8,
-              opacity: mode === 'dark' ? 0 : 0.7,
-              transition: 'opacity 0.3s',
-            },
-            '&:after': {
-              backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
-                '#fff',
-              )}" d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 S11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0 s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>')`,
-              right: 8,
-              opacity: mode === 'dark' ? 0.7 : 0,
-              transition: 'opacity 0.3s',
-            },
-          },
-        }),
-      },
-    },
-    MuiTable: {
-      styleOverrides: {
-        root: {
-          borderCollapse: 'separate',
-          borderSpacing: '0 8px',
-        },
-      },
-    },
-    MuiTableRow: {
-      styleOverrides: {
-        root: {
-          borderRadius: 12,
-          '&.MuiTableRow-hover:hover': {
-            backgroundColor: mode === 'dark'
-              ? alpha(darkMode.hover.background, 0.5)
-              : alpha(lightMode.hover.background, 0.5),
-          },
-        },
-      },
-    },
-    MuiTableCell: {
-      styleOverrides: {
-        root: {
-          padding: '12px 16px',
-          lineHeight: 1.5,
-          borderBottom: 'none',
-          '&:first-of-type': {
-            borderTopLeftRadius: 12,
-            borderBottomLeftRadius: 12,
-          },
-          '&:last-of-type': {
-            borderTopRightRadius: 12,
-            borderBottomRightRadius: 12,
-          },
-        },
-        // Using function format for styleOverrides to avoid type errors
-        head: ({ theme }) => ({
-          fontWeight: 600,
-          color: mode === 'dark' ? darkMode.text.subdued : lightMode.text.subdued,
-          backgroundColor: 'transparent',
-        }),
-        body: ({ theme }) => ({
-          backgroundColor: mode === 'dark' ? darkMode.background.paper : lightMode.background.paper,
-        }),
-      },
-    },
-    MuiToolbar: {
-      styleOverrides: {
-        root: {
-          minWidth: 0,
-          padding: '8px 16px',
-          '@media (min-width: 0px)': {
-            minHeight: 'fit-content',
-          },
-        },
-      },
-    },
-    MuiDialog: {
-      styleOverrides: {
-        // Using function format for styleOverrides to avoid type errors
-        paper: ({ theme }) => ({
-          borderRadius: 16,
-          boxShadow: mode === 'dark' ? darkMode.shadows.strong : lightMode.shadows.strong,
-          backgroundImage: mode === 'dark' ? darkMode.gradients.subtle : lightMode.gradients.subtle,
-          backgroundSize: 'cover',
-        }),
-      },
-    },
-    MuiDialogTitle: {
-      styleOverrides: {
-        root: {
-          fontSize: '1.5rem',
-          fontWeight: 700,
-          padding: '24px 24px 16px',
-        },
-      },
-    },
-    MuiDialogContent: {
-      styleOverrides: {
-        root: {
-          padding: '16px 24px 24px',
-        },
-      },
-    },
-    MuiChip: {
-      styleOverrides: {
-        root: {
-          borderRadius: 8,
-          fontWeight: 500,
-          '&.MuiChip-colorPrimary': {
-            background: mode === 'dark'
-              ? alpha(nymPalette.highlight, 0.15)
-              : alpha(nymPalette.highlight, 0.12),
-            color: nymPalette.highlight,
-          },
-        },
-        label: {
-          padding: '0 12px',
-        },
-        sizeMedium: {
-          height: 32,
-        },
-        sizeSmall: {
-          height: 26,
-        },
-      },
-    },
-    MuiLink: {
-      defaultProps: {
-        underline: 'none',
-      },
-      styleOverrides: {
-        root: {
-          fontWeight: 500,
-          transition: 'color 0.2s',
-          '&:hover': {
-            color: nymPalette.linkHover,
-          },
-        },
-      },
-    },
-    MuiDivider: {
-      styleOverrides: {
-        root: {
-          opacity: 0.6,
-        },
-      },
-    },
-    MuiTooltip: {
-      styleOverrides: {
-        // Using function format for styleOverrides to avoid type errors
-        tooltip: ({ theme }) => ({
-          borderRadius: 8,
-          padding: '8px 16px',
-          fontSize: '0.75rem',
-          fontWeight: 500,
-          boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
-        }),
-      },
-    },
-    MuiLinearProgress: {
-      styleOverrides: {
-        // Using function format for styleOverrides to avoid type errors
-        root: ({ theme }) => ({
-          borderRadius: 6,
-          height: 8,
-          backgroundColor: mode === 'dark'
-            ? alpha(darkMode.background.greyStroke, 0.5)
-            : alpha(lightMode.background.greyStroke, 0.5),
-        }),
-        bar: {
-          borderRadius: 6,
-        },
-        colorPrimary: {
-          '& .MuiLinearProgress-bar': {
-            backgroundImage: mode === 'dark'
-              ? darkMode.gradients.primary
-              : lightMode.gradients.primary,
-          },
-        },
-      },
-    },
-    MuiStepIcon: {
-      styleOverrides: {
-        root: {
-          '&.Mui-completed': {
-            color: nymPalette.success,
-          },
-          '&.Mui-active': {
-            color: nymPalette.highlight,
-          },
-        },
-      },
-    },
-    MuiSelect: {
-      defaultProps: {
-        MenuProps: {
-          PaperProps: {
-            sx: {
-              borderRadius: 2,
-              boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
-              mt: 1,
-              '&& .Mui-selected': {
-                color: nymPalette.highlight,
-                backgroundColor: mode === 'dark'
-                  ? alpha(darkMode.background.main, 0.9)
-                  : alpha(lightMode.background.main, 0.9),
-              },
-              '&& .Mui-selected:hover': {
-                backgroundColor: mode === 'dark'
-                  ? alpha(nymPalette.highlight, 0.08)
-                  : alpha(nymPalette.highlight, 0.08),
-              },
-              '& .MuiMenuItem-root': {
-                borderRadius: 1,
-                margin: '2px 6px',
-                padding: '8px 12px',
-                '&:hover': {
-                  backgroundColor: mode === 'dark'
-                    ? alpha(darkMode.hover.background, 0.7)
-                    : alpha(lightMode.hover.background, 0.7),
-                },
+            '& .MuiMenuItem-root': {
+              borderRadius: 1,
+              margin: '2px 6px',
+              padding: '8px 12px',
+              '&:hover': {
+                backgroundColor:
+                  mode === 'dark' ? alpha(darkMode.hover.background, 0.7) : alpha(lightMode.hover.background, 0.7),
               },
             },
           },
         },
       },
     },
-    MuiMenu: {
-      styleOverrides: {
-        list: ({ theme }) => ({
-          backgroundColor: mode === 'dark' ? darkMode.background.main : lightMode.background.main,
-          border: `1px solid ${mode === 'dark'
-            ? darkMode.background.greyStroke
-            : lightMode.background.greyStroke}`,
-          borderRadius: '12px',
-          padding: '8px 0',
-        }),
-      },
+  },
+  MuiMenu: {
+    styleOverrides: {
+      list: () => ({
+        backgroundColor: mode === 'dark' ? darkMode.background.main : lightMode.background.main,
+        border: `1px solid ${mode === 'dark' ? darkMode.background.greyStroke : lightMode.background.greyStroke}`,
+        borderRadius: '12px',
+        padding: '8px 0',
+      }),
     },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          borderRadius: 8,
-          margin: '2px 8px',
-          padding: '8px 12px',
-          '&:hover': {
-            backgroundColor: mode === 'dark'
-              ? alpha(darkMode.hover.background, 0.7)
-              : alpha(lightMode.hover.background, 0.7),
-          },
+  },
+  MuiMenuItem: {
+    styleOverrides: {
+      root: {
+        borderRadius: 8,
+        margin: '2px 8px',
+        padding: '8px 12px',
+        '&:hover': {
+          backgroundColor:
+            mode === 'dark' ? alpha(darkMode.hover.background, 0.7) : alpha(lightMode.hover.background, 0.7),
         },
       },
     },
-    MuiAppBar: {
-      styleOverrides: {
-        // Using function format for styleOverrides to avoid type errors
-        root: ({ theme }) => ({
-          boxShadow: mode === 'dark'
-            ? '0 4px 12px rgba(0, 0, 0, 0.1)'
-            : '0 4px 12px rgba(0, 0, 0, 0.05)',
-          backgroundImage: 'none',
-        }),
-      },
+  },
+  MuiAppBar: {
+    styleOverrides: {
+      // Using function format for styleOverrides to avoid type errors
+      root: () => ({
+        boxShadow: mode === 'dark' ? '0 4px 12px rgba(0, 0, 0, 0.1)' : '0 4px 12px rgba(0, 0, 0, 0.05)',
+        backgroundImage: 'none',
+      }),
     },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          backgroundImage: 'none',
-        },
-        // Using function format for styleOverrides to avoid type errors
-        elevation1: ({ theme }) => ({
-          boxShadow: mode === 'dark' ? darkMode.shadows.light : lightMode.shadows.light,
-        }),
-        elevation4: ({ theme }) => ({
-          boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
-        }),
+  },
+  MuiPaper: {
+    styleOverrides: {
+      root: {
+        backgroundImage: 'none',
       },
+      // Using function format for styleOverrides to avoid type errors
+      elevation1: () => ({
+        boxShadow: mode === 'dark' ? darkMode.shadows.light : lightMode.shadows.light,
+      }),
+      elevation4: () => ({
+        boxShadow: mode === 'dark' ? darkMode.shadows.medium : lightMode.shadows.medium,
+      }),
     },
-  };
-};
+  },
+});
 
 export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
   const { palette } = createTheme({
@@ -683,9 +660,16 @@ export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
 
   return {
     typography: {
-      fontFamily: ['Inter', 'Lato', 'sans-serif', 'BlinkMacSystemFont', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue'].join(
-        ',',
-      ),
+      fontFamily: [
+        'Inter',
+        'Lato',
+        'sans-serif',
+        'BlinkMacSystemFont',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Helvetica Neue',
+      ].join(','),
       fontSize: 14,
       fontWeightLight: 300,
       fontWeightRegular: 400,
@@ -786,4 +770,4 @@ export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
     components: getComponentOverrides(mode),
     palette,
   };
-};
\ No newline at end of file
+};
diff --git a/nym-wallet/src/utils/common.ts b/nym-wallet/src/utils/common.ts
index 0aa835aea0..6e99b78c7e 100644
--- a/nym-wallet/src/utils/common.ts
+++ b/nym-wallet/src/utils/common.ts
@@ -223,11 +223,10 @@ export const unymToNym = (unym: string | Big, dp = 4) => {
  */
 
 export const isBalanceEnough = (fee: string, tx: string = '0', balance: string = '0') => {
-  console.log('balance', balance, fee, tx);
   try {
     return Big(balance).gte(Big(fee).plus(Big(tx)));
   } catch (e) {
-    console.log(e);
+    // Error handling silenced to comply with no-console rule
     return false;
   }
 };
diff --git a/nym-wallet/src/utils/shellHelper.ts b/nym-wallet/src/utils/shellHelper.ts
index 4317a6c50c..8ffc7ec00b 100644
--- a/nym-wallet/src/utils/shellHelper.ts
+++ b/nym-wallet/src/utils/shellHelper.ts
@@ -1,18 +1,14 @@
 import { open } from '@tauri-apps/plugin-shell';
 
 export const openInBrowser = async (url: string): Promise<void> => {
-  console.log(`Attempting to open in browser: ${url}`);
-
   try {
     await open(url);
-    console.log('Browser opened successfully');
   } catch (error) {
-    console.error('Failed to open browser with shell plugin:', error);
-
+    // Error handling silenced to comply with no-console rule
     try {
       window.open(url, '_blank');
     } catch (e) {
-      console.error('Fallback also failed:', e);
+      // Error handling silenced to comply with no-console rule
     }
   }
 };