diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx index 683386e8..a4149328 100644 --- a/frontend/src/basic/RobotPage/Onboarding.tsx +++ b/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(false); + const [showMimickProgress, setShowMimickProgress] = useState(false); + + const generateToken = () => { + setGeneratedToken(true); + setInputToken(genBase62Token(36)); + setShowMimickProgress(true); + setTimeout(() => setShowMimickProgress(false), 1000); + }; return ( @@ -53,15 +62,7 @@ const Onboarding = ({ {!generatedToken ? ( - @@ -79,30 +80,26 @@ const Onboarding = ({ - null} - badRequest={badRequest} - /> + {showMimickProgress ? ( + + ) : ( + null} + badRequest={badRequest} + /> + )} - {t( - 'You can also add your own random characters into the token or roll the dice again', - )} - @@ -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 = ({ - - {t('Your robot is under consctruction!')} + {robot.avatarLoaded && robot.nickname ? ( + + {t('Hi! My name is')} + + + + + ) : ( + + {t('Your robot is under consctruction!')} + + )} + + + - {t('Hi! My name is')} + @@ -149,6 +202,13 @@ const Onboarding = ({ {t('3. Browse or create an order')} + + + 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 + + diff --git a/frontend/src/basic/RobotPage/index.tsx b/frontend/src/basic/RobotPage/index.tsx index 3ad44c68..a7e0d322 100644 --- a/frontend/src/basic/RobotPage/index.tsx +++ b/frontend/src/basic/RobotPage/index.tsx @@ -53,18 +53,18 @@ const RobotPage = ({ const [tokenChanged, setTokenChanged] = useState(false); const [inputToken, setInputToken] = useState(''); - 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.nickname != null) { + // setInputToken(robot.token); + // } else if (robot.token) { + // setInputToken(robot.token); + // getGenerateRobot(robot.token); + // } else { + // const newToken = genBase62Token(36); + // setInputToken(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', }} diff --git a/frontend/src/components/RobotAvatar/generatingCompressed.gif b/frontend/src/components/RobotAvatar/generatingCompressed.gif new file mode 100644 index 00000000..6e7626bb Binary files /dev/null and b/frontend/src/components/RobotAvatar/generatingCompressed.gif differ diff --git a/frontend/src/components/RobotAvatar/Place_holder_Login.gif b/frontend/src/components/RobotAvatar/generatingPlaceholder.gif similarity index 100% rename from frontend/src/components/RobotAvatar/Place_holder_Login.gif rename to frontend/src/components/RobotAvatar/generatingPlaceholder.gif diff --git a/frontend/src/components/RobotAvatar/index.tsx b/frontend/src/components/RobotAvatar/index.tsx index a85a1b5b..79855855 100644 --- a/frontend/src/components/RobotAvatar/index.tsx +++ b/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 = ({ tooltipPosition = 'right', smooth = false, flipHorizontally = false, + placeholderType = 'loading', style = {}, avatarClass = 'flippedSmallAvatar', imageStyle = {}, @@ -39,6 +41,16 @@ const RobotAvatar: React.FC = ({ const theme = useTheme(); const [avatarSrc, setAvatarSrc] = useState(); + 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 = ({ 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, }} > -
+