dev2

src/Popup/Components/FooterLink.tsx

@@ -1,25 +1,29 @@
-import { Link, Text } from 'theme-ui'
+import { Link } from 'theme-ui'
 
-interface FooterLinkProps {
+const FooterLink = () => {
-  link: string
-  text: string
-  hoverText: string
-}
-
-const FooterLink = ({ link, text, hoverText }: FooterLinkProps) => {
   return (
-    <Link variant="footer" href={`https://vytal.io/${link}`} target="_blank">
+    <Link
-      {text}{' '}
+      variant="footer"
-      <Text
+      href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
-        sx={{
+      target="_blank"
-          color: 'primaryDark',
+    >
-          ':hover': {
+      Vytal does not change your IP address. To change your IP you will need to
-            textDecoration: 'underline',
+      use a VPN such as{' '}
-          },
+      <Link
-        }}
+        variant="hover"
+        href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
+        target="_blank"
       >
-        {hoverText}
+        NordVPN
-      </Text>
+      </Link>{' '}
+      or{' '}
+      <Link
+        variant="hover"
+        href={`https://go.getproton.me/aff_c?offer_id=26&aff_id=3825`}
+        target="_blank"
+      >
+        ProtonVPN
+      </Link>
     </Link>
   )
 }

src/Popup/Components/Table.tsx

@@ -9,7 +9,8 @@ const Table = ({ children }: TableProps) => {
     <Box
       sx={{
         border: '1px solid',
-        mb: '12px',
+        mt: '12px',
+        mb: '8px',
         borderRadius: '4px',
         borderColor: 'grey',
       }}

src/Popup/Components/TableRow.tsx

@@ -14,7 +14,7 @@ const TableRow = ({ title, value, noBorder = false }: TableRowProps) => {
         borderBottomColor: 'grey',
       }}
     >
-      <td sx={{ fontWeight: '700', width: '100px', p: '8px' }}>{title}</td>
+      <td sx={{ fontWeight: '700', width: '100px', p: '5px 8px' }}>{title}</td>
       <td>
         <Box
           sx={{

src/Popup/Pages/AutofillPage/index.tsx

@@ -140,7 +140,6 @@ const AutofillPage = ({ tab, autofillData }: AutofillPageProps) => {
       >
         Autofill Current Page
       </Button>
-      <FooterLink link="test" text="Test" hoverText="autofill data" />
     </Page>
   )
 }

src/Popup/Pages/ConnectionPage/index.tsx

@@ -48,11 +48,6 @@ 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/LocationPage/index.tsx

@@ -6,17 +6,18 @@ import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
 import { ipData } from '../../../types'
 import configurations from '../../../utils/configurations'
-import CheckBox from '../../Components/CheckBox'
 import FooterLink from '../../Components/FooterLink'
+import Table from '../../Components/Table'
+import TableRow from '../../Components/TableRow'
 
-interface SystemPageProps {
+interface LocationPageProps {
   tab: string
   ipData?: ipData
   geolocation?: GeolocationCoordinates
 }
 
-const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
+const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
-  const [systemType, setSystemType] = useState('')
+  const [locationType, setLocationType] = useState('')
   const [timezone, setTimezone] = useState('')
   const [locale, setLocale] = useState('')
   const [lat, setLatitude] = useState('')
@@ -27,9 +28,9 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
 
   useEffect(() => {
     chrome.storage.local.get(
-      ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
+      ['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
       (storage) => {
-        if (!storage.systemType || storage.systemType === 'default') {
+        if (!storage.locationType || storage.locationType === 'default') {
           setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
           setLocale(Intl.DateTimeFormat().resolvedOptions().locale)
           if (geolocation) {
@@ -37,7 +38,7 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
             setLongitude(`${geolocation.longitude}`)
           }
         }
-        if (storage.systemType === 'matchIp' && ipData) {
+        if (storage.locationType === 'matchIp' && ipData) {
           setTimezone(ipData.timezone)
           setLocale(countryLocales[ipData.countryCode].locale)
           setLatitude(`${ipData.lat}`)
@@ -48,24 +49,24 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
             lat: ipData.lat,
             lon: ipData.lon,
           })
-        } else if (storage.systemType === 'custom') {
+        } else if (storage.locationType === 'custom') {
           storage.configuration && setConfiguration(storage.configuration)
           storage.timezone && setTimezone(storage.timezone)
           storage.locale && setLocale(storage.locale)
           storage.lat && setLatitude(storage.lat)
           storage.lon && setLongitude(storage.lon)
         }
-        storage.systemType
+        storage.locationType
-          ? setSystemType(storage.systemType)
+          ? setLocationType(storage.locationType)
-          : setSystemType('default')
+          : setLocationType('default')
       }
     )
   }, [geolocation, ipData])
 
   const changeType = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
-    setSystemType(e.target.value)
+    setLocationType(e.target.value)
-    chrome.storage.local.set({ systemType: e.target.value })
+    chrome.storage.local.set({ locationType: e.target.value })
 
     if (e.target.value === 'default') {
       setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
@@ -129,18 +130,26 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
   }
 
   const changeInputText = () => {
-    if (systemType !== 'custom' || configuration !== 'custom') {
+    if (locationType !== 'custom' || configuration !== 'custom') {
       setConfiguration('custom')
-      setSystemType('custom')
+      setLocationType('custom')
       chrome.storage.local.set({
         configuration: 'custom',
-        systemType: 'custom',
+        locationType: 'custom',
       })
     }
   }
 
+  const getFlagEmoji = (countryCode: string) => {
+    const codePoints = countryCode
+      .toUpperCase()
+      .split('')
+      .map((char) => 127397 + char.charCodeAt(0))
+    return String.fromCodePoint(...codePoints)
+  }
+
   return (
-    <Page isCurrentTab={tab === 'system'} title={'System Data'}>
+    <Page isCurrentTab={tab === 'location'} title={'Location Data'}>
       <Flex
         sx={{
           justifyContent: 'space-between',
@@ -149,33 +158,46 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
       >
         <Label>
           <Radio
-            name="systemType"
+            name="locationType"
             value="default"
             onChange={changeType}
-            checked={systemType === 'default'}
+            checked={locationType === 'default'}
           />
           Default
         </Label>
         <Label>
           <Radio
-            name="systemType"
+            name="locationType"
             value="matchIp"
             onChange={changeType}
-            checked={systemType === 'matchIp'}
+            checked={locationType === 'matchIp'}
           />
           Match IP
         </Label>
         <Label>
           <Radio
-            name="systemType"
+            name="locationType"
             value="custom"
             onChange={changeType}
-            checked={systemType === 'custom'}
+            checked={locationType === 'custom'}
           />
           Custom
         </Label>
       </Flex>
-      {systemType === 'custom' && (
+      {locationType === 'matchIp' && (
+        <Table>
+          <TableRow
+            title="IP Address"
+            value={
+              ipData
+                ? `${getFlagEmoji(ipData.countryCode)} ${ipData?.query}`
+                : 'loading...'
+            }
+            noBorder
+          />
+        </Table>
+      )}
+      {locationType === 'custom' && (
         <>
           <Label htmlFor="configuration">Configuration</Label>
           <Select
@@ -222,12 +244,9 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
         onChange={changeInputText}
         mb="12px"
       />
-      {systemType !== 'default' && (
+      <FooterLink />
-        <CheckBox title={'Enable Debugger API Spoofing'} />
-      )}
-      <FooterLink link="test" text="Test with" hoverText="system data scan" />
     </Page>
   )
 }
 
-export default SystemPage
+export default LocationPage

src/Popup/Pages/UserAgentPage/index.tsx

@@ -3,9 +3,7 @@ import { Box, Label, Radio, Flex, Select } from 'theme-ui'
 import DebouncedInput from '../../Components/DebouncedInput'
 import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
-import attachCurrentTab from '../../../utils/attachCurrentTab'
 import Page from '../../Components/Page'
-import CheckBox from '../../Components/CheckBox'
 import FooterLink from '../../Components/FooterLink'
 
 interface UserAgentPageProps {
@@ -64,7 +62,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
       platform: userAgents[e.target.value]['platform'],
       operatingSystem: e.target.value,
     })
-    await attachCurrentTab()
+    // await attachCurrentTab()
   }
 
   const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -176,10 +174,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         onChange={changeTextInput}
         mb="12px"
       />
-      {userAgentType !== 'default' && (
+      <FooterLink />
-        <CheckBox title={'Enable Debugger API Spoofing'} />
-      )}
-      <FooterLink link="test" text="Scan for" hoverText="user agent leaks" />
     </Page>
   )
 }

src/Popup/Pages/WebRtcPage/index.tsx

@@ -60,7 +60,6 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
         webRtcPolicy={webRtcPolicy}
         onChange={changeRadioValue}
       />
-      <FooterLink link="test" text="Scan for" hoverText="WebRTC leaks" />
     </Page>
   )
 }

src/Popup/Popup.tsx

@@ -3,14 +3,14 @@ import { ThemeProvider, Flex, Box } from 'theme-ui'
 import { theme } from '../theme'
 import {
   Wifi,
-  HardDrive,
+  MapPin,
   FileText,
   MessageSquare,
   Globe,
   Settings,
 } from 'react-feather'
 import TabItem from './TabItem'
-import SystemPage from './Pages/SystemPage'
+import LocationPage from './Pages/LocationPage'
 import UserAgentPage from './Pages/UserAgentPage'
 import SettingsPage from './Pages/SettingsPage'
 import AutofillPage from './Pages/AutofillPage'
@@ -24,7 +24,7 @@ import OtherOptionsPage from './Pages/OtherOptionsPage'
 import addresses from '../utils/addresses'
 
 const Popup = () => {
-  const [tab, setTab] = useState('autofill')
+  const [tab, setTab] = useState('location')
   const [ipData, setIpData] = useState<ipData>()
   // const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
   const [geolocation, setGeolocation] = useState<GeolocationCoordinates>()
@@ -69,17 +69,17 @@ const Popup = () => {
             flexDirection: 'column',
           }}
         >
-          <TabItem
+          {/* <TabItem
             Icon={Wifi}
             active={tab === 'connection'}
             onClick={() => setTab('connection')}
-          />
+          /> */}
           <TabItem
-            Icon={HardDrive}
+            Icon={MapPin}
-            active={tab === 'system'}
+            active={tab === 'location'}
-            onClick={() => setTab('system')}
+            onClick={() => setTab('location')}
           />
-          <TabItem
+          {/* <TabItem
             Icon={FileText}
             active={tab === 'autofill'}
             onClick={() => setTab('autofill')}
@@ -88,7 +88,7 @@ const Popup = () => {
             Icon={MessageSquare}
             active={tab === 'webRtc'}
             onClick={() => setTab('webRtc')}
-          />
+          /> */}
           <TabItem
             Icon={Globe}
             active={tab === 'userAgent'}
@@ -111,7 +111,7 @@ const Popup = () => {
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
           <ConnectionPage tab={tab} ipData={ipData} />
-          <SystemPage tab={tab} ipData={ipData} geolocation={geolocation} />
+          <LocationPage tab={tab} ipData={ipData} geolocation={geolocation} />
           <AutofillPage
             tab={tab}
             autofillData={autofillData}

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
-  "name": "Vytal - VPN Companion",
+  "name": "Vytal - Spoof timezone, location & user agent",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Spoof Timezone, Geolocation, Locale and User Agent.",
   "permissions": ["storage", "debugger", "privacy", "geolocation"],
   "background": { "service_worker": "background.bundle.js" },

src/theme.ts

@@ -79,5 +79,12 @@ export const theme: Theme = {
       bottom: '0',
       textDecoration: 'none',
     },
+    hover: {
+      color: 'primaryDark',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
   },
 }