137 lines
3.9 KiB
TypeScript
137 lines
3.9 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { ThemeProvider, Flex, Box } from 'theme-ui'
|
|
import { theme } from '../theme'
|
|
import {
|
|
Wifi,
|
|
HardDrive,
|
|
FileText,
|
|
MessageSquare,
|
|
Globe,
|
|
Settings,
|
|
} from 'react-feather'
|
|
import TabItem from './TabItem'
|
|
import SystemPage from './Pages/SystemPage'
|
|
import UserAgentPage from './Pages/UserAgentPage'
|
|
import SettingsPage from './Pages/SettingsPage'
|
|
import AutofillPage from './Pages/AutofillPage'
|
|
import WebRtcPage from './Pages/WebRtcPage'
|
|
import ConnectionPage from './Pages/ConnectionPage'
|
|
import { ipData } from '../types'
|
|
import getIp from '../utils/getIp'
|
|
// import getReverseGeocoding from '../utils/getReverseGeocoding'
|
|
import '../assets/global.css'
|
|
import OtherOptionsPage from './Pages/OtherOptionsPage'
|
|
|
|
const Popup = () => {
|
|
const [tab, setTab] = useState('autofill')
|
|
const [ipData, setIpData] = useState<ipData>()
|
|
// const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
|
|
const [geolocation, setGeolocation] = useState<GeolocationCoordinates>()
|
|
|
|
useEffect(() => {
|
|
getIp().then((ipDataRes) => {
|
|
setIpData(ipDataRes)
|
|
// if (ipDataRes.lat && ipDataRes.lon) {
|
|
// getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then(
|
|
// (reverseGeocodingRes) => {
|
|
// setReverseGeocoding(reverseGeocodingRes)
|
|
// console.log(reverseGeocodingRes)
|
|
// }
|
|
// )
|
|
// }
|
|
})
|
|
navigator.geolocation.getCurrentPosition(
|
|
(pos) => setGeolocation(pos.coords),
|
|
(err) => console.warn(`ERROR(${err.code}): ${err.message}`),
|
|
{
|
|
enableHighAccuracy: true,
|
|
timeout: 5000,
|
|
}
|
|
)
|
|
}, [])
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<Flex
|
|
sx={{
|
|
width: '350px',
|
|
height: '428px',
|
|
}}
|
|
>
|
|
<Flex
|
|
sx={{
|
|
minWidth: '36px',
|
|
backgroundColor: 'primary',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
<TabItem
|
|
Icon={Wifi}
|
|
active={tab === 'connection'}
|
|
onClick={() => setTab('connection')}
|
|
/>
|
|
<TabItem
|
|
Icon={HardDrive}
|
|
active={tab === 'system'}
|
|
onClick={() => setTab('system')}
|
|
/>
|
|
<TabItem
|
|
Icon={FileText}
|
|
active={tab === 'autofill'}
|
|
onClick={() => setTab('autofill')}
|
|
/>
|
|
<TabItem
|
|
Icon={MessageSquare}
|
|
active={tab === 'webRtc'}
|
|
onClick={() => setTab('webRtc')}
|
|
/>
|
|
<TabItem
|
|
Icon={Globe}
|
|
active={tab === 'userAgent'}
|
|
onClick={() => setTab('userAgent')}
|
|
/>
|
|
{/* <TabItem
|
|
Icon={Sliders}
|
|
active={tab === 'otherOptions'}
|
|
onClick={() => setTab('otherOptions')}
|
|
/> */}
|
|
<TabItem
|
|
Icon={Settings}
|
|
active={tab === 'settings'}
|
|
onClick={() => setTab('settings')}
|
|
/>
|
|
{/* <TabItem
|
|
Icon={ExternalLink}
|
|
onClick={() => window.open('https://vytal.io')}
|
|
/> */}
|
|
</Flex>
|
|
<Box sx={{ m: '12px', width: '100%' }}>
|
|
<ConnectionPage tab={tab} ipData={ipData} />
|
|
<SystemPage tab={tab} ipData={ipData} geolocation={geolocation} />
|
|
<AutofillPage
|
|
tab={tab}
|
|
ipData={ipData}
|
|
// reverseGeocoding={reverseGeocoding}
|
|
/>
|
|
<WebRtcPage tab={tab} />
|
|
<UserAgentPage tab={tab} />
|
|
<OtherOptionsPage tab={tab} />
|
|
<SettingsPage tab={tab} />
|
|
{/* <Text
|
|
sx={{
|
|
mb: '8px',
|
|
fontSize: '10px',
|
|
position: 'fixed',
|
|
bottom: '0',
|
|
}}
|
|
>
|
|
Connection tab won't be fully spoofed until after 1st or 2nd reload.
|
|
</Text> */}
|
|
</Box>
|
|
</Flex>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
|
|
export default Popup
|