{
- onDrawnFieldMouseMove(event, drawnField)
+ onPointerDown={(event) =>
+ handleDrawnFieldPointerDown(event, drawnFieldIndex)
+ }
+ onPointerMove={(event) => {
+ handleDrawnFieldPointerMove(event, drawnField, page.width)
}}
className={styles.drawingRectangle}
style={{
- left: `${drawnField.left}px`,
- top: `${drawnField.top}px`,
- width: `${drawnField.width}px`,
- height: `${drawnField.height}px`,
- pointerEvents: mouseState.clicked ? 'none' : 'all'
+ backgroundColor: drawnField.counterpart
+ ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
+ : undefined,
+ borderColor: drawnField.counterpart
+ ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
+ : undefined,
+ left: inPx(from(page.width, drawnField.left)),
+ top: inPx(from(page.width, drawnField.top)),
+ width: inPx(from(page.width, drawnField.width)),
+ height: inPx(from(page.width, drawnField.height)),
+ pointerEvents: mouseState.clicked ? 'none' : 'all',
+ touchAction: 'none',
+ opacity:
+ mouseState.dragging &&
+ activeDrawField === drawnFieldIndex
+ ? 0.8
+ : undefined
}}
>
{
- onResizeHandleMouseMove(event, drawnField)
+ onPointerDown={(event) =>
+ handleResizePointerDown(event, drawnFieldIndex)
+ }
+ onPointerMove={(event) => {
+ handleResizePointerMove(event, drawnField, page.width)
}}
className={styles.resizeHandle}
+ style={{
+ background:
+ mouseState.resizing &&
+ activeDrawField === drawnFieldIndex
+ ? 'var(--primary-main)'
+ : undefined
+ }}
>
{
- onRemoveHandleMouseDown(
+ onPointerDown={(event) => {
+ handleRemovePointerDown(
event,
- pdfFileIndex,
- pdfPageIndex,
+ fileIndex,
+ pageIndex,
drawnFieldIndex
)
}}
@@ -403,7 +436,7 @@ export const DrawPDFFields = (props: Props) => {
@@ -416,6 +449,10 @@ export const DrawPDFFields = (props: Props) => {
}}
labelId="counterparts"
label="Counterparts"
+ sx={{
+ background: 'white'
+ }}
+ renderValue={(value) => renderCounterpartValue(value)}
>
{users
.filter((u) => u.role === UserRole.signer)
@@ -444,7 +481,22 @@ export const DrawPDFFields = (props: Props) => {
key={index}
value={hexToNpub(user.pubkey)}
>
- {displayValue}
+
+ img': {
+ width: '30px',
+ height: '30px'
+ }
+ }}
+ />
+
+ {displayValue}
)
})}
@@ -461,48 +513,72 @@ export const DrawPDFFields = (props: Props) => {
)
}
- if (parsingPdf) {
- return (
-
-
- )
+ const renderCounterpartValue = (value: string) => {
+ const user = users.find((u) => u.pubkey === npubToHex(value))
+ if (user) {
+ let displayValue = truncate(value, {
+ length: 16
+ })
+
+ const metadata = props.metadata[user.pubkey]
+
+ if (metadata) {
+ displayValue = truncate(
+ metadata.name || metadata.display_name || metadata.username || value,
+ {
+ length: 16
+ }
+ )
+ }
+ return (
+ <>
+ img': {
+ width: '21px',
+ height: '21px'
+ }
+ }}
+ />
+ {displayValue}
+
+ )
+ }
+
+ return value
}
- if (!pdfFiles.length) {
+ if (parsingPdf) {
+ return
- {selectedFiles.map((file, i) => {
- const name = file.name
- const extension = extractFileExtension(name)
- const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
+
-
+
+
)
}
diff --git a/src/pages/settings/cache/index.tsx b/src/pages/settings/cache/index.tsx
index 3d74f0e..fde92a9 100644
--- a/src/pages/settings/cache/index.tsx
+++ b/src/pages/settings/cache/index.tsx
@@ -14,6 +14,7 @@ import { toast } from 'react-toastify'
import { localCache } from '../../../services'
import { LoadingSpinner } from '../../../components/LoadingSpinner'
import { Container } from '../../../components/Container'
+import { Footer } from '../../../components/Footer/Footer'
export const CacheSettingsPage = () => {
const theme = useTheme()
@@ -50,48 +51,51 @@ export const CacheSettingsPage = () => {
}
return (
-
- {isLoading &&
+
+
)
}
diff --git a/src/pages/settings/profile/index.tsx b/src/pages/settings/profile/index.tsx
index 8723c2e..9b01a72 100644
--- a/src/pages/settings/profile/index.tsx
+++ b/src/pages/settings/profile/index.tsx
@@ -32,6 +32,7 @@ import {
unixNow
} from '../../../utils'
import { Container } from '../../../components/Container'
+import { Footer } from '../../../components/Footer/Footer'
export const ProfileSettingsPage = () => {
const theme = useTheme()
@@ -385,6 +386,7 @@ export const ProfileSettingsPage = () => {
)}
+
)
}
diff --git a/src/pages/settings/relays/index.tsx b/src/pages/settings/relays/index.tsx
index 7e86964..4ed5d62 100644
--- a/src/pages/settings/relays/index.tsx
+++ b/src/pages/settings/relays/index.tsx
@@ -27,6 +27,7 @@ import {
shorten
} from '../../../utils'
import styles from './style.module.scss'
+import { Footer } from '../../../components/Footer/Footer'
export const RelaysPage = () => {
const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
@@ -270,161 +271,164 @@ const RelayItem = ({
})
return (
-
-
+
+
+ )}
+
+
+
+
)
}
diff --git a/src/pages/sign/index.tsx b/src/pages/sign/index.tsx
index b8cfe5c..8720954 100644
--- a/src/pages/sign/index.tsx
+++ b/src/pages/sign/index.tsx
@@ -38,10 +38,8 @@ import {
import { Container } from '../../components/Container'
import { DisplayMeta } from './internal/displayMeta'
import styles from './style.module.scss'
-import { PdfFile } from '../../types/drawing.ts'
-import { convertToPdfFile } from '../../utils/pdf.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import { getLastSignersSig } from '../../utils/sign.ts'
+import { getLastSignersSig, isFullySigned } from '../../utils/sign.ts'
import {
filterMarksByPubkey,
getCurrentUserMarks,
@@ -49,7 +47,11 @@ import {
updateMarks
} from '../../utils'
import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
-import { getZipWithFiles } from '../../utils/file.ts'
+import {
+ convertToSigitFile,
+ getZipWithFiles,
+ SigitFile
+} from '../../utils/file.ts'
import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
enum SignedStatus {
Fully_Signed,
@@ -76,7 +78,7 @@ export const SignPage = () => {
const [selectedFile, setSelectedFile] = useState(null)
- const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
+ const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
const [isLoading, setIsLoading] = useState(true)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -110,13 +112,13 @@ export const SignPage = () => {
const [currentUserMarks, setCurrentUserMarks] = useState(
[]
)
- const [isReadyToSign, setIsReadyToSign] = useState(false)
+ const [isMarksCompleted, setIsMarksCompleted] = useState(false)
const [otherUserMarks, setOtherUserMarks] = useState([])
useEffect(() => {
if (signers.length > 0) {
// check if all signers have signed then its fully signed
- if (signers.every((signer) => signedBy.includes(signer))) {
+ if (isFullySigned(signers, signedBy)) {
setSignedStatus(SignedStatus.Fully_Signed)
} else {
for (const signer of signers) {
@@ -214,7 +216,7 @@ export const SignPage = () => {
const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!)
setOtherUserMarks(otherUserMarks)
setCurrentUserMarks(currentUserMarks)
- setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
+ setIsMarksCompleted(isCurrentUserMarksComplete(currentUserMarks))
}
setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
@@ -402,7 +404,7 @@ export const SignPage = () => {
return
}
- const files: { [filename: string]: PdfFile } = {}
+ const files: { [filename: string]: SigitFile } = {}
const fileHashes: { [key: string]: string | null } = {}
const fileNames = Object.values(zip.files).map((entry) => entry.name)
@@ -416,8 +418,7 @@ export const SignPage = () => {
)
if (arrayBuffer) {
- files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
-
+ files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
const hash = await getHash(arrayBuffer)
if (hash) {
fileHashes[fileName] = hash
@@ -462,7 +463,7 @@ export const SignPage = () => {
const zip = await loadZip(decryptedZipFile)
if (!zip) return
- const files: { [filename: string]: PdfFile } = {}
+ const files: { [filename: string]: SigitFile } = {}
const fileHashes: { [key: string]: string | null } = {}
const fileNames = Object.values(zip.files)
.filter((entry) => entry.name.startsWith('files/') && !entry.dir)
@@ -479,7 +480,7 @@ export const SignPage = () => {
)
if (arrayBuffer) {
- files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
+ files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
const hash = await getHash(arrayBuffer)
if (hash) {
@@ -541,10 +542,13 @@ export const SignPage = () => {
setLoadingSpinnerDesc('Signing nostr event')
const prevSig = getPrevSignersSig(hexToNpub(usersPubkey!))
- if (!prevSig) return
+ if (!prevSig) {
+ setIsLoading(false)
+ toast.error('Previous signature is invalid')
+ return
+ }
- const marks = getSignerMarksForMeta()
- if (!marks) return
+ const marks = getSignerMarksForMeta() || []
const signedEvent = await signEventForMeta({ prevSig, marks })
if (!signedEvent) return
@@ -764,8 +768,8 @@ export const SignPage = () => {
zip.file('meta.json', stringifiedMeta)
- for (const [fileName, pdf] of Object.entries(files)) {
- zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
+ for (const [fileName, file] of Object.entries(files)) {
+ zip.file(`files/${fileName}`, await file.arrayBuffer())
}
const arrayBuffer = await zip
@@ -802,8 +806,8 @@ export const SignPage = () => {
zip.file('meta.json', stringifiedMeta)
- for (const [fileName, pdf] of Object.entries(files)) {
- zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
+ for (const [fileName, file] of Object.entries(files)) {
+ zip.file(`files/${fileName}`, await file.arrayBuffer())
}
const arrayBuffer = await zip
@@ -882,90 +886,90 @@ export const SignPage = () => {
return
- {displayInput && (
- <>
-
- Select sigit file
-
-
-
- setSelectedFile(value)}
- />
-
-
- {selectedFile && (
-
-
-
- )}
-
- )}
-
- {submittedBy && Object.entries(files).length > 0 && meta && (
- <>
-
-
-
- )}
-
- {signedStatus === SignedStatus.User_Is_Next_Signer && (
-
-
-
- )}
-
- {isSignerOrCreator && (
-
-
-
- )}
-
- )}
-
-
+
+ {displayInput && (
+ <>
+
+ Select sigit file
+
+
+
+ setSelectedFile(value)}
+ />
+
+
+ {selectedFile && (
+
+
+
+ )}
+
+ )}
+
+ {submittedBy && Object.entries(files).length > 0 && meta && (
+ <>
+
+
+
+ )}
+
+ {signedStatus === SignedStatus.User_Is_Next_Signer && (
+
+
+
+ )}
+
+ {isSignerOrCreator && (
+
+
+
+ )}
+
+ )}
+
+
)
}
diff --git a/src/pages/sign/internal/displayMeta.tsx b/src/pages/sign/internal/displayMeta.tsx
index 03ba364..bb298c6 100644
--- a/src/pages/sign/internal/displayMeta.tsx
+++ b/src/pages/sign/internal/displayMeta.tsx
@@ -34,11 +34,11 @@ import { UserAvatar } from '../../../components/UserAvatar'
import { MetadataController } from '../../../controllers'
import { npubToHex, shorten, hexToNpub, parseJson } from '../../../utils'
import styles from '../style.module.scss'
-import { PdfFile } from '../../../types/drawing.ts'
+import { SigitFile } from '../../../utils/file'
type DisplayMetaProps = {
meta: Meta
- files: { [filename: string]: PdfFile }
+ files: { [fileName: string]: SigitFile }
submittedBy: string
signers: `npub1${string}`[]
viewers: `npub1${string}`[]
@@ -143,12 +143,9 @@ export const DisplayMeta = ({
})
}, [users, submittedBy, metadata])
- const downloadFile = async (filename: string) => {
- const arrayBuffer = await files[filename].file.arrayBuffer()
- if (!arrayBuffer) return
-
- const blob = new Blob([arrayBuffer])
- saveAs(blob, filename)
+ const downloadFile = async (fileName: string) => {
+ const file = files[fileName]
+ saveAs(file)
}
return (
diff --git a/src/pages/sign/style.module.scss b/src/pages/sign/style.module.scss
index 1dbc6c5..dffb039 100644
--- a/src/pages/sign/style.module.scss
+++ b/src/pages/sign/style.module.scss
@@ -2,8 +2,6 @@
.container {
color: $text-color;
- //width: 550px;
- //max-width: 550px;
.inputBlock {
position: relative;
@@ -67,7 +65,7 @@
//z-index: 200;
}
- .fixedBottomForm input[type="text"] {
+ .fixedBottomForm input[type='text'] {
width: 80%;
padding: 10px;
font-size: 16px;
diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx
index c67c2fc..e869c98 100644
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Divider, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Tooltip, Typography } from '@mui/material'
import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input'
import { Event, verifyEvent } from 'nostr-tools'
@@ -26,11 +26,11 @@ import {
import styles from './style.module.scss'
import { useLocation } from 'react-router-dom'
import axios from 'axios'
-import { PdfFile } from '../../types/drawing.ts'
import {
addMarks,
convertToPdfBlob,
- convertToPdfFile,
+ FONT_SIZE,
+ FONT_TYPE,
groupMarksByFileNamePage,
inPx
} from '../../utils/pdf.ts'
@@ -49,6 +49,15 @@ import FileList from '../../components/FileList'
import { CurrentUserFile } from '../../types/file.ts'
import { Mark } from '../../types/mark.ts'
import React from 'react'
+import { convertToSigitFile, SigitFile } from '../../utils/file.ts'
+import { FileDivider } from '../../components/FileDivider.tsx'
+import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
+import { useScale } from '../../hooks/useScale.tsx'
+import {
+ faCircleInfo,
+ faFile,
+ faFileDownload
+} from '@fortawesome/free-solid-svg-icons'
interface PdfViewProps {
files: CurrentUserFile[]
@@ -64,77 +73,90 @@ const SlimPdfView = ({
parsedSignatureEvents
}: PdfViewProps) => {
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
+ const { from } = useScale()
useEffect(() => {
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
pdfRefs.current[currentFile.id]?.scrollIntoView({
- behavior: 'smooth',
- block: 'end'
+ behavior: 'smooth'
})
}
}, [currentFile])
return (
- (null)
const [signatureFileHashes, setSignatureFileHashes] = useState<{
[key: string]: string
@@ -230,7 +252,7 @@ export const VerifyPage = () => {
if (!zip) return
- const files: { [filename: string]: PdfFile } = {}
+ const files: { [fileName: string]: SigitFile } = {}
const fileHashes: { [key: string]: string | null } = {}
const fileNames = Object.values(zip.files).map(
(entry) => entry.name
@@ -246,7 +268,7 @@ export const VerifyPage = () => {
)
if (arrayBuffer) {
- files[fileName] = await convertToPdfFile(
+ files[fileName] = await convertToSigitFile(
arrayBuffer,
fileName!
)
@@ -423,10 +445,15 @@ export const VerifyPage = () => {
const marks = extractMarksFromSignedMeta(updatedMeta)
const marksByPage = groupMarksByFileNamePage(marks)
- for (const [fileName, pdf] of Object.entries(files)) {
- const pages = await addMarks(pdf.file, marksByPage[fileName])
- const blob = await convertToPdfBlob(pages)
- zip.file(`files/${fileName}`, blob)
+ for (const [fileName, file] of Object.entries(files)) {
+ if (file.isPdf) {
+ // Draw marks into PDF file and generate a brand new blob
+ const pages = await addMarks(file, marksByPage[fileName])
+ const blob = await convertToPdfBlob(pages)
+ zip.file(`files/${fileName}`, blob)
+ } else {
+ zip.file(`files/${fileName}`, file)
+ }
}
const arrayBuffer = await zip
@@ -545,6 +572,9 @@ export const VerifyPage = () => {
}
right={ => {
const zip = new JSZip()
const marks = extractMarksFromSignedMeta(meta)
const marksByFileNamePage = groupMarksByFileNamePage(marks)
- for (const [fileName, pdf] of Object.entries(files)) {
- const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
- const blob = await convertToPdfBlob(pages)
- zip.file(`files/${fileName}`, blob)
+ for (const [fileName, file] of Object.entries(files)) {
+ if (file.isPdf) {
+ // Handle PDF Files
+ const pages = await addMarks(file, marksByFileNamePage[fileName])
+ const blob = await convertToPdfBlob(pages)
+ zip.file(`files/${fileName}`, blob)
+ } else {
+ // Handle other files
+ zip.file(`files/${fileName}`, file)
+ }
}
return zip
}
-export { getZipWithFiles }
+/**
+ * Converts a PDF ArrayBuffer to a generic PDF File
+ * @param arrayBuffer of a PDF
+ * @param fileName identifier of the pdf file
+ * @param type optional file type (defaults to pdf)
+ */
+export const toFile = (
+ arrayBuffer: ArrayBuffer,
+ fileName: string,
+ type: string = 'application/pdf'
+): File => {
+ const blob = new Blob([arrayBuffer], { type })
+ return new File([blob], fileName, { type })
+}
+
+export class SigitFile extends File {
+ extension: string
+ isPdf: boolean
+ isImage: boolean
+
+ pages?: PdfPage[]
+ objectUrl?: string
+
+ constructor(file: File) {
+ super([file], file.name, { type: file.type })
+ this.isPdf = isPdf(this)
+ this.isImage = isImage(this)
+ this.extension = extractFileExtension(this.name)
+ }
+
+ async process() {
+ if (this.isPdf) this.pages = await pdfToImages(await this.arrayBuffer())
+ if (this.isImage) this.objectUrl = URL.createObjectURL(this)
+ }
+}
+
+export const getSigitFile = async (file: File) => {
+ const sigitFile = new SigitFile(file)
+ // Process sigit file
+ // - generate pages for PDF files
+ // - generate ObjectRL for image files
+ await sigitFile.process()
+ return sigitFile
+}
+
+/**
+ * Takes an ArrayBuffer and converts to Sigit's Internal File type
+ * @param arrayBuffer
+ * @param fileName
+ */
+export const convertToSigitFile = async (
+ arrayBuffer: ArrayBuffer,
+ fileName: string
+): Promise => {
+ const type = getMediaType(extractFileExtension(fileName))
+ const file = toFile(arrayBuffer, fileName, type)
+ const sigitFile = await getSigitFile(file)
+ return sigitFile
+}
+
+/**
+ * @param fileNames - List of filenames to check
+ * @returns List of extensions and if all are same
+ */
+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
+ }, [])
+
+ const isSame = extensions.every((ext) => ext === extensions[0])
+
+ return { extensions, isSame }
+}
+
+/**
+ * @param fileName - Filename to check
+ * @returns Extension string
+ */
+export const extractFileExtension = (fileName: string) => {
+ const parts = fileName.split('.')
+ return parts[parts.length - 1]
+}
+
+export const getMediaType = (extension: string) => {
+ return MOST_COMMON_MEDIA_TYPES.get(extension)
+}
+
+export const isImage = (file: File) => {
+ const validImageMediaTypes = [
+ 'image/png',
+ 'image/jpeg',
+ 'image/jpg',
+ 'image/gif',
+ 'image/svg+xml',
+ 'image/bmp',
+ 'image/x-icon'
+ ]
+
+ return validImageMediaTypes.includes(file.type.toLowerCase())
+}
diff --git a/src/utils/mark.ts b/src/utils/mark.ts
index effa2ba..44540c4 100644
--- a/src/utils/mark.ts
+++ b/src/utils/mark.ts
@@ -47,7 +47,7 @@ const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => {
/**
* Takes Signed Doc Signatures part of Meta and extracts
- * all Marks into one flar array, regardless of the user.
+ * all Marks into one flat array, regardless of the user.
* @param meta
*/
const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
diff --git a/src/utils/meta.ts b/src/utils/meta.ts
index 0bee969..c915f66 100644
--- a/src/utils/meta.ts
+++ b/src/utils/meta.ts
@@ -2,6 +2,12 @@ import { CreateSignatureEventContent, Meta } from '../types'
import { fromUnixTimestamp, parseJson } from '.'
import { Event, verifyEvent } from 'nostr-tools'
import { toast } from 'react-toastify'
+import { extractFileExtensions } from './file'
+import { handleError } from '../types/errors'
+import {
+ MetaParseError,
+ MetaParseErrorType
+} from '../types/errors/MetaParseError'
export enum SignStatus {
Signed = 'Signed',
@@ -16,58 +22,6 @@ export enum SigitStatus {
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
@@ -88,7 +42,7 @@ export const parseNostrEvent = async (raw: string): Promise => {
const event = await parseJson(raw)
return event
} catch (error) {
- throw new SigitMetaParseError(SigitMetaParseErrorType.PARSE_ERROR_EVENT, {
+ throw new MetaParseError(MetaParseErrorType.PARSE_ERROR_EVENT, {
cause: handleError(error),
context: raw
})
@@ -108,8 +62,8 @@ export const parseCreateSignatureEventContent = async (
await parseJson(raw)
return createSignatureEventContent
} catch (error) {
- throw new SigitMetaParseError(
- SigitMetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
+ throw new MetaParseError(
+ MetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
{
cause: handleError(error),
context: raw
@@ -164,7 +118,7 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
return sigitInfo
} catch (error) {
- if (error instanceof SigitMetaParseError) {
+ if (error instanceof MetaParseError) {
toast.error(error.message)
console.error(error.name, error.message, error.cause, error.context)
} else {
@@ -172,29 +126,3 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
}
}
}
-
-/**
- * @param fileNames - List of filenames to check
- * @returns List of extensions and if all are same
- */
-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
- }, [])
-
- const isSame = extensions.every((ext) => ext === extensions[0])
-
- return { extensions, isSame }
-}
-
-/**
- * @param fileName - Filename to check
- * @returns Extension string
- */
-export const extractFileExtension = (fileName: string) => {
- return fileName.split('.').pop()
-}
diff --git a/src/utils/nostr.ts b/src/utils/nostr.ts
index 9bade2f..eceb8d8 100644
--- a/src/utils/nostr.ts
+++ b/src/utils/nostr.ts
@@ -11,6 +11,7 @@ import {
getEventHash,
getPublicKey,
kinds,
+ nip04,
nip19,
nip44,
verifyEvent
@@ -30,10 +31,26 @@ import { AuthState, Keys } from '../store/auth/types'
import { RelaysState } from '../store/relays/types'
import store from '../store/store'
import { Meta, SignedEvent, UserAppData } from '../types'
-import { getHash } from './hash'
+import { getDefaultRelayMap } from './relays'
import { parseJson, removeLeadingSlash } from './string'
import { timeout } from './utils'
-import { getDefaultRelayMap } from './relays'
+import { getHash } from './hash'
+
+/**
+ * Generates a `d` tag for userAppData
+ */
+const getDTagForUserAppData = async (): Promise => {
+ const isLoggedIn = store.getState().auth?.loggedIn
+ const pubkey = store.getState().auth?.usersPubkey
+
+ if (!isLoggedIn || !pubkey) {
+ throw new Error(
+ 'For generating d tag user must be logged in and a valid pubkey should exists in app Store'
+ )
+ }
+
+ return getHash(`938_${pubkey}`)
+}
/**
* @param hexKey hex private or public key
@@ -377,13 +394,13 @@ export const getUsersAppData = async (): Promise => {
}
// Generate an identifier for the user's nip78
- const hash = await getHash('938' + usersPubkey)
- if (!hash) return null
+ const dTag = await getDTagForUserAppData()
+ if (!dTag) return null
// Define a filter for fetching events
const filter: Filter = {
kinds: [kinds.Application],
- '#d': [hash]
+ '#d': [dTag]
}
const encryptedContent = await relayController
@@ -578,14 +595,14 @@ export const updateUsersAppData = async (meta: Meta) => {
if (!encryptedContent) return null
// generate the identifier for user's appData event
- const hash = await getHash('938' + usersPubkey)
- if (!hash) return null
+ const dTag = await getDTagForUserAppData()
+ if (!dTag) return null
const updatedEvent: UnsignedEvent = {
kind: kinds.Application,
pubkey: usersPubkey!,
created_at: unixNow(),
- tags: [['d', hash]],
+ tags: [['d', dTag]],
content: encryptedContent
}
@@ -693,9 +710,10 @@ const uploadUserAppDataToBlossom = async (
// Convert the private key from hex to bytes
const secretKey = hexToBytes(privateKey)
// Encrypt the JSON string using the secret key
- const encrypted = nip44.v2.encrypt(
- stringified,
- nip44ConversationKey(secretKey, getPublicKey(secretKey))
+ const encrypted = await nip04.encrypt(
+ secretKey,
+ getPublicKey(secretKey),
+ stringified
)
// Create a blob from the encrypted data
@@ -788,10 +806,7 @@ const getUserAppDataFromBlossom = async (url: string, privateKey: string) => {
const pubkey = getPublicKey(secret)
// Decrypt the encrypted data using the secret and public key
- const decrypted = nip44.v2.decrypt(
- encrypted,
- nip44ConversationKey(secret, pubkey)
- )
+ const decrypted = await nip04.decrypt(secret, pubkey, encrypted)
// Parse the decrypted JSON content
const parsedContent = await parseJson<{
diff --git a/src/utils/pdf.ts b/src/utils/pdf.ts
index ce2f132..763d582 100644
--- a/src/utils/pdf.ts
+++ b/src/utils/pdf.ts
@@ -1,18 +1,15 @@
-import { PdfFile, PdfPage } from '../types/drawing.ts'
-import * as PDFJS from 'pdfjs-dist'
+import { PdfPage } from '../types/drawing.ts'
import { PDFDocument } from 'pdf-lib'
import { Mark } from '../types/mark.ts'
-PDFJS.GlobalWorkerOptions.workerSrc = new URL(
- 'pdfjs-dist/build/pdf.worker.min.mjs',
- import.meta.url
-).toString()
+import * as PDFJS from 'pdfjs-dist'
+import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
+if (!PDFJS.GlobalWorkerOptions.workerPort) {
+ // Use workerPort and allow worker to be shared between all getDocument calls
+ const worker = new PDFJSWorker()
+ PDFJS.GlobalWorkerOptions.workerPort = worker
+}
-/**
- * Scale between the PDF page's natural size and rendered size
- * @constant {number}
- */
-const SCALE: number = 3
/**
* Defined font size used when generating a PDF. Currently it is difficult to fully
* correlate font size used at the time of filling in / drawing on the PDF
@@ -20,58 +17,28 @@ const SCALE: number = 3
* This should be fixed going forward.
* Switching to PDF-Lib will most likely make this problem redundant.
*/
-const FONT_SIZE: number = 40
+export const FONT_SIZE: number = 16
/**
* Current font type used when generating a PDF.
*/
-const FONT_TYPE: string = 'Arial'
+export const FONT_TYPE: string = 'Arial'
/**
- * Converts a PDF ArrayBuffer to a generic PDF File
- * @param arrayBuffer of a PDF
- * @param fileName identifier of the pdf file
- */
-const toFile = (arrayBuffer: ArrayBuffer, fileName: string): File => {
- const blob = new Blob([arrayBuffer], { type: 'application/pdf' })
- return new File([blob], fileName, { type: 'application/pdf' })
-}
-
-/**
- * Converts a generic PDF File to Sigit's internal Pdf File type
- * @param {File} file
- * @return {PdfFile} Sigit's internal PDF File type
- */
-const toPdfFile = async (file: File): Promise => {
- const data = await readPdf(file)
- const pages = await pdfToImages(data)
- return { file, pages, expanded: false }
-}
-/**
- * Transforms an array of generic PDF Files into an array of Sigit's
- * internal representation of Pdf Files
- * @param selectedFiles - an array of generic PDF Files
- * @return PdfFile[] - an array of Sigit's internal Pdf File type
- */
-const toPdfFiles = async (selectedFiles: File[]): Promise => {
- return Promise.all(selectedFiles.filter(isPdf).map(toPdfFile))
-}
-
-/**
- * A utility that transforms a drawing coordinate number into a CSS-compatible string
+ * A utility that transforms a drawing coordinate number into a CSS-compatible pixel string
* @param coordinate
*/
-const inPx = (coordinate: number): string => `${coordinate}px`
+export const inPx = (coordinate: number): string => `${coordinate}px`
/**
* A utility that checks if a given file is of the pdf type
* @param file
*/
-const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
+export const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
/**
* Reads the pdf file binaries
*/
-const readPdf = (file: File): Promise => {
+export const readPdf = (file: File): Promise => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
@@ -95,33 +62,55 @@ const readPdf = (file: File): Promise => {
})
}
+export const getInnerContentWidth = () => {
+ // Fetch the first container element we find
+ const element = document.querySelector('#content-preview')
+
+ if (element) {
+ const style = getComputedStyle(element)
+
+ // Calculate width without padding
+ const widthWithoutPadding =
+ element.clientWidth - parseFloat(style.padding) * 2
+
+ return widthWithoutPadding
+ }
+
+ // Default value
+ return 620
+}
+
/**
* Converts pdf to the images
* @param data pdf file bytes
*/
-const pdfToImages = async (data: string | ArrayBuffer): Promise => {
- const images: string[] = []
+export const pdfToImages = async (
+ data: string | ArrayBuffer
+): Promise => {
+ const pages: PdfPage[] = []
const pdf = await PDFJS.getDocument(data).promise
const canvas = document.createElement('canvas')
+ const width = getInnerContentWidth()
for (let i = 0; i < pdf.numPages; i++) {
const page = await pdf.getPage(i + 1)
- const viewport = page.getViewport({ scale: SCALE })
+
+ const originalViewport = page.getViewport({ scale: 1 })
+ const scale = width / originalViewport.width
+ const viewport = page.getViewport({ scale: scale })
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
+
await page.render({ canvasContext: context!, viewport: viewport }).promise
- images.push(canvas.toDataURL())
+ pages.push({
+ image: canvas.toDataURL(),
+ width: originalViewport.width,
+ drawnFields: []
+ })
}
- return Promise.resolve(
- images.map((image) => {
- return {
- image,
- drawnFields: []
- }
- })
- )
+ return pages
}
/**
@@ -129,7 +118,7 @@ const pdfToImages = async (data: string | ArrayBuffer): Promise => {
* Returns an array of encoded images where each image is a representation
* of a PDF page with completed and signed marks from all users
*/
-const addMarks = async (
+export const addMarks = async (
file: File,
marksPerPage: { [key: string]: Mark[] }
) => {
@@ -141,34 +130,39 @@ const addMarks = async (
for (let i = 0; i < pdf.numPages; i++) {
const page = await pdf.getPage(i + 1)
- const viewport = page.getViewport({ scale: SCALE })
+ const viewport = page.getViewport({ scale: 1 })
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
- await page.render({ canvasContext: context!, viewport: viewport }).promise
+ if (context) {
+ await page.render({ canvasContext: context, viewport: viewport }).promise
- if (marksPerPage && Object.hasOwn(marksPerPage, i))
- marksPerPage[i]?.forEach((mark) => draw(mark, context!))
+ if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
+ marksPerPage[i]?.forEach((mark) => draw(mark, context))
+ }
- images.push(canvas.toDataURL())
+ images.push(canvas.toDataURL())
+ }
}
- return Promise.resolve(images)
+ canvas.remove()
+
+ return images
}
/**
* Utility to scale mark in line with the PDF-to-PNG scale
*/
-const scaleMark = (mark: Mark): Mark => {
+export const scaleMark = (mark: Mark, scale: number): Mark => {
const { location } = mark
return {
...mark,
location: {
...location,
- width: location.width * SCALE,
- height: location.height * SCALE,
- left: location.left * SCALE,
- top: location.top * SCALE
+ width: location.width * scale,
+ height: location.height * scale,
+ left: location.left * scale,
+ top: location.top * scale
}
}
}
@@ -177,29 +171,32 @@ const scaleMark = (mark: Mark): Mark => {
* Utility to check if a Mark has value
* @param mark
*/
-const hasValue = (mark: Mark): boolean => !!mark.value
+export const hasValue = (mark: Mark): boolean => !!mark.value
/**
* Draws a Mark on a Canvas representation of a PDF Page
* @param mark to be drawn
* @param ctx a Canvas representation of a specific PDF Page
*/
-const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
+export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
const { location } = mark
-
- ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE
- ctx!.fillStyle = 'black'
- const textMetrics = ctx!.measureText(mark.value!)
+ ctx.font = FONT_SIZE + 'px ' + FONT_TYPE
+ ctx.fillStyle = 'black'
+ const textMetrics = ctx.measureText(mark.value!)
+ const textHeight =
+ textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent
const textX = location.left + (location.width - textMetrics.width) / 2
- const textY = location.top + (location.height + parseInt(ctx!.font)) / 2
- ctx!.fillText(mark.value!, textX, textY)
+ const textY = location.top + (location.height + textHeight) / 2
+ ctx.fillText(mark.value!, textX, textY)
}
/**
* Takes an array of encoded PDF pages and returns a blob that is a complete PDF file
* @param markedPdfPages
*/
-const convertToPdfBlob = async (markedPdfPages: string[]): Promise => {
+export const convertToPdfBlob = async (
+ markedPdfPages: string[]
+): Promise => {
const pdfDoc = await PDFDocument.create()
for (const page of markedPdfPages) {
@@ -217,30 +214,15 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise => {
return new Blob([pdfBytes], { type: 'application/pdf' })
}
-/**
- * Takes an ArrayBuffer of a PDF file and converts to Sigit's Internal Pdf File type
- * @param arrayBuffer
- * @param fileName
- */
-const convertToPdfFile = async (
- arrayBuffer: ArrayBuffer,
- fileName: string
-): Promise => {
- const file = toFile(arrayBuffer, fileName)
- return toPdfFile(file)
-}
-
/**
* @param marks - an array of Marks
* @function hasValue removes any Mark without a property
- * @function scaleMark scales remaining marks in line with SCALE
* @function byPage groups remaining Marks by their page marks.location.page
*/
-const groupMarksByFileNamePage = (marks: Mark[]) => {
+export const groupMarksByFileNamePage = (marks: Mark[]) => {
return marks
.filter(hasValue)
- .map(scaleMark)
- .reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
+ .reduce<{ [fileName: string]: { [page: number]: Mark[] } }>(byPage, {})
}
/**
@@ -251,30 +233,19 @@ const groupMarksByFileNamePage = (marks: Mark[]) => {
* @param obj - accumulator in the reducer callback
* @param mark - current value, i.e. Mark being examined
*/
-const byPage = (
+export const byPage = (
obj: { [filename: string]: { [page: number]: Mark[] } },
mark: Mark
) => {
- const filename = mark.fileName
+ const fileName = mark.fileName
const pageNumber = mark.location.page
- const pages = obj[filename] ?? {}
+ const pages = obj[fileName] ?? {}
const marks = pages[pageNumber] ?? []
return {
...obj,
- [filename]: {
+ [fileName]: {
...pages,
[pageNumber]: [...marks, mark]
}
}
}
-
-export {
- toFile,
- toPdfFile,
- toPdfFiles,
- inPx,
- convertToPdfFile,
- addMarks,
- convertToPdfBlob,
- groupMarksByFileNamePage
-}
diff --git a/src/utils/relays.ts b/src/utils/relays.ts
index c38767c..5b79f3d 100644
--- a/src/utils/relays.ts
+++ b/src/utils/relays.ts
@@ -30,7 +30,6 @@ const findRelayListAndUpdateCache = async (
authors: [hexKey]
}
- console.count('findRelayListAndUpdateCache')
const event = await relayController.fetchEvent(eventFilter, lookUpRelays)
if (event) {
await localCache.addUserRelayListMetadata(event)
diff --git a/src/utils/sign.ts b/src/utils/sign.ts
index 3369c54..ff67e44 100644
--- a/src/utils/sign.ts
+++ b/src/utils/sign.ts
@@ -31,4 +31,16 @@ const getLastSignersSig = (
}
}
-export { getLastSignersSig }
+/**
+ * Checks if all signers have signed the sigit
+ * @param signers - an array of npubs of all signers from the Sigit
+ * @param signedBy - an array of npubs that have signed it already
+ */
+const isFullySigned = (
+ signers: `npub1${string}`[],
+ signedBy: `npub1${string}`[]
+): boolean => {
+ return signers.every((signer) => signedBy.includes(signer))
+}
+
+export { getLastSignersSig, isFullySigned }
diff --git a/src/utils/string.ts b/src/utils/string.ts
index 9ac0f05..14eee83 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -1,5 +1,5 @@
/**
- * Function will replace the middle of the string with 3 dots if length greater then
+ * Function will replace the middle of the string with ellipsis if length greater then
* offset value
* @param str string to shorten
* @param offset of how many chars to keep in the beginning and the end
@@ -9,10 +9,7 @@ export const shorten = (str: string, offset = 9) => {
// return original string if it is not long enough
if (str.length < offset * 2 + 4) return str
- return `${str.slice(0, offset)}...${str.slice(
- str.length - offset,
- str.length
- )}`
+ return `${str.slice(0, offset)}…${str.slice(str.length - offset, str.length)}`
}
export const stringToHex = (str: string) => {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index bde528b..f32e14e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,5 +1,5 @@
-import { PdfFile } from '../types/drawing.ts'
import { CurrentUserFile } from '../types/file.ts'
+import { SigitFile } from './file.ts'
export const compareObjects = (
obj1: object | null | undefined,
@@ -75,13 +75,13 @@ export const timeout = (ms: number = 60000) => {
* @param creatorFileHashes
*/
export const getCurrentUserFiles = (
- files: { [filename: string]: PdfFile },
+ files: { [filename: string]: SigitFile },
fileHashes: { [key: string]: string | null },
creatorFileHashes: { [key: string]: string }
): CurrentUserFile[] => {
- return Object.entries(files).map(([filename, pdfFile], index) => {
+ return Object.entries(files).map(([filename, file], index) => {
return {
- pdfFile,
+ file,
filename,
id: index + 1,
...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
@@ -89,3 +89,32 @@ export const getCurrentUserFiles = (
}
})
}
+
+/**
+ * Utility function that generates a promise with a callback on each array item
+ * and retuns only non-null fulfilled results
+ * @param array
+ * @param cb callback that generates a promise
+ * @returns Array with the non-null results
+ */
+export const settleAllFullfilfedPromises = async (
+ array: Item[],
+ cb: (arg: Item) => Promise
+) => {
+ // Run the callback on the array to get promises
+ const promises = array.map(cb)
+
+ // Use Promise.allSettled to wait for all promises to settle
+ const results = await Promise.allSettled(promises)
+
+ // Extract non-null values from fulfilled promises in a single pass
+ return results.reduce[]>((acc, result) => {
+ if (result.status === 'fulfilled') {
+ const value = result.value
+ if (value) {
+ acc.push(value)
+ }
+ }
+ return acc
+ }, [])
+}
+ {sigitFiles.map((file, i) => {
return (
-
-
((acc, result) => {
- if (result.status === 'fulfilled') {
- const value = result.value
- if (value) {
- acc.push(value)
- }
- }
- return acc
- }, [])
-
// Check if any relays are connected
if (relays.length === 0) {
throw new Error('No relay is connected to fetch events!')
@@ -228,23 +219,10 @@ export class RelayController {
}
// connect to all specified relays
- const relayPromises = relayUrls.map((relayUrl) => {
- return this.connectRelay(relayUrl)
- })
-
- // Use Promise.allSettled to wait for all promises to settle
- const results = await Promise.allSettled(relayPromises)
-
- // Extract non-null values from fulfilled promises in a single pass
- const relays = results.reduce((acc, result) => {
- if (result.status === 'fulfilled') {
- const value = result.value
- if (value) {
- acc.push(value)
- }
- }
- return acc
- }, [])
+ const relays = await settleAllFullfilfedPromises(
+ relayUrls,
+ this.connectRelay
+ )
// Check if any relays are connected
if (relays.length === 0) {
@@ -292,24 +270,11 @@ export class RelayController {
}
// connect to all specified relays
- const relayPromises = relayUrls.map((relayUrl) =>
- this.connectRelay(relayUrl)
+ const relays = await settleAllFullfilfedPromises(
+ relayUrls,
+ this.connectRelay
)
- // Use Promise.allSettled to wait for all promises to settle
- const results = await Promise.allSettled(relayPromises)
-
- // Extract non-null values from fulfilled promises in a single pass
- const relays = results.reduce((acc, result) => {
- if (result.status === 'fulfilled') {
- const value = result.value
- if (value) {
- acc.push(value)
- }
- }
- return acc
- }, [])
-
// Check if any relays are connected
if (relays.length === 0) {
throw new Error('No relay is connected to publish event!')
diff --git a/src/hooks/useScale.tsx b/src/hooks/useScale.tsx
new file mode 100644
index 0000000..406928b
--- /dev/null
+++ b/src/hooks/useScale.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { singletonHook } from 'react-singleton-hook'
+import { getInnerContentWidth } from '../utils/pdf'
+
+const noScaleInit = {
+ to: (_: number, v: number) => v,
+ from: (_: number, v: number) => v
+}
+
+const useScaleImpl = () => {
+ const [width, setWidth] = useState(getInnerContentWidth())
+
+ // Get the scale based on the original width
+ const scale = (originalWidth: number) => {
+ return width / originalWidth
+ }
+
+ // Get the original pixel value
+ const to = (originalWidth: number, value: number) => {
+ return value / scale(originalWidth)
+ }
+
+ // Get the scaled pixel value
+ const from = (originalWidth: number, value: number) => {
+ return value * scale(originalWidth)
+ }
+
+ const resize = () => {
+ setWidth(getInnerContentWidth())
+ }
+
+ useEffect(() => {
+ resize()
+
+ window.addEventListener('resize', resize)
+ return () => {
+ window.removeEventListener('resize', resize)
+ }
+ }, [])
+
+ return { to, from }
+}
+
+export const useScale = singletonHook(noScaleInit, useScaleImpl, {
+ unmountIfNoConsumers: true
+})
diff --git a/src/hooks/useSigitMeta.tsx b/src/hooks/useSigitMeta.tsx
index fea5154..088940e 100644
--- a/src/hooks/useSigitMeta.tsx
+++ b/src/hooks/useSigitMeta.tsx
@@ -11,7 +11,6 @@ import {
hexToNpub,
parseNostrEvent,
parseCreateSignatureEventContent,
- SigitMetaParseError,
SigitStatus,
SignStatus
} from '../utils'
@@ -21,6 +20,7 @@ import { Event } from 'nostr-tools'
import store from '../store/store'
import { AuthState } from '../store/auth/types'
import { NostrController } from '../controllers'
+import { MetaParseError } from '../types/errors/MetaParseError'
/**
* Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,
@@ -247,7 +247,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
)
}
} catch (error) {
- if (error instanceof SigitMetaParseError) {
+ if (error instanceof MetaParseError) {
toast.error(error.message)
}
console.error(error)
diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx
index ac233cc..f3962eb 100644
--- a/src/layouts/Main.tsx
+++ b/src/layouts/Main.tsx
@@ -26,7 +26,6 @@ import {
} from '../utils'
import { useAppSelector } from '../hooks'
import styles from './style.module.scss'
-import { Footer } from '../components/Footer/Footer'
export const MainLayout = () => {
const dispatch: Dispatch = useDispatch()
@@ -160,7 +159,6 @@ export const MainLayout = () => {
>
) => {
+ const [tab, setTab] = useState(DEFAULT_TAB)
+ const ref = useRef(null)
+ const tabsRefs = useRef<{ [id: string]: HTMLDivElement | null }>({})
+ const handleNavClick = (id: string) => {
+ if (ref.current && tabsRefs.current) {
+ const x = tabsRefs.current[id]?.offsetLeft
+ ref.current.scrollTo({
+ left: x,
+ behavior: 'smooth'
+ })
+ }
+ }
+ const isActive = (id: string) => id === tab
+
+ useEffect(() => {
+ setTab(DEFAULT_TAB)
+ handleNavClick(DEFAULT_TAB)
+ }, [])
+
+ useEffect(() => {
+ const tabs = tabsRefs.current
+ // Set up the observer
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setTab(entry.target.id)
+ }
+ })
+ },
+ {
+ root: ref.current,
+ threshold: 0.5,
+ rootMargin: '-20px'
+ }
+ )
+
+ if (tabs) {
+ Object.values(tabs).forEach((tab) => {
+ if (tab) observer.observe(tab)
+ })
+ }
+
+ return () => {
+ if (tabs) {
+ Object.values(tabs).forEach((tab) => {
+ if (tab) observer.unobserve(tab)
+ })
+ }
+ }
+ }, [])
+
return (
-
)
}
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index a7b205b..ca4bb87 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -20,6 +20,7 @@ import {
} from '../../utils'
import styles from './style.module.scss'
import { Container } from '../../components/Container'
+import { Footer } from '../../components/Footer/Footer'
export const ProfilePage = () => {
const navigate = useNavigate()
@@ -41,6 +42,16 @@ export const ProfilePage = () => {
const [isLoading, setIsLoading] = useState(true)
const [loadingSpinnerDesc] = useState('Fetching metadata')
+ const profileName =
+ pubkey &&
+ profileMetadata &&
+ truncate(
+ profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
+ {
+ length: 16
+ }
+ )
+
useEffect(() => {
if (npub) {
try {
@@ -165,7 +176,10 @@ export const ProfilePage = () => {
className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
>
{profileMetadata && profileMetadata.banner ? (
- 
+
) : (
''
)}
@@ -185,6 +199,7 @@ export const ProfilePage = () => {
})
@@ -224,14 +239,7 @@ export const ProfilePage = () => {
variant="h6"
className={styles.bold}
>
- {truncate(
- profileMetadata.display_name ||
- profileMetadata.name ||
- hexToNpub(pubkey),
- {
- length: 16
- }
- )}
+ {profileName}
)}
@@ -285,6 +293,7 @@ export const ProfilePage = () => {
)}
+
)
}
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index b08ea51..599bb90 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom'
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
import { State } from '../../store/rootReducer'
import { Container } from '../../components/Container'
+import { Footer } from '../../components/Footer/Footer'
export const SettingsPage = () => {
const theme = useTheme()
@@ -43,56 +44,59 @@ export const SettingsPage = () => {
}
return (
-
- {pdfFile ? (
- getPdfPages(pdfFile, i)
- ) : (
-
+
- File Separator
-
- )}
+ {i < selectedFiles.length - 1 &&
)
})}
diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss
index 142f88a..62fa688 100644
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/src/components/DrawPDFFields/style.module.scss
@@ -8,17 +8,6 @@
}
.pdfImageWrapper {
- position: relative;
- -webkit-user-select: none;
- user-select: none;
-
- > img {
- display: block;
- max-width: 100%;
- max-height: 100%;
- object-fit: contain; /* Ensure the image fits within the container */
- }
-
&.drawing {
cursor: crosshair;
}
@@ -84,35 +73,8 @@
justify-content: center;
align-items: center;
bottom: -60px;
- min-width: 170px;
+ min-width: 193px;
min-height: 30px;
- background: #fff;
padding: 5px 0;
}
}
-
-.fileWrapper {
- display: flex;
- flex-direction: column;
- gap: 15px;
- position: relative;
- scroll-margin-top: $header-height + $body-vertical-padding;
-}
-
-.view {
- display: flex;
- flex-direction: column;
- gap: 25px;
-}
-
-.otherFile {
- border-radius: 4px;
- background: rgba(255, 255, 255, 0.5);
- height: 100px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- color: rgba(0, 0, 0, 0.25);
- font-size: 14px;
-}
diff --git a/src/components/ExtensionFileBox.tsx b/src/components/ExtensionFileBox.tsx
new file mode 100644
index 0000000..f36d38c
--- /dev/null
+++ b/src/components/ExtensionFileBox.tsx
@@ -0,0 +1,6 @@
+interface ExtensionFileBoxProps {
+ extension: string
+}
+export const ExtensionFileBox = ({ extension }: ExtensionFileBoxProps) => (
+
+ File Separator
+
+)
diff --git a/src/components/FileList/index.tsx b/src/components/FileList/index.tsx
index 53557a5..a47ace7 100644
--- a/src/components/FileList/index.tsx
+++ b/src/components/FileList/index.tsx
@@ -22,26 +22,26 @@ const FileList = ({
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
return (
void
otherUserMarks: Mark[]
@@ -18,6 +21,8 @@ interface PdfPageProps {
* Responsible for rendering a single Pdf Page and its Marks
*/
const PdfPageItem = ({
+ fileName,
+ pageIndex,
page,
currentUserMarks,
handleMarkClick,
@@ -28,45 +33,49 @@ const PdfPageItem = ({
useEffect(() => {
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
markRefs.current[selectedMark.id]?.scrollIntoView({
- behavior: 'smooth',
- block: 'end'
+ behavior: 'smooth'
})
}
}, [selectedMark])
const markRefs = useRef<(HTMLDivElement | null)[]>([])
+ const { from } = useScale()
+
return (
-
- This is a {extension} file
-
+
+ {file.isPdf && getPdfPages(file, i)}
+ {file.isImage && (
+ 
+ )}
+ {!(file.isPdf || file.isImage) && (
+
- {i < selectedFiles.length - 1 && (
- This is a {extension} file
+)
diff --git a/src/components/FileDivider.tsx b/src/components/FileDivider.tsx
new file mode 100644
index 0000000..b66b8f4
--- /dev/null
+++ b/src/components/FileDivider.tsx
@@ -0,0 +1,12 @@
+import Divider from '@mui/material/Divider/Divider'
+
+export const FileDivider = () => (
+
- (
+ (
+ { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
+ ref
+ ) => {
+ const { location } = userMark.mark
+ const handleClick = () => handleMarkClick(userMark.mark.id)
+ const isEdited = () => selectedMark?.mark.id === userMark.mark.id
+ const getMarkValue = () =>
+ isEdited() ? selectedMarkValue : userMark.currentValue
+ const { from } = useScale()
+ return (
+
}
right={meta !== null &&
-
+ -
- {files.map((file: CurrentUserFile) => (
-
- setCurrentFile(file)}
- >
- {file.id}--+{file.filename}-
-
+ {files.map((currentUserFile: CurrentUserFile) => (
+
- setCurrentFile(currentUserFile)}
+ >
+ {currentUserFile.id}++-{currentUserFile.file.name}+- {file.isHashValid &&-
} -
- ))}
-
- setCurrentFile(currentUserFile)}
+ >
+
+ {currentUserFile.isHashValid && (
+
+
+ ))}
+
diff --git a/src/components/FileList/style.module.scss b/src/components/FileList/style.module.scss
index 22d8515..a05fcbd 100644
--- a/src/components/FileList/style.module.scss
+++ b/src/components/FileList/style.module.scss
@@ -1,12 +1,3 @@
-.container {
- border-radius: 4px;
- background: white;
- padding: 15px;
- display: flex;
- flex-direction: column;
- grid-gap: 0px;
-}
-
.filesPageContainer {
width: 100%;
display: grid;
@@ -15,18 +6,6 @@
flex-grow: 1;
}
-ul {
- list-style-type: none; /* Removes bullet points */
- margin: 0; /* Removes default margin */
- padding: 0; /* Removes default padding */
-}
-
-li {
- list-style-type: none; /* Removes the bullets */
- margin: 0; /* Removes any default margin */
- padding: 0; /* Removes any default padding */
-}
-
.wrap {
display: flex;
flex-direction: column;
@@ -34,14 +13,16 @@ li {
}
.files {
+ border-radius: 4px;
+ background: white;
+ padding: 15px;
+
display: flex;
flex-direction: column;
width: 100%;
grid-gap: 15px;
- max-height: 350px;
- overflow: auto;
- padding: 0 5px 0 0;
- margin: 0 -5px 0 0;
+ overflow-y: auto;
+ overflow-x: none;
}
.files::-webkit-scrollbar {
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index eac4166..17140e4 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -4,125 +4,128 @@ import styles from './style.module.scss'
import { Container } from '../Container'
import nostrImage from '../../assets/images/nostr.gif'
import { appPublicRoutes } from '../../routes'
+import { createPortal } from 'react-dom'
-export const Footer = () => (
-
-)
+
+
+ Built by
+
+ Nostr Dev
+ {' '}
+ 2024.
+
+ ,
+ document.getElementById('root')!
+ )
diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx
index 980a763..2c6f4e5 100644
--- a/src/components/LoadingSpinner/index.tsx
+++ b/src/components/LoadingSpinner/index.tsx
@@ -1,18 +1,35 @@
import styles from './style.module.scss'
interface Props {
- desc: string
+ desc?: string
+ variant?: 'small' | 'default'
}
export const LoadingSpinner = (props: Props) => {
- const { desc } = props
+ const { desc, variant = 'default' } = props
- return (
-
-
- )
+ switch (variant) {
+ case 'small':
+ return (
+
-
- {desc && {desc}}
-
-
+
+
+ )
+
+ default:
+ return (
+
+
+ )
+ }
}
diff --git a/src/components/LoadingSpinner/style.module.scss b/src/components/LoadingSpinner/style.module.scss
index 75b2609..e1a5978 100644
--- a/src/components/LoadingSpinner/style.module.scss
+++ b/src/components/LoadingSpinner/style.module.scss
@@ -2,34 +2,48 @@
.loadingSpinnerOverlay {
position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
+ backdrop-filter: blur(10px);
+}
- .loadingSpinnerContainer {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+.loadingSpinnerContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ &[data-variant='default'] {
+ width: 100%;
+ max-width: 500px;
+ margin: 25px 20px;
+ background: $overlay-background-color;
+ border-radius: 4px;
+ box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
}
-
- .loadingSpinner {
- background: url('/favicon.png') no-repeat center / cover;
- width: 40px;
- height: 40px;
- animation: spin 1s linear infinite;
+ &[data-variant='small'] {
+ min-height: 250px;
}
}
+.loadingSpinner {
+ background: url('/favicon.png') no-repeat center / cover;
+ margin: 40px 25px;
+ width: 65px;
+ height: 65px;
+ animation: spin 1s linear infinite;
+}
+
.loadingSpinnerDesc {
- color: white;
- margin-top: 13px;
+ width: 100%;
+ padding: 15px;
+ border-top: solid 1px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ color: rgba(0, 0, 0, 0.5);
font-size: 16px;
font-weight: 400;
diff --git a/src/components/MarkFormField/style.module.scss b/src/components/MarkFormField/style.module.scss
index 1275038..9f4b092 100644
--- a/src/components/MarkFormField/style.module.scss
+++ b/src/components/MarkFormField/style.module.scss
@@ -1,11 +1,19 @@
+@import '../../styles/sizes.scss';
+
.container {
- width: 100%;
display: flex;
flex-direction: column;
position: fixed;
- bottom: 0;
- right: 0;
- left: 0;
+
+ @media only screen and (min-width: 768px) {
+ bottom: 0;
+ right: 0;
+ left: 0;
+ }
+ bottom: $tabs-height + 5px;
+ right: 5px;
+ left: 5px;
+
align-items: center;
z-index: 1000;
@@ -107,7 +115,7 @@
.actions {
background: white;
width: 100%;
- border-radius: 4px;
+ border-radius: 5px;
padding: 10px 20px;
display: none;
flex-direction: column;
diff --git a/src/components/PDFView/PdfItem.tsx b/src/components/PDFView/PdfItem.tsx
index c502bb4..f1dbe87 100644
--- a/src/components/PDFView/PdfItem.tsx
+++ b/src/components/PDFView/PdfItem.tsx
@@ -1,12 +1,13 @@
-import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { SigitFile } from '../../utils/file.ts'
+import { ExtensionFileBox } from '../ExtensionFileBox.tsx'
import PdfPageItem from './PdfPageItem.tsx'
interface PdfItemProps {
currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void
otherUserMarks: Mark[]
- pdfFile: PdfFile
+ file: SigitFile
selectedMark: CurrentUserMark | null
selectedMarkValue: string
}
@@ -15,7 +16,7 @@ interface PdfItemProps {
* Responsible for displaying pages of a single Pdf File.
*/
const PdfItem = ({
- pdfFile,
+ file,
currentUserMarks,
handleMarkClick,
selectedMarkValue,
@@ -31,19 +32,27 @@ const PdfItem = ({
const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
return marks.filter((mark) => mark.location.page === page)
}
- return pdfFile.pages.map((page, i) => {
- return (
-
+
+ {desc &&
+ {desc}
} +
- {getMarkValue()}
-
- )
-}
+const PdfMarkItem = forwardRef
+ {getMarkValue()}
+
+ )
+ }
+)
export default PdfMarkItem
diff --git a/src/components/PDFView/PdfMarking.tsx b/src/components/PDFView/PdfMarking.tsx
index 9fff924..61968b0 100644
--- a/src/components/PDFView/PdfMarking.tsx
+++ b/src/components/PDFView/PdfMarking.tsx
@@ -10,12 +10,16 @@ import {
import { EMPTY } from '../../utils/const.ts'
import { Container } from '../Container'
import signPageStyles from '../../pages/sign/style.module.scss'
-import styles from './style.module.scss'
import { CurrentUserFile } from '../../types/file.ts'
import FileList from '../FileList'
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
import { UsersDetails } from '../UsersDetails.tsx'
import { Meta } from '../../types'
+import {
+ faCircleInfo,
+ faFileDownload,
+ faPen
+} from '@fortawesome/free-solid-svg-icons'
interface PdfMarkingProps {
currentUserMarks: CurrentUserMark[]
@@ -24,7 +28,7 @@ interface PdfMarkingProps {
meta: Meta | null
otherUserMarks: Mark[]
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
- setIsReadyToSign: (isReadyToSign: boolean) => void
+ setIsMarksCompleted: (isMarksCompleted: boolean) => void
setUpdatedMarks: (markToUpdate: Mark) => void
}
@@ -38,7 +42,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
const {
files,
currentUserMarks,
- setIsReadyToSign,
+ setIsMarksCompleted,
setCurrentUserMarks,
setUpdatedMarks,
handleDownload,
@@ -102,7 +106,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
)
setCurrentUserMarks(updatedCurrentUserMarks)
setSelectedMark(null)
- setIsReadyToSign(true)
+ setIsMarksCompleted(true)
setUpdatedMarks(updatedMark.mark)
}
@@ -133,22 +137,21 @@ const PdfMarking = (props: PdfMarkingProps) => {
- {currentUserMarks?.length > 0 && (
-
+ {currentUserMarks?.length > 0 && (
+
-
- )}
-
- 
+
-
-
-
- )
- })}
+
+ {viewers.length > 0 && (
+ <>
+
+
{currentUserMarks.map((m, i) => (
-
)
}
diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx
index ef765f0..acd1874 100644
--- a/src/components/PDFView/index.tsx
+++ b/src/components/PDFView/index.tsx
@@ -1,8 +1,10 @@
-import { Divider } from '@mui/material'
import PdfItem from './PdfItem.tsx'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts'
import { useEffect, useRef } from 'react'
+import { FileDivider } from '../FileDivider.tsx'
+import React from 'react'
+import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
interface PdfViewProps {
currentFile: CurrentUserFile | null
@@ -29,10 +31,7 @@ const PdfView = ({
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
useEffect(() => {
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
- pdfRefs.current[currentFile.id]?.scrollIntoView({
- behavior: 'smooth',
- block: 'end'
- })
+ pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
}
}, [currentFile])
const filterByFile = (
@@ -49,29 +48,36 @@ const PdfView = ({
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
index !== files.length - 1
return (
- <>
- {files.map((currentUserFile, index, arr) => {
- const { hash, pdfFile, id } = currentUserFile
- if (!hash) return
- return (
- (markRefs.current[m.id] = el)}>
-
- ))}
- {otherUserMarks.map((m, i) => (
-
- {m.value}
-
+ ref={(el) => (markRefs.current[m.id] = el)}
+ handleMarkClick={handleMarkClick}
+ selectedMarkValue={selectedMarkValue}
+ userMark={m}
+ selectedMark={selectedMark}
+ pageWidth={page.width}
+ />
))}
+ {otherUserMarks.map((m, i) => {
+ return (
+
+ {m.value}
+
+ )
+ })}
(pdfRefs.current[id] = el)}
- key={index}
- >
- File Separator }
-
- )
- })}
-
+
+ {files.length > 0 ? (
+ files.map((currentUserFile, index, arr) => {
+ const { hash, file, id } = currentUserFile
+
+ if (!hash) return
+ return (
+
+
+ )
+ })
+ ) : (
+
)
}
diff --git a/src/components/PDFView/style.module.scss b/src/components/PDFView/style.module.scss
index 3a893d4..870057a 100644
--- a/src/components/PDFView/style.module.scss
+++ b/src/components/PDFView/style.module.scss
@@ -1,33 +1,7 @@
-.imageWrapper {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%; /* Adjust as needed */
- height: 100%; /* Adjust as needed */
- overflow: hidden; /* Ensure no overflow */
- border: 1px solid #ccc; /* Optional: for visual debugging */
- background-color: #e0f7fa; /* Optional: for visual debugging */
-}
-
-.image {
- max-width: 100%;
- max-height: 100%;
- object-fit: contain; /* Ensure the image fits within the container */
-}
-
.container {
display: flex;
width: 100%;
flex-direction: column;
-
-}
-
-.pdfView {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- gap: 10px;
}
.otherUserMarksDisplay {
diff --git a/src/components/UsersDetails.tsx/index.tsx b/src/components/UsersDetails.tsx/index.tsx
index 3681cfd..bddae82 100644
--- a/src/components/UsersDetails.tsx/index.tsx
+++ b/src/components/UsersDetails.tsx/index.tsx
@@ -1,7 +1,6 @@
import { Divider, Tooltip } from '@mui/material'
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
import {
- extractFileExtensions,
formatTimestamp,
fromUnixTimestamp,
hexToNpub,
@@ -28,6 +27,7 @@ import { State } from '../../store/rootReducer'
import { TooltipChild } from '../TooltipChild'
import { DisplaySigner } from '../DisplaySigner'
import { Meta } from '../../types'
+import { extractFileExtensions } from '../../utils/file'
interface UsersDetailsProps {
meta: Meta
@@ -118,32 +118,44 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
)
})}
- {viewers.map((signer) => {
- const pubkey = npubToHex(signer)!
- const profile = profiles[pubkey]
-
- return (
- (pdfRefs.current[id] = el)}
+ >
+
+ {isNotLastPdfFile(index, arr) && Viewers
+
+
+ {viewers.map((signer) => {
+ const pubkey = npubToHex(signer)!
+ const profile = profiles[pubkey]
+
+ return (
+
+
+
+
+ )
+ })}
+
+
+
+ )}
Details
diff --git a/src/controllers/RelayController.ts b/src/controllers/RelayController.ts index 40945ad..df33b4b 100644 --- a/src/controllers/RelayController.ts +++ b/src/controllers/RelayController.ts @@ -1,5 +1,9 @@ import { Event, Filter, Relay } from 'nostr-tools' -import { normalizeWebSocketURL, timeout } from '../utils' +import { + settleAllFullfilfedPromises, + normalizeWebSocketURL, + timeout +} from '../utils' import { SIGIT_RELAY } from '../utils/const' /** @@ -105,24 +109,11 @@ export class RelayController { } // connect to all specified relays - const relayPromises = relayUrls.map((relayUrl) => - this.connectRelay(relayUrl) + const relays = await settleAllFullfilfedPromises( + relayUrls, + this.connectRelay ) - // Use Promise.allSettled to wait for all promises to settle - const results = await Promise.allSettled(relayPromises) - - // Extract non-null values from fulfilled promises in a single pass - const relays = results.reduce
- ([])
+ const [drawnFiles, setDrawnFiles] = useState([])
const [selectedTool, setSelectedTool] = useState()
const [toolbox] = useState([
{
identifier: MarkType.TEXT,
- icon: setTitle(e.target.value)}
- sx={{
- width: '100%',
- fontSize: '16px',
- '& .MuiInputBase-input': {
- padding: '7px 14px'
- },
- '& .MuiOutlinedInput-notchedOutline': {
- display: 'none'
- }
- }}
/>
}
right={
)
}
diff --git a/src/pages/landing/index.tsx b/src/pages/landing/index.tsx
index 015d721..deae096 100644
--- a/src/pages/landing/index.tsx
+++ b/src/pages/landing/index.tsx
@@ -19,6 +19,7 @@ import {
faWifi
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
+import { Footer } from '../../components/Footer/Footer'
export const LandingPage = () => {
const navigate = useNavigate()
@@ -162,6 +163,7 @@ export const LandingPage = () => {
-
+ {left}
+ <>
+
+
+
+
- {children}
-
-
- {right}
- -
+
- + + +
- + + +
- + + +
-
{selectedFiles.length > 0 &&
selectedFiles.map((file, index) => (
-
{
@@ -898,107 +885,34 @@ export const CreatePage = () => {
setCurrentFile(file)
}}
>
- <>
- {file.name}
-
-
-
+ {file.name}
+
+
))}
-
+
+
+
)
}
diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index 2a1a1d8..a7dd7f2 100644
--- a/src/pages/create/style.module.scss
+++ b/src/pages/create/style.module.scss
@@ -4,6 +4,8 @@
display: flex;
flex-direction: column;
gap: 15px;
+
+ container-type: inline-size;
}
.orderedFilesList {
@@ -40,6 +42,7 @@
}
button {
+ min-width: 44px;
color: $primary-main;
}
@@ -67,10 +70,6 @@
display: flex;
flex-direction: column;
gap: 15px;
-
- // Automatic scrolling if paper-group gets large enough
- // used for files on the left and users on the right
- max-height: 350px;
overflow-x: hidden;
overflow-y: auto;
}
@@ -78,8 +77,9 @@
.inputWrapper {
display: flex;
align-items: center;
+ flex-shrink: 0;
- height: 34px;
+ height: 36px;
overflow: hidden;
border-radius: 4px;
outline: solid 1px #dddddd;
@@ -90,6 +90,43 @@
&:focus-within {
outline-color: $primary-main;
}
+
+ // Override default MUI input styles only inside inputWrapepr
+ :global {
+ .MuiInputBase-input {
+ padding: 7px 14px;
+ }
+ .MuiOutlinedInput-notchedOutline {
+ display: none;
+ }
+ }
+}
+
+.addCounterpart {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 10px;
+
+ > .inputWrapper {
+ flex-shrink: 1;
+ }
+
+ button {
+ min-width: 44px;
+ padding: 11px 12px;
+ }
+}
+
+.users {
+ flex-shrink: 0;
+ max-height: 33vh;
+
+ .counterpartToggleButton {
+ min-width: 44px;
+ padding: 11px 12px;
+ }
}
.user {
@@ -104,6 +141,22 @@
a:hover {
text-decoration: none;
}
+
+ // Higher specificify to override default button styles
+ .counterpartRowToggleButton {
+ min-width: 34px;
+ height: 34px;
+ padding: 0;
+ }
+}
+
+.counterpartRowToggleButton {
+ &[data-variant='primary'] {
+ color: $primary-main;
+ }
+ &[data-variant='secondary'] {
+ color: rgba(0, 0, 0, 0.35);
+ }
}
.avatar {
@@ -130,26 +183,35 @@
.toolbox {
display: grid;
- grid-template-columns: 1fr 1fr 1fr;
+ grid-template-columns: 1fr;
+
+ @container (min-width: 204px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @container (min-width: 309px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
gap: 15px;
- max-height: 450px;
overflow-x: hidden;
overflow-y: auto;
+
+ container-type: inline-size;
}
.toolItem {
- width: 90px;
- height: 90px;
-
transition: ease 0.2s;
- display: inline-flex;
+ display: flex;
flex-direction: column;
gap: 5px;
border-radius: 4px;
padding: 10px 5px 5px 5px;
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.5);
+
+ text-align: center;
align-items: center;
justify-content: center;
font-size: 14px;
@@ -162,7 +224,7 @@
color: white;
}
- &:not(.selected) {
+ &:not(.selected, .comingSoon) {
&:hover {
background: $primary-light;
color: white;
@@ -174,3 +236,7 @@
cursor: not-allowed;
}
}
+
+.comingSoonPlaceholder {
+ font-size: 10px;
+}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index ddc777e..c93c9f8 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -18,6 +18,7 @@ import {
SigitCardDisplayInfo,
SigitStatus
} from '../../utils'
+import { Footer } from '../../components/Footer/Footer'
// Unsupported Filter options are commented
const FILTERS = [
@@ -262,6 +263,7 @@ export const HomePage = () => {
))}
+
- setUserInput(e.target.value)}
- onKeyDown={handleInputKeyDown}
- error={!!error}
- fullWidth
- sx={{
- fontSize: '16px',
- '& .MuiInputBase-input': {
- padding: '7px 14px'
- },
- '& .MuiOutlinedInput-notchedOutline': {
- display: 'none'
- }
- }}
- />
-
-
-
-
-
+
{
moveSigner={moveSigner}
/>
-
+ {
return (
<>
-
+
{users
.filter((user) => user.role === UserRole.signer)
.map((user, index) => (
-
{users
.filter((user) => user.role === UserRole.viewer)
- .map((user, index) => {
- const userMeta = metadata[user.pubkey]
+ .map((user) => {
return (
-
+
-
+
+
@@ -1017,26 +967,18 @@ export const CreatePage = () => {
return (
+ setUserInput(e.target.value)}
+ onKeyDown={handleInputKeyDown}
+ error={!!error}
+ />
+
+
+
+ {
- handleToolSelect(drawTool)
- }
- : () => null
- }
+ {...(drawTool.active && {
+ onClick: () => handleToolSelect(drawTool)
+ })}
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
`}
>
- {drawTool.icon}
+
}
+ leftIcon={faFileCirclePlus}
+ centerIcon={faFile}
+ rightIcon={faToolbox}
>
-
-
-
+ (null)
const [{ handlerId }, drop] = useDrop<
@@ -1266,7 +1158,7 @@ const SignerRow = ({
})
})
- const opacity = isDragging ? 0 : 1
+ const opacity = isDragging ? 0.2 : 1
drag(drop(ref))
return (
@@ -1277,6 +1169,24 @@ const SignerRow = ({
ref={ref}
>
+ )
+}
+
+const Counterpart = ({
+ userMeta,
+ user,
+ handleUserRoleChange,
+ handleRemoveUser
+}: CounterpartProps) => {
+ return (
+ <>
-
-
-
+
)
})}
@@ -1176,23 +1065,26 @@ interface DragItem {
type: string
}
-type SignerRowProps = {
+type CounterpartProps = {
userMeta: ProfileMetadata
user: User
- index: number
- moveSigner: (dragIndex: number, hoverIndex: number) => void
handleUserRoleChange: (role: UserRole, pubkey: string) => void
handleRemoveUser: (pubkey: string) => void
}
-const SignerRow = ({
+type SignerCounterpartProps = CounterpartProps & {
+ index: number
+ moveSigner: (dragIndex: number, hoverIndex: number) => void
+}
+
+const SignerCounterpart = ({
userMeta,
user,
index,
moveSigner,
handleUserRoleChange,
handleRemoveUser
-}: SignerRowProps) => {
+}: SignerCounterpartProps) => {
const ref = useRef-
+
-
+ Settings
+
+ }
+ >
+
-
- Cache Setting
-
- }
- >
-
-
+ Cache Setting
+
+ }
+ >
+
-
-
- - - {capitalizeFirstLetter( - valueKey.split('_').join(' ') - )} - : - {' '} - {`${infoValue[valueKey]}`} - - ))} -
- + + {capitalizeFirstLetter( + valueKey.split('_').join(' ') + )} + : + {' '} + {`${infoValue[valueKey]}`} + + ))} +
- - - {capitalizeFirstLetter( - valueKey.split('_').join(' ') - )} - : - {' '} - {`${infoValue[valueKey].map((fee: RelayFee) => `${fee.amount} ${fee.unit}`)}`} - - ))} -
- + + {capitalizeFirstLetter( + valueKey.split('_').join(' ') + )} + : + {' '} + {`${infoValue[valueKey].map((fee: RelayFee) => `${fee.amount} ${fee.unit}`)}`} + + ))} +
-
+
-
- {Object.keys(infoValue).map((valueKey) => (
-
-
+ {Object.keys(infoValue).map((valueKey) => (
+
-
- {Object.keys(infoValue).map((valueKey) => (
-
-
+ {Object.keys(infoValue).map((valueKey) => (
+
- {files.map((currentUserFile, i) => {
- const { hash, filename, pdfFile, id } = currentUserFile
- const signatureEvents = Object.keys(parsedSignatureEvents)
- if (!hash) return
- return (
-
-
+ {files.length > 0 ? (
+ files.map((currentUserFile, i) => {
+ const { hash, file, id } = currentUserFile
+ const signatureEvents = Object.keys(parsedSignatureEvents)
+ if (!hash) return
+ return (
+
+
+ )
+ })
+ ) : (
+
)
}
@@ -171,7 +193,7 @@ export const VerifyPage = () => {
const [currentFileHashes, setCurrentFileHashes] = useState<{
[key: string]: string | null
}>({})
- const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
+ const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
const [currentFile, setCurrentFile] = useState (pdfRefs.current[id] = el)}
- className={styles.fileWrapper}
- >
- {pdfFile.pages.map((page, i) => {
- const marks: Mark[] = []
-
- signatureEvents.forEach((e) => {
- const m = parsedSignatureEvents[
- e as `npub1${string}`
- ].parsedContent?.marks.filter(
- (m) => m.pdfFileHash == hash && m.location.page == i
- )
- if (m) {
- marks.push(...m)
- }
- })
- return (
-
-
- {i < files.length - 1 && (
-
-
- {marks.map((m) => {
- return (
-
- )
- })}
-
- {m.value}
-
- )
- })}
- (pdfRefs.current[id] = el)}
+ className="file-wrapper"
>
- File Separator
-
- )}
-
- )
- })}
+ {file.isPdf &&
+ file.pages?.map((page, i) => {
+ const marks: Mark[] = []
+
+ signatureEvents.forEach((e) => {
+ const m = parsedSignatureEvents[
+ e as `npub1${string}`
+ ].parsedContent?.marks.filter(
+ (m) => m.pdfFileHash == hash && m.location.page == i
+ )
+ if (m) {
+ marks.push(...m)
+ }
+ })
+ return (
+
+ )}
+ {!(file.isPdf || file.isImage) && (
+
+ {i < files.length - 1 &&
+
+ {marks.map((m) => {
+ return (
+
+ )
+ })}
+ {file.isImage && (
+
+ {m.value}
+
+ )
+ })}
+