Added whitelist url input

src/pages/Popup/Popup.tsx

@@ -8,7 +8,7 @@ import UserAgentPage from './UserAgentPage'
 import WhitelistPage from './WhitelistPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('location')
+  const [tab, setTab] = useState('whitelist')
 
   return (
     <ThemeProvider theme={theme}>
@@ -27,10 +27,22 @@ const Popup = () => {
           }}
         >
           {/* <TabItem Icon={Home} onClick={() => setTab(0)} /> */}
-          <TabItem Icon={MapPin} onClick={() => setTab('location')} />
+          <TabItem
-          <TabItem Icon={Globe} onClick={() => setTab('useragent')} />
+            Icon={MapPin}
+            active={tab === 'location'}
+            onClick={() => setTab('location')}
+          />
+          <TabItem
+            Icon={Globe}
+            active={tab === 'useragent'}
+            onClick={() => setTab('useragent')}
+          />
           {/* <TabItem Icon={Command} onClick={() => setTab(3)} /> */}
-          <TabItem Icon={List} onClick={() => setTab('whitelist')} />
+          <TabItem
+            Icon={List}
+            active={tab === 'whitelist'}
+            onClick={() => setTab('whitelist')}
+          />
           <TabItem
             Icon={ExternalLink}
             onClick={() => window.open('https://vytal.io')}

src/pages/Popup/TabItem.tsx

@@ -2,10 +2,11 @@ import React from 'react'
 
 interface IconProps {
   Icon: React.ElementType
+  active?: boolean
   onClick: () => void
 }
 
-const TabItem = ({ Icon, onClick }: IconProps) => {
+const TabItem = ({ Icon, onClick, active }: IconProps) => {
   return (
     <div
       sx={{
@@ -16,6 +17,7 @@ const TabItem = ({ Icon, onClick }: IconProps) => {
         alignItems: 'center',
         justifyContent: 'center',
         color: 'background',
+        backgroundColor: active ? 'primaryDark' : 'primary',
         ':hover': {
           backgroundColor: 'primaryDark',
         },

src/pages/Popup/WhitelistPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import { Box, Label, Input, Flex } from 'theme-ui'
 import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
@@ -8,16 +8,20 @@ import getIP from '../../utils/getIP'
 const WhitelistPage = ({ tab }: any) => {
   const [ip, setIP] = useState(null)
   const [configuration, setConfiguration] = useState('default')
+  const [currentUrl, setCurrentUrl] = useState('')
+
+  const getCurrentUrl = async () => {
+    let queryOptions = { active: true, lastFocusedWindow: true }
+    // `tab` will either be a `tabs.Tab` instance or `undefined`.
+    let [tab] = await chrome.tabs.query(queryOptions)
+    if (tab.url) {
+      let domain = new URL(tab.url)
+      setCurrentUrl(domain.hostname.replace('www.', ''))
+    }
+  }
 
   useEffect(() => {
-    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
+    getCurrentUrl()
-      result.configuration && setConfiguration(result.configuration)
-      if (result.ipData) {
-        setIP(result.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
-    })
   }, [])
 
   return (
@@ -29,39 +33,9 @@ const WhitelistPage = ({ tab }: any) => {
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>Whitelist</Box>
-      <ConfigurationSelect
+      <Flex>
-        configuration={configuration}
+        <Input name="url" value={currentUrl} />
-        setConfiguration={setConfiguration}
+      </Flex>
-      />
-      {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
-      <LocationInput
-        type="timezone"
-        title="Timezone"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="locale"
-        title="Locale"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="lat"
-        title="Latitude"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="lon"
-        title="Longitude"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
     </Box>
   )
 }