Add robot profile component

frontend/src/basic/RobotPage/Onboarding.tsx

@@ -182,7 +182,10 @@ const Onboarding = ({
                   {robot.avatarLoaded && robot.nickname ? (
                     t('This is your trading avatar')
                   ) : (
-                    <b>{t('Building your robot!')}</b>
+                    <>
+                      <b>{t('Building your robot!')}</b>
+                      <LinearProgress />
+                    </>
                   )}
                 </Typography>
               </Grid>

frontend/src/basic/RobotPage/Recovery.tsx

@@ -25,6 +25,7 @@ const Recovery = ({
   robot,
   setRobot,
   inputToken,
+  setView,
   setInputToken,
   getGenerateRobot,
   setPage,
@@ -40,6 +41,8 @@ const Recovery = ({
     if (recoveryDisabled()) {
       return;
     } else {
+      getGenerateRobot(inputToken);
+      setView('profile');
     }
   };
 
@@ -58,13 +61,19 @@ const Recovery = ({
           inputToken={inputToken}
           setInputToken={setInputToken}
           setRobot={setRobot}
+          label={t('Paste token here')}
           robot={robot}
           onPressEnter={onClickRecover}
           badRequest={''}
         />
       </Grid>
       <Grid item>
-        <Button variant='contained' size='large' disabled={recoveryDisabled()}>
+        <Button
+          variant='contained'
+          size='large'
+          disabled={recoveryDisabled()}
+          onClick={onClickRecover}
+        >
           <Key /> <div style={{ width: '0.5em' }} />
           {t('Recover')}
         </Button>

frontend/src/basic/RobotPage/RobotProfile.tsx

@@ -1,22 +1,125 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Box, Button, Grid, Typography, useTheme } from '@mui/material';
-import { RoboSatsTextIcon } from '../../components/Icons';
+import { Box, Button, Grid, LinearProgress, Typography, useTheme } from '@mui/material';
 import { FastForward, RocketLaunch } from '@mui/icons-material';
 import SmartToy from '@mui/icons-material/SmartToy';
+import RobotAvatar from '../../components/RobotAvatar';
+import Bolt from '@mui/icons-material/Bolt';
+import TokenInput from './TokenInput';
+import { Page } from '../NavBar';
+import { Robot } from '../../models';
 
 interface RobotProfileProps {
+  robot: Robot;
+  setRobot: (state: Robot) => void;
   setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
+  inputToken: string;
+  setInputToken: (state: string) => void;
+  getGenerateRobot: (token: string) => void;
+  setPage: (state: Page) => void;
+  baseUrl: string;
+  badRequest: string;
+  robotFound: boolean;
   width: number;
 }
 
-const RobotProfile = ({ setView, width }: RobotProfileProps): JSX.Element => {
+const RobotProfile = ({
+  robot,
+  setRobot,
+  inputToken,
+  setInputToken,
+  getGenerateRobot,
+  setPage,
+  badRequest,
+  baseUrl,
+  robotFound,
+  width,
+}: RobotProfileProps): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
 
   return (
-    <Grid container direction='column' alignItems='center' spacing={1} padding={1}>
-      <Grid item></Grid>
+    <Grid container direction='column' alignItems='center' spacing={2} padding={2}>
+      <Grid item sx={{ height: '2.3em', position: 'relative' }}>
+        {robot.avatarLoaded && robot.nickname ? (
+          <Typography align='center' component='h5' variant='h5'>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexWrap: 'wrap',
+              }}
+            >
+              {width < 19 ? null : (
+                <Bolt
+                  sx={{
+                    color: '#fcba03',
+                    height: '1.5em',
+                    width: '1.5em',
+                  }}
+                />
+              )}
+              <b>{robot.nickname}</b>
+              {width < 19 ? null : (
+                <Bolt
+                  sx={{
+                    color: '#fcba03',
+                    height: '1.5em',
+                    width: '1.5em',
+                  }}
+                />
+              )}
+            </div>
+          </Typography>
+        ) : (
+          <>
+            <b>{t('Rebuilding your robot!')}</b>
+            <LinearProgress />
+          </>
+        )}
+      </Grid>
+
+      <Grid item sx={{ width: `13.5em` }}>
+        <RobotAvatar
+          nickname={robot.nickname}
+          smooth={true}
+          style={{ maxWidth: '12.5em', maxHeight: '12.5em' }}
+          placeholderType='generating'
+          imageStyle={{
+            transform: '',
+            border: '2px solid #555',
+            filter: 'drop-shadow(1px 1px 1px #000000)',
+            height: `12.4em`,
+            width: `12.4em`,
+          }}
+          tooltip={t('This is your trading avatar')}
+          tooltipPosition='top'
+          baseUrl={baseUrl}
+        />
+      </Grid>
+
+      {robotFound ? (
+        <Grid item>
+          <Typography variant='subtitle2' color='primary'>
+            {t('Welcome back!')}
+            <br />
+          </Typography>
+        </Grid>
+      ) : (
+        <></>
+      )}
+      <Grid item sx={{ width: '100%' }}>
+        <TokenInput
+          inputToken={inputToken}
+          editable={false}
+          setInputToken={setInputToken}
+          setRobot={setRobot}
+          badRequest={badRequest}
+          robot={robot}
+          onPressEnter={() => null}
+        />
+      </Grid>
     </Grid>
   );
 };

frontend/src/basic/RobotPage/TokenInput.tsx

@@ -21,6 +21,7 @@ import { saveAsJson } from '../../utils';
 
 interface TokenInputProps {
   robot: Robot;
+  editable?: boolean;
   showDownload?: boolean;
   fullWidth?: boolean;
   setRobot: (state: Robot) => void;
@@ -29,11 +30,14 @@ interface TokenInputProps {
   badRequest: string | undefined;
   setInputToken: (state: string) => void;
   showCopy?: boolean;
+  label?: string;
 }
 
 const TokenInput = ({
   robot,
+  editable = true,
   showCopy = true,
+  label,
   setRobot,
   showDownload = false,
   fullWidth = true,
@@ -58,12 +62,14 @@ const TokenInput = ({
   return (
     <TextField
       error={!!badRequest}
+      disabled={!editable}
       required={true}
+      label={label ? label : undefined}
       value={inputToken}
       autoFocus
       fullWidth={fullWidth}
       sx={{ borderColor: 'primary' }}
-      variant='outlined'
+      variant={editable ? 'outlined' : 'filled'}
       helperText={badRequest}
       size='medium'
       onChange={(e) => setInputToken(e.target.value)}

frontend/src/basic/RobotPage/index.tsx

@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
 
 import { Page } from '../NavBar';
 import { Robot } from '../../models';
-import { genBase62Token, saveAsJson, tokenStrength } from '../../utils';
+import { tokenStrength } from '../../utils';
 import { systemClient } from '../../services/System';
 import { apiClient } from '../../services/api';
 import { genKey } from '../../pgp';
@@ -45,20 +45,18 @@ const RobotPage = ({
   const [badRequest, setBadRequest] = useState<string | undefined>(undefined);
   const [tokenChanged, setTokenChanged] = useState<boolean>(false);
   const [inputToken, setInputToken] = useState<string>('');
-  const [view, setView] = useState<'welcome' | 'onboarding' | 'recovery' | 'profile'>('welcome');
+  const [view, setView] = useState<'welcome' | 'onboarding' | 'recovery' | 'profile'>(
+    robot.token ? 'profile' : 'welcome',
+  );
 
-  // useEffect(() => {
-  //   if (robot.nickname != null) {
-  //     setInputToken(robot.token);
-  //   } else if (robot.token) {
-  //     setInputToken(robot.token);
-  //     getGenerateRobot(robot.token);
-  //   } else {
-  //     const newToken = genBase62Token(36);
-  //     setInputToken(newToken);
-  //     getGenerateRobot(newToken);
-  //   }
-  // }, []);
+  useEffect(() => {
+    if (robot.token) {
+      setInputToken(robot.token);
+    }
+    if (robot.nickname == null && robot.token) {
+      getGenerateRobot(robot.token);
+    }
+  }, []);
 
   const getGenerateRobot = (token: string) => {
     const strength = tokenStrength(token);
@@ -152,6 +150,11 @@ const RobotPage = ({
         overflowX: 'clip',
       }}
     >
+      {/* TOR LOADING
+      Your connection is being encrypted and annonimized using the TOR Network. This ensures maximum privacy, however you might feel it is a bit slow or even lose connection from time to time.
+
+      */}
+
       {view === 'welcome' ? <Welcome setView={setView} width={width} /> : null}
 
       {view === 'onboarding' ? (
@@ -172,8 +175,10 @@ const RobotPage = ({
         <RobotProfile
           setView={setView}
           robot={robot}
+          robotFound={robotFound}
           setRobot={setRobot}
           badRequest={badRequest}
+          width={width}
           inputToken={inputToken}
           setInputToken={setInputToken}
           getGenerateRobot={getGenerateRobot}

frontend/static/css/index.css

@@ -56,12 +56,6 @@ body {
   position: fixed;
 }
 
-.clickTrough {
-  height: 50px;
-  pointer-events: none;
-  z-index: 1;
-}
-
 /* No arrows on numeric inputs */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {