From d674aa26164be6f5f912108dad28b5cfec631c91 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sat, 18 Feb 2023 08:36:42 -0800
Subject: [PATCH] Add Welcome componenent

---
 frontend/src/basic/RobotPage/Onboarding.tsx   |  9 +-
 frontend/src/basic/RobotPage/Welcome.tsx      | 85 +++++++++++++++++++
 frontend/src/basic/RobotPage/index.tsx        | 49 +++++------
 .../src/components/Icons/RoboSatsText.tsx     |  2 +-
 4 files changed, 111 insertions(+), 34 deletions(-)

diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx
index ac0b4dd9..db2e9923 100644
--- a/frontend/src/basic/RobotPage/Onboarding.tsx
+++ b/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>
diff --git a/frontend/src/basic/RobotPage/Welcome.tsx b/frontend/src/basic/RobotPage/Welcome.tsx
index e69de29b..a123008e 100644
--- a/frontend/src/basic/RobotPage/Welcome.tsx
+++ b/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;
diff --git a/frontend/src/basic/RobotPage/index.tsx b/frontend/src/basic/RobotPage/index.tsx
index 5c1166be..d615877d 100644
--- a/frontend/src/basic/RobotPage/index.tsx
+++ b/frontend/src/basic/RobotPage/index.tsx
@@ -1,15 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  Paper,
-  Grid,
-  IconButton,
-  TextField,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Paper, Grid, 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,33 +142,31 @@ 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',
           }}
         >
-          <Onboarding
-            robot={robot}
-            setRobot={setRobot}
-            badRequest={badRequest}
-            inputToken={inputToken}
-            setInputToken={setInputToken}
-            getGenerateRobot={getGenerateRobot}
-            setPage={setPage}
-            baseUrl={baseUrl}
-          />
+          {view === 'welcome' ? <Welcome setView={setView} width={width} /> : null}
+
+          {view === 'onboarding' ? (
+            <Onboarding
+              setView={setView}
+              robot={robot}
+              setRobot={setRobot}
+              badRequest={badRequest}
+              inputToken={inputToken}
+              setInputToken={setInputToken}
+              getGenerateRobot={getGenerateRobot}
+              setPage={setPage}
+              baseUrl={baseUrl}
+            />
+          ) : null}
         </Paper>
       </Grid>
     </Grid>
diff --git a/frontend/src/components/Icons/RoboSatsText.tsx b/frontend/src/components/Icons/RoboSatsText.tsx
index 41256a99..6e9a686f 100644
--- a/frontend/src/components/Icons/RoboSatsText.tsx
+++ b/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