src/pages/create/index.tsx

@@ -108,6 +108,7 @@ export const CreatePage = () => {
   const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
 
   const [selectedTool, setSelectedTool] = useState<DrawTool>()
+  const [toolbox] = useState<DrawTool[]>(DEFAULT_TOOLBOX)
 
   /**
    * Changes the drawing tool
@@ -832,36 +833,28 @@ export const CreatePage = () => {
               </div>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>
-                {DEFAULT_TOOLBOX.filter((drawTool) => !drawTool.isHidden).map(
+                {toolbox.map((drawTool: DrawTool, index: number) => {
-                  (drawTool: DrawTool, index: number) => {
+                  return (
-                    return (
+                    <div
-                      <div
+                      key={index}
-                        key={index}
+                      {...(drawTool.active && {
-                        {...(!drawTool.isComingSoon && {
+                        onClick: () => handleToolSelect(drawTool)
-                          onClick: () => handleToolSelect(drawTool)
+                      })}
-                        })}
+                      className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
-                        className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${drawTool.isComingSoon ? styles.comingSoon : ''}
                       `}
-                      >
+                    >
-                        <FontAwesomeIcon
+                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
-                          fontSize={'15px'}
+                      {drawTool.label}
-                          icon={drawTool.icon}
+                      {drawTool.active ? (
-                        />
+                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
-                        {drawTool.label}
+                      ) : (
-                        {!drawTool.isComingSoon ? (
+                        <span className={styles.comingSoonPlaceholder}>
-                          <FontAwesomeIcon
+                          Coming soon
-                            fontSize={'15px'}
+                        </span>
-                            icon={faEllipsis}
+                      )}
-                          />
+                    </div>
-                        ) : (
+                  )
-                          <span className={styles.comingSoonPlaceholder}>
+                })}
-                            Coming soon
-                          </span>
-                        )}
-                      </div>
-                    )
-                  }
-                )}
               </div>
 
               <Button onClick={handleCreate} variant="contained">

src/types/drawing.ts

@@ -31,10 +31,7 @@ export interface DrawTool {
   icon: IconDefinition
   defaultValue?: string
   selected?: boolean
-  /** show or hide the toolbox item */
+  active?: boolean
-  isHidden?: boolean
-  /** show or hide "coming soon" message on the toolbox item */
-  isComingSoon?: boolean
 }
 
 export enum MarkType {

src/utils/const.ts

@@ -21,8 +21,6 @@ export const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000
 
 export const SIGIT_RELAY = 'wss://relay.sigit.io'
 
-export const SIGIT_BLOSSOM = 'https://blossom.sigit.io'
-
 export const DEFAULT_LOOK_UP_RELAY_LIST = [
   SIGIT_RELAY,
   'wss://user.kindpag.es',

src/utils/mark.ts

@@ -3,26 +3,14 @@ import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
 import { EMPTY } from './const.ts'
-import { DrawTool, MarkType } from '../types/drawing.ts'
+import { MarkType } from '../types/drawing.ts'
 import {
   faT,
   faSignature,
   faBriefcase,
   faIdCard,
   faClock,
-  fa1,
+  fa1
-  faCalendarDays,
-  faCheckDouble,
-  faCircleDot,
-  faCreditCard,
-  faHeading,
-  faImage,
-  faPaperclip,
-  faPhone,
-  faSquareCaretDown,
-  faSquareCheck,
-  faStamp,
-  faTableCellsLarge
 } from '@fortawesome/free-solid-svg-icons'
 
 /**
@@ -152,114 +140,115 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
   return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
 }
 
-export const DEFAULT_TOOLBOX: DrawTool[] = [
+export const DEFAULT_TOOLBOX = [
   {
     identifier: MarkType.FULLNAME,
     icon: faIdCard,
     label: 'Full Name',
-    isComingSoon: true
+    active: false
   },
   {
     identifier: MarkType.JOBTITLE,
     icon: faBriefcase,
     label: 'Job Title',
-    isComingSoon: true
+    active: false
   },
   {
     identifier: MarkType.SIGNATURE,
     icon: faSignature,
     label: 'Signature',
-    isComingSoon: true
+    active: false
   },
   {
     identifier: MarkType.DATETIME,
     icon: faClock,
     label: 'Date Time',
-    isComingSoon: true
+    active: false
   },
   {
     identifier: MarkType.TEXT,
     icon: faT,
-    label: 'Text'
+    label: 'Text',
+    active: true
   },
   {
     identifier: MarkType.NUMBER,
     icon: fa1,
     label: 'Number',
-    isComingSoon: true
+    active: false
-  },
-  {
-    identifier: MarkType.INITIALS,
-    icon: faHeading,
-    label: 'Initials',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.DATE,
-    icon: faCalendarDays,
-    label: 'Date',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.IMAGES,
-    icon: faImage,
-    label: 'Images',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.CHECKBOX,
-    icon: faSquareCheck,
-    label: 'Checkbox',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.MULTIPLE,
-    icon: faCheckDouble,
-    label: 'Multiple',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.FILE,
-    icon: faPaperclip,
-    label: 'File',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.RADIO,
-    icon: faCircleDot,
-    label: 'Radio',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.SELECT,
-    icon: faSquareCaretDown,
-    label: 'Select',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.CELLS,
-    icon: faTableCellsLarge,
-    label: 'Cells',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.STAMP,
-    icon: faStamp,
-    label: 'Stamp',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.PAYMENT,
-    icon: faCreditCard,
-    label: 'Payment',
-    isHidden: true
-  },
-  {
-    identifier: MarkType.PHONE,
-    icon: faPhone,
-    label: 'Phone',
-    isHidden: true
   }
+  // {
+  //   identifier: MarkType.INITIALS,
+  //   icon: faHeading,
+  //   label: 'Initials',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.DATE,
+  //   icon: faCalendarDays,
+  //   label: 'Date',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.IMAGES,
+  //   icon: faImage,
+  //   label: 'Images',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.CHECKBOX,
+  //   icon: faSquareCheck,
+  //   label: 'Checkbox',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.MULTIPLE,
+  //   icon: faCheckDouble,
+  //   label: 'Multiple',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.FILE,
+  //   icon: faPaperclip,
+  //   label: 'File',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.RADIO,
+  //   icon: faCircleDot,
+  //   label: 'Radio',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.SELECT,
+  //   icon: faSquareCaretDown,
+  //   label: 'Select',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.CELLS,
+  //   icon: faTableCellsLarge,
+  //   label: 'Cells',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.STAMP,
+  //   icon: faStamp,
+  //   label: 'Stamp',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.PAYMENT,
+  //   icon: faCreditCard,
+  //   label: 'Payment',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.PHONE,
+  //   icon: faPhone,
+  //   label: 'Phone',
+  //   active: false
+  // }
 ]
 
 export const getToolboxLabelByMarkType = (markType: MarkType) => {

src/utils/misc.ts

@@ -16,8 +16,6 @@ import { CreateSignatureEventContent, Meta } from '../types'
 import { hexToNpub, unixNow } from './nostr'
 import { parseJson } from './string'
 import { hexToBytes } from '@noble/hashes/utils'
-import { getHash } from './hash.ts'
-import { SIGIT_BLOSSOM } from './const.ts'
 
 /**
  * Uploads a file to a file storage service.
@@ -27,18 +25,12 @@ import { SIGIT_BLOSSOM } from './const.ts'
  */
 export const uploadToFileStorage = async (file: File) => {
   // Define event metadata for authorization
-  const hash = await getHash(await file.arrayBuffer())
-  if (!hash) {
-    throw new Error("Can't get file hash.")
-  }
-
   const event: EventTemplate = {
     kind: 24242,
     content: 'Authorize Upload',
     created_at: unixNow(),
     tags: [
       ['t', 'upload'],
-      ['x', hash],
       ['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
       ['name', file.name],
       ['size', String(file.size)]
@@ -55,8 +47,11 @@ export const uploadToFileStorage = async (file: File) => {
   // Sign the authorization event using the dedicated key stored in user app data
   const authEvent = finalizeEvent(event, hexToBytes(key))
 
+  // URL of the file storage service
+  const FILE_STORAGE_URL = 'https://blossom.sigit.io' // REFACTOR: should be an env
+
   // Upload the file to the file storage service using Axios
-  const response = await axios.put(`${SIGIT_BLOSSOM}/upload`, file, {
+  const response = await axios.put(`${FILE_STORAGE_URL}/upload`, file, {
     headers: {
       Authorization: 'Nostr ' + btoa(JSON.stringify(authEvent)), // Set authorization header
       'Content-Type': 'application/sigit' // Set content type header

src/utils/nostr.ts

@@ -35,7 +35,6 @@ import { getDefaultRelayMap } from './relays'
 import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
 import { getHash } from './hash'
-import { SIGIT_BLOSSOM } from './const.ts'
 
 /**
  * Generates a `d` tag for userAppData
@@ -724,11 +723,6 @@ const uploadUserAppDataToBlossom = async (
     type: 'application/octet-stream'
   })
 
-  const hash = await getHash(await file.arrayBuffer())
-  if (!hash) {
-    throw new Error("Can't get file hash.")
-  }
-
   // Define event metadata for authorization
   const event: EventTemplate = {
     kind: 24242,
@@ -736,7 +730,6 @@ const uploadUserAppDataToBlossom = async (
     created_at: unixNow(),
     tags: [
       ['t', 'upload'],
-      ['x', hash],
       ['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
       ['name', file.name],
       ['size', String(file.size)]
@@ -746,8 +739,11 @@ const uploadUserAppDataToBlossom = async (
   // Finalize the event with the private key
   const authEvent = finalizeEvent(event, hexToBytes(privateKey))
 
+  // URL of the file storage service
+  const FILE_STORAGE_URL = 'https://blossom.sigit.io'
+
   // Upload the file to the file storage service using Axios
-  const response = await axios.put(`${SIGIT_BLOSSOM}/upload`, file, {
+  const response = await axios.put(`${FILE_STORAGE_URL}/upload`, file, {
     headers: {
       Authorization: 'Nostr ' + btoa(JSON.stringify(authEvent)) // Set authorization header
     }