Merge w/ develop

src/components/Modal/ModalAppDetails/ModalAppDetails.tsx

@@ -68,6 +68,7 @@ export const ModalAppDetails = () => {
     if (isEmptyString(url)) return
 
     try {
+
       const u = new URL(url)
 
       if (isEmptyString(name)) setDetails((prev) => ({ ...prev, name: u.hostname }))
@@ -119,7 +120,7 @@ export const ModalAppDetails = () => {
     }
   }
 
-  const isFormValid = !isEmptyString(url) && !isEmptyString(name)
+  const isFormValid = !isEmptyString(name)
 
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal}>
@@ -130,6 +131,13 @@ export const ModalAppDetails = () => {
           </Typography>
         </Stack>
 
+        <Input
+          label="Name"
+          fullWidth
+          placeholder="Enter app name"
+          onChange={handleInputChange('name')}
+          value={details.name}
+        />
         <Autocomplete
           options={[]}
           freeSolo
@@ -150,13 +158,6 @@ export const ModalAppDetails = () => {
             )
           }}
         />
-        <Input
-          label="Name"
-          fullWidth
-          placeholder="Enter app name"
-          onChange={handleInputChange('name')}
-          value={details.name}
-        />
         <Input
           label="Icon"
           fullWidth

src/components/Modal/ModalInitial/ModalInitial.tsx

@@ -9,7 +9,6 @@ import { Stack } from '@mui/material'
 export const ModalInitial = () => {
   const { getModalOpened, createHandleCloseReplace, handleOpen } = useModalSearchParams()
   const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.INITIAL)
-
   const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.INITIAL)
 
   // const [showAdvancedContent, setShowAdvancedContent] = useState(false)
@@ -32,13 +31,6 @@ export const ModalInitial = () => {
         <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.SIGN_UP)}>Sign up</Button>
         <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.LOGIN)}>Login</Button>
         <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import key</Button>
-        {/* <AppLink title="Advanced" alignSelf={'center'} onClick={handleShowAdvanced} />
-
-        {showAdvancedContent && (
-          <Fade in>
-            <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import key</Button>
-          </Fade>
-        )} */}
       </Stack>
     </Modal>
   )

src/pages/AppPage/App.Page.tsx

@@ -43,8 +43,10 @@ const AppPage = () => {
 
   const { icon = '', name = '', url = '' } = currentApp || {}
   const appDomain = getDomain(url)
-  const appName = name || appDomain || getShortenNpub(appNpub)
+  const shortAppNpub = getShortenNpub(appNpub)
+  const appName = name || appDomain || shortAppNpub
   const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
+  const isAppNameExists = !!name
 
   const { timestamp } = connectPerm || {}
   const connectedOn = connectPerm && timestamp ? `Connected at ${formatTimestampDate(timestamp)}` : 'Not connected'
@@ -65,13 +67,20 @@ const AppPage = () => {
     <>
       <Stack maxHeight={'100%'} overflow={'auto'} alignItems={'flex-start'} height={'100%'}>
         <IOSBackButton onNavigate={() => navigate(`key/${npub}`)} />
-        <Stack marginBottom={'1rem'} direction={'row'} gap={'1rem'} width={'100%'}>
+        <Stack marginBottom={'1rem'} direction={'row'} gap={'1rem'} width={'100%'} alignItems={'center'}>
           <StyledAppIcon src={icon}>{appAvatarTitle}</StyledAppIcon>
           <Box flex={'1'} overflow={'hidden'}>
-            <Stack direction={'row'} alignItems={'center'} gap={'0.5rem'}>
+            <Stack direction={'row'} alignItems={'flex-start'} gap={'0.5rem'} marginBottom={'0.5rem'}>
-              <Typography variant="h4" noWrap flex={1}>
+              <Box display={'flex'} flexDirection={'column'} flex={1}>
-                {appName}
+                <Typography variant="h4" noWrap>
-              </Typography>
+                  {appName}
+                </Typography>
+                {isAppNameExists && (
+                  <Typography noWrap display={'block'} variant="body1" color={'GrayText'}>
+                    {shortAppNpub}
+                  </Typography>
+                )}
+              </Box>
               <IconButton onClick={handleShowAppDetailsModal}>
                 <MoreIcon />
               </IconButton>

src/pages/KeyPage/Key.Page.tsx

@@ -18,14 +18,18 @@ import { useTriggerConfirmModal } from './hooks/useTriggerConfirmModal'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { checkNpubSyncQuerier } from './utils'
 import { DOMAIN } from '@/utils/consts'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 
 const KeyPage = () => {
   const { npub = '' } = useParams<{ npub: string }>()
   const { keys, apps, pending, perms } = useAppSelector((state) => state.content)
   const [searchParams] = useSearchParams()
 
-  const isSynced = useLiveQuery(checkNpubSyncQuerier(npub), [npub], false)
+  const [isCheckingSync, setIsChecking] = useState(true)
+  const handleStopChecking = () => setIsChecking(false)
+
+  const isSynced = useLiveQuery(checkNpubSyncQuerier(npub, handleStopChecking), [npub], false)
+
   const { handleOpen } = useModalSearchParams()
   const { handleEnableBackground, showWarning, isEnabling } = useBackgroundSigning()
 
@@ -43,13 +47,15 @@ const KeyPage = () => {
 
   const isKeyExists = npub.trim().length && key
   const isPopup = searchParams.get('popup') === 'true'
-  // console.log({ isKeyExists, isPopup })
+  console.log({ isKeyExists, isPopup })
+
   if (isPopup && !isKeyExists) {
     searchParams.set('login', 'true')
     searchParams.set('npub', npub)
     const url = `/home?${searchParams.toString()}`
     return <Navigate to={url} />
   }
+
   if (!isKeyExists) return <Navigate to={`/home`} />
 
   const handleOpenConnectAppModal = () => handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP)
@@ -80,7 +86,11 @@ const KeyPage = () => {
             Connect app
           </StyledIconButton>
 
-          <StyledIconButton bgcolor_variant="secondary" onClick={handleOpenSettingsModal} withBadge={!isSynced}>
+          <StyledIconButton
+            bgcolor_variant="secondary"
+            onClick={handleOpenSettingsModal}
+            withBadge={!isCheckingSync && !isSynced}
+          >
             <SettingsIcon />
             Settings
           </StyledIconButton>

src/pages/KeyPage/components/ItemApp.tsx

@@ -9,9 +9,12 @@ type ItemAppProps = DbApp
 
 export const ItemApp: FC<ItemAppProps> = ({ npub, appNpub, icon, name, url }) => {
   const appDomain = getDomain(url)
-  const appName = name || appDomain || getShortenNpub(appNpub)
+  const shortAppNpub = getShortenNpub(appNpub)
+  const appName = name || appDomain || shortAppNpub
   const appIcon = icon || `https://${appDomain}/favicon.ico`
-	const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
+  const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
+  const isAppNameExists = !!name
+
   return (
     <StyledItemAppContainer
       direction={'row'}
@@ -21,18 +24,18 @@ export const ItemApp: FC<ItemAppProps> = ({ npub, appNpub, icon, name, url }) =>
       component={Link}
       to={`/key/${npub}/app/${appNpub}`}
     >
-      <Avatar 
+      <Avatar variant="rounded" sx={{ width: 56, height: 56 }} src={appIcon} alt={appName}>
-        variant="rounded" 
-        sx={{ width: 56, height: 56 }} 
-        src={appIcon} 
-        alt={appName}
-      >
         {appAvatarTitle}
       </Avatar>
       <Stack>
-        <Typography noWrap display={'block'} variant="body2">
+        <Typography noWrap display={'block'} variant="body1">
           {appName}
         </Typography>
+        {isAppNameExists && (
+          <Typography noWrap display={'block'} variant="body2" color={'GrayText'}>
+            {shortAppNpub}
+          </Typography>
+        )}
         <Typography noWrap display={'block'} variant="caption" color={'GrayText'}>
           Basic actions
         </Typography>

src/pages/KeyPage/utils.ts

@@ -1,6 +1,7 @@
 import { db } from '@/modules/db'
 
-export const checkNpubSyncQuerier = (npub: string) => async () => {
+export const checkNpubSyncQuerier = (npub: string, onResolve: () => void) => async () => {
   const count = await db.syncHistory.where('npub').equals(npub).count()
+  if (!count) onResolve()
   return count > 0
 }