Add robot generation step

frontend/src/basic/RobotPage/Onboarding.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, Button, Collapse, Grid, Typography, useTheme } from '@mui/material';
+import { Alert, Button, Collapse, Grid, LinearProgress, Typography, useTheme } from '@mui/material';
 import { useParams } from 'react-router-dom';
 
 import { Page } from '../NavBar';
@@ -12,6 +12,7 @@ import { genBase62Token } from '../../utils';
 
 interface OnboardingProps {
   robot: Robot;
+  setRobot: (state: Robot) => void;
   inputToken: string;
   setInputToken: (state: string) => void;
   getGenerateRobot: (token: string) => void;
@@ -35,6 +36,14 @@ const Onboarding = ({
 
   const [step, setStep] = useState<'1' | '2' | '3'>('1');
   const [generatedToken, setGeneratedToken] = useState<boolean>(false);
+  const [showMimickProgress, setShowMimickProgress] = useState<boolean>(false);
+
+  const generateToken = () => {
+    setGeneratedToken(true);
+    setInputToken(genBase62Token(36));
+    setShowMimickProgress(true);
+    setTimeout(() => setShowMimickProgress(false), 1000);
+  };
 
   return (
     <Grid container direction='column' alignItems='center' spacing={2}>
@@ -53,15 +62,7 @@ const Onboarding = ({
             </Grid>
             {!generatedToken ? (
               <Grid item>
-                <Button
+                <Button autoFocus onClick={generateToken} variant='contained' size='large'>
-                  autoFocus
-                  onClick={() => {
-                    setGeneratedToken(true);
-                    setInputToken(genBase62Token(36));
-                  }}
-                  variant='contained'
-                  size='large'
-                >
                   <Casino />
                   {t('Generate token')}
                 </Button>
@@ -79,6 +80,9 @@ const Onboarding = ({
                       </Alert>
                     </Grid>
                     <Grid item sx={{ width: '100%' }}>
+                      {showMimickProgress ? (
+                        <LinearProgress sx={{ height: '0.7em' }} />
+                      ) : (
                         <TokenInput
                           inputToken={inputToken}
                           setInputToken={setInputToken}
@@ -88,21 +92,14 @@ const Onboarding = ({
                           onPressEnter={() => null}
                           badRequest={badRequest}
                         />
+                      )}
                     </Grid>
                     <Grid item>
                       <Typography>
-                        {t(
+                        {t('You can also add your own random characters into the token or')}
-                          'You can also add your own random characters into the token or roll the dice again',
+                        <Button size='small' onClick={generateToken}>
-                        )}
-                        <Button
-                          size='small'
-                          onClick={() => {
-                            setGeneratedToken(true);
-                            setInputToken(genBase62Token(36));
-                          }}
-                        >
                           <Casino />
-                          {t('Generate another one')}
+                          {t('roll again')}
                         </Button>
                       </Typography>
                     </Grid>
@@ -112,6 +109,7 @@ const Onboarding = ({
                         onClick={() => {
                           setStep('2');
                           getGenerateRobot(inputToken);
+                          setRobot({ ...robot, nickname: null });
                         }}
                         variant='contained'
                         size='large'
@@ -135,12 +133,67 @@ const Onboarding = ({
 
         <Collapse in={step == '2'}>
           <Grid container direction='column' alignItems='center' spacing={1} paddingLeft={4}>
+            {robot.avatarLoaded && robot.nickname ? (
+              <Grid item>
+                <Typography>{t('Hi! My name is')}</Typography>
+                <Typography component='h5' variant='h5'>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      flexWrap: 'wrap',
+                      height: '3.2em',
+                    }}
+                  >
+                    <Bolt
+                      sx={{
+                        color: '#fcba03',
+                        height: '1.5em',
+                        width: '1.5em',
+                      }}
+                    />
+                    <a>{robot.nickname}</a>
+                    <Bolt
+                      sx={{
+                        color: '#fcba03',
+                        height: '1.5em',
+                        width: '1.5em',
+                      }}
+                    />
+                  </div>
+                </Typography>
+              </Grid>
+            ) : (
               <Grid item>
                 <Typography>{t('Your robot is under consctruction!')}</Typography>
               </Grid>
+            )}
+
+            <Grid item sx={{ width: '15em' }}>
+              <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>
 
             <Grid item>
-              <Typography>{t('Hi! My name is')}</Typography>
+              <Button onClick={() => setStep('3')} variant='contained' size='large'>
+                <Check />
+                {t('Continue')}
+              </Button>
             </Grid>
           </Grid>
         </Collapse>
@@ -149,6 +202,13 @@ const Onboarding = ({
           <Typography variant='h5' color={step == '3' ? 'text.primary' : 'text.disabled'}>
             {t('3. Browse or create an order')}
           </Typography>
+          <Collapse in={step == '3'}>
+            <Grid container direction='column' alignItems='center' spacing={1} paddingLeft={4}>
+              Marketplace See Offers contained buttonm Create Offer container button If you need
+              help fire away on our support public Telegram group! Support Telegram Group My profile
+              not contained button
+            </Grid>
+          </Collapse>
         </Grid>
       </Grid>
     </Grid>

frontend/src/basic/RobotPage/index.tsx

@@ -53,18 +53,18 @@ const RobotPage = ({
   const [tokenChanged, setTokenChanged] = useState<boolean>(false);
   const [inputToken, setInputToken] = useState<string>('');
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (robot.nickname != null) {
+  //   if (robot.nickname != null) {
-      setInputToken(robot.token);
+  //     setInputToken(robot.token);
-    } else if (robot.token) {
+  //   } else if (robot.token) {
-      setInputToken(robot.token);
+  //     setInputToken(robot.token);
-      getGenerateRobot(robot.token);
+  //     getGenerateRobot(robot.token);
-    } else {
+  //   } else {
-      const newToken = genBase62Token(36);
+  //     const newToken = genBase62Token(36);
-      setInputToken(newToken);
+  //     setInputToken(newToken);
-      getGenerateRobot(newToken);
+  //     getGenerateRobot(newToken);
-    }
+  //   }
-  }, []);
+  // }, []);
 
   const getGenerateRobot = (token: string) => {
     const strength = tokenStrength(token);
@@ -162,7 +162,7 @@ const RobotPage = ({
           elevation={12}
           style={{
             padding: '1em',
-            width: `${Math.min(windowSize.width * 0.7, 30)}em`,
+            width: `${Math.min(windowSize.width * 0.8, 30)}em`,
             maxHeight: `${maxHeight}em`,
             overflow: 'auto',
           }}

frontend/src/components/RobotAvatar/index.tsx

@@ -12,6 +12,7 @@ interface Props {
   flipHorizontally?: boolean;
   style?: object;
   imageStyle?: object;
+  placeholderType?: 'loading' | 'generating';
   statusColor?: 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning';
   orderType?: number;
   tooltip?: string;
@@ -29,6 +30,7 @@ const RobotAvatar: React.FC<Props> = ({
   tooltipPosition = 'right',
   smooth = false,
   flipHorizontally = false,
+  placeholderType = 'loading',
   style = {},
   avatarClass = 'flippedSmallAvatar',
   imageStyle = {},
@@ -39,6 +41,16 @@ const RobotAvatar: React.FC<Props> = ({
   const theme = useTheme();
   const [avatarSrc, setAvatarSrc] = useState<string>();
 
+  const backgroundData =
+    placeholderType == 'generating' ? placeholder.generating : placeholder.loading;
+  const backgroundImage = `url(data:${backgroundData.mime};base64,${backgroundData.data})`;
+  const className =
+    placeholderType == 'loading'
+      ? theme.palette.mode === 'dark'
+        ? 'loadingAvatarDark'
+        : 'loadingAvatar'
+      : 'generatingAvatar';
+
   useEffect(() => {
     if (nickname != undefined) {
       if (window.NativeRobosats === undefined) {
@@ -76,10 +88,10 @@ const RobotAvatar: React.FC<Props> = ({
             transform: flipHorizontally ? 'scaleX(-1)' : '',
             border: '0.3px solid #55555',
             filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
-            backgroundImage: `url(data:${placeholder.image.mime};base64,${placeholder.image.data})`,
+            backgroundImage,
           }}
         >
-          <div className={theme.palette.mode === 'dark' ? 'loadingAvatarDark' : 'loadingAvatar'}>
+          <div className={className}>
             <SmoothImage
               src={avatarSrc}
               imageStyles={{

frontend/static/css/index.css

@@ -228,3 +228,20 @@ input[type='number'] {
   background-repeat: repeat;
   animation: animatedBackground 5s linear infinite;
 }
+
+.generatingAvatar {
+  background-size: 100%;
+  border-radius: 50%;
+  border: 0.3px solid #555;
+  filter: dropShadow(1px 1px 1px #000000);
+  background-image: linear-gradient(
+    0deg,
+    #ffd9001f 0%,
+    #3609ff33 40%,
+    #ff32322d 60%,
+    #ffd9001f 100%
+  );
+  background-position: 0px 0px;
+  background-repeat: repeat;
+  animation: animatedBackground 5s linear infinite;
+}