2023-10-27 10:01:59 +00:00
import React , { useEffect , useState } from 'react' ;
2022-09-20 17:39:49 +00:00
import { useTranslation } from 'react-i18next' ;
import {
Dialog ,
DialogContent ,
DialogActions ,
Button ,
Divider ,
List ,
ListItemText ,
ListItemIcon ,
ListItemButton ,
Typography ,
} from '@mui/material' ;
import WebIcon from '@mui/icons-material/Web' ;
import AndroidIcon from '@mui/icons-material/Android' ;
import UpcomingIcon from '@mui/icons-material/Upcoming' ;
2023-10-27 10:01:59 +00:00
import { checkVer } from '../../utils' ;
import { type Version } from '../../models' ;
2022-09-20 17:39:49 +00:00
interface Props {
2023-10-27 10:01:59 +00:00
coordinatorVersion : Version ;
clientVersion : Version ;
2022-10-30 19:13:01 +00:00
onClose : ( ) = > void ;
2022-09-20 17:39:49 +00:00
}
2023-10-27 10:01:59 +00:00
const UpdateDialog = ( { coordinatorVersion , clientVersion } : Props ) : JSX . Element = > {
2022-09-20 17:39:49 +00:00
const { t } = useTranslation ( ) ;
2023-10-27 10:01:59 +00:00
const [ open , setOpen ] = useState < boolean > ( ( ) = > checkVer ( coordinatorVersion ) ) ;
const coordinatorString = ` v ${ coordinatorVersion . major } - ${ coordinatorVersion . minor } - ${ coordinatorVersion . patch } ` ;
const clientString = ` v ${ clientVersion . major } - ${ clientVersion . minor } - ${ clientVersion . patch } ` ;
useEffect ( ( ) = > {
setOpen ( checkVer ( coordinatorVersion ) ) ;
} , [ coordinatorVersion ] ) ;
2022-09-20 17:39:49 +00:00
return (
2023-10-27 10:01:59 +00:00
< Dialog
open = { open }
onClose = { ( ) = > {
setOpen ( false ) ;
} }
>
2022-09-20 17:39:49 +00:00
< DialogContent >
< Typography component = 'h5' variant = 'h5' >
{ t ( 'Update your RoboSats client' ) }
< / Typography >
< br / >
< Typography >
{ t (
'The RoboSats coordinator is on version {{coordinatorVersion}}, but your client app is {{clientVersion}}. This version mismatch might lead to a bad user experience.' ,
2023-10-27 10:01:59 +00:00
{ coordinatorString , clientString } ,
2022-09-20 17:39:49 +00:00
) }
< / Typography >
< List dense >
< ListItemButton
component = 'a'
target = '_blank'
2023-10-27 10:01:59 +00:00
href = { ` https://github.com/RoboSats/robosats/releases/tag/ ${ coordinatorString } -alpha ` }
2022-09-20 17:39:49 +00:00
rel = 'noreferrer'
>
< ListItemIcon >
< AndroidIcon color = 'primary' sx = { { height : 32 , width : 32 } } / >
< / ListItemIcon >
< ListItemText
secondary = { t ( 'Download RoboSats {{coordinatorVersion}} APK from Github releases' , {
2022-09-27 15:52:00 +00:00
coordinatorVersion ,
2022-09-20 17:39:49 +00:00
} ) }
primary = { t ( 'On Android RoboSats app ' ) }
/ >
< / ListItemButton >
< Divider / >
< ListItemButton
component = 'a'
target = '_blank'
href = { ` https://hub.docker.com/r/recksato/robosats-client ` }
rel = 'noreferrer'
>
< ListItemIcon >
< UpcomingIcon color = 'primary' sx = { { height : 32 , width : 32 } } / >
< / ListItemIcon >
< ListItemText
secondary = { t ( "Check your node's store or update the Docker image yourself" ) }
primary = { t ( 'On your own soverign node' ) }
/ >
< / ListItemButton >
< Divider / >
2023-05-09 00:37:23 +00:00
< ListItemButton
component = 'a'
onClick = { ( ) = > {
location . reload ( true ) ;
} }
>
2022-09-20 17:39:49 +00:00
< ListItemIcon >
< WebIcon color = 'primary' sx = { { height : 32 , width : 32 } } / >
< / ListItemIcon >
< ListItemText
secondary = { t (
'On Tor Browser client simply refresh your tab (click here or press Ctrl+Shift+R)' ,
) }
primary = { t ( 'On remotely served browser client' ) }
/ >
< / ListItemButton >
< DialogActions >
2023-10-27 10:01:59 +00:00
< Button
onClick = { ( ) = > {
setOpen ( false ) ;
} }
>
{ t ( 'Go away!' ) }
< / Button >
2022-09-20 17:39:49 +00:00
< / DialogActions >
< / List >
< / DialogContent >
< / Dialog >
) ;
} ;
2023-10-27 10:01:59 +00:00
export default UpdateDialog ;