import React, { useContext, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { Alert, Box, Button, ButtonGroup, Collapse, Grid, LinearProgress, Link, Typography, Accordion, AccordionSummary, AccordionDetails, } from '@mui/material'; import { type Robot } from '../../models'; import { Casino, Bolt, Check, Storefront, AddBox, School } from '@mui/icons-material'; import RobotAvatar from '../../components/RobotAvatar'; import TokenInput from './TokenInput'; import { genBase62Token } from '../../utils'; import { NewTabIcon } from '../../components/Icons'; import { AppContext, type UseAppStoreType } from '../../contexts/AppContext'; import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext'; interface OnboardingProps { setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void; robot: Robot; setRobot: (state: Robot) => void; inputToken: string; setInputToken: (state: string) => void; getGenerateRobot: (token: string) => void; badToken: string; baseUrl: string; } const Onboarding = ({ setView, inputToken, setInputToken, badToken, getGenerateRobot, }: OnboardingProps): JSX.Element => { const { t } = useTranslation(); const navigate = useNavigate(); const { setPage } = useContext(AppContext); const { garage } = useContext(GarageContext); const [step, setStep] = useState<'1' | '2' | '3'>('1'); const [generatedToken, setGeneratedToken] = useState(false); const [loading, setLoading] = useState(false); const generateToken = (): void => { setGeneratedToken(true); setInputToken(genBase62Token(36)); setLoading(true); setTimeout(() => { setLoading(false); }, 1000); }; const slot = garage.getSlot(); const robot = slot?.getRobot(); return ( {t('1. Generate a token')} {t( 'This temporary key gives you access to a unique and private robot identity for your trade.', )} {!generatedToken ? ( ) : ( {`${t('Store it somewhere safe!')} `} {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.`, )} null} /> {t('You can also add your own random characters into the token or')} )} {t('2. Meet your robot identity')} {Boolean(slot?.hashId) ? ( t('This is your trading avatar') ) : ( <> {t('Building your robot!')} )} {Boolean(slot?.hashId) ? ( {t('Hi! My name is')}
{slot?.nickname}
) : null}
{t('3. Browse or create an order')} {t( 'RoboSats is a peer-to-peer marketplace. You can browse the public offers or create a new one.', )} {`${t('If you need help on your RoboSats journey join our public support')} `} {t('Telegram group')} {`, ${t('or visit the robot school for documentation.')} `}
); }; export default Onboarding;