chore: added changes from main

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended'
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'licenseChecker.cjs', "*.min.js"],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {

.git-hooks/commit-msg

@@ -1,19 +0,0 @@
-#!/bin/sh
-# Get the commit message (the parameter we're given is just the path to the
-# temporary file which holds the message).
-commit_message=$(cat "$1")
-
-if (echo "$commit_message" | grep -Eq "^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([a-z0-9 \-]+\))?!?: .+$") then
-   tput setaf 2;
-   echo "✔ Commit message meets Conventional Commit standards"
-   tput sgr0;
-   exit 0
-fi
-
-tput setaf 1;
-echo "❌ Commit message does not meet the Conventional Commit standard!"
-tput sgr0;
-echo "An example of a valid message is:"
-echo "  feat(login): add the 'remember me' button"
-echo "📝 More details at: https://www.conventionalcommits.org/en/v1.0.0/#summary"
-exit 1

.git-hooks/pre-commit

@@ -1,13 +0,0 @@
-#!/bin/sh
-
-# Avoid commits to the master branch
-BRANCH=`git rev-parse --abbrev-ref HEAD`
-REGEX="^(master|main|staging|development)$"
-
-if [[ "$BRANCH" =~ $REGEX ]]; then
-  echo "You are on branch $BRANCH. Are you sure you want to commit to this branch?"
-  echo "If so, commit with -n to bypass the pre-commit hook."
-  exit 1
-fi
-
-npm run lint-staged

.gitea/workflows/release-production.yaml

@@ -1,52 +0,0 @@
-name: Release to Production
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  build_and_release:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: Create .env File
-        run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
-
-      - name: Create Build
-        run: npm run build
-
-      - name: Deploy Build
-        run: |
-          npm -g install cloudron-surfer
-          surfer config --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io
-          surfer put dist/* / --all -d
-          surfer put dist/.well-known / --all
-
-      - name: Create Empty Release (assets are posted later)
-        run: |
-          npm i
-          npm i -g semantic-release
-          # We do a semantic-release DRY RUN to make the job fail if there are no changes to release
-          GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.nostrdev.com/sigit/sigit.io semantic-release --dry-run | grep -q "There are no relevant changes, so no new version is released." && exit 1
-          GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.nostrdev.com/sigit/sigit.io semantic-release
-
-      - name: Upload assets to release
-        run: |
-          RELEASE_ID=`curl -k 'https://git.nostrdev.com/sigit/sigit.io/api/v1/repos/sigit/sigit.io/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.id'`
-          RELEASE_BODY=`curl -k 'https://git.nostrdev.com/sigit/sigit.io/api/v1/repos/sigit/sigit.io/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.body'`
-          # Update body
-          curl --data '{"draft": false,"body":"'"$RELEASE_BODY\n\nFor installation instructions, please visit https://docs.sigit.io/#/"'"}' -X PATCH --header 'Content-Type: application/json' -k https://git.nostrdev.com/sigit/sigit.io/api/v1/repos/sigit/sigit.io/releases/$RELEASE_ID?access_token=${{ secrets.RELEASE_TOKEN }}
-          # Upload assets
-          URL="https://git.nostrdev.com/sigit/sigit.io/api/v1/repos/sigit/sigit.io/releases/$RELEASE_ID/assets?access_token=${{ secrets.RELEASE_TOKEN }}"
-          curl -k $URL -F attachment=@dist.zip

.gitea/workflows/release.yaml

@@ -1,8 +1,8 @@
-name: Release to Staging
+name: Release
 on:
   push:
     branches:
-      - staging
+      - main
 
 jobs:
   build_and_release:
@@ -17,21 +17,9 @@ jobs:
         with:
           node-version: 18
 
-      - name: Audit
-        run: npm audit --omit=dev
-
       - name: Install Dependencies
         run: npm ci
 
-      - name: License check
-        run: npm run license-checker
-
-      - name: Lint check
-        run: npm run lint
-
-      - name: Formatter check
-        run: npm run formatter:check
-
       - name: Create .env File
         run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
 
@@ -41,6 +29,4 @@ jobs:
       - name: Release Build
         run: |
           npm -g install cloudron-surfer
-          surfer config --token ${{ secrets.STAGING_CLOUDRON_SURFER_TOKEN }} --server staging.sigit.io
-          surfer put dist/* / --all -d
-          surfer put dist/.well-known / --all
+          surfer put --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io dist/* /

.gitea/workflows/staging-pull-request.yaml

@@ -1,34 +0,0 @@
-name: Open PR on Staging
-on:
-  pull_request:
-    types: [opened, edited, synchronize]
-    branches:
-      - staging
-
-jobs:
-  audit_and_check:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18
-
-      - name: Audit
-        run: npm audit --omit=dev
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: License check
-        run: npm run license-checker
-
-      - name: Lint check
-        run: npm run lint
-
-      - name: Formatter check
-        run: npm run formatter:check

.gitignore

@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist-zip
+dist
 dist-ssr
 *.local
 

.releaserc

@@ -1,31 +0,0 @@
-{
-  "branches": [
-    "main"
-  ],
-  "plugins": [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
-    "@semantic-release/changelog",
-    "@semantic-release/npm",
-    [
-      "@semantic-release/git",
-      {
-        "assets": [
-          "CHANGELOG.md",
-          "package.json"
-        ]
-      }
-    ],
-    [
-      "@saithodev/semantic-release-gitea",
-      {
-        "giteaUrl": "https://git.nostrdev.com/sigit/sigit.io",
-        "assets": [
-          {
-            "path": "dist-zip/dist.zip"
-          }
-        ]
-      }
-    ]
-  ]
-}

LICENSE

@@ -1,661 +0,0 @@
-                    GNU AFFERO GENERAL PUBLIC LICENSE
-                       Version 3, 19 November 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
-cooperation with the community in the case of network server software.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-our General Public Licenses are intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-  A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate.  Many developers of free software are heartened and
-encouraged by the resulting cooperation.  However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-  The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community.  It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server.  Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-  An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals.  This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing under
-this license.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU Affero General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Remote Network Interaction; Use with the GNU General Public License.
-
-  Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your version
-supports such interaction) an opportunity to receive the Corresponding
-Source of your version by providing access to the Corresponding Source
-from a network server at no charge, through some standard or customary
-means of facilitating copying of software.  This Corresponding Source
-shall include the Corresponding Source for any work covered by version 3
-of the GNU General Public License that is incorporated pursuant to the
-following paragraph.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU Affero General Public License from time to time.  Such new versions
-will be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published
-    by the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source.  For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code.  There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for the
-specific requirements.
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU AGPL, see
-<https://www.gnu.org/licenses/>.

README.md

@@ -14,9 +14,5 @@ SIGit is a signing technology that is more *secure* and *private* than any off-t
 
 Of course, being built on the Nostr relay network, you can sign documents and build business relationships even in the most adversarial of regulatory environments.
 
-The source for this repo is: https://git.sigit.io/sig/it
-
-If you'd like to submit PRs or issues (which are very welcome) please reach out by DM for an invite to the source repo:  https://njump.me/npub1d0csynrrxcynkcedktdzrdj6gnras2psg48mf46kxjazs8skrjgq9uzhlq
-
 We expect to have an MVP by the summer, if you are interested in being an early tester, do reach out on https://chat.sigit.io
 

contributing.md

@@ -6,19 +6,19 @@ Welcome to Sigit! We are thrilled that you are interested in contributing to thi
 
 ### Reporting Bugs
 
-If you encounter a bug while using Sigit, please [open an issue](https://git.nostrdev.com/sigit/sigit.io/issues/new) on this repository. Provide as much detail as possible, including steps to reproduce the bug.
+If you encounter a bug while using Sigit, please [open an issue](https://git.sigit.io/g/web/issues/new) on this repository. Provide as much detail as possible, including steps to reproduce the bug.
 
 ### Suggesting Enhancements
 
-If you have an idea for how to improve Sigit, we would love to hear from you! [Open an issue](https://git.nostrdev.com/sigit/sigit.io/issues/new) to suggest an enhancement.
+If you have an idea for how to improve Sigit, we would love to hear from you! [Open an issue](https://git.sigit.io/g/web/issues/new) to suggest an enhancement.
 
 ### Pull Requests
 
 We welcome pull requests from contributors! To contribute code changes:
 
-1. Fork the repository and create your branch from `staging`.
+1. Fork the repository and create your branch from `main`.
 2. Make your changes and ensure they pass any existing tests.
-3. Write meaningful commit messages (conventional commit standard)
+3. Write meaningful commit messages.
 4. Submit a pull request, describing your changes in detail and referencing any related issues.
 
 ## Development Setup
@@ -35,14 +35,4 @@ All contributions, including pull requests, undergo code review. Code review ens
 
 ## Contact
 
-If you have questions or need further assistance, you can reach out to `npub1d0csynrrxcynkcedktdzrdj6gnras2psg48mf46kxjazs8skrjgq9uzhlq`
-
-## Testing
-
-The following items should be tested with each release:
-
-- Create a SIGit with at least 3 signers
-- Create a SIGit where the creator is not the first signer
-- Create a SIGit where one co-signer has no marks
-- Create a SIGit using a file other than a PDF
-- Use several login mechanisms, browsers, operating systems whilst testing
+If you have questions or need further assistance, you can reach out to [maintainer's email].

index.html

@@ -2,13 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" type="image/png" href="/FAVICON.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SIGit</title>
   </head>
   <body>
     <div id="root"></div>
-    <script src="/opentimestamps.min.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

licenseChecker.cjs

@@ -1,28 +0,0 @@
-const process = require('node:process')
-const licenseChecker = require('license-checker')
-
-const check = (cwd) => {
-  return new Promise((resolve, reject) => {
-    licenseChecker.init(
-      {
-        production: true,
-        start: cwd,
-        excludePrivatePackages: true,
-        onlyAllow:
-          'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;BSD 3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
-        excludePackages: ''
-      },
-      (error, json) => {
-        if (error) {
-          reject(error)
-        } else {
-          resolve(json)
-        }
-      }
-    )
-  })
-}
-
-check(process.cwd(), true)
-  .then(() => console.log('All packages are licensed properly'))
-  .catch((err) => console.log('license checker err', err))

package.json

@@ -1,105 +1,61 @@
 {
-  "name": "sigit",
+  "name": "web",
   "private": true,
-  "version": "0.0.0-beta",
+  "version": "0.0.0",
   "type": "module",
   "homepage": "https://sigit.io/",
-  "license": "AGPL-3.0-or-later ",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
     "formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
-    "formatter:staged": "prettier --write --ignore-unknown",
-    "preview": "vite preview",
-    "preinstall": "git config core.hooksPath .git-hooks",
-    "license-checker": "node licenseChecker.cjs",
-    "lint-staged": "lint-staged",
-    "release": "commit-and-tag-version"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",
     "@noble/hashes": "^1.4.0",
-    "@nostr-dev-kit/ndk": "2.10.0",
-    "@nostr-dev-kit/ndk-cache-dexie": "2.5.1",
-    "@pdf-lib/fontkit": "^1.1.1",
+    "@nostr-dev-kit/ndk": "2.5.0",
     "@reduxjs/toolkit": "2.2.1",
-    "axios": "^1.7.4",
+    "axios": "1.6.7",
     "crypto-hash": "3.0.0",
     "crypto-js": "^4.2.0",
-    "dexie": "4.0.8",
     "dnd-core": "16.0.1",
     "file-saver": "2.0.5",
-    "idb": "8.0.0",
     "jszip": "3.10.1",
     "lodash": "4.17.21",
-    "material-ui-popup-state": "^5.3.1",
     "mui-file-input": "4.0.4",
-    "nostr-login": "1.6.14",
-    "nostr-tools": "2.7.0",
-    "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "^4.4.168",
-    "rdndmb-html5-to-touch": "^8.0.3",
+    "nostr-tools": "2.3.1",
     "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-multi-backend": "^8.0.3",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
     "react-redux": "9.1.0",
     "react-router-dom": "6.22.1",
-    "react-singleton-hook": "^4.0.1",
     "react-toastify": "10.0.4",
     "redux": "5.0.1",
-    "signature_pad": "^5.0.4",
-    "tseep": "1.2.1",
-    "use-immer": "^0.11.0"
+    "tseep": "1.2.1"
   },
   "devDependencies": {
-    "@saithodev/semantic-release-gitea": "^2.1.0",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^10.0.1",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "11.0.0",
-    "@semantic-release/release-notes-generator": "^11.0.4",
     "@types/crypto-js": "^4.2.2",
     "@types/file-saver": "2.0.7",
     "@types/lodash": "4.14.202",
-    "@types/pdfjs-dist": "^2.10.378",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
-    "@types/svgo": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
-    "commit-and-tag-version": "^11.2.2",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "license-checker": "^25.0.1",
-    "lint-staged": "^15.2.8",
     "prettier": "3.2.5",
     "ts-css-modules-vite-plugin": "1.0.20",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4",
-    "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-zip-pack": "^1.2.4",
-    "vite-tsconfig-paths": "4.3.2"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "npm run lint:staged"
-    ],
-    "*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
+    "vite": "^5.1.4"
   }
 }

public/.well-known/nostr.json

@@ -1,15 +0,0 @@
-{
-  "names": {
-    "_": "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90"
-  },
-  "relays": {
-    "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90": [
-      "wss://brb.io",
-      "wss://nostr.v0l.io",
-      "wss://nostr.coinos.io",
-      "wss://rsslay.nostr.net",
-      "wss://relay.current.fyi",
-      "wss://nos.io"
-    ]
-  }
-}

public/logo.svg

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 734.95 255.06">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #47b17d;
-      }
-
-      .cls-2 {
-        fill: #4c82a3;
-      }
-
-      .cls-3 {
-        fill: #7d54a3;
-      }
-    </style>
-  </defs>
-  <g id="Layer_1-2" data-name="Layer 1">
-    <g>
-      <g>
-        <path class="cls-3" d="M335.64,100.98c0-4.9,.94-9.5,2.81-13.79,1.87-4.29,4.42-8.05,7.64-11.27,3.22-3.22,6.98-5.77,11.27-7.64,4.29-1.87,8.89-2.81,13.79-2.81h54.34v23.7h-54.34c-1.65,0-3.19,.3-4.62,.91-1.43,.61-2.68,1.45-3.76,2.52s-1.91,2.33-2.52,3.76c-.61,1.43-.91,2.97-.91,4.62s.3,3.21,.91,4.67c.61,1.46,1.45,2.73,2.52,3.8,1.07,1.07,2.33,1.91,3.76,2.52,1.43,.61,2.97,.91,4.62,.91h23.7c4.9,0,9.51,.92,13.83,2.77,4.32,1.85,8.09,4.38,11.31,7.6s5.75,6.99,7.6,11.31c1.84,4.32,2.77,8.93,2.77,13.83s-.92,9.5-2.77,13.79c-1.85,4.29-4.38,8.05-7.6,11.27s-6.99,5.77-11.31,7.64c-4.32,1.87-8.93,2.81-13.83,2.81h-52.61v-23.7h52.61c1.65,0,3.19-.3,4.62-.91,1.43-.61,2.68-1.45,3.76-2.52s1.91-2.33,2.52-3.76c.61-1.43,.91-2.97,.91-4.62s-.3-3.19-.91-4.62c-.61-1.43-1.45-2.68-2.52-3.76-1.07-1.07-2.33-1.91-3.76-2.52-1.43-.6-2.97-.91-4.62-.91h-23.7c-4.9,0-9.5-.94-13.79-2.81-4.29-1.87-8.05-4.42-11.27-7.64-3.22-3.22-5.77-6.99-7.64-11.31-1.87-4.32-2.81-8.93-2.81-13.83Z"/>
-        <path class="cls-3" d="M469.59,183.9h-23.7V65.47h23.7v118.43Z"/>
-        <path class="cls-3" d="M585.8,171.92c-5.51,4.68-11.64,8.27-18.42,10.78-6.77,2.5-13.82,3.76-21.14,3.76-5.62,0-11.03-.73-16.23-2.19-5.2-1.46-10.06-3.52-14.58-6.19-4.52-2.67-8.65-5.86-12.39-9.58-3.75-3.72-6.94-7.85-9.58-12.39s-4.7-9.43-6.15-14.66c-1.46-5.23-2.19-10.65-2.19-16.27s.73-11.01,2.19-16.19c1.46-5.17,3.51-10.03,6.15-14.58,2.64-4.54,5.83-8.67,9.58-12.39,3.74-3.72,7.87-6.9,12.39-9.54,4.51-2.64,9.37-4.69,14.58-6.15s10.61-2.19,16.23-2.19c7.32,0,14.37,1.25,21.14,3.76,6.77,2.51,12.91,6.1,18.42,10.78l-12.39,20.65c-3.58-3.63-7.71-6.48-12.39-8.55-4.68-2.06-9.61-3.1-14.78-3.1s-10.03,.99-14.58,2.97c-4.54,1.98-8.52,4.67-11.93,8.05-3.41,3.39-6.11,7.35-8.09,11.89-1.98,4.54-2.97,9.4-2.97,14.58s.99,10.13,2.97,14.7c1.98,4.57,4.68,8.56,8.09,11.98,3.41,3.41,7.39,6.11,11.93,8.09,4.54,1.98,9.4,2.97,14.58,2.97,2.97,0,5.86-.36,8.67-1.07,2.81-.71,5.48-1.71,8.01-2.97v-33.7h22.88v46.75Z"/>
-        <path class="cls-3" d="M627.75,183.9h-23.7V65.47h23.7v118.43Z"/>
-        <path class="cls-3" d="M699.44,183.9h-23.62V89.17h-35.6v-23.7h94.73v23.7h-35.51v94.73Z"/>
-      </g>
-      <g>
-        <path class="cls-2" d="M181.53,115.06h0c-9.4-36.67-56.77-24.79-121.09-12.57C-3.54,114.64-25.35,19.85,37.72,3.62,46.91,1.26,56.55,0,66.47,0c63.55,0,115.06,51.51,115.06,115.06Z"/>
-        <path class="cls-1" d="M100,140h0c9.4,36.67,56.77,24.79,121.09,12.57,63.98-12.16,85.79,82.64,22.72,98.86-9.19,2.36-18.83,3.62-28.76,3.62-63.55,0-115.06-51.51-115.06-115.06Z"/>
-        <circle class="cls-3" cx="140.77" cy="127.53" r="24.88"/>
-      </g>
-    </g>
-  </g>
-</svg>

src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.scss

@@ -1,171 +0,0 @@
-@import './styles/colors.scss';
-@import './styles/sizes.scss';
-@import './styles/typography.scss';
-
-:root {
-  // Import colors once as variables
-  --primary-main: #{$primary-main};
-  --primary-light: #{$primary-light};
-  --primary-dark: #{$primary-dark};
-
-  --secondary-main: #{$secondary-main};
-
-  --box-shadow-color: #{$box-shadow-color};
-  --border-color: #{$border-color};
-
-  --body-background-color: #{$body-background-color};
-  --overlay-background-color: #{$overlay-background-color};
-
-  --text-color: #{$text-color};
-  --input-text-color: #{$input-text-color};
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.2;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 0;
-}
-
-body {
-  color: $text-color;
-  background: $body-background-color;
-  font-family: $font-familiy;
-  letter-spacing: $letter-spacing;
-  font-size: $body-font-size;
-  font-weight: $body-font-weight;
-  line-height: $body-line-height;
-
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
-}
-
-a {
-  font-weight: 500;
-  color: $primary-main;
-  text-decoration: none;
-  text-decoration-color: inherit;
-  transition: ease 0.4s;
-  outline: none;
-
-  &:focus,
-  &:hover {
-    color: $primary-light;
-    text-decoration: underline;
-    text-decoration-color: inherit;
-  }
-}
-
-input {
-  font-family: inherit;
-}
-
-ul {
-  list-style-type: none; /* Removes bullet points */
-  margin: 0; /* Removes default margin */
-  padding: 0; /* Removes default padding */
-}
-
-li {
-  list-style-type: none; /* Removes the bullets */
-  margin: 0; /* Removes any default margin */
-  padding: 0; /* Removes any default padding */
-}
-
-// Shared styles for center content (Create, Sign, Verify)
-.files-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-}
-
-.file-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  position: relative;
-
-  // CSS, scroll position when scrolling to the files is adjusted by
-  // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
-  // - others We don't include border and padding and scroll to the top of the image
-  &:first-child {
-    scroll-margin-top: $body-vertical-padding + 20px;
-  }
-  &:not(:first-child) {
-    scroll-margin-top: $body-vertical-padding;
-  }
-}
-
-// For pdf marks
-.image-wrapper {
-  position: relative;
-  -webkit-user-select: none;
-  user-select: none;
-
-  > img {
-    display: block;
-    width: 100%;
-    height: auto;
-    object-fit: contain; /* Ensure the image fits within the container */
-  }
-}
-
-// For image rendering (uploaded image as a file)
-.file-image {
-  -webkit-user-select: none;
-  user-select: none;
-
-  display: block;
-  width: 100%;
-  height: auto;
-  object-fit: contain; /* Ensure the image fits within the container */
-}
-
-// Consistent styling for every file mark
-// Reverts some of the design defaults for font
-.file-mark {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-height: 1;
-
-  font-size: 16px;
-  color: black;
-  outline: 1px solid transparent;
-
-  justify-content: start;
-  align-items: start;
-
-  scroll-margin-top: $body-vertical-padding;
-}
-
-[data-dev='true'] {
-  .image-wrapper {
-    // outline: 1px solid #ccc; /* Optional: for visual debugging */
-    background-color: #e0f7fa; /* Optional: for visual debugging */
-  }
-}
-
-.extension-file-box {
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.5);
-  height: 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: rgba(0, 0, 0, 0.25);
-  font-size: 14px;
-}

src/App.tsx

@@ -1,56 +1,79 @@
 import { useEffect } from 'react'
+import { useSelector } from 'react-redux'
 import { Navigate, Route, Routes } from 'react-router-dom'
-
-import { useAppSelector, useAuth } from './hooks'
-
+import { AuthController, NostrController } from './controllers'
 import { MainLayout } from './layouts/Main'
-
-import { appPrivateRoutes, appPublicRoutes } from './routes'
 import {
+  appPrivateRoutes,
+  appPublicRoutes,
   privateRoutes,
-  publicRoutes,
-  recursiveRouteRenderer
-} from './routes/util'
-
-import './App.scss'
+  publicRoutes
+} from './routes'
+import { State } from './store/rootReducer'
+import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
 
 const App = () => {
-  const { checkSession } = useAuth()
-  const authState = useAppSelector((state) => state.auth)
+  const authState = useSelector((state: State) => state.auth)
 
   useEffect(() => {
-    if (window.location.hostname === '0.0.0.0') {
-      // A change of the host is needed to make  library available in windows object
-      // the app can't encrypt files without the crypto library
-      // which is only available on https or localhost
-      window.location.hostname = 'localhost'
-    }
+    generateBunkerDelegatedKey()
 
-    checkSession()
-  }, [checkSession])
+    const authController = new AuthController()
+    authController.checkSession()
+  }, [])
+
+  const generateBunkerDelegatedKey = () => {
+    const existingKey = getNsecBunkerDelegatedKey()
+
+    if (!existingKey) {
+      const nostrController = NostrController.getInstance()
+      const newDelegatedKey = nostrController.generateDelegatedKey()
+
+      saveNsecBunkerDelegatedKey(newDelegatedKey)
+    }
+  }
 
   const handleRootRedirect = () => {
     if (authState.loggedIn) return appPrivateRoutes.homePage
-
     const callbackPathEncoded = btoa(
       window.location.href.split(`${window.location.origin}/#`)[1]
     )
-
-    return `${appPublicRoutes.landingPage}?callbackPath=${callbackPathEncoded}`
+    return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
   }
 
-  // Hide route only if loggedIn and r.hiddenWhenLoggedIn are both true
-  const publicRoutesList = recursiveRouteRenderer(publicRoutes, (r) => {
-    return !authState.loggedIn || !r.hiddenWhenLoggedIn
-  })
-
-  const privateRouteList = recursiveRouteRenderer(privateRoutes)
-
   return (
     <Routes>
       <Route element={<MainLayout />}>
-        {authState?.loggedIn && privateRouteList}
-        {publicRoutesList}
+        {authState?.loggedIn &&
+          privateRoutes.map((route, index) => (
+            <Route
+              key={route.path + index}
+              path={route.path}
+              element={route.element}
+            />
+          ))}
+        {publicRoutes.map((route, index) => {
+          if (authState?.loggedIn) {
+            if (!route.hiddenWhenLoggedIn) {
+              return (
+                <Route
+                  key={route.path + index}
+                  path={route.path}
+                  element={route.element}
+                />
+              )
+            }
+          } else {
+            return (
+              <Route
+                key={route.path + index}
+                path={route.path}
+                element={route.element}
+              />
+            )
+          }
+        })}
+
         <Route path="*" element={<Navigate to={handleRootRedirect()} />} />
       </Route>
     </Routes>

src/assets/images/bg_l.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
-  <g id="Layer_1-2" data-name="Layer 1">
-    <path d="M113.31,3.31C73.23,10.93,35.28,18.5,0,24.8V307.11c30.14,8.31,61.89,12.76,94.68,12.76,30.67,0,60.43-3.88,88.82-11.19C378.31,258.56,310.93-34.23,113.31,3.31Z"/>
-  </g>
-</svg>

src/assets/images/bg_r.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
-  <g id="Layer_1-2" data-name="Layer 1">
-    <path d="M205.32,0c-30.67,0-60.43,3.88-88.82,11.19C-78.31,61.31-10.93,354.1,186.69,316.56c40.08-7.61,78.02-15.18,113.31-21.49V12.76C269.86,4.45,238.11,0,205.32,0Z"/>
-  </g>
-</svg>

src/colors.scss

@@ -0,0 +1,50 @@
+$primary-main: var(--mui-palette-primary-main);
+$primary-light: var(--mui-palette-primary-light);
+$primary-dark: var(--mui-palette-primary-dark);
+
+$box-shadow-color: rgba(0, 0, 0, 0.1);
+$border-color: #27323c;
+
+$page-background-color: #f4f4fb;
+$modal-input-background: #f4f4fb;
+$background-color: #fff;
+
+$text-color: #3e3e3e;
+$input-text-color: #717171;
+$info-text-color: #4169e1;
+
+$icon-color: #c1c1c1;
+$zap-icon-color: #ffd700;
+
+$btn-background-color: $primary-main;
+$btn-color: #fff;
+
+$progress-box-background-color: $primary-main;
+$progress-box-inner-background-color: $primary-dark;
+$rank-progress-background-color: #445c76;
+
+$correct-answer-background-color: $primary-light;
+$incorrect-answer-background-color: #e84d67;
+$incorrect-answer-label-color: #fff;
+
+$checkbox-border-color: #ccc;
+$checkbox-hover-border-color: #888;
+$checkbox-checked-background-color: $primary-main;
+$checkbox-checked-color: #fff;
+
+$comment-notice-background-color: #0d6efd;
+$comment-notice-color: #fff;
+$comment-divider-color: #eee;
+
+$activated-topic-background-color: var(--mui-palette-info-dark);
+
+$error-msg-color: red;
+$suggestion-box-heading-color: #dfe0e0;
+
+$callOut-success-background: $primary-light;
+$callOut-success-color: $primary-dark;
+
+$review-feedback-correct: #178b13;
+$review-feedback-incorrect: #d82222;
+$review-feedback-neutral: #f39220;
+$review-feedback-selected-color: #fff;

src/components/AppBar/AppBar.tsx

@@ -9,47 +9,64 @@ import {
 } from '@mui/material'
 
 import { useEffect, useState } from 'react'
-import { useAppSelector } from '../../hooks/store'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  setAuthState,
+  setMetadataEvent,
+  userLogOutAction
+} from '../../store/actions'
+import { State } from '../../store/rootReducer'
+import { Dispatch } from '../../store/store'
 import Username from '../username'
 
 import { Link, useNavigate } from 'react-router-dom'
+import { MetadataController, NostrController } from '../../controllers'
 import {
   appPublicRoutes,
   appPrivateRoutes,
   getProfileRoute
 } from '../../routes'
-import { getProfileUsername, hexToNpub } from '../../utils'
+import {
+  clearAuthToken,
+  saveNsecBunkerDelegatedKey,
+  shorten
+} from '../../utils'
 import styles from './style.module.scss'
-import { Container } from '../Container'
-import { ButtonIcon } from '../ButtonIcon'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClose } from '@fortawesome/free-solid-svg-icons'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import { useLogout } from '../../hooks/useLogout'
+import { setUserRobotImage } from '../../store/userRobotImage/action'
 
-import { launch as launchNostrLoginDialog } from 'nostr-login'
+const metadataController = new MetadataController()
 
 export const AppBar = () => {
   const navigate = useNavigate()
-  const logout = useLogout()
+
+  const dispatch: Dispatch = useDispatch()
+
   const [username, setUsername] = useState('')
   const [userAvatar, setUserAvatar] = useState('')
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
 
-  const authState = useAppSelector((state) => state.auth)
-  const userProfile = useAppSelector((state) => state.user.profile)
-  const userRobotImage = useAppSelector((state) => state.user.robotImage)
+  const authState = useSelector((state: State) => state.auth)
+  const metadataState = useSelector((state: State) => state.metadata)
+  const userRobotImage = useSelector((state: State) => state.userRobotImage)
 
   useEffect(() => {
-    const npub = authState.usersPubkey ? hexToNpub(authState.usersPubkey) : ''
-    if (userProfile) {
-      setUserAvatar(userProfile.image || userRobotImage || '')
-      setUsername(getProfileUsername(npub, userProfile))
-    } else {
-      setUserAvatar('')
-      setUsername(getProfileUsername(npub))
+    if (metadataState) {
+      if (metadataState.content) {
+        const { picture, display_name, name } = JSON.parse(
+          metadataState.content
+        )
+
+        if (picture || userRobotImage) {
+          setUserAvatar(picture || userRobotImage)
+        }
+
+        setUsername(shorten(display_name || name || '', 7))
+      } else {
+        setUserAvatar(userRobotImage || '')
+        setUsername('')
+      }
     }
-  }, [userRobotImage, authState.usersPubkey, userProfile])
+  }, [metadataState, userRobotImage])
 
   const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget)
@@ -68,167 +85,125 @@ export const AppBar = () => {
 
   const handleLogout = () => {
     handleCloseUserMenu()
-    logout()
+    dispatch(
+      setAuthState({
+        keyPair: undefined,
+        loggedIn: false,
+        usersPubkey: undefined,
+        loginMethod: undefined,
+        nsecBunkerPubkey: undefined
+      })
+    )
+    dispatch(setMetadataEvent(metadataController.getEmptyMetadataEvent()))
+    dispatch(setUserRobotImage(null))
+
+    // clear authToken saved in local storage
+    clearAuthToken()
+
+    dispatch(userLogOutAction())
+
+    // update nsecBunker delegated key after logout
+    const nostrController = NostrController.getInstance()
+    const newDelegatedKey = nostrController.generateDelegatedKey()
+    saveNsecBunkerDelegatedKey(newDelegatedKey)
+
     navigate('/')
   }
   const isAuthenticated = authState?.loggedIn === true
 
-  const matches = useMediaQuery('(max-width:767px)')
-  const [isBannerVisible, setIsBannerVisible] = useState(true)
-  const handleBannerHide = () => {
-    setIsBannerVisible(false)
-  }
-
   return (
-    <>
-      {isAuthenticated && isBannerVisible && (
-        <div className={styles.banner}>
-          <Container>
-            <div className={styles.bannerInner}>
-              <p className={styles.bannerText}>
-                SIGit is currently Beta software (available for user experience
-                testing), use at your own risk!
-              </p>
-              <Button
-                aria-label={`close banner`}
-                variant="text"
-                onClick={handleBannerHide}
-              >
-                <FontAwesomeIcon icon={faClose} />
-              </Button>
-            </div>
-          </Container>
-        </div>
-      )}
-      <AppBarMui
-        position={matches ? 'sticky' : 'static'}
-        className={styles.AppBar}
-        sx={{
-          boxShadow: 'none'
-        }}
-      >
-        <Container>
-          <Toolbar className={styles.toolbar} disableGutters={true}>
-            <Box className={styles.logoWrapper}>
-              <img
-                src="/logo.svg"
-                alt="Logo"
-                onClick={() => {
-                  if (['', '#/'].includes(window.location.hash)) {
-                    location.reload()
-                  } else {
-                    navigate('/')
-                  }
-                }}
+    <AppBarMui position="fixed" className={styles.AppBar}>
+      <Toolbar className={styles.toolbar}>
+        <Box className={styles.logoWrapper}>
+          <img src="/logo.png" alt="Logo" onClick={() => navigate('/')} />
+        </Box>
+
+        <Box className={styles.rightSideBox}>
+          {!isAuthenticated && (
+            <Button
+              onClick={() => {
+                navigate(appPublicRoutes.login)
+              }}
+              variant="contained"
+            >
+              Sign in
+            </Button>
+          )}
+
+          {isAuthenticated && (
+            <>
+              <Username
+                username={username}
+                avatarContent={userAvatar}
+                handleClick={handleOpenUserMenu}
               />
-            </Box>
-
-            <Box className={styles.rightSideBox}>
-              {!isAuthenticated && (
-                <Button
-                  startIcon={<ButtonIcon />}
-                  onClick={() => {
-                    launchNostrLoginDialog()
+              <Menu
+                id="menu-appbar"
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center'
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center'
+                }}
+                open={!!anchorElUser}
+                onClose={handleCloseUserMenu}
+              >
+                <MenuItem
+                  sx={{
+                    justifyContent: 'center',
+                    display: { md: 'none' }
                   }}
-                  variant="contained"
                 >
-                  LOGIN
-                </Button>
-              )}
-
-              {isAuthenticated && (
-                <>
-                  <Username
-                    username={username}
-                    avatarContent={userAvatar}
-                    handleClick={handleOpenUserMenu}
-                  />
-                  <Menu
-                    id="menu-appbar"
-                    anchorEl={anchorElUser}
-                    anchorOrigin={{
-                      vertical: 'bottom',
-                      horizontal: 'center'
+                  <Typography variant="h6">{username}</Typography>
+                </MenuItem>
+                <MenuItem
+                  onClick={handleProfile}
+                  sx={{
+                    justifyContent: 'center'
+                  }}
+                >
+                  Profile
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    navigate(appPrivateRoutes.relays)
+                  }}
+                  sx={{
+                    justifyContent: 'center'
+                  }}
+                >
+                  Relays
+                </MenuItem>
+                <Link
+                  to={appPublicRoutes.help}
+                  target="_blank"
+                  style={{ color: 'inherit', textDecoration: 'inherit' }}
+                >
+                  <MenuItem
+                    sx={{
+                      justifyContent: 'center'
                     }}
-                    keepMounted
-                    transformOrigin={{
-                      vertical: 'top',
-                      horizontal: 'center'
-                    }}
-                    open={!!anchorElUser}
-                    onClose={handleCloseUserMenu}
                   >
-                    <MenuItem
-                      sx={{
-                        justifyContent: 'center',
-                        display: { md: 'none' },
-                        fontWeight: 500,
-                        fontSize: '14px',
-                        color: 'var(--text-color)'
-                      }}
-                    >
-                      <Typography variant="h6">{username}</Typography>
-                    </MenuItem>
-                    <MenuItem
-                      onClick={handleProfile}
-                      sx={{
-                        justifyContent: 'center'
-                      }}
-                    >
-                      Profile
-                    </MenuItem>
-                    <MenuItem
-                      onClick={() => {
-                        setAnchorElUser(null)
-
-                        navigate(appPrivateRoutes.settings)
-                      }}
-                      sx={{
-                        justifyContent: 'center'
-                      }}
-                    >
-                      Settings
-                    </MenuItem>
-                    <MenuItem
-                      onClick={() => {
-                        setAnchorElUser(null)
-
-                        navigate(appPublicRoutes.verify)
-                      }}
-                      sx={{
-                        justifyContent: 'center'
-                      }}
-                    >
-                      Verify
-                    </MenuItem>
-                    <Link
-                      to={appPublicRoutes.source}
-                      target="_blank"
-                      style={{ color: 'inherit', textDecoration: 'inherit' }}
-                    >
-                      <MenuItem
-                        sx={{
-                          justifyContent: 'center'
-                        }}
-                      >
-                        Source
-                      </MenuItem>
-                    </Link>
-                    <MenuItem
-                      onClick={handleLogout}
-                      sx={{
-                        justifyContent: 'center'
-                      }}
-                    >
-                      Logout
-                    </MenuItem>
-                  </Menu>
-                </>
-              )}
-            </Box>
-          </Toolbar>
-        </Container>
-      </AppBarMui>
-    </>
+                    Help
+                  </MenuItem>
+                </Link>
+                <MenuItem
+                  onClick={handleLogout}
+                  sx={{
+                    justifyContent: 'center'
+                  }}
+                >
+                  Logout
+                </MenuItem>
+              </Menu>
+            </>
+          )}
+        </Box>
+      </Toolbar>
+    </AppBarMui>
   )
 }

src/components/AppBar/style.module.scss

@@ -1,14 +1,12 @@
-@import '../../styles/colors.scss';
-@import '../../styles/sizes.scss';
+@import '../../colors.scss';
 
 .AppBar {
-  background-color: $overlay-background-color !important;
-  height: $header-height;
+  background-color: $background-color !important;
+  z-index: 1400 !important;
+  height: 60px;
   flex-direction: row !important;
   align-items: center;
 
-  border-bottom: solid 1px rgba(0, 0, 0, 0.075);
-
   .toolbar {
     flex-grow: 1;
     display: flex;
@@ -34,42 +32,3 @@
     justify-content: flex-end;
   }
 }
-
-.banner {
-  color: #ffffff;
-  background-color: $primary-main;
-}
-
-.bannerInner {
-  display: flex;
-  gap: 10px;
-  padding-block: 10px;
-  z-index: 1;
-
-  width: 100%;
-
-  justify-content: space-between;
-  flex-direction: row;
-
-  button {
-    min-width: 44px;
-    color: inherit;
-  }
-
-  &:hover,
-  &.active,
-  &:focus-within {
-    background: $primary-main;
-    color: inherit;
-
-    button {
-      color: inherit;
-    }
-  }
-}
-
-.bannerText {
-  margin-left: 54px;
-  flex-grow: 1;
-  text-align: center;
-}

src/components/ButtonIcon/index.tsx

@@ -1,14 +0,0 @@
-import styles from './style.module.scss'
-import placeholder from '../../assets/images/placeholder.png'
-
-interface ButtonIconProps {
-  src?: string
-  alt?: string
-}
-
-export const ButtonIcon = ({
-  src = placeholder,
-  alt = ''
-}: ButtonIconProps) => {
-  return <img src={src} alt={alt} className={styles.icon}></img>
-}

src/components/ButtonIcon/style.module.scss

@@ -1,5 +0,0 @@
-.icon {
-  border-radius: 100px;
-  width: 20px;
-  height: 20px;
-}

src/components/ButtonUnderline/index.tsx

@@ -1,24 +0,0 @@
-import { PropsWithChildren } from 'react'
-import styles from './style.module.scss'
-
-interface ButtonUnderlineProps {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
-  disabled?: boolean | undefined
-}
-
-export const ButtonUnderline = ({
-  onClick,
-  disabled = false,
-  children
-}: PropsWithChildren<ButtonUnderlineProps>) => {
-  return (
-    <button
-      type="button"
-      className={styles.button}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  )
-}

src/components/ButtonUnderline/style.module.scss

@@ -1,25 +0,0 @@
-@import '../../styles/colors.scss';
-
-.button {
-  color: $primary-main !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-
-  width: max-content;
-  margin: 0 auto;
-
-  // Override default styling
-  border: none !important;
-  outline: none !important;
-
-  // Override leaky css in sign page
-  background: transparent !important;
-
-  &:focus,
-  &:hover {
-    text-decoration: underline;
-    text-decoration-color: inherit;
-  }
-}

src/components/Container/index.tsx

@@ -1,36 +0,0 @@
-import { CSSProperties, PropsWithChildren } from 'react'
-import defaultStyle from './style.module.scss'
-
-interface ContainerProps {
-  style?: CSSProperties
-  className?: string
-}
-
-/**
- * Container component with pre-defined width, padding and margins for top level layout.
- *
- * **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
- * - When using *className* override, that styles are imported after the actual `Container` component
- * ```
- * import { Container } from './components/Container'
- * import styles from './style.module.scss'
- * ```
- * - or add *!important* to imported styles
- * - or override styles with *CSSProperties* object
- */
-export const Container = ({
-  style = {},
-  className = '',
-  children
-}: PropsWithChildren<ContainerProps>) => {
-  return (
-    <div
-      style={{
-        ...style
-      }}
-      className={`${defaultStyle.container} ${className}`}
-    >
-      {children}
-    </div>
-  )
-}

src/components/Container/style.module.scss

@@ -1,8 +0,0 @@
-@import '../../styles/sizes.scss';
-
-.container {
-  width: 100%;
-  max-width: 1400px;
-  padding-inline: $default-container-padding-inline;
-  margin-inline: auto;
-}

src/components/DisplaySigit/index.tsx

@@ -1,143 +0,0 @@
-import { Meta } from '../../types'
-import {
-  hexToNpub,
-  SigitCardDisplayInfo,
-  SigitStatus,
-  SignStatus
-} from '../../utils'
-import { Link } from 'react-router-dom'
-import { formatTimestamp, npubToHex } from '../../utils'
-import { appPublicRoutes, appPrivateRoutes } from '../../routes'
-import { Button, Divider, Tooltip } from '@mui/material'
-import { DisplaySigner } from '../DisplaySigner'
-import {
-  faArchive,
-  faCalendar,
-  faCopy,
-  faEye,
-  faFile,
-  faFileCircleExclamation
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { UserAvatarGroup } from '../UserAvatarGroup'
-
-import styles from './style.module.scss'
-import { getExtensionIconLabel } from '../getExtensionIconLabel'
-import { useSigitMeta } from '../../hooks/useSigitMeta'
-import { extractFileExtensions } from '../../utils/file'
-import { useAppSelector } from '../../hooks'
-
-type SigitProps = {
-  sigitCreateId: string
-  meta: Meta
-  parsedMeta: SigitCardDisplayInfo
-}
-
-export const DisplaySigit = ({
-  meta,
-  parsedMeta,
-  sigitCreateId: sigitCreateId
-}: SigitProps) => {
-  const { usersPubkey } = useAppSelector((state) => state.auth)
-
-  const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
-    parsedMeta
-
-  const { signersStatus, fileHashes } = useSigitMeta(meta)
-  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
-
-  const currentUserNpub: string = usersPubkey ? hexToNpub(usersPubkey) : ''
-  const currentUserNextSigner =
-    signersStatus[currentUserNpub as `npub1${string}`] === SignStatus.Awaiting
-
-  return (
-    <div className={styles.itemWrapper}>
-      {signedStatus === SigitStatus.Complete || !currentUserNextSigner ? (
-        <Link
-          to={`${appPublicRoutes.verify}/${sigitCreateId}`}
-          className={styles.insetLink}
-        ></Link>
-      ) : (
-        <Link
-          to={`${appPrivateRoutes.sign}/${sigitCreateId}`}
-          className={styles.insetLink}
-        ></Link>
-      )}
-
-      <p className={`line-clamp-2 ${styles.title}`}>{title}</p>
-      <div className={styles.users}>
-        {submittedBy && (
-          <DisplaySigner
-            status={isValid ? SignStatus.Signed : SignStatus.Invalid}
-            pubkey={submittedBy}
-          />
-        )}
-        {submittedBy && signers.length ? (
-          <Divider orientation="vertical" flexItem />
-        ) : null}
-        <UserAvatarGroup max={7}>
-          {signers.map((signer) => {
-            const pubkey = npubToHex(signer)!
-            return (
-              <DisplaySigner
-                key={pubkey}
-                status={signersStatus[signer]}
-                pubkey={pubkey}
-              />
-            )
-          })}
-        </UserAvatarGroup>
-      </div>
-      <div className={`${styles.details} ${styles.iconLabel}`}>
-        <FontAwesomeIcon icon={faCalendar} />
-        {createdAt ? formatTimestamp(createdAt) : null}
-      </div>
-      <div className={`${styles.details} ${styles.status}`}>
-        <span className={styles.iconLabel}>
-          <FontAwesomeIcon icon={faEye} /> {signedStatus}
-        </span>
-        {extensions.length > 0 ? (
-          <span className={styles.iconLabel}>
-            {!isSame ? (
-              <>
-                <FontAwesomeIcon icon={faFile} /> Multiple File Types
-              </>
-            ) : (
-              getExtensionIconLabel(extensions[0])
-            )}
-          </span>
-        ) : (
-          <>
-            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
-          </>
-        )}
-      </div>
-      <div className={styles.itemActions}>
-        <Tooltip title="Duplicate" arrow placement="top" disableInteractive>
-          <Button
-            sx={{
-              color: 'var(--primary-main)',
-              minWidth: '34px',
-              padding: '10px'
-            }}
-            variant={'text'}
-          >
-            <FontAwesomeIcon icon={faCopy} />
-          </Button>
-        </Tooltip>
-        <Tooltip title="Archive" arrow placement="top" disableInteractive>
-          <Button
-            sx={{
-              color: 'var(--primary-main)',
-              minWidth: '34px',
-              padding: '10px'
-            }}
-            variant={'text'}
-          >
-            <FontAwesomeIcon icon={faArchive} />
-          </Button>
-        </Tooltip>
-      </div>
-    </div>
-  )
-}

src/components/DisplaySigit/style.module.scss

@@ -1,114 +0,0 @@
-@import '../../styles/colors.scss';
-
-.itemWrapper {
-  position: relative;
-  overflow: hidden;
-  background-color: $overlay-background-color;
-  border-radius: 4px;
-
-  display: flex;
-  padding: 15px;
-  gap: 15px;
-  flex-direction: column;
-
-  &:only-child {
-    max-width: 600px;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    transition: opacity ease 0.2s;
-    opacity: 0;
-    width: 4px;
-    background-color: $primary-main;
-    pointer-events: none;
-  }
-
-  &:hover,
-  &:focus-within {
-    &::before {
-      opacity: 1;
-    }
-
-    .itemActions {
-      transform: translateX(0);
-    }
-  }
-}
-
-.insetLink {
-  position: absolute;
-  inset: 0;
-  outline: none;
-}
-
-.itemActions {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-
-  > * {
-    flex-grow: 1;
-  }
-
-  @media (hover: hover) {
-    transition: ease 0.2s;
-    transform: translateX(100%);
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-
-    flex-direction: column;
-    background: $overlay-background-color;
-    border-left: solid 1px rgba(0, 0, 0, 0.1);
-
-    &:hover,
-    &:focus-within {
-      transform: translateX(0);
-    }
-  }
-
-  @media (hover: none) {
-    border-top: solid 1px rgba(0, 0, 0, 0.1);
-    padding-top: 10px;
-    margin-inline: -15px;
-    margin-bottom: -15px;
-  }
-}
-
-.title {
-  font-size: 20px;
-  color: $text-color;
-}
-
-.users {
-  margin-top: auto;
-
-  display: flex;
-  grid-gap: 10px;
-}
-
-.details {
-  color: rgba(0, 0, 0, 0.3);
-  font-size: 14px;
-}
-
-.iconLabel {
-  display: flex;
-  grid-gap: 10px;
-  align-items: center;
-}
-
-.status {
-  display: flex;
-  grid-gap: 25px;
-}
-
-a.itemWrapper:hover {
-  text-decoration: none;
-}

src/components/DisplaySigner/index.tsx

@@ -1,56 +0,0 @@
-import { Badge } from '@mui/material'
-import styles from './style.module.scss'
-import { UserAvatar } from '../UserAvatar'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faCheck,
-  faEllipsis,
-  faExclamation,
-  faEye,
-  faHourglass,
-  faQuestion
-} from '@fortawesome/free-solid-svg-icons'
-import { SignStatus } from '../../utils'
-import { Spinner } from '../Spinner'
-
-type DisplaySignerProps = {
-  pubkey: string
-  status: SignStatus
-}
-
-const getStatusIcon = (status: SignStatus) => {
-  switch (status) {
-    case SignStatus.Signed:
-      return <FontAwesomeIcon icon={faCheck} />
-    case SignStatus.Awaiting:
-      return (
-        <Spinner>
-          <FontAwesomeIcon icon={faHourglass} />
-        </Spinner>
-      )
-    case SignStatus.Pending:
-      return <FontAwesomeIcon icon={faEllipsis} />
-    case SignStatus.Invalid:
-      return <FontAwesomeIcon icon={faExclamation} />
-    case SignStatus.Viewer:
-      return <FontAwesomeIcon icon={faEye} />
-
-    default:
-      return <FontAwesomeIcon icon={faQuestion} />
-  }
-}
-
-export const DisplaySigner = ({ status, pubkey }: DisplaySignerProps) => {
-  return (
-    <Badge
-      className={styles.signer}
-      overlap="circular"
-      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      badgeContent={
-        <div className={styles.statusBadge}>{getStatusIcon(status)}</div>
-      }
-    >
-      <UserAvatar pubkey={pubkey} />
-    </Badge>
-  )
-}

src/components/DisplaySigner/style.module.scss

@@ -1,23 +0,0 @@
-@import '../../styles/colors.scss';
-
-.statusBadge {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-
-  color: white;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  font-size: 10px;
-
-  background-color: $primary-main;
-}
-
-.signer {
-  background-color: white;
-  border-radius: 50%;
-  z-index: 1;
-}

src/components/DrawPDFFields/index.tsx

@@ -1,762 +0,0 @@
-import { Close } from '@mui/icons-material'
-import {
-  FormControl,
-  InputLabel,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  Select
-} from '@mui/material'
-import styles from './style.module.scss'
-import React, { useCallback, useEffect, useState } from 'react'
-import { User, UserRole, KeyboardCode } from '../../types'
-import { MouseState, DrawnField, DrawTool } from '../../types/drawing'
-import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
-import { SigitFile } from '../../utils/file'
-import { getToolboxLabelByMarkType } from '../../utils/mark'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
-import { useScale } from '../../hooks/useScale'
-import { AvatarIconButton } from '../UserAvatarIconButton'
-import { UserAvatar } from '../UserAvatar'
-import { Updater } from 'use-immer'
-import { FileItem } from './internal/FileItem'
-import { FileDivider } from '../FileDivider'
-import { Counterpart } from './internal/Counterpart'
-
-const MINIMUM_RECT_SIZE = {
-  width: 10,
-  height: 10
-} as const
-import { NDKUserProfile } from '@nostr-dev-kit/ndk'
-
-const DEFAULT_START_SIZE = {
-  width: 140,
-  height: 40
-} as const
-
-interface HideSignersForDrawnField {
-  [key: number]: boolean
-}
-
-type PageIndexer = [file: number, page: number]
-type FieldIndexer = [...PageIndexer, field: number]
-
-interface DrawPdfFieldsProps {
-  users: User[]
-  userProfiles: { [key: string]: NDKUserProfile }
-  sigitFiles: SigitFile[]
-  updateSigitFiles: Updater<SigitFile[]>
-  selectedTool?: DrawTool
-}
-
-export const DrawPDFFields = ({
-  selectedTool,
-  userProfiles,
-  sigitFiles,
-  updateSigitFiles,
-  users
-}: DrawPdfFieldsProps) => {
-  const { to, from } = useScale()
-
-  const signers = users.filter((u) => u.role === UserRole.signer)
-  const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
-  const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
-  const [hideSignersForDrawnField, setHideSignersForDrawnField] =
-    useState<HideSignersForDrawnField>({})
-
-  /**
-   * Return first pubkey that is present in the signers list
-   * @param pubkeys
-   * @returns available pubkey or empty string
-   */
-  const getAvailableSigner = useCallback(
-    (...pubkeys: string[]) => {
-      const availableSigner: string | undefined = pubkeys.find((pubkey) =>
-        signers.some((s) => s.pubkey === npubToHex(pubkey))
-      )
-      return availableSigner || ''
-    },
-    [signers]
-  )
-
-  const [mouseState, setMouseState] = useState<MouseState>({})
-  const [indexer, setIndexer] = useState<PageIndexer | FieldIndexer>()
-  const [field, setField] = useState<
-    DrawnField & {
-      x: number
-      y: number
-    }
-  >()
-  const [lastIndexer, setLastIndexer] = useState<FieldIndexer>()
-  const isActiveDrawnField = (
-    fileIndex: number,
-    pageIndex: number,
-    drawnFieldIndex: number
-  ) =>
-    lastIndexer &&
-    lastIndexer[0] === fileIndex &&
-    lastIndexer[1] === pageIndex &&
-    lastIndexer[2] === drawnFieldIndex
-
-  /**
-   * Gets the pointer coordinates relative to a element in the `event` param
-   * @param event PointerEvent
-   * @param customTarget coordinates relative to this element, if not provided
-   * event.target will be used
-   */
-  const getPointerCoordinates = (
-    event: React.PointerEvent,
-    customTarget?: HTMLElement | null
-  ) => {
-    const target = customTarget ? customTarget : event.currentTarget
-    const rect = target.getBoundingClientRect()
-
-    // Clamp X Y within the target
-    const x = Math.max(0, Math.min(event.clientX, rect.right) - rect.left) //x position within the element.
-    const y = Math.max(0, Math.min(event.clientY, rect.bottom) - rect.top) //y position within the element.
-
-    return {
-      x,
-      y,
-      rect
-    }
-  }
-
-  /**
-   * Fired only on when left (primary pointer interaction) clicking page image
-   * Creates new drawnElement
-   *
-   * @param event Pointer event
-   * @param pageIndexer File and page index
-   * @param pageWidth pdf value used to scale pointer coordinates
-   */
-  const handlePointerDown = useCallback(
-    (
-      event: React.PointerEvent,
-      pageIndexer: PageIndexer,
-      pageWidth: number
-    ) => {
-      // Proceed only if left click
-      if (event.button !== 0) return
-      if (!selectedTool) return
-      event.currentTarget.setPointerCapture(event.pointerId)
-      const counterpart = getAvailableSigner(lastSigner, defaultSignerNpub)
-      const { x, y } = getPointerCoordinates(event)
-
-      setIndexer(pageIndexer)
-      setField({
-        x: to(pageWidth, x),
-        y: to(pageWidth, y),
-        left: to(pageWidth, x),
-        top: to(pageWidth, y),
-        width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
-        height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
-        type: selectedTool.identifier,
-        counterpart
-      })
-      setMouseState({
-        clicked: true
-      })
-    },
-    [defaultSignerNpub, getAvailableSigner, lastSigner, selectedTool, to]
-  )
-
-  /**
-   * After {@link handlePointerDown} creates an drawing element, this function
-   * alters the newly created drawing element, resizing it while pointer moves
-   * @param event Pointer event
-   * @param pageWidth pdf value used to scale pointer coordinates
-   */
-  const handlePointerMove = useCallback(
-    (event: React.PointerEvent, pageWidth: number) => {
-      if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
-        const { x, y } = getPointerCoordinates(event)
-        const pageX = to(pageWidth, x)
-        const pageY = to(pageWidth, y)
-
-        // Calculate left, top, width, and height based on direction
-        setField((prev) => {
-          const left = pageX < prev!.x ? pageX : prev!.x
-          const top = pageY < prev!.y ? pageY : prev!.y
-
-          const width = Math.abs(pageX - prev!.x)
-          const height = Math.abs(pageY - prev!.y)
-          return { ...prev!, left, top, width, height }
-        })
-      }
-    },
-    [mouseState.clicked, selectedTool, to]
-  )
-
-  /**
-   * Fired when event happens on the drawn element which will be moved
-   * pointer coordinates relative to drawn element will be stored
-   * so when we start moving, offset can be calculated
-   * x - offsetX
-   * y - offsetY
-   *
-   * @param event Pointer event
-   * @param fieldIndexer Which field we are moving
-   */
-  const handleDrawnFieldPointerDown = (
-    event: React.PointerEvent,
-    fieldIndexer: FieldIndexer
-  ) => {
-    event.stopPropagation()
-
-    // Proceed only if left click
-    if (event.button !== 0) return
-
-    event.currentTarget.setPointerCapture(event.pointerId)
-    const drawingRectangleCoords = getPointerCoordinates(event)
-    const [fileIndex, pageIndex, drawnFieldIndex] = fieldIndexer
-    const page = sigitFiles[fileIndex].pages![pageIndex]
-    const drawnField = page.drawnFields[drawnFieldIndex]
-
-    setIndexer(fieldIndexer)
-    setField({
-      ...drawnField,
-      x: to(page.width, drawingRectangleCoords.x),
-      y: to(page.width, drawingRectangleCoords.y)
-    })
-    setLastIndexer(fieldIndexer)
-    setMouseState({
-      dragging: true,
-      clicked: false,
-      coordsInWrapper: {
-        x: drawingRectangleCoords.x,
-        y: drawingRectangleCoords.y
-      }
-    })
-
-    // Make signers dropdown visible
-    setHideSignersForDrawnField((prev) => ({
-      ...prev,
-      [drawnFieldIndex]: false
-    }))
-  }
-
-  /**
-   * Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
-   * @param event Pointer event
-   * @param pageWidth pdf value used to scale pointer coordinates
-   */
-  const handleDrawnFieldPointerMove = (
-    event: React.PointerEvent,
-    pageWidth: number
-  ) => {
-    if (mouseState.dragging) {
-      const { x, y, rect } = getPointerCoordinates(
-        event,
-        event.currentTarget.parentElement
-      )
-      const coordsOffset = mouseState.coordsInWrapper
-
-      if (coordsOffset) {
-        let left = to(pageWidth, x - coordsOffset.x)
-        let top = to(pageWidth, y - coordsOffset.y)
-
-        setField((prev) => {
-          const rightLimit = to(pageWidth, rect.width) - prev!.width
-          const bottomLimit = to(pageWidth, rect.height) - prev!.height
-
-          if (left < 0) left = 0
-          if (top < 0) top = 0
-          if (left > rightLimit) left = rightLimit
-          if (top > bottomLimit) top = bottomLimit
-
-          return {
-            ...prev!,
-            left,
-            top
-          }
-        })
-      }
-    }
-  }
-
-  /**
-   * Fired when clicked on the resize handle, sets the state for a resize action
-   * @param event Pointer event
-   * @param fieldIndexer which field we are resizing
-   */
-  const handleResizePointerDown = useCallback(
-    (event: React.PointerEvent, fieldIndexer: FieldIndexer) => {
-      // Proceed only if left click
-      if (event.button !== 0) return
-      event.stopPropagation()
-
-      event.currentTarget.setPointerCapture(event.pointerId)
-      const [fileIndex, pageIndex, drawnFieldIndex] = fieldIndexer
-      const page = sigitFiles[fileIndex].pages![pageIndex]
-      const drawnField = page.drawnFields[drawnFieldIndex]
-      setIndexer(fieldIndexer)
-      setField({
-        ...drawnField,
-        x: drawnField.left,
-        y: drawnField.top
-      })
-      setLastIndexer(fieldIndexer)
-      setMouseState({
-        resizing: true
-      })
-    },
-    [sigitFiles]
-  )
-
-  /**
-   * Resizes the drawn element by the mouse position
-   * @param event Pointer event
-   * @param pageWidth pdf value used to scale pointer coordinates
-   */
-  const handleResizePointerMove = useCallback(
-    (event: React.PointerEvent, pageWidth: number) => {
-      if (mouseState.resizing) {
-        // currentTarget = span handle
-        // 1st parent = drawnField
-        // 2nd parent = img
-        const { x, y } = getPointerCoordinates(
-          event,
-          event.currentTarget.parentElement?.parentElement
-        )
-
-        const pageX = to(pageWidth, x)
-        const pageY = to(pageWidth, y)
-
-        setField((prev) => {
-          const left = pageX < prev!.x ? pageX : prev!.x
-          const top = pageY < prev!.y ? pageY : prev!.y
-
-          const width = Math.abs(pageX - prev!.x)
-          const height = Math.abs(pageY - prev!.y)
-          return { ...prev!, left, top, width, height }
-        })
-      }
-    },
-    [mouseState.resizing, to]
-  )
-
-  const handlePointerUpReleaseCapture = useCallback(
-    (event: React.PointerEvent) => {
-      event.currentTarget.releasePointerCapture(event.pointerId)
-    },
-    []
-  )
-
-  /**
-   * Removes the drawn element using the indexes in the params
-   * @param event Pointer event
-   * @param fieldIIndexer [file index, page index, field index]
-   */
-  const handleRemovePointerDown = (
-    event: React.PointerEvent,
-    [fileIndex, pageIndex, fieldIndex]: FieldIndexer
-  ) => {
-    event.stopPropagation()
-
-    updateSigitFiles((draft) => {
-      draft[fileIndex]?.pages![pageIndex]?.drawnFields?.splice(fieldIndex, 1)
-    })
-  }
-
-  /**
-   * Used to stop pointer click propagating to the parent elements
-   * so select can work properly
-   * @param event Pointer event
-   */
-  const handleUserSelectPointerDown = (event: React.PointerEvent) => {
-    event.stopPropagation()
-  }
-
-  /**
-   * Handles Escape button-down event and hides all signers dropdowns
-   * @param event SyntheticEvent event
-   */
-  const handleEscapeButtonDown = (event: React.SyntheticEvent) => {
-    // get native event
-    const { nativeEvent } = event
-
-    //check if event is a keyboard event
-    if (nativeEvent instanceof KeyboardEvent) {
-      // check if event code is Escape
-      if (nativeEvent.code === KeyboardCode.Escape) {
-        // hide all signers dropdowns
-        const newHideSignersForDrawnField: HideSignersForDrawnField = {}
-
-        Object.keys(hideSignersForDrawnField).forEach((key) => {
-          // Object.keys always returns an array of strings,
-          // that is why unknown type is used below
-          newHideSignersForDrawnField[key as unknown as number] = true
-        })
-
-        setHideSignersForDrawnField(newHideSignersForDrawnField)
-      }
-    }
-  }
-
-  /**
-   * Drawing is finished, resets all the variables used to draw
-   */
-  const handlePointerUp = useCallback(() => {
-    // Proceed if we have selected something
-    if (indexer) {
-      // Check if we have the "preview" field state
-      if (field) {
-        // Cancel update if preview field is below the MINIMUM_RECT_SIZE threshhold
-        if (
-          field.width < MINIMUM_RECT_SIZE.width ||
-          field.height < MINIMUM_RECT_SIZE.height
-        ) {
-          setIndexer(undefined)
-          setMouseState({})
-          return
-        }
-
-        const [fileIndex, pageIndex, fieldIndex] = indexer
-
-        // Add new drawn field to the files
-        if (mouseState.clicked) {
-          updateSigitFiles((draft) => {
-            draft[fileIndex].pages![pageIndex].drawnFields.push(field)
-          })
-        }
-
-        // Move
-        if (mouseState.dragging) {
-          updateSigitFiles((draft) => {
-            draft[fileIndex].pages![pageIndex].drawnFields[fieldIndex!] = field
-          })
-        }
-
-        // Resize
-        if (mouseState.resizing) {
-          updateSigitFiles((draft) => {
-            draft[fileIndex].pages![pageIndex].drawnFields[fieldIndex!] = field
-          })
-        }
-
-        // Clear indexer after applying the update
-        setIndexer(undefined)
-      }
-    }
-    setMouseState({})
-  }, [
-    field,
-    indexer,
-    mouseState.clicked,
-    mouseState.dragging,
-    mouseState.resizing,
-    updateSigitFiles
-  ])
-
-  /**
-   * Drawing events
-   */
-  useEffect(() => {
-    window.addEventListener('pointerup', handlePointerUp)
-    window.addEventListener('pointercancel', handlePointerUp)
-
-    return () => {
-      window.removeEventListener('pointerup', handlePointerUp)
-      window.removeEventListener('pointercancel', handlePointerUp)
-    }
-  }, [handlePointerUp])
-
-  /**
-   * Renders the pdf pages and drawing elements
-   */
-  const getPdfPages = (file: SigitFile, fileIndex: number) => {
-    // Early return if this is not a pdf
-    if (!file.isPdf) return null
-
-    return (
-      <>
-        {file.pages?.map((page, pageIndex: number) => {
-          let isPageIndexerActive = false
-          if (indexer) {
-            const [fi, pi, di] = indexer
-            isPageIndexerActive =
-              fi === fileIndex && pi === pageIndex && typeof di === 'undefined'
-          }
-
-          return (
-            <div
-              key={pageIndex}
-              className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
-              tabIndex={-1}
-              onKeyDown={(event) => handleEscapeButtonDown(event)}
-            >
-              <img
-                onPointerDown={(event) => {
-                  handlePointerDown(event, [fileIndex, pageIndex], page.width)
-                }}
-                onPointerMove={(event) => {
-                  handlePointerMove(event, page.width)
-                }}
-                onPointerUp={handlePointerUpReleaseCapture}
-                draggable="false"
-                src={page.image}
-                alt={`page ${pageIndex + 1} of ${file.name}`}
-              />
-              {isPageIndexerActive && field && (
-                <div
-                  className={styles.drawingRectanglePreview}
-                  style={{
-                    backgroundColor: field.counterpart
-                      ? `#${npubToHex(field.counterpart)?.substring(0, 6)}4b`
-                      : undefined,
-                    outlineColor: field.counterpart
-                      ? `#${npubToHex(field.counterpart)?.substring(0, 6)}`
-                      : undefined,
-                    left: inPx(from(page.width, field.left)),
-                    top: inPx(from(page.width, field.top)),
-                    width: inPx(from(page.width, field.width)),
-                    height: inPx(from(page.width, field.height))
-                  }}
-                >
-                  <div
-                    className={`file-mark ${styles.placeholder}`}
-                    style={{
-                      fontFamily: FONT_TYPE,
-                      fontSize: inPx(from(page.width, FONT_SIZE))
-                    }}
-                  >
-                    {getToolboxLabelByMarkType(field.type) || 'placeholder'}
-                  </div>
-                </div>
-              )}
-              {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
-                let isFieldIndexerActive = false
-                if (indexer) {
-                  const [fi, pi, di] = indexer
-                  isFieldIndexerActive =
-                    fi === fileIndex &&
-                    pi === pageIndex &&
-                    di === drawnFieldIndex
-                }
-
-                return (
-                  <div
-                    key={drawnFieldIndex}
-                    onPointerDown={(event) =>
-                      handleDrawnFieldPointerDown(event, [
-                        fileIndex,
-                        pageIndex,
-                        drawnFieldIndex
-                      ])
-                    }
-                    onPointerMove={(event) => {
-                      handleDrawnFieldPointerMove(event, page.width)
-                    }}
-                    onPointerUp={handlePointerUpReleaseCapture}
-                    className={styles.drawingRectangle}
-                    style={{
-                      backgroundColor: drawnField.counterpart
-                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
-                        : undefined,
-                      outlineColor: drawnField.counterpart
-                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
-                        : undefined,
-                      ...(isFieldIndexerActive && field
-                        ? {
-                            left: inPx(from(page.width, field.left)),
-                            top: inPx(from(page.width, field.top)),
-                            width: inPx(from(page.width, field.width)),
-                            height: inPx(from(page.width, field.height))
-                          }
-                        : {
-                            left: inPx(from(page.width, drawnField.left)),
-                            top: inPx(from(page.width, drawnField.top)),
-                            width: inPx(from(page.width, drawnField.width)),
-                            height: inPx(from(page.width, drawnField.height))
-                          }),
-
-                      pointerEvents: mouseState.clicked ? 'none' : 'all',
-                      touchAction: 'none',
-                      zIndex: isActiveDrawnField(
-                        fileIndex,
-                        pageIndex,
-                        drawnFieldIndex
-                      )
-                        ? 60
-                        : undefined,
-                      opacity:
-                        mouseState.dragging &&
-                        isActiveDrawnField(
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        )
-                          ? 0.8
-                          : undefined
-                    }}
-                  >
-                    <div
-                      className={`file-mark ${styles.placeholder}`}
-                      style={{
-                        fontFamily: FONT_TYPE,
-                        fontSize: inPx(from(page.width, FONT_SIZE))
-                      }}
-                    >
-                      {getToolboxLabelByMarkType(drawnField.type) ||
-                        'placeholder'}
-                    </div>
-                    <span
-                      onPointerDown={(event) =>
-                        handleResizePointerDown(event, [
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        ])
-                      }
-                      onPointerMove={(event) => {
-                        handleResizePointerMove(event, page.width)
-                      }}
-                      onPointerUp={handlePointerUpReleaseCapture}
-                      className={styles.resizeHandle}
-                      style={{
-                        ...(mouseState.resizing &&
-                          isActiveDrawnField(
-                            fileIndex,
-                            pageIndex,
-                            drawnFieldIndex
-                          ) && {
-                            cursor: 'grabbing',
-                            opacity: 0.1
-                          })
-                      }}
-                    ></span>
-                    <span
-                      onPointerDown={(event) => {
-                        handleRemovePointerDown(event, [
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        ])
-                      }}
-                      className={styles.removeHandle}
-                    >
-                      <Close fontSize="small" />
-                    </span>
-                    {!isActiveDrawnField(
-                      fileIndex,
-                      pageIndex,
-                      drawnFieldIndex
-                    ) &&
-                      !!drawnField.counterpart && (
-                        <div className={styles.counterpartAvatar}>
-                          <UserAvatar
-                            pubkey={npubToHex(drawnField.counterpart)!}
-                          />
-                        </div>
-                      )}
-                    {isActiveDrawnField(
-                      fileIndex,
-                      pageIndex,
-                      drawnFieldIndex
-                    ) &&
-                      (!hideSignersForDrawnField ||
-                        !hideSignersForDrawnField[drawnFieldIndex]) && (
-                        <div
-                          onPointerDown={handleUserSelectPointerDown}
-                          className={styles.userSelect}
-                        >
-                          <FormControl fullWidth size="small">
-                            <InputLabel id="counterparts">
-                              Counterpart
-                            </InputLabel>
-                            <Select
-                              value={getAvailableSigner(drawnField.counterpart)}
-                              onChange={(event) => {
-                                drawnField.counterpart = event.target.value
-                                setLastSigner(event.target.value)
-                              }}
-                              labelId="counterparts"
-                              label="Counterparts"
-                              sx={{
-                                background: 'white'
-                              }}
-                              renderValue={(value) => (
-                                <Counterpart
-                                  npub={value}
-                                  userProfiles={userProfiles}
-                                  signers={signers}
-                                />
-                              )}
-                            >
-                              {signers.map((signer, index) => {
-                                const npub = hexToNpub(signer.pubkey)
-                                const profile = userProfiles[signer.pubkey]
-                                const displayValue = getProfileUsername(
-                                  npub,
-                                  profile
-                                )
-                                // make current signers dropdown visible
-                                if (
-                                  hideSignersForDrawnField[drawnFieldIndex] ===
-                                    undefined ||
-                                  hideSignersForDrawnField[drawnFieldIndex] ===
-                                    true
-                                ) {
-                                  setHideSignersForDrawnField((prev) => ({
-                                    ...prev,
-                                    [drawnFieldIndex]: false
-                                  }))
-                                }
-
-                                return (
-                                  <MenuItem key={index} value={npub}>
-                                    <ListItemIcon>
-                                      <AvatarIconButton
-                                        src={profile?.image}
-                                        hexKey={signer.pubkey}
-                                        aria-label={`account of user ${displayValue}`}
-                                        color="inherit"
-                                        sx={{
-                                          padding: 0,
-                                          '> img': {
-                                            width: '30px',
-                                            height: '30px'
-                                          }
-                                        }}
-                                      />
-                                    </ListItemIcon>
-                                    <ListItemText>{displayValue}</ListItemText>
-                                  </MenuItem>
-                                )
-                              })}
-                            </Select>
-                          </FormControl>
-                        </div>
-                      )}
-                  </div>
-                )
-              })}
-            </div>
-          )
-        })}
-      </>
-    )
-  }
-
-  return (
-    <div className="files-wrapper">
-      {sigitFiles.length > 0 &&
-        sigitFiles
-          .map<React.ReactNode>((file, i) =>
-            file.isPdf ? (
-              <React.Fragment key={file.name}>
-                {getPdfPages(file, i)}
-              </React.Fragment>
-            ) : (
-              <FileItem key={file.name} file={file} />
-            )
-          )
-          .reduce((prev, curr, i) => [
-            prev,
-            <FileDivider key={`separator-${i}`} />,
-            curr
-          ])}
-    </div>
-  )
-}

src/components/DrawPDFFields/internal/Counterpart.module.scss

@@ -1,3 +0,0 @@
-.counterpartSelectValue {
-  display: flex;
-}

src/components/DrawPDFFields/internal/Counterpart.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { User } from '../../../types'
-import _ from 'lodash'
-import { npubToHex, getProfileUsername } from '../../../utils'
-import { AvatarIconButton } from '../../UserAvatarIconButton'
-import styles from './Counterpart.module.scss'
-import { NDKUserProfile } from '@nostr-dev-kit/ndk'
-
-interface CounterpartProps {
-  npub: string
-  userProfiles: {
-    [key: string]: NDKUserProfile
-  }
-  signers: User[]
-}
-
-export const Counterpart = React.memo(
-  ({ npub, userProfiles, signers }: CounterpartProps) => {
-    let displayValue = _.truncate(npub, { length: 16 })
-
-    const signer = signers.find((u) => u.pubkey === npubToHex(npub))
-    if (signer) {
-      const profile = userProfiles[signer.pubkey]
-      displayValue = getProfileUsername(npub, profile)
-
-      return (
-        <div className={styles.counterpartSelectValue}>
-          <AvatarIconButton
-            src={profile?.image}
-            hexKey={signer.pubkey || undefined}
-            sx={{
-              padding: 0,
-              marginRight: '6px',
-              '> img': {
-                width: '21px',
-                height: '21px'
-              }
-            }}
-          />
-          {displayValue}
-        </div>
-      )
-    }
-
-    return displayValue
-  }
-)

src/components/DrawPDFFields/internal/FileItem.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { SigitFile } from '../../../utils/file'
-import { ExtensionFileBox } from '../../ExtensionFileBox'
-import { ImageItem } from './ImageItem'
-
-interface FileItemProps {
-  file: SigitFile
-}
-
-export const FileItem = React.memo(({ file }: FileItemProps) => {
-  const content = <ExtensionFileBox extension={file.extension} />
-  if (file.isImage) return <ImageItem file={file} />
-
-  return (
-    <div key={file.name} className="file-wrapper" id={`file-${file.name}`}>
-      {content}
-    </div>
-  )
-})

src/components/DrawPDFFields/internal/ImageItem.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { SigitFile } from '../../../utils/file'
-
-interface ImageItemProps {
-  file: SigitFile
-}
-
-export const ImageItem = React.memo(({ file }: ImageItemProps) => {
-  return <img className="file-image" src={file.objectUrl} alt={file.name} />
-})

src/components/DrawPDFFields/style.module.scss

@@ -1,118 +0,0 @@
-@import '../../styles/sizes.scss';
-
-.pdfFieldItem {
-  background: white;
-  padding: 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.pdfImageWrapper {
-  &.drawing {
-    cursor: crosshair;
-  }
-}
-
-.pdfImageWrapper:focus {
-  outline: none;
-}
-
-.placeholder {
-  position: absolute;
-  opacity: 0.5;
-  inset: 0;
-}
-
-.drawingRectangle {
-  position: absolute;
-  outline: 1px solid #01aaad;
-  z-index: 40;
-  background-color: #01aaad4b;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &.nonEditable {
-    cursor: default;
-    visibility: hidden;
-  }
-
-  .resizeHandle {
-    position: absolute;
-    right: -5px;
-    bottom: -5px;
-    width: 10px;
-    height: 10px;
-    background-color: #fff;
-    border: 1px solid rgb(160, 160, 160);
-    border-radius: 50%;
-    cursor: grab;
-
-    // Increase the area a bit so it's easier to click
-    &::after {
-      content: '';
-      position: absolute;
-      inset: -14px;
-    }
-  }
-
-  .removeHandle {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: -30px;
-    width: 20px;
-    height: 20px;
-    background-color: #fff;
-    border: 1px solid rgb(160, 160, 160);
-    border-radius: 50%;
-    color: #e74c3c;
-    font-size: 10px;
-    cursor: pointer;
-  }
-
-  .userSelect {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    bottom: -60px;
-    min-width: 193px;
-    min-height: 30px;
-    padding: 5px 0;
-  }
-}
-
-.counterpartAvatar {
-  img {
-    width: 21px;
-    height: 21px;
-  }
-}
-
-.signingRectangle {
-  position: absolute;
-  outline: 1px solid #01aaad;
-  z-index: 40;
-  background-color: #01aaad4b;
-  cursor: pointer;
-
-  &.edited {
-    outline: 1px dotted #01aaad;
-  }
-}
-
-.drawingRectanglePreview {
-  position: absolute;
-  outline: 1px solid;
-  z-index: 50;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-  touch-action: none;
-  opacity: 0.8;
-}

src/components/ExtensionFileBox.tsx

@@ -1,6 +0,0 @@
-interface ExtensionFileBoxProps {
-  extension: string
-}
-export const ExtensionFileBox = ({ extension }: ExtensionFileBoxProps) => (
-  <div className="extension-file-box">This is a {extension} file</div>
-)

src/components/FileDivider.tsx

@@ -1,12 +0,0 @@
-import Divider from '@mui/material/Divider/Divider'
-
-export const FileDivider = () => (
-  <Divider
-    sx={{
-      fontSize: '12px',
-      color: 'rgba(0,0,0,0.15)'
-    }}
-  >
-    File Separator
-  </Divider>
-)

src/components/FileList/index.tsx

@@ -1,98 +0,0 @@
-import React from 'react'
-import { Button, Menu, MenuItem } from '@mui/material'
-import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faCheck,
-  faLock,
-  faTriangleExclamation
-} from '@fortawesome/free-solid-svg-icons'
-import { CurrentUserFile } from '../../types/file.ts'
-import styles from './style.module.scss'
-
-interface FileListProps {
-  files: CurrentUserFile[]
-  currentFile: CurrentUserFile
-  setCurrentFile: (file: CurrentUserFile) => void
-  handleExport?: () => void
-  handleEncryptedExport?: () => void
-}
-
-const FileList = ({
-  files,
-  currentFile,
-  setCurrentFile,
-  handleExport,
-  handleEncryptedExport
-}: FileListProps) => {
-  const isActive = (file: CurrentUserFile) => file.id === currentFile.id
-  return (
-    <div className={styles.wrap}>
-      <ul className={styles.files}>
-        {files.map((currentUserFile: CurrentUserFile) => (
-          <li
-            key={currentUserFile.id}
-            className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
-            onClick={() => setCurrentFile(currentUserFile)}
-          >
-            <div className={styles.fileNumber}>{currentUserFile.id}</div>
-            <div className={styles.fileInfo}>
-              <div className={styles.fileName}>{currentUserFile.file.name}</div>
-            </div>
-
-            <div className={styles.fileVisual}>
-              {currentUserFile.isHashValid && (
-                <FontAwesomeIcon icon={faCheck} />
-              )}
-            </div>
-          </li>
-        ))}
-      </ul>
-
-      {(typeof handleExport === 'function' ||
-        typeof handleEncryptedExport === 'function') && (
-        <PopupState variant="popover" popupId="download-popup-menu">
-          {(popupState) => (
-            <React.Fragment>
-              <Button variant="contained" {...bindTrigger(popupState)}>
-                Export files
-              </Button>
-              <Menu {...bindMenu(popupState)}>
-                {typeof handleEncryptedExport === 'function' && (
-                  <MenuItem
-                    onClick={() => {
-                      popupState.close
-                      handleEncryptedExport()
-                    }}
-                  >
-                    <FontAwesomeIcon
-                      color={'var(--mui-palette-primary-main)'}
-                      icon={faLock}
-                    />
-                    &nbsp; ENCRYPTED
-                  </MenuItem>
-                )}
-                {typeof handleExport === 'function' && (
-                  <MenuItem
-                    onClick={() => {
-                      popupState.close
-                      handleExport()
-                    }}
-                  >
-                    <FontAwesomeIcon
-                      color={'var(--mui-palette-primary-main)'}
-                      icon={faTriangleExclamation}
-                    />
-                    &nbsp; UNENCRYPTED
-                  </MenuItem>
-                )}
-              </Menu>
-            </React.Fragment>
-          )}
-        </PopupState>
-      )}
-    </div>
-  )
-}
-
-export default FileList

src/components/FileList/style.module.scss

@@ -1,103 +0,0 @@
-.filesPageContainer {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 0.75fr 1.5fr 0.75fr;
-  grid-gap: 30px;
-  flex-grow: 1;
-}
-
-.wrap {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 15px;
-}
-
-.files {
-  border-radius: 4px;
-  background: white;
-  padding: 15px;
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  grid-gap: 15px;
-  overflow-y: auto;
-  overflow-x: none;
-}
-
-.files::-webkit-scrollbar {
-  width: 10px;
-}
-
-.files::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0.15);
-}
-
-.files::-webkit-scrollbar-thumb {
-  max-width: 10px;
-  border-radius: 2px;
-  background-color: #4c82a3;
-  cursor: grab;
-}
-
-.fileItem {
-  transition: ease 0.2s;
-  display: flex;
-  flex-direction: row;
-  grid-gap: 10px;
-  border-radius: 4px;
-  overflow: hidden;
-  background: #ffffff;
-  padding: 5px 10px;
-  align-items: center;
-  color: rgba(0, 0, 0, 0.5);
-  cursor: pointer;
-  flex-grow: 1;
-  font-size: 16px;
-  font-weight: 500;
-  min-height: 45px;
-
-  &.active {
-    background: #4c82a3;
-    color: white;
-  }
-}
-
-.fileItem:hover {
-  background: #4c82a3;
-  color: white;
-}
-
-.fileInfo {
-  flex-grow: 1;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.fileName {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-}
-
-.fileNumber {
-  font-size: 14px;
-  font-weight: 500;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 10px;
-}
-
-.fileVisual {
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 25px;
-  width: 25px;
-}

src/components/FontAwesomeIconStack/index.tsx

@@ -1,10 +0,0 @@
-import { PropsWithChildren } from 'react'
-
-import styles from './styles.module.scss'
-
-/**
- * This Component overlays FontAwesomeIcon icons on top of each other
- */
-export const FontAwesomeIconStack = ({ children }: PropsWithChildren) => {
-  return <div className={styles.iconStackContainer}>{children}</div>
-}

src/components/FontAwesomeIconStack/styles.module.scss

@@ -1,7 +0,0 @@
-.iconStackContainer {
-  position: relative;
-
-  > * {
-    position: absolute;
-  }
-}

src/components/Footer/Footer.tsx

@@ -1,137 +0,0 @@
-import { Box, Button, Link as LinkMui } from '@mui/material'
-import { Link } from 'react-router-dom'
-import styles from './style.module.scss'
-import { Container } from '../Container'
-import nostrImage from '../../assets/images/nostr.gif'
-import { appPublicRoutes } from '../../routes'
-import { createPortal } from 'react-dom'
-
-export const Footer = () =>
-  createPortal(
-    <footer className={`${styles.borderTop} ${styles.footer}`}>
-      <Container
-        style={{
-          paddingBlock: '50px'
-        }}
-      >
-        <Box
-          display={'grid'}
-          sx={{
-            gridTemplateColumns: {
-              xs: '1fr',
-              md: '0.5fr 2fr 0.5fr'
-            },
-            alignItems: {
-              xs: 'center',
-              md: 'start'
-            }
-          }}
-          gap={'50px'}
-        >
-          <LinkMui
-            sx={{
-              justifySelf: {
-                xs: 'center',
-                md: 'start'
-              }
-            }}
-            component={Link}
-            to={'/'}
-            className={styles.logo}
-          >
-            <img src="/logo.svg" alt="Logo" />
-          </LinkMui>
-          <Box
-            display={'grid'}
-            sx={{
-              gap: '15px',
-              gridTemplateColumns: {
-                xs: '1fr',
-                sm: 'repeat(2, 1fr)',
-                xl: 'repeat(3, 1fr)'
-              },
-              borderBlock: {
-                xs: 'solid 1px rgba(0, 0, 0, 0.1)',
-                md: 'unset'
-              },
-              paddingY: {
-                xs: '10px',
-                md: 'unset'
-              }
-            }}
-            component={'nav'}
-            className={styles.nav}
-          >
-            <Button
-              sx={{
-                justifyContent: 'center'
-              }}
-              component={Link}
-              to={'/'}
-              onClick={(event) => {
-                if (['', '#/'].includes(window.location.hash)) {
-                  event.preventDefault()
-                  window.scrollTo(0, 0)
-                }
-              }}
-              variant={'text'}
-            >
-              Home
-            </Button>
-            <Button
-              sx={{
-                justifyContent: 'center'
-              }}
-              component={LinkMui}
-              href={appPublicRoutes.docs}
-              target="_blank"
-              variant={'text'}
-            >
-              Documentation
-            </Button>
-            <Button
-              sx={{
-                justifyContent: 'center'
-              }}
-              component={LinkMui}
-              href={appPublicRoutes.source}
-              target="_blank"
-              variant={'text'}
-            >
-              Source
-            </Button>
-          </Box>
-          <Box
-            className={styles.links}
-            sx={{
-              justifySelf: {
-                xs: 'center',
-                md: 'end'
-              }
-            }}
-          >
-            <Button
-              component={LinkMui}
-              href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
-              target="_blank"
-              sx={{
-                minWidth: '45px',
-                padding: '10px'
-              }}
-              variant={'contained'}
-            >
-              <img src={nostrImage} width="25" alt="nostr logo" height="25" />
-            </Button>
-          </Box>
-        </Box>
-      </Container>
-      <div className={`${styles.borderTop} ${styles.credits}`}>
-        Built by&nbsp;
-        <a rel="noopener" href="https://nostrdev.com/" target="_blank">
-          Nostr Dev
-        </a>{' '}
-        2024.
-      </div>
-    </footer>,
-    document.getElementById('root')!
-  )

src/components/Footer/style.module.scss

@@ -1,49 +0,0 @@
-@import '../../styles/colors.scss';
-
-.borderTop {
-  border-top: solid 1px rgba(0, 0, 0, 0.075);
-}
-
-.footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  font-size: 14px;
-}
-
-.links {
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.5);
-
-  > a + a {
-    margin-left: 25px;
-  }
-}
-
-.nav {
-  color: rgba(0, 0, 0, 0.5);
-
-  a {
-    width: 100%;
-  }
-}
-
-.credits {
-  width: 100%;
-  text-align: center;
-  padding: 10px 0;
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.5);
-  font-weight: 500;
-}
-
-.logo {
-  width: 100%;
-  max-width: 300px;
-
-  > img {
-    width: 100%;
-    height: auto;
-  }
-}

src/components/Landing/CardComponent/CardComponent.tsx

@@ -1,28 +0,0 @@
-import { ReactElement } from 'react'
-
-import styles from './style.module.scss'
-
-interface CardComponentProps {
-  icon: ReactElement
-  title: ReactElement
-  description: ReactElement
-  actions?: ReactElement
-}
-
-export const CardComponent = ({
-  icon,
-  title,
-  description,
-  actions
-}: CardComponentProps) => {
-  return (
-    <div className={styles.card}>
-      <h3 className={styles.title}>
-        <div className={styles.icon}>{icon}</div>
-        {title}
-      </h3>
-      <p className={styles.description}>{description}</p>
-      {actions ? <div className={styles.actions}>{actions}</div> : null}
-    </div>
-  )
-}

src/components/Landing/CardComponent/style.module.scss

@@ -1,64 +0,0 @@
-@import '../../../styles/colors.scss';
-
-.card {
-  border-radius: 4px;
-  padding: 25px;
-
-  position: relative;
-  background: $overlay-background-color;
-
-  transition: ease 0.2s;
-
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-
-  &:hover {
-    color: white;
-    background: $primary-main;
-
-    .icon,
-    a {
-      color: inherit;
-    }
-  }
-
-  button {
-    transition:
-      color 0s,
-      background-color 0.2s;
-  }
-
-  a {
-    transition: none;
-  }
-}
-
-.icon {
-  color: $primary-main;
-  font-size: 25px;
-  line-height: 1;
-
-  height: 25px;
-  width: 25px;
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  grid-gap: 10px;
-  align-items: center;
-
-  font-weight: bold;
-  font-size: 20px;
-}
-
-.description {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.actions {
-  margin-top: auto;
-  text-align: right;
-}

src/components/LoadingSpinner/index.tsx

@@ -1,43 +1,18 @@
-import { createPortal } from 'react-dom'
 import styles from './style.module.scss'
-import { PropsWithChildren } from 'react'
 
 interface Props {
-  desc?: string
-  variant?: 'small' | 'default'
+  desc: string
 }
 
-export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
-  const { desc, children, variant = 'default' } = props
+export const LoadingSpinner = (props: Props) => {
+  const { desc } = props
 
-  switch (variant) {
-    case 'small':
-      return (
-        <div
-          className={`${styles.loadingSpinnerContainer}`}
-          data-variant={variant}
-        >
-          <div className={styles.loadingSpinner}></div>
-        </div>
-      )
-
-    default:
-      return createPortal(
-        <div className={styles.loadingSpinnerOverlay}>
-          <div
-            className={styles.loadingSpinnerContainer}
-            data-variant={variant}
-          >
-            <div className={styles.loadingSpinner}></div>
-            {desc && (
-              <div className={styles.loadingSpinnerDesc}>
-                {desc}
-                {children}
-              </div>
-            )}
-          </div>
-        </div>,
-        document.getElementById('root')!
-      )
-  }
+  return (
+    <div className={styles.loadingSpinnerOverlay}>
+      <div className={styles.loadingSpinnerContainer}>
+        <div className={styles.loadingSpinner}></div>
+        {desc && <span>{desc}</span>}
+      </div>
+    </div>
+  )
 }

src/components/LoadingSpinner/style.module.scss

@@ -1,59 +1,32 @@
-@import '../../styles/colors.scss';
-
 .loadingSpinnerOverlay {
   position: fixed;
-  inset: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 70;
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-}
+  z-index: 9999;
 
-.loadingSpinnerContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  &[data-variant='default'] {
-    width: 100%;
-    max-width: 500px;
-    margin: 25px 20px;
-    background: $overlay-background-color;
-    border-radius: 4px;
-    box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
+  .loadingSpinnerContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
-  &[data-variant='small'] {
-    min-height: 250px;
+
+  .loadingSpinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
   }
 }
 
-.loadingSpinner {
-  background: url('/favicon.png') no-repeat center / cover;
-  margin: 40px 25px;
-  width: 65px;
-  height: 65px;
-  animation: spin 1s linear infinite;
-}
-
-.loadingSpinnerDesc {
-  width: 100%;
-  padding: 15px;
-  border-top: solid 1px rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.5);
-
-  font-size: 16px;
-  font-weight: 400;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);

src/components/MarkFormField/index.tsx

@@ -1,203 +0,0 @@
-import { CurrentUserMark } from '../../types/mark.ts'
-import {
-  findNextIncompleteCurrentUserMark,
-  getToolboxLabelByMarkType,
-  isCurrentUserMarksComplete,
-  isCurrentValueLast
-} from '../../utils'
-import React, { useState } from 'react'
-import { MarkInput } from '../MarkTypeStrategy/MarkInput.tsx'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheck, faDownload } from '@fortawesome/free-solid-svg-icons'
-import { Button } from '@mui/material'
-import styles from './style.module.scss'
-import { ButtonUnderline } from '../ButtonUnderline/index.tsx'
-
-interface MarkFormFieldProps {
-  currentUserMarks: CurrentUserMark[]
-  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
-  handleSelectedMarkValueChange: (value: string) => void
-  handleSubmit: (
-    event: React.MouseEvent<HTMLButtonElement>,
-    type: 'online' | 'offline'
-  ) => void
-  selectedMark: CurrentUserMark | null
-  selectedMarkValue: string
-}
-
-/**
- * Responsible for rendering a form field connected to a mark and keeping track of its value.
- */
-const MarkFormField = ({
-  handleSubmit,
-  handleSelectedMarkValueChange,
-  selectedMark,
-  selectedMarkValue,
-  currentUserMarks,
-  handleCurrentUserMarkChange
-}: MarkFormFieldProps) => {
-  const [displayActions, setDisplayActions] = useState(true)
-  const [complete, setComplete] = useState(false)
-  const isReadyToSign = () =>
-    isCurrentUserMarksComplete(currentUserMarks) ||
-    isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
-  const isCurrent = (currentMark: CurrentUserMark) =>
-    currentMark.id === selectedMark?.id && !complete
-  const isDone = (currentMark: CurrentUserMark) =>
-    isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
-  const findNext = () => {
-    return (
-      currentUserMarks[selectedMark!.id] ||
-      findNextIncompleteCurrentUserMark(currentUserMarks)
-    )
-  }
-  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault()
-    // Without this line, we lose mark values when switching
-    handleCurrentUserMarkChange(selectedMark!)
-
-    if (!complete) {
-      isReadyToSign()
-        ? setComplete(true)
-        : handleCurrentUserMarkChange(findNext()!)
-    }
-  }
-
-  const toggleActions = () => setDisplayActions(!displayActions)
-  const markLabel = selectedMark
-    ? getToolboxLabelByMarkType(selectedMark.mark.type)
-    : ''
-  const handleCurrentUserMarkClick = (mark: CurrentUserMark) => {
-    setComplete(false)
-    handleCurrentUserMarkChange(mark)
-  }
-
-  const handleSelectCompleteMark = () => {
-    if (currentUserMarks.length) handleCurrentUserMarkChange(selectedMark!)
-    setComplete(true)
-  }
-
-  const handleSignAndComplete =
-    (type: 'online' | 'offline') =>
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      handleSubmit(event, type)
-    }
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.trigger}>
-        <button
-          onClick={toggleActions}
-          className={styles.triggerBtn}
-          type="button"
-          title="Toggle"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="-64 0 512 512"
-            width="1em"
-            height="1em"
-            fill="currentColor"
-            transform={displayActions ? 'rotate(180)' : 'rotate(0)'}
-          >
-            <path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
-          </svg>
-        </button>
-      </div>
-      <div className={`${styles.actions} ${displayActions && styles.expanded}`}>
-        <div className={styles.actionsWrapper}>
-          <div className={styles.actionsTop}>
-            <div className={styles.actionsTopInfo}>
-              {!complete && selectedMark ? (
-                <p className={styles.actionsTopInfoText}>Add {markLabel}</p>
-              ) : (
-                <p className={styles.actionsTopInfoText}>Finish</p>
-              )}
-            </div>
-          </div>
-          <div className={styles.inputWrapper}>
-            {!complete && selectedMark ? (
-              <form onSubmit={(e) => handleFormSubmit(e)}>
-                <MarkInput
-                  markType={selectedMark.mark.type}
-                  key={selectedMark.id}
-                  value={selectedMarkValue}
-                  placeholder={markLabel}
-                  handler={handleSelectedMarkValueChange}
-                  userMark={selectedMark}
-                />
-                <div className={styles.actionsBottom}>
-                  <Button type="submit" className={styles.submitButton}>
-                    NEXT
-                  </Button>
-                </div>
-              </form>
-            ) : (
-              <>
-                <div className={styles.actionsBottom}>
-                  <Button
-                    onClick={handleSignAndComplete('online')}
-                    className={[
-                      styles.submitButton,
-                      styles.completeButton
-                    ].join(' ')}
-                    disabled={!isReadyToSign()}
-                    autoFocus
-                  >
-                    SIGN AND BROADCAST
-                  </Button>
-                </div>
-                <ButtonUnderline
-                  onClick={handleSignAndComplete('offline')}
-                  disabled={!isReadyToSign()}
-                >
-                  <FontAwesomeIcon icon={faDownload} />
-                  Sign and export locally instead
-                </ButtonUnderline>
-              </>
-            )}
-
-            <div className={styles.footerContainer}>
-              <div className={styles.footer}>
-                {currentUserMarks.map((mark, index) => {
-                  return (
-                    <div className={styles.pagination} key={index}>
-                      <button
-                        type="button"
-                        className={`${styles.paginationButton} ${isDone(mark) ? styles.paginationButtonDone : ''}`}
-                        onClick={() => handleCurrentUserMarkClick(mark)}
-                      >
-                        {mark.id}
-                      </button>
-                      {isCurrent(mark) && (
-                        <div className={styles.paginationButtonCurrent}></div>
-                      )}
-                    </div>
-                  )
-                })}
-                <div className={styles.pagination}>
-                  <button
-                    type="button"
-                    className={`${styles.paginationButton} ${isReadyToSign() ? styles.paginationButtonDone : ''}`}
-                    onClick={handleSelectCompleteMark}
-                    title="Complete"
-                  >
-                    <FontAwesomeIcon
-                      className={styles.finishPage}
-                      icon={faCheck}
-                    />
-                  </button>
-                  {complete && (
-                    <div className={styles.paginationButtonCurrent}></div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default MarkFormField

src/components/MarkFormField/style.module.scss

@@ -1,228 +0,0 @@
-@import '../../styles/sizes.scss';
-
-.container {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-
-  @media only screen and (min-width: 768px) {
-    bottom: 0;
-    right: 0;
-    left: 0;
-  }
-  bottom: $tabs-height + 5px;
-  right: 5px;
-  left: 5px;
-
-  align-items: center;
-  z-index: 40;
-
-  button {
-    transition: ease 0.2s;
-    width: auto;
-    border-radius: 4px;
-    outline: unset;
-    border: unset;
-    background: unset;
-    color: #ffffff;
-    background: #4c82a3;
-    font-weight: 500;
-    font-size: 14px;
-    padding: 8px 15px;
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    grid-gap: 12px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: unset;
-    position: relative;
-    cursor: pointer;
-  }
-
-  button:hover {
-    background: #5e8eab;
-    color: white;
-  }
-
-  button:active {
-    background: #447592;
-    color: white;
-  }
-
-  .actionButtons {
-    display: flex;
-    flex-direction: row;
-    grid-gap: 5px;
-  }
-
-  .actionsBottom {
-    display: flex;
-    flex-direction: row;
-    grid-gap: 5px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .submitButton {
-    width: 100%;
-    max-width: 300px;
-    margin-top: 10px;
-  }
-
-  .completeButton {
-    font-size: 18px;
-    padding: 10px 20px;
-  }
-
-  .paginationButton {
-    font-size: 12px;
-    padding: 5px 10px;
-    border-radius: 3px;
-    background: rgba(0, 0, 0, 0.1);
-    color: rgba(0, 0, 0, 0.5);
-  }
-
-  .paginationButton:hover,
-  .paginationButton:focus {
-    background: #447592;
-    color: rgba(255, 255, 255, 0.5);
-  }
-
-  .paginationButtonDone {
-    background: #5e8eab;
-    color: rgb(255, 255, 255);
-  }
-
-  .paginationButtonCurrent {
-    height: 2px;
-    width: 100%;
-    background: #4c82a3;
-  }
-
-  .trigger {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-  }
-
-  .triggerBtn {
-    background: white;
-    color: #434343;
-    padding: 5px 30px;
-    box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
-    position: absolute;
-    top: -25px;
-  }
-}
-
-.actions {
-  background: white;
-  width: 100%;
-  border-radius: 5px;
-  padding: 10px 20px;
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  grid-gap: 15px;
-  box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
-  max-width: 450px;
-
-  &.expanded {
-    display: flex;
-  }
-}
-
-.actionsWrapper {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 20px;
-  flex-grow: 1;
-  width: 100%;
-}
-
-.actionsTop {
-  display: flex;
-  flex-direction: row;
-  grid-gap: 10px;
-  align-items: center;
-}
-
-.actionsTopInfo {
-  flex-grow: 1;
-}
-
-.actionsTopInfoText {
-  font-size: 16px;
-  color: #434343;
-}
-
-.actionsTrigger {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.inputWrapper {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 10px;
-}
-
-.textInput {
-  height: 100px;
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  border: solid 2px #4c82a3;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.input {
-  border-radius: 4px;
-  border: solid 1px rgba(0, 0, 0, 0.15);
-  padding: 5px 10px;
-  font-size: 16px;
-  width: 100%;
-  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%),
-    linear-gradient(white, white);
-}
-
-.input:focus {
-  border: solid 1px rgba(0, 0, 0, 0.15);
-  outline: none;
-  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 100%),
-    linear-gradient(white, white);
-}
-
-.footerContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex-direction: row;
-  grid-gap: 5px;
-  align-items: start;
-  justify-content: center;
-  width: 100%;
-}
-
-.pagination {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 5px;
-}
-
-.finishPage {
-  padding: 1px 0;
-}

src/components/MarkTypeStrategy/MarkInput.tsx

@@ -1,16 +0,0 @@
-import { MarkType } from '../../types/drawing'
-import { MARK_TYPE_CONFIG, MarkInputProps } from './MarkStrategy'
-
-interface MarkInputComponentProps extends MarkInputProps {
-  markType: MarkType
-}
-
-export const MarkInput = ({ markType, ...rest }: MarkInputComponentProps) => {
-  const { input: InputComponent } = MARK_TYPE_CONFIG[markType] || {}
-
-  if (typeof InputComponent !== 'undefined') {
-    return <InputComponent {...rest} />
-  }
-
-  return null
-}

src/components/MarkTypeStrategy/MarkRender.tsx

@@ -1,20 +0,0 @@
-import { MarkType } from '../../types/drawing'
-import { MARK_TYPE_CONFIG, MarkRenderProps } from './MarkStrategy'
-
-interface MarkRenderComponentProps extends MarkRenderProps {
-  markType: MarkType
-}
-
-export const MarkRender = ({ markType, ...rest }: MarkRenderComponentProps) => {
-  const { render: RenderComponent } = MARK_TYPE_CONFIG[markType] || {}
-
-  if (typeof RenderComponent !== 'undefined') {
-    return <RenderComponent {...rest} />
-  }
-
-  return <DefaultRenderComponent {...rest} />
-}
-
-const DefaultRenderComponent = ({ value }: MarkRenderProps) => (
-  <span>{value}</span>
-)

src/components/MarkTypeStrategy/MarkStrategy.tsx

@@ -1,32 +0,0 @@
-import { MarkType } from '../../types/drawing'
-import { CurrentUserMark, Mark } from '../../types/mark'
-import { TextStrategy } from './Text'
-import { SignatureStrategy } from './Signature'
-
-export interface MarkInputProps {
-  value: string
-  handler: (value: string) => void
-  placeholder?: string
-  userMark?: CurrentUserMark
-}
-
-export interface MarkRenderProps {
-  value?: string
-  mark: Mark
-}
-
-export interface MarkStrategy {
-  input: React.FC<MarkInputProps>
-  render: React.FC<MarkRenderProps>
-  encryptAndUpload?: (value: string, key?: string) => Promise<string>
-  fetchAndDecrypt?: (value: string, key?: string) => Promise<string>
-}
-
-export type MarkStrategies = {
-  [key in MarkType]?: MarkStrategy
-}
-
-export const MARK_TYPE_CONFIG: MarkStrategies = {
-  [MarkType.TEXT]: TextStrategy,
-  [MarkType.SIGNATURE]: SignatureStrategy
-}

src/components/MarkTypeStrategy/Signature/Input.module.scss

@@ -1,44 +0,0 @@
-@import '../../../styles/colors.scss';
-
-$padding: 5px;
-
-.wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: $padding;
-}
-
-.relative {
-  position: relative;
-  outline: 1px solid black;
-}
-
-.canvas {
-  background-color: $body-background-color;
-  cursor: crosshair;
-
-  // Disable panning/zooming when touching canvas element
-  -ms-touch-action: none;
-  touch-action: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.absolute {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.reset {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: $padding;
-  color: $primary-main;
-
-  &:hover {
-    color: $primary-dark;
-  }
-}

src/components/MarkTypeStrategy/Signature/Input.tsx

@@ -1,101 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-import { faEraser } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { MarkRenderSignature } from './Render'
-import SignaturePad from 'signature_pad'
-import { SIGNATURE_PAD_OPTIONS, SIGNATURE_PAD_SIZE } from '../../../utils/const'
-import { BasicPoint } from 'signature_pad/dist/types/point'
-import { MarkInputProps } from '../MarkStrategy'
-import styles from './Input.module.scss'
-
-export const MarkInputSignature = ({
-  value,
-  handler,
-  userMark
-}: MarkInputProps) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const signaturePad = useRef<SignaturePad | null>(null)
-
-  const update = useCallback(() => {
-    const data = signaturePad.current?.toData()
-    const reduced = data?.map((pg) => pg.points)
-    const json = JSON.stringify(reduced)
-
-    if (signaturePad.current && !signaturePad.current?.isEmpty()) {
-      handler(json)
-    } else {
-      handler('')
-    }
-  }, [handler])
-
-  useEffect(() => {
-    const handleEndStroke = () => {
-      update()
-    }
-    if (canvasRef.current) {
-      if (signaturePad.current === null) {
-        signaturePad.current = new SignaturePad(
-          canvasRef.current,
-          SIGNATURE_PAD_OPTIONS
-        )
-      }
-
-      signaturePad.current.addEventListener('endStroke', handleEndStroke)
-    }
-
-    return () => {
-      window.removeEventListener('endStroke', handleEndStroke)
-    }
-  }, [update])
-
-  useEffect(() => {
-    if (signaturePad.current) {
-      if (value) {
-        signaturePad.current.fromData(
-          JSON.parse(value).map((p: BasicPoint[]) => ({
-            points: p
-          }))
-        )
-      } else {
-        signaturePad.current?.clear()
-      }
-    }
-    update()
-  }, [update, value])
-
-  const handleReset = () => {
-    signaturePad.current?.clear()
-    update()
-  }
-
-  return (
-    <div className={styles.wrapper}>
-      <div
-        className={styles.relative}
-        style={{
-          width: SIGNATURE_PAD_SIZE.width,
-          height: SIGNATURE_PAD_SIZE.height
-        }}
-      >
-        <canvas
-          width={SIGNATURE_PAD_SIZE.width}
-          height={SIGNATURE_PAD_SIZE.height}
-          ref={canvasRef}
-          className={styles.canvas}
-        ></canvas>
-        {typeof userMark?.mark !== 'undefined' && (
-          <div className={styles.absolute}>
-            <MarkRenderSignature
-              key={userMark.mark.value}
-              value={userMark.mark.value}
-              mark={userMark.mark}
-            />
-          </div>
-        )}
-        <div className={styles.reset}>
-          <FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
-        </div>
-      </div>
-    </div>
-  )
-}

src/components/MarkTypeStrategy/Signature/Render.module.scss

@@ -1,9 +0,0 @@
-.img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  overflow: hidden;
-  pointer-events: none;
-  -webkit-user-select: none;
-  user-select: none;
-}

src/components/MarkTypeStrategy/Signature/Render.tsx

@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react'
-import SignaturePad from 'signature_pad'
-import { SIGNATURE_PAD_OPTIONS, SIGNATURE_PAD_SIZE } from '../../../utils'
-import { BasicPoint } from 'signature_pad/dist/types/point'
-import { MarkRenderProps } from '../MarkStrategy'
-import styles from './Render.module.scss'
-
-export const MarkRenderSignature = ({ value }: MarkRenderProps) => {
-  const [dataUrl, setDataUrl] = useState<string | undefined>()
-
-  useEffect(() => {
-    if (value) {
-      const canvas = document.createElement('canvas')
-      canvas.width = SIGNATURE_PAD_SIZE.width
-      canvas.height = SIGNATURE_PAD_SIZE.height
-      const pad = new SignaturePad(canvas, SIGNATURE_PAD_OPTIONS)
-      pad.fromData(
-        JSON.parse(value).map((p: BasicPoint[]) => ({
-          points: p
-        }))
-      )
-      setDataUrl(canvas.toDataURL('image/webp'))
-    }
-  }, [value])
-
-  return dataUrl ? <img src={dataUrl} className={styles.img} alt="" /> : null
-}

src/components/MarkTypeStrategy/Signature/index.tsx

@@ -1,89 +0,0 @@
-import axios from 'axios'
-import {
-  decryptArrayBuffer,
-  encryptArrayBuffer,
-  getHash,
-  uploadToFileStorage
-} from '../../../utils'
-import { MarkStrategy } from '../MarkStrategy'
-import { MarkInputSignature } from './Input'
-import { MarkRenderSignature } from './Render'
-
-export const SignatureStrategy: MarkStrategy = {
-  input: MarkInputSignature,
-  render: MarkRenderSignature,
-  encryptAndUpload: async (value, encryptionKey) => {
-    // Value is the stringified signature object
-    // Encode it to the arrayBuffer
-    const encoder = new TextEncoder()
-    const uint8Array = encoder.encode(value)
-
-    if (!encryptionKey) {
-      throw new Error('Signature requires an encryption key')
-    }
-
-    // Encrypt the file contents with the same encryption key from the create signature
-    const encryptedArrayBuffer = await encryptArrayBuffer(
-      uint8Array,
-      encryptionKey
-    )
-
-    const hash = await getHash(encryptedArrayBuffer)
-    if (!hash) {
-      throw new Error("Can't get encrypted file hash.")
-    }
-
-    // Create the encrypted json file from array buffer and hash
-    const file = new File([encryptedArrayBuffer], `${hash}.json`)
-
-    try {
-      const url = await uploadToFileStorage(file)
-      console.info(`${file.name} uploaded to file storage`)
-      return url
-    } catch (error) {
-      if (error instanceof Error) {
-        console.error(
-          `Error occurred in uploading file ${file.name}`,
-          error.message
-        )
-      }
-    }
-
-    return value
-  },
-  fetchAndDecrypt: async (value, encryptionKey) => {
-    if (!encryptionKey) {
-      throw new Error('Signature requires an encryption key')
-    }
-
-    const encryptedArrayBuffer = await axios.get(value, {
-      responseType: 'arraybuffer'
-    })
-
-    // Verify hash
-    const parts = value.split('/')
-    const urlHash = parts[parts.length - 1]
-    const hash = await getHash(encryptedArrayBuffer.data)
-    if (hash !== urlHash) {
-      // TODO: handle hash verification failing
-      throw new Error('Unable to verify signature')
-    }
-
-    const arrayBuffer = await decryptArrayBuffer(
-      encryptedArrayBuffer.data,
-      encryptionKey
-    ).catch((err) => {
-      console.log('err in decryption:>> ', err)
-      return null
-    })
-
-    if (arrayBuffer) {
-      // decode json
-      const decoder = new TextDecoder()
-      const json = decoder.decode(arrayBuffer)
-      return json
-    }
-
-    return value
-  }
-}

src/components/MarkTypeStrategy/Text/Input.tsx

@@ -1,19 +0,0 @@
-import { MarkInputProps } from '../MarkStrategy'
-import styles from '../../MarkFormField/style.module.scss'
-
-export const MarkInputText = ({
-  value,
-  handler,
-  placeholder
-}: MarkInputProps) => {
-  return (
-    <input
-      className={styles.input}
-      placeholder={placeholder}
-      onChange={(e) => {
-        handler(e.currentTarget.value)
-      }}
-      value={value}
-    />
-  )
-}

src/components/MarkTypeStrategy/Text/index.tsx

@@ -1,7 +0,0 @@
-import { MarkStrategy } from '../MarkStrategy'
-import { MarkInputText } from './Input'
-
-export const TextStrategy: MarkStrategy = {
-  input: MarkInputText,
-  render: ({ value }) => <>{value}</>
-}

src/components/PDFView/PdfItem.tsx

@@ -1,58 +0,0 @@
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import { SigitFile } from '../../utils/file.ts'
-import { ExtensionFileBox } from '../ExtensionFileBox.tsx'
-import PdfPageItem from './PdfPageItem.tsx'
-
-interface PdfItemProps {
-  currentUserMarks: CurrentUserMark[]
-  handleMarkClick: (id: number) => void
-  otherUserMarks: Mark[]
-  file: SigitFile
-  selectedMark: CurrentUserMark | null
-  selectedMarkValue: string
-}
-
-/**
- * Responsible for displaying pages of a single Pdf File.
- */
-const PdfItem = ({
-  file,
-  currentUserMarks,
-  handleMarkClick,
-  selectedMarkValue,
-  selectedMark,
-  otherUserMarks
-}: PdfItemProps) => {
-  const filterByPage = (
-    marks: CurrentUserMark[],
-    page: number
-  ): CurrentUserMark[] => {
-    return marks.filter((m) => m.mark.location.page === page)
-  }
-  const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
-    return marks.filter((mark) => mark.location.page === page)
-  }
-  if (file.isPdf) {
-    return file.pages?.map((page, i) => {
-      return (
-        <PdfPageItem
-          fileName={file.name}
-          pageIndex={i}
-          page={page}
-          key={i}
-          currentUserMarks={filterByPage(currentUserMarks, i)}
-          handleMarkClick={handleMarkClick}
-          selectedMarkValue={selectedMarkValue}
-          selectedMark={selectedMark}
-          otherUserMarks={filterMarksByPage(otherUserMarks, i)}
-        />
-      )
-    })
-  } else if (file.isImage) {
-    return <img className="file-image" src={file.objectUrl} alt={file.name} />
-  } else {
-    return <ExtensionFileBox extension={file.extension} />
-  }
-}
-
-export default PdfItem

src/components/PDFView/PdfMarkItem.tsx

@@ -1,62 +0,0 @@
-import { CurrentUserMark } from '../../types/mark.ts'
-import styles from '../DrawPDFFields/style.module.scss'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
-import { useScale } from '../../hooks/useScale.tsx'
-import { forwardRef } from 'react'
-import { npubToHex } from '../../utils/nostr.ts'
-import { MarkRender } from '../MarkTypeStrategy/MarkRender.tsx'
-
-interface PdfMarkItemProps {
-  userMark: CurrentUserMark
-  handleMarkClick: (id: number) => void
-  selectedMarkValue: string
-  selectedMark: CurrentUserMark | null
-  pageWidth: number
-}
-
-/**
- * Responsible for display an individual Pdf Mark.
- */
-const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
-  (
-    { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
-    ref
-  ) => {
-    const { location } = userMark.mark
-    const handleClick = () => handleMarkClick(userMark.mark.id)
-    const isEdited = () => selectedMark?.mark.id === userMark.mark.id
-    const getMarkValue = () =>
-      isEdited() ? selectedMarkValue : userMark.currentValue
-    const { from } = useScale()
-    return (
-      <div
-        ref={ref}
-        onClick={handleClick}
-        className={`file-mark ${styles.signingRectangle} ${isEdited() && styles.edited}`}
-        style={{
-          backgroundColor: selectedMark?.mark.npub
-            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
-            : undefined,
-          outlineColor: selectedMark?.mark.npub
-            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
-            : undefined,
-          left: inPx(from(pageWidth, location.left)),
-          top: inPx(from(pageWidth, location.top)),
-          width: inPx(from(pageWidth, location.width)),
-          height: inPx(from(pageWidth, location.height)),
-          fontFamily: FONT_TYPE,
-          fontSize: inPx(from(pageWidth, FONT_SIZE))
-        }}
-      >
-        <MarkRender
-          key={getMarkValue()}
-          markType={userMark.mark.type}
-          value={getMarkValue()}
-          mark={userMark.mark}
-        />
-      </div>
-    )
-  }
-)
-
-export default PdfMarkItem

src/components/PDFView/PdfMarking.tsx

@@ -1,171 +0,0 @@
-import PdfView from './index.tsx'
-import MarkFormField from '../MarkFormField'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import React, { useState, useEffect } from 'react'
-import {
-  findNextIncompleteCurrentUserMark,
-  getUpdatedMark,
-  updateCurrentUserMarks
-} from '../../utils'
-import { EMPTY } from '../../utils/const.ts'
-import { Container } from '../Container'
-import signPageStyles from '../../pages/sign/style.module.scss'
-import { CurrentUserFile } from '../../types/file.ts'
-import FileList from '../FileList'
-import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
-import { UsersDetails } from '../UsersDetails.tsx'
-import { Meta } from '../../types'
-import {
-  faCircleInfo,
-  faFileDownload,
-  faPen
-} from '@fortawesome/free-solid-svg-icons'
-
-interface PdfMarkingProps {
-  currentUserMarks: CurrentUserMark[]
-  files: CurrentUserFile[]
-  handleSign: () => void
-  handleSignOffline: () => void
-  meta: Meta | null
-  otherUserMarks: Mark[]
-  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
-  setUpdatedMarks: (markToUpdate: Mark) => void
-}
-
-/**
- * Top-level component responsible for displaying Pdfs, Pages, and Marks,
- * as well as tracking if the document is ready to be signed.
- * @param props
- * @constructor
- */
-const PdfMarking = ({
-  files,
-  currentUserMarks,
-  setCurrentUserMarks,
-  setUpdatedMarks,
-  handleSign,
-  handleSignOffline,
-  meta,
-  otherUserMarks
-}: PdfMarkingProps) => {
-  const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
-  const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
-  const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
-
-  useEffect(() => {
-    if (selectedMark === null && currentUserMarks.length > 0) {
-      setSelectedMark(
-        findNextIncompleteCurrentUserMark(currentUserMarks) ||
-          currentUserMarks[0]
-      )
-    }
-  }, [currentUserMarks, selectedMark])
-
-  useEffect(() => {
-    if (currentFile === null && files.length > 0) {
-      setCurrentFile(files[0])
-    }
-  }, [files, currentFile])
-
-  const handleMarkClick = (id: number) => {
-    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
-
-    if (nextMark) handleCurrentUserMarkChange(nextMark)
-  }
-
-  const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
-    if (!selectedMark) return
-    const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
-      selectedMark,
-      selectedMarkValue
-    )
-
-    const updatedCurrentUserMarks = updateCurrentUserMarks(
-      currentUserMarks,
-      updatedSelectedMark
-    )
-    setCurrentUserMarks(updatedCurrentUserMarks)
-
-    // If clicking on the same mark, don't update the value, otherwise do update
-    if (mark.id !== selectedMark.id) {
-      setSelectedMarkValue(mark.currentValue ?? EMPTY)
-      setSelectedMark(mark)
-    }
-  }
-
-  /**
-   * Sign and Complete
-   */
-  const handleSubmit = (
-    event: React.MouseEvent<HTMLButtonElement>,
-    type: 'online' | 'offline'
-  ) => {
-    event.preventDefault()
-    if (selectedMarkValue && selectedMark) {
-      const updatedMark: CurrentUserMark = getUpdatedMark(
-        selectedMark,
-        selectedMarkValue
-      )
-
-      setSelectedMarkValue(EMPTY)
-      const updatedCurrentUserMarks = updateCurrentUserMarks(
-        currentUserMarks,
-        updatedMark
-      )
-      setCurrentUserMarks(updatedCurrentUserMarks)
-      setSelectedMark(null)
-      setUpdatedMarks(updatedMark.mark)
-    }
-
-    if (type === 'online') handleSign()
-    else if (type === 'offline') handleSignOffline()
-  }
-
-  const handleChange = (value: string) => {
-    setSelectedMarkValue(value)
-  }
-
-  return (
-    <>
-      <Container className={signPageStyles.container}>
-        <StickySideColumns
-          left={
-            <div>
-              {currentFile !== null && (
-                <FileList
-                  files={files}
-                  currentFile={currentFile}
-                  setCurrentFile={setCurrentFile}
-                />
-              )}
-            </div>
-          }
-          right={meta !== null && <UsersDetails meta={meta} />}
-          leftIcon={faFileDownload}
-          centerIcon={faPen}
-          rightIcon={faCircleInfo}
-        >
-          <PdfView
-            currentFile={currentFile}
-            files={files}
-            handleMarkClick={handleMarkClick}
-            selectedMarkValue={selectedMarkValue}
-            selectedMark={selectedMark}
-            currentUserMarks={currentUserMarks}
-            otherUserMarks={otherUserMarks}
-          />
-        </StickySideColumns>
-        <MarkFormField
-          handleSubmit={handleSubmit}
-          handleSelectedMarkValueChange={handleChange}
-          selectedMark={selectedMark}
-          selectedMarkValue={selectedMarkValue}
-          currentUserMarks={currentUserMarks}
-          handleCurrentUserMarkChange={handleCurrentUserMarkChange}
-        />
-      </Container>
-    </>
-  )
-}
-
-export default PdfMarking

src/components/PDFView/PdfPageItem.tsx

@@ -1,85 +0,0 @@
-import styles from '../DrawPDFFields/style.module.scss'
-import { PdfPage } from '../../types/drawing.ts'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import PdfMarkItem from './PdfMarkItem.tsx'
-import { useEffect, useRef } from 'react'
-import pdfViewStyles from './style.module.scss'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
-import { useScale } from '../../hooks/useScale.tsx'
-import { MarkRender } from '../MarkTypeStrategy/MarkRender.tsx'
-interface PdfPageProps {
-  fileName: string
-  pageIndex: number
-  currentUserMarks: CurrentUserMark[]
-  handleMarkClick: (id: number) => void
-  otherUserMarks: Mark[]
-  page: PdfPage
-  selectedMark: CurrentUserMark | null
-  selectedMarkValue: string
-}
-
-/**
- * Responsible for rendering a single Pdf Page and its Marks
- */
-const PdfPageItem = ({
-  fileName,
-  pageIndex,
-  page,
-  currentUserMarks,
-  handleMarkClick,
-  selectedMarkValue,
-  selectedMark,
-  otherUserMarks
-}: PdfPageProps) => {
-  useEffect(() => {
-    if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
-      markRefs.current[selectedMark.id]?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      })
-    }
-  }, [selectedMark])
-  const markRefs = useRef<(HTMLDivElement | null)[]>([])
-  const { from } = useScale()
-
-  return (
-    <div className={`image-wrapper ${styles.pdfImageWrapper}`}>
-      <img
-        draggable="false"
-        src={page.image}
-        alt={`page ${pageIndex + 1} of ${fileName}`}
-      />
-      {currentUserMarks.map((m, i) => (
-        <PdfMarkItem
-          key={i}
-          ref={(el) => (markRefs.current[m.id] = el)}
-          handleMarkClick={handleMarkClick}
-          selectedMarkValue={selectedMarkValue}
-          userMark={m}
-          selectedMark={selectedMark}
-          pageWidth={page.width}
-        />
-      ))}
-      {otherUserMarks.map((m, i) => {
-        return (
-          <div
-            key={i}
-            className={pdfViewStyles.otherUserMarksDisplay}
-            style={{
-              left: inPx(from(page.width, m.location.left)),
-              top: inPx(from(page.width, m.location.top)),
-              width: inPx(from(page.width, m.location.width)),
-              height: inPx(from(page.width, m.location.height)),
-              fontFamily: FONT_TYPE,
-              fontSize: inPx(from(page.width, FONT_SIZE))
-            }}
-          >
-            <MarkRender value={m.value} mark={m} markType={m.type} />
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-export default PdfPageItem

src/components/PDFView/index.tsx

@@ -1,90 +0,0 @@
-import PdfItem from './PdfItem.tsx'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import { CurrentUserFile } from '../../types/file.ts'
-import { useEffect, useRef } from 'react'
-import { FileDivider } from '../FileDivider.tsx'
-import React from 'react'
-import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
-
-interface PdfViewProps {
-  currentFile: CurrentUserFile | null
-  currentUserMarks: CurrentUserMark[]
-  files: CurrentUserFile[]
-  handleMarkClick: (id: number) => void
-  otherUserMarks: Mark[]
-  selectedMark: CurrentUserMark | null
-  selectedMarkValue: string
-}
-
-/**
- * Responsible for rendering Pdf files.
- */
-const PdfView = ({
-  files,
-  currentUserMarks,
-  handleMarkClick,
-  selectedMarkValue,
-  selectedMark,
-  currentFile,
-  otherUserMarks
-}: PdfViewProps) => {
-  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
-  useEffect(() => {
-    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
-      pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
-    }
-  }, [currentFile])
-  const filterByFile = (
-    currentUserMarks: CurrentUserMark[],
-    hash: string
-  ): CurrentUserMark[] => {
-    return currentUserMarks.filter((currentUserMark) =>
-      currentUserMark.mark.pdfFileHash
-        ? currentUserMark.mark.pdfFileHash === hash
-        : currentUserMark.mark.fileHash === hash
-    )
-  }
-  const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
-    return marks.filter((mark) =>
-      mark.pdfFileHash ? mark.pdfFileHash === hash : mark.fileHash === hash
-    )
-  }
-  return (
-    <div className="files-wrapper">
-      {files.length > 0 ? (
-        files
-          .map<React.ReactNode>((currentUserFile) => {
-            const { hash, file, id } = currentUserFile
-
-            if (!hash) return
-            return (
-              <div
-                key={`file-${file.name}`}
-                id={file.name}
-                className="file-wrapper"
-                ref={(el) => (pdfRefs.current[id] = el)}
-              >
-                <PdfItem
-                  file={file}
-                  currentUserMarks={filterByFile(currentUserMarks, hash)}
-                  selectedMark={selectedMark}
-                  handleMarkClick={handleMarkClick}
-                  selectedMarkValue={selectedMarkValue}
-                  otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
-                />
-              </div>
-            )
-          })
-          .reduce((prev, curr, i) => [
-            prev,
-            <FileDivider key={`separator-${i}`} />,
-            curr
-          ])
-      ) : (
-        <LoadingSpinner variant="small" />
-      )}
-    </div>
-  )
-}
-
-export default PdfView

src/components/PDFView/style.module.scss

@@ -1,13 +0,0 @@
-.container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}
-
-.otherUserMarksDisplay {
-  position: absolute;
-  z-index: 40;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

src/components/Select/index.tsx

@@ -1,113 +0,0 @@
-import {
-  FormControl,
-  MenuItem,
-  Select as SelectMui,
-  SelectChangeEvent,
-  styled,
-  SelectProps as SelectMuiProps,
-  MenuItemProps
-} from '@mui/material'
-
-const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
-  backgroundColor: 'var(--primary-main)',
-  fontSize: '14px',
-  fontWeight: '500',
-  color: 'white',
-  ':hover': {
-    backgroundColor: 'var(--primary-light)'
-  },
-  '& .MuiSelect-select:focus': {
-    backgroundColor: 'var(--primary-light)'
-  },
-  '& .MuiSvgIcon-root': {
-    color: 'white'
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none'
-  }
-}))
-
-const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
-  marginInline: '5px',
-  borderRadius: '4px',
-  '&:hover': {
-    background: 'var(--primary-light)',
-    color: 'white'
-  },
-  '&.Mui-selected': {
-    background: 'var(--primary-dark)',
-    color: 'white'
-  },
-  '&.Mui-selected:hover': {
-    background: 'var(--primary-light)'
-  },
-  '&.Mui-selected.Mui-focusVisible': {
-    background: 'var(--primary-light)',
-    color: 'white'
-  },
-  '&.Mui-focusVisible': {
-    background: 'var(--primary-light)',
-    color: 'white'
-  },
-  '& + *': {
-    marginTop: '5px'
-  }
-}))
-
-interface SelectItemProps<T extends string> {
-  value: T
-  label: string
-}
-
-interface SelectProps<T extends string> {
-  value: T
-  setValue: React.Dispatch<React.SetStateAction<T>>
-  options: SelectItemProps<T>[]
-  name?: string
-  id?: string
-}
-
-export function Select<T extends string>({
-  value,
-  setValue,
-  options,
-  name,
-  id
-}: SelectProps<T>) {
-  const handleChange = (event: SelectChangeEvent<unknown>) => {
-    setValue(event.target.value as T)
-  }
-
-  return (
-    <FormControl>
-      <SelectCustomized
-        id={id}
-        name={name}
-        size="small"
-        variant="outlined"
-        value={value}
-        onChange={handleChange}
-        MenuProps={{
-          MenuListProps: {
-            sx: {
-              paddingBlock: '5px'
-            }
-          },
-          PaperProps: {
-            sx: {
-              boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
-            }
-          }
-        }}
-      >
-        {options.map((o) => {
-          return (
-            <MenuItemCustomized key={o.label} value={o.value as string}>
-              {o.label}
-            </MenuItemCustomized>
-          )
-        })}
-      </SelectCustomized>
-    </FormControl>
-  )
-}

src/components/Spinner/index.tsx

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react'
-import styles from './style.module.scss'
-
-export const Spinner = ({ children }: PropsWithChildren) => (
-  <div className={styles.spin}>{children}</div>
-)

src/components/Spinner/style.module.scss

@@ -1,12 +0,0 @@
-.spin {
-  animation: spin 5s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/components/TooltipChild.tsx

@@ -1,16 +0,0 @@
-import { forwardRef, PropsWithChildren } from 'react'
-
-/**
- * Helper wrapper for custom child components when using `@mui/material/tooltips`.
- * Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
- * @source https://mui.com/material-ui/react-tooltip/#custom-child-element
- */
-export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
-  ({ children, ...rest }, ref) => {
-    return (
-      <span ref={ref} {...rest}>
-        {children}
-      </span>
-    )
-  }
-)

src/components/UserAvatar/index.tsx

@@ -1,58 +0,0 @@
-import { getProfileRoute } from '../../routes'
-
-import styles from './styles.module.scss'
-import { AvatarIconButton } from '../UserAvatarIconButton'
-import { Link } from 'react-router-dom'
-import { useProfileMetadata } from '../../hooks/useProfileMetadata'
-import { Tooltip } from '@mui/material'
-import { getProfileUsername } from '../../utils'
-import { TooltipChild } from '../TooltipChild'
-
-interface UserAvatarProps {
-  pubkey: string
-  isNameVisible?: boolean
-}
-
-/**
- *  This component will be used for the displaying username and profile picture.
- *  Clicking will navigate to the user's profile.
- */
-export const UserAvatar = ({
-  pubkey,
-  isNameVisible = false
-}: UserAvatarProps) => {
-  const profile = useProfileMetadata(pubkey)
-  const name = getProfileUsername(pubkey, profile)
-  const image = profile?.image
-
-  return (
-    <Link
-      to={getProfileRoute(pubkey)}
-      className={styles.container}
-      tabIndex={-1}
-    >
-      <Tooltip
-        key={pubkey}
-        title={name}
-        placement="top"
-        arrow
-        disableInteractive
-      >
-        <TooltipChild>
-          <AvatarIconButton
-            src={image}
-            hexKey={pubkey}
-            aria-label={`account of user ${name}`}
-            color="inherit"
-            sx={{
-              padding: 0
-            }}
-          />
-        </TooltipChild>
-      </Tooltip>
-      {isNameVisible && name ? (
-        <span className={styles.username}>{name}</span>
-      ) : null}
-    </Link>
-  )
-}

src/components/UserAvatar/styles.module.scss

@@ -1,17 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  // flex-grow: 1;
-}
-
-.username {
-  cursor: pointer;
-  font-weight: 500;
-  font-size: 14px;
-  color: var(--text-color);
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}

src/components/UserAvatarGroup/index.tsx

@@ -1,38 +0,0 @@
-import { Children, PropsWithChildren } from 'react'
-
-import styles from './style.module.scss'
-
-interface UserAvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  max: number
-  renderSurplus?: ((surplus: number) => React.ReactNode) | undefined
-}
-
-const defaultSurplus = (surplus: number) => {
-  return <span className={styles.icon}>+{surplus}</span>
-}
-
-/**
- * Renders children with the `max` limit (including surplus if available).
- * The children are wrapped with a `div` (accepts standard `HTMLDivElement` attributes)
- * @param max The maximum number of children rendered in a div.
- * @param renderSurplus Custom render for surplus children (accepts surplus number).
- */
-export const UserAvatarGroup = ({
-  max,
-  renderSurplus = defaultSurplus,
-  children,
-  ...rest
-}: PropsWithChildren<UserAvatarGroupProps>) => {
-  const total = Children.count(children)
-  const surplus = total - max + 1
-
-  const childrenArray = Children.toArray(children)
-  return (
-    <div className={styles.container} {...rest}>
-      {surplus > 1
-        ? childrenArray.slice(0, surplus * -1).map((c) => c)
-        : children}
-      {surplus > 1 && renderSurplus(surplus)}
-    </div>
-  )
-}

src/components/UserAvatarGroup/style.module.scss

@@ -1,39 +0,0 @@
-@import '../../styles/colors.scss';
-
-.container {
-  padding: 0 0 0 10px;
-
-  > * {
-    transition: margin ease 0.2s;
-    margin: 0 0 0 -10px;
-    position: relative;
-    z-index: 1;
-    &:first-child {
-      margin-left: -10px !important;
-    }
-  }
-
-  > *:hover,
-  > *:focus-within {
-    margin: 0 15px 0 5px;
-    z-index: 2;
-  }
-}
-
-.icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border-width: 2px;
-  overflow: hidden;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  background: white;
-  color: rgba(0, 0, 0, 0.5);
-  font-weight: bold;
-  font-size: 14px;
-  border: solid 2px $primary-main;
-}