location page changes

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,18 +1,18 @@
 import { useState, useEffect } from 'react'
 import { Box } from 'theme-ui'
 
-import getIP from '../../../utils/getIP'
+import getIP from '../../../utils/getIp'
 
 interface LocationPageProps {
   tab: string
 }
 
-const AddressAutofillPage = ({ tab }: LocationPageProps) => {
+const AutofillPage = ({ tab }: LocationPageProps) => {
   const [ip, setIP] = useState(null)
   const [configuration, setConfiguration] = useState('default')
 
   useEffect(() => {
-    chrome.storage.sync.get(['configuration', 'ipData'], (storage) => {
+    chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
       storage.configuration && setConfiguration(storage.configuration)
       if (storage.ipData) {
         setIP(storage.ipData)
@@ -25,12 +25,12 @@ const AddressAutofillPage = ({ tab }: LocationPageProps) => {
   return (
     <Box
       sx={{
-        display: tab === 'addressAutofill' ? 'block' : 'none',
+        display: tab === 'autofill' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Address Autofill</Box>
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>Autofill Values</Box>
     </Box>
   )
 }
 
-export default AddressAutofillPage
+export default AutofillPage

src/Popup/Pages/LocationPage/ConfigurationSelect.tsx

@@ -14,7 +14,7 @@ const ConfigurationSelect = ({
 }: ConfigurationSelectProps) => {
   const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
-    chrome.storage.sync.set({
+    chrome.storage.local.set({
       configuration: e.target.value,
     })
     setConfiguration(e.target.value)
@@ -30,16 +30,12 @@ const ConfigurationSelect = ({
         onChange={changeConfiguration}
         mb={'8px'}
       >
-        <option value="none">None</option>
-        <option value="match">Match IP</option>
         <option value="custom">Custom</option>
-        <optgroup label="Locations">
+        {Object.keys(configurations).map((key) => (
-          {Object.keys(configurations).map((key) => (
+          <option value={key} key={key}>
-            <option value={key} key={key}>
+            {configurations[key].name}
-              {configurations[key].name}
+          </option>
-            </option>
+        ))}
-          ))}
-        </optgroup>
       </Select>
     </>
   )

src/Popup/Pages/LocationPage/IpData.tsx

@@ -1,7 +1,8 @@
 import { Dispatch, SetStateAction } from 'react'
 import { Flex, Button, Text } from 'theme-ui'
 import detachDebugger from '../../../utils/detachDebugger'
-import getIP from '../../../utils/getIP'
+import getIp from '../../../utils/getIp'
+import { ipData } from '../../../types'
 
 const getFlagEmoji = (countryCode: string) => {
   const codePoints = countryCode
@@ -13,16 +14,16 @@ const getFlagEmoji = (countryCode: string) => {
 
 interface IPDataProps {
   ip: any
-  setIP: Dispatch<SetStateAction<null>>
+  setIp: Dispatch<SetStateAction<ipData | undefined>>
 }
 
-const IPData = ({ ip, setIP }: IPDataProps) => {
+const IpData = ({ ip, setIp }: IPDataProps) => {
   return (
     <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       <Text>{ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}</Text>
       <Button
         onClick={() => {
-          Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+          Promise.resolve(getIp()).then((ipData) => setIp(ipData))
           detachDebugger()
         }}
       >
@@ -32,4 +33,4 @@ const IPData = ({ ip, setIP }: IPDataProps) => {
   )
 }
 
-export default IPData
+export default IpData

src/Popup/Pages/LocationPage/LocationInput.tsx

@@ -11,55 +11,55 @@ import detachDebugger from '../../../utils/detachDebugger'
 import { Label, Input } from 'theme-ui'
 
 interface LocationInputProps {
-  type: string
+  name: string
   title: string
-  ip: any
+  // ip: any
-  configuration: string
+  value: string
-  setConfiguration: Dispatch<SetStateAction<string>>
+  setValue: Dispatch<SetStateAction<string>>
 }
 
 const LocationInput = ({
-  type,
+  name,
   title,
-  ip,
+  // ip,
-  configuration,
+  value,
-  setConfiguration,
+  setValue,
 }: LocationInputProps) => {
-  const [value, setValue] = useState('')
+  // const [value, setValue] = useState('')
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (configuration === 'none') {
+  //   if (configuration === 'none') {
-      setValue('')
+  //     setValue('')
-      chrome.storage.sync.set({ [type]: '' })
+  //     chrome.storage.local.set({ [type]: '' })
-    } else if (configuration === 'match') {
+  //   } else if (configuration === 'match') {
-      if (ip) {
+  //     if (ip) {
-        const ipTypeValue =
+  //       const ipTypeValue =
-          type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
+  //         type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
-        setValue(ipTypeValue)
+  //       setValue(ipTypeValue)
-        chrome.storage.sync.set({ [type]: ipTypeValue })
+  //       chrome.storage.local.set({ [type]: ipTypeValue })
-      }
+  //     }
-    } else if (configuration === 'custom') {
+  //   } else if (configuration === 'custom') {
-      chrome.storage.sync.get([type], (storage) => {
+  //     chrome.storage.local.get([type], (storage) => {
-        storage[type] && setValue(storage[type])
+  //       storage[type] && setValue(storage[type])
-      })
+  //     })
-    } else if (configuration !== 'default') {
+  //   } else if (configuration !== 'default') {
-      setValue(configurations[configuration][type])
+  //     setValue(configurations[configuration][type])
-      chrome.storage.sync.set({ [type]: configurations[configuration][type] })
+  //     chrome.storage.local.set({ [type]: configurations[configuration][type] })
-    }
+  //   }
-  }, [ip, configuration, type, value])
+  // }, [name, value])
 
   const changeTextValue = (e: ChangeEvent<HTMLInputElement>) => {
-    detachDebugger()
+    // detachDebugger()
-    chrome.storage.sync.set({ [type]: e.target.value })
+    // chrome.storage.local.set({ [type]: e.target.value })
     setValue(e.target.value)
-    chrome.storage.sync.set({ configuration: 'custom' })
+    // chrome.storage.local.set({ configuration: 'custom' })
-    setConfiguration('custom')
+    // setConfiguration('custom')
   }
 
   return (
     <>
-      <Label htmlFor={type}>{title}</Label>
+      <Label htmlFor={name}>{title}</Label>
-      <Input name={type} value={value} onChange={changeTextValue} />
+      <Input name={name} value={value} onChange={changeTextValue} />
     </>
   )
 }

src/Popup/Pages/LocationPage/index.tsx

@@ -1,68 +1,159 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, ChangeEvent } from 'react'
-import { Box } from 'theme-ui'
+import { Box, Flex, Label, Radio } from 'theme-ui'
 import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
-import IPData from './IPData'
+import IpData from './IpData'
-import getIP from '../../../utils/getIP'
+import getIp from '../../../utils/getIp'
+import detachDebugger from '../../../utils/detachDebugger'
+import countryLocales from '../../../utils/countryLocales'
+import { ipData } from '../../../types'
+import configurations from '../../../utils/configurations'
 
 interface LocationPageProps {
   tab: string
 }
 
 const LocationPage = ({ tab }: LocationPageProps) => {
-  const [ip, setIP] = useState(null)
+  const [type, setType] = useState('default')
-  const [configuration, setConfiguration] = useState('default')
+  const [timezone, setTimezone] = useState('')
+  const [locale, setLocale] = useState('')
+  const [latitude, setLatitude] = useState('')
+  const [longitude, setLongitude] = useState('')
+  const [ip, setIp] = useState<ipData | undefined>(undefined)
+  const [configuration, setConfiguration] = useState('custom')
 
   useEffect(() => {
-    chrome.storage.sync.get(['configuration', 'ipData'], (storage) => {
+    Promise.resolve(getIp()).then((ipData) => setIp(ipData))
-      storage.configuration && setConfiguration(storage.configuration)
-      if (storage.ipData) {
-        setIP(storage.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
-    })
   }, [])
 
+  useEffect(() => {
+    if (type === 'default') {
+      setTimezone('')
+      setLocale('')
+      setLatitude('')
+      setLongitude('')
+      chrome.storage.local.set({
+        timezone: '',
+        locale: '',
+        latitude: '',
+        longitude: '',
+      })
+    } else if (type === 'matchIp') {
+      if (ip) {
+        setTimezone(ip.timezone)
+        setLocale(countryLocales[ip.countryCode].locale)
+        setLatitude(`${ip.lat}`)
+        setLongitude(`${ip.lon}`)
+        chrome.storage.local.set({
+          timezone: ip.timezone,
+          locale: countryLocales[ip.countryCode].locale,
+          latitude: ip.lat,
+          longitude: ip.lon,
+        })
+      }
+    } else if (type === 'custom') {
+      if (configuration !== 'custom') {
+        setTimezone(configurations[configuration].timezone)
+        setLocale(configurations[configuration].locale)
+        setLatitude(configurations[configuration].lat)
+        setLongitude(configurations[configuration].lon)
+        chrome.storage.local.set({
+          timezone: configurations[configuration].timezone,
+          locale: configurations[configuration].locale,
+          latitude: configurations[configuration].lat,
+          longitude: configurations[configuration].lon,
+        })
+      }
+      // setLocale(countryLocales[ip.countryCode].locale)
+      // setLatitude(`${ip.lat}`)
+      // setLongitude(`${ip.lon}`)
+      // chrome.storage.local.set({
+      //   timezone: ip.timezone,
+      //   locale: countryLocales[ip.countryCode].locale,
+      //   latitude: ip.lat,
+      //   longitude: ip.lon,
+      // })
+    }
+  }, [configuration, ip, type])
+
+  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
+    // detachDebugger()
+    // e.target.value === 'none' && setUserAgent('')
+    // chrome.storage.local.set({ type: e.target.value })
+    setType(e.target.value)
+  }
+
   return (
     <Box
       sx={{
         display: tab === 'location' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Location Data</Box>
+      <Box sx={{ fontSize: '20px', mb: '12px' }}>Location Data</Box>
-      <ConfigurationSelect
+      <Flex
-        configuration={configuration}
+        sx={{
-        setConfiguration={setConfiguration}
+          justifyContent: 'space-between',
-      />
+          mb: '8px',
-      {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
+        }}
+      >
+        <Label>
+          <Radio
+            name="locationType"
+            value="default"
+            onChange={changeType}
+            checked={type === 'default'}
+          />
+          Default
+        </Label>
+        <Label>
+          <Radio
+            name="locationType"
+            value="matchIp"
+            onChange={changeType}
+            checked={type === 'matchIp'}
+          />
+          Match IP
+        </Label>
+        <Label>
+          <Radio
+            name="locationType"
+            value="custom"
+            onChange={changeType}
+            checked={type === 'custom'}
+          />
+          Custom
+        </Label>
+      </Flex>
+      {type === 'matchIp' && <IpData ip={ip} setIp={setIp} />}
+      {type === 'custom' && (
+        <ConfigurationSelect
+          configuration={configuration}
+          setConfiguration={setConfiguration}
+        />
+      )}
       <LocationInput
-        type="timezone"
+        name="timezone"
         title="Timezone"
-        ip={ip}
+        value={timezone}
-        configuration={configuration}
+        setValue={setTimezone}
-        setConfiguration={setConfiguration}
       />
       <LocationInput
-        type="locale"
+        name="locale"
         title="Locale"
-        ip={ip}
+        value={locale}
-        configuration={configuration}
+        setValue={setLocale}
-        setConfiguration={setConfiguration}
       />
       <LocationInput
-        type="lat"
+        name="lat"
         title="Latitude"
-        ip={ip}
+        value={latitude}
-        configuration={configuration}
+        setValue={setLatitude}
-        setConfiguration={setConfiguration}
       />
       <LocationInput
-        type="lon"
+        name="lon"
         title="Longitude"
-        ip={ip}
+        value={longitude}
-        configuration={configuration}
+        setValue={setLongitude}
-        setConfiguration={setConfiguration}
       />
     </Box>
   )

src/Popup/Pages/SettingsPage/index.tsx

@@ -11,7 +11,7 @@ const SettingsPage = ({ tab }: LocationPageProps) => {
   const [isWebRtcDisabled, setIsWebRtcDisabled] = useState(false)
 
   useEffect(() => {
-    chrome.storage.sync.get(['isWebRtcDisabled'], (storage) => {
+    chrome.storage.local.get(['isWebRtcDisabled'], (storage) => {
       storage.isWebRtcDisabled && setIsWebRtcDisabled(storage.isWebRtcDisabled)
     })
   }, [])

src/Popup/Pages/UserAgentPage/UserAgentSelect.tsx

@@ -16,7 +16,7 @@ const UserAgentSelect = ({
 }: ConfigurationSelectProps) => {
   const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
-    chrome.storage.sync.set({
+    chrome.storage.local.set({
       configuration: e.target.value,
     })
     setConfiguration(e.target.value)

src/Popup/Pages/UserAgentPage/index.tsx

@@ -14,7 +14,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   const [userAgent, setUserAgent] = useState('')
 
   useEffect(() => {
-    chrome.storage.sync.get(
+    chrome.storage.local.get(
       ['type', 'operatingSystem', 'browser', 'userAgent'],
       (storage) => {
         storage.type && setType(storage.type)
@@ -27,7 +27,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
 
   useEffect(() => {
     detachDebugger()
-    chrome.storage.sync.set({ userAgent })
+    chrome.storage.local.set({ userAgent })
   }, [userAgent])
 
   useEffect(() => {
@@ -37,24 +37,24 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   const changeType = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
     e.target.value === 'none' && setUserAgent('')
-    chrome.storage.sync.set({ type: e.target.value })
+    chrome.storage.local.set({ type: e.target.value })
     setType(e.target.value)
   }
 
   const changeOperatingSystem = (e: ChangeEvent<HTMLSelectElement>) => {
-    chrome.storage.sync.set({ operatingSystem: e.target.value })
+    chrome.storage.local.set({ operatingSystem: e.target.value })
     setOperatingSystem(e.target.value)
   }
 
   const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {
-    chrome.storage.sync.set({ browser: e.target.value })
+    chrome.storage.local.set({ browser: e.target.value })
     setBrowser(e.target.value)
   }
 
   const changeUserAgent = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
-    chrome.storage.sync.set({ userAgent: e.target.value })
+    chrome.storage.local.set({ userAgent: e.target.value })
-    chrome.storage.sync.set({ type: 'custom' })
+    chrome.storage.local.set({ type: 'custom' })
     setUserAgent(e.target.value)
     setType('custom')
   }
@@ -78,7 +78,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
             value="none"
             onChange={changeType}
             checked={type === 'none'}
-          />{' '}
+          />
           None
         </Label>
         <Label>
@@ -87,7 +87,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
             value="preloaded"
             onChange={changeType}
             checked={type === 'preloaded'}
-          />{' '}
+          />
           Preloaded
         </Label>
         <Label>
@@ -96,7 +96,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
             value="custom"
             onChange={changeType}
             checked={type === 'custom'}
-          />{' '}
+          />
           Custom
         </Label>
       </Flex>

src/Popup/Pages/WebRtcPage/handleWebRtcPolicy.ts

@@ -6,7 +6,7 @@ const handleWebRtcPolicy = (value: string) => {
         value,
       },
       () => {
-        chrome.storage.sync.set({
+        chrome.storage.local.set({
           webRtcPolicy: value,
         })
       }

src/Popup/Pages/WebRtcPage/index.tsx

@@ -12,7 +12,7 @@ const WebRtcPage = ({ tab }: LocationPageProps) => {
   const [webRtcIp, setWebRtcIp] = useState([])
 
   useEffect(() => {
-    chrome.storage.sync.get(['webRtcPolicy'], (storage) => {
+    chrome.storage.local.get(['webRtcPolicy'], (storage) => {
       storage.webRtcPolicy && setWebRtcPolicy(storage.webRtcPolicy)
     })
   }, [])
@@ -30,7 +30,7 @@ const WebRtcPage = ({ tab }: LocationPageProps) => {
         display: tab === 'webRtc' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>WebRTC</Box>
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>WebRTC Policy</Box>
       <Select
         name="webRtcPolicy"
         id="webRtcPolicy"

src/Popup/Popup.tsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react'
 import { ThemeProvider, Flex, Box, Text } from 'theme-ui'
 import { theme } from '../theme'
 import {
-  MapPin,
   Home,
+  MapPin,
+  FileText,
   MessageSquare,
-  Globe,
   Sliders,
   Settings,
   ExternalLink,
@@ -14,11 +14,11 @@ import TabItem from './TabItem'
 import LocationPage from './Pages/LocationPage'
 import UserAgentPage from './Pages/UserAgentPage'
 import SettingsPage from './Pages/SettingsPage'
-import AddressAutofillPage from './Pages/AddressAutofillPage'
+import AutofillPage from './Pages/AutofillPage'
 import WebRtcPage from './Pages/WebRtcPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('webRtc')
+  const [tab, setTab] = useState('location')
 
   return (
     <ThemeProvider theme={theme}>
@@ -42,9 +42,9 @@ const Popup = () => {
             onClick={() => setTab('location')}
           />
           <TabItem
-            Icon={Home}
+            Icon={FileText}
-            active={tab === 'addressAutofill'}
+            active={tab === 'autofill'}
-            onClick={() => setTab('addressAutofill')}
+            onClick={() => setTab('autofill')}
           />
           <TabItem
             Icon={MessageSquare}
@@ -68,7 +68,7 @@ const Popup = () => {
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
           <LocationPage tab={tab} />
-          <AddressAutofillPage tab={tab} />
+          <AutofillPage tab={tab} />
           <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />
           <SettingsPage tab={tab} />

src/types.ts

@@ -0,0 +1,7 @@
+export interface ipData {
+  query: string
+  timezone: string
+  countryCode: string
+  lat: number
+  lon: number
+}

src/utils/attachDebugger.ts

@@ -1,5 +1,5 @@
 const attachDebugger = (tabId: number) => {
-  chrome.storage.sync.get(
+  chrome.storage.local.get(
     [
       'ipData',
       'timezone',

src/utils/configurations.ts

@@ -15,7 +15,6 @@ const configurations: any = {
   },
   berlin: {
     name: 'Berlin',
-
     timezone: 'Europe/Berlin',
     locale: 'de-DE',
     lat: 52.520007,

src/utils/getIp.ts

@@ -1,9 +1,9 @@
-const getIP = () =>
+const getIp = () =>
   fetch('http://ip-api.com/json/')
     .then((response) => response.json())
     .then((ipData) => {
-      chrome.storage.sync.set({ ipData })
+      chrome.storage.local.set({ ipData })
       return ipData
     })
 
-export default getIP
+export default getIp

src/utils/setAutofillAddress.ts

@@ -1,16 +1,16 @@
 const setAutofillAddress = () => {
-  chrome.storage.sync.get(['isWebRtcDisabled'], (storage) => {
+  chrome.storage.local.get(['isWebRtcDisabled'], (storage) => {
     const value = storage.isWebRtcDisabled
       ? 'default'
       : 'disable_non_proxied_udp'
 
-      chrome.privacy.services.autofillAddressEnabled.clear({}, () => {
+    chrome.privacy.services.autofillAddressEnabled.clear({}, () => {
       chrome.privacy.network.webRTCIPHandlingPolicy.set(
         {
           value,
         },
         () => {
-          chrome.storage.sync.set({
+          chrome.storage.local.set({
             isWebRtcDisabled: !storage.isWebRtcDisabled,
           })
           //   chrome.privacy.network.webRTCIPHandlingPolicy.get({}, (s) => {