mirror of
https://github.com/RoboSats/robosats.git
synced 2025-07-25 08:33:23 +00:00
139 lines
4.5 KiB
TypeScript
139 lines
4.5 KiB
TypeScript
import React, { useContext } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Box, Button, Grid, Typography, useTheme } from '@mui/material';
|
|
import { RoboSatsTextIcon } from '../../components/Icons';
|
|
import { FastForward, RocketLaunch, Key } from '@mui/icons-material';
|
|
import { genBase62Token } from '../../utils';
|
|
import { type UseFederationStoreType, FederationContext } from '../../contexts/FederationContext';
|
|
import { type UseGarageStoreType, GarageContext } from '../../contexts/GarageContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { type UseAppStoreType, AppContext } from '../../contexts/AppContext';
|
|
|
|
interface WelcomeProps {
|
|
setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void;
|
|
width: number;
|
|
setInputToken: (state: string) => void;
|
|
}
|
|
|
|
const Welcome = ({ setView, width, setInputToken }: WelcomeProps): JSX.Element => {
|
|
const { setPage } = useContext<UseAppStoreType>(AppContext);
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const theme = useTheme();
|
|
const { setOpen } = useContext<UseAppStoreType>(AppContext);
|
|
const { garage } = useContext<UseGarageStoreType>(GarageContext);
|
|
const { federation } = useContext<UseFederationStoreType>(FederationContext);
|
|
|
|
return (
|
|
<Grid
|
|
container
|
|
direction='column'
|
|
alignItems='center'
|
|
spacing={1.8}
|
|
paddingTop={2.2}
|
|
padding={0.5}
|
|
>
|
|
<Grid item style={{ paddingTop: '2em', paddingBottom: '1.5em' }}>
|
|
<svg width={0} height={0}>
|
|
<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.66, 17) * 0.25}em`,
|
|
width: `${Math.min(width * 0.66, 17)}em`,
|
|
}}
|
|
/>
|
|
<Typography
|
|
lineHeight={0.82}
|
|
sx={{ position: 'relative', bottom: '0.3em' }}
|
|
color='secondary'
|
|
align='center'
|
|
component='h6'
|
|
variant='h6'
|
|
>
|
|
{t('A Simple and Private LN P2P Exchange')}
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<Grid item>
|
|
<Box
|
|
sx={{
|
|
backgroundColor: 'background.paper',
|
|
border: '1px solid',
|
|
borderRadius: '4px',
|
|
borderColor: theme.palette.mode === 'dark' ? '#434343' : '#c4c4c4',
|
|
'&:hover': {
|
|
borderColor: theme.palette.mode === 'dark' ? '#ffffff' : '#2f2f2f',
|
|
},
|
|
}}
|
|
>
|
|
<Grid container direction='column' alignItems='center' spacing={1} padding={1.5}>
|
|
<Grid item>
|
|
<Typography align='center'>
|
|
{t('Create a new robot and learn to use RoboSats')}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
<Button
|
|
size='large'
|
|
color='primary'
|
|
variant='contained'
|
|
onClick={() => {
|
|
setView('onboarding');
|
|
}}
|
|
>
|
|
<RocketLaunch />
|
|
<div style={{ width: '0.5em' }} />
|
|
{t('Start')}
|
|
</Button>
|
|
</Grid>
|
|
|
|
<Grid item>
|
|
<Typography align='center'>
|
|
{t('Recover an existing robot using your token')}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
<Button
|
|
size='small'
|
|
color='secondary'
|
|
variant='contained'
|
|
onClick={() => {
|
|
setOpen((open) => {
|
|
return { ...open, recovery: true };
|
|
});
|
|
}}
|
|
>
|
|
<Key /> <div style={{ width: '0.5em' }} />
|
|
{t('Recovery')}
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item sx={{ position: 'relative', bottom: '0.5em' }}>
|
|
<Button
|
|
size='small'
|
|
color='primary'
|
|
onClick={() => {
|
|
const token = genBase62Token(36);
|
|
void garage.createRobot(federation, token);
|
|
setInputToken(token);
|
|
navigate('/create');
|
|
setPage('create');
|
|
}}
|
|
>
|
|
<FastForward /> <div style={{ width: '0.5em' }} />
|
|
{t('Fast Generate Order')}
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default Welcome;
|