Update system data when ip changes

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,4 +1,4 @@
-// import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 // import { Box } from 'theme-ui'
 import Page from '../../Components/Page'
 import CheckBox from '../../Components/CheckBox'
@@ -7,10 +7,11 @@ import { Box, Label, Select } from 'theme-ui'
 
 interface SystemPageProps {
   tab: string
+  reverseGeocoding: any
 }
 
-const AutofillPage = ({ tab }: SystemPageProps) => {
-  // const [ip, setIP] = useState(null)
+const AutofillPage = ({ tab, reverseGeocoding }: SystemPageProps) => {
+  const [city, setCity] = useState('')
   // const [configuration, setConfiguration] = useState('default')
 
   // useEffect(() => {
@@ -24,6 +25,15 @@ const AutofillPage = ({ tab }: SystemPageProps) => {
   //   })
   // }, [])
 
+  const changeUserAgent = () => {
+    // if (userAgentType !== 'custom') {
+    //   setUserAgentType('custom')
+    //   chrome.storage.local.set({
+    //     userAgentType: 'custom',
+    //   })
+    // }
+  }
+
   return (
     <Page isCurrentTab={tab === 'autofill'} title={'Autofill Options'}>
       <CheckBox title={'Disable Built-In Address Autofill'} />
@@ -43,13 +53,13 @@ const AutofillPage = ({ tab }: SystemPageProps) => {
           ))} */}
         </Select>
       </Box>
-      {/* <DebouncedInput
-        name="userAgent"
-        title="User Agent"
-        value={userAgent}
-        setValue={setUserAgent}
+      <DebouncedInput
+        name="city"
+        title="City"
+        value={city}
+        setValue={setCity}
         onChange={changeUserAgent}
-      /> */}
+      />
     </Page>
   )
 }

src/Popup/Pages/CurrentPage/index.tsx

@@ -6,26 +6,26 @@ interface CurrentPageProps {
 }
 
 const CurrentPage = ({ tab }: CurrentPageProps) => {
-  let options: any
+  // let options: any
 
-  function success(pos: any) {
-    var crd = pos.coords
-    console.log('Your current position is:')
-    console.log(`Latitude : ${crd.latitude}`)
-    console.log(`Longitude: ${crd.longitude}`)
-    console.log(`More or less ${crd.accuracy} meters.`)
-  }
+  // function success(pos: any) {
+  //   var crd = pos.coords
+  //   console.log('Your current position is:')
+  //   console.log(`Latitude : ${crd.latitude}`)
+  //   console.log(`Longitude: ${crd.longitude}`)
+  //   console.log(`More or less ${crd.accuracy} meters.`)
+  // }
 
-  function error(err: any) {
-    console.error(`ERROR(${err.code}): ${err.message}`)
-  }
+  // function error(err: any) {
+  //   console.error(`ERROR(${err.code}): ${err.message}`)
+  // }
   // options = {
   //   enableHighAccuracy: false,
   //   timeout: 5000,
   //   maximumAge: 0,
   // }
 
-  navigator.geolocation.watchPosition(success, error)
+  // navigator.geolocation.watchPosition(success, error)
 
   return (
     <Page isCurrentTab={tab === 'current'} title={'Current Info'}>

src/Popup/Pages/SystemPage/index.tsx

@@ -25,7 +25,19 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
     chrome.storage.local.get(
       ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
       (storage) => {
-        if (storage.systemType !== 'default') {
+        console.log(ipData)
+        if (storage.systemType === 'matchIp' && ipData) {
+          setTimezone(ipData.timezone)
+          setLocale(countryLocales[ipData.countryCode].locale)
+          setLatitude(`${ipData.lat}`)
+          setLongitude(`${ipData.lon}`)
+          chrome.storage.local.set({
+            timezone: ipData.timezone,
+            locale: countryLocales[ipData.countryCode].locale,
+            lat: ipData.lat,
+            lon: ipData.lon,
+          })
+        } else if (storage.systemType === 'custom') {
           storage.configuration && setConfiguration(storage.configuration)
           storage.timezone && setTimezone(storage.timezone)
           storage.locale && setLocale(storage.locale)
@@ -37,7 +49,7 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
           : setSystemType('default')
       }
     )
-  }, [])
+  }, [ipData])
 
   const changeType = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()

src/Popup/Pages/UserAgentPage/index.tsx

@@ -4,6 +4,7 @@ import DebouncedInput from '../../Components/DebouncedInput'
 import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
 import Page from '../../Components/Page'
+import CheckBox from '../../Components/CheckBox'
 
 interface UserAgentPageProps {
   tab: string
@@ -152,7 +153,9 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         value={userAgent}
         setValue={setUserAgent}
         onChange={changeUserAgent}
+        mb="12px"
       />
+      <CheckBox title={'Enable Debugger API Spoofing'} />
     </Page>
   )
 }

src/Popup/Popup.tsx

@@ -19,16 +19,27 @@ import WebRtcPage from './Pages/WebRtcPage'
 import CurrentPage from './Pages/CurrentPage'
 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 | undefined>(undefined)
+  const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
 
   useEffect(() => {
-    Promise.resolve(getIp()).then((data) => {
-      setIpData(data)
+    getIp().then((ipDataRes) => {
+      
+      setIpData(ipDataRes)
+      if (ipDataRes.lat && ipDataRes.lon) {
+        getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then(
+          (reverseGeocodingRes) => {
+            setReverseGeocoding(reverseGeocodingRes)
+            console.log(reverseGeocodingRes)
+          }
+        )
+      }
     })
   }, [])
 
@@ -91,7 +102,7 @@ const Popup = () => {
         <Box sx={{ m: '12px', width: '100%' }}>
           <CurrentPage tab={tab} />
           <SystemPage tab={tab} ipData={ipData} />
-          <AutofillPage tab={tab} />
+          <AutofillPage tab={tab} reverseGeocoding={reverseGeocoding} />
           <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />
           <OtherOptionsPage tab={tab} />

src/theme.ts

@@ -24,6 +24,7 @@ export const theme: Theme = {
   forms: {
     label: { width: 'auto', alignItems: 'center' },
     input: {
+      // border: '2px solid',
       p: '2px 8px',
       mb: '8px',
       borderColor: 'grey',
@@ -33,6 +34,7 @@ export const theme: Theme = {
       },
     },
     select: {
+      // border: '2px solid',
       cursor: 'pointer',
       p: '2px 8px',
       borderColor: 'grey',

src/utils/getIp.ts

@@ -2,6 +2,7 @@ const getIp = () =>
   fetch('http://ip-api.com/json/')
     .then((response) => response.json())
     .then((ipData) => {
+      console.log(ipData)
       chrome.storage.local.set({ ipData })
       return ipData
     })

src/utils/getReverseGeocoding.ts

@@ -0,0 +1,12 @@
+const getReverseGeocoding = (lat: number, lon: number) =>
+  fetch(
+    `https://nominatim.openstreetmap.org/reverse?format=geojson&lat=${lat}&lon=${lon}`
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      // chrome.storage.local.set({ ipData })
+      console.log(data)
+      return data.features[0].properties.address
+    })
+
+export default getReverseGeocoding