added footer links

src/Popup/Components/FooterLink.tsx

@@ -0,0 +1,36 @@
+import { Text } from 'theme-ui'
+
+interface FooterLinkProps {
+  link: string
+  text: string
+  hoverText: string
+}
+
+const FooterLink = ({ link, text, hoverText }: FooterLinkProps) => {
+  return (
+    <Text
+      sx={{
+        mb: '8px',
+        fontSize: '11px',
+        position: 'fixed',
+        bottom: '0',
+        cursor: 'pointer',
+      }}
+      onClick={() => window.open(`https://vytal.io/${link}`)}
+    >
+      {text}{' '}
+      <Text
+        sx={{
+          color: 'primaryDark',
+          ':hover': {
+            textDecoration: 'underline',
+          },
+        }}
+      >
+        {hoverText}
+      </Text>
+    </Text>
+  )
+}
+
+export default FooterLink

src/Popup/Components/Table.tsx

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

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,72 +1,78 @@
+import { Text } from 'theme-ui'
 import { useState, useEffect } from 'react'
-
 import Page from '../../Components/Page'
 import CheckBox from '../../Components/CheckBox'
-import { ipData } from '../../../types'
+// import { autofillData } from '../../../types'
 import Table from '../../Components/Table'
 import TableRow from '../../Components/TableRow'
 import { Button } from 'theme-ui'
+import addresses from '../../../utils/addresses'
+import FooterLink from '../../Components/FooterLink'
 
 interface AutofillPageProps {
   tab: string
-  ipData?: ipData
+  autofillData?: any
   // reverseGeocoding: any
 }
 
-const AutofillPage = ({ tab, ipData }: AutofillPageProps) => {
+const AutofillPage = ({ tab, autofillData }: 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(
+  const [phone, setPhone] = useState('9057814565')
-    'fjkdskf fdkfksj 324324kk dj3223j4k3l jerwkjjekjjwrjrhwehrwjejhwreherwjrwhje'
-  )
   // const [configuration, setConfiguration] = useState('default')
 
   useEffect(() => {
-    // chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
+    // chrome.storage.local.get(['configuration', 'autofillData'], (storage) => {
     //   storage.configuration && setConfiguration(storage.configuration)
-    //   if (storage.ipData) {
+    //   if (storage.autofillData) {
-    //     setIP(storage.ipData)
+    //     setIP(storage.autofillData)
     //   } else {
-    //     Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+    //     Promise.resolve(getIP()).then((autofillData) => setIP(autofillData))
     //   }
     // })
-    if (ipData?.country) {
+    if (autofillData?.country) {
-      setCountry(ipData.country)
+      setCountry(autofillData.country)
-      chrome.storage.local.set({
+      // chrome.storage.local.set({
-        country: ipData.country,
+      //   country: autofillData.country,
-      })
+      // })
     }
-    if (ipData?.city) {
+    if (autofillData?.locality) {
-      setCity(ipData.city)
+      setCity(autofillData.locality)
-      chrome.storage.local.set({
+      // chrome.storage.local.set({
-        city: ipData.city,
+      //   city: autofillData.city,
-      })
+      // })
     }
-    if (ipData?.regionName) {
+    if (autofillData?.administrative_area_level_1) {
-      setRegion(ipData.regionName)
+      setRegion(autofillData.administrative_area_level_1)
-      chrome.storage.local.set({
+      // chrome.storage.local.set({
-        region: ipData.regionName,
+      //   region: autofillData.regionName,
-      })
+      // })
     }
-    if (ipData?.zip) {
+    if (autofillData?.postal_code) {
-      setPostCode(ipData.zip)
+      setPostCode(autofillData.postal_code)
-      chrome.storage.local.set({
+      // chrome.storage.local.set({
-        postCode: ipData.zip,
+      //   postCode: autofillData.zip,
-      })
+      // })
     }
-    // ipData?.city && setCity(ipData.city)
+    if (autofillData?.street_number && autofillData?.route) {
-    // ipData?.regionName && setRegion(ipData.regionName)
+      setAddress(`${autofillData.street_number} ${autofillData.route}`)
-    // ipData?.zip && setPostCode()
+      // chrome.storage.local.set({
+      //   postCode: autofillData.zip,
+      // })
+    }
+    // autofillData?.city && setCity(autofillData.city)
+    // autofillData?.regionName && setRegion(autofillData.regionName)
+    // autofillData?.zip && setPostCode()
     // chrome.storage.local.set({
-    //   country: ipData.country,
+    //   country: autofillData.country,
-    //   city: ipData.city,
+    //   city: autofillData.city,
-    //   regionName: ipData.regionName,
+    //   regionName: autofillData.regionName,
-    //   zip: ipData.zip,
+    //   zip: autofillData.zip,
     // })
-  }, [ipData, setCity, setPostCode, setRegion])
+  }, [autofillData, setCity, setPostCode, setRegion])
 
   // useEffect(() => {
   //   if (!postCode && reverseGeocoding?.postcode) {
@@ -100,8 +106,8 @@ const AutofillPage = ({ tab, ipData }: AutofillPageProps) => {
   return (
     <Page isCurrentTab={tab === 'autofill'} title={'Autofill'}>
       <CheckBox title={'Disable Built-In Address Autofill'} />
-      <CheckBox title={'Automatically Autofill'} />
+      {/* <CheckBox title={'Automatically Autofill'} /> */}
-      <Table title="Autofill Data">
+      <Table>
         <TableRow title="Country" value={country} />
         <TableRow title="Region" value={region} />
         <TableRow title="City" value={city} />
@@ -116,6 +122,7 @@ const AutofillPage = ({ tab, ipData }: AutofillPageProps) => {
       >
         Autofill Current Page
       </Button>
+      <FooterLink link="test" text="Test" hoverText="autofill data" />
     </Page>
   )
 }

src/Popup/Pages/ConnectionPage/index.tsx

@@ -1,4 +1,6 @@
+import { Text } from 'theme-ui'
 import { ipData } from '../../../types'
+import FooterLink from '../../Components/FooterLink'
 import Page from '../../Components/Page'
 import Table from '../../Components/Table'
 import TableRow from '../../Components/TableRow'
@@ -47,6 +49,11 @@ const ConnectionPage = ({ tab, ipData }: ConnectionPageProps) => {
           noBorder
         />
       </Table>
+      <FooterLink
+        link="test"
+        text="Connection info can be changed by using a"
+        hoverText="VPN or proxy"
+      />
     </Page>
   )
 }

src/Popup/Pages/SystemPage/index.tsx

@@ -1,3 +1,4 @@
+import { Text } from 'theme-ui'
 import { useState, useEffect, ChangeEvent } from 'react'
 import { Flex, Label, Radio, Select } from 'theme-ui'
 import Page from '../../Components/Page'
@@ -7,6 +8,7 @@ import countryLocales from '../../../utils/countryLocales'
 import { ipData } from '../../../types'
 import configurations from '../../../utils/configurations'
 import CheckBox from '../../Components/CheckBox'
+import FooterLink from '../../Components/FooterLink'
 
 interface SystemPageProps {
   tab: string
@@ -224,6 +226,7 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
       {systemType !== 'default' && (
         <CheckBox title={'Enable Debugger API Spoofing'} />
       )}
+      <FooterLink link="test" text="Scan for" hoverText="system data leaks" />
     </Page>
   )
 }

src/Popup/Pages/UserAgentPage/index.tsx

@@ -1,3 +1,4 @@
+import { Text } from 'theme-ui'
 import { useState, useEffect, ChangeEvent } from 'react'
 import { Box, Label, Radio, Flex, Select } from 'theme-ui'
 import DebouncedInput from '../../Components/DebouncedInput'
@@ -5,6 +6,7 @@ import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
 import Page from '../../Components/Page'
 import CheckBox from '../../Components/CheckBox'
+import FooterLink from '../../Components/FooterLink'
 
 interface UserAgentPageProps {
   tab: string
@@ -166,6 +168,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
       {userAgentType !== 'default' && (
         <CheckBox title={'Enable Debugger API Spoofing'} />
       )}
+      <FooterLink link="test" text="Scan for" hoverText="user agent leaks" />
     </Page>
   )
 }

src/Popup/Pages/WebRtcPage/index.tsx

@@ -1,7 +1,9 @@
+import { Text } from 'theme-ui'
 import { useState, useEffect, ChangeEvent } from 'react'
 import Page from '../../Components/Page'
 import handleWebRtcPolicy from './handleWebRtcPolicy'
 import RadioButton from './RadioButton'
+import FooterLink from '../../Components/FooterLink'
 
 interface SystemPageProps {
   tab: string
@@ -59,6 +61,7 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
         webRtcPolicy={webRtcPolicy}
         onChange={changeRadioValue}
       />
+      <FooterLink link="test" text="Scan for" hoverText="WebRTC leaks" />
     </Page>
   )
 }

src/Popup/Popup.tsx

@@ -21,24 +21,27 @@ import getIp from '../utils/getIp'
 // import getReverseGeocoding from '../utils/getReverseGeocoding'
 import '../assets/global.css'
 import OtherOptionsPage from './Pages/OtherOptionsPage'
+import addresses from '../utils/addresses'
 
 const Popup = () => {
   const [tab, setTab] = useState('autofill')
   const [ipData, setIpData] = useState<ipData>()
   // const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
   const [geolocation, setGeolocation] = useState<GeolocationCoordinates>()
+  const [autofillData, setAutofillData] = useState<any>()
 
   useEffect(() => {
     getIp().then((ipDataRes) => {
       setIpData(ipDataRes)
-      // if (ipDataRes.lat && ipDataRes.lon) {
+      let geoIndex = (ipDataRes.lat + 90) * 180 + ipDataRes.lon
-      //   getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then(
+      console.log(geoIndex)
-      //     (reverseGeocodingRes) => {
+      let closest = addresses.reduce((prev: any, curr: any) => {
-      //       setReverseGeocoding(reverseGeocodingRes)
+        return Math.abs(curr.geoIndex - geoIndex) <
-      //       console.log(reverseGeocodingRes)
+          Math.abs(prev.geoIndex - geoIndex)
-      //     }
+          ? curr
-      //   )
+          : prev
-      // }
+      })
+      setAutofillData(closest)
     })
     navigator.geolocation.getCurrentPosition(
       (pos) => setGeolocation(pos.coords),
@@ -55,7 +58,7 @@ const Popup = () => {
       <Flex
         sx={{
           width: '350px',
-          height: '428px',
+          height: '436px',
         }}
       >
         <Flex
@@ -111,7 +114,7 @@ const Popup = () => {
           <SystemPage tab={tab} ipData={ipData} geolocation={geolocation} />
           <AutofillPage
             tab={tab}
-            ipData={ipData}
+            autofillData={autofillData}
             // reverseGeocoding={reverseGeocoding}
           />
           <WebRtcPage tab={tab} />

src/theme.ts

@@ -56,6 +56,7 @@ export const theme: Theme = {
       cursor: 'pointer',
       borderRadius: '0',
       width: '100%',
+      display: 'block',
       '&:hover': {
         bg: 'primaryDark',
       },

src/utils/getIp.ts

@@ -4,7 +4,6 @@ const getIp = () =>
   )
     .then((response) => response.json())
     .then((ipData) => {
-      console.log(ipData)
       chrome.storage.local.set({ ipData })
       return ipData
     })