table components

src/Popup/Components/Table.tsx

@@ -0,0 +1,39 @@
+import { Box } from 'theme-ui'
+
+interface TableProps {
+  title?: string
+  children: React.ReactNode
+}
+
+const Table = ({ title, children }: TableProps) => {
+  return (
+    <>
+      {title && (
+        <Box
+          sx={{ fontSize: '16px', mt: '12px', mb: '6px', fontWeight: '600' }}
+        >
+          {title}
+        </Box>
+      )}
+      <Box
+        sx={{
+          border: '1px solid',
+          mb: '8px',
+          borderRadius: '4px',
+          borderColor: 'grey',
+        }}
+      >
+        <table
+          sx={{
+            borderCollapse: 'collapse',
+            borderSpacing: '0 10px',
+          }}
+        >
+          <tbody>{children}</tbody>
+        </table>
+      </Box>
+    </>
+  )
+}
+
+export default Table

src/Popup/Components/TableRow.tsx

@@ -0,0 +1,35 @@
+import { Box } from 'theme-ui'
+
+interface TableRowProps {
+  title: string
+  value?: string
+  noBorder?: boolean
+}
+
+const TableRow = ({ title, value, noBorder = false }: TableRowProps) => {
+  return (
+    <tr
+      sx={{
+        borderBottom: noBorder ? 'none' : '1px solid',
+        borderBottomColor: 'grey',
+      }}
+    >
+      <td sx={{ fontWeight: '700', width: '100px', p: '8px' }}>{title}</td>
+      <td>
+        <Box
+          sx={{
+            width: '188px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+          title={value}
+        >
+          {value}
+        </Box>
+      </td>
+    </tr>
+  )
+}
+
+export default TableRow

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,65 +1,113 @@
 import { useState, useEffect } from 'react'
-// import { Box } from 'theme-ui'
+
 import Page from '../../Components/Page'
 import CheckBox from '../../Components/CheckBox'
-import DebouncedInput from '../../Components/DebouncedInput'
+import { ipData } from '../../../types'
-import { Box, Label, Select } from 'theme-ui'
+import Table from '../../Components/Table'
+import TableRow from '../../Components/TableRow'
 
-interface SystemPageProps {
+interface AutofillPageProps {
   tab: string
+  ipData?: ipData
   reverseGeocoding: any
 }
 
-const AutofillPage = ({ tab, reverseGeocoding }: SystemPageProps) => {
+const AutofillPage = ({ tab, ipData, reverseGeocoding }: AutofillPageProps) => {
+  const [country, setCountry] = useState('')
   const [city, setCity] = useState('')
+  const [region, setRegion] = useState('')
+  const [postCode, setPostCode] = useState('')
+  const [address, setAddress] = useState('')
+  const [phone, setPhone] = useState(
+    'fjkdskf fdkfksj 324324kk dj3223j4k3l jerwkjjekjjwrjrhwehrwjejhwreherwjrwhje'
+  )
   // const [configuration, setConfiguration] = useState('default')
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
+    // chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
-  //     storage.configuration && setConfiguration(storage.configuration)
+    //   storage.configuration && setConfiguration(storage.configuration)
-  //     if (storage.ipData) {
+    //   if (storage.ipData) {
-  //       setIP(storage.ipData)
+    //     setIP(storage.ipData)
-  //     } else {
+    //   } else {
-  //       Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+    //     Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-  //     }
+    //   }
-  //   })
+    // })
-  // }, [])
+    if (ipData?.country) {
+      setCountry(ipData.country)
+      chrome.storage.local.set({
+        country: ipData.country,
+      })
+    }
+    if (ipData?.city) {
+      setCity(ipData.city)
+      chrome.storage.local.set({
+        city: ipData.city,
+      })
+    }
+    if (ipData?.regionName) {
+      setRegion(ipData.regionName)
+      chrome.storage.local.set({
+        region: ipData.regionName,
+      })
+    }
+    if (ipData?.zip) {
+      setPostCode(ipData.zip)
+      chrome.storage.local.set({
+        postCode: ipData.zip,
+      })
+    }
+    // ipData?.city && setCity(ipData.city)
+    // ipData?.regionName && setRegion(ipData.regionName)
+    // ipData?.zip && setPostCode()
+    // chrome.storage.local.set({
+    //   country: ipData.country,
+    //   city: ipData.city,
+    //   regionName: ipData.regionName,
+    //   zip: ipData.zip,
+    // })
+  }, [ipData, setCity, setPostCode, setRegion])
 
-  const changeUserAgent = () => {
+  useEffect(() => {
-    // if (userAgentType !== 'custom') {
+    if (!postCode && reverseGeocoding?.postcode) {
-    //   setUserAgentType('custom')
+      setPostCode(reverseGeocoding?.postcode)
-    //   chrome.storage.local.set({
+      chrome.storage.local.set({
-    //     userAgentType: 'custom',
+        postCode: reverseGeocoding?.postcode,
-    //   })
+      })
-    // }
+    }
-  }
+    if (reverseGeocoding?.house_number && reverseGeocoding?.road) {
+      setAddress(`${reverseGeocoding.house_number} ${reverseGeocoding.road}`)
+      chrome.storage.local.set({
+        address: `${reverseGeocoding.house_number} ${reverseGeocoding.road}`,
+      })
+    } else if (reverseGeocoding?.road) {
+      setAddress(reverseGeocoding.road)
+      chrome.storage.local.set({
+        address: reverseGeocoding.road,
+      })
+    }
+  }, [postCode, reverseGeocoding, setAddress])
+
+  // const changeUserAgent = () => {
+  //   // if (userAgentType !== 'custom') {
+  //   //   setUserAgentType('custom')
+  //   //   chrome.storage.local.set({
+  //   //     userAgentType: 'custom',
+  //   //   })
+  //   // }
+  // }
 
   return (
-    <Page isCurrentTab={tab === 'autofill'} title={'Autofill Options'}>
+    <Page isCurrentTab={tab === 'autofill'} title={'Autofill'}>
       <CheckBox title={'Disable Built-In Address Autofill'} />
-      <Box sx={{ width: '100%' }}>
+      <CheckBox title={'Automatically Autofill'} />
-        <Label htmlFor="country">Country</Label>
+      <Table title="Autofill Data">
-        <Select
+        <TableRow title="Country" value={country} />
-          name="country"
+        <TableRow title="Region" value={region} />
-          id="browser"
+        <TableRow title="City" value={city} />
-          // value={browser}
+        <TableRow title="Postal Code" value={postCode} />
-          // onChange={changeBrowser}
+        <TableRow title="Address" value={address} />
-          mb={'8px'}
+        <TableRow title="Phone" value={phone} noBorder />
-        >
+      </Table>
-          {/* {Object.keys(userAgents[operatingSystem]).map((key) => (
-            <option value={key} key={key}>
-              {key}
-            </option>
-          ))} */}
-        </Select>
-      </Box>
-      <DebouncedInput
-        name="city"
-        title="City"
-        value={city}
-        setValue={setCity}
-        onChange={changeUserAgent}
-      />
     </Page>
   )
 }

src/Popup/Pages/ConnectionPage/index.tsx

@@ -0,0 +1,53 @@
+import { ipData } from '../../../types'
+import Page from '../../Components/Page'
+import Table from '../../Components/Table'
+import TableRow from '../../Components/TableRow'
+
+interface ConnectionPageProps {
+  tab: string
+  ipData?: ipData
+}
+
+const ConnectionPage = ({ tab, ipData }: ConnectionPageProps) => {
+  // let options: any
+
+  // function success(pos: any) {
+  //   var crd = pos.coords
+  //   console.log('Your connection 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}`)
+  // }
+  // options = {
+  //   enableHighAccuracy: false,
+  //   timeout: 5000,
+  //   maximumAge: 0,
+  // }
+
+  // navigator.geolocation.watchPosition(success, error)
+
+  return (
+    <Page isCurrentTab={tab === 'connection'} title={'Connection Info'}>
+      <Table>
+        <TableRow title="IP Address" value={ipData?.query} />
+        <TableRow title="Country" value={ipData?.country} />
+        <TableRow title="Region" value={ipData?.regionName} />
+        <TableRow title="City" value={ipData?.city} />
+        <TableRow title="Latitude" value={`${ipData?.lat}`} />
+        <TableRow title="Longitude" value={`${ipData?.lon}`} />
+        <TableRow title="ISP" value={ipData?.isp} />
+        <TableRow
+          title="Proxy"
+          value={ipData?.proxy ? 'True' : 'False'}
+          noBorder
+        />
+      </Table>
+    </Page>
+  )
+}
+
+export default ConnectionPage

src/Popup/Pages/CurrentPage/index.tsx

@@ -1,37 +0,0 @@
-// import { Box } from 'theme-ui'
-import Page from '../../Components/Page'
-
-interface CurrentPageProps {
-  tab: string
-}
-
-const CurrentPage = ({ tab }: CurrentPageProps) => {
-  // 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 error(err: any) {
-  //   console.error(`ERROR(${err.code}): ${err.message}`)
-  // }
-  // options = {
-  //   enableHighAccuracy: false,
-  //   timeout: 5000,
-  //   maximumAge: 0,
-  // }
-
-  // navigator.geolocation.watchPosition(success, error)
-
-  return (
-    <Page isCurrentTab={tab === 'current'} title={'Current Info'}>
-      hello
-    </Page>
-  )
-}
-
-export default CurrentPage

src/Popup/Popup.tsx

@@ -2,12 +2,11 @@ import { useState, useEffect } from 'react'
 import { ThemeProvider, Flex, Box } from 'theme-ui'
 import { theme } from '../theme'
 import {
-  MapPin,
+  Wifi,
   HardDrive,
   FileText,
   MessageSquare,
   Globe,
-  Sliders,
   Settings,
 } from 'react-feather'
 import TabItem from './TabItem'
@@ -16,7 +15,7 @@ import UserAgentPage from './Pages/UserAgentPage'
 import SettingsPage from './Pages/SettingsPage'
 import AutofillPage from './Pages/AutofillPage'
 import WebRtcPage from './Pages/WebRtcPage'
-import CurrentPage from './Pages/CurrentPage'
+import ConnectionPage from './Pages/ConnectionPage'
 import { ipData } from '../types'
 import getIp from '../utils/getIp'
 import getReverseGeocoding from '../utils/getReverseGeocoding'
@@ -30,7 +29,6 @@ const Popup = () => {
 
   useEffect(() => {
     getIp().then((ipDataRes) => {
-      
       setIpData(ipDataRes)
       if (ipDataRes.lat && ipDataRes.lon) {
         getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then(
@@ -60,9 +58,9 @@ const Popup = () => {
           }}
         >
           <TabItem
-            Icon={MapPin}
+            Icon={Wifi}
-            active={tab === 'current'}
+            active={tab === 'connection'}
-            onClick={() => setTab('current')}
+            onClick={() => setTab('connection')}
           />
           <TabItem
             Icon={HardDrive}
@@ -100,9 +98,13 @@ const Popup = () => {
           /> */}
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
-          <CurrentPage tab={tab} />
+          <ConnectionPage tab={tab} ipData={ipData} />
           <SystemPage tab={tab} ipData={ipData} />
-          <AutofillPage tab={tab} reverseGeocoding={reverseGeocoding} />
+          <AutofillPage
+            tab={tab}
+            ipData={ipData}
+            reverseGeocoding={reverseGeocoding}
+          />
           <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />
           <OtherOptionsPage tab={tab} />
@@ -115,7 +117,7 @@ const Popup = () => {
               bottom: '0',
             }}
           >
-            Current tab won't be fully spoofed until after 1st or 2nd reload.
+            Connection tab won't be fully spoofed until after 1st or 2nd reload.
           </Text> */}
         </Box>
       </Flex>

src/types.ts

@@ -2,6 +2,13 @@ export interface ipData {
   query: string
   timezone: string
   countryCode: string
+  country: string
+  city: string
+  region: string
+  regionName: string
+  zip?: string
   lat: number
   lon: number
+  isp: string
+  proxy: boolean
 }

src/utils/addresses.ts

@@ -0,0 +1,13 @@
+const addresses: any = [
+  {
+    country: 'United States',
+    region: 'New York',
+    city: 'Brooklyn',
+    postCode: '11211',
+    address: '38 Powers St',
+    lat: 40.71171288866269,
+    lon: 40.71171288866269,
+  },
+]
+
+export default addresses

src/utils/getIp.ts

@@ -1,5 +1,7 @@
 const getIp = () =>
-  fetch('http://ip-api.com/json/')
+  fetch(
+    'http://ip-api.com/json?fields=status,message,country,countryCode,region,regionName,city,zip,lat,lon,timezone,isp,proxy,query'
+  )
     .then((response) => response.json())
     .then((ipData) => {
       console.log(ipData)