Add recovery component

This commit is contained in:
Reckless_Satoshi 2023-02-19 06:19:49 -08:00
parent 240328a6c5
commit cf299a5c20
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
5 changed files with 107 additions and 21 deletions

View File

@ -15,10 +15,11 @@ import {
} from '@mui/material'; } from '@mui/material';
import { Page } from '../NavBar'; import { Page } from '../NavBar';
import { Robot } from '../../models'; import { Robot } from '../../models';
import { Casino, Bolt, Check, Storefront, AddBox } from '@mui/icons-material'; import { Casino, Bolt, Check, Storefront, AddBox, School } from '@mui/icons-material';
import RobotAvatar from '../../components/RobotAvatar'; import RobotAvatar from '../../components/RobotAvatar';
import TokenInput from './TokenInput'; import TokenInput from './TokenInput';
import { genBase62Token } from '../../utils'; import { genBase62Token } from '../../utils';
import { NewTabIcon } from '../../components/Icons';
interface OnboardingProps { interface OnboardingProps {
setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void; setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
@ -121,7 +122,6 @@ const Onboarding = ({
badRequest={badRequest} badRequest={badRequest}
robot={robot} robot={robot}
onPressEnter={() => null} onPressEnter={() => null}
badRequest={badRequest}
/> />
)} )}
</Grid> </Grid>
@ -278,11 +278,11 @@ const Onboarding = ({
<Grid item> <Grid item>
<ButtonGroup variant='contained'> <ButtonGroup variant='contained'>
<Button color='primary' onClick={() => changePage('offers')}> <Button color='primary' onClick={() => changePage('offers')}>
<Storefront /> <Storefront /> <div style={{ width: '0.5em' }} />
{t('Offers')} {t('Offers')}
</Button> </Button>
<Button color='secondary' onClick={() => changePage('create')}> <Button color='secondary' onClick={() => changePage('create')}>
<AddBox /> <AddBox /> <div style={{ width: '0.5em' }} />
{t('Create')} {t('Create')}
</Button> </Button>
</ButtonGroup> </ButtonGroup>
@ -294,8 +294,24 @@ const Onboarding = ({
<Link target='_blank' href='https://t.me/robosats_es' rel='noreferrer'> <Link target='_blank' href='https://t.me/robosats_es' rel='noreferrer'>
{t('Telegram group')} {t('Telegram group')}
</Link> </Link>
{`, ${t('or visit the robot school for documentation.')} `}
</Typography> </Typography>
</Grid> </Grid>
<Grid item>
<Button
sx={{ color: 'black' }}
component={Link}
href='https://learn.robosats.com'
target='_blank'
color='inherit'
variant='contained'
>
<School /> <div style={{ width: '0.5em' }} />
{t('Learn RoboSats')}
<div style={{ width: '0.5em' }} />
<NewTabIcon sx={{ width: '0.8em' }} />
</Button>
</Grid>
</Grid> </Grid>
</Box> </Box>
</Collapse> </Collapse>

View File

@ -7,9 +7,13 @@ import { Page } from '../NavBar';
import { Robot } from '../../models'; import { Robot } from '../../models';
import { Casino, Download, ContentCopy, SmartToy, Bolt } from '@mui/icons-material'; import { Casino, Download, ContentCopy, SmartToy, Bolt } from '@mui/icons-material';
import RobotAvatar from '../../components/RobotAvatar'; import RobotAvatar from '../../components/RobotAvatar';
import TokenInput from './TokenInput';
import Key from '@mui/icons-material/Key';
interface RecoveryProps { interface RecoveryProps {
robot: Robot; robot: Robot;
setRobot: (state: Robot) => void;
setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
inputToken: string; inputToken: string;
setInputToken: (state: string) => void; setInputToken: (state: string) => void;
getGenerateRobot: (token: string) => void; getGenerateRobot: (token: string) => void;
@ -19,6 +23,7 @@ interface RecoveryProps {
const Recovery = ({ const Recovery = ({
robot, robot,
setRobot,
inputToken, inputToken,
setInputToken, setInputToken,
getGenerateRobot, getGenerateRobot,
@ -28,9 +33,42 @@ const Recovery = ({
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme(); const theme = useTheme();
const recoveryDisabled = () => {
return inputToken.length > 10 ? false : true;
};
const onClickRecover = () => {
if (recoveryDisabled()) {
return;
} else {
}
};
return ( return (
<Grid container direction='column' alignItems='center' spacing={1}> <Grid container direction='column' alignItems='center' spacing={1} padding={2}>
<Grid item></Grid> <Grid item>
<Typography align='center'>
{t(
'Please, introduce your robot token to re-build your robot and gain access to its trades.',
)}
</Typography>
</Grid>
<Grid item>
<TokenInput
showCopy={false}
inputToken={inputToken}
setInputToken={setInputToken}
setRobot={setRobot}
robot={robot}
onPressEnter={onClickRecover}
badRequest={''}
/>
</Grid>
<Grid item>
<Button variant='contained' size='large' disabled={recoveryDisabled()}>
<Key /> <div style={{ width: '0.5em' }} />
{t('Recover')}
</Button>
</Grid>
</Grid> </Grid>
); );
}; };

View File

@ -28,10 +28,12 @@ interface TokenInputProps {
onPressEnter: () => void; onPressEnter: () => void;
badRequest: string | undefined; badRequest: string | undefined;
setInputToken: (state: string) => void; setInputToken: (state: string) => void;
showCopy?: boolean;
} }
const TokenInput = ({ const TokenInput = ({
robot, robot,
showCopy = true,
setRobot, setRobot,
showDownload = false, showDownload = false,
fullWidth = true, fullWidth = true,
@ -83,7 +85,7 @@ const TokenInput = ({
</span> </span>
</Tooltip> </Tooltip>
) : null, ) : null,
endAdornment: ( endAdornment: showCopy ? (
<Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}> <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
<IconButton <IconButton
color={robot.copiedToken ? 'inherit' : 'primary'} color={robot.copiedToken ? 'inherit' : 'primary'}
@ -95,7 +97,7 @@ const TokenInput = ({
<ContentCopy sx={{ width: '1em', height: '1em' }} /> <ContentCopy sx={{ width: '1em', height: '1em' }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
), ) : null,
}} }}
/> />
); );

View File

@ -19,7 +19,7 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
direction='column' direction='column'
alignItems='center' alignItems='center'
spacing={1.8} spacing={1.8}
paddingTop={2} paddingTop={2.2}
padding={0.5} padding={0.5}
> >
<Grid item> <Grid item>
@ -32,19 +32,19 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
<RoboSatsTextIcon <RoboSatsTextIcon
sx={{ sx={{
fill: 'url(#linearColors)', fill: 'url(#linearColors)',
height: `${Math.min(width * 0.7, 16) * 0.25}em`, height: `${Math.min(width * 0.66, 17) * 0.25}em`,
width: `${Math.min(width * 0.7, 16)}em`, width: `${Math.min(width * 0.66, 17)}em`,
}} }}
/> />
<Typography <Typography
lineHeight={0.8} lineHeight={0.82}
sx={{ position: 'relative', bottom: '0.3em' }} sx={{ position: 'relative', bottom: '0.3em' }}
color='secondary' color='secondary'
align='center' align='center'
component='h6' component='h6'
variant='h6' variant='h6'
> >
{t('Simple and Private LN P2P Exchange')} {t('A Simple and Private LN P2P Exchange')}
</Typography> </Typography>
</Grid> </Grid>
@ -60,7 +60,7 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
}, },
}} }}
> >
<Grid container direction='column' alignItems='center' spacing={1} padding={1}> <Grid container direction='column' alignItems='center' spacing={1} padding={1.5}>
<Grid item> <Grid item>
<Typography align='center'> <Typography align='center'>
{t('Create a new robot and learn to use RoboSats')} {t('Create a new robot and learn to use RoboSats')}
@ -74,6 +74,7 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
onClick={() => setView('onboarding')} onClick={() => setView('onboarding')}
> >
<RocketLaunch /> <RocketLaunch />
<div style={{ width: '0.5em' }} />
{t('Start')} {t('Start')}
</Button> </Button>
</Grid> </Grid>
@ -84,8 +85,13 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
</Typography> </Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<Button color='secondary' variant='contained' onClick={() => setView('recovery')}> <Button
<Key /> size='small'
color='secondary'
variant='contained'
onClick={() => setView('recovery')}
>
<Key /> <div style={{ width: '0.5em' }} />
{t('Recovery')} {t('Recovery')}
</Button> </Button>
</Grid> </Grid>
@ -93,9 +99,9 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
</Box> </Box>
</Grid> </Grid>
<Grid item sx={{ position: 'relative', bottom: '0.5em' }}> <Grid item sx={{ position: 'relative', bottom: '0.5em' }}>
<Button color='primary' onClick={() => setView('profile')}> <Button size='small' color='primary' onClick={() => setView('profile')}>
<FastForward /> <FastForward /> <div style={{ width: '0.5em' }} />
{t('Skip to Robot Generator')} {t('Skip to Robot')}
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>

View File

@ -168,9 +168,33 @@ const RobotPage = ({
/> />
) : null} ) : null}
{view === 'profile' ? <RobotProfile setView={setView} width={width} /> : null} {view === 'profile' ? (
<RobotProfile
setView={setView}
robot={robot}
setRobot={setRobot}
badRequest={badRequest}
inputToken={inputToken}
setInputToken={setInputToken}
getGenerateRobot={getGenerateRobot}
setPage={setPage}
baseUrl={baseUrl}
/>
) : null}
{view === 'recovery' ? <Recovery setView={setView} width={width} /> : null} {view === 'recovery' ? (
<Recovery
setView={setView}
robot={robot}
setRobot={setRobot}
badRequest={badRequest}
inputToken={inputToken}
setInputToken={setInputToken}
getGenerateRobot={getGenerateRobot}
setPage={setPage}
baseUrl={baseUrl}
/>
) : null}
</Paper> </Paper>
); );
}; };