make popup appear faster (#297)

* unify getDomainNameAndTldFromUrl in shared

* make popup init faster

Former-commit-id: 2808cfdccfd51a3f1c170ddaa805092c809b1555 [formerly 6f5f920]
Former-commit-id: 6c5619d

mobile-app/src/utils/Device.ts

@@ -82,11 +82,6 @@ export interface ISecuritySettingsInBg {
   noHandsLogin: boolean
 }
 
-export const getTldPart = (url: string) => {
-  const host = new URL(url ?? '').hostname
-  const parts = host.split('.')
-  return `${parts[parts.length - 2]}.${parts[parts.length - 1]}`
-}
 export const getDecryptedSecretProp = (
   secret: SecretTypeUnion,
   prop: 'url' | 'label' | 'iconUrl'

mobile-app/src/utils/DeviceState.ts

@@ -31,10 +31,11 @@ import {
   AddSecretInput,
   isLoginSecret,
   isTotpSecret,
-  getDecryptedSecretProp,
-  getTldPart
+  getDecryptedSecretProp
 } from './Device'
 
+import { getDomainNameAndTldFromUrl } from '../../../shared/urlUtils'
+
 export class DeviceState implements IBackgroundStateSerializable {
   decryptedSecrets: (ILoginSecret | ITOTPSecret)[]
   constructor(parameters: IBackgroundStateSerializable) {
@@ -153,7 +154,11 @@ export class DeviceState implements IBackgroundStateSerializable {
     })
     if (secrets.length === 0) {
       secrets = this.decryptedSecrets.filter((secret) =>
-        host.endsWith(getTldPart(getDecryptedSecretProp(secret, 'url') ?? ''))
+        host.endsWith(
+          getDomainNameAndTldFromUrl(
+            getDecryptedSecretProp(secret, 'url') ?? ''
+          )
+        )
       )
     }
     return Promise.all(

shared/errorLink.tsx

@@ -2,7 +2,7 @@ import { onError } from '@apollo/client/link/error'
 import { print } from 'graphql'
 //@ts-ignore
 import { device } from '@src/background/ExtensionDevice'
-import { toast } from '../web-extension/src/Providers'
+import { toast } from '../web-extension/src/ExtensionProviders'
 
 // Log any GraphQL errors or network error that occurred
 export const errorLink = onError(

shared/urlUtils.ts

@@ -0,0 +1,11 @@
+/**
+ * Extracts the domain name and TLD from a URL
+ *
+ * @param url - The URL to extract the domain name and TLD from
+ * @returns The domain name and TLD from the URL
+ */
+export const getDomainNameAndTldFromUrl = (url: string) => {
+  const host = new URL(url ?? '').hostname
+  const parts = host.split('.')
+  return `${parts[parts.length - 2]}.${parts[parts.length - 1]}`
+}

web-extension/src/Providers.tsx → web-extension/src/ExtensionProviders.tsx

@@ -6,11 +6,11 @@ import {
 import { I18nProvider } from '@lingui/react'
 import { i18n } from '@lingui/core'
 import { UserProvider } from './providers/UserProvider'
-import PopupRoutes from './PopupRoutes'
+
 import { chakraRawTheme } from '../../shared/chakraRawTheme'
 import { DeviceStateProvider } from './providers/DeviceStateProvider'
 import { messages } from './locale/en-gb/messages'
-import { VaultRouter } from './pages-vault/VaultRouter'
+
 export const { ToastContainer, toast } = createStandaloneToast({
   theme: chakraRawTheme
 })
@@ -20,15 +20,13 @@ i18n.load('en', messages)
 i18n.activate('en')
 export const chakraCustomTheme = extendTheme(chakraRawTheme)
 
-export default function Providers({ parent }: { parent: string }) {
+export function ExtensionProviders({ children }) {
   return (
     <>
       <ChakraProvider theme={chakraCustomTheme}>
         <DeviceStateProvider>
           <UserProvider>
-            <I18nProvider i18n={i18n}>
-              {parent === 'vault' ? <VaultRouter /> : <PopupRoutes />}
-            </I18nProvider>
+            <I18nProvider i18n={i18n}>{children}</I18nProvider>
           </UserProvider>
         </DeviceStateProvider>
       </ChakraProvider>

web-extension/src/apollo/apolloClient.tsx

@@ -21,6 +21,7 @@ const serializingLink = new SerializingLink()
 const authLink = setContext(async (_, { headers }) => {
   //get the authentication token
   const accessToken = await getTokenFromLocalStorage()
+
   //return the headers to the context so httpLink can read them
   return {
     headers: {

web-extension/src/background/ExtensionDevice.ts

@@ -44,10 +44,11 @@ import {
   generateEncryptionKey,
   encryptedBuf_to_base64
 } from '@util/generateEncryptionKey'
-import { toast } from '@src/Providers'
+import { toast } from '@src/ExtensionProviders'
 import { createTRPCProxyClient } from '@trpc/client'
 import { AppRouter } from './chromeRuntimeListener'
 import { chromeLink } from 'trpc-chrome/link'
+import { getDomainNameAndTldFromUrl } from '@shared/urlUtils'
 
 export const log = debug('au:Device')
 
@@ -56,12 +57,6 @@ export const extensionDeviceTrpc = createTRPCProxyClient<AppRouter>({
   links: [chromeLink({ port })]
 })
 
-const getTldPart = (url: string) => {
-  const host = new URL(url ?? '').hostname
-  const parts = host.split('.')
-  return `${parts[parts.length - 2]}.${parts[parts.length - 1]}`
-}
-
 function getRandomInt(min: number, max: number) {
   min = Math.ceil(min)
   max = Math.floor(max)
@@ -225,7 +220,11 @@ export class DeviceState implements IBackgroundStateSerializable {
     })
     if (secrets.length === 0) {
       secrets = this.decryptedSecrets.filter((secret) =>
-        host.endsWith(getTldPart(getDecryptedSecretProp(secret, 'url') ?? ''))
+        host.endsWith(
+          getDomainNameAndTldFromUrl(
+            getDecryptedSecretProp(secret, 'url') ?? ''
+          )
+        )
       )
     }
     return Promise.all(
@@ -428,6 +427,7 @@ class ExtensionDevice {
   lockedState: IBackgroundStateSerializableLocked | null = null
   id: string | null = null
   name: string
+  initCallbacks: (() => void)[] = []
 
   async startLockInterval(lockTime: number) {
     await extensionDeviceTrpc.setLockInterval.mutate({ time: lockTime })
@@ -437,6 +437,10 @@ class ExtensionDevice {
     await extensionDeviceTrpc.clearLockInterval.mutate()
   }
 
+  onInitDone(callback: () => void) {
+    this.initCallbacks.push(callback)
+  }
+
   get platform() {
     return browserInfo.getOSName()
   }
@@ -485,7 +489,7 @@ class ExtensionDevice {
     const fireToken = 'aaaa'
 
     this.fireToken = fireToken
-
+    this.initCallbacks.forEach((cb) => cb())
     this.rerenderViews() // for letting vault/popup know that the state has changed
   }
 

web-extension/src/components/pages/AddTOTPSecretButton.tsx

@@ -15,7 +15,7 @@ import { getQrCodeFromUrl } from '@src/util/getQrCodeFromUrl'
 import { EncryptedSecretType } from '../../../../shared/generated/graphqlBaseTypes'
 import { ITOTPSecret } from '@src/util/useDeviceState'
 import { useMeExtensionQuery } from '@src/pages-vault/AccountLimits.codegen'
-import { toast } from '@src/Providers'
+import { toast } from '@src/ExtensionProviders'
 
 export const AddTOTPSecretButton = () => {
   const { deviceState, TOTPSecrets } = useContext(DeviceStateContext)

web-extension/src/components/pages/AuthsList.tsx

@@ -25,6 +25,7 @@ import debug from 'debug'
 import { SecretItemIcon } from '../SecretItemIcon'
 import { extractHostname } from '@src/util/extractHostname'
 import { useAddOtpEventMutation } from './AuthList.codegen'
+import { getDomainNameAndTldFromUrl } from '@shared/urlUtils'
 
 const log = debug('au:AuthsList')
 
@@ -177,7 +178,10 @@ export const AuthsList = ({ filterByTLD }: { filterByTLD: boolean }) => {
     if (!currentURL || !totp.url) {
       return true
     }
-    return extractHostname(totp.url) === extractHostname(currentURL)
+    return (
+      getDomainNameAndTldFromUrl(totp.url) ===
+      getDomainNameAndTldFromUrl(currentURL)
+    )
   })
   const loginCredentialForCurrentDomain = loginCredentials.filter(
     ({ loginCredentials }) => {
@@ -189,7 +193,8 @@ export const AuthsList = ({ filterByTLD }: { filterByTLD: boolean }) => {
       }
 
       return (
-        extractHostname(loginCredentials.url) === extractHostname(currentURL)
+        getDomainNameAndTldFromUrl(loginCredentials.url) ===
+        getDomainNameAndTldFromUrl(currentURL)
       )
     }
   )

web-extension/src/index.tsx

@@ -3,23 +3,27 @@ import * as Sentry from '@sentry/browser'
 import ReactDOM from 'react-dom/client'
 import browser from 'webextension-polyfill'
 import { ApolloProvider } from '@apollo/client'
-import App from './App'
 import { apolloClient } from './apollo/apolloClient'
 import { ColorModeScript } from '@chakra-ui/react'
 import { chakraRawTheme } from '@shared/chakraRawTheme'
+import { ExtensionProviders } from './ExtensionProviders'
+import PopupRoutes from './PopupRoutes'
 
 Sentry.init({
   dsn: 'https://[email protected]/5955889'
 })
 
 let popupRoot
 export const renderPopup = () => {
+  console.log('renderPopup')
   popupRoot.render(
     <ApolloProvider client={apolloClient}>
       <ColorModeScript
         initialColorMode={chakraRawTheme.config?.initialColorMode}
       />
-      <App parent="popup" />
+      <ExtensionProviders>
+        <PopupRoutes />
+      </ExtensionProviders>
     </ApolloProvider>
   )
 }

web-extension/src/pages-vault/LoginAwaitingApproval.tsx

@@ -27,7 +27,7 @@ import {
   dec,
   generateEncryptionKey
 } from '@util/generateEncryptionKey'
-import { toast } from '@src/Providers'
+import { toast } from '@src/ExtensionProviders'
 
 export const LOGIN_DECRYPTION_CHALLENGE_REFETCH_INTERVAL = 6000
 export const log = debug('au:LoginAwaitingApproval')

web-extension/src/pages-vault/VaultImportExport.tsx

@@ -24,7 +24,7 @@ import {
 import { EncryptedSecretType } from '../../../shared/generated/graphqlBaseTypes'
 import { useMeExtensionQuery } from './AccountLimits.codegen'
 import { LoginCredentialsTypeWithMeta } from '@src/util/useDeviceState'
-import { toast } from '@src/Providers'
+import { toast } from '@src/ExtensionProviders'
 
 type MappedCSVInput = LoginCredentialsTypeWithMeta[]
 

web-extension/src/pages/VaultUnlockVerification.tsx

@@ -23,7 +23,7 @@ import {
   generateEncryptionKey
 } from '@util/generateEncryptionKey'
 import { DeviceStateContext } from '@src/providers/DeviceStateProvider'
-import { toast } from '@src/Providers'
+import { toast } from '@src/ExtensionProviders'
 import { useNavigate } from 'react-router-dom'
 
 interface Values {

web-extension/src/util/useDeviceState.tsx

@@ -99,6 +99,9 @@ export function useDeviceState() {
     }
     registered = true
 
+    device.onInitDone(() => {
+      setDeviceState(device.state)
+    })
     browser.storage.onChanged.addListener(onStorageChange)
   }, [])
 

web-extension/src/vault-index.tsx

@@ -5,11 +5,13 @@ import ReactDOM from 'react-dom/client'
 
 import browser from 'webextension-polyfill'
 import { ApolloProvider } from '@apollo/client'
-import App from './App'
+
 import { apolloClient } from './apollo/apolloClient'
 import { HashRouter } from 'react-router-dom'
 import { ColorModeScript } from '@chakra-ui/react'
 import { chakraRawTheme } from '../../shared/chakraRawTheme'
+import { ExtensionProviders } from './ExtensionProviders'
+import { VaultRouter } from './pages-vault/VaultRouter'
 
 Sentry.init({
   dsn: 'https://[email protected]/5955889'
@@ -23,7 +25,9 @@ export const renderVault = () => {
         <ColorModeScript
           initialColorMode={chakraRawTheme.config?.initialColorMode}
         />
-        <App parent="vault" />
+        <ExtensionProviders>
+          <VaultRouter />
+        </ExtensionProviders>
       </ApolloProvider>
     </HashRouter>
   )