diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx
index b4e7752bcd..4bf165d52e 100644
--- a/explorer/src/components/Filters/Filters.tsx
+++ b/explorer/src/components/Filters/Filters.tsx
@@ -142,11 +142,10 @@ export const Filters = () => {
}
onClick={handleToggleShowFilters}
- sx={{ textTransform: 'none' }}
+ sx={{ textTransform: 'none', width: isMobile ? '100%' : 'inherit' }}
>
Advanced filters
diff --git a/explorer/src/components/MixNodes/Economics/Rows.ts b/explorer/src/components/MixNodes/Economics/Rows.ts
index e4c674f551..ace2cec61a 100644
--- a/explorer/src/components/MixNodes/Economics/Rows.ts
+++ b/explorer/src/components/MixNodes/Economics/Rows.ts
@@ -5,10 +5,16 @@ import { EconomicsInfoRowWithIndex } from './types';
const selectionChance = (economicDynamicsStats: ApiState | undefined) => {
const inclusionProbability = economicDynamicsStats?.data?.active_set_inclusion_probability;
+ // TODO: when v2 will be deployed, remove cases: VeryHigh, Moderate and VeryLow
switch (inclusionProbability) {
+ case 'VeryLow':
+ return 'Very Low';
+ case 'VeryHigh':
+ return 'Very High';
case 'High':
case 'Good':
case 'Low':
+ case 'Moderate':
return inclusionProbability;
default:
return '-';
diff --git a/explorer/src/components/MixNodes/Economics/Table.tsx b/explorer/src/components/MixNodes/Economics/Table.tsx
index 356a4c32b2..5977847436 100644
--- a/explorer/src/components/MixNodes/Economics/Table.tsx
+++ b/explorer/src/components/MixNodes/Economics/Table.tsx
@@ -19,12 +19,16 @@ const textColour = (value: EconomicsRowsType, field: string, theme: Theme) => {
return theme.palette.warning.main;
}
if (field === 'selectionChance') {
+ // TODO: when v2 will be deployed, remove cases: VeryHigh, Moderate and VeryLow
switch (fieldValue) {
case 'High':
+ case 'VeryHigh':
return theme.palette.nym.networkExplorer.selectionChance.overModerate;
case 'Good':
+ case 'Moderate':
return theme.palette.nym.networkExplorer.selectionChance.moderate;
case 'Low':
+ case 'VeryLow':
return theme.palette.nym.networkExplorer.selectionChance.underModerate;
default:
return theme.palette.nym.wallet.fee;
diff --git a/explorer/src/components/MixNodes/StatusDropdown.tsx b/explorer/src/components/MixNodes/StatusDropdown.tsx
index 1dba2c2f95..18263edf6e 100644
--- a/explorer/src/components/MixNodes/StatusDropdown.tsx
+++ b/explorer/src/components/MixNodes/StatusDropdown.tsx
@@ -46,7 +46,7 @@ export const MixNodeStatusDropdown: React.FC = ({ st
}
}}
sx={{
- width: isMobile ? 'auto' : 200,
+ width: isMobile ? '50%' : 200,
...sx,
}}
>
diff --git a/explorer/src/components/TableToolbar.tsx b/explorer/src/components/TableToolbar.tsx
index c6a64dd6c5..7452b4707a 100644
--- a/explorer/src/components/TableToolbar.tsx
+++ b/explorer/src/components/TableToolbar.tsx
@@ -30,39 +30,40 @@ export const TableToolbar: React.FC = ({
width: '100%',
marginBottom: 2,
display: 'flex',
- flexDirection: isMobile ? 'column-reverse' : 'row',
+ flexDirection: isMobile ? 'column' : 'row',
justifyContent: 'space-between',
}}
>
-
- {childrenBefore}
-
-
-
+
+
+ {childrenBefore}
+
+
= ({
placeholder="search"
onChange={(event) => onChangeSearch(event.target.value)}
/>
+
+
{withFilters && }
{childrenAfter}
diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts
index 241d656edf..dd342ac149 100644
--- a/explorer/src/typeDefs/explorer-api.ts
+++ b/explorer/src/typeDefs/explorer-api.ts
@@ -215,7 +215,8 @@ export type UptimeStoryResponse = {
export type MixNodeEconomicDynamicsStatsResponse = {
stake_saturation: number;
- active_set_inclusion_probability: 'High' | 'Good' | 'Low';
+ // TODO: when v2 will be deployed, remove cases: VeryHigh, Moderate and VeryLow
+ active_set_inclusion_probability: 'High' | 'Good' | 'Low' | 'VeryLow' | 'Moderate' | 'VeryHigh';
reserve_set_inclusion_probability: 'High' | 'Good' | 'Low';
estimated_total_node_reward: number;
estimated_operator_reward: number;
diff --git a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
index fa7ae1659c..a9da0f1ef3 100644
--- a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
+++ b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Alert, Box, Paper, Dialog, DialogContent, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
import { Close } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
const passwordCreationSteps = [
'Log out',
@@ -10,34 +11,46 @@ const passwordCreationSteps = [
'Now you can create multiple accounts',
];
-export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => (
-
-);
+export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => {
+ const theme = useTheme();
+ return (
+
+ );
+};
diff --git a/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
index efe5a5428c..91525b8a54 100644
--- a/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
+++ b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
@@ -12,6 +12,7 @@ import {
Divider,
} from '@mui/material';
import { Add, ArrowDownwardSharp, Close } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
import { AccountsContext } from 'src/context';
import { AccountItem } from '../AccountItem';
import { ConfirmPasswordModal } from './ConfirmPasswordModal';
@@ -21,6 +22,8 @@ export const AccountsModal = () => {
useContext(AccountsContext);
const [accountToSwitchTo, setAccountToSwitchTo] = useState();
+ const theme = useTheme();
+
const handleClose = () => {
setDialogToDisplay(undefined);
setError(undefined);
@@ -47,48 +50,51 @@ export const AccountsModal = () => {
open={dialogToDisplay === 'Accounts'}
onClose={handleClose}
fullWidth
- PaperComponent={Paper}
- PaperProps={{ elevation: 0 }}
+ PaperProps={{
+ style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
+ }}
>
-
-
- Accounts
-
-
-
-
-
- Switch between accounts
-
-
-
- {accounts?.map(({ id, address }) => (
- {
- if (selectedAccount?.id !== id) {
- setAccountToSwitchTo(id);
- }
- }}
- />
- ))}
-
-
-
- } onClick={() => setDialogToDisplay('Import')}>
- Import account
-
- }
- onClick={() => setDialogToDisplay('Add')}
- >
- Add new account
-
-
+
+
+
+ Accounts
+
+
+
+
+
+ Switch between accounts
+
+
+
+ {accounts?.map(({ id, address }) => (
+ {
+ if (selectedAccount?.id !== id) {
+ setAccountToSwitchTo(id);
+ }
+ }}
+ />
+ ))}
+
+
+
+ } onClick={() => setDialogToDisplay('Import')}>
+ Import account
+
+ }
+ onClick={() => setDialogToDisplay('Add')}
+ >
+ Add new account
+
+
+
);
};
diff --git a/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx b/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
index 29694fcda8..07baa9b8d8 100644
--- a/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
+++ b/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
-import { Box, Paper, Dialog, DialogTitle, IconButton, Typography } from '@mui/material';
-import { ArrowBack } from '@mui/icons-material';
+import { Paper, Dialog, DialogTitle, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
import { ConfirmPassword } from 'src/components/ConfirmPassword';
import { AccountsContext } from 'src/context';
@@ -14,28 +14,32 @@ export const ConfirmPasswordModal = ({
onConfirm: (password: string) => Promise;
}) => {
const { isLoading, error } = useContext(AccountsContext);
+ const theme = useTheme();
return (
);
};
diff --git a/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx b/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
index 91a0a65e9d..8ddbb207b3 100644
--- a/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
+++ b/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
@@ -12,6 +12,7 @@ import {
Typography,
} from '@mui/material';
import { Close } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
import { AccountsContext } from 'src/context';
export const EditAccountModal = () => {
@@ -19,6 +20,8 @@ export const EditAccountModal = () => {
const { accountToEdit, dialogToDisplay, setDialogToDisplay, handleEditAccount } = useContext(AccountsContext);
+ const theme = useTheme();
+
useEffect(() => {
setAccountName(accountToEdit ? accountToEdit?.id : '');
}, [accountToEdit]);
@@ -28,48 +31,51 @@ export const EditAccountModal = () => {
open={dialogToDisplay === 'Edit'}
onClose={() => setDialogToDisplay('Accounts')}
fullWidth
- PaperComponent={Paper}
- PaperProps={{ elevation: 0 }}
+ PaperProps={{
+ style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
+ }}
>
-
-
- Edit account name
- setDialogToDisplay('Accounts')}>
-
-
-
-
- New wallet address
-
-
-
-
-
+
+
+ Edit account name
+ setDialogToDisplay('Accounts')}>
+
+
+
+
+ New wallet address
+
+
+
+
+ setAccountName(e.target.value)}
+ autoFocus
+ />
+
+
+
+
-
-
-
-
+ disableElevation
+ variant="contained"
+ size="large"
+ onClick={() => {
+ if (accountToEdit) {
+ handleEditAccount({ ...accountToEdit, id: accountName });
+ setDialogToDisplay('Accounts');
+ }
+ }}
+ disabled={!accountName?.length}
+ >
+ Edit
+
+
+
);
};
diff --git a/nym-wallet/src/components/Bonding/Bond.tsx b/nym-wallet/src/components/Bonding/Bond.tsx
index 3392cde43f..1f96da875a 100644
--- a/nym-wallet/src/components/Bonding/Bond.tsx
+++ b/nym-wallet/src/components/Bonding/Bond.tsx
@@ -14,11 +14,11 @@ export const Bond = ({
- Bond a mixnode or a gateway
+ Bond a mixnode or a gateway
-
+
{hasVestingTokens && setValue('tokenPool', pool)} />}
{step === 1 && (
<>
-
+
diff --git a/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx b/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx
index c2bf747d83..3151ffad5d 100644
--- a/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx
+++ b/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx
@@ -152,18 +152,16 @@ export const BondMixnodeModal = ({
subHeader={`Step ${step}/2`}
okLabel="Next"
>
-
-
-
+
);
};
diff --git a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
index 50921df9e1..4ff55d5dc3 100644
--- a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
+++ b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
@@ -53,13 +53,15 @@ export const NodeSettings = ({
return;
}
- // TODO: this will have to be updated with allowing users to provide their operating cost in the form
- const defaultCostParams = await attachDefaultOperatingCost(toPercentFloatString(pm));
+ if (pm) {
+ // TODO: this will have to be updated with allowing users to provide their operating cost in the form
+ const defaultCostParams = await attachDefaultOperatingCost(toPercentFloatString(pm));
- if (isVesting) {
- await getFee(simulateVestingUpdateMixnodeCostParams, defaultCostParams);
- } else {
- await getFee(simulateUpdateMixnodeCostParams, defaultCostParams);
+ if (isVesting) {
+ await getFee(simulateVestingUpdateMixnodeCostParams, defaultCostParams);
+ } else {
+ await getFee(simulateUpdateMixnodeCostParams, defaultCostParams);
+ }
}
};
@@ -112,7 +114,7 @@ export const NodeSettings = ({
Set profit margin
- setPm(e.target.value)} fullWidth />
+ setPm(e.target.value)} fullWidth />
{error && (
Profit margin should be a number between 0 and 100
diff --git a/nym-wallet/src/components/ConfirmTX.stories.tsx b/nym-wallet/src/components/ConfirmTX.stories.tsx
index 77bbf4fdcf..2eec07b7e3 100644
--- a/nym-wallet/src/components/ConfirmTX.stories.tsx
+++ b/nym-wallet/src/components/ConfirmTX.stories.tsx
@@ -10,9 +10,9 @@ export default {
const Template: ComponentStory = (args) => (
-
-
-
+
+
+
);
diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx
index 50873055e4..a6c1bb0dbf 100644
--- a/nym-wallet/src/components/Delegation/DelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx
@@ -213,8 +213,8 @@ export const DelegateModal: React.FC<{
onPrev={resetFeeState}
onConfirm={handleOk}
>
-
-
+
+
);
}
@@ -267,7 +267,7 @@ export const DelegateModal: React.FC<{
>
{errorIdentityKey}
-
+
{hasVestingContract && setTokenPool(pool)} />}
-
+