Compare commits

..

No commits in common. "7d3daa8d13827fa8dc1b51ed8d3572efb187be88" and "d41d577c29af2135e4352186af1b4b434d22cc95" have entirely different histories.

61 changed files with 1194 additions and 3721 deletions

View File

@ -6,7 +6,7 @@ module.exports = {
'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended' 'plugin:react-hooks/recommended'
], ],
ignorePatterns: ['dist', '.eslintrc.cjs', 'licenseChecker.cjs'], ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
plugins: ['react-refresh'], plugins: ['react-refresh'],
rules: { rules: {

View File

@ -1,19 +0,0 @@
#!/bin/sh
# Get the commit message (the parameter we're given is just the path to the
# temporary file which holds the message).
commit_message=$(cat "$1")
if (echo "$commit_message" | grep -Eq "^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([a-z0-9 \-]+\))?!?: .+$") then
tput setaf 2;
echo "✔ Commit message meets Conventional Commit standards"
tput sgr0;
exit 0
fi
tput setaf 1;
echo "❌ Commit message does not meet the Conventional Commit standard!"
tput sgr0;
echo "An example of a valid message is:"
echo " feat(login): add the 'remember me' button"
echo "📝 More details at: https://www.conventionalcommits.org/en/v1.0.0/#summary"
exit 1

View File

@ -1,13 +0,0 @@
#!/bin/sh
# Avoid commits to the master branch
BRANCH=`git rev-parse --abbrev-ref HEAD`
REGEX="^(master|main|staging|development)$"
if [[ "$BRANCH" =~ $REGEX ]]; then
echo "You are on branch $BRANCH. Are you sure you want to commit to this branch?"
echo "If so, commit with -n to bypass the pre-commit hook."
exit 1
fi
npm run lint-staged

View File

@ -17,21 +17,9 @@ jobs:
with: with:
node-version: 18 node-version: 18
- name: Audit
run: npm audit
- name: Install Dependencies - name: Install Dependencies
run: npm ci run: npm ci
- name: License check
run: npm run license-checker
- name: Lint check
run: npm run lint
- name: Formatter check
run: npm run formatter:check
- name: Create .env File - name: Create .env File
run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env

View File

@ -1,34 +0,0 @@
name: Open PR on Staging
on:
pull_request:
types: [opened, edited, synchronize]
branches:
- staging
jobs:
audit_and_check:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v2
with:
node-version: 18
- name: Audit
run: npm audit
- name: Install Dependencies
run: npm ci
- name: License check
run: npm run license-checker
- name: Lint check
run: npm run lint
- name: Formatter check
run: npm run formatter:check

View File

@ -1,28 +0,0 @@
const process = require('node:process')
const licenseChecker = require('license-checker')
const check = (cwd) => {
return new Promise((resolve, reject) => {
licenseChecker.init(
{
production: true,
start: cwd,
excludePrivatePackages: true,
onlyAllow:
'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;BSD 3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
excludePackages: ''
},
(error, json) => {
if (error) {
reject(error)
} else {
resolve(json)
}
}
)
})
}
check(process.cwd(), true)
.then(() => console.log('All packages are licensed properly'))
.catch((err) => console.log('license checker err', err))

1150
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -7,16 +7,11 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 25", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"", "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
"formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"", "formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
"formatter:staged": "prettier --write --ignore-unknown", "preview": "vite preview"
"preview": "vite preview",
"preinstall": "git config core.hooksPath .git-hooks",
"license-checker": "node licenseChecker.cjs",
"lint-staged": "lint-staged"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "11.11.4", "@emotion/react": "11.11.4",
@ -31,7 +26,7 @@
"@noble/hashes": "^1.4.0", "@noble/hashes": "^1.4.0",
"@nostr-dev-kit/ndk": "2.5.0", "@nostr-dev-kit/ndk": "2.5.0",
"@reduxjs/toolkit": "2.2.1", "@reduxjs/toolkit": "2.2.1",
"axios": "^1.7.4", "axios": "1.6.7",
"crypto-hash": "3.0.0", "crypto-hash": "3.0.0",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"dnd-core": "16.0.1", "dnd-core": "16.0.1",
@ -47,7 +42,6 @@
"react-dnd": "16.0.1", "react-dnd": "16.0.1",
"react-dnd-html5-backend": "16.0.1", "react-dnd-html5-backend": "16.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-redux": "9.1.0", "react-redux": "9.1.0",
"react-router-dom": "6.22.1", "react-router-dom": "6.22.1",
"react-toastify": "10.0.4", "react-toastify": "10.0.4",
@ -67,18 +61,10 @@
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5", "eslint-plugin-react-refresh": "^0.4.5",
"license-checker": "^25.0.1",
"lint-staged": "^15.2.8",
"prettier": "3.2.5", "prettier": "3.2.5",
"ts-css-modules-vite-plugin": "1.0.20", "ts-css-modules-vite-plugin": "1.0.20",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^5.1.4", "vite": "^5.1.4",
"vite-tsconfig-paths": "4.3.2" "vite-tsconfig-paths": "4.3.2"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"npm run lint:staged"
],
"*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
} }
} }

View File

@ -56,16 +56,10 @@ a {
text-decoration: none; text-decoration: none;
text-decoration-color: inherit; text-decoration-color: inherit;
transition: ease 0.4s; transition: ease 0.4s;
outline: none;
&:focus,
&:hover { &:hover {
color: $primary-light; color: $primary-light;
text-decoration: underline; text-decoration: underline;
text-decoration-color: inherit; text-decoration-color: inherit;
} }
} }
input {
font-family: inherit;
}

View File

@ -6,18 +6,6 @@ interface ContainerProps {
className?: string className?: string
} }
/**
* Container component with pre-defined width, padding and margins for top level layout.
*
* **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
* - When using *className* override, that styles are imported after the actual `Container` component
* ```
* import { Container } from './components/Container'
* import styles from './style.module.scss'
* ```
* - or add *!important* to imported styles
* - or override styles with *CSSProperties* object
*/
export const Container = ({ export const Container = ({
style = {}, style = {},
className = '', className = '',

View File

@ -1,158 +0,0 @@
import { Meta } from '../../types'
import { SigitCardDisplayInfo, SigitStatus } from '../../utils'
import { Link } from 'react-router-dom'
import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
import { appPublicRoutes, appPrivateRoutes } from '../../routes'
import { Button, Divider, Tooltip } from '@mui/material'
import { DisplaySigner } from '../DisplaySigner'
import {
faArchive,
faCalendar,
faCopy,
faEye,
faFile
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { UserAvatar } from '../UserAvatar'
import { UserAvatarGroup } from '../UserAvatarGroup'
import styles from './style.module.scss'
import { TooltipChild } from '../TooltipChild'
import { getExtensionIconLabel } from '../getExtensionIconLabel'
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
import { useSigitMeta } from '../../hooks/useSigitMeta'
type SigitProps = {
meta: Meta
parsedMeta: SigitCardDisplayInfo
}
export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
const {
title,
createdAt,
submittedBy,
signers,
signedStatus,
fileExtensions
} = parsedMeta
const { signersStatus } = useSigitMeta(meta)
const profiles = useSigitProfiles([
...(submittedBy ? [submittedBy] : []),
...signers
])
return (
<div className={styles.itemWrapper}>
<Link
to={
signedStatus === SigitStatus.Complete
? appPublicRoutes.verify
: appPrivateRoutes.sign
}
state={{ meta }}
className={styles.insetLink}
></Link>
<p className={`line-clamp-2 ${styles.title}`}>{title}</p>
<div className={styles.users}>
{submittedBy &&
(function () {
const profile = profiles[submittedBy]
return (
<Tooltip
title={
profile?.display_name ||
profile?.name ||
shorten(hexToNpub(submittedBy))
}
placement="top"
arrow
disableInteractive
>
<TooltipChild>
<UserAvatar pubkey={submittedBy} image={profile?.picture} />
</TooltipChild>
</Tooltip>
)
})()}
{submittedBy && signers.length ? (
<Divider orientation="vertical" flexItem />
) : null}
<UserAvatarGroup max={7}>
{signers.map((signer) => {
const pubkey = npubToHex(signer)!
const profile = profiles[pubkey]
return (
<Tooltip
key={signer}
title={
profile?.display_name || profile?.name || shorten(pubkey)
}
placement="top"
arrow
disableInteractive
>
<TooltipChild>
<DisplaySigner
status={signersStatus[signer]}
profile={profile}
pubkey={pubkey}
/>
</TooltipChild>
</Tooltip>
)
})}
</UserAvatarGroup>
</div>
<div className={`${styles.details} ${styles.date} ${styles.iconLabel}`}>
<FontAwesomeIcon icon={faCalendar} />
{createdAt ? formatTimestamp(createdAt) : null}
</div>
<div className={`${styles.details} ${styles.status}`}>
<span className={styles.iconLabel}>
<FontAwesomeIcon icon={faEye} /> {signedStatus}
</span>
{fileExtensions.length > 0 ? (
<span className={styles.iconLabel}>
{fileExtensions.length > 1 ? (
<>
<FontAwesomeIcon icon={faFile} /> Multiple File Types
</>
) : (
getExtensionIconLabel(fileExtensions[0])
)}
</span>
) : null}
</div>
<div className={styles.itemActions}>
<Tooltip title="Duplicate" arrow placement="top" disableInteractive>
<Button
sx={{
color: 'var(--primary-main)',
minWidth: '34px',
padding: '10px'
}}
variant={'text'}
>
<FontAwesomeIcon icon={faCopy} />
</Button>
</Tooltip>
<Tooltip title="Archive" arrow placement="top" disableInteractive>
<Button
sx={{
color: 'var(--primary-main)',
minWidth: '34px',
padding: '10px'
}}
variant={'text'}
>
<FontAwesomeIcon icon={faArchive} />
</Button>
</Tooltip>
</div>
</div>
)
}

View File

@ -1,114 +0,0 @@
@import '../../styles/colors.scss';
.itemWrapper {
position: relative;
overflow: hidden;
background-color: $overlay-background-color;
border-radius: 4px;
display: flex;
padding: 15px;
gap: 15px;
flex-direction: column;
&:only-child {
max-width: 600px;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
transition: opacity ease 0.2s;
opacity: 0;
width: 4px;
background-color: $primary-main;
pointer-events: none;
}
&:hover,
&:focus-within {
&::before {
opacity: 1;
}
.itemActions {
transform: translateX(0);
}
}
}
.insetLink {
position: absolute;
inset: 0;
outline: none;
}
.itemActions {
display: flex;
gap: 10px;
padding: 10px;
> * {
flex-grow: 1;
}
@media (hover: hover) {
transition: ease 0.2s;
transform: translateX(100%);
position: absolute;
right: 0;
top: 0;
bottom: 0;
flex-direction: column;
background: $overlay-background-color;
border-left: solid 1px rgba(0, 0, 0, 0.1);
&:hover,
&:focus-within {
transform: translateX(0);
}
}
@media (hover: none) {
border-top: solid 1px rgba(0, 0, 0, 0.1);
padding-top: 10px;
margin-inline: -15px;
margin-bottom: -15px;
}
}
.title {
font-size: 20px;
color: $text-color;
}
.users {
margin-top: auto;
display: flex;
grid-gap: 10px;
}
.details {
color: rgba(0, 0, 0, 0.3);
font-size: 14px;
}
.iconLabel {
display: flex;
grid-gap: 10px;
align-items: center;
}
.status {
display: flex;
grid-gap: 25px;
}
a.itemWrapper:hover {
text-decoration: none;
}

View File

@ -1,62 +0,0 @@
import { Badge } from '@mui/material'
import { ProfileMetadata } from '../../types'
import styles from './style.module.scss'
import { UserAvatar } from '../UserAvatar'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faCheck,
faEllipsis,
faExclamation,
faEye,
faHourglass,
faQuestion
} from '@fortawesome/free-solid-svg-icons'
import { SignStatus } from '../../utils'
import { Spinner } from '../Spinner'
type DisplaySignerProps = {
profile: ProfileMetadata
pubkey: string
status: SignStatus
}
export const DisplaySigner = ({
status,
profile,
pubkey
}: DisplaySignerProps) => {
const getStatusIcon = (status: SignStatus) => {
switch (status) {
case SignStatus.Signed:
return <FontAwesomeIcon icon={faCheck} />
case SignStatus.Awaiting:
return (
<Spinner>
<FontAwesomeIcon icon={faHourglass} />
</Spinner>
)
case SignStatus.Pending:
return <FontAwesomeIcon icon={faEllipsis} />
case SignStatus.Invalid:
return <FontAwesomeIcon icon={faExclamation} />
case SignStatus.Viewer:
return <FontAwesomeIcon icon={faEye} />
default:
return <FontAwesomeIcon icon={faQuestion} />
}
}
return (
<Badge
className={styles.signer}
overlap="circular"
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
badgeContent={
<div className={styles.statusBadge}>{getStatusIcon(status)}</div>
}
>
<UserAvatar pubkey={pubkey} image={profile?.picture} />
</Badge>
)
}

View File

@ -1,23 +0,0 @@
@import '../../styles/colors.scss';
.statusBadge {
width: 22px;
height: 22px;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
background-color: $primary-main;
}
.signer {
background-color: white;
border-radius: 50%;
z-index: 1;
}

View File

@ -1,45 +1,15 @@
import { import { AccessTime, CalendarMonth, ExpandMore, Gesture, PictureAsPdf, Badge, Work, Close } from '@mui/icons-material'
AccessTime, import { Box, Typography, Accordion, AccordionDetails, AccordionSummary, CircularProgress, FormControl, InputLabel, MenuItem, Select } from '@mui/material'
CalendarMonth,
ExpandMore,
Gesture,
PictureAsPdf,
Badge,
Work,
Close
} from '@mui/icons-material'
import {
Box,
Typography,
Accordion,
AccordionDetails,
AccordionSummary,
CircularProgress,
FormControl,
InputLabel,
MenuItem,
Select
} from '@mui/material'
import styles from './style.module.scss' import styles from './style.module.scss'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import * as PDFJS from 'pdfjs-dist' import * as PDFJS from "pdfjs-dist";
import { ProfileMetadata, User } from '../../types' import { ProfileMetadata, User } from '../../types';
import { import { PdfFile, DrawTool, MouseState, PdfPage, DrawnField, MarkType } from '../../types/drawing';
PdfFile, import { truncate } from 'lodash';
DrawTool, import { hexToNpub } from '../../utils';
MouseState,
PdfPage,
DrawnField,
MarkType
} from '../../types/drawing'
import { truncate } from 'lodash'
import { hexToNpub } from '../../utils'
import { toPdfFiles } from '../../utils/pdf.ts' import { toPdfFiles } from '../../utils/pdf.ts'
PDFJS.GlobalWorkerOptions.workerSrc = new URL( PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url
).toString()
interface Props { interface Props {
selectedFiles: File[] selectedFiles: File[]
@ -62,6 +32,7 @@ export const DrawPDFFields = (props: Props) => {
icon: <Gesture/>, icon: <Gesture/>,
label: 'Signature', label: 'Signature',
active: false active: false
}, },
{ {
identifier: MarkType.FULLNAME, identifier: MarkType.FULLNAME,
@ -86,7 +57,7 @@ export const DrawPDFFields = (props: Props) => {
icon: <AccessTime/>, icon: <AccessTime/>,
label: 'Datetime', label: 'Datetime',
active: false active: false
} },
]) ])
const [mouseState, setMouseState] = useState<MouseState>({ const [mouseState, setMouseState] = useState<MouseState>({
@ -112,11 +83,11 @@ export const DrawPDFFields = (props: Props) => {
*/ */
useEffect(() => { useEffect(() => {
// window.addEventListener('mousedown', onMouseDown); // window.addEventListener('mousedown', onMouseDown);
window.addEventListener('mouseup', onMouseUp) window.addEventListener('mouseup', onMouseUp);
return () => { return () => {
// window.removeEventListener('mousedown', onMouseDown); // window.removeEventListener('mousedown', onMouseDown);
window.removeEventListener('mouseup', onMouseUp) window.removeEventListener('mouseup', onMouseUp);
} }
}, []) }, [])
@ -241,10 +212,7 @@ export const DrawPDFFields = (props: Props) => {
*/ */
const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => { const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
if (mouseState.dragging) { if (mouseState.dragging) {
const { mouseX, mouseY, rect } = getMouseCoordinates( const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode)
event,
event.target.parentNode
)
const coordsOffset = mouseState.coordsInWrapper const coordsOffset = mouseState.coordsInWrapper
if (coordsOffset) { if (coordsOffset) {
@ -290,10 +258,7 @@ export const DrawPDFFields = (props: Props) => {
*/ */
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => { const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
if (mouseState.resizing) { if (mouseState.resizing) {
const { mouseX, mouseY } = getMouseCoordinates( const { mouseX, mouseY } = getMouseCoordinates(event, event.target.parentNode.parentNode)
event,
event.target.parentNode.parentNode
)
const width = mouseX - drawnField.left const width = mouseX - drawnField.left
const height = mouseY - drawnField.top const height = mouseY - drawnField.top
@ -312,18 +277,10 @@ export const DrawPDFFields = (props: Props) => {
* @param pdfPageIndex pdf page index * @param pdfPageIndex pdf page index
* @param drawnFileIndex drawn file index * @param drawnFileIndex drawn file index
*/ */
const onRemoveHandleMouseDown = ( const onRemoveHandleMouseDown = (event: any, pdfFileIndex: number, pdfPageIndex: number, drawnFileIndex: number) => {
event: any,
pdfFileIndex: number,
pdfPageIndex: number,
drawnFileIndex: number
) => {
event.stopPropagation() event.stopPropagation()
pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice( pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(drawnFileIndex, 1)
drawnFileIndex,
1
)
} }
/** /**
@ -343,9 +300,9 @@ export const DrawPDFFields = (props: Props) => {
*/ */
const getMouseCoordinates = (event: any, customTarget?: any) => { const getMouseCoordinates = (event: any, customTarget?: any) => {
const target = customTarget ? customTarget : event.target const target = customTarget ? customTarget : event.target
const rect = target.getBoundingClientRect() const rect = target.getBoundingClientRect();
const mouseX = event.clientX - rect.left //x position within the element. const mouseX = event.clientX - rect.left; //x position within the element.
const mouseY = event.clientY - rect.top //y position within the element. const mouseY = event.clientY - rect.top; //y position within the element.
return { return {
mouseX, mouseX,
@ -359,7 +316,7 @@ export const DrawPDFFields = (props: Props) => {
* creates the pdfFiles object and sets to a state * creates the pdfFiles object and sets to a state
*/ */
const parsePdfPages = async () => { const parsePdfPages = async () => {
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles) const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles);
setPdfFiles(pdfFiles) setPdfFiles(pdfFiles)
} }
@ -369,7 +326,7 @@ export const DrawPDFFields = (props: Props) => {
* @returns if expanded pdf accordion is present * @returns if expanded pdf accordion is present
*/ */
const hasExpandedPdf = () => { const hasExpandedPdf = () => {
return !!pdfFiles.filter((pdfFile) => !!pdfFile.expanded).length return !!pdfFiles.filter(pdfFile => !!pdfFile.expanded).length
} }
const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => { const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => {
@ -398,11 +355,9 @@ export const DrawPDFFields = (props: Props) => {
*/ */
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => { const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
return ( return (
<Box <Box sx={{
sx={{
width: '100%' width: '100%'
}} }}>
>
{pdfFile.pages.map((page, pdfPageIndex: number) => { {pdfFile.pages.map((page, pdfPageIndex: number) => {
return ( return (
<div <div
@ -412,27 +367,17 @@ export const DrawPDFFields = (props: Props) => {
marginBottom: '10px' marginBottom: '10px'
}} }}
className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`} className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
onMouseMove={(event) => { onMouseMove={(event) => {onMouseMove(event, page)}}
onMouseMove(event, page) onMouseDown={(event) => {onMouseDown(event, page)}}
}}
onMouseDown={(event) => {
onMouseDown(event, page)
}}
> >
<img <img draggable="false" style={{ width: '100%' }} src={page.image}/>
draggable="false"
style={{ width: '100%' }}
src={page.image}
/>
{page.drawnFields.map((drawnField, drawnFieldIndex: number) => { {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
return ( return (
<div <div
key={drawnFieldIndex} key={drawnFieldIndex}
onMouseDown={onDrawnFieldMouseDown} onMouseDown={onDrawnFieldMouseDown}
onMouseMove={(event) => { onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}}
onDranwFieldMouseMove(event, drawnField)
}}
className={styles.drawingRectangle} className={styles.drawingRectangle}
style={{ style={{
left: `${drawnField.left}px`, left: `${drawnField.left}px`,
@ -444,68 +389,41 @@ export const DrawPDFFields = (props: Props) => {
> >
<span <span
onMouseDown={onResizeHandleMouseDown} onMouseDown={onResizeHandleMouseDown}
onMouseMove={(event) => { onMouseMove={(event) => {onResizeHandleMouseMove(event, drawnField)}}
onResizeHandleMouseMove(event, drawnField)
}}
className={styles.resizeHandle} className={styles.resizeHandle}
></span> ></span>
<span <span
onMouseDown={(event) => { onMouseDown={(event) => {onRemoveHandleMouseDown(event, pdfFileIndex, pdfPageIndex, drawnFieldIndex)}}
onRemoveHandleMouseDown(
event,
pdfFileIndex,
pdfPageIndex,
drawnFieldIndex
)
}}
className={styles.removeHandle} className={styles.removeHandle}
> >
<Close fontSize="small" /> <Close fontSize='small'/>
</span> </span>
<div <div
onMouseDown={onUserSelectHandleMouseDown} onMouseDown={onUserSelectHandleMouseDown}
className={styles.userSelect} className={styles.userSelect}
> >
<FormControl fullWidth size="small"> <FormControl fullWidth size='small'>
<InputLabel id="counterparts">Counterpart</InputLabel> <InputLabel id="counterparts">Counterpart</InputLabel>
<Select <Select
value={drawnField.counterpart} value={drawnField.counterpart}
onChange={(event) => { onChange={(event) => { drawnField.counterpart = event.target.value; refreshPdfFiles() }}
drawnField.counterpart = event.target.value
refreshPdfFiles()
}}
labelId="counterparts" labelId="counterparts"
label="Counterparts" label="Counterparts"
> >
{props.users.map((user, index) => { {props.users.map((user, index) => {
let displayValue = truncate( let displayValue = truncate(hexToNpub(user.pubkey), {
hexToNpub(user.pubkey),
{
length: 16 length: 16
} })
)
const metadata = props.metadata[user.pubkey] const metadata = props.metadata[user.pubkey]
if (metadata) { if (metadata) {
displayValue = truncate( displayValue = truncate(metadata.name || metadata.display_name || metadata.username, {
metadata.name ||
metadata.display_name ||
metadata.username,
{
length: 16 length: 16
} })
)
} }
return ( return <MenuItem key={index} value={hexToNpub(user.pubkey)}>{displayValue}</MenuItem>
<MenuItem
key={index}
value={hexToNpub(user.pubkey)}
>
{displayValue}
</MenuItem>
)
})} })}
</Select> </Select>
</FormControl> </FormControl>
@ -539,13 +457,7 @@ export const DrawPDFFields = (props: Props) => {
{pdfFiles.map((pdfFile, pdfFileIndex: number) => { {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
return ( return (
<Accordion <Accordion key={pdfFileIndex} expanded={pdfFile.expanded} onChange={(_event, expanded) => {handleAccordionExpandChange(expanded, pdfFile)}}>
key={pdfFileIndex}
expanded={pdfFile.expanded}
onChange={(_event, expanded) => {
handleAccordionExpandChange(expanded, pdfFile)
}}
>
<AccordionSummary <AccordionSummary
expandIcon={<ExpandMore />} expandIcon={<ExpandMore />}
aria-controls={`panel${pdfFileIndex}-content`} aria-controls={`panel${pdfFileIndex}-content`}
@ -565,17 +477,11 @@ export const DrawPDFFields = (props: Props) => {
{showDrawToolBox && ( {showDrawToolBox && (
<Box className={styles.drawToolBoxContainer}> <Box className={styles.drawToolBoxContainer}>
<Box className={styles.drawToolBox}> <Box className={styles.drawToolBox}>
{toolbox {toolbox.filter(drawTool => drawTool.active).map((drawTool: DrawTool, index: number) => {
.filter((drawTool) => drawTool.active)
.map((drawTool: DrawTool, index: number) => {
return ( return (
<Box <Box
key={index} key={index}
onClick={() => { onClick={() => {handleToolSelect(drawTool)}} className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}>
handleToolSelect(drawTool)
}}
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}
>
{ drawTool.icon } { drawTool.icon }
{ drawTool.label } { drawTool.label }
</Box> </Box>

View File

@ -30,7 +30,6 @@
border: 1px solid rgba(0, 0, 0, 0.137); border: 1px solid rgba(0, 0, 0, 0.137);
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
-webkit-user-select: none;
user-select: none; user-select: none;
&.selected { &.selected {
@ -43,23 +42,16 @@
border-color: #01aaad79; border-color: #01aaad79;
} }
} }
} }
} }
} }
.pdfImageWrapper { .pdfImageWrapper {
position: relative; position: relative;
-webkit-user-select: none;
user-select: none; user-select: none;
margin-bottom: 10px; margin-bottom: 10px;
> img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensure the image fits within the container */
}
&.drawing { &.drawing {
cursor: crosshair; cursor: crosshair;
} }
@ -107,7 +99,7 @@
background-color: #fff; background-color: #fff;
border: 1px solid rgb(160, 160, 160); border: 1px solid rgb(160, 160, 160);
border-radius: 50%; border-radius: 50%;
color: #e74c3c; color: #E74C3C;
font-size: 10px; font-size: 10px;
cursor: pointer; cursor: pointer;
} }

View File

@ -23,6 +23,8 @@ ul {
.wrap { .wrap {
position: sticky;
top: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-gap: 15px; grid-gap: 15px;
@ -54,6 +56,10 @@ ul {
cursor: grab; cursor: grab;
} }
.wrap {
margin-top: 5px;
}
.fileItem { .fileItem {
transition: ease 0.2s; transition: ease 0.2s;
display: flex; display: flex;

View File

@ -7,7 +7,6 @@
right: 0; right: 0;
left: 0; left: 0;
align-items: center; align-items: center;
z-index: 1000;
} }
.actions { .actions {

View File

@ -81,8 +81,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
} }
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault()
if (!selectedMarkValue || !selectedMark) return; if (!selectedMarkValue || !selectedMark) return
const updatedMark: CurrentUserMark = getUpdatedMark( const updatedMark: CurrentUserMark = getUpdatedMark(
selectedMark, selectedMark,

View File

@ -1,4 +1,4 @@
import { Divider } from '@mui/material' import { Box, Divider } from '@mui/material'
import PdfItem from './PdfItem.tsx' import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts' import { CurrentUserFile } from '../../types/file.ts'

View File

@ -1,113 +0,0 @@
import {
FormControl,
MenuItem,
Select as SelectMui,
SelectChangeEvent,
styled,
SelectProps as SelectMuiProps,
MenuItemProps
} from '@mui/material'
const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
backgroundColor: 'var(--primary-main)',
fontSize: '14px',
fontWeight: '500',
color: 'white',
':hover': {
backgroundColor: 'var(--primary-light)'
},
'& .MuiSelect-select:focus': {
backgroundColor: 'var(--primary-light)'
},
'& .MuiSvgIcon-root': {
color: 'white'
},
'& .MuiOutlinedInput-notchedOutline': {
border: 'none'
}
}))
const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
marginInline: '5px',
borderRadius: '4px',
'&:hover': {
background: 'var(--primary-light)',
color: 'white'
},
'&.Mui-selected': {
background: 'var(--primary-dark)',
color: 'white'
},
'&.Mui-selected:hover': {
background: 'var(--primary-light)'
},
'&.Mui-selected.Mui-focusVisible': {
background: 'var(--primary-light)',
color: 'white'
},
'&.Mui-focusVisible': {
background: 'var(--primary-light)',
color: 'white'
},
'& + *': {
marginTop: '5px'
}
}))
interface SelectItemProps<T extends string> {
value: T
label: string
}
interface SelectProps<T extends string> {
value: T
setValue: React.Dispatch<React.SetStateAction<T>>
options: SelectItemProps<T>[]
name?: string
id?: string
}
export function Select<T extends string>({
value,
setValue,
options,
name,
id
}: SelectProps<T>) {
const handleChange = (event: SelectChangeEvent<unknown>) => {
setValue(event.target.value as T)
}
return (
<FormControl>
<SelectCustomized
id={id}
name={name}
size="small"
variant="outlined"
value={value}
onChange={handleChange}
MenuProps={{
MenuListProps: {
sx: {
paddingBlock: '5px'
}
},
PaperProps: {
sx: {
boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
}
}
}}
>
{options.map((o) => {
return (
<MenuItemCustomized key={o.label} value={o.value as string}>
{o.label}
</MenuItemCustomized>
)
})}
</SelectCustomized>
</FormControl>
)
}

View File

@ -1,6 +0,0 @@
import { PropsWithChildren } from 'react'
import styles from './style.module.scss'
export const Spinner = ({ children }: PropsWithChildren) => (
<div className={styles.spin}>{children}</div>
)

View File

@ -1,12 +0,0 @@
.spin {
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@ -1,16 +0,0 @@
import { forwardRef, PropsWithChildren } from 'react'
/**
* Helper wrapper for custom child components when using `@mui/material/tooltips`.
* Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
* @source https://mui.com/material-ui/react-tooltip/#custom-child-element
*/
export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
({ children, ...rest }, ref) => {
return (
<span ref={ref} {...rest}>
{children}
</span>
)
}
)

View File

@ -1,11 +1,12 @@
import { useNavigate } from 'react-router-dom'
import { getProfileRoute } from '../../routes' import { getProfileRoute } from '../../routes'
import styles from './styles.module.scss' import styles from './styles.module.scss'
import React from 'react'
import { AvatarIconButton } from '../UserAvatarIconButton' import { AvatarIconButton } from '../UserAvatarIconButton'
import { Link } from 'react-router-dom'
interface UserAvatarProps { interface UserAvatarProps {
name?: string name: string
pubkey: string pubkey: string
image?: string image?: string
} }
@ -15,22 +16,27 @@ interface UserAvatarProps {
* Clicking will navigate to the user's profile. * Clicking will navigate to the user's profile.
*/ */
export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => { export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
const navigate = useNavigate()
const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
e.stopPropagation()
navigate(getProfileRoute(pubkey))
}
return ( return (
<Link <div className={styles.container}>
to={getProfileRoute(pubkey)}
className={styles.container}
tabIndex={-1}
>
<AvatarIconButton <AvatarIconButton
src={image} src={image}
hexKey={pubkey} hexKey={pubkey}
aria-label={`account of user ${name || pubkey}`} aria-label={`account of user ${name}`}
color="inherit" color="inherit"
sx={{ onClick={handleClick}
padding: 0
}}
/> />
{name ? <label className={styles.username}>{name}</label> : null} {name ? (
</Link> <label onClick={handleClick} className={styles.username}>
{name}
</label>
) : null}
</div>
) )
} }

View File

@ -2,7 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
// flex-grow: 1; flex-grow: 1;
} }
.username { .username {

View File

@ -1,38 +0,0 @@
import { Children, PropsWithChildren } from 'react'
import styles from './style.module.scss'
interface UserAvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
max: number
renderSurplus?: ((surplus: number) => React.ReactNode) | undefined
}
const defaultSurplus = (surplus: number) => {
return <span className={styles.icon}>+{surplus}</span>
}
/**
* Renders children with the `max` limit (including surplus if available).
* The children are wrapped with a `div` (accepts standard `HTMLDivElement` attributes)
* @param max The maximum number of children rendered in a div.
* @param renderSurplus Custom render for surplus children (accepts surplus number).
*/
export const UserAvatarGroup = ({
max,
renderSurplus = defaultSurplus,
children,
...rest
}: PropsWithChildren<UserAvatarGroupProps>) => {
const total = Children.count(children)
const surplus = total - max + 1
const childrenArray = Children.toArray(children)
return (
<div className={styles.container} {...rest}>
{surplus > 1
? childrenArray.slice(0, surplus * -1).map((c) => c)
: children}
{surplus > 1 && renderSurplus(surplus)}
</div>
)
}

View File

@ -1,39 +0,0 @@
@import '../../styles/colors.scss';
.container {
padding: 0 0 0 10px;
> * {
transition: margin ease 0.2s;
margin: 0 0 0 -10px;
position: relative;
z-index: 1;
&:first-child {
margin-left: -10px !important;
}
}
> *:hover,
> *:focus-within {
margin: 0 15px 0 5px;
z-index: 2;
}
}
.icon {
width: 40px;
height: 40px;
border-radius: 50%;
border-width: 2px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
color: rgba(0, 0, 0, 0.5);
font-weight: bold;
font-size: 14px;
border: solid 2px $primary-main;
}

View File

@ -2,6 +2,6 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
border-width: 2px; border-width: 3px;
overflow: hidden; overflow: hidden;
} }

View File

@ -1,217 +0,0 @@
import { Divider, Tooltip } from '@mui/material'
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
import {
extractFileExtensions,
formatTimestamp,
fromUnixTimestamp,
hexToNpub,
npubToHex,
shorten,
SignStatus
} from '../../utils'
import { UserAvatar } from '../UserAvatar'
import { useSigitMeta } from '../../hooks/useSigitMeta'
import { UserAvatarGroup } from '../UserAvatarGroup'
import styles from './style.module.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faCalendar,
faCalendarCheck,
faCalendarPlus,
faEye,
faFile,
faFileCircleExclamation
} from '@fortawesome/free-solid-svg-icons'
import { getExtensionIconLabel } from '../getExtensionIconLabel'
import { useSelector } from 'react-redux'
import { State } from '../../store/rootReducer'
import { TooltipChild } from '../TooltipChild'
import { DisplaySigner } from '../DisplaySigner'
import { Meta } from '../../types'
interface UsersDetailsProps {
meta: Meta
}
export const UsersDetails = ({ meta }: UsersDetailsProps) => {
const {
submittedBy,
signers,
viewers,
fileHashes,
signersStatus,
createdAt,
completedAt,
parsedSignatureEvents,
signedStatus
} = useSigitMeta(meta)
const { usersPubkey } = useSelector((state: State) => state.auth)
const profiles = useSigitProfiles([
...(submittedBy ? [submittedBy] : []),
...signers,
...viewers
])
const userCanSign =
typeof usersPubkey !== 'undefined' &&
signers.includes(hexToNpub(usersPubkey))
const ext = extractFileExtensions(Object.keys(fileHashes))
return submittedBy ? (
<div className={styles.container}>
<div className={styles.section}>
<p>Signers</p>
<div className={styles.users}>
{submittedBy &&
(function () {
const profile = profiles[submittedBy]
return (
<Tooltip
title={
profile?.display_name ||
profile?.name ||
shorten(hexToNpub(submittedBy))
}
placement="top"
arrow
disableInteractive
>
<TooltipChild>
<UserAvatar pubkey={submittedBy} image={profile?.picture} />
</TooltipChild>
</Tooltip>
)
})()}
{submittedBy && signers.length ? (
<Divider orientation="vertical" flexItem />
) : null}
<UserAvatarGroup max={20}>
{signers.map((signer) => {
const pubkey = npubToHex(signer)!
const profile = profiles[pubkey]
return (
<Tooltip
key={signer}
title={
profile?.display_name || profile?.name || shorten(pubkey)
}
placement="top"
arrow
disableInteractive
>
<TooltipChild>
<DisplaySigner
status={signersStatus[signer]}
profile={profile}
pubkey={pubkey}
/>
</TooltipChild>
</Tooltip>
)
})}
{viewers.map((signer) => {
const pubkey = npubToHex(signer)!
const profile = profiles[pubkey]
return (
<Tooltip
key={signer}
title={
profile?.display_name || profile?.name || shorten(pubkey)
}
placement="top"
arrow
disableInteractive
>
<TooltipChild>
<DisplaySigner
status={SignStatus.Viewer}
profile={profile}
pubkey={pubkey}
/>
</TooltipChild>
</Tooltip>
)
})}
</UserAvatarGroup>
</div>
</div>
<div className={styles.section}>
<p>Details</p>
<Tooltip
title={'Publication date'}
placement="top"
arrow
disableInteractive
>
<span className={styles.detailsItem}>
<FontAwesomeIcon icon={faCalendarPlus} />{' '}
{createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}
</span>
</Tooltip>
<Tooltip
title={'Completion date'}
placement="top"
arrow
disableInteractive
>
<span className={styles.detailsItem}>
<FontAwesomeIcon icon={faCalendarCheck} />{' '}
{completedAt ? formatTimestamp(completedAt) : <>&mdash;</>}
</span>
</Tooltip>
{/* User signed date */}
{userCanSign ? (
<Tooltip
title={'Your signature date'}
placement="top"
arrow
disableInteractive
>
<span className={styles.detailsItem}>
<FontAwesomeIcon icon={faCalendar} />{' '}
{hexToNpub(usersPubkey) in parsedSignatureEvents ? (
parsedSignatureEvents[hexToNpub(usersPubkey)].created_at ? (
formatTimestamp(
fromUnixTimestamp(
parsedSignatureEvents[hexToNpub(usersPubkey)].created_at
)
)
) : (
<>&mdash;</>
)
) : (
<>&mdash;</>
)}
</span>
</Tooltip>
) : null}
<span className={styles.detailsItem}>
<FontAwesomeIcon icon={faEye} /> {signedStatus}
</span>
{ext.length > 0 ? (
<span className={styles.detailsItem}>
{ext.length > 1 ? (
<>
<FontAwesomeIcon icon={faFile} /> Multiple File Types
</>
) : (
getExtensionIconLabel(ext[0])
)}
</span>
) : (
<>
<FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
</>
)}
</div>
</div>
) : undefined
}

View File

@ -1,46 +0,0 @@
@import '../../styles/colors.scss';
.container {
border-radius: 4px;
background: $overlay-background-color;
padding: 15px;
display: flex;
flex-direction: column;
grid-gap: 25px;
font-size: 14px;
}
.section {
display: flex;
flex-direction: column;
grid-gap: 10px;
}
.users {
display: flex;
grid-gap: 10px;
}
.detailsItem {
transition: ease 0.2s;
color: rgba(0, 0, 0, 0.5);
font-size: 14px;
align-items: center;
border-radius: 4px;
padding: 5px;
display: flex;
align-items: center;
justify-content: start;
> :first-child {
padding: 5px;
margin-right: 10px;
}
&:hover {
background: $primary-main;
color: white;
}
}

View File

@ -1,78 +0,0 @@
import {
faFilePdf,
faFileExcel,
faFileWord,
faFilePowerpoint,
faFileZipper,
faFileCsv,
faFileLines,
faFileImage,
faFile,
IconDefinition
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
export const getExtensionIconLabel = (extension: string) => {
let icon: IconDefinition
switch (extension.toLowerCase()) {
case 'pdf':
icon = faFilePdf
break
case 'json':
icon = faFilePdf
break
case 'xlsx':
case 'xls':
case 'xlsb':
case 'xlsm':
icon = faFileExcel
break
case 'doc':
case 'docx':
icon = faFileWord
break
case 'ppt':
case 'pptx':
icon = faFilePowerpoint
break
case 'zip':
case '7z':
case 'rar':
case 'tar':
case 'gz':
icon = faFileZipper
break
case 'csv':
icon = faFileCsv
break
case 'txt':
icon = faFileLines
break
case 'png':
case 'jpg':
case 'jpeg':
case 'gif':
case 'svg':
case 'bmp':
case 'ico':
icon = faFileImage
break
default:
icon = faFile
return
}
return (
<>
<FontAwesomeIcon icon={icon} /> {extension.toUpperCase()}
</>
)
}

View File

@ -12,8 +12,7 @@ import {
getAuthToken, getAuthToken,
getVisitedLink, getVisitedLink,
saveAuthToken, saveAuthToken,
compareObjects, compareObjects
unixNow
} from '../utils' } from '../utils'
import { appPrivateRoutes } from '../routes' import { appPrivateRoutes } from '../routes'
import { SignedEvent } from '../types' import { SignedEvent } from '../types'
@ -55,7 +54,7 @@ export class AuthController {
}) })
// Nostr uses unix timestamps // Nostr uses unix timestamps
const timestamp = unixNow() const timestamp = Math.floor(Date.now() / 1000)
const { hostname } = window.location const { hostname } = window.location
const authEvent: EventTemplate = { const authEvent: EventTemplate = {

View File

@ -12,17 +12,10 @@ import {
import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types' import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types'
import { NostrController } from '.' import { NostrController } from '.'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { queryNip05, unixNow } from '../utils' import { queryNip05 } from '../utils'
import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk' import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk'
import { EventEmitter } from 'tseep' import { EventEmitter } from 'tseep'
import { localCache } from '../services' import { localCache } from '../services'
import {
findRelayListAndUpdateCache,
findRelayListInCache,
getDefaultRelaySet,
getUserRelaySet,
isOlderThanOneWeek
} from '../utils/relays.ts'
export class MetadataController extends EventEmitter { export class MetadataController extends EventEmitter {
private nostrController: NostrController private nostrController: NostrController
@ -134,8 +127,10 @@ export class MetadataController extends EventEmitter {
// If cached metadata is found, check its validity // If cached metadata is found, check its validity
if (cachedMetadataEvent) { if (cachedMetadataEvent) {
const oneWeekInMS = 7 * 24 * 60 * 60 * 1000 // Number of milliseconds in one week
// Check if the cached metadata is older than one week // Check if the cached metadata is older than one week
if (isOlderThanOneWeek(cachedMetadataEvent.cachedAt)) { if (Date.now() - cachedMetadataEvent.cachedAt > oneWeekInMS) {
// If older than one week, find the metadata from relays in background // If older than one week, find the metadata from relays in background
this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event) this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event)
@ -149,32 +144,100 @@ export class MetadataController extends EventEmitter {
return this.checkForMoreRecentMetadata(hexKey, null) return this.checkForMoreRecentMetadata(hexKey, null)
} }
/** public findRelayListMetadata = async (hexKey: string) => {
* Based on the hexKey of the current user, this method attempts to retrieve a relay set. let relayEvent: Event | null = null
* @func findRelayListInCache first checks if there is already an up-to-date
* relay list available in cache; if not -
* @func findRelayListAndUpdateCache checks if the relevant relay event is available from
* the purple pages relay;
* @func findRelayListAndUpdateCache will run again if the previous two calls return null and
* check if the relevant relay event can be obtained from 'most popular relays'
* If relay event is found, it will be saved in cache for future use
* @param hexKey of the current user
* @return RelaySet which will contain either relays extracted from the user Relay Event
* or a fallback RelaySet with Sigit's Relay
*/
public findRelayListMetadata = async (hexKey: string): Promise<RelaySet> => {
const relayEvent =
(await findRelayListInCache(hexKey)) ||
(await findRelayListAndUpdateCache(
[this.specialMetadataRelay],
hexKey
)) ||
(await findRelayListAndUpdateCache(
await this.nostrController.getMostPopularRelays(),
hexKey
))
return relayEvent ? getUserRelaySet(relayEvent.tags) : getDefaultRelaySet() // Attempt to retrieve the metadata event from the local cache
const cachedRelayListMetadataEvent =
await localCache.getUserRelayListMetadata(hexKey)
if (cachedRelayListMetadataEvent) {
const oneWeekInMS = 7 * 24 * 60 * 60 * 1000 // Number of milliseconds in one week
// Check if the cached event is not older than one week
if (Date.now() - cachedRelayListMetadataEvent.cachedAt < oneWeekInMS) {
relayEvent = cachedRelayListMetadataEvent.event
}
}
// define filter for relay list
const eventFilter: Filter = {
kinds: [kinds.RelayList],
authors: [hexKey]
}
const pool = new SimplePool()
// Try to get the relayList event from a special relay (wss://purplepag.es)
if (!relayEvent) {
relayEvent = await pool
.get([this.specialMetadataRelay], eventFilter)
.then((event) => {
if (event) {
// update the event in local cache
localCache.addUserRelayListMetadata(event)
}
return event
})
.catch((err) => {
console.error(err)
return null
})
}
if (!relayEvent) {
// If no valid relayList event is found from the special relay, get the most popular relays
const mostPopularRelays =
await this.nostrController.getMostPopularRelays()
// Query the most popular relays for relayList event
relayEvent = await pool
.get(mostPopularRelays, eventFilter)
.then((event) => {
if (event) {
// update the event in local cache
localCache.addUserRelayListMetadata(event)
}
return event
})
.catch((err) => {
console.error(err)
return null
})
}
if (relayEvent) {
const relaySet: RelaySet = {
read: [],
write: []
}
// a list of r tags with relay URIs and a read or write marker.
const relayTags = relayEvent.tags.filter((tag) => tag[0] === 'r')
// Relays marked as read / write are called READ / WRITE relays, respectively
relayTags.forEach((tag) => {
if (tag.length >= 3) {
const marker = tag[2]
if (marker === 'read') {
relaySet.read.push(tag[1])
} else if (marker === 'write') {
relaySet.write.push(tag[1])
}
}
// If the marker is omitted, the relay is used for both purposes
if (tag.length === 2) {
relaySet.read.push(tag[1])
relaySet.write.push(tag[1])
}
})
return relaySet
}
throw new Error('No relay list metadata found.')
} }
public extractProfileMetadataContent = (event: Event) => { public extractProfileMetadataContent = (event: Event) => {
@ -194,7 +257,7 @@ export class MetadataController extends EventEmitter {
let signedMetadataEvent = event let signedMetadataEvent = event
if (event.sig.length < 1) { if (event.sig.length < 1) {
const timestamp = unixNow() const timestamp = Math.floor(Date.now() / 1000)
// Metadata event to publish to the wss://purplepag.es relay // Metadata event to publish to the wss://purplepag.es relay
const newMetadataEvent: Event = { const newMetadataEvent: Event = {
@ -265,7 +328,7 @@ export class MetadataController extends EventEmitter {
// initialize job request // initialize job request
const jobEventTemplate: EventTemplate = { const jobEventTemplate: EventTemplate = {
content: '', content: '',
created_at: unixNow(), created_at: Math.round(Date.now() / 1000),
kind: 68001, kind: 68001,
tags: [ tags: [
['i', `${created_at * 1000}`], ['i', `${created_at * 1000}`],

View File

@ -42,10 +42,8 @@ import {
import { import {
compareObjects, compareObjects,
getNsecBunkerDelegatedKey, getNsecBunkerDelegatedKey,
unixNow,
verifySignedEvent verifySignedEvent
} from '../utils' } from '../utils'
import { getDefaultRelayMap } from '../utils/relays.ts'
export class NostrController extends EventEmitter { export class NostrController extends EventEmitter {
private static instance: NostrController private static instance: NostrController
@ -245,7 +243,7 @@ export class NostrController extends EventEmitter {
if (!firstSuccessfulPublish) { if (!firstSuccessfulPublish) {
// If no publish was successful, collect the reasons for failures // If no publish was successful, collect the reasons for failures
const failedPublishes: unknown[] = [] const failedPublishes: any[] = []
const fallbackRejectionReason = const fallbackRejectionReason =
'Attempt to publish an event has been rejected with unknown reason.' 'Attempt to publish an event has been rejected with unknown reason.'
@ -505,9 +503,7 @@ export class NostrController extends EventEmitter {
} else if (loginMethod === LoginMethods.extension) { } else if (loginMethod === LoginMethods.extension) {
const nostr = this.getNostrObject() const nostr = this.getNostrObject()
return (await nostr return (await nostr.signEvent(event as NostrEvent).catch((err: any) => {
.signEvent(event as NostrEvent)
.catch((err: unknown) => {
console.log('Error while signing event: ', err) console.log('Error while signing event: ', err)
throw err throw err
@ -628,12 +624,8 @@ export class NostrController extends EventEmitter {
*/ */
capturePublicKey = async (): Promise<string> => { capturePublicKey = async (): Promise<string> => {
const nostr = this.getNostrObject() const nostr = this.getNostrObject()
const pubKey = await nostr.getPublicKey().catch((err: unknown) => { const pubKey = await nostr.getPublicKey().catch((err: any) => {
if (err instanceof Error) {
return Promise.reject(err.message) return Promise.reject(err.message)
} else {
return Promise.reject(JSON.stringify(err))
}
}) })
if (!pubKey) { if (!pubKey) {
@ -658,7 +650,7 @@ export class NostrController extends EventEmitter {
*/ */
getRelayMap = async ( getRelayMap = async (
npub: string npub: string
): Promise<{ map: RelayMap; mapUpdated?: number }> => { ): Promise<{ map: RelayMap; mapUpdated: number }> => {
const mostPopularRelays = await this.getMostPopularRelays() const mostPopularRelays = await this.getMostPopularRelays()
const pool = new SimplePool() const pool = new SimplePool()
@ -699,7 +691,7 @@ export class NostrController extends EventEmitter {
return Promise.resolve({ map: relaysMap, mapUpdated: event.created_at }) return Promise.resolve({ map: relaysMap, mapUpdated: event.created_at })
} else { } else {
return Promise.resolve({ map: getDefaultRelayMap() }) return Promise.reject('User relays were not found.')
} }
} }
@ -715,7 +707,7 @@ export class NostrController extends EventEmitter {
npub: string, npub: string,
extraRelaysToPublish?: string[] extraRelaysToPublish?: string[]
): Promise<string> => { ): Promise<string> => {
const timestamp = unixNow() const timestamp = Math.floor(Date.now() / 1000)
const relayURIs = Object.keys(relayMap) const relayURIs = Object.keys(relayMap)
// More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md // More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
@ -817,7 +809,7 @@ export class NostrController extends EventEmitter {
// initialize job request // initialize job request
const jobEventTemplate: EventTemplate = { const jobEventTemplate: EventTemplate = {
content: '', content: '',
created_at: unixNow(), created_at: Math.round(Date.now() / 1000),
kind: 68001, kind: 68001,
tags: [ tags: [
['i', `${JSON.stringify(relayURIs)}`], ['i', `${JSON.stringify(relayURIs)}`],

View File

@ -1,269 +0,0 @@
import { useEffect, useState } from 'react'
import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
import { Mark } from '../types/mark'
import {
fromUnixTimestamp,
hexToNpub,
parseNostrEvent,
parseCreateSignatureEventContent,
SigitMetaParseError,
SigitStatus,
SignStatus
} from '../utils'
import { toast } from 'react-toastify'
import { verifyEvent } from 'nostr-tools'
import { Event } from 'nostr-tools'
import store from '../store/store'
import { AuthState } from '../store/auth/types'
import { NostrController } from '../controllers'
/**
* Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,
* and `Event` (event's fields are made optional and pubkey and created_at replaced with our versions)
*/
export interface FlatMeta
extends Meta,
CreateSignatureEventContent,
Partial<Omit<Event, 'pubkey' | 'created_at'>> {
// Remove pubkey and use submittedBy as `npub1${string}`
submittedBy?: `npub1${string}`
// Remove created_at and replace with createdAt
createdAt?: number
// Validated create signature event
isValid: boolean
// Decryption
encryptionKey: string | null
// Parsed Document Signatures
parsedSignatureEvents: { [signer: `npub1${string}`]: Event }
// Calculated completion time
completedAt?: number
// Calculated status fields
signedStatus: SigitStatus
signersStatus: {
[signer: `npub1${string}`]: SignStatus
}
}
/**
* Custom use hook for parsing the Sigit Meta
* @param meta Sigit Meta
* @returns flattened Meta object with calculated signed status
*/
export const useSigitMeta = (meta: Meta): FlatMeta => {
const [isValid, setIsValid] = useState(false)
const [kind, setKind] = useState<number>()
const [tags, setTags] = useState<string[][]>()
const [createdAt, setCreatedAt] = useState<number>()
const [submittedBy, setSubmittedBy] = useState<`npub1${string}`>() // submittedBy, pubkey from nostr event
const [id, setId] = useState<string>()
const [sig, setSig] = useState<string>()
const [signers, setSigners] = useState<`npub1${string}`[]>([])
const [viewers, setViewers] = useState<`npub1${string}`[]>([])
const [fileHashes, setFileHashes] = useState<{
[user: `npub1${string}`]: string
}>({})
const [markConfig, setMarkConfig] = useState<Mark[]>([])
const [title, setTitle] = useState<string>('')
const [zipUrl, setZipUrl] = useState<string>('')
const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
[signer: `npub1${string}`]: Event
}>({})
const [completedAt, setCompletedAt] = useState<number>()
const [signedStatus, setSignedStatus] = useState<SigitStatus>(
SigitStatus.Partial
)
const [signersStatus, setSignersStatus] = useState<{
[signer: `npub1${string}`]: SignStatus
}>({})
const [encryptionKey, setEncryptionKey] = useState<string | null>(null)
useEffect(() => {
if (!meta) return
;(async function () {
try {
const createSignatureEvent = await parseNostrEvent(meta.createSignature)
const { kind, tags, created_at, pubkey, id, sig, content } =
createSignatureEvent
setIsValid(verifyEvent(createSignatureEvent))
setKind(kind)
setTags(tags)
// created_at in nostr events are stored in seconds
setCreatedAt(fromUnixTimestamp(created_at))
setSubmittedBy(pubkey as `npub1${string}`)
setId(id)
setSig(sig)
const { title, signers, viewers, fileHashes, markConfig, zipUrl } =
await parseCreateSignatureEventContent(content)
setTitle(title)
setSigners(signers)
setViewers(viewers)
setFileHashes(fileHashes)
setMarkConfig(markConfig)
setZipUrl(zipUrl)
if (meta.keys) {
const { sender, keys } = meta.keys
// Retrieve the user's public key from the state
const usersPubkey = (store.getState().auth as AuthState).usersPubkey!
const usersNpub = hexToNpub(usersPubkey)
// Check if the user's public key is in the keys object
if (usersNpub in keys) {
// Instantiate the NostrController to decrypt the encryption key
const nostrController = NostrController.getInstance()
const decrypted = await nostrController
.nip04Decrypt(sender, keys[usersNpub])
.catch((err) => {
console.log(
'An error occurred in decrypting encryption key',
err
)
return null
})
setEncryptionKey(decrypted)
}
}
// Temp. map to hold events and signers
const parsedSignatureEventsMap = new Map<`npub1${string}`, Event>()
const signerStatusMap = new Map<`npub1${string}`, SignStatus>()
const getPrevSignerSig = (npub: `npub1${string}`) => {
if (signers[0] === npub) {
return sig
}
// find the index of signer
const currentSignerIndex = signers.findIndex(
(signer) => signer === npub
)
// return if could not found user in signer's list
if (currentSignerIndex === -1) return
// find prev signer
const prevSigner = signers[currentSignerIndex - 1]
// get the signature of prev signer
return parsedSignatureEventsMap.get(prevSigner)?.sig
}
for (const npub in meta.docSignatures) {
try {
// Parse each signature event
const event = await parseNostrEvent(
meta.docSignatures[npub as `npub1${string}`]
)
// Save events to a map, to save all at once outside loop
// We need the object to find completedAt
// Avoided using parsedSignatureEvents due to useEffect deps
parsedSignatureEventsMap.set(npub as `npub1${string}`, event)
} catch (error) {
signerStatusMap.set(npub as `npub1${string}`, SignStatus.Invalid)
}
}
parsedSignatureEventsMap.forEach((event, npub) => {
const isValidSignature = verifyEvent(event)
if (isValidSignature) {
// get the signature of prev signer from the content of current signers signedEvent
const prevSignersSig = getPrevSignerSig(npub)
try {
const obj: SignedEventContent = JSON.parse(event.content)
if (
obj.prevSig &&
prevSignersSig &&
obj.prevSig === prevSignersSig
) {
signerStatusMap.set(npub as `npub1${string}`, SignStatus.Signed)
}
} catch (error) {
signerStatusMap.set(npub as `npub1${string}`, SignStatus.Invalid)
}
}
})
signers
.filter((s) => !parsedSignatureEventsMap.has(s))
.forEach((s) => signerStatusMap.set(s, SignStatus.Pending))
// Get the first signer that hasn't signed
const nextSigner = signers.find((s) => !parsedSignatureEventsMap.has(s))
if (nextSigner) {
signerStatusMap.set(nextSigner, SignStatus.Awaiting)
}
setSignersStatus(Object.fromEntries(signerStatusMap))
setParsedSignatureEvents(Object.fromEntries(parsedSignatureEventsMap))
const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
const isCompletelySigned = signers.every((signer) =>
signedBy.includes(signer)
)
setSignedStatus(
isCompletelySigned ? SigitStatus.Complete : SigitStatus.Partial
)
// Check if all signers signed
if (isCompletelySigned) {
setCompletedAt(
fromUnixTimestamp(
signedBy.reduce((p, c) => {
return Math.max(
p,
parsedSignatureEventsMap.get(c)?.created_at || 0
)
}, 0)
)
)
}
} catch (error) {
if (error instanceof SigitMetaParseError) {
toast.error(error.message)
}
console.error(error)
}
})()
}, [meta])
return {
modifiedAt: meta?.modifiedAt,
createSignature: meta?.createSignature,
docSignatures: meta?.docSignatures,
keys: meta?.keys,
isValid,
kind,
tags,
createdAt,
submittedBy,
id,
sig,
signers,
viewers,
fileHashes,
markConfig,
title,
zipUrl,
parsedSignatureEvents,
completedAt,
signedStatus,
signersStatus,
encryptionKey
}
}

View File

@ -1,70 +0,0 @@
import { useEffect, useState } from 'react'
import { ProfileMetadata } from '../types'
import { MetadataController } from '../controllers'
import { npubToHex } from '../utils'
import { Event, kinds } from 'nostr-tools'
/**
* Extracts profiles from metadata events
* @param pubkeys Array of npubs to check
* @returns ProfileMetadata
*/
export const useSigitProfiles = (
pubkeys: `npub1${string}`[]
): { [key: string]: ProfileMetadata } => {
const [profileMetadata, setProfileMetadata] = useState<{
[key: string]: ProfileMetadata
}>({})
useEffect(() => {
if (pubkeys.length) {
const metadataController = new MetadataController()
// Remove duplicate keys
const users = new Set<string>([...pubkeys])
const handleMetadataEvent = (key: string) => (event: Event) => {
const metadataContent =
metadataController.extractProfileMetadataContent(event)
if (metadataContent) {
setProfileMetadata((prev) => ({
...prev,
[key]: metadataContent
}))
}
}
users.forEach((user) => {
const hexKey = npubToHex(user)
if (hexKey && !(hexKey in profileMetadata)) {
metadataController.on(hexKey, (kind: number, event: Event) => {
if (kind === kinds.Metadata) {
handleMetadataEvent(hexKey)(event)
}
})
metadataController
.findMetadata(hexKey)
.then((metadataEvent) => {
if (metadataEvent) handleMetadataEvent(hexKey)(metadataEvent)
})
.catch((err) => {
console.error(
`error occurred in finding metadata for: ${user}`,
err
)
})
}
})
return () => {
users.forEach((key) => {
metadataController.off(key, handleMetadataEvent(key))
})
}
}
}, [pubkeys, profileMetadata])
return profileMetadata
}

View File

@ -101,15 +101,6 @@ button:disabled {
color: inherit !important; color: inherit !important;
} }
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.profile-image { .profile-image {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -120,9 +111,7 @@ button:disabled {
/* Fonts */ /* Fonts */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: src: local('Roboto Medium'), local('Roboto-Medium'),
local('Roboto Medium'),
local('Roboto-Medium'),
url('assets/fonts/roboto-medium.woff2') format('woff2'), url('assets/fonts/roboto-medium.woff2') format('woff2'),
url('assets/fonts/roboto-medium.woff') format('woff'); url('assets/fonts/roboto-medium.woff') format('woff');
font-weight: 500; font-weight: 500;
@ -132,9 +121,7 @@ button:disabled {
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: src: local('Roboto Light'), local('Roboto-Light'),
local('Roboto Light'),
local('Roboto-Light'),
url('assets/fonts/roboto-light.woff2') format('woff2'), url('assets/fonts/roboto-light.woff2') format('woff2'),
url('assets/fonts/roboto-light.woff') format('woff'); url('assets/fonts/roboto-light.woff') format('woff');
font-weight: 300; font-weight: 300;
@ -144,9 +131,7 @@ button:disabled {
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: src: local('Roboto Bold'), local('Roboto-Bold'),
local('Roboto Bold'),
local('Roboto-Bold'),
url('assets/fonts/roboto-bold.woff2') format('woff2'), url('assets/fonts/roboto-bold.woff2') format('woff2'),
url('assets/fonts/roboto-bold.woff') format('woff'); url('assets/fonts/roboto-bold.woff') format('woff');
font-weight: bold; font-weight: bold;
@ -156,9 +141,7 @@ button:disabled {
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: src: local('Roboto'), local('Roboto-Regular'),
local('Roboto'),
local('Roboto-Regular'),
url('assets/fonts/roboto-regular.woff2') format('woff2'), url('assets/fonts/roboto-regular.woff2') format('woff2'),
url('assets/fonts/roboto-regular.woff') format('woff'); url('assets/fonts/roboto-regular.woff') format('woff');
font-weight: normal; font-weight: normal;

View File

@ -136,7 +136,7 @@ export const MainLayout = () => {
} }
setIsLoading(true) setIsLoading(true)
setLoadingSpinnerDesc(`Loading SIGit history...`) setLoadingSpinnerDesc(`Loading SIGit History`)
getUsersAppData() getUsersAppData()
.then((appData) => { .then((appData) => {
if (appData) { if (appData) {
@ -145,7 +145,7 @@ export const MainLayout = () => {
}) })
.finally(() => setIsLoading(false)) .finally(() => setIsLoading(false))
} }
}, [authState, dispatch]) }, [authState])
if (isLoading) return <LoadingSpinner desc={loadingSpinnerDesc} /> if (isLoading) return <LoadingSpinner desc={loadingSpinnerDesc} />

View File

@ -5,7 +5,7 @@ $default-modal-padding: 15px 25px;
.modal { .modal {
position: absolute; position: absolute;
top: 0; top: 0;
left: calc(50% - 10px); left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
background-color: $overlay-background-color; background-color: $overlay-background-color;
@ -16,8 +16,6 @@ $default-modal-padding: 15px 25px;
flex-direction: column; flex-direction: column;
border-radius: 4px; border-radius: 4px;
margin: 25px 10px;
} }
.header { .header {

View File

@ -50,7 +50,7 @@ import {
getHash, getHash,
hexToNpub, hexToNpub,
isOnline, isOnline,
unixNow, now,
npubToHex, npubToHex,
queryNip05, queryNip05,
sendNotification, sendNotification,
@ -68,7 +68,7 @@ import { Mark } from '../../types/mark.ts'
export const CreatePage = () => { export const CreatePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation() const location = useLocation()
const { uploadedFiles } = location.state || {} const { uploadedFile } = location.state || {}
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('') const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@ -127,17 +127,17 @@ export const CreatePage = () => {
}) })
} }
}) })
}, [metadata, users]) }, [])
// Set up event listener for authentication event // Set up event listener for authentication event
nostrController.on('nsecbunker-auth', (url) => { nostrController.on('nsecbunker-auth', (url) => {
setAuthUrl(url) setAuthUrl(url)
}) })
useEffect(() => { useEffect(() => {
if (uploadedFiles) { if (uploadedFile) {
setSelectedFiles([...uploadedFiles]) setSelectedFiles([uploadedFile])
} }
}, [uploadedFiles]) }, [uploadedFile])
useEffect(() => { useEffect(() => {
if (usersPubkey) { if (usersPubkey) {
@ -309,16 +309,14 @@ export const CreatePage = () => {
} }
// Handle errors during file arrayBuffer conversion // Handle errors during file arrayBuffer conversion
const handleFileError = (file: File) => (err: unknown) => { const handleFileError = (file: File) => (err: any) => {
console.log( console.log(
`Error while getting arrayBuffer of file ${file.name} :>> `, `Error while getting arrayBuffer of file ${file.name} :>> `,
err err
) )
if (err instanceof Error) {
toast.error( toast.error(
err.message || `Error while getting arrayBuffer of file ${file.name}` err.message || `Error while getting arrayBuffer of file ${file.name}`
) )
}
return null return null
} }
@ -340,6 +338,8 @@ export const CreatePage = () => {
fileHashes[file.name] = hash fileHashes[file.name] = hash
} }
console.log('file hashes: ', fileHashes)
return fileHashes return fileHashes
} }
@ -371,12 +371,10 @@ export const CreatePage = () => {
} }
// Handle errors during zip file generation // Handle errors during zip file generation
const handleZipError = (err: unknown) => { const handleZipError = (err: any) => {
console.log('Error in zip:>> ', err) console.log('Error in zip:>> ', err)
setIsLoading(false) setIsLoading(false)
if (err instanceof Error) {
toast.error(err.message || 'Error occurred in generating zip file') toast.error(err.message || 'Error occurred in generating zip file')
}
return null return null
} }
@ -408,6 +406,7 @@ export const CreatePage = () => {
encryptionKey: string encryptionKey: string
): Promise<File | null> => { ): Promise<File | null> => {
// Get the current timestamp in seconds // Get the current timestamp in seconds
const unixNow = now()
const blob = new Blob([encryptedArrayBuffer]) const blob = new Blob([encryptedArrayBuffer])
// Create a File object with the Blob data // Create a File object with the Blob data
const file = new File([blob], `compressed.sigit`, { const file = new File([blob], `compressed.sigit`, {
@ -442,12 +441,10 @@ export const CreatePage = () => {
} }
// Handle errors during file upload // Handle errors during file upload
const handleUploadError = (err: unknown) => { const handleUploadError = (err: any) => {
console.log('Error in upload:>> ', err) console.log('Error in upload:>> ', err)
setIsLoading(false) setIsLoading(false)
if (err instanceof Error) {
toast.error(err.message || 'Error occurred in uploading file') toast.error(err.message || 'Error occurred in uploading file')
}
return null return null
} }
@ -455,9 +452,10 @@ export const CreatePage = () => {
const uploadFile = async ( const uploadFile = async (
arrayBuffer: ArrayBuffer arrayBuffer: ArrayBuffer
): Promise<string | null> => { ): Promise<string | null> => {
const unixNow = now()
const blob = new Blob([arrayBuffer]) const blob = new Blob([arrayBuffer])
// Create a File object with the Blob data // Create a File object with the Blob data
const file = new File([blob], `compressed-${unixNow()}.sigit`, { const file = new File([blob], `compressed-${unixNow}.sigit`, {
type: 'application/sigit' type: 'application/sigit'
}) })
@ -479,13 +477,9 @@ export const CreatePage = () => {
encryptionKey encryptionKey
) )
if (!finalZipFile) { if (!finalZipFile) return
setIsLoading(false)
return
}
saveAs(finalZipFile, `request-${unixNow()}.sigit.zip`) saveAs(finalZipFile, 'request.sigit.zip')
setIsLoading(false)
} }
const generateFilesZip = async (): Promise<ArrayBuffer | null> => { const generateFilesZip = async (): Promise<ArrayBuffer | null> => {
@ -614,7 +608,7 @@ export const CreatePage = () => {
const meta: Meta = { const meta: Meta = {
createSignature, createSignature,
keys, keys,
modifiedAt: unixNow(), modifiedAt: now(),
docSignatures: {} docSignatures: {}
} }
@ -653,7 +647,7 @@ export const CreatePage = () => {
const meta: Meta = { const meta: Meta = {
createSignature, createSignature,
modifiedAt: unixNow(), modifiedAt: now(),
docSignatures: {} docSignatures: {}
} }
@ -668,10 +662,7 @@ export const CreatePage = () => {
} }
const arrayBuffer = await generateZipFile(zip) const arrayBuffer = await generateZipFile(zip)
if (!arrayBuffer) { if (!arrayBuffer) return
setIsLoading(false)
return
}
setLoadingSpinnerDesc('Encrypting zip file') setLoadingSpinnerDesc('Encrypting zip file')
const encryptedArrayBuffer = await encryptZipFile( const encryptedArrayBuffer = await encryptZipFile(
@ -979,7 +970,7 @@ const SignerRow = ({
item: () => { item: () => {
return { id: user.pubkey, index } return { id: user.pubkey, index }
}, },
collect: (monitor) => ({ collect: (monitor: any) => ({
isDragging: monitor.isDragging() isDragging: monitor.isDragging()
}) })
}) })

View File

@ -1,92 +1,51 @@
import { Button, TextField } from '@mui/material' import { CalendarMonth, Description, Upload } from '@mui/icons-material'
import { Box, Button, Tooltip, Typography } from '@mui/material'
import JSZip from 'jszip' import JSZip from 'jszip'
import { useCallback, useEffect, useState } from 'react' import { Event, kinds, verifyEvent } from 'nostr-tools'
import { useNavigate, useSearchParams } from 'react-router-dom' import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { UserAvatar } from '../../components/UserAvatar'
import { MetadataController } from '../../controllers'
import { useAppSelector } from '../../hooks' import { useAppSelector } from '../../hooks'
import { appPrivateRoutes, appPublicRoutes } from '../../routes' import { appPrivateRoutes, appPublicRoutes } from '../../routes'
import { Meta } from '../../types' import { CreateSignatureEventContent, Meta, ProfileMetadata } from '../../types'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import { Select } from '../../components/Select'
import { DisplaySigit } from '../../components/DisplaySigit'
import { useDropzone } from 'react-dropzone'
import { Container } from '../../components/Container'
import styles from './style.module.scss'
import { import {
extractSigitCardDisplayInfo, formatTimestamp,
SigitCardDisplayInfo, hexToNpub,
SigitStatus npubToHex,
parseJson,
shorten
} from '../../utils' } from '../../utils'
import styles from './style.module.scss'
// Unsupported Filter options are commented import { Container } from '../../components/Container'
const FILTERS = [
'Show all',
// 'Drafts',
'In-progress',
'Completed'
// 'Archived'
] as const
type Filter = (typeof FILTERS)[number]
const SORT_BY = [
{
label: 'Newest',
value: 'desc'
},
{ label: 'Oldest', value: 'asc' }
] as const
type Sort = (typeof SORT_BY)[number]['value']
export const HomePage = () => { export const HomePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams() const fileInputRef = useRef<HTMLInputElement>(null)
const q = searchParams.get('q') ?? '' const [sigits, setSigits] = useState<Meta[]>([])
const [profiles, setProfiles] = useState<{ [key: string]: ProfileMetadata }>(
useEffect(() => { {}
const searchInput = document.getElementById('q') as HTMLInputElement | null )
if (searchInput) {
searchInput.value = q
}
}, [q])
const [sigits, setSigits] = useState<{ [key: string]: Meta }>({})
const [parsedSigits, setParsedSigits] = useState<{
[key: string]: SigitCardDisplayInfo
}>({})
const usersAppData = useAppSelector((state) => state.userAppData) const usersAppData = useAppSelector((state) => state.userAppData)
useEffect(() => { useEffect(() => {
if (usersAppData) { if (usersAppData) {
const getSigitInfo = async () => { setSigits(Object.values(usersAppData.sigits))
const parsedSigits: { [key: string]: SigitCardDisplayInfo } = {}
for (const key in usersAppData.sigits) {
if (Object.prototype.hasOwnProperty.call(usersAppData.sigits, key)) {
const sigitInfo = await extractSigitCardDisplayInfo(
usersAppData.sigits[key]
)
if (sigitInfo) {
parsedSigits[key] = sigitInfo
}
}
}
setParsedSigits({
...parsedSigits
})
}
setSigits(usersAppData.sigits)
getSigitInfo()
} }
}, [usersAppData]) }, [usersAppData])
const onDrop = useCallback( const handleUploadClick = () => {
async (acceptedFiles: File[]) => { if (fileInputRef.current) {
// When uploading single file check if it's .sigit.zip fileInputRef.current.click()
if (acceptedFiles.length === 1) { }
const file = acceptedFiles[0] }
const handleFileChange = async (
event: React.ChangeEvent<HTMLInputElement>
) => {
const file = event.target.files?.[0]
if (file) {
// Check if the file extension is .sigit.zip // Check if the file extension is .sigit.zip
const fileName = file.name const fileName = file.name
const fileExtension = fileName.slice(-10) // ".sigit.zip" has 10 characters const fileExtension = fileName.slice(-10) // ".sigit.zip" has 10 characters
@ -113,155 +72,313 @@ export const HomePage = () => {
}) })
} }
toast.error('Invalid SiGit zip file') toast.error('Invalid zip file')
return return
} }
}
// navigate to create page // navigate to create page
navigate(appPrivateRoutes.create, { navigate(appPrivateRoutes.create, { state: { uploadedFile: file } })
state: { uploadedFiles: acceptedFiles } }
}) }
},
[navigate]
)
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
onDrop,
noClick: true
})
const [filter, setFilter] = useState<Filter>('Show all')
const [sort, setSort] = useState<Sort>('desc')
return ( return (
<div {...getRootProps()} tabIndex={-1}>
<Container className={styles.container}> <Container className={styles.container}>
<div className={styles.header}> <Box className={styles.header}>
<div className={styles.filters}> <Typography variant="h3" className={styles.title}>
<Select Sigits
name={'filter-select'} </Typography>
value={filter} {/* This is for desktop view */}
setValue={setFilter} <Box
options={FILTERS.map((f) => { className={styles.actionButtons}
return { sx={{
label: f, display: {
value: f xs: 'none',
md: 'flex'
} }
})}
/>
<Select
name={'sort-select'}
value={sort}
setValue={setSort}
options={SORT_BY.map((s) => {
return { ...s }
})}
/>
</div>
<div className={styles.actionButtons}>
<form
className={styles.search}
onSubmit={(e) => {
e.preventDefault()
const searchInput = e.currentTarget.elements.namedItem(
'q'
) as HTMLInputElement
searchParams.set('q', searchInput.value)
setSearchParams(searchParams)
}} }}
> >
<TextField <input
id="q" type="file"
name="q" ref={fileInputRef}
placeholder="Search" style={{ display: 'none' }}
size="small" onChange={handleFileChange}
type="search"
defaultValue={q}
onChange={(e) => {
// Handle the case when users click native search input's clear or x
if (e.currentTarget.value === '') {
searchParams.delete('q')
setSearchParams(searchParams)
}
}}
sx={{
width: '100%',
fontSize: '16px',
borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
'& .MuiInputBase-root': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0
},
'& .MuiInputBase-input': {
padding: '7px 14px'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
}
}}
/> />
<Button <Button
type="submit" variant="outlined"
sx={{ startIcon={<Upload />}
minWidth: '44px', onClick={handleUploadClick}
padding: '11.5px 12px',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}}
variant={'contained'}
aria-label="submit search"
> >
<FontAwesomeIcon icon={faSearch} /> Upload
</Button> </Button>
</form> </Box>
</div> {/* This is for mobile view */}
</div> <Box
<button className={styles.actionButtons}
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`} sx={{
tabIndex={0} display: {
onClick={open} xs: 'flex',
type="button" md: 'none'
aria-label="upload files"
>
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here ...</p>
) : (
<p>Click or drag files to upload!</p>
)}
</button>
<div className={styles.submissions}>
{Object.keys(parsedSigits)
.filter((s) => {
const { title, signedStatus } = parsedSigits[s]
const isMatch = title?.toLowerCase().includes(q.toLowerCase())
switch (filter) {
case 'Completed':
return signedStatus === SigitStatus.Complete && isMatch
case 'In-progress':
return signedStatus === SigitStatus.Partial && isMatch
case 'Show all':
return isMatch
default:
console.error('Filter case not handled.')
} }
}) }}
.sort((a, b) => { >
const x = parsedSigits[a].createdAt ?? 0 <Tooltip title="Upload" arrow>
const y = parsedSigits[b].createdAt ?? 0 <Button variant="outlined" onClick={handleUploadClick}>
return sort === 'desc' ? y - x : x - y <Upload />
}) </Button>
.map((key) => ( </Tooltip>
</Box>
</Box>
<Box className={styles.submissions}>
{sigits.map((sigit, index) => (
<DisplaySigit <DisplaySigit
key={`sigit-${key}`} key={`sigit-${index}`}
parsedMeta={parsedSigits[key]} meta={sigit}
meta={sigits[key]} profiles={profiles}
setProfiles={setProfiles}
/> />
))} ))}
</div> </Box>
</Container> </Container>
</div> )
}
type SigitProps = {
meta: Meta
profiles: { [key: string]: ProfileMetadata }
setProfiles: Dispatch<SetStateAction<{ [key: string]: ProfileMetadata }>>
}
enum SignedStatus {
Partial = 'Partially Signed',
Complete = 'Completely Signed'
}
const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
const navigate = useNavigate()
const [title, setTitle] = useState<string>()
const [createdAt, setCreatedAt] = useState('')
const [submittedBy, setSubmittedBy] = useState<string>()
const [signers, setSigners] = useState<`npub1${string}`[]>([])
const [signedStatus, setSignedStatus] = useState<SignedStatus>(
SignedStatus.Partial
)
useEffect(() => {
const extractInfo = async () => {
const createSignatureEvent = await parseJson<Event>(
meta.createSignature
).catch((err) => {
console.log('err in parsing the createSignature event:>> ', err)
toast.error(
err.message || 'error occurred in parsing the create signature event'
)
return null
})
if (!createSignatureEvent) return
// created_at in nostr events are stored in seconds
// convert it to ms before formatting
setCreatedAt(formatTimestamp(createSignatureEvent.created_at * 1000))
const createSignatureContent =
await parseJson<CreateSignatureEventContent>(
createSignatureEvent.content
).catch((err) => {
console.log(
`err in parsing the createSignature event's content :>> `,
err
)
return null
})
if (!createSignatureContent) return
setTitle(createSignatureContent.title)
setSubmittedBy(createSignatureEvent.pubkey)
setSigners(createSignatureContent.signers)
const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
const isCompletelySigned = createSignatureContent.signers.every(
(signer) => signedBy.includes(signer)
)
if (isCompletelySigned) {
setSignedStatus(SignedStatus.Complete)
}
}
extractInfo()
}, [meta])
useEffect(() => {
const hexKeys: string[] = []
if (submittedBy) {
hexKeys.push(npubToHex(submittedBy)!)
}
hexKeys.push(...signers.map((signer) => npubToHex(signer)!))
const metadataController = new MetadataController()
hexKeys.forEach((key) => {
if (!(key in profiles)) {
const handleMetadataEvent = (event: Event) => {
const metadataContent =
metadataController.extractProfileMetadataContent(event)
if (metadataContent)
setProfiles((prev) => ({
...prev,
[key]: metadataContent
}))
}
metadataController.on(key, (kind: number, event: Event) => {
if (kind === kinds.Metadata) {
handleMetadataEvent(event)
}
})
metadataController
.findMetadata(key)
.then((metadataEvent) => {
if (metadataEvent) handleMetadataEvent(metadataEvent)
})
.catch((err) => {
console.error(`error occurred in finding metadata for: ${key}`, err)
})
}
})
}, [submittedBy, signers])
const handleNavigation = () => {
if (signedStatus === SignedStatus.Complete) {
navigate(appPublicRoutes.verify, { state: { meta } })
} else {
navigate(appPrivateRoutes.sign, { state: { meta } })
}
}
return (
<Box
className={styles.item}
sx={{
flexDirection: {
xs: 'column',
md: 'row'
}
}}
onClick={handleNavigation}
>
<Box
className={styles.titleBox}
sx={{
borderBottomLeftRadius: {
xs: 'initial',
md: 'inherit'
},
borderTopRightRadius: {
xs: 'inherit',
md: 'initial'
}
}}
>
<Typography variant="body1" className={styles.title}>
<Description />
{title}
</Typography>
{submittedBy &&
(function () {
const profile = profiles[submittedBy]
return (
<UserAvatar
pubkey={submittedBy}
name={
profile?.display_name ||
profile?.name ||
shorten(hexToNpub(submittedBy))
}
image={profile?.picture}
/>
)
})()}
<Typography variant="body2" className={styles.date}>
<CalendarMonth />
{createdAt}
</Typography>
</Box>
<Box className={styles.signers}>
{signers.map((signer) => {
const pubkey = npubToHex(signer)!
const profile = profiles[pubkey]
return (
<DisplaySigner
key={signer}
meta={meta}
profile={profile}
pubkey={pubkey}
/>
)
})}
</Box>
</Box>
)
}
enum SignStatus {
Signed = 'Signed',
Pending = 'Pending',
Invalid = 'Invalid Sign'
}
type DisplaySignerProps = {
meta: Meta
profile: ProfileMetadata
pubkey: string
}
const DisplaySigner = ({ meta, profile, pubkey }: DisplaySignerProps) => {
const [signStatus, setSignedStatus] = useState<SignStatus>()
useEffect(() => {
const updateSignStatus = async () => {
const npub = hexToNpub(pubkey)
if (npub in meta.docSignatures) {
parseJson<Event>(meta.docSignatures[npub])
.then((event) => {
const isValidSignature = verifyEvent(event)
if (isValidSignature) {
setSignedStatus(SignStatus.Signed)
} else {
setSignedStatus(SignStatus.Invalid)
}
})
.catch((err) => {
console.log(`err in parsing the docSignatures for ${npub}:>> `, err)
setSignedStatus(SignStatus.Invalid)
})
} else {
setSignedStatus(SignStatus.Pending)
}
}
updateSignStatus()
}, [meta, pubkey])
return (
<Box className={styles.signerItem}>
<Typography variant="button" className={styles.status}>
{signStatus}
</Typography>
<UserAvatar
pubkey={pubkey}
name={
profile?.display_name ||
profile?.name ||
shorten(hexToNpub(pubkey), 5)
}
image={profile?.picture}
/>
</Box>
) )
} }

View File

@ -1,101 +1,94 @@
@import '../../styles/colors.scss';
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 25px; gap: 25px;
container-type: inline-size;
} }
.header { .header {
display: flex; display: flex;
gap: 10px;
@container (width < 610px) { .title {
flex-direction: column-reverse; color: var(--mui-palette-primary-light);
} flex: 1;
}
.filters {
display: flex;
gap: 10px;
} }
.actionButtons { .actionButtons {
display: flex;
justify-content: end;
align-items: center;
gap: 10px;
padding: 1.5px 0;
flex-grow: 1;
}
.search {
display: flex;
align-items: center;
justify-content: end;
height: 34px;
overflow: hidden;
border-radius: 4px;
outline: solid 1px #dddddd;
background: white;
width: 100%;
@container (width >= 610px) {
max-width: 246px;
}
&:focus-within {
outline-color: $primary-main;
}
}
.dropzone {
position: relative;
font-size: 16px;
background-color: $overlay-background-color;
height: 250px;
color: rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 10px;
&::before {
content: '';
position: absolute;
transition:
background-color ease 0.2s,
inset ease 0.2s;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
border: dashed 3px rgba(0, 0, 0, 0.1);
inset: 15px;
} }
&:focus,
&.isDragActive,
&:hover {
&::before {
inset: 10px;
background: rgba(0, 0, 0, 0.15);
}
}
// Override button styles
padding: 0;
border: none;
outline: none;
letter-spacing: 1px;
font-weight: 500;
font-family: inherit;
} }
.submissions { .submissions {
display: grid; display: flex;
gap: 25px; flex-direction: column;
grid-template-columns: repeat(auto-fit, minmax(365px, 1fr)); gap: 10px;
.item {
display: flex;
gap: 10px;
background-color: #efeae6;
border-radius: 1rem;
cursor: pointer;
.titleBox {
display: flex;
flex: 4;
flex-direction: column;
align-items: center;
overflow-wrap: anywhere;
gap: 10px;
padding: 10px;
background-color: #cdc8c499;
border-top-left-radius: inherit;
.title {
display: flex;
justify-content: center;
align-items: center;
color: var(--mui-palette-primary-light);
font-size: 1.5rem;
svg {
font-size: 1.5rem;
}
}
.date {
display: flex;
justify-content: center;
align-items: center;
color: var(--mui-palette-primary-light);
font-size: 1rem;
svg {
font-size: 1rem;
}
}
}
.signers {
display: flex;
flex-direction: column;
flex: 6;
justify-content: center;
gap: 10px;
padding: 10px;
color: var(--mui-palette-primary-light);
.signerItem {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
.status {
border-radius: 2rem;
width: 100px;
text-align: center;
background-color: var(--mui-palette-info-light);
}
}
}
}
} }

View File

@ -51,7 +51,7 @@ export const Nostr = () => {
/** /**
* Call login function when enter is pressed * Call login function when enter is pressed
*/ */
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => { const handleInputKeyDown = (event: any) => {
if (event.code === 'Enter' || event.code === 'NumpadEnter') { if (event.code === 'Enter' || event.code === 'NumpadEnter') {
event.preventDefault() event.preventDefault()
login() login()

View File

@ -12,7 +12,7 @@ import {
useTheme useTheme
} from '@mui/material' } from '@mui/material'
import { UnsignedEvent, nip19, kinds, VerifiedEvent, Event } from 'nostr-tools' import { UnsignedEvent, nip19, kinds, VerifiedEvent, Event } from 'nostr-tools'
import React, { useEffect, useMemo, useRef, useState } from 'react' import { useEffect, useMemo, useRef, useState } from 'react'
import { Link, useParams } from 'react-router-dom' import { Link, useParams } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { MetadataController, NostrController } from '../../../controllers' import { MetadataController, NostrController } from '../../../controllers'
@ -26,7 +26,7 @@ import { setMetadataEvent } from '../../../store/actions'
import { LoadingSpinner } from '../../../components/LoadingSpinner' import { LoadingSpinner } from '../../../components/LoadingSpinner'
import { LoginMethods } from '../../../store/auth/types' import { LoginMethods } from '../../../store/auth/types'
import { SmartToy } from '@mui/icons-material' import { SmartToy } from '@mui/icons-material'
import { getRoboHashPicture, unixNow } from '../../../utils' import { getRoboHashPicture } from '../../../utils'
import { Container } from '../../../components/Container' import { Container } from '../../../components/Container'
export const ProfileSettingsPage = () => { export const ProfileSettingsPage = () => {
@ -197,7 +197,7 @@ export const ProfileSettingsPage = () => {
// Relay will reject if created_at is too late // Relay will reject if created_at is too late
const updatedMetadataState: UnsignedEvent = { const updatedMetadataState: UnsignedEvent = {
content: content, content: content,
created_at: unixNow(), created_at: Math.round(Date.now() / 1000),
kind: kinds.Metadata, kind: kinds.Metadata,
pubkey: pubkey!, pubkey: pubkey!,
tags: metadataState?.tags || [] tags: metadataState?.tags || []
@ -321,8 +321,8 @@ export const ProfileSettingsPage = () => {
}} }}
> >
<img <img
onError={(event: React.SyntheticEvent<HTMLImageElement>) => { onError={(event: any) => {
event.currentTarget.src = getRoboHashPicture(npub!) event.target.src = getRoboHashPicture(npub!)
}} }}
className={styles.img} className={styles.img}
src={getProfileImage(profileMetadata)} src={getProfileImage(profileMetadata)}

View File

@ -91,8 +91,7 @@ export const RelaysPage = () => {
if (isMounted) { if (isMounted) {
if ( if (
!relaysState?.mapUpdated || !relaysState?.mapUpdated ||
(newRelayMap?.mapUpdated !== undefined && newRelayMap.mapUpdated > relaysState?.mapUpdated
newRelayMap?.mapUpdated > relaysState?.mapUpdated)
) { ) {
if ( if (
!relaysState?.map || !relaysState?.map ||

View File

@ -5,7 +5,7 @@ import JSZip from 'jszip'
import _ from 'lodash' import _ from 'lodash'
import { MuiFileInput } from 'mui-file-input' import { MuiFileInput } from 'mui-file-input'
import { Event, verifyEvent } from 'nostr-tools' import { Event, verifyEvent } from 'nostr-tools'
import { useCallback, useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
@ -26,7 +26,7 @@ import {
hexToNpub, hexToNpub,
isOnline, isOnline,
loadZip, loadZip,
unixNow, now,
npubToHex, npubToHex,
parseJson, parseJson,
readContentOfZipEntry, readContentOfZipEntry,
@ -210,6 +210,7 @@ export const SignPage = () => {
const signedMarks = extractMarksFromSignedMeta(meta) const signedMarks = extractMarksFromSignedMeta(meta)
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks) const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
setCurrentUserMarks(currentUserMarks) setCurrentUserMarks(currentUserMarks)
// setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks)) setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
} }
@ -219,100 +220,7 @@ export const SignPage = () => {
if (meta) { if (meta) {
handleUpdatedMeta(meta) handleUpdatedMeta(meta)
} }
}, [meta, usersPubkey]) }, [meta])
const handleDownload = async () => {
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
setLoadingSpinnerDesc('Generating file')
try {
const zip = await getZipWithFiles(meta, files)
const arrayBuffer = await zip.generateAsync({
type: ARRAY_BUFFER,
compression: DEFLATE,
compressionOptions: {
level: 6
}
})
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, `exported-${unixNow()}.sigit.zip`)
} catch (error: any) {
console.log('error in zip:>> ', error)
toast.error(error.message || 'Error occurred in generating zip file')
}
}
const decrypt = useCallback(
async (file: File) => {
setLoadingSpinnerDesc('Decrypting file')
const zip = await loadZip(file)
if (!zip) return
const parsedKeysJson = await parseKeysJson(zip)
if (!parsedKeysJson) return
const encryptedArrayBuffer = await readContentOfZipEntry(
zip,
'compressed.sigit',
'arraybuffer'
)
if (!encryptedArrayBuffer) return
const { keys, sender } = parsedKeysJson
for (const key of keys) {
// Set up event listener for authentication event
nostrController.on('nsecbunker-auth', (url) => {
setAuthUrl(url)
})
// Set up timeout promise to handle encryption timeout
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => {
reject(new Error('Timeout occurred'))
}, 60000) // Timeout duration = 60 seconds
})
// decrypt the encryptionKey, with timeout
const encryptionKey = await Promise.race([
nostrController.nip04Decrypt(sender, key),
timeoutPromise
])
.then((res) => {
return res
})
.catch((err) => {
console.log('err :>> ', err)
return null
})
.finally(() => {
setAuthUrl(undefined) // Clear authentication URL
})
// Return if encryption failed
if (!encryptionKey) continue
const arrayBuffer = await decryptArrayBuffer(
encryptedArrayBuffer,
encryptionKey
)
.catch((err) => {
console.log('err in decryption:>> ', err)
return null
})
.finally(() => {
setIsLoading(false)
})
if (arrayBuffer) return arrayBuffer
}
return null
},
[nostrController]
)
useEffect(() => { useEffect(() => {
// online mode - from create and home page views // online mode - from create and home page views
@ -370,7 +278,7 @@ export const SignPage = () => {
setIsLoading(false) setIsLoading(false)
setDisplayInput(true) setDisplayInput(true)
} }
}, [decryptedArrayBuffer, uploadedZip, metaInNavState, decrypt]) }, [decryptedArrayBuffer, uploadedZip, metaInNavState])
const handleArrayBufferFromBlossom = async ( const handleArrayBufferFromBlossom = async (
arrayBuffer: ArrayBuffer, arrayBuffer: ArrayBuffer,
@ -448,6 +356,96 @@ export const SignPage = () => {
}) })
} }
const decrypt = async (file: File) => {
setLoadingSpinnerDesc('Decrypting file')
const zip = await loadZip(file)
if (!zip) return
const parsedKeysJson = await parseKeysJson(zip)
if (!parsedKeysJson) return
const encryptedArrayBuffer = await readContentOfZipEntry(
zip,
'compressed.sigit',
'arraybuffer'
)
if (!encryptedArrayBuffer) return
const { keys, sender } = parsedKeysJson
for (const key of keys) {
// Set up event listener for authentication event
nostrController.on('nsecbunker-auth', (url) => {
setAuthUrl(url)
})
// Set up timeout promise to handle encryption timeout
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => {
reject(new Error('Timeout occurred'))
}, 60000) // Timeout duration = 60 seconds
})
// decrypt the encryptionKey, with timeout
const encryptionKey = await Promise.race([
nostrController.nip04Decrypt(sender, key),
timeoutPromise
])
.then((res) => {
return res
})
.catch((err) => {
console.log('err :>> ', err)
return null
})
.finally(() => {
setAuthUrl(undefined) // Clear authentication URL
})
// Return if encryption failed
if (!encryptionKey) continue
const arrayBuffer = await decryptArrayBuffer(
encryptedArrayBuffer,
encryptionKey
)
.catch((err) => {
console.log('err in decryption:>> ', err)
return null
})
.finally(() => {
setIsLoading(false)
})
if (arrayBuffer) return arrayBuffer
}
return null
}
const handleDownload = async () => {
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
setLoadingSpinnerDesc('Generating file')
try {
const zip = await getZipWithFiles(meta, files)
const arrayBuffer = await zip.generateAsync({
type: ARRAY_BUFFER,
compression: DEFLATE,
compressionOptions: {
level: 6
}
})
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, `exported-${now()}.sigit.zip`)
} catch (error: any) {
console.log('error in zip:>> ', error)
toast.error(error.message || 'Error occurred in generating zip file')
}
}
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => { const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip') const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
@ -577,7 +575,7 @@ export const SignPage = () => {
...metaCopy.docSignatures, ...metaCopy.docSignatures,
[hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2) [hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
} }
metaCopy.modifiedAt = unixNow() metaCopy.modifiedAt = now()
return metaCopy return metaCopy
} }
@ -587,6 +585,7 @@ export const SignPage = () => {
encryptionKey: string encryptionKey: string
): Promise<File | null> => { ): Promise<File | null> => {
// Get the current timestamp in seconds // Get the current timestamp in seconds
const unixNow = now()
const blob = new Blob([encryptedArrayBuffer]) const blob = new Blob([encryptedArrayBuffer])
// Create a File object with the Blob data // Create a File object with the Blob data
const file = new File([blob], `compressed.sigit`, { const file = new File([blob], `compressed.sigit`, {
@ -636,18 +635,16 @@ export const SignPage = () => {
if (!arraybuffer) return null if (!arraybuffer) return null
return new File([new Blob([arraybuffer])], `${unixNow()}.sigit.zip`, { return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
type: 'application/zip' type: 'application/zip'
}) })
} }
// Handle errors during zip file generation // Handle errors during zip file generation
const handleZipError = (err: unknown) => { const handleZipError = (err: any) => {
console.log('Error in zip:>> ', err) console.log('Error in zip:>> ', err)
setIsLoading(false) setIsLoading(false)
if (err instanceof Error) {
toast.error(err.message || 'Error occurred in generating zip file') toast.error(err.message || 'Error occurred in generating zip file')
}
return null return null
} }
@ -780,7 +777,8 @@ export const SignPage = () => {
if (!arrayBuffer) return if (!arrayBuffer) return
const blob = new Blob([arrayBuffer]) const blob = new Blob([arrayBuffer])
saveAs(blob, `exported-${unixNow()}.sigit.zip`) const unixNow = now()
saveAs(blob, `exported-${unixNow}.sigit.zip`)
setIsLoading(false) setIsLoading(false)
@ -825,7 +823,8 @@ export const SignPage = () => {
const finalZipFile = await createFinalZipFile(encryptedArrayBuffer, key) const finalZipFile = await createFinalZipFile(encryptedArrayBuffer, key)
if (!finalZipFile) return if (!finalZipFile) return
saveAs(finalZipFile, `exported-${unixNow()}.sigit.zip`) const unixNow = now()
saveAs(finalZipFile, `exported-${unixNow}.sigit.zip`)
} }
/** /**

View File

@ -1,22 +1,39 @@
import { Box, Button, Tooltip, Typography, useTheme } from '@mui/material' import {
Box,
Button,
List,
ListItem,
ListSubheader,
Tooltip,
Typography,
useTheme
} from '@mui/material'
import JSZip from 'jszip' import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input' import { MuiFileInput } from 'mui-file-input'
import { Event, verifyEvent } from 'nostr-tools' import { Event, kinds, verifyEvent } from 'nostr-tools'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
import { NostrController } from '../../controllers' import { UserAvatar } from '../../components/UserAvatar'
import { CreateSignatureEventContent, Meta } from '../../types' import { MetadataController, NostrController } from '../../controllers'
import {
CreateSignatureEventContent,
Meta,
ProfileMetadata,
SignedEventContent
} from '../../types'
import { import {
decryptArrayBuffer, decryptArrayBuffer,
extractMarksFromSignedMeta, extractMarksFromSignedMeta,
extractZipUrlAndEncryptionKey,
getHash, getHash,
hexToNpub, hexToNpub,
unixNow, now,
npubToHex,
parseJson, parseJson,
readContentOfZipEntry, readContentOfZipEntry,
signEventForMetaFile, shorten,
shorten signEventForMetaFile
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { Cancel, CheckCircle } from '@mui/icons-material' import { Cancel, CheckCircle } from '@mui/icons-material'
@ -34,12 +51,6 @@ import { useSelector } from 'react-redux'
import { getLastSignersSig } from '../../utils/sign.ts' import { getLastSignersSig } from '../../utils/sign.ts'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import { useSigitMeta } from '../../hooks/useSigitMeta.tsx'
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
import { UsersDetails } from '../../components/UsersDetails.tsx/index.tsx'
import { UserAvatar } from '../../components/UserAvatar/index.tsx'
import { useSigitProfiles } from '../../hooks/useSigitProfiles.tsx'
import { TooltipChild } from '../../components/TooltipChild.tsx'
export const VerifyPage = () => { export const VerifyPage = () => {
const theme = useTheme() const theme = useTheme()
@ -52,36 +63,52 @@ export const VerifyPage = () => {
* uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
* meta will be received in navigation from create & home page in online mode * meta will be received in navigation from create & home page in online mode
*/ */
const { uploadedZip, meta } = location.state || {} const { uploadedZip, meta: metaInNavState } = location.state || {}
const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
useSigitMeta(meta)
const profiles = useSigitProfiles([
...(submittedBy ? [submittedBy] : []),
...signers,
...viewers
])
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('') const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
const [selectedFile, setSelectedFile] = useState<File | null>(null) const [selectedFile, setSelectedFile] = useState<File | null>(null)
const [meta, setMeta] = useState<Meta | null>(null)
const [submittedBy, setSubmittedBy] = useState<string>()
const [signers, setSigners] = useState<`npub1${string}`[]>([])
const [viewers, setViewers] = useState<`npub1${string}`[]>([])
const [creatorFileHashes, setCreatorFileHashes] = useState<{
[key: string]: string
}>({})
const [currentFileHashes, setCurrentFileHashes] = useState<{ const [currentFileHashes, setCurrentFileHashes] = useState<{
[key: string]: string | null [key: string]: string | null
}>(fileHashes) }>({})
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({}) const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
{}
)
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey) const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
const nostrController = NostrController.getInstance() const nostrController = NostrController.getInstance()
useEffect(() => { useEffect(() => {
if (uploadedZip) { if (uploadedZip) {
setSelectedFile(uploadedZip) setSelectedFile(uploadedZip)
} else if (meta && encryptionKey) { } else if (metaInNavState) {
const processSigit = async () => { const processSigit = async () => {
setIsLoading(true) setIsLoading(true)
setLoadingSpinnerDesc('Extracting zipUrl and encryption key from meta')
const res = await extractZipUrlAndEncryptionKey(metaInNavState)
if (!res) {
setIsLoading(false)
return
}
const {
zipUrl,
encryptionKey,
createSignatureEvent,
createSignatureContent
} = res
setLoadingSpinnerDesc('Fetching file from file server') setLoadingSpinnerDesc('Fetching file from file server')
axios axios
@ -148,6 +175,12 @@ export const VerifyPage = () => {
setCurrentFileHashes(fileHashes) setCurrentFileHashes(fileHashes)
setFiles(files) setFiles(files)
setSigners(createSignatureContent.signers)
setViewers(createSignatureContent.viewers)
setCreatorFileHashes(createSignatureContent.fileHashes)
setSubmittedBy(createSignatureEvent.pubkey)
setMeta(metaInNavState)
setIsLoading(false) setIsLoading(false)
} }
}) })
@ -164,7 +197,49 @@ export const VerifyPage = () => {
processSigit() processSigit()
} }
}, [encryptionKey, meta, uploadedZip, zipUrl]) }, [uploadedZip, metaInNavState])
useEffect(() => {
if (submittedBy) {
const metadataController = new MetadataController()
const users = [submittedBy, ...signers, ...viewers]
users.forEach((user) => {
const pubkey = npubToHex(user)!
if (!(pubkey in metadata)) {
const handleMetadataEvent = (event: Event) => {
const metadataContent =
metadataController.extractProfileMetadataContent(event)
if (metadataContent)
setMetadata((prev) => ({
...prev,
[pubkey]: metadataContent
}))
}
metadataController.on(pubkey, (kind: number, event: Event) => {
if (kind === kinds.Metadata) {
handleMetadataEvent(event)
}
})
metadataController
.findMetadata(pubkey)
.then((metadataEvent) => {
if (metadataEvent) handleMetadataEvent(metadataEvent)
})
.catch((err) => {
console.error(
`error occurred in finding metadata for: ${user}`,
err
)
})
}
})
}
}, [submittedBy, signers, viewers])
const handleVerify = async () => { const handleVerify = async () => {
if (!selectedFile) return if (!selectedFile) return
@ -270,9 +345,44 @@ export const VerifyPage = () => {
if (!createSignatureContent) return if (!createSignatureContent) return
setSigners(createSignatureContent.signers)
setViewers(createSignatureContent.viewers)
setCreatorFileHashes(createSignatureContent.fileHashes)
setSubmittedBy(createSignatureEvent.pubkey)
setMeta(parsedMetaJson)
setIsLoading(false) setIsLoading(false)
} }
const getPrevSignersSig = (npub: string) => {
if (!meta) return null
// if user is first signer then use creator's signature
if (signers[0] === npub) {
try {
const createSignatureEvent: Event = JSON.parse(meta.createSignature)
return createSignatureEvent.sig
} catch (error) {
return null
}
}
// find the index of signer
const currentSignerIndex = signers.findIndex((signer) => signer === npub)
// return null if could not found user in signer's list
if (currentSignerIndex === -1) return null
// find prev signer
const prevSigner = signers[currentSignerIndex - 1]
// get the signature of prev signer
try {
const prevSignersEvent: Event = JSON.parse(meta.docSignatures[prevSigner])
return prevSignersEvent.sig
} catch (error) {
return null
}
}
const handleExport = async () => { const handleExport = async () => {
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
@ -333,11 +443,81 @@ export const VerifyPage = () => {
if (!arrayBuffer) return if (!arrayBuffer) return
const blob = new Blob([arrayBuffer]) const blob = new Blob([arrayBuffer])
saveAs(blob, `exported-${unixNow()}.sigit.zip`) saveAs(blob, `exported-${now()}.sigit.zip`)
setIsLoading(false) setIsLoading(false)
} }
const displayUser = (pubkey: string, verifySignature = false) => {
const profile = metadata[pubkey]
let isValidSignature = false
if (verifySignature) {
const npub = hexToNpub(pubkey)
const signedEventString = meta ? meta.docSignatures[npub] : null
if (signedEventString) {
try {
const signedEvent = JSON.parse(signedEventString)
const isVerifiedEvent = verifyEvent(signedEvent)
if (isVerifiedEvent) {
// get the actual signature of prev signer
const prevSignersSig = getPrevSignersSig(npub)
// get the signature of prev signer from the content of current signers signedEvent
try {
const obj: SignedEventContent = JSON.parse(signedEvent.content)
if (
obj.prevSig &&
prevSignersSig &&
obj.prevSig === prevSignersSig
) {
isValidSignature = true
}
} catch (error) {
isValidSignature = false
}
}
} catch (error) {
console.error(
`An error occurred in parsing and verifying the signature event for ${pubkey}`,
error
)
}
}
}
return (
<>
<UserAvatar
pubkey={pubkey}
name={
profile?.display_name || profile?.name || shorten(hexToNpub(pubkey))
}
image={profile?.picture}
/>
{verifySignature && (
<>
{isValidSignature && (
<Tooltip title="Valid signature">
<CheckCircle sx={{ color: theme.palette.success.light }} />
</Tooltip>
)}
{!isValidSignature && (
<Tooltip title="Invalid signature">
<Cancel sx={{ color: theme.palette.error.main }} />
</Tooltip>
)}
</>
)}
</>
)
}
const displayExportedBy = () => { const displayExportedBy = () => {
if (!meta || !meta.exportSignature) return null if (!meta || !meta.exportSignature) return null
@ -347,24 +527,7 @@ export const VerifyPage = () => {
const exportSignatureEvent = JSON.parse(exportSignatureString) as Event const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
if (verifyEvent(exportSignatureEvent)) { if (verifyEvent(exportSignatureEvent)) {
const exportedBy = exportSignatureEvent.pubkey return displayUser(exportSignatureEvent.pubkey)
const profile = profiles[exportedBy]
return (
<Tooltip
title={
profile?.display_name ||
profile?.name ||
shorten(hexToNpub(exportedBy))
}
placement="top"
arrow
disableInteractive
>
<TooltipChild>
<UserAvatar pubkey={exportedBy} image={profile?.picture} />
</TooltipChild>
</Tooltip>
)
} else { } else {
toast.error(`Invalid export signature!`) toast.error(`Invalid export signature!`)
return ( return (
@ -411,13 +574,113 @@ export const VerifyPage = () => {
)} )}
{meta && ( {meta && (
<StickySideColumns
left={
<> <>
<List
sx={{
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader className={styles.subHeader}>
Meta Info
</ListSubheader>
}
>
{submittedBy && (
<ListItem
sx={{
marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Submitted By
</Typography>
{displayUser(submittedBy)}
</ListItem>
)}
<ListItem
sx={{
marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Exported By
</Typography>
{displayExportedBy()}
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleExport} variant="contained">
Export Sigit
</Button>
</Box>
</ListItem>
{signers.length > 0 && (
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Signers
</Typography>
<ul className={styles.usersList}>
{signers.map((signer) => (
<li
key={signer}
style={{
color: textColor,
display: 'flex',
alignItems: 'center',
gap: '15px'
}}
>
{displayUser(npubToHex(signer)!, true)}
</li>
))}
</ul>
</ListItem>
)}
{viewers.length > 0 && (
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Viewers
</Typography>
<ul className={styles.usersList}>
{viewers.map((viewer) => (
<li key={viewer} style={{ color: textColor }}>
{displayUser(npubToHex(viewer)!)}
</li>
))}
</ul>
</ListItem>
)}
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Files
</Typography>
<Box className={styles.filesWrapper}> <Box className={styles.filesWrapper}>
{Object.entries(currentFileHashes).map( {Object.entries(currentFileHashes).map(
([filename, hash], index) => { ([filename, hash], index) => {
const isValidHash = fileHashes[filename] === hash const isValidHash = creatorFileHashes[filename] === hash
return ( return (
<Box key={`file-${index}`} className={styles.file}> <Box key={`file-${index}`} className={styles.file}>
@ -449,16 +712,9 @@ export const VerifyPage = () => {
} }
)} )}
</Box> </Box>
{displayExportedBy()} </ListItem>
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}> </List>
<Button onClick={handleExport} variant="contained">
Export Sigit
</Button>
</Box>
</> </>
}
right={<UsersDetails meta={meta} />}
/>
)} )}
</Container> </Container>
</> </>

View File

@ -23,6 +23,14 @@ export const theme = extendTheme({
} }
}, },
components: { components: {
MuiModal: {
styleOverrides: {
root: {
insetBlock: '25px',
insetInline: '10px'
}
}
},
MuiButton: { MuiButton: {
styleOverrides: { styleOverrides: {
root: { root: {
@ -33,9 +41,6 @@ export const theme = extendTheme({
boxShadow: 'unset', boxShadow: 'unset',
lineHeight: 'inherit', lineHeight: 'inherit',
borderRadius: '4px', borderRadius: '4px',
':focus': {
textDecoration: 'none'
},
':hover': { ':hover': {
background: 'var(--primary-light)', background: 'var(--primary-light)',
boxShadow: 'unset' boxShadow: 'unset'

View File

@ -9,7 +9,7 @@ export interface MouseState {
} }
export interface PdfFile { export interface PdfFile {
file: File file: File,
pages: PdfPage[] pages: PdfPage[]
expanded?: boolean expanded?: boolean
} }
@ -34,7 +34,7 @@ export interface DrawnField {
export interface DrawTool { export interface DrawTool {
identifier: MarkType identifier: MarkType
label: string label: string
icon: JSX.Element icon: JSX.Element,
defaultValue?: string defaultValue?: string
selected?: boolean selected?: boolean
active?: boolean active?: boolean

View File

@ -1,4 +1,4 @@
import { MarkType } from "./drawing"; import { MarkType } from './drawing'
export interface CurrentUserMark { export interface CurrentUserMark {
id: number id: number

View File

@ -11,18 +11,16 @@ export interface OutputByType {
} }
interface InputByType { interface InputByType {
base64: string base64: string;
string: string string: string;
text: string text: string;
binarystring: string binarystring: string;
array: number[] array: number[];
uint8array: Uint8Array uint8array: Uint8Array;
arraybuffer: ArrayBuffer arraybuffer: ArrayBuffer;
blob: Blob blob: Blob;
stream: NodeJS.ReadableStream stream: NodeJS.ReadableStream;
} }
export type OutputType = keyof OutputByType export type OutputType = keyof OutputByType
export type InputFileFormat = export type InputFileFormat = InputByType[keyof InputByType] | Promise<InputByType[keyof InputByType]>;
| InputByType[keyof InputByType]
| Promise<InputByType[keyof InputByType]>

View File

@ -8,10 +8,3 @@ export const SIGN: string = 'Sign'
export const NEXT: string = 'Next' export const NEXT: string = 'Next'
export const ARRAY_BUFFER = 'arraybuffer' export const ARRAY_BUFFER = 'arraybuffer'
export const DEFLATE = 'DEFLATE' export const DEFLATE = 'DEFLATE'
/**
* Number of milliseconds in one week.
* Calc based on: 7 * 24 * 60 * 60 * 1000
*/
export const ONE_WEEK_IN_MS: number = 604800000
export const SIGIT_RELAY: string = 'wss://relay.sigit.io'

View File

@ -7,4 +7,3 @@ export * from './string'
export * from './zip' export * from './zip'
export * from './utils' export * from './utils'
export * from './mark' export * from './mark'
export * from './meta'

View File

@ -1,182 +0,0 @@
import { CreateSignatureEventContent, Meta } from '../types'
import { fromUnixTimestamp, parseJson } from '.'
import { Event } from 'nostr-tools'
import { toast } from 'react-toastify'
export enum SignStatus {
Signed = 'Signed',
Awaiting = 'Awaiting',
Pending = 'Pending',
Invalid = 'Invalid',
Viewer = 'Viewer'
}
export enum SigitStatus {
Partial = 'In-Progress',
Complete = 'Completed'
}
type Jsonable =
| string
| number
| boolean
| null
| undefined
| readonly Jsonable[]
| { readonly [key: string]: Jsonable }
| { toJSON(): Jsonable }
export class SigitMetaParseError extends Error {
public readonly context?: Jsonable
constructor(
message: string,
options: { cause?: Error; context?: Jsonable } = {}
) {
const { cause, context } = options
super(message, { cause })
this.name = this.constructor.name
this.context = context
}
}
/**
* Handle meta errors
* Wraps the errors without message property and stringify to a message so we can use it later
* @param error
* @returns
*/
function handleError(error: unknown): Error {
if (error instanceof Error) return error
// No message error, wrap it and stringify
let stringified = 'Unable to stringify the thrown value'
try {
stringified = JSON.stringify(error)
} catch (error) {
console.error(stringified, error)
}
return new Error(`[SiGit Error]: ${stringified}`)
}
// Reuse common error messages for meta parsing
export enum SigitMetaParseErrorType {
'PARSE_ERROR_EVENT' = 'error occurred in parsing the create signature event',
'PARSE_ERROR_SIGNATURE_EVENT_CONTENT' = "err in parsing the createSignature event's content"
}
export interface SigitCardDisplayInfo {
createdAt?: number
title?: string
submittedBy?: `npub1${string}`
signers: `npub1${string}`[]
fileExtensions: string[]
signedStatus: SigitStatus
}
/**
* Wrapper for event parser that throws custom SigitMetaParseError with cause and context
* @param raw Raw string for parsing
* @returns parsed Event
*/
export const parseNostrEvent = async (raw: string): Promise<Event> => {
try {
const event = await parseJson<Event>(raw)
return event
} catch (error) {
throw new SigitMetaParseError(SigitMetaParseErrorType.PARSE_ERROR_EVENT, {
cause: handleError(error),
context: raw
})
}
}
/**
* Wrapper for event content parser that throws custom SigitMetaParseError with cause and context
* @param raw Raw string for parsing
* @returns parsed CreateSignatureEventContent
*/
export const parseCreateSignatureEventContent = async (
raw: string
): Promise<CreateSignatureEventContent> => {
try {
const createSignatureEventContent =
await parseJson<CreateSignatureEventContent>(raw)
return createSignatureEventContent
} catch (error) {
throw new SigitMetaParseError(
SigitMetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
{
cause: handleError(error),
context: raw
}
)
}
}
/**
* Extracts only necessary metadata for the card display
* @param meta Sigit metadata
* @returns SigitCardDisplayInfo
*/
export const extractSigitCardDisplayInfo = async (meta: Meta) => {
if (!meta?.createSignature) return
const sigitInfo: SigitCardDisplayInfo = {
signers: [],
fileExtensions: [],
signedStatus: SigitStatus.Partial
}
try {
const createSignatureEvent = await parseNostrEvent(meta.createSignature)
// created_at in nostr events are stored in seconds
sigitInfo.createdAt = fromUnixTimestamp(createSignatureEvent.created_at)
const createSignatureContent = await parseCreateSignatureEventContent(
createSignatureEvent.content
)
const files = Object.keys(createSignatureContent.fileHashes)
const extensions = extractFileExtensions(files)
const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
const isCompletelySigned = createSignatureContent.signers.every((signer) =>
signedBy.includes(signer)
)
sigitInfo.title = createSignatureContent.title
sigitInfo.submittedBy = createSignatureEvent.pubkey as `npub1${string}`
sigitInfo.signers = createSignatureContent.signers
sigitInfo.fileExtensions = extensions
if (isCompletelySigned) {
sigitInfo.signedStatus = SigitStatus.Complete
}
return sigitInfo
} catch (error) {
if (error instanceof SigitMetaParseError) {
toast.error(error.message)
console.error(error.name, error.message, error.cause, error.context)
} else {
console.error('Unexpected error', error)
}
}
}
export const extractFileExtensions = (fileNames: string[]) => {
const extensions = fileNames.reduce((result: string[], file: string) => {
const extension = file.split('.').pop()
if (extension) {
result.push(extension)
}
return result
}, [])
return extensions
}

View File

@ -13,7 +13,7 @@ import { NostrController } from '../controllers'
import { AuthState } from '../store/auth/types' import { AuthState } from '../store/auth/types'
import store from '../store/store' import store from '../store/store'
import { CreateSignatureEventContent, Meta } from '../types' import { CreateSignatureEventContent, Meta } from '../types'
import { hexToNpub, unixNow } from './nostr' import { hexToNpub, now } from './nostr'
import { parseJson } from './string' import { parseJson } from './string'
import { hexToBytes } from '@noble/hashes/utils' import { hexToBytes } from '@noble/hashes/utils'
@ -28,10 +28,10 @@ export const uploadToFileStorage = async (file: File) => {
const event: EventTemplate = { const event: EventTemplate = {
kind: 24242, kind: 24242,
content: 'Authorize Upload', content: 'Authorize Upload',
created_at: unixNow(), created_at: Math.floor(Date.now() / 1000),
tags: [ tags: [
['t', 'upload'], ['t', 'upload'],
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now ['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
['name', file.name], ['name', file.name],
['size', String(file.size)] ['size', String(file.size)]
] ]
@ -78,7 +78,7 @@ export const signEventForMetaFile = async (
const event: EventTemplate = { const event: EventTemplate = {
kind: 27235, // Event type for meta file kind: 27235, // Event type for meta file
content: content, // content for event content: content, // content for event
created_at: unixNow(), // Current timestamp created_at: Math.floor(Date.now() / 1000), // Current timestamp
tags: [['-']] // For understanding why "-" tag is used here see: https://github.com/nostr-protocol/nips/blob/protected-events-tag/70.md tags: [['-']] // For understanding why "-" tag is used here see: https://github.com/nostr-protocol/nips/blob/protected-events-tag/70.md
} }

View File

@ -120,8 +120,7 @@ export const queryNip05 = async (
if (!match) throw new Error('Invalid nip05') if (!match) throw new Error('Invalid nip05')
// Destructure the match result, assigning default value '_' to name if not provided // Destructure the match result, assigning default value '_' to name if not provided
// First variable from the match destructuring is ignored const [name = '_', domain] = match
const [, name = '_', domain] = match
// Construct the URL to query the NIP-05 data // Construct the URL to query the NIP-05 data
const url = `https://${domain}/.well-known/nostr.json?name=${name}` const url = `https://${domain}/.well-known/nostr.json?name=${name}`
@ -211,22 +210,7 @@ export const getRoboHashPicture = (
return `https://robohash.org/${npub}.png?set=set${set}` return `https://robohash.org/${npub}.png?set=set${set}`
} }
export const unixNow = () => Math.round(Date.now() / 1000) export const now = () => Math.round(Date.now() / 1000)
export const toUnixTimestamp = (date: number | Date) => {
let time
if (typeof date === 'number') {
time = Math.round(date / 1000)
} else if (date instanceof Date) {
time = Math.round(date.getTime() / 1000)
} else {
throw Error('Unsupported type when converting to unix timestamp')
}
return time
}
export const fromUnixTimestamp = (unix: number) => {
return unix * 1000
}
/** /**
* Generate nip44 conversation key * Generate nip44 conversation key
@ -303,7 +287,7 @@ export const createWrap = (unsignedEvent: UnsignedEvent, receiver: string) => {
kind: 1059, // Event kind kind: 1059, // Event kind
content, // Encrypted content content, // Encrypted content
pubkey, // Public key of the creator pubkey, // Public key of the creator
created_at: unixNow(), // Current timestamp created_at: now(), // Current timestamp
tags: [ tags: [
// Tags including receiver and nonce // Tags including receiver and nonce
['p', receiver], ['p', receiver],
@ -557,7 +541,7 @@ export const updateUsersAppData = async (meta: Meta) => {
const updatedEvent: UnsignedEvent = { const updatedEvent: UnsignedEvent = {
kind: kinds.Application, kind: kinds.Application,
pubkey: usersPubkey!, pubkey: usersPubkey!,
created_at: unixNow(), created_at: now(),
tags: [['d', hash]], tags: [['d', hash]],
content: encryptedContent content: encryptedContent
} }
@ -623,10 +607,10 @@ const deleteBlossomFile = async (url: string, privateKey: string) => {
const event: EventTemplate = { const event: EventTemplate = {
kind: 24242, kind: 24242,
content: 'Authorize Upload', content: 'Authorize Upload',
created_at: unixNow(), created_at: now(),
tags: [ tags: [
['t', 'delete'], ['t', 'delete'],
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now ['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
['x', hash] ['x', hash]
] ]
} }
@ -682,10 +666,10 @@ const uploadUserAppDataToBlossom = async (
const event: EventTemplate = { const event: EventTemplate = {
kind: 24242, kind: 24242,
content: 'Authorize Upload', content: 'Authorize Upload',
created_at: unixNow(), created_at: now(),
tags: [ tags: [
['t', 'upload'], ['t', 'upload'],
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now ['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
['name', file.name], ['name', file.name],
['size', String(file.size)] ['size', String(file.size)]
] ]
@ -890,7 +874,7 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
pubkey: usersPubkey, pubkey: usersPubkey,
content: JSON.stringify(meta), content: JSON.stringify(meta),
tags: [], tags: [],
created_at: unixNow() created_at: now()
} }
// Wrap the unsigned event with the receiver's information // Wrap the unsigned event with the receiver's information

View File

@ -3,10 +3,8 @@ import * as PDFJS from 'pdfjs-dist'
import { PDFDocument } from 'pdf-lib' import { PDFDocument } from 'pdf-lib'
import { Mark } from '../types/mark.ts' import { Mark } from '../types/mark.ts'
PDFJS.GlobalWorkerOptions.workerSrc = new URL( PDFJS.GlobalWorkerOptions.workerSrc =
'pdfjs-dist/build/pdf.worker.min.mjs', 'node_modules/pdfjs-dist/build/pdf.worker.mjs'
import.meta.url
).toString()
/** /**
* Scale between the PDF page's natural size and rendered size * Scale between the PDF page's natural size and rendered size

View File

@ -1,116 +0,0 @@
import { Filter, SimplePool } from 'nostr-tools'
import { RelayList } from 'nostr-tools/kinds'
import { Event } from 'nostr-tools'
import { localCache } from '../services'
import { ONE_WEEK_IN_MS, SIGIT_RELAY } from './const.ts'
import { RelayMap, RelaySet } from '../types'
const READ_MARKER = 'read'
const WRITE_MARKER = 'write'
/**
* Attempts to find a relay list from the provided lookUpRelays.
* If the relay list is found, it will be added to the user relay list metadata.
* @param lookUpRelays
* @param hexKey
* @return found relay list or null
*/
const findRelayListAndUpdateCache = async (
lookUpRelays: string[],
hexKey: string
): Promise<Event | null> => {
try {
const eventFilter: Filter = {
kinds: [RelayList],
authors: [hexKey]
}
const pool = new SimplePool()
const event = await pool.get(lookUpRelays, eventFilter)
if (event) {
await localCache.addUserRelayListMetadata(event)
}
return event
} catch (error) {
console.error(error)
return null
}
}
/**
* Attempts to find a relay list in cache. If it is present, it will check that the cached event is not
* older than one week.
* @param hexKey
* @return RelayList event if it's not older than a week; otherwise null
*/
const findRelayListInCache = async (hexKey: string): Promise<Event | null> => {
try {
// Attempt to retrieve the metadata event from the local cache
const cachedRelayListMetadataEvent =
await localCache.getUserRelayListMetadata(hexKey)
// Check if the cached event is not older than one week
if (
cachedRelayListMetadataEvent &&
isOlderThanOneWeek(cachedRelayListMetadataEvent.cachedAt)
) {
return cachedRelayListMetadataEvent.event
}
return null
} catch (error) {
console.error(error)
return null
}
}
/**
* Transforms a list of relay tags from a Nostr Event to a RelaySet.
* @param tags
*/
const getUserRelaySet = (tags: string[][]): RelaySet => {
return tags
.filter(isRelayTag)
.reduce<RelaySet>(toRelaySet, getDefaultRelaySet())
}
const getDefaultRelaySet = (): RelaySet => ({
read: [SIGIT_RELAY],
write: [SIGIT_RELAY]
})
const getDefaultRelayMap = (): RelayMap => ({
[SIGIT_RELAY]: { write: true, read: true }
})
const isOlderThanOneWeek = (cachedAt: number) => {
return Date.now() - cachedAt < ONE_WEEK_IN_MS
}
const isRelayTag = (tag: string[]): boolean => tag[0] === 'r'
const toRelaySet = (obj: RelaySet, tag: string[]): RelaySet => {
if (tag.length >= 3) {
const marker = tag[2]
if (marker === READ_MARKER) {
obj.read.push(tag[1])
} else if (marker === WRITE_MARKER) {
obj.write.push(tag[1])
}
}
if (tag.length === 2) {
obj.read.push(tag[1])
obj.write.push(tag[1])
}
return obj
}
export {
findRelayListAndUpdateCache,
findRelayListInCache,
getUserRelaySet,
getDefaultRelaySet,
getDefaultRelayMap,
isOlderThanOneWeek
}

View File

@ -5,10 +5,7 @@ import { Meta } from '../types'
* This function returns the signature of last signer * This function returns the signature of last signer
* It will be used in the content of export signature's signedEvent * It will be used in the content of export signature's signedEvent
*/ */
const getLastSignersSig = ( const getLastSignersSig = (meta: Meta, signers: `npub1${string}`[]): string | null => {
meta: Meta,
signers: `npub1${string}`[]
): string | null => {
// if there're no signers then use creator's signature // if there're no signers then use creator's signature
if (signers.length === 0) { if (signers.length === 0) {
try { try {
@ -24,7 +21,9 @@ const getLastSignersSig = (
// get the signature of last signer // get the signature of last signer
try { try {
const lastSignatureEvent: Event = JSON.parse(meta.docSignatures[lastSigner]) const lastSignatureEvent: Event = JSON.parse(
meta.docSignatures[lastSigner]
)
return lastSignatureEvent.sig return lastSignatureEvent.sig
} catch (error) { } catch (error) {
return null return null

View File

@ -36,12 +36,17 @@ const readContentOfZipEntry = async <T extends OutputType>(
const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => { const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => {
try { try {
return await JSZip.loadAsync(data) return await JSZip.loadAsync(data);
} catch (err: any) { } catch (err: any) {
console.log('err in loading zip file :>> ', err) console.log('err in loading zip file :>> ', err)
toast.error(err.message || 'An error occurred in loading zip file.') toast.error(err.message || 'An error occurred in loading zip file.')
return null return null;
} }
} }
export { readContentOfZipEntry, loadZip } export {
readContentOfZipEntry,
loadZip
}