Update/update modal background color (#1594)
* update receive bg color + all other modals
This commit is contained in:
Fouad
@@ -11,35 +11,33 @@ const passwordCreationSteps = [
|
||||
];
|
||||
|
||||
export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => (
|
||||
<Dialog open={show} onClose={handleClose} fullWidth>
|
||||
<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 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>
|
||||
);
|
||||
|
||||
@@ -43,48 +43,52 @@ export const AccountsModal = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={dialogToDisplay === 'Accounts'} onClose={handleClose} fullWidth>
|
||||
<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
|
||||
open={dialogToDisplay === 'Accounts'}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
PaperComponent={Paper}
|
||||
PaperProps={{ elevation: 0 }}
|
||||
>
|
||||
<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>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -177,68 +177,72 @@ export const AddAccountModal = () => {
|
||||
}, [step]);
|
||||
|
||||
return (
|
||||
<Dialog open={dialogToDisplay === 'Add' || dialogToDisplay === 'Import'} onClose={handleClose} fullWidth>
|
||||
<Paper>
|
||||
<DialogTitle sx={{ pb: 0 }}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h6">{`${dialogToDisplay} new account`}</Typography>
|
||||
</Box>
|
||||
<Typography sx={{ mt: 2 }}>
|
||||
{dialogToDisplay === 'Add' ? createAccountSteps[step] : importAccountSteps[step]}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
{(() => {
|
||||
switch (step) {
|
||||
case 0:
|
||||
return dialogToDisplay === 'Add' ? (
|
||||
<MnemonicStep
|
||||
mnemonic={data.mnemonic}
|
||||
onNext={() => setStep((s) => s + 1)}
|
||||
onBack={() => (step === 0 ? handleClose() : setStep((s) => s - 1))}
|
||||
/>
|
||||
) : (
|
||||
<ImportMnemonic
|
||||
value={data.mnemonic}
|
||||
onChange={(value) => setData((d) => ({ ...d, mnemonic: value }))}
|
||||
onNext={() => setStep((s) => s + 1)}
|
||||
onBack={() => (step === 0 ? handleClose() : setStep((s) => s - 1))}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<NameAccount
|
||||
onNext={(accountName) => {
|
||||
setData((d) => ({ ...d, accountName }));
|
||||
setStep((s) => s + 1);
|
||||
}}
|
||||
onBack={() => setStep((s) => s - 1)}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<ConfirmPassword
|
||||
buttonTitle="Add account"
|
||||
onConfirm={async (password) => {
|
||||
if (data.accountName && data.mnemonic) {
|
||||
try {
|
||||
await handleAddAccount({ accountName: data.accountName, mnemonic: data.mnemonic, password });
|
||||
setStep(0);
|
||||
setDialogToDisplay('Accounts');
|
||||
} catch (e) {
|
||||
Console.error(e as string);
|
||||
}
|
||||
<Dialog
|
||||
open={dialogToDisplay === 'Add' || dialogToDisplay === 'Import'}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
PaperComponent={Paper}
|
||||
PaperProps={{ elevation: 0 }}
|
||||
>
|
||||
<DialogTitle sx={{ pb: 0 }}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h6">{`${dialogToDisplay} new account`}</Typography>
|
||||
</Box>
|
||||
<Typography sx={{ mt: 2 }}>
|
||||
{dialogToDisplay === 'Add' ? createAccountSteps[step] : importAccountSteps[step]}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
{(() => {
|
||||
switch (step) {
|
||||
case 0:
|
||||
return dialogToDisplay === 'Add' ? (
|
||||
<MnemonicStep
|
||||
mnemonic={data.mnemonic}
|
||||
onNext={() => setStep((s) => s + 1)}
|
||||
onBack={() => (step === 0 ? handleClose() : setStep((s) => s - 1))}
|
||||
/>
|
||||
) : (
|
||||
<ImportMnemonic
|
||||
value={data.mnemonic}
|
||||
onChange={(value) => setData((d) => ({ ...d, mnemonic: value }))}
|
||||
onNext={() => setStep((s) => s + 1)}
|
||||
onBack={() => (step === 0 ? handleClose() : setStep((s) => s - 1))}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<NameAccount
|
||||
onNext={(accountName) => {
|
||||
setData((d) => ({ ...d, accountName }));
|
||||
setStep((s) => s + 1);
|
||||
}}
|
||||
onBack={() => setStep((s) => s - 1)}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<ConfirmPassword
|
||||
buttonTitle="Add account"
|
||||
onConfirm={async (password) => {
|
||||
if (data.accountName && data.mnemonic) {
|
||||
try {
|
||||
await handleAddAccount({ accountName: data.accountName, mnemonic: data.mnemonic, password });
|
||||
setStep(0);
|
||||
setDialogToDisplay('Accounts');
|
||||
} catch (e) {
|
||||
Console.error(e as string);
|
||||
}
|
||||
}}
|
||||
onCancel={() => setStep((s) => s - 1)}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})()}
|
||||
</Paper>
|
||||
}
|
||||
}}
|
||||
onCancel={() => setStep((s) => s - 1)}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})()}
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -16,22 +16,26 @@ export const ConfirmPasswordModal = ({
|
||||
const { isLoading, error } = useContext(AccountsContext);
|
||||
|
||||
return (
|
||||
<Dialog open={Boolean(accountName)} onClose={onClose} fullWidth>
|
||||
<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
|
||||
open={Boolean(accountName)}
|
||||
onClose={onClose}
|
||||
fullWidth
|
||||
PaperComponent={Paper}
|
||||
PaperProps={{ elevation: 0 }}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -24,48 +24,52 @@ export const EditAccountModal = () => {
|
||||
}, [accountToEdit]);
|
||||
|
||||
return (
|
||||
<Dialog open={dialogToDisplay === 'Edit'} onClose={() => setDialogToDisplay('Accounts')} fullWidth>
|
||||
<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
|
||||
<Dialog
|
||||
open={dialogToDisplay === 'Edit'}
|
||||
onClose={() => setDialogToDisplay('Accounts')}
|
||||
fullWidth
|
||||
PaperComponent={Paper}
|
||||
PaperProps={{ elevation: 0 }}
|
||||
>
|
||||
<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
|
||||
disableElevation
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
if (accountToEdit) {
|
||||
handleEditAccount({ ...accountToEdit, id: accountName });
|
||||
setDialogToDisplay('Accounts');
|
||||
}
|
||||
}}
|
||||
disabled={!accountName?.length}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Paper>
|
||||
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>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -40,63 +40,67 @@ export const MnemonicModal = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={dialogToDisplay === 'Mnemonic'} onClose={handleClose} fullWidth>
|
||||
<Paper>
|
||||
<DialogTitle>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h6">Display mnemonic</Typography>
|
||||
<IconButton onClick={handleClose}>
|
||||
<ArrowBackSharp />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ color: (theme) => theme.palette.text.disabled }}>
|
||||
{`Display mnemonic for: ${accountMnemonic?.accountName}`}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ p: 0 }}>
|
||||
<Box sx={{ px: 3, mt: 1 }}>
|
||||
{error && (
|
||||
<Typography variant="body1" sx={{ color: 'error.main', mb: 2 }}>
|
||||
{error}
|
||||
</Typography>
|
||||
)}
|
||||
{!accountMnemonic.value ? (
|
||||
<>
|
||||
<Typography sx={{ mb: 2 }}>Enter the password used to login to your wallet</Typography>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
password={password}
|
||||
onUpdatePassword={(pswrd) => setPassword(pswrd)}
|
||||
autoFocus
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Mnemonic mnemonic={accountMnemonic.value} handleCopy={copy} copied={copied} />
|
||||
)}
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ p: 3 }}>
|
||||
{!accountMnemonic.value && (
|
||||
<Button
|
||||
disableRipple
|
||||
disabled={!password.length || isLoading}
|
||||
fullWidth
|
||||
disableElevation
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={async () => {
|
||||
if (accountMnemonic?.accountName) {
|
||||
setError(undefined);
|
||||
await handleGetAccountMnemonic({ password, accountName: accountMnemonic?.accountName });
|
||||
}
|
||||
}}
|
||||
endIcon={isLoading && <CircularProgress size={20} />}
|
||||
>
|
||||
Display mnemonic
|
||||
</Button>
|
||||
<Dialog
|
||||
open={dialogToDisplay === 'Mnemonic'}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
PaperComponent={Paper}
|
||||
PaperProps={{ elevation: 0 }}
|
||||
>
|
||||
<DialogTitle>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h6">Display mnemonic</Typography>
|
||||
<IconButton onClick={handleClose}>
|
||||
<ArrowBackSharp />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ color: (theme) => theme.palette.text.disabled }}>
|
||||
{`Display mnemonic for: ${accountMnemonic?.accountName}`}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ p: 0 }}>
|
||||
<Box sx={{ px: 3, mt: 1 }}>
|
||||
{error && (
|
||||
<Typography variant="body1" sx={{ color: 'error.main', mb: 2 }}>
|
||||
{error}
|
||||
</Typography>
|
||||
)}
|
||||
</DialogActions>
|
||||
</Paper>
|
||||
{!accountMnemonic.value ? (
|
||||
<>
|
||||
<Typography sx={{ mb: 2 }}>Enter the password used to login to your wallet</Typography>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
password={password}
|
||||
onUpdatePassword={(pswrd) => setPassword(pswrd)}
|
||||
autoFocus
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Mnemonic mnemonic={accountMnemonic.value} handleCopy={copy} copied={copied} />
|
||||
)}
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ p: 3 }}>
|
||||
{!accountMnemonic.value && (
|
||||
<Button
|
||||
disableRipple
|
||||
disabled={!password.length || isLoading}
|
||||
fullWidth
|
||||
disableElevation
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={async () => {
|
||||
if (accountMnemonic?.accountName) {
|
||||
setError(undefined);
|
||||
await handleGetAccountMnemonic({ password, accountName: accountMnemonic?.accountName });
|
||||
}
|
||||
}}
|
||||
endIcon={isLoading && <CircularProgress size={20} />}
|
||||
>
|
||||
Display mnemonic
|
||||
</Button>
|
||||
)}
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -72,12 +72,12 @@ export const ConfirmationModal = ({
|
||||
sx={{ textAlign: 'center', ...sx }}
|
||||
fullWidth={fullWidth}
|
||||
BackdropProps={backdropProps}
|
||||
PaperComponent={Paper}
|
||||
PaperProps={{ elevation: 0 }}
|
||||
>
|
||||
<Paper>
|
||||
{Title}
|
||||
<DialogContent>{children}</DialogContent>
|
||||
<DialogActions sx={{ px: 3, pb: 3 }}>{ConfirmButton}</DialogActions>
|
||||
</Paper>
|
||||
{Title}
|
||||
<DialogContent>{children}</DialogContent>
|
||||
<DialogActions sx={{ px: 3, pb: 3 }}>{ConfirmButton}</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { AppContext } from 'src/context';
|
||||
import { Box, Stack, Typography, SxProps, Dialog, DialogTitle, DialogContent } from '@mui/material';
|
||||
import { Box, Stack, Typography, SxProps, Dialog, DialogTitle, DialogContent, Paper } 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';
|
||||
|
||||
export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; backdropProps?: object }) => {
|
||||
const { clientDetails } = useContext(AppContext);
|
||||
const { clientDetails, mode } = useContext(AppContext);
|
||||
return (
|
||||
<Dialog open maxWidth="sm" fullWidth onClose={onClose}>
|
||||
<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}>
|
||||
@@ -22,8 +22,18 @@ export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; b
|
||||
<Box sx={{ px: 3 }}>
|
||||
<ModalListItem label="Your address:" value={<ClientAddress withCopy showEntireAddress />} />
|
||||
</Box>
|
||||
<Stack alignItems="center" sx={{ px: 0, py: 3, mt: 3, bgcolor: 'rgba(251, 110, 78, 5%)' }}>
|
||||
<Box sx={{ border: (t) => `1px solid ${t.palette.nym.highlight}`, bgcolor: 'white', borderRadius: 2, p: 3 }}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
sx={{ px: 0, py: 3, mt: 3, bgcolor: mode === 'light' ? 'rgba(251, 110, 78, 5%)' : 'nym.background.dark' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
border: (t) => `1px solid ${mode === 'light' ? t.palette.nym.highlight : t.palette.nym.text.grey} `,
|
||||
bgcolor: mode === 'light' ? 'white' : 'nym.background.main',
|
||||
borderRadius: 2,
|
||||
p: 3,
|
||||
}}
|
||||
>
|
||||
{clientDetails && <QRCode data-testid="qr-code" value={clientDetails?.client_address} />}
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
@@ -92,98 +92,103 @@ const TerminalInner: React.FC = () => {
|
||||
}, [network]);
|
||||
|
||||
return (
|
||||
<Dialog open onClose={handleShowTerminal} maxWidth="md" fullWidth>
|
||||
<Paper>
|
||||
<NymCard
|
||||
title={
|
||||
<Box width="100%" display="flex" justifyContent="space-between">
|
||||
<Box display="flex" alignItems="center">
|
||||
<TerminalIcon sx={{ mr: 1 }} />
|
||||
<Typography mr={4}>Terminal</Typography>
|
||||
{!isBusy && <RefreshIcon onClick={refresh} cursor="pointer" />}
|
||||
</Box>
|
||||
<CloseIcon onClick={handleShowTerminal} cursor="pointer" />
|
||||
<Dialog
|
||||
open
|
||||
onClose={handleShowTerminal}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperComponent={Paper}
|
||||
PaperProps={{ elevation: 0 }}
|
||||
>
|
||||
<NymCard
|
||||
title={
|
||||
<Box width="100%" display="flex" justifyContent="space-between">
|
||||
<Box display="flex" alignItems="center">
|
||||
<TerminalIcon sx={{ mr: 1 }} />
|
||||
<Typography mr={4}>Terminal</Typography>
|
||||
{!isBusy && <RefreshIcon onClick={refresh} cursor="pointer" />}
|
||||
</Box>
|
||||
<CloseIcon onClick={handleShowTerminal} cursor="pointer" />
|
||||
</Box>
|
||||
}
|
||||
dataTestid="terminal-page"
|
||||
>
|
||||
<h2>State Viewer</h2>
|
||||
|
||||
{error && <Alert color="error">{error}</Alert>}
|
||||
|
||||
{status ? (
|
||||
<Alert color="info" icon={<RefreshIcon />} sx={{ mb: 2 }}>
|
||||
<strong>{status}</strong>
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert color="success" sx={{ mb: 2 }}>
|
||||
<strong>Data loading complete</strong>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<TerminalSection heading="App Environment">
|
||||
<pre>{JSON.stringify(appEnv, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="Client Details">
|
||||
<pre>{JSON.stringify(clientDetails, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="User Balance">
|
||||
<pre>{JSON.stringify(userBalance, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection
|
||||
heading={
|
||||
<>
|
||||
<code>useGetBalance</code> Balance
|
||||
</>
|
||||
}
|
||||
dataTestid="terminal-page"
|
||||
>
|
||||
<h2>State Viewer</h2>
|
||||
<pre>{JSON.stringify(userBalance.balance, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
{error && <Alert color="error">{error}</Alert>}
|
||||
<TerminalSection
|
||||
heading={
|
||||
<>
|
||||
<code>useGetBalance</code> Vesting Account Info
|
||||
</>
|
||||
}
|
||||
>
|
||||
<pre>{JSON.stringify(userBalance.vestingAccountInfo, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
{status ? (
|
||||
<Alert color="info" icon={<RefreshIcon />} sx={{ mb: 2 }}>
|
||||
<strong>{status}</strong>
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert color="success" sx={{ mb: 2 }}>
|
||||
<strong>Data loading complete</strong>
|
||||
</Alert>
|
||||
)}
|
||||
<TerminalSection
|
||||
heading={
|
||||
<>
|
||||
<code>useGetBalance</code> Current Vest Period
|
||||
</>
|
||||
}
|
||||
>
|
||||
<pre>{JSON.stringify(userBalance.currentVestingPeriod, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="App Environment">
|
||||
<pre>{JSON.stringify(appEnv, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
<TerminalSection heading="Original Vesting">
|
||||
<pre>{JSON.stringify(userBalance.originalVesting, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="Client Details">
|
||||
<pre>{JSON.stringify(clientDetails, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
<TerminalSection heading="Mixnode Delegations">
|
||||
<pre>{JSON.stringify(mixnodeDelegations, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="User Balance">
|
||||
<pre>{JSON.stringify(userBalance, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
<TerminalSection heading="Pending Delegation Events">
|
||||
<pre>{JSON.stringify(pendingEvents, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection
|
||||
heading={
|
||||
<>
|
||||
<code>useGetBalance</code> Balance
|
||||
</>
|
||||
}
|
||||
>
|
||||
<pre>{JSON.stringify(userBalance.balance, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
<TerminalSection heading="Pending Vesting Delegation Events">
|
||||
<pre>{JSON.stringify(pendingVestingEvents, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection
|
||||
heading={
|
||||
<>
|
||||
<code>useGetBalance</code> Vesting Account Info
|
||||
</>
|
||||
}
|
||||
>
|
||||
<pre>{JSON.stringify(userBalance.vestingAccountInfo, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection
|
||||
heading={
|
||||
<>
|
||||
<code>useGetBalance</code> Current Vest Period
|
||||
</>
|
||||
}
|
||||
>
|
||||
<pre>{JSON.stringify(userBalance.currentVestingPeriod, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="Original Vesting">
|
||||
<pre>{JSON.stringify(userBalance.originalVesting, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="Mixnode Delegations">
|
||||
<pre>{JSON.stringify(mixnodeDelegations, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="Pending Delegation Events">
|
||||
<pre>{JSON.stringify(pendingEvents, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="Pending Vesting Delegation Events">
|
||||
<pre>{JSON.stringify(pendingVestingEvents, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
|
||||
<TerminalSection heading="Epoch">
|
||||
<pre>{JSON.stringify(epoch, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
</NymCard>
|
||||
</Paper>
|
||||
<TerminalSection heading="Epoch">
|
||||
<pre>{JSON.stringify(epoch, null, 2)}</pre>
|
||||
</TerminalSection>
|
||||
</NymCard>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user