sigit.io/src/pages/sign/index.tsx

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, verifyEvent } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { NostrController } from '../../controllers'
import { appPublicRoutes } from '../../routes'
import { State } from '../../store/rootReducer'
import {
  CreateSignatureEventContent,
  Meta,
  Sigit,
  SignedEvent
} from '../../types'
import {
  decryptArrayBuffer,
  encryptArrayBuffer,
  extractEncryptionKey,
  generateEncryptionKey,
  generateKeysFile,
  getHash,
  hexToNpub,
  isOnline,
  now,
  npubToHex,
  parseJson,
  readContentOfZipEntry,
  sendNotification,
  signEventForMetaFile,
  updateUsersAppData
} from '../../utils'
import { DisplayMeta } from './internal/displayMeta'
import styles from './style.module.scss'
enum SignedStatus {
  Fully_Signed,
  User_Is_Next_Signer,
  User_Is_Not_Next_Signer
}

export const SignPage = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const {
    sigit,
    arrayBuffer: decryptedArrayBuffer,
    uploadedZip
  } = location.state || {}

  const [displayInput, setDisplayInput] = useState(false)

  const [selectedFile, setSelectedFile] = useState<File | null>(null)

  const [zip, setZip] = useState<JSZip>()

  const [isLoading, setIsLoading] = useState(true)
  const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')

  const [fileUrl, setFileUrl] = useState<string>()
  const [meta, setMeta] = useState<Meta | null>(null)
  const [signedStatus, setSignedStatus] = useState<SignedStatus>()

  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<{
    [key: string]: string | null
  }>({})

  const [signedBy, setSignedBy] = useState<`npub1${string}`[]>([])

  const [nextSinger, setNextSinger] = useState<string>()

  // This state variable indicates whether the logged-in user is a signer, a creator, or neither.
  const [isSignerOrCreator, setIsSignerOrCreator] = useState(false)

  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)

  const [authUrl, setAuthUrl] = useState<string>()
  const nostrController = NostrController.getInstance()

  useEffect(() => {
    if (zip) {
      const generateCurrentFileHashes = async () => {
        const fileHashes: { [key: string]: string | null } = {}
        const fileNames = Object.values(zip.files)
          .filter((entry) => entry.name.startsWith('files/') && !entry.dir)
          .map((entry) => entry.name)

        // 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 arrayBuffer = await readContentOfZipEntry(
            zip,
            fileName,
            'arraybuffer'
          )

          if (arrayBuffer) {
            const hash = await getHash(arrayBuffer)

            if (hash) {
              fileHashes[fileName.replace(/^files\//, '')] = hash
            }
          } else {
            fileHashes[fileName.replace(/^files\//, '')] = null
          }
        }

        setCurrentFileHashes(fileHashes)
      }

      generateCurrentFileHashes()
    }
  }, [zip])

  useEffect(() => {
    if (signers.length > 0) {
      // check if all signers have signed then its fully signed
      if (signers.every((signer) => signedBy.includes(signer))) {
        setSignedStatus(SignedStatus.Fully_Signed)
      } else {
        for (const signer of signers) {
          if (!signedBy.includes(signer)) {
            // signers in meta.json are in npub1 format
            // so, convert it to hex before setting to nextSigner
            setNextSinger(npubToHex(signer)!)

            const usersNpub = hexToNpub(usersPubkey!)

            if (signer === usersNpub) {
              // 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)
    }

    // Determine and set the status of the user
    if (submittedBy && usersPubkey && submittedBy === usersPubkey) {
      // If the submission was made by the user, set the status to true
      setIsSignerOrCreator(true)
    } else if (usersPubkey) {
      // Convert the user's public key from hex to npub format
      const usersNpub = hexToNpub(usersPubkey)
      if (signers.includes(usersNpub)) {
        // If the user's npub is in the list of signers, set the status to true
        setIsSignerOrCreator(true)
      }
    }
  }, [signers, signedBy, usersPubkey, submittedBy])

  useEffect(() => {
    const handleUpdatedMeta = async (meta: Meta) => {
      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'
        )
        setIsLoading(false)
        return null
      })

      if (!createSignatureEvent) return

      const isValidCreateSignature = verifyEvent(createSignatureEvent)

      if (!isValidCreateSignature) {
        toast.error('Create signature is invalid')
        setIsLoading(false)
        return
      }

      const createSignatureContent =
        await parseJson<CreateSignatureEventContent>(
          createSignatureEvent.content
        ).catch((err) => {
          console.log(
            `err in parsing the createSignature event's content :>> `,
            err
          )
          toast.error(
            err.message ||
              `error occurred in parsing the create signature event's content`
          )
          setIsLoading(false)
          return null
        })

      if (!createSignatureContent) return

      setSigners(createSignatureContent.signers)
      setViewers(createSignatureContent.viewers)
      setCreatorFileHashes(createSignatureContent.fileHashes)
      setSubmittedBy(createSignatureEvent.pubkey)

      setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
    }

    if (meta) {
      handleUpdatedMeta(meta)
    }
  }, [meta])

  useEffect(() => {
    if (sigit) {
      const processSigit = async () => {
        setIsLoading(true)
        setLoadingSpinnerDesc(
          'Extracting encryption key from creator signature'
        )

        const { fileUrl, meta } = sigit as Sigit

        const encryptionKey = await extractEncryptionKey(
          meta.createSignature
        ).then(async (res) => {
          if (!res) return null

          const { sender, encryptedKey } = res
          const decrypted = await nostrController
            .nip04Decrypt(sender, encryptedKey)
            .catch((err) => {
              console.log('An error occurred in decrypting encryption key', err)
              toast.error('An error occurred in decrypting encryption key')
              return null
            })

          return decrypted
        })

        if (!encryptionKey) {
          setIsLoading(false)
          return
        }

        setLoadingSpinnerDesc('Fetching file from file server')
        setFileUrl(fileUrl)
        axios
          .get(fileUrl, {
            responseType: 'arraybuffer'
          })
          .then(async (res) => {
            const fileName = fileUrl.split('/').pop()
            const file = new File([res.data], fileName!)

            const encryptedArrayBuffer = await file.arrayBuffer()
            const arrayBuffer = await decryptArrayBuffer(
              encryptedArrayBuffer,
              encryptionKey
            ).catch((err) => {
              console.log('err in decryption:>> ', err)
              toast.error(
                err.message || 'An error occurred in decrypting file.'
              )
              return null
            })

            if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer, meta)
          })
          .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)
          })
      }

      processSigit()
    } else if (decryptedArrayBuffer) {
      handleDecryptedArrayBuffer(decryptedArrayBuffer).finally(() =>
        setIsLoading(false)
      )
    } else if (uploadedZip) {
      decrypt(uploadedZip)
        .then((arrayBuffer) => {
          if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
        })
        .catch((err) => {
          console.error(`error occurred in decryption`, err)
          toast.error(err.message || `error occurred in decryption`)
        })
        .finally(() => {
          setIsLoading(false)
        })
    } else {
      setIsLoading(false)
      setDisplayInput(true)
    }
  }, [decryptedArrayBuffer, uploadedZip])

  const parseKeysJson = async (zip: JSZip) => {
    const keysFileContent = await readContentOfZipEntry(
      zip,
      'keys.json',
      'string'
    )

    if (!keysFileContent) return null

    const parsedJSON = await parseJson<{ sender: string; keys: string[] }>(
      keysFileContent
    ).catch((err) => {
      console.log(`Error parsing content of keys.json:`, err)
      toast.error(err.message || `Error parsing content of keys.json`)
      return null
    })

    return parsedJSON
  }

  const decrypt = async (file: File) => {
    setLoadingSpinnerDesc('Decrypting file')

    const zip = await JSZip.loadAsync(file).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

    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 handleDecryptedArrayBuffer = async (
    arrayBuffer: ArrayBuffer,
    meta?: Meta
  ) => {
    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)
    setDisplayInput(false)

    let parsedMetaJson: Meta | null = null

    if (meta) {
      parsedMetaJson = meta
    } else {
      setLoadingSpinnerDesc('Parsing meta.json')

      const metaFileContent = await readContentOfZipEntry(
        zip,
        'meta.json',
        'string'
      )

      if (!metaFileContent) {
        setIsLoading(false)
        return
      }

      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) return

    setIsLoading(true)
    const arrayBuffer = await decrypt(selectedFile)

    if (!arrayBuffer) return

    handleDecryptedArrayBuffer(arrayBuffer)
  }

  const handleSign = async () => {
    if (!zip || !meta) return

    setIsLoading(true)

    setLoadingSpinnerDesc('Signing nostr event')

    const prevSig = getPrevSignersSig(hexToNpub(usersPubkey!))
    if (!prevSig) return

    const signedEvent = await signEventForMeta(prevSig)
    if (!signedEvent) return

    const updatedMeta = updateMetaSignatures(meta, signedEvent)
    setMeta(updatedMeta)

    if (await isOnline()) {
      if (fileUrl) await handleOnlineFlow(fileUrl, updatedMeta)
    } else {
      // todo: fix offline flow
      // handleDecryptedArrayBuffer(arrayBuffer).finally(() => setIsLoading(false))
    }
  }

  // Sign the event for the meta file
  const signEventForMeta = async (prevSig: string) => {
    return await signEventForMetaFile(
      JSON.stringify({ prevSig }),
      nostrController,
      setIsLoading
    )
  }

  // Update the meta signatures
  const updateMetaSignatures = (meta: Meta, signedEvent: SignedEvent): Meta => {
    const metaCopy = _.cloneDeep(meta)
    metaCopy.docSignatures = {
      ...metaCopy.docSignatures,
      [hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
    }
    metaCopy.modifiedAt = now()
    return metaCopy
  }

  // create final zip file
  const createFinalZipFile = async (
    encryptedArrayBuffer: ArrayBuffer,
    encryptionKey: string
  ): Promise<File | null> => {
    // Get the current timestamp in seconds
    const unixNow = Math.floor(Date.now() / 1000)
    const blob = new Blob([encryptedArrayBuffer])
    // Create a File object with the Blob data
    const file = new File([blob], `compressed.sigit`, {
      type: 'application/sigit'
    })

    const isLastSigner = checkIsLastSigner(signers)

    const userSet = new Set<string>()

    if (isLastSigner) {
      if (submittedBy) {
        userSet.add(submittedBy)
      }

      signers.forEach((signer) => {
        userSet.add(npubToHex(signer)!)
      })

      viewers.forEach((viewer) => {
        userSet.add(npubToHex(viewer)!)
      })
    } else {
      const usersNpub = hexToNpub(usersPubkey!)
      const signerIndex = signers.indexOf(usersNpub)
      const nextSigner = signers[signerIndex + 1]
      userSet.add(npubToHex(nextSigner)!)
    }

    const keysFileContent = await generateKeysFile(
      Array.from(userSet),
      encryptionKey
    )
    if (!keysFileContent) return null

    const zip = new JSZip()
    zip.file(`compressed.sigit`, file)
    zip.file('keys.json', keysFileContent)

    const arraybuffer = await zip
      .generateAsync({
        type: 'arraybuffer',
        compression: 'DEFLATE',
        compressionOptions: { level: 6 }
      })
      .catch(handleZipError)

    if (!arraybuffer) return null

    const finalZipFile = new File(
      [new Blob([arraybuffer])],
      `${unixNow}.sigit.zip`,
      {
        type: 'application/zip'
      }
    )

    return finalZipFile
  }

  // Handle errors during zip file generation
  const handleZipError = (err: any) => {
    console.log('Error in zip:>> ', err)
    setIsLoading(false)
    toast.error(err.message || 'Error occurred in generating zip file')
    return null
  }

  // Handle the online flow: upload file and send DMs
  const handleOnlineFlow = async (fileUrl: string, meta: Meta) => {
    setLoadingSpinnerDesc('Updating users app data')
    const updatedEvent = await updateUsersAppData(fileUrl, meta)
    if (!updatedEvent) {
      setIsLoading(false)
      return
    }

    const userSet = new Set<`npub1${string}`>()
    if (submittedBy) {
      userSet.add(hexToNpub(submittedBy))
    }

    const isLastSigner = checkIsLastSigner(signers)
    if (isLastSigner) {
      signers.forEach((signer) => {
        userSet.add(signer)
      })

      viewers.forEach((viewer) => {
        userSet.add(viewer)
      })
    } else {
      const usersNpub = hexToNpub(usersPubkey!)
      const currentSignerIndex = signers.indexOf(usersNpub)
      const prevSigners = signers.slice(0, currentSignerIndex)

      prevSigners.forEach((signer) => {
        userSet.add(signer)
      })

      const nextSigner = signers[currentSignerIndex + 1]
      userSet.add(nextSigner)
    }

    setLoadingSpinnerDesc('Sending notifications')
    const users = Array.from(userSet)
    const promises = users.map((user) =>
      sendNotification(npubToHex(user)!, meta, fileUrl)
    )
    await Promise.allSettled(promises)

    setIsLoading(false)
  }

  // Check if the current user is the last signer
  const checkIsLastSigner = (signers: string[]): boolean => {
    const usersNpub = hexToNpub(usersPubkey!)
    const lastSignerIndex = signers.length - 1
    const signerIndex = signers.indexOf(usersNpub)
    return signerIndex === lastSignerIndex
  }

  const handleExport = async () => {
    if (!meta || !zip || !usersPubkey) return

    const usersNpub = hexToNpub(usersPubkey)
    if (
      !signers.includes(usersNpub) &&
      !viewers.includes(usersNpub) &&
      submittedBy !== usersNpub
    )
      return

    setIsLoading(true)
    setLoadingSpinnerDesc('Signing nostr event')

    const prevSig = await getLastSignersSig()
    if (!prevSig) return

    const signedEvent = await signEventForMetaFile(
      JSON.stringify({
        prevSig
      }),
      nostrController,
      setIsLoading
    )

    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])
    const unixNow = Math.floor(Date.now() / 1000)
    saveAs(blob, `exported-${unixNow}.sigit.zip`)

    setIsLoading(false)

    navigate(appPublicRoutes.verify)
  }

  const handleExportSigit = async () => {
    if (!zip) return

    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 key = await generateEncryptionKey()

    setLoadingSpinnerDesc('Encrypting zip file')
    const encryptedArrayBuffer = await encryptArrayBuffer(arrayBuffer, key)

    const finalZipFile = await createFinalZipFile(encryptedArrayBuffer, key)

    if (!finalZipFile) return
    const unixNow = Math.floor(Date.now() / 1000)
    saveAs(finalZipFile, `exported-${unixNow}.sigit.zip`)
  }

  /**
   * This function accepts an npub of a signer and return the signature of its previous signer.
   * This prevSig will be used in the content of the provided signer's signedEvent
   */
  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
    }
  }

  /**
   * This function returns the signature of last signer
   * It will be used in the content of export signature's signedEvent
   */
  const getLastSignersSig = () => {
    if (!meta) return null

    // if there're no signers then use creator's signature
    if (signers.length === 0) {
      try {
        const createSignatureEvent: Event = JSON.parse(meta.createSignature)
        return createSignatureEvent.sig
      } catch (error) {
        return null
      }
    }

    // get last signer
    const lastSigner = signers[signers.length - 1]

    // get the signature of last signer
    try {
      const lastSignatureEvent: Event = JSON.parse(
        meta.docSignatures[lastSigner]
      )
      return lastSignatureEvent.sig
    } catch (error) {
      return null
    }
  }

  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}>
              <MuiFileInput
                placeholder="Select file"
                inputProps={{ accept: '.sigit.zip' }}
                value={selectedFile}
                onChange={(value) => setSelectedFile(value)}
              />
            </Box>

            {selectedFile && (
              <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
                <Button onClick={handleDecrypt} variant="contained">
                  Decrypt
                </Button>
              </Box>
            )}
          </>
        )}

        {submittedBy && zip && meta && (
          <>
            <DisplayMeta
              meta={meta}
              zip={zip}
              submittedBy={submittedBy}
              signers={signers}
              viewers={viewers}
              creatorFileHashes={creatorFileHashes}
              currentFileHashes={currentFileHashes}
              signedBy={signedBy}
              nextSigner={nextSinger}
              getPrevSignersSig={getPrevSignersSig}
            />

            {signedStatus === SignedStatus.Fully_Signed && (
              <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
                <Button onClick={handleExport} variant="contained">
                  Export
                </Button>
              </Box>
            )}

            {signedStatus === SignedStatus.User_Is_Next_Signer && (
              <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
                <Button onClick={handleSign} variant="contained">
                  Sign
                </Button>
              </Box>
            )}

            {/* todo: In offline mode export sigit is not visible after last signer has signed*/}
            {isSignerOrCreator && (
              <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
                <Button onClick={handleExportSigit} variant="contained">
                  Export Sigit
                </Button>
              </Box>
            )}
          </>
        )}
      </Box>
    </>
  )
}