From 04c425c32cbdc21b949d7f12919ebc8113d32acb Mon Sep 17 00:00:00 2001 From: Bekbolsun Date: Fri, 16 Feb 2024 14:20:51 +0600 Subject: [PATCH 1/2] show appNpub in apps list & in app details page --- .../Modal/ModalInitial/ModalInitial.tsx | 26 +------------------ src/pages/AppPage/App.Page.tsx | 21 ++++++++++----- src/pages/KeyPage/Key.Page.tsx | 16 +++++++++--- src/pages/KeyPage/components/ItemApp.tsx | 21 ++++++++------- src/pages/KeyPage/utils.ts | 3 ++- 5 files changed, 43 insertions(+), 44 deletions(-) diff --git a/src/components/Modal/ModalInitial/ModalInitial.tsx b/src/components/Modal/ModalInitial/ModalInitial.tsx index 835f0ec..7baf84c 100644 --- a/src/components/Modal/ModalInitial/ModalInitial.tsx +++ b/src/components/Modal/ModalInitial/ModalInitial.tsx @@ -1,44 +1,20 @@ -import React, { useEffect, useState } from 'react' import { useModalSearchParams } from '@/hooks/useModalSearchParams' import { Button } from '@/shared/Button/Button' import { Modal } from '@/shared/Modal/Modal' import { MODAL_PARAMS_KEYS } from '@/types/modal' -import { Fade, Stack } from '@mui/material' -import { AppLink } from '@/shared/AppLink/AppLink' +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) - - const handleShowAdvanced = () => { - setShowAdvancedContent(true) - } - - useEffect(() => { - return () => { - if (isModalOpened) { - setShowAdvancedContent(false) - } - } - }, [isModalOpened]) - return ( - {/* - - {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 3f1547f..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() @@ -44,12 +48,14 @@ const KeyPage = () => { const isKeyExists = npub.trim().length && key const isPopup = searchParams.get('popup') === 'true' 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 } From 6186f3dd3df03ed46a00eb70ff49478707f15179 Mon Sep 17 00:00:00 2001 From: artur Date: Fri, 16 Feb 2024 11:44:50 +0300 Subject: [PATCH 2/2] Make url optional, move name to top on app detail modal --- .../Modal/ModalAppDetails/ModalAppDetails.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) 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 = () => { + { ) }} /> -