GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1597 from nymtech/305-ui-fixes-inputs

Browse Source 
Wallet: address Figma differences on modals, dialogs and inputs
This commit is contained in:
Gala
2022-09-22 10:33:28 +02:00
committed by GitHub
parent 03974f9cb3 af1bf57f24
commit 8bd7b69bf9
21 changed files with 279 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
+44 -31
View File
@@ -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 }) => (
<Dialog open={show} onClose={handleClose} fullWidth PaperComponent={Paper} PaperProps={{ elevation: 0 }}>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Multi accounts</Typography>
<IconButton onClick={handleClose}>
<Close />
</IconButton>
</Box>
<Typography variant="body1" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
How to set up multiple accounts
</Typography>
</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Alert
severity="warning"
icon={false}
sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})}
>
<Typography>In order to create multiple accounts your wallet needs a password.</Typography>
<Typography>Follow steps below to create password.</Typography>
</Alert>
<Typography>How to create a password for your account</Typography>
{passwordCreationSteps.map((step, index) => (
<Typography key={step}>{`${index + 1}. ${step}`}</Typography>
))}
</Stack>
</DialogContent>
</Dialog>
);
export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => {
const theme = useTheme();
return (
<Dialog
open={show}
onClose={handleClose}
fullWidth
PaperProps={{
style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
}}
>
<Paper>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Multi accounts</Typography>
<IconButton onClick={handleClose}>
<Close />
</IconButton>
</Box>
<Typography variant="body1" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
How to set up multiple accounts
</Typography>
</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Alert
severity="warning"
icon={false}
sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})}
>
<Typography>In order to create multiple accounts your wallet needs a password.</Typography>
<Typography>Follow steps below to create password.</Typography>
</Alert>
<Typography>How to create a password for your account</Typography>
{passwordCreationSteps.map((step, index) => (
<Typography key={step}>{`${index + 1}. ${step}`}</Typography>
))}
</Stack>
</DialogContent>
</Paper>
</Dialog>
);
};
nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
+47 -41
View File
@@ -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<string>();
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}` },
}}
>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Accounts</Typography>
<IconButton onClick={handleClose}>
<Close />
</IconButton>
</Box>
<Typography fontSize="small" sx={{ color: 'grey.600' }}>
Switch between accounts
</Typography>
</DialogTitle>
<DialogContent sx={{ padding: 0 }}>
{accounts?.map(({ id, address }) => (
<AccountItem
name={id}
address={address}
key={address}
onSelectAccount={() => {
if (selectedAccount?.id !== id) {
setAccountToSwitchTo(id);
}
}}
/>
))}
</DialogContent>
<Divider variant="middle" sx={{ mt: 3 }} />
<DialogActions sx={{ p: 3 }}>
<Button startIcon={<ArrowDownwardSharp />} onClick={() => setDialogToDisplay('Import')}>
Import account
</Button>
<Button
disableElevation
variant="contained"
startIcon={<Add fontSize="small" />}
onClick={() => setDialogToDisplay('Add')}
>
Add new account
</Button>
</DialogActions>
<Paper>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Accounts</Typography>
<IconButton onClick={handleClose}>
<Close />
</IconButton>
</Box>
<Typography fontSize="small" sx={{ color: 'grey.600' }}>
Switch between accounts
</Typography>
</DialogTitle>
<DialogContent sx={{ padding: 0 }}>
{accounts?.map(({ id, address }) => (
<AccountItem
name={id}
address={address}
key={address}
onSelectAccount={() => {
if (selectedAccount?.id !== id) {
setAccountToSwitchTo(id);
}
}}
/>
))}
</DialogContent>
<Divider variant="middle" sx={{ mt: 3 }} />
<DialogActions sx={{ p: 3 }}>
<Button startIcon={<ArrowDownwardSharp />} onClick={() => setDialogToDisplay('Import')}>
Import account
</Button>
<Button
disableElevation
variant="contained"
startIcon={<Add fontSize="small" />}
onClick={() => setDialogToDisplay('Add')}
>
Add new account
</Button>
</DialogActions>
</Paper>
</Dialog>
);
};
nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
+21 -17
View File
@@ -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<void>;
}) => {
const { isLoading, error } = useContext(AccountsContext);
const theme = useTheme();
return (
<Dialog
open={Boolean(accountName)}
onClose={onClose}
fullWidth
PaperComponent={Paper}
PaperProps={{ elevation: 0 }}
PaperProps={{
style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
}}
>
<DialogTitle>
<Typography variant="h6">Switch account</Typography>
<Typography fontSize="small" sx={{ color: 'grey.600' }}>
Confirm password
</Typography>
</DialogTitle>
<ConfirmPassword
onConfirm={onConfirm}
error={error}
isLoading={isLoading}
buttonTitle="Switch account"
onCancel={onClose}
/>
<Paper>
<DialogTitle>
<Typography variant="h6">Switch account</Typography>
<Typography fontSize="small" sx={{ color: 'grey.600' }}>
Confirm password
</Typography>
</DialogTitle>
<ConfirmPassword
onConfirm={onConfirm}
error={error}
isLoading={isLoading}
buttonTitle="Switch account"
onCancel={onClose}
/>
</Paper>
</Dialog>
);
};
nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
+46 -40
View File
@@ -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}` },
}}
>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Edit account name</Typography>
<IconButton onClick={() => setDialogToDisplay('Accounts')}>
<Close />
</IconButton>
</Box>
<Typography fontSize="small" sx={{ color: 'grey.600' }}>
New wallet address
</Typography>
</DialogTitle>
<DialogContent sx={{ p: 0 }}>
<Box sx={{ px: 3, mt: 1 }}>
<TextField
label="Account name"
<Paper>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Edit account name</Typography>
<IconButton onClick={() => setDialogToDisplay('Accounts')}>
<Close />
</IconButton>
</Box>
<Typography fontSize="small" sx={{ color: 'grey.600' }}>
New wallet address
</Typography>
</DialogTitle>
<DialogContent sx={{ p: 0 }}>
<Box sx={{ px: 3, mt: 1 }}>
<TextField
label="Account name"
fullWidth
value={accountName}
onChange={(e) => setAccountName(e.target.value)}
autoFocus
/>
</Box>
</DialogContent>
<DialogActions sx={{ p: 3 }}>
<Button
fullWidth
value={accountName}
onChange={(e) => setAccountName(e.target.value)}
autoFocus
/>
</Box>
</DialogContent>
<DialogActions sx={{ p: 3 }}>
<Button
fullWidth
disableElevation
variant="contained"
size="large"
onClick={() => {
if (accountToEdit) {
handleEditAccount({ ...accountToEdit, id: accountName });
setDialogToDisplay('Accounts');
}
}}
disabled={!accountName?.length}
>
Edit
</Button>
</DialogActions>
disableElevation
variant="contained"
size="large"
onClick={() => {
if (accountToEdit) {
handleEditAccount({ ...accountToEdit, id: accountName });
setDialogToDisplay('Accounts');
}
}}
disabled={!accountName?.length}
>
Edit
</Button>
</DialogActions>
</Paper>
</Dialog>
);
};
nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx
+2 -2
View File
@@ -157,7 +157,7 @@ const AmountFormData = ({
return (
<Stack gap={3}>
<Box display="flex" gap={3} justifyContent="center" sx={{ mt: 2 }}>
<Box display="flex" gap={3} justifyContent="center">
{hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setValue('tokenPool', pool)} />}
<CurrencyFormField
required
@@ -205,7 +205,7 @@ export const BondMixnodeForm = ({
<>
{step === 1 && (
<>
<Box sx={{ mb: 2 }}>
<Box sx={{ mb: 3 }}>
<NodeTypeSelector disabled={false} setNodeType={onSelectNodeType} nodeType="mixnode" />
</Box>
<NodeFormData onNext={onValidateMixnodeData} mixnodeData={mixnodeData} />
nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx
+10 -12
View File
@@ -152,18 +152,16 @@ export const BondMixnodeModal = ({
subHeader={`Step ${step}/2`}
okLabel="Next"
>
<Box sx={{ mb: 2 }}>
<BondMixnodeForm
step={step}
denom={denom}
mixnodeData={mixnodeData}
amountData={amountData}
hasVestingTokens={hasVestingTokens}
onValidateMixnodeData={handleUpdateMixnodeData}
onValidateAmountData={handleUpdateAmountData}
onSelectNodeType={onSelectNodeType}
/>
</Box>
<BondMixnodeForm
step={step}
denom={denom}
mixnodeData={mixnodeData}
amountData={amountData}
hasVestingTokens={hasVestingTokens}
onValidateMixnodeData={handleUpdateMixnodeData}
onValidateAmountData={handleUpdateAmountData}
onSelectNodeType={onSelectNodeType}
/>
</SimpleModal>
);
};
nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
+1 -1
View File
@@ -111,7 +111,7 @@ export const NodeSettings = ({
Set profit margin
</Typography>
<Box sx={{ mb: 3 }}>
<TextField placeholder="Profit margin" value={pm} onChange={(e) => setPm(e.target.value)} fullWidth />
<TextField label="Profit margin" value={pm} onChange={(e) => setPm(e.target.value)} fullWidth />
{error && (
<FormHelperText sx={{ color: 'error.main' }}>
Profit margin should be a number between 0 and 100
nym-wallet/src/components/ConfirmTX.stories.tsx
+3 -3
View File
@@ -10,9 +10,9 @@ export default {
const Template: ComponentStory<typeof ConfirmTx> = (args) => (
<ConfirmTx {...args}>
<ModalListItem label="Transaction type:" value="Bond" divider />
<ModalListItem label="Current bond:" value="100 NYM" divider />
<ModalListItem label="Additional bond:" value="50 NYM" divider />
<ModalListItem label="Transaction type" value="Bond" divider />
<ModalListItem label="Current bond" value="100 NYM" divider />
<ModalListItem label="Additional bond" value="50 NYM" divider />
</ConfirmTx>
);
nym-wallet/src/components/Delegation/DelegateModal.tsx
+3 -3
View File
@@ -213,8 +213,8 @@ export const DelegateModal: React.FC<{
onPrev={resetFeeState}
onConfirm={handleOk}
>
<ModalListItem label="Node identity key:" value={identityKey} divider />
<ModalListItem label="Amount:" value={`${amount} ${denom.toUpperCase()}`} divider />
<ModalListItem label="Node identity key" value={identityKey} divider />
<ModalListItem label="Amount" value={`${amount} ${denom.toUpperCase()}`} divider />
</ConfirmTx>
);
}
@@ -267,7 +267,7 @@ export const DelegateModal: React.FC<{
>
{errorIdentityKey}
</Typography>
<Box display="flex" gap={3} alignItems="center" sx={{ mt: 3 }}>
<Box display="flex" gap={2} alignItems="center" sx={{ mt: 3 }}>
{hasVestingContract && <TokenPoolSelector disabled={false} onSelect={(pool) => setTokenPool(pool)} />}
<CurrencyFormField
required
nym-wallet/src/components/Modals/ErrorModal.tsx
+4 -1
View File
@@ -11,7 +11,10 @@ export const ErrorModal: React.FC<{
onClose: () => void;
}> = ({ children, open, title, message, sx, backdropProps, onClose }) => (
<Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
<Box sx={{ ...modalStyle, ...sx }} textAlign="center">
<Box
sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}
textAlign="center"
>
<Typography color={(theme) => theme.palette.error.main} mb={1}>
{title || 'Oh no! Something went wrong...'}
</Typography>
nym-wallet/src/components/Modals/LoadingModal.tsx
+4 -1
View File
@@ -18,7 +18,10 @@ export const LoadingModal: React.FC<{
backdropProps?: object;
}> = ({ sx, backdropProps }) => (
<Modal open BackdropProps={backdropProps}>
<Box sx={sx ? { ...modalStyle, ...sx } : { ...modalStyle }} textAlign="center">
<Box
sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}
textAlign="center"
>
<Stack spacing={4} direction="row" alignItems="center">
<CircularProgress />
<Typography sx={{ color: 'text.primary' }}>Please wait...</Typography>
nym-wallet/src/components/Modals/ModalFee.tsx
+19 -3
View File
@@ -5,17 +5,33 @@ import { ModalListItem } from './ModalListItem';
import { ModalDivider } from './ModalDivider';
type TFeeProps = { fee?: FeeDetails; isLoading: boolean; error?: string; divider?: boolean };
type TTotalAmountProps = { fee?: FeeDetails; amount?: string; isLoading: boolean; error?: string; divider?: boolean };
const getValue = ({ fee, isLoading, error }: TFeeProps) => {
const getValue = ({ fee, amount, isLoading, error }: TTotalAmountProps) => {
if (isLoading) return <CircularProgress size={15} />;
if (error && !isLoading) return 'n/a';
if (fee) return `${fee.amount?.amount} ${fee.amount?.denom.toUpperCase()}`;
if (fee) {
const numericFee = Number(fee.amount?.amount);
const numericAmountToTransfer = Number(amount);
return amount
? `${numericFee + numericAmountToTransfer} ${fee.amount?.denom.toUpperCase()}`
: `${fee.amount?.amount} ${fee.amount?.denom.toUpperCase()}`;
}
return '-';
};
export const ModalFee = ({ fee, isLoading, error, divider }: TFeeProps) => (
<>
<ModalListItem label="Fee for this operation" value={getValue({ fee, isLoading, error })} />
<ModalListItem label="Fee for this transaction" value={getValue({ fee, isLoading, error })} />
{divider && <ModalDivider />}
</>
);
export const ModalTotalAmount = ({ fee, amount, isLoading, error, divider }: TTotalAmountProps) => {
return (
<>
<ModalListItem label="Total amount" value={getValue({ fee, amount, isLoading, error })} fontWeight={600} />
{divider && <ModalDivider />}
</>
);
};
nym-wallet/src/components/Modals/ModalListItem.tsx
+2 -2
View File
@@ -12,11 +12,11 @@ export const ModalListItem: React.FC<{
}> = ({ label, value, hidden, fontWeight, divider }) => (
<Box sx={{ display: hidden ? 'none' : 'block' }}>
<Stack direction="row" justifyContent="space-between">
<Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary' }}>
<Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary', fontSize: 14 }}>
{label}
</Typography>
{value && (
<Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary' }}>
<Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary', fontSize: 14 }}>
{value}
</Typography>
)}
nym-wallet/src/components/Modals/SimpleModal.tsx
+5 -5
View File
@@ -38,7 +38,7 @@ export const SimpleModal: React.FC<{
backdropProps,
}) => (
<Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
<Box sx={{ ...modalStyle, ...sx }}>
<Box sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}>
{displayErrorIcon && <ErrorOutline color="error" sx={{ mb: 3 }} />}
<Stack direction="row" justifyContent="space-between" alignItems="center">
{typeof header === 'string' ? (
@@ -52,7 +52,7 @@ export const SimpleModal: React.FC<{
</Stack>
<Typography
mt={0.5}
mt={subHeader ? 0.5 : 0}
mb={3}
fontSize={12}
color={(theme) => theme.palette.text.secondary}
@@ -64,10 +64,10 @@ export const SimpleModal: React.FC<{
{children}
{(onOk || onBack) && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mt: 3 }}>
{onBack && <StyledBackButton onBack={onBack} />}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 1 }}>
{onBack && <StyledBackButton onBack={onBack} sx={{ mt: 3 }} />}
{onOk && (
<Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled}>
<Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled} sx={{ mt: 3 }}>
{okLabel}
</Button>
)}
nym-wallet/src/components/Receive/ReceiveModal.tsx
+39 -22
View File
@@ -1,35 +1,52 @@
import React, { useContext } from 'react';
import { AppContext } from 'src/context';
import { Box, Stack, Typography, SxProps, Dialog, DialogTitle, DialogContent, Paper } from '@mui/material';
import { Box, Stack, SxProps } from '@mui/material';
import QRCode from 'qrcode.react';
import { ClientAddress } from '../ClientAddress';
import { ModalListItem } from '../Modals/ModalListItem';
import { Close as CloseIcon } from '@mui/icons-material';
import { SimpleModal } from '../Modals/SimpleModal';
export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; backdropProps?: object }) => {
const { clientDetails, mode } = useContext(AppContext);
export const ReceiveModal = ({
onClose,
sx,
backdropProps,
}: {
onClose: () => void;
sx?: SxProps;
backdropProps?: object;
}) => {
const { clientDetails } = useContext(AppContext);
return (
<Dialog open maxWidth="sm" fullWidth onClose={onClose} PaperComponent={Paper} PaperProps={{ elevation: 0 }}>
<DialogTitle>
<Box sx={{ mt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Typography fontSize={20} fontWeight={600}>
Receive
</Typography>
<CloseIcon onClick={onClose} cursor="pointer" />
</Box>
</DialogTitle>
<DialogContent sx={{ p: 0 }}>
<Box sx={{ px: 3 }}>
<ModalListItem label="Your address:" value={<ClientAddress withCopy showEntireAddress />} />
</Box>
<SimpleModal
header="Receive"
subHeader="Provide your address to receive tokens"
open
onClose={onClose}
okLabel=""
sx={sx}
backdropProps={backdropProps}
subHeaderStyles={{ mb: 0 }}
>
<Stack gap={3} sx={{ position: 'relative', top: '32px' }}>
<ModalListItem label="Your address" value={<ClientAddress withCopy showEntireAddress />} />
<Stack
alignItems="center"
sx={{ px: 0, py: 3, mt: 3, bgcolor: mode === 'light' ? 'rgba(251, 110, 78, 5%)' : 'nym.background.dark' }}
sx={{
position: 'relative',
left: '-32px',
width: '598px',
py: 4,
bgcolor: (t) => (t.palette.mode === 'dark' ? t.palette.background.default : 'rgba(251, 110, 78, 5%)'),
borderRadius: '0px 0px 16px 16px',
}}
>
<Box
sx={{
border: (t) => `1px solid ${mode === 'light' ? t.palette.nym.highlight : t.palette.nym.text.grey} `,
bgcolor: mode === 'light' ? 'white' : 'nym.background.main',
border: (t) =>
t.palette.mode === 'dark'
? `1px solid ${t.palette.nym.nymWallet.modal.border}`
: `1px solid ${t.palette.nym.highlight}`,
bgcolor: (t) => (t.palette.mode === 'dark' ? 'transparent' : 'white'),
borderRadius: 2,
p: 3,
}}
@@ -37,7 +54,7 @@ export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; b
{clientDetails && <QRCode data-testid="qr-code" value={clientDetails?.client_address} />}
</Box>
</Stack>
</DialogContent>
</Dialog>
</Stack>
</SimpleModal>
);
};
nym-wallet/src/components/Send/SendDetailsModal.tsx
+6 -5
View File
@@ -3,7 +3,7 @@ import { Stack, SxProps } from '@mui/material';
import { FeeDetails, DecCoin, CurrencyDenom } from '@nymproject/types';
import { SimpleModal } from '../Modals/SimpleModal';
import { ModalListItem } from '../Modals/ModalListItem';
import { ModalFee } from '../Modals/ModalFee';
import { ModalFee, ModalTotalAmount } from '../Modals/ModalFee';
export const SendDetailsModal = ({
amount,
@@ -38,11 +38,12 @@ export const SendDetailsModal = ({
sx={sx}
backdropProps={backdropProps}
>
<Stack gap={0.5} sx={{ mt: 4 }}>
<ModalListItem label="From:" value={fromAddress} divider />
<ModalListItem label="To:" value={toAddress} divider />
<ModalListItem label="Amount:" value={`${amount?.amount} ${denom.toUpperCase()}`} divider />
<Stack gap={0.5} sx={{ mt: 3 }}>
<ModalListItem label="From" value={fromAddress} divider />
<ModalListItem label="To" value={toAddress} divider />
<ModalListItem label="Amount" value={`${amount?.amount} ${denom.toUpperCase()}`} divider />
<ModalFee fee={fee} divider isLoading={false} />
<ModalTotalAmount fee={fee} amount={amount?.amount} divider isLoading={false} />
</Stack>
</SimpleModal>
);
nym-wallet/src/components/Send/SendInputModal.tsx
+4 -4
View File
@@ -55,8 +55,8 @@ export const SendInputModal = ({
sx={sx}
backdropProps={backdropProps}
>
<Stack gap={3} sx={{ mt: 3 }}>
<ModalListItem label="Your address:" value={fromAddress} fontWeight="light" />
<Stack gap={3}>
<ModalListItem label="Your address" value={fromAddress} fontWeight="light" />
<TextField
label="Recipient address"
fullWidth
@@ -77,8 +77,8 @@ export const SendInputModal = ({
{error}
</Typography>
</Stack>
<Stack gap={0.5}>
<ModalListItem label="Account balance:" value={balance?.toUpperCase()} divider fontWeight={600} />
<Stack gap={0.5} sx={{ mt: 1 }}>
<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
</Typography>
nym-wallet/src/components/StyledBackButton.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import React from 'react';
import { Button } from '@mui/material';
import { Button, SxProps } from '@mui/material';
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
export const StyledBackButton = ({ onBack }: { onBack: () => void }) => (
<Button disableFocusRipple size="large" variant="outlined" onClick={onBack}>
export const StyledBackButton = ({ onBack, sx }: { onBack: () => void; sx?: SxProps }) => (
<Button disableFocusRipple size="large" variant="outlined" onClick={onBack} sx={sx}>
<ArrowBackIosNewIcon fontSize="small" />
</Button>
);
nym-wallet/src/pages/balance/components/TransferModal.tsx
+2 -2
View File
@@ -87,12 +87,12 @@ export const TransferModal = ({ onClose }: { onClose: () => void }) => {
) : (
<>
<ModalListItem
label="Unlocked transferrable tokens:"
label="Unlocked transferrable tokens"
value={`${userBalance.tokenAllocation?.spendable} ${clientDetails?.display_mix_denom.toUpperCase()}`}
divider
/>
<ModalListItem
label="Est. fee for this transaction:"
label="Est. fee for this transaction"
value={fee ? `${fee.amount?.amount} ${fee.amount?.denom}` : <CircularProgress size={15} />}
divider
/>
nym-wallet/src/theme/mui-theme.d.ts
Vendored
+8 -5
View File
@@ -67,6 +67,9 @@ declare module '@mui/material/styles' {
hover: {
background: string;
};
modal: {
border: string;
};
}
/**
@@ -85,7 +88,7 @@ declare module '@mui/material/styles' {
/**
* Add anything not palette related to the theme here
*/
interface NymTheme {}
interface NymTheme { }
/**
* This augments the definitions of the MUI Theme with the Nym theme, as well as
@@ -93,8 +96,8 @@ declare module '@mui/material/styles' {
*
* IMPORTANT: only add extensions to the interfaces above, do not modify the lines below
*/
interface Theme extends NymTheme {}
interface ThemeOptions extends Partial<NymTheme> {}
interface Palette extends NymPaletteAndNymWalletPalette {}
interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions {}
interface Theme extends NymTheme { }
interface ThemeOptions extends Partial<NymTheme> { }
interface Palette extends NymPaletteAndNymWalletPalette { }
interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions { }
}
nym-wallet/src/theme/theme.tsx
+6
View File
@@ -59,6 +59,9 @@ const darkMode: NymPaletteVariant = {
hover: {
background: '#36393E',
},
modal: {
border: '#484d53',
},
};
const lightMode: NymPaletteVariant = {
@@ -86,6 +89,9 @@ const lightMode: NymPaletteVariant = {
hover: {
background: '#F9F9F9',
},
modal: {
border: 'transparent',
},
};
/**