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 (
{isSelected && (
-
)}
}
>
-
{/* Account avatar with box wrapper to apply styling */}
-
) => {
e.stopPropagation();
@@ -176,4 +174,4 @@ export const AccountItem = ({
);
-};
\ 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 = () => {
{
-
Switch between accounts
-
- {
))}
-
+
-
-
-
- }
+ }
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 = () => {
);
-};
\ 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;
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) => {
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 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 =
// 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 =
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<{
{sorted?.length
- ? sorted.map((item: any, index: number) => {
+ ? sorted.map((item: any, _index: number) => {
if (isPendingDelegation(item)) {
- return ;
+ const pendingKey = `pending-${item.event.mix_id}-${item.event.address}-${item.node_identity}`;
+ return ;
}
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();
const [errorFee, setErrorFee] = useState();
+ 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 (
onNext()}
- okDisabled={!isValid || !memoIsValid || !feeAmountIsValid || !addressIsValid}
+ okDisabled={!isValid || !memoIsValid || !feeAmountIsValid || !addressIsValid || noAccount}
sx={sx}
backdropProps={backdropProps}
>
+ {noAccount && (
+
+ To start staking, sending or operating the on the NYM network, you first need to get native NYM tokens.
+
+ )}
+
@@ -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 = ({
-
+
Est. fee for this transaction will be shown on the next page
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}
);
-};
\ 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}
);
-};
\ 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 {}
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 => {
- 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 => ({
+ 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,')`,
+ left: 8,
+ opacity: mode === 'dark' ? 0 : 0.7,
+ transition: 'opacity 0.3s',
+ },
+ '&:after': {
+ backgroundImage: `url('data:image/svg+xml;utf8,')`,
+ 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,')`,
- left: 8,
- opacity: mode === 'dark' ? 0 : 0.7,
- transition: 'opacity 0.3s',
- },
- '&:after': {
- backgroundImage: `url('data:image/svg+xml;utf8,')`,
- 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 => {
- 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
}
}
};