Add recovery component

frontend/src/basic/RobotPage/Onboarding.tsx

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

frontend/src/basic/RobotPage/Recovery.tsx

@@ -7,9 +7,13 @@ import { Page } from '../NavBar';
 import { Robot } from '../../models';
 import { Casino, Download, ContentCopy, SmartToy, Bolt } from '@mui/icons-material';
 import RobotAvatar from '../../components/RobotAvatar';
+import TokenInput from './TokenInput';
+import Key from '@mui/icons-material/Key';
 
 interface RecoveryProps {
   robot: Robot;
+  setRobot: (state: Robot) => void;
+  setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
   inputToken: string;
   setInputToken: (state: string) => void;
   getGenerateRobot: (token: string) => void;
@@ -19,6 +23,7 @@ interface RecoveryProps {
 
 const Recovery = ({
   robot,
+  setRobot,
   inputToken,
   setInputToken,
   getGenerateRobot,
@@ -28,9 +33,42 @@ const Recovery = ({
   const { t } = useTranslation();
   const theme = useTheme();
 
+  const recoveryDisabled = () => {
+    return inputToken.length > 10 ? false : true;
+  };
+  const onClickRecover = () => {
+    if (recoveryDisabled()) {
+      return;
+    } else {
+    }
+  };
+
   return (
-    <Grid container direction='column' alignItems='center' spacing={1}>
-      <Grid item></Grid>
+    <Grid container direction='column' alignItems='center' spacing={1} padding={2}>
+      <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>
   );
 };

frontend/src/basic/RobotPage/TokenInput.tsx

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

frontend/src/basic/RobotPage/Welcome.tsx

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

frontend/src/basic/RobotPage/index.tsx

@@ -168,9 +168,33 @@ const RobotPage = ({
         />
       ) : 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>
   );
 };