Add Welcome componenent

frontend/src/basic/RobotPage/Onboarding.tsx

@@ -8,6 +8,7 @@ import {
   Collapse,
   Grid,
   LinearProgress,
+  Link,
   Typography,
 } from '@mui/material';
 import { Page } from '../NavBar';
@@ -18,6 +19,7 @@ import TokenInput from './TokenInput';
 import { genBase62Token } from '../../utils';
 
 interface OnboardingProps {
+  setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
   robot: Robot;
   setRobot: (state: Robot) => void;
   inputToken: string;
@@ -29,6 +31,7 @@ interface OnboardingProps {
 }
 
 const Onboarding = ({
+  setView,
   robot,
   inputToken,
   setInputToken,
@@ -268,14 +271,14 @@ const Onboarding = ({
             <Grid item>
               <Typography>
                 {`${t('If you need help on your RoboSats journey, join our public support')} `}
-                <a target='_blank' href='https://t.me/robosats_es' rel='noreferrer'>
+                <Link target='_blank' href='https://t.me/robosats_es' rel='noreferrer'>
                   {t('Telegram group')}
-                </a>
+                </Link>
               </Typography>
             </Grid>
 
             <Grid item>
-              <Button>{t('Go back')}</Button>
+              <Button onClick={() => setView('profile')}>{t('See profile')}</Button>
             </Grid>
           </Grid>
         </Collapse>

frontend/src/basic/RobotPage/Welcome.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Button, Grid, Typography, useTheme } from '@mui/material';
+import { RoboSatsNoTextIcon, RoboSatsTextIcon } from '../../components/Icons';
+import { FastForward, RocketLaunch } from '@mui/icons-material';
+import SmartToy from '@mui/icons-material/SmartToy';
+
+interface WelcomeProps {
+  setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
+  width: number;
+}
+
+const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  return (
+    <Grid container direction='column' alignItems='center' spacing={1} padding={1}>
+      <RoboSatsTextIcon
+        color='primary'
+        sx={{
+          height: `${Math.min(width * 0.65, 13) * 0.25}em`,
+          width: `${Math.min(width * 0.65, 13)}em`,
+        }}
+      />
+      <Typography align='center' component='h5' variant='h5'>
+        {t('Simple and Private LN P2P Exchange')}
+      </Typography>
+
+      <Grid item>
+        <Box
+          sx={{
+            padding: '0.5em',
+            backgroundColor: 'background.paper',
+            border: '1px solid',
+            borderRadius: '4px',
+            borderColor: theme.palette.mode === 'dark' ? '#434343' : '#c4c4c4',
+            '&:hover': {
+              borderColor: theme.palette.mode === 'dark' ? '#ffffff' : '#2f2f2f',
+            },
+          }}
+        >
+          <Grid container direction='column' alignItems='center' spacing={1} padding={1}>
+            <Grid item>
+              <Typography align='center'>
+                {t('Create a new robot and learn to use RoboSats')}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Button
+                size='large'
+                color='primary'
+                variant='contained'
+                onClick={() => setView('onboarding')}
+              >
+                <RocketLaunch />
+                {t('Start')}
+              </Button>
+            </Grid>
+
+            <Grid item>
+              <Typography align='center'>
+                {t('Recover an existing robot using your token')}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Button color='secondary' variant='contained' onClick={() => setView('recovery')}>
+                <SmartToy />
+                {t('Recovery')}
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </Grid>
+      <Grid item>
+        <Button color='primary' onClick={() => setView('profile')}>
+          <FastForward />
+          {t('Skip to Robot Generator')}
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Welcome;

frontend/src/basic/RobotPage/index.tsx

@@ -1,15 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
+import { Paper, Grid, useTheme } from '@mui/material';
-  Button,
-  Paper,
-  Grid,
-  IconButton,
-  TextField,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material';
 import { useParams } from 'react-router-dom';
 
 import { Page } from '../NavBar';
@@ -19,9 +10,8 @@ import { systemClient } from '../../services/System';
 import { apiClient } from '../../services/api';
 import { genKey } from '../../pgp';
 import { sha256 } from 'js-sha256';
-import { Casino, Download, ContentCopy, SmartToy, Bolt } from '@mui/icons-material';
-import RobotAvatar from '../../components/RobotAvatar';
 import Onboarding from './Onboarding';
+import Welcome from './Welcome';
 
 interface RobotPageProps {
   setPage: (state: Page) => void;
@@ -46,6 +36,7 @@ const RobotPage = ({
   const params = useParams();
   const theme = useTheme();
   const refCode = params.refCode;
+  const width = Math.min(windowSize.width * 0.8, 30);
   const maxHeight = windowSize.height * 0.85 - 3;
 
   const [robotFound, setRobotFound] = useState<boolean>(false);
@@ -151,24 +142,21 @@ const RobotPage = ({
 
   return (
     <Grid container direction='column' alignItems='center' spacing={1}>
-      {/* // Welcome to RoboSats
-      // Easy and private LN exchange
-
-      // I am a newbie
-      // Skip (fast robot gen)
-      // Recover existing token */}
-
       <Grid item>
         <Paper
           elevation={12}
           style={{
             padding: '1em',
-            width: `${Math.min(windowSize.width * 0.8, 30)}em`,
+            width: `${width}em`,
             maxHeight: `${maxHeight}em`,
             overflow: 'auto',
           }}
         >
+          {view === 'welcome' ? <Welcome setView={setView} width={width} /> : null}
+
+          {view === 'onboarding' ? (
             <Onboarding
+              setView={setView}
               robot={robot}
               setRobot={setRobot}
               badRequest={badRequest}
@@ -178,6 +166,7 @@ const RobotPage = ({
               setPage={setPage}
               baseUrl={baseUrl}
             />
+          ) : null}
         </Paper>
       </Grid>
     </Grid>

frontend/src/components/Icons/RoboSatsText.tsx

@@ -3,7 +3,7 @@ import { SvgIcon } from '@mui/material';
 
 export default function RoboSatsTextIcon(props) {
   return (
-    <SvgIcon {...props} x='0px' y='0px' width='2000px' height='1000px' viewBox='0 300 2000 150'>
+    <SvgIcon {...props} x='0px' y='0px' width='2000px' height='500px' viewBox='0 620 2000 1'>
       <g>
         <path
           d='M455.556,849.519c10.487-10.606,18.315-22.243,23.484-35.499c11.767-30.177,10.624-59.483-6.55-87.546