diff --git a/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx b/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx index 4d69582..1e562b1 100644 --- a/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx +++ b/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 ( @@ -130,6 +131,13 @@ export const ModalAppDetails = () => { + { ) }} /> - { 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 = () => { - {/* - - {showAdvancedContent && ( - - - - )} */} ) diff --git a/src/pages/AppPage/App.Page.tsx b/src/pages/AppPage/App.Page.tsx index 23c33f6..c293257 100644 --- a/src/pages/AppPage/App.Page.tsx +++ b/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 = () => { <> navigate(`key/${npub}`)} /> - + {appAvatarTitle} - - - {appName} - + + + + {appName} + + {isAppNameExists && ( + + {shortAppNpub} + + )} + diff --git a/src/pages/KeyPage/Key.Page.tsx b/src/pages/KeyPage/Key.Page.tsx index 6894366..59a6053 100644 --- a/src/pages/KeyPage/Key.Page.tsx +++ b/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 } + if (!isKeyExists) return const handleOpenConnectAppModal = () => handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP) @@ -80,7 +86,11 @@ const KeyPage = () => { Connect app - + Settings diff --git a/src/pages/KeyPage/components/ItemApp.tsx b/src/pages/KeyPage/components/ItemApp.tsx index a016137..8ce2dea 100644 --- a/src/pages/KeyPage/components/ItemApp.tsx +++ b/src/pages/KeyPage/components/ItemApp.tsx @@ -9,9 +9,12 @@ type ItemAppProps = DbApp export const ItemApp: FC = ({ 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 ( = ({ npub, appNpub, icon, name, url }) => component={Link} to={`/key/${npub}/app/${appNpub}`} > - + {appAvatarTitle} - + {appName} + {isAppNameExists && ( + + {shortAppNpub} + + )} Basic actions diff --git a/src/pages/KeyPage/utils.ts b/src/pages/KeyPage/utils.ts index f8a388f..090ca20 100644 --- a/src/pages/KeyPage/utils.ts +++ b/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 }