Merge pull request 'Create page: search users' (#259) from issue-56 into staging

Reviewed-on: #259

.eslintrc.cjs

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

.git-hooks/commit-msg

@@ -0,0 +1,19 @@
+#!/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

@@ -0,0 +1,13 @@
+#!/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,4 +1,4 @@
-name: Release
+name: Release to Production
 on:
   push:
     branches:
@@ -29,4 +29,6 @@ jobs:
       - name: Release Build
         run: |
           npm -g install cloudron-surfer
-          surfer put --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io dist/* /
+          surfer config --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io 
+          surfer put dist/* / --all -d
+          surfer put dist/.well-known / --all  

.gitea/workflows/release-staging.yaml

@@ -0,0 +1,46 @@
+name: Release to Staging
+on:
+  push:
+    branches:
+      - staging
+
+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: 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
+
+      - name: Create Build
+        run: npm run build
+
+      - 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

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

@@ -0,0 +1,34 @@
+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

LICENSE

@@ -0,0 +1,661 @@
+                    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,5 +14,9 @@ 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
 

index.html

@@ -2,12 +2,13 @@
 <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

@@ -0,0 +1,28 @@
+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,61 +1,92 @@
 {
-  "name": "web",
+  "name": "sigit",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.0-beta",
   "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}\"",
-    "preview": "vite preview"
+    "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"
   },
   "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.5.0",
+    "@pdf-lib/fontkit": "^1.1.1",
     "@reduxjs/toolkit": "2.2.1",
-    "axios": "1.6.7",
+    "axios": "^1.7.4",
     "crypto-hash": "3.0.0",
     "crypto-js": "^4.2.0",
     "dnd-core": "16.0.1",
     "file-saver": "2.0.5",
+    "idb": "8.0.0",
     "jszip": "3.10.1",
     "lodash": "4.17.21",
     "mui-file-input": "4.0.4",
-    "nostr-tools": "2.3.1",
+    "nostr-login": "^1.6.6",
+    "nostr-tools": "2.7.0",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^4.4.168",
+    "rdndmb-html5-to-touch": "^8.0.3",
     "react": "^18.2.0",
-    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.3",
     "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",
+    "svgo": "^3.3.2",
     "tseep": "1.2.1"
   },
   "devDependencies": {
     "@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",
     "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": "^5.1.4",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "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"
   }
 }

public/.well-known/nostr.json

@@ -0,0 +1,15 @@
+{
+  "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

@@ -0,0 +1,34 @@
+<?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

@@ -1,42 +0,0 @@
-#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

@@ -0,0 +1,171 @@
+@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,38 +1,32 @@
 import { useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from './hooks/store'
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { AuthController, NostrController } from './controllers'
+import { AuthController } from './controllers'
 import { MainLayout } from './layouts/Main'
 import {
   appPrivateRoutes,
   appPublicRoutes,
   privateRoutes,
-  publicRoutes
+  publicRoutes,
+  recursiveRouteRenderer
 } from './routes'
-import { State } from './store/rootReducer'
-import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
+import './App.scss'
 
 const App = () => {
-  const authState = useSelector((state: State) => state.auth)
+  const authState = useAppSelector((state) => state.auth)
 
   useEffect(() => {
-    generateBunkerDelegatedKey()
+    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'
+    }
 
     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(
@@ -41,39 +35,18 @@ const App = () => {
     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 &&
-          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}
-              />
-            )
-          }
-        })}
-
+        {authState?.loggedIn && privateRouteList}
+        {publicRoutesList}
         <Route path="*" element={<Navigate to={handleRootRedirect()} />} />
       </Route>
     </Routes>

src/assets/images/bg_l.svg

@@ -0,0 +1,6 @@
+<?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

@@ -0,0 +1,6 @@
+<?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

@@ -1,50 +0,0 @@
-$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,61 +9,58 @@ import {
 } from '@mui/material'
 
 import { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { setAuthState, setMetadataEvent } from '../../store/actions'
-import { State } from '../../store/rootReducer'
-import { Dispatch } from '../../store/store'
+import { useAppSelector } from '../../hooks/store'
 import Username from '../username'
 
 import { Link, useNavigate } from 'react-router-dom'
 import {
-  appPrivateRoutes,
   appPublicRoutes,
+  appPrivateRoutes,
   getProfileRoute
 } from '../../routes'
-import { MetadataController, NostrController } from '../../controllers'
-import {
-  clearAuthToken,
-  clearState,
-  saveNsecBunkerDelegatedKey,
-  shorten
-} from '../../utils'
+import { getProfileUsername, hexToNpub } from '../../utils'
 import styles from './style.module.scss'
-import { setUserRobotImage } from '../../store/userRobotImage/action'
+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'
 
-const metadataController = new MetadataController()
+import { launch as launchNostrLoginDialog } from 'nostr-login'
 
 export const AppBar = () => {
   const navigate = useNavigate()
-
-  const dispatch: Dispatch = useDispatch()
-
+  const logout = useLogout()
   const [username, setUsername] = useState('')
   const [userAvatar, setUserAvatar] = useState('')
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
 
-  const authState = useSelector((state: State) => state.auth)
-  const metadataState = useSelector((state: State) => state.metadata)
-  const userRobotImage = useSelector((state: State) => state.userRobotImage)
+  const authState = useAppSelector((state) => state.auth)
+  const metadataState = useAppSelector((state) => state.metadata)
+  const userRobotImage = useAppSelector((state) => state.userRobotImage)
 
   useEffect(() => {
     if (metadataState) {
       if (metadataState.content) {
-        const { picture, display_name, name } = JSON.parse(
-          metadataState.content
-        )
+        const profileMetadata = JSON.parse(metadataState.content)
+        const { picture } = profileMetadata
 
         if (picture || userRobotImage) {
           setUserAvatar(picture || userRobotImage)
         }
 
-        setUsername(shorten(display_name || name || '', 7))
+        const npub = authState.usersPubkey
+          ? hexToNpub(authState.usersPubkey)
+          : ''
+
+        setUsername(getProfileUsername(npub, profileMetadata))
       } else {
         setUserAvatar(userRobotImage || '')
         setUsername('')
       }
     }
-  }, [metadataState, userRobotImage])
+  }, [metadataState, userRobotImage, authState.usersPubkey])
 
   const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget)
@@ -82,124 +79,157 @@ export const AppBar = () => {
 
   const handleLogout = () => {
     handleCloseUserMenu()
-    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()
-    clearState()
-
-    // update nsecBunker delegated key after logout
-    const nostrController = NostrController.getInstance()
-    const newDelegatedKey = nostrController.generateDelegatedKey()
-    saveNsecBunkerDelegatedKey(newDelegatedKey)
-
+    logout()
     navigate('/')
   }
   const isAuthenticated = authState?.loggedIn === true
 
+  const matches = useMediaQuery('(max-width:767px)')
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+  const handleBannerHide = () => {
+    setIsBannerVisible(false)
+  }
+
   return (
-    <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}
-              />
-              <Menu
-                id="menu-appbar"
-                anchorEl={anchorElUser}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'center'
-                }}
-                keepMounted
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'center'
-                }}
-                open={!!anchorElUser}
-                onClose={handleCloseUserMenu}
+    <>
+      {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}
               >
-                <MenuItem
-                  sx={{
-                    justifyContent: 'center',
-                    display: { md: 'none' }
-                  }}
-                >
-                  <Typography variant="h6">{username}</Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={handleProfile}
-                  sx={{
-                    justifyContent: 'center'
-                  }}
-                >
-                  Profile
-                </MenuItem>
-                <MenuItem
+                <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={() => navigate('/')} />
+            </Box>
+
+            <Box className={styles.rightSideBox}>
+              {!isAuthenticated && (
+                <Button
+                  startIcon={<ButtonIcon />}
                   onClick={() => {
-                    navigate(appPrivateRoutes.relays)
-                  }}
-                  sx={{
-                    justifyContent: 'center'
+                    launchNostrLoginDialog()
                   }}
+                  variant="contained"
                 >
-                  Relays
-                </MenuItem>
-                <Link
-                  to={appPublicRoutes.help}
-                  target="_blank"
-                  style={{ color: 'inherit', textDecoration: 'inherit' }}
-                >
-                  <MenuItem
-                    sx={{
-                      justifyContent: 'center'
+                  LOGIN
+                </Button>
+              )}
+
+              {isAuthenticated && (
+                <>
+                  <Username
+                    username={username}
+                    avatarContent={userAvatar}
+                    handleClick={handleOpenUserMenu}
+                  />
+                  <Menu
+                    id="menu-appbar"
+                    anchorEl={anchorElUser}
+                    anchorOrigin={{
+                      vertical: 'bottom',
+                      horizontal: 'center'
                     }}
+                    keepMounted
+                    transformOrigin={{
+                      vertical: 'top',
+                      horizontal: 'center'
+                    }}
+                    open={!!anchorElUser}
+                    onClose={handleCloseUserMenu}
                   >
-                    Help
-                  </MenuItem>
-                </Link>
-                <MenuItem
-                  onClick={handleLogout}
-                  sx={{
-                    justifyContent: 'center'
-                  }}
-                >
-                  Logout
-                </MenuItem>
-              </Menu>
-            </>
-          )}
-        </Box>
-      </Toolbar>
-    </AppBarMui>
+                    <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>
+    </>
   )
 }

src/components/AppBar/style.module.scss

@@ -1,12 +1,14 @@
-@import '../../colors.scss';
+@import '../../styles/colors.scss';
+@import '../../styles/sizes.scss';
 
 .AppBar {
-  background-color: $background-color !important;
-  z-index: 1400 !important;
-  height: 60px;
+  background-color: $overlay-background-color !important;
+  height: $header-height;
   flex-direction: row !important;
   align-items: center;
 
+  border-bottom: solid 1px rgba(0, 0, 0, 0.075);
+
   .toolbar {
     flex-grow: 1;
     display: flex;
@@ -32,3 +34,42 @@
     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

@@ -0,0 +1,14 @@
+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

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

src/components/Container/index.tsx

@@ -0,0 +1,36 @@
+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

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

src/components/DisplaySigit/index.tsx

@@ -0,0 +1,132 @@
+import { Meta } from '../../types'
+import { 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'
+
+type SigitProps = {
+  sigitCreateId: string
+  meta: Meta
+  parsedMeta: SigitCardDisplayInfo
+}
+
+export const DisplaySigit = ({
+  meta,
+  parsedMeta,
+  sigitCreateId: sigitCreateId
+}: SigitProps) => {
+  const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
+    parsedMeta
+
+  const { signersStatus, fileHashes } = useSigitMeta(meta)
+  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
+
+  return (
+    <div className={styles.itemWrapper}>
+      {signedStatus === SigitStatus.Complete && (
+        <Link
+          to={appPublicRoutes.verify}
+          state={{ meta }}
+          className={styles.insetLink}
+        ></Link>
+      )}
+      {signedStatus !== SigitStatus.Complete && (
+        <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

@@ -0,0 +1,114 @@
+@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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,23 @@
+@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

@@ -0,0 +1,673 @@
+import { Close } from '@mui/icons-material'
+import {
+  FormControl,
+  InputLabel,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select
+} from '@mui/material'
+import styles from './style.module.scss'
+import React, { useEffect, useState } from 'react'
+import { ProfileMetadata, User, UserRole, KeyboardCode } from '../../types'
+import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
+import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
+import { SigitFile } from '../../utils/file'
+import { getToolboxLabelByMarkType } from '../../utils/mark'
+import { FileDivider } from '../FileDivider'
+import { ExtensionFileBox } from '../ExtensionFileBox'
+import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
+import { useScale } from '../../hooks/useScale'
+import { AvatarIconButton } from '../UserAvatarIconButton'
+import { UserAvatar } from '../UserAvatar'
+import _ from 'lodash'
+
+const DEFAULT_START_SIZE = {
+  width: 140,
+  height: 40
+} as const
+
+interface HideSignersForDrawnField {
+  [key: number]: boolean
+}
+
+interface Props {
+  users: User[]
+  metadata: { [key: string]: ProfileMetadata }
+  sigitFiles: SigitFile[]
+  setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
+  selectedTool?: DrawTool
+}
+
+export const DrawPDFFields = (props: Props) => {
+  const { selectedTool, sigitFiles, setSigitFiles, users } = props
+
+  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 = (...pubkeys: string[]) => {
+    const availableSigner: string | undefined = pubkeys.find((pubkey) =>
+      signers.some((s) => s.pubkey === npubToHex(pubkey))
+    )
+    return availableSigner || ''
+  }
+
+  const { to, from } = useScale()
+
+  const [mouseState, setMouseState] = useState<MouseState>({
+    clicked: false
+  })
+
+  const [activeDrawnField, setActiveDrawnField] = useState<{
+    fileIndex: number
+    pageIndex: number
+    drawnFieldIndex: number
+  }>()
+  const isActiveDrawnField = (
+    fileIndex: number,
+    pageIndex: number,
+    drawnFieldIndex: number
+  ) =>
+    activeDrawnField?.fileIndex === fileIndex &&
+    activeDrawnField?.pageIndex === pageIndex &&
+    activeDrawnField?.drawnFieldIndex === drawnFieldIndex
+
+  /**
+   * Drawing events
+   */
+  useEffect(() => {
+    window.addEventListener('pointerup', handlePointerUp)
+    window.addEventListener('pointercancel', handlePointerUp)
+
+    return () => {
+      window.removeEventListener('pointerup', handlePointerUp)
+      window.removeEventListener('pointercancel', handlePointerUp)
+    }
+  }, [])
+
+  const refreshPdfFiles = () => {
+    setSigitFiles([...sigitFiles])
+  }
+
+  /**
+   * Fired only on when left (primary pointer interaction) clicking page image
+   * Creates new drawnElement and pushes in the array
+   * It is re rendered and visible right away
+   *
+   * @param event Pointer event
+   * @param page PdfPage where press happened
+   */
+  const handlePointerDown = (
+    event: React.PointerEvent,
+    page: PdfPage,
+    fileIndex: number,
+    pageIndex: number
+  ) => {
+    // Proceed only if left click
+    if (event.button !== 0) return
+
+    if (!selectedTool) {
+      return
+    }
+
+    const { x, y } = getPointerCoordinates(event)
+
+    const newField: DrawnField = {
+      left: to(page.width, x),
+      top: to(page.width, y),
+      width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
+      height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
+      counterpart: getAvailableSigner(lastSigner, defaultSignerNpub),
+      type: selectedTool.identifier
+    }
+
+    page.drawnFields.push(newField)
+
+    setActiveDrawnField({
+      fileIndex,
+      pageIndex,
+      drawnFieldIndex: page.drawnFields.length - 1
+    })
+    setMouseState((prev) => {
+      return {
+        ...prev,
+        clicked: true
+      }
+    })
+  }
+
+  /**
+   * Drawing is finished, resets all the variables used to draw
+   * @param event Pointer event
+   */
+  const handlePointerUp = () => {
+    setMouseState((prev) => {
+      return {
+        ...prev,
+        clicked: false,
+        dragging: false,
+        resizing: false
+      }
+    })
+  }
+
+  /**
+   * After {@link handlePointerDown} create an drawing element, this function gets called on every pixel moved
+   * which alters the newly created drawing element, resizing it while pointer moves
+   * @param event Pointer event
+   * @param page PdfPage where moving is happening
+   */
+  const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
+    if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
+      const lastElementIndex = page.drawnFields.length - 1
+
+      const lastDrawnField = page.drawnFields[lastElementIndex]
+
+      // Return early if we don't have lastDrawnField
+      // Issue noticed in the console when dragging out of bounds
+      // to the page below (without releaseing mouse click)
+      if (!lastDrawnField) return
+
+      const { x, y } = getPointerCoordinates(event)
+
+      const width = to(page.width, x) - lastDrawnField.left
+      const height = to(page.width, y) - lastDrawnField.top
+
+      lastDrawnField.width = width
+      lastDrawnField.height = height
+
+      const currentDrawnFields = page.drawnFields
+
+      currentDrawnFields[lastElementIndex] = lastDrawnField
+
+      refreshPdfFiles()
+    }
+  }
+
+  /**
+   * 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 drawnFieldIndex Which we are moving
+   */
+  const handleDrawnFieldPointerDown = (
+    event: React.PointerEvent,
+    fileIndex: number,
+    pageIndex: number,
+    drawnFieldIndex: number
+  ) => {
+    event.stopPropagation()
+
+    // Proceed only if left click
+    if (event.button !== 0) return
+
+    const drawingRectangleCoords = getPointerCoordinates(event)
+
+    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
+    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 drawnField which we are moving
+   * @param pageWidth pdf value which is used to calculate scaled offset
+   */
+  const handleDrawnFieldPointerMove = (
+    event: React.PointerEvent,
+    drawnField: DrawnField,
+    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)
+
+        const rightLimit = to(pageWidth, rect.width) - drawnField.width
+        const bottomLimit = to(pageWidth, rect.height) - drawnField.height
+
+        if (left < 0) left = 0
+        if (top < 0) top = 0
+        if (left > rightLimit) left = rightLimit
+        if (top > bottomLimit) top = bottomLimit
+
+        drawnField.left = left
+        drawnField.top = top
+
+        refreshPdfFiles()
+      }
+    }
+  }
+
+  /**
+   * Fired when clicked on the resize handle, sets the state for a resize action
+   * @param event Pointer event
+   * @param drawnFieldIndex which we are resizing
+   */
+  const handleResizePointerDown = (
+    event: React.PointerEvent,
+    fileIndex: number,
+    pageIndex: number,
+    drawnFieldIndex: number
+  ) => {
+    // Proceed only if left click
+    if (event.button !== 0) return
+    event.stopPropagation()
+
+    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
+    setMouseState({
+      resizing: true
+    })
+  }
+
+  /**
+   * Resizes the drawn element by the mouse position
+   * @param event Pointer event
+   * @param drawnField which we are resizing
+   * @param pageWidth pdf value which is used to calculate scaled offset
+   */
+  const handleResizePointerMove = (
+    event: React.PointerEvent,
+    drawnField: DrawnField,
+    pageWidth: number
+  ) => {
+    if (mouseState.resizing) {
+      const { x, y } = getPointerCoordinates(
+        event,
+        // currentTarget = span handle
+        // 1st parent = drawnField
+        // 2nd parent = img
+        event.currentTarget.parentElement?.parentElement
+      )
+
+      const width = to(pageWidth, x) - drawnField.left
+      const height = to(pageWidth, y) - drawnField.top
+
+      drawnField.width = width
+      drawnField.height = height
+
+      refreshPdfFiles()
+    }
+  }
+
+  /**
+   * Removes the drawn element using the indexes in the params
+   * @param event Pointer event
+   * @param pdfFileIndex pdf file index
+   * @param pdfPageIndex pdf page index
+   * @param drawnFileIndex drawn file index
+   */
+  const handleRemovePointerDown = (
+    event: React.PointerEvent,
+    pdfFileIndex: number,
+    pdfPageIndex: number,
+    drawnFileIndex: number
+  ) => {
+    event.stopPropagation()
+
+    const pages = sigitFiles[pdfFileIndex]?.pages
+    if (pages) {
+      pages[pdfPageIndex]?.drawnFields?.splice(drawnFileIndex, 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)
+      }
+    }
+  }
+
+  /**
+   * 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.min(event.clientX, rect.right) - rect.left //x position within the element.
+    const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
+
+    return {
+      x,
+      y,
+      rect
+    }
+  }
+
+  /**
+   * 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) => {
+          return (
+            <div
+              key={pageIndex}
+              className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
+              tabIndex={-1}
+              onKeyDown={(event) => handleEscapeButtonDown(event)}
+            >
+              <img
+                onPointerMove={(event) => {
+                  handlePointerMove(event, page)
+                }}
+                onPointerDown={(event) => {
+                  handlePointerDown(event, page, fileIndex, pageIndex)
+                }}
+                draggable="false"
+                src={page.image}
+                alt={`page ${pageIndex + 1} of ${file.name}`}
+              />
+
+              {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
+                return (
+                  <div
+                    key={drawnFieldIndex}
+                    onPointerDown={(event) =>
+                      handleDrawnFieldPointerDown(
+                        event,
+                        fileIndex,
+                        pageIndex,
+                        drawnFieldIndex
+                      )
+                    }
+                    onPointerMove={(event) => {
+                      handleDrawnFieldPointerMove(event, drawnField, page.width)
+                    }}
+                    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,
+                      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',
+                      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, drawnField, page.width)
+                      }}
+                      className={styles.resizeHandle}
+                      style={{
+                        background:
+                          mouseState.resizing &&
+                          isActiveDrawnField(
+                            fileIndex,
+                            pageIndex,
+                            drawnFieldIndex
+                          )
+                            ? 'var(--primary-main)'
+                            : undefined
+                      }}
+                    ></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)
+                                refreshPdfFiles()
+                              }}
+                              labelId="counterparts"
+                              label="Counterparts"
+                              sx={{
+                                background: 'white'
+                              }}
+                              renderValue={(value) =>
+                                renderCounterpartValue(value)
+                              }
+                            >
+                              {signers.map((signer, index) => {
+                                const npub = hexToNpub(signer.pubkey)
+                                const metadata = props.metadata[signer.pubkey]
+                                const displayValue = getProfileUsername(
+                                  npub,
+                                  metadata
+                                )
+                                // 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={metadata?.picture}
+                                        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>
+          )
+        })}
+      </>
+    )
+  }
+
+  const renderCounterpartValue = (npub: string) => {
+    let displayValue = _.truncate(npub, { length: 16 })
+
+    const signer = signers.find((u) => u.pubkey === npubToHex(npub))
+    if (signer) {
+      const metadata = props.metadata[signer.pubkey]
+      displayValue = getProfileUsername(npub, metadata)
+
+      return (
+        <div className={styles.counterpartSelectValue}>
+          <AvatarIconButton
+            src={props.metadata[signer.pubkey]?.picture}
+            hexKey={signer.pubkey || undefined}
+            sx={{
+              padding: 0,
+              marginRight: '6px',
+              '> img': {
+                width: '21px',
+                height: '21px'
+              }
+            }}
+          />
+          {displayValue}
+        </div>
+      )
+    }
+
+    return displayValue
+  }
+
+  return (
+    <div className="files-wrapper">
+      {sigitFiles.map((file, i) => {
+        return (
+          <React.Fragment key={file.name}>
+            <div className="file-wrapper" id={`file-${file.name}`}>
+              {file.isPdf && getPdfPages(file, i)}
+              {file.isImage && (
+                <img
+                  className="file-image"
+                  src={file.objectUrl}
+                  alt={file.name}
+                />
+              )}
+              {!(file.isPdf || file.isImage) && (
+                <ExtensionFileBox extension={file.extension} />
+              )}
+            </div>
+            {i < sigitFiles.length - 1 && <FileDivider />}
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}

src/components/DrawPDFFields/style.module.scss

@@ -0,0 +1,101 @@
+@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;
+  }
+
+  &.edited {
+    outline: 1px dotted #01aaad;
+  }
+
+  .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: nwse-resize;
+
+    // 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;
+  }
+}
+
+.counterpartSelectValue {
+  display: flex;
+}
+
+.counterpartAvatar {
+  img {
+    width: 21px;
+    height: 21px;
+  }
+}

src/components/ExtensionFileBox.tsx

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

src/components/FileDivider.tsx

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,52 @@
+import { CurrentUserFile } from '../../types/file.ts'
+import styles from './style.module.scss'
+import { Button } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+
+interface FileListProps {
+  files: CurrentUserFile[]
+  currentFile: CurrentUserFile
+  setCurrentFile: (file: CurrentUserFile) => void
+  handleDownload: () => void
+  downloadLabel?: string
+}
+
+const FileList = ({
+  files,
+  currentFile,
+  setCurrentFile,
+  handleDownload,
+  downloadLabel
+}: 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>
+      <Button variant="contained" fullWidth onClick={handleDownload}>
+        {downloadLabel || 'Download Files'}
+      </Button>
+    </div>
+  )
+}
+
+export default FileList

src/components/FileList/style.module.scss

@@ -0,0 +1,103 @@
+.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

@@ -0,0 +1,10 @@
+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

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

src/components/Footer/Footer.tsx

@@ -0,0 +1,131 @@
+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={'/'}
+              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

@@ -0,0 +1,49 @@
+@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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,64 @@
+@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,18 +1,43 @@
+import { createPortal } from 'react-dom'
 import styles from './style.module.scss'
+import { PropsWithChildren } from 'react'
 
 interface Props {
-  desc: string
+  desc?: string
+  variant?: 'small' | 'default'
 }
 
-export const LoadingSpinner = (props: Props) => {
-  const { desc } = props
+export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
+  const { desc, children, variant = 'default' } = props
 
-  return (
-    <div className={styles.loadingSpinnerOverlay}>
-      <div className={styles.loadingSpinnerContainer}>
-        <div className={styles.loadingSpinner}></div>
-        {desc && <span>{desc}</span>}
-      </div>
-    </div>
-  )
+  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')!
+      )
+  }
 }

src/components/LoadingSpinner/style.module.scss

@@ -1,30 +1,57 @@
+@import '../../styles/colors.scss';
+
 .loadingSpinnerOverlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
+  z-index: 50;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
 
-  .loadingSpinnerContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
+.loadingSpinnerContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
-  .loadingSpinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
+  &[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);
   }
+  &[data-variant='small'] {
+    min-height: 250px;
+  }
+}
+
+.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 {

src/components/MarkFormField/index.tsx

@@ -0,0 +1,127 @@
+import { CurrentUserMark } from '../../types/mark.ts'
+import styles from './style.module.scss'
+import {
+  findNextIncompleteCurrentUserMark,
+  getToolboxLabelByMarkType,
+  isCurrentUserMarksComplete,
+  isCurrentValueLast
+} from '../../utils'
+import React, { useState } from 'react'
+import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
+
+interface MarkFormFieldProps {
+  currentUserMarks: CurrentUserMark[]
+  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
+  handleSelectedMarkValueChange: (value: string) => void
+  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  selectedMark: CurrentUserMark
+  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 isReadyToSign = () =>
+    isCurrentUserMarksComplete(currentUserMarks) ||
+    isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
+  const isCurrent = (currentMark: CurrentUserMark) =>
+    currentMark.id === selectedMark.id
+  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()
+    console.log('handle form submit runs...')
+    return isReadyToSign()
+      ? handleSubmit(event)
+      : handleCurrentUserMarkChange(findNext()!)
+  }
+  const toggleActions = () => setDisplayActions(!displayActions)
+  const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
+  const { input: MarkInputComponent } =
+    MARK_TYPE_CONFIG[selectedMark.mark.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}>
+              <p className={styles.actionsTopInfoText}>Add {markLabel}</p>
+            </div>
+          </div>
+          <div className={styles.inputWrapper}>
+            <form onSubmit={(e) => handleFormSubmit(e)}>
+              {typeof MarkInputComponent !== 'undefined' && (
+                <MarkInputComponent
+                  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.footerContainer}>
+              <div className={styles.footer}>
+                {currentUserMarks.map((mark, index) => {
+                  return (
+                    <div className={styles.pagination} key={index}>
+                      <button
+                        className={`${styles.paginationButton} ${isDone(mark) && styles.paginationButtonDone}`}
+                        onClick={() => handleCurrentUserMarkChange(mark)}
+                      >
+                        {mark.id}
+                      </button>
+                      {isCurrent(mark) && (
+                        <div className={styles.paginationButtonCurrent}></div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MarkFormField

src/components/MarkFormField/style.module.scss

@@ -0,0 +1,218 @@
+@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;
+  }
+
+  .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 {
+    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: 750px;
+
+  &.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;
+}

src/components/MarkInputs/Signature.module.scss

@@ -0,0 +1,44 @@
+@import '../../styles/colors.scss';
+
+$padding: 5px;
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $padding;
+}
+
+.relative {
+  position: relative;
+}
+
+.canvas {
+  outline: 1px solid black;
+  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/MarkInputs/Signature.tsx

@@ -0,0 +1,101 @@
+import { useRef, useState } from 'react'
+import { MarkInputProps } from '../../types/mark'
+import { getOptimizedPaths, optimizeSVG } from '../../utils'
+import { faEraser } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import styles from './Signature.module.scss'
+import { MarkRenderSignature } from '../MarkRender/Signature'
+
+export const MarkInputSignature = ({
+  value,
+  handler,
+  userMark
+}: MarkInputProps) => {
+  const location = userMark?.mark.location
+
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [drawing, setDrawing] = useState(false)
+  const [paths, setPaths] = useState<string[]>(value ? JSON.parse(value) : [])
+
+  function update() {
+    if (location && paths) {
+      if (paths.length) {
+        const optimizedSvg = optimizeSVG(location, paths)
+        const extractedPaths = getOptimizedPaths(optimizedSvg)
+        handler(JSON.stringify(extractedPaths))
+      } else {
+        handler('')
+      }
+    }
+  }
+
+  const handlePointerDown = (event: React.PointerEvent) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.beginPath()
+    ctx?.moveTo(x, y)
+    setPaths([...paths, `M ${x} ${y}`])
+    setDrawing(true)
+  }
+  const handlePointerUp = () => {
+    setDrawing(false)
+    update()
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
+  }
+  const handlePointerMove = (event: React.PointerEvent) => {
+    if (!drawing) return
+    const ctx = canvasRef.current?.getContext('2d')
+    const rect = canvasRef.current?.getBoundingClientRect()
+    const x = event.clientX - rect!.left
+    const y = event.clientY - rect!.top
+
+    ctx?.lineTo(x, y)
+    ctx?.stroke()
+
+    // Collect the path data
+    setPaths((prevPaths) => {
+      const newPaths = [...prevPaths]
+      newPaths[newPaths.length - 1] += ` L ${x} ${y}`
+      return newPaths
+    })
+  }
+
+  const handleReset = () => {
+    setPaths([])
+    setDrawing(false)
+    update()
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
+  }
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <div className={styles.relative}>
+          <canvas
+            height={location?.height}
+            width={location?.width}
+            ref={canvasRef}
+            className={styles.canvas}
+            onPointerDown={handlePointerDown}
+            onPointerUp={handlePointerUp}
+            onPointerMove={handlePointerMove}
+            onPointerOut={handlePointerUp}
+          ></canvas>
+          {typeof userMark?.mark !== 'undefined' && (
+            <div className={styles.absolute}>
+              <MarkRenderSignature value={value} mark={userMark.mark} />
+            </div>
+          )}
+          <div className={styles.reset}>
+            <FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/MarkInputs/Text.tsx

@@ -0,0 +1,19 @@
+import { MarkInputProps } from '../../types/mark'
+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/MarkRender/Signature.tsx

@@ -0,0 +1,13 @@
+import { MarkRenderProps } from '../../types/mark'
+
+export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => {
+  const paths = value ? JSON.parse(value) : []
+
+  return (
+    <svg viewBox={`0 0 ${mark.location.width} ${mark.location.height}`}>
+      {paths.map((path: string) => (
+        <path d={path} stroke="black" fill="none" />
+      ))}
+    </svg>
+  )
+}

src/components/PDFView/PdfItem.tsx

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,61 @@
+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 { MARK_TYPE_CONFIG } from '../getMarkComponents.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()
+    const { render: MarkRenderComponent } =
+      MARK_TYPE_CONFIG[userMark.mark.type] || {}
+    return (
+      <div
+        ref={ref}
+        onClick={handleClick}
+        className={`file-mark ${styles.drawingRectangle} ${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))
+        }}
+      >
+        {typeof MarkRenderComponent !== 'undefined' && (
+          <MarkRenderComponent value={getMarkValue()} mark={userMark.mark} />
+        )}
+      </div>
+    )
+  }
+)
+
+export default PdfMarkItem

src/components/PDFView/PdfMarking.tsx

@@ -0,0 +1,170 @@
+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[]
+  handleDownload: () => void
+  meta: Meta | null
+  otherUserMarks: Mark[]
+  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
+  setIsMarksCompleted: (isMarksCompleted: boolean) => 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 = (props: PdfMarkingProps) => {
+  const {
+    files,
+    currentUserMarks,
+    setIsMarksCompleted,
+    setCurrentUserMarks,
+    setUpdatedMarks,
+    handleDownload,
+    meta,
+    otherUserMarks
+  } = props
+  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)
+    setSelectedMark(nextMark!)
+    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY)
+  }
+
+  const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
+    if (!selectedMark) return
+    const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
+      selectedMark,
+      selectedMarkValue
+    )
+
+    const updatedCurrentUserMarks = updateCurrentUserMarks(
+      currentUserMarks,
+      updatedSelectedMark
+    )
+    setCurrentUserMarks(updatedCurrentUserMarks)
+    setSelectedMarkValue(mark.currentValue ?? EMPTY)
+    setSelectedMark(mark)
+  }
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (!selectedMarkValue || !selectedMark) return
+
+    const updatedMark: CurrentUserMark = getUpdatedMark(
+      selectedMark,
+      selectedMarkValue
+    )
+
+    setSelectedMarkValue(EMPTY)
+    const updatedCurrentUserMarks = updateCurrentUserMarks(
+      currentUserMarks,
+      updatedMark
+    )
+    setCurrentUserMarks(updatedCurrentUserMarks)
+    setSelectedMark(null)
+    setIsMarksCompleted(true)
+    setUpdatedMarks(updatedMark.mark)
+  }
+
+  // const updateCurrentUserMarkValues = () => {
+  //   const updatedMark: CurrentUserMark = getUpdatedMark(selectedMark!, selectedMarkValue)
+  //   const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark)
+  //   setSelectedMarkValue(EMPTY)
+  //   setCurrentUserMarks(updatedCurrentUserMarks)
+  // }
+
+  const handleChange = (value: string) => setSelectedMarkValue(value)
+
+  return (
+    <>
+      <Container className={signPageStyles.container}>
+        <StickySideColumns
+          left={
+            <div>
+              {currentFile !== null && (
+                <FileList
+                  files={files}
+                  currentFile={currentFile}
+                  setCurrentFile={setCurrentFile}
+                  handleDownload={handleDownload}
+                />
+              )}
+            </div>
+          }
+          right={meta !== null && <UsersDetails meta={meta} />}
+          leftIcon={faFileDownload}
+          centerIcon={faPen}
+          rightIcon={faCircleInfo}
+        >
+          {currentUserMarks?.length > 0 && (
+            <PdfView
+              currentFile={currentFile}
+              files={files}
+              handleMarkClick={handleMarkClick}
+              selectedMarkValue={selectedMarkValue}
+              selectedMark={selectedMark}
+              currentUserMarks={currentUserMarks}
+              otherUserMarks={otherUserMarks}
+            />
+          )}
+        </StickySideColumns>
+        {selectedMark !== null && (
+          <MarkFormField
+            handleSubmit={handleSubmit}
+            handleSelectedMarkValueChange={handleChange}
+            selectedMark={selectedMark}
+            selectedMarkValue={selectedMarkValue}
+            currentUserMarks={currentUserMarks}
+            handleCurrentUserMarkChange={handleCurrentUserMarkChange}
+          />
+        )}
+      </Container>
+    </>
+  )
+}
+
+export default PdfMarking

src/components/PDFView/PdfPageItem.tsx

@@ -0,0 +1,84 @@
+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'
+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))
+            }}
+          >
+            {m.value}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default PdfPageItem

src/components/PDFView/index.tsx

@@ -0,0 +1,84 @@
+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 === hash
+    )
+  }
+  const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
+    return marks.filter((mark) => mark.pdfFileHash === hash)
+  }
+  const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
+    index !== files.length - 1
+  return (
+    <div className="files-wrapper">
+      {files.length > 0 ? (
+        files.map((currentUserFile, index, arr) => {
+          const { hash, file, id } = currentUserFile
+
+          if (!hash) return
+          return (
+            <React.Fragment key={index}>
+              <div
+                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>
+              {isNotLastPdfFile(index, arr) && <FileDivider />}
+            </React.Fragment>
+          )
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
+    </div>
+  )
+}
+
+export default PdfView

src/components/PDFView/style.module.scss

@@ -0,0 +1,13 @@
+.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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,6 @@
+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

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

src/components/TooltipChild.tsx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,58 @@
+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?.picture
+
+  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

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,39 @@
+@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;
+}

src/components/UserAvatarIconButton/index.tsx

@@ -0,0 +1,32 @@
+import { IconButton, IconButtonProps } from '@mui/material'
+import styles from './style.module.scss'
+import { getRoboHashPicture } from '../../utils'
+
+interface AvatarIconButtonProps extends IconButtonProps {
+  src: string | undefined
+  hexKey: string | undefined
+}
+
+/**
+ *  This component displays profile image inside IconButton
+ *  @param {string | undefined} props.src - image source or robohash picture
+ *  @param {string | undefined} props.hexKey - robohash and affects border
+ *  @param {IconButtonProps} props - component extends mui's  IconButton
+ */
+export const AvatarIconButton = (props: AvatarIconButtonProps) => {
+  const { src, hexKey, ...rest } = props
+
+  return (
+    <IconButton {...rest}>
+      <img
+        src={src || getRoboHashPicture(hexKey)}
+        alt="user image"
+        className={`${styles.icon}`}
+        style={{
+          borderStyle: hexKey ? 'solid' : 'none',
+          borderColor: `#${hexKey?.substring(0, 6)}`
+        }}
+      />
+    </IconButton>
+  )
+}

src/components/UserAvatarIconButton/style.module.scss

@@ -0,0 +1,7 @@
+.icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border-width: 2px;
+  overflow: hidden;
+}

src/components/UsersDetails.tsx/index.tsx

@@ -0,0 +1,276 @@
+import { Divider, Tooltip } from '@mui/material'
+import {
+  formatTimestamp,
+  fromUnixTimestamp,
+  hexToNpub,
+  npubToHex,
+  SigitStatus,
+  SignStatus
+} from '../../utils'
+import { useSigitMeta } from '../../hooks/useSigitMeta'
+import { UserAvatarGroup } from '../UserAvatarGroup'
+
+import styles from './style.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCalendar,
+  faCalendarCheck,
+  faCalendarPlus,
+  faCheck,
+  faClock,
+  faEye,
+  faFile,
+  faFileCircleExclamation
+} from '@fortawesome/free-solid-svg-icons'
+import { getExtensionIconLabel } from '../getExtensionIconLabel'
+import { useAppSelector } from '../../hooks/store'
+import { DisplaySigner } from '../DisplaySigner'
+import { Meta, OpenTimestamp } from '../../types'
+import { extractFileExtensions } from '../../utils/file'
+import { UserAvatar } from '../UserAvatar'
+
+interface UsersDetailsProps {
+  meta: Meta
+}
+
+export const UsersDetails = ({ meta }: UsersDetailsProps) => {
+  const {
+    submittedBy,
+    exportedBy,
+    signers,
+    viewers,
+    fileHashes,
+    signersStatus,
+    createdAt,
+    completedAt,
+    parsedSignatureEvents,
+    signedStatus,
+    isValid,
+    id,
+    timestamps
+  } = useSigitMeta(meta)
+  const { usersPubkey } = useAppSelector((state) => state.auth)
+  const userCanSign =
+    typeof usersPubkey !== 'undefined' &&
+    signers.includes(hexToNpub(usersPubkey))
+
+  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
+
+  const isTimestampVerified = (
+    timestamps: OpenTimestamp[],
+    nostrId: string
+  ): boolean => {
+    const matched = timestamps.find((t) => t.nostrId === nostrId)
+    return !!(matched && matched.verification)
+  }
+
+  const getOpenTimestampsInfo = (
+    timestamps: OpenTimestamp[],
+    nostrId: string
+  ) => {
+    if (isTimestampVerified(timestamps, nostrId)) {
+      return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
+    } else {
+      return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
+    }
+  }
+
+  const getCompletedOpenTimestampsInfo = (timestamp: OpenTimestamp) => {
+    if (timestamp.verification) {
+      return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
+    } else {
+      return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
+    }
+  }
+
+  const getTimestampTooltipTitle = (label: string, isVerified: boolean) => {
+    return `${label} / Open Timestamp ${isVerified ? 'Verified' : 'Pending'}`
+  }
+
+  const isUserSignatureTimestampVerified = () => {
+    if (
+      userCanSign &&
+      hexToNpub(usersPubkey) in parsedSignatureEvents &&
+      timestamps &&
+      timestamps.length > 0
+    ) {
+      const nostrId = parsedSignatureEvents[hexToNpub(usersPubkey)].id
+      return isTimestampVerified(timestamps, nostrId)
+    }
+    return false
+  }
+
+  return submittedBy ? (
+    <div className={styles.container}>
+      <div className={styles.section}>
+        <p>Signers</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={20}>
+            {signers.map((signer) => {
+              const pubkey = npubToHex(signer)!
+              return (
+                <DisplaySigner
+                  key={pubkey}
+                  status={signersStatus[signer]}
+                  pubkey={pubkey}
+                />
+              )
+            })}
+          </UserAvatarGroup>
+        </div>
+
+        {viewers.length > 0 && (
+          <>
+            <p>Viewers</p>
+            <div className={styles.users}>
+              <UserAvatarGroup max={20}>
+                {viewers.map((signer) => {
+                  const pubkey = npubToHex(signer)!
+
+                  return (
+                    <DisplaySigner
+                      key={pubkey}
+                      status={SignStatus.Viewer}
+                      pubkey={pubkey}
+                    />
+                  )
+                })}
+              </UserAvatarGroup>
+            </div>
+          </>
+        )}
+
+        {exportedBy && (
+          <>
+            <p>Exported By</p>
+            <div className={styles.users}>
+              <UserAvatar pubkey={exportedBy} />
+            </div>
+          </>
+        )}
+      </div>
+      <div className={styles.section}>
+        <p>Details</p>
+
+        <Tooltip
+          title={getTimestampTooltipTitle(
+            'Publication date',
+            !!(timestamps && id && isTimestampVerified(timestamps, id))
+          )}
+          placement="top"
+          arrow
+          disableInteractive
+        >
+          <span className={styles.detailsItem}>
+            <FontAwesomeIcon icon={faCalendarPlus} />{' '}
+            {createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}{' '}
+            {timestamps &&
+              timestamps.length > 0 &&
+              id &&
+              getOpenTimestampsInfo(timestamps, id)}
+          </span>
+        </Tooltip>
+
+        <Tooltip
+          title={getTimestampTooltipTitle(
+            'Completion date',
+            !!(
+              signedStatus === SigitStatus.Complete &&
+              completedAt &&
+              timestamps &&
+              timestamps.length > 0 &&
+              timestamps[timestamps.length - 1].verification
+            )
+          )}
+          placement="top"
+          arrow
+          disableInteractive
+        >
+          <span className={styles.detailsItem}>
+            <FontAwesomeIcon icon={faCalendarCheck} />{' '}
+            {completedAt ? formatTimestamp(completedAt) : <>&mdash;</>}
+            {signedStatus === SigitStatus.Complete &&
+              completedAt &&
+              timestamps &&
+              timestamps.length > 0 && (
+                <span className={styles.ticket}>
+                  {getCompletedOpenTimestampsInfo(
+                    timestamps[timestamps.length - 1]
+                  )}
+                </span>
+              )}
+          </span>
+        </Tooltip>
+
+        {/* User signed date */}
+        {userCanSign ? (
+          <Tooltip
+            title={getTimestampTooltipTitle(
+              'Your signature date',
+              isUserSignatureTimestampVerified()
+            )}
+            placement="top"
+            arrow
+            disableInteractive
+          >
+            <span className={styles.detailsItem}>
+              <FontAwesomeIcon icon={faCalendar} />{' '}
+              {hexToNpub(usersPubkey) in parsedSignatureEvents ? (
+                parsedSignatureEvents[hexToNpub(usersPubkey)].created_at ? (
+                  formatTimestamp(
+                    fromUnixTimestamp(
+                      parsedSignatureEvents[hexToNpub(usersPubkey)].created_at
+                    )
+                  )
+                ) : (
+                  <>&mdash;</>
+                )
+              ) : (
+                <>&mdash;</>
+              )}
+              {hexToNpub(usersPubkey) in parsedSignatureEvents &&
+                timestamps &&
+                timestamps.length > 0 && (
+                  <span className={styles.ticket}>
+                    {getOpenTimestampsInfo(
+                      timestamps,
+                      parsedSignatureEvents[hexToNpub(usersPubkey)].id
+                    )}
+                  </span>
+                )}
+            </span>
+          </Tooltip>
+        ) : null}
+        <span className={styles.detailsItem}>
+          <FontAwesomeIcon icon={faEye} /> {signedStatus}
+        </span>
+        {extensions.length > 0 ? (
+          <span className={styles.detailsItem}>
+            {!isSame ? (
+              <>
+                <FontAwesomeIcon icon={faFile} /> Multiple File Types
+              </>
+            ) : (
+              getExtensionIconLabel(extensions[0])
+            )}
+          </span>
+        ) : (
+          <>
+            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
+          </>
+        )}
+      </div>
+    </div>
+  ) : undefined
+}

src/components/UsersDetails.tsx/style.module.scss

@@ -0,0 +1,48 @@
+@import '../../styles/colors.scss';
+
+.container {
+  border-radius: 4px;
+  background: $overlay-background-color;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+
+  font-size: 14px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.users {
+  display: flex;
+  grid-gap: 10px;
+}
+
+.detailsItem {
+  transition: ease 0.2s;
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 14px;
+  align-items: center;
+  border-radius: 4px;
+  padding: 5px;
+
+  display: flex;
+
+  > :first-child {
+    padding: 5px;
+    margin-right: 10px;
+  }
+
+  &:hover {
+    background: $primary-main;
+    color: white;
+  }
+}
+
+.ticket {
+  margin-left: auto;
+}

src/components/copyModal.tsx

@@ -0,0 +1,27 @@
+import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+import { CopyToClipboard } from './copyToClipboard'
+
+interface CopyModalProps {
+  open: boolean
+  handleClose: () => void
+  title: string
+  textToCopy: string
+}
+
+export const CopyModal = ({
+  open,
+  handleClose,
+  title,
+  textToCopy
+}: CopyModalProps) => {
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="xs">
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <CopyToClipboard textToCopy={textToCopy} />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default CopyModal

src/components/copyToClipboard.tsx

@@ -0,0 +1,51 @@
+import { ContentCopy } from '@mui/icons-material/'
+import { Box, IconButton, Typography } from '@mui/material'
+import { toast } from 'react-toastify'
+
+type Props = {
+  textToCopy: string
+}
+
+export const CopyToClipboard = ({ textToCopy }: Props) => {
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(textToCopy)
+    toast.success('Copied to clipboard', {
+      autoClose: 1000,
+      hideProgressBar: true
+    })
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%'
+      }}
+    >
+      <Typography
+        onClick={(e) => {
+          e.stopPropagation()
+          handleCopyClick()
+        }}
+        component="label"
+        sx={{
+          flex: '1',
+          overflow: 'auto',
+          whiteSpace: 'nowrap',
+          cursor: 'pointer'
+        }}
+      >
+        {textToCopy}
+      </Typography>
+      <IconButton
+        onClick={(e) => {
+          e.stopPropagation()
+          handleCopyClick()
+        }}
+      >
+        <ContentCopy />
+      </IconButton>
+    </Box>
+  )
+}

src/components/getExtensionIconLabel.tsx

@@ -0,0 +1,78 @@
+import {
+  faFilePdf,
+  faFileExcel,
+  faFileWord,
+  faFilePowerpoint,
+  faFileZipper,
+  faFileCsv,
+  faFileLines,
+  faFileImage,
+  faFile,
+  IconDefinition
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export const getExtensionIconLabel = (extension: string) => {
+  let icon: IconDefinition
+  switch (extension.toLowerCase()) {
+    case 'pdf':
+      icon = faFilePdf
+      break
+    case 'json':
+      icon = faFilePdf
+      break
+
+    case 'xlsx':
+    case 'xls':
+    case 'xlsb':
+    case 'xlsm':
+      icon = faFileExcel
+      break
+
+    case 'doc':
+    case 'docx':
+      icon = faFileWord
+      break
+
+    case 'ppt':
+    case 'pptx':
+      icon = faFilePowerpoint
+      break
+
+    case 'zip':
+    case '7z':
+    case 'rar':
+    case 'tar':
+    case 'gz':
+      icon = faFileZipper
+      break
+
+    case 'csv':
+      icon = faFileCsv
+      break
+
+    case 'txt':
+      icon = faFileLines
+      break
+
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'gif':
+    case 'svg':
+    case 'bmp':
+    case 'ico':
+      icon = faFileImage
+      break
+
+    default:
+      icon = faFile
+      return
+  }
+
+  return (
+    <>
+      <FontAwesomeIcon icon={icon} /> {extension.toUpperCase()}
+    </>
+  )
+}

src/components/getMarkComponents.tsx

@@ -0,0 +1,16 @@
+import { MarkType } from '../types/drawing'
+import { MarkConfigs } from '../types/mark'
+import { MarkInputSignature } from './MarkInputs/Signature'
+import { MarkInputText } from './MarkInputs/Text'
+import { MarkRenderSignature } from './MarkRender/Signature'
+
+export const MARK_TYPE_CONFIG: MarkConfigs = {
+  [MarkType.TEXT]: {
+    input: MarkInputText,
+    render: ({ value }) => <>{value}</>
+  },
+  [MarkType.SIGNATURE]: {
+    input: MarkInputSignature,
+    render: MarkRenderSignature
+  }
+}

src/components/username.module.scss

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  gap: 12px;
+}

src/components/username.tsx

@@ -1,9 +1,8 @@
-import { Typography, IconButton, Box, useTheme } from '@mui/material'
-import { useSelector } from 'react-redux'
-import { State } from '../store/rootReducer'
-import { hexToNpub } from '../utils'
-import { Link } from 'react-router-dom'
-import { getProfileRoute } from '../routes'
+import { Typography } from '@mui/material'
+import { useAppSelector } from '../hooks/store'
+
+import styles from './username.module.scss'
+import { AvatarIconButton } from './UserAvatarIconButton'
 
 type Props = {
   username: string
@@ -11,83 +10,36 @@ type Props = {
   handleClick: (event: React.MouseEvent<HTMLElement>) => void
 }
 
+/**
+ *  This component will be used for the displaying logged in user in AppBar.
+ *  Clicking will open the menu.
+ */
 const Username = ({ username, avatarContent, handleClick }: Props) => {
-  const hexKey = useSelector((state: State) => state.auth.usersPubkey)
+  const hexKey = useAppSelector((state) => state.auth.usersPubkey)
 
   return (
-    <IconButton
-      aria-label="account of current user"
-      aria-controls="menu-appbar"
-      aria-haspopup="true"
-      onClick={handleClick}
-      color="inherit"
-    >
-      <img
-        src={avatarContent}
-        alt="user-avatar"
-        className="profile-image"
-        style={{
-          borderWidth: '3px',
-          borderStyle: hexKey ? 'solid' : 'none',
-          borderColor: `#${hexKey?.substring(0, 6)}`
-        }}
-      />
+    <div className={styles.container}>
       <Typography
         variant="h6"
         sx={{
-          color: '#3e3e3e',
-          padding: '0 8px',
+          fontWeight: 500,
+          fontSize: '14px',
+          color: 'var(--text-color)',
           display: { xs: 'none', md: 'flex' }
         }}
       >
         {username}
       </Typography>
-    </IconButton>
+      <AvatarIconButton
+        src={avatarContent}
+        hexKey={hexKey}
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleClick}
+      />
+    </div>
   )
 }
 
 export default Username
-
-type UserProps = {
-  pubkey: string
-  name: string
-  image?: string
-}
-
-/**
- *  This component will be used for the displaying username and profile picture.
- *  If image is not available, robohash image will be displayed
- */
-export const UserComponent = ({ pubkey, name, image }: UserProps) => {
-  const theme = useTheme()
-
-  const npub = hexToNpub(pubkey)
-  const roboImage = `https://robohash.org/${npub}.png?set=set3`
-
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-      <img
-        src={image || roboImage}
-        alt="User Image"
-        className="profile-image"
-        style={{
-          borderWidth: '3px',
-          borderStyle: 'solid',
-          borderColor: `#${pubkey.substring(0, 6)}`
-        }}
-      />
-      <Link to={getProfileRoute(pubkey)}>
-        <Typography
-          component="label"
-          sx={{
-            textAlign: 'center',
-            cursor: 'pointer',
-            color: theme.palette.text.primary
-          }}
-        >
-          {name}
-        </Typography>
-      </Link>
-    </Box>
-  )
-}

src/constants.ts

@@ -0,0 +1,2 @@
+// Regular expression to validate the NIP-05 identifier
+export const NIP05_REGEX = /^(?:([\w.+-]+)@)?([\w_-]+(\.[\w_-]+)+)$/

src/controllers/AuthController.ts

@@ -1,21 +1,23 @@
 import { EventTemplate } from 'nostr-tools'
 import { MetadataController, NostrController } from '.'
+import { appPrivateRoutes } from '../routes'
 import {
   setAuthState,
   setMetadataEvent,
   setRelayMapAction
 } from '../store/actions'
 import store from '../store/store'
+import { SignedEvent } from '../types'
 import {
   base64DecodeAuthToken,
   base64EncodeSignedEvent,
+  compareObjects,
   getAuthToken,
+  getRelayMap,
   getVisitedLink,
   saveAuthToken,
-  compareObjects
+  unixNow
 } from '../utils'
-import { appPrivateRoutes } from '../routes'
-import { SignedEvent } from '../types'
 
 export class AuthController {
   private nostrController: NostrController
@@ -23,13 +25,13 @@ export class AuthController {
 
   constructor() {
     this.nostrController = NostrController.getInstance()
-    this.metadataController = new MetadataController()
+    this.metadataController = MetadataController.getInstance()
   }
 
   /**
    * Function will authenticate user by signing an auth event
    * which is done by calling the sign() function, where appropriate
-   * method will be chosen (extension, nsecbunker or keys)
+   * method will be chosen (extension or keys)
    *
    * @param pubkey of the user trying to login
    * @returns url to redirect if authentication successfull
@@ -54,13 +56,16 @@ export class AuthController {
       })
 
     // Nostr uses unix timestamps
-    const timestamp = Math.floor(Date.now() / 1000)
-    const { hostname } = window.location
+    const timestamp = unixNow()
+    const { href } = window.location
 
     const authEvent: EventTemplate = {
-      kind: 1,
-      tags: [],
-      content: `${hostname}-${timestamp}`,
+      kind: 27235,
+      tags: [
+        ['u', href],
+        ['method', 'GET']
+      ],
+      content: '',
       created_at: timestamp
     }
 
@@ -74,36 +79,32 @@ export class AuthController {
       })
     )
 
-    const relaysState = store.getState().relays
+    const relayMap = await getRelayMap(pubkey)
 
-    if (relaysState) {
-      // Relays state is defined and there is no need to await for the latest relay map
-      this.nostrController.getRelayMap(pubkey).then((relayMap) => {
-        if (!compareObjects(relaysState?.map, relayMap)) {
-          store.dispatch(setRelayMapAction(relayMap.map))
-        }
-      })
-    } else {
-      // Relays state is not defined, await for the latest relay map
-      const relayMap = await this.nostrController.getRelayMap(pubkey)
-
-      if (Object.keys(relayMap).length < 1) {
-        // Navigate user to relays page
-        return Promise.resolve(appPrivateRoutes.relays)
-      }
-
-      store.dispatch(setRelayMapAction(relayMap.map))
+    if (Object.keys(relayMap).length < 1) {
+      // Navigate user to relays page if relay map is empty
+      return Promise.resolve(appPrivateRoutes.relays)
     }
 
-    const visitedLink = getVisitedLink()
+    if (store.getState().auth.loggedIn) {
+      if (!compareObjects(store.getState().relays?.map, relayMap.map))
+        store.dispatch(setRelayMapAction(relayMap.map))
+    }
 
-    if (visitedLink) {
-      const { pathname, search } = visitedLink
+    const currentLocation = window.location.hash.replace('#', '')
 
-      return Promise.resolve(`${pathname}${search}`)
-    } else {
-      // Navigate user in
-      return Promise.resolve(appPrivateRoutes.homePage)
+    if (!Object.values(appPrivateRoutes).includes(currentLocation)) {
+      // User did change the location to one of the private routes
+      const visitedLink = getVisitedLink()
+
+      if (visitedLink) {
+        const { pathname, search } = visitedLink
+
+        return Promise.resolve(`${pathname}${search}`)
+      } else {
+        // Navigate user in
+        return Promise.resolve(appPrivateRoutes.homePage)
+      }
     }
   }
 

src/controllers/MetadataController.ts

@@ -1,146 +1,165 @@
 import {
+  Event,
   Filter,
-  SimplePool,
   VerifiedEvent,
   kinds,
   validateEvent,
-  verifyEvent,
-  Event,
-  EventTemplate,
-  nip19
+  verifyEvent
 } from 'nostr-tools'
-import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types'
-import { NostrController } from '.'
 import { toast } from 'react-toastify'
-import { queryNip05 } from '../utils'
-import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk'
+import { EventEmitter } from 'tseep'
+import { NostrController, relayController } from '.'
+import { localCache } from '../services'
+import { ProfileMetadata, RelaySet } from '../types'
+import {
+  findRelayListAndUpdateCache,
+  findRelayListInCache,
+  getDefaultRelaySet,
+  getUserRelaySet,
+  isOlderThanOneDay,
+  unixNow
+} from '../utils'
+import { DEFAULT_LOOK_UP_RELAY_LIST } from '../utils/const'
 
-export class MetadataController {
+export class MetadataController extends EventEmitter {
+  private static instance: MetadataController
   private nostrController: NostrController
   private specialMetadataRelay = 'wss://purplepag.es'
+  private pendingFetches = new Map<string, Promise<Event | null>>() // Track pending fetches
 
   constructor() {
+    super()
     this.nostrController = NostrController.getInstance()
   }
 
-  public getEmptyMetadataEvent = (): Event => {
-    return {
-      content: '',
-      created_at: new Date().valueOf(),
-      id: '',
-      kind: 0,
-      pubkey: '',
-      sig: '',
-      tags: []
+  public static getInstance(): MetadataController {
+    if (!MetadataController.instance) {
+      MetadataController.instance = new MetadataController()
     }
+    return MetadataController.instance
   }
 
-  public findMetadata = async (hexKey: string) => {
+  /**
+   * Asynchronously checks for more recent metadata events authored by a specific key.
+   * If a more recent metadata event is found, it is handled and returned.
+   * If no more recent event is found, the current event is returned.
+   * @param hexKey The hexadecimal key of the author to filter metadata events.
+   * @param currentEvent The current metadata event, if any, to compare with newer events.
+   * @returns A promise resolving to the most recent metadata event found, or null if none is found.
+   */
+  private async checkForMoreRecentMetadata(
+    hexKey: string,
+    currentEvent: Event | null
+  ): Promise<Event | null> {
+    // Return the ongoing fetch promise if one exists for the same hexKey
+    if (this.pendingFetches.has(hexKey)) {
+      return this.pendingFetches.get(hexKey)!
+    }
+
+    // Define the event filter to only include metadata events authored by the given key
     const eventFilter: Filter = {
       kinds: [kinds.Metadata],
       authors: [hexKey]
     }
 
-    const pool = new SimplePool()
-
-    const metadataEvent = await pool
-      .get([this.specialMetadataRelay], eventFilter)
+    const fetchPromise = relayController
+      .fetchEvent(eventFilter, DEFAULT_LOOK_UP_RELAY_LIST)
       .catch((err) => {
         console.error(err)
         return null
       })
+      .finally(() => {
+        this.pendingFetches.delete(hexKey)
+      })
+
+    this.pendingFetches.set(hexKey, fetchPromise)
+
+    const metadataEvent = await fetchPromise
 
     if (
       metadataEvent &&
       validateEvent(metadataEvent) &&
       verifyEvent(metadataEvent)
     ) {
+      if (
+        !currentEvent ||
+        metadataEvent.created_at >= currentEvent.created_at
+      ) {
+        this.handleNewMetadataEvent(metadataEvent)
+      }
       return metadataEvent
     }
 
-    const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
-    const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
-    const relays = [...hardcodedPopularRelays]
+    // todo/implement: if no valid metadata event is found in DEFAULT_LOOK_UP_RELAY_LIST
+    // try to query user relay list
 
-    const events = await pool.querySync(relays, eventFilter).catch((err) => {
-      console.error(err)
-      return null
-    })
-
-    if (events && events.length) {
-      events.sort((a, b) => b.created_at - a.created_at)
-
-      for (const event of events) {
-        if (validateEvent(event) && verifyEvent(event)) {
-          return event
-        }
-      }
+    // if current event is null we should cache empty metadata event for provided hexKey
+    if (!currentEvent) {
+      const emptyMetadata = this.getEmptyMetadataEvent(hexKey)
+      this.handleNewMetadataEvent(emptyMetadata as VerifiedEvent)
     }
 
-    throw new Error('Mo metadata found.')
+    return currentEvent
   }
 
-  public findRelayListMetadata = async (hexKey: string) => {
-    const eventFilter: Filter = {
-      kinds: [kinds.RelayList],
-      authors: [hexKey]
-    }
-
-    const pool = new SimplePool()
-
-    let relayEvent = await pool
-      .get([this.specialMetadataRelay], eventFilter)
-      .catch((err) => {
-        console.error(err)
-        return null
-      })
-
-    if (!relayEvent) {
-      const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
-      const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
-      const relays = [...hardcodedPopularRelays]
-
-      relayEvent = await pool.get(relays, eventFilter).catch((err) => {
-        console.error(err)
-        return null
-      })
-    }
-
-    if (relayEvent) {
-      const relaySet: RelaySet = {
-        read: [],
-        write: []
-      }
-
-      // a list of r tags with relay URIs and a read or write marker.
-      const relayTags = relayEvent.tags.filter((tag) => tag[0] === 'r')
-
-      // Relays marked as read / write are called READ / WRITE relays, respectively
-      relayTags.forEach((tag) => {
-        if (tag.length >= 3) {
-          const marker = tag[2]
-
-          if (marker === 'read') {
-            relaySet.read.push(tag[1])
-          } else if (marker === 'write') {
-            relaySet.write.push(tag[1])
-          }
-        }
-
-        // If the marker is omitted, the relay is used for both purposes
-        if (tag.length === 2) {
-          relaySet.read.push(tag[1])
-          relaySet.write.push(tag[1])
-        }
-      })
-
-      return relaySet
-    }
-
-    throw new Error('No relay list metadata found.')
+  /**
+   * Handle new metadata events and emit them to subscribers
+   */
+  private async handleNewMetadataEvent(event: VerifiedEvent) {
+    // update the event in local cache
+    localCache.addUserMetadata(event)
+    // Emit the event to subscribers.
+    this.emit(event.pubkey, event.kind, event)
   }
 
-  public extractProfileMetadataContent = (event: VerifiedEvent) => {
+  /**
+   * Finds metadata for a given hexadecimal key.
+   *
+   * @param hexKey - The hexadecimal key to search for metadata.
+   * @returns A promise that resolves to the metadata event.
+   */
+  public findMetadata = async (hexKey: string): Promise<Event | null> => {
+    // Attempt to retrieve the metadata event from the local cache
+    const cachedMetadataEvent = await localCache.getUserMetadata(hexKey)
+
+    // If cached metadata is found, check its validity
+    if (cachedMetadataEvent) {
+      // Check if the cached metadata is older than one day
+      if (isOlderThanOneDay(cachedMetadataEvent.cachedAt)) {
+        // If older than one week, find the metadata from relays in background
+        this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event)
+      }
+
+      // Return the cached metadata event
+      return cachedMetadataEvent.event
+    }
+
+    // If no cached metadata is found, retrieve it from relays
+    return this.checkForMoreRecentMetadata(hexKey, null)
+  }
+
+  /**
+   * Based on the hexKey of the current user, this method attempts to retrieve a relay set.
+   * @func findRelayListInCache first checks if there is already an up-to-date
+   * relay list available in cache; if not -
+   * @func findRelayListAndUpdateCache checks if the relevant relay event is available from
+   * the purple pages relay;
+   * @func findRelayListAndUpdateCache will run again if the previous two calls return null and
+   * check if the relevant relay event can be obtained from 'most popular relays'
+   * If relay event is found, it will be saved in cache for future use
+   * @param hexKey of the current user
+   * @return RelaySet which will contain either relays extracted from the user Relay Event
+   * or a fallback RelaySet with Sigit's Relay
+   */
+  public findRelayListMetadata = async (hexKey: string): Promise<RelaySet> => {
+    const relayEvent =
+      (await findRelayListInCache(hexKey)) ||
+      (await findRelayListAndUpdateCache(DEFAULT_LOOK_UP_RELAY_LIST, hexKey))
+
+    return relayEvent ? getUserRelaySet(relayEvent.tags) : getDefaultRelaySet()
+  }
+
+  public extractProfileMetadataContent = (event: Event) => {
     try {
       if (!event.content) return {}
       return JSON.parse(event.content) as ProfileMetadata
@@ -157,7 +176,7 @@ export class MetadataController {
     let signedMetadataEvent = event
 
     if (event.sig.length < 1) {
-      const timestamp = Math.floor(Date.now() / 1000)
+      const timestamp = unixNow()
 
       // Metadata event to publish to the wss://purplepag.es relay
       const newMetadataEvent: Event = {
@@ -169,139 +188,32 @@ export class MetadataController {
         await this.nostrController.signEvent(newMetadataEvent)
     }
 
-    await this.nostrController
-      .publishEvent(signedMetadataEvent, [this.specialMetadataRelay])
+    await relayController
+      .publish(signedMetadataEvent, [this.specialMetadataRelay])
       .then((relays) => {
-        toast.success(`Metadata event published on: ${relays.join('\n')}`)
+        if (relays.length) {
+          toast.success(`Metadata event published on: ${relays.join('\n')}`)
+          this.handleNewMetadataEvent(signedMetadataEvent as VerifiedEvent)
+        } else {
+          toast.error('Could not publish metadata event to any relay!')
+        }
       })
       .catch((err) => {
         toast.error(err.message)
       })
   }
 
-  public getNostrJoiningBlockNumber = async (
-    hexKey: string
-  ): Promise<NostrJoiningBlock | null> => {
-    const relaySet = await this.findRelayListMetadata(hexKey)
-
-    const userRelays: string[] = []
-
-    // find user's relays
-    if (relaySet.write.length > 0) {
-      userRelays.push(...relaySet.write)
-    } else {
-      const metadata = await this.findMetadata(hexKey)
-      const metadataContent = this.extractProfileMetadataContent(metadata)
-
-      if (metadataContent?.nip05) {
-        const nip05Profile = await queryNip05(metadataContent.nip05)
-
-        if (nip05Profile && nip05Profile.pubkey === hexKey) {
-          userRelays.push(...nip05Profile.relays)
-        }
-      }
-    }
-
-    if (userRelays.length === 0) return null
-
-    // filter for finding user's first kind 1 event
-    const eventFilter: Filter = {
-      kinds: [kinds.ShortTextNote],
-      authors: [hexKey]
-    }
-
-    const pool = new SimplePool()
-
-    // find user's kind 1 events published on user's relays
-    const events = await pool.querySync(userRelays, eventFilter)
-    if (events && events.length) {
-      // sort events by created_at time in ascending order
-      events.sort((a, b) => a.created_at - b.created_at)
-
-      // get first ever event published on user's relays
-      const event = events[0]
-      const { created_at } = event
-
-      // initialize job request
-      const jobEventTemplate: EventTemplate = {
-        content: '',
-        created_at: Math.round(Date.now() / 1000),
-        kind: 68001,
-        tags: [
-          ['i', `${created_at * 1000}`],
-          ['j', 'blockChain-block-number']
-        ]
-      }
-
-      // sign job request event
-      const jobSignedEvent =
-        await this.nostrController.signEvent(jobEventTemplate)
-
-      const relays = [
-        'wss://relay.damus.io',
-        'wss://relay.primal.net',
-        'wss://relayable.org'
-      ]
-
-      // publish job request
-      await this.nostrController.publishEvent(jobSignedEvent, relays)
-
-      console.log('jobSignedEvent :>> ', jobSignedEvent)
-
-      const subscribeWithTimeout = (
-        subscription: NDKSubscription,
-        timeoutMs: number
-      ): Promise<string> => {
-        return new Promise((resolve, reject) => {
-          const eventHandler = (event: NDKEvent) => {
-            subscription.stop()
-            resolve(event.content)
-          }
-
-          subscription.on('event', eventHandler)
-
-          // Set up a timeout to stop the subscription after a specified time
-          const timeout = setTimeout(() => {
-            subscription.stop() // Stop the subscription
-            reject(new Error('Subscription timed out')) // Reject the promise with a timeout error
-          }, timeoutMs)
-
-          // Handle subscription close event
-          subscription.on('close', () => clearTimeout(timeout))
-        })
-      }
-
-      const dvmNDK = new NDK({
-        explicitRelayUrls: relays
-      })
-
-      await dvmNDK.connect(2000)
-
-      // filter for getting DVM job's result
-      const sub = dvmNDK.subscribe({
-        kinds: [68002 as number],
-        '#e': [jobSignedEvent.id],
-        '#p': [jobSignedEvent.pubkey]
-      })
-
-      // asynchronously get block number from dvm job with 20 seconds timeout
-      const dvmJobResult = await subscribeWithTimeout(sub, 20000)
-
-      const encodedEventPointer = nip19.neventEncode({
-        id: event.id,
-        relays: userRelays,
-        author: event.pubkey,
-        kind: event.kind
-      })
-
-      return {
-        block: parseInt(dvmJobResult),
-        encodedEventPointer
-      }
-    }
-
-    return null
-  }
-
   public validate = (event: Event) => validateEvent(event) && verifyEvent(event)
+
+  public getEmptyMetadataEvent = (pubkey?: string): Event => {
+    return {
+      content: '',
+      created_at: new Date().valueOf(),
+      id: '',
+      kind: 0,
+      pubkey: pubkey || '',
+      sig: '',
+      tags: []
+    }
+  }
 }

src/controllers/NostrController.ts

@@ -1,195 +1,24 @@
-import NDK, {
-  NDKEvent,
-  NDKNip46Signer,
-  NDKPrivateKeySigner,
-  NDKUser,
-  NostrEvent
-} from '@nostr-dev-kit/ndk'
-import {
-  Event,
-  EventTemplate,
-  SimplePool,
-  Filter,
-  UnsignedEvent,
-  finalizeEvent,
-  nip04,
-  nip19,
-  kinds
-} from 'nostr-tools'
+import { EventTemplate, UnsignedEvent } from 'nostr-tools'
+import { WindowNostr } from 'nostr-tools/nip07'
 import { EventEmitter } from 'tseep'
-import { updateNsecbunkerPubkey } from '../store/actions'
-import { AuthState, LoginMethods } from '../store/auth/types'
 import store from '../store/store'
-import { SignedEvent, RelayMap } from '../types'
-import { getNsecBunkerDelegatedKey, verifySignedEvent } from '../utils'
+import { SignedEvent } from '../types'
+import { LoginMethodContext } from '../services/LoginMethodStrategy/loginMethodContext'
 
 export class NostrController extends EventEmitter {
   private static instance: NostrController
-  private specialMetadataRelay = 'wss://purplepag.es'
-
-  private bunkerNDK: NDK | undefined
-  private remoteSigner: NDKNip46Signer | undefined
 
   private constructor() {
     super()
   }
-
   private getNostrObject = () => {
-    if (window.nostr) return window.nostr
+    if (window.nostr) return window.nostr as WindowNostr
 
     throw new Error(
       `window.nostr object not present. Make sure you have an nostr extension installed/working properly.`
     )
   }
 
-  public nsecBunkerInit = async (relays: string[]) => {
-    // Don't reinstantiate bunker NDK if exists with same relays
-    if (
-      this.bunkerNDK &&
-      this.bunkerNDK.explicitRelayUrls?.length === relays.length &&
-      this.bunkerNDK.explicitRelayUrls?.every((relay) => relays.includes(relay))
-    )
-      return
-
-    this.bunkerNDK = new NDK({
-      explicitRelayUrls: relays
-    })
-
-    try {
-      await this.bunkerNDK
-        .connect(2000)
-        .then(() => {
-          console.log(
-            `Successfully connected to the nsecBunker relays: ${relays.join(
-              ','
-            )}`
-          )
-        })
-        .catch((err) => {
-          console.error(
-            `Error connecting to the nsecBunker relays: ${relays.join(
-              ','
-            )} ${err}`
-          )
-        })
-    } catch (err) {
-      console.error(err)
-    }
-  }
-
-  /**
-   * Creates nSecBunker signer instance for the given npub
-   * Or if npub omitted it will return existing signer
-   * If neither, error will be thrown
-   * @param npub nPub / public key in hex format
-   * @returns nsecBunker Signer instance
-   */
-  public createNsecBunkerSigner = async (
-    npub: string | undefined
-  ): Promise<NDKNip46Signer> => {
-    const nsecBunkerDelegatedKey = getNsecBunkerDelegatedKey()
-
-    return new Promise((resolve, reject) => {
-      if (!nsecBunkerDelegatedKey) {
-        reject('nsecBunker delegated key is not found in the browser.')
-        return
-      }
-      const localSigner = new NDKPrivateKeySigner(nsecBunkerDelegatedKey)
-
-      if (!npub) {
-        if (this.remoteSigner) resolve(this.remoteSigner)
-
-        const npubFromStorage = (store.getState().auth as AuthState)
-          .nsecBunkerPubkey
-
-        if (npubFromStorage) {
-          npub = npubFromStorage
-        } else {
-          reject(
-            'No signer instance present, no npub provided by user or found in the browser.'
-          )
-          return
-        }
-      } else {
-        store.dispatch(updateNsecbunkerPubkey(npub))
-      }
-
-      // Pubkey of a key pair stored in nsecbunker that will be used to sign event with
-      const appPubkeyOrToken = npub.includes('npub')
-        ? npub
-        : nip19.npubEncode(npub)
-
-      /**
-       * When creating and NDK instance we create new connection to the relay
-       * To prevent too much connections and hitting rate limits, if npub against which we sign
-       * we will reuse existing instance. Otherwise we will create new NDK and signer instance.
-       */
-      if (!this.remoteSigner || this.remoteSigner?.remotePubkey !== npub) {
-        this.remoteSigner = new NDKNip46Signer(
-          this.bunkerNDK!,
-          appPubkeyOrToken,
-          localSigner
-        )
-      }
-
-      /**
-       * when nsecbunker-delegated-key is regenerated we have to reinitialize the remote signer
-       */
-      if (this.remoteSigner.localSigner !== localSigner) {
-        this.remoteSigner = new NDKNip46Signer(
-          this.bunkerNDK!,
-          appPubkeyOrToken,
-          localSigner
-        )
-      }
-
-      resolve(this.remoteSigner)
-    })
-  }
-
-  /**
-   * Signs the nostr event and returns the sig and id or full raw nostr event
-   * @param npub stored in nsecBunker to sign with
-   * @param event to be signed
-   * @param returnFullEvent whether to return full raw nostr event or just SIG and ID values
-   */
-  public signWithNsecBunker = async (
-    npub: string | undefined,
-    event: NostrEvent,
-    returnFullEvent = true
-  ): Promise<{ id: string; sig: string } | NostrEvent> => {
-    return new Promise((resolve, reject) => {
-      this.createNsecBunkerSigner(npub)
-        .then(async (signer) => {
-          const ndkEvent = new NDKEvent(undefined, event)
-
-          const timeout = setTimeout(() => {
-            reject('Timeout occurred while waiting for event signing')
-          }, 60000) // 60000 ms (1 min) = 1000 * 60
-
-          await ndkEvent.sign(signer).catch((err) => {
-            clearTimeout(timeout)
-            reject(err)
-            return
-          })
-
-          clearTimeout(timeout)
-
-          if (returnFullEvent) {
-            resolve(ndkEvent.rawEvent())
-          } else {
-            resolve({
-              id: ndkEvent.id,
-              sig: ndkEvent.sig!
-            })
-          }
-        })
-        .catch((err) => {
-          reject(err)
-        })
-    })
-  }
-
   public static getInstance(): NostrController {
     if (!NostrController.instance) {
       NostrController.instance = new NostrController()
@@ -198,163 +27,73 @@ export class NostrController extends EventEmitter {
   }
 
   /**
-   * Function will publish provided event to the provided relays
+   * Encrypts the given content for the specified receiver using NIP-44 encryption.
+   *
+   * @param receiver The public key of the receiver.
+   * @param content The content to be encrypted.
+   * @returns The encrypted content as a string.
+   * @throws Error if the nostr extension does not support NIP-44, if the private key pair is not found, or if the login method is unsupported.
    */
-  publishEvent = async (event: Event, relays: string[]) => {
-    const simplePool = new SimplePool()
+  nip44Encrypt = async (receiver: string, content: string) => {
+    // Retrieve the current login method from the application's redux state.
+    const loginMethod = store.getState().auth.loginMethod
+    const context = new LoginMethodContext(loginMethod)
 
-    const promises = simplePool.publish(relays, event)
+    // Handle encryption when the login method is via an extension.
+    return await context.nip44Encrypt(receiver, content)
+  }
 
-    const results = await Promise.allSettled(promises)
+  /**
+   * Decrypts the given content from the specified sender using NIP-44 decryption.
+   *
+   * @param sender The public key of the sender.
+   * @param content The encrypted content to be decrypted.
+   * @returns The decrypted content as a string.
+   * @throws Error if the nostr extension does not support NIP-44, if the private key pair is not found, or if the login method is unsupported.
+   */
+  nip44Decrypt = async (sender: string, content: string) => {
+    // Retrieve the current login method from the application's redux state.
+    const loginMethod = store.getState().auth.loginMethod
+    const context = new LoginMethodContext(loginMethod)
 
-    const publishedRelays: string[] = []
-
-    console.log('results of publish event :>> ', results)
-
-    results.forEach((result, index) => {
-      if (result.status === 'fulfilled') {
-        publishedRelays.push(relays[index])
-      }
-    })
-
-    if (publishedRelays.length === 0) {
-      const failedPublishes: any[] = []
-      const fallbackRejectionReason =
-        'Attempt to publish an event has been rejected with unknown reason.'
-
-      results.forEach((res, index) => {
-        if (res.status === 'rejected') {
-          failedPublishes.push({
-            relay: relays[index],
-            error: res.reason
-              ? res.reason.message || fallbackRejectionReason
-              : fallbackRejectionReason
-          })
-        }
-      })
-
-      throw failedPublishes
-    }
-
-    return publishedRelays
+    // Handle decryption
+    return await context.nip44Decrypt(sender, content)
   }
 
   /**
    * Signs an event with private key (if it is present in local storage) or
-   * with browser extension (if it is present) or
-   * with nSecBunker instance.
+   * with browser extension (if it is present)
    * @param event - unsigned nostr event.
    * @returns - a promised that is resolved with signed nostr event.
    */
   signEvent = async (
     event: UnsignedEvent | EventTemplate
   ): Promise<SignedEvent> => {
-    const loginMethod = (store.getState().auth as AuthState).loginMethod
+    const loginMethod = store.getState().auth.loginMethod
+    const context = new LoginMethodContext(loginMethod)
 
-    if (!loginMethod) {
-      return Promise.reject('No login method found in the browser storage')
-    }
-
-    if (loginMethod === LoginMethods.nsecBunker) {
-      // Check if nsecBunker is available
-      if (!this.bunkerNDK) {
-        return Promise.reject(
-          `Login method is ${loginMethod} but bunkerNDK is not created`
-        )
-      }
-
-      if (!this.remoteSigner) {
-        return Promise.reject(
-          `Login method is ${loginMethod} but bunkerNDK is not created`
-        )
-      }
-
-      const signedEvent = await this.signWithNsecBunker(
-        '',
-        event as NostrEvent
-      ).catch((err) => {
-        throw err
-      })
-
-      return Promise.resolve(signedEvent as SignedEvent)
-    } else if (loginMethod === LoginMethods.privateKey) {
-      const keys = (store.getState().auth as AuthState).keyPair
-
-      if (!keys) {
-        return Promise.reject(
-          `Login method is ${loginMethod}, but keys are not found`
-        )
-      }
-
-      const { private: nsec } = keys
-      const privateKey = nip19.decode(nsec).data as Uint8Array
-
-      const signedEvent = finalizeEvent(event, privateKey)
-
-      verifySignedEvent(signedEvent)
-
-      return Promise.resolve(signedEvent)
-    } else if (loginMethod === LoginMethods.extension) {
-      const nostr = this.getNostrObject()
-
-      return (await nostr.signEvent(event as NostrEvent).catch((err: any) => {
-        console.log('Error while signing event: ', err)
-
-        throw err
-      })) as Event
-    } else {
-      return Promise.reject(
-        `We could not sign the event, none of the signing methods are available`
-      )
-    }
+    return await context.signEvent(event)
   }
 
-  nip04Encrypt = async (receiver: string, content: string) => {
-    const loginMethod = (store.getState().auth as AuthState).loginMethod
+  nip04Encrypt = async (receiver: string, content: string): Promise<string> => {
+    const loginMethod = store.getState().auth.loginMethod
+    const context = new LoginMethodContext(loginMethod)
 
-    if (loginMethod === LoginMethods.extension) {
-      const nostr = this.getNostrObject()
+    return await context.nip04Encrypt(receiver, content)
+  }
 
-      if (!nostr.nip04) {
-        throw new Error(
-          `Your nostr extension does not support nip04 encryption & decryption`
-        )
-      }
+  /**
+   * Decrypts a given content based on the current login method.
+   *
+   * @param sender - The sender's public key.
+   * @param content - The encrypted content to decrypt.
+   * @returns A promise that resolves to the decrypted content.
+   */
+  nip04Decrypt = async (sender: string, content: string): Promise<string> => {
+    const loginMethod = store.getState().auth.loginMethod
+    const context = new LoginMethodContext(loginMethod)
 
-      const encrypted = await nostr.nip04.encrypt(receiver, content)
-      return encrypted
-    }
-
-    if (loginMethod === LoginMethods.privateKey) {
-      const keys = (store.getState().auth as AuthState).keyPair
-
-      if (!keys) {
-        throw new Error(
-          `Login method is ${LoginMethods.privateKey} but private & public key pair is not found.`
-        )
-      }
-
-      const { private: nsec } = keys
-      const privateKey = nip19.decode(nsec).data as Uint8Array
-
-      const encrypted = await nip04.encrypt(privateKey, receiver, content)
-      return encrypted
-    }
-
-    if (loginMethod === LoginMethods.nsecBunker) {
-      const user = new NDKUser({ pubkey: receiver })
-
-      this.remoteSigner?.on('authUrl', (authUrl) => {
-        this.emit('nsecbunker-auth', authUrl)
-      })
-
-      if (!this.remoteSigner) throw new Error('Remote signer is undefined.')
-      const encrypted = await this.remoteSigner.encrypt(user, content)
-
-      return encrypted
-    }
-
-    throw new Error('Login method is undefined')
+    return await context.nip04Decrypt(sender, content)
   }
 
   /**
@@ -363,8 +102,12 @@ export class NostrController extends EventEmitter {
    */
   capturePublicKey = async (): Promise<string> => {
     const nostr = this.getNostrObject()
-    const pubKey = await nostr.getPublicKey().catch((err: any) => {
-      return Promise.reject(err.message)
+    const pubKey = await nostr.getPublicKey().catch((err: unknown) => {
+      if (err instanceof Error) {
+        return Promise.reject(err.message)
+      } else {
+        return Promise.reject(JSON.stringify(err))
+      }
     })
 
     if (!pubKey) {
@@ -373,116 +116,4 @@ export class NostrController extends EventEmitter {
 
     return Promise.resolve(pubKey)
   }
-
-  /**
-   * Provides relay map.
-   * @param npub - user's npub
-   * @returns - promise that resolves into relay map and a timestamp when it has been updated.
-   */
-  getRelayMap = async (
-    npub: string
-  ): Promise<{ map: RelayMap; mapUpdated: number }> => {
-    const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
-    const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
-    const popularRelayURIs = [
-      this.specialMetadataRelay,
-      ...hardcodedPopularRelays
-    ]
-
-    const pool = new SimplePool()
-
-    // More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
-    const eventFilter: Filter = {
-      kinds: [kinds.RelayList],
-      authors: [npub]
-    }
-
-    const event = await pool.get(popularRelayURIs, eventFilter).catch((err) => {
-      return Promise.reject(err)
-    })
-
-    if (event) {
-      // Handle founded 10002 event
-      const relaysMap: RelayMap = {}
-
-      // 'r' stands for 'relay'
-      const relayTags = event.tags.filter((tag) => tag[0] === 'r')
-
-      relayTags.forEach((tag) => {
-        const uri = tag[1]
-        const relayType = tag[2]
-
-        // if 3rd element of relay tag is undefined, relay is WRITE and READ
-        relaysMap[uri] = {
-          write: relayType ? relayType === 'write' : true,
-          read: relayType ? relayType === 'read' : true
-        }
-      })
-
-      return Promise.resolve({ map: relaysMap, mapUpdated: event.created_at })
-    } else {
-      return Promise.reject('User relays were not found.')
-    }
-  }
-
-  /**
-   * Publishes relay map.
-   * @param relayMap - relay map.
-   * @param npub - user's npub.
-   * @returns - promise that resolves into a string representing publishing result.
-   */
-  publishRelayMap = async (
-    relayMap: RelayMap,
-    npub: string
-  ): Promise<string> => {
-    const timestamp = Math.floor(Date.now() / 1000)
-    const relayURIs = Object.keys(relayMap)
-
-    // More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
-    const tags: string[][] = relayURIs.map((relayURI) =>
-      [
-        'r',
-        relayURI,
-        relayMap[relayURI].read && relayMap[relayURI].write
-          ? ''
-          : relayMap[relayURI].write
-            ? 'write'
-            : 'read'
-      ].filter((value) => value !== '')
-    )
-
-    const newRelayMapEvent: UnsignedEvent = {
-      kind: kinds.RelayList,
-      tags,
-      content: '',
-      pubkey: npub,
-      created_at: timestamp
-    }
-
-    const signedEvent = await this.signEvent(newRelayMapEvent)
-
-    let relaysToPublish = relayURIs
-
-    // If relay map is empty, use most popular relay URIs
-    if (!relaysToPublish.length) {
-      const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
-      const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
-
-      relaysToPublish = [this.specialMetadataRelay, ...hardcodedPopularRelays]
-    }
-
-    await this.publishEvent(signedEvent, relaysToPublish)
-
-    return Promise.resolve(
-      `Relay Map published on: ${relaysToPublish.join('\n')}`
-    )
-  }
-
-  /**
-   * Generates NDK Private Signer
-   * @returns nSecBunker delegated key
-   */
-  generateDelegatedKey = (): string => {
-    return NDKPrivateKeySigner.generate().privateKey!
-  }
 }

src/controllers/RelayController.ts

@@ -0,0 +1,306 @@
+import { Event, Filter, Relay } from 'nostr-tools'
+import {
+  settleAllFullfilfedPromises,
+  normalizeWebSocketURL,
+  timeout
+} from '../utils'
+import { SIGIT_RELAY } from '../utils/const'
+
+/**
+ * Singleton class to manage relay operations.
+ */
+export class RelayController {
+  private static instance: RelayController
+  private pendingConnections = new Map<string, Promise<Relay | null>>() // Track pending connections
+  public connectedRelays = new Map<string, Relay>()
+
+  private constructor() {}
+
+  /**
+   * Provides the singleton instance of RelayController.
+   *
+   * @returns The singleton instance of RelayController.
+   */
+  public static getInstance(): RelayController {
+    if (!RelayController.instance) {
+      RelayController.instance = new RelayController()
+    }
+    return RelayController.instance
+  }
+
+  /**
+   * Connects to a relay server if not already connected.
+   *
+   * This method checks if a relay with the given URL is already in the list of connected relays.
+   * If it is not connected, it attempts to establish a new connection.
+   * On successful connection, the relay is added to the list of connected relays and returned.
+   * If the connection fails, an error is logged and `null` is returned.
+   *
+   * @param  relayUrl - The URL of the relay server to connect to.
+   * @returns  A promise that resolves to the connected relay object if successful, or `null` if the connection fails.
+   */
+  public connectRelay = async (relayUrl: string): Promise<Relay | null> => {
+    const normalizedWebSocketURL = normalizeWebSocketURL(relayUrl)
+    const relay = this.connectedRelays.get(normalizedWebSocketURL)
+
+    if (relay) {
+      if (relay.connected) return relay
+
+      // If relay is found in connectedRelay map but not connected,
+      // remove it from map and call connectRelay method again
+      this.connectedRelays.delete(relayUrl)
+      return this.connectRelay(relayUrl)
+    }
+
+    // Check if there's already a pending connection for this relay URL
+    if (this.pendingConnections.has(relayUrl)) {
+      // Return the existing promise to avoid making another connection
+      return this.pendingConnections.get(relayUrl)!
+    }
+
+    // Create a new connection promise and store it in pendingConnections
+    const connectionPromise = Relay.connect(relayUrl)
+      .then((relay) => {
+        if (relay.connected) {
+          // Add the newly connected relay to the connected relays map
+          this.connectedRelays.set(relayUrl, relay)
+
+          // Return the newly connected relay
+          return relay
+        }
+
+        return null
+      })
+      .catch((err) => {
+        // Log an error message if the connection fails
+        console.error(`Relay connection failed: ${relayUrl}`, err)
+
+        // Return null to indicate connection failure
+        return null
+      })
+      .finally(() => {
+        // Remove the connection from pendingConnections once it settles
+        this.pendingConnections.delete(relayUrl)
+      })
+
+    this.pendingConnections.set(relayUrl, connectionPromise)
+    return connectionPromise
+  }
+
+  /**
+   * Asynchronously retrieves multiple event from a set of relays based on a provided filter.
+   * If no relays are specified, it defaults to using connected relays.
+   *
+   * @param filter - The filter criteria to find the event.
+   * @param relays - An optional array of relay URLs to search for the event.
+   * @returns  Returns a promise that resolves with an array of events.
+   */
+  fetchEvents = async (
+    filter: Filter,
+    relayUrls: string[] = []
+  ): Promise<Event[]> => {
+    if (!relayUrls.includes(SIGIT_RELAY)) {
+      /**
+       * NOTE: To avoid side-effects on external relayUrls array passed as argument
+       * re-assigned relayUrls with added sigit relay instead of just appending to same array
+       */
+
+      relayUrls = [...relayUrls, SIGIT_RELAY] // Add app relay to relays array if not exists already
+    }
+
+    // connect to all specified relays
+    const relays = await settleAllFullfilfedPromises(
+      relayUrls,
+      this.connectRelay
+    )
+
+    // Check if any relays are connected
+    if (relays.length === 0) {
+      throw new Error('No relay is connected to fetch events!')
+    }
+
+    const events: Event[] = []
+    const eventIds = new Set<string>() // To keep track of event IDs and avoid duplicates
+
+    // Create a promise for each relay subscription
+    const subPromises = relays.map((relay) => {
+      return new Promise<void>((resolve) => {
+        if (!relay.connected) {
+          console.log(`${relay.url} : Not connected!`, 'Skipping subscription')
+          return resolve()
+        }
+
+        // Subscribe to the relay with the specified filter
+        const sub = relay.subscribe([filter], {
+          // Handle incoming events
+          onevent: (e) => {
+            // Add the event to the array if it's not a duplicate
+            if (!eventIds.has(e.id)) {
+              eventIds.add(e.id) // Record the event ID
+              events.push(e) // Add the event to the array
+            }
+          },
+          // Handle the End-Of-Stream (EOSE) message
+          oneose: () => {
+            sub.close() // Close the subscription
+            resolve() // Resolve the promise when EOSE is received
+          }
+        })
+
+        // add a 30 sec of timeout to subscription
+        setTimeout(() => {
+          if (!sub.closed) {
+            sub.close()
+            resolve()
+          }
+        }, 30 * 1000)
+      })
+    })
+
+    // Wait for all subscriptions to complete
+    await Promise.allSettled(subPromises)
+
+    // It is possible that different relays will send different events and events array may contain more events then specified limit in filter
+    // To fix this issue we'll first sort these events and then return only limited events
+    if (filter.limit) {
+      // Sort events by creation date in descending order
+      events.sort((a, b) => b.created_at - a.created_at)
+
+      return events.slice(0, filter.limit)
+    }
+
+    return events
+  }
+
+  /**
+   * Asynchronously retrieves an event from a set of relays based on a provided filter.
+   * If no relays are specified, it defaults to using connected relays.
+   *
+   * @param filter - The filter criteria to find the event.
+   * @param relays - An optional array of relay URLs to search for the event.
+   * @returns Returns a promise that resolves to the found event or null if not found.
+   */
+  fetchEvent = async (
+    filter: Filter,
+    relays: string[] = []
+  ): Promise<Event | null> => {
+    const events = await this.fetchEvents(filter, relays)
+
+    // Sort events by creation date in descending order
+    events.sort((a, b) => b.created_at - a.created_at)
+
+    // Return the most recent event, or null if no events were received
+    return events[0] || null
+  }
+
+  /**
+   * Subscribes to events from multiple relays.
+   *
+   * This method connects to the specified relay URLs and subscribes to events
+   * using the provided filter. It handles incoming events through the given
+   * `eventHandler` callback and manages the subscription lifecycle.
+   *
+   * @param filter - The filter criteria to apply when subscribing to events.
+   * @param relayUrls - An optional array of relay URLs to connect to. The default relay URL (`SIGIT_RELAY`) is added automatically.
+   * @param eventHandler - A callback function to handle incoming events. It receives an `Event` object.
+   *
+   */
+  subscribeForEvents = async (
+    filter: Filter,
+    relayUrls: string[] = [],
+    eventHandler: (event: Event) => void
+  ) => {
+    if (!relayUrls.includes(SIGIT_RELAY)) {
+      /**
+       * NOTE: To avoid side-effects on external relayUrls array passed as argument
+       * re-assigned relayUrls with added sigit relay instead of just appending to same array
+       */
+      relayUrls = [...relayUrls, SIGIT_RELAY] // Add app relay to relays array if not exists already
+    }
+
+    // connect to all specified relays
+    const relays = await settleAllFullfilfedPromises(
+      relayUrls,
+      this.connectRelay
+    )
+
+    // Check if any relays are connected
+    if (relays.length === 0) {
+      throw new Error('No relay is connected to fetch events!')
+    }
+
+    const processedEvents: string[] = [] // To keep track of processed events
+
+    // Create a promise for each relay subscription
+    const subPromises = relays.map((relay) => {
+      return new Promise<void>((resolve) => {
+        // Subscribe to the relay with the specified filter
+        const sub = relay.subscribe([filter], {
+          // Handle incoming events
+          onevent: (e) => {
+            // Process event only if it hasn't been processed before
+            if (!processedEvents.includes(e.id)) {
+              processedEvents.push(e.id)
+              eventHandler(e) // Call the event handler with the event
+            }
+          },
+          // Handle the End-Of-Stream (EOSE) message
+          oneose: () => {
+            sub.close() // Close the subscription
+            resolve() // Resolve the promise when EOSE is received
+          }
+        })
+      })
+    })
+
+    // Wait for all subscriptions to complete
+    await Promise.allSettled(subPromises)
+  }
+
+  publish = async (
+    event: Event,
+    relayUrls: string[] = []
+  ): Promise<string[]> => {
+    if (!relayUrls.includes(SIGIT_RELAY)) {
+      /**
+       * NOTE: To avoid side-effects on external relayUrls array passed as argument
+       * re-assigned relayUrls with added sigit relay instead of just appending to same array
+       */
+      relayUrls = [...relayUrls, SIGIT_RELAY] // Add app relay to relays array if not exists already
+    }
+
+    // connect to all specified relays
+    const relays = await settleAllFullfilfedPromises(
+      relayUrls,
+      this.connectRelay
+    )
+
+    // Check if any relays are connected
+    if (relays.length === 0) {
+      throw new Error('No relay is connected to publish event!')
+    }
+
+    const publishedOnRelays: string[] = [] // List to track which relays successfully published the event
+
+    // Create a promise for publishing the event to each connected relay
+    const publishPromises = relays.map(async (relay) => {
+      try {
+        await Promise.race([
+          relay.publish(event), // Publish the event to the relay
+          timeout(20 * 1000) // Set a timeout to handle cases where publishing takes too long
+        ])
+        publishedOnRelays.push(relay.url) // Add the relay URL to the list of successfully published relays
+      } catch (err) {
+        console.error(`Failed to publish event on relay: ${relay.url}`, err)
+      }
+    })
+
+    // Wait for all publish operations to complete (either fulfilled or rejected)
+    await Promise.allSettled(publishPromises)
+
+    // Return the list of relay URLs where the event was published
+    return publishedOnRelays
+  }
+}
+
+export const relayController = RelayController.getInstance()