diff --git a/nym-wallet/src/components/Accounts/MultiAccountWithPwdHowTo.tsx b/nym-wallet/src/components/Accounts/MultiAccountWithPwdHowTo.tsx index c5cda54150..29c1d84750 100644 --- a/nym-wallet/src/components/Accounts/MultiAccountWithPwdHowTo.tsx +++ b/nym-wallet/src/components/Accounts/MultiAccountWithPwdHowTo.tsx @@ -22,12 +22,12 @@ export const MultiAccountWithPwdHowTo = ({ show, handleClose }: { show: boolean; > - + This machine already has a password set on it - + In order to import or create account(s) you need to log in with your password or create a new one. Creating a - new password will overwrite any old one. Make sure your menonics are all wirtten down before creating a new + new password will overwrite any old one. Make sure your mnemonics are all written down before creating a new password. @@ -35,13 +35,14 @@ export const MultiAccountWithPwdHowTo = ({ show, handleClose }: { show: boolean; {passwordCreationSteps.map((step, index) => ( {`${index + 1}.`} - {`${step}`} + {`${step}`} ))} diff --git a/nym-wallet/src/components/Alert.tsx b/nym-wallet/src/components/Alert.tsx index 38bd2cb989..c583f50338 100644 --- a/nym-wallet/src/components/Alert.tsx +++ b/nym-wallet/src/components/Alert.tsx @@ -1,8 +1,18 @@ import React, { useState } from 'react'; -import { Alert as MuiAlert, IconButton } from '@mui/material'; +import { Alert as MuiAlert, IconButton, SxProps } from '@mui/material'; import { Close } from '@mui/icons-material'; -export const Alert = ({ title, dismissable }: { title: string | React.ReactNode; dismissable?: boolean }) => { +export const Alert = ({ + title, + dismissable, + sxAlert, + bgColor, +}: { + title: string | React.ReactNode; + dismissable?: boolean; + sxAlert?: SxProps; + bgColor?: string; +}) => { const [displayAlert, setDisplayAlert] = useState(true); const handleDismiss = () => setDisplayAlert(false); @@ -14,9 +24,10 @@ export const Alert = ({ title, dismissable }: { title: string | React.ReactNode; sx={{ width: '100%', borderRadius: 0, - bgcolor: 'background.default', + bgcolor: bgColor || 'background.default', color: (theme) => theme.palette.nym.nymWallet.text.blue, '& .MuiAlert-icon': { color: 'nym.nymWallet.text.blue', mr: 1 }, + ...sxAlert, }} action={ dismissable && ( diff --git a/nym-wallet/src/components/Bonding/Bond.tsx b/nym-wallet/src/components/Bonding/Bond.tsx index 1f96da875a..8cf745c6e5 100644 --- a/nym-wallet/src/components/Bonding/Bond.tsx +++ b/nym-wallet/src/components/Bonding/Bond.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from '@nymproject/react/link/Link'; import { Box, Button, Typography } from '@mui/material'; import { NymCard } from '../NymCard'; @@ -18,7 +19,12 @@ export const Bond = ({ justifyContent: 'space-between', }} > - Bond a mixnode or a gateway + + Bond a mix node or a gateway. Learn how to set up and run a node{' '} + + here + + setValue('identityKey', value)} + showTickOnValid={false} /> setValue('identityKey', value)} + showTickOnValid={false} /> )} - + {showEntireAddress ? address || '' : splice(6, address)} diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx index ad549e206a..61762357de 100644 --- a/nym-wallet/src/components/Delegation/DelegateModal.tsx +++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx @@ -257,6 +257,7 @@ export const DelegateModal: FCWithChildren<{ textFieldProps={{ autoFocus: !initialIdentityKey, }} + showTickOnValid={false} /> - - {errorAmount} - diff --git a/nym-wallet/src/components/NetworkSelector.stories.tsx b/nym-wallet/src/components/NetworkSelector.stories.tsx new file mode 100644 index 0000000000..52cd74c6cc --- /dev/null +++ b/nym-wallet/src/components/NetworkSelector.stories.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Box } from '@mui/material'; +import { MockMainContextProvider } from '../context/mocks/main'; +import { NetworkSelector } from './NetworkSelector'; + +export default { + title: 'Wallet / Network Selector', + component: NetworkSelector, +} as ComponentMeta; + +const Template: ComponentStory = () => ( + + + + + +); + +export const Default = Template.bind({}); diff --git a/nym-wallet/src/components/NetworkSelector.tsx b/nym-wallet/src/components/NetworkSelector.tsx index d17330f679..5df0d7ec74 100644 --- a/nym-wallet/src/components/NetworkSelector.tsx +++ b/nym-wallet/src/components/NetworkSelector.tsx @@ -1,6 +1,6 @@ import React, { useState, useContext } from 'react'; -import { Button, List, ListItem, ListItemIcon, ListItemText, ListSubheader, Popover } from '@mui/material'; -import { ArrowDropDown, CheckSharp } from '@mui/icons-material'; +import { Button, List, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Popover, Stack } from '@mui/material'; +import { ArrowDropDown, Check } from '@mui/icons-material'; import { Network } from 'src/types'; import { AppContext } from '../context/main'; import { config } from '../config'; @@ -16,10 +16,29 @@ const NetworkItem: FCWithChildren<{ title: string; isSelected: boolean; onSelect isSelected, onSelect, }) => ( - - {isSelected && } - {title} - + + + + {isSelected && ( + + + + )} + + ); export const NetworkSelector = () => { diff --git a/nym-wallet/src/components/Receive/ReceiveModal.tsx b/nym-wallet/src/components/Receive/ReceiveModal.tsx index 951ce8ff25..3e4245208a 100644 --- a/nym-wallet/src/components/Receive/ReceiveModal.tsx +++ b/nym-wallet/src/components/Receive/ReceiveModal.tsx @@ -19,7 +19,6 @@ export const ReceiveModal = ({ return ( - Est. fee for this transaction will be show on the next page + Est. fee for this transaction will be shown on the next page onUserFeesChange(v)} initialValue={userFees?.amount} fullWidth diff --git a/nym-wallet/src/components/Send/SendModal.tsx b/nym-wallet/src/components/Send/SendModal.tsx index 650fa4124c..b6d391d0ef 100644 --- a/nym-wallet/src/components/Send/SendModal.tsx +++ b/nym-wallet/src/components/Send/SendModal.tsx @@ -77,7 +77,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void } catch (e) { Console.error(e as string); if (/Raw log: out of gas/.test(e as string)) { - setGasError('Out of gas, please increase the amount of fees'); + setGasError('Specified fee was too small. Please increase the amount and try again'); } else { setSendError(true); } diff --git a/nym-wallet/src/components/TokenPoolSelector.stories.tsx b/nym-wallet/src/components/TokenPoolSelector.stories.tsx new file mode 100644 index 0000000000..1247f5b00d --- /dev/null +++ b/nym-wallet/src/components/TokenPoolSelector.stories.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Box } from '@mui/material'; +import { TokenPoolSelector } from './TokenPoolSelector'; +import { MockMainContextProvider } from '../context/mocks/main'; + +export default { + title: 'Wallet / Token pool', + component: TokenPoolSelector, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + + + +); + +export const Default = Template.bind({}); +Default.args = { + disabled: false, + onSelect: () => {}, +}; diff --git a/nym-wallet/src/components/TokenPoolSelector.tsx b/nym-wallet/src/components/TokenPoolSelector.tsx index 1ef768bbb3..0f8c5bd7f6 100644 --- a/nym-wallet/src/components/TokenPoolSelector.tsx +++ b/nym-wallet/src/components/TokenPoolSelector.tsx @@ -1,5 +1,15 @@ import React, { useContext, useEffect, useState } from 'react'; -import { FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material'; +import { + FormControl, + InputLabel, + ListItemText, + MenuItem, + Select, + SelectChangeEvent, + Stack, + Typography, +} from '@mui/material'; +import { Check as CheckIcon } from '@mui/icons-material'; import { AppContext } from '../context/main'; export type TPoolOption = 'balance' | 'locked'; @@ -40,20 +50,29 @@ export const TokenPoolSelector: FCWithChildren<{ disabled: boolean; onSelect: (p renderValue={(val) => {val}} > - + + + {value === 'balance' && } + {tokenAllocation && ( - + + + {value === 'locked' && } + )} diff --git a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx index 00a409dab2..5dac5ce04f 100644 --- a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; -import { Box, Button, Divider, Grid, TextField, Typography } from '@mui/material'; +import { Button, Divider, Grid, Stack, TextField, Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { isMixnode } from 'src/types'; import { simulateUpdateMixnodeConfig, simulateVestingUpdateMixnodeConfig, updateMixnodeConfig } from 'src/requests'; @@ -62,7 +62,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon }; return ( - + {fee && ( } - Changing these values will ONLY change the data about your node on the blockchain. Remember to change your - node’s config file with the same values too - + + + Changing these values will ONLY change the data about your node on the blockchain. + + Remember to change your node’s config file with the same values too. + } + bgColor={`${theme.palette.nym.nymWallet.text.blue}0D !important`} dismissable /> - + @@ -126,7 +129,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon - + @@ -147,7 +150,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon - + @@ -168,31 +171,35 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon - - - + + + + + + { const [openConfirmationModal, setOpenConfirmationModal] = useState(false); @@ -114,10 +131,9 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode @@ -132,13 +148,29 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode /> )} {isSubmitting && } - {`Next interval: ${intervalTime}`}} /> - + {`Next interval: ${intervalTime}`}} + bgColor={`${theme.palette.nym.nymWallet.text.blue}0D !important`} + sxAlert={{ + icon: false as unknown as number, + '& .MuiAlert-message': { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + }} + /> + - - Profit Margin - + + + + + Profit Margin + + + )} - + - - Operating cost - + + + + + Operator cost + + + { setValue('operatorCost', newValue, { shouldValidate: true, shouldDirty: true }); }} @@ -221,23 +258,27 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode )} - - - + + + + + + { const [settingsCard, setSettingsCard] = useState(nodeGeneralNav[0]); diff --git a/nym-wallet/src/theme/theme.tsx b/nym-wallet/src/theme/theme.tsx index c473dacaf9..8e19eb856a 100644 --- a/nym-wallet/src/theme/theme.tsx +++ b/nym-wallet/src/theme/theme.tsx @@ -303,6 +303,24 @@ export const getDesignTokens = (mode: PaletteMode): ThemeOptions => { }, }, }, + MuiSelect: { + defaultProps: { + MenuProps: { + PaperProps: { + sx: { + '&& .Mui-selected': { + color: nymPalette.highlight, + backgroundColor: (t) => + t.palette.mode === 'dark' ? `${t.palette.background.default} !important` : '#FFFFFF !important', + }, + '&& .Mui-selected:hover': { + backgroundColor: 'rgba(251, 110, 78, 0.08) !important', + }, + }, + }, + }, + }, + }, MuiMenu: { styleOverrides: { list: ({ _, theme }) => ({ diff --git a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx index 1adea08132..72646dc488 100644 --- a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx +++ b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx @@ -84,7 +84,7 @@ export const CurrencyFormField: FCWithChildren<{ // it can't be lower than one micro coin if (newNumber < MIN_VALUE) { - setValidationError('Amount cannot be less than 1 uNYM'); + setValidationError('Amount cannot be less than 0.000001'); return fireOnValidate(false); }