From 8644432ab241b022ff4ddae11be3aabdc0feea38 Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Sun, 19 Feb 2023 13:13:19 -0800 Subject: [PATCH] Add robot profile component --- frontend/src/basic/RobotPage/Onboarding.tsx | 5 +- frontend/src/basic/RobotPage/Recovery.tsx | 11 +- frontend/src/basic/RobotPage/RobotProfile.tsx | 113 +++++++++++++++++- frontend/src/basic/RobotPage/TokenInput.tsx | 8 +- frontend/src/basic/RobotPage/index.tsx | 33 ++--- frontend/static/css/index.css | 6 - 6 files changed, 148 insertions(+), 28 deletions(-) diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx index 4cf2fb80..70be483d 100644 --- a/frontend/src/basic/RobotPage/Onboarding.tsx +++ b/frontend/src/basic/RobotPage/Onboarding.tsx @@ -182,7 +182,10 @@ const Onboarding = ({ {robot.avatarLoaded && robot.nickname ? ( t('This is your trading avatar') ) : ( - {t('Building your robot!')} + <> + {t('Building your robot!')} + + )} diff --git a/frontend/src/basic/RobotPage/Recovery.tsx b/frontend/src/basic/RobotPage/Recovery.tsx index cd1e8006..96d39279 100644 --- a/frontend/src/basic/RobotPage/Recovery.tsx +++ b/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={''} /> - diff --git a/frontend/src/basic/RobotPage/RobotProfile.tsx b/frontend/src/basic/RobotPage/RobotProfile.tsx index 388d8b64..6e89409c 100644 --- a/frontend/src/basic/RobotPage/RobotProfile.tsx +++ b/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 ( - - + + + {robot.avatarLoaded && robot.nickname ? ( + +
+ {width < 19 ? null : ( + + )} + {robot.nickname} + {width < 19 ? null : ( + + )} +
+ + ) : ( + <> + {t('Rebuilding your robot!')} + + + )} + + + + + + + {robotFound ? ( + + + {t('Welcome back!')} +
+ + + ) : ( + <> + )} + + null} + /> + ); }; diff --git a/frontend/src/basic/RobotPage/TokenInput.tsx b/frontend/src/basic/RobotPage/TokenInput.tsx index bfa41e15..a383a83d 100644 --- a/frontend/src/basic/RobotPage/TokenInput.tsx +++ b/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 ( setInputToken(e.target.value)} diff --git a/frontend/src/basic/RobotPage/index.tsx b/frontend/src/basic/RobotPage/index.tsx index 23c18c74..d7dec2b1 100644 --- a/frontend/src/basic/RobotPage/index.tsx +++ b/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(undefined); const [tokenChanged, setTokenChanged] = useState(false); const [inputToken, setInputToken] = useState(''); - 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' ? : null} {view === 'onboarding' ? ( @@ -172,8 +175,10 @@ const RobotPage = ({