Compare commits
No commits in common. "7d3daa8d13827fa8dc1b51ed8d3572efb187be88" and "d41d577c29af2135e4352186af1b4b434d22cc95" have entirely different histories.
7d3daa8d13
...
d41d577c29
@ -6,7 +6,7 @@ module.exports = {
|
|||||||
'plugin:@typescript-eslint/recommended',
|
'plugin:@typescript-eslint/recommended',
|
||||||
'plugin:react-hooks/recommended'
|
'plugin:react-hooks/recommended'
|
||||||
],
|
],
|
||||||
ignorePatterns: ['dist', '.eslintrc.cjs', 'licenseChecker.cjs'],
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
parser: '@typescript-eslint/parser',
|
parser: '@typescript-eslint/parser',
|
||||||
plugins: ['react-refresh'],
|
plugins: ['react-refresh'],
|
||||||
rules: {
|
rules: {
|
||||||
|
@ -1,19 +0,0 @@
|
|||||||
#!/bin/sh
|
|
||||||
# Get the commit message (the parameter we're given is just the path to the
|
|
||||||
# temporary file which holds the message).
|
|
||||||
commit_message=$(cat "$1")
|
|
||||||
|
|
||||||
if (echo "$commit_message" | grep -Eq "^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([a-z0-9 \-]+\))?!?: .+$") then
|
|
||||||
tput setaf 2;
|
|
||||||
echo "✔ Commit message meets Conventional Commit standards"
|
|
||||||
tput sgr0;
|
|
||||||
exit 0
|
|
||||||
fi
|
|
||||||
|
|
||||||
tput setaf 1;
|
|
||||||
echo "❌ Commit message does not meet the Conventional Commit standard!"
|
|
||||||
tput sgr0;
|
|
||||||
echo "An example of a valid message is:"
|
|
||||||
echo " feat(login): add the 'remember me' button"
|
|
||||||
echo "📝 More details at: https://www.conventionalcommits.org/en/v1.0.0/#summary"
|
|
||||||
exit 1
|
|
@ -1,13 +0,0 @@
|
|||||||
#!/bin/sh
|
|
||||||
|
|
||||||
# Avoid commits to the master branch
|
|
||||||
BRANCH=`git rev-parse --abbrev-ref HEAD`
|
|
||||||
REGEX="^(master|main|staging|development)$"
|
|
||||||
|
|
||||||
if [[ "$BRANCH" =~ $REGEX ]]; then
|
|
||||||
echo "You are on branch $BRANCH. Are you sure you want to commit to this branch?"
|
|
||||||
echo "If so, commit with -n to bypass the pre-commit hook."
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
npm run lint-staged
|
|
@ -17,21 +17,9 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- name: Audit
|
|
||||||
run: npm audit
|
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: npm ci
|
run: npm ci
|
||||||
|
|
||||||
- name: License check
|
|
||||||
run: npm run license-checker
|
|
||||||
|
|
||||||
- name: Lint check
|
|
||||||
run: npm run lint
|
|
||||||
|
|
||||||
- name: Formatter check
|
|
||||||
run: npm run formatter:check
|
|
||||||
|
|
||||||
- name: Create .env File
|
- name: Create .env File
|
||||||
run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
|
run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
|
||||||
|
|
||||||
|
@ -1,34 +0,0 @@
|
|||||||
name: Open PR on Staging
|
|
||||||
on:
|
|
||||||
pull_request:
|
|
||||||
types: [opened, edited, synchronize]
|
|
||||||
branches:
|
|
||||||
- staging
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
audit_and_check:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Checkout
|
|
||||||
uses: actions/checkout@v3
|
|
||||||
|
|
||||||
- name: Setup Node
|
|
||||||
uses: actions/setup-node@v2
|
|
||||||
with:
|
|
||||||
node-version: 18
|
|
||||||
|
|
||||||
- name: Audit
|
|
||||||
run: npm audit
|
|
||||||
|
|
||||||
- name: Install Dependencies
|
|
||||||
run: npm ci
|
|
||||||
|
|
||||||
- name: License check
|
|
||||||
run: npm run license-checker
|
|
||||||
|
|
||||||
- name: Lint check
|
|
||||||
run: npm run lint
|
|
||||||
|
|
||||||
- name: Formatter check
|
|
||||||
run: npm run formatter:check
|
|
@ -1,28 +0,0 @@
|
|||||||
const process = require('node:process')
|
|
||||||
const licenseChecker = require('license-checker')
|
|
||||||
|
|
||||||
const check = (cwd) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
licenseChecker.init(
|
|
||||||
{
|
|
||||||
production: true,
|
|
||||||
start: cwd,
|
|
||||||
excludePrivatePackages: true,
|
|
||||||
onlyAllow:
|
|
||||||
'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;BSD 3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
|
|
||||||
excludePackages: ''
|
|
||||||
},
|
|
||||||
(error, json) => {
|
|
||||||
if (error) {
|
|
||||||
reject(error)
|
|
||||||
} else {
|
|
||||||
resolve(json)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
check(process.cwd(), true)
|
|
||||||
.then(() => console.log('All packages are licensed properly'))
|
|
||||||
.catch((err) => console.log('license checker err', err))
|
|
1150
package-lock.json
generated
1150
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -7,16 +7,11 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 25",
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
"lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
||||||
"formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
|
"formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
|
||||||
"formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
|
"formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
|
||||||
"formatter:staged": "prettier --write --ignore-unknown",
|
"preview": "vite preview"
|
||||||
"preview": "vite preview",
|
|
||||||
"preinstall": "git config core.hooksPath .git-hooks",
|
|
||||||
"license-checker": "node licenseChecker.cjs",
|
|
||||||
"lint-staged": "lint-staged"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "11.11.4",
|
"@emotion/react": "11.11.4",
|
||||||
@ -31,7 +26,7 @@
|
|||||||
"@noble/hashes": "^1.4.0",
|
"@noble/hashes": "^1.4.0",
|
||||||
"@nostr-dev-kit/ndk": "2.5.0",
|
"@nostr-dev-kit/ndk": "2.5.0",
|
||||||
"@reduxjs/toolkit": "2.2.1",
|
"@reduxjs/toolkit": "2.2.1",
|
||||||
"axios": "^1.7.4",
|
"axios": "1.6.7",
|
||||||
"crypto-hash": "3.0.0",
|
"crypto-hash": "3.0.0",
|
||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"dnd-core": "16.0.1",
|
"dnd-core": "16.0.1",
|
||||||
@ -47,7 +42,6 @@
|
|||||||
"react-dnd": "16.0.1",
|
"react-dnd": "16.0.1",
|
||||||
"react-dnd-html5-backend": "16.0.1",
|
"react-dnd-html5-backend": "16.0.1",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-dropzone": "^14.2.3",
|
|
||||||
"react-redux": "9.1.0",
|
"react-redux": "9.1.0",
|
||||||
"react-router-dom": "6.22.1",
|
"react-router-dom": "6.22.1",
|
||||||
"react-toastify": "10.0.4",
|
"react-toastify": "10.0.4",
|
||||||
@ -67,18 +61,10 @@
|
|||||||
"eslint": "^8.56.0",
|
"eslint": "^8.56.0",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.5",
|
"eslint-plugin-react-refresh": "^0.4.5",
|
||||||
"license-checker": "^25.0.1",
|
|
||||||
"lint-staged": "^15.2.8",
|
|
||||||
"prettier": "3.2.5",
|
"prettier": "3.2.5",
|
||||||
"ts-css-modules-vite-plugin": "1.0.20",
|
"ts-css-modules-vite-plugin": "1.0.20",
|
||||||
"typescript": "^5.2.2",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^5.1.4",
|
"vite": "^5.1.4",
|
||||||
"vite-tsconfig-paths": "4.3.2"
|
"vite-tsconfig-paths": "4.3.2"
|
||||||
},
|
|
||||||
"lint-staged": {
|
|
||||||
"*.{js,jsx,ts,tsx}": [
|
|
||||||
"npm run lint:staged"
|
|
||||||
],
|
|
||||||
"*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -56,16 +56,10 @@ a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-decoration-color: inherit;
|
text-decoration-color: inherit;
|
||||||
transition: ease 0.4s;
|
transition: ease 0.4s;
|
||||||
outline: none;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $primary-light;
|
color: $primary-light;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: inherit;
|
text-decoration-color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
@ -6,18 +6,6 @@ interface ContainerProps {
|
|||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Container component with pre-defined width, padding and margins for top level layout.
|
|
||||||
*
|
|
||||||
* **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
|
|
||||||
* - When using *className* override, that styles are imported after the actual `Container` component
|
|
||||||
* ```
|
|
||||||
* import { Container } from './components/Container'
|
|
||||||
* import styles from './style.module.scss'
|
|
||||||
* ```
|
|
||||||
* - or add *!important* to imported styles
|
|
||||||
* - or override styles with *CSSProperties* object
|
|
||||||
*/
|
|
||||||
export const Container = ({
|
export const Container = ({
|
||||||
style = {},
|
style = {},
|
||||||
className = '',
|
className = '',
|
||||||
|
@ -1,158 +0,0 @@
|
|||||||
import { Meta } from '../../types'
|
|
||||||
import { SigitCardDisplayInfo, SigitStatus } from '../../utils'
|
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
|
|
||||||
import { appPublicRoutes, appPrivateRoutes } from '../../routes'
|
|
||||||
import { Button, Divider, Tooltip } from '@mui/material'
|
|
||||||
import { DisplaySigner } from '../DisplaySigner'
|
|
||||||
import {
|
|
||||||
faArchive,
|
|
||||||
faCalendar,
|
|
||||||
faCopy,
|
|
||||||
faEye,
|
|
||||||
faFile
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { UserAvatar } from '../UserAvatar'
|
|
||||||
import { UserAvatarGroup } from '../UserAvatarGroup'
|
|
||||||
|
|
||||||
import styles from './style.module.scss'
|
|
||||||
import { TooltipChild } from '../TooltipChild'
|
|
||||||
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
|
||||||
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
|
|
||||||
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
|
||||||
|
|
||||||
type SigitProps = {
|
|
||||||
meta: Meta
|
|
||||||
parsedMeta: SigitCardDisplayInfo
|
|
||||||
}
|
|
||||||
|
|
||||||
export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
createdAt,
|
|
||||||
submittedBy,
|
|
||||||
signers,
|
|
||||||
signedStatus,
|
|
||||||
fileExtensions
|
|
||||||
} = parsedMeta
|
|
||||||
|
|
||||||
const { signersStatus } = useSigitMeta(meta)
|
|
||||||
|
|
||||||
const profiles = useSigitProfiles([
|
|
||||||
...(submittedBy ? [submittedBy] : []),
|
|
||||||
...signers
|
|
||||||
])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.itemWrapper}>
|
|
||||||
<Link
|
|
||||||
to={
|
|
||||||
signedStatus === SigitStatus.Complete
|
|
||||||
? appPublicRoutes.verify
|
|
||||||
: appPrivateRoutes.sign
|
|
||||||
}
|
|
||||||
state={{ meta }}
|
|
||||||
className={styles.insetLink}
|
|
||||||
></Link>
|
|
||||||
<p className={`line-clamp-2 ${styles.title}`}>{title}</p>
|
|
||||||
<div className={styles.users}>
|
|
||||||
{submittedBy &&
|
|
||||||
(function () {
|
|
||||||
const profile = profiles[submittedBy]
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
title={
|
|
||||||
profile?.display_name ||
|
|
||||||
profile?.name ||
|
|
||||||
shorten(hexToNpub(submittedBy))
|
|
||||||
}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<TooltipChild>
|
|
||||||
<UserAvatar pubkey={submittedBy} image={profile?.picture} />
|
|
||||||
</TooltipChild>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
})()}
|
|
||||||
{submittedBy && signers.length ? (
|
|
||||||
<Divider orientation="vertical" flexItem />
|
|
||||||
) : null}
|
|
||||||
<UserAvatarGroup max={7}>
|
|
||||||
{signers.map((signer) => {
|
|
||||||
const pubkey = npubToHex(signer)!
|
|
||||||
const profile = profiles[pubkey]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
key={signer}
|
|
||||||
title={
|
|
||||||
profile?.display_name || profile?.name || shorten(pubkey)
|
|
||||||
}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<TooltipChild>
|
|
||||||
<DisplaySigner
|
|
||||||
status={signersStatus[signer]}
|
|
||||||
profile={profile}
|
|
||||||
pubkey={pubkey}
|
|
||||||
/>
|
|
||||||
</TooltipChild>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</UserAvatarGroup>
|
|
||||||
</div>
|
|
||||||
<div className={`${styles.details} ${styles.date} ${styles.iconLabel}`}>
|
|
||||||
<FontAwesomeIcon icon={faCalendar} />
|
|
||||||
{createdAt ? formatTimestamp(createdAt) : null}
|
|
||||||
</div>
|
|
||||||
<div className={`${styles.details} ${styles.status}`}>
|
|
||||||
<span className={styles.iconLabel}>
|
|
||||||
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
|
||||||
</span>
|
|
||||||
{fileExtensions.length > 0 ? (
|
|
||||||
<span className={styles.iconLabel}>
|
|
||||||
{fileExtensions.length > 1 ? (
|
|
||||||
<>
|
|
||||||
<FontAwesomeIcon icon={faFile} /> Multiple File Types
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
getExtensionIconLabel(fileExtensions[0])
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<div className={styles.itemActions}>
|
|
||||||
<Tooltip title="Duplicate" arrow placement="top" disableInteractive>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
color: 'var(--primary-main)',
|
|
||||||
minWidth: '34px',
|
|
||||||
padding: '10px'
|
|
||||||
}}
|
|
||||||
variant={'text'}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faCopy} />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title="Archive" arrow placement="top" disableInteractive>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
color: 'var(--primary-main)',
|
|
||||||
minWidth: '34px',
|
|
||||||
padding: '10px'
|
|
||||||
}}
|
|
||||||
variant={'text'}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faArchive} />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1,114 +0,0 @@
|
|||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
.itemWrapper {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: $overlay-background-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
padding: 15px;
|
|
||||||
gap: 15px;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&:only-child {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
transition: opacity ease 0.2s;
|
|
||||||
opacity: 0;
|
|
||||||
width: 4px;
|
|
||||||
background-color: $primary-main;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus-within {
|
|
||||||
&::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemActions {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.insetLink {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemActions {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
transition: ease 0.2s;
|
|
||||||
transform: translateX(100%);
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
flex-direction: column;
|
|
||||||
background: $overlay-background-color;
|
|
||||||
border-left: solid 1px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus-within {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: none) {
|
|
||||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
|
||||||
padding-top: 10px;
|
|
||||||
margin-inline: -15px;
|
|
||||||
margin-bottom: -15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 20px;
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users {
|
|
||||||
margin-top: auto;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
grid-gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
color: rgba(0, 0, 0, 0.3);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconLabel {
|
|
||||||
display: flex;
|
|
||||||
grid-gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
display: flex;
|
|
||||||
grid-gap: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.itemWrapper:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
@ -1,62 +0,0 @@
|
|||||||
import { Badge } from '@mui/material'
|
|
||||||
import { ProfileMetadata } from '../../types'
|
|
||||||
import styles from './style.module.scss'
|
|
||||||
import { UserAvatar } from '../UserAvatar'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import {
|
|
||||||
faCheck,
|
|
||||||
faEllipsis,
|
|
||||||
faExclamation,
|
|
||||||
faEye,
|
|
||||||
faHourglass,
|
|
||||||
faQuestion
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { SignStatus } from '../../utils'
|
|
||||||
import { Spinner } from '../Spinner'
|
|
||||||
|
|
||||||
type DisplaySignerProps = {
|
|
||||||
profile: ProfileMetadata
|
|
||||||
pubkey: string
|
|
||||||
status: SignStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
export const DisplaySigner = ({
|
|
||||||
status,
|
|
||||||
profile,
|
|
||||||
pubkey
|
|
||||||
}: DisplaySignerProps) => {
|
|
||||||
const getStatusIcon = (status: SignStatus) => {
|
|
||||||
switch (status) {
|
|
||||||
case SignStatus.Signed:
|
|
||||||
return <FontAwesomeIcon icon={faCheck} />
|
|
||||||
case SignStatus.Awaiting:
|
|
||||||
return (
|
|
||||||
<Spinner>
|
|
||||||
<FontAwesomeIcon icon={faHourglass} />
|
|
||||||
</Spinner>
|
|
||||||
)
|
|
||||||
case SignStatus.Pending:
|
|
||||||
return <FontAwesomeIcon icon={faEllipsis} />
|
|
||||||
case SignStatus.Invalid:
|
|
||||||
return <FontAwesomeIcon icon={faExclamation} />
|
|
||||||
case SignStatus.Viewer:
|
|
||||||
return <FontAwesomeIcon icon={faEye} />
|
|
||||||
|
|
||||||
default:
|
|
||||||
return <FontAwesomeIcon icon={faQuestion} />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Badge
|
|
||||||
className={styles.signer}
|
|
||||||
overlap="circular"
|
|
||||||
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
||||||
badgeContent={
|
|
||||||
<div className={styles.statusBadge}>{getStatusIcon(status)}</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<UserAvatar pubkey={pubkey} image={profile?.picture} />
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1,23 +0,0 @@
|
|||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
.statusBadge {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
font-size: 10px;
|
|
||||||
|
|
||||||
background-color: $primary-main;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signer {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
@ -1,45 +1,15 @@
|
|||||||
import {
|
import { AccessTime, CalendarMonth, ExpandMore, Gesture, PictureAsPdf, Badge, Work, Close } from '@mui/icons-material'
|
||||||
AccessTime,
|
import { Box, Typography, Accordion, AccordionDetails, AccordionSummary, CircularProgress, FormControl, InputLabel, MenuItem, Select } from '@mui/material'
|
||||||
CalendarMonth,
|
|
||||||
ExpandMore,
|
|
||||||
Gesture,
|
|
||||||
PictureAsPdf,
|
|
||||||
Badge,
|
|
||||||
Work,
|
|
||||||
Close
|
|
||||||
} from '@mui/icons-material'
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Accordion,
|
|
||||||
AccordionDetails,
|
|
||||||
AccordionSummary,
|
|
||||||
CircularProgress,
|
|
||||||
FormControl,
|
|
||||||
InputLabel,
|
|
||||||
MenuItem,
|
|
||||||
Select
|
|
||||||
} from '@mui/material'
|
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import * as PDFJS from 'pdfjs-dist'
|
import * as PDFJS from "pdfjs-dist";
|
||||||
import { ProfileMetadata, User } from '../../types'
|
import { ProfileMetadata, User } from '../../types';
|
||||||
import {
|
import { PdfFile, DrawTool, MouseState, PdfPage, DrawnField, MarkType } from '../../types/drawing';
|
||||||
PdfFile,
|
import { truncate } from 'lodash';
|
||||||
DrawTool,
|
import { hexToNpub } from '../../utils';
|
||||||
MouseState,
|
|
||||||
PdfPage,
|
|
||||||
DrawnField,
|
|
||||||
MarkType
|
|
||||||
} from '../../types/drawing'
|
|
||||||
import { truncate } from 'lodash'
|
|
||||||
import { hexToNpub } from '../../utils'
|
|
||||||
import { toPdfFiles } from '../../utils/pdf.ts'
|
import { toPdfFiles } from '../../utils/pdf.ts'
|
||||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
||||||
import.meta.url
|
|
||||||
).toString()
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
selectedFiles: File[]
|
selectedFiles: File[]
|
||||||
@ -59,34 +29,35 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
const [toolbox] = useState<DrawTool[]>([
|
const [toolbox] = useState<DrawTool[]>([
|
||||||
{
|
{
|
||||||
identifier: MarkType.SIGNATURE,
|
identifier: MarkType.SIGNATURE,
|
||||||
icon: <Gesture />,
|
icon: <Gesture/>,
|
||||||
label: 'Signature',
|
label: 'Signature',
|
||||||
active: false
|
active: false
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.FULLNAME,
|
identifier: MarkType.FULLNAME,
|
||||||
icon: <Badge />,
|
icon: <Badge/>,
|
||||||
label: 'Full Name',
|
label: 'Full Name',
|
||||||
active: true
|
active: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.JOBTITLE,
|
identifier: MarkType.JOBTITLE,
|
||||||
icon: <Work />,
|
icon: <Work/>,
|
||||||
label: 'Job Title',
|
label: 'Job Title',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.DATE,
|
identifier: MarkType.DATE,
|
||||||
icon: <CalendarMonth />,
|
icon: <CalendarMonth/>,
|
||||||
label: 'Date',
|
label: 'Date',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.DATETIME,
|
identifier: MarkType.DATETIME,
|
||||||
icon: <AccessTime />,
|
icon: <AccessTime/>,
|
||||||
label: 'Datetime',
|
label: 'Datetime',
|
||||||
active: false
|
active: false
|
||||||
}
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
const [mouseState, setMouseState] = useState<MouseState>({
|
const [mouseState, setMouseState] = useState<MouseState>({
|
||||||
@ -112,11 +83,11 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
*/
|
*/
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// window.addEventListener('mousedown', onMouseDown);
|
// window.addEventListener('mousedown', onMouseDown);
|
||||||
window.addEventListener('mouseup', onMouseUp)
|
window.addEventListener('mouseup', onMouseUp);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
// window.removeEventListener('mousedown', onMouseDown);
|
// window.removeEventListener('mousedown', onMouseDown);
|
||||||
window.removeEventListener('mouseup', onMouseUp)
|
window.removeEventListener('mouseup', onMouseUp);
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
@ -187,7 +158,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
*/
|
*/
|
||||||
const onMouseMove = (event: any, page: PdfPage) => {
|
const onMouseMove = (event: any, page: PdfPage) => {
|
||||||
if (mouseState.clicked && selectedTool) {
|
if (mouseState.clicked && selectedTool) {
|
||||||
const lastElementIndex = page.drawnFields.length - 1
|
const lastElementIndex = page.drawnFields.length -1
|
||||||
const lastDrawnField = page.drawnFields[lastElementIndex]
|
const lastDrawnField = page.drawnFields[lastElementIndex]
|
||||||
|
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
const { mouseX, mouseY } = getMouseCoordinates(event)
|
||||||
@ -241,10 +212,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
*/
|
*/
|
||||||
const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
|
const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
|
||||||
if (mouseState.dragging) {
|
if (mouseState.dragging) {
|
||||||
const { mouseX, mouseY, rect } = getMouseCoordinates(
|
const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode)
|
||||||
event,
|
|
||||||
event.target.parentNode
|
|
||||||
)
|
|
||||||
const coordsOffset = mouseState.coordsInWrapper
|
const coordsOffset = mouseState.coordsInWrapper
|
||||||
|
|
||||||
if (coordsOffset) {
|
if (coordsOffset) {
|
||||||
@ -290,10 +258,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
*/
|
*/
|
||||||
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
|
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
|
||||||
if (mouseState.resizing) {
|
if (mouseState.resizing) {
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(
|
const { mouseX, mouseY } = getMouseCoordinates(event, event.target.parentNode.parentNode)
|
||||||
event,
|
|
||||||
event.target.parentNode.parentNode
|
|
||||||
)
|
|
||||||
|
|
||||||
const width = mouseX - drawnField.left
|
const width = mouseX - drawnField.left
|
||||||
const height = mouseY - drawnField.top
|
const height = mouseY - drawnField.top
|
||||||
@ -312,18 +277,10 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
* @param pdfPageIndex pdf page index
|
* @param pdfPageIndex pdf page index
|
||||||
* @param drawnFileIndex drawn file index
|
* @param drawnFileIndex drawn file index
|
||||||
*/
|
*/
|
||||||
const onRemoveHandleMouseDown = (
|
const onRemoveHandleMouseDown = (event: any, pdfFileIndex: number, pdfPageIndex: number, drawnFileIndex: number) => {
|
||||||
event: any,
|
|
||||||
pdfFileIndex: number,
|
|
||||||
pdfPageIndex: number,
|
|
||||||
drawnFileIndex: number
|
|
||||||
) => {
|
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
|
||||||
pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(
|
pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(drawnFileIndex, 1)
|
||||||
drawnFileIndex,
|
|
||||||
1
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -343,9 +300,9 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
*/
|
*/
|
||||||
const getMouseCoordinates = (event: any, customTarget?: any) => {
|
const getMouseCoordinates = (event: any, customTarget?: any) => {
|
||||||
const target = customTarget ? customTarget : event.target
|
const target = customTarget ? customTarget : event.target
|
||||||
const rect = target.getBoundingClientRect()
|
const rect = target.getBoundingClientRect();
|
||||||
const mouseX = event.clientX - rect.left //x position within the element.
|
const mouseX = event.clientX - rect.left; //x position within the element.
|
||||||
const mouseY = event.clientY - rect.top //y position within the element.
|
const mouseY = event.clientY - rect.top; //y position within the element.
|
||||||
|
|
||||||
return {
|
return {
|
||||||
mouseX,
|
mouseX,
|
||||||
@ -359,7 +316,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
* creates the pdfFiles object and sets to a state
|
* creates the pdfFiles object and sets to a state
|
||||||
*/
|
*/
|
||||||
const parsePdfPages = async () => {
|
const parsePdfPages = async () => {
|
||||||
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
|
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles);
|
||||||
|
|
||||||
setPdfFiles(pdfFiles)
|
setPdfFiles(pdfFiles)
|
||||||
}
|
}
|
||||||
@ -369,7 +326,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
* @returns if expanded pdf accordion is present
|
* @returns if expanded pdf accordion is present
|
||||||
*/
|
*/
|
||||||
const hasExpandedPdf = () => {
|
const hasExpandedPdf = () => {
|
||||||
return !!pdfFiles.filter((pdfFile) => !!pdfFile.expanded).length
|
return !!pdfFiles.filter(pdfFile => !!pdfFile.expanded).length
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => {
|
const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => {
|
||||||
@ -398,11 +355,9 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
*/
|
*/
|
||||||
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
|
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box sx={{
|
||||||
sx={{
|
|
||||||
width: '100%'
|
width: '100%'
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
{pdfFile.pages.map((page, pdfPageIndex: number) => {
|
{pdfFile.pages.map((page, pdfPageIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -412,27 +367,17 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
marginBottom: '10px'
|
marginBottom: '10px'
|
||||||
}}
|
}}
|
||||||
className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
|
className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
|
||||||
onMouseMove={(event) => {
|
onMouseMove={(event) => {onMouseMove(event, page)}}
|
||||||
onMouseMove(event, page)
|
onMouseDown={(event) => {onMouseDown(event, page)}}
|
||||||
}}
|
|
||||||
onMouseDown={(event) => {
|
|
||||||
onMouseDown(event, page)
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<img
|
<img draggable="false" style={{ width: '100%' }} src={page.image}/>
|
||||||
draggable="false"
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
src={page.image}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
|
{page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={drawnFieldIndex}
|
key={drawnFieldIndex}
|
||||||
onMouseDown={onDrawnFieldMouseDown}
|
onMouseDown={onDrawnFieldMouseDown}
|
||||||
onMouseMove={(event) => {
|
onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}}
|
||||||
onDranwFieldMouseMove(event, drawnField)
|
|
||||||
}}
|
|
||||||
className={styles.drawingRectangle}
|
className={styles.drawingRectangle}
|
||||||
style={{
|
style={{
|
||||||
left: `${drawnField.left}px`,
|
left: `${drawnField.left}px`,
|
||||||
@ -444,68 +389,41 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
onMouseDown={onResizeHandleMouseDown}
|
onMouseDown={onResizeHandleMouseDown}
|
||||||
onMouseMove={(event) => {
|
onMouseMove={(event) => {onResizeHandleMouseMove(event, drawnField)}}
|
||||||
onResizeHandleMouseMove(event, drawnField)
|
|
||||||
}}
|
|
||||||
className={styles.resizeHandle}
|
className={styles.resizeHandle}
|
||||||
></span>
|
></span>
|
||||||
<span
|
<span
|
||||||
onMouseDown={(event) => {
|
onMouseDown={(event) => {onRemoveHandleMouseDown(event, pdfFileIndex, pdfPageIndex, drawnFieldIndex)}}
|
||||||
onRemoveHandleMouseDown(
|
|
||||||
event,
|
|
||||||
pdfFileIndex,
|
|
||||||
pdfPageIndex,
|
|
||||||
drawnFieldIndex
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
className={styles.removeHandle}
|
className={styles.removeHandle}
|
||||||
>
|
>
|
||||||
<Close fontSize="small" />
|
<Close fontSize='small'/>
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
onMouseDown={onUserSelectHandleMouseDown}
|
onMouseDown={onUserSelectHandleMouseDown}
|
||||||
className={styles.userSelect}
|
className={styles.userSelect}
|
||||||
>
|
>
|
||||||
<FormControl fullWidth size="small">
|
<FormControl fullWidth size='small'>
|
||||||
<InputLabel id="counterparts">Counterpart</InputLabel>
|
<InputLabel id="counterparts">Counterpart</InputLabel>
|
||||||
<Select
|
<Select
|
||||||
value={drawnField.counterpart}
|
value={drawnField.counterpart}
|
||||||
onChange={(event) => {
|
onChange={(event) => { drawnField.counterpart = event.target.value; refreshPdfFiles() }}
|
||||||
drawnField.counterpart = event.target.value
|
|
||||||
refreshPdfFiles()
|
|
||||||
}}
|
|
||||||
labelId="counterparts"
|
labelId="counterparts"
|
||||||
label="Counterparts"
|
label="Counterparts"
|
||||||
>
|
>
|
||||||
{props.users.map((user, index) => {
|
{props.users.map((user, index) => {
|
||||||
let displayValue = truncate(
|
let displayValue = truncate(hexToNpub(user.pubkey), {
|
||||||
hexToNpub(user.pubkey),
|
|
||||||
{
|
|
||||||
length: 16
|
length: 16
|
||||||
}
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const metadata = props.metadata[user.pubkey]
|
const metadata = props.metadata[user.pubkey]
|
||||||
|
|
||||||
if (metadata) {
|
if (metadata) {
|
||||||
displayValue = truncate(
|
displayValue = truncate(metadata.name || metadata.display_name || metadata.username, {
|
||||||
metadata.name ||
|
|
||||||
metadata.display_name ||
|
|
||||||
metadata.username,
|
|
||||||
{
|
|
||||||
length: 16
|
length: 16
|
||||||
}
|
})
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return <MenuItem key={index} value={hexToNpub(user.pubkey)}>{displayValue}</MenuItem>
|
||||||
<MenuItem
|
|
||||||
key={index}
|
|
||||||
value={hexToNpub(user.pubkey)}
|
|
||||||
>
|
|
||||||
{displayValue}
|
|
||||||
</MenuItem>
|
|
||||||
)
|
|
||||||
})}
|
})}
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
@ -523,7 +441,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
if (parsingPdf) {
|
if (parsingPdf) {
|
||||||
return (
|
return (
|
||||||
<Box sx={{ width: '100%', textAlign: 'center' }}>
|
<Box sx={{ width: '100%', textAlign: 'center' }}>
|
||||||
<CircularProgress />
|
<CircularProgress/>
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -539,19 +457,13 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<Accordion
|
<Accordion key={pdfFileIndex} expanded={pdfFile.expanded} onChange={(_event, expanded) => {handleAccordionExpandChange(expanded, pdfFile)}}>
|
||||||
key={pdfFileIndex}
|
|
||||||
expanded={pdfFile.expanded}
|
|
||||||
onChange={(_event, expanded) => {
|
|
||||||
handleAccordionExpandChange(expanded, pdfFile)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AccordionSummary
|
<AccordionSummary
|
||||||
expandIcon={<ExpandMore />}
|
expandIcon={<ExpandMore />}
|
||||||
aria-controls={`panel${pdfFileIndex}-content`}
|
aria-controls={`panel${pdfFileIndex}-content`}
|
||||||
id={`panel${pdfFileIndex}header`}
|
id={`panel${pdfFileIndex}header`}
|
||||||
>
|
>
|
||||||
<PictureAsPdf sx={{ mr: 1 }} />
|
<PictureAsPdf sx={{ mr: 1 }}/>
|
||||||
{pdfFile.file.name}
|
{pdfFile.file.name}
|
||||||
</AccordionSummary>
|
</AccordionSummary>
|
||||||
<AccordionDetails>
|
<AccordionDetails>
|
||||||
@ -565,19 +477,13 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
{showDrawToolBox && (
|
{showDrawToolBox && (
|
||||||
<Box className={styles.drawToolBoxContainer}>
|
<Box className={styles.drawToolBoxContainer}>
|
||||||
<Box className={styles.drawToolBox}>
|
<Box className={styles.drawToolBox}>
|
||||||
{toolbox
|
{toolbox.filter(drawTool => drawTool.active).map((drawTool: DrawTool, index: number) => {
|
||||||
.filter((drawTool) => drawTool.active)
|
|
||||||
.map((drawTool: DrawTool, index: number) => {
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => {
|
onClick={() => {handleToolSelect(drawTool)}} className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}>
|
||||||
handleToolSelect(drawTool)
|
{ drawTool.icon }
|
||||||
}}
|
{ drawTool.label }
|
||||||
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}
|
|
||||||
>
|
|
||||||
{drawTool.icon}
|
|
||||||
{drawTool.label}
|
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
@ -30,7 +30,6 @@
|
|||||||
border: 1px solid rgba(0, 0, 0, 0.137);
|
border: 1px solid rgba(0, 0, 0, 0.137);
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
@ -43,23 +42,16 @@
|
|||||||
border-color: #01aaad79;
|
border-color: #01aaad79;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pdfImageWrapper {
|
.pdfImageWrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
> img {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain; /* Ensure the image fits within the container */
|
|
||||||
}
|
|
||||||
|
|
||||||
&.drawing {
|
&.drawing {
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
@ -107,7 +99,7 @@
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid rgb(160, 160, 160);
|
border: 1px solid rgb(160, 160, 160);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #e74c3c;
|
color: #E74C3C;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -23,6 +23,8 @@ ul {
|
|||||||
|
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
|
position: sticky;
|
||||||
|
top: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
grid-gap: 15px;
|
grid-gap: 15px;
|
||||||
@ -54,6 +56,10 @@ ul {
|
|||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.fileItem {
|
.fileItem {
|
||||||
transition: ease 0.2s;
|
transition: ease 0.2s;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -7,7 +7,6 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
|
@ -81,8 +81,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||||
event.preventDefault();
|
event.preventDefault()
|
||||||
if (!selectedMarkValue || !selectedMark) return;
|
if (!selectedMarkValue || !selectedMark) return
|
||||||
|
|
||||||
const updatedMark: CurrentUserMark = getUpdatedMark(
|
const updatedMark: CurrentUserMark = getUpdatedMark(
|
||||||
selectedMark,
|
selectedMark,
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Divider } from '@mui/material'
|
import { Box, Divider } from '@mui/material'
|
||||||
import PdfItem from './PdfItem.tsx'
|
import PdfItem from './PdfItem.tsx'
|
||||||
import { CurrentUserMark } from '../../types/mark.ts'
|
import { CurrentUserMark } from '../../types/mark.ts'
|
||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
|
@ -1,113 +0,0 @@
|
|||||||
import {
|
|
||||||
FormControl,
|
|
||||||
MenuItem,
|
|
||||||
Select as SelectMui,
|
|
||||||
SelectChangeEvent,
|
|
||||||
styled,
|
|
||||||
SelectProps as SelectMuiProps,
|
|
||||||
MenuItemProps
|
|
||||||
} from '@mui/material'
|
|
||||||
|
|
||||||
const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
|
|
||||||
backgroundColor: 'var(--primary-main)',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: 'white',
|
|
||||||
':hover': {
|
|
||||||
backgroundColor: 'var(--primary-light)'
|
|
||||||
},
|
|
||||||
'& .MuiSelect-select:focus': {
|
|
||||||
backgroundColor: 'var(--primary-light)'
|
|
||||||
},
|
|
||||||
'& .MuiSvgIcon-root': {
|
|
||||||
color: 'white'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
border: 'none'
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
|
|
||||||
const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
|
|
||||||
marginInline: '5px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
'&:hover': {
|
|
||||||
background: 'var(--primary-light)',
|
|
||||||
color: 'white'
|
|
||||||
},
|
|
||||||
'&.Mui-selected': {
|
|
||||||
background: 'var(--primary-dark)',
|
|
||||||
color: 'white'
|
|
||||||
},
|
|
||||||
'&.Mui-selected:hover': {
|
|
||||||
background: 'var(--primary-light)'
|
|
||||||
},
|
|
||||||
'&.Mui-selected.Mui-focusVisible': {
|
|
||||||
background: 'var(--primary-light)',
|
|
||||||
color: 'white'
|
|
||||||
},
|
|
||||||
'&.Mui-focusVisible': {
|
|
||||||
background: 'var(--primary-light)',
|
|
||||||
color: 'white'
|
|
||||||
},
|
|
||||||
'& + *': {
|
|
||||||
marginTop: '5px'
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
|
|
||||||
interface SelectItemProps<T extends string> {
|
|
||||||
value: T
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SelectProps<T extends string> {
|
|
||||||
value: T
|
|
||||||
setValue: React.Dispatch<React.SetStateAction<T>>
|
|
||||||
options: SelectItemProps<T>[]
|
|
||||||
name?: string
|
|
||||||
id?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Select<T extends string>({
|
|
||||||
value,
|
|
||||||
setValue,
|
|
||||||
options,
|
|
||||||
name,
|
|
||||||
id
|
|
||||||
}: SelectProps<T>) {
|
|
||||||
const handleChange = (event: SelectChangeEvent<unknown>) => {
|
|
||||||
setValue(event.target.value as T)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormControl>
|
|
||||||
<SelectCustomized
|
|
||||||
id={id}
|
|
||||||
name={name}
|
|
||||||
size="small"
|
|
||||||
variant="outlined"
|
|
||||||
value={value}
|
|
||||||
onChange={handleChange}
|
|
||||||
MenuProps={{
|
|
||||||
MenuListProps: {
|
|
||||||
sx: {
|
|
||||||
paddingBlock: '5px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
PaperProps: {
|
|
||||||
sx: {
|
|
||||||
boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{options.map((o) => {
|
|
||||||
return (
|
|
||||||
<MenuItemCustomized key={o.label} value={o.value as string}>
|
|
||||||
{o.label}
|
|
||||||
</MenuItemCustomized>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</SelectCustomized>
|
|
||||||
</FormControl>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1,6 +0,0 @@
|
|||||||
import { PropsWithChildren } from 'react'
|
|
||||||
import styles from './style.module.scss'
|
|
||||||
|
|
||||||
export const Spinner = ({ children }: PropsWithChildren) => (
|
|
||||||
<div className={styles.spin}>{children}</div>
|
|
||||||
)
|
|
@ -1,12 +0,0 @@
|
|||||||
.spin {
|
|
||||||
animation: spin 5s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,16 +0,0 @@
|
|||||||
import { forwardRef, PropsWithChildren } from 'react'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper wrapper for custom child components when using `@mui/material/tooltips`.
|
|
||||||
* Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
|
|
||||||
* @source https://mui.com/material-ui/react-tooltip/#custom-child-element
|
|
||||||
*/
|
|
||||||
export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
|
|
||||||
({ children, ...rest }, ref) => {
|
|
||||||
return (
|
|
||||||
<span ref={ref} {...rest}>
|
|
||||||
{children}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
@ -1,11 +1,12 @@
|
|||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { getProfileRoute } from '../../routes'
|
import { getProfileRoute } from '../../routes'
|
||||||
|
|
||||||
import styles from './styles.module.scss'
|
import styles from './styles.module.scss'
|
||||||
|
import React from 'react'
|
||||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
|
|
||||||
interface UserAvatarProps {
|
interface UserAvatarProps {
|
||||||
name?: string
|
name: string
|
||||||
pubkey: string
|
pubkey: string
|
||||||
image?: string
|
image?: string
|
||||||
}
|
}
|
||||||
@ -15,22 +16,27 @@ interface UserAvatarProps {
|
|||||||
* Clicking will navigate to the user's profile.
|
* Clicking will navigate to the user's profile.
|
||||||
*/
|
*/
|
||||||
export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
|
export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
navigate(getProfileRoute(pubkey))
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<div className={styles.container}>
|
||||||
to={getProfileRoute(pubkey)}
|
|
||||||
className={styles.container}
|
|
||||||
tabIndex={-1}
|
|
||||||
>
|
|
||||||
<AvatarIconButton
|
<AvatarIconButton
|
||||||
src={image}
|
src={image}
|
||||||
hexKey={pubkey}
|
hexKey={pubkey}
|
||||||
aria-label={`account of user ${name || pubkey}`}
|
aria-label={`account of user ${name}`}
|
||||||
color="inherit"
|
color="inherit"
|
||||||
sx={{
|
onClick={handleClick}
|
||||||
padding: 0
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
{name ? <label className={styles.username}>{name}</label> : null}
|
{name ? (
|
||||||
</Link>
|
<label onClick={handleClick} className={styles.username}>
|
||||||
|
{name}
|
||||||
|
</label>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
// flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
|
@ -1,38 +0,0 @@
|
|||||||
import { Children, PropsWithChildren } from 'react'
|
|
||||||
|
|
||||||
import styles from './style.module.scss'
|
|
||||||
|
|
||||||
interface UserAvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
||||||
max: number
|
|
||||||
renderSurplus?: ((surplus: number) => React.ReactNode) | undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultSurplus = (surplus: number) => {
|
|
||||||
return <span className={styles.icon}>+{surplus}</span>
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders children with the `max` limit (including surplus if available).
|
|
||||||
* The children are wrapped with a `div` (accepts standard `HTMLDivElement` attributes)
|
|
||||||
* @param max The maximum number of children rendered in a div.
|
|
||||||
* @param renderSurplus Custom render for surplus children (accepts surplus number).
|
|
||||||
*/
|
|
||||||
export const UserAvatarGroup = ({
|
|
||||||
max,
|
|
||||||
renderSurplus = defaultSurplus,
|
|
||||||
children,
|
|
||||||
...rest
|
|
||||||
}: PropsWithChildren<UserAvatarGroupProps>) => {
|
|
||||||
const total = Children.count(children)
|
|
||||||
const surplus = total - max + 1
|
|
||||||
|
|
||||||
const childrenArray = Children.toArray(children)
|
|
||||||
return (
|
|
||||||
<div className={styles.container} {...rest}>
|
|
||||||
{surplus > 1
|
|
||||||
? childrenArray.slice(0, surplus * -1).map((c) => c)
|
|
||||||
: children}
|
|
||||||
{surplus > 1 && renderSurplus(surplus)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1,39 +0,0 @@
|
|||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 0 0 0 10px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
transition: margin ease 0.2s;
|
|
||||||
margin: 0 0 0 -10px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
&:first-child {
|
|
||||||
margin-left: -10px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> *:hover,
|
|
||||||
> *:focus-within {
|
|
||||||
margin: 0 15px 0 5px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-width: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
background: white;
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
border: solid 2px $primary-main;
|
|
||||||
}
|
|
@ -2,6 +2,6 @@
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border-width: 2px;
|
border-width: 3px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
@ -1,217 +0,0 @@
|
|||||||
import { Divider, Tooltip } from '@mui/material'
|
|
||||||
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
|
|
||||||
import {
|
|
||||||
extractFileExtensions,
|
|
||||||
formatTimestamp,
|
|
||||||
fromUnixTimestamp,
|
|
||||||
hexToNpub,
|
|
||||||
npubToHex,
|
|
||||||
shorten,
|
|
||||||
SignStatus
|
|
||||||
} from '../../utils'
|
|
||||||
import { UserAvatar } from '../UserAvatar'
|
|
||||||
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
|
||||||
import { UserAvatarGroup } from '../UserAvatarGroup'
|
|
||||||
|
|
||||||
import styles from './style.module.scss'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import {
|
|
||||||
faCalendar,
|
|
||||||
faCalendarCheck,
|
|
||||||
faCalendarPlus,
|
|
||||||
faEye,
|
|
||||||
faFile,
|
|
||||||
faFileCircleExclamation
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
|
||||||
import { useSelector } from 'react-redux'
|
|
||||||
import { State } from '../../store/rootReducer'
|
|
||||||
import { TooltipChild } from '../TooltipChild'
|
|
||||||
import { DisplaySigner } from '../DisplaySigner'
|
|
||||||
import { Meta } from '../../types'
|
|
||||||
|
|
||||||
interface UsersDetailsProps {
|
|
||||||
meta: Meta
|
|
||||||
}
|
|
||||||
|
|
||||||
export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
|
||||||
const {
|
|
||||||
submittedBy,
|
|
||||||
signers,
|
|
||||||
viewers,
|
|
||||||
fileHashes,
|
|
||||||
signersStatus,
|
|
||||||
createdAt,
|
|
||||||
completedAt,
|
|
||||||
parsedSignatureEvents,
|
|
||||||
signedStatus
|
|
||||||
} = useSigitMeta(meta)
|
|
||||||
const { usersPubkey } = useSelector((state: State) => state.auth)
|
|
||||||
const profiles = useSigitProfiles([
|
|
||||||
...(submittedBy ? [submittedBy] : []),
|
|
||||||
...signers,
|
|
||||||
...viewers
|
|
||||||
])
|
|
||||||
const userCanSign =
|
|
||||||
typeof usersPubkey !== 'undefined' &&
|
|
||||||
signers.includes(hexToNpub(usersPubkey))
|
|
||||||
|
|
||||||
const ext = extractFileExtensions(Object.keys(fileHashes))
|
|
||||||
|
|
||||||
return submittedBy ? (
|
|
||||||
<div className={styles.container}>
|
|
||||||
<div className={styles.section}>
|
|
||||||
<p>Signers</p>
|
|
||||||
<div className={styles.users}>
|
|
||||||
{submittedBy &&
|
|
||||||
(function () {
|
|
||||||
const profile = profiles[submittedBy]
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
title={
|
|
||||||
profile?.display_name ||
|
|
||||||
profile?.name ||
|
|
||||||
shorten(hexToNpub(submittedBy))
|
|
||||||
}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<TooltipChild>
|
|
||||||
<UserAvatar pubkey={submittedBy} image={profile?.picture} />
|
|
||||||
</TooltipChild>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
})()}
|
|
||||||
|
|
||||||
{submittedBy && signers.length ? (
|
|
||||||
<Divider orientation="vertical" flexItem />
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<UserAvatarGroup max={20}>
|
|
||||||
{signers.map((signer) => {
|
|
||||||
const pubkey = npubToHex(signer)!
|
|
||||||
const profile = profiles[pubkey]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
key={signer}
|
|
||||||
title={
|
|
||||||
profile?.display_name || profile?.name || shorten(pubkey)
|
|
||||||
}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<TooltipChild>
|
|
||||||
<DisplaySigner
|
|
||||||
status={signersStatus[signer]}
|
|
||||||
profile={profile}
|
|
||||||
pubkey={pubkey}
|
|
||||||
/>
|
|
||||||
</TooltipChild>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
{viewers.map((signer) => {
|
|
||||||
const pubkey = npubToHex(signer)!
|
|
||||||
const profile = profiles[pubkey]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
key={signer}
|
|
||||||
title={
|
|
||||||
profile?.display_name || profile?.name || shorten(pubkey)
|
|
||||||
}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<TooltipChild>
|
|
||||||
<DisplaySigner
|
|
||||||
status={SignStatus.Viewer}
|
|
||||||
profile={profile}
|
|
||||||
pubkey={pubkey}
|
|
||||||
/>
|
|
||||||
</TooltipChild>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</UserAvatarGroup>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.section}>
|
|
||||||
<p>Details</p>
|
|
||||||
|
|
||||||
<Tooltip
|
|
||||||
title={'Publication date'}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<span className={styles.detailsItem}>
|
|
||||||
<FontAwesomeIcon icon={faCalendarPlus} />{' '}
|
|
||||||
{createdAt ? formatTimestamp(createdAt) : <>—</>}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<Tooltip
|
|
||||||
title={'Completion date'}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<span className={styles.detailsItem}>
|
|
||||||
<FontAwesomeIcon icon={faCalendarCheck} />{' '}
|
|
||||||
{completedAt ? formatTimestamp(completedAt) : <>—</>}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
{/* User signed date */}
|
|
||||||
{userCanSign ? (
|
|
||||||
<Tooltip
|
|
||||||
title={'Your signature date'}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<span className={styles.detailsItem}>
|
|
||||||
<FontAwesomeIcon icon={faCalendar} />{' '}
|
|
||||||
{hexToNpub(usersPubkey) in parsedSignatureEvents ? (
|
|
||||||
parsedSignatureEvents[hexToNpub(usersPubkey)].created_at ? (
|
|
||||||
formatTimestamp(
|
|
||||||
fromUnixTimestamp(
|
|
||||||
parsedSignatureEvents[hexToNpub(usersPubkey)].created_at
|
|
||||||
)
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<>—</>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<>—</>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
) : null}
|
|
||||||
<span className={styles.detailsItem}>
|
|
||||||
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
|
||||||
</span>
|
|
||||||
{ext.length > 0 ? (
|
|
||||||
<span className={styles.detailsItem}>
|
|
||||||
{ext.length > 1 ? (
|
|
||||||
<>
|
|
||||||
<FontAwesomeIcon icon={faFile} /> Multiple File Types
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
getExtensionIconLabel(ext[0])
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<FontAwesomeIcon icon={faFileCircleExclamation} /> —
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : undefined
|
|
||||||
}
|
|
@ -1,46 +0,0 @@
|
|||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
.container {
|
|
||||||
border-radius: 4px;
|
|
||||||
background: $overlay-background-color;
|
|
||||||
padding: 15px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
grid-gap: 25px;
|
|
||||||
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
grid-gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users {
|
|
||||||
display: flex;
|
|
||||||
grid-gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailsItem {
|
|
||||||
transition: ease 0.2s;
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
font-size: 14px;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: start;
|
|
||||||
|
|
||||||
> :first-child {
|
|
||||||
padding: 5px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $primary-main;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,78 +0,0 @@
|
|||||||
import {
|
|
||||||
faFilePdf,
|
|
||||||
faFileExcel,
|
|
||||||
faFileWord,
|
|
||||||
faFilePowerpoint,
|
|
||||||
faFileZipper,
|
|
||||||
faFileCsv,
|
|
||||||
faFileLines,
|
|
||||||
faFileImage,
|
|
||||||
faFile,
|
|
||||||
IconDefinition
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
|
|
||||||
export const getExtensionIconLabel = (extension: string) => {
|
|
||||||
let icon: IconDefinition
|
|
||||||
switch (extension.toLowerCase()) {
|
|
||||||
case 'pdf':
|
|
||||||
icon = faFilePdf
|
|
||||||
break
|
|
||||||
case 'json':
|
|
||||||
icon = faFilePdf
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'xlsx':
|
|
||||||
case 'xls':
|
|
||||||
case 'xlsb':
|
|
||||||
case 'xlsm':
|
|
||||||
icon = faFileExcel
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'doc':
|
|
||||||
case 'docx':
|
|
||||||
icon = faFileWord
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'ppt':
|
|
||||||
case 'pptx':
|
|
||||||
icon = faFilePowerpoint
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'zip':
|
|
||||||
case '7z':
|
|
||||||
case 'rar':
|
|
||||||
case 'tar':
|
|
||||||
case 'gz':
|
|
||||||
icon = faFileZipper
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'csv':
|
|
||||||
icon = faFileCsv
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'txt':
|
|
||||||
icon = faFileLines
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'png':
|
|
||||||
case 'jpg':
|
|
||||||
case 'jpeg':
|
|
||||||
case 'gif':
|
|
||||||
case 'svg':
|
|
||||||
case 'bmp':
|
|
||||||
case 'ico':
|
|
||||||
icon = faFileImage
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
icon = faFile
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<FontAwesomeIcon icon={icon} /> {extension.toUpperCase()}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
@ -12,8 +12,7 @@ import {
|
|||||||
getAuthToken,
|
getAuthToken,
|
||||||
getVisitedLink,
|
getVisitedLink,
|
||||||
saveAuthToken,
|
saveAuthToken,
|
||||||
compareObjects,
|
compareObjects
|
||||||
unixNow
|
|
||||||
} from '../utils'
|
} from '../utils'
|
||||||
import { appPrivateRoutes } from '../routes'
|
import { appPrivateRoutes } from '../routes'
|
||||||
import { SignedEvent } from '../types'
|
import { SignedEvent } from '../types'
|
||||||
@ -55,7 +54,7 @@ export class AuthController {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Nostr uses unix timestamps
|
// Nostr uses unix timestamps
|
||||||
const timestamp = unixNow()
|
const timestamp = Math.floor(Date.now() / 1000)
|
||||||
const { hostname } = window.location
|
const { hostname } = window.location
|
||||||
|
|
||||||
const authEvent: EventTemplate = {
|
const authEvent: EventTemplate = {
|
||||||
|
@ -12,17 +12,10 @@ import {
|
|||||||
import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types'
|
import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types'
|
||||||
import { NostrController } from '.'
|
import { NostrController } from '.'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { queryNip05, unixNow } from '../utils'
|
import { queryNip05 } from '../utils'
|
||||||
import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk'
|
import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk'
|
||||||
import { EventEmitter } from 'tseep'
|
import { EventEmitter } from 'tseep'
|
||||||
import { localCache } from '../services'
|
import { localCache } from '../services'
|
||||||
import {
|
|
||||||
findRelayListAndUpdateCache,
|
|
||||||
findRelayListInCache,
|
|
||||||
getDefaultRelaySet,
|
|
||||||
getUserRelaySet,
|
|
||||||
isOlderThanOneWeek
|
|
||||||
} from '../utils/relays.ts'
|
|
||||||
|
|
||||||
export class MetadataController extends EventEmitter {
|
export class MetadataController extends EventEmitter {
|
||||||
private nostrController: NostrController
|
private nostrController: NostrController
|
||||||
@ -134,8 +127,10 @@ export class MetadataController extends EventEmitter {
|
|||||||
|
|
||||||
// If cached metadata is found, check its validity
|
// If cached metadata is found, check its validity
|
||||||
if (cachedMetadataEvent) {
|
if (cachedMetadataEvent) {
|
||||||
|
const oneWeekInMS = 7 * 24 * 60 * 60 * 1000 // Number of milliseconds in one week
|
||||||
|
|
||||||
// Check if the cached metadata is older than one week
|
// Check if the cached metadata is older than one week
|
||||||
if (isOlderThanOneWeek(cachedMetadataEvent.cachedAt)) {
|
if (Date.now() - cachedMetadataEvent.cachedAt > oneWeekInMS) {
|
||||||
// If older than one week, find the metadata from relays in background
|
// If older than one week, find the metadata from relays in background
|
||||||
|
|
||||||
this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event)
|
this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event)
|
||||||
@ -149,32 +144,100 @@ export class MetadataController extends EventEmitter {
|
|||||||
return this.checkForMoreRecentMetadata(hexKey, null)
|
return this.checkForMoreRecentMetadata(hexKey, null)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
public findRelayListMetadata = async (hexKey: string) => {
|
||||||
* Based on the hexKey of the current user, this method attempts to retrieve a relay set.
|
let relayEvent: Event | null = null
|
||||||
* @func findRelayListInCache first checks if there is already an up-to-date
|
|
||||||
* relay list available in cache; if not -
|
|
||||||
* @func findRelayListAndUpdateCache checks if the relevant relay event is available from
|
|
||||||
* the purple pages relay;
|
|
||||||
* @func findRelayListAndUpdateCache will run again if the previous two calls return null and
|
|
||||||
* check if the relevant relay event can be obtained from 'most popular relays'
|
|
||||||
* If relay event is found, it will be saved in cache for future use
|
|
||||||
* @param hexKey of the current user
|
|
||||||
* @return RelaySet which will contain either relays extracted from the user Relay Event
|
|
||||||
* or a fallback RelaySet with Sigit's Relay
|
|
||||||
*/
|
|
||||||
public findRelayListMetadata = async (hexKey: string): Promise<RelaySet> => {
|
|
||||||
const relayEvent =
|
|
||||||
(await findRelayListInCache(hexKey)) ||
|
|
||||||
(await findRelayListAndUpdateCache(
|
|
||||||
[this.specialMetadataRelay],
|
|
||||||
hexKey
|
|
||||||
)) ||
|
|
||||||
(await findRelayListAndUpdateCache(
|
|
||||||
await this.nostrController.getMostPopularRelays(),
|
|
||||||
hexKey
|
|
||||||
))
|
|
||||||
|
|
||||||
return relayEvent ? getUserRelaySet(relayEvent.tags) : getDefaultRelaySet()
|
// Attempt to retrieve the metadata event from the local cache
|
||||||
|
const cachedRelayListMetadataEvent =
|
||||||
|
await localCache.getUserRelayListMetadata(hexKey)
|
||||||
|
|
||||||
|
if (cachedRelayListMetadataEvent) {
|
||||||
|
const oneWeekInMS = 7 * 24 * 60 * 60 * 1000 // Number of milliseconds in one week
|
||||||
|
|
||||||
|
// Check if the cached event is not older than one week
|
||||||
|
if (Date.now() - cachedRelayListMetadataEvent.cachedAt < oneWeekInMS) {
|
||||||
|
relayEvent = cachedRelayListMetadataEvent.event
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// define filter for relay list
|
||||||
|
const eventFilter: Filter = {
|
||||||
|
kinds: [kinds.RelayList],
|
||||||
|
authors: [hexKey]
|
||||||
|
}
|
||||||
|
|
||||||
|
const pool = new SimplePool()
|
||||||
|
|
||||||
|
// Try to get the relayList event from a special relay (wss://purplepag.es)
|
||||||
|
if (!relayEvent) {
|
||||||
|
relayEvent = await pool
|
||||||
|
.get([this.specialMetadataRelay], eventFilter)
|
||||||
|
.then((event) => {
|
||||||
|
if (event) {
|
||||||
|
// update the event in local cache
|
||||||
|
localCache.addUserRelayListMetadata(event)
|
||||||
|
}
|
||||||
|
return event
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!relayEvent) {
|
||||||
|
// If no valid relayList event is found from the special relay, get the most popular relays
|
||||||
|
const mostPopularRelays =
|
||||||
|
await this.nostrController.getMostPopularRelays()
|
||||||
|
|
||||||
|
// Query the most popular relays for relayList event
|
||||||
|
relayEvent = await pool
|
||||||
|
.get(mostPopularRelays, eventFilter)
|
||||||
|
.then((event) => {
|
||||||
|
if (event) {
|
||||||
|
// update the event in local cache
|
||||||
|
localCache.addUserRelayListMetadata(event)
|
||||||
|
}
|
||||||
|
return event
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (relayEvent) {
|
||||||
|
const relaySet: RelaySet = {
|
||||||
|
read: [],
|
||||||
|
write: []
|
||||||
|
}
|
||||||
|
|
||||||
|
// a list of r tags with relay URIs and a read or write marker.
|
||||||
|
const relayTags = relayEvent.tags.filter((tag) => tag[0] === 'r')
|
||||||
|
|
||||||
|
// Relays marked as read / write are called READ / WRITE relays, respectively
|
||||||
|
relayTags.forEach((tag) => {
|
||||||
|
if (tag.length >= 3) {
|
||||||
|
const marker = tag[2]
|
||||||
|
|
||||||
|
if (marker === 'read') {
|
||||||
|
relaySet.read.push(tag[1])
|
||||||
|
} else if (marker === 'write') {
|
||||||
|
relaySet.write.push(tag[1])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the marker is omitted, the relay is used for both purposes
|
||||||
|
if (tag.length === 2) {
|
||||||
|
relaySet.read.push(tag[1])
|
||||||
|
relaySet.write.push(tag[1])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return relaySet
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error('No relay list metadata found.')
|
||||||
}
|
}
|
||||||
|
|
||||||
public extractProfileMetadataContent = (event: Event) => {
|
public extractProfileMetadataContent = (event: Event) => {
|
||||||
@ -194,7 +257,7 @@ export class MetadataController extends EventEmitter {
|
|||||||
let signedMetadataEvent = event
|
let signedMetadataEvent = event
|
||||||
|
|
||||||
if (event.sig.length < 1) {
|
if (event.sig.length < 1) {
|
||||||
const timestamp = unixNow()
|
const timestamp = Math.floor(Date.now() / 1000)
|
||||||
|
|
||||||
// Metadata event to publish to the wss://purplepag.es relay
|
// Metadata event to publish to the wss://purplepag.es relay
|
||||||
const newMetadataEvent: Event = {
|
const newMetadataEvent: Event = {
|
||||||
@ -265,7 +328,7 @@ export class MetadataController extends EventEmitter {
|
|||||||
// initialize job request
|
// initialize job request
|
||||||
const jobEventTemplate: EventTemplate = {
|
const jobEventTemplate: EventTemplate = {
|
||||||
content: '',
|
content: '',
|
||||||
created_at: unixNow(),
|
created_at: Math.round(Date.now() / 1000),
|
||||||
kind: 68001,
|
kind: 68001,
|
||||||
tags: [
|
tags: [
|
||||||
['i', `${created_at * 1000}`],
|
['i', `${created_at * 1000}`],
|
||||||
|
@ -42,10 +42,8 @@ import {
|
|||||||
import {
|
import {
|
||||||
compareObjects,
|
compareObjects,
|
||||||
getNsecBunkerDelegatedKey,
|
getNsecBunkerDelegatedKey,
|
||||||
unixNow,
|
|
||||||
verifySignedEvent
|
verifySignedEvent
|
||||||
} from '../utils'
|
} from '../utils'
|
||||||
import { getDefaultRelayMap } from '../utils/relays.ts'
|
|
||||||
|
|
||||||
export class NostrController extends EventEmitter {
|
export class NostrController extends EventEmitter {
|
||||||
private static instance: NostrController
|
private static instance: NostrController
|
||||||
@ -245,7 +243,7 @@ export class NostrController extends EventEmitter {
|
|||||||
|
|
||||||
if (!firstSuccessfulPublish) {
|
if (!firstSuccessfulPublish) {
|
||||||
// If no publish was successful, collect the reasons for failures
|
// If no publish was successful, collect the reasons for failures
|
||||||
const failedPublishes: unknown[] = []
|
const failedPublishes: any[] = []
|
||||||
const fallbackRejectionReason =
|
const fallbackRejectionReason =
|
||||||
'Attempt to publish an event has been rejected with unknown reason.'
|
'Attempt to publish an event has been rejected with unknown reason.'
|
||||||
|
|
||||||
@ -505,9 +503,7 @@ export class NostrController extends EventEmitter {
|
|||||||
} else if (loginMethod === LoginMethods.extension) {
|
} else if (loginMethod === LoginMethods.extension) {
|
||||||
const nostr = this.getNostrObject()
|
const nostr = this.getNostrObject()
|
||||||
|
|
||||||
return (await nostr
|
return (await nostr.signEvent(event as NostrEvent).catch((err: any) => {
|
||||||
.signEvent(event as NostrEvent)
|
|
||||||
.catch((err: unknown) => {
|
|
||||||
console.log('Error while signing event: ', err)
|
console.log('Error while signing event: ', err)
|
||||||
|
|
||||||
throw err
|
throw err
|
||||||
@ -628,12 +624,8 @@ export class NostrController extends EventEmitter {
|
|||||||
*/
|
*/
|
||||||
capturePublicKey = async (): Promise<string> => {
|
capturePublicKey = async (): Promise<string> => {
|
||||||
const nostr = this.getNostrObject()
|
const nostr = this.getNostrObject()
|
||||||
const pubKey = await nostr.getPublicKey().catch((err: unknown) => {
|
const pubKey = await nostr.getPublicKey().catch((err: any) => {
|
||||||
if (err instanceof Error) {
|
|
||||||
return Promise.reject(err.message)
|
return Promise.reject(err.message)
|
||||||
} else {
|
|
||||||
return Promise.reject(JSON.stringify(err))
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!pubKey) {
|
if (!pubKey) {
|
||||||
@ -658,7 +650,7 @@ export class NostrController extends EventEmitter {
|
|||||||
*/
|
*/
|
||||||
getRelayMap = async (
|
getRelayMap = async (
|
||||||
npub: string
|
npub: string
|
||||||
): Promise<{ map: RelayMap; mapUpdated?: number }> => {
|
): Promise<{ map: RelayMap; mapUpdated: number }> => {
|
||||||
const mostPopularRelays = await this.getMostPopularRelays()
|
const mostPopularRelays = await this.getMostPopularRelays()
|
||||||
|
|
||||||
const pool = new SimplePool()
|
const pool = new SimplePool()
|
||||||
@ -699,7 +691,7 @@ export class NostrController extends EventEmitter {
|
|||||||
|
|
||||||
return Promise.resolve({ map: relaysMap, mapUpdated: event.created_at })
|
return Promise.resolve({ map: relaysMap, mapUpdated: event.created_at })
|
||||||
} else {
|
} else {
|
||||||
return Promise.resolve({ map: getDefaultRelayMap() })
|
return Promise.reject('User relays were not found.')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -715,7 +707,7 @@ export class NostrController extends EventEmitter {
|
|||||||
npub: string,
|
npub: string,
|
||||||
extraRelaysToPublish?: string[]
|
extraRelaysToPublish?: string[]
|
||||||
): Promise<string> => {
|
): Promise<string> => {
|
||||||
const timestamp = unixNow()
|
const timestamp = Math.floor(Date.now() / 1000)
|
||||||
const relayURIs = Object.keys(relayMap)
|
const relayURIs = Object.keys(relayMap)
|
||||||
|
|
||||||
// More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
|
// More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
|
||||||
@ -817,7 +809,7 @@ export class NostrController extends EventEmitter {
|
|||||||
// initialize job request
|
// initialize job request
|
||||||
const jobEventTemplate: EventTemplate = {
|
const jobEventTemplate: EventTemplate = {
|
||||||
content: '',
|
content: '',
|
||||||
created_at: unixNow(),
|
created_at: Math.round(Date.now() / 1000),
|
||||||
kind: 68001,
|
kind: 68001,
|
||||||
tags: [
|
tags: [
|
||||||
['i', `${JSON.stringify(relayURIs)}`],
|
['i', `${JSON.stringify(relayURIs)}`],
|
||||||
|
@ -1,269 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
|
|
||||||
import { Mark } from '../types/mark'
|
|
||||||
import {
|
|
||||||
fromUnixTimestamp,
|
|
||||||
hexToNpub,
|
|
||||||
parseNostrEvent,
|
|
||||||
parseCreateSignatureEventContent,
|
|
||||||
SigitMetaParseError,
|
|
||||||
SigitStatus,
|
|
||||||
SignStatus
|
|
||||||
} from '../utils'
|
|
||||||
import { toast } from 'react-toastify'
|
|
||||||
import { verifyEvent } from 'nostr-tools'
|
|
||||||
import { Event } from 'nostr-tools'
|
|
||||||
import store from '../store/store'
|
|
||||||
import { AuthState } from '../store/auth/types'
|
|
||||||
import { NostrController } from '../controllers'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,
|
|
||||||
* and `Event` (event's fields are made optional and pubkey and created_at replaced with our versions)
|
|
||||||
*/
|
|
||||||
export interface FlatMeta
|
|
||||||
extends Meta,
|
|
||||||
CreateSignatureEventContent,
|
|
||||||
Partial<Omit<Event, 'pubkey' | 'created_at'>> {
|
|
||||||
// Remove pubkey and use submittedBy as `npub1${string}`
|
|
||||||
submittedBy?: `npub1${string}`
|
|
||||||
|
|
||||||
// Remove created_at and replace with createdAt
|
|
||||||
createdAt?: number
|
|
||||||
|
|
||||||
// Validated create signature event
|
|
||||||
isValid: boolean
|
|
||||||
|
|
||||||
// Decryption
|
|
||||||
encryptionKey: string | null
|
|
||||||
|
|
||||||
// Parsed Document Signatures
|
|
||||||
parsedSignatureEvents: { [signer: `npub1${string}`]: Event }
|
|
||||||
|
|
||||||
// Calculated completion time
|
|
||||||
completedAt?: number
|
|
||||||
|
|
||||||
// Calculated status fields
|
|
||||||
signedStatus: SigitStatus
|
|
||||||
signersStatus: {
|
|
||||||
[signer: `npub1${string}`]: SignStatus
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Custom use hook for parsing the Sigit Meta
|
|
||||||
* @param meta Sigit Meta
|
|
||||||
* @returns flattened Meta object with calculated signed status
|
|
||||||
*/
|
|
||||||
export const useSigitMeta = (meta: Meta): FlatMeta => {
|
|
||||||
const [isValid, setIsValid] = useState(false)
|
|
||||||
const [kind, setKind] = useState<number>()
|
|
||||||
const [tags, setTags] = useState<string[][]>()
|
|
||||||
const [createdAt, setCreatedAt] = useState<number>()
|
|
||||||
const [submittedBy, setSubmittedBy] = useState<`npub1${string}`>() // submittedBy, pubkey from nostr event
|
|
||||||
const [id, setId] = useState<string>()
|
|
||||||
const [sig, setSig] = useState<string>()
|
|
||||||
|
|
||||||
const [signers, setSigners] = useState<`npub1${string}`[]>([])
|
|
||||||
const [viewers, setViewers] = useState<`npub1${string}`[]>([])
|
|
||||||
const [fileHashes, setFileHashes] = useState<{
|
|
||||||
[user: `npub1${string}`]: string
|
|
||||||
}>({})
|
|
||||||
const [markConfig, setMarkConfig] = useState<Mark[]>([])
|
|
||||||
const [title, setTitle] = useState<string>('')
|
|
||||||
const [zipUrl, setZipUrl] = useState<string>('')
|
|
||||||
|
|
||||||
const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
|
|
||||||
[signer: `npub1${string}`]: Event
|
|
||||||
}>({})
|
|
||||||
|
|
||||||
const [completedAt, setCompletedAt] = useState<number>()
|
|
||||||
|
|
||||||
const [signedStatus, setSignedStatus] = useState<SigitStatus>(
|
|
||||||
SigitStatus.Partial
|
|
||||||
)
|
|
||||||
const [signersStatus, setSignersStatus] = useState<{
|
|
||||||
[signer: `npub1${string}`]: SignStatus
|
|
||||||
}>({})
|
|
||||||
|
|
||||||
const [encryptionKey, setEncryptionKey] = useState<string | null>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!meta) return
|
|
||||||
;(async function () {
|
|
||||||
try {
|
|
||||||
const createSignatureEvent = await parseNostrEvent(meta.createSignature)
|
|
||||||
|
|
||||||
const { kind, tags, created_at, pubkey, id, sig, content } =
|
|
||||||
createSignatureEvent
|
|
||||||
|
|
||||||
setIsValid(verifyEvent(createSignatureEvent))
|
|
||||||
setKind(kind)
|
|
||||||
setTags(tags)
|
|
||||||
// created_at in nostr events are stored in seconds
|
|
||||||
setCreatedAt(fromUnixTimestamp(created_at))
|
|
||||||
setSubmittedBy(pubkey as `npub1${string}`)
|
|
||||||
setId(id)
|
|
||||||
setSig(sig)
|
|
||||||
|
|
||||||
const { title, signers, viewers, fileHashes, markConfig, zipUrl } =
|
|
||||||
await parseCreateSignatureEventContent(content)
|
|
||||||
|
|
||||||
setTitle(title)
|
|
||||||
setSigners(signers)
|
|
||||||
setViewers(viewers)
|
|
||||||
setFileHashes(fileHashes)
|
|
||||||
setMarkConfig(markConfig)
|
|
||||||
setZipUrl(zipUrl)
|
|
||||||
|
|
||||||
if (meta.keys) {
|
|
||||||
const { sender, keys } = meta.keys
|
|
||||||
// Retrieve the user's public key from the state
|
|
||||||
const usersPubkey = (store.getState().auth as AuthState).usersPubkey!
|
|
||||||
const usersNpub = hexToNpub(usersPubkey)
|
|
||||||
|
|
||||||
// Check if the user's public key is in the keys object
|
|
||||||
if (usersNpub in keys) {
|
|
||||||
// Instantiate the NostrController to decrypt the encryption key
|
|
||||||
const nostrController = NostrController.getInstance()
|
|
||||||
const decrypted = await nostrController
|
|
||||||
.nip04Decrypt(sender, keys[usersNpub])
|
|
||||||
.catch((err) => {
|
|
||||||
console.log(
|
|
||||||
'An error occurred in decrypting encryption key',
|
|
||||||
err
|
|
||||||
)
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
setEncryptionKey(decrypted)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Temp. map to hold events and signers
|
|
||||||
const parsedSignatureEventsMap = new Map<`npub1${string}`, Event>()
|
|
||||||
const signerStatusMap = new Map<`npub1${string}`, SignStatus>()
|
|
||||||
|
|
||||||
const getPrevSignerSig = (npub: `npub1${string}`) => {
|
|
||||||
if (signers[0] === npub) {
|
|
||||||
return sig
|
|
||||||
}
|
|
||||||
|
|
||||||
// find the index of signer
|
|
||||||
const currentSignerIndex = signers.findIndex(
|
|
||||||
(signer) => signer === npub
|
|
||||||
)
|
|
||||||
// return if could not found user in signer's list
|
|
||||||
if (currentSignerIndex === -1) return
|
|
||||||
// find prev signer
|
|
||||||
const prevSigner = signers[currentSignerIndex - 1]
|
|
||||||
|
|
||||||
// get the signature of prev signer
|
|
||||||
return parsedSignatureEventsMap.get(prevSigner)?.sig
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const npub in meta.docSignatures) {
|
|
||||||
try {
|
|
||||||
// Parse each signature event
|
|
||||||
const event = await parseNostrEvent(
|
|
||||||
meta.docSignatures[npub as `npub1${string}`]
|
|
||||||
)
|
|
||||||
|
|
||||||
// Save events to a map, to save all at once outside loop
|
|
||||||
// We need the object to find completedAt
|
|
||||||
// Avoided using parsedSignatureEvents due to useEffect deps
|
|
||||||
parsedSignatureEventsMap.set(npub as `npub1${string}`, event)
|
|
||||||
} catch (error) {
|
|
||||||
signerStatusMap.set(npub as `npub1${string}`, SignStatus.Invalid)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
parsedSignatureEventsMap.forEach((event, npub) => {
|
|
||||||
const isValidSignature = verifyEvent(event)
|
|
||||||
if (isValidSignature) {
|
|
||||||
// get the signature of prev signer from the content of current signers signedEvent
|
|
||||||
const prevSignersSig = getPrevSignerSig(npub)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const obj: SignedEventContent = JSON.parse(event.content)
|
|
||||||
if (
|
|
||||||
obj.prevSig &&
|
|
||||||
prevSignersSig &&
|
|
||||||
obj.prevSig === prevSignersSig
|
|
||||||
) {
|
|
||||||
signerStatusMap.set(npub as `npub1${string}`, SignStatus.Signed)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
signerStatusMap.set(npub as `npub1${string}`, SignStatus.Invalid)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
signers
|
|
||||||
.filter((s) => !parsedSignatureEventsMap.has(s))
|
|
||||||
.forEach((s) => signerStatusMap.set(s, SignStatus.Pending))
|
|
||||||
|
|
||||||
// Get the first signer that hasn't signed
|
|
||||||
const nextSigner = signers.find((s) => !parsedSignatureEventsMap.has(s))
|
|
||||||
if (nextSigner) {
|
|
||||||
signerStatusMap.set(nextSigner, SignStatus.Awaiting)
|
|
||||||
}
|
|
||||||
|
|
||||||
setSignersStatus(Object.fromEntries(signerStatusMap))
|
|
||||||
setParsedSignatureEvents(Object.fromEntries(parsedSignatureEventsMap))
|
|
||||||
|
|
||||||
const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
|
|
||||||
const isCompletelySigned = signers.every((signer) =>
|
|
||||||
signedBy.includes(signer)
|
|
||||||
)
|
|
||||||
setSignedStatus(
|
|
||||||
isCompletelySigned ? SigitStatus.Complete : SigitStatus.Partial
|
|
||||||
)
|
|
||||||
|
|
||||||
// Check if all signers signed
|
|
||||||
if (isCompletelySigned) {
|
|
||||||
setCompletedAt(
|
|
||||||
fromUnixTimestamp(
|
|
||||||
signedBy.reduce((p, c) => {
|
|
||||||
return Math.max(
|
|
||||||
p,
|
|
||||||
parsedSignatureEventsMap.get(c)?.created_at || 0
|
|
||||||
)
|
|
||||||
}, 0)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
if (error instanceof SigitMetaParseError) {
|
|
||||||
toast.error(error.message)
|
|
||||||
}
|
|
||||||
console.error(error)
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
}, [meta])
|
|
||||||
|
|
||||||
return {
|
|
||||||
modifiedAt: meta?.modifiedAt,
|
|
||||||
createSignature: meta?.createSignature,
|
|
||||||
docSignatures: meta?.docSignatures,
|
|
||||||
keys: meta?.keys,
|
|
||||||
isValid,
|
|
||||||
kind,
|
|
||||||
tags,
|
|
||||||
createdAt,
|
|
||||||
submittedBy,
|
|
||||||
id,
|
|
||||||
sig,
|
|
||||||
signers,
|
|
||||||
viewers,
|
|
||||||
fileHashes,
|
|
||||||
markConfig,
|
|
||||||
title,
|
|
||||||
zipUrl,
|
|
||||||
parsedSignatureEvents,
|
|
||||||
completedAt,
|
|
||||||
signedStatus,
|
|
||||||
signersStatus,
|
|
||||||
encryptionKey
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,70 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { ProfileMetadata } from '../types'
|
|
||||||
import { MetadataController } from '../controllers'
|
|
||||||
import { npubToHex } from '../utils'
|
|
||||||
import { Event, kinds } from 'nostr-tools'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Extracts profiles from metadata events
|
|
||||||
* @param pubkeys Array of npubs to check
|
|
||||||
* @returns ProfileMetadata
|
|
||||||
*/
|
|
||||||
export const useSigitProfiles = (
|
|
||||||
pubkeys: `npub1${string}`[]
|
|
||||||
): { [key: string]: ProfileMetadata } => {
|
|
||||||
const [profileMetadata, setProfileMetadata] = useState<{
|
|
||||||
[key: string]: ProfileMetadata
|
|
||||||
}>({})
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (pubkeys.length) {
|
|
||||||
const metadataController = new MetadataController()
|
|
||||||
|
|
||||||
// Remove duplicate keys
|
|
||||||
const users = new Set<string>([...pubkeys])
|
|
||||||
|
|
||||||
const handleMetadataEvent = (key: string) => (event: Event) => {
|
|
||||||
const metadataContent =
|
|
||||||
metadataController.extractProfileMetadataContent(event)
|
|
||||||
|
|
||||||
if (metadataContent) {
|
|
||||||
setProfileMetadata((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[key]: metadataContent
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
users.forEach((user) => {
|
|
||||||
const hexKey = npubToHex(user)
|
|
||||||
if (hexKey && !(hexKey in profileMetadata)) {
|
|
||||||
metadataController.on(hexKey, (kind: number, event: Event) => {
|
|
||||||
if (kind === kinds.Metadata) {
|
|
||||||
handleMetadataEvent(hexKey)(event)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
metadataController
|
|
||||||
.findMetadata(hexKey)
|
|
||||||
.then((metadataEvent) => {
|
|
||||||
if (metadataEvent) handleMetadataEvent(hexKey)(metadataEvent)
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(
|
|
||||||
`error occurred in finding metadata for: ${user}`,
|
|
||||||
err
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
users.forEach((key) => {
|
|
||||||
metadataController.off(key, handleMetadataEvent(key))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [pubkeys, profileMetadata])
|
|
||||||
|
|
||||||
return profileMetadata
|
|
||||||
}
|
|
@ -101,15 +101,6 @@ button:disabled {
|
|||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-clamp-2 {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-image {
|
.profile-image {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@ -120,9 +111,7 @@ button:disabled {
|
|||||||
/* Fonts */
|
/* Fonts */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
src:
|
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||||
local('Roboto Medium'),
|
|
||||||
local('Roboto-Medium'),
|
|
||||||
url('assets/fonts/roboto-medium.woff2') format('woff2'),
|
url('assets/fonts/roboto-medium.woff2') format('woff2'),
|
||||||
url('assets/fonts/roboto-medium.woff') format('woff');
|
url('assets/fonts/roboto-medium.woff') format('woff');
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -132,9 +121,7 @@ button:disabled {
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
src:
|
src: local('Roboto Light'), local('Roboto-Light'),
|
||||||
local('Roboto Light'),
|
|
||||||
local('Roboto-Light'),
|
|
||||||
url('assets/fonts/roboto-light.woff2') format('woff2'),
|
url('assets/fonts/roboto-light.woff2') format('woff2'),
|
||||||
url('assets/fonts/roboto-light.woff') format('woff');
|
url('assets/fonts/roboto-light.woff') format('woff');
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@ -144,9 +131,7 @@ button:disabled {
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
src:
|
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||||
local('Roboto Bold'),
|
|
||||||
local('Roboto-Bold'),
|
|
||||||
url('assets/fonts/roboto-bold.woff2') format('woff2'),
|
url('assets/fonts/roboto-bold.woff2') format('woff2'),
|
||||||
url('assets/fonts/roboto-bold.woff') format('woff');
|
url('assets/fonts/roboto-bold.woff') format('woff');
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -156,9 +141,7 @@ button:disabled {
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
src:
|
src: local('Roboto'), local('Roboto-Regular'),
|
||||||
local('Roboto'),
|
|
||||||
local('Roboto-Regular'),
|
|
||||||
url('assets/fonts/roboto-regular.woff2') format('woff2'),
|
url('assets/fonts/roboto-regular.woff2') format('woff2'),
|
||||||
url('assets/fonts/roboto-regular.woff') format('woff');
|
url('assets/fonts/roboto-regular.woff') format('woff');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
@ -136,7 +136,7 @@ export const MainLayout = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
setLoadingSpinnerDesc(`Loading SIGit history...`)
|
setLoadingSpinnerDesc(`Loading SIGit History`)
|
||||||
getUsersAppData()
|
getUsersAppData()
|
||||||
.then((appData) => {
|
.then((appData) => {
|
||||||
if (appData) {
|
if (appData) {
|
||||||
@ -145,7 +145,7 @@ export const MainLayout = () => {
|
|||||||
})
|
})
|
||||||
.finally(() => setIsLoading(false))
|
.finally(() => setIsLoading(false))
|
||||||
}
|
}
|
||||||
}, [authState, dispatch])
|
}, [authState])
|
||||||
|
|
||||||
if (isLoading) return <LoadingSpinner desc={loadingSpinnerDesc} />
|
if (isLoading) return <LoadingSpinner desc={loadingSpinnerDesc} />
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@ $default-modal-padding: 15px 25px;
|
|||||||
.modal {
|
.modal {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: calc(50% - 10px);
|
left: 50%;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
|
|
||||||
background-color: $overlay-background-color;
|
background-color: $overlay-background-color;
|
||||||
@ -16,8 +16,6 @@ $default-modal-padding: 15px 25px;
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
margin: 25px 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
@ -50,7 +50,7 @@ import {
|
|||||||
getHash,
|
getHash,
|
||||||
hexToNpub,
|
hexToNpub,
|
||||||
isOnline,
|
isOnline,
|
||||||
unixNow,
|
now,
|
||||||
npubToHex,
|
npubToHex,
|
||||||
queryNip05,
|
queryNip05,
|
||||||
sendNotification,
|
sendNotification,
|
||||||
@ -68,7 +68,7 @@ import { Mark } from '../../types/mark.ts'
|
|||||||
export const CreatePage = () => {
|
export const CreatePage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const { uploadedFiles } = location.state || {}
|
const { uploadedFile } = location.state || {}
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||||
@ -127,17 +127,17 @@ export const CreatePage = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}, [metadata, users])
|
}, [])
|
||||||
// Set up event listener for authentication event
|
// Set up event listener for authentication event
|
||||||
nostrController.on('nsecbunker-auth', (url) => {
|
nostrController.on('nsecbunker-auth', (url) => {
|
||||||
setAuthUrl(url)
|
setAuthUrl(url)
|
||||||
})
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (uploadedFiles) {
|
if (uploadedFile) {
|
||||||
setSelectedFiles([...uploadedFiles])
|
setSelectedFiles([uploadedFile])
|
||||||
}
|
}
|
||||||
}, [uploadedFiles])
|
}, [uploadedFile])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (usersPubkey) {
|
if (usersPubkey) {
|
||||||
@ -309,16 +309,14 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Handle errors during file arrayBuffer conversion
|
// Handle errors during file arrayBuffer conversion
|
||||||
const handleFileError = (file: File) => (err: unknown) => {
|
const handleFileError = (file: File) => (err: any) => {
|
||||||
console.log(
|
console.log(
|
||||||
`Error while getting arrayBuffer of file ${file.name} :>> `,
|
`Error while getting arrayBuffer of file ${file.name} :>> `,
|
||||||
err
|
err
|
||||||
)
|
)
|
||||||
if (err instanceof Error) {
|
|
||||||
toast.error(
|
toast.error(
|
||||||
err.message || `Error while getting arrayBuffer of file ${file.name}`
|
err.message || `Error while getting arrayBuffer of file ${file.name}`
|
||||||
)
|
)
|
||||||
}
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -340,6 +338,8 @@ export const CreatePage = () => {
|
|||||||
fileHashes[file.name] = hash
|
fileHashes[file.name] = hash
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('file hashes: ', fileHashes)
|
||||||
|
|
||||||
return fileHashes
|
return fileHashes
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -371,12 +371,10 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Handle errors during zip file generation
|
// Handle errors during zip file generation
|
||||||
const handleZipError = (err: unknown) => {
|
const handleZipError = (err: any) => {
|
||||||
console.log('Error in zip:>> ', err)
|
console.log('Error in zip:>> ', err)
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
if (err instanceof Error) {
|
|
||||||
toast.error(err.message || 'Error occurred in generating zip file')
|
toast.error(err.message || 'Error occurred in generating zip file')
|
||||||
}
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -408,6 +406,7 @@ export const CreatePage = () => {
|
|||||||
encryptionKey: string
|
encryptionKey: string
|
||||||
): Promise<File | null> => {
|
): Promise<File | null> => {
|
||||||
// Get the current timestamp in seconds
|
// Get the current timestamp in seconds
|
||||||
|
const unixNow = now()
|
||||||
const blob = new Blob([encryptedArrayBuffer])
|
const blob = new Blob([encryptedArrayBuffer])
|
||||||
// Create a File object with the Blob data
|
// Create a File object with the Blob data
|
||||||
const file = new File([blob], `compressed.sigit`, {
|
const file = new File([blob], `compressed.sigit`, {
|
||||||
@ -442,12 +441,10 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Handle errors during file upload
|
// Handle errors during file upload
|
||||||
const handleUploadError = (err: unknown) => {
|
const handleUploadError = (err: any) => {
|
||||||
console.log('Error in upload:>> ', err)
|
console.log('Error in upload:>> ', err)
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
if (err instanceof Error) {
|
|
||||||
toast.error(err.message || 'Error occurred in uploading file')
|
toast.error(err.message || 'Error occurred in uploading file')
|
||||||
}
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -455,9 +452,10 @@ export const CreatePage = () => {
|
|||||||
const uploadFile = async (
|
const uploadFile = async (
|
||||||
arrayBuffer: ArrayBuffer
|
arrayBuffer: ArrayBuffer
|
||||||
): Promise<string | null> => {
|
): Promise<string | null> => {
|
||||||
|
const unixNow = now()
|
||||||
const blob = new Blob([arrayBuffer])
|
const blob = new Blob([arrayBuffer])
|
||||||
// Create a File object with the Blob data
|
// Create a File object with the Blob data
|
||||||
const file = new File([blob], `compressed-${unixNow()}.sigit`, {
|
const file = new File([blob], `compressed-${unixNow}.sigit`, {
|
||||||
type: 'application/sigit'
|
type: 'application/sigit'
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -479,13 +477,9 @@ export const CreatePage = () => {
|
|||||||
encryptionKey
|
encryptionKey
|
||||||
)
|
)
|
||||||
|
|
||||||
if (!finalZipFile) {
|
if (!finalZipFile) return
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
saveAs(finalZipFile, `request-${unixNow()}.sigit.zip`)
|
saveAs(finalZipFile, 'request.sigit.zip')
|
||||||
setIsLoading(false)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const generateFilesZip = async (): Promise<ArrayBuffer | null> => {
|
const generateFilesZip = async (): Promise<ArrayBuffer | null> => {
|
||||||
@ -614,7 +608,7 @@ export const CreatePage = () => {
|
|||||||
const meta: Meta = {
|
const meta: Meta = {
|
||||||
createSignature,
|
createSignature,
|
||||||
keys,
|
keys,
|
||||||
modifiedAt: unixNow(),
|
modifiedAt: now(),
|
||||||
docSignatures: {}
|
docSignatures: {}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -653,7 +647,7 @@ export const CreatePage = () => {
|
|||||||
|
|
||||||
const meta: Meta = {
|
const meta: Meta = {
|
||||||
createSignature,
|
createSignature,
|
||||||
modifiedAt: unixNow(),
|
modifiedAt: now(),
|
||||||
docSignatures: {}
|
docSignatures: {}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -668,10 +662,7 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const arrayBuffer = await generateZipFile(zip)
|
const arrayBuffer = await generateZipFile(zip)
|
||||||
if (!arrayBuffer) {
|
if (!arrayBuffer) return
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Encrypting zip file')
|
setLoadingSpinnerDesc('Encrypting zip file')
|
||||||
const encryptedArrayBuffer = await encryptZipFile(
|
const encryptedArrayBuffer = await encryptZipFile(
|
||||||
@ -979,7 +970,7 @@ const SignerRow = ({
|
|||||||
item: () => {
|
item: () => {
|
||||||
return { id: user.pubkey, index }
|
return { id: user.pubkey, index }
|
||||||
},
|
},
|
||||||
collect: (monitor) => ({
|
collect: (monitor: any) => ({
|
||||||
isDragging: monitor.isDragging()
|
isDragging: monitor.isDragging()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -1,92 +1,51 @@
|
|||||||
import { Button, TextField } from '@mui/material'
|
import { CalendarMonth, Description, Upload } from '@mui/icons-material'
|
||||||
|
import { Box, Button, Tooltip, Typography } from '@mui/material'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import { useCallback, useEffect, useState } from 'react'
|
import { Event, kinds, verifyEvent } from 'nostr-tools'
|
||||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
|
import { UserAvatar } from '../../components/UserAvatar'
|
||||||
|
import { MetadataController } from '../../controllers'
|
||||||
import { useAppSelector } from '../../hooks'
|
import { useAppSelector } from '../../hooks'
|
||||||
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
|
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
|
||||||
import { Meta } from '../../types'
|
import { CreateSignatureEventContent, Meta, ProfileMetadata } from '../../types'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { faSearch } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { Select } from '../../components/Select'
|
|
||||||
import { DisplaySigit } from '../../components/DisplaySigit'
|
|
||||||
import { useDropzone } from 'react-dropzone'
|
|
||||||
import { Container } from '../../components/Container'
|
|
||||||
import styles from './style.module.scss'
|
|
||||||
import {
|
import {
|
||||||
extractSigitCardDisplayInfo,
|
formatTimestamp,
|
||||||
SigitCardDisplayInfo,
|
hexToNpub,
|
||||||
SigitStatus
|
npubToHex,
|
||||||
|
parseJson,
|
||||||
|
shorten
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
|
import styles from './style.module.scss'
|
||||||
// Unsupported Filter options are commented
|
import { Container } from '../../components/Container'
|
||||||
const FILTERS = [
|
|
||||||
'Show all',
|
|
||||||
// 'Drafts',
|
|
||||||
'In-progress',
|
|
||||||
'Completed'
|
|
||||||
// 'Archived'
|
|
||||||
] as const
|
|
||||||
type Filter = (typeof FILTERS)[number]
|
|
||||||
|
|
||||||
const SORT_BY = [
|
|
||||||
{
|
|
||||||
label: 'Newest',
|
|
||||||
value: 'desc'
|
|
||||||
},
|
|
||||||
{ label: 'Oldest', value: 'asc' }
|
|
||||||
] as const
|
|
||||||
type Sort = (typeof SORT_BY)[number]['value']
|
|
||||||
|
|
||||||
export const HomePage = () => {
|
export const HomePage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [searchParams, setSearchParams] = useSearchParams()
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||||
const q = searchParams.get('q') ?? ''
|
const [sigits, setSigits] = useState<Meta[]>([])
|
||||||
|
const [profiles, setProfiles] = useState<{ [key: string]: ProfileMetadata }>(
|
||||||
useEffect(() => {
|
{}
|
||||||
const searchInput = document.getElementById('q') as HTMLInputElement | null
|
)
|
||||||
if (searchInput) {
|
|
||||||
searchInput.value = q
|
|
||||||
}
|
|
||||||
}, [q])
|
|
||||||
|
|
||||||
const [sigits, setSigits] = useState<{ [key: string]: Meta }>({})
|
|
||||||
const [parsedSigits, setParsedSigits] = useState<{
|
|
||||||
[key: string]: SigitCardDisplayInfo
|
|
||||||
}>({})
|
|
||||||
const usersAppData = useAppSelector((state) => state.userAppData)
|
const usersAppData = useAppSelector((state) => state.userAppData)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (usersAppData) {
|
if (usersAppData) {
|
||||||
const getSigitInfo = async () => {
|
setSigits(Object.values(usersAppData.sigits))
|
||||||
const parsedSigits: { [key: string]: SigitCardDisplayInfo } = {}
|
|
||||||
for (const key in usersAppData.sigits) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(usersAppData.sigits, key)) {
|
|
||||||
const sigitInfo = await extractSigitCardDisplayInfo(
|
|
||||||
usersAppData.sigits[key]
|
|
||||||
)
|
|
||||||
if (sigitInfo) {
|
|
||||||
parsedSigits[key] = sigitInfo
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setParsedSigits({
|
|
||||||
...parsedSigits
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
setSigits(usersAppData.sigits)
|
|
||||||
getSigitInfo()
|
|
||||||
}
|
}
|
||||||
}, [usersAppData])
|
}, [usersAppData])
|
||||||
|
|
||||||
const onDrop = useCallback(
|
const handleUploadClick = () => {
|
||||||
async (acceptedFiles: File[]) => {
|
if (fileInputRef.current) {
|
||||||
// When uploading single file check if it's .sigit.zip
|
fileInputRef.current.click()
|
||||||
if (acceptedFiles.length === 1) {
|
}
|
||||||
const file = acceptedFiles[0]
|
}
|
||||||
|
|
||||||
|
const handleFileChange = async (
|
||||||
|
event: React.ChangeEvent<HTMLInputElement>
|
||||||
|
) => {
|
||||||
|
const file = event.target.files?.[0]
|
||||||
|
if (file) {
|
||||||
// Check if the file extension is .sigit.zip
|
// Check if the file extension is .sigit.zip
|
||||||
const fileName = file.name
|
const fileName = file.name
|
||||||
const fileExtension = fileName.slice(-10) // ".sigit.zip" has 10 characters
|
const fileExtension = fileName.slice(-10) // ".sigit.zip" has 10 characters
|
||||||
@ -113,155 +72,313 @@ export const HomePage = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
toast.error('Invalid SiGit zip file')
|
toast.error('Invalid zip file')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// navigate to create page
|
// navigate to create page
|
||||||
navigate(appPrivateRoutes.create, {
|
navigate(appPrivateRoutes.create, { state: { uploadedFile: file } })
|
||||||
state: { uploadedFiles: acceptedFiles }
|
}
|
||||||
})
|
}
|
||||||
},
|
|
||||||
[navigate]
|
|
||||||
)
|
|
||||||
|
|
||||||
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
|
|
||||||
onDrop,
|
|
||||||
noClick: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const [filter, setFilter] = useState<Filter>('Show all')
|
|
||||||
const [sort, setSort] = useState<Sort>('desc')
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...getRootProps()} tabIndex={-1}>
|
|
||||||
<Container className={styles.container}>
|
<Container className={styles.container}>
|
||||||
<div className={styles.header}>
|
<Box className={styles.header}>
|
||||||
<div className={styles.filters}>
|
<Typography variant="h3" className={styles.title}>
|
||||||
<Select
|
Sigits
|
||||||
name={'filter-select'}
|
</Typography>
|
||||||
value={filter}
|
{/* This is for desktop view */}
|
||||||
setValue={setFilter}
|
<Box
|
||||||
options={FILTERS.map((f) => {
|
className={styles.actionButtons}
|
||||||
return {
|
sx={{
|
||||||
label: f,
|
display: {
|
||||||
value: f
|
xs: 'none',
|
||||||
|
md: 'flex'
|
||||||
}
|
}
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
name={'sort-select'}
|
|
||||||
value={sort}
|
|
||||||
setValue={setSort}
|
|
||||||
options={SORT_BY.map((s) => {
|
|
||||||
return { ...s }
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={styles.actionButtons}>
|
|
||||||
<form
|
|
||||||
className={styles.search}
|
|
||||||
onSubmit={(e) => {
|
|
||||||
e.preventDefault()
|
|
||||||
const searchInput = e.currentTarget.elements.namedItem(
|
|
||||||
'q'
|
|
||||||
) as HTMLInputElement
|
|
||||||
searchParams.set('q', searchInput.value)
|
|
||||||
setSearchParams(searchParams)
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextField
|
<input
|
||||||
id="q"
|
type="file"
|
||||||
name="q"
|
ref={fileInputRef}
|
||||||
placeholder="Search"
|
style={{ display: 'none' }}
|
||||||
size="small"
|
onChange={handleFileChange}
|
||||||
type="search"
|
|
||||||
defaultValue={q}
|
|
||||||
onChange={(e) => {
|
|
||||||
// Handle the case when users click native search input's clear or x
|
|
||||||
if (e.currentTarget.value === '') {
|
|
||||||
searchParams.delete('q')
|
|
||||||
setSearchParams(searchParams)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
fontSize: '16px',
|
|
||||||
borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
|
|
||||||
borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
|
|
||||||
'& .MuiInputBase-root': {
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
borderBottomRightRadius: 0
|
|
||||||
},
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '7px 14px'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
variant="outlined"
|
||||||
sx={{
|
startIcon={<Upload />}
|
||||||
minWidth: '44px',
|
onClick={handleUploadClick}
|
||||||
padding: '11.5px 12px',
|
|
||||||
borderTopLeftRadius: 0,
|
|
||||||
borderBottomLeftRadius: 0
|
|
||||||
}}
|
|
||||||
variant={'contained'}
|
|
||||||
aria-label="submit search"
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faSearch} />
|
Upload
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</Box>
|
||||||
</div>
|
{/* This is for mobile view */}
|
||||||
</div>
|
<Box
|
||||||
<button
|
className={styles.actionButtons}
|
||||||
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
|
sx={{
|
||||||
tabIndex={0}
|
display: {
|
||||||
onClick={open}
|
xs: 'flex',
|
||||||
type="button"
|
md: 'none'
|
||||||
aria-label="upload files"
|
|
||||||
>
|
|
||||||
<input {...getInputProps()} />
|
|
||||||
{isDragActive ? (
|
|
||||||
<p>Drop the files here ...</p>
|
|
||||||
) : (
|
|
||||||
<p>Click or drag files to upload!</p>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
<div className={styles.submissions}>
|
|
||||||
{Object.keys(parsedSigits)
|
|
||||||
.filter((s) => {
|
|
||||||
const { title, signedStatus } = parsedSigits[s]
|
|
||||||
const isMatch = title?.toLowerCase().includes(q.toLowerCase())
|
|
||||||
switch (filter) {
|
|
||||||
case 'Completed':
|
|
||||||
return signedStatus === SigitStatus.Complete && isMatch
|
|
||||||
case 'In-progress':
|
|
||||||
return signedStatus === SigitStatus.Partial && isMatch
|
|
||||||
case 'Show all':
|
|
||||||
return isMatch
|
|
||||||
default:
|
|
||||||
console.error('Filter case not handled.')
|
|
||||||
}
|
}
|
||||||
})
|
}}
|
||||||
.sort((a, b) => {
|
>
|
||||||
const x = parsedSigits[a].createdAt ?? 0
|
<Tooltip title="Upload" arrow>
|
||||||
const y = parsedSigits[b].createdAt ?? 0
|
<Button variant="outlined" onClick={handleUploadClick}>
|
||||||
return sort === 'desc' ? y - x : x - y
|
<Upload />
|
||||||
})
|
</Button>
|
||||||
.map((key) => (
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box className={styles.submissions}>
|
||||||
|
{sigits.map((sigit, index) => (
|
||||||
<DisplaySigit
|
<DisplaySigit
|
||||||
key={`sigit-${key}`}
|
key={`sigit-${index}`}
|
||||||
parsedMeta={parsedSigits[key]}
|
meta={sigit}
|
||||||
meta={sigits[key]}
|
profiles={profiles}
|
||||||
|
setProfiles={setProfiles}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</Box>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type SigitProps = {
|
||||||
|
meta: Meta
|
||||||
|
profiles: { [key: string]: ProfileMetadata }
|
||||||
|
setProfiles: Dispatch<SetStateAction<{ [key: string]: ProfileMetadata }>>
|
||||||
|
}
|
||||||
|
|
||||||
|
enum SignedStatus {
|
||||||
|
Partial = 'Partially Signed',
|
||||||
|
Complete = 'Completely Signed'
|
||||||
|
}
|
||||||
|
|
||||||
|
const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const [title, setTitle] = useState<string>()
|
||||||
|
const [createdAt, setCreatedAt] = useState('')
|
||||||
|
const [submittedBy, setSubmittedBy] = useState<string>()
|
||||||
|
const [signers, setSigners] = useState<`npub1${string}`[]>([])
|
||||||
|
const [signedStatus, setSignedStatus] = useState<SignedStatus>(
|
||||||
|
SignedStatus.Partial
|
||||||
|
)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const extractInfo = async () => {
|
||||||
|
const createSignatureEvent = await parseJson<Event>(
|
||||||
|
meta.createSignature
|
||||||
|
).catch((err) => {
|
||||||
|
console.log('err in parsing the createSignature event:>> ', err)
|
||||||
|
toast.error(
|
||||||
|
err.message || 'error occurred in parsing the create signature event'
|
||||||
|
)
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!createSignatureEvent) return
|
||||||
|
|
||||||
|
// created_at in nostr events are stored in seconds
|
||||||
|
// convert it to ms before formatting
|
||||||
|
setCreatedAt(formatTimestamp(createSignatureEvent.created_at * 1000))
|
||||||
|
|
||||||
|
const createSignatureContent =
|
||||||
|
await parseJson<CreateSignatureEventContent>(
|
||||||
|
createSignatureEvent.content
|
||||||
|
).catch((err) => {
|
||||||
|
console.log(
|
||||||
|
`err in parsing the createSignature event's content :>> `,
|
||||||
|
err
|
||||||
|
)
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!createSignatureContent) return
|
||||||
|
|
||||||
|
setTitle(createSignatureContent.title)
|
||||||
|
setSubmittedBy(createSignatureEvent.pubkey)
|
||||||
|
setSigners(createSignatureContent.signers)
|
||||||
|
|
||||||
|
const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
|
||||||
|
const isCompletelySigned = createSignatureContent.signers.every(
|
||||||
|
(signer) => signedBy.includes(signer)
|
||||||
|
)
|
||||||
|
if (isCompletelySigned) {
|
||||||
|
setSignedStatus(SignedStatus.Complete)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
extractInfo()
|
||||||
|
}, [meta])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const hexKeys: string[] = []
|
||||||
|
|
||||||
|
if (submittedBy) {
|
||||||
|
hexKeys.push(npubToHex(submittedBy)!)
|
||||||
|
}
|
||||||
|
hexKeys.push(...signers.map((signer) => npubToHex(signer)!))
|
||||||
|
|
||||||
|
const metadataController = new MetadataController()
|
||||||
|
hexKeys.forEach((key) => {
|
||||||
|
if (!(key in profiles)) {
|
||||||
|
const handleMetadataEvent = (event: Event) => {
|
||||||
|
const metadataContent =
|
||||||
|
metadataController.extractProfileMetadataContent(event)
|
||||||
|
|
||||||
|
if (metadataContent)
|
||||||
|
setProfiles((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[key]: metadataContent
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
metadataController.on(key, (kind: number, event: Event) => {
|
||||||
|
if (kind === kinds.Metadata) {
|
||||||
|
handleMetadataEvent(event)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
metadataController
|
||||||
|
.findMetadata(key)
|
||||||
|
.then((metadataEvent) => {
|
||||||
|
if (metadataEvent) handleMetadataEvent(metadataEvent)
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(`error occurred in finding metadata for: ${key}`, err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [submittedBy, signers])
|
||||||
|
|
||||||
|
const handleNavigation = () => {
|
||||||
|
if (signedStatus === SignedStatus.Complete) {
|
||||||
|
navigate(appPublicRoutes.verify, { state: { meta } })
|
||||||
|
} else {
|
||||||
|
navigate(appPrivateRoutes.sign, { state: { meta } })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
className={styles.item}
|
||||||
|
sx={{
|
||||||
|
flexDirection: {
|
||||||
|
xs: 'column',
|
||||||
|
md: 'row'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onClick={handleNavigation}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
className={styles.titleBox}
|
||||||
|
sx={{
|
||||||
|
borderBottomLeftRadius: {
|
||||||
|
xs: 'initial',
|
||||||
|
md: 'inherit'
|
||||||
|
},
|
||||||
|
borderTopRightRadius: {
|
||||||
|
xs: 'inherit',
|
||||||
|
md: 'initial'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="body1" className={styles.title}>
|
||||||
|
<Description />
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
{submittedBy &&
|
||||||
|
(function () {
|
||||||
|
const profile = profiles[submittedBy]
|
||||||
|
return (
|
||||||
|
<UserAvatar
|
||||||
|
pubkey={submittedBy}
|
||||||
|
name={
|
||||||
|
profile?.display_name ||
|
||||||
|
profile?.name ||
|
||||||
|
shorten(hexToNpub(submittedBy))
|
||||||
|
}
|
||||||
|
image={profile?.picture}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})()}
|
||||||
|
<Typography variant="body2" className={styles.date}>
|
||||||
|
<CalendarMonth />
|
||||||
|
{createdAt}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box className={styles.signers}>
|
||||||
|
{signers.map((signer) => {
|
||||||
|
const pubkey = npubToHex(signer)!
|
||||||
|
const profile = profiles[pubkey]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DisplaySigner
|
||||||
|
key={signer}
|
||||||
|
meta={meta}
|
||||||
|
profile={profile}
|
||||||
|
pubkey={pubkey}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
enum SignStatus {
|
||||||
|
Signed = 'Signed',
|
||||||
|
Pending = 'Pending',
|
||||||
|
Invalid = 'Invalid Sign'
|
||||||
|
}
|
||||||
|
|
||||||
|
type DisplaySignerProps = {
|
||||||
|
meta: Meta
|
||||||
|
profile: ProfileMetadata
|
||||||
|
pubkey: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const DisplaySigner = ({ meta, profile, pubkey }: DisplaySignerProps) => {
|
||||||
|
const [signStatus, setSignedStatus] = useState<SignStatus>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateSignStatus = async () => {
|
||||||
|
const npub = hexToNpub(pubkey)
|
||||||
|
if (npub in meta.docSignatures) {
|
||||||
|
parseJson<Event>(meta.docSignatures[npub])
|
||||||
|
.then((event) => {
|
||||||
|
const isValidSignature = verifyEvent(event)
|
||||||
|
if (isValidSignature) {
|
||||||
|
setSignedStatus(SignStatus.Signed)
|
||||||
|
} else {
|
||||||
|
setSignedStatus(SignStatus.Invalid)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(`err in parsing the docSignatures for ${npub}:>> `, err)
|
||||||
|
setSignedStatus(SignStatus.Invalid)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setSignedStatus(SignStatus.Pending)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSignStatus()
|
||||||
|
}, [meta, pubkey])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box className={styles.signerItem}>
|
||||||
|
<Typography variant="button" className={styles.status}>
|
||||||
|
{signStatus}
|
||||||
|
</Typography>
|
||||||
|
<UserAvatar
|
||||||
|
pubkey={pubkey}
|
||||||
|
name={
|
||||||
|
profile?.display_name ||
|
||||||
|
profile?.name ||
|
||||||
|
shorten(hexToNpub(pubkey), 5)
|
||||||
|
}
|
||||||
|
image={profile?.picture}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,101 +1,94 @@
|
|||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
container-type: inline-size;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
@container (width < 610px) {
|
.title {
|
||||||
flex-direction: column-reverse;
|
color: var(--mui-palette-primary-light);
|
||||||
}
|
flex: 1;
|
||||||
}
|
|
||||||
|
|
||||||
.filters {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 1.5px 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: end;
|
|
||||||
|
|
||||||
height: 34px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 4px;
|
|
||||||
outline: solid 1px #dddddd;
|
|
||||||
background: white;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@container (width >= 610px) {
|
|
||||||
max-width: 246px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-within {
|
.actionButtons {
|
||||||
outline-color: $primary-main;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropzone {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
font-size: 16px;
|
|
||||||
background-color: $overlay-background-color;
|
|
||||||
height: 250px;
|
|
||||||
color: rgba(0, 0, 0, 0.25);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
transition:
|
|
||||||
background-color ease 0.2s,
|
|
||||||
inset ease 0.2s;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 2px;
|
|
||||||
border: dashed 3px rgba(0, 0, 0, 0.1);
|
|
||||||
inset: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&.isDragActive,
|
|
||||||
&:hover {
|
|
||||||
&::before {
|
|
||||||
inset: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Override button styles
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.submissions {
|
.submissions {
|
||||||
display: grid;
|
display: flex;
|
||||||
gap: 25px;
|
flex-direction: column;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(365px, 1fr));
|
gap: 10px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: #efeae6;
|
||||||
|
border-radius: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.titleBox {
|
||||||
|
display: flex;
|
||||||
|
flex: 4;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #cdc8c499;
|
||||||
|
border-top-left-radius: inherit;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--mui-palette-primary-light);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--mui-palette-primary-light);
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.signers {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 6;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
color: var(--mui-palette-primary-light);
|
||||||
|
|
||||||
|
.signerItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-radius: 2rem;
|
||||||
|
width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: var(--mui-palette-info-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -51,7 +51,7 @@ export const Nostr = () => {
|
|||||||
/**
|
/**
|
||||||
* Call login function when enter is pressed
|
* Call login function when enter is pressed
|
||||||
*/
|
*/
|
||||||
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
const handleInputKeyDown = (event: any) => {
|
||||||
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
login()
|
login()
|
||||||
|
@ -12,7 +12,7 @@ import {
|
|||||||
useTheme
|
useTheme
|
||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import { UnsignedEvent, nip19, kinds, VerifiedEvent, Event } from 'nostr-tools'
|
import { UnsignedEvent, nip19, kinds, VerifiedEvent, Event } from 'nostr-tools'
|
||||||
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||||
import { Link, useParams } from 'react-router-dom'
|
import { Link, useParams } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { MetadataController, NostrController } from '../../../controllers'
|
import { MetadataController, NostrController } from '../../../controllers'
|
||||||
@ -26,7 +26,7 @@ import { setMetadataEvent } from '../../../store/actions'
|
|||||||
import { LoadingSpinner } from '../../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../../components/LoadingSpinner'
|
||||||
import { LoginMethods } from '../../../store/auth/types'
|
import { LoginMethods } from '../../../store/auth/types'
|
||||||
import { SmartToy } from '@mui/icons-material'
|
import { SmartToy } from '@mui/icons-material'
|
||||||
import { getRoboHashPicture, unixNow } from '../../../utils'
|
import { getRoboHashPicture } from '../../../utils'
|
||||||
import { Container } from '../../../components/Container'
|
import { Container } from '../../../components/Container'
|
||||||
|
|
||||||
export const ProfileSettingsPage = () => {
|
export const ProfileSettingsPage = () => {
|
||||||
@ -197,7 +197,7 @@ export const ProfileSettingsPage = () => {
|
|||||||
// Relay will reject if created_at is too late
|
// Relay will reject if created_at is too late
|
||||||
const updatedMetadataState: UnsignedEvent = {
|
const updatedMetadataState: UnsignedEvent = {
|
||||||
content: content,
|
content: content,
|
||||||
created_at: unixNow(),
|
created_at: Math.round(Date.now() / 1000),
|
||||||
kind: kinds.Metadata,
|
kind: kinds.Metadata,
|
||||||
pubkey: pubkey!,
|
pubkey: pubkey!,
|
||||||
tags: metadataState?.tags || []
|
tags: metadataState?.tags || []
|
||||||
@ -321,8 +321,8 @@ export const ProfileSettingsPage = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
|
onError={(event: any) => {
|
||||||
event.currentTarget.src = getRoboHashPicture(npub!)
|
event.target.src = getRoboHashPicture(npub!)
|
||||||
}}
|
}}
|
||||||
className={styles.img}
|
className={styles.img}
|
||||||
src={getProfileImage(profileMetadata)}
|
src={getProfileImage(profileMetadata)}
|
||||||
|
@ -91,8 +91,7 @@ export const RelaysPage = () => {
|
|||||||
if (isMounted) {
|
if (isMounted) {
|
||||||
if (
|
if (
|
||||||
!relaysState?.mapUpdated ||
|
!relaysState?.mapUpdated ||
|
||||||
(newRelayMap?.mapUpdated !== undefined &&
|
newRelayMap.mapUpdated > relaysState?.mapUpdated
|
||||||
newRelayMap?.mapUpdated > relaysState?.mapUpdated)
|
|
||||||
) {
|
) {
|
||||||
if (
|
if (
|
||||||
!relaysState?.map ||
|
!relaysState?.map ||
|
||||||
|
@ -5,7 +5,7 @@ import JSZip from 'jszip'
|
|||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
import { MuiFileInput } from 'mui-file-input'
|
import { MuiFileInput } from 'mui-file-input'
|
||||||
import { Event, verifyEvent } from 'nostr-tools'
|
import { Event, verifyEvent } from 'nostr-tools'
|
||||||
import { useCallback, useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { useLocation, useNavigate } from 'react-router-dom'
|
import { useLocation, useNavigate } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
@ -26,7 +26,7 @@ import {
|
|||||||
hexToNpub,
|
hexToNpub,
|
||||||
isOnline,
|
isOnline,
|
||||||
loadZip,
|
loadZip,
|
||||||
unixNow,
|
now,
|
||||||
npubToHex,
|
npubToHex,
|
||||||
parseJson,
|
parseJson,
|
||||||
readContentOfZipEntry,
|
readContentOfZipEntry,
|
||||||
@ -210,6 +210,7 @@ export const SignPage = () => {
|
|||||||
const signedMarks = extractMarksFromSignedMeta(meta)
|
const signedMarks = extractMarksFromSignedMeta(meta)
|
||||||
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
|
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
|
||||||
setCurrentUserMarks(currentUserMarks)
|
setCurrentUserMarks(currentUserMarks)
|
||||||
|
// setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
|
||||||
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
|
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -219,100 +220,7 @@ export const SignPage = () => {
|
|||||||
if (meta) {
|
if (meta) {
|
||||||
handleUpdatedMeta(meta)
|
handleUpdatedMeta(meta)
|
||||||
}
|
}
|
||||||
}, [meta, usersPubkey])
|
}, [meta])
|
||||||
|
|
||||||
const handleDownload = async () => {
|
|
||||||
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
|
|
||||||
setLoadingSpinnerDesc('Generating file')
|
|
||||||
try {
|
|
||||||
const zip = await getZipWithFiles(meta, files)
|
|
||||||
const arrayBuffer = await zip.generateAsync({
|
|
||||||
type: ARRAY_BUFFER,
|
|
||||||
compression: DEFLATE,
|
|
||||||
compressionOptions: {
|
|
||||||
level: 6
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (!arrayBuffer) return
|
|
||||||
const blob = new Blob([arrayBuffer])
|
|
||||||
saveAs(blob, `exported-${unixNow()}.sigit.zip`)
|
|
||||||
} catch (error: any) {
|
|
||||||
console.log('error in zip:>> ', error)
|
|
||||||
toast.error(error.message || 'Error occurred in generating zip file')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const decrypt = useCallback(
|
|
||||||
async (file: File) => {
|
|
||||||
setLoadingSpinnerDesc('Decrypting file')
|
|
||||||
|
|
||||||
const zip = await loadZip(file)
|
|
||||||
if (!zip) return
|
|
||||||
|
|
||||||
const parsedKeysJson = await parseKeysJson(zip)
|
|
||||||
if (!parsedKeysJson) return
|
|
||||||
|
|
||||||
const encryptedArrayBuffer = await readContentOfZipEntry(
|
|
||||||
zip,
|
|
||||||
'compressed.sigit',
|
|
||||||
'arraybuffer'
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!encryptedArrayBuffer) return
|
|
||||||
|
|
||||||
const { keys, sender } = parsedKeysJson
|
|
||||||
|
|
||||||
for (const key of keys) {
|
|
||||||
// Set up event listener for authentication event
|
|
||||||
nostrController.on('nsecbunker-auth', (url) => {
|
|
||||||
setAuthUrl(url)
|
|
||||||
})
|
|
||||||
|
|
||||||
// Set up timeout promise to handle encryption timeout
|
|
||||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
reject(new Error('Timeout occurred'))
|
|
||||||
}, 60000) // Timeout duration = 60 seconds
|
|
||||||
})
|
|
||||||
|
|
||||||
// decrypt the encryptionKey, with timeout
|
|
||||||
const encryptionKey = await Promise.race([
|
|
||||||
nostrController.nip04Decrypt(sender, key),
|
|
||||||
timeoutPromise
|
|
||||||
])
|
|
||||||
.then((res) => {
|
|
||||||
return res
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('err :>> ', err)
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setAuthUrl(undefined) // Clear authentication URL
|
|
||||||
})
|
|
||||||
|
|
||||||
// Return if encryption failed
|
|
||||||
if (!encryptionKey) continue
|
|
||||||
|
|
||||||
const arrayBuffer = await decryptArrayBuffer(
|
|
||||||
encryptedArrayBuffer,
|
|
||||||
encryptionKey
|
|
||||||
)
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('err in decryption:>> ', err)
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsLoading(false)
|
|
||||||
})
|
|
||||||
|
|
||||||
if (arrayBuffer) return arrayBuffer
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
[nostrController]
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// online mode - from create and home page views
|
// online mode - from create and home page views
|
||||||
@ -370,7 +278,7 @@ export const SignPage = () => {
|
|||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
setDisplayInput(true)
|
setDisplayInput(true)
|
||||||
}
|
}
|
||||||
}, [decryptedArrayBuffer, uploadedZip, metaInNavState, decrypt])
|
}, [decryptedArrayBuffer, uploadedZip, metaInNavState])
|
||||||
|
|
||||||
const handleArrayBufferFromBlossom = async (
|
const handleArrayBufferFromBlossom = async (
|
||||||
arrayBuffer: ArrayBuffer,
|
arrayBuffer: ArrayBuffer,
|
||||||
@ -448,6 +356,96 @@ export const SignPage = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const decrypt = async (file: File) => {
|
||||||
|
setLoadingSpinnerDesc('Decrypting file')
|
||||||
|
|
||||||
|
const zip = await loadZip(file)
|
||||||
|
if (!zip) return
|
||||||
|
|
||||||
|
const parsedKeysJson = await parseKeysJson(zip)
|
||||||
|
if (!parsedKeysJson) return
|
||||||
|
|
||||||
|
const encryptedArrayBuffer = await readContentOfZipEntry(
|
||||||
|
zip,
|
||||||
|
'compressed.sigit',
|
||||||
|
'arraybuffer'
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!encryptedArrayBuffer) return
|
||||||
|
|
||||||
|
const { keys, sender } = parsedKeysJson
|
||||||
|
|
||||||
|
for (const key of keys) {
|
||||||
|
// Set up event listener for authentication event
|
||||||
|
nostrController.on('nsecbunker-auth', (url) => {
|
||||||
|
setAuthUrl(url)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Set up timeout promise to handle encryption timeout
|
||||||
|
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
reject(new Error('Timeout occurred'))
|
||||||
|
}, 60000) // Timeout duration = 60 seconds
|
||||||
|
})
|
||||||
|
|
||||||
|
// decrypt the encryptionKey, with timeout
|
||||||
|
const encryptionKey = await Promise.race([
|
||||||
|
nostrController.nip04Decrypt(sender, key),
|
||||||
|
timeoutPromise
|
||||||
|
])
|
||||||
|
.then((res) => {
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err :>> ', err)
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setAuthUrl(undefined) // Clear authentication URL
|
||||||
|
})
|
||||||
|
|
||||||
|
// Return if encryption failed
|
||||||
|
if (!encryptionKey) continue
|
||||||
|
|
||||||
|
const arrayBuffer = await decryptArrayBuffer(
|
||||||
|
encryptedArrayBuffer,
|
||||||
|
encryptionKey
|
||||||
|
)
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err in decryption:>> ', err)
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setIsLoading(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
if (arrayBuffer) return arrayBuffer
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDownload = async () => {
|
||||||
|
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
|
||||||
|
setLoadingSpinnerDesc('Generating file')
|
||||||
|
try {
|
||||||
|
const zip = await getZipWithFiles(meta, files)
|
||||||
|
const arrayBuffer = await zip.generateAsync({
|
||||||
|
type: ARRAY_BUFFER,
|
||||||
|
compression: DEFLATE,
|
||||||
|
compressionOptions: {
|
||||||
|
level: 6
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (!arrayBuffer) return
|
||||||
|
const blob = new Blob([arrayBuffer])
|
||||||
|
saveAs(blob, `exported-${now()}.sigit.zip`)
|
||||||
|
} catch (error: any) {
|
||||||
|
console.log('error in zip:>> ', error)
|
||||||
|
toast.error(error.message || 'Error occurred in generating zip file')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
|
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
|
||||||
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
|
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
|
||||||
|
|
||||||
@ -577,7 +575,7 @@ export const SignPage = () => {
|
|||||||
...metaCopy.docSignatures,
|
...metaCopy.docSignatures,
|
||||||
[hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
|
[hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
|
||||||
}
|
}
|
||||||
metaCopy.modifiedAt = unixNow()
|
metaCopy.modifiedAt = now()
|
||||||
return metaCopy
|
return metaCopy
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -587,6 +585,7 @@ export const SignPage = () => {
|
|||||||
encryptionKey: string
|
encryptionKey: string
|
||||||
): Promise<File | null> => {
|
): Promise<File | null> => {
|
||||||
// Get the current timestamp in seconds
|
// Get the current timestamp in seconds
|
||||||
|
const unixNow = now()
|
||||||
const blob = new Blob([encryptedArrayBuffer])
|
const blob = new Blob([encryptedArrayBuffer])
|
||||||
// Create a File object with the Blob data
|
// Create a File object with the Blob data
|
||||||
const file = new File([blob], `compressed.sigit`, {
|
const file = new File([blob], `compressed.sigit`, {
|
||||||
@ -636,18 +635,16 @@ export const SignPage = () => {
|
|||||||
|
|
||||||
if (!arraybuffer) return null
|
if (!arraybuffer) return null
|
||||||
|
|
||||||
return new File([new Blob([arraybuffer])], `${unixNow()}.sigit.zip`, {
|
return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
|
||||||
type: 'application/zip'
|
type: 'application/zip'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle errors during zip file generation
|
// Handle errors during zip file generation
|
||||||
const handleZipError = (err: unknown) => {
|
const handleZipError = (err: any) => {
|
||||||
console.log('Error in zip:>> ', err)
|
console.log('Error in zip:>> ', err)
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
if (err instanceof Error) {
|
|
||||||
toast.error(err.message || 'Error occurred in generating zip file')
|
toast.error(err.message || 'Error occurred in generating zip file')
|
||||||
}
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -780,7 +777,8 @@ export const SignPage = () => {
|
|||||||
if (!arrayBuffer) return
|
if (!arrayBuffer) return
|
||||||
|
|
||||||
const blob = new Blob([arrayBuffer])
|
const blob = new Blob([arrayBuffer])
|
||||||
saveAs(blob, `exported-${unixNow()}.sigit.zip`)
|
const unixNow = now()
|
||||||
|
saveAs(blob, `exported-${unixNow}.sigit.zip`)
|
||||||
|
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
|
|
||||||
@ -825,7 +823,8 @@ export const SignPage = () => {
|
|||||||
const finalZipFile = await createFinalZipFile(encryptedArrayBuffer, key)
|
const finalZipFile = await createFinalZipFile(encryptedArrayBuffer, key)
|
||||||
|
|
||||||
if (!finalZipFile) return
|
if (!finalZipFile) return
|
||||||
saveAs(finalZipFile, `exported-${unixNow()}.sigit.zip`)
|
const unixNow = now()
|
||||||
|
saveAs(finalZipFile, `exported-${unixNow}.sigit.zip`)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,22 +1,39 @@
|
|||||||
import { Box, Button, Tooltip, Typography, useTheme } from '@mui/material'
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListSubheader,
|
||||||
|
Tooltip,
|
||||||
|
Typography,
|
||||||
|
useTheme
|
||||||
|
} from '@mui/material'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import { MuiFileInput } from 'mui-file-input'
|
import { MuiFileInput } from 'mui-file-input'
|
||||||
import { Event, verifyEvent } from 'nostr-tools'
|
import { Event, kinds, verifyEvent } from 'nostr-tools'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||||
import { NostrController } from '../../controllers'
|
import { UserAvatar } from '../../components/UserAvatar'
|
||||||
import { CreateSignatureEventContent, Meta } from '../../types'
|
import { MetadataController, NostrController } from '../../controllers'
|
||||||
|
import {
|
||||||
|
CreateSignatureEventContent,
|
||||||
|
Meta,
|
||||||
|
ProfileMetadata,
|
||||||
|
SignedEventContent
|
||||||
|
} from '../../types'
|
||||||
import {
|
import {
|
||||||
decryptArrayBuffer,
|
decryptArrayBuffer,
|
||||||
extractMarksFromSignedMeta,
|
extractMarksFromSignedMeta,
|
||||||
|
extractZipUrlAndEncryptionKey,
|
||||||
getHash,
|
getHash,
|
||||||
hexToNpub,
|
hexToNpub,
|
||||||
unixNow,
|
now,
|
||||||
|
npubToHex,
|
||||||
parseJson,
|
parseJson,
|
||||||
readContentOfZipEntry,
|
readContentOfZipEntry,
|
||||||
signEventForMetaFile,
|
shorten,
|
||||||
shorten
|
signEventForMetaFile
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { Cancel, CheckCircle } from '@mui/icons-material'
|
import { Cancel, CheckCircle } from '@mui/icons-material'
|
||||||
@ -34,12 +51,6 @@ import { useSelector } from 'react-redux'
|
|||||||
import { getLastSignersSig } from '../../utils/sign.ts'
|
import { getLastSignersSig } from '../../utils/sign.ts'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
import { useSigitMeta } from '../../hooks/useSigitMeta.tsx'
|
|
||||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
|
||||||
import { UsersDetails } from '../../components/UsersDetails.tsx/index.tsx'
|
|
||||||
import { UserAvatar } from '../../components/UserAvatar/index.tsx'
|
|
||||||
import { useSigitProfiles } from '../../hooks/useSigitProfiles.tsx'
|
|
||||||
import { TooltipChild } from '../../components/TooltipChild.tsx'
|
|
||||||
|
|
||||||
export const VerifyPage = () => {
|
export const VerifyPage = () => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
@ -52,36 +63,52 @@ export const VerifyPage = () => {
|
|||||||
* uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
|
* uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
|
||||||
* meta will be received in navigation from create & home page in online mode
|
* meta will be received in navigation from create & home page in online mode
|
||||||
*/
|
*/
|
||||||
const { uploadedZip, meta } = location.state || {}
|
const { uploadedZip, meta: metaInNavState } = location.state || {}
|
||||||
|
|
||||||
const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
|
|
||||||
useSigitMeta(meta)
|
|
||||||
|
|
||||||
const profiles = useSigitProfiles([
|
|
||||||
...(submittedBy ? [submittedBy] : []),
|
|
||||||
...signers,
|
|
||||||
...viewers
|
|
||||||
])
|
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||||
|
|
||||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||||
|
const [meta, setMeta] = useState<Meta | null>(null)
|
||||||
|
|
||||||
|
const [submittedBy, setSubmittedBy] = useState<string>()
|
||||||
|
|
||||||
|
const [signers, setSigners] = useState<`npub1${string}`[]>([])
|
||||||
|
const [viewers, setViewers] = useState<`npub1${string}`[]>([])
|
||||||
|
const [creatorFileHashes, setCreatorFileHashes] = useState<{
|
||||||
|
[key: string]: string
|
||||||
|
}>({})
|
||||||
const [currentFileHashes, setCurrentFileHashes] = useState<{
|
const [currentFileHashes, setCurrentFileHashes] = useState<{
|
||||||
[key: string]: string | null
|
[key: string]: string | null
|
||||||
}>(fileHashes)
|
}>({})
|
||||||
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
|
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
|
||||||
|
|
||||||
|
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
||||||
|
{}
|
||||||
|
)
|
||||||
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
||||||
const nostrController = NostrController.getInstance()
|
const nostrController = NostrController.getInstance()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (uploadedZip) {
|
if (uploadedZip) {
|
||||||
setSelectedFile(uploadedZip)
|
setSelectedFile(uploadedZip)
|
||||||
} else if (meta && encryptionKey) {
|
} else if (metaInNavState) {
|
||||||
const processSigit = async () => {
|
const processSigit = async () => {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
|
setLoadingSpinnerDesc('Extracting zipUrl and encryption key from meta')
|
||||||
|
|
||||||
|
const res = await extractZipUrlAndEncryptionKey(metaInNavState)
|
||||||
|
if (!res) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
zipUrl,
|
||||||
|
encryptionKey,
|
||||||
|
createSignatureEvent,
|
||||||
|
createSignatureContent
|
||||||
|
} = res
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Fetching file from file server')
|
setLoadingSpinnerDesc('Fetching file from file server')
|
||||||
axios
|
axios
|
||||||
@ -148,6 +175,12 @@ export const VerifyPage = () => {
|
|||||||
setCurrentFileHashes(fileHashes)
|
setCurrentFileHashes(fileHashes)
|
||||||
setFiles(files)
|
setFiles(files)
|
||||||
|
|
||||||
|
setSigners(createSignatureContent.signers)
|
||||||
|
setViewers(createSignatureContent.viewers)
|
||||||
|
setCreatorFileHashes(createSignatureContent.fileHashes)
|
||||||
|
setSubmittedBy(createSignatureEvent.pubkey)
|
||||||
|
|
||||||
|
setMeta(metaInNavState)
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -164,7 +197,49 @@ export const VerifyPage = () => {
|
|||||||
|
|
||||||
processSigit()
|
processSigit()
|
||||||
}
|
}
|
||||||
}, [encryptionKey, meta, uploadedZip, zipUrl])
|
}, [uploadedZip, metaInNavState])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (submittedBy) {
|
||||||
|
const metadataController = new MetadataController()
|
||||||
|
|
||||||
|
const users = [submittedBy, ...signers, ...viewers]
|
||||||
|
|
||||||
|
users.forEach((user) => {
|
||||||
|
const pubkey = npubToHex(user)!
|
||||||
|
|
||||||
|
if (!(pubkey in metadata)) {
|
||||||
|
const handleMetadataEvent = (event: Event) => {
|
||||||
|
const metadataContent =
|
||||||
|
metadataController.extractProfileMetadataContent(event)
|
||||||
|
if (metadataContent)
|
||||||
|
setMetadata((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[pubkey]: metadataContent
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
metadataController.on(pubkey, (kind: number, event: Event) => {
|
||||||
|
if (kind === kinds.Metadata) {
|
||||||
|
handleMetadataEvent(event)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
metadataController
|
||||||
|
.findMetadata(pubkey)
|
||||||
|
.then((metadataEvent) => {
|
||||||
|
if (metadataEvent) handleMetadataEvent(metadataEvent)
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(
|
||||||
|
`error occurred in finding metadata for: ${user}`,
|
||||||
|
err
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [submittedBy, signers, viewers])
|
||||||
|
|
||||||
const handleVerify = async () => {
|
const handleVerify = async () => {
|
||||||
if (!selectedFile) return
|
if (!selectedFile) return
|
||||||
@ -270,9 +345,44 @@ export const VerifyPage = () => {
|
|||||||
|
|
||||||
if (!createSignatureContent) return
|
if (!createSignatureContent) return
|
||||||
|
|
||||||
|
setSigners(createSignatureContent.signers)
|
||||||
|
setViewers(createSignatureContent.viewers)
|
||||||
|
setCreatorFileHashes(createSignatureContent.fileHashes)
|
||||||
|
setSubmittedBy(createSignatureEvent.pubkey)
|
||||||
|
|
||||||
|
setMeta(parsedMetaJson)
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getPrevSignersSig = (npub: string) => {
|
||||||
|
if (!meta) return null
|
||||||
|
|
||||||
|
// if user is first signer then use creator's signature
|
||||||
|
if (signers[0] === npub) {
|
||||||
|
try {
|
||||||
|
const createSignatureEvent: Event = JSON.parse(meta.createSignature)
|
||||||
|
return createSignatureEvent.sig
|
||||||
|
} catch (error) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// find the index of signer
|
||||||
|
const currentSignerIndex = signers.findIndex((signer) => signer === npub)
|
||||||
|
// return null if could not found user in signer's list
|
||||||
|
if (currentSignerIndex === -1) return null
|
||||||
|
// find prev signer
|
||||||
|
const prevSigner = signers[currentSignerIndex - 1]
|
||||||
|
|
||||||
|
// get the signature of prev signer
|
||||||
|
try {
|
||||||
|
const prevSignersEvent: Event = JSON.parse(meta.docSignatures[prevSigner])
|
||||||
|
return prevSignersEvent.sig
|
||||||
|
} catch (error) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleExport = async () => {
|
const handleExport = async () => {
|
||||||
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
|
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
|
||||||
|
|
||||||
@ -333,11 +443,81 @@ export const VerifyPage = () => {
|
|||||||
if (!arrayBuffer) return
|
if (!arrayBuffer) return
|
||||||
|
|
||||||
const blob = new Blob([arrayBuffer])
|
const blob = new Blob([arrayBuffer])
|
||||||
saveAs(blob, `exported-${unixNow()}.sigit.zip`)
|
saveAs(blob, `exported-${now()}.sigit.zip`)
|
||||||
|
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const displayUser = (pubkey: string, verifySignature = false) => {
|
||||||
|
const profile = metadata[pubkey]
|
||||||
|
|
||||||
|
let isValidSignature = false
|
||||||
|
|
||||||
|
if (verifySignature) {
|
||||||
|
const npub = hexToNpub(pubkey)
|
||||||
|
const signedEventString = meta ? meta.docSignatures[npub] : null
|
||||||
|
if (signedEventString) {
|
||||||
|
try {
|
||||||
|
const signedEvent = JSON.parse(signedEventString)
|
||||||
|
const isVerifiedEvent = verifyEvent(signedEvent)
|
||||||
|
|
||||||
|
if (isVerifiedEvent) {
|
||||||
|
// get the actual signature of prev signer
|
||||||
|
const prevSignersSig = getPrevSignersSig(npub)
|
||||||
|
|
||||||
|
// get the signature of prev signer from the content of current signers signedEvent
|
||||||
|
|
||||||
|
try {
|
||||||
|
const obj: SignedEventContent = JSON.parse(signedEvent.content)
|
||||||
|
if (
|
||||||
|
obj.prevSig &&
|
||||||
|
prevSignersSig &&
|
||||||
|
obj.prevSig === prevSignersSig
|
||||||
|
) {
|
||||||
|
isValidSignature = true
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
isValidSignature = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
`An error occurred in parsing and verifying the signature event for ${pubkey}`,
|
||||||
|
error
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<UserAvatar
|
||||||
|
pubkey={pubkey}
|
||||||
|
name={
|
||||||
|
profile?.display_name || profile?.name || shorten(hexToNpub(pubkey))
|
||||||
|
}
|
||||||
|
image={profile?.picture}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{verifySignature && (
|
||||||
|
<>
|
||||||
|
{isValidSignature && (
|
||||||
|
<Tooltip title="Valid signature">
|
||||||
|
<CheckCircle sx={{ color: theme.palette.success.light }} />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isValidSignature && (
|
||||||
|
<Tooltip title="Invalid signature">
|
||||||
|
<Cancel sx={{ color: theme.palette.error.main }} />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const displayExportedBy = () => {
|
const displayExportedBy = () => {
|
||||||
if (!meta || !meta.exportSignature) return null
|
if (!meta || !meta.exportSignature) return null
|
||||||
|
|
||||||
@ -347,24 +527,7 @@ export const VerifyPage = () => {
|
|||||||
const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
|
const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
|
||||||
|
|
||||||
if (verifyEvent(exportSignatureEvent)) {
|
if (verifyEvent(exportSignatureEvent)) {
|
||||||
const exportedBy = exportSignatureEvent.pubkey
|
return displayUser(exportSignatureEvent.pubkey)
|
||||||
const profile = profiles[exportedBy]
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
title={
|
|
||||||
profile?.display_name ||
|
|
||||||
profile?.name ||
|
|
||||||
shorten(hexToNpub(exportedBy))
|
|
||||||
}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
disableInteractive
|
|
||||||
>
|
|
||||||
<TooltipChild>
|
|
||||||
<UserAvatar pubkey={exportedBy} image={profile?.picture} />
|
|
||||||
</TooltipChild>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
toast.error(`Invalid export signature!`)
|
toast.error(`Invalid export signature!`)
|
||||||
return (
|
return (
|
||||||
@ -411,13 +574,113 @@ export const VerifyPage = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{meta && (
|
{meta && (
|
||||||
<StickySideColumns
|
|
||||||
left={
|
|
||||||
<>
|
<>
|
||||||
|
<List
|
||||||
|
sx={{
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
marginTop: 2
|
||||||
|
}}
|
||||||
|
subheader={
|
||||||
|
<ListSubheader className={styles.subHeader}>
|
||||||
|
Meta Info
|
||||||
|
</ListSubheader>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{submittedBy && (
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
gap: '15px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Submitted By
|
||||||
|
</Typography>
|
||||||
|
{displayUser(submittedBy)}
|
||||||
|
</ListItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
gap: '15px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Exported By
|
||||||
|
</Typography>
|
||||||
|
{displayExportedBy()}
|
||||||
|
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<Button onClick={handleExport} variant="contained">
|
||||||
|
Export Sigit
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
{signers.length > 0 && (
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Signers
|
||||||
|
</Typography>
|
||||||
|
<ul className={styles.usersList}>
|
||||||
|
{signers.map((signer) => (
|
||||||
|
<li
|
||||||
|
key={signer}
|
||||||
|
style={{
|
||||||
|
color: textColor,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '15px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{displayUser(npubToHex(signer)!, true)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</ListItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{viewers.length > 0 && (
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Viewers
|
||||||
|
</Typography>
|
||||||
|
<ul className={styles.usersList}>
|
||||||
|
{viewers.map((viewer) => (
|
||||||
|
<li key={viewer} style={{ color: textColor }}>
|
||||||
|
{displayUser(npubToHex(viewer)!)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</ListItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Files
|
||||||
|
</Typography>
|
||||||
<Box className={styles.filesWrapper}>
|
<Box className={styles.filesWrapper}>
|
||||||
{Object.entries(currentFileHashes).map(
|
{Object.entries(currentFileHashes).map(
|
||||||
([filename, hash], index) => {
|
([filename, hash], index) => {
|
||||||
const isValidHash = fileHashes[filename] === hash
|
const isValidHash = creatorFileHashes[filename] === hash
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box key={`file-${index}`} className={styles.file}>
|
<Box key={`file-${index}`} className={styles.file}>
|
||||||
@ -449,16 +712,9 @@ export const VerifyPage = () => {
|
|||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
{displayExportedBy()}
|
</ListItem>
|
||||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
</List>
|
||||||
<Button onClick={handleExport} variant="contained">
|
|
||||||
Export Sigit
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</>
|
</>
|
||||||
}
|
|
||||||
right={<UsersDetails meta={meta} />}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</Container>
|
</Container>
|
||||||
</>
|
</>
|
||||||
|
@ -23,6 +23,14 @@ export const theme = extendTheme({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
MuiModal: {
|
||||||
|
styleOverrides: {
|
||||||
|
root: {
|
||||||
|
insetBlock: '25px',
|
||||||
|
insetInline: '10px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
MuiButton: {
|
MuiButton: {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
@ -33,9 +41,6 @@ export const theme = extendTheme({
|
|||||||
boxShadow: 'unset',
|
boxShadow: 'unset',
|
||||||
lineHeight: 'inherit',
|
lineHeight: 'inherit',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
':focus': {
|
|
||||||
textDecoration: 'none'
|
|
||||||
},
|
|
||||||
':hover': {
|
':hover': {
|
||||||
background: 'var(--primary-light)',
|
background: 'var(--primary-light)',
|
||||||
boxShadow: 'unset'
|
boxShadow: 'unset'
|
||||||
|
@ -9,7 +9,7 @@ export interface MouseState {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface PdfFile {
|
export interface PdfFile {
|
||||||
file: File
|
file: File,
|
||||||
pages: PdfPage[]
|
pages: PdfPage[]
|
||||||
expanded?: boolean
|
expanded?: boolean
|
||||||
}
|
}
|
||||||
@ -34,7 +34,7 @@ export interface DrawnField {
|
|||||||
export interface DrawTool {
|
export interface DrawTool {
|
||||||
identifier: MarkType
|
identifier: MarkType
|
||||||
label: string
|
label: string
|
||||||
icon: JSX.Element
|
icon: JSX.Element,
|
||||||
defaultValue?: string
|
defaultValue?: string
|
||||||
selected?: boolean
|
selected?: boolean
|
||||||
active?: boolean
|
active?: boolean
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { MarkType } from "./drawing";
|
import { MarkType } from './drawing'
|
||||||
|
|
||||||
export interface CurrentUserMark {
|
export interface CurrentUserMark {
|
||||||
id: number
|
id: number
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
export interface OutputByType {
|
export interface OutputByType {
|
||||||
base64: string
|
base64: string
|
||||||
string: string
|
string: string
|
||||||
text: string
|
text: string
|
||||||
@ -11,18 +11,16 @@ export interface OutputByType {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface InputByType {
|
interface InputByType {
|
||||||
base64: string
|
base64: string;
|
||||||
string: string
|
string: string;
|
||||||
text: string
|
text: string;
|
||||||
binarystring: string
|
binarystring: string;
|
||||||
array: number[]
|
array: number[];
|
||||||
uint8array: Uint8Array
|
uint8array: Uint8Array;
|
||||||
arraybuffer: ArrayBuffer
|
arraybuffer: ArrayBuffer;
|
||||||
blob: Blob
|
blob: Blob;
|
||||||
stream: NodeJS.ReadableStream
|
stream: NodeJS.ReadableStream;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type OutputType = keyof OutputByType
|
export type OutputType = keyof OutputByType
|
||||||
export type InputFileFormat =
|
export type InputFileFormat = InputByType[keyof InputByType] | Promise<InputByType[keyof InputByType]>;
|
||||||
| InputByType[keyof InputByType]
|
|
||||||
| Promise<InputByType[keyof InputByType]>
|
|
@ -8,10 +8,3 @@ export const SIGN: string = 'Sign'
|
|||||||
export const NEXT: string = 'Next'
|
export const NEXT: string = 'Next'
|
||||||
export const ARRAY_BUFFER = 'arraybuffer'
|
export const ARRAY_BUFFER = 'arraybuffer'
|
||||||
export const DEFLATE = 'DEFLATE'
|
export const DEFLATE = 'DEFLATE'
|
||||||
|
|
||||||
/**
|
|
||||||
* Number of milliseconds in one week.
|
|
||||||
* Calc based on: 7 * 24 * 60 * 60 * 1000
|
|
||||||
*/
|
|
||||||
export const ONE_WEEK_IN_MS: number = 604800000
|
|
||||||
export const SIGIT_RELAY: string = 'wss://relay.sigit.io'
|
|
||||||
|
@ -7,4 +7,3 @@ export * from './string'
|
|||||||
export * from './zip'
|
export * from './zip'
|
||||||
export * from './utils'
|
export * from './utils'
|
||||||
export * from './mark'
|
export * from './mark'
|
||||||
export * from './meta'
|
|
||||||
|
@ -1,182 +0,0 @@
|
|||||||
import { CreateSignatureEventContent, Meta } from '../types'
|
|
||||||
import { fromUnixTimestamp, parseJson } from '.'
|
|
||||||
import { Event } from 'nostr-tools'
|
|
||||||
import { toast } from 'react-toastify'
|
|
||||||
|
|
||||||
export enum SignStatus {
|
|
||||||
Signed = 'Signed',
|
|
||||||
Awaiting = 'Awaiting',
|
|
||||||
Pending = 'Pending',
|
|
||||||
Invalid = 'Invalid',
|
|
||||||
Viewer = 'Viewer'
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum SigitStatus {
|
|
||||||
Partial = 'In-Progress',
|
|
||||||
Complete = 'Completed'
|
|
||||||
}
|
|
||||||
|
|
||||||
type Jsonable =
|
|
||||||
| string
|
|
||||||
| number
|
|
||||||
| boolean
|
|
||||||
| null
|
|
||||||
| undefined
|
|
||||||
| readonly Jsonable[]
|
|
||||||
| { readonly [key: string]: Jsonable }
|
|
||||||
| { toJSON(): Jsonable }
|
|
||||||
|
|
||||||
export class SigitMetaParseError extends Error {
|
|
||||||
public readonly context?: Jsonable
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
message: string,
|
|
||||||
options: { cause?: Error; context?: Jsonable } = {}
|
|
||||||
) {
|
|
||||||
const { cause, context } = options
|
|
||||||
|
|
||||||
super(message, { cause })
|
|
||||||
this.name = this.constructor.name
|
|
||||||
|
|
||||||
this.context = context
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle meta errors
|
|
||||||
* Wraps the errors without message property and stringify to a message so we can use it later
|
|
||||||
* @param error
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
function handleError(error: unknown): Error {
|
|
||||||
if (error instanceof Error) return error
|
|
||||||
|
|
||||||
// No message error, wrap it and stringify
|
|
||||||
let stringified = 'Unable to stringify the thrown value'
|
|
||||||
try {
|
|
||||||
stringified = JSON.stringify(error)
|
|
||||||
} catch (error) {
|
|
||||||
console.error(stringified, error)
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Error(`[SiGit Error]: ${stringified}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reuse common error messages for meta parsing
|
|
||||||
export enum SigitMetaParseErrorType {
|
|
||||||
'PARSE_ERROR_EVENT' = 'error occurred in parsing the create signature event',
|
|
||||||
'PARSE_ERROR_SIGNATURE_EVENT_CONTENT' = "err in parsing the createSignature event's content"
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SigitCardDisplayInfo {
|
|
||||||
createdAt?: number
|
|
||||||
title?: string
|
|
||||||
submittedBy?: `npub1${string}`
|
|
||||||
signers: `npub1${string}`[]
|
|
||||||
fileExtensions: string[]
|
|
||||||
signedStatus: SigitStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wrapper for event parser that throws custom SigitMetaParseError with cause and context
|
|
||||||
* @param raw Raw string for parsing
|
|
||||||
* @returns parsed Event
|
|
||||||
*/
|
|
||||||
export const parseNostrEvent = async (raw: string): Promise<Event> => {
|
|
||||||
try {
|
|
||||||
const event = await parseJson<Event>(raw)
|
|
||||||
return event
|
|
||||||
} catch (error) {
|
|
||||||
throw new SigitMetaParseError(SigitMetaParseErrorType.PARSE_ERROR_EVENT, {
|
|
||||||
cause: handleError(error),
|
|
||||||
context: raw
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wrapper for event content parser that throws custom SigitMetaParseError with cause and context
|
|
||||||
* @param raw Raw string for parsing
|
|
||||||
* @returns parsed CreateSignatureEventContent
|
|
||||||
*/
|
|
||||||
export const parseCreateSignatureEventContent = async (
|
|
||||||
raw: string
|
|
||||||
): Promise<CreateSignatureEventContent> => {
|
|
||||||
try {
|
|
||||||
const createSignatureEventContent =
|
|
||||||
await parseJson<CreateSignatureEventContent>(raw)
|
|
||||||
return createSignatureEventContent
|
|
||||||
} catch (error) {
|
|
||||||
throw new SigitMetaParseError(
|
|
||||||
SigitMetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
|
|
||||||
{
|
|
||||||
cause: handleError(error),
|
|
||||||
context: raw
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Extracts only necessary metadata for the card display
|
|
||||||
* @param meta Sigit metadata
|
|
||||||
* @returns SigitCardDisplayInfo
|
|
||||||
*/
|
|
||||||
export const extractSigitCardDisplayInfo = async (meta: Meta) => {
|
|
||||||
if (!meta?.createSignature) return
|
|
||||||
|
|
||||||
const sigitInfo: SigitCardDisplayInfo = {
|
|
||||||
signers: [],
|
|
||||||
fileExtensions: [],
|
|
||||||
signedStatus: SigitStatus.Partial
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const createSignatureEvent = await parseNostrEvent(meta.createSignature)
|
|
||||||
|
|
||||||
// created_at in nostr events are stored in seconds
|
|
||||||
sigitInfo.createdAt = fromUnixTimestamp(createSignatureEvent.created_at)
|
|
||||||
|
|
||||||
const createSignatureContent = await parseCreateSignatureEventContent(
|
|
||||||
createSignatureEvent.content
|
|
||||||
)
|
|
||||||
|
|
||||||
const files = Object.keys(createSignatureContent.fileHashes)
|
|
||||||
const extensions = extractFileExtensions(files)
|
|
||||||
|
|
||||||
const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
|
|
||||||
const isCompletelySigned = createSignatureContent.signers.every((signer) =>
|
|
||||||
signedBy.includes(signer)
|
|
||||||
)
|
|
||||||
|
|
||||||
sigitInfo.title = createSignatureContent.title
|
|
||||||
sigitInfo.submittedBy = createSignatureEvent.pubkey as `npub1${string}`
|
|
||||||
sigitInfo.signers = createSignatureContent.signers
|
|
||||||
sigitInfo.fileExtensions = extensions
|
|
||||||
|
|
||||||
if (isCompletelySigned) {
|
|
||||||
sigitInfo.signedStatus = SigitStatus.Complete
|
|
||||||
}
|
|
||||||
|
|
||||||
return sigitInfo
|
|
||||||
} catch (error) {
|
|
||||||
if (error instanceof SigitMetaParseError) {
|
|
||||||
toast.error(error.message)
|
|
||||||
console.error(error.name, error.message, error.cause, error.context)
|
|
||||||
} else {
|
|
||||||
console.error('Unexpected error', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const extractFileExtensions = (fileNames: string[]) => {
|
|
||||||
const extensions = fileNames.reduce((result: string[], file: string) => {
|
|
||||||
const extension = file.split('.').pop()
|
|
||||||
if (extension) {
|
|
||||||
result.push(extension)
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return extensions
|
|
||||||
}
|
|
@ -13,7 +13,7 @@ import { NostrController } from '../controllers'
|
|||||||
import { AuthState } from '../store/auth/types'
|
import { AuthState } from '../store/auth/types'
|
||||||
import store from '../store/store'
|
import store from '../store/store'
|
||||||
import { CreateSignatureEventContent, Meta } from '../types'
|
import { CreateSignatureEventContent, Meta } from '../types'
|
||||||
import { hexToNpub, unixNow } from './nostr'
|
import { hexToNpub, now } from './nostr'
|
||||||
import { parseJson } from './string'
|
import { parseJson } from './string'
|
||||||
import { hexToBytes } from '@noble/hashes/utils'
|
import { hexToBytes } from '@noble/hashes/utils'
|
||||||
|
|
||||||
@ -28,10 +28,10 @@ export const uploadToFileStorage = async (file: File) => {
|
|||||||
const event: EventTemplate = {
|
const event: EventTemplate = {
|
||||||
kind: 24242,
|
kind: 24242,
|
||||||
content: 'Authorize Upload',
|
content: 'Authorize Upload',
|
||||||
created_at: unixNow(),
|
created_at: Math.floor(Date.now() / 1000),
|
||||||
tags: [
|
tags: [
|
||||||
['t', 'upload'],
|
['t', 'upload'],
|
||||||
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
|
['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
|
||||||
['name', file.name],
|
['name', file.name],
|
||||||
['size', String(file.size)]
|
['size', String(file.size)]
|
||||||
]
|
]
|
||||||
@ -78,7 +78,7 @@ export const signEventForMetaFile = async (
|
|||||||
const event: EventTemplate = {
|
const event: EventTemplate = {
|
||||||
kind: 27235, // Event type for meta file
|
kind: 27235, // Event type for meta file
|
||||||
content: content, // content for event
|
content: content, // content for event
|
||||||
created_at: unixNow(), // Current timestamp
|
created_at: Math.floor(Date.now() / 1000), // Current timestamp
|
||||||
tags: [['-']] // For understanding why "-" tag is used here see: https://github.com/nostr-protocol/nips/blob/protected-events-tag/70.md
|
tags: [['-']] // For understanding why "-" tag is used here see: https://github.com/nostr-protocol/nips/blob/protected-events-tag/70.md
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -120,8 +120,7 @@ export const queryNip05 = async (
|
|||||||
if (!match) throw new Error('Invalid nip05')
|
if (!match) throw new Error('Invalid nip05')
|
||||||
|
|
||||||
// Destructure the match result, assigning default value '_' to name if not provided
|
// Destructure the match result, assigning default value '_' to name if not provided
|
||||||
// First variable from the match destructuring is ignored
|
const [name = '_', domain] = match
|
||||||
const [, name = '_', domain] = match
|
|
||||||
|
|
||||||
// Construct the URL to query the NIP-05 data
|
// Construct the URL to query the NIP-05 data
|
||||||
const url = `https://${domain}/.well-known/nostr.json?name=${name}`
|
const url = `https://${domain}/.well-known/nostr.json?name=${name}`
|
||||||
@ -211,22 +210,7 @@ export const getRoboHashPicture = (
|
|||||||
return `https://robohash.org/${npub}.png?set=set${set}`
|
return `https://robohash.org/${npub}.png?set=set${set}`
|
||||||
}
|
}
|
||||||
|
|
||||||
export const unixNow = () => Math.round(Date.now() / 1000)
|
export const now = () => Math.round(Date.now() / 1000)
|
||||||
export const toUnixTimestamp = (date: number | Date) => {
|
|
||||||
let time
|
|
||||||
if (typeof date === 'number') {
|
|
||||||
time = Math.round(date / 1000)
|
|
||||||
} else if (date instanceof Date) {
|
|
||||||
time = Math.round(date.getTime() / 1000)
|
|
||||||
} else {
|
|
||||||
throw Error('Unsupported type when converting to unix timestamp')
|
|
||||||
}
|
|
||||||
|
|
||||||
return time
|
|
||||||
}
|
|
||||||
export const fromUnixTimestamp = (unix: number) => {
|
|
||||||
return unix * 1000
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Generate nip44 conversation key
|
* Generate nip44 conversation key
|
||||||
@ -303,7 +287,7 @@ export const createWrap = (unsignedEvent: UnsignedEvent, receiver: string) => {
|
|||||||
kind: 1059, // Event kind
|
kind: 1059, // Event kind
|
||||||
content, // Encrypted content
|
content, // Encrypted content
|
||||||
pubkey, // Public key of the creator
|
pubkey, // Public key of the creator
|
||||||
created_at: unixNow(), // Current timestamp
|
created_at: now(), // Current timestamp
|
||||||
tags: [
|
tags: [
|
||||||
// Tags including receiver and nonce
|
// Tags including receiver and nonce
|
||||||
['p', receiver],
|
['p', receiver],
|
||||||
@ -557,7 +541,7 @@ export const updateUsersAppData = async (meta: Meta) => {
|
|||||||
const updatedEvent: UnsignedEvent = {
|
const updatedEvent: UnsignedEvent = {
|
||||||
kind: kinds.Application,
|
kind: kinds.Application,
|
||||||
pubkey: usersPubkey!,
|
pubkey: usersPubkey!,
|
||||||
created_at: unixNow(),
|
created_at: now(),
|
||||||
tags: [['d', hash]],
|
tags: [['d', hash]],
|
||||||
content: encryptedContent
|
content: encryptedContent
|
||||||
}
|
}
|
||||||
@ -623,10 +607,10 @@ const deleteBlossomFile = async (url: string, privateKey: string) => {
|
|||||||
const event: EventTemplate = {
|
const event: EventTemplate = {
|
||||||
kind: 24242,
|
kind: 24242,
|
||||||
content: 'Authorize Upload',
|
content: 'Authorize Upload',
|
||||||
created_at: unixNow(),
|
created_at: now(),
|
||||||
tags: [
|
tags: [
|
||||||
['t', 'delete'],
|
['t', 'delete'],
|
||||||
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
|
['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
|
||||||
['x', hash]
|
['x', hash]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -682,10 +666,10 @@ const uploadUserAppDataToBlossom = async (
|
|||||||
const event: EventTemplate = {
|
const event: EventTemplate = {
|
||||||
kind: 24242,
|
kind: 24242,
|
||||||
content: 'Authorize Upload',
|
content: 'Authorize Upload',
|
||||||
created_at: unixNow(),
|
created_at: now(),
|
||||||
tags: [
|
tags: [
|
||||||
['t', 'upload'],
|
['t', 'upload'],
|
||||||
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
|
['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
|
||||||
['name', file.name],
|
['name', file.name],
|
||||||
['size', String(file.size)]
|
['size', String(file.size)]
|
||||||
]
|
]
|
||||||
@ -890,7 +874,7 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
|
|||||||
pubkey: usersPubkey,
|
pubkey: usersPubkey,
|
||||||
content: JSON.stringify(meta),
|
content: JSON.stringify(meta),
|
||||||
tags: [],
|
tags: [],
|
||||||
created_at: unixNow()
|
created_at: now()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wrap the unsigned event with the receiver's information
|
// Wrap the unsigned event with the receiver's information
|
||||||
|
@ -3,10 +3,8 @@ import * as PDFJS from 'pdfjs-dist'
|
|||||||
import { PDFDocument } from 'pdf-lib'
|
import { PDFDocument } from 'pdf-lib'
|
||||||
import { Mark } from '../types/mark.ts'
|
import { Mark } from '../types/mark.ts'
|
||||||
|
|
||||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
PDFJS.GlobalWorkerOptions.workerSrc =
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
'node_modules/pdfjs-dist/build/pdf.worker.mjs'
|
||||||
import.meta.url
|
|
||||||
).toString()
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Scale between the PDF page's natural size and rendered size
|
* Scale between the PDF page's natural size and rendered size
|
||||||
|
@ -1,116 +0,0 @@
|
|||||||
import { Filter, SimplePool } from 'nostr-tools'
|
|
||||||
import { RelayList } from 'nostr-tools/kinds'
|
|
||||||
import { Event } from 'nostr-tools'
|
|
||||||
import { localCache } from '../services'
|
|
||||||
import { ONE_WEEK_IN_MS, SIGIT_RELAY } from './const.ts'
|
|
||||||
import { RelayMap, RelaySet } from '../types'
|
|
||||||
|
|
||||||
const READ_MARKER = 'read'
|
|
||||||
const WRITE_MARKER = 'write'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Attempts to find a relay list from the provided lookUpRelays.
|
|
||||||
* If the relay list is found, it will be added to the user relay list metadata.
|
|
||||||
* @param lookUpRelays
|
|
||||||
* @param hexKey
|
|
||||||
* @return found relay list or null
|
|
||||||
*/
|
|
||||||
const findRelayListAndUpdateCache = async (
|
|
||||||
lookUpRelays: string[],
|
|
||||||
hexKey: string
|
|
||||||
): Promise<Event | null> => {
|
|
||||||
try {
|
|
||||||
const eventFilter: Filter = {
|
|
||||||
kinds: [RelayList],
|
|
||||||
authors: [hexKey]
|
|
||||||
}
|
|
||||||
const pool = new SimplePool()
|
|
||||||
const event = await pool.get(lookUpRelays, eventFilter)
|
|
||||||
if (event) {
|
|
||||||
await localCache.addUserRelayListMetadata(event)
|
|
||||||
}
|
|
||||||
return event
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Attempts to find a relay list in cache. If it is present, it will check that the cached event is not
|
|
||||||
* older than one week.
|
|
||||||
* @param hexKey
|
|
||||||
* @return RelayList event if it's not older than a week; otherwise null
|
|
||||||
*/
|
|
||||||
const findRelayListInCache = async (hexKey: string): Promise<Event | null> => {
|
|
||||||
try {
|
|
||||||
// Attempt to retrieve the metadata event from the local cache
|
|
||||||
const cachedRelayListMetadataEvent =
|
|
||||||
await localCache.getUserRelayListMetadata(hexKey)
|
|
||||||
|
|
||||||
// Check if the cached event is not older than one week
|
|
||||||
if (
|
|
||||||
cachedRelayListMetadataEvent &&
|
|
||||||
isOlderThanOneWeek(cachedRelayListMetadataEvent.cachedAt)
|
|
||||||
) {
|
|
||||||
return cachedRelayListMetadataEvent.event
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Transforms a list of relay tags from a Nostr Event to a RelaySet.
|
|
||||||
* @param tags
|
|
||||||
*/
|
|
||||||
const getUserRelaySet = (tags: string[][]): RelaySet => {
|
|
||||||
return tags
|
|
||||||
.filter(isRelayTag)
|
|
||||||
.reduce<RelaySet>(toRelaySet, getDefaultRelaySet())
|
|
||||||
}
|
|
||||||
|
|
||||||
const getDefaultRelaySet = (): RelaySet => ({
|
|
||||||
read: [SIGIT_RELAY],
|
|
||||||
write: [SIGIT_RELAY]
|
|
||||||
})
|
|
||||||
|
|
||||||
const getDefaultRelayMap = (): RelayMap => ({
|
|
||||||
[SIGIT_RELAY]: { write: true, read: true }
|
|
||||||
})
|
|
||||||
|
|
||||||
const isOlderThanOneWeek = (cachedAt: number) => {
|
|
||||||
return Date.now() - cachedAt < ONE_WEEK_IN_MS
|
|
||||||
}
|
|
||||||
|
|
||||||
const isRelayTag = (tag: string[]): boolean => tag[0] === 'r'
|
|
||||||
|
|
||||||
const toRelaySet = (obj: RelaySet, tag: string[]): RelaySet => {
|
|
||||||
if (tag.length >= 3) {
|
|
||||||
const marker = tag[2]
|
|
||||||
|
|
||||||
if (marker === READ_MARKER) {
|
|
||||||
obj.read.push(tag[1])
|
|
||||||
} else if (marker === WRITE_MARKER) {
|
|
||||||
obj.write.push(tag[1])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (tag.length === 2) {
|
|
||||||
obj.read.push(tag[1])
|
|
||||||
obj.write.push(tag[1])
|
|
||||||
}
|
|
||||||
|
|
||||||
return obj
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
findRelayListAndUpdateCache,
|
|
||||||
findRelayListInCache,
|
|
||||||
getUserRelaySet,
|
|
||||||
getDefaultRelaySet,
|
|
||||||
getDefaultRelayMap,
|
|
||||||
isOlderThanOneWeek
|
|
||||||
}
|
|
@ -5,10 +5,7 @@ import { Meta } from '../types'
|
|||||||
* This function returns the signature of last signer
|
* This function returns the signature of last signer
|
||||||
* It will be used in the content of export signature's signedEvent
|
* It will be used in the content of export signature's signedEvent
|
||||||
*/
|
*/
|
||||||
const getLastSignersSig = (
|
const getLastSignersSig = (meta: Meta, signers: `npub1${string}`[]): string | null => {
|
||||||
meta: Meta,
|
|
||||||
signers: `npub1${string}`[]
|
|
||||||
): string | null => {
|
|
||||||
// if there're no signers then use creator's signature
|
// if there're no signers then use creator's signature
|
||||||
if (signers.length === 0) {
|
if (signers.length === 0) {
|
||||||
try {
|
try {
|
||||||
@ -24,7 +21,9 @@ const getLastSignersSig = (
|
|||||||
|
|
||||||
// get the signature of last signer
|
// get the signature of last signer
|
||||||
try {
|
try {
|
||||||
const lastSignatureEvent: Event = JSON.parse(meta.docSignatures[lastSigner])
|
const lastSignatureEvent: Event = JSON.parse(
|
||||||
|
meta.docSignatures[lastSigner]
|
||||||
|
)
|
||||||
return lastSignatureEvent.sig
|
return lastSignatureEvent.sig
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return null
|
return null
|
||||||
|
@ -36,12 +36,17 @@ const readContentOfZipEntry = async <T extends OutputType>(
|
|||||||
|
|
||||||
const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => {
|
const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => {
|
||||||
try {
|
try {
|
||||||
return await JSZip.loadAsync(data)
|
return await JSZip.loadAsync(data);
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
console.log('err in loading zip file :>> ', err)
|
console.log('err in loading zip file :>> ', err)
|
||||||
toast.error(err.message || 'An error occurred in loading zip file.')
|
toast.error(err.message || 'An error occurred in loading zip file.')
|
||||||
return null
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { readContentOfZipEntry, loadZip }
|
export {
|
||||||
|
readContentOfZipEntry,
|
||||||
|
loadZip
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user