Merge branch 'develop' into 409-ne-filters-info

This commit is contained in:
Gala
2022-09-21 12:01:01 +02:00
17 changed files with 60 additions and 48 deletions
@@ -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}>
+6 -6
View File
@@ -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}` }} />}
+6 -2
View File
@@ -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
+18 -10
View File
@@ -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>
+2 -4
View File
@@ -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">
+1 -1
View File
@@ -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">
+3 -1
View File
@@ -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/`}