mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-11 00:31:34 +00:00
Add recovery component
This commit is contained in:
parent
240328a6c5
commit
cf299a5c20
@ -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>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user