fix: when decrypting file, have better error messages #17
@ -29,4 +29,4 @@ jobs:
|
||||
- name: Release Build
|
||||
run: |
|
||||
npm -g install cloudron-surfer
|
||||
surfer put --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server app.sigit.io dist/* /
|
||||
surfer put --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io dist/* /
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"homepage": "https://app.sigit.io/",
|
||||
"homepage": "https://sigit.io/",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
import { Menu as MenuIcon } from '@mui/icons-material'
|
||||
import {
|
||||
AppBar as AppBarMui,
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Tab,
|
||||
Tabs,
|
||||
Toolbar,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
@ -19,14 +15,10 @@ import { State } from '../../store/rootReducer'
|
||||
import { Dispatch } from '../../store/store'
|
||||
import Username from '../username'
|
||||
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import nostrichAvatar from '../../assets/images/avatar.png'
|
||||
import { NostrController } from '../../controllers'
|
||||
import {
|
||||
appPrivateRoutes,
|
||||
appPublicRoutes,
|
||||
getProfileRoute
|
||||
} from '../../routes'
|
||||
import { appPublicRoutes, getProfileRoute } from '../../routes'
|
||||
import {
|
||||
clearAuthToken,
|
||||
saveNsecBunkerDelegatedKey,
|
||||
@ -34,20 +26,14 @@ import {
|
||||
} from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
|
||||
const validTabs = [appPrivateRoutes.homePage, appPrivateRoutes.decryptZip]
|
||||
|
||||
export const AppBar = () => {
|
||||
const navigate = useNavigate()
|
||||
const { pathname } = useLocation()
|
||||
const [tabValue, setTabValue] = useState(
|
||||
validTabs.includes(pathname) ? pathname : '/'
|
||||
)
|
||||
|
||||
const dispatch: Dispatch = useDispatch()
|
||||
|
||||
const [username, setUsername] = useState('')
|
||||
const [userAvatar, setUserAvatar] = useState(nostrichAvatar)
|
||||
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
|
||||
const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null)
|
||||
|
||||
const authState = useSelector((state: State) => state.auth)
|
||||
const metadataState = useSelector((state: State) => state.metadata)
|
||||
@ -66,18 +52,10 @@ export const AppBar = () => {
|
||||
setAnchorElUser(event.currentTarget)
|
||||
}
|
||||
|
||||
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorElNav(event.currentTarget)
|
||||
}
|
||||
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null)
|
||||
}
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null)
|
||||
}
|
||||
|
||||
const handleProfile = () => {
|
||||
const hexKey = authState?.usersPubkey
|
||||
if (hexKey) navigate(getProfileRoute(hexKey))
|
||||
@ -111,116 +89,8 @@ export const AppBar = () => {
|
||||
return (
|
||||
<AppBarMui position='fixed' className={styles.AppBar}>
|
||||
<Toolbar className={styles.toolbar}>
|
||||
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
|
||||
<Box className={styles.logoWrapper}>
|
||||
<img src="/logo.png" alt='Logo' onClick={() => navigate('/')} />
|
||||
</Box>
|
||||
|
||||
{isAuthenticated && (
|
||||
<Tabs
|
||||
indicatorColor='secondary'
|
||||
value={tabValue}
|
||||
onChange={(_, value) => setTabValue(value)}
|
||||
>
|
||||
<Tab
|
||||
label='Home'
|
||||
value={appPrivateRoutes.homePage}
|
||||
to={appPrivateRoutes.homePage}
|
||||
component={Link}
|
||||
/>
|
||||
<Tab
|
||||
label='Decrypt Zip'
|
||||
value={appPrivateRoutes.decryptZip}
|
||||
to={appPrivateRoutes.decryptZip}
|
||||
component={Link}
|
||||
/>
|
||||
<Tab
|
||||
label='Sign Document'
|
||||
value={appPrivateRoutes.sign}
|
||||
to={appPrivateRoutes.sign}
|
||||
component={Link}
|
||||
/>
|
||||
</Tabs>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
{!isAuthenticated && (
|
||||
<Box className={styles.logoWrapper}>
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt='Logo'
|
||||
onClick={() => navigate('/')}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isAuthenticated && (
|
||||
<>
|
||||
<IconButton
|
||||
size='large'
|
||||
onClick={handleOpenNavMenu}
|
||||
color='primary'
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
<Menu
|
||||
id='menu-appbar'
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left'
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left'
|
||||
}}
|
||||
open={!!anchorElNav}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' }
|
||||
}}
|
||||
>
|
||||
<MenuItem sx={{ justifyContent: 'center' }}>
|
||||
<Button
|
||||
component={Link}
|
||||
to={appPrivateRoutes.homePage}
|
||||
onClick={handleCloseNavMenu}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem sx={{ justifyContent: 'center' }}>
|
||||
<Button
|
||||
component={Link}
|
||||
to={appPrivateRoutes.decryptZip}
|
||||
onClick={handleCloseNavMenu}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
>
|
||||
Decrypt Zip
|
||||
</Button>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem sx={{ justifyContent: 'center' }}>
|
||||
<Button
|
||||
component={Link}
|
||||
to={appPrivateRoutes.sign}
|
||||
onClick={handleCloseNavMenu}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
>
|
||||
Sign Document
|
||||
</Button>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
)}
|
||||
<img src='/logo.png' alt='Logo' onClick={() => navigate('/')} />
|
||||
</Box>
|
||||
|
||||
<Box className={styles.rightSideBox}>
|
||||
|
||||
@ -1,489 +1,20 @@
|
||||
import { Clear } from '@mui/icons-material'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
List,
|
||||
ListItem,
|
||||
ListSubheader,
|
||||
MenuItem,
|
||||
Select,
|
||||
TextField,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import JSZip from 'jszip'
|
||||
import { MuiFileInput } from 'mui-file-input'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import { MetadataController, NostrController } from '../../controllers'
|
||||
import { getProfileRoute } from '../../routes'
|
||||
import { State } from '../../store/rootReducer'
|
||||
import { ProfileMetadata } from '../../types'
|
||||
import {
|
||||
encryptArrayBuffer,
|
||||
generateEncryptionKey,
|
||||
getHash,
|
||||
pubToHex,
|
||||
queryNip05,
|
||||
sendDM,
|
||||
shorten,
|
||||
signEventForMetaFile,
|
||||
uploadToFileStorage
|
||||
} from '../../utils'
|
||||
import { Box, Button } from '@mui/material'
|
||||
import styles from './style.module.scss'
|
||||
|
||||
enum SelectionType {
|
||||
signer = 'Signer',
|
||||
viewer = 'Viewer'
|
||||
}
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { appPrivateRoutes } from '../../routes'
|
||||
|
||||
export const HomePage = () => {
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
const [type, setType] = useState<SelectionType>(SelectionType.signer)
|
||||
const [error, setError] = useState<string>()
|
||||
|
||||
const [signers, setSigners] = useState<string[]>([])
|
||||
const [viewers, setViewers] = useState<string[]>([])
|
||||
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([])
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||
const [authUrl, setAuthUrl] = useState<string>()
|
||||
|
||||
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
||||
|
||||
const nostrController = NostrController.getInstance()
|
||||
|
||||
const handleAddClick = async () => {
|
||||
setError(undefined)
|
||||
|
||||
const addPubkey = (pubkey: string) => {
|
||||
const addElement = (prev: string[]) => {
|
||||
// if key is already in the list just return that
|
||||
if (prev.includes(pubkey)) return prev
|
||||
|
||||
return [...prev, pubkey]
|
||||
}
|
||||
if (type === SelectionType.signer) {
|
||||
setSigners(addElement)
|
||||
} else {
|
||||
setViewers(addElement)
|
||||
}
|
||||
}
|
||||
|
||||
if (inputValue.startsWith('npub')) {
|
||||
const pubkey = await pubToHex(inputValue)
|
||||
if (pubkey) {
|
||||
addPubkey(pubkey)
|
||||
setInputValue('')
|
||||
} else {
|
||||
setError('Provided npub is not valid. Please enter correct npub.')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (inputValue.includes('@')) {
|
||||
setIsLoading(true)
|
||||
setLoadingSpinnerDesc('Querying for nip05')
|
||||
const nip05Profile = await queryNip05(inputValue)
|
||||
.catch((err) => {
|
||||
console.error(`error occurred in querying nip05: ${inputValue}`, err)
|
||||
return null
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
setLoadingSpinnerDesc('')
|
||||
})
|
||||
|
||||
if (nip05Profile) {
|
||||
const pubkey = nip05Profile.pubkey
|
||||
addPubkey(pubkey)
|
||||
setInputValue('')
|
||||
} else {
|
||||
setError('Provided nip05 is not valid. Please enter correct nip05.')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
setError('Invalid input! Make sure to provide correct npub or nip05.')
|
||||
}
|
||||
|
||||
const handleRemove = (pubkey: string, selectionType: SelectionType) => {
|
||||
if (selectionType === SelectionType.signer) {
|
||||
setSigners((prev) => prev.filter((signer) => signer !== pubkey))
|
||||
} else {
|
||||
setViewers((prev) => prev.filter((viewer) => viewer !== pubkey))
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectFiles = (files: File[]) => {
|
||||
setSelectedFiles((prev) => {
|
||||
const prevFileNames = prev.map((file) => file.name)
|
||||
|
||||
const newFiles = files.filter(
|
||||
(file) => !prevFileNames.includes(file.name)
|
||||
)
|
||||
|
||||
return [...prev, ...newFiles]
|
||||
})
|
||||
}
|
||||
|
||||
const handleRemoveFile = (fileToRemove: File) => {
|
||||
setSelectedFiles((prevFiles) =>
|
||||
prevFiles.filter((file) => file.name !== fileToRemove.name)
|
||||
)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (signers.length === 0) {
|
||||
toast.error('No signer is provided. At least provide one signer.')
|
||||
return
|
||||
}
|
||||
|
||||
if (viewers.length === 0) {
|
||||
toast.error('No viewer is provided. At least provide one viewer.')
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedFiles.length === 0) {
|
||||
toast.error('No file is provided. At least provide one file.')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setLoadingSpinnerDesc('Generating hashes for files')
|
||||
|
||||
const fileHashes: { [key: string]: string } = {}
|
||||
|
||||
for (const file of selectedFiles) {
|
||||
const arraybuffer = await file.arrayBuffer().catch((err) => {
|
||||
console.log(
|
||||
`err while getting arrayBuffer of file ${file.name} :>> `,
|
||||
err
|
||||
)
|
||||
toast.error(
|
||||
err.message || `err while getting arrayBuffer of file ${file.name}`
|
||||
)
|
||||
return null
|
||||
})
|
||||
|
||||
if (!arraybuffer) return
|
||||
|
||||
const hash = await getHash(arraybuffer)
|
||||
|
||||
if (!hash) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
fileHashes[file.name] = hash
|
||||
}
|
||||
|
||||
const zip = new JSZip()
|
||||
|
||||
selectedFiles.forEach((file) => {
|
||||
zip.file(`files/${file.name}`, file)
|
||||
})
|
||||
|
||||
setLoadingSpinnerDesc('Signing nostr event')
|
||||
const signedEvent = await signEventForMetaFile(
|
||||
signers[0],
|
||||
fileHashes,
|
||||
nostrController,
|
||||
setIsLoading
|
||||
)
|
||||
|
||||
if (!signedEvent) return
|
||||
|
||||
const meta = {
|
||||
signers,
|
||||
viewers,
|
||||
fileHashes,
|
||||
submittedBy: usersPubkey,
|
||||
signedEvents: {
|
||||
[signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const stringifiedMeta = JSON.stringify(meta, null, 2)
|
||||
zip.file('meta.json', stringifiedMeta)
|
||||
|
||||
const metaHash = await getHash(stringifiedMeta)
|
||||
if (!metaHash) return
|
||||
|
||||
const metaHashJson = {
|
||||
[usersPubkey!]: metaHash
|
||||
}
|
||||
|
||||
zip.file('hashes.json', JSON.stringify(metaHashJson, null, 2))
|
||||
} catch (err) {
|
||||
toast.error('An error occurred in converting meta json to string')
|
||||
}
|
||||
|
||||
setLoadingSpinnerDesc('Generating zip file')
|
||||
|
||||
const arraybuffer = await zip
|
||||
.generateAsync({
|
||||
type: 'arraybuffer',
|
||||
compression: 'DEFLATE',
|
||||
compressionOptions: {
|
||||
level: 6
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err in zip:>> ', err)
|
||||
setIsLoading(false)
|
||||
toast.error(err.message || 'Error occurred in generating zip file')
|
||||
return null
|
||||
})
|
||||
|
||||
if (!arraybuffer) return
|
||||
|
||||
const encryptionKey = await generateEncryptionKey()
|
||||
|
||||
setLoadingSpinnerDesc('Encrypting zip file')
|
||||
const encryptedArrayBuffer = await encryptArrayBuffer(
|
||||
arraybuffer,
|
||||
encryptionKey
|
||||
)
|
||||
|
||||
const blob = new Blob([encryptedArrayBuffer])
|
||||
|
||||
setLoadingSpinnerDesc('Uploading zip file to file storage.')
|
||||
const fileUrl = await uploadToFileStorage(blob, nostrController)
|
||||
.then((url) => {
|
||||
toast.success('zip file uploaded to file storage')
|
||||
return url
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err in upload:>> ', err)
|
||||
setIsLoading(false)
|
||||
toast.error(err.message || 'Error occurred in uploading zip file')
|
||||
return null
|
||||
})
|
||||
|
||||
if (!fileUrl) return
|
||||
|
||||
setLoadingSpinnerDesc('Sending DM to first signer')
|
||||
await sendDM(
|
||||
fileUrl,
|
||||
encryptionKey,
|
||||
signers[0],
|
||||
nostrController,
|
||||
true,
|
||||
setAuthUrl
|
||||
)
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
if (authUrl) {
|
||||
return (
|
||||
<iframe
|
||||
title='Nsecbunker auth'
|
||||
src={authUrl}
|
||||
width='100%'
|
||||
height='500px'
|
||||
/>
|
||||
)
|
||||
}
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||
<Box className={styles.container}>
|
||||
<Typography component='label' variant='h6'>
|
||||
Select signers and viewers
|
||||
</Typography>
|
||||
<Box className={styles.inputBlock}>
|
||||
<TextField
|
||||
label='nip05 / npub'
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
helperText={error}
|
||||
error={!!error}
|
||||
/>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id='select-type-label'>Type</InputLabel>
|
||||
<Select
|
||||
labelId='select-type-label'
|
||||
id='demo-simple-select'
|
||||
value={type}
|
||||
label='Type'
|
||||
onChange={(e) => setType(e.target.value as SelectionType)}
|
||||
>
|
||||
<MenuItem value={SelectionType.signer}>
|
||||
{SelectionType.signer}
|
||||
</MenuItem>
|
||||
<MenuItem value={SelectionType.viewer}>
|
||||
{SelectionType.viewer}
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button
|
||||
disabled={!inputValue}
|
||||
onClick={handleAddClick}
|
||||
onClick={() => navigate(appPrivateRoutes.sign)}
|
||||
variant='contained'
|
||||
>
|
||||
Add
|
||||
Sign
|
||||
</Button>
|
||||
<Button variant='contained'>Verify</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography component='label' variant='h6'>
|
||||
Select files
|
||||
</Typography>
|
||||
|
||||
<MuiFileInput
|
||||
multiple
|
||||
placeholder='Choose Files'
|
||||
value={selectedFiles}
|
||||
onChange={(value) => handleSelectFiles(value)}
|
||||
/>
|
||||
|
||||
<ul>
|
||||
{selectedFiles.map((file, index) => (
|
||||
<li key={index}>
|
||||
<Typography component='label'>{file.name}</Typography>
|
||||
<IconButton onClick={() => handleRemoveFile(file)}>
|
||||
<Clear style={{ color: 'red' }} />{' '}
|
||||
</IconButton>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{signers.length > 0 && (
|
||||
<List
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
marginTop: 2
|
||||
}}
|
||||
subheader={
|
||||
<ListSubheader
|
||||
sx={{
|
||||
paddingBottom: 1,
|
||||
paddingTop: 1,
|
||||
fontSize: '1.5rem'
|
||||
}}
|
||||
className={styles.subHeader}
|
||||
>
|
||||
Signers
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
{signers.map((signer, index) => (
|
||||
<DisplaySignerOrViewer
|
||||
key={`signer-${index}`}
|
||||
pubkey={signer}
|
||||
remove={() => handleRemove(signer, SelectionType.signer)}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
|
||||
{viewers.length > 0 && (
|
||||
<List
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
marginTop: 2
|
||||
}}
|
||||
subheader={
|
||||
<ListSubheader
|
||||
sx={{
|
||||
paddingBottom: 1,
|
||||
paddingTop: 1,
|
||||
fontSize: '1.5rem'
|
||||
}}
|
||||
className={styles.subHeader}
|
||||
>
|
||||
Viewers
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
{viewers.map((viewer, index) => (
|
||||
<DisplaySignerOrViewer
|
||||
key={`viewer-${index}`}
|
||||
pubkey={viewer}
|
||||
remove={() => handleRemove(viewer, SelectionType.viewer)}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button onClick={handleSubmit} variant='contained'>
|
||||
Submit
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
type DisplaySignerOrViewerProps = {
|
||||
pubkey: string
|
||||
remove: () => void
|
||||
}
|
||||
|
||||
const DisplaySignerOrViewer = ({
|
||||
pubkey,
|
||||
remove
|
||||
}: DisplaySignerOrViewerProps) => {
|
||||
const [metadata, setMetadata] = useState<ProfileMetadata>()
|
||||
|
||||
useEffect(() => {
|
||||
const getMetadata = async (pubkey: string) => {
|
||||
const metadataController = new MetadataController()
|
||||
const metadataEvent = await metadataController
|
||||
.findMetadata(pubkey)
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`error occurred in finding metadata for: ${pubkey}`,
|
||||
err
|
||||
)
|
||||
return null
|
||||
})
|
||||
|
||||
if (metadataEvent) {
|
||||
const metadataContent =
|
||||
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||
if (metadataContent) setMetadata(metadataContent)
|
||||
}
|
||||
}
|
||||
|
||||
getMetadata(pubkey)
|
||||
}, [pubkey])
|
||||
|
||||
const imageLoadError = (event: any) => {
|
||||
event.target.src = placeholderAvatar
|
||||
}
|
||||
|
||||
return (
|
||||
<ListItem sx={{ marginTop: 1 }} className={styles.listItem}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
src={metadata?.picture || placeholderAvatar}
|
||||
alt='Profile Image'
|
||||
className={styles.img}
|
||||
/>
|
||||
<Link to={getProfileRoute(pubkey)}>
|
||||
<Typography component='label' className={styles.name}>
|
||||
{metadata?.display_name || metadata?.name || shorten(pubkey)}
|
||||
</Typography>
|
||||
</Link>
|
||||
<IconButton onClick={remove}>
|
||||
<Clear style={{ color: 'red' }} />
|
||||
</IconButton>
|
||||
</ListItem>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,33 +1,6 @@
|
||||
@import '../../colors.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $text-color;
|
||||
|
||||
.inputBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
border-bottom: 0.5px solid;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between !important;
|
||||
|
||||
.img {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,192 +1,267 @@
|
||||
import { Box, Button, Typography } from '@mui/material'
|
||||
import { Clear } from '@mui/icons-material'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Select,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import { MuiFileInput } from 'mui-file-input'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import styles from './style.module.scss'
|
||||
import JSZip from 'jszip'
|
||||
import { toast } from 'react-toastify'
|
||||
import { MetadataController, NostrController } from '../../controllers'
|
||||
import { getProfileRoute } from '../../routes'
|
||||
import { ProfileMetadata, User, UserRole } from '../../types'
|
||||
import {
|
||||
encryptArrayBuffer,
|
||||
generateEncryptionKey,
|
||||
getHash,
|
||||
parseJson,
|
||||
readContentOfZipEntry,
|
||||
hexToNpub,
|
||||
pubToHex,
|
||||
queryNip05,
|
||||
sendDM,
|
||||
shorten,
|
||||
signEventForMetaFile,
|
||||
uploadToFileStorage
|
||||
} from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { toast } from 'react-toastify'
|
||||
import JSZip from 'jszip'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { State } from '../../store/rootReducer'
|
||||
import { NostrController } from '../../controllers'
|
||||
|
||||
export const SignDocument = () => {
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||
|
||||
export const SignPage = () => {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||
const [isDraggingOver, setIsDraggingOver] = useState(false)
|
||||
|
||||
const [authUrl, setAuthUrl] = useState<string>()
|
||||
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([])
|
||||
const [displayUserInput, setDisplayUserInput] = useState(false)
|
||||
|
||||
const [userInput, setUserInput] = useState('')
|
||||
const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
|
||||
const [error, setError] = useState<string>()
|
||||
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
|
||||
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
||||
|
||||
const nostrController = NostrController.getInstance()
|
||||
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault()
|
||||
setIsDraggingOver(false)
|
||||
const file = event.dataTransfer.files[0]
|
||||
if (file.type === 'application/zip') setSelectedFile(file)
|
||||
const handleAddUser = async () => {
|
||||
setError(undefined)
|
||||
|
||||
const addUser = (pubkey: string) => {
|
||||
setUsers((prev) => {
|
||||
const existingUserIndex = prev.findIndex(
|
||||
(user) => user.pubkey === pubkey
|
||||
)
|
||||
|
||||
// add new
|
||||
if (existingUserIndex === -1)
|
||||
return [...prev, { pubkey, role: userRole }]
|
||||
|
||||
const existingUser = prev[existingUserIndex]
|
||||
|
||||
// return existing
|
||||
if (existingUser.role === userRole) return prev
|
||||
|
||||
// change user role
|
||||
const updatedUsers = [...prev]
|
||||
const updatedUser = { ...updatedUsers[existingUserIndex] }
|
||||
updatedUser.role = userRole
|
||||
updatedUsers[existingUserIndex] = updatedUser
|
||||
|
||||
return updatedUsers
|
||||
})
|
||||
|
||||
setUserInput('')
|
||||
}
|
||||
|
||||
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault()
|
||||
setIsDraggingOver(true)
|
||||
if (userInput.startsWith('npub')) {
|
||||
const pubkey = await pubToHex(userInput)
|
||||
if (pubkey) {
|
||||
addUser(pubkey)
|
||||
setUserInput('')
|
||||
} else {
|
||||
setError('Provided npub is not valid. Please enter correct npub.')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (userInput.includes('@')) {
|
||||
setIsLoading(true)
|
||||
setLoadingSpinnerDesc('Querying for nip05')
|
||||
const nip05Profile = await queryNip05(userInput)
|
||||
.catch((err) => {
|
||||
console.error(`error occurred in querying nip05: ${userInput}`, err)
|
||||
return null
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
setLoadingSpinnerDesc('')
|
||||
})
|
||||
|
||||
if (nip05Profile) {
|
||||
const pubkey = nip05Profile.pubkey
|
||||
addUser(pubkey)
|
||||
setUserInput('')
|
||||
} else {
|
||||
setError('Provided nip05 is not valid. Please enter correct nip05.')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
setError('Invalid input! Make sure to provide correct npub or nip05.')
|
||||
}
|
||||
|
||||
const handleUserRoleChange = (role: UserRole, index: number) => {
|
||||
setUsers((prevUsers) => {
|
||||
// Create a shallow copy of the previous state
|
||||
const updatedUsers = [...prevUsers]
|
||||
// Create a shallow copy of the user object at the specified index
|
||||
const updatedUser = { ...updatedUsers[index] }
|
||||
// Update the role property of the copied user object
|
||||
updatedUser.role = role
|
||||
// Update the user object at the specified index in the copied array
|
||||
updatedUsers[index] = updatedUser
|
||||
// Return the updated array
|
||||
return updatedUsers
|
||||
})
|
||||
}
|
||||
|
||||
const handleRemoveUser = (pubkey: string) => {
|
||||
setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey))
|
||||
}
|
||||
|
||||
const handleSelectFiles = (files: File[]) => {
|
||||
setDisplayUserInput(true)
|
||||
setSelectedFiles((prev) => {
|
||||
const prevFileNames = prev.map((file) => file.name)
|
||||
|
||||
const newFiles = files.filter(
|
||||
(file) => !prevFileNames.includes(file.name)
|
||||
)
|
||||
|
||||
return [...prev, ...newFiles]
|
||||
})
|
||||
}
|
||||
|
||||
const handleRemoveFile = (fileToRemove: File) => {
|
||||
setSelectedFiles((prevFiles) =>
|
||||
prevFiles.filter((file) => file.name !== fileToRemove.name)
|
||||
)
|
||||
}
|
||||
|
||||
const handleSign = async () => {
|
||||
if (!selectedFile) return
|
||||
if (users.length === 0) {
|
||||
toast.error(
|
||||
'No signer/viewer is provided. At least add one signer or viewer.'
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedFiles.length === 0) {
|
||||
toast.error('No file is selected. Select at least 1 file')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setLoadingSpinnerDesc('Parsing zip file')
|
||||
const zip = await JSZip.loadAsync(selectedFile).catch((err) => {
|
||||
console.log('err in loading zip file :>> ', err)
|
||||
toast.error(err.message || 'An error occurred in loading zip file.')
|
||||
return null
|
||||
})
|
||||
|
||||
if (!zip) return
|
||||
|
||||
setLoadingSpinnerDesc('Parsing meta.json')
|
||||
|
||||
const metaFileContent = await readContentOfZipEntry(
|
||||
zip,
|
||||
'meta.json',
|
||||
'string'
|
||||
)
|
||||
|
||||
if (!metaFileContent) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const meta = await parseJson(metaFileContent).catch((err) => {
|
||||
console.log('err in parsing the content of meta.json :>> ', err)
|
||||
toast.error(
|
||||
err.message || 'error occurred in parsing the content of meta.json'
|
||||
)
|
||||
setIsLoading(false)
|
||||
return null
|
||||
})
|
||||
|
||||
const hashesFileContent = await readContentOfZipEntry(
|
||||
zip,
|
||||
'hashes.json',
|
||||
'string'
|
||||
)
|
||||
|
||||
if (!hashesFileContent) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const hashes = await parseJson(hashesFileContent).catch((err) => {
|
||||
console.log('err in parsing the content of hashes.json :>> ', err)
|
||||
toast.error(
|
||||
err.message || 'error occurred in parsing the content of hashes.json'
|
||||
)
|
||||
setIsLoading(false)
|
||||
return null
|
||||
})
|
||||
|
||||
if (!hashes) return
|
||||
|
||||
setLoadingSpinnerDesc('Generating hashes for files')
|
||||
|
||||
const fileHashes: { [key: string]: string } = {}
|
||||
const fileNames = Object.keys(meta.fileHashes)
|
||||
|
||||
// create generate hashes for all entries in files folder of zipArchive
|
||||
// these hashes can be used to verify the originality of files
|
||||
for (const fileName of fileNames) {
|
||||
const filePath = `files/${fileName}`
|
||||
const arrayBuffer = await readContentOfZipEntry(
|
||||
zip,
|
||||
filePath,
|
||||
'arraybuffer'
|
||||
// generating file hashes
|
||||
for (const file of selectedFiles) {
|
||||
const arraybuffer = await file.arrayBuffer().catch((err) => {
|
||||
console.log(
|
||||
`err while getting arrayBuffer of file ${file.name} :>> `,
|
||||
err
|
||||
)
|
||||
toast.error(
|
||||
err.message || `err while getting arrayBuffer of file ${file.name}`
|
||||
)
|
||||
return null
|
||||
})
|
||||
|
||||
if (!arrayBuffer) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
if (!arraybuffer) return
|
||||
|
||||
const hash = await getHash(arraybuffer)
|
||||
|
||||
const hash = await getHash(arrayBuffer)
|
||||
if (!hash) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
fileHashes[fileName] = hash
|
||||
fileHashes[file.name] = hash
|
||||
}
|
||||
|
||||
// check if the current user is the last signer
|
||||
const lastSignerIndex = meta.signers.length - 1
|
||||
const signerIndex = meta.signers.indexOf(usersPubkey)
|
||||
const isLastSigner = signerIndex === lastSignerIndex
|
||||
const zip = new JSZip()
|
||||
|
||||
// if current user is the last signer, then send DMs to all viewers
|
||||
if (isLastSigner) {
|
||||
for (const viewer of meta.viewers) {
|
||||
await signAndSendToNext(zip, meta, hashes, viewer, fileHashes, false)
|
||||
}
|
||||
} else {
|
||||
const nextSigner = meta.signers[signerIndex + 1]
|
||||
// zipping files
|
||||
selectedFiles.forEach((file) => {
|
||||
zip.file(`files/${file.name}`, file)
|
||||
})
|
||||
|
||||
await signAndSendToNext(zip, meta, hashes, nextSigner, fileHashes, true)
|
||||
}
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
const signAndSendToNext = async (
|
||||
zip: JSZip,
|
||||
meta: any,
|
||||
hashes: any,
|
||||
receiver: string,
|
||||
fileHashes: {
|
||||
[key: string]: string
|
||||
},
|
||||
isNextSigner: boolean
|
||||
) => {
|
||||
setLoadingSpinnerDesc('Signing nostr event for meta file')
|
||||
const signers = users.filter((user) => user.role === UserRole.signer)
|
||||
const viewers = users.filter((user) => user.role === UserRole.viewer)
|
||||
|
||||
setLoadingSpinnerDesc('Signing nostr event')
|
||||
const signedEvent = await signEventForMetaFile(
|
||||
receiver,
|
||||
fileHashes,
|
||||
nostrController,
|
||||
setIsLoading
|
||||
)
|
||||
|
||||
if (!signedEvent) return
|
||||
|
||||
meta.signedEvents = {
|
||||
...meta.signedEvents,
|
||||
// create content for meta file
|
||||
const meta = {
|
||||
signers: signers.map((signer) => signer.pubkey),
|
||||
viewers: viewers.map((viewer) => viewer.pubkey),
|
||||
fileHashes,
|
||||
submittedBy: usersPubkey,
|
||||
signedEvents: {
|
||||
[signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const stringifiedMeta = JSON.stringify(meta, null, 2)
|
||||
zip.file('meta.json', stringifiedMeta)
|
||||
|
||||
const metaHash = await getHash(stringifiedMeta)
|
||||
if (!metaHash) return
|
||||
|
||||
hashes = {
|
||||
...hashes,
|
||||
const metaHashJson = {
|
||||
[usersPubkey!]: metaHash
|
||||
}
|
||||
|
||||
zip.file('hashes.json', JSON.stringify(hashes, null, 2))
|
||||
zip.file('hashes.json', JSON.stringify(metaHashJson, null, 2))
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
toast.error('An error occurred in converting meta json to string')
|
||||
return
|
||||
}
|
||||
|
||||
const arrayBuffer = await zip
|
||||
setLoadingSpinnerDesc('Generating zip file')
|
||||
|
||||
const arraybuffer = await zip
|
||||
.generateAsync({
|
||||
type: 'arraybuffer',
|
||||
compression: 'DEFLATE',
|
||||
@ -201,13 +276,13 @@ export const SignDocument = () => {
|
||||
return null
|
||||
})
|
||||
|
||||
if (!arrayBuffer) return
|
||||
if (!arraybuffer) return
|
||||
|
||||
const encryptionKey = await generateEncryptionKey()
|
||||
|
||||
setLoadingSpinnerDesc('Encrypting zip file')
|
||||
const encryptedArrayBuffer = await encryptArrayBuffer(
|
||||
arrayBuffer,
|
||||
arraybuffer,
|
||||
encryptionKey
|
||||
)
|
||||
|
||||
@ -228,17 +303,34 @@ export const SignDocument = () => {
|
||||
|
||||
if (!fileUrl) return
|
||||
|
||||
setLoadingSpinnerDesc(
|
||||
`Sending DM to next ${isNextSigner ? 'signer' : 'viewer'}`
|
||||
)
|
||||
setLoadingSpinnerDesc('Sending DM to signers/viewers')
|
||||
|
||||
// send DM to first signer if exists
|
||||
if (signers.length > 0) {
|
||||
await sendDM(
|
||||
fileUrl,
|
||||
encryptionKey,
|
||||
receiver,
|
||||
signers[0].pubkey,
|
||||
nostrController,
|
||||
isNextSigner,
|
||||
true,
|
||||
setAuthUrl
|
||||
)
|
||||
} else {
|
||||
// send DM to all viewers if no signer
|
||||
for (const viewer of viewers) {
|
||||
// todo: execute in parallel
|
||||
await sendDM(
|
||||
fileUrl,
|
||||
encryptionKey,
|
||||
viewer.pubkey,
|
||||
nostrController,
|
||||
false,
|
||||
setAuthUrl
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
if (authUrl) {
|
||||
@ -257,37 +349,193 @@ export const SignDocument = () => {
|
||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||
<Box className={styles.container}>
|
||||
<Typography component='label' variant='h6'>
|
||||
Select decrypted zip file
|
||||
Select files
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
className={styles.inputBlock}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
>
|
||||
{isDraggingOver && (
|
||||
<Box className={styles.fileDragOver}>
|
||||
<Typography variant='body1'>Drop file here</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<MuiFileInput
|
||||
placeholder='Drop file here, or click to select'
|
||||
value={selectedFile}
|
||||
onChange={(value) => setSelectedFile(value)}
|
||||
InputProps={{
|
||||
inputProps: {
|
||||
accept: '.zip'
|
||||
}
|
||||
}}
|
||||
multiple
|
||||
placeholder='Choose Files'
|
||||
value={selectedFiles}
|
||||
onChange={(value) => handleSelectFiles(value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<ul>
|
||||
{selectedFiles.map((file, index) => (
|
||||
<li key={index}>
|
||||
<Typography component='label'>{file.name}</Typography>
|
||||
<IconButton onClick={() => handleRemoveFile(file)}>
|
||||
<Clear style={{ color: 'red' }} />{' '}
|
||||
</IconButton>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{displayUserInput && (
|
||||
<>
|
||||
<Typography component='label' variant='h6'>
|
||||
Select signers and viewers
|
||||
</Typography>
|
||||
<Box className={styles.inputBlock}>
|
||||
<TextField
|
||||
label='nip05 / npub'
|
||||
value={userInput}
|
||||
onChange={(e) => setUserInput(e.target.value)}
|
||||
helperText={error}
|
||||
error={!!error}
|
||||
/>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id='select-role-label'>Role</InputLabel>
|
||||
<Select
|
||||
labelId='select-role-label'
|
||||
id='demo-simple-select'
|
||||
value={userRole}
|
||||
label='Role'
|
||||
onChange={(e) => setUserRole(e.target.value as UserRole)}
|
||||
>
|
||||
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
|
||||
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button
|
||||
disabled={!userInput}
|
||||
onClick={handleAddUser}
|
||||
variant='contained'
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<DisplayUser
|
||||
users={users}
|
||||
handleUserRoleChange={handleUserRoleChange}
|
||||
handleRemoveUser={handleRemoveUser}
|
||||
/>
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button onClick={handleSign} variant='contained'>
|
||||
Sign
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
type DisplayUsersProps = {
|
||||
users: User[]
|
||||
handleUserRoleChange: (role: UserRole, index: number) => void
|
||||
handleRemoveUser: (pubkey: string) => void
|
||||
}
|
||||
|
||||
const DisplayUser = ({
|
||||
users,
|
||||
handleUserRoleChange,
|
||||
handleRemoveUser
|
||||
}: DisplayUsersProps) => {
|
||||
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
||||
{}
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
users.forEach((user) => {
|
||||
if (!(user.pubkey in metadata)) {
|
||||
const metadataController = new MetadataController()
|
||||
|
||||
metadataController
|
||||
.findMetadata(user.pubkey)
|
||||
.then((metadataEvent) => {
|
||||
const metadataContent =
|
||||
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||
if (metadataContent)
|
||||
setMetadata((prev) => ({
|
||||
...prev,
|
||||
[user.pubkey]: metadataContent
|
||||
}))
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`error occurred in finding metadata for: ${user.pubkey}`,
|
||||
err
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
}, [users])
|
||||
|
||||
const imageLoadError = (event: any) => {
|
||||
event.target.src = placeholderAvatar
|
||||
}
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell className={styles.tableCell}>User</TableCell>
|
||||
<TableCell className={styles.tableCell}>Role</TableCell>
|
||||
<TableCell>Action</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{users.map((user, index) => {
|
||||
const userMeta = metadata[user.pubkey]
|
||||
const npub = hexToNpub(user.pubkey)
|
||||
const roboUrl = `https://robohash.org/${npub}.png?set=set3`
|
||||
return (
|
||||
<TableRow key={index}>
|
||||
<TableCell className={styles.tableCell}>
|
||||
<Box className={styles.user}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
src={userMeta?.picture || roboUrl}
|
||||
alt='Profile Image'
|
||||
className='profile-image'
|
||||
style={{
|
||||
borderWidth: '3px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: `#${user.pubkey.substring(0, 6)}`
|
||||
}}
|
||||
/>
|
||||
<Link to={getProfileRoute(user.pubkey)}>
|
||||
<Typography component='label' className={styles.name}>
|
||||
{userMeta?.display_name ||
|
||||
userMeta?.name ||
|
||||
shorten(npub)}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell className={styles.tableCell}>
|
||||
<Select
|
||||
fullWidth
|
||||
value={user.role}
|
||||
onChange={(e) =>
|
||||
handleUserRoleChange(e.target.value as UserRole, index)
|
||||
}
|
||||
>
|
||||
<MenuItem value={UserRole.signer}>
|
||||
{UserRole.signer}
|
||||
</MenuItem>
|
||||
<MenuItem value={UserRole.viewer}>
|
||||
{UserRole.viewer}
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Tooltip title='Remove User' arrow>
|
||||
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
||||
<Clear style={{ color: 'red' }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,22 +6,28 @@
|
||||
color: $text-color;
|
||||
|
||||
.inputBlock {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.fileDragOver {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
border-bottom: 0.5px solid;
|
||||
}
|
||||
|
||||
.tableCell {
|
||||
border-right: 1px solid rgba(224, 224, 224, 1);
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.name {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
795
src/pages/verify/index.tsx
Normal file
795
src/pages/verify/index.tsx
Normal file
@ -0,0 +1,795 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
List,
|
||||
ListItem,
|
||||
ListSubheader,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme
|
||||
} from '@mui/material'
|
||||
import axios from 'axios'
|
||||
import saveAs from 'file-saver'
|
||||
import JSZip from 'jszip'
|
||||
import _ from 'lodash'
|
||||
import { MuiFileInput } from 'mui-file-input'
|
||||
import { EventTemplate } from 'nostr-tools'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { Link, useSearchParams } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import { MetadataController, NostrController } from '../../controllers'
|
||||
import { getProfileRoute } from '../../routes'
|
||||
import { State } from '../../store/rootReducer'
|
||||
import { Meta, ProfileMetadata, User, UserRole } from '../../types'
|
||||
import {
|
||||
decryptArrayBuffer,
|
||||
encryptArrayBuffer,
|
||||
generateEncryptionKey,
|
||||
getHash,
|
||||
hexToNpub,
|
||||
parseJson,
|
||||
readContentOfZipEntry,
|
||||
sendDM,
|
||||
shorten,
|
||||
signEventForMetaFile,
|
||||
uploadToFileStorage
|
||||
} from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
|
||||
enum SignedStatus {
|
||||
Fully_Signed,
|
||||
User_Is_Next_Signer,
|
||||
User_Is_Not_Next_Signer
|
||||
}
|
||||
|
||||
export const VerifyPage = () => {
|
||||
const [searchParams] = useSearchParams()
|
||||
|
||||
const [displayInput, setDisplayInput] = useState(false)
|
||||
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||
const [encryptionKey, setEncryptionKey] = useState('')
|
||||
|
||||
const [zip, setZip] = useState<JSZip>()
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||
const [isDraggingOver, setIsDraggingOver] = useState(false)
|
||||
|
||||
const [meta, setMeta] = useState<Meta | null>(null)
|
||||
const [signedStatus, setSignedStatus] = useState<SignedStatus>()
|
||||
|
||||
const [nextSinger, setNextSinger] = useState<string>()
|
||||
|
||||
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
||||
|
||||
const [authUrl, setAuthUrl] = useState<string>()
|
||||
const nostrController = NostrController.getInstance()
|
||||
|
||||
useEffect(() => {
|
||||
if (meta) {
|
||||
setDisplayInput(false)
|
||||
|
||||
// get list of users who have signed
|
||||
const signedBy = Object.keys(meta.signedEvents)
|
||||
|
||||
if (meta.signers.length > 0) {
|
||||
// check if all signers have signed then its fully signed
|
||||
if (meta.signers.every((signer) => signedBy.includes(signer))) {
|
||||
setSignedStatus(SignedStatus.Fully_Signed)
|
||||
} else {
|
||||
for (const signer of meta.signers) {
|
||||
if (!signedBy.includes(signer)) {
|
||||
setNextSinger(signer)
|
||||
|
||||
if (signer === usersPubkey) {
|
||||
// logged in user is the next signer
|
||||
setSignedStatus(SignedStatus.User_Is_Next_Signer)
|
||||
} else {
|
||||
setSignedStatus(SignedStatus.User_Is_Not_Next_Signer)
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// there's no signer just viewers. So its fully signed
|
||||
setSignedStatus(SignedStatus.Fully_Signed)
|
||||
}
|
||||
}
|
||||
}, [meta, usersPubkey])
|
||||
|
||||
useEffect(() => {
|
||||
const fileUrl = searchParams.get('file')
|
||||
const key = searchParams.get('key')
|
||||
|
||||
if (fileUrl && key) {
|
||||
setIsLoading(true)
|
||||
setLoadingSpinnerDesc('Fetching file from file server')
|
||||
|
||||
axios
|
||||
.get(fileUrl, {
|
||||
responseType: 'arraybuffer'
|
||||
})
|
||||
.then((res) => {
|
||||
const fileName = fileUrl.split('/').pop()
|
||||
const file = new File([res.data], fileName!)
|
||||
|
||||
decrypt(file, key).then((arrayBuffer) => {
|
||||
if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(`error occurred in getting file from ${fileUrl}`, err)
|
||||
toast.error(
|
||||
err.message || `error occurred in getting file from ${fileUrl}`
|
||||
)
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
})
|
||||
} else {
|
||||
setIsLoading(false)
|
||||
setDisplayInput(true)
|
||||
}
|
||||
}, [searchParams])
|
||||
|
||||
const decrypt = async (file: File, key: string) => {
|
||||
setLoadingSpinnerDesc('Decrypting file')
|
||||
|
||||
const encryptedArrayBuffer = await file.arrayBuffer()
|
||||
|
||||
const arrayBuffer = await decryptArrayBuffer(encryptedArrayBuffer, key)
|
||||
.catch((err) => {
|
||||
console.log('err in decryption:>> ', err)
|
||||
toast.error(err.message || 'An error occurred in decrypting file.')
|
||||
return null
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
})
|
||||
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
|
||||
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
|
||||
|
||||
setLoadingSpinnerDesc('Parsing zip file')
|
||||
|
||||
const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
|
||||
console.log('err in loading zip file :>> ', err)
|
||||
toast.error(err.message || 'An error occurred in loading zip file.')
|
||||
return null
|
||||
})
|
||||
|
||||
if (!zip) return
|
||||
|
||||
setZip(zip)
|
||||
|
||||
setLoadingSpinnerDesc('Parsing meta.json')
|
||||
|
||||
const metaFileContent = await readContentOfZipEntry(
|
||||
zip,
|
||||
'meta.json',
|
||||
'string'
|
||||
)
|
||||
|
||||
if (!metaFileContent) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const parsedMetaJson = await parseJson<Meta>(metaFileContent).catch(
|
||||
(err) => {
|
||||
console.log('err in parsing the content of meta.json :>> ', err)
|
||||
toast.error(
|
||||
err.message || 'error occurred in parsing the content of meta.json'
|
||||
)
|
||||
setIsLoading(false)
|
||||
return null
|
||||
}
|
||||
)
|
||||
|
||||
setMeta(parsedMetaJson)
|
||||
}
|
||||
|
||||
const handleDecrypt = async () => {
|
||||
if (!selectedFile || !encryptionKey) return
|
||||
|
||||
setIsLoading(true)
|
||||
const arrayBuffer = await decrypt(selectedFile, encryptionKey)
|
||||
|
||||
if (!arrayBuffer) return
|
||||
|
||||
handleDecryptedArrayBuffer(arrayBuffer)
|
||||
}
|
||||
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault()
|
||||
setIsDraggingOver(false)
|
||||
const file = event.dataTransfer.files[0]
|
||||
if (file.type === 'application/zip') setSelectedFile(file)
|
||||
}
|
||||
|
||||
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault()
|
||||
setIsDraggingOver(true)
|
||||
}
|
||||
|
||||
const handleSign = async () => {
|
||||
if (!zip || !meta) return
|
||||
|
||||
setIsLoading(true)
|
||||
setLoadingSpinnerDesc('parsing hashes.json file')
|
||||
|
||||
const hashesFileContent = await readContentOfZipEntry(
|
||||
zip,
|
||||
'hashes.json',
|
||||
'string'
|
||||
)
|
||||
|
||||
if (!hashesFileContent) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
let hashes = await parseJson(hashesFileContent).catch((err) => {
|
||||
console.log('err in parsing the content of hashes.json :>> ', err)
|
||||
toast.error(
|
||||
err.message || 'error occurred in parsing the content of hashes.json'
|
||||
)
|
||||
setIsLoading(false)
|
||||
return null
|
||||
})
|
||||
|
||||
if (!hashes) return
|
||||
|
||||
setLoadingSpinnerDesc('Generating hashes for files')
|
||||
|
||||
const fileHashes: { [key: string]: string } = {}
|
||||
const fileNames = Object.keys(meta.fileHashes)
|
||||
|
||||
// generate hashes for all entries in files folder of zipArchive
|
||||
// these hashes can be used to verify the originality of files
|
||||
for (const fileName of fileNames) {
|
||||
const filePath = `files/${fileName}`
|
||||
const arrayBuffer = await readContentOfZipEntry(
|
||||
zip,
|
||||
filePath,
|
||||
'arraybuffer'
|
||||
)
|
||||
|
||||
if (!arrayBuffer) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const hash = await getHash(arrayBuffer)
|
||||
if (!hash) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
fileHashes[fileName] = hash
|
||||
}
|
||||
|
||||
setLoadingSpinnerDesc('Signing nostr event')
|
||||
const signedEvent = await signEventForMetaFile(
|
||||
fileHashes,
|
||||
nostrController,
|
||||
setIsLoading
|
||||
)
|
||||
|
||||
if (!signedEvent) return
|
||||
|
||||
const metaCopy = _.cloneDeep(meta)
|
||||
|
||||
metaCopy.signedEvents = {
|
||||
...metaCopy.signedEvents,
|
||||
[signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
|
||||
}
|
||||
|
||||
const stringifiedMeta = JSON.stringify(metaCopy, null, 2)
|
||||
zip.file('meta.json', stringifiedMeta)
|
||||
|
||||
const metaHash = await getHash(stringifiedMeta)
|
||||
if (!metaHash) return
|
||||
|
||||
hashes = {
|
||||
...hashes,
|
||||
[usersPubkey!]: metaHash
|
||||
}
|
||||
|
||||
zip.file('hashes.json', JSON.stringify(hashes, null, 2))
|
||||
|
||||
const arrayBuffer = await zip
|
||||
.generateAsync({
|
||||
type: 'arraybuffer',
|
||||
compression: 'DEFLATE',
|
||||
compressionOptions: {
|
||||
level: 6
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err in zip:>> ', err)
|
||||
setIsLoading(false)
|
||||
toast.error(err.message || 'Error occurred in generating zip file')
|
||||
return null
|
||||
})
|
||||
|
||||
if (!arrayBuffer) return
|
||||
|
||||
const encryptionKey = await generateEncryptionKey()
|
||||
|
||||
setLoadingSpinnerDesc('Encrypting zip file')
|
||||
const encryptedArrayBuffer = await encryptArrayBuffer(
|
||||
arrayBuffer,
|
||||
encryptionKey
|
||||
)
|
||||
|
||||
const blob = new Blob([encryptedArrayBuffer])
|
||||
|
||||
setLoadingSpinnerDesc('Uploading zip file to file storage.')
|
||||
const fileUrl = await uploadToFileStorage(blob, nostrController)
|
||||
.then((url) => {
|
||||
toast.success('zip file uploaded to file storage')
|
||||
return url
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err in upload:>> ', err)
|
||||
setIsLoading(false)
|
||||
toast.error(err.message || 'Error occurred in uploading zip file')
|
||||
return null
|
||||
})
|
||||
|
||||
if (!fileUrl) return
|
||||
|
||||
// check if the current user is the last signer
|
||||
const lastSignerIndex = meta.signers.length - 1
|
||||
const signerIndex = meta.signers.indexOf(usersPubkey!)
|
||||
const isLastSigner = signerIndex === lastSignerIndex
|
||||
|
||||
// if current user is the last signer, then send DMs to all signers and viewers
|
||||
if (isLastSigner) {
|
||||
const userSet = new Set<string>()
|
||||
|
||||
userSet.add(meta.submittedBy)
|
||||
|
||||
meta.signers.forEach((signer) => {
|
||||
userSet.add(signer)
|
||||
})
|
||||
|
||||
meta.viewers.forEach((viewer) => {
|
||||
userSet.add(viewer)
|
||||
})
|
||||
|
||||
const users = Array.from(userSet)
|
||||
|
||||
for (const user of users) {
|
||||
// todo: execute in parallel
|
||||
await sendDM(
|
||||
fileUrl,
|
||||
encryptionKey,
|
||||
user,
|
||||
nostrController,
|
||||
false,
|
||||
setAuthUrl
|
||||
)
|
||||
}
|
||||
} else {
|
||||
const nextSigner = meta.signers[signerIndex + 1]
|
||||
await sendDM(
|
||||
fileUrl,
|
||||
encryptionKey,
|
||||
nextSigner,
|
||||
nostrController,
|
||||
false,
|
||||
setAuthUrl
|
||||
)
|
||||
}
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
const handleExport = async () => {
|
||||
if (!meta || !zip || !usersPubkey) return
|
||||
|
||||
if (
|
||||
!meta.signers.includes(usersPubkey) &&
|
||||
!meta.viewers.includes(usersPubkey) &&
|
||||
meta.submittedBy !== usersPubkey
|
||||
)
|
||||
return
|
||||
|
||||
setIsLoading(true)
|
||||
setLoadingSpinnerDesc('Signing nostr event')
|
||||
const event: EventTemplate = {
|
||||
kind: 1,
|
||||
content: '',
|
||||
created_at: Math.floor(Date.now() / 1000), // Current timestamp
|
||||
tags: []
|
||||
}
|
||||
|
||||
// Sign the event
|
||||
const signedEvent = await nostrController.signEvent(event).catch((err) => {
|
||||
console.error(err)
|
||||
toast.error(err.message || 'Error occurred in signing nostr event')
|
||||
setIsLoading(false) // Set loading state to false
|
||||
return null
|
||||
})
|
||||
|
||||
if (!signedEvent) return
|
||||
|
||||
const exportSignature = JSON.stringify(signedEvent, null, 2)
|
||||
|
||||
const stringifiedMeta = JSON.stringify(
|
||||
{
|
||||
...meta,
|
||||
exportSignature
|
||||
},
|
||||
null,
|
||||
2
|
||||
)
|
||||
zip.file('meta.json', stringifiedMeta)
|
||||
|
||||
const arrayBuffer = await zip
|
||||
.generateAsync({
|
||||
type: 'arraybuffer',
|
||||
compression: 'DEFLATE',
|
||||
compressionOptions: {
|
||||
level: 6
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err in zip:>> ', err)
|
||||
setIsLoading(false)
|
||||
toast.error(err.message || 'Error occurred in generating zip file')
|
||||
return null
|
||||
})
|
||||
|
||||
if (!arrayBuffer) return
|
||||
|
||||
const blob = new Blob([arrayBuffer])
|
||||
saveAs(blob, 'exported.zip')
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
if (authUrl) {
|
||||
return (
|
||||
<iframe
|
||||
title='Nsecbunker auth'
|
||||
src={authUrl}
|
||||
width='100%'
|
||||
height='500px'
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||
<Box className={styles.container}>
|
||||
{displayInput && (
|
||||
<>
|
||||
<Typography component='label' variant='h6'>
|
||||
Select sigit file
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
className={styles.inputBlock}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
>
|
||||
{isDraggingOver && (
|
||||
<Box className={styles.fileDragOver}>
|
||||
<Typography variant='body1'>Drop file here</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<MuiFileInput
|
||||
placeholder='Drop file here, or click to select'
|
||||
value={selectedFile}
|
||||
onChange={(value) => setSelectedFile(value)}
|
||||
InputProps={{
|
||||
inputProps: {
|
||||
accept: '.zip'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{selectedFile && (
|
||||
<TextField
|
||||
label='Encryption Key'
|
||||
variant='outlined'
|
||||
value={encryptionKey}
|
||||
onChange={(e) => setEncryptionKey(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{selectedFile && encryptionKey && (
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button onClick={handleDecrypt} variant='contained'>
|
||||
Decrypt
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{meta && signedStatus === SignedStatus.Fully_Signed && (
|
||||
<>
|
||||
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button onClick={handleExport} variant='contained'>
|
||||
Export
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{meta && signedStatus === SignedStatus.User_Is_Not_Next_Signer && (
|
||||
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
||||
)}
|
||||
|
||||
{meta && signedStatus === SignedStatus.User_Is_Next_Signer && (
|
||||
<>
|
||||
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button onClick={handleSign} variant='contained'>
|
||||
Sign
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
type DisplayMetaProps = {
|
||||
meta: Meta
|
||||
nextSigner?: string
|
||||
}
|
||||
|
||||
const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
|
||||
const theme = useTheme()
|
||||
|
||||
const textColor = theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
)
|
||||
|
||||
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
||||
{}
|
||||
)
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
meta.signers.forEach((signer) => {
|
||||
setUsers((prev) => {
|
||||
if (prev.findIndex((user) => user.pubkey === signer) !== -1) return prev
|
||||
|
||||
return [
|
||||
...prev,
|
||||
{
|
||||
pubkey: signer,
|
||||
role: UserRole.signer
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
|
||||
meta.viewers.forEach((viewer) => {
|
||||
setUsers((prev) => {
|
||||
if (prev.findIndex((user) => user.pubkey === viewer) !== -1) return prev
|
||||
|
||||
return [
|
||||
...prev,
|
||||
{
|
||||
pubkey: viewer,
|
||||
role: UserRole.viewer
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
}, [meta])
|
||||
|
||||
useEffect(() => {
|
||||
const metadataController = new MetadataController()
|
||||
|
||||
metadataController
|
||||
.findMetadata(meta.submittedBy)
|
||||
.then((metadataEvent) => {
|
||||
const metadataContent =
|
||||
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||
if (metadataContent)
|
||||
setMetadata((prev) => ({
|
||||
...prev,
|
||||
[meta.submittedBy]: metadataContent
|
||||
}))
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`error occurred in finding metadata for: ${meta.submittedBy}`,
|
||||
err
|
||||
)
|
||||
})
|
||||
|
||||
users.forEach((user) => {
|
||||
if (!(user.pubkey in metadata)) {
|
||||
metadataController
|
||||
.findMetadata(user.pubkey)
|
||||
.then((metadataEvent) => {
|
||||
const metadataContent =
|
||||
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||
if (metadataContent)
|
||||
setMetadata((prev) => ({
|
||||
...prev,
|
||||
[user.pubkey]: metadataContent
|
||||
}))
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`error occurred in finding metadata for: ${user.pubkey}`,
|
||||
err
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
}, [users, meta.submittedBy])
|
||||
|
||||
const imageLoadError = (event: any) => {
|
||||
event.target.src = placeholderAvatar
|
||||
}
|
||||
|
||||
const getRoboImageUrl = (pubkey: string) => {
|
||||
const npub = hexToNpub(pubkey)
|
||||
return `https://robohash.org/${npub}.png?set=set3`
|
||||
}
|
||||
|
||||
return (
|
||||
<List
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
marginTop: 2
|
||||
}}
|
||||
subheader={
|
||||
<ListSubheader
|
||||
sx={{
|
||||
borderBottom: '0.5px solid',
|
||||
paddingBottom: 1,
|
||||
paddingTop: 1,
|
||||
fontSize: '1.5rem'
|
||||
}}
|
||||
className={styles.subHeader}
|
||||
>
|
||||
Meta Info
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem
|
||||
sx={{
|
||||
marginTop: 1,
|
||||
gap: '15px'
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' sx={{ color: textColor }}>
|
||||
Submitted By
|
||||
</Typography>
|
||||
<Box className={styles.user}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
src={
|
||||
metadata[meta.submittedBy]?.picture ||
|
||||
getRoboImageUrl(meta.submittedBy)
|
||||
}
|
||||
alt='Profile Image'
|
||||
className='profile-image'
|
||||
style={{
|
||||
borderWidth: '3px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: `#${meta.submittedBy.substring(0, 6)}`
|
||||
}}
|
||||
/>
|
||||
<Link to={getProfileRoute(meta.submittedBy)}>
|
||||
<Typography component='label' className={styles.name}>
|
||||
{metadata[meta.submittedBy]?.display_name ||
|
||||
metadata[meta.submittedBy]?.name ||
|
||||
shorten(hexToNpub(meta.submittedBy))}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
sx={{
|
||||
marginTop: 1,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start'
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' sx={{ color: textColor }}>
|
||||
Files
|
||||
</Typography>
|
||||
<ul>
|
||||
{Object.keys(meta.fileHashes).map((file, index) => (
|
||||
<li key={index} style={{ color: textColor }}>
|
||||
{file}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ListItem>
|
||||
<ListItem sx={{ marginTop: 1 }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell className={styles.tableCell}>User</TableCell>
|
||||
<TableCell className={styles.tableCell}>Role</TableCell>
|
||||
<TableCell>Signed Status</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{users.map((user, index) => {
|
||||
const userMeta = metadata[user.pubkey]
|
||||
const npub = hexToNpub(user.pubkey)
|
||||
const roboUrl = `https://robohash.org/${npub}.png?set=set3`
|
||||
|
||||
let signedStatus = '-'
|
||||
|
||||
if (user.role === UserRole.signer) {
|
||||
// check if user has signed the document
|
||||
if (user.pubkey in meta.signedEvents) {
|
||||
signedStatus = 'Signed'
|
||||
}
|
||||
// check if user is the next signer
|
||||
else if (user.pubkey === nextSigner) {
|
||||
signedStatus = 'Awaiting Signature'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<TableRow key={index}>
|
||||
<TableCell className={styles.tableCell}>
|
||||
<Box className={styles.user}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
src={userMeta?.picture || roboUrl}
|
||||
alt='Profile Image'
|
||||
className='profile-image'
|
||||
style={{
|
||||
borderWidth: '3px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: `#${user.pubkey.substring(0, 6)}`
|
||||
}}
|
||||
/>
|
||||
<Link to={getProfileRoute(user.pubkey)}>
|
||||
<Typography component='label' className={styles.name}>
|
||||
{userMeta?.display_name ||
|
||||
userMeta?.name ||
|
||||
shorten(npub)}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell className={styles.tableCell}>
|
||||
{user.role}
|
||||
</TableCell>
|
||||
<TableCell>{signedStatus}</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</ListItem>
|
||||
</List>
|
||||
)
|
||||
}
|
||||
18
src/pages/verify/style.module.scss
Normal file
18
src/pages/verify/style.module.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.name {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tableCell {
|
||||
border-right: 1px solid rgba(224, 224, 224, 1);
|
||||
|
||||
.user {
|
||||
@extend .user;
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,15 @@
|
||||
import { DecryptZip } from '../pages/decrypt'
|
||||
import { HomePage } from '../pages/home'
|
||||
import { SignPage } from '../pages/sign'
|
||||
import { LandingPage } from '../pages/landing/LandingPage'
|
||||
import { Login } from '../pages/login'
|
||||
import { ProfilePage } from '../pages/profile'
|
||||
import { hexToNpub } from '../utils'
|
||||
import { SignDocument } from '../pages/sign'
|
||||
import { VerifyPage } from '../pages/verify'
|
||||
|
||||
export const appPrivateRoutes = {
|
||||
homePage: '/',
|
||||
decryptZip: '/decrypt',
|
||||
sign: '/sign'
|
||||
sign: '/sign',
|
||||
verify: '/verify'
|
||||
}
|
||||
|
||||
export const appPublicRoutes = {
|
||||
@ -45,11 +45,11 @@ export const privateRoutes = [
|
||||
element: <HomePage />
|
||||
},
|
||||
{
|
||||
path: appPrivateRoutes.decryptZip,
|
||||
element: <DecryptZip />
|
||||
path: appPrivateRoutes.sign,
|
||||
element: <SignPage />
|
||||
},
|
||||
{
|
||||
path: appPrivateRoutes.sign,
|
||||
element: <SignDocument />
|
||||
path: appPrivateRoutes.verify,
|
||||
element: <VerifyPage />
|
||||
}
|
||||
]
|
||||
|
||||
17
src/types/core.ts
Normal file
17
src/types/core.ts
Normal file
@ -0,0 +1,17 @@
|
||||
export enum UserRole {
|
||||
signer = 'Signer',
|
||||
viewer = 'Viewer'
|
||||
}
|
||||
|
||||
export interface User {
|
||||
pubkey: string
|
||||
role: UserRole
|
||||
}
|
||||
|
||||
export interface Meta {
|
||||
signers: string[]
|
||||
viewers: string[]
|
||||
fileHashes: { [key: string]: string }
|
||||
submittedBy: string
|
||||
signedEvents: { [key: string]: string }
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
export * from './core'
|
||||
export * from './nostr'
|
||||
export * from './profile'
|
||||
export * from './zip'
|
||||
|
||||
@ -75,7 +75,11 @@ export const sendDM = async (
|
||||
? 'Your signature is requested on the document below!'
|
||||
: 'You have received a signed document.'
|
||||
|
||||
const decryptionUrl = `${window.location.origin}/#${appPrivateRoutes.decryptZip}?file=${encodeURIComponent(fileUrl)}&key=${encodeURIComponent(encryptionKey)}`
|
||||
const decryptionUrl = `${window.location.origin}/#${
|
||||
appPrivateRoutes.verify
|
||||
}?file=${encodeURIComponent(fileUrl)}&key=${encodeURIComponent(
|
||||
encryptionKey
|
||||
)}`
|
||||
|
||||
const content = `${initialLine}\n\n${decryptionUrl}\n\nDirect download${fileUrl}`
|
||||
|
||||
@ -166,14 +170,12 @@ export const sendDM = async (
|
||||
|
||||
/**
|
||||
* Signs an event for a meta.json file.
|
||||
* @param receiver The recipient's public key.
|
||||
* @param fileHashes Object containing file hashes.
|
||||
* @param nostrController The NostrController instance for signing the event.
|
||||
* @param setIsLoading Function to set loading state in the component.
|
||||
* @returns A Promise resolving to the signed event, or null if signing fails.
|
||||
*/
|
||||
export const signEventForMetaFile = async (
|
||||
receiver: string,
|
||||
fileHashes: {
|
||||
[key: string]: string
|
||||
},
|
||||
@ -183,9 +185,9 @@ export const signEventForMetaFile = async (
|
||||
// Construct the event metadata for the meta file
|
||||
const event: EventTemplate = {
|
||||
kind: 1, // Event type for meta file
|
||||
tags: [['r', receiver]], // Tag with recipient's public key
|
||||
content: JSON.stringify(fileHashes), // Convert file hashes to JSON string
|
||||
created_at: Math.floor(Date.now() / 1000) // Current timestamp
|
||||
created_at: Math.floor(Date.now() / 1000), // Current timestamp
|
||||
tags: []
|
||||
}
|
||||
|
||||
// Sign the event
|
||||
|
||||
@ -65,11 +65,11 @@ export const hexStringToUint8Array = (hexString: string) => {
|
||||
* @param content The JSON content to parse.
|
||||
* @returns A Promise that resolves to the parsed JSON object.
|
||||
*/
|
||||
export const parseJson = (content: string): Promise<any> => {
|
||||
export const parseJson = <T>(content: string): Promise<T> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// Attempt to parse the JSON content
|
||||
const json = JSON.parse(content)
|
||||
const json = JSON.parse(content) as T
|
||||
// Resolve the promise with the parsed JSON object
|
||||
resolve(json)
|
||||
} catch (error) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user