Capital/src/pages/flow/accounts/confirm.tsx

72 lines
1.8 KiB
TypeScript

import { sni } from 'solar-js-sdk'
import { Container, Box, Typography, CircularProgress, Alert, Collapse } from '@mui/material'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import ErrorIcon from '@mui/icons-material/Error'
import 'animate.css'
export default function AccountConfirm() {
const router = useRouter()
const [error, setError] = useState<string | null>(null)
async function confirm() {
try {
await sni.post('/cgi/id/users/me/confirm', {
code: router.query['code'] as string,
})
router.push('/')
} catch (err: any) {
setError(err.toString())
}
}
useEffect(() => {
confirm()
}, [])
return (
<Container
sx={{
display: 'grid',
placeItems: 'center',
height: 'calc(100vh - 64px)',
textAlign: 'center',
}}
maxWidth="xs"
>
<Box sx={{ width: '100%' }}>
<Typography variant="h5" component="h1">
Confirm Account
</Typography>
<Typography variant="subtitle2" component="h2">
Confirm your registeration on Solar Network
</Typography>
<Collapse in={!!error} sx={{ width: '100%' }}>
<Alert sx={{ mt: 4 }} icon={<ErrorIcon fontSize="inherit" />} severity="error">
{error}
</Alert>
</Collapse>
{!error && (
<Box sx={{ mt: 3 }}>
<CircularProgress />
<Typography
variant="body2"
sx={{ mt: 3 }}
className="animate__animated animate__flash animate__infinite"
style={{ '--animate-duration': '3s' } as any}
>
Hold on a moment, we&apos;re working on it...
</Typography>
</Box>
)}
</Box>
</Container>
)
}