Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-11 00:31:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Minor fixes

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-02-18 09:32:15 -08:00
parent d674aa2616
commit 240328a6c5
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
4 changed files with 296 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

386
frontend/src/basic/RobotPage/Onboarding.tsx
View File

@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { import {
Alert, Alert,
Box,
Button, Button,
ButtonGroup, ButtonGroup,
Collapse, Collapse,
@ -10,6 +11,7 @@ import {
LinearProgress, LinearProgress,
Link, Link,
Typography, Typography,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { Page } from '../NavBar'; import { Page } from '../NavBar';
import { Robot } from '../../models'; import { Robot } from '../../models';
@ -43,6 +45,7 @@ const Onboarding = ({
}: OnboardingProps): JSX.Element => { }: OnboardingProps): JSX.Element => {
const { t } = useTranslation(); const { t } = useTranslation();
const history = useHistory(); const history = useHistory();
const theme = useTheme();
const [step, setStep] = useState<'1' | '2' | '3'>('1'); const [step, setStep] = useState<'1' | '2' | '3'>('1');
const [generatedToken, setGeneratedToken] = useState<boolean>(false); const [generatedToken, setGeneratedToken] = useState<boolean>(false);
@ -61,91 +64,97 @@ const Onboarding = ({
}; };
return ( return (
<Grid container direction='column' alignItems='center' spacing={2}> <Grid container direction='column' alignItems='center' spacing={2} padding={2}>
<Grid item> <Grid item>
<Typography variant='h5' color={step == '1' ? 'text.primary' : 'text.disabled'}> <Typography variant='h5' color={step == '1' ? 'text.primary' : 'text.disabled'}>
{t('1. Generate a token')} {t('1. Generate a token')}
</Typography> </Typography>
<Collapse in={step == '1'}> <Collapse in={step == '1'}>
<Grid <Box
container sx={{
direction='column' padding: '0.5em',
alignItems='center' backgroundColor: 'background.paper',
spacing={1} border: '1px solid',
padding={1.5} borderRadius: '4px',
paddingLeft={4} borderColor: theme.palette.mode === 'dark' ? '#434343' : '#c4c4c4',
'&:hover': {
borderColor: theme.palette.mode === 'dark' ? '#ffffff' : '#2f2f2f',
},
}}
> >
<Grid item> <Grid container direction='column' alignItems='center' spacing={1} padding={1.5}>
<Typography>
{t(
'This temporary key gives you access to a unique and private robot identity for your trade.',
)}
</Typography>
</Grid>
{!generatedToken ? (
<Grid item> <Grid item>
<Button autoFocus onClick={generateToken} variant='contained' size='large'> <Typography>
<Casino /> {t(
{t('Generate token')} 'This temporary key gives you access to a unique and private robot identity for your trade.',
</Button> )}
</Typography>
</Grid> </Grid>
) : ( {!generatedToken ? (
<Grid item> <Grid item>
<Collapse in={generatedToken}> <Button autoFocus onClick={generateToken} variant='contained' size='large'>
<Grid container direction='column' alignItems='center' spacing={1}> <Casino />
<Grid item> {t('Generate token')}
<Alert variant='outlined' severity='info'> </Button>
<b>{`${t('Store it somewhere safe!')} `}</b> </Grid>
{t( ) : (
`This token is the one and only key to your robot and trade. You will need it later to recover your order or check it's status.`, <Grid item>
<Collapse in={generatedToken}>
<Grid container direction='column' alignItems='center' spacing={1}>
<Grid item>
<Alert variant='outlined' severity='info'>
<b>{`${t('Store it somewhere safe!')} `}</b>
{t(
`This token is the one and only key to your robot and trade. You will need it later to recover your order or check its status.`,
)}
</Alert>
</Grid>
<Grid item sx={{ width: '100%' }}>
{showMimickProgress ? (
<LinearProgress sx={{ height: '0.7em' }} />
) : (
<TokenInput
inputToken={inputToken}
setInputToken={setInputToken}
setRobot={setRobot}
badRequest={badRequest}
robot={robot}
onPressEnter={() => null}
badRequest={badRequest}
/>
)} )}
</Alert> </Grid>
</Grid> <Grid item>
<Grid item sx={{ width: '100%' }}> <Typography>
{showMimickProgress ? ( {t('You can also add your own random characters into the token or')}
<LinearProgress sx={{ height: '0.7em' }} /> <Button size='small' onClick={generateToken}>
) : ( <Casino />
<TokenInput {t('roll again')}
inputToken={inputToken} </Button>
setInputToken={setInputToken} </Typography>
setRobot={setRobot} </Grid>
badRequest={badRequest}
robot={robot}
onPressEnter={() => null}
badRequest={badRequest}
/>
)}
</Grid>
<Grid item>
<Typography>
{t('You can also add your own random characters into the token or')}
<Button size='small' onClick={generateToken}>
<Casino />
{t('roll again')}
</Button>
</Typography>
</Grid>
<Grid item> <Grid item>
<Button <Button
onClick={() => { onClick={() => {
setStep('2'); setStep('2');
getGenerateRobot(inputToken); getGenerateRobot(inputToken);
setRobot({ ...robot, nickname: undefined }); setRobot({ ...robot, nickname: undefined });
}} }}
variant='contained' variant='contained'
size='large' size='large'
> >
<Check /> <Check />
{t('Continue')} {t('Continue')}
</Button> </Button>
</Grid>
</Grid> </Grid>
</Grid> </Collapse>
</Collapse> </Grid>
</Grid> )}
)} </Grid>
</Grid> </Box>
</Collapse> </Collapse>
</Grid> </Grid>
@ -155,82 +164,88 @@ const Onboarding = ({
</Typography> </Typography>
<Collapse in={step == '2'}> <Collapse in={step == '2'}>
<Grid <Box
container sx={{
direction='column' padding: '0.5em',
alignItems='center' backgroundColor: 'background.paper',
spacing={1} border: '1px solid',
padding={1.5} borderRadius: '4px',
paddingLeft={4} borderColor: theme.palette.mode === 'dark' ? '#434343' : '#c4c4c4',
'&:hover': {
borderColor: theme.palette.mode === 'dark' ? '#ffffff' : '#2f2f2f',
},
}}
> >
<Grid item> <Grid container direction='column' alignItems='center' spacing={1} padding={1.5}>
<Typography>
{robot.avatarLoaded && robot.nickname ? (
t('This is your trading avatar')
) : (
<b>{t('Building your robot!')}</b>
)}
</Typography>
</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',
}}
tooltipPosition='top'
baseUrl={baseUrl}
/>
</Grid>
{robot.avatarLoaded && robot.nickname ? (
<Grid item> <Grid item>
<Typography align='center'>{t('Hi! My name is')}</Typography> <Typography>
<Typography component='h5' variant='h5'> {robot.avatarLoaded && robot.nickname ? (
<div t('This is your trading avatar')
style={{ ) : (
display: 'flex', <b>{t('Building your robot!')}</b>
alignItems: 'center', )}
justifyContent: 'center',
flexWrap: 'wrap',
}}
>
<Bolt
sx={{
color: '#fcba03',
height: '1.5em',
width: '1.5em',
}}
/>
<b>{robot.nickname}</b>
<Bolt
sx={{
color: '#fcba03',
height: '1.5em',
width: '1.5em',
}}
/>
</div>
</Typography> </Typography>
</Grid> </Grid>
) : null}
<Grid item> <Grid item sx={{ width: '13.5em' }}>
<Collapse in={robot.avatarLoaded && robot.nickname ? true : false}> <RobotAvatar
<Button onClick={() => setStep('3')} variant='contained' size='large'> nickname={robot.nickname}
<Check /> smooth={true}
{t('Continue')} style={{ maxWidth: '12.5em', maxHeight: '12.5em' }}
</Button> placeholderType='generating'
</Collapse> imageStyle={{
transform: '',
border: '2px solid #555',
filter: 'drop-shadow(1px 1px 1px #000000)',
height: '12.4em',
width: '12.4em',
}}
tooltipPosition='top'
baseUrl={baseUrl}
/>
</Grid>
{robot.avatarLoaded && robot.nickname ? (
<Grid item>
<Typography align='center'>{t('Hi! My name is')}</Typography>
<Typography component='h5' variant='h5'>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexWrap: 'wrap',
}}
>
<Bolt
sx={{
color: '#fcba03',
height: '1.5em',
width: '1.5em',
}}
/>
<b>{robot.nickname}</b>
<Bolt
sx={{
color: '#fcba03',
height: '1.5em',
width: '1.5em',
}}
/>
</div>
</Typography>
</Grid>
) : null}
<Grid item>
<Collapse in={robot.avatarLoaded && robot.nickname ? true : false}>
<Button onClick={() => setStep('3')} variant='contained' size='large'>
<Check />
{t('Continue')}
</Button>
</Collapse>
</Grid>
</Grid> </Grid>
</Grid> </Box>
</Collapse> </Collapse>
</Grid> </Grid>
@ -239,50 +254,57 @@ const Onboarding = ({
{t('3. Browse or create an order')} {t('3. Browse or create an order')}
</Typography> </Typography>
<Collapse in={step == '3'}> <Collapse in={step == '3'}>
<Grid <Box
container sx={{
direction='column' padding: '0.5em',
alignItems='center' backgroundColor: 'background.paper',
spacing={1} border: '1px solid',
padding={1.5} borderRadius: '4px',
paddingLeft={4} borderColor: theme.palette.mode === 'dark' ? '#434343' : '#c4c4c4',
'&:hover': {
borderColor: theme.palette.mode === 'dark' ? '#ffffff' : '#2f2f2f',
},
}}
> >
<Grid item> <Grid container direction='column' alignItems='center' spacing={1} padding={1.5}>
<Typography> <Grid item>
{t( <Typography>
'RoboSats is a peer-to-peer marketplace. You can browse the public offers or create a new one.', {t(
)} 'RoboSats is a peer-to-peer marketplace. You can browse the public offers or create a new one.',
</Typography> )}
</Grid> </Typography>
</Grid>
<Grid item> <Grid item>
<ButtonGroup variant='contained'> <ButtonGroup variant='contained'>
<Button color='primary' onClick={() => changePage('offers')}> <Button color='primary' onClick={() => changePage('offers')}>
<Storefront /> <Storefront />
{t('Offers')} {t('Offers')}
</Button> </Button>
<Button color='secondary' onClick={() => changePage('create')}> <Button color='secondary' onClick={() => changePage('create')}>
<AddBox /> <AddBox />
{t('Create')} {t('Create')}
</Button> </Button>
</ButtonGroup> </ButtonGroup>
</Grid> </Grid>
<Grid item> <Grid item>
<Typography> <Typography>
{`${t('If you need help on your RoboSats journey, join our public support')} `} {`${t('If you need help on your RoboSats journey join our public support')} `}
<Link target='_blank' href='https://t.me/robosats_es' rel='noreferrer'> <Link target='_blank' href='https://t.me/robosats_es' rel='noreferrer'>
{t('Telegram group')} {t('Telegram group')}
</Link> </Link>
</Typography> </Typography>
</Grid>
</Grid> </Grid>
</Box>
<Grid item>
<Button onClick={() => setView('profile')}>{t('See profile')}</Button>
</Grid>
</Grid>
</Collapse> </Collapse>
</Grid> </Grid>
<Grid item>
<Button color='inherit' onClick={() => setView('profile')}>
{t('See profile')}
</Button>
</Grid>
</Grid> </Grid>
); );
}; };

24
frontend/src/basic/RobotPage/RobotProfile.tsx
View File

@ -0,0 +1,24 @@
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 { FastForward, RocketLaunch } from '@mui/icons-material';
import SmartToy from '@mui/icons-material/SmartToy';
interface RobotProfileProps {
setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
width: number;
}
const RobotProfile = ({ setView, 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>
);
};
export default RobotProfile;

54
frontend/src/basic/RobotPage/Welcome.tsx
View File

@ -1,9 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Box, Button, Grid, Typography, useTheme } from '@mui/material'; import { Box, Button, Grid, Typography, useTheme } from '@mui/material';
import { RoboSatsNoTextIcon, RoboSatsTextIcon } from '../../components/Icons'; import { RoboSatsTextIcon } from '../../components/Icons';
import { FastForward, RocketLaunch } from '@mui/icons-material'; import { FastForward, RocketLaunch, Key } from '@mui/icons-material';
import SmartToy from '@mui/icons-material/SmartToy';
interface WelcomeProps { interface WelcomeProps {
setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void; setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
@ -15,22 +14,43 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Grid container direction='column' alignItems='center' spacing={1} padding={1}> <Grid
<RoboSatsTextIcon container
color='primary' direction='column'
sx={{ alignItems='center'
height: `${Math.min(width * 0.65, 13) * 0.25}em`, spacing={1.8}
width: `${Math.min(width * 0.65, 13)}em`, paddingTop={2}
}} padding={0.5}
/> >
<Typography align='center' component='h5' variant='h5'> <Grid item>
{t('Simple and Private LN P2P Exchange')} <svg width={0} height={0}>
</Typography> <linearGradient id='linearColors' x1={1} y1={0} x2={1} y2={1}>
<stop offset={0} stopColor={theme.palette.primary.main} />
<stop offset={1} stopColor={theme.palette.secondary.main} />
</linearGradient>
</svg>
<RoboSatsTextIcon
sx={{
fill: 'url(#linearColors)',
height: `${Math.min(width * 0.7, 16) * 0.25}em`,
width: `${Math.min(width * 0.7, 16)}em`,
}}
/>
<Typography
lineHeight={0.8}
sx={{ position: 'relative', bottom: '0.3em' }}
color='secondary'
align='center'
component='h6'
variant='h6'
>
{t('Simple and Private LN P2P Exchange')}
</Typography>
</Grid>
<Grid item> <Grid item>
<Box <Box
sx={{ sx={{
padding: '0.5em',
backgroundColor: 'background.paper', backgroundColor: 'background.paper',
border: '1px solid', border: '1px solid',
borderRadius: '4px', borderRadius: '4px',
@ -65,14 +85,14 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => {
</Grid> </Grid>
<Grid item> <Grid item>
<Button color='secondary' variant='contained' onClick={() => setView('recovery')}> <Button color='secondary' variant='contained' onClick={() => setView('recovery')}>
<SmartToy /> <Key />
{t('Recovery')} {t('Recovery')}
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
</Grid> </Grid>
<Grid item> <Grid item sx={{ position: 'relative', bottom: '0.5em' }}>
<Button color='primary' onClick={() => setView('profile')}> <Button color='primary' onClick={() => setView('profile')}>
<FastForward /> <FastForward />
{t('Skip to Robot Generator')} {t('Skip to Robot Generator')}

60
frontend/src/basic/RobotPage/index.tsx
View File

@ -12,6 +12,8 @@ import { genKey } from '../../pgp';
import { sha256 } from 'js-sha256'; import { sha256 } from 'js-sha256';
import Onboarding from './Onboarding'; import Onboarding from './Onboarding';
import Welcome from './Welcome'; import Welcome from './Welcome';
import RobotProfile from './RobotProfile';
import Recovery from './Recovery';
interface RobotPageProps { interface RobotPageProps {
setPage: (state: Page) => void; setPage: (state: Page) => void;
@ -36,7 +38,7 @@ const RobotPage = ({
const params = useParams(); const params = useParams();
const theme = useTheme(); const theme = useTheme();
const refCode = params.refCode; const refCode = params.refCode;
const width = Math.min(windowSize.width * 0.8, 30); const width = Math.min(windowSize.width * 0.8, 28);
const maxHeight = windowSize.height * 0.85 - 3; const maxHeight = windowSize.height * 0.85 - 3;
const [robotFound, setRobotFound] = useState<boolean>(false); const [robotFound, setRobotFound] = useState<boolean>(false);
@ -141,35 +143,35 @@ const RobotPage = ({
const handleClickNewRandomToken = () => {}; const handleClickNewRandomToken = () => {};
return ( return (
<Grid container direction='column' alignItems='center' spacing={1}> <Paper
<Grid item> elevation={12}
<Paper style={{
elevation={12} width: `${width}em`,
style={{ maxHeight: `${maxHeight}em`,
padding: '1em', overflow: 'auto',
width: `${width}em`, overflowX: 'clip',
maxHeight: `${maxHeight}em`, }}
overflow: 'auto', >
}} {view === 'welcome' ? <Welcome setView={setView} width={width} /> : null}
>
{view === 'welcome' ? <Welcome setView={setView} width={width} /> : null}
{view === 'onboarding' ? ( {view === 'onboarding' ? (
<Onboarding <Onboarding
setView={setView} setView={setView}
robot={robot} robot={robot}
setRobot={setRobot} setRobot={setRobot}
badRequest={badRequest} badRequest={badRequest}
inputToken={inputToken} inputToken={inputToken}
setInputToken={setInputToken} setInputToken={setInputToken}
getGenerateRobot={getGenerateRobot} getGenerateRobot={getGenerateRobot}
setPage={setPage} setPage={setPage}
baseUrl={baseUrl} baseUrl={baseUrl}
/> />
) : null} ) : null}
</Paper>
</Grid> {view === 'profile' ? <RobotProfile setView={setView} width={width} /> : null}
</Grid>
{view === 'recovery' ? <Recovery setView={setView} width={width} /> : null}
</Paper>
); );
}; };