Merge branch 'develop' into 409-ne-filters-info
This commit is contained in:
@@ -4,7 +4,7 @@ import stc from 'string-to-color';
|
||||
import { TAccount } from 'src/types';
|
||||
|
||||
export const AccountAvatar = ({ name, small }: { name: TAccount['name']; small?: boolean }) => (
|
||||
<Avatar sx={{ bgcolor: stc(name), ...(small ? { width: 25, height: 25 } : {}) }}>
|
||||
<Avatar sx={{ bgcolor: stc(name), ...(small ? { width: 20, height: 20, pb: '1px' } : {}) }}>
|
||||
<Typography fontSize={small ? 14 : 'inherit'} fontWeight={600}>
|
||||
{name?.split('')[0]}
|
||||
</Typography>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { AccountAvatar } from './AccountAvatar';
|
||||
export const AccountOverview = ({ account, onClick }: { account: AccountEntry; onClick: () => void }) => (
|
||||
<Button
|
||||
startIcon={<AccountAvatar name={account.id} small />}
|
||||
sx={{ color: 'text.primary' }}
|
||||
sx={{ color: 'text.primary', fontSize: 14 }}
|
||||
color="inherit"
|
||||
onClick={onClick}
|
||||
>
|
||||
|
||||
@@ -56,7 +56,7 @@ export const BondedGateway = ({
|
||||
<NymCard
|
||||
borderless
|
||||
title={
|
||||
<Stack gap={2}>
|
||||
<Stack gap={3}>
|
||||
<Typography variant="h5" fontWeight={600}>
|
||||
Gateway
|
||||
</Typography>
|
||||
|
||||
@@ -98,8 +98,8 @@ export const BondedMixnode = ({
|
||||
<NymCard
|
||||
borderless
|
||||
title={
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Stack gap={3}>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Typography variant="h5" fontWeight={600}>
|
||||
Mix node
|
||||
</Typography>
|
||||
|
||||
@@ -32,7 +32,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<Stack gap={3}>
|
||||
<IdentityKeyFormField
|
||||
required
|
||||
fullWidth
|
||||
@@ -64,7 +64,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
|
||||
required
|
||||
sx={{ flexBasis: '50%' }}
|
||||
/>
|
||||
<Stack direction="row" gap={2}>
|
||||
<Stack direction="row" gap={3}>
|
||||
<TextField
|
||||
{...register('host')}
|
||||
name="host"
|
||||
@@ -89,7 +89,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
|
||||
label="Show advanced options"
|
||||
/>
|
||||
{showAdvancedOptions && (
|
||||
<Stack direction="row" gap={2} sx={{ mb: 2 }}>
|
||||
<Stack direction="row" gap={3} sx={{ mb: 2 }}>
|
||||
<TextField
|
||||
{...register('mixPort')}
|
||||
name="mixPort"
|
||||
@@ -156,8 +156,8 @@ const AmountFormData = ({
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" gap={2} justifyContent="center" sx={{ mt: 2 }}>
|
||||
<Stack gap={3}>
|
||||
<Box display="flex" gap={3} justifyContent="center" sx={{ mt: 2 }}>
|
||||
{hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setValue('tokenPool', pool)} />}
|
||||
<CurrencyFormField
|
||||
required
|
||||
|
||||
@@ -32,7 +32,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<Stack gap={3}>
|
||||
<IdentityKeyFormField
|
||||
required
|
||||
fullWidth
|
||||
@@ -55,7 +55,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
|
||||
error={Boolean(errors.ownerSignature)}
|
||||
helperText={errors.ownerSignature?.message}
|
||||
/>
|
||||
<Stack direction="row" gap={2}>
|
||||
<Stack direction="row" gap={3}>
|
||||
<TextField
|
||||
{...register('host')}
|
||||
name="host"
|
||||
@@ -80,7 +80,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
|
||||
label="Show advanced options"
|
||||
/>
|
||||
{showAdvancedOptions && (
|
||||
<Stack direction="row" gap={2} sx={{ mb: 2 }}>
|
||||
<Stack direction="row" gap={3} sx={{ mb: 2 }}>
|
||||
<TextField
|
||||
{...register('mixPort')}
|
||||
name="mixPort"
|
||||
@@ -156,8 +156,8 @@ const AmountFormData = ({
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" gap={2} justifyContent="center" sx={{ mt: 2 }}>
|
||||
<Stack gap={3}>
|
||||
<Box display="flex" gap={3} justifyContent="center" sx={{ mt: 2 }}>
|
||||
{hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setValue('tokenPool', pool)} />}
|
||||
<CurrencyFormField
|
||||
required
|
||||
|
||||
@@ -83,7 +83,7 @@ export const BondMoreModal = ({
|
||||
okDisabled={errorAmount || errorSignature}
|
||||
onClose={onClose}
|
||||
>
|
||||
<Stack gap={2}>
|
||||
<Stack gap={3}>
|
||||
<Box display="flex" gap={1}>
|
||||
{hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setTokenPool(pool)} />}
|
||||
<CurrencyFormField
|
||||
|
||||
@@ -246,7 +246,7 @@ export const DelegateModal: React.FC<{
|
||||
sx={sx}
|
||||
backdropProps={backdropProps}
|
||||
>
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<IdentityKeyFormField
|
||||
required
|
||||
fullWidth
|
||||
@@ -263,11 +263,11 @@ export const DelegateModal: React.FC<{
|
||||
component="div"
|
||||
textAlign="left"
|
||||
variant="caption"
|
||||
sx={{ color: 'error.main', mx: '14px', mt: '3px' }}
|
||||
sx={{ color: 'error.main', mx: 2, mt: errorIdentityKey && 1 }}
|
||||
>
|
||||
{errorIdentityKey}
|
||||
</Typography>
|
||||
<Box display="flex" gap={2} alignItems="center" sx={{ mt: 2 }}>
|
||||
<Box display="flex" gap={3} alignItems="center" sx={{ mt: 3 }}>
|
||||
{hasVestingContract && <TokenPoolSelector disabled={false} onSelect={(pool) => setTokenPool(pool)} />}
|
||||
<CurrencyFormField
|
||||
required
|
||||
@@ -283,7 +283,7 @@ export const DelegateModal: React.FC<{
|
||||
component="div"
|
||||
textAlign="left"
|
||||
variant="caption"
|
||||
sx={{ color: 'error.main', mx: '14px', mt: '3px' }}
|
||||
sx={{ color: 'error.main', mx: 2, mt: errorAmount && 1 }}
|
||||
>
|
||||
{errorAmount}
|
||||
</Typography>
|
||||
|
||||
@@ -64,7 +64,7 @@ export const SimpleModal: React.FC<{
|
||||
{children}
|
||||
|
||||
{(onOk || onBack) && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mt: 3 }}>
|
||||
{onBack && <StyledBackButton onBack={onBack} />}
|
||||
{onOk && (
|
||||
<Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled}>
|
||||
|
||||
@@ -28,18 +28,18 @@ export const Nav = () => {
|
||||
Icon: ArrowBack,
|
||||
onClick: handleShowReceiveModal,
|
||||
},
|
||||
{
|
||||
label: 'Bonding',
|
||||
route: '/bonding',
|
||||
Icon: Bonding,
|
||||
onClick: () => navigate('/bonding'),
|
||||
},
|
||||
{
|
||||
label: 'Delegation',
|
||||
route: '/delegation',
|
||||
Icon: Delegate,
|
||||
onClick: () => navigate('/delegation'),
|
||||
},
|
||||
{
|
||||
label: 'Bonding',
|
||||
route: '/bonding',
|
||||
Icon: Bonding,
|
||||
onClick: () => navigate('/bonding'),
|
||||
},
|
||||
{
|
||||
label: 'Docs',
|
||||
route: '/admin',
|
||||
|
||||
@@ -40,7 +40,7 @@ export const NetworkSelector = () => {
|
||||
<Button
|
||||
variant="text"
|
||||
color="inherit"
|
||||
sx={{ color: 'text.primary' }}
|
||||
sx={{ color: 'text.primary', fontSize: 14 }}
|
||||
onClick={handleClick}
|
||||
disableElevation
|
||||
endIcon={<ArrowDropDown sx={{ color: (theme) => `1px solid ${theme.palette.text.primary}` }} />}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Box, Card, CardContent, CardHeader } from '@mui/material';
|
||||
import { Card, CardContent, CardHeader } from '@mui/material';
|
||||
import { styled, Theme } from '@mui/material/styles';
|
||||
import { Title } from './Title';
|
||||
|
||||
@@ -21,7 +21,11 @@ export const NymCard: React.FC<{
|
||||
}> = ({ title, subheader, Action, Icon, noPadding, borderless, children, dataTestid }) => (
|
||||
<Card variant="outlined" sx={{ overflow: 'auto', ...(borderless && { border: 'none', dropShadow: 'none' }) }}>
|
||||
<CardHeader
|
||||
sx={{ p: 3, color: (theme: Theme) => theme.palette.text.primary }}
|
||||
sx={{
|
||||
p: 3,
|
||||
color: 'text.primary',
|
||||
'& .MuiCardHeader-title h5': { fontSize: '1.25rem' },
|
||||
}}
|
||||
title={<Title title={title} Icon={Icon} />}
|
||||
subheader={subheader}
|
||||
data-testid={dataTestid || title}
|
||||
|
||||
@@ -55,7 +55,7 @@ export const SendInputModal = ({
|
||||
sx={sx}
|
||||
backdropProps={backdropProps}
|
||||
>
|
||||
<Stack gap={2} sx={{ mt: 2 }}>
|
||||
<Stack gap={3} sx={{ mt: 3 }}>
|
||||
<ModalListItem label="Your address:" value={fromAddress} fontWeight="light" />
|
||||
<TextField
|
||||
placeholder="Recipient address"
|
||||
@@ -77,7 +77,7 @@ export const SendInputModal = ({
|
||||
{error}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack gap={0.5} sx={{ mt: 1 }}>
|
||||
<Stack gap={0.5}>
|
||||
<ModalListItem label="Account balance:" value={balance?.toUpperCase()} divider fontWeight={600} />
|
||||
<Typography fontSize="smaller" sx={{ color: 'text.primary' }}>
|
||||
Est. fee for this transaction will be show on the next page
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Box, IconButton, Stack, TextField } from '@mui/material';
|
||||
import { Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import { Error } from './Error';
|
||||
|
||||
export const MnemonicInput: React.FC<{
|
||||
@@ -13,20 +15,26 @@ export const MnemonicInput: React.FC<{
|
||||
<Stack spacing={2}>
|
||||
<TextField
|
||||
label="Mnemonic"
|
||||
type={showPassword ? 'input' : 'password'}
|
||||
value={mnemonic}
|
||||
type="input"
|
||||
value={showPassword ? mnemonic : mnemonic.replaceAll(/./g, '*')}
|
||||
onChange={(e) => onUpdateMnemonic(e.target.value)}
|
||||
multiline={!!showPassword}
|
||||
rows={4}
|
||||
multiline
|
||||
autoFocus
|
||||
fullWidth
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<IconButton onClick={() => setShowPassword((show) => !show)}>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
),
|
||||
inputProps={{
|
||||
style: {
|
||||
height: '160px',
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
'input::-webkit-textfield-decoration-container': {
|
||||
alignItems: 'start',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={Boolean(showPassword)} onChange={() => setShowPassword((show) => !show)} />}
|
||||
label="Reveal my mnemonic"
|
||||
/>
|
||||
{error && <Error message={error} />}
|
||||
</Stack>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { NymWordmark } from '@nymproject/react/logo/NymWordmark';
|
||||
import { Box, Container } from '@mui/material';
|
||||
import { Box, Container, Typography } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { AppContext } from 'src/context';
|
||||
import { AppBar, LoadingPage, Nav } from '../components';
|
||||
@@ -39,9 +39,7 @@ export const ApplicationLayout: React.FC = ({ children }) => {
|
||||
<Nav />
|
||||
</Box>
|
||||
{appVersion && (
|
||||
<Box color="#888" ml={5} mt={8}>
|
||||
Version {appVersion}
|
||||
</Box>
|
||||
<Typography sx={{ color: 'grey.500', fontSize: 14, ml: 5, mt: 8 }}>Version {appVersion}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Container maxWidth="xl">
|
||||
|
||||
@@ -10,7 +10,7 @@ export const PageLayout: React.FC<{ position?: 'flex-start' | 'flex-end' }> = ({
|
||||
justifyContent: 'start',
|
||||
alignItems: position || 'center',
|
||||
overflow: 'auto',
|
||||
mt: 2,
|
||||
mt: 4,
|
||||
}}
|
||||
>
|
||||
<Box width="100%" margin="auto">
|
||||
|
||||
@@ -321,7 +321,9 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
|
||||
<Paper elevation={0} sx={{ p: 3, mt: 4 }}>
|
||||
<Stack spacing={!!delegations?.length ? 5 : 3}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h6">Delegations</Typography>
|
||||
<Typography variant="h6" lineHeight={1.334} fontWeight={600}>
|
||||
Delegations
|
||||
</Typography>
|
||||
{!!delegations?.length && (
|
||||
<Link
|
||||
href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
|
||||
|
||||
Reference in New Issue
Block a user