Compare commits

...

52 Commits

Author SHA1 Message Date
82376838bd Merge pull request 'Create page: search users' (#259) from issue-56 into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m39s
Reviewed-on: #259
2024-11-21 10:18:32 +00:00
2f9017b840 fix: removed viewer/signer button
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 43s
2024-11-21 11:06:31 +01:00
6c7cac2336 feat: search users by nip05, npub and filter: serach, improved UX
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 43s
2024-11-21 09:20:20 +01:00
4af28abcb6 feat: create page search users
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 37s
2024-11-19 12:03:41 +01:00
4cb6f07a68 Merge pull request 'issue-236-fixed' (#239) from issue-236-fixed into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m22s
Reviewed-on: #239
Reviewed-by: enes <enes@noreply.git.nostrdev.com>
2024-11-04 07:43:58 +00:00
NostrDev
5b1654c341 chore: added handleEscapeButtonDown description
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 35s
2024-11-04 10:42:55 +03:00
.
02f651acc7 chore: revert (wrong site)
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m25s
2024-11-02 11:40:20 +00:00
.
cd0e4523e1 chore: goat@nostrdev.com
Some checks failed
Release to Staging / build_and_release (push) Has been cancelled
2024-11-02 11:39:36 +00:00
NostrDev
76b1fa792c feat(signers-dropdown): improved hiding/displaying logic
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 31s
2024-11-01 17:00:46 +03:00
NostrDev
3a94fbc0ae chore(types): used KeyboardCode enum
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 31s
2024-11-01 11:23:05 +03:00
NostrDev
e37f90d6db feat(pdf-fields): add logic to hide signers on ESC 2024-11-01 11:22:31 +03:00
b
cc059f6cb4 Merge pull request 'feat: signature squiggle' (#237) from feat/signature into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m33s
Reviewed-on: #237
Reviewed-by: b <b@4j.cx>
2024-10-28 16:23:28 +00:00
enes
de44370a96 feat: add squiggle support
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 36s
2024-10-25 18:42:16 +02:00
enes
dfa2832e8d feat: add MarkConfig and components 2024-10-25 18:40:50 +02:00
enes
9286e4304f feat: add SVGO, enable signature 2024-10-25 18:38:47 +02:00
aae11589a4 Merge pull request 'issue-166-open-timestamps' (#220) from issue-166-open-timestamps into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m16s
Reviewed-on: #220
Reviewed-by: enes <enes@noreply.git.nostrdev.com>
2024-10-25 11:18:46 +00:00
69f67fc812 chore: disables rules for specific parts of code
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 30s
2024-10-25 14:15:12 +03:00
38cd88fd86 fix: moves styling to SVG
Some checks failed
Open PR on Staging / audit_and_check (pull_request) Failing after 32s
2024-10-25 13:13:22 +03:00
dbcd54cec0 chore: merge branch 'main' into issue-166-open-timestamps
Some checks failed
Open PR on Staging / audit_and_check (pull_request) Failing after 27s
2024-10-24 15:58:39 +03:00
2d0212fd6c fix: redundant updates
Some checks failed
Open PR on Staging / audit_and_check (pull_request) Failing after 32s
2024-10-24 12:54:47 +03:00
19b815e528 feat(opentimestamps): updates tooltip
Some checks failed
Open PR on Staging / audit_and_check (pull_request) Failing after 27s
2024-10-24 12:42:21 +03:00
b
33e7fc7771 Merge pull request 'Release' (#233) from staging into main
All checks were successful
Release to Production / build_and_release (push) Successful in 1m9s
Reviewed-on: #233
2024-10-18 15:09:39 +00:00
97d9857bef Merge branch 'main' into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m18s
2024-10-18 14:59:01 +00:00
enes
4465b8c3ac refactor(landing): cards description
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m19s
2024-10-18 16:54:31 +02:00
54047740f9 chore: updates packages 2024-10-18 11:26:25 +03:00
7f411f09a7 chore: merge branch 'main' into issue-166-open-timestamps 2024-10-18 11:24:31 +03:00
849e47da00 chore: updates packages 2024-10-18 11:03:51 +03:00
b
bb323be87c Merge pull request 'Release' (#228) from staging into main
All checks were successful
Release to Production / build_and_release (push) Successful in 1m8s
Reviewed-on: #228
2024-10-14 09:02:41 +00:00
b
fd2f179273 Merge branch 'main' into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m18s
2024-10-14 09:02:14 +00:00
b
4559f16d86 Merge pull request 'fix: add files and marked to sign page exports' (#226) from fixes-10-11 into staging
Some checks failed
Release to Staging / build_and_release (push) Has been cancelled
Reviewed-on: #226
2024-10-14 09:01:42 +00:00
d6f92accb0 chore(git): merge branch 'origin/fixes-10-11' into fixes-10-11
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
2024-10-14 09:56:22 +02:00
b
ee03cc545e Merge branch 'staging' into fixes-10-11
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 33s
2024-10-13 12:47:38 +00:00
b
3eed2964a0 Merge branch 'staging' into fixes-10-11
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 33s
2024-10-12 11:19:14 +00:00
cc382f0726 fix: show error if decrypt fails 2024-10-11 16:43:55 +02:00
9dd190d65b fix: add files and marked to sign page exports
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
Skip marked if the file contains  no marks
2024-10-11 16:16:59 +02:00
b
ed90168e5d Merge pull request 'staging' (#223) from staging into main
All checks were successful
Release to Production / build_and_release (push) Successful in 1m8s
Reviewed-on: #223
2024-10-09 13:50:23 +00:00
b7bd922af3 fix: removes unneeded notification
Some checks failed
Open PR on Staging / audit_and_check (pull_request) Failing after 31s
2024-10-08 17:04:07 +02:00
f12aaf1c2b feat(opentimestamps): amends to flow to only upgrade users timestamps
Some checks failed
Open PR on Staging / audit_and_check (pull_request) Failing after 32s
2024-10-08 17:01:51 +02:00
3d5006a715 fix: removes retrier and updates notification
Some checks failed
Open PR on Staging / audit_and_check (pull_request) Failing after 30s
2024-10-07 17:24:25 +02:00
f38344b9ac fix: adds notifications 2024-10-07 17:20:00 +02:00
2b630c94b6 feat(opentimestamps): updates the flow and adds notifications 2024-10-07 17:19:32 +02:00
edeb22fb37 chore: updates namings 2024-10-07 17:18:27 +02:00
a2138f1de1 feat(opentimestamps): updates utils and adds comments 2024-10-07 17:18:06 +02:00
85bf907f54 feat(opentimestamps): updates data model 2024-10-07 17:17:37 +02:00
3b447dcf6a chore: merge branch 'main' into issue-166-open-timestamps 2024-10-07 16:18:29 +02:00
21aa25a42a feat(opentimestamps): update the full flow 2024-10-06 15:37:04 +02:00
edbe708b65 feat(opentimestamps): updates data model and useSigitMeta hook 2024-10-02 14:47:32 +02:00
b92790ceed feat(opentimestamps): updates opentimestamps type 2024-09-27 16:03:40 +03:00
7f00f9e8bf feat(opentimestamps): updates signing flow 2024-09-27 16:00:48 +03:00
07f1a15aa1 feat(opentimestamps): refactors to timestamp the nostr event id 2024-09-27 14:18:26 +03:00
85bcfac2e0 feat(opentimestamps): adds timestamps to create flow 2024-09-26 15:54:06 +03:00
edfe9a2954 feat(opentimestamps): adds OTS library and retrier function 2024-09-26 15:50:28 +03:00
38 changed files with 2931 additions and 187 deletions

View File

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

View File

@ -8,6 +8,7 @@
</head>
<body>
<div id="root"></div>
<script src="/opentimestamps.min.js"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

1637
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -57,6 +57,7 @@
"react-singleton-hook": "^4.0.1",
"react-toastify": "10.0.4",
"redux": "5.0.1",
"svgo": "^3.3.2",
"tseep": "1.2.1"
},
"devDependencies": {
@ -66,6 +67,7 @@
"@types/pdfjs-dist": "^2.10.378",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@types/svgo": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"@vitejs/plugin-react": "^4.2.1",
@ -78,6 +80,7 @@
"ts-css-modules-vite-plugin": "1.0.20",
"typescript": "^5.2.2",
"vite": "^5.1.4",
"vite-plugin-node-polyfills": "^0.22.0",
"vite-tsconfig-paths": "4.3.2"
},
"lint-staged": {

View File

@ -1,15 +1,15 @@
{
"names": {
"_": "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90"
},
"relays": {
"6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90": [
"wss://brb.io",
"wss://nostr.v0l.io",
"wss://nostr.coinos.io",
"wss://rsslay.nostr.net",
"wss://relay.current.fyi",
"wss://nos.io"
]
}
"names": {
"_": "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90"
},
"relays": {
"6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90": [
"wss://brb.io",
"wss://nostr.v0l.io",
"wss://nostr.coinos.io",
"wss://rsslay.nostr.net",
"wss://relay.current.fyi",
"wss://nos.io"
]
}
}

2
public/opentimestamps.min.js vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

View File

@ -9,7 +9,7 @@ import {
} from '@mui/material'
import styles from './style.module.scss'
import React, { useEffect, useState } from 'react'
import { ProfileMetadata, User, UserRole } from '../../types'
import { ProfileMetadata, User, UserRole, KeyboardCode } from '../../types'
import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
import { SigitFile } from '../../utils/file'
@ -27,6 +27,10 @@ const DEFAULT_START_SIZE = {
height: 40
} as const
interface HideSignersForDrawnField {
[key: number]: boolean
}
interface Props {
users: User[]
metadata: { [key: string]: ProfileMetadata }
@ -41,6 +45,9 @@ export const DrawPDFFields = (props: Props) => {
const signers = users.filter((u) => u.role === UserRole.signer)
const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
const [hideSignersForDrawnField, setHideSignersForDrawnField] =
useState<HideSignersForDrawnField>({})
/**
* Return first pubkey that is present in the signers list
* @param pubkeys
@ -217,6 +224,12 @@ export const DrawPDFFields = (props: Props) => {
y: drawingRectangleCoords.y
}
})
// make signers dropdown visible
setHideSignersForDrawnField((prev) => ({
...prev,
[drawnFieldIndex]: false
}))
}
/**
@ -338,6 +351,32 @@ export const DrawPDFFields = (props: Props) => {
event.stopPropagation()
}
/**
* Handles Escape button-down event and hides all signers dropdowns
* @param event SyntheticEvent event
*/
const handleEscapeButtonDown = (event: React.SyntheticEvent) => {
// get native event
const { nativeEvent } = event
//check if event is a keyboard event
if (nativeEvent instanceof KeyboardEvent) {
// check if event code is Escape
if (nativeEvent.code === KeyboardCode.Escape) {
// hide all signers dropdowns
const newHideSignersForDrawnField: HideSignersForDrawnField = {}
Object.keys(hideSignersForDrawnField).forEach((key) => {
// Object.keys always returns an array of strings,
// that is why unknown type is used below
newHideSignersForDrawnField[key as unknown as number] = true
})
setHideSignersForDrawnField(newHideSignersForDrawnField)
}
}
}
/**
* Gets the pointer coordinates relative to a element in the `event` param
* @param event PointerEvent
@ -361,6 +400,7 @@ export const DrawPDFFields = (props: Props) => {
rect
}
}
/**
* Renders the pdf pages and drawing elements
*/
@ -375,6 +415,8 @@ export const DrawPDFFields = (props: Props) => {
<div
key={pageIndex}
className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
tabIndex={-1}
onKeyDown={(event) => handleEscapeButtonDown(event)}
>
<img
onPointerMove={(event) => {
@ -492,62 +534,78 @@ export const DrawPDFFields = (props: Props) => {
fileIndex,
pageIndex,
drawnFieldIndex
) && (
<div
onPointerDown={handleUserSelectPointerDown}
className={styles.userSelect}
>
<FormControl fullWidth size="small">
<InputLabel id="counterparts">Counterpart</InputLabel>
<Select
value={getAvailableSigner(drawnField.counterpart)}
onChange={(event) => {
drawnField.counterpart = event.target.value
setLastSigner(event.target.value)
refreshPdfFiles()
}}
labelId="counterparts"
label="Counterparts"
sx={{
background: 'white'
}}
renderValue={(value) =>
renderCounterpartValue(value)
}
>
{signers.map((signer, index) => {
const npub = hexToNpub(signer.pubkey)
const metadata = props.metadata[signer.pubkey]
const displayValue = getProfileUsername(
npub,
metadata
)
) &&
(!hideSignersForDrawnField ||
!hideSignersForDrawnField[drawnFieldIndex]) && (
<div
onPointerDown={handleUserSelectPointerDown}
className={styles.userSelect}
>
<FormControl fullWidth size="small">
<InputLabel id="counterparts">
Counterpart
</InputLabel>
<Select
value={getAvailableSigner(drawnField.counterpart)}
onChange={(event) => {
drawnField.counterpart = event.target.value
setLastSigner(event.target.value)
refreshPdfFiles()
}}
labelId="counterparts"
label="Counterparts"
sx={{
background: 'white'
}}
renderValue={(value) =>
renderCounterpartValue(value)
}
>
{signers.map((signer, index) => {
const npub = hexToNpub(signer.pubkey)
const metadata = props.metadata[signer.pubkey]
const displayValue = getProfileUsername(
npub,
metadata
)
// make current signers dropdown visible
if (
hideSignersForDrawnField[drawnFieldIndex] ===
undefined ||
hideSignersForDrawnField[drawnFieldIndex] ===
true
) {
setHideSignersForDrawnField((prev) => ({
...prev,
[drawnFieldIndex]: false
}))
}
return (
<MenuItem key={index} value={npub}>
<ListItemIcon>
<AvatarIconButton
src={metadata?.picture}
hexKey={signer.pubkey}
aria-label={`account of user ${displayValue}`}
color="inherit"
sx={{
padding: 0,
'> img': {
width: '30px',
height: '30px'
}
}}
/>
</ListItemIcon>
<ListItemText>{displayValue}</ListItemText>
</MenuItem>
)
})}
</Select>
</FormControl>
</div>
)}
return (
<MenuItem key={index} value={npub}>
<ListItemIcon>
<AvatarIconButton
src={metadata?.picture}
hexKey={signer.pubkey}
aria-label={`account of user ${displayValue}`}
color="inherit"
sx={{
padding: 0,
'> img': {
width: '30px',
height: '30px'
}
}}
/>
</ListItemIcon>
<ListItemText>{displayValue}</ListItemText>
</MenuItem>
)
})}
</Select>
</FormControl>
</div>
)}
</div>
)
})}

View File

@ -13,6 +13,10 @@
}
}
.pdfImageWrapper:focus {
outline: none;
}
.placeholder {
position: absolute;
opacity: 0.5;

View File

@ -7,13 +7,12 @@ import {
isCurrentValueLast
} from '../../utils'
import React, { useState } from 'react'
import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
interface MarkFormFieldProps {
currentUserMarks: CurrentUserMark[]
handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
handleSelectedMarkValueChange: (
event: React.ChangeEvent<HTMLInputElement>
) => void
handleSelectedMarkValueChange: (value: string) => void
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
selectedMark: CurrentUserMark
selectedMarkValue: string
@ -53,6 +52,8 @@ const MarkFormField = ({
}
const toggleActions = () => setDisplayActions(!displayActions)
const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
const { input: MarkInputComponent } =
MARK_TYPE_CONFIG[selectedMark.mark.type] || {}
return (
<div className={styles.container}>
<div className={styles.trigger}>
@ -83,12 +84,14 @@ const MarkFormField = ({
</div>
<div className={styles.inputWrapper}>
<form onSubmit={(e) => handleFormSubmit(e)}>
<input
className={styles.input}
placeholder={markLabel}
onChange={handleSelectedMarkValueChange}
value={selectedMarkValue}
/>
{typeof MarkInputComponent !== 'undefined' && (
<MarkInputComponent
value={selectedMarkValue}
placeholder={markLabel}
handler={handleSelectedMarkValueChange}
userMark={selectedMark}
/>
)}
<div className={styles.actionsBottom}>
<button type="submit" className={styles.submitButton}>
NEXT

View File

@ -0,0 +1,44 @@
@import '../../styles/colors.scss';
$padding: 5px;
.wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: $padding;
}
.relative {
position: relative;
}
.canvas {
outline: 1px solid black;
background-color: $body-background-color;
cursor: crosshair;
// Disable panning/zooming when touching canvas element
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.absolute {
position: absolute;
inset: 0;
pointer-events: none;
}
.reset {
cursor: pointer;
position: absolute;
top: 0;
right: $padding;
color: $primary-main;
&:hover {
color: $primary-dark;
}
}

View File

@ -0,0 +1,101 @@
import { useRef, useState } from 'react'
import { MarkInputProps } from '../../types/mark'
import { getOptimizedPaths, optimizeSVG } from '../../utils'
import { faEraser } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import styles from './Signature.module.scss'
import { MarkRenderSignature } from '../MarkRender/Signature'
export const MarkInputSignature = ({
value,
handler,
userMark
}: MarkInputProps) => {
const location = userMark?.mark.location
const canvasRef = useRef<HTMLCanvasElement>(null)
const [drawing, setDrawing] = useState(false)
const [paths, setPaths] = useState<string[]>(value ? JSON.parse(value) : [])
function update() {
if (location && paths) {
if (paths.length) {
const optimizedSvg = optimizeSVG(location, paths)
const extractedPaths = getOptimizedPaths(optimizedSvg)
handler(JSON.stringify(extractedPaths))
} else {
handler('')
}
}
}
const handlePointerDown = (event: React.PointerEvent) => {
const rect = event.currentTarget.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const ctx = canvasRef.current?.getContext('2d')
ctx?.beginPath()
ctx?.moveTo(x, y)
setPaths([...paths, `M ${x} ${y}`])
setDrawing(true)
}
const handlePointerUp = () => {
setDrawing(false)
update()
const ctx = canvasRef.current?.getContext('2d')
ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
}
const handlePointerMove = (event: React.PointerEvent) => {
if (!drawing) return
const ctx = canvasRef.current?.getContext('2d')
const rect = canvasRef.current?.getBoundingClientRect()
const x = event.clientX - rect!.left
const y = event.clientY - rect!.top
ctx?.lineTo(x, y)
ctx?.stroke()
// Collect the path data
setPaths((prevPaths) => {
const newPaths = [...prevPaths]
newPaths[newPaths.length - 1] += ` L ${x} ${y}`
return newPaths
})
}
const handleReset = () => {
setPaths([])
setDrawing(false)
update()
const ctx = canvasRef.current?.getContext('2d')
ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
}
return (
<>
<div className={styles.wrapper}>
<div className={styles.relative}>
<canvas
height={location?.height}
width={location?.width}
ref={canvasRef}
className={styles.canvas}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
onPointerMove={handlePointerMove}
onPointerOut={handlePointerUp}
></canvas>
{typeof userMark?.mark !== 'undefined' && (
<div className={styles.absolute}>
<MarkRenderSignature value={value} mark={userMark.mark} />
</div>
)}
<div className={styles.reset}>
<FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
</div>
</div>
</div>
</>
)
}

View File

@ -0,0 +1,19 @@
import { MarkInputProps } from '../../types/mark'
import styles from '../MarkFormField/style.module.scss'
export const MarkInputText = ({
value,
handler,
placeholder
}: MarkInputProps) => {
return (
<input
className={styles.input}
placeholder={placeholder}
onChange={(e) => {
handler(e.currentTarget.value)
}}
value={value}
/>
)
}

View File

@ -0,0 +1,13 @@
import { MarkRenderProps } from '../../types/mark'
export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => {
const paths = value ? JSON.parse(value) : []
return (
<svg viewBox={`0 0 ${mark.location.width} ${mark.location.height}`}>
{paths.map((path: string) => (
<path d={path} stroke="black" fill="none" />
))}
</svg>
)
}

View File

@ -4,6 +4,7 @@ import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
import { useScale } from '../../hooks/useScale.tsx'
import { forwardRef } from 'react'
import { npubToHex } from '../../utils/nostr.ts'
import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
interface PdfMarkItemProps {
userMark: CurrentUserMark
@ -27,6 +28,8 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
const getMarkValue = () =>
isEdited() ? selectedMarkValue : userMark.currentValue
const { from } = useScale()
const { render: MarkRenderComponent } =
MARK_TYPE_CONFIG[userMark.mark.type] || {}
return (
<div
ref={ref}
@ -47,7 +50,9 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
fontSize: inPx(from(pageWidth, FONT_SIZE))
}}
>
{getMarkValue()}
{typeof MarkRenderComponent !== 'undefined' && (
<MarkRenderComponent value={getMarkValue()} mark={userMark.mark} />
)}
</div>
)
}

View File

@ -117,8 +117,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
// setCurrentUserMarks(updatedCurrentUserMarks)
// }
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
setSelectedMarkValue(event.target.value)
const handleChange = (value: string) => setSelectedMarkValue(value)
return (
<>

View File

@ -4,6 +4,7 @@ import {
fromUnixTimestamp,
hexToNpub,
npubToHex,
SigitStatus,
SignStatus
} from '../../utils'
import { useSigitMeta } from '../../hooks/useSigitMeta'
@ -15,6 +16,8 @@ import {
faCalendar,
faCalendarCheck,
faCalendarPlus,
faCheck,
faClock,
faEye,
faFile,
faFileCircleExclamation
@ -22,7 +25,7 @@ import {
import { getExtensionIconLabel } from '../getExtensionIconLabel'
import { useAppSelector } from '../../hooks/store'
import { DisplaySigner } from '../DisplaySigner'
import { Meta } from '../../types'
import { Meta, OpenTimestamp } from '../../types'
import { extractFileExtensions } from '../../utils/file'
import { UserAvatar } from '../UserAvatar'
@ -42,7 +45,9 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
completedAt,
parsedSignatureEvents,
signedStatus,
isValid
isValid,
id,
timestamps
} = useSigitMeta(meta)
const { usersPubkey } = useAppSelector((state) => state.auth)
const userCanSign =
@ -51,6 +56,50 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
const isTimestampVerified = (
timestamps: OpenTimestamp[],
nostrId: string
): boolean => {
const matched = timestamps.find((t) => t.nostrId === nostrId)
return !!(matched && matched.verification)
}
const getOpenTimestampsInfo = (
timestamps: OpenTimestamp[],
nostrId: string
) => {
if (isTimestampVerified(timestamps, nostrId)) {
return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
} else {
return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
}
}
const getCompletedOpenTimestampsInfo = (timestamp: OpenTimestamp) => {
if (timestamp.verification) {
return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
} else {
return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
}
}
const getTimestampTooltipTitle = (label: string, isVerified: boolean) => {
return `${label} / Open Timestamp ${isVerified ? 'Verified' : 'Pending'}`
}
const isUserSignatureTimestampVerified = () => {
if (
userCanSign &&
hexToNpub(usersPubkey) in parsedSignatureEvents &&
timestamps &&
timestamps.length > 0
) {
const nostrId = parsedSignatureEvents[hexToNpub(usersPubkey)].id
return isTimestampVerified(timestamps, nostrId)
}
return false
}
return submittedBy ? (
<div className={styles.container}>
<div className={styles.section}>
@ -115,19 +164,35 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
<p>Details</p>
<Tooltip
title={'Publication date'}
title={getTimestampTooltipTitle(
'Publication date',
!!(timestamps && id && isTimestampVerified(timestamps, id))
)}
placement="top"
arrow
disableInteractive
>
<span className={styles.detailsItem}>
<FontAwesomeIcon icon={faCalendarPlus} />{' '}
{createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}
{createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}{' '}
{timestamps &&
timestamps.length > 0 &&
id &&
getOpenTimestampsInfo(timestamps, id)}
</span>
</Tooltip>
<Tooltip
title={'Completion date'}
title={getTimestampTooltipTitle(
'Completion date',
!!(
signedStatus === SigitStatus.Complete &&
completedAt &&
timestamps &&
timestamps.length > 0 &&
timestamps[timestamps.length - 1].verification
)
)}
placement="top"
arrow
disableInteractive
@ -135,13 +200,26 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
<span className={styles.detailsItem}>
<FontAwesomeIcon icon={faCalendarCheck} />{' '}
{completedAt ? formatTimestamp(completedAt) : <>&mdash;</>}
{signedStatus === SigitStatus.Complete &&
completedAt &&
timestamps &&
timestamps.length > 0 && (
<span className={styles.ticket}>
{getCompletedOpenTimestampsInfo(
timestamps[timestamps.length - 1]
)}
</span>
)}
</span>
</Tooltip>
{/* User signed date */}
{userCanSign ? (
<Tooltip
title={'Your signature date'}
title={getTimestampTooltipTitle(
'Your signature date',
isUserSignatureTimestampVerified()
)}
placement="top"
arrow
disableInteractive
@ -161,6 +239,16 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
) : (
<>&mdash;</>
)}
{hexToNpub(usersPubkey) in parsedSignatureEvents &&
timestamps &&
timestamps.length > 0 && (
<span className={styles.ticket}>
{getOpenTimestampsInfo(
timestamps,
parsedSignatureEvents[hexToNpub(usersPubkey)].id
)}
</span>
)}
</span>
</Tooltip>
) : null}

View File

@ -31,8 +31,6 @@
padding: 5px;
display: flex;
align-items: center;
justify-content: start;
> :first-child {
padding: 5px;
@ -44,3 +42,7 @@
color: white;
}
}
.ticket {
margin-left: auto;
}

View File

@ -0,0 +1,16 @@
import { MarkType } from '../types/drawing'
import { MarkConfigs } from '../types/mark'
import { MarkInputSignature } from './MarkInputs/Signature'
import { MarkInputText } from './MarkInputs/Text'
import { MarkRenderSignature } from './MarkRender/Signature'
export const MARK_TYPE_CONFIG: MarkConfigs = {
[MarkType.TEXT]: {
input: MarkInputText,
render: ({ value }) => <>{value}</>
},
[MarkType.SIGNATURE]: {
input: MarkInputSignature,
render: MarkRenderSignature
}
}

View File

@ -3,7 +3,8 @@ import {
CreateSignatureEventContent,
DocSignatureEvent,
Meta,
SignedEventContent
SignedEventContent,
OpenTimestamp
} from '../types'
import { Mark } from '../types/mark'
import {
@ -58,6 +59,8 @@ export interface FlatMeta
signersStatus: {
[signer: `npub1${string}`]: SignStatus
}
timestamps?: OpenTimestamp[]
}
/**
@ -162,7 +165,6 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
setEncryptionKey(decrypted)
}
}
// Temp. map to hold events and signers
const parsedSignatureEventsMap = new Map<
`npub1${string}`,
@ -276,6 +278,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
createSignature: meta?.createSignature,
docSignatures: meta?.docSignatures,
keys: meta?.keys,
timestamps: meta?.timestamps,
isValid,
kind,
tags,

View File

@ -1,10 +1,17 @@
import styles from './style.module.scss'
import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
import {
Box,
Button,
CircularProgress,
FormHelperText,
TextField,
Tooltip
} from '@mui/material'
import type { Identifier, XYCoord } from 'dnd-core'
import saveAs from 'file-saver'
import JSZip from 'jszip'
import { Event, kinds } from 'nostr-tools'
import { useEffect, useRef, useState } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { DndProvider, useDrag, useDrop } from 'react-dnd'
import { MultiBackend } from 'react-dnd-multi-backend'
import { HTML5toTouch } from 'rdndmb-html5-to-touch'
@ -13,12 +20,18 @@ import { useLocation, useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserAvatar } from '../../components/UserAvatar'
import { MetadataController, NostrController } from '../../controllers'
import {
MetadataController,
NostrController,
RelayController
} from '../../controllers'
import { appPrivateRoutes } from '../../routes'
import {
CreateSignatureEventContent,
KeyboardCode,
Meta,
ProfileMetadata,
SignedEvent,
User,
UserRole
} from '../../types'
@ -56,12 +69,19 @@ import {
faGripLines,
faPen,
faPlus,
faSearch,
faToolbox,
faTrash,
faUpload
} from '@fortawesome/free-solid-svg-icons'
import { getSigitFile, SigitFile } from '../../utils/file.ts'
import _ from 'lodash'
import { generateTimestamp } from '../../utils/opentimestamps.ts'
import { Autocomplete } from '@mui/lab'
import _, { truncate } from 'lodash'
import * as React from 'react'
import { AvatarIconButton } from '../../components/UserAvatarIconButton'
type FoundUser = Event & { npub: string }
export const CreatePage = () => {
const navigate = useNavigate()
@ -84,20 +104,16 @@ export const CreatePage = () => {
}
const [userInput, setUserInput] = useState('')
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
event.preventDefault()
handleAddUser()
}
}
const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
const [userSearchInput, setUserSearchInput] = useState('')
const [userRole] = useState<UserRole>(UserRole.signer)
const [error, setError] = useState<string>()
const [users, setUsers] = useState<User[]>([])
const signers = users.filter((u) => u.role === UserRole.signer)
const viewers = users.filter((u) => u.role === UserRole.viewer)
const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)!
const nostrController = NostrController.getInstance()
@ -106,10 +122,129 @@ export const CreatePage = () => {
)
const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
const [parsingPdf, setIsParsing] = useState<boolean>(false)
const searchFieldRef = useRef<HTMLInputElement>(null)
const [selectedTool, setSelectedTool] = useState<DrawTool>()
const [foundUsers, setFoundUsers] = useState<FoundUser[]>([])
const [searchUsersLoading, setSearchUsersLoading] = useState<boolean>(false)
const [pastedUserNpubOrNip05, setPastedUserNpubOrNip05] = useState<
string | undefined
>()
/**
* Fired when user select
*/
const handleSearchUserChange = useCallback(
(_event: React.SyntheticEvent, value: string | FoundUser | null) => {
if (typeof value === 'object') {
const ndkEvent = value as FoundUser
if (ndkEvent?.pubkey) {
setUserInput(hexToNpub(ndkEvent.pubkey))
}
}
},
[setUserInput]
)
const handleSearchUsers = async (searchValue?: string) => {
const searchString = searchValue || userSearchInput || undefined
if (!searchString) return
setSearchUsersLoading(true)
const relayController = RelayController.getInstance()
const metadataController = MetadataController.getInstance()
const relaySet = await metadataController.findRelayListMetadata(usersPubkey)
const searchTerm = searchString.trim()
relayController
.fetchEvents(
{
kinds: [0],
search: searchTerm
},
[...relaySet.write]
)
.then((events) => {
console.log('events', events)
const fineFilteredEvents: FoundUser[] = events
.filter((event) => {
const lowercaseContent = event.content.toLowerCase()
return (
lowercaseContent.includes(
`"name":"${searchTerm.toLowerCase()}"`
) ||
lowercaseContent.includes(
`"display_name":"${searchTerm.toLowerCase()}"`
) ||
lowercaseContent.includes(
`"username":"${searchTerm.toLowerCase()}"`
) ||
lowercaseContent.includes(`"nip05":"${searchTerm.toLowerCase()}"`)
)
})
.reduce((uniqueEvents: FoundUser[], event: Event) => {
if (!uniqueEvents.some((e: Event) => e.pubkey === event.pubkey)) {
uniqueEvents.push({
...event,
npub: hexToNpub(event.pubkey)
})
}
return uniqueEvents
}, [])
console.log('fineFilteredEvents', fineFilteredEvents)
setFoundUsers(fineFilteredEvents)
})
.catch((error) => {
console.error(error)
})
.finally(() => {
setSearchUsersLoading(false)
})
}
useEffect(() => {
setTimeout(() => {
if (foundUsers.length) {
if (searchFieldRef.current) {
searchFieldRef.current.blur()
searchFieldRef.current.focus()
}
}
})
}, [foundUsers])
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
if (
event.code === KeyboardCode.Enter ||
event.code === KeyboardCode.NumpadEnter
) {
event.preventDefault()
// If pasted user npub of nip05 is present, we just add the user to the counterparts list
if (pastedUserNpubOrNip05) {
setUserInput(pastedUserNpubOrNip05)
setPastedUserNpubOrNip05(undefined)
} else {
// Otherwize if search already provided some results, user must manually click the search button
if (!foundUsers.length) {
handleSearchUsers()
}
}
}
}
useEffect(() => {
if (selectedFiles) {
/**
* Reads the binary files and converts to internal file type
* Reads the binary files and converts to an internal file type
* and sets to a state (adds images if it's a PDF)
*/
const parsePages = async () => {
@ -129,8 +264,6 @@ export const CreatePage = () => {
}
}, [selectedFiles])
const [selectedTool, setSelectedTool] = useState<DrawTool>()
/**
* Changes the drawing tool
* @param drawTool to draw with
@ -203,7 +336,7 @@ export const CreatePage = () => {
}
}, [usersPubkey])
const handleAddUser = async () => {
const handleAddUser = useCallback(async () => {
setError(undefined)
const addUser = (pubkey: string) => {
@ -245,6 +378,8 @@ export const CreatePage = () => {
const input = userInput.toLowerCase()
setUserSearchInput('')
if (input.startsWith('npub')) {
return handleAddNpubUser(input)
}
@ -294,7 +429,20 @@ export const CreatePage = () => {
}
return
}
}
}, [
userInput,
userRole,
setError,
setUsers,
setUserSearchInput,
setIsLoading,
setLoadingSpinnerDesc,
setUserInput
])
useEffect(() => {
if (userInput?.length > 0) handleAddUser()
}, [handleAddUser, userInput])
const handleUserRoleChange = (role: UserRole, pubkey: string) => {
setUsers((prevUsers) =>
@ -642,6 +790,11 @@ export const CreatePage = () => {
return receivers.map((receiver) => sendNotification(receiver, meta))
}
const extractNostrId = (stringifiedEvent: string): string => {
const e = JSON.parse(stringifiedEvent) as SignedEvent
return e.id
}
const handleCreate = async () => {
try {
if (!validateInputs()) return
@ -691,6 +844,12 @@ export const CreatePage = () => {
const keys = await generateKeys(pubkeys, encryptionKey)
if (!keys) return
setLoadingSpinnerDesc('Generating an open timestamp.')
const timestamp = await generateTimestamp(
extractNostrId(createSignature)
)
const meta: Meta = {
createSignature,
keys,
@ -698,6 +857,10 @@ export const CreatePage = () => {
docSignatures: {}
}
if (timestamp) {
meta.timestamps = [timestamp]
}
setLoadingSpinnerDesc('Updating user app data')
const event = await updateUsersAppData(meta)
if (!event) return
@ -768,6 +931,61 @@ export const CreatePage = () => {
}
}
/**
* Handles the user search textfield change
* If it's not valid npub or nip05, search will be automatically triggered
*/
const handleSearchAutocompleteTextfieldChange = async (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const value = e.target.value
const disarmAddOnEnter = () => {
setPastedUserNpubOrNip05(undefined)
}
// Seems like it's npub format
if (value.startsWith('npub')) {
// We will try to convert npub to hex and if it's successfull that means
// npub is valid
const validHexPubkey = npubToHex(value)
if (validHexPubkey) {
// Arm the manual user npub add after enter is hit, we don't want to trigger search
setPastedUserNpubOrNip05(value)
} else {
disarmAddOnEnter()
}
} else if (value.includes('@')) {
// Seems like it's nip05 format
const { pubkey } = await queryNip05(value).catch((err) => {
console.error(err)
return { pubkey: null }
})
if (pubkey) {
// Arm the manual user npub add after enter is hit, we don't want to trigger search
setPastedUserNpubOrNip05(hexToNpub(pubkey))
} else {
disarmAddOnEnter()
}
} else {
// Disarm the add user on enter hit, and trigger search after 1 second
disarmAddOnEnter()
}
setUserSearchInput(value)
}
const parseContent = (event: Event) => {
try {
return JSON.parse(event.content)
} catch (e) {
return undefined
console.error(e)
}
}
return (
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
@ -831,42 +1049,108 @@ export const CreatePage = () => {
moveSigner={moveSigner}
/>
</div>
<div className={styles.addCounterpart}>
<div className={styles.inputWrapper}>
<TextField
fullWidth
placeholder="Add counterpart"
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
onKeyDown={handleInputKeyDown}
error={!!error}
<Autocomplete
sx={{ width: 300 }}
options={foundUsers}
onChange={handleSearchUserChange}
inputValue={userSearchInput}
disableClearable
openOnFocus
autoHighlight
freeSolo
filterOptions={(x) => x}
getOptionLabel={(option) => {
let label: string = (option as FoundUser).npub
const contentJson = parseContent(option as FoundUser)
if (contentJson?.name) {
label = contentJson.name
} else {
label = option as string
}
return label
}}
renderOption={(props, option) => {
const { ...optionProps } = props
const contentJson = parseContent(option)
return (
<Box
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...optionProps}
key={option.pubkey}
>
<AvatarIconButton
src={contentJson.picture}
hexKey={option.pubkey}
color="inherit"
sx={{
padding: '0 10px 0 0'
}}
/>
<div>
{contentJson.name}{' '}
{usersPubkey === option.pubkey ? (
<span
style={{
color: '#4c82a3',
fontWeight: 'bold'
}}
>
Me
</span>
) : (
''
)}{' '}
({truncate(option.npub, { length: 16 })})
</div>
</Box>
)
}}
renderInput={(params) => (
<TextField
{...params}
key={params.id}
inputRef={searchFieldRef}
label="Add/Search counterpart"
onKeyDown={handleInputKeyDown}
onChange={handleSearchAutocompleteTextfieldChange}
/>
)}
/>
</div>
<Button
onClick={() =>
setUserRole(
userRole === UserRole.signer
? UserRole.viewer
: UserRole.signer
)
}
variant="contained"
aria-label="Toggle User Role"
className={styles.counterpartToggleButton}
>
<FontAwesomeIcon
icon={userRole === UserRole.signer ? faPen : faEye}
/>
</Button>
<Button
disabled={!userInput}
onClick={handleAddUser}
variant="contained"
aria-label="Add"
className={styles.counterpartToggleButton}
>
<FontAwesomeIcon icon={faPlus} />
</Button>
{!pastedUserNpubOrNip05 ? (
<Button
disabled={!userSearchInput || searchUsersLoading}
onClick={() => handleSearchUsers()}
variant="contained"
aria-label="Add"
className={styles.counterpartToggleButton}
>
{searchUsersLoading ? (
<CircularProgress size={14} />
) : (
<FontAwesomeIcon icon={faSearch} />
)}
</Button>
) : (
<Button
onClick={handleAddUser}
variant="contained"
aria-label="Add"
className={styles.counterpartToggleButton}
>
<FontAwesomeIcon icon={faPlus} />
</Button>
)}
</div>
<div className={`${styles.paperGroup} ${styles.toolbox}`}>

View File

@ -69,8 +69,8 @@ export const LandingPage = () => {
title: <>Verifiable</>,
description: (
<>
Thanks to Schnorr Signatures and Web of Trust, SIGit is far more
auditable than traditional server-based offerings.
SIGit Agreements can be directly verified - unlike traditional,
server-based offerings.
</>
)
},
@ -84,8 +84,8 @@ export const LandingPage = () => {
title: <>Works Offline</>,
description: (
<>
Presuming you have a hardware signing device, it is possible to
complete a SIGit round without an internet connection.
It is possible to complete a SIGit round without an internet
connection.
</>
)
},
@ -94,8 +94,8 @@ export const LandingPage = () => {
title: <>Multi-Party Signing</>,
description: (
<>
Choose any number of Signers and Viewers, track the signature status,
send reminders, get notifications on completion.
Choose any number of Signers and Viewers, track status, get
notifications on completion.
</>
)
}

View File

@ -9,6 +9,7 @@ import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { AuthController } from '../../controllers'
import { updateKeyPair, updateLoginMethod } from '../../store/actions'
import { KeyboardCode } from '../../types'
import { LoginMethod } from '../../store/auth/types'
import { hexToBytes } from '@noble/hashes/utils'
@ -52,7 +53,10 @@ export const Nostr = () => {
* Call login function when enter is pressed
*/
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
if (
event.code === KeyboardCode.Enter ||
event.code === KeyboardCode.NumpadEnter
) {
event.preventDefault()
login()
}

View File

@ -53,6 +53,7 @@ import {
SigitFile
} from '../../utils/file.ts'
import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
import { generateTimestamp } from '../../utils/opentimestamps.ts'
enum SignedStatus {
Fully_Signed,
@ -536,7 +537,11 @@ export const SignPage = () => {
setIsLoading(true)
const arrayBuffer = await decrypt(selectedFile)
if (!arrayBuffer) return
if (!arrayBuffer) {
setIsLoading(false)
toast.error('Error decrypting file')
return
}
handleDecryptedArrayBuffer(arrayBuffer)
}
@ -562,6 +567,14 @@ export const SignPage = () => {
const updatedMeta = updateMetaSignatures(meta, signedEvent)
setLoadingSpinnerDesc('Generating an open timestamp.')
const timestamp = await generateTimestamp(signedEvent.id)
if (timestamp) {
updatedMeta.timestamps = [...(updatedMeta.timestamps || []), timestamp]
updatedMeta.modifiedAt = unixNow()
}
if (await isOnline()) {
await handleOnlineFlow(updatedMeta)
} else {
@ -771,14 +784,9 @@ export const SignPage = () => {
2
)
const zip = new JSZip()
const zip = await getZipWithFiles(meta, files)
zip.file('meta.json', stringifiedMeta)
for (const [fileName, file] of Object.entries(files)) {
zip.file(`files/${fileName}`, await file.arrayBuffer())
}
const arrayBuffer = await zip
.generateAsync({
type: 'arraybuffer',
@ -807,16 +815,11 @@ export const SignPage = () => {
const handleEncryptedExport = async () => {
if (Object.entries(files).length === 0 || !meta) return
const zip = new JSZip()
const stringifiedMeta = JSON.stringify(meta, null, 2)
const zip = await getZipWithFiles(meta, files)
zip.file('meta.json', stringifiedMeta)
for (const [fileName, file] of Object.entries(files)) {
zip.file(`files/${fileName}`, await file.arrayBuffer())
}
const arrayBuffer = await zip
.generateAsync({
type: 'arraybuffer',

View File

@ -5,7 +5,13 @@ import { useEffect, useRef, useState } from 'react'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { NostrController } from '../../controllers'
import { DocSignatureEvent, Meta } from '../../types'
import {
DocSignatureEvent,
Meta,
SignedEvent,
OpenTimestamp,
OpenTimestampUpgradeVerifyResponse
} from '../../types'
import {
decryptArrayBuffer,
getHash,
@ -14,7 +20,10 @@ import {
parseJson,
readContentOfZipEntry,
signEventForMetaFile,
getCurrentUserFiles
getCurrentUserFiles,
updateUsersAppData,
npubToHex,
sendNotification
} from '../../utils'
import styles from './style.module.scss'
import { useLocation } from 'react-router-dom'
@ -26,7 +35,7 @@ import { saveAs } from 'file-saver'
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 { UsersDetails } from '../../components/UsersDetails.tsx'
import FileList from '../../components/FileList'
import { CurrentUserFile } from '../../types/file.ts'
import { Mark } from '../../types/mark.ts'
@ -44,6 +53,9 @@ import {
faFile,
faFileDownload
} from '@fortawesome/free-solid-svg-icons'
import { upgradeAndVerifyTimestamp } from '../../utils/opentimestamps.ts'
import _ from 'lodash'
import { MARK_TYPE_CONFIG } from '../../components/getMarkComponents.tsx'
interface PdfViewProps {
files: CurrentUserFile[]
@ -103,6 +115,8 @@ const SlimPdfView = ({
alt={`page ${i} of ${file.name}`}
/>
{marks.map((m) => {
const { render: MarkRenderComponent } =
MARK_TYPE_CONFIG[m.type] || {}
return (
<div
className={`file-mark ${styles.mark}`}
@ -118,7 +132,9 @@ const SlimPdfView = ({
fontSize: inPx(from(page.width, FONT_SIZE))
}}
>
{m.value}
{typeof MarkRenderComponent !== 'undefined' && (
<MarkRenderComponent value={m.value} mark={m} />
)}
</div>
)
})}
@ -176,7 +192,8 @@ export const VerifyPage = () => {
signers,
viewers,
fileHashes,
parsedSignatureEvents
parsedSignatureEvents,
timestamps
} = useSigitMeta(meta)
const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
@ -186,6 +203,16 @@ export const VerifyPage = () => {
[key: string]: string | null
}>({})
const signTimestampEvent = async (signerContent: {
timestamps: OpenTimestamp[]
}): Promise<SignedEvent | null> => {
return await signEventForMetaFile(
JSON.stringify(signerContent),
nostrController,
setIsLoading
)
}
useEffect(() => {
if (Object.entries(files).length > 0) {
const tmp = getCurrentUserFiles(files, currentFileHashes, fileHashes)
@ -193,6 +220,147 @@ export const VerifyPage = () => {
}
}, [currentFileHashes, fileHashes, files])
useEffect(() => {
if (
timestamps &&
timestamps.length > 0 &&
usersPubkey &&
submittedBy &&
parsedSignatureEvents
) {
if (timestamps.every((t) => !!t.verification)) {
return
}
const upgradeT = async (timestamps: OpenTimestamp[]) => {
try {
setLoadingSpinnerDesc('Upgrading your timestamps.')
const findCreatorTimestamp = (timestamps: OpenTimestamp[]) => {
if (usersPubkey === submittedBy) {
return timestamps[0]
}
}
const findSignerTimestamp = (timestamps: OpenTimestamp[]) => {
const parsedEvent = parsedSignatureEvents[hexToNpub(usersPubkey)]
if (parsedEvent?.id) {
return timestamps.find((t) => t.nostrId === parsedEvent.id)
}
}
/**
* Checks if timestamp verification has been achieved for the first time.
* Note that the upgrade flag is separate from verification. It is possible for a timestamp
* to not be upgraded, but to be verified for the first time.
* @param upgradedTimestamp
* @param timestamps
*/
const isNewlyVerified = (
upgradedTimestamp: OpenTimestampUpgradeVerifyResponse,
timestamps: OpenTimestamp[]
) => {
if (!upgradedTimestamp.verified) return false
const oldT = timestamps.find(
(t) => t.nostrId === upgradedTimestamp.timestamp.nostrId
)
if (!oldT) return false
if (!oldT.verification && upgradedTimestamp.verified) return true
}
const userTimestamps: OpenTimestamp[] = []
const creatorTimestamp = findCreatorTimestamp(timestamps)
if (creatorTimestamp) {
userTimestamps.push(creatorTimestamp)
}
const signerTimestamp = findSignerTimestamp(timestamps)
if (signerTimestamp) {
userTimestamps.push(signerTimestamp)
}
if (userTimestamps.every((t) => !!t.verification)) {
return
}
const upgradedUserTimestamps = await Promise.all(
userTimestamps.map(upgradeAndVerifyTimestamp)
)
const upgradedTimestamps = upgradedUserTimestamps
.filter((t) => t.upgraded || isNewlyVerified(t, userTimestamps))
.map((t) => {
const timestamp: OpenTimestamp = { ...t.timestamp }
if (t.verified) {
timestamp.verification = t.verification
}
return timestamp
})
if (upgradedTimestamps.length === 0) {
return
}
setLoadingSpinnerDesc('Signing a timestamp upgrade event.')
const signedEvent = await signTimestampEvent({
timestamps: upgradedTimestamps
})
if (!signedEvent) return
const finalTimestamps = timestamps.map((t) => {
const upgraded = upgradedTimestamps.find(
(tu) => tu.nostrId === t.nostrId
)
if (upgraded) {
return {
...upgraded,
signature: JSON.stringify(signedEvent, null, 2)
}
}
return t
})
const updatedMeta = _.cloneDeep(meta)
updatedMeta.timestamps = [...finalTimestamps]
updatedMeta.modifiedAt = unixNow()
const updatedEvent = await updateUsersAppData(updatedMeta)
if (!updatedEvent) return
const userSet = new Set<`npub1${string}`>()
signers.forEach((signer) => {
if (signer !== usersPubkey) {
userSet.add(signer)
}
})
viewers.forEach((viewer) => {
userSet.add(viewer)
})
const users = Array.from(userSet)
const promises = users.map((user) =>
sendNotification(npubToHex(user)!, updatedMeta)
)
await Promise.all(promises)
toast.success('Timestamp updates have been sent successfully.')
setMeta(meta)
} catch (err) {
console.error(err)
toast.error(
'There was an error upgrading or verifying your timestamps!'
)
}
}
upgradeT(timestamps)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [timestamps, submittedBy, parsedSignatureEvents])
useEffect(() => {
if (metaInNavState && encryptionKey) {
const processSigit = async () => {

View File

@ -18,6 +18,7 @@ export interface Meta {
docSignatures: { [key: `npub1${string}`]: string }
exportSignature?: string
keys?: { sender: string; keys: { [user: `npub1${string}`]: string } }
timestamps?: OpenTimestamp[]
}
export interface CreateSignatureEventContent {
@ -39,6 +40,25 @@ export interface Sigit {
meta: Meta
}
export interface OpenTimestamp {
nostrId: string
value: string
verification?: OpenTimestampVerification
signature?: string
}
export interface OpenTimestampVerification {
height: number
timestamp: number
}
export interface OpenTimestampUpgradeVerifyResponse {
timestamp: OpenTimestamp
upgraded: boolean
verified?: boolean
verification?: OpenTimestampVerification
}
export interface UserAppData {
/**
* Key will be id of create signature

5
src/types/event.ts Normal file
View File

@ -0,0 +1,5 @@
export enum KeyboardCode {
Escape = 'Escape',
Enter = 'Enter',
NumpadEnter = 'NumpadEnter'
}

View File

@ -4,3 +4,4 @@ export * from './nostr'
export * from './profile'
export * from './relay'
export * from './zip'
export * from './event'

View File

@ -28,3 +28,24 @@ export interface MarkRect {
width: number
height: number
}
export interface MarkInputProps {
value: string
handler: (value: string) => void
placeholder?: string
userMark?: CurrentUserMark
}
export interface MarkRenderProps {
value?: string
mark: Mark
}
export interface MarkConfig {
input: React.FC<MarkInputProps>
render?: React.FC<MarkRenderProps>
}
export type MarkConfigs = {
[key in MarkType]?: MarkConfig
}

38
src/types/opentimestamps.d.ts vendored Normal file
View File

@ -0,0 +1,38 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
interface OpenTimestamps {
// Create a detached timestamp file from a buffer or file hash
DetachedTimestampFile: {
fromHash(op: any, hash: Uint8Array): any
fromBytes(op: any, buffer: Uint8Array): any
deserialize(buffer: any): any
}
// Stamp the provided timestamp file and return a Promise
stamp(file: any): Promise<void>
// Verify the provided timestamp proof file
verify(
ots: string,
file: string
): Promise<TimestampVerficiationResponse | Record<string, never>>
// Other utilities or operations (like OpSHA256, serialization)
Ops: {
OpSHA256: any
OpSHA1?: any
}
Context: {
StreamSerialization: any
}
// Load a timestamp file from a buffer
deserialize(bytes: Uint8Array): any
// Other potential methods based on repo functions
upgrade(file: any): Promise<boolean>
}
interface TimestampVerficiationResponse {
bitcoin: { timestamp: number; height: number }
}

View File

@ -3,5 +3,6 @@ import type { WindowNostr } from 'nostr-tools/nip07'
declare global {
interface Window {
nostr?: WindowNostr
OpenTimestamps: OpenTimestamps
}
}

View File

@ -20,7 +20,7 @@ export const getZipWithFiles = async (
for (const [fileName, file] of Object.entries(files)) {
// Handle PDF Files, add marks
if (file.isPdf) {
if (file.isPdf && fileName in marksByFileNamePage) {
const blob = await addMarks(file, marksByFileNamePage[fileName])
zip.file(`marked/${fileName}`, blob)
}

View File

@ -1,4 +1,4 @@
import { CurrentUserMark, Mark } from '../types/mark.ts'
import { CurrentUserMark, Mark, MarkLocation } from '../types/mark.ts'
import { hexToNpub } from './nostr.ts'
import { Meta, SignedEventContent } from '../types'
import { Event } from 'nostr-tools'
@ -24,6 +24,7 @@ import {
faStamp,
faTableCellsLarge
} from '@fortawesome/free-solid-svg-icons'
import { Config, optimize } from 'svgo'
/**
* Takes in an array of Marks already filtered by User.
@ -158,6 +159,11 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
icon: faT,
label: 'Text'
},
{
identifier: MarkType.SIGNATURE,
icon: faSignature,
label: 'Signature'
},
{
identifier: MarkType.FULLNAME,
icon: faIdCard,
@ -170,12 +176,6 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
label: 'Job Title',
isComingSoon: true
},
{
identifier: MarkType.SIGNATURE,
icon: faSignature,
label: 'Signature',
isComingSoon: true
},
{
identifier: MarkType.DATETIME,
icon: faClock,
@ -266,6 +266,24 @@ export const getToolboxLabelByMarkType = (markType: MarkType) => {
return DEFAULT_TOOLBOX.find((t) => t.identifier === markType)?.label
}
export const optimizeSVG = (location: MarkLocation, paths: string[]) => {
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${location.width}" height="${location.height}">${paths.map((path) => `<path d="${path}" stroke="black" fill="none" />`).join('')}</svg>`
const optimizedSVG = optimize(svgContent, {
multipass: true, // Optimize multiple times if needed
floatPrecision: 2 // Adjust precision
} as Config)
return optimizedSVG.data
}
export const getOptimizedPaths = (svgString: string) => {
const regex = / d="([^"]*)"/g
const matches = [...svgString.matchAll(regex)]
const pathValues = matches.map((match) => match[1])
return pathValues
}
export {
getCurrentUserMarks,
filterMarksByPubkey,

119
src/utils/opentimestamps.ts Normal file
View File

@ -0,0 +1,119 @@
import { OpenTimestamp, OpenTimestampUpgradeVerifyResponse } from '../types'
import { retry } from './retry.ts'
import { bytesToHex } from '@noble/hashes/utils'
import { utf8Encoder } from 'nostr-tools/utils'
import { hexStringToUint8Array } from './string.ts'
/**
* Generates a timestamp for the provided nostr event ID.
* @returns Timestamp with its value and the nostr event ID.
*/
export const generateTimestamp = async (
nostrId: string
): Promise<OpenTimestamp | undefined> => {
try {
return {
value: await retry(() => timestamp(nostrId)),
nostrId: nostrId
}
} catch (error) {
console.error(error)
return
}
}
/**
* Attempts to upgrade (i.e. add Bitcoin blockchain attestations) and verify the provided timestamp.
* Returns the same timestamp, alongside additional information required to decide if any further
* timestamp updates are required.
* @param timestamp
*/
export const upgradeAndVerifyTimestamp = async (
timestamp: OpenTimestamp
): Promise<OpenTimestampUpgradeVerifyResponse> => {
const upgradedResult = await upgrade(timestamp)
return await verify(upgradedResult)
}
/**
* Attempts to upgrade a timestamp. If an upgrade is available,
* it will add new data to detachedTimestamp.
* The upgraded flag indicates if an upgrade has been performed.
* @param t - timestamp
*/
export const upgrade = async (
t: OpenTimestamp
): Promise<OpenTimestampUpgradeVerifyResponse> => {
const detachedTimestamp =
window.OpenTimestamps.DetachedTimestampFile.deserialize(
hexStringToUint8Array(t.value)
)
const changed: boolean =
await window.OpenTimestamps.upgrade(detachedTimestamp)
if (changed) {
const updated = detachedTimestamp.serializeToBytes()
const value = {
...t,
timestamp: bytesToHex(updated)
}
return {
timestamp: value,
upgraded: true
}
}
return {
timestamp: t,
upgraded: false
}
}
/**
* Attempts to verify a timestamp. If verification is available,
* it will be included in the returned object.
* @param t - timestamp
*/
export const verify = async (
t: OpenTimestampUpgradeVerifyResponse
): Promise<OpenTimestampUpgradeVerifyResponse> => {
const detachedNostrId = window.OpenTimestamps.DetachedTimestampFile.fromBytes(
new window.OpenTimestamps.Ops.OpSHA256(),
utf8Encoder.encode(t.timestamp.nostrId)
)
const detachedTimestamp =
window.OpenTimestamps.DetachedTimestampFile.deserialize(
hexStringToUint8Array(t.timestamp.value)
)
const res = await window.OpenTimestamps.verify(
detachedTimestamp,
detachedNostrId
)
return {
...t,
verified: !!res.bitcoin,
verification: res?.bitcoin || null
}
}
/**
* Timestamps a nostrId.
* @param nostrId
*/
const timestamp = async (nostrId: string): Promise<string> => {
const detachedTimestamp =
window.OpenTimestamps.DetachedTimestampFile.fromBytes(
new window.OpenTimestamps.Ops.OpSHA256(),
utf8Encoder.encode(nostrId)
)
await window.OpenTimestamps.stamp(detachedTimestamp)
const ctx = new window.OpenTimestamps.Context.StreamSerialization()
detachedTimestamp.serialize(ctx)
const timestampBytes = ctx.getOutput()
return bytesToHex(timestampBytes)
}

View File

@ -1,4 +1,4 @@
import { PdfPage } from '../types/drawing.ts'
import { MarkType, PdfPage } from '../types/drawing.ts'
import { PDFDocument, PDFFont, PDFPage, rgb } from 'pdf-lib'
import { Mark } from '../types/mark.ts'
import * as PDFJS from 'pdfjs-dist'
@ -132,9 +132,17 @@ export const addMarks = async (
for (let i = 0; i < pages.length; i++) {
if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
marksPerPage[i]?.forEach((mark) =>
drawMarkText(mark, pages[i], robotoFont)
)
marksPerPage[i]?.forEach((mark) => {
switch (mark.type) {
case MarkType.SIGNATURE:
drawSignatureText(mark, pages[i])
break
default:
drawMarkText(mark, pages[i], robotoFont)
break
}
})
}
}
@ -245,3 +253,19 @@ async function embedFont(pdf: PDFDocument) {
const embeddedFont = await pdf.embedFont(fontBytes)
return embeddedFont
}
const drawSignatureText = (mark: Mark, page: PDFPage) => {
const { location } = mark
const { height } = page.getSize()
// Convert the mark location origin (top, left) to PDF origin (bottom, left)
const x = location.left
const y = height - location.top
if (hasValue(mark)) {
const paths = JSON.parse(mark.value!)
paths.forEach((d: string) => {
page.drawSvgPath(d, { x, y })
})
}
}

25
src/utils/retry.ts Normal file
View File

@ -0,0 +1,25 @@
export const retryAll = async <T>(
promises: (() => Promise<T>)[],
retries: number = 3,
delay: number = 1000
) => {
const wrappedPromises = promises.map((fn) => retry(fn, retries, delay))
return Promise.allSettled(wrappedPromises)
}
export const retry = async <T>(
fn: () => Promise<T>,
retries: number = 3,
delay: number = 1000
): Promise<T> => {
try {
return await fn()
} catch (err) {
if (retries === 0) {
return Promise.reject(err)
}
return new Promise((resolve) =>
setTimeout(() => resolve(retry(fn, retries - 1)), delay)
)
}
}

View File

@ -2,6 +2,18 @@ import { TimeoutError } from '../types/errors/TimeoutError.ts'
import { CurrentUserFile } from '../types/file.ts'
import { SigitFile } from './file.ts'
export const debounceCustom = <T extends (...args: never[]) => void>(
fn: T,
delay: number
): ((...args: Parameters<T>) => void) => {
let timerId: ReturnType<typeof setTimeout>
return (...args: Parameters<T>) => {
clearTimeout(timerId)
timerId = setTimeout(() => fn(...args), delay)
}
}
export const compareObjects = (
obj1: object | null | undefined,
obj2: object | null | undefined
@ -119,3 +131,15 @@ export const settleAllFullfilfedPromises = async <Item, FulfilledItem = Item>(
return acc
}, [])
}
export const isPromiseFulfilled = <T>(
result: PromiseSettledResult<T>
): result is PromiseFulfilledResult<T> => {
return result.status === 'fulfilled'
}
export const isPromiseRejected = <T>(
result: PromiseSettledResult<T>
): result is PromiseRejectedResult => {
return result.status === 'rejected'
}

View File

@ -1,9 +1,16 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
export default defineConfig({
plugins: [react(), tsconfigPaths()],
plugins: [
react(),
tsconfigPaths(),
nodePolyfills({
include: ['os']
})
],
build: {
target: 'ES2022'
}