From caf8f9a82b58e2cc09fe8539278e247d056386a1 Mon Sep 17 00:00:00 2001 From: artur Date: Thu, 8 Feb 2024 08:50:37 +0300 Subject: [PATCH] Fix app avatars, fix perm names in App page, fix time format --- public/manifest.json | 4 ++-- src/App.tsx | 3 +-- .../ModalConfirmEvent/ModalConfirmEvent.tsx | 14 ++--------- src/modules/backend.ts | 4 ++-- src/pages/AppPage/App.Page.tsx | 8 +++++-- .../components/Permissions/ItemPermission.tsx | 4 ++-- src/pages/KeyPage/components/ItemApp.tsx | 12 ++++++++-- src/utils/consts.ts | 1 + src/utils/helpers/date.ts | 2 +- src/utils/helpers/helpers.ts | 23 +++++++++++++++++-- 10 files changed, 48 insertions(+), 27 deletions(-) diff --git a/public/manifest.json b/public/manifest.json index 1a81075..80416e1 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "name": "Noauth", - "short_name": "Noauth Nostr key manager", + "name": "Nsec.app", + "short_name": "Nsec.app - Nostr key management tool", "icons": [ { "src": "/android-chrome-192x192.png", diff --git a/src/App.tsx b/src/App.tsx index b571f9e..6cc9609 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -47,8 +47,7 @@ function App() { setApps({ apps: apps.map((app) => ({ ...app, - // MOCK IMAGE - icon: 'https://nostr.band/android-chrome-192x192.png', + //icon: 'https://nostr.band/android-chrome-192x192.png', })), }) ) diff --git a/src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx b/src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx index b37c738..5be7df3 100644 --- a/src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx +++ b/src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx @@ -1,7 +1,7 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams' import { Modal } from '@/shared/Modal/Modal' import { MODAL_PARAMS_KEYS } from '@/types/modal' -import { call, getAppIconTitle, getShortenNpub, getSignReqKind } from '@/utils/helpers/helpers' +import { call, getAppIconTitle, getReqActionName, getShortenNpub, getSignReqKind } from '@/utils/helpers/helpers' import { Avatar, Box, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material' import { useParams, useSearchParams } from 'react-router-dom' import { useAppSelector } from '@/store/hooks/redux' @@ -13,7 +13,6 @@ import { SectionTitle } from '@/shared/SectionTitle/SectionTitle' import { swicCall } from '@/modules/swic' import { Checkbox } from '@/shared/Checkbox/Checkbox' import { DbPending } from '@/modules/db' -import { ACTIONS } from '@/utils/consts' import { IPendingsByAppNpub } from '@/pages/KeyPage/hooks/useTriggerConfirmModal' enum ACTION_TYPE { @@ -101,15 +100,6 @@ export const ModalConfirmEvent: FC = ({ confirmEventReqs setPendingRequests(newPendingRequests) } - const getAction = (req: PendingRequest) => { - const action = ACTIONS[req.method] - if (req.method === 'sign_event') { - const kind = getSignReqKind(req) - if (kind !== undefined) return `${action} of kind ${kind}` - } - return action - } - if (isPopup) { document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { @@ -154,7 +144,7 @@ export const ModalConfirmEvent: FC = ({ confirmEventReqs - {getAction(req)} + {getReqActionName(req)} ) })} diff --git a/src/modules/backend.ts b/src/modules/backend.ts index a12c933..6bd6bac 100644 --- a/src/modules/backend.ts +++ b/src/modules/backend.ts @@ -420,8 +420,8 @@ export class NoauthBackend { const app = this.apps.find((a) => a.appNpub === r.req.appNpub) if (r.req.method !== 'connect' && !app) continue - // FIXME use Nsec.app icon! - const icon = 'https://nostr.band/android-chrome-192x192.png' + // FIXME check + const icon = 'assets/icons/logo.svg' const appName = app?.name || getShortenNpub(r.req.appNpub) // FIXME load profile? diff --git a/src/pages/AppPage/App.Page.tsx b/src/pages/AppPage/App.Page.tsx index 64317a5..1aaf957 100644 --- a/src/pages/AppPage/App.Page.tsx +++ b/src/pages/AppPage/App.Page.tsx @@ -5,7 +5,7 @@ import { Navigate, useNavigate } from 'react-router-dom' import { formatTimestampDate } from '@/utils/helpers/date' import { Box, Stack, Typography } from '@mui/material' import { SectionTitle } from '@/shared/SectionTitle/SectionTitle' -import { getShortenNpub } from '@/utils/helpers/helpers' +import { getAppIconTitle, getShortenNpub } from '@/utils/helpers/helpers' import { Button } from '@/shared/Button/Button' import { ACTION_TYPE } from '@/utils/consts' import { Permissions } from './components/Permissions/Permissions' @@ -38,6 +38,8 @@ const AppPage = () => { const { icon = '', name = '' } = currentApp || {} const appName = name || getShortenNpub(appNpub) + const appAvatarTitle = getAppIconTitle(name, appNpub) + const { timestamp } = connectPerm || {} const connectedOn = connectPerm && timestamp ? `Connected at ${formatTimestampDate(timestamp)}` : 'Not connected' @@ -57,7 +59,9 @@ const AppPage = () => { navigate(`key/${npub}`)} /> - + + {appAvatarTitle} + {appName} diff --git a/src/pages/AppPage/components/Permissions/ItemPermission.tsx b/src/pages/AppPage/components/Permissions/ItemPermission.tsx index d156513..961fa19 100644 --- a/src/pages/AppPage/components/Permissions/ItemPermission.tsx +++ b/src/pages/AppPage/components/Permissions/ItemPermission.tsx @@ -2,13 +2,13 @@ import { FC } from 'react' import { Box, IconButton, Typography } from '@mui/material' import { DbPerm } from '@/modules/db' import { formatTimestampDate } from '@/utils/helpers/date' -import { ACTIONS } from '@/utils/consts' import { StyledPermissionItem } from './styled' import ClearRoundedIcon from '@mui/icons-material/ClearRounded' import DoneRoundedIcon from '@mui/icons-material/DoneRounded' import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded' import { ItemPermissionMenu } from './ItemPermissionMenu' import { useOpenMenu } from '@/hooks/useOpenMenu' +import { getPermActionName } from '@/utils/helpers/helpers' type ItemPermissionProps = { permission: DbPerm @@ -26,7 +26,7 @@ export const ItemPermission: FC = ({ permission }) => { - {ACTIONS[perm] || perm} + {getPermActionName(permission)} {formatTimestampDate(timestamp)} diff --git a/src/pages/KeyPage/components/ItemApp.tsx b/src/pages/KeyPage/components/ItemApp.tsx index 1c00f06..ae69eb7 100644 --- a/src/pages/KeyPage/components/ItemApp.tsx +++ b/src/pages/KeyPage/components/ItemApp.tsx @@ -3,13 +3,14 @@ import { Avatar, Stack, Typography } from '@mui/material' import { FC } from 'react' import { Link } from 'react-router-dom' // import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined' -import { getShortenNpub } from '@/utils/helpers/helpers' +import { getAppIconTitle, getShortenNpub } from '@/utils/helpers/helpers' import { StyledItemAppContainer } from './styled' type ItemAppProps = DbApp export const ItemApp: FC = ({ npub, appNpub, icon, name }) => { const appName = name || getShortenNpub(appNpub) + const appAvatarTitle = getAppIconTitle(name, appNpub) return ( = ({ npub, appNpub, icon, name }) => { component={Link} to={`/key/${npub}/app/${appNpub}`} > - + + {appAvatarTitle} + {appName} diff --git a/src/utils/consts.ts b/src/utils/consts.ts index 4b15b52..7f68c77 100644 --- a/src/utils/consts.ts +++ b/src/utils/consts.ts @@ -16,6 +16,7 @@ export enum ACTION_TYPE { } export const ACTIONS: { [type: string]: string } = { + basic: 'Basic permissions', get_public_key: 'Get public key', sign_event: 'Sign event', connect: 'Connect', diff --git a/src/utils/helpers/date.ts b/src/utils/helpers/date.ts index ba9356a..efe1d78 100644 --- a/src/utils/helpers/date.ts +++ b/src/utils/helpers/date.ts @@ -3,7 +3,7 @@ import { format } from 'date-fns' export const formatTimestampDate = (timestamp: number) => { try { const date = new Date(timestamp) - const formattedDate = format(date, "HH:mm',' dd-MM-yyyy") + const formattedDate = format(date, "dd-MM-yyyy HH:mm") return formattedDate } catch (error) { return '' diff --git a/src/utils/helpers/helpers.ts b/src/utils/helpers/helpers.ts index a7fe0ba..eadc8c1 100644 --- a/src/utils/helpers/helpers.ts +++ b/src/utils/helpers/helpers.ts @@ -1,6 +1,6 @@ import { nip19 } from 'nostr-tools' -import { ACTION_TYPE, NIP46_RELAYS } from '../consts' -import { DbPending } from '@/modules/db' +import { ACTIONS, ACTION_TYPE, NIP46_RELAYS } from '../consts' +import { DbPending, DbPerm } from '@/modules/db' import { MetaEvent } from '@/types/meta-event' export async function call(cb: () => any) { @@ -53,6 +53,25 @@ export function getSignReqKind(req: DbPending): number | undefined { return undefined } +export function getReqActionName(req: DbPending) { + const action = ACTIONS[req.method] + if (req.method === 'sign_event') { + const kind = getSignReqKind(req) + if (kind !== undefined) return `${action} of kind ${kind}` + } + return action +} + +export function getPermActionName(req: DbPerm) { + const method = req.perm.split(':')[0] + const action = ACTIONS[method] + if (method === 'sign_event') { + const kind = req.perm.split(':')[1] + if (kind !== undefined) return `${action} of kind ${kind}` + } + return action +} + export function getReqPerm(req: DbPending): string { if (req.method === 'sign_event') { const kind = getSignReqKind(req)