In offline mode create a wrapper zip file #110

Merged
s merged 8 commits from issue-109 into staging 2024-06-13 10:01:31 +00:00
2 changed files with 437 additions and 424 deletions
Showing only changes of commit a3abf40f44 - Show all commits

View File

@ -1,67 +1,37 @@
import {
Box,
Button,
IconButton,
List,
ListItem,
ListSubheader,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Tooltip,
Typography,
useTheme
} from '@mui/material'
import { Box, Button, Typography } 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 { Event, kinds, verifyEvent } from 'nostr-tools'
import { Event, verifyEvent } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { useNavigate, useSearchParams, useLocation } from 'react-router-dom'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserComponent } from '../../components/username'
import { MetadataController, NostrController } from '../../controllers'
import CopyModal from '../../components/copyModal'
import { NostrController } from '../../controllers'
import { appPublicRoutes } from '../../routes'
import { State } from '../../store/rootReducer'
import {
CreateSignatureEventContent,
Meta,
ProfileMetadata,
SignedEvent,
SignedEventContent,
User,
UserRole
} from '../../types'
import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
import {
decryptArrayBuffer,
encryptArrayBuffer,
generateEncryptionKey,
generateKeysFile,
getHash,
hexToNpub,
parseJson,
isOnline,
npubToHex,
parseJson,
readContentOfZipEntry,
sendDM,
shorten,
signEventForMetaFile,
uploadToFileStorage,
isOnline,
generateKeysFile
uploadToFileStorage
} from '../../utils'
import { DisplayMeta } from './internal/displayMeta'
import styles from './style.module.scss'
import {
Cancel,
CheckCircle,
Download,
HourglassTop
} from '@mui/icons-material'
import CopyModal from '../../components/copyModal'
enum SignedStatus {
Fully_Signed,
User_Is_Next_Signer,
@ -967,386 +937,3 @@ export const SignPage = () => {
</>
)
}
type DisplayMetaProps = {
meta: Meta
zip: JSZip
submittedBy: string
signers: `npub1${string}`[]
viewers: `npub1${string}`[]
creatorFileHashes: { [key: string]: string }
currentFileHashes: { [key: string]: string | null }
signedBy: `npub1${string}`[]
nextSigner?: string
getPrevSignersSig: (usersNpub: string) => string | null
}
const DisplayMeta = ({
meta,
zip,
submittedBy,
signers,
viewers,
creatorFileHashes,
currentFileHashes,
signedBy,
nextSigner,
getPrevSignersSig
}: 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(() => {
signers.forEach((signer) => {
const hexKey = npubToHex(signer)
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === hexKey) !== -1) return prev
return [
...prev,
{
pubkey: hexKey!,
role: UserRole.signer
}
]
})
})
viewers.forEach((viewer) => {
const hexKey = npubToHex(viewer)
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === hexKey) !== -1) return prev
return [
...prev,
{
pubkey: hexKey!,
role: UserRole.viewer
}
]
})
})
}, [signers, viewers])
useEffect(() => {
const metadataController = new MetadataController()
const hexKeys: string[] = [
npubToHex(submittedBy)!,
...users.map((user) => user.pubkey)
]
hexKeys.forEach((key) => {
if (!(key in metadata)) {
const handleMetadataEvent = (event: Event) => {
const metadataContent =
metadataController.extractProfileMetadataContent(event)
if (metadataContent)
setMetadata((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)
})
}
})
}, [users, submittedBy])
const downloadFile = async (filename: string) => {
const arrayBuffer = await readContentOfZipEntry(
zip,
`files/${filename}`,
'arraybuffer'
)
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, filename)
}
return (
<List
sx={{
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader className={styles.subHeader}>Meta Info</ListSubheader>
}
>
<ListItem
sx={{
marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Submitted By
</Typography>
{(function () {
const profile = metadata[submittedBy]
return (
<UserComponent
pubkey={submittedBy}
name={
profile?.display_name ||
profile?.name ||
shorten(hexToNpub(submittedBy))
}
image={profile?.picture}
/>
)
})()}
</ListItem>
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Files
</Typography>
<Box className={styles.filesWrapper}>
{Object.entries(currentFileHashes).map(([filename, hash], index) => {
const isValidHash = creatorFileHashes[filename] === hash
return (
<Box key={`file-${index}`} className={styles.file}>
<Tooltip title="Download File" arrow>
<IconButton onClick={() => downloadFile(filename)}>
<Download />
</IconButton>
</Tooltip>
<Typography
component="label"
sx={{
color: textColor,
flexGrow: 1
}}
>
{filename}
</Typography>
{isValidHash && (
<Tooltip title="File integrity check passed" arrow>
<CheckCircle sx={{ color: theme.palette.success.light }} />
</Tooltip>
)}
{!isValidHash && (
<Tooltip title="File integrity check failed" arrow>
<Cancel sx={{ color: theme.palette.error.main }} />
</Tooltip>
)}
</Box>
)
})}
</Box>
</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) => (
<DisplayUser
key={user.pubkey}
meta={meta}
user={user}
metadata={metadata}
signedBy={signedBy}
nextSigner={nextSigner}
getPrevSignersSig={getPrevSignersSig}
/>
))}
</TableBody>
</Table>
</ListItem>
</List>
)
}
enum PrevSignatureValidationEnum {
Pending,
Valid,
Invalid
}
enum UserStatus {
Viewer = 'Viewer',
Awaiting = 'Awaiting Signature',
Signed = 'Signed',
Pending = 'Pending'
}
type DisplayUserProps = {
meta: Meta
user: User
metadata: { [key: string]: ProfileMetadata }
signedBy: `npub1${string}`[]
nextSigner?: string
getPrevSignersSig: (usersNpub: string) => string | null
}
const DisplayUser = ({
meta,
user,
metadata,
signedBy,
nextSigner,
getPrevSignersSig
}: DisplayUserProps) => {
const theme = useTheme()
const userMeta = metadata[user.pubkey]
const [userStatus, setUserStatus] = useState<UserStatus>(UserStatus.Pending)
const [prevSignatureStatus, setPreviousSignatureStatus] =
useState<PrevSignatureValidationEnum>(PrevSignatureValidationEnum.Pending)
useEffect(() => {
if (user.role === UserRole.viewer) {
setUserStatus(UserStatus.Viewer)
return
}
// check if user has signed the document
const usersNpub = hexToNpub(user.pubkey)
if (signedBy.includes(usersNpub)) {
setUserStatus(UserStatus.Signed)
return
}
// check if user is the next signer
if (user.pubkey === nextSigner) {
setUserStatus(UserStatus.Awaiting)
return
}
}, [user, nextSigner, signedBy])
useEffect(() => {
const validatePrevSignature = async () => {
const handleNullCase = () => {
setPreviousSignatureStatus(PrevSignatureValidationEnum.Invalid)
return
}
// get previous signers sig from the content of current signers signed event
const npub = hexToNpub(user.pubkey)
const signedEvent = await parseJson<Event>(
meta.docSignatures[npub]
).catch((err) => {
console.log(`err in parsing the singed event for ${npub}:>> `, err)
toast.error(
err.message ||
'error occurred in parsing the signed event signature event'
)
return null
})
if (!signedEvent) return handleNullCase()
// now that we have signed event of current signer, we'll extract prevSig from its content
const parsedContent = await parseJson<SignedEventContent>(
signedEvent.content
).catch((err) => {
console.log(
`an error occurred in parsing the content of signedEvent of ${npub}`,
err
)
toast.error(
err.message ||
`an error occurred in parsing the content of signedEvent of ${npub}`
)
return null
})
if (!parsedContent) return handleNullCase()
const prevSignersSignature = getPrevSignersSig(npub)
if (!prevSignersSignature) return handleNullCase()
setPreviousSignatureStatus(
parsedContent.prevSig === prevSignersSignature
? PrevSignatureValidationEnum.Valid
: PrevSignatureValidationEnum.Invalid
)
}
if (userStatus === UserStatus.Signed) {
validatePrevSignature()
}
}, [userStatus, meta.docSignatures, user.pubkey, getPrevSignersSig])
return (
<TableRow>
<TableCell className={styles.tableCell}>
<UserComponent
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/>
</TableCell>
<TableCell className={styles.tableCell}>{user.role}</TableCell>
<TableCell>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<Typography component="label">{userStatus}</Typography>
{userStatus === UserStatus.Signed && (
<>
{prevSignatureStatus === PrevSignatureValidationEnum.Valid && (
<Tooltip title="Contains valid signature of prev signer" arrow>
<CheckCircle sx={{ color: theme.palette.success.light }} />
</Tooltip>
)}
{prevSignatureStatus === PrevSignatureValidationEnum.Invalid && (
<Tooltip
title="Contains invalid signature of prev signer"
arrow
>
<Cancel sx={{ color: theme.palette.error.main }} />
</Tooltip>
)}
</>
)}
{userStatus === UserStatus.Awaiting && (
<Tooltip title="Waiting for user's sign" arrow>
<HourglassTop />
</Tooltip>
)}
</Box>
</TableCell>
</TableRow>
)
}

View File

@ -0,0 +1,426 @@
import JSZip from 'jszip'
s marked this conversation as resolved
Review

pls add more comments

pls add more comments
import {
Meta,
ProfileMetadata,
SignedEventContent,
User,
UserRole
} from '../../../types'
import {
Box,
IconButton,
List,
ListItem,
ListSubheader,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Tooltip,
Typography,
useTheme
} from '@mui/material'
import {
Download,
CheckCircle,
Cancel,
HourglassTop
} from '@mui/icons-material'
import saveAs from 'file-saver'
import { kinds, Event } from 'nostr-tools'
import { useState, useEffect } from 'react'
import { toast } from 'react-toastify'
import { UserComponent } from '../../../components/username'
import { MetadataController } from '../../../controllers'
import {
npubToHex,
readContentOfZipEntry,
shorten,
hexToNpub,
parseJson
} from '../../../utils'
import styles from '../style.module.scss'
type DisplayMetaProps = {
meta: Meta
zip: JSZip
submittedBy: string
signers: `npub1${string}`[]
viewers: `npub1${string}`[]
creatorFileHashes: { [key: string]: string }
currentFileHashes: { [key: string]: string | null }
signedBy: `npub1${string}`[]
nextSigner?: string
getPrevSignersSig: (usersNpub: string) => string | null
}
export const DisplayMeta = ({
meta,
zip,
submittedBy,
signers,
viewers,
creatorFileHashes,
currentFileHashes,
signedBy,
nextSigner,
getPrevSignersSig
}: 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(() => {
signers.forEach((signer) => {
const hexKey = npubToHex(signer)
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === hexKey) !== -1) return prev
return [
...prev,
{
pubkey: hexKey!,
role: UserRole.signer
}
]
})
})
viewers.forEach((viewer) => {
const hexKey = npubToHex(viewer)
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === hexKey) !== -1) return prev
return [
...prev,
{
pubkey: hexKey!,
role: UserRole.viewer
}
]
})
})
}, [signers, viewers])
useEffect(() => {
const metadataController = new MetadataController()
const hexKeys: string[] = [
npubToHex(submittedBy)!,
...users.map((user) => user.pubkey)
]
hexKeys.forEach((key) => {
if (!(key in metadata)) {
const handleMetadataEvent = (event: Event) => {
const metadataContent =
metadataController.extractProfileMetadataContent(event)
if (metadataContent)
setMetadata((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)
})
}
})
}, [users, submittedBy])
const downloadFile = async (filename: string) => {
const arrayBuffer = await readContentOfZipEntry(
zip,
`files/${filename}`,
'arraybuffer'
)
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, filename)
}
return (
<List
sx={{
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader className={styles.subHeader}>Meta Info</ListSubheader>
}
>
<ListItem
sx={{
marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Submitted By
</Typography>
{(function () {
const profile = metadata[submittedBy]
return (
<UserComponent
pubkey={submittedBy}
name={
profile?.display_name ||
profile?.name ||
shorten(hexToNpub(submittedBy))
}
image={profile?.picture}
/>
)
})()}
</ListItem>
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Files
</Typography>
<Box className={styles.filesWrapper}>
{Object.entries(currentFileHashes).map(([filename, hash], index) => {
const isValidHash = creatorFileHashes[filename] === hash
return (
<Box key={`file-${index}`} className={styles.file}>
<Tooltip title="Download File" arrow>
<IconButton onClick={() => downloadFile(filename)}>
<Download />
</IconButton>
</Tooltip>
<Typography
component="label"
sx={{
color: textColor,
flexGrow: 1
}}
>
{filename}
</Typography>
{isValidHash && (
<Tooltip title="File integrity check passed" arrow>
<CheckCircle sx={{ color: theme.palette.success.light }} />
</Tooltip>
)}
{!isValidHash && (
<Tooltip title="File integrity check failed" arrow>
<Cancel sx={{ color: theme.palette.error.main }} />
</Tooltip>
)}
</Box>
)
})}
</Box>
</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) => (
<DisplayUser
key={user.pubkey}
meta={meta}
user={user}
metadata={metadata}
signedBy={signedBy}
nextSigner={nextSigner}
getPrevSignersSig={getPrevSignersSig}
/>
))}
</TableBody>
</Table>
</ListItem>
</List>
)
}
enum PrevSignatureValidationEnum {
Pending,
Valid,
Invalid
}
enum UserStatus {
Viewer = 'Viewer',
Awaiting = 'Awaiting Signature',
Signed = 'Signed',
Pending = 'Pending'
}
type DisplayUserProps = {
meta: Meta
user: User
metadata: { [key: string]: ProfileMetadata }
signedBy: `npub1${string}`[]
nextSigner?: string
getPrevSignersSig: (usersNpub: string) => string | null
}
const DisplayUser = ({
meta,
user,
metadata,
signedBy,
nextSigner,
getPrevSignersSig
}: DisplayUserProps) => {
const theme = useTheme()
const userMeta = metadata[user.pubkey]
const [userStatus, setUserStatus] = useState<UserStatus>(UserStatus.Pending)
const [prevSignatureStatus, setPreviousSignatureStatus] =
useState<PrevSignatureValidationEnum>(PrevSignatureValidationEnum.Pending)
useEffect(() => {
if (user.role === UserRole.viewer) {
setUserStatus(UserStatus.Viewer)
return
}
// check if user has signed the document
const usersNpub = hexToNpub(user.pubkey)
if (signedBy.includes(usersNpub)) {
setUserStatus(UserStatus.Signed)
return
}
// check if user is the next signer
if (user.pubkey === nextSigner) {
setUserStatus(UserStatus.Awaiting)
return
}
}, [user, nextSigner, signedBy])
useEffect(() => {
const validatePrevSignature = async () => {
const handleNullCase = () => {
setPreviousSignatureStatus(PrevSignatureValidationEnum.Invalid)
return
}
// get previous signers sig from the content of current signers signed event
const npub = hexToNpub(user.pubkey)
const signedEvent = await parseJson<Event>(
meta.docSignatures[npub]
).catch((err) => {
console.log(`err in parsing the singed event for ${npub}:>> `, err)
toast.error(
err.message ||
'error occurred in parsing the signed event signature event'
)
return null
})
if (!signedEvent) return handleNullCase()
// now that we have signed event of current signer, we'll extract prevSig from its content
const parsedContent = await parseJson<SignedEventContent>(
signedEvent.content
).catch((err) => {
console.log(
`an error occurred in parsing the content of signedEvent of ${npub}`,
err
)
toast.error(
err.message ||
`an error occurred in parsing the content of signedEvent of ${npub}`
)
return null
})
if (!parsedContent) return handleNullCase()
const prevSignersSignature = getPrevSignersSig(npub)
if (!prevSignersSignature) return handleNullCase()
setPreviousSignatureStatus(
parsedContent.prevSig === prevSignersSignature
? PrevSignatureValidationEnum.Valid
: PrevSignatureValidationEnum.Invalid
)
}
if (userStatus === UserStatus.Signed) {
validatePrevSignature()
}
}, [userStatus, meta.docSignatures, user.pubkey, getPrevSignersSig])
return (
<TableRow>
<TableCell className={styles.tableCell}>
<UserComponent
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/>
</TableCell>
<TableCell className={styles.tableCell}>{user.role}</TableCell>
<TableCell>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<Typography component="label">{userStatus}</Typography>
{userStatus === UserStatus.Signed && (
<>
{prevSignatureStatus === PrevSignatureValidationEnum.Valid && (
<Tooltip title="Contains valid signature of prev signer" arrow>
<CheckCircle sx={{ color: theme.palette.success.light }} />
</Tooltip>
)}
{prevSignatureStatus === PrevSignatureValidationEnum.Invalid && (
<Tooltip
title="Contains invalid signature of prev signer"
arrow
>
<Cancel sx={{ color: theme.palette.error.main }} />
</Tooltip>
)}
</>
)}
{userStatus === UserStatus.Awaiting && (
<Tooltip title="Waiting for user's sign" arrow>
<HourglassTop />
</Tooltip>
)}
</Box>
</TableCell>
</TableRow>
)
}